/* ─── REZERVASYON SAYFASI - style.css variables ─── */
.rezervasyon-page-breadcrumb {
  padding: 100px 0 24px;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-grey-200);
}

.rezervasyon-page .breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.rezervasyon-page .breadcrumb a,
.rezervasyon-page .breadcrumb span {
  color: var(--c-grey-600);
}

.rezervasyon-page .breadcrumb a {
  text-decoration: none;
  transition: color 0.2s;
}

.rezervasyon-page .breadcrumb a:hover {
  color: var(--c-black);
}

.rezervasyon-hero {
  padding: 48px 24px 40px;
  background: var(--c-white);
}

.rezervasyon-page .booking-section {
  margin-top: 0;
  padding: 0 24px 48px;
  background: var(--c-grey-100);
}

.rezervasyon-page .booking-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ─── Booking progress: kart görünümü (border-radius, arka plan) ─── */
.booking-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 24px 20px;
  flex-wrap: wrap;
  background: var(--c-white);
  border-radius: 12px;
  border: 1px solid var(--c-grey-200);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
}

.booking-progress-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--c-grey-600);
}

.booking-progress-step.is-active {
  color: var(--c-black);
  font-weight: 500;
}

.booking-progress-step.is-active .booking-progress-num {
  background: var(--c-accent);
  color: var(--c-black);
  border-color: var(--c-accent);
}

.booking-progress-step.is-done .booking-progress-num {
  background: var(--c-grey-800);
  color: var(--c-white);
  border-color: var(--c-grey-800);
}

.booking-progress-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--c-grey-200);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

.booking-progress-label {
  white-space: nowrap;
}

.booking-progress-line {
  width: 40px;
  height: 2px;
  background: var(--c-grey-200);
  margin: 0 8px;
  flex-shrink: 0;
}


@media (max-width: 600px) {
  .booking-progress {
    padding: 16px 4px 16px;
    margin-bottom: 14px;
  }
  .booking-progress-label {
    display: none;
  }
  .booking-progress-line {
    width: 24px;
  }
}

/* ─── İki sütun: sol detay, sağ sticky (region-details-right gibi) ─── */
.booking-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  align-items: stretch;
}

.booking-details {
  min-width: 0;
  width: 100%;
}
.booking-card{
  padding: 24px;
}

.rezervasyon-page .booking-details .booking-card,
.rezervasyon-page .booking-widget-form {
  width: 100%;
  max-width: none;
}

.rezervasyon-page .booking-details .booking-card {
  margin-top: 0;
  background: var(--c-white);
  border-radius: 12px;
  border: 1px solid var(--c-grey-200);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* Sağ sütun: fiyat kartı + yardım kutusu birlikte sticky, birlikte aşağı yukarı kayar */
.sticky-price-card-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rezervasyon-page .sticky-price-card {
  flex-shrink: 0;
}

.sticky-sidebar-inner {
  position: sticky;
  top: calc(var(--nav-h, 72px) + 24px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sticky-price-card {
  background: var(--c-white);
  border-radius: 12px;
  border: 1px solid var(--c-grey-200);
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Help box: sticky kartın altında */
.rezervasyon-page .help-box {
  background: var(--c-white);
  border-radius: 12px;
  border: 1px solid var(--c-grey-200);
  padding: 20px;
  font-size: 14px;
  color: var(--c-grey-600);
  line-height: 1.6;
}

.rezervasyon-page .help-box-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-black);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rezervasyon-page .help-box-title svg {
  flex-shrink: 0;
  color: var(--c-accent);
}

.rezervasyon-page .help-box a {
  color: var(--c-accent);
  font-weight: 500;
  text-decoration: none;
}

.rezervasyon-page .help-box a:hover {
  text-decoration: underline;
}

.price-card-header {
  margin-bottom: 16px;
}

.price-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--c-black);
}

.price-card-route {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-black);
}

.price-card-route-from,
.price-card-route-to {
  color: var(--c-grey-800);
}

