/* ═══════════════════════════════════════
   CLEN | كلن — Booking — Shared Layout
   Responsive across mobile, tablet, desktop
   ═══════════════════════════════════════ */

:root {
  --booking-content-max: 100%;
  --booking-content-max-wide: 100%;
  --booking-step-padding: var(--page-padding);
  --booking-step-gap: 20px;
  --booking-title-size: clamp(19px, 4.8vw, 24px);
  --booking-subtitle-size: clamp(13px, 3.2vw, 15px);
}

.booking-app.app {
  background-color: var(--color-background);
  max-width: min(100%, var(--booking-content-max-wide));
}

.booking-app.app #app-header {
  display: none;
}

.booking-main.app__main--no-navbar {
  padding-inline: 0;
  padding-block-start: 12px;
  padding-block-end: calc(76px + env(safe-area-inset-bottom, 0px));
}

.booking-main .booking-spacer {
  height: 72px;
}

/* Shared step shell — one width system for all steps */
.booking-stepper,
.otp-flow,
.location-step,
.vehicle-step,
.appointment-step,
.payment-step,
.confirmation-step {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--booking-content-max);
  margin-inline: auto;
  padding-inline: var(--booking-step-padding);
}

.booking-step {
  width: 100%;
}

/* Shared step typography */
.location-step__title,
.vehicle-step__title,
.appointment-step__title,
.payment-header__title,
.confirmation-step__title,
.otp-panel__title {
  font-size: var(--booking-title-size);
  line-height: 1.35;
}

.location-step__subtitle,
.vehicle-step__subtitle,
.appointment-step__meta,
.payment-header__subtitle,
.confirmation-step__subtitle,
.otp-panel__subtitle {
  font-size: var(--booking-subtitle-size);
  line-height: 1.55;
}

.booking-footer {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  max-width: var(--booking-content-max);
  margin-inline: auto;
  padding: var(--space-3);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-background);
  border-block-start: none;
  box-shadow: none;
  box-sizing: border-box;
}

.booking-footer .btn-group {
  width: 100%;
}

.booking-footer .btn-group .btn {
  flex: 1;
}
.booking-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.booking-nav-btn__icon {
  display: block;
  flex-shrink: 0;
}

.booking-nav-btn__icon--next {
  filter: brightness(0) invert(1);
}

.booking-footer .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─── Tablet ─── */
@media (min-width: 481px) {
  :root {
    --booking-content-max: min(100%, 520px);
    --booking-content-max-wide: min(100%, 520px);
    --booking-step-padding: 20px;
    --booking-step-gap: 24px;
  }

  .booking-main.app__main--no-navbar {
    padding-block-start: 16px;
  }
}

/* ─── Large phones / small tablets ─── */
@media (min-width: 768px) {
  :root {
    --booking-content-max: min(100%, 580px);
    --booking-content-max-wide: min(100%, 580px);
    --booking-step-padding: 24px;
    --booking-step-gap: 28px;
    --otp-digit-size: 58px;
  }

  .booking-main.app__main--no-navbar {
    padding-block-start: 20px;
    padding-block-end: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* ─── Desktop ─── */
@media (min-width: 1200px) {
  :root {
    --booking-content-max: 640px;
    --booking-content-max-wide: 960px;
    --booking-step-padding: 0;
    --booking-step-gap: 32px;
    --otp-digit-size: 64px;
  }

  .booking-app.app {
    max-width: min(100%, var(--booking-content-max-wide));
  }

  .booking-main.app__main--no-navbar {
    padding-block-start: 32px;
    padding-block-end: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  .booking-stepper {
    margin-block-end: var(--space-10);
  }

  .booking-step--location .location-step {
    max-width: var(--booking-content-max-wide);
  }
}