/* Smart inquiry form — ported into the sc-editorial theme as the native Contact page.
 * ALL selectors are scoped under #sc-inquiry so the form's generic class names (.btn/.card/.step/…)
 * never collide with the theme, and the theme's globals never leak in (the #id raises specificity).
 * Brand tokens (--ink/--blush/--display/…) come from the theme :root — identical values, so no :root here.
 * Source of truth for this form now lives HERE (the standalone app's frontend is retired). */

#sc-inquiry{ font-family:var(--body); font-weight:300; color:var(--ink);
  background:linear-gradient(160deg,var(--cream) 0%,var(--cream-2) 100%);
  line-height:1.75; -webkit-font-smoothing:antialiased; }
#sc-inquiry *{ box-sizing:border-box; }
/* extra top padding clears the fixed site header (this page has no hero) so the form isn't jammed
   under the nav; the #sc-inquiry cream gradient fills behind the header. */
#sc-inquiry .stage{ max-width:800px; margin:0 auto; padding:clamp(130px,15vh,180px) clamp(20px,5vw,48px) clamp(320px,46vh,560px); }
/* phones: keep it airy but not a half-screen of dead space before the footer */
@media(max-width:640px){ #sc-inquiry .stage{ padding-bottom:clamp(120px,24vh,220px); } }

#sc-inquiry .eyebrow{ font-weight:700; font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--blush-deep); margin:0 0 18px; }
#sc-inquiry h1, #sc-inquiry h2{ font-family:var(--display); font-weight:400; line-height:1.08; margin:0; color:var(--ink); }
#sc-inquiry .q{ font-family:var(--display); font-size:clamp(1.9rem,4.6vw,3rem); font-weight:400; line-height:1.12; margin:0 0 12px; }
#sc-inquiry .help{ color:var(--ink-soft); font-size:clamp(15px,1.05vw,17px); margin:0 0 30px; max-width:56ch; }
#sc-inquiry .accent{ font-family:var(--accent); font-style:italic; color:var(--blush-deep); }

#sc-inquiry .progress{ height:2px; background:var(--line); border-radius:2px; margin-bottom:clamp(34px,6vw,54px); overflow:hidden; }
#sc-inquiry .progress > i{ display:block; height:100%; width:0; background:var(--blush-deep); transition:width .6s var(--ease); }
#sc-inquiry .stepmeta{ font-weight:700; font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px; }

/* Entrance animation gated to .animate-in so it doesn't replay on in-step re-renders (flash fix, 2026-07-11). */
#sc-inquiry .step.animate-in{ animation:sci-rise .6s var(--ease) both; }
@keyframes sci-rise{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
/* W-6 (2026-07-10): center each step's header (meta + eyebrow + question + help) so every step matches
   the centered fork intro — more cohesive. The fields below stay as designed. */
#sc-inquiry .step > .stepmeta,
#sc-inquiry .step > .eyebrow,
#sc-inquiry .step > .q,
#sc-inquiry .step > .help{ text-align:center; }
#sc-inquiry .step > .help{ margin-left:auto; margin-right:auto; }
/* Round 11 (2026-07-10, Melissa): center the ENTIRE step content — options, fields, nav, consent —
   so the whole form is centered on the page, matching the centered step headers. */
#sc-inquiry .field{ text-align:center; }
#sc-inquiry .chips{ justify-content:center; }
#sc-inquiry .chk{ justify-content:center; }
#sc-inquiry .field > input,
#sc-inquiry .field > textarea,
#sc-inquiry .field > .ac,
#sc-inquiry .field > .daterow{ max-width:540px; margin-left:auto; margin-right:auto; }
#sc-inquiry .nav{ justify-content:center; }
#sc-inquiry .err{ text-align:center; }
#sc-inquiry .consent{ text-align:center; max-width:60ch; margin-left:auto; margin-right:auto; }

#sc-inquiry .fork-head{ text-align:center; margin-bottom:clamp(34px,6vw,52px); }
#sc-inquiry .fork-head h1{ font-size:clamp(2.6rem,8vw,5rem); }
#sc-inquiry .fork-head .help{ margin:18px auto 0; text-align:center; }
#sc-inquiry .cards{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,26px); }
@media(max-width:640px){ #sc-inquiry .cards{ grid-template-columns:1fr; } }
#sc-inquiry .cards.three{ grid-template-columns:repeat(3,1fr); }
#sc-inquiry .cards.three .card{ min-width:0; padding-top:clamp(22px,2.8vw,32px); padding-bottom:clamp(22px,2.8vw,32px); }
@media(min-width:861px){ #sc-inquiry .cards.three{ width:min(1080px,92vw); margin-left:50%; transform:translateX(-50%); } }
@media(max-width:860px){ #sc-inquiry .cards.three{ grid-template-columns:1fr; } }
/* 4-category layout (Portraits · Events · Quinceañeras · Weddings) — 2×2 on desktop, 1-col on phones. */
#sc-inquiry .cards.four{ grid-template-columns:1fr 1fr; }
@media(min-width:861px){ #sc-inquiry .cards.four{ width:min(920px,92vw); margin-left:50%; transform:translateX(-50%); } }
@media(max-width:640px){ #sc-inquiry .cards.four{ grid-template-columns:1fr; } }
#sc-inquiry .card{ background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:clamp(26px,3.4vw,40px);
  cursor:pointer; text-align:left; transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
  display:flex; flex-direction:column; min-height:230px; }
#sc-inquiry .card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -34px rgba(0,0,0,.55); border-color:var(--blush); }
#sc-inquiry .card .tag{ font-weight:700; font-size:.64rem; letter-spacing:.28em; text-transform:uppercase; color:var(--blush-deep); margin-bottom:16px; }
#sc-inquiry .card h2{ font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:10px; }
#sc-inquiry .card p{ color:var(--ink-soft); font-size:15px; margin:0 0 22px; flex:1; }
#sc-inquiry .card .go{ font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); }
#sc-inquiry .card .go::after{ content:" →"; color:var(--blush-deep); }

#sc-inquiry .field{ margin-bottom:22px; }
#sc-inquiry label.fl{ display:block; font-weight:700; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:9px; }
#sc-inquiry .opt{ font-weight:400; letter-spacing:.04em; text-transform:none; color:var(--blush-deep); font-size:.82rem; }
#sc-inquiry input[type=text], #sc-inquiry input[type=email], #sc-inquiry input[type=tel], #sc-inquiry input[type=date], #sc-inquiry input[type=time], #sc-inquiry textarea{
  width:100%; font-family:var(--body); font-weight:300; font-size:16px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:10px; padding:14px 16px; transition:border-color .4s var(--ease),box-shadow .4s var(--ease); }
#sc-inquiry textarea{ min-height:120px; resize:vertical; line-height:1.6; }
#sc-inquiry input:focus, #sc-inquiry textarea:focus{ outline:none; border-color:var(--blush); box-shadow:0 0 0 4px rgba(126,184,220,.18); }

#sc-inquiry .chips{ display:flex; flex-wrap:wrap; gap:11px; }
#sc-inquiry .chip{ font-family:var(--body); font-weight:400; font-size:15px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:100px; padding:11px 20px; cursor:pointer; transition:all .35s var(--ease); user-select:none; }
#sc-inquiry .chip:hover{ border-color:var(--blush); transform:translateY(-2px); }
#sc-inquiry .chip.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

#sc-inquiry .stylegrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:560px){ #sc-inquiry .stylegrid{ grid-template-columns:1fr; } }
#sc-inquiry .scard{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:16px 18px; cursor:pointer; transition:all .35s var(--ease); }
#sc-inquiry .scard:hover{ border-color:var(--blush); transform:translateY(-2px); }
#sc-inquiry .scard.on{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
#sc-inquiry .scard b{ display:block; font-family:var(--display); font-weight:400; font-size:1.18rem; margin-bottom:2px; }
#sc-inquiry .scard.on b{ color:var(--blush-deep); }
#sc-inquiry .scard span{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
#sc-inquiry .cap{ font-size:13px; color:var(--ink-soft); margin:14px 0 0; }

/* per-field hint line (warm sub-text under a field label) + $ money input (2026-07-11) */
#sc-inquiry .fhint{ font-size:13.5px; line-height:1.55; color:var(--ink-soft); margin:-2px auto 12px; max-width:52ch; }
#sc-inquiry .money{ display:flex; align-items:center; max-width:220px; margin:0 auto; border:1px solid var(--line); border-radius:10px; background:var(--paper); transition:border-color .4s var(--ease),box-shadow .4s var(--ease); }
#sc-inquiry .money:focus-within{ border-color:var(--blush); box-shadow:0 0 0 4px rgba(126,184,220,.18); }
#sc-inquiry .money-cur{ padding:14px 4px 14px 16px; color:var(--ink-soft); font-size:16px; }
#sc-inquiry .money input[type=text]{ border:0; border-radius:0; padding:14px 16px 14px 4px; box-shadow:none; background:transparent; }
#sc-inquiry .money input[type=text]:focus{ box-shadow:none; }

#sc-inquiry .seg{ display:inline-flex; border:1px solid var(--line); border-radius:100px; overflow:hidden; background:var(--paper); margin-bottom:16px; }
#sc-inquiry .seg button{ font-family:var(--body); font-weight:700; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  border:0; background:none; color:var(--ink-soft); padding:11px 20px; cursor:pointer; transition:all .35s var(--ease); }
#sc-inquiry .seg button.on{ background:var(--ink); color:var(--paper); }
@media(max-width:380px){ #sc-inquiry .seg{ display:flex; width:100%; } #sc-inquiry .seg button{ flex:1; padding:11px 10px; letter-spacing:.08em; font-size:.62rem; } }

#sc-inquiry .daterow{ display:flex; gap:10px; align-items:center; margin-bottom:10px; }
#sc-inquiry .daterow input{ flex:1; }
#sc-inquiry .daterow .rm{ background:none; border:0; color:var(--ink-soft); cursor:pointer; font-size:20px; line-height:1; padding:6px 8px; border-radius:8px; }
#sc-inquiry .daterow .rm:hover{ color:var(--blush-deep); }
#sc-inquiry .addmore{ background:none; border:1px dashed var(--line); border-radius:100px; color:var(--ink-soft); cursor:pointer;
  font-family:var(--body); font-weight:700; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; padding:10px 18px; transition:all .35s var(--ease); }
#sc-inquiry .addmore:hover{ border-color:var(--blush); color:var(--blush-deep); }

#sc-inquiry .chk{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--ink-soft); cursor:pointer; margin:4px 0 18px; }
#sc-inquiry .chk input{ width:18px; height:18px; accent-color:var(--blush-deep); }

#sc-inquiry .ac{ position:relative; }
#sc-inquiry .ac-list{ position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--paper); border:1px solid var(--line);
  border-radius:10px; box-shadow:0 18px 34px -22px rgba(0,0,0,.5); z-index:20; overflow:hidden; display:none; }
#sc-inquiry .ac-list.show{ display:block; }
#sc-inquiry .ac-item{ padding:11px 16px; cursor:pointer; font-size:15px; transition:background .2s var(--ease); }
#sc-inquiry .ac-item:hover, #sc-inquiry .ac-item.act{ background:var(--cream); }
#sc-inquiry .ac-item small{ display:block; color:var(--ink-soft); font-size:12.5px; }
#sc-inquiry .ac-add{ color:var(--blush-deep); font-weight:700; }

#sc-inquiry .nav{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:clamp(30px,5vw,46px); }
#sc-inquiry .btn{ font-family:var(--body); font-weight:700; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; border:0; cursor:pointer;
  border-radius:100px; padding:1.1em 2.4em; background:var(--ink); color:var(--paper);
  transition:transform .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease); }
#sc-inquiry .btn:hover{ background:var(--blush-deep); transform:translateY(-3px); box-shadow:0 18px 30px -16px rgba(126,184,220,.6); }
#sc-inquiry .btn:disabled{ opacity:.6; cursor:default; transform:none; }
#sc-inquiry .back{ background:none; border:0; cursor:pointer; font-family:var(--body); font-weight:700; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); padding:6px 0; transition:color .3s var(--ease); }
#sc-inquiry .back:hover{ color:var(--ink); }
#sc-inquiry .back::before{ content:"← "; }

#sc-inquiry .escape{ display:block; width:100%; text-align:center; margin-top:26px; background:none; border:0; cursor:pointer;
  font-family:var(--body); font-weight:400; font-size:14px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:20px; transition:color .3s var(--ease); }
#sc-inquiry .escape:hover{ color:var(--blush-deep); }
#sc-inquiry .escape b{ font-weight:700; }

#sc-inquiry .toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); opacity:0; background:var(--ink); color:var(--paper);
  font-size:13.5px; letter-spacing:.02em; padding:13px 22px; border-radius:100px; box-shadow:0 16px 30px -16px rgba(0,0,0,.5);
  transition:all .5s var(--ease); pointer-events:none; z-index:50; }
