/* ═══════════════════════════════════════════════════════════════════════════
   Live Consultation (Early Access) — premium 1-on-1 booking experience.
   Scoped entirely under .consult-* / #consultPane. Lives only inside the cream
   chat screen, so it inherits the parchment theme tokens (--ink, --gold, --line…)
   and never needs a dark-theme variant. Loaded after styles.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The 3rd tab pane: mounts beside Chat + AstroLogic in the .astro-tabs bar ── */
.chat-screen.view-consult .chat-stream,
.chat-screen.view-consult .chat-chips,
.chat-screen.view-consult .chat-input,
.chat-screen.view-consult .astro-pane{ display:none !important; }
.consult-pane{ display:none; }
.chat-screen.view-consult .consult-pane{
  display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  position:relative;
}
.consult-pane::-webkit-scrollbar{ width:0; }

/* keep the tab bar lightweight but never let 3 labels overflow narrow phones */
.astro-tabs{ overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; }
.astro-tabs::-webkit-scrollbar{ height:0; }
.astro-tab{ white-space:nowrap; flex:0 0 auto; }
/* faint "new" cue on the Consult tab — a single quiet gold star (✦), no badge/label */
#tabConsult{ position:relative; }
#tabConsult::after{ content:"✦"; position:absolute; top:2px; right:-10px;
  font-size:10px; line-height:1; color:var(--gold-bright); }
#tabConsult.is-active::after{ display:none; }

/* the scrolling document + generous bottom room so the sticky bar never hides the last row */
.consult-doc{ padding:20px 18px 104px; }
.consult-doc.no-bar{ padding-bottom:32px; }
.consult-section{ animation:consultIn .5s var(--ease-house) both; }

@keyframes consultIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes consultPop{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }

/* shared editorial primitives ------------------------------------------------ */
.consult-eyebrow{ font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-deep); }
.consult-kicker{ display:inline-flex; align-items:center; gap:7px; font-family:var(--display);
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#b06d1c;
  background:linear-gradient(135deg, rgba(200,114,26,.12), rgba(184,137,42,.10));
  border:1px solid rgba(200,114,26,.28); border-radius:999px; padding:5px 12px; }
.consult-kicker .cd-star{ color:var(--gold-bright); font-size:11px; line-height:1; }
.consult-h{ font-family:var(--serif); font-weight:600; color:var(--ink); line-height:1.22;
  letter-spacing:.004em; }
.consult-sub{ font-family:var(--serif); font-size:15px; line-height:1.62; color:var(--ink-soft); }
.consult-label{ font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep); }
.consult-rule{ height:1px; background:var(--line); margin:26px 0; border:0; }
.consult-rule.soft{ background:var(--line-soft); }

/* ── SECTION 1 · Hero / intro ────────────────────────────────────────────── */
.consult-hero{ padding-top:2px; }
.consult-hero .consult-h{ font-size:clamp(26px,7.4vw,32px); margin:14px 0 10px; max-width:19ch; text-wrap:balance; }
.consult-hero .consult-h em{ font-style:normal; color:var(--gold-bright); }
.consult-hero .consult-sub{ max-width:40ch; }

/* ── SECTION 2 · Founder astrologer profile (the editorial centrepiece) ────── */
.consult-founder{ margin-top:30px; }
.consult-portrait{ position:relative; width:100%; aspect-ratio:4/5; border-radius:20px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 24px 48px -30px rgba(58,36,16,.5);
  background:linear-gradient(158deg,#f4e7d2 0%,#ead2b2 52%,#d9ad84 100%); }
.consult-portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:2; }
.cf-portrait-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; z-index:1; overflow:hidden; }
.cf-portrait-ph svg{ position:absolute; width:150%; height:150%; opacity:.5; color:#c79355; }
.cf-portrait-ph .cf-mono{ position:relative; font-family:var(--display); font-weight:500; font-size:64px;
  letter-spacing:.05em; color:#7a5326; text-shadow:0 1px 0 rgba(255,248,235,.5); }
.cf-portrait-ph .cf-mono-note{ position:relative; margin-top:12px; font-family:var(--display); font-size:9.5px;
  font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:rgba(122,83,38,.72); }
.consult-portrait .cf-ea{ position:absolute; top:14px; left:14px; z-index:3; }
.consult-portrait .cf-ea .consult-kicker{ background:rgba(255,250,242,.82); -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px); }

.consult-founder-id{ margin-top:18px; }
.consult-founder-id .cf-name{ font-family:var(--serif); font-weight:600; font-size:22px; color:var(--ink);
  letter-spacing:.006em; }
.consult-founder-id .cf-title{ font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep); margin-top:6px; }
.consult-founder-id .cf-bio{ font-family:var(--serif); font-size:15px; line-height:1.62; color:var(--ink-soft);
  margin-top:14px; font-style:italic; }
