.booking-shell {
  width: var(--dx-container);
  margin: 18px auto 0;
  color: var(--dx-ink);
}
.booking-intro {
  position: relative;
  overflow: hidden;
  padding: 40px 48px;
  border-radius: var(--dx-radius);
  background: linear-gradient(115deg, var(--dx-navy), var(--dx-navy-2));
  color: rgba(255,255,255,.72);
  box-shadow: var(--dx-shadow);
}
.booking-intro::after { content: "د"; position: absolute; inset: -48px auto auto 34px; color: rgba(229,199,120,.08); font-family: var(--font-heading, inherit); font-size: 12rem; font-weight: 900; line-height: 1; }
.booking-intro h1 { position: relative; z-index: 1; margin: 4px 0 8px; color: var(--dx-white); font-size: clamp(2.15rem, 4vw, 3.7rem); }
.booking-intro > p:last-child { position: relative; z-index: 1; max-width: 650px; margin-bottom: 0; color: rgba(255,255,255,.72); }
.booking-kicker { position: relative; z-index: 1; color: var(--dx-gold-light); font-weight: 900; }
.booking-progress { margin: 22px 0; border: 1px solid var(--dx-line); border-radius: 18px; background: rgba(255,255,255,.76); box-shadow: var(--dx-shadow-small); }
.booking-progress li span { background: var(--dx-navy); color: var(--dx-gold-light); }
.booking-progress li { opacity: .48; }
.booking-progress li.is-current, .booking-progress li.is-complete { opacity: 1; }
.booking-progress li.is-complete span { background: var(--dx-gold); color: var(--dx-navy); }
.booking-layout { align-items: start; }
.booking-main { overflow: hidden; border: 1px solid rgba(7,31,42,.09); border-radius: var(--dx-radius); background: var(--dx-white); box-shadow: var(--dx-shadow-small); }
.booking-section { padding: 38px; border-bottom-color: var(--dx-line); }
.booking-step[hidden], .booking-summary[hidden], .booking-progress[hidden], .booking-step-actions[hidden], #submit-booking[hidden] { display: none !important; }
.booking-step { scroll-margin-top: 100px; }
.booking-step-actions { padding: 24px 38px 34px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.booking-step-actions--forward { justify-content: flex-end; border-top: 1px solid var(--dx-line); }
.booking-step-next, .booking-step-back { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; padding: 10px 22px; font-weight: 900; cursor: pointer; }
.booking-step-next { border: 0; background: var(--dx-navy); color: var(--dx-white); }
.booking-step-next:disabled { cursor: not-allowed; opacity: .42; }
.booking-step-back { border: 1px solid var(--dx-line); background: transparent; color: var(--dx-navy); }
.booking-section--review { min-height: 320px; }
.booking-review-note { margin-top: 28px; padding: 28px; border: 1px solid rgba(184,138,50,.28); border-radius: 18px; background: #fffaf0; }
.booking-review-note > strong { color: var(--dx-navy); font-size: 1.05rem; }
.booking-review-note ul { margin: 16px 0 0; padding-right: 20px; color: var(--dx-muted); }
.section-heading > span { background: var(--dx-navy); color: var(--dx-gold-light); }
.section-heading h2 { color: var(--dx-navy); }
.type-card { min-height: 106px; border: 1px solid var(--dx-line); border-radius: 18px; background: #fafaf7; color: var(--dx-ink); }
.type-card:hover { border-color: var(--dx-gold); }
.type-card.is-selected { border-color: var(--dx-gold); background: #fffaf0; box-shadow: inset 0 0 0 1px var(--dx-gold); }
.type-card.is-selected .type-icon { background: var(--dx-navy); color: var(--dx-gold-light); }
.price-panel { border-color: rgba(184,138,50,.3); border-radius: 16px; background: rgba(229,199,120,.14); }
.date-strip button, .time-grid button { min-height: 50px; border-radius: 14px; }
.date-strip button[aria-selected="true"], .time-grid button.is-selected { border-color: var(--dx-navy); background: var(--dx-navy); color: var(--dx-white); box-shadow: 0 8px 20px rgba(7,31,42,.18); }
.time-grid button:disabled { color: #8a9295; background: #eef0ee; text-decoration: none; }
.field input, .field textarea, .field select, .otp-auth input { min-height: 50px; border: 1px solid var(--dx-line); border-radius: 13px; background: #fbfcfa; }
.field input:focus, .field textarea:focus, .otp-auth input:focus { border-color: var(--dx-gold); box-shadow: 0 0 0 3px rgba(184,138,50,.16); }
.otp-auth { border: 1px solid rgba(184,138,50,.3); border-radius: 18px; background: #fffaf0; }
.otp-button, #otp-verify, #submit-booking { min-height: 50px; border-radius: 999px; }
.otp-button, #otp-verify { border: 1px solid var(--dx-navy); background: transparent; color: var(--dx-navy); }
#submit-booking { border: 0; background: var(--dx-gold); color: var(--dx-navy); box-shadow: 0 12px 28px rgba(184,138,50,.22); font-weight: 900; }
#submit-booking:hover { background: var(--dx-gold-light); }
.booking-summary { top: 20px; overflow: hidden; border: 1px solid rgba(7,31,42,.08); border-radius: var(--dx-radius); background: var(--dx-navy); color: rgba(255,255,255,.72); box-shadow: var(--dx-shadow); }
.booking-summary h2, .booking-summary strong { color: var(--dx-white); }
.summary-row { border-bottom-color: rgba(255,255,255,.11); }
.summary-price { color: var(--dx-gold-light) !important; }
.summary-note { border-color: rgba(229,199,120,.25); background: rgba(229,199,120,.08); color: rgba(255,255,255,.7); }
.booking-result { width: min(760px, calc(100vw - 32px)); margin: 40px auto 80px; padding: 54px; border-radius: var(--dx-radius); background: var(--dx-white); box-shadow: var(--dx-shadow); }
.booking-result__mark, .payment-result__icon { background: var(--dx-navy); color: var(--dx-gold-light); }
.payment-result-card, .booking-result-card { border-color: var(--dx-line); border-radius: 20px; }
.dadlex-booking.is-account-mode .booking-layout { grid-template-columns: minmax(0, 760px); justify-content: center; }
.dadlex-booking.is-account-mode .booking-main { width: 100%; }
.dadlex-booking.is-account-mode .booking-section--identity { border-bottom: 0; }

@media (max-width: 820px) {
  .booking-intro { padding: 36px 30px; }
  .booking-progress { overflow-x: auto; }
  .booking-layout { grid-template-columns: 1fr; }
  .booking-summary { position: static; }
}
@media (max-width: 520px) {
  .booking-shell { margin-top: 8px; }
  .booking-intro { padding: 28px 20px; }
  .booking-intro h1 { font-size: 2rem; }
  .booking-section { padding: 28px 18px; }
  .booking-step-actions { padding: 20px 18px 28px; align-items: stretch; flex-direction: column-reverse; }
  .booking-step-actions button { width: 100%; }
  .type-grid { grid-template-columns: 1fr; }
  .booking-progress ol { min-width: 560px; }
  .booking-result { margin-top: 16px; padding: 32px 20px; }
}