/*
 * Orlando Taxi Booking v1.0.0
 * Siyah & Gold Minimal Stil Dosyası (TR/EN)
 */

/* === TEMEL AYARLAR VE RENK PALETİ === */
:root{
  --rtb-bg:#f5f5f5;
  --rtb-surface:#030303;
  --rtb-text:#fff;
  --rtb-text-muted:#6c757d;
  --rtb-border:#dee2e6;
  --rtb-border-light:#e9ecef;   /* eklendi */
  --rtb-light:#f8f9fa;          /* eklendi */
  --rtb-primary-black:#fff;
  --rtb-primary-black-hover:#000000;
  --rtb-gold:#c9a45d;
  --rtb-gold-hover:#b89149;
  --rtb-gold-light:#f3ebd9;
  --rtb-error:#dc3545;
  --rtb-success:#198754;
  --rtb-shadow:0 4px 15px rgba(0,0,0,.07);
  --rtb-radius:4px;
  --rtb-input-focus-border:var(--rtb-gold);
  --rtb-input-focus-shadow:rgba(201,164,93,.25);
}

/* kök */
#otb-app-root,
#otb-app-root *{ box-sizing:border-box }

/* === ANA FORM KONTEYNERİ === */
.booking-container{
  background-color:var(--rtb-surface);
  border:1px solid var(--rtb-border);
	box-shadow:var(--rtb-shadow);
  width:100%;
  padding:2rem 2.5rem;
  margin:2.5rem auto;
  margin-top:0;
	margin-bottom:0 ;
}
.rtb-loading{ /* yükleniyor */
  padding:2rem; text-align:center; font-size:1.1rem; color:var(--rtb-text-muted);
}

/* === BAŞLIKLAR === */
.booking-container h1{
  font-size:1.7rem; font-weight:600; margin:0 0 1.8rem; text-align:center; color:var(--rtb-primary-black);
}
.booking-container h2{
  font-size:1.25rem; font-weight:600; margin:0 0 1.5rem; border-bottom:1px solid var(--rtb-border);
  padding-bottom:.6rem; color:var(--rtb-primary-black);
}

/* === ADIM GEÇİŞLERİ === */
.otb-step{ display:none }
.otb-step.active{ display:block; animation:otbFadeIn .3s ease-out }
@keyframes otbFadeIn{ from{opacity:0} to{opacity:1} }