.price-card-route-arrow {
  color: var(--c-accent);
  font-weight: 700;
}

.price-card-meta {
  font-size: 13px;
  color: var(--c-grey-600);
  margin-bottom: 20px;
}

.price-card-meta--vehicle {
  margin-top: -8px;
  margin-bottom: 14px;
  font-weight: 500;
}

.price-card-meta-sep {
  margin: 0 6px;
  color: var(--c-grey-400);
}

/* Dönüş bloğu (gidiş-dönüş seçiliyken) */
.price-card-return {
  padding-top: 14px;
  border-top: 1px dashed var(--c-grey-200);
}

.price-card-return-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-grey-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.price-card-route--return,
.price-card-meta--return {
  margin-bottom: 4px;
  font-size: 14px;
}

.price-card-route--return {
  font-weight: 500;
  color: var(--c-grey-800);
}

.price-card-meta--return {
  font-size: 13px;
  color: var(--c-grey-600);
}

.price-card-amount {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 6px 0;
  border-top: 1px solid var(--c-grey-200);
  border-bottom: 1px solid var(--c-grey-200);
  margin-bottom: 12px;
}
.price-card-right {
  margin-left: auto; /* sağa yaslar */
  display: flex;
  gap: 4px; /* € ile value arasında boşluk */
  align-items: center;
}


.price-card-currency {
  font-size: 18px;
  color: var(--c-grey-600);
  flex-shrink: 0;
}

.price-card-value {
  font-family: var(--font-display), sans-serif;
  font-size: 34px;
  font-weight: 900;
  color: var(--c-accent);
  min-width: 1.5em;
  display: inline-block;
  margin-bottom: 4px;
}

.price-card-unit {
  font-size: 22px;
  color: var(--c-grey-600);
  flex-shrink: 0;
  font-family: var(--font-display), sans-serif;
  letter-spacing: 0.2px;
}

.price-card-note {
  font-size: 12px;
  color: var(--c-grey-600);
  line-height: 1.5;
  margin-bottom: 20px;
}

.price-card-includes-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-black);
  margin-bottom: 10px;
}

.price-card-includes-list {
  list-style: none;
  font-size: 13px;
  color: var(--c-grey-600);
  line-height: 1.8;
}

.price-card-includes-list li {
  padding-left: 20px;
  position: relative;
}

.price-card-includes-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--c-accent);
  font-weight: 700;
}

.booking-helper-sticky {
  display: none;
}

.booking-helper-sticky-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.booking-helper-sticky-label {
  font-size: 11px;
  color: var(--c-grey-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.booking-helper-sticky-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-black);
}