#sc-inquiry .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

#sc-inquiry .ty{ text-align:center; padding:clamp(20px,5vw,40px) 0; }
#sc-inquiry .ty .mark{ width:64px; height:64px; border-radius:50%; border:1px solid var(--blush); color:var(--blush-deep); display:flex; align-items:center; justify-content:center; margin:0 auto 26px; font-size:28px; }
#sc-inquiry .ty h2{ font-size:clamp(2rem,5vw,3rem); margin-bottom:16px; }
#sc-inquiry .ty p{ color:var(--ink-soft); max-width:52ch; margin:0 auto 14px; }
#sc-inquiry .mirror{ font-family:var(--accent); font-style:italic; font-size:clamp(1.2rem,2.4vw,1.5rem); color:var(--ink); line-height:1.5; max-width:48ch; margin:0 auto 24px; }

#sc-inquiry .err{ color:#ff9b9b; font-size:13px; margin-top:8px; display:none; }
#sc-inquiry .err.show{ display:block; }
#sc-inquiry .consent{ color:var(--ink-soft); font-size:11.5px; line-height:1.5; margin:16px 0 0; max-width:52ch; opacity:.85; }

/* Round 11 fix (2026-07-10, Melissa): center the nav (Back/Send) + consent line. MUST live after the base
   .nav (justify-content:space-between) and .consent (margin:16px 0 0) rules above to win the cascade. */
