/* ==========================================================================
   Taxi Agadir Marrakech — booking flow (booking / confirm / thank-you)
   Extends the tokens & components defined in site.css.
   ========================================================================== */

.booking-wrapper{ max-width: 780px; margin: 0 auto; }

/* ---- Homepage/route-page "instant quote" search widget ---- */
.quote-card{ background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); min-width:0; }
.quote-card-header{ background:var(--ink); color:#fff; padding:22px 28px; display:flex; align-items:center; gap:12px; }
.quote-card-header svg{ color:var(--gold); flex-shrink:0; }
.quote-card-header span{ font-family:var(--font-head); font-weight:700; font-size:1.08rem; }
.quote-card-body{ padding:28px 28px 26px; }
@media (max-width:600px){ .quote-card-header{ padding:18px 20px; } .quote-card-body{ padding:22px 18px 20px; } }

.quote-field{ margin-bottom:16px; }
.quote-field label{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px; }
.quote-field select, .quote-field input{
  width:100%; padding:13px 16px; border-radius:10px; border:1px solid var(--border);
  background:var(--sand); font-size:15px; font-family:var(--font-body); color:var(--ink);
}
.quote-field select:focus, .quote-field input:focus{ outline:none; border-color:var(--primary); background:var(--white); }

.quote-swap{
  display:flex; align-items:center; justify-content:flex-start; width:30px; height:26px; margin:-6px 0 10px 2px;
  background:transparent; border:0; color:var(--gold); cursor:pointer; padding:0;
}
.quote-swap:hover{ color:var(--primary); }

.quote-row-3{ display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:6px; min-width:0; }
@media (min-width:520px){ .quote-row-3{ grid-template-columns:repeat(3,1fr); } }
.quote-row-3 > *{ min-width:0; }
.quote-row-3 .quote-field{ margin-bottom:0; }

.quote-submit{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--gold); color:var(--ink); font-weight:800; font-size:15.5px; padding:16px; border:0;
  border-radius:10px; cursor:pointer; transition:background .15s, transform .15s; margin-top:18px;
}
.quote-submit:hover{ background:#b8862a; transform:translateY(-1px); }
.quote-trust{ text-align:center; font-size:12.5px; color:var(--ink-soft); margin:14px 0 0; }
.quote-secondary{ display:flex; flex-direction:column; gap:8px; align-items:center; margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }

/* ---- Step indicator ---- */
.booking-steps{ display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:32px; }
.booking-step{ display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; }
.booking-step + .booking-step::before{
  content:""; position:absolute; right:100%; top:16px; width:70px; height:2px;
  background:var(--border); margin-right:8px;
}
.booking-step-num{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--white); border:2px solid var(--border); color:var(--ink-soft); font-weight:700; font-size:14px;
}
.booking-step.active .booking-step-num{ background:var(--primary); border-color:var(--primary); color:#fff; }
.booking-step.done .booking-step-num{ background:var(--accent); border-color:var(--accent); color:#fff; }
.booking-step-label{ font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.booking-step.active .booking-step-label{ color:var(--ink); }

/* ---- Shared cards ---- */
.empty-card, .when-card, .booking-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:32px; box-shadow:var(--shadow-sm); margin-bottom:24px;
}
.empty-card{ text-align:center; padding:60px 40px; }
.empty-card h2{ font-size:1.3rem; margin-bottom:10px; }
.empty-card p{ color:var(--ink-soft); font-size:.92rem; max-width:380px; margin:0 auto 24px; line-height:1.7; }
@media (max-width:600px){ .when-card, .booking-card{ padding:22px 18px; } }

.form-section-title{ font-size:15px; font-weight:800; color:var(--ink); margin-bottom:18px; text-transform:uppercase; letter-spacing:.03em; }

/* ---- Route summary bar ---- */
.route-bar{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px;
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px 22px; margin-bottom:22px; box-shadow:var(--shadow-sm);
}
.route-bar-from, .route-bar-to{ font-weight:800; color:var(--ink); font-size:.95rem; }
.route-bar-arrow{ color:var(--gold); font-size:1.15rem; font-weight:700; }
.route-bar-detail{ font-size:.82rem; color:var(--ink-soft); font-weight:600; }
.route-bar-return{ color:var(--primary-dark); }
.route-bar-edit{
  margin-left:auto; font-size:.82rem; font-weight:700; color:var(--ink-soft);
  padding:6px 12px; border:1px solid var(--border); border-radius:8px; transition:all .15s; white-space:nowrap;
}
.route-bar-edit:hover{ border-color:var(--primary); color:var(--primary); }

/* ---- Form primitives (extends .field/.form-row from site.css) ---- */
.form-row.three{ grid-template-columns:1fr; }
@media (min-width:640px){ .form-row.three{ grid-template-columns:repeat(3,1fr); } }
.form-row.single{ grid-template-columns:1fr; }
.req{ color:#d33; }
.hint{ color:var(--ink-soft); font-weight:400; text-transform:none; letter-spacing:0; }

.return-toggle{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; margin-top:6px; }
.return-fields{ display:none; margin-top:12px; }
.return-fields.visible{ display:block; }

.form-actions{ margin-top:24px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.form-back{ font-size:13.5px; font-weight:700; color:var(--ink-soft); }
.form-back:hover{ color:var(--primary); }
.form-alert-error{ color:#b02a2a; font-size:.88rem; margin-bottom:16px; padding:12px 16px; background:#fdeaea; border-radius:var(--radius); border:1px solid #f3c6c6; }

/* ---- Vehicle grid ---- */
.vehicle-grid{ display:flex; flex-direction:column; gap:14px; margin-bottom:22px; }
.vehicle-card{
  display:flex; align-items:center; gap:18px; padding:16px; border:2px solid var(--border);
  border-radius:var(--radius); cursor:pointer; transition:border-color .15s, box-shadow .15s;
}
.vehicle-card:hover{ border-color:var(--primary-light); }
.vehicle-card input[type="radio"]{ width:18px; height:18px; accent-color:var(--primary); flex-shrink:0; }
.vehicle-card:has(input:checked){ border-color:var(--primary); box-shadow:0 0 0 3px rgba(193,68,14,.12); }
.vehicle-card--unavailable{ opacity:.5; cursor:not-allowed; }
.vehicle-card-img{ width:100px; height:64px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--sand); border-radius:var(--radius-sm); overflow:hidden; }
.vehicle-card-img img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.vehicle-card-info{ flex:1; min-width:0; }
.vehicle-card-name{ font-weight:800; font-size:15px; color:var(--ink); margin-bottom:2px; }
.vehicle-card-model{ font-size:12.5px; color:var(--ink-soft); }
.vehicle-card-price-col{ text-align:right; flex-shrink:0; }
.vehicle-card-price{ font-weight:900; font-size:1.15rem; color:var(--primary); white-space:nowrap; }
.vehicle-card-price small{ display:block; font-weight:600; font-size:11px; color:var(--ink-soft); margin-top:2px; line-height:1.4; }
.price-unavailable{ font-size:.85rem; font-weight:700; color:var(--ink-soft); }

.no-price-box{ background:var(--sand); border-radius:var(--radius); padding:28px 24px; text-align:center; margin-bottom:8px; }
.no-price-title{ font-weight:700; color:var(--ink); margin-bottom:6px; }
.no-price-box p:not(.no-price-title){ color:var(--ink-soft); font-size:.88rem; margin-bottom:16px; }

/* ---- Why strip ---- */
.why-strip{ display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:center; margin-top:24px; text-align:center; }
.why-item{ display:flex; align-items:center; gap:8px; font-size:.83rem; color:var(--ink-soft); }
.why-item strong{ color:var(--ink); }

/* ---- Confirm trip summary ---- */
.confirm-trip-summary{
  display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center;
  background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:26px 30px; margin-bottom:20px;
}
.confirm-trip-item{ display:flex; flex-direction:column; gap:3px; }
.confirm-trip-label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.6); font-weight:700; }
.confirm-trip-value{ font-size:14.5px; font-weight:700; }
.confirm-trip-arrow{ color:var(--gold); font-size:1.2rem; }
.confirm-trip-price{ margin-left:auto; text-align:right; display:flex; flex-direction:column; gap:2px; }
.price-big{ font-size:1.8rem; font-weight:900; color:var(--gold); line-height:1.1; }
.confirm-trip-price small{ font-size:11px; color:rgba(255,255,255,.65); }

.return-info-block{
  background:#fff4e6; border:1px solid #ffd699; border-radius:var(--radius); padding:14px 18px;
  font-size:.85rem; color:#7a4a00; margin-bottom:22px; line-height:1.7;
}

.confirm-section{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px 30px; box-shadow:var(--shadow-sm); margin-bottom:20px; }
@media (max-width:600px){ .confirm-section{ padding:20px 18px; } }
.confirm-section-title{ font-size:15px; font-weight:800; color:var(--ink); margin-bottom:18px; }

/* ---- Payment ---- */
.payment-options{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.payment-option{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:16px 18px;
  border:2px solid var(--border); border-radius:var(--radius); cursor:pointer;
}
.payment-option input{ accent-color:var(--primary); }
.payment-option.selected, .payment-option:has(input:checked){ border-color:var(--primary); box-shadow:0 0 0 3px rgba(193,68,14,.12); }
.payment-option-name{ font-weight:700; font-size:14.5px; color:var(--ink); }
.payment-option-desc{ width:100%; font-size:12.5px; color:var(--ink-soft); padding-left:26px; }

.price-total-box{ display:flex; align-items:center; justify-content:space-between; background:var(--sand); border-radius:var(--radius); padding:18px 22px; }
.price-total-label{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); margin:0; }
.price-total-note{ font-size:12.5px; color:var(--ink-soft); margin:2px 0 0; }
.price-total-amount{ font-size:1.7rem; font-weight:900; color:var(--primary); margin:0; }

.confirm-terms{ text-align:center; color:var(--ink-soft); font-size:.8rem; margin-top:20px; line-height:1.6; }
.confirm-terms a{ color:var(--accent); font-weight:600; }

/* ---- Thank you ---- */
.thankyou-icon{
  width:64px; height:64px; border-radius:50%; background:rgba(14,110,107,.12);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
}
.thankyou-ref{
  display:inline-block; font-family:var(--font-head); font-size:1.3rem; font-weight:800; letter-spacing:.04em;
  color:var(--primary); background:var(--sand); border:1px dashed var(--gold); border-radius:var(--radius);
  padding:10px 24px; margin-bottom:8px;
}
.summary-strip{ display:flex; flex-direction:column; }
.summary-row{ display:flex; gap:16px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--border); }
.summary-row:last-child{ border-bottom:0; }
.summary-label{ min-width:130px; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); }
.summary-value{ font-weight:600; color:var(--ink); font-size:.95rem; }

.next-steps{ display:flex; flex-direction:column; gap:16px; list-style:none; padding:0; margin:0; }
.next-steps li{ display:flex; gap:14px; align-items:flex-start; }
.next-step-icon{
  width:26px; height:26px; background:rgba(14,110,107,.14); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
}
.next-step-title{ font-weight:700; color:var(--ink); font-size:.9rem; margin:0; }
.next-step-desc{ color:var(--ink-soft); font-size:.85rem; margin:3px 0 0; line-height:1.6; }

.thankyou-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.btn-lg{ padding:16px 40px; }