.booking-helper-sticky-btn {
  padding: 16px 6px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  background: var(--c-accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.booking-helper-sticky-btn:hover {
  background: var(--c-accent-dark, #b8925a);
}

.booking-helper-sticky-btn:active {
  transform: scale(0.98);
}

/* Mobil: tek sütun, fiyat kartı ve help altta */
@media (max-width: 900px) {
  .booking-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sticky-price-card-wrap {
    order: 2;
  }

  .sticky-sidebar-inner {
    position: static;
    top: auto;
  }

  .booking-helper-sticky {
    display: flex;
    position: fixed;
    top: 88%;
    left: 0;
    right: 0;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    z-index: 100;
    transition: background 0.4s var(--ease-out), border-color 0.4s;
    border: 1px solid transparent;
      border-top-color: transparent;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent;
    background: rgba(250, 250, 248, 0.52);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    margin: 8px;
    border-radius: 12px;
    border-color: var(--c-grey-200);
  }
}

@media (max-width: 600px) {
  .booking-helper-sticky {
    padding: 0 12px;
    margin: 8px;
  }
  .rezervasyon-hero {
    padding: 40px 16px 32px;
  }
  .rezervasyon-hero .section-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .rezervasyon-page .booking-section {
    padding:16px 8px 8px 8px;
  }
  .booking-container {
    padding: 0 0px;
  }
  .booking-card{
    padding: 20px;
  }
  .sticky-price-card {
    padding: 20px;
  }
  .price-card-value {
    font-size: 28px;
  }
}

/* ─── Çok adımlı rezervasyon: adımlar form genişliğinin tamamını kullansın ─── */
.rezervasyon-page .booking-widget-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Sadece is-visible olan adım görünsün; diğerleri gizli */
.rezervasyon-page .booking-widget-form .booking-step {
  display: none !important;
  width: 100%;
  min-width: 0;
}
.rezervasyon-page .booking-widget-form .booking-step.is-visible {
  display: grid !important;
}

/* Adım 1: 2 sütun grid; adım 2–5: tek sütun blok */
.rezervasyon-page .booking-widget-form .booking-step[data-step="1"].is-visible {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}
.rezervasyon-page .booking-widget-form .booking-step[data-step="2"].is-visible,
.rezervasyon-page .booking-widget-form .booking-step[data-step="3"].is-visible,
.rezervasyon-page .booking-widget-form .booking-step[data-step="4"].is-visible,
.rezervasyon-page .booking-widget-form .booking-step[data-step="5"].is-visible {
  display: block !important;
}
.rezervasyon-page .booking-step[data-step="1"] .widget-date-time-row,
.rezervasyon-page .booking-step[data-step="1"] .form-group-full,
.rezervasyon-page .booking-step[data-step="1"] .booking-roundtrip-fields,
.rezervasyon-page .booking-step[data-step="1"] .booking-step-actions {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  .rezervasyon-page .booking-step[data-step="1"] {
    grid-template-columns: 1fr;
  }
}

.step-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-black);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-grey-200);
}

.booking-roundtrip-fields {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--c-grey-200);
}

.booking-roundtrip-fields .step-subtitle {
  margin-bottom: 20px;
}

.booking-roundtrip-fields .widget-date-time-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.booking-roundtrip-fields .widget-date-time-row .form-group {
  margin-bottom: 0;
}

.booking-roundtrip-fields .form-group {
  margin-bottom: 20px;
}

.booking-roundtrip-fields .form-group:last-child {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .booking-roundtrip-fields .widget-date-time-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.booking-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--c-grey-200);
}

.rezervasyon-page .btn-next-step,
.rezervasyon-page .btn-prev-step {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.rezervasyon-page .btn-next-step {
  background: var(--c-accent);
  color: var(--c-black);
  border: none;
}

.rezervasyon-page .btn-next-step:hover {
  background: var(--c-accent-light);
}

.rezervasyon-page .btn-prev-step {
  background: transparent;
  color: var(--c-grey-600);
  border: 1px solid var(--c-grey-200);
}

.rezervasyon-page .btn-whatsapp-fallback {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  background: #25d366;
  color: #fff;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
  animation: wa-pulse 2s ease-in-out infinite;
}
.rezervasyon-page .btn-whatsapp-fallback:hover {
  background: #1ebe5d;
}
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(37,211,102,0); }
}

.rezervasyon-page .btn-prev-step:hover {
  background: var(--c-grey-100);
  color: var(--c-black);
}

/* Araç seçimi */
.vehicle-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vehicle-option {
  display: block;
  cursor: pointer;
}

.vehicle-option input { position: absolute; opacity: 0; pointer-events: none; }

.vehicle-option-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 2px solid var(--c-grey-200);
  border-radius: 12px;
  transition: border-color 0.2s, background 0.2s;
}

.vehicle-option input:checked + .vehicle-option-card {
  border-color: var(--c-accent);
  background: rgba(200, 169, 110, 0.08);
}

.vehicle-option-name {
  font-weight: 600;
  color: var(--c-black);
  min-width: 140px;
}

.vehicle-option-desc {
  font-size: 13px;
  color: var(--c-grey-600);
}

.vehicle-option-price {
  font-size: 13px;
  color: var(--c-grey-600);
  margin-left: auto;
}

.vehicle-option-price-extra {
  color: var(--c-accent);
  font-weight: 600;
}

