/* ============================================================
   SOONER FORM SHELL  ·  sooner-form-shell.css
   Reusable scaffolding for the multi-step forms (F1, F2, F3):
   chrome (logo, back button), the centered/left-aligned column,
   the CTA reveal behaviour, and step layout.

   Pairs with sooner-kit.css (load the kit FIRST - this file uses
   its tokens, and progress-bar / step-counter / highlight-sweep
   already live there). Markup contract:

     <div class="progress-bar"><div class="progress-fill"></div></div>
     <div class="step-counter"></div>
     <div class="logo">Sooner</div>
     <div class="nav-container"><button class="back-btn">…</button></div>
     <div class="stage"><div class="q-wrap" id="stage"></div></div>

   Each step renders a <h2 class="q-title">, optional <p class="q-sub">,
   the input/choices, then <div class="center-actions">…CTA…</div>.
   Add .cta-hidden to center-actions to hide the CTA until valid.
   ============================================================ */

/* ---- top chrome ---- */
.logo{position:fixed; top:16px; left:50%; transform:translateX(-50%); font-size:18px; font-weight:600; letter-spacing:-.02em; z-index:1001;}
.nav-container{position:fixed; top:20px; left:20px; z-index:1002;}
.back-btn{background:var(--white); border:1px solid var(--border); border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--dark); opacity:0; pointer-events:none; transition:opacity .2s;}
.back-btn.show{opacity:1; pointer-events:auto;}
.back-btn:hover{border-color:var(--dark);}

/* ---- the step canvas: centered column, left-aligned content ---- */
.stage{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:80px 24px 40px;}
.q-wrap{width:min(560px,100%); margin:0 auto; text-align:left;}
/* keep kit components left-aligned within the column */
.q-wrap .input-wrap{margin-left:0;}
.q-wrap .calc-card, .q-wrap .ladder{margin-left:0;}

/* ---- the keyword highlight used in question titles ---- */
.hl{background-image:linear-gradient(transparent 15%,var(--yellow) 15%,var(--yellow) 82%,transparent 82%); padding:0 4px; font-weight:700;}

/* ---- CTA area + reveal-on-valid behaviour ---- */
.center-actions{margin-top:24px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; transition:opacity .25s ease, transform .25s ease;}
.center-actions.cta-hidden{opacity:0; transform:translateY(10px); pointer-events:none;}

/* ---- multiple-choice list + terminal (off-ramp) screens ---- */
.mc-list{max-width:min(440px,100%); margin:0;}
.terminal .thanks-badge{margin-bottom:20px;}

/* ---- inline progressive disclosure: the next block animates in on answer ---- */
.reveal-block{max-height:0; opacity:0; overflow:hidden; transform:translateY(8px);
  transition:max-height .45s ease, opacity .35s ease, transform .35s ease;}
.reveal-block.show{max-height:340px; opacity:1; transform:none;}
.chips-wrap{display:flex; flex-wrap:wrap; gap:8px; max-width:min(460px,100%);}
.chips-wrap .chip{cursor:pointer; font-family:inherit;}

/* ---- phone input with a country prefix (defaults to UAE +971) ---- */
.phone-prefix{position:absolute; left:0; bottom:16px; font-size:18px; font-weight:600; color:var(--dark);
  display:flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap;}
.phone-prefix .chev{color:var(--grey); font-size:12px;}