/*
 * features/shared/funnel-ui.css — the shared birth-details form kit.
 *
 * ONE source of truth for the form UI used by BOTH funnels:
 *   - the main app registration  (features/funnel/onboarding.js)
 *   - the standalone Sangam page  (r/sangam/index.html)
 * Both pages <link> this file so the two forms stay pixel-identical and can't
 * drift into "minor inconsistencies".
 *
 * Values are HARDCODED (not var()) on purpose: the two host pages each define
 * --glass-border / --card / --text / --input etc. with DIFFERENT values, so
 * referencing them here would render differently in each app. Literals keep it
 * identical everywhere. Fonts (Outfit / Cormorant Garamond) are loaded by both
 * host pages, so the font-family names resolve in either context.
 */

/* --- fields ------------------------------------------------------------ */
.field { margin-bottom: 16px; position: relative; }
.field label { display: block; font-size: 12px; letter-spacing: .06em; color: #A39DB8; margin-bottom: 7px; text-transform: uppercase; }
.field input, .field select { width: 100%; height: 50px; padding: 0 14px; background: rgba(19,17,43,0.6); border: 1px solid rgba(155,143,199,0.16); border-radius: 12px; color: #F1EEF9; font-family: 'Outfit', system-ui, sans-serif; font-size: 15px; font-weight: 300; }
.field input:focus, .field select:focus { outline: none; border-color: rgba(155,143,199,0.28); }
/* native date/time -> match the text inputs (constrain width on iOS + equal height + subdued icon) */
.field input[type=date], .field input[type=time] { -webkit-appearance: none; appearance: none; min-width: 0; }
.field input::-webkit-datetime-edit { color: #F1EEF9; padding: 0; text-align: left; }
.field input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.field input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field input::-webkit-calendar-picker-indicator { filter: invert(.7); opacity: .5; cursor: pointer; margin-left: auto; padding: 0; }
.field-hint { font-size: 11.5px; color: #8B84A1; margin-top: 6px; line-height: 1.45; }

/* --- binary gender segmented control (main-app form) ------------------- */
.seg { display: flex; gap: 10px; }
.seg-opt { flex: 1; height: 50px; display: flex; align-items: center; justify-content: center; background: rgba(19,17,43,0.6); border: 1px solid rgba(155,143,199,0.16); border-radius: 12px; color: #A39DB8; font-family: 'Outfit', system-ui, sans-serif; font-size: 15px; font-weight: 400; cursor: pointer; transition: .2s; -webkit-appearance: none; appearance: none; }
.seg-opt:hover { border-color: rgba(155,143,199,0.28); }
.seg-opt.is-on { border-color: rgba(155,143,199,0.45); background: linear-gradient(135deg, rgba(94,84,148,0.28), rgba(123,111,176,0.18)); color: #F1EEF9; box-shadow: 0 0 24px -8px rgba(155,143,199,0.35); }

/* --- autocomplete dropdown --------------------------------------------- */
.ac-results { position: absolute; z-index: 35; left: 0; right: 0; top: 100%; margin-top: 4px; background: #12102a; border: 1px solid rgba(155,143,199,0.28); border-radius: 12px; overflow: hidden; max-height: 210px; overflow-y: auto; }
.ac-results:empty { display: none; }
.ac-item { padding: 11px 14px; cursor: pointer; border-bottom: 1px solid rgba(155,143,199,.08); }
.ac-item:hover, .ac-item.is-active { background: rgba(155,143,199,.1); }
.ac-item b { font-weight: 500; font-size: 14px; }
.ac-item span { display: block; font-size: 12px; color: #8B84A1; }

/* --- form card + section header ---------------------------------------- */
.form-card { padding: 22px 20px; border: 1px solid rgba(155,143,199,0.16); border-radius: 18px; background: rgba(19,17,43,0.55); margin-bottom: 18px; }
.form-card .field:last-child { margin-bottom: 0; }
.form-kick { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: #D4C5A0; font-weight: 500; margin-bottom: 16px; }
.who-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.who-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; font-weight: 500; color: #F1EEF9; }

/* --- completion dot ----------------------------------------------------- */
.tab-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px dashed rgba(155,143,199,.5); position: relative; flex-shrink: 0; transition: .25s; }
.tab-dot.done { background: #7BBFA5; border: 1.5px solid #7BBFA5; animation: dotpop .25s ease both; }
.tab-dot.done::after { content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #07060e; font-size: 11px; font-weight: 700; }
@keyframes dotpop { from { transform: scale(.4); opacity: .3; } to { transform: scale(1); opacity: 1; } }

/* --- sticky floating CTA ------------------------------------------------ */
.cta-float { position: sticky; bottom: 0; z-index: 30; margin: 14px -18px 0; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); background: rgba(9,8,18,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(155,143,199,0.16); }
.cta-inner { max-width: 432px; margin: 0 auto; }
/* Consent + returning-user login on one tidy line, tight to the button. The
   login half is kept unbreakable so "Log in" never orphans onto its own line. */
.consent { text-align: center; color: #8B84A1; font-size: 12px; margin: 0 0 9px; line-height: 1.45; }
.consent a { color: #A39DB8; text-decoration: underline; }
.consent-login { white-space: nowrap; }

/* --- checklist loader (spinner -> checkmark, paced reveal) --------------- */
/* Driven by window.SaadhavChecklistLoader (features/shared/checklist-loader.js)
   in the main app; the Sangam funnel drives the same markup from its own inline
   pacing JS. Shared here so both loaders look identical. */
@keyframes spin { to { transform: rotate(360deg); } }
.load-wrap { min-height: 74dvh; display: flex; flex-direction: column; justify-content: center; padding: 0 8px; }
/* Main-app loaders (pitch + bundle) top-anchor under .pitch-loading /
   .bundle-loading-state's 15vh pad so the lotus sits high, echoing the landing.
   Sangam has neither ancestor, so it keeps the centered default above. */
.pitch-loading .load-wrap, .bundle-loading-state .load-wrap { min-height: 0; justify-content: flex-start; }
/* SANGAM loader keeps this classic look: a left-aligned fixed-width column so
   the check circles line up under the title's left edge. The MAIN-APP loaders
   (pitch + post-payment) override it into a centered, marker-less, breathing-
   text design — see the ".pitch-loading / .bundle-loading-state" block below. */
.load-logo { display: block; width: 46px; height: 46px; margin: 0 auto 20px; object-fit: contain; filter: drop-shadow(0 4px 16px rgba(155,143,199,.45)); opacity: .96; animation: loadLogoIn .7s ease-out both; }
/* Animated (inlined-svg) variant — no filter: filters on animating svg force per-frame re-raster. */
.load-logo-live { width: 46px; height: 46px; margin: 0 auto 20px; display: grid; place-items: center; overflow: visible; animation: loadLogoIn .7s ease-out both; }
.load-logo-live svg { width: 131%; height: auto; overflow: visible; }
@keyframes loadLogoIn { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: .96; transform: none; } }
.load-title { font-family: 'Lora', Georgia, serif; font-size: 24px; color: #C4B8E0; text-align: left; width: 260px; max-width: 82vw; margin: 0 auto 26px; line-height: 1.25; }
.load-list { list-style: none; width: 260px; max-width: 82vw; margin: 0 auto; padding: 0; }
.load-item { display: flex; align-items: center; gap: 12px; padding: 13px 2px; opacity: .5; transition: opacity .5s ease; }
.load-item.active, .load-item.done { opacity: 1; }
.li-mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(155,143,199,.35); flex-shrink: 0; position: relative; transition: .3s; }
.load-item.active .li-mark { border-color: #9B8FC7; border-right-color: transparent; animation: spin .8s linear infinite; }
.load-item.done .li-mark { border-color: #7BBFA5; background: #7BBFA5; animation: none; }
.load-item.done .li-mark::after { content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #07060e; font-size: 12px; font-weight: 700; }
.li-text { font-size: 15.5px; color: #C7C0DA; font-weight: 300; }
.load-item.done .li-text { color: #A39DB8; }
.load-foot { text-align: left; width: 260px; max-width: 82vw; color: #8B84A1; font-size: 12px; margin: 28px auto 0; letter-spacing: .04em; min-height: 16px; }

/* --- main-app loaders (pitch + post-payment): breathing-text design -----
   No check-circles — each step's TEXT breathes while it's active and settles
   to a solid line when done (the "check" is the text solidifying). Everything
   is centered for symmetry (there's no marker column to align to), the logo
   breathes with a soft violet halo, and the title drops its ellipsis in favour
   of three breathing dots underneath it (rendered by checklist-loader.js). */
.pitch-loading .load-logo, .bundle-loading-state .load-logo {
  animation: loadLogoIn .7s ease-out both, loadLogoGlow 5.5s ease-in-out .7s infinite;
}
@keyframes loadLogoGlow {
  0%, 100% { filter: drop-shadow(0 3px 12px rgba(155,143,199,.30)); }
  50%      { filter: drop-shadow(0 3px 22px rgba(155,143,199,.60)); }
}
.pitch-loading .load-title, .bundle-loading-state .load-title {
  text-align: center; width: auto; max-width: 82vw; margin: 0 auto 12px;
}
/* three breathing dots under the title (replaces the title's "…") */
.load-dots { display: flex; justify-content: center; gap: 7px; margin: 0 0 26px; }
.load-dots span {
  width: 5px; height: 5px; border-radius: 50%; background: #9B8FC7;
  opacity: .3; animation: loadDot 1.4s ease-in-out infinite;
}
.load-dots span:nth-child(2) { animation-delay: .18s; }
.load-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes loadDot {
  0%, 100% { opacity: .28; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-2px); }
}
.pitch-loading .load-list, .bundle-loading-state .load-list {
  width: auto; max-width: 82vw; margin: 0 auto;
}
.pitch-loading .li-mark, .bundle-loading-state .li-mark { display: none; }
.pitch-loading .load-item, .bundle-loading-state .load-item {
  justify-content: center; text-align: center; gap: 0; padding: 11px 2px; opacity: .28;
}
.pitch-loading .load-item.active, .bundle-loading-state .load-item.active {
  opacity: 1; animation: loadBreath 2.4s ease-in-out infinite;
}
.pitch-loading .load-item.done, .bundle-loading-state .load-item.done {
  opacity: 1; animation: none;
}
/* solidified (done) rows read as brighter/settled, not dimmed */
.pitch-loading .load-item.done .li-text, .bundle-loading-state .load-item.done .li-text { color: #D8D1EC; }
@keyframes loadBreath { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.pitch-loading .load-foot, .bundle-loading-state .load-foot {
  text-align: center; width: auto; max-width: 82vw; margin: 22px auto 0;
}