/* "Book with an agent" card beside the quote form (landing_booking_card() in lib/landing.php, assets/booking.js).
   Shared rules first, driven by --bk-* tokens; each landing style sets its tokens (and a few tweaks) below,
   scoped by body.style-<key>. The Original style has no body class and uses the defaults. */
.bk-wrap {
  --bk-bg: var(--card, #fff);
  --bk-ink: var(--ink, #1b2430);
  --bk-muted: var(--muted, #6b7686);
  --bk-line: var(--line, #cfdcea);
  --bk-accent: var(--navy-2, #1f4e79);
  --bk-accent-text: var(--bk-accent);
  --bk-head: var(--navy, #173a5e);
  --bk-radius: var(--radius, 12px);
  --bk-btn-radius: 10px;
  --bk-shadow: var(--shadow);
  --bk-border: 0;
  --bk-or: var(--muted, #6b7686);
  --bk-or-line: var(--line, #cfdcea);
  --bk-online: #16a34a;
  min-width: 0;
}
.bk-wrap[hidden] { display: none; }

/* OR divider */
.bk-or { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; color: var(--bk-or); font-size: .8rem; font-weight: 700; letter-spacing: .14em; }
.bk-or::before, .bk-or::after { content: ""; flex: 1; height: 1px; background: var(--bk-or-line); }

/* Card */
.bk-card { position: relative; background: var(--bk-bg); color: var(--bk-ink); border: var(--bk-border); border-radius: var(--bk-radius); box-shadow: var(--bk-shadow); padding: 22px 18px; text-align: left; }
.bk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.bk-head h2 { margin: 0; font-size: 1.3rem; color: var(--bk-head); outline: none; }
.bk-icon { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--bk-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bk-icon-tick { stroke-width: 2.2; }
.bk-lede { margin: 0 0 14px; color: var(--bk-muted); font-size: .92rem; }
.bk-step > h3 { margin: 4px 0 12px; font-size: 1.12rem; color: var(--bk-head); outline: none; }
.bk-step[hidden] { display: none; }
.bk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bk-note { margin: 10px 0 0; font-size: .85rem; color: var(--bk-muted); }
.bk-msg { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--error-bg, #fef3f2); color: var(--error, #b42318); font-size: .9rem; }

/* Buttons */
.bk-outline { position: relative; display: block; width: 100%; min-height: 50px; padding: 10px 16px; border: 2px solid var(--bk-accent); border-radius: var(--bk-btn-radius); background: transparent; color: var(--bk-accent-text); font: inherit; font-size: 1.02rem; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.bk-outline:hover:not(:disabled) { background: var(--bk-accent); color: #fff; }
.bk-outline:disabled { opacity: .5; cursor: default; }
.bk-outline.loading { opacity: .7; }
.bk-outline:focus-visible, .bk-back:focus-visible, .bk-more:focus-visible, .bk-agent:focus-visible, .bk-slot:focus-visible { outline: 3px solid var(--focus, #2e7dd7); outline-offset: 2px; }
.bk-back, .bk-more { display: inline-block; padding: 4px 0; border: 0; background: none; color: var(--bk-accent-text); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.bk-back:hover, .bk-more:hover { text-decoration: underline; }
.bk-more { margin: 0 0 8px; }

/* Step 1: agents */
.bk-agents { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bk-agents[hidden] { display: none; }
.bk-agent { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--bk-line); border-radius: 12px; background: #fff; color: var(--bk-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.bk-agent:hover { border-color: var(--bk-accent); box-shadow: 0 2px 10px rgba(16, 24, 40, .08); }
.bk-agent.loading { opacity: .6; }
.bk-avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #eef2f6; }
.bk-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--bk-accent); color: #fff; font-weight: 700; font-size: 1rem; }
.bk-agent-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bk-agent-name { font-weight: 700; color: var(--bk-ink); }
.bk-status { display: inline-flex; align-items: flex-start; gap: 6px; font-size: .85rem; color: var(--bk-muted); }
.bk-dot { flex: none; width: 9px; height: 9px; margin-top: calc(.75em - 4.5px); border-radius: 50%; background: #9aa4b2; }
.bk-status.is-online { color: var(--bk-ink); }
.bk-status.is-online .bk-dot { background: var(--bk-online); box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.bk-chev { flex: none; font-size: 1.6rem; line-height: 1; color: var(--bk-muted); }
.bk-empty { margin: 0; color: var(--bk-ink); font-size: .95rem; }
.bk-empty[hidden] { display: none; }

/* Step 2: times */
.bk-agent-line { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.bk-kind { margin-bottom: 14px; }
.bk-kind[hidden] { display: none; }
.bk-times { display: grid; gap: 12px; margin-bottom: 8px; }
.bk-day[hidden] { display: none; }
.bk-day-label { margin: 0 0 6px; font-size: .85rem; font-weight: 700; color: var(--bk-ink); }
.bk-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.bk-slot { min-height: 40px; padding: 6px 14px; border: 1px solid var(--bk-line); border-radius: 999px; background: #fff; color: var(--bk-ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.bk-slot:hover { border-color: var(--bk-accent); }
.bk-slot[aria-pressed="true"] { background: var(--bk-accent); border-color: var(--bk-accent); color: #fff; box-shadow: 0 4px 12px rgba(16, 24, 40, .18); }
.bk-asap { width: 100%; min-height: 46px; font-weight: 700; }
.bk-tz { margin: 0 0 14px; font-size: .82rem; color: var(--bk-muted); }
/* Call now (online agents): above "As soon as possible" */
.bk-call { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; font-weight: 700; border: 2px solid var(--bk-online); }
.bk-call svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bk-call:not([aria-pressed="true"]) svg { color: var(--bk-online); }
.bk-call[aria-pressed="true"] { background: var(--bk-online); border-color: var(--bk-online); }

/* Step 3: details */
.bk-summary { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: rgba(127, 140, 160, .1); font-size: .9rem; font-weight: 600; color: var(--bk-ink); }
.bk-fixed-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; }
.bk-fixed-value { display: flex; align-items: center; min-height: 46px; padding: 0 12px; border-radius: 8px; background: rgba(127, 140, 160, .1); font-weight: 600; }

/* Done */
.bk-done { text-align: center; padding: 8px 4px; }
.bk-done h3 { font-size: 1.35rem; }
.bk-done p { margin: 0 0 6px; color: var(--bk-ink); }
.bk-done .bk-when { font-weight: 700; font-size: 1.05rem; }
.bk-done [hidden] { display: none; }
.bk-done .bk-call-btn { display: flex; align-items: center; justify-content: center; width: 100%; margin: 12px 0; text-decoration: none; text-align: center; }
.bk-done a.bk-call-btn, .bk-done a.bk-call-btn:hover { color: #fff; } /* style link colors (e.g. Heartfelt) would win over .btn */
/* Request status (pending / waiting for Call now / answered): same panel, filled by booking.js */
.bk-done .bk-done-body p:last-child { margin-bottom: 0; }
.bk-spin { display: block; width: 52px; height: 52px; margin: 4px auto 12px; border: 4px solid var(--bk-line); border-top-color: var(--bk-accent); border-radius: 50%; animation: bk-spin .9s linear infinite; }
@keyframes bk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bk-spin { animation-duration: 2.5s; } }
.bk-done .bk-count { margin: 2px 0 10px; font-size: 2.2rem; font-weight: 800; line-height: 1.1; color: var(--bk-head); font-variant-numeric: tabular-nums; }
.bk-done-actions { display: grid; gap: 10px; margin-top: 16px; }
.bk-done .bk-cancel { margin-top: 12px; }
.bk-done .bk-call-btn[hidden] { display: none; }
.bk-welcome { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(127, 140, 160, .1); font-size: .9rem; font-weight: 600; color: var(--bk-ink); }
.bk-welcome[hidden] { display: none; }
.bk-step > .bk-back[hidden] { display: none; }

/* Below the quote form on phones. Two-column heroes on wide screens: beside the form, under the headline copy
   (the form spans both rows). */
@media (min-width: 900px) {
  .bk-card { padding: 26px 26px; }
  .hero-grid, .sp-hero-grid, .hf-hero-grid, .tr-hero-grid, .sr-hero-grid, .lc-hero-grid { grid-template-rows: auto 1fr; }
  .hero-grid > #quote, .sp-hero-grid > #quote, .hf-hero-grid > #quote, .tr-hero-grid > #quote,
  .sr-hero-grid > #quote, .lc-hero-grid > #quote { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .hero-grid > .bk-wrap, .sp-hero-grid > .bk-wrap, .hf-hero-grid > .bk-wrap, .tr-hero-grid > .bk-wrap,
  .sr-hero-grid > .bk-wrap, .lc-hero-grid > .bk-wrap { grid-column: 1; grid-row: 2; align-self: start; max-width: 520px; }
}

/* ---- Per style ------------------------------------------------------------------------------------ */
body.style-spotlight .bk-wrap {
  --bk-bg: #fff; --bk-ink: var(--ink); --bk-head: #0d1b3e; --bk-radius: 20px; --bk-btn-radius: 12px;
  --bk-accent: #3a7bff; --bk-accent-text: #2456d6;
  --bk-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08);
  --bk-or: rgba(238, 243, 255, .75); --bk-or-line: rgba(255, 255, 255, .18);
}
body.style-spotlight .bk-head h2 { font-weight: 900; letter-spacing: -.02em; }
body.style-spotlight .bk-slot[aria-pressed="true"], body.style-spotlight .bk-initials { background: linear-gradient(135deg, #3a7bff, var(--sp-violet)); border-color: transparent; }
body.style-spotlight .bk-outline:hover:not(:disabled) { background: linear-gradient(135deg, #3a7bff, var(--sp-violet)); border-color: transparent; }

body.style-heartfelt .bk-wrap {
  --bk-bg: var(--hf-paper); --bk-ink: var(--hf-ink); --bk-line: var(--hf-line); --bk-head: var(--hf-green);
  --bk-accent: var(--hf-green); --bk-radius: 20px; --bk-btn-radius: 999px; --bk-border: 1px solid var(--hf-line);
  --bk-shadow: 0 18px 44px rgba(120, 72, 36, .12); --bk-or: var(--hf-clay-2, #a8441f); --bk-or-line: var(--hf-line);
}
body.style-heartfelt .bk-head h2 { font-size: 1.45rem; }

body.style-express .bk-wrap {
  --bk-ink: var(--ex-ink); --bk-head: var(--ex-ink); --bk-line: var(--ex-line); --bk-accent: var(--ex-blue);
  --bk-radius: 14px; --bk-btn-radius: 12px; --bk-border: 1px solid var(--ex-line); --bk-shadow: 0 6px 24px rgba(17, 24, 39, .07);
  --bk-or: #6b7280; --bk-or-line: var(--ex-line);
}
body.style-express .bk-wrap { margin-top: 16px; }
body.style-express .bk-card { padding: 16px 14px; }
body.style-express .bk-outline { min-height: 54px; }

body.style-trust .bk-wrap {
  --bk-bg: var(--tr-paper); --bk-ink: var(--tr-ink); --bk-line: var(--tr-line); --bk-head: var(--tr-navy);
  --bk-accent: var(--tr-navy); --bk-radius: 6px; --bk-btn-radius: 4px; --bk-shadow: 0 24px 60px rgba(4, 16, 32, .45);
  --bk-or: var(--tr-gold); --bk-or-line: rgba(255, 255, 255, .22);
}
body.style-trust .bk-card { border-top: 6px solid var(--tr-gold); }
body.style-trust .bk-card::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--tr-line); border-radius: 3px; pointer-events: none; }
body.style-trust .bk-card > :not(.bk-sr) { position: relative; z-index: 1; }
body.style-trust .bk-slot, body.style-trust .bk-agent { border-radius: 4px; }

body.style-senior .bk-wrap {
  --bk-ink: var(--sr-ink); --bk-head: var(--sr-ink); --bk-line: #6b7684; --bk-muted: #3d4651; --bk-accent: var(--sr-blue);
  --bk-radius: 16px; --bk-btn-radius: 12px; --bk-border: 2px solid var(--sr-blue); --bk-shadow: 0 10px 30px rgba(11, 61, 110, .12);
  --bk-or: var(--sr-ink); --bk-or-line: #b9c3cf;
}
body.style-senior .bk-head h2 { font-size: 1.55rem; }
body.style-senior .bk-outline { min-height: 62px; font-size: 1.15rem; }
body.style-senior .bk-slot { min-height: 52px; padding: 8px 18px; font-size: 1rem; border-width: 2px; }
body.style-senior .bk-agent { border-width: 2px; }
body.style-senior .bk-back, body.style-senior .bk-more { font-size: 1rem; text-decoration: underline; }
body.style-senior .bk-status, body.style-senior .bk-tz, body.style-senior .bk-day-label { font-size: .95rem; }
body.style-senior .bk-welcome { font-size: 1rem; }

body.style-modern .bk-wrap {
  --bk-bg: rgba(255, 255, 255, .88); --bk-ink: var(--md-ink); --bk-head: var(--md-ink); --bk-line: var(--md-line); --bk-muted: var(--md-muted);
  --bk-accent: var(--md-accent); --bk-radius: 24px; --bk-btn-radius: 14px; --bk-border: 1px solid var(--md-line);
  --bk-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 30px 60px -20px rgba(79, 70, 229, .25);
  --bk-or: var(--md-muted); --bk-or-line: var(--md-line);
}
body.style-modern .bk-wrap { max-width: 640px; margin: 22px auto 0; text-align: left; }
body.style-modern .bk-card { backdrop-filter: blur(12px); }
body.style-modern .bk-slot, body.style-modern .bk-agent { background: #f8fafc; }
body.style-modern .bk-slot[aria-pressed="true"] { background: var(--md-accent); }
/* Wide screens: the card sits beside the quote form, with a vertical OR. */
@media (min-width: 1100px) {
  body.style-modern .md-hero-inner:has(> .bk-wrap) { display: grid; grid-template-columns: minmax(0, 640px) 380px; justify-content: center; align-items: start; }
  body.style-modern .md-hero-inner:has(> .bk-wrap) > :not(.md-card):not(.bk-wrap) { grid-column: 1 / -1; }
  body.style-modern .md-hero-inner > .md-card { margin: 0; }
  body.style-modern .md-hero-inner > .bk-wrap { display: flex; margin: 0; max-width: none; }
  body.style-modern .bk-or { flex-direction: column; margin: 0; padding: 0 14px; gap: 10px; }
  body.style-modern .bk-or::before, body.style-modern .bk-or::after { width: 1px; height: auto; flex: 0 0 80px; }
  body.style-modern .bk-or::after { flex: 1 1 auto; }
  body.style-modern .bk-card { flex: 1; min-width: 0; padding: 28px 24px; }
}

body.style-local .bk-wrap {
  --bk-ink: var(--lc-ink); --bk-head: var(--lc-ink); --bk-line: var(--lc-line); --bk-accent: var(--lc-green);
  --bk-radius: 22px; --bk-btn-radius: 14px; --bk-border: 1px solid var(--lc-line); --bk-shadow: 0 16px 40px rgba(31, 122, 77, .14);
  --bk-or: var(--lc-green); --bk-or-line: var(--lc-line);
}
body.style-local .bk-head h2 { font-weight: 800; }

/* Side-by-side ("duo") styles: layout in assets/landing-duo.css. Trust Side by Side carries style-trust (above). */
body.style-clarity .bk-wrap {
  --bk-bg: #fff; --bk-ink: #0f2a33; --bk-head: #0f2a33; --bk-muted: #4b6470; --bk-line: #dbe6ec; --bk-accent: #0f766e;
  --bk-radius: 14px; --bk-btn-radius: 10px; --bk-border: 1px solid #dbe6ec; --bk-shadow: 0 10px 30px rgba(15, 42, 51, .08);
  --bk-or: #0f766e; --bk-or-line: #cfdfe6;
}

body.style-coastal .bk-wrap {
  --bk-bg: #fff; --bk-ink: #0b3142; --bk-head: #0b4f6c; --bk-muted: #4d6672; --bk-line: #e7dcc8; --bk-accent: #0b4f6c;
  --bk-radius: 16px; --bk-btn-radius: 12px; --bk-border: 1px solid #e7dcc8; --bk-shadow: 0 14px 34px rgba(11, 49, 66, .10);
  --bk-or: #c8441f; --bk-or-line: #e0d3bc;
}

body.style-graphite .bk-wrap {
  --bk-bg: #fff; --bk-ink: #1c1f23; --bk-head: #1c1f23; --bk-muted: #5b636b; --bk-line: #e3e6e9; --bk-accent: #0e7a57;
  --bk-radius: 12px; --bk-btn-radius: 8px; --bk-border: 0; --bk-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  --bk-or: #10b981; --bk-or-line: #3a4048;
}

body.style-sunrise .bk-wrap {
  --bk-bg: #fff; --bk-ink: #3b1f2b; --bk-head: #3b1f2b; --bk-muted: #7a5260; --bk-line: #fbd9c4; --bk-accent: #c2410c;
  --bk-radius: 20px; --bk-btn-radius: 14px; --bk-border: 1px solid #fbd9c4; --bk-shadow: 0 16px 40px rgba(194, 65, 12, .12);
  --bk-or: #c2410c; --bk-or-line: #f6c9b0;
}

/* T53: name search above a long agent list, and the call-back picker */
.bk-search { margin: 0 0 10px; }
.bk-search input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #c9d2dc; border-radius: 10px; font: inherit; font-size: 1rem; }
.bk-search .bk-empty { margin-top: 8px; }
.bk-cb-note { margin: 4px 0 10px; color: #475467; }
.bk-card [hidden] { display: none !important; } /* the card's display rules (e.g. .bk-more) must never beat [hidden] */