/* ============================================================================
 * consult.css — minimal overrides on top of brand.css
 * Brand.css owns typography, buttons, cards, form inputs, spinners.
 * ============================================================================ */

.intake-card {
  position: relative;
}

/* Subtle dot pattern tucked into the top-left of the intake card */
.intake-card .dot-pattern {
  position: absolute;
  inset: -24px;
  background-image: radial-gradient(circle, var(--navy) 4px, transparent 4px);
  background-size: 14px 14px;
  opacity: 0.22;
  z-index: 0;
  mask-image: radial-gradient(ellipse at top left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.02) 70%);
  -webkit-mask-image: radial-gradient(ellipse at top left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.02) 70%);
  pointer-events: none;
}

.intake-body {
  position: relative;
  z-index: 1;
}

#intake-form {
  margin-top: 0.5rem;
}

.intake-error {
  background: rgba(255, 126, 192, 0.08);
  border: 1px solid rgba(255, 126, 192, 0.30);
  color: var(--pink);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}

.intake-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}
.intake-actions .btn-pill,
.intake-actions .btn-mesh {
  width: 100%;
  max-width: 320px;
}

/* .success-card styles moved to calendar.css (shared by rebook + consult) */

/* ============================================================================
 * Embed mode — the consult page is iframed into the marketing site with
 * ?embed=1 (body.embed set by an inline script in consult.html). Strip the
 * standalone chrome (beta banner + page heading/lede) and tighten the page
 * padding so only the booking card shows inside the host's framed panel.
 * !important is needed because the mobile rules in calendar.css target
 * `.page[data-mode="consult"] .hero/.beta-banner` at higher specificity.
 * Gated entirely on .embed, so the standalone /consult page is untouched.
 * ============================================================================ */
body.embed .beta-banner,
body.embed .hero { display: none !important; }
body.embed .page {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  /* On mobile the standalone page is a 100dvh app-shell (.page is a flex column
   * locked to the viewport, with .booking-card flex:1 1 auto stretching to
   * fill). Inside an iframe that just leaves big empty gaps, so collapse the
   * app-shell back to normal block flow — the card then sizes to its content. */
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: block !important;
}
/* Let html/body shrink to the card's height (brand.css forces min-height:100vh,
 * and the mobile rules force 100dvh + overflow:hidden) so the body's scrollHeight
 * reflects real content and the host can auto-size the iframe to fit (see the
 * postMessage height beacon in consult.html). */
html.embed, body.embed { min-height: 0 !important; height: auto !important; overflow: visible !important; }

/* Squiggle coverage in embed mode. Two prior bugs:
 * 1) `background-attachment: fixed` renders unpredictably in iOS iframes.
 * 2) A body-sized layer stops at the body's height — if the host iframe is
 *    taller than the content (its CSS min-height winning over the beacon
 *    height), the leftover band at the bottom showed NO squiggle.
 * Fix: paint the squiggle on html.embed (the canvas). The canvas background
 * always covers the ENTIRE iframe viewport, whatever its height, with normal
 * scroll attachment — squiggle runs uniformly to every edge, no dead band. */
html.embed {
  background: #0A091A url("/squiggly-bg.svg?v=64") repeat left top !important;
  background-size: 480px 480px !important;
}
body.embed { background-image: none !important; }

/* Inner card: a smaller, dark, electric-purple-bordered container holding the
 * calendar, sitting ON the page's squiggle background. Two containers — the
 * host's full-bleed gradient frame (outer) + this purple card (inner) — with
 * the squiggle showing between them. The flat dark fill (not a gradient) keeps
 * the calendar legible against the busy squiggle. */
body.embed .booking-card {
  background: #14122A !important;       /* flat dark, not shaded */
  border: 3px solid #9945FF !important; /* electric purple */
  border-radius: 20px !important;
}
/* Keep the inner card smaller than the full-bleed frame and centered, with a
 * squiggle band around it (the page padding + the centering margin). */
body.embed .page { max-width: 1080px !important; padding: 32px 24px !important; }
/* width:100% matters: the booking-card is a flex COLUMN, and auto side
 * margins on a flex child trigger shrink-to-fit — the panel was collapsing
 * to its content width (~253px of a 336px card) and the form fields looked
 * skinny (Andrew 2026-07-13). Full width + max-width keeps it filling
 * phones and centered on wide embeds. */
body.embed .intake-panel { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }