/* Titan Stone Pros — booking popup and floating booking button.
   A compact, centred card over a light dim, so the page stays visible behind
   it. White card, navy text, gold for the main action and accents. Every size
   here is fixed in px or capped, so it fits a small iPhone without scaling. */

.bk {
  --bk-navy: var(--navy, #080D1A);
  --bk-navy-2: var(--navy-2, #111A30);
  --bk-ink: #0B1A3A;          /* dark navy text */
  --bk-royal: var(--royal, #0047E8);
  --bk-gold: var(--gold, #FFC928);
  --bk-gold-dark: var(--gold-dark, #F2B705);
  --bk-line: #E3E6EE;
  --bk-soft: #F4F6FA;
  --bk-muted: #5B6476;
  position: fixed; left: 0; right: 0; top: 0; height: 100%; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--bk-ink);
}
.bk[hidden] { display: none; }
.bk-overlay {
  position: absolute; inset: 0;
  background: rgba(8, 13, 26, 0.5);
  opacity: 0; transition: opacity .22s ease;
}
.bk.is-open .bk-overlay { opacity: 1; }

.bk-dialog {
  position: relative; display: flex; flex-direction: column;
  width: min(92vw, 380px); max-height: 75vh; max-height: 75dvh;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(8, 13, 26, 0.32), 0 2px 8px rgba(8, 13, 26, 0.12);
  opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity .22s ease, transform .22s ease;
  outline: none;
}
/* Thin gold accent line near the top */
.bk-dialog::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
  background: linear-gradient(90deg, var(--bk-gold-dark), var(--bk-gold) 50%, var(--bk-gold-dark));
}
.bk.is-open .bk-dialog { opacity: 1; transform: none; }
/* While the phone keyboard is open, use more of the (now smaller) screen. */
.bk.is-keyboard { align-items: flex-start; padding-top: 8px; }
.bk.is-keyboard .bk-dialog { max-height: calc(100% - 16px); }
@media (min-width: 768px) { .bk-dialog { width: 400px; max-height: min(680px, 86vh); } }

.bk-top {
  flex: none; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 6px;
  padding: 12px 10px 6px 14px; background: #fff;
}
.bk-x {
  justify-self: end;
  width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--bk-soft); color: var(--bk-ink);
  transition: background-color .15s ease;
}
.bk-x:hover { background: #E7EAF1; }
.bk-x svg { width: 18px; height: 18px; }

.bk-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 4px 18px 18px;
}

/* Header */
.bk-head { text-align: center; padding: 0 8px 12px; border-bottom: 1px solid var(--bk-line); margin-bottom: 14px; }
.bk-logo { width: 76px; height: auto; aspect-ratio: 1000 / 651; margin: 0 auto 8px; display: block; }
.bk-title { font-size: 17px; font-weight: 600; line-height: 1.22; letter-spacing: -0.2px; color: var(--bk-ink); text-wrap: balance; }
.bk-sub { margin-top: 4px; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: var(--bk-muted); text-wrap: balance; }

/* Progress */
.bk-progress { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bk-progress[hidden] { visibility: hidden; display: flex; }
.bk-back {
  justify-self: start; display: inline-flex; align-items: center; gap: 2px;
  min-height: 32px; padding: 4px 6px 4px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--bk-muted);
}
.bk-back:hover { color: var(--bk-ink); }
.bk-back[hidden] { visibility: hidden; display: inline-flex; }
.bk-back svg { width: 16px; height: 16px; }
.bk-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: 100%; max-width: 150px; }
.bk-bars i { height: 4px; border-radius: 4px; background: var(--bk-line); transition: background-color .25s ease; }
.bk-bars i.is-on { background: var(--bk-navy); }
.bk-count { font-size: 11px; font-weight: 600; color: var(--bk-muted); white-space: nowrap; line-height: 1.2; }

/* Steps */
.bk-step { animation: bk-in .22s ease both; }
.bk-step[hidden] { display: none; }
@keyframes bk-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.bk-q { font-size: 15.5px; font-weight: 600; line-height: 1.25; color: var(--bk-ink); text-align: center; outline: none; }
.bk-hint { margin-top: 3px; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--bk-muted); text-align: center; }

/* Step 1 — service cards */
.bk-services { display: grid; gap: 8px; margin-top: 12px; }
.bk-svc {
  display: grid; grid-template-columns: 40px 1fr 18px; align-items: center; gap: 12px;
  width: 100%; min-height: 64px; padding: 11px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--bk-line); border-radius: 12px; background: #fff; color: var(--bk-ink); font: inherit;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.bk-svc:hover { border-color: #B9C2D6; box-shadow: 0 4px 14px rgba(8,13,26,0.06); }