.consult-founder-id .cf-method{ display:flex; align-items:center; gap:8px; margin-top:14px;
  font-family:var(--serif); font-size:13px; color:var(--gold-deep); }
.consult-founder-id .cf-method::before{ content:""; width:16px; height:1px; background:var(--gold-deep); opacity:.6; }

/* ── SECTION 3 · What the session is for ───────────────────────────────────── */
.consult-purpose .consult-h{ font-size:20px; margin-bottom:10px; }
.consult-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.consult-chip{ font-family:var(--serif); font-size:13px; color:var(--ink-soft);
  background:rgba(184,137,42,.06); border:1px solid var(--line); border-radius:999px; padding:6px 13px; }

/* ── SECTION 4 · Consultation details (one strong information container) ────── */
.consult-details{ margin-top:6px; background:linear-gradient(180deg,#fffdf9,#faf3e8);
  border:1px solid var(--line); border-radius:18px; padding:22px 20px;
  box-shadow:0 14px 34px -26px rgba(58,36,16,.4); }
.consult-details .cd-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.consult-details .cd-top > .cd-name{ min-width:0; }
.consult-details .cd-name{ font-family:var(--serif); font-weight:600; font-size:18px; color:var(--ink); line-height:1.3; }
.consult-details .cd-name .nb{ white-space:nowrap; }
.consult-details .cd-price{ font-family:var(--serif); font-weight:600; font-size:26px; color:var(--ink);
  letter-spacing:.01em; white-space:nowrap; }
.consult-details .cd-price small{ display:block; font-family:var(--display); font-size:9px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); text-align:right; margin-top:2px; }
.consult-details .cd-facts{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.consult-fact{ display:flex; align-items:flex-start; gap:11px; }
.consult-fact svg{ width:17px; height:17px; flex:0 0 auto; stroke:var(--gold-deep); fill:none; stroke-width:1.7; margin-top:1px; }
.consult-fact b{ font-family:var(--serif); font-weight:600; font-size:14.5px; color:var(--ink); }
.consult-fact span{ display:block; font-family:var(--serif); font-size:13px; color:var(--ink-soft); line-height:1.5; margin-top:1px; }
.consult-details .cd-note{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-family:var(--serif); font-size:12.5px; color:var(--ink-faint); line-height:1.55; }
.consult-details .cd-note b{ color:var(--gold-deep); font-weight:600; }

/* ── SECTION 5 · Who is this consultation for? (scrollable profile cards) ───── */
.consult-people{ display:flex; gap:11px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding:2px 2px 8px; margin:0 -2px; }
.consult-people::-webkit-scrollbar{ height:0; }
.consult-person{ scroll-snap-align:start; flex:0 0 auto; width:min(66%,230px); text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:15px 15px 14px;
  cursor:pointer; font:inherit; position:relative; transition:border-color .2s, box-shadow .2s, background .2s; }
.consult-person:hover{ border-color:var(--gold-deep); }
.consult-person.on{ border-color:var(--gold); background:#fdf3e4; box-shadow:0 0 0 1px rgba(184,137,42,.28); }
.consult-person .cp-rel{ font-family:var(--display); font-size:9.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep); }
.consult-person .cp-name{ font-family:var(--serif); font-weight:600; font-size:17px; color:var(--ink);
  margin-top:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.consult-person .cp-dob{ font-family:var(--serif); font-size:13px; color:var(--ink-soft); margin-top:2px; }
.consult-person .cp-check{ position:absolute; top:13px; right:13px; width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; transition:all .2s; }
.consult-person .cp-check svg{ width:11px; height:11px; stroke:#fff; fill:none; stroke-width:2.6; opacity:0; transition:opacity .2s; }
.consult-person.on .cp-check{ background:var(--gold); border-color:var(--gold); }
.consult-person.on .cp-check svg{ opacity:1; }
.consult-person.add{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--gold-deep); border-style:dashed; width:min(42%,150px); text-align:center; }
.consult-person.add .cp-plus{ width:30px; height:30px; border-radius:50%; border:1.5px solid var(--gold-deep);
  display:flex; align-items:center; justify-content:center; font-size:19px; line-height:0; }
.consult-person.add span{ font-family:var(--display); font-size:9.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; }

/* ── SECTION 6 · Next available consultation windows ───────────────────────── */
.consult-windows .cw-label{ font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-deep); margin:22px 0 12px; }
.cw-list{ display:flex; flex-direction:column; gap:11px; }

/* one curated date — an elegant selectable row that expands to reveal its times */
.cw-item{ border:1px solid var(--line); border-radius:16px; background:var(--card); overflow:hidden;
  box-shadow:0 2px 12px rgba(28,21,16,.05); transition:border-color .2s, box-shadow .2s, background .2s; }
.cw-item:hover{ border-color:var(--gold-deep); }
.cw-item.open{ border-color:var(--gold); background:#fdf3e4; box-shadow:0 14px 34px -22px rgba(200,114,26,.55); }

.cw-row{ width:100%; display:flex; align-items:center; gap:14px; text-align:left; background:none;
  border:0; cursor:pointer; font:inherit; padding:16px 18px; }
.cw-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cw-date{ font-family:var(--serif); font-weight:600; font-size:15.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); transition:color .2s; }
.cw-note{ font-family:var(--serif); font-size:13.5px; color:var(--ink-soft); }
.cw-item.open .cw-date{ color:var(--gold-bright); }
.cw-chev{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--gold-deep);
  transition:transform .24s var(--ease-house), background .2s, border-color .2s, color .2s; }
