/* ============================================================
   Pindi Boys — BOOKING FORM STYLES (mobile-first, dark luxury)
   Reuses existing palette tokens from style.css.
   ============================================================ */

.bk-page {
  background:
    radial-gradient(900px 700px at 80% -10%, rgba(29,173,83,.10), transparent 55%),
    radial-gradient(900px 700px at 0% 20%, rgba(212,175,55,.10), transparent 55%),
    linear-gradient(180deg, #04070d 0%, #05080f 60%, #04070d 100%);
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-body, system-ui);
  padding-bottom: 220px;
}

.bk-wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }

/* ============================================================
   HEADER — compact top bar with back/logo + step badge
   ============================================================ */
.bk-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(4,7,12,.88);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.bk-top a, .bk-top button.bk-back {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--ink); text-decoration: none;
}
.bk-top h1 {
  font-family: var(--font-head, system-ui); font-weight: 800;
  font-size: 1.05rem; line-height: 1.1; margin: 0;
  flex: 1; min-width: 0;
}
.bk-top .bk-step-pill {
  padding: 6px 12px; border-radius: 999px;
  font: 700 .72rem/1 var(--font-head);
  background: linear-gradient(120deg, var(--gold), var(--gold-2));
  color: #1c1500;
}

/* ============================================================
   PROGRESS — 3 dots/segments
   ============================================================ */
.bk-progress {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  list-style: none; padding: 14px 16px 6px; margin: 0;
}
.bk-progress li {
  display: flex; flex-direction: column; gap: 6px;
  font: 600 .68rem/1 var(--font-body);
  color: var(--ink-mute); text-transform: uppercase; letter-spacing: .12em;
}
.bk-progress li::after {
  content: ""; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  transition: background .3s;
}
.bk-progress li.is-done::after,
.bk-progress li.is-active::after { background: linear-gradient(120deg, var(--gold), var(--gold-2)); }
.bk-progress li.is-active { color: var(--gold-2); }
.bk-progress li.is-done { color: var(--ink-soft); }

/* ============================================================
   FIELDSETS / STEPS
   ============================================================ */
.bk-step {
  display: none;
  padding: 14px 16px 20px;
  border: 0; margin: 0;
  animation: bkIn .3s ease both;
}
.bk-step.is-active { display: block; }
@keyframes bkIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.bk-step legend, .bk-step h2 {
  font-family: var(--font-head); font-weight: 800;
  font-size: 1.35rem; line-height: 1.18;
  margin: 0 0 6px;
}
.bk-step .bk-sub {
  font-size: .88rem; color: var(--ink-soft);
  margin: 0 0 18px;
}

/* ============================================================
   FORM FIELDS
   ============================================================ */
.bk-field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.bk-field > label,
.bk-field > .lbl {
  font: 600 .82rem/1.2 var(--font-body);
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px;
}
.bk-field > label .req { color: var(--gold-2); }
.bk-field > label .hint { color: var(--ink-mute); font-weight: 500; font-size: .72rem; margin-left: auto; }

.bk-field input[type="text"],
.bk-field input[type="email"],
.bk-field input[type="tel"],
.bk-field input[type="date"],
.bk-field input[type="datetime-local"],
.bk-field input[type="number"],
.bk-field select,
.bk-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 14px 14px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  color: var(--ink);
  font: 500 .95rem var(--font-body, system-ui);
  outline: none;
  transition: border-color .2s, background .2s;
  -webkit-appearance: none; appearance: none;
}
.bk-field input:focus,
.bk-field select:focus,
.bk-field textarea:focus {
  border-color: rgba(212,175,55,.45);
  background: rgba(255,255,255,.06);
}
.bk-field input::placeholder,
.bk-field textarea::placeholder { color: var(--ink-mute); }

.bk-field select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5cee0' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 40px; }

.bk-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 380px) { .bk-grid-2 { grid-template-columns: 1fr; } }

/* Inline error message */
.bk-error {
  color: #ff7a8a; font-size: .76rem; margin-top: 2px;
  display: none;
}
.bk-field.is-invalid .bk-error { display: block; }
.bk-field.is-invalid input,
.bk-field.is-invalid select { border-color: rgba(255,122,138,.55); background: rgba(255,122,138,.06); }