.bk-svc[aria-pressed="true"] { border-color: var(--bk-navy); background: #F7F8FC; box-shadow: inset 0 0 0 1px var(--bk-navy); }
.bk-svc-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--bk-navy); color: var(--bk-gold); }
.bk-svc-ico svg { width: 21px; height: 21px; }
.bk-svc-text strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.25; }
.bk-svc-text span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; line-height: 1.35; color: var(--bk-muted); }
.bk-svc-go { width: 18px; height: 18px; color: #9AA3B5; }
.bk-svc[aria-pressed="true"] .bk-svc-go { color: var(--bk-navy); }

/* Step 2 — date strip and times */
.bk-dates-wrap { position: relative; display: grid; grid-template-columns: 26px 1fr 26px; align-items: center; gap: 2px; margin-top: 12px; }
.bk-scrollbtn {
  width: 26px; height: 40px; border: 0; border-radius: 8px; padding: 0; display: grid; place-items: center;
  background: none; color: var(--bk-ink); cursor: pointer;
}
.bk-scrollbtn:disabled { color: #C9CED9; cursor: default; }
.bk-scrollbtn svg { width: 18px; height: 18px; }
.bk-dates {
  display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  padding: 2px; -webkit-overflow-scrolling: touch;
}
.bk-dates::-webkit-scrollbar { display: none; }
.bk-date {
  flex: 0 0 54px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 0 6px; border: 1px solid var(--bk-line); border-radius: 10px; background: #fff; cursor: pointer;
  font: inherit; color: var(--bk-ink); transition: border-color .15s ease, background-color .15s ease;
}
.bk-date span { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; color: var(--bk-muted); line-height: 1.2; }
.bk-date strong { font-size: 17px; font-weight: 500; line-height: 1.15; }
.bk-date:hover:not(:disabled) { border-color: #B9C2D6; }
.bk-date[aria-checked="true"] { background: var(--bk-navy); border-color: var(--bk-navy); color: #fff; }
.bk-date[aria-checked="true"] span { color: var(--bk-gold); }
.bk-date:disabled { opacity: .4; cursor: default; }
.bk-label { margin: 14px 0 8px; font-size: 13px; font-weight: 600; color: var(--bk-ink); text-align: center; }
.bk-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.bk-time {
  min-height: 44px; padding: 8px 4px; border: 1px solid var(--bk-line); border-radius: 10px; background: #fff; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--bk-ink); white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease;
}
.bk-time:hover:not(:disabled) { border-color: var(--bk-navy); }
.bk-time[aria-checked="true"] { background: var(--bk-gold); border-color: var(--bk-gold); color: var(--bk-navy); }
.bk-time:disabled { color: #A9B0BF; background: var(--bk-soft); text-decoration: line-through; cursor: default; }
.bk-note { margin-top: 10px; font-size: 11.5px; color: var(--bk-muted); text-align: center; }
.bk-loading { grid-column: 1 / -1; padding: 10px 4px; font-size: 13px; color: var(--bk-muted); text-align: center; width: 100%; }

.bk-alert { margin-top: 10px; padding: 9px 11px; border-radius: 10px; background: #FFF6DB; border: 1px solid #F3D27A; font-size: 12.5px; line-height: 1.45; color: #5A4300; }
.bk-alert[hidden] { display: none; }
.bk-form .bk-alert { background: #FDECEC; border-color: #F3B4B4; color: #8A1C1C; margin: 0 0 10px; }

/* Step 3 — details */
.bk-form { margin-top: 12px; }
.bk-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 9px; min-width: 0; }
.bk-field label { font-size: 12.5px; font-weight: 600; color: var(--bk-ink); }
.bk-field input {
  width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1.5px solid #CDD2DD; border-radius: 10px; background: #fff;
  font: inherit; font-size: 16px; color: var(--bk-ink);   /* 16px stops iPhone zooming in */
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bk-field input:focus { outline: none; border-color: var(--bk-navy); box-shadow: 0 0 0 3px rgba(8,13,26,0.1); }
.bk-field input[aria-invalid="true"] { border-color: #C93A3A; }
.bk-err { font-size: 11.5px; color: #B42318; line-height: 1.3; }
.bk-err:empty { display: none; }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bk-done-list { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13px; line-height: 1.4; }
.bk-done-list dt { color: var(--bk-muted); font-weight: 500; }
.bk-done-list dd { color: var(--bk-ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
/* Compact chosen-time line and demo on the details step (shared components, site.css). */
.bk-step .tsp-when { margin-top: 8px; }
.bk-step .tsp-demo { margin: 10px 0 0; }
.bk-offer { margin: -2px 0 10px; font-weight: 400; font-size: 11.5px; line-height: 1.4; color: var(--bk-muted); text-align: center; }
.bk-offer a { color: var(--bk-royal); font-weight: 600; }

.bk-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; padding: 12px 16px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--bk-gold); color: var(--bk-navy);
  font: inherit; font-size: 14.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(242,183,5,0.32);
  transition: background-color .15s ease, transform .15s ease;
}
.bk-submit:hover { background: var(--bk-gold-dark); }
.bk-submit:active { transform: translateY(1px); }
.bk-submit:disabled { opacity: .75; cursor: progress; }
.bk-submit--navy { background: var(--bk-navy); color: #fff; box-shadow: none; margin-top: 14px; }
.bk-submit--navy:hover { background: var(--bk-navy-2); }
.bk-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(8,13,26,0.25); border-top-color: var(--bk-navy); animation: bk-spin .8s linear infinite; }
@keyframes bk-spin { to { transform: rotate(360deg); } }
.bk-privacy { margin-top: 9px; font-size: 11.5px; line-height: 1.45; color: var(--bk-muted); text-align: center; }
.bk-privacy a { color: var(--bk-royal); font-weight: 600; white-space: nowrap; }

/* Done */
.bk[data-step="done"] .bk-title, .bk[data-step="done"] .bk-sub { display: none; }
.bk-done { text-align: center; padding-top: 6px; }
.bk-done-ico { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%; background: #E9F7EF; color: #13723A; }
.bk-done-ico svg { width: 28px; height: 28px; }
.bk-done .bk-q { font-size: 17px; }
.bk-done-list { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--bk-soft); text-align: left; }

/* Short screens (small iPhones, landscape): tighten the header. */
@media (max-height: 700px) {
  .bk-top { padding-top: 10px; }
  .bk-scroll { padding: 2px 16px 16px; }
  .bk-logo { width: 56px; margin-bottom: 5px; }
  .bk-title { font-size: 16px; }
  .bk-sub { font-size: 12px; }
  .bk-head { padding-bottom: 10px; margin-bottom: 12px; }
  .bk:not([data-step="1"]) .bk-sub { display: none; }
  .bk-svc { min-height: 58px; padding: 9px 12px; }
}
@media (max-width: 359px) {
  .bk-scroll { padding: 2px 14px 16px; }
  .bk-head { padding: 0 0 10px; }
  .bk-svc { grid-template-columns: 36px 1fr 14px; gap: 10px; padding: 10px; }
  .bk-svc-ico { width: 36px; height: 36px; }
  .bk-date { flex-basis: 50px; }
  .bk-time { font-size: 12.5px; }
}

/* Page scroll is paused while the popup is open; the position is kept. */
html.bk-locked, html.bk-locked body { overflow: hidden; }
html.bk-locked body { overscroll-behavior: none; }

/* ── Floating booking button ──────────────────────────────────
   A small round button in the lower-right corner. On phones it sits just
   above the call / offer bar and drops down when that bar slides away. */
.bk-fab {
  --bk-fab-bottom: 20px;
  position: fixed; right: 20px; bottom: var(--bk-fab-bottom); z-index: 95;
  width: 56px; height: 56px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--navy, #080D1A); color: var(--gold, #FFC928);
  border: 2px solid var(--gold, #FFC928);
  box-shadow: 0 10px 26px rgba(8,13,26,0.35);
  transition: transform .2s ease, bottom .25s ease, opacity .2s ease;
}
.bk-fab:hover { transform: translateY(-2px); }
.bk-fab svg { width: 25px; height: 25px; }
.bk-fab.is-hidden { opacity: 0; pointer-events: none; transform: scale(.85); }
@media (max-width: 768px) {
  .bk-fab { --bk-fab-bottom: calc(72px + env(safe-area-inset-bottom)); right: 14px; width: 50px; height: 50px; }
  .bk-fab svg { width: 22px; height: 22px; }
  body:has(.mobile-action-bar.is-hidden) .bk-fab { --bk-fab-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .menu-open .bk-fab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-overlay, .bk-dialog, .bk-step, .bk-fab { transition: none; animation: none; }
}