#sc-inquiry .nav{ justify-content:center; }
#sc-inquiry .consent{ text-align:center; margin-left:auto; margin-right:auto; }

/* ---- Single-page Portraits experiment (2026-07-11) — reversible: delete this block + the PORTRAIT_SINGLE
   code in inquiry.js to restore the stepped flow. Each question is a .qsection, separated by a hairline. */
/* Entrance animation ONLY on fresh entry (.animate-in). The single-page form re-renders in place on
   every chip/date click, so animating the base .single-wrap made the whole form fade/slide on every
   click — looked like a page reload. (2026-07-11 bug fix.) */
#sc-inquiry .single-wrap.animate-in{ animation:sci-rise .6s var(--ease) both; }
#sc-inquiry .single-wrap .qsection{ text-align:center; }
#sc-inquiry .single-wrap .qsection + .qsection{ border-top:1px solid var(--line); margin-top:clamp(30px,4.5vw,48px); padding-top:clamp(30px,4.5vw,48px); }
#sc-inquiry .single-wrap .qsingle{ font-family:var(--display); font-weight:400; font-size:clamp(1.45rem,3vw,1.95rem); line-height:1.15; color:var(--ink); margin:0 0 18px; }
#sc-inquiry .single-wrap .qsection > .help{ margin:-6px auto 22px; }
#sc-inquiry .single-wrap .fork-head{ margin-bottom:clamp(30px,5vw,48px); }

/* "Other" fill-in text box (revealed when an "Other" chip is chosen) */
#sc-inquiry .otherfill{ margin:12px 0 0; }