/* === FORM GRUPLARI VE GİRDİLER === */
.form-group{ margin-bottom:0; position:relative }
.form-group label{
  display:block; font-weight:500; margin-bottom:.4rem; font-size:.9rem; color:var(--rtb-text-muted)
}
input[type="text"],input[type="datetime-local"],input[type="email"],input[type="tel"],select{
  display:block; width:100%; padding:.55rem .9rem; font-size:.95rem; font-weight:400; line-height:1.5;
  color:var(--rtb-text); background-color: #030303; background-clip:padding-box;
  border:1px solid var(--rtb-border); appearance:none; border-radius:var(--rtb-radius);
  transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
input[type="datetime-local"]{ padding-right:.5rem }
input[type="text"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus{
  color:var(--rtb-text); background-color:var(--rtb-surface); border-color:var(--rtb-gold); outline:0;
  box-shadow:0 0 0 .2rem var(--rtb-input-focus-shadow);
}
::placeholder{ color:#adb5bd; opacity:1 }
select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c9a45d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:16px 12px; padding-right:2.8rem;
}

/* === BUTONLAR === */
.btn-primary,.btn-secondary,.btn-whatsapp,#otb-confirm-location{
  display:inline-block; width:100%; padding:.75rem 1rem; font-size:1rem; font-weight:500; text-align:center; text-decoration:none;
  border:2px solid var(--rtb-primary-black); border-radius:var(--rtb-radius); cursor:pointer; background-color:black!important; color:#fff; transition:all .2s ease;
}
.btn-primary:hover,.btn-primary:focus{
  background-color:var(--rtb-gold); border-color:var(--rtb-gold-hover); box-shadow:0 0 0 .2rem var(--rtb-input-focus-shadow);
}
.btn-primary:disabled{ background-color:var(--rtb-text-muted); border-color:var(--rtb-text-muted); cursor:not-allowed; opacity:.7 }
.btn-secondary{
  background-color:transparent; border-color:var(--rtb-text-muted); color:var(--rtb-text-muted); margin-top:.75rem; font-weight:500;
}
.btn-secondary:hover{ background-color:var(--rtb-text-muted); color:#fff; border-color:var(--rtb-text-muted) }
.btn-whatsapp{ background-color:#25D366; border-color:#25D366; color:#fff; margin-bottom:1rem }
.btn-whatsapp:hover{ background-color:#1EBE57; border-color:#1EBE57; color:#fff }
#otb-confirm-location{ background-color:var(--rtb-success); border-color:var(--rtb-success); color:#fff; margin-top:.75rem }
#otb-confirm-location:hover{ background-color:#157347; border-color:#146c43 }

/* === HARİTA === */
#otb-map-container{ margin:1.5rem 0 }
#otb-map-container.map-hidden{ display:none }
#otb-map{
  height:300px; width:100%; border-radius:var(--rtb-radius); border:1px solid var(--rtb-border);
}

/* === LOKASYON FİLTRELEME === */
.otb-location-fieldset{
	margin-bottom: 0 !important;
}
.otb-location-fieldset legend{
  font-weight:600; font-size:1rem; padding:0 .5rem; margin-left:-.5rem; color:var(--rtb-text-muted); margin-top:0!important;
}
.location-type-selector{ margin-bottom:.8rem }
.location-type-selector select{ font-weight:500; background-color: ; border-color:var(--rtb-border-light) }
.otb-input-wrapper{ display:none; position:relative }

/* === ADRES (SOKAK/NO/HARİTA) === */
#otb-from-address-wrapper,#otb-to-address-wrapper{
  display:flex; flex-wrap:nowrap; align-items:stretch; margin-bottom:0;
}
.street-input{
  flex:1 1 auto; min-width:100px; border-top-right-radius:0; border-bottom-right-radius:0; margin-bottom:0;
}
.number-input{
  flex:0 0 55px; border-radius:0; border-left:0; border-right:0; text-align:center; margin-bottom:0;
}
.map-btn{
  flex:0 0 40px; width:40px; margin-top:0; border-top-left-radius:0; border-bottom-left-radius:0; padding:0; line-height:1;
  background: transparent ; border-left:0; color:var(--rtb-text-muted); transition:all .2s ease; margin-bottom:0; border-radius: 5px !important; border: 2px solid #030303;
}
.map-btn:hover{ background-color:var(--rtb-gold-light); color:var(--rtb-gold-hover); border-color:var(--rtb-gold) }

/* === ARAMA SONUÇLARI LİSTESİ === */
.otb-autocomplete-results{
  position:absolute; top:100%; left:0; right:calc(55px + 40px);
  background:var(--rtb-surface); border:1px solid var(--rtb-border); border-top:none;
  border-radius:0 0 var(--rtb-radius) var(--rtb-radius); box-shadow:0 8px 10px rgba(0,0,0,.06); z-index:1001;
  display:none; max-height:250px; overflow-y:auto;
}
.otb-autocomplete-results .result-item{
  padding:.5rem 1rem; cursor:pointer; border-bottom:1px solid var(--rtb-border-light); font-size:.88rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background-color .15s ease;
}
.otb-autocomplete-results .result-item:last-child{ border-bottom:none }
.otb-autocomplete-results .result-item:hover{ background-color:var(--rtb-gold-light); color:var(--rtb-primary-black) }

/* === ARAÇ SEÇİM EKRANI === */
.vehicle-option{
  display:flex; justify-content:space-between; align-items:center; padding:.9rem 1.1rem;
  border:1px solid darkgrey; border-radius:10px; margin-bottom:.75rem; cursor:pointer; transition:all .2s ease; background-color:var(--rtb-surface);
}
.vehicle-option:hover{ border-color:var(--rtb-gold); background-color:var(--rtb-surface); box-shadow:0 2px 5px rgba(0,0,0,.04) }
.vehicle-info span{ display:block; font-weight:500; font-size:1rem; color:var(--rtb-primary-black) }
.vehicle-info small{ color:var(--rtb-text-muted); font-size:.8rem }
.vehicle-price{ font-size:1.3rem; font-weight:600; color:var(--rtb-primary-black) }

/* === HATA MESAJI === */
#otb-error-message{
  background-color:#f8d7da; color:#721c24; border:1px solid #f5c6cb; padding:1rem 1.25rem;
  border-radius:var(--rtb-radius); margin-top:1.5rem; display:none; text-align:center; font-weight:500;
}

/* === ÖZET ALANI (ADIM 3) === */
#otb-selected-vehicle-summary{
  background-color:var(--rtb-light); border:1px solid darkgray; border-radius:var(--rtb-radius); padding:.9rem 1.1rem; margin-bottom:1.5rem; font-size:.9rem;
}
#otb-selected-vehicle-summary p{ margin:.2rem 0 }
#otb-selected-vehicle-summary strong{ color:var(--rtb-primary-black) }

