/* ─────────────────────────────────────────────
   Lawvy — demo booking.
   Same dark language as the site, lifted a few stops:
   lighter ground, brighter surfaces, more visible edges.
   ───────────────────────────────────────────── */

.bk-body {
  --bg:        #101B33;   /* was #060A15 on the main site */
  --card:      #16223E;
  --card-2:    #1B2949;
  --surface:   rgba(255,255,255,0.055);
  --line:      rgba(165,180,210,0.20);
  --line-soft: rgba(165,180,210,0.11);
  --text:      #F2F5FA;
  --muted:     #AEB9D0;
  --faint:     #8D9AB6;
  --gold:      #C6A96B;
  --gold-lite: #EBD9AB;
  --gold-deep: #A9853F;
  --gold-wash: rgba(198,169,107,0.12);
  --crimson:   #E0566A;
  --green:     #6CC79B;

  color: var(--text);
  background:
    radial-gradient(ellipse 80% 55% at 12% 0%, rgba(198,169,107,0.13), transparent 60%),
    radial-gradient(ellipse 75% 60% at 100% 100%, rgba(70,110,180,0.20), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}

.bk-body .grain { opacity: 0.025; }

/* nav sits on the lighter ground, so it needs a lighter veil */
.bk-body .nav,
.bk-body .nav.is-stuck {
  background: rgba(16,27,51,0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.bk-back { font-size: 13.5px; color: var(--muted); }
.bk-back:hover { color: var(--gold-lite); }

.bk-body .btn--ghost {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
}
.bk-body .btn--ghost:hover { background: rgba(255,255,255,0.1); }

/* ── shell ──────────────────────────────────── */
.bk { padding: 108px 24px 70px; }
.bk__shell {
  display: grid; grid-template-columns: 370px 1fr;
  width: 100%; max-width: 1120px; margin: 0 auto;
  border: 1px solid var(--line-soft); border-radius: 22px; overflow: hidden;
  background: var(--card);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.7);
}

/* ── left ── */
.bk__aside {
  padding: 40px 34px;
  border-right: 1px solid var(--line-soft);
  background:
    radial-gradient(ellipse 130% 60% at 0% 0%, rgba(198,169,107,0.13), transparent 62%),
    var(--card-2);
}
.bk__title { font-size: clamp(1.6rem, 2.5vw, 2.05rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.bk__lede { margin-top: 14px; font-size: 14.6px; color: var(--muted); }

.bk__meta { list-style: none; margin: 30px 0; display: grid; gap: 15px; }
.bk__meta li { display: flex; gap: 12px; align-items: flex-start; }
.bk__meta svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--gold); }
.bk__meta span { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.bk__meta b { font-size: 14px; font-weight: 600; color: var(--text); }
.bk__meta i { font-style: normal; }

.bk__see { padding-top: 24px; border-top: 1px solid var(--line-soft); }
.bk__seeLbl {
  display: block; margin-bottom: 13px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
}
.bk__see ul { list-style: none; display: grid; gap: 10px; }
.bk__see li { position: relative; padding-left: 20px; font-size: 13.4px; color: var(--muted); }
.bk__see li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 12px; height: 6px;
  border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(-45deg);
}

/* ── right panel ── */
.bk__panel { padding: 32px 34px 38px; min-width: 0; }

.bk__steps {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-bottom: 26px; padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.bk__steps li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--faint); }
.bk__steps b {
  display: grid; place-items: center; width: 21px; height: 21px;
  border-radius: 50%; font-size: 11px; font-weight: 600;
  border: 1px solid var(--line); color: inherit;
}
.bk__steps li.is-on { color: var(--gold-lite); }
.bk__steps li.is-on b { border-color: var(--gold); color: var(--gold-lite); background: var(--gold-wash); }
.bk__steps li.is-done { color: var(--muted); }
.bk__steps li.is-done b { border-color: rgba(108,199,155,0.55); color: var(--green); }

/* ── timezone row ── */
.bk__tzrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; }
.bk__tzrow label { font-size: 12.5px; color: var(--muted); }
.bk__select {
  flex: 1 1 190px; min-width: 0;
  padding: 9px 12px; font: inherit; font-size: 13px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px;
}
.bk__select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.bk__select option { background: #1B2949; color: var(--text); }

.bk__soon {
  padding: 9px 15px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--gold-lite); background: var(--gold-wash);
  border: 1px solid rgba(198,169,107,0.42); border-radius: 50px;
  transition: background .2s ease;
}
.bk__soon:hover { background: rgba(198,169,107,0.24); }

/* ── calendar + slots ── */
.bk__cols { display: grid; grid-template-columns: 1fr 210px; gap: 26px; }