.cw-chev svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }
.cw-item.open .cw-chev{ transform:rotate(90deg); background:var(--gold); border-color:var(--gold); color:#fff; }

/* the revealed time-picker for the selected date */
.cw-reveal{ padding:0 18px 18px; animation:cwReveal .32s var(--ease-house) both; }
@keyframes cwReveal{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.cw-choose{ font-family:var(--serif); font-size:13px; color:var(--ink-soft); margin-bottom:12px;
  padding-top:14px; border-top:1px solid var(--line-soft); }
.cw-slots{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cw-slot{ min-height:50px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line);
  border-radius:12px; background:var(--field); cursor:pointer; font-family:var(--serif); font-size:15.5px;
  color:var(--ink); transition:border-color .18s, background .18s, box-shadow .18s, transform .12s; }
.cw-slot:hover{ border-color:var(--gold); }
.cw-slot:active{ transform:translateY(1px); }
.cw-slot.on{ border-color:transparent; color:#fff; font-weight:600;
  background:linear-gradient(135deg,#c8721a,#b84c2e); box-shadow:0 8px 20px -10px rgba(200,114,26,.6); }
.cw-tz{ font-family:var(--serif); font-size:12px; color:var(--ink-faint); margin-top:11px; }

/* concise confirmation of the chosen date + time */
.cw-picked{ display:flex; align-items:center; gap:9px; margin-top:14px; padding:11px 14px;
  background:rgba(184,137,42,.1); border:1px solid rgba(184,137,42,.3); border-radius:12px;
  font-family:var(--serif); font-weight:600; font-size:14px; color:var(--ink); animation:consultPop .28s var(--ease-house) both; }
.cw-picked-tick{ flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg,#c8721a,#b84c2e); display:flex; align-items:center; justify-content:center; }
.cw-picked-tick svg{ width:12px; height:12px; stroke:#fff; fill:none; stroke-width:2.6; }

/* view later / show fewer dates */
.cw-toggle{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-family:var(--display);
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep);
  background:none; border:0; cursor:pointer; padding:4px 0; transition:color .2s; }
.cw-toggle:hover{ color:var(--gold-bright); }
.cw-toggle svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2;
  transition:transform .24s var(--ease-house); }
.cw-toggle svg.up{ transform:rotate(180deg); }

/* loading skeleton for the windows list */
.cw-skeleton{ display:flex; flex-direction:column; gap:11px; margin-top:12px; }
.cw-skeleton i{ height:66px; border-radius:16px; background:linear-gradient(100deg,#f1e7d6 30%,#f8f1e6 50%,#f1e7d6 70%);
  background-size:200% 100%; animation:calShimmer 1.3s ease-in-out infinite; }
@keyframes calShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* empty / edge states — calm, never error-like */
.consult-empty{ margin-top:16px; padding:22px 18px; text-align:center; border:1px dashed var(--line);
  border-radius:14px; background:rgba(184,137,42,.03); }
.consult-empty .ce-title{ font-family:var(--serif); font-size:15px; color:var(--ink); }
.consult-empty .ce-sub{ font-family:var(--serif); font-size:13px; color:var(--ink-soft); margin-top:5px; }

/* ── SECTION 8 · Sticky booking bar ────────────────────────────────────────── */
.consult-bar{ position:sticky; bottom:0; left:0; right:0; z-index:6; display:flex; align-items:center; gap:14px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(245,239,230,0), #f5efe6 42%);
  border-top:1px solid var(--line); box-shadow:0 -12px 26px -18px rgba(58,36,16,.28); }
.consult-bar .cb-info{ flex:1 1 auto; min-width:0; }
.consult-bar .cb-when{ font-family:var(--serif); font-weight:600; font-size:14px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.consult-bar .cb-price{ font-family:var(--serif); font-size:13px; color:var(--ink-soft); }
.consult-bar .cb-price b{ color:var(--gold-deep); font-weight:600; }
.consult-bar .cb-cta{ flex:0 0 auto; font-family:var(--display); font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; border:none; border-radius:999px; padding:15px 22px; cursor:pointer;
  background:linear-gradient(135deg,#c8721a,#b84c2e); box-shadow:0 10px 24px -10px rgba(200,114,26,.6);
  transition:box-shadow .2s, transform .12s, opacity .2s; white-space:nowrap; }
.consult-bar .cb-cta:hover:not(:disabled){ box-shadow:0 14px 30px -10px rgba(200,114,26,.7); }
.consult-bar .cb-cta:active:not(:disabled){ transform:translateY(1px); }
.consult-bar .cb-cta:disabled{ background:#e7ddcd; color:var(--ink-faint); box-shadow:none; cursor:not-allowed;
  letter-spacing:.06em; }
.consult-bar.pending{ justify-content:center; }
.consult-bar.pending .cb-cta{ width:100%; }

/* ── Upcoming consultation card (returning user) ───────────────────────────── */
.consult-upcoming{ margin-bottom:28px; background:linear-gradient(158deg,#2a1a0e,#3d2413);
  border:1px solid rgba(200,114,26,.34); border-radius:20px; padding:22px 20px; color:#faf3e8;
  box-shadow:0 22px 46px -28px rgba(58,36,16,.7); animation:consultIn .5s var(--ease-house) both; }
.consult-upcoming .cu-eyebrow{ display:inline-flex; align-items:center; gap:7px; font-family:var(--display);
  font-size:9.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#f0b877; }
.consult-upcoming .cu-eyebrow .cu-live{ width:6px; height:6px; border-radius:50%; background:#7ec97e;
  box-shadow:0 0 7px #7ec97e; }
.consult-upcoming .cu-when{ font-family:var(--serif); font-weight:600; font-size:23px; margin-top:12px; line-height:1.2; }
.consult-upcoming .cu-time{ font-family:var(--serif); font-size:15px; color:rgba(250,243,232,.8); margin-top:3px; }
.consult-upcoming .cu-meta{ margin-top:16px; padding-top:14px; border-top:1px solid rgba(240,184,119,.2);
  display:flex; flex-direction:column; gap:7px; }
.consult-upcoming .cu-row{ display:flex; justify-content:space-between; gap:12px; font-family:var(--serif); font-size:13.5px; }
.consult-upcoming .cu-row span{ color:rgba(250,243,232,.62); }
.consult-upcoming .cu-row b{ color:#faf3e8; font-weight:600; text-align:right; }
.consult-upcoming .cu-cta{ margin-top:18px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#faf3e8; background:rgba(200,114,26,.24); border:1px solid rgba(200,114,26,.42); border-radius:999px;
  padding:11px 18px; cursor:pointer; transition:background .2s; }
.consult-upcoming .cu-cta:hover{ background:rgba(200,114,26,.38); }
.consult-upcoming .cu-cta svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }

/* "book another" secondary action shown in the booked state */
.consult-again{ text-align:center; padding:8px 0 4px; }
.consult-again button{ font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-deep); background:none; border:none; cursor:pointer;
  border-bottom:1px solid var(--gold-deep); padding:4px 0; }
.consult-again button:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }

/* ── SECTION 9 · Review bottom sheet ───────────────────────────────────────── */
/* Flex column: the grip + a scrollable body (.cr-scroll) + a pinned footer.
   The sheet itself no longer scrolls — only .cr-scroll does — so .cr-footer
   (Continue button) stays fixed at the bottom while the summary scrolls. */
.consult-review-sheet{ padding:12px 0 0; gap:0; max-height:88vh; overflow:hidden; }
#consultReviewBody{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; width:100%; }
.cr-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:2px 20px 14px; }
.cr-scroll::-webkit-scrollbar{ width:0; }
.cr-head{ text-align:center; margin-bottom:4px; }
.cr-head .cr-eyebrow{ font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-deep); }
.cr-head .cr-title{ font-family:var(--serif); font-weight:600; font-size:21px; color:var(--ink); margin-top:6px; }
.cr-founder{ display:flex; align-items:center; gap:13px; margin:18px 0; padding-bottom:18px;
  border-bottom:1px solid var(--line-soft); }
.cr-founder .cr-portrait{ width:52px; height:52px; flex:0 0 auto; border-radius:14px; overflow:hidden;
  position:relative; background:linear-gradient(158deg,#f4e7d2,#d9ad84); }
.cr-founder .cr-portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 15%; z-index:2; }
.cr-founder .cr-portrait .cr-mono{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:19px; color:#7a5326; }
.cr-founder .cr-fname{ font-family:var(--serif); font-weight:600; font-size:16px; color:var(--ink); }
.cr-founder .cr-ftitle{ font-family:var(--display); font-size:9.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-deep); margin-top:3px; }
.cr-rows{ display:flex; flex-direction:column; gap:0; }
.cr-row{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.cr-row:last-child{ border-bottom:none; }
.cr-row .cr-k{ font-family:var(--serif); font-size:14px; color:var(--ink-soft); flex:0 0 auto; }
.cr-row .cr-v{ font-family:var(--serif); font-size:14px; color:var(--ink); font-weight:600; text-align:right; }
.cr-row.cr-total{ margin-top:6px; padding-top:14px; border-top:1px solid var(--line); border-bottom:none; }
.cr-row.cr-total .cr-k{ color:var(--ink); font-weight:600; }
.cr-row.cr-total .cr-v{ font-size:20px; }
/* Pinned footer — sits below .cr-scroll and never scrolls away. */
.cr-footer{ flex:0 0 auto; display:flex; flex-direction:column; gap:9px;
  padding:13px 20px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-soft); background:#1a0f08;
  box-shadow:0 -12px 26px -16px rgba(0,0,0,.5); }
.cr-pay{ font-family:var(--display); font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; border:none; border-radius:999px; padding:16px; cursor:pointer;
  background:linear-gradient(135deg,#c8721a,#b84c2e); box-shadow:0 12px 28px -12px rgba(200,114,26,.6); }
.cr-pay:active{ transform:scale(.99); }
/* Relocated above (with the date/time details) rather than under the CTA. */
.cr-change-wrap{ text-align:center; margin:14px 0 2px; }
.cr-change{ font-family:var(--serif); font-size:13.5px; color:var(--gold-deep); background:none; border:none;
  cursor:pointer; padding:6px 10px; border-bottom:1px solid transparent; }
.cr-change:hover{ color:var(--gold-bright); border-bottom-color:var(--gold-bright); }
.cr-secure{ text-align:center; font-family:var(--serif); font-size:11.5px; color:var(--ink-faint); margin:0; }
body:not(.theme-dark) .cr-footer{ background:#faf4ea; }

/* processing state inside the sheet */
.cr-processing{ text-align:center; padding:30px 10px 24px; }
.cr-spinner{ width:44px; height:44px; margin:0 auto 20px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--gold-bright); animation:crSpin .8s linear infinite; }
@keyframes crSpin{ to{ transform:rotate(360deg); } }
.cr-processing .cr-p-title{ font-family:var(--serif); font-weight:600; font-size:18px; color:var(--ink); }
.cr-processing .cr-p-sub{ font-family:var(--serif); font-size:13.5px; color:var(--ink-soft); margin-top:6px; }

/* ── SECTION 11 · Confirmation experience ──────────────────────────────────── */
.consult-confirm{ padding:34px 20px calc(28px + env(safe-area-inset-bottom)); text-align:center;
  display:flex; flex-direction:column; align-items:center; animation:consultIn .5s var(--ease-house) both; }
.consult-confirm .cc-seal{ width:74px; height:74px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 35%, #fbe9cf, #f0c98a); border:1px solid rgba(184,137,42,.4);
  box-shadow:0 16px 34px -16px rgba(200,114,26,.55); animation:consultPop .5s .1s var(--ease-house) both; }
.consult-confirm .cc-seal svg{ width:34px; height:34px; stroke:#a85a18; fill:none; stroke-width:2.4; }
.consult-confirm .cc-eyebrow{ font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-deep); margin-top:22px; }
.consult-confirm .cc-title{ font-family:var(--serif); font-weight:600; font-size:25px; color:var(--ink); margin-top:12px;
  line-height:1.24; max-width:16ch; }
.consult-confirm .cc-sub{ font-family:var(--serif); font-size:15px; color:var(--ink-soft); margin-top:10px; max-width:32ch; }
.consult-card{ width:100%; max-width:400px; margin:26px auto 0; text-align:left; background:#fffdf9;
  border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:0 16px 38px -28px rgba(58,36,16,.5); }
.consult-card .ccx-founder{ display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:6px;
  border-bottom:1px solid var(--line-soft); }
.consult-card .ccx-portrait{ width:46px; height:46px; flex:0 0 auto; border-radius:12px; overflow:hidden; position:relative;
  background:linear-gradient(158deg,#f4e7d2,#d9ad84); }
.consult-card .ccx-portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; }
.consult-card .ccx-portrait .cr-mono{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:17px; color:#7a5326; }
.consult-card .ccx-fname{ font-family:var(--serif); font-weight:600; font-size:15.5px; color:var(--ink); }
.consult-card .ccx-ftitle{ font-family:var(--display); font-size:9px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-deep); margin-top:3px; }
.consult-card .cr-row .cr-k{ font-size:13.5px; }
.consult-card .cr-row .cr-v{ font-size:13.5px; }
.consult-join{ width:100%; max-width:400px; margin:14px auto 0; padding:13px 16px; border-radius:12px;
  background:rgba(184,137,42,.06); border:1px solid var(--line-soft); font-family:var(--serif); font-size:12.5px;
  color:var(--ink-soft); line-height:1.5; text-align:center; }
.cc-actions{ width:100%; max-width:400px; margin:24px auto 0; display:flex; flex-direction:column; gap:11px; }
.cc-actions .cc-primary{ font-family:var(--display); font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; border:none; border-radius:999px; padding:15px; cursor:pointer;
  background:linear-gradient(135deg,#c8721a,#b84c2e); box-shadow:0 12px 28px -14px rgba(200,114,26,.6); }
.cc-actions .cc-row2{ display:flex; gap:11px; }
.cc-actions .cc-ghost{ flex:1; font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold-deep); background:var(--field); border:1px solid var(--line);
  border-radius:999px; padding:13px; cursor:pointer; transition:border-color .2s, color .2s; }
.cc-actions .cc-ghost:hover{ border-color:var(--gold); color:var(--gold-bright); }

/* Tax-invoice download. Rendered only when the server says the booking is
   invoiceable (invoiceAvailable), so there is no disabled/empty state to style.
   The dark upcoming card reuses .cu-cta above; this is the light confirmed card. */
.ci-btn{ width:100%; max-width:400px; margin:14px auto 0; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; font-family:var(--display); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold-deep); background:var(--field);
  border:1px solid var(--line); border-radius:999px; padding:13px; cursor:pointer;
  transition:border-color .2s, color .2s; }
.ci-btn:hover{ border-color:var(--gold); color:var(--gold-bright); }
.ci-btn svg{ width:14px; height:14px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.ci-inv:disabled{ opacity:.65; cursor:default; }
.ci-dots{ width:13px; height:13px; flex:0 0 auto; border-radius:50%; border:1.8px solid currentColor;
  border-top-color:transparent; opacity:.85; animation:ciInvSpin .7s linear infinite; }
@keyframes ciInvSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .ci-dots{ animation:none; } }

/* tiny toast for mocked actions (Add to calendar / view booking) */
.consult-toast{ position:absolute; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(8px);
  z-index:20; background:#2a1a0e; color:#faf3e8; font-family:var(--serif); font-size:13px; padding:11px 18px;
  border-radius:999px; box-shadow:0 14px 30px -12px rgba(0,0,0,.5); opacity:0; pointer-events:none;
  transition:opacity .24s, transform .24s; white-space:nowrap; max-width:88%; text-align:center; }
.consult-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ── SECTION · "Anything you'd like to focus on?" (questions for the astrologer) ── */
.consult-ask-label{ font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin:18px 0 10px; }
.consult-ask-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.consult-ask-chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--serif); font-size:13.5px;
  color:var(--ink-soft); background:var(--field); border:1px solid var(--line); border-radius:999px;
  padding:8px 14px; cursor:pointer; transition:border-color .18s, background .18s, color .18s; }
.consult-ask-chip:hover{ border-color:var(--gold-deep); }
.consult-ask-chip .cak-tick{ width:0; overflow:hidden; opacity:0; font-size:11px; transition:width .18s, opacity .18s; }
.consult-ask-chip.on{ color:#fff; border-color:transparent; background:linear-gradient(135deg,#c8721a,#b84c2e);
  box-shadow:0 6px 16px -8px rgba(200,114,26,.55); font-weight:600; }
.consult-ask-chip.on .cak-tick{ width:12px; opacity:1; }

.consult-ask-field{ position:relative; margin-top:14px; }
.consult-ask-input{ width:100%; display:block; resize:vertical; min-height:104px; font-family:var(--serif);
  font-size:15px; line-height:1.55; color:var(--ink); background:#fffdf9; border:1px solid var(--line);
  border-radius:14px; padding:14px 15px 26px; box-shadow:inset 0 1px 2px rgba(58,36,16,.04);
  transition:border-color .18s, box-shadow .18s; }
.consult-ask-input::placeholder{ color:var(--ink-faint); }
.consult-ask-input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,137,42,.16); }
.consult-ask-count{ position:absolute; right:12px; bottom:9px; font-family:var(--serif); font-size:11px;
  color:var(--ink-faint); pointer-events:none; }

/* the shared-context summary (review sheet · confirmation · upcoming card) */
.consult-focus{ margin-top:16px; padding:14px 16px; background:rgba(184,137,42,.06);
  border:1px solid var(--line-soft); border-radius:14px; }
.consult-focus .cq-head{ font-family:var(--display); font-size:9.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-deep); }
.cq-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.cq-chip{ font-family:var(--serif); font-size:12.5px; color:var(--ink-soft); background:var(--field);
  border:1px solid var(--line); border-radius:999px; padding:4px 11px; }
.consult-focus .cq-text{ font-family:var(--serif); font-style:italic; font-size:14px; line-height:1.55;
  color:var(--ink); margin-top:10px; }
/* dark variant, used inside the parchment-on-espresso upcoming card */
.consult-focus.on-dark{ margin-top:16px; background:rgba(240,184,119,.08); border-color:rgba(240,184,119,.22); }
.consult-focus.on-dark .cq-head{ color:#f0b877; }
.consult-focus.on-dark .cq-chip{ color:#faf3e8; background:rgba(255,250,242,.08); border-color:rgba(240,184,119,.28); }
.consult-focus.on-dark .cq-text{ color:rgba(250,243,232,.9); }

/* review sheet: questions block + "add" invite */
.cr-questions{ margin-top:16px; }
.cr-questions .consult-focus{ margin-top:0; }
.cr-q-edit{ display:inline-block; margin-top:10px; font-family:var(--display); font-size:10px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); background:none; border:none;
  border-bottom:1px solid var(--gold-deep); padding:2px 0; cursor:pointer; }
.cr-q-edit:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }
.cr-addq{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; margin-top:16px;
  padding:14px 16px; background:rgba(184,137,42,.05); border:1px dashed var(--line); border-radius:14px;
  cursor:pointer; transition:border-color .18s, background .18s; }
.cr-addq:hover{ border-color:var(--gold-deep); background:rgba(184,137,42,.09); }
.cr-addq .cr-addq-plus{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--gold-deep);
  color:var(--gold-deep); display:flex; align-items:center; justify-content:center; font-size:19px; line-height:0; }
.cr-addq .cr-addq-txt b{ display:block; font-family:var(--serif); font-weight:600; font-size:14.5px; color:var(--ink); }
.cr-addq .cr-addq-txt small{ font-family:var(--serif); font-size:12.5px; color:var(--ink-soft); }

/* review sheet: optional contact email (sits just above the pinned Continue button) */
.cr-email{ margin-top:18px; }
.cr-email-label{ display:flex; align-items:baseline; gap:8px; font-family:var(--display); font-size:10px;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:9px; }
.cr-email-label span{ font-family:var(--serif); font-size:11px; font-weight:400; letter-spacing:0;
  text-transform:none; color:var(--ink-faint); opacity:.8; }
.cr-email-input{ width:100%; display:block; font-family:var(--serif); font-size:15px; color:var(--ink);
  background:#fffdf9; border:1px solid var(--line); border-radius:14px; padding:13px 15px;
  box-shadow:inset 0 1px 2px rgba(58,36,16,.04); transition:border-color .18s, box-shadow .18s; }
.cr-email-input::placeholder{ color:var(--ink-faint); }
.cr-email-input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,137,42,.16); }
.cr-email-input.invalid{ border-color:#c0492b; box-shadow:0 0 0 3px rgba(192,73,43,.14); }
.cr-email-note{ font-family:var(--serif); font-size:12px; color:var(--ink-faint); margin:8px 2px 0; line-height:1.45; }
.cr-email-note.is-error{ color:#c0492b; }

/* ── Responsive polish ─────────────────────────────────────────────────────── */
/* Founder portrait + identity go side-by-side once there's room inside the column */
@media (min-width:520px){
  .consult-founder{ display:grid; grid-template-columns:44% 1fr; gap:22px; align-items:center; }
  .consult-founder .consult-portrait{ aspect-ratio:4/5; }
  .consult-founder-id{ margin-top:0; }
  .cw-slots{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:360px){
  .consult-doc{ padding-left:14px; padding-right:14px; }
  .consult-person{ width:min(72%,210px); }
  .cw-row{ padding-left:15px; padding-right:15px; }
  .cw-reveal{ padding-left:15px; padding-right:15px; }
  .cw-slot{ font-size:15px; }
  .consult-details{ padding:20px 16px; }
  .consult-details .cd-price{ font-size:23px; }
  .consult-details .cd-name{ font-size:16px; }
  .consult-bar{ gap:10px; padding-left:14px; padding-right:14px; }
  .consult-bar .cb-cta{ padding:14px 16px; }
}

@media (prefers-reduced-motion:reduce){
  .consult-section, .cw-reveal, .cw-picked, .consult-upcoming, .consult-confirm,
  .consult-confirm .cc-seal, .cr-spinner, .cw-skeleton i, .consult-toast{
    animation:none !important; transition:none !important; }
}

/* keyboard focus — visible everywhere (matches the app's gold focus language) */
.consult-pane :focus-visible,
.consult-review-sheet :focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; border-radius:6px; }