/* Banka bilgisi kutusu */
.otb-bank-info{ padding:10px; border-radius:10px; border:1px solid darkgray; margin-bottom:20px!important }

/* === MOBİL UYUMLULUK === */
@media (max-width:768px){
  .booking-container{ padding:2rem 1.5rem; margin:2rem auto; margin-bottom: 0; margin-top:0;}
  .booking-container h1{ font-size:1.5rem }
  .booking-container h2{ font-size:1.15rem }
  .otb-location-fieldset{ padding:1rem 1rem 1.25rem }
  #otb-map-container{ padding-right:10px; padding-left:10px; margin:0 }
  .form-group:has(#otb-datetime),
  .form-group:has(#otb-passengers),
  .form-group:has(#otb-luggage),
  .form-group:has(#otb-name),
  .form-group:has(#otb-email),
  .form-group:has(#otb-phone){ padding-left:16px; padding-right:16px }
}
@media (max-width:480px){
  .booking-container{ padding:1.5rem 1rem; margin:1.5rem auto; margin-bottom: 0; margin-top:0; }
  .street-input{ min-width:0; font-size:.9rem }
  .number-input{ flex-basis:50px; font-size:.9rem; padding:.55rem .4rem }
  .map-btn{ flex-basis:38px; font-size:.85rem; margin-right:0 }
  .otb-autocomplete-results{ right:0 }
  .vehicle-option{ flex-direction:column; align-items:flex-start }
  .vehicle-price{ margin-top:.4rem; font-size:1.2rem }
  .btn-primary,.btn-secondary,.btn-whatsapp,#otb-confirm-location{ font-size:.9rem; padding:.7rem 1rem }
  #otb-map-container{ padding-right:10px; padding-left:10px }
}

/* === PATCH: 2 Kolon (Çıkış+Varış yan yana) + Beyaz Tema =================== */

/* — Beyaz tema override'ları — */
:root{
  --rtb-surface:#ffffff;
  --rtb-text:#111111;
  --rtb-primary-black:#111111;
  --rtb-border:#e5e7eb;
  --rtb-text-muted:#6b7280;
}

#otb-app-root .booking-container{
  background:#fff !important;
  color:#111 !important;
  border:1px solid var(--rtb-border) !important;
}

#otb-app-root .booking-container h1,
#otb-app-root .booking-container h2,
#otb-app-root .form-group label,
#otb-app-root .otb-location-fieldset legend{
  color:#111 !important;
  border-color:var(--rtb-border) !important;
}

#otb-app-root input[type="text"],
#otb-app-root input[type="email"],
#otb-app-root input[type="tel"],
#otb-app-root input[type="datetime-local"],
#otb-app-root select{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #d1d5db !important;
  box-shadow:none !important;
}
#otb-app-root ::placeholder{ color:#9aa3af; }

/* select üstündeki küçük select'ler */
#otb-app-root .location-type-selector select{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #d1d5db !important;
}

/* map ve autocomplete de beyaz */
#otb-app-root #otb-map{ background:#fff; border:1px solid var(--rtb-border) }
#otb-app-root .otb-autocomplete-results{
  background:#fff; border:1px solid var(--rtb-border);
}

/* Butonlar beyaz; hover'da siyah */
#otb-app-root .btn-primary,
#otb-app-root .btn-secondary,
#otb-app-root #otb-confirm-location{
  background:#030303 !important;
  color:#fff !important;
  border:2px solid #111 !important;
	font-weight: 600;
}
#otb-app-root .btn-primary:hover,
#otb-app-root .btn-secondary:hover,
#otb-app-root #otb-confirm-location:hover{
  background:#111 !important; color:#d4af37 !important;
}
/* WhatsApp rengi ayrı kalsın */
#otb-app-root .btn-whatsapp{
  background:#fff !important; color:#25D366 !important; border:1px solid #25D366 !important;
}
#otb-app-root .btn-whatsapp:hover{ background:#25D366 !important; color:#fff !important }

/* — 2 kolon düzen: sadece Step-1 içinde çıkış/varış yan yana — */
#otb-app-root #otb-step-1{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}

/* ÇIKIŞ & VARIŞ fieldset'leri 1'er kolon */
#otb-app-root #otb-from-fieldset,
#otb-app-root #otb-to-fieldset{
  grid-column: span 1;
}

/* Diğer alanlar (başlık, harita, tarih, yolcu/valiz) tam genişlik */
#otb-app-root #otb-step-1 > h2,
#otb-app-root #otb-map-container,
#otb-app-root #otb-step-1 .form-group:has(#otb-datetime),
#otb-app-root #otb-step-1 .form-group:has(#otb-passengers),
#otb-app-root #otb-step-1 .form-group:has(#otb-luggage){
  grid-column: 1 / -1;
}

/* Mobilde tekrar tek sütun */
@media (max-width: 768px){
  #otb-app-root #otb-step-1{ grid-template-columns:1fr }
  #otb-app-root #otb-from-fieldset,
  #otb-app-root #otb-to-fieldset{ grid-column:1 / -1 }
}

/* Step-1 iki kolon; boşluk kalmasın */
#rtb-step-1, #otb-step-1{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
  grid-auto-flow: row dense;
}

/* Çıkış ve Varış her biri birer kolon */
#rtb-from-fieldset, #otb-from-fieldset,
#rtb-to-fieldset,   #otb-to-fieldset{
  grid-column: span 1;
}

/* Harita konteyneri her zaman altta ve tam genişlikte */
#rtb-map-container, #otb-map-container{
  grid-column: 1 / -1 !important;
}

/* Mobilde tek kolon */
@media (max-width: 768px){
  #rtb-step-1, #otb-step-1{ grid-template-columns:1fr; }
}

/* Yolcu ve Bagajı Yan Yana Dizen CSS */
#otb-passenger-luggage-group {
    /* Flexbox'ı etkinleştirir ve öğeleri aynı satırda hizalar */
    display: flex;
    /* Öğeler arasında boşluk bırakmak için */
    gap: 20px; /* İhtiyaca göre bu boşluğu (gap) ayarlayabilirsiniz */
    /* Bu form-group'ın da diğerleri gibi bir miktar alt boşluğa sahip olmasını sağlar */
    margin-bottom: 15px;
}

/* Kapsayıcı içindeki her bir form-group'un eşit oranda yer kaplamasını sağlar */
#otb-passenger-luggage-group .form-group {
    flex: 1;
    /* Flexbox ile çalıştığı için genişlik ayarını iptal etmemiz gerekebilir */
    /* width: auto !important; */
    /* Eğer form-group'lar için özel bir margin varsa, onu burada sıfırlayabilirsiniz. */
    /* margin-bottom: 0; */
}

/* Buton için isteğe bağlı stil: Butonu alt kısma hizalamak için */
/* Eğer butonun diğer form-group'larla aynı hizada olmasını isterseniz bu kısım gereksizdir. */
/* Ancak bir önceki versiyonda butonda üstte bir etiket ve boşluk vardı. */
/* Bu CSS, butonun form-group'unun genişliğini ayarlamak için kullanılabilir. */
.otb-calc-btn {
    /* Eğer butonu diğer form gruplarının altına hizalamak istiyorsak, form-group'tan sonra alt alta kalmasını sağlamalıyız. */
    /* Eğer butonun da yan yana olmasını isteseydik, bu otb-calc-btn'i de flex kapsayıcı içine alırdık. */
}

/* Yolcu/Bagaj Grubu ve Hesapla Butonunun Konumlandırılması */

/* Yolcu ve Bagajı (Flexbox ile yan yana olan) tüm satırı kaplaması için */
#otb-passenger-luggage-group {
    /* Mevcut Flexbox stiliniz */
    display: flex;
    gap: 20px;
    margin-bottom: 0px;

    /* Grid içinde tam genişlik (2 kolonu da kapla) */
    grid-column: 1 / -1; 
}

/* Hesapla Butonunun daima tek başına, tam genişlikte kalması için */
.otb-calc-btn {
    /* Grid içinde tam genişlik (2 kolonu da kapla) */
    grid-column: 1 / -1;
    /* Butonun üstündeki boşluk için */
    margin-top: 15px; 
}

#otb-calculate-fare {
	margin-top: -10px;
}