/* Kişisel bilgiler */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.phone-input-wrap {
  display: flex;
  gap: 8px;
}

.phone-input-wrap .phone-number {
  flex: 1;
}

/* Form grupları – adım 2–5 arası düzenli boşluk (adım 1 grid’i etkilemez) */
.rezervasyon-page .booking-widget-form .booking-step[data-step="2"] .form-group,
.rezervasyon-page .booking-widget-form .booking-step[data-step="3"] .form-group,
.rezervasyon-page .booking-widget-form .booking-step[data-step="4"] .form-group,
.rezervasyon-page .booking-widget-form .booking-step[data-step="5"] .form-group {
  margin-bottom: 20px;
}

.rezervasyon-page .booking-widget-form .booking-step .form-group:last-child {
  margin-bottom: 0;
}

/* Form / widget etiketleri – sayfa genelinde tutarlı */
.rezervasyon-page .form-label,
.rezervasyon-page .booking-widget-form .widget-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-grey-800);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.rezervasyon-page .booking-widget-form .widget-label {
  text-transform: none;
  letter-spacing: 0.02em;
}

.rezervasyon-page .form-input,
.rezervasyon-page .form-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--c-grey-200);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.phone-input-wrap .phone-country{
  width: 6rem;
}


.rezervasyon-page .form-textarea {
  resize: vertical;
  min-height: 80px;
}

.passengers-names-wrap {
  margin-top: 20px;
}

.passenger-name-group {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-grey-200);
}

.passenger-name-group:last-child { border-bottom: none; }

.passenger-note {
  font-size: 13px;
  color: var(--c-grey-600);
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--c-grey-100);
  border-radius: 8px;
}

/* Çocuk koltuğu / İsimle karşılama: kart görünümü */
.rezervasyon-page .form-group .child-seat-options {
  background: var(--c-grey-100);
  border: 1px solid var(--c-grey-200);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.greet-by-name-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-grey-200);
}

.greet-by-name-wrap .child-seat-name-wrap {
  margin-top: 12px;
}

.passenger-name-group-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-grey-800);
  margin-bottom: 10px;
}

.passenger-name-group .form-row-2 { margin-top: 8px; }

/* Checkbox satır içi (çocuk koltuğu, isimle karşılama) */
.rezervasyon-page .child-seat-options .checkbox-inline,
.rezervasyon-page .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--c-grey-800);
  cursor: pointer;
  line-height: 1.5;
}

.rezervasyon-page .child-seat-options .checkbox-inline input,
.rezervasyon-page .checkbox-label input {
  margin-top: 2px;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--c-grey-300);
  accent-color: var(--c-accent);
  cursor: pointer;
}

.rezervasyon-page .child-seat-options .checkbox-inline input:checked,
.rezervasyon-page .checkbox-label input:checked {
  border-color: var(--c-accent);
}

.child-seat-name-wrap {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--c-grey-200);
}

/* Kullanım şartları checkbox */
.rezervasyon-page .checkbox-label {
  padding: 14px 18px;
  background: var(--c-grey-100);
  border: 1px solid var(--c-grey-200);
  border-radius: 12px;
}

.rezervasyon-page .checkbox-label input {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--c-grey-300);
}

.booking-summary {
  background: var(--c-grey-100);
  border-radius: 12px;
  padding: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-grey-800);
  margin-bottom: 24px;
}

.booking-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

.booking-summary-row strong { color: var(--c-black); }

.security-question-wrap {
  margin-bottom: 20px;
}

.rezervasyon-page .security-question-wrap .form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-grey-800);
  margin-bottom: 10px;
}

.rezervasyon-page .security-question-wrap #securityQuestionText {
  color: var(--c-accent);
  font-weight: 700;
}

@media (max-width: 480px){
  .rezervasyon-page .booking-widget-form .booking-step[data-step="1"].is-visible {
    grid-template-columns: 1fr;
    
  }
  .booking-tabs{
    margin-left:-20px;
    margin-right:-20px;
  }
}