/* booking-step1 page-specific CSS - extracted from booking-step1.html */
/* ============================================================
     * Booking flow — Step 1
     * ============================================================ */

    .bk-page { background: var(--color-cream); min-height: 100vh; }

    /* ---------- Simplified header ---------- */
    .bk-nav {
      position: sticky; top: 0; z-index: 50;
      background: var(--color-white);
      border-bottom: 1px solid var(--color-divider);
    }
    .bk-nav-inner {
      max-width: 1120px;
      margin: 0 auto;
      padding: 18px 32px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px;
    }
    .bk-help {
      display: flex; align-items: center; gap: 14px;
      font-family: var(--font-body);
      font-size: 14px;
    }
    .bk-help .muted { color: var(--color-mute); }
    .bk-help .wa-num {
      display: inline-flex; align-items: center; gap: 8px;
      color: var(--color-navy);
      font-weight: 700;
      border-bottom: 0;
    }
    .bk-help .wa-num:hover { color: var(--color-orange); }
    .bk-help .wa-icon { color: #25D366; display: inline-flex; }

    /* ---------- Progress bar ---------- */
    .bk-progress {
      background: var(--color-white);
      border-bottom: 1px solid var(--color-divider);
      padding: 18px 0;
    }
    .bk-progress-inner {
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 32px;
      display: flex; align-items: center; justify-content: center;
      gap: 8px;
    }
    .bk-step {
      display: flex; align-items: center; gap: 12px;
      flex-shrink: 0;
    }
    .bk-step-circle {
      width: 32px; height: 32px;
      display: grid; place-items: center;
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 14px;
      background: var(--color-white);
      color: var(--color-mute);
      border: 1.5px solid var(--color-border-strong);
      border-radius: 50%;
      flex-shrink: 0;
    }
    .bk-step.is-active .bk-step-circle {
      background: var(--color-navy);
      color: var(--color-white);
      border-color: var(--color-navy);
    }
    .bk-step.is-done .bk-step-circle {
      background: var(--color-navy);
      color: var(--color-white);
      border-color: var(--color-navy);
    }
    .bk-step-label {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 14px;
      color: var(--color-mute);
      letter-spacing: -0.005em;
      white-space: nowrap;
    }
    .bk-step.is-active .bk-step-label { color: var(--color-navy); }
    .bk-step-line {
      height: 2px;
      width: 80px;
      background: var(--color-border);
      flex-shrink: 0;
    }
    @media (max-width: 720px) {
      .bk-step-line { width: 24px; }
      .bk-step-label { font-size: 12px; }
    }

    /* ---------- Main layout ---------- */
    .bk-main {
      max-width: 1120px;
      margin: 0 auto;
      padding: 40px 32px 72px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 40px;
      align-items: start;
    }
    @media (max-width: 1024px) {
      .bk-main { grid-template-columns: 1fr; gap: 32px; }
      .bk-summary-col { order: 2; }
    }

    .bk-page-title {
      max-width: 1120px;
      margin: 0 auto;
      padding: 32px 32px 0;
    }
    .bk-page-title .crumb {
      font-family: var(--font-body);
      font-size: 13px;
      color: var(--color-mute);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
    }
    .bk-page-title h1 {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 36px;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--color-navy);
      margin: 0 0 8px;
    }
    .bk-page-title p {
      font-size: 15px;
      color: var(--color-body);
      margin: 0;
    }

    /* ---------- Form card ---------- */
    .bk-form {
      background: var(--color-white);
      border: 1px solid var(--color-border);
      padding: 40px;
    }
    @media (max-width: 720px) { .bk-form { padding: 28px 20px; } }

    .bk-section + .bk-section {
      margin-top: 36px;
      padding-top: 36px;
      border-top: 1px solid var(--color-divider);
    }
    .bk-section-h {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 18px;
      color: var(--color-navy);
      letter-spacing: -0.005em;
      margin: 0 0 6px;
    }
    .bk-section-note {
      font-size: 13px;
      color: var(--color-mute);
      margin: 0 0 24px;
      line-height: 1.5;
    }

    /* Fields */
    .bk-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 18px;
    }
    .bk-row.bk-row--full { grid-template-columns: 1fr; }
    .bk-row.bk-row--phone { grid-template-columns: 200px 1fr; }
    @media (max-width: 720px) {
      .bk-row, .bk-row.bk-row--phone { grid-template-columns: 1fr; }
    }
    .bk-field { display: flex; flex-direction: column; min-width: 0; }
    .bk-label {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 13px;
      color: var(--color-dark);
      letter-spacing: 0.02em;
      margin-bottom: 6px;
      display: flex; align-items: center; gap: 4px;
    }
    .bk-label .req { color: var(--color-orange); }
    .bk-sublabel {
      font-size: 12px;
      color: var(--color-mute);
      margin: -2px 0 8px;
      line-height: 1.4;
    }
    .bk-input, .bk-select {
      width: 100%;
      font-family: var(--font-body);
      font-size: 15px;
      color: var(--color-dark);
      background: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: 0;
      padding: 13px 14px;
      line-height: 1.4;
      transition: border-color 150ms var(--ease-out);
    }
    .bk-input:focus, .bk-select:focus {
      outline: none;
      border-color: var(--color-navy);
    }
    .bk-input.is-error, .bk-select.is-error { border-color: var(--color-error); }
    .bk-input::placeholder { color: var(--color-mute); }
    .bk-select {
      appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234B4F58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 38px;
    }
    .bk-error {
      font-size: 12px;
      color: var(--color-error);
      margin-top: 6px;
      line-height: 1.4;
    }

    /* Pill toggle group */
    .bk-pills {
      display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
    }
    .bk-pill {
      background: var(--color-white);
      border: 1px solid var(--color-border);
      color: var(--color-dark);
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 9px 16px;
      cursor: pointer;
      transition: all 150ms var(--ease-out);
    }
    .bk-pill:hover { border-color: var(--color-navy); }
    .bk-pill.is-active {
      background: var(--color-navy);
      border-color: var(--color-navy);
      color: var(--color-white);
    }

    /* Warning banner */
    .bk-warn {
      background: var(--color-yellow-soft);
      border: 1px solid var(--color-yellow);
      color: var(--color-navy);
      padding: 12px 14px;
      font-size: 13px;
      line-height: 1.5;
      margin-top: 10px;
      display: flex; gap: 10px; align-items: flex-start;
    }
    .bk-warn .icon { flex-shrink: 0; margin-top: 1px; color: var(--color-warning); }

    /* Visa radio cards */
    .bk-radio-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media (max-width: 720px) { .bk-radio-grid { grid-template-columns: 1fr; } }
    .bk-radio {
      background: var(--color-white);
      border: 1px solid var(--color-border);
      padding: 14px 16px;
      cursor: pointer;
      transition: all 150ms var(--ease-out);
      display: flex; align-items: center; gap: 12px;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 500;
      color: var(--color-dark);
    }
    .bk-radio:hover { border-color: var(--color-navy); }
    .bk-radio .dot {
      width: 16px; height: 16px;
      border-radius: 50%;
      border: 1.5px solid var(--color-border-strong);
      flex-shrink: 0;
      position: relative;
      transition: all 150ms var(--ease-out);
    }
    .bk-radio.is-active {
      border-color: var(--color-navy);
      border-width: 2px;
      padding: 13px 15px;
      color: var(--color-navy);
      font-weight: 700;
    }
    .bk-radio.is-active .dot {
      border-color: var(--color-navy);
      background: var(--color-navy);
    }
    .bk-radio.is-active .dot::after {
      content: "";
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 6px; height: 6px;
      background: var(--color-white);
      border-radius: 50%;
    }

    /* Landing time / departure time cards */
    .bk-timecards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    @media (max-width: 720px) { .bk-timecards { grid-template-columns: 1fr; } }
    .bk-timecard {
      background: var(--color-white);
      border: 1px solid var(--color-border);
      padding: 18px 20px;
      cursor: pointer;
      transition: all 150ms var(--ease-out);
      display: flex; flex-direction: column; gap: 4px;
    }
    .bk-timecard:hover { border-color: var(--color-navy); }
    .bk-timecard.is-active {
      border: 2px solid var(--color-navy);
      background: var(--color-cream-deep);
      padding: 17px 19px;
    }
    .bk-timecard .head {
      display: flex; align-items: center; gap: 10px;
    }
    .bk-timecard .head .icon-sun { color: var(--color-orange); }
    .bk-timecard .head .icon-moon { color: var(--color-navy); }
    .bk-timecard .label {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 15px;
      color: var(--color-navy);
      letter-spacing: -0.005em;
    }
    .bk-timecard .time {
      font-family: var(--font-body);
      font-size: 13px;
      color: var(--color-body);
      margin-top: 2px;
    }
    .bk-timecard .price-note {
      font-size: 12px;
      color: var(--color-mute);
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid var(--color-divider);
    }
    .bk-timecard.is-active .price-note { border-top-color: rgba(30,64,175,0.15); }

    /* Service option cards */
    .bk-services {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    @media (max-width: 900px) { .bk-services { grid-template-columns: 1fr; } }
    .bk-svc {
      position: relative;
      background: var(--color-white);
      border: 1px solid var(--color-border);
      padding: 24px 22px 20px;
      cursor: pointer;
      transition: all 150ms var(--ease-out);
      display: flex; flex-direction: column;
    }
    .bk-svc:hover { border-color: var(--color-navy); }
    .bk-svc.is-active {
      border: 2px solid var(--color-navy);
      background: var(--color-cream-deep);
      padding: 23px 21px 19px;
    }
    .bk-svc-badge {
      position: absolute;
      top: -10px; left: 16px;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 5px 10px;
    }
    .bk-svc-badge.popular { background: var(--color-orange); color: var(--color-white); }
    .bk-svc-badge.recommended { background: var(--color-navy); color: var(--color-yellow); }
    .bk-svc-name {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 17px;
      color: var(--color-navy);
      letter-spacing: -0.01em;
      margin: 0 0 4px;
    }
    .bk-svc-price {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 24px;
      color: var(--color-orange);
      letter-spacing: -0.01em;
      line-height: 1;
      margin-bottom: 4px;
    }
    .bk-svc-price small {
      font-size: 13px;
      color: var(--color-body);
      font-weight: 400;
      letter-spacing: 0;
    }
    .bk-svc-night-note {
      font-size: 12px;
      color: var(--color-mute);
      margin-bottom: 12px;
    }
    .bk-svc-desc {
      font-size: 13px;
      color: var(--color-body);
      line-height: 1.5;
      margin: 0 0 14px;
    }
    .bk-svc-features {
      list-style: none;
      padding: 0;
      margin: 0 0 14px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .bk-svc-features li {
      display: flex; align-items: flex-start; gap: 8px;
      font-size: 13px;
      color: var(--color-dark);
      line-height: 1.4;
    }
    .bk-svc-features .check {
      color: var(--color-navy);
      flex-shrink: 0;
      margin-top: 2px;
    }
    .bk-svc-link {
      font-size: 13px;
      color: var(--color-mute);
      text-decoration: underline;
      align-self: flex-start;
      margin-top: auto;
    }
    .bk-svc-link:hover { color: var(--color-orange); }

    /* Add-on rows */
    .bk-addons { display: flex; flex-direction: column; gap: 12px; }
    .bk-addon {
      background: var(--color-white);
      border: 1px solid var(--color-border);
      transition: border-color 150ms var(--ease-out);
    }
    .bk-addon.is-on { border-color: var(--color-navy); }
    .bk-addon-head {
      display: flex; align-items: center; gap: 16px;
      padding: 18px 22px;
    }
    .bk-addon-info { flex: 1; min-width: 0; }
    .bk-addon-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
    .bk-addon-title {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 15px;
      color: var(--color-navy);
      letter-spacing: -0.005em;
    }
    .bk-addon-badge {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 3px 8px;
      background: var(--color-orange);
      color: var(--color-white);
    }
    .bk-addon-badge.value { background: var(--color-yellow); color: var(--color-navy); }
    .bk-addon-sub {
      font-size: 13px;
      color: var(--color-mute);
      line-height: 1.5;
    }

    /* Toggle switch */
    .bk-switch {
      flex-shrink: 0;
      width: 48px; height: 26px;
      background: var(--color-border-strong);
      position: relative;
      cursor: pointer;
      transition: background-color 150ms var(--ease-out);
      border-radius: 999px;
      border: 0;
      padding: 0;
    }
    .bk-switch::after {
      content: "";
      position: absolute;
      top: 3px; left: 3px;
      width: 20px; height: 20px;
      background: var(--color-white);
      border-radius: 50%;
      transition: transform 150ms var(--ease-out);
    }
    .bk-switch.is-on { background: var(--color-navy); }
    .bk-switch.is-on::after { transform: translateX(22px); }

    /* Add-on expanded form */
    .bk-addon-body {
      padding: 0 22px 22px;
      border-top: 1px solid var(--color-divider);
      padding-top: 20px;
      margin-top: -2px;
    }
    .bk-readonly-chip {
      display: inline-flex; align-items: center;
      background: var(--color-cream-deep);
      border: 1px solid var(--color-border);
      padding: 12px 14px;
      font-size: 14px;
      color: var(--color-dark);
      gap: 8px;
    }
    .bk-readonly-chip .lock { color: var(--color-mute); }

    /* Mini service cards (add-on departure) */
    .bk-mini-svcs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media (max-width: 720px) { .bk-mini-svcs { grid-template-columns: 1fr; } }
    .bk-mini-svc {
      background: var(--color-white);
      border: 1px solid var(--color-border);
      padding: 14px 16px;
      cursor: pointer;
      transition: all 150ms var(--ease-out);
    }
    .bk-mini-svc:hover { border-color: var(--color-navy); }
    .bk-mini-svc.is-active {
      border: 2px solid var(--color-navy);
      background: var(--color-cream-deep);
      padding: 13px 15px;
    }
    .bk-mini-svc .name {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 14px;
      color: var(--color-navy);
      letter-spacing: -0.005em;
    }
    .bk-mini-svc .price {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 13px;
      color: var(--color-orange);
      margin-top: 4px;
    }
    .bk-mini-svc .strike {
      color: var(--color-mute);
      text-decoration: line-through;
      font-weight: 400;
      margin-right: 6px;
    }

    /* Car cards */
    .bk-cars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    @media (max-width: 720px) { .bk-cars { grid-template-columns: 1fr; } }
    .bk-car {
      background: var(--color-white);
      border: 1px solid var(--color-border);
      padding: 14px 16px;
      cursor: pointer;
      transition: all 150ms var(--ease-out);
    }
    .bk-car:hover { border-color: var(--color-navy); }
    .bk-car.is-active {
      border: 2px solid var(--color-navy);
      background: var(--color-cream-deep);
      padding: 13px 15px;
    }
    .bk-car .seater {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 15px;
      color: var(--color-navy);
      letter-spacing: -0.005em;
    }
    .bk-car .cap {
      font-size: 12px;
      color: var(--color-mute);
      margin-top: 2px;
    }
    .bk-car .price {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 13px;
      color: var(--color-orange);
      margin-top: 6px;
    }
    .bk-car .price .strike {
      color: var(--color-mute);
      text-decoration: line-through;
      font-weight: 400;
      margin-right: 4px;
    }

    /* Stepper */
    .bk-stepper {
      display: inline-flex; align-items: stretch;
      border: 1px solid var(--color-border);
      width: max-content;
    }
    .bk-stepper button {
      width: 40px; height: 44px;
      background: var(--color-white);
      border: 0;
      font-size: 20px;
      color: var(--color-navy);
      cursor: pointer;
      transition: background-color 150ms var(--ease-out);
    }
    .bk-stepper button:hover { background: var(--color-cream-deep); }
    .bk-stepper button:disabled { color: var(--color-border-strong); cursor: not-allowed; background: var(--color-white); }
    .bk-stepper .val {
      width: 48px;
      display: grid; place-items: center;
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 16px;
      color: var(--color-navy);
      border-left: 1px solid var(--color-border);
      border-right: 1px solid var(--color-border);
    }

    /* Section sub-label */
    .bk-sublabel-h {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 14px;
      color: var(--color-navy);
      letter-spacing: -0.005em;
      margin: 0 0 10px;
      display: block;
    }
    .bk-sublabel-note {
      font-size: 12px;
      color: var(--color-mute);
      margin: -8px 0 14px;
    }
    .bk-subblock + .bk-subblock { margin-top: 22px; }

    /* Submit */
    .bk-submit {
      width: 100%;
      margin-top: 36px;
      padding: 18px 24px;
      font-size: 14px;
      letter-spacing: 1.5px;
    }
    .bk-submit svg { margin-left: 2px; }
    .bk-security {
      margin-top: 14px;
      text-align: center;
      font-size: 12px;
      color: var(--color-mute);
      display: flex; align-items: center; justify-content: center; gap: 6px;
      flex-wrap: wrap;
    }
    .bk-security .lock { color: var(--color-success); display: inline-flex; }
    .bk-security .sep { color: var(--color-border-strong); }

    /* ---------- Order summary (right column) ---------- */
    .bk-summary-col { position: sticky; top: 88px; }
    @media (max-width: 1024px) { .bk-summary-col { position: static; } }

    .bk-summary {
      background: var(--color-white);
      border: 1px solid var(--color-border);
      padding: 28px;
    }
    .bk-summary h3 {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 18px;
      color: var(--color-navy);
      letter-spacing: -0.005em;
      margin: 0 0 6px;
    }
    .bk-summary-step {
      font-family: var(--font-body);
      font-size: 12px;
      color: var(--color-mute);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 22px;
    }
    .bk-sum-line {
      padding: 14px 0;
      border-top: 1px solid var(--color-divider);
    }
    .bk-sum-line:first-of-type { border-top: 0; padding-top: 0; }
    .bk-sum-line .row {
      display: flex; justify-content: space-between; align-items: baseline;
      gap: 12px;
    }
    .bk-sum-label {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 14px;
      color: var(--color-dark);
      line-height: 1.35;
    }
    .bk-sum-detail {
      font-size: 12px;
      color: var(--color-mute);
      line-height: 1.5;
      margin-top: 4px;
    }
    .bk-sum-amount {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 14px;
      color: var(--color-orange);
      white-space: nowrap;
      flex-shrink: 0;
      text-align: right;
    }
    .bk-sum-amount .strike {
      color: var(--color-mute);
      text-decoration: line-through;
      font-weight: 400;
      margin-right: 6px;
    }
    .bk-sum-extra .bk-sum-label,
    .bk-sum-extra .bk-sum-amount {
      font-weight: 400;
      color: var(--color-mute);
      font-size: 13px;
    }
    .bk-sum-discount .bk-sum-label,
    .bk-sum-discount .bk-sum-amount {
      color: var(--color-success);
      font-weight: 700;
      font-size: 13px;
    }
    .bk-sum-total {
      padding-top: 18px;
      border-top: 2px solid var(--color-navy);
      margin-top: 4px;
      display: flex; justify-content: space-between; align-items: baseline;
    }
    .bk-sum-total .label {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 18px;
      color: var(--color-navy);
      letter-spacing: -0.005em;
    }
    .bk-sum-total .amt {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 28px;
      color: var(--color-orange);
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .bk-sum-empty {
      padding: 24px 0;
      text-align: center;
      color: var(--color-mute);
      font-size: 13px;
      line-height: 1.6;
      border: 1px dashed var(--color-border);
      background: var(--color-cream);
    }
    .bk-sum-foot {
      margin-top: 16px;
      font-size: 12px;
      color: var(--color-mute);
      text-align: center;
      line-height: 1.55;
    }

    /* Help box under summary */
    .bk-help-box {
      background: var(--color-cream-deep);
      border: 1px solid var(--color-border);
      padding: 18px 20px;
      margin-top: 16px;
    }
    .bk-help-box .h {
      font-family: var(--font-heading);
      font-weight: 800;
      font-size: 14px;
      color: var(--color-navy);
      letter-spacing: -0.005em;
      margin-bottom: 10px;
    }
    .bk-help-box .row {
      display: flex; align-items: center; gap: 10px;
      font-size: 13px;
      color: var(--color-dark);
      padding: 4px 0;
    }
    .bk-help-box .row a {
      color: var(--color-navy);
      font-weight: 700;
      border-bottom: 0;
    }
    .bk-help-box .row a:hover { color: var(--color-orange); }
    .bk-help-box .icon { color: var(--color-navy); flex-shrink: 0; }
    .bk-help-box .wa { color: #25D366; }

    /* Smooth collapse */
    .bk-collapse {
      overflow: hidden;
      transition: max-height 240ms var(--ease-out);
    }