/* funnel_components.css — SHARED UI components for both funnels (Joey 2026-07-10).
   Lifted VERBATIM (structure/interaction) from the Save My Surplus claim page so the
   Mr Buyer offer page reads/behaves 1:1; ONLY colors differ, driven by --fc-* vars each
   page maps to its own palette. Covers: pre-filled edit/confirm fields + amber "needed"
   validation, the searchable Country + State/Province type-ahead combos (incl. the
   2026-07-10 re-select fix in address_form.js), the reference-code LOOKUP box, and the
   FAQ (pills + search + accordion). SMS still ships its own inline copy for now; migrating
   SMS onto this file is the noted follow-up.

   Required vars (map in :root per brand):
     --fc-navy  --fc-blue  --fc-accent  --fc-line  --fc-paper  --fc-ink  --fc-muted
*/

/* ---- pre-filled fields (edit / confirm) ---- */
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
.fld{display:flex;flex-direction:column;min-width:0;}
.fld.full{grid-column:1 / -1;}
.fld label{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--fc-muted);margin-bottom:3px;font-weight:700;}
.fld input,.fld textarea{font-size:16px;width:100%;min-width:0;padding:10px 12px;border:1.6px solid var(--fc-line);border-radius:8px;background:var(--fc-paper);color:var(--fc-ink);transition:border .15s,background .15s;}
.fld textarea{font-family:inherit;resize:vertical;line-height:1.4;}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--fc-blue);background:#fff;box-shadow:0 0 0 3px rgba(94,138,197,.18);}
.fld select{font-size:15px;width:100%;min-width:0;padding:10px 12px;border:1.6px solid var(--fc-line);border-radius:8px;background:var(--fc-paper);color:var(--fc-ink);cursor:pointer;}
.fld select:focus{outline:none;border-color:var(--fc-blue);background:#fff;box-shadow:0 0 0 3px rgba(94,138,197,.18);}
.csz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;grid-column:1 / -1;}
/* submit-time red error */
.fld input.invalid,.fld input.invalid:focus{border-color:#d92d20;background:#fdecec;box-shadow:0 0 0 3px rgba(217,45,32,.15);}
.fld .reqhint{display:none;font-size:11px;font-weight:700;color:#b42318;margin-top:4px;text-transform:none;letter-spacing:0;}
.fld.invalid .reqhint{display:block;}
/* amber "needed" (blank) — clears the instant a field is filled */
.fld.needed input,.fld.needed select,.fld.needed textarea{border-color:#f59e0b;background:#fffaf0;box-shadow:0 0 0 3px rgba(245,158,11,.13);}
.fld.needed input:focus,.fld.needed select:focus,.fld.needed textarea:focus{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.22);}
.fld.needed label{color:#b5640a;}
.fld .needhint{display:none;font-size:11px;font-weight:800;color:#b5640a;margin-top:4px;text-transform:none;letter-spacing:0;}
.fld.needed .needhint{display:inline-block;}
.fld.invalid.needed input,.fld.invalid.needed select,.fld.invalid.needed textarea{border-color:#d92d20;background:#fdecec;box-shadow:0 0 0 3px rgba(217,45,32,.15);}
.fld.invalid.needed .needhint{display:none;}
/* .edited tracks "differs from prefill" but carries NO styling (Joey 2026-07-10) */

.secthead{background:var(--fc-navy);color:#fff;font-size:13px;font-weight:800;padding:9px 14px;border-radius:7px;margin:18px 0 6px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.secthead .sht{letter-spacing:.4px;}
.secthead .hint{font-weight:500;color:#c9d3e8;font-size:11px;text-transform:none;}
.editnote{background:#fff7ee;border:1px dashed var(--fc-accent);border-radius:8px;padding:8px 12px;font-size:12.5px;color:#b5640a;margin-bottom:10px;}
.editnote b{color:var(--fc-ink);}
.needprompt{background:#fffaf0;border:1px solid #f5c97a;border-left:4px solid #f59e0b;border-radius:8px;padding:9px 13px;font-size:13px;font-weight:700;color:#b5640a;margin-bottom:10px;}

/* ---- searchable type-ahead combos (Country + State/Province) ---- */
.combo{position:relative;}
.combo>select.combo-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:-9999px;}
.combo input.combo-input{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235b6b7b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px;cursor:text;}
.acwrap{position:relative;}
.aclist{position:absolute;left:0;right:0;top:100%;z-index:45;background:#fff;border:1.6px solid var(--fc-line);border-top:none;border-radius:0 0 10px 10px;box-shadow:0 10px 24px rgba(11,31,58,.16);max-height:244px;overflow-y:auto;display:none;}
.combo .aclist{max-height:260px;}
.acitem{padding:11px 14px;font-size:14px;color:var(--fc-ink);cursor:pointer;border-top:1px solid #eef3f8;}
.acitem:first-child{border-top:none;}
.acitem:hover,.acitem.sel{background:#eaf1fb;}
.combo .acitem.none{color:#8794a3;cursor:default;font-style:italic;}

/* ---- reference-code lookup box ---- */
.lookupbox{background:#fff7ee;border:1.6px dashed var(--fc-accent);border-radius:11px;padding:16px 18px 18px;margin:18px 0 14px;text-align:center;}
.lookupbox .lookupintro{font-size:13.5px;line-height:1.5;color:#b5640a;max-width:600px;margin:0 auto 12px;}
.lookupbox .lookupintro b{color:var(--fc-ink);}
.codewrap{display:flex;gap:10px;align-items:stretch;max-width:760px;margin:0 auto;flex-wrap:wrap;}
.codewrap input{flex:1 1 auto;min-width:200px;border:1.6px solid var(--fc-line);border-radius:9px;padding:0 14px;height:44px;font-size:17px;font-family:ui-monospace,Menlo,monospace;text-transform:uppercase;background:#fff;color:var(--fc-ink);}
.codewrap input:focus{outline:none;border-color:var(--fc-blue);box-shadow:0 0 0 3px rgba(94,138,197,.18);}
.lookupbtn{flex:0 0 auto;white-space:nowrap;background:var(--fc-navy);color:#fff;font-weight:800;font-size:16px;letter-spacing:.3px;border:0;border-radius:9px;padding:0 30px;height:44px;cursor:pointer;box-shadow:0 2px 8px rgba(20,38,78,.22);transition:filter .15s,box-shadow .15s;}
.lookupbtn:hover{filter:brightness(1.12);box-shadow:0 4px 14px rgba(20,38,78,.3);}
.lookupbtn:active{transform:translateY(1px) scale(.99);}
.lookupbtn:disabled{opacity:.6;cursor:default;filter:none;}
.lookupmsg{max-width:760px;margin:9px auto 0;text-align:left;font-size:12.5px;font-weight:600;padding:8px 11px;border-radius:7px;}
.lookupmsg.ok{background:#e9f7ef;color:#1a7a3c;border:1px solid #b7e2c6;}
.lookupmsg.warn{background:#fff7ee;color:#b5640a;border:1px solid #f4d6ad;}
.lookupmsg.err{background:#fdecec;color:#b42318;border:1px solid #f4c2bd;}
@media(max-width:480px){.codewrap{flex-direction:column;}.lookupbtn{height:auto;padding:12px 16px;width:100%;}}

/* ---- FAQ (pills + search + accordion) — exact SMS structure ---- */
.faqcard .eye{color:var(--fc-accent);font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase;}
.faqhead{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:2px;}
.faqhead h2{margin:0;color:var(--fc-ink);font-size:22px;}
.faqsearch{width:100%;max-width:360px;flex:0 1 360px;margin-top:0;padding:11px 15px;border:1.6px solid var(--fc-line);border-radius:10px;font-size:15px;background:var(--fc-paper);color:var(--fc-ink);}
.faqsearch:focus{outline:none;border-color:var(--fc-blue);box-shadow:0 0 0 3px rgba(94,138,197,.18);}
.faqtabs{display:flex;flex-wrap:wrap;gap:4px;margin-top:13px;}
.faqtab{flex:1 1 auto;text-align:center;background:var(--fc-navy);color:#fff;border:1.5px solid var(--fc-navy);border-radius:10px;padding:9px 13px;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap;}
.faqtab.active{background:var(--fc-accent);border-color:var(--fc-accent);color:#1b2150;box-shadow:0 2px 7px rgba(255,194,14,.35);}
.faqtab:hover{filter:brightness(1.12);border-color:var(--fc-blue);}
.faqtab:not(.active):hover{background:#fff;color:var(--fc-navy);border-color:var(--fc-navy);filter:none;}
.faqtab:active{transform:translateY(1px) scale(.97);}
.acc{margin-top:14px;max-height:430px;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:#c7d0e6 #eef1f8;}
.acc::-webkit-scrollbar{width:10px;}
.acc::-webkit-scrollbar-track{background:#eef1f8;border-radius:8px;}
.acc::-webkit-scrollbar-thumb{background:#c7d0e6;border-radius:8px;border:2px solid #eef1f8;}
.acc::-webkit-scrollbar-thumb:hover{background:var(--fc-accent);}
.acc-item{background:#fff;border:1px solid var(--fc-line);border-left:4px solid var(--fc-blue);border-radius:9px;margin-top:8px;overflow:hidden;}
.acc-q{padding:13px 16px;font-weight:800;color:var(--fc-ink);font-size:14.5px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.acc-q .ic{color:var(--fc-accent);font-size:13px;flex-shrink:0;transition:transform .2s;}
.acc-item.open .acc-q .ic{transform:rotate(180deg);}
.acc-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:#46586a;font-size:13.5px;padding:0 16px;line-height:1.55;}
.acc-item.open .acc-a{max-height:600px;padding:0 16px 13px;}
.acc-a b{color:var(--fc-ink);}
.acc-a a{color:var(--fc-blue);font-weight:700;}
.acc-empty{text-align:center;color:#8a98a6;font-size:13.5px;padding:20px;}

@media(max-width:560px){
  .fgrid{grid-template-columns:minmax(0,1fr);}
  .csz{grid-template-columns:repeat(2,minmax(0,1fr));}
  .secthead{flex-direction:column;align-items:flex-start;gap:3px;}
  .faqhead h2{font-size:20px;}
  .fld input,.fld textarea{font-size:16.5px;}
}