/* Radio / checkbox cards */
.bk-choices { display: grid; gap: 8px; }
.bk-choices.bk-choices-2 { grid-template-columns: 1fr 1fr; }
.bk-choice {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.bk-choice input { accent-color: var(--gold-2); margin: 0; flex: none; width: 18px; height: 18px; }
.bk-choice .ti { display: block; font: 700 .9rem var(--font-head); color: var(--ink); }
.bk-choice .su { display: block; font: 500 .75rem var(--font-body); color: var(--ink-mute); margin-top: 2px; }
.bk-choice:has(input:checked) {
  border-color: rgba(212,175,55,.55);
  background: linear-gradient(170deg, rgba(212,175,55,.10), rgba(29,173,83,.04));
}
.bk-choice.is-disabled { opacity: .55; pointer-events: none; }
.bk-choice.is-disabled .su { color: #ff7a8a; }

/* Car select with image preview */
.bk-car-preview {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: linear-gradient(170deg, #0d1424, #0a0f1c);
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 16px;
  margin-bottom: 10px;
  min-height: 78px;
}
.bk-car-preview img { width: 86px; height: 64px; object-fit: cover; border-radius: 10px; background: #0a1530; flex: none; }
.bk-car-preview .meta { flex: 1; min-width: 0; }
.bk-car-preview .meta b { display: block; font: 700 .95rem var(--font-head); color: var(--ink); }
.bk-car-preview .meta small { display: block; font-size: .75rem; color: var(--ink-mute); margin-top: 2px; }
.bk-car-preview .meta .pr { font: 700 .85rem var(--font-head); color: var(--gold-2); margin-top: 4px; }
.bk-car-preview.is-empty { color: var(--ink-mute); padding: 18px; justify-content: center; font-size: .85rem; }
.bk-car-preview.is-empty img { display: none; }

/* Notice (info / warning) */
.bk-notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  background: linear-gradient(170deg, rgba(212,175,55,.10), rgba(255,255,255,.02));
  border: 1px solid rgba(212,175,55,.25);
  border-radius: 14px;
  font-size: .82rem; line-height: 1.4; color: var(--ink-soft);
  margin: 8px 0;
}
.bk-notice.bk-notice-warn {
  background: linear-gradient(170deg, rgba(255,122,138,.10), rgba(255,255,255,.02));
  border-color: rgba(255,122,138,.35);
}
.bk-notice svg { width: 18px; height: 18px; color: var(--gold-2); flex: none; margin-top: 1px; }
.bk-notice.bk-notice-warn svg { color: #ff7a8a; }
.bk-notice b { color: var(--gold-2); font-weight: 700; }

/* Terms list */
.bk-terms-list {
  list-style: none; padding: 0; margin: 14px 0 8px;
  display: grid; gap: 8px;
}
.bk-terms-list li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .82rem; line-height: 1.4; color: var(--ink-soft);
}
.bk-terms-list li::before {
  content: "•"; color: var(--gold-2); font-weight: 800; flex: none;
}

/* ============================================================
   SUMMARY (sticky on mobile, in-step on step 3)
   ============================================================ */
.bk-summary {
  margin: 16px 0 4px;
  padding: 14px 16px;
  background: linear-gradient(170deg, #0d1424, #0a0f1c);
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 18px;
  box-shadow: 0 16px 40px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
}
.bk-summary h3 { font: 700 .9rem var(--font-head); margin: 0 0 8px; color: var(--ink); letter-spacing: .02em; }
.bk-summary .row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 4px 0;
  font-size: .82rem;
  color: var(--ink-soft);
}
.bk-summary .row b { color: var(--ink); font-weight: 600; }
.bk-summary .row .v { color: var(--ink); font: 600 .82rem var(--font-body); white-space: nowrap; }
.bk-summary .row.muted .v { color: var(--ink-mute); }
.bk-summary .row.discount .v { color: var(--pb-green-2, #25d366); }
.bk-summary hr { border: 0; border-top: 1px dashed rgba(255,255,255,.08); margin: 8px 0; }
.bk-summary .total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 6px;
}
.bk-summary .total .lbl { font: 700 .85rem var(--font-head); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; }
.bk-summary .total .val { font: 800 1.35rem var(--font-head); color: var(--gold-2); }
.bk-summary .total .val small { font-size: .68rem; color: var(--ink-mute); font-weight: 500; letter-spacing: 0; }

/* ============================================================
   ACTIONS — prev / next / submit
   ============================================================ */
.bk-actions {
  display: flex; gap: 8px; margin-top: 18px;
}
.bk-btn {
  flex: 1; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: 14px;
  font: 700 .95rem var(--font-head);
  border: 0; cursor: pointer;
  text-decoration: none;
  transition: transform .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.bk-btn:active { transform: scale(.97); }
.bk-btn-prev {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--ink-soft);
  flex: 0 1 110px;
}
.bk-btn-next,
.bk-btn-submit {
  background: linear-gradient(120deg, var(--gold), var(--gold-2));
  color: #1c1500;
  box-shadow: 0 12px 28px -10px rgba(212,175,55,.55);
}
.bk-btn-submit { background: linear-gradient(135deg, #1dad53, #25d366); color: #04250f; box-shadow: 0 12px 28px -10px rgba(37,211,102,.55); }
.bk-btn:disabled { opacity: .6; pointer-events: none; }

/* ============================================================
   STICKY BOTTOM BAR — total + primary action
   ============================================================ */
.bk-sticky {
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  z-index: 80;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(8,12,20,.92);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 18px;
  box-shadow: 0 20px 50px -16px rgba(0,0,0,.7);
}
.bk-sticky .lbl { font: 600 .7rem var(--font-body); color: var(--ink-mute); text-transform: uppercase; letter-spacing: .1em; }
.bk-sticky .val { font: 800 1.1rem var(--font-head); color: var(--gold-2); line-height: 1; margin-top: 2px; }
.bk-sticky .val small { font-size: .62rem; color: var(--ink-mute); font-weight: 500; letter-spacing: 0; }
.bk-sticky .bk-btn { flex: 0 1 160px; min-height: 44px; padding: 10px 14px; font-size: .88rem; }
.bk-sticky .meta { flex: 1; min-width: 0; }

/* ============================================================
   SUCCESS SCREEN
   ============================================================ */
.bk-success {
  display: none;
  text-align: center;
  padding: 40px 24px;
  background: linear-gradient(170deg, #0d1424, #0a0f1c);
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 22px;
  margin: 22px 16px;
}
.bk-success.is-shown { display: block; animation: bkIn .35s ease both; }
.bk-success .icn {
  width: 64px; height: 64px; margin: 0 auto 14px;
  border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #1dad53, #25d366);
  color: #fff;
  box-shadow: 0 12px 28px -8px rgba(37,211,102,.6);
}
.bk-success .icn svg { width: 32px; height: 32px; }
.bk-success h2 { font: 800 1.4rem var(--font-head); margin: 0 0 8px; }
.bk-success p { color: var(--ink-soft); font-size: .95rem; margin: 0 0 18px; line-height: 1.5; }
.bk-success .bk-success-actions { display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin: 0 auto; }
.bk-success .bk-success-actions a { padding: 13px 18px; border-radius: 14px; font: 700 .9rem var(--font-head); text-decoration: none; }
.bk-success .a-wa { background: linear-gradient(135deg, #1dad53, #25d366); color: #04250f; }
.bk-success .a-pay { background: linear-gradient(120deg, var(--gold), var(--gold-2)); color: #1c1500; box-shadow: 0 14px 32px -10px rgba(212,175,55,.6); font-size: .98rem; padding: 16px 18px; }
.bk-success .a-pay:hover { transform: translateY(-1px); }
.bk-success .a-mail { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); color: var(--ink); }

/* ============================================================
   DESKTOP — slightly more breathing room
   ============================================================ */
@media (min-width: 768px) {
  .bk-page { padding-bottom: 120px; }
  .bk-wrap { padding: 0 24px; }
  .bk-step { padding: 22px 0; }
  .bk-step h2 { font-size: 1.65rem; }
  .bk-sticky { left: 50%; transform: translateX(-50%); max-width: 720px; width: calc(100% - 32px); }
}

/* ============================================================
   DESKTOP UPGRADE — Wide professional layout
   Form on left + persistent Summary card on right
   ============================================================ */
.bk-desk-summary { display: none; }

@media (min-width: 1024px) {
  .bk-wrap {
    max-width: 1180px;
    padding: 0 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 36px;
    align-items: start;
    margin-top: 16px;
  }
  #bookingForm {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 22px;
    padding: 8px 30px 28px;
    box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
  }
  .bk-step { padding: 26px 0 14px; }
  .bk-step h2 { font-size: 1.9rem; }
  .bk-step .bk-sub { font-size: 1rem; margin-bottom: 26px; color: var(--ink-soft); }

  /* Larger, more breathable form fields on desktop */
  .bk-field label {
    font-size: 0.86rem;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
  }
  .bk-field input,
  .bk-field select,
  .bk-field textarea {
    min-height: 52px;
    font-size: 1rem;
    padding: 13px 16px;
    border-radius: 12px;
  }
  .bk-grid-2 { gap: 18px; }
  .bk-actions { margin-top: 22px; }
  .bk-actions .bk-btn,
  .bk-btn-next,
  .bk-btn-back,
  .bk-btn-submit {
    min-height: 54px;
    font-size: 1.02rem;
    padding: 15px 32px;
    border-radius: 14px;
  }
  .bk-progress { padding: 18px 0 14px; max-width: 1180px; margin: 0 auto; }

  /* Hide sticky mobile footer on desktop — summary card replaces it */
  .bk-sticky { display: none; }

  /* Persistent right-column summary card */
  .bk-desk-summary {
    display: block;
    position: sticky;
    top: 96px;
    background: linear-gradient(160deg, rgba(212,175,55,0.07), rgba(212,175,55,0.02) 40%, rgba(255,255,255,0.025) 100%);
    border: 1px solid rgba(212,175,55,0.20);
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
  }
  .bk-desk-summary h3 {
    font-family: var(--font-head, system-ui);
    font-weight: 800;
    font-size: 1.06rem;
    margin: 0 0 16px;
    color: var(--ink);
    letter-spacing: 0.01em;
  }
  .bk-desk-summary .bk-ds-car {
    display: flex; gap: 12px; align-items: center;
    padding: 12px;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    margin-bottom: 14px;
  }
  .bk-desk-summary .bk-ds-car img {
    width: 78px; height: 58px; object-fit: cover;
    border-radius: 10px; flex-shrink: 0;
    background: rgba(255,255,255,0.04);
  }
  .bk-desk-summary .bk-ds-car .bk-ds-car-info b {
    display: block; font-weight: 700; color: var(--ink);
    font-size: 0.97rem; margin-bottom: 3px;
  }
  .bk-desk-summary .bk-ds-car .bk-ds-car-info span {
    font-size: 0.79rem; color: var(--ink-soft);
  }
  .bk-desk-summary .bk-ds-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.06);
    font-size: 0.9rem;
  }
  .bk-desk-summary .bk-ds-row:last-of-type { border-bottom: 0; }
  .bk-desk-summary .bk-ds-row .lbl { color: var(--ink-soft); }
  .bk-desk-summary .bk-ds-row .val { color: var(--ink); font-weight: 600; text-align: right; }
  .bk-desk-summary .bk-ds-total {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid rgba(212,175,55,0.26);
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .bk-desk-summary .bk-ds-total .lbl {
    font-family: var(--font-head); font-weight: 700;
    font-size: 0.84rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-soft);
  }
  .bk-desk-summary .bk-ds-total .val {
    font-family: var(--font-head); font-weight: 800;
    font-size: 1.75rem; color: #f1c75a; line-height: 1;
  }
  .bk-desk-summary .bk-ds-total .val small {
    display: block; font-size: 0.66rem;
    color: var(--ink-mute); font-weight: 500;
    letter-spacing: 0.05em; margin-top: 4px;
  }
  .bk-desk-summary .bk-ds-trust {
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: grid; gap: 9px;
  }
  .bk-desk-summary .bk-ds-trust-item {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 0.82rem; color: var(--ink-soft); line-height: 1.4;
  }
  .bk-desk-summary .bk-ds-trust-item svg {
    flex-shrink: 0; color: #f1c75a; margin-top: 1px;
  }
  .bk-desk-summary .bk-ds-help {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 14px;
    background: #25D366;
    color: #fff !important;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.93rem;
    transition: filter 0.15s;
  }
  .bk-desk-summary .bk-ds-help:hover { filter: brightness(1.1); }
}

/* ============================================================
   V2 — PREMIUM 2-COL LAYOUT (form left / sticky summary right)
   ============================================================ */
.bk-v2 .bk-top { gap: 10px; }
.bk-v2 .bk-top-help {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(37,211,102,.14); color: #25d366;
  border: 1px solid rgba(37,211,102,.35);
  font: 700 .78rem var(--font-head); text-decoration: none;
  transition: filter .2s;
}
.bk-v2 .bk-top-help:hover { filter: brightness(1.15); }

.bk-layout {
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
  max-width: 1280px; margin: 0 auto;
  padding: 18px 16px calc(108px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 900px) {
  .bk-layout {
    grid-template-columns: minmax(0, 1fr) 400px;
    padding: 36px 36px 80px;
    gap: 40px;
    align-items: start;
  }
}
@media (min-width: 1280px) {
  .bk-layout { padding: 40px 48px 96px; gap: 48px; }
}

/* ---------- SECTIONS ---------- */
.bk-v2 .bk-section {
  background: linear-gradient(170deg, rgba(13,20,36,.85), rgba(10,15,28,.85));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 22px;
  padding: 20px 18px;
  margin-bottom: 16px;
  box-shadow: 0 20px 50px -28px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
}
@media (min-width: 900px) {
  .bk-v2 .bk-section {
    padding: 32px 34px;
    margin-bottom: 22px;
    border-radius: 24px;
  }
  .bk-v2 .bk-section .bk-field { margin-bottom: 18px; }
  .bk-v2 .bk-section .bk-field label { font-size: 0.88rem; margin-bottom: 8px; color: var(--ink-soft); letter-spacing: 0.015em; }
  .bk-v2 .bk-section .bk-field input,
  .bk-v2 .bk-section .bk-field select,
  .bk-v2 .bk-section .bk-field textarea {
    min-height: 54px;
    font-size: 1rem;
    padding: 14px 18px;
    border-radius: 14px;
  }
  .bk-v2 .bk-section .bk-grid-2 { gap: 18px; }
  .bk-v2 .bk-section h2 { font-size: 1.45rem; }
  .bk-v2 .bk-section .bk-sec-sub { font-size: 0.92rem; }
  .bk-v2 .bk-sec-num {
    flex: 0 0 44px;
    width: 44px; height: 44px;
    font-size: 0.92rem;
  }
}

.bk-sec-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.bk-sec-num {
  flex: 0 0 38px; width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(212,175,55,.22), rgba(212,175,55,.08));
  border: 1px solid rgba(212,175,55,.35);
  color: var(--gold-2);
  font: 800 .82rem var(--font-head); letter-spacing: .02em;
}
.bk-sec-head h2 { font: 800 1.25rem/1.15 var(--font-head); margin: 0 0 4px; color: var(--ink); }
.bk-sec-sub    { font: 500 .85rem/1.4 var(--font-body); color: var(--ink-mute); margin: 0; }

/* Hide V1 step-wizard chrome on V2 page */
.bk-v2 .bk-progress, .bk-v2 .bk-step-pill { display: none !important; }
.bk-v2 .bk-step { display: block !important; padding: 0 !important; border: 0 !important; }
.bk-v2 .bk-step legend { display: none; }
.bk-v2 .bk-step h2 { display: none; }
.bk-v2 .bk-step .bk-sub { display: none; }
.bk-v2 .bk-actions { display: none; }
.bk-v2 .bk-sticky { display: none; }

/* ---------- LICENCE NOTICE (auto-rendered when <6 months) ---------- */
.bk-lic-notice {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(212,175,55,.10);
  border: 1px solid rgba(212,175,55,.30);
  color: var(--ink-soft);
  font-size: .82rem; line-height: 1.4;
}
.bk-lic-notice b { color: var(--gold-2); }

/* ---------- ADD-ON TOGGLES ---------- */
.bk-toggles { display: flex; flex-direction: column; gap: 10px; }
.bk-toggle {
  display: grid;
  grid-template-columns: 44px 1fr auto 48px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .15s;
  position: relative;
}
.bk-toggle:active { transform: scale(.99); }
.bk-toggle:has(input:checked) {
  border-color: rgba(212,175,55,.45);
  background: linear-gradient(170deg, rgba(212,175,55,.10), rgba(29,173,83,.04));
}
.bk-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.bk-toggle-ic {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  flex: none;
}
.bk-toggle-body { min-width: 0; }
.bk-toggle-body b { display: block; font: 700 .92rem var(--font-head); color: var(--ink); }
.bk-toggle-body small { display: block; font: 500 .72rem/1.35 var(--font-body); color: var(--ink-mute); margin-top: 2px; }
.bk-toggle-price {
  font: 700 .82rem var(--font-head);
  color: var(--gold-2);
  white-space: nowrap;
}
.bk-toggle-switch {
  width: 44px; height: 26px;
  background: rgba(255,255,255,.10);
  border-radius: 999px; position: relative;
  transition: background .3s;
  flex: none;
}
.bk-toggle-switch::after {
  content: ""; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; position: absolute; top: 3px; left: 3px;
  transition: transform .3s, background .3s;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.bk-toggle:has(input:checked) .bk-toggle-switch { background: linear-gradient(135deg, #1dad53, #25d366); }
.bk-toggle:has(input:checked) .bk-toggle-switch::after { transform: translateX(18px); }
@media (max-width: 380px) {
  .bk-toggle { grid-template-columns: 38px 1fr 42px; padding: 11px 12px; gap: 10px; }
  .bk-toggle-ic { width: 38px; height: 38px; }
  .bk-toggle-price { display: none; }
  .bk-toggle-switch { width: 42px; height: 24px; }
  .bk-toggle-switch::after { width: 18px; height: 18px; }
  .bk-toggle:has(input:checked) .bk-toggle-switch::after { transform: translateX(18px); }
}

/* =====================================================================
   RENTAL TERMS — Premium UAE-standard styling
   ===================================================================== */

/* Section-level glow on terms */
.bk-v2 .bk-terms-section {
  border: 1px solid rgba(212, 175, 55, 0.16);
  box-shadow:
    0 24px 60px -28px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(212, 175, 55, 0.04);
  position: relative;
  overflow: hidden;
}
.bk-v2 .bk-terms-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.7), transparent);
  pointer-events: none;
}

/* Gold warning banner at top of terms */
.bk-terms-banner {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(212,175,55,0.13), rgba(212,175,55,0.04) 60%, rgba(255,255,255,0.025));
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 14px;
  margin-bottom: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.bk-terms-banner-icon {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #f1c75a, #c89b3c);
  color: #1a1300;
  box-shadow: 0 4px 14px -4px rgba(212, 175, 55, 0.6);
  flex-shrink: 0;
}
.bk-terms-banner-text {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.bk-terms-banner-text b {
  font: 800 0.88rem/1.2 var(--font-head, system-ui);
  color: #f1c75a;
  letter-spacing: 0.02em;
}
.bk-terms-banner-text span {
  font: 500 0.82rem/1.45 var(--font-body, system-ui);
  color: var(--ink-soft);
}

/* Premium terms list */
.bk-v2 .bk-terms-list-premium {
  margin: 0; padding: 0;
  list-style: none;
  display: grid; gap: 12px;
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  padding: 18px 18px 18px 22px;
}
.bk-v2 .bk-terms-list-premium li {
  font: 500 0.88rem/1.55 var(--font-body, system-ui);
  color: var(--ink, #ece6d3);
  padding-left: 18px;
  position: relative;
}
.bk-v2 .bk-terms-list-premium li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f1c75a, #c89b3c);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18);
}
.bk-v2 .bk-terms-list-premium li.has-sub .t-main {
  display: block;
  font-weight: 700;
  color: #f1c75a;
  margin-bottom: 6px;
}
.bk-v2 .bk-terms-sublist {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.bk-v2 .bk-terms-sublist li {
  padding-left: 14px;
  font: 500 0.84rem/1.5 var(--font-body, system-ui);
  color: var(--ink-soft);
}
.bk-v2 .bk-terms-sublist li::before {
  content: "";
  width: 4px; height: 4px;
  background: rgba(212, 175, 55, 0.55);
  box-shadow: none;
  top: 0.6em;
}

/* Premium checkbox area */
.bk-v2 .bk-terms-field {
  margin-top: 20px; margin-bottom: 0;
}
.bk-v2 .bk-terms-accept {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px;
  background: linear-gradient(160deg, rgba(212,175,55,0.06), rgba(255,255,255,0.025));
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.bk-v2 .bk-terms-accept:hover {
  background: linear-gradient(160deg, rgba(212,175,55,0.10), rgba(255,255,255,0.04));
  border-color: rgba(212, 175, 55, 0.40);
}
.bk-v2 .bk-terms-accept input[type="checkbox"] {
  position: absolute;
  opacity: 0; pointer-events: none;
  width: 0; height: 0;
}
.bk-v2 .bk-terms-tick {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(212, 175, 55, 0.45);
  color: transparent;
  margin-top: 1px;
  transition: all 0.18s;
}
.bk-v2 .bk-terms-accept:has(input:checked) .bk-terms-tick {
  background: linear-gradient(135deg, #f1c75a, #c89b3c);
  border-color: #f1c75a;
  color: #0c0a02;
  box-shadow: 0 4px 16px -4px rgba(212, 175, 55, 0.7);
}
.bk-v2 .bk-terms-accept:has(input:checked) {
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.06), rgba(212, 175, 55, 0.05));
  border-color: rgba(34, 197, 94, 0.32);
}
.bk-v2 .bk-terms-accept-text {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.bk-v2 .bk-terms-accept-text .ti {
  font: 700 0.92rem/1.4 var(--font-body, system-ui);
  color: var(--ink, #ece6d3);
}
.bk-v2 .bk-terms-accept-text .su {
  font: 500 0.78rem/1.45 var(--font-body, system-ui);
  color: var(--ink-mute, #837d70);
}

/* Error state */
.bk-terms-err { display: none; margin-top: 8px; color: #ff6b6b; font: 500 0.82rem var(--font-body); }
.bk-v2 .bk-field.is-invalid .bk-terms-err { display: block; }
.bk-v2 .bk-field.is-invalid .bk-terms-accept {
  border-color: rgba(255, 107, 107, 0.45);
  background: linear-gradient(160deg, rgba(255, 107, 107, 0.06), rgba(255, 255, 255, 0.025));
}

/* Mobile tightening */
@media (max-width: 640px) {
  .bk-v2 .bk-terms-list-premium { padding: 16px 14px 16px 18px; gap: 11px; }
  .bk-v2 .bk-terms-list-premium li { font-size: 0.84rem; padding-left: 16px; }
  .bk-v2 .bk-terms-banner { padding: 12px 14px; gap: 12px; }
  .bk-v2 .bk-terms-banner-icon { flex: 0 0 34px; width: 34px; height: 34px; }
  .bk-v2 .bk-terms-banner-text b { font-size: 0.84rem; }
  .bk-v2 .bk-terms-banner-text span { font-size: 0.78rem; }
  .bk-v2 .bk-terms-accept { padding: 14px 14px; gap: 12px; }
  .bk-v2 .bk-terms-accept-text .ti { font-size: 0.88rem; }
  .bk-v2 .bk-terms-accept-text .su { font-size: 0.75rem; }
}

/* Desktop — extra breathing room */
@media (min-width: 900px) {
  .bk-v2 .bk-terms-list-premium { padding: 22px 24px 22px 26px; gap: 14px; }
  .bk-v2 .bk-terms-list-premium li { font-size: 0.92rem; }
  .bk-v2 .bk-terms-accept { padding: 18px 22px; gap: 16px; }
}

/* Legacy classes kept for v1 compatibility (no-op on v2) */
.bk-terms-box { display: none; }

/* ---------- PAYMENT CARDS ---------- */
.bk-pay-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .bk-pay-grid { grid-template-columns: 1fr 1fr; } }
.bk-pay-grid .bk-choice {
  padding: 14px 16px;
  border-radius: 14px;
  flex-direction: row;
}
.bk-pay-grid .bk-choice .ti { font-size: .92rem; }
.bk-pay-grid .bk-choice:has(input:checked) {
  border-color: rgba(37,211,102,.45);
  background: linear-gradient(170deg, rgba(37,211,102,.10), rgba(212,175,55,.04));
}

/* ---------- BIG SUBMIT CTA ---------- */
.bk-btn-submit-lg {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px;
  margin: 8px 0 8px;
  padding: 16px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1dad53, #25d366);
  color: #04250f;
  font: 800 1.05rem var(--font-head);
  border: 0; cursor: pointer;
  box-shadow: 0 18px 38px -14px rgba(37,211,102,.55), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .15s, filter .2s;
  -webkit-tap-highlight-color: transparent;
}
.bk-btn-submit-lg:hover { filter: brightness(1.06); }
.bk-btn-submit-lg:active { transform: scale(.985); }

/* ============================================================
   RIGHT-SIDE STICKY SUMMARY CARD (desktop)
   ============================================================ */
.bk-summary-card {
  background: linear-gradient(170deg, rgba(13,20,36,.92), rgba(10,15,28,.92));
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 22px;
  padding: 20px 18px;
  box-shadow: 0 24px 60px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
}
@media (min-width: 900px) {
  .bk-summary-card {
    position: sticky; top: 92px; align-self: start;
    padding: 28px 26px;
    border-radius: 24px;
  }
  .bk-summary-card .bk-sc-head h3 { font-size: 1.3rem; }
  .bk-summary-card .bk-sc-eyebrow { font-size: 0.68rem; }
  .bk-sc-total .val { font-size: 1.8rem !important; }
}
.bk-sc-head { margin-bottom: 14px; }
.bk-sc-eyebrow { font: 800 .62rem var(--font-head); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }
.bk-sc-head h3 { font: 800 1.15rem var(--font-head); color: var(--ink); margin: 4px 0 0; }

.bk-sc-car {
  display: flex; gap: 12px; align-items: center;
  padding: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  margin-bottom: 14px;
}
.bk-sc-car-img {
  width: 86px; height: 64px;
  border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, #0a1530, #04070d);
  position: relative; flex: none;
  display: grid; place-items: center;
}
.bk-sc-car-img img { width: 100%; height: 100%; object-fit: cover; display: none; }
.bk-sc-car-img img[src]:not([src=""]) { display: block; }
.bk-sc-car-img img[src]:not([src=""]) ~ .bk-sc-img-fallback { display: none; }
.bk-sc-img-fallback { font-size: 26px; opacity: .5; }
.bk-sc-car-meta { flex: 1; min-width: 0; }
.bk-sc-car-meta b { display: block; font: 800 .98rem var(--font-head); color: var(--ink); }
.bk-sc-car-meta small { display: block; font: 500 .72rem var(--font-body); color: var(--ink-mute); margin-top: 2px; }
.bk-sc-rate { margin-top: 6px; font: 700 .82rem var(--font-head); color: var(--gold-2); }
.bk-sc-rate small { font-weight: 500; color: var(--ink-mute); }

.bk-sc-lines {
  display: grid; gap: 4px;
  padding: 12px 0;
  border-block: 1px dashed rgba(255,255,255,.08);
  margin-bottom: 12px;
}
.bk-sc-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font: 500 .8rem var(--font-body); color: var(--ink-soft);
}
.bk-sc-line .v { font-weight: 600; color: var(--ink); white-space: nowrap; }
.bk-sc-line.muted .v { color: var(--ink-mute); font-weight: 500; }

.bk-sc-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 6px 0 12px;
}
.bk-sc-total .lbl { font: 700 .78rem var(--font-head); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; }
.bk-sc-total .val { text-align: right; font: 800 1.5rem var(--font-head); color: var(--gold-2); line-height: 1.05; }
.bk-sc-total .val small { font: 500 .62rem var(--font-body); color: var(--ink-mute); letter-spacing: 0; }

.bk-sc-deposit {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 12px;
  background: rgba(212,175,55,.10);
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 12px;
  font: 500 .76rem/1.4 var(--font-body); color: var(--ink-soft);
  margin-bottom: 14px;
}
.bk-sc-deposit svg { color: var(--gold-2); flex: none; }
.bk-sc-deposit b { color: var(--ink); font-weight: 700; }

.bk-sc-trust { display: grid; gap: 8px; }
.bk-trust-row {
  display: flex; align-items: center; gap: 9px;
  font: 500 .78rem var(--font-body); color: var(--ink-soft);
}
.bk-trust-row svg { flex: none; }
.bk-trust-row b { color: var(--ink); font-weight: 700; }

/* ============================================================
   MOBILE STICKY BOTTOM BAR
   ============================================================ */
.bk-mobile-bar {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(8,12,20,.94);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(212,175,55,.22);
  border-radius: 18px;
  box-shadow: 0 20px 50px -16px rgba(0,0,0,.75);
}
.bk-mb-info { flex: 1; min-width: 0; }
.bk-mb-info .lbl { font: 600 .65rem var(--font-body); color: var(--ink-mute); text-transform: uppercase; letter-spacing: .12em; display: block; }
.bk-mb-info .val { font: 800 1.05rem var(--font-head); color: var(--gold-2); line-height: 1; margin-top: 2px; display: block; }
.bk-mb-info .val small { font-size: .62rem; color: var(--ink-mute); font-weight: 500; }
.bk-mb-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 18px; min-height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1dad53, #25d366);
  color: #04250f;
  border: 0; cursor: pointer;
  font: 800 .9rem var(--font-head);
  box-shadow: 0 12px 28px -10px rgba(37,211,102,.55);
}
.bk-mb-cta:active { transform: scale(.97); }

@media (min-width: 980px) {
  /* On desktop, sticky summary card replaces the mobile bottom bar */
  .bk-mobile-bar { display: none !important; }
  .bk-v2.bk-page { padding-bottom: 60px !important; }
}

/* =====================================================================
   MOBILE: show full premium summary card AT THE TOP so it matches
   desktop right-rail content (full car info, line items, total, deposit,
   trust badges). Previously the summary card was rendered at the very
   bottom (after the long form) and mobile users only saw the small
   floating bottom bar — a major data-parity gap vs. desktop.
   ===================================================================== */
@media (max-width: 899px) {
  /* CSS Grid `order` works to reorder the summary card above the form */
  .bk-v2 .bk-summary-card { order: -1; }
  .bk-v2 .bk-form { order: 1; }

  /* Make the mobile summary card a touch more compact so it doesn't
     push the form too far down on first paint */
  .bk-v2 .bk-summary-card {
    padding: 16px 16px 18px;
    border-radius: 18px;
    margin-bottom: 4px;
  }
  .bk-v2 .bk-summary-card .bk-sc-head { margin-bottom: 10px; }
  .bk-v2 .bk-summary-card .bk-sc-head h3 { font-size: 1.05rem; }
  .bk-v2 .bk-summary-card .bk-sc-car { padding: 10px; margin-bottom: 10px; }
  .bk-v2 .bk-summary-card .bk-sc-car-img { width: 72px; height: 56px; }
  .bk-v2 .bk-summary-card .bk-sc-lines { padding: 10px 0; margin-bottom: 10px; }
  .bk-v2 .bk-summary-card .bk-sc-total { padding: 4px 0 10px; }
  .bk-v2 .bk-summary-card .bk-sc-total .val { font-size: 1.3rem; }
  .bk-v2 .bk-summary-card .bk-sc-deposit { padding: 8px 10px; margin-bottom: 10px; font-size: .72rem; }
  .bk-v2 .bk-summary-card .bk-sc-trust { gap: 6px; }
  .bk-v2 .bk-summary-card .bk-trust-row { font-size: .72rem; gap: 8px; }
  .bk-v2 .bk-summary-card .bk-trust-row b { font-weight: 700; }

  /* Tighten the mobile bottom bar so it doesn't duplicate the now-visible
     summary card — keep only the Continue CTA prominent. */
  .bk-v2 .bk-mobile-bar { padding: 10px 12px; }
  .bk-v2 .bk-mb-info .lbl { font-size: .58rem; }
  .bk-v2 .bk-mb-info .val { font-size: .92rem; }
}


/* =====================================================================
   PAYMENT OPTIONS — Brand badges (Card, Tabby, Tamara)
   ===================================================================== */
.bk-pay-opt .bk-pay-content {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0; width: 100%;
}
.bk-pay-opt .bk-pay-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.bk-pay-opt .bk-pay-head .ti {
  font-weight: 700;
  color: var(--ink, #ece6d3);
  flex: 1 1 auto; min-width: 0;
}
.bk-pay-opt .su {
  font: 500 0.82rem/1.45 var(--font-body);
  color: var(--ink-mute, #837d70);
}

/* Brand badges */
.bk-pay-badge {
  font: 800 0.6rem var(--font-head, system-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.bk-pay-badge-wa {
  background: linear-gradient(135deg, #25d366, #128c4f);
  color: #fff;
}
.bk-pay-badge-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #cfc8b9;
}
.bk-pay-badge-tabby {
  background: linear-gradient(135deg, #3bffc9, #1ec48e);
  color: #032a1f;
}
.bk-pay-badge-tamara {
  background: linear-gradient(135deg, #ff7a5a, #f1416c);
  color: #fff;
}

/* Per-installment live amount info */
.bk-pay-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font: 600 0.82rem var(--font-body);
  color: #f1c75a;
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.22);
  padding: 4px 10px;
  border-radius: 999px;
  align-self: flex-start;
}
.bk-pay-info b {
  color: #f1c75a;
  font-weight: 800;
}

/* Make selected payment option more prominent */
.bk-pay-opt:has(input:checked) {
  border-color: rgba(212,175,55,0.5);
  background: linear-gradient(160deg, rgba(212,175,55,0.10), rgba(255,255,255,0.04));
}

/* Hover state */
.bk-pay-opt:not(.is-disabled):hover {
  border-color: rgba(212,175,55,0.3);
}

/* Brand-specific selected glows */
.bk-pay-opt[data-brand="tabby"]:has(input:checked) {
  border-color: rgba(59,255,201,0.45);
  background: linear-gradient(160deg, rgba(59,255,201,0.10), rgba(255,255,255,0.03));
  box-shadow: 0 0 0 1px rgba(59,255,201,0.18), 0 12px 32px -16px rgba(59,255,201,0.4);
}
.bk-pay-opt[data-brand="tamara"]:has(input:checked) {
  border-color: rgba(255,122,90,0.45);
  background: linear-gradient(160deg, rgba(255,122,90,0.10), rgba(255,255,255,0.03));
  box-shadow: 0 0 0 1px rgba(255,122,90,0.18), 0 12px 32px -16px rgba(255,122,90,0.4);
}
.bk-pay-opt[data-brand="whatsapp"]:has(input:checked) {
  border-color: rgba(37,211,102,0.45);
  background: linear-gradient(160deg, rgba(37,211,102,0.10), rgba(255,255,255,0.03));
  box-shadow: 0 0 0 1px rgba(37,211,102,0.18), 0 12px 32px -16px rgba(37,211,102,0.4);
}

/* Mobile: badge under title for breathing room */
@media (max-width: 480px) {
  .bk-pay-opt .bk-pay-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .bk-pay-badge { font-size: 0.56rem; padding: 3px 8px; }
}

/* =====================================================================
   ID UPLOAD / OCR section
   ===================================================================== */
.bk-v2 .bk-id-section .bk-sec-num {
  background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(59,130,246,.08));
  border-color: rgba(59,130,246,.35);
  color: #93c5fd;
}
.bk-id-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .bk-id-grid { grid-template-columns: 1fr 1fr; }
}
.bk-id-slot { display: flex; flex-direction: column; gap: 10px; }
.bk-id-drop {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(170deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1.5px dashed rgba(212, 175, 55, 0.32);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .12s;
}
.bk-id-drop:hover { border-color: rgba(212,175,55,.6); background: rgba(212,175,55,.05); }
.bk-id-drop:active { transform: scale(.99); }
.bk-id-ic {
  flex: 0 0 40px; width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(212,175,55,.18), rgba(212,175,55,.06));
  color: var(--gold-2, #f1c75a);
}
.bk-id-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bk-id-text b { font: 700 .92rem var(--font-head); color: var(--ink); }
.bk-id-text b .hint { color: var(--ink-mute); font-weight: 500; font-size: .76rem; }
.bk-id-text b .req { color: var(--gold-2); }
.bk-id-text small { color: var(--ink-mute); font-size: .76rem; }
.bk-id-cta {
  flex: 0 0 auto;
  font: 800 .68rem var(--font-head); letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px;
  background: linear-gradient(135deg, #f1c75a, #c89b3c);
  color: #1c1500;
  white-space: nowrap;
}
.bk-id-slot.is-filled .bk-id-drop { display: none; }
.bk-id-preview {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,.28);
  background: #0a0d18;
}
.bk-id-preview img {
  width: 100%; max-height: 220px; object-fit: cover; display: block;
  background: #0a0d18;
}
.bk-id-remove {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,.7);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  font-size: .85rem; line-height: 1;
}
.bk-id-status {
  padding: 8px 12px;
  font: 600 .78rem var(--font-body);
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.45);
  color: #cfc8b9;
}
.bk-id-status.is-uploading { color: #93c5fd; }
.bk-id-status.is-uploading::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(147,197,253,.3); border-top-color: #93c5fd;
  animation: bk-id-spin .8s linear infinite;
}
@keyframes bk-id-spin { to { transform: rotate(360deg); } }
.bk-id-status.is-success { color: #6ee7b7; }
.bk-id-status.is-success::before { content: "✓"; font-weight: 800; }
.bk-id-status.is-error { color: #fda4af; }
.bk-id-status.is-error::before { content: "!"; font-weight: 800; }

.bk-id-trust {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.18);
  border-radius: 12px;
  color: var(--ink-soft);
  font: 500 .8rem/1.45 var(--font-body);
}
.bk-id-trust svg { color: #93c5fd; flex-shrink: 0; }