.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal__head strong { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.cal__nav {
  width: 30px; height: 30px; font-size: 17px; line-height: 1; cursor: pointer;
  color: var(--muted); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px;
}
.cal__nav:hover:not(:disabled) { color: var(--text); background: rgba(255,255,255,0.12); }
.cal__nav:disabled { opacity: .3; cursor: not-allowed; }

.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal__dow { margin-bottom: 7px; font-size: 10.5px; letter-spacing: 0.1em; text-align: center; color: var(--faint); }
.cal__day {
  aspect-ratio: 1; display: grid; place-items: center;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  color: var(--text); background: rgba(255,255,255,0.07);
  border: 1px solid transparent; border-radius: 10px;
  transition: background .16s ease, border-color .16s ease;
}
.cal__day:hover:not(:disabled) { background: rgba(198,169,107,0.22); border-color: rgba(198,169,107,0.5); }
.cal__day:disabled { color: rgba(174,185,208,0.3); background: transparent; cursor: not-allowed; }
.cal__day.is-today { border-color: rgba(174,185,208,0.45); }
.cal__day.is-sel {
  color: #161104; font-weight: 700;
  background: linear-gradient(135deg, var(--gold-lite), var(--gold-deep));
  border-color: var(--gold-lite);
  box-shadow: 0 6px 18px -6px rgba(198,169,107,0.7);
}
.cal__day--pad { visibility: hidden; }
.cal__note { margin-top: 14px; font-size: 11.5px; color: var(--faint); }

.slots { display: flex; flex-direction: column; max-height: 340px; overflow-y: auto; padding-right: 4px; }
.slots__empty { margin: auto 0; font-size: 13px; color: var(--faint); text-align: center; }
.slots__grp {
  position: sticky; top: 0; z-index: 1;
  padding: 6px 0 8px; margin-top: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); background: var(--card);
}
.slot {
  margin-bottom: 7px; padding: 11px 12px;
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px;
  transition: border-color .16s ease, background .16s ease, transform .12s ease;
}
.slot:hover { border-color: var(--gold); background: rgba(198,169,107,0.16); transform: translateX(2px); }

/* ── step 2 ── */
.bk__chosen {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  margin-bottom: 24px; padding: 14px 18px; font-size: 14px;
  border: 1px solid rgba(198,169,107,0.35); border-radius: 12px;
  background: var(--gold-wash);
}
.bk__chosen b { color: var(--gold-lite); }
.bk__chosen span { color: var(--muted); font-size: 12.5px; }
.bk__chosen .ours { flex-basis: 100%; font-size: 11.5px; color: var(--faint); }

.bk__form { display: grid; gap: 16px; }
.fld { display: grid; gap: 7px; }
.fld label { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.fld label em { font-style: normal; color: var(--faint); }
.fld input, .fld textarea {
  padding: 12px 14px; font: inherit; font-size: 14px; resize: vertical;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
}
.fld input::placeholder, .fld textarea::placeholder { color: var(--faint); }
.fld input:focus, .fld textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(255,255,255,0.09);
  box-shadow: 0 0 0 3px rgba(198,169,107,0.14);
}
.fld input[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: var(--crimson); }
.fld__err { font-size: 12.5px; color: var(--crimson); }

.bk__act { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 6px; }

/* ── step 3 ── */
.done { text-align: center; padding: 14px 0 6px; }
.done__tick {
  position: relative; display: block; width: 56px; height: 56px; margin: 0 auto 22px;
  border-radius: 50%; border: 2px solid var(--green); background: rgba(108,199,155,0.14);
}
.done__tick::after {
  content: ""; position: absolute; left: 17px; top: 18px;
  width: 20px; height: 10px;
  border-left: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green);
  transform: rotate(-45deg);
}
.done h2 { font-size: 1.7rem; }
.done__sub { margin-top: 10px; font-size: 14.5px; color: var(--muted); }
.done__card {
  margin: 24px 0 16px; padding: 20px;
  text-align: left; font-size: 14px; line-height: 1.9; color: var(--muted);
  border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface);
}
.done__card b { color: var(--gold-lite); }
.done__note { font-size: 13px; color: var(--muted); }
.done .bk__act { justify-content: center; margin-top: 22px; }
.done__again {
  margin-top: 18px; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--muted); background: none; border: 0; border-bottom: 1px solid var(--line);
}
.done__again:hover { color: var(--gold-lite); }

/* ── responsive ─────────────────────────────── */
/* tablet: stack the aside, but keep calendar and slots side by side */
@media (max-width: 940px) {
  .bk__shell { grid-template-columns: 1fr; }
  .bk__aside { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .bk__cols { grid-template-columns: minmax(0, 1fr) 190px; }
  .slots { max-height: 380px; }
}

/* below this the two columns get too narrow to read, so stack them */
@media (max-width: 700px) {
  .bk__cols { grid-template-columns: 1fr; gap: 24px; }
  .cal { max-width: 400px; }          /* stop day cells ballooning */
  .slots { max-height: none; }
  .slots__grp { position: static; }   /* sticky is pointless once it flows */
}

@media (max-width: 560px) {
  .bk { padding: 92px 14px 50px; }
  .bk__aside, .bk__panel { padding: 28px 20px; }
  .bk__steps { gap: 6px 14px; font-size: 12px; }
  .bk__tzrow { gap: 8px; }
  .bk__select { flex-basis: 100%; }
  .bk__soon { width: 100%; }
  .bk__act .btn { flex: 1 1 auto; }
  .done__card { font-size: 13.2px; }
  /* square cells fall under the 44px touch minimum at this width */
  .cal__dow, .cal__grid { gap: 4px; }
  .cal__day { aspect-ratio: auto; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .slot, .cal__day { transition: none; }
}