/* ============================================================
   FlashEx CUSTOMER theme choice — Midnight / Ivory Light
   Approved by Alex (CEO) Oct 13, 2026. Design source:
   flashex-theme-preview/ivory-theme-preview-v1-design-note.md

   How it works:
   - A tiny inline script in each customer page's <head> sets
     data-theme on <html> BEFORE first paint: the visitor's saved
     choice (localStorage "fx_cust_theme_v1") wins; before any
     choice, the phone/browser prefers-color-scheme decides.
   - Midnight = the site's existing base CSS, completely
     untouched. This file changes NOTHING for Midnight.
   - Ivory Light lives entirely in the [data-theme="ivory"]
     layer below, using the approved tokens:
       page #FCFAF5 · alt band #F7F0DF · card #FFFFFF
       heading #14161A · body #22262E · muted #5B6577
       gold #B8954A (small gold text #A68A3F) · border #E3DCC6
       field border #D8D0B8 · top bar #F3EDDC
   - Logo: header/brand <img class="fx-logo"> swaps between the
     official white-X (Midnight) and official black-X
     logo-official.jpg (Ivory, mix-blend multiply so its white
     ground disappears into the ivory page). Artwork unmodified.
   Staff consoles (CEO / dispatcher / admin) do NOT load this
   file — they keep their own themes.css system.
   ============================================================ */

html[data-theme="midnight"] { color-scheme: dark; }
html[data-theme="ivory"]    { color-scheme: light; }

/* ---------------- The toggle pill ---------------- */
.fx-theme-toggle{
  display:inline-flex; align-items:center; gap:0; cursor:pointer;
  font-family:'Inter',system-ui,sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; line-height:1;
  padding:0; border-radius:999px; overflow:hidden; white-space:nowrap;
  border:1px solid rgba(184,149,74,.55); background:transparent; color:#B8954A;
}
.fx-theme-toggle .fx-tt{
  display:inline-flex; align-items:center; gap:5px; padding:8px 11px;
}
.fx-theme-toggle .fx-tt + .fx-tt{ border-left:1px solid rgba(184,149,74,.35); }
html[data-theme="midnight"] .fx-theme-toggle .fx-tt-moon,
html[data-theme="ivory"]    .fx-theme-toggle .fx-tt-sun{
  background:#B8954A; color:#0B0E14;
}
.fx-theme-toggle:focus-visible{ outline:2px solid #B8954A; outline-offset:2px; }
.fx-theme-row{ display:flex; justify-content:center; margin:14px 0 20px; }
footer .fx-theme-toggle{ margin-top:4px; }

/* Logo handling in Ivory: official black-X jpg, white ground blended away */
html[data-theme="ivory"] img.fx-logo{ mix-blend-mode:multiply; }

/* ============================================================
   IVORY LAYER — shared design system (homepage + chat page)
   ============================================================ */
html[data-theme="ivory"]{
  --bg:#FCFAF5; --bg2:#F7F0DF; --line:#E3DCC6;
  --steel:#3A4354; --gold:#B8954A; --gold-hi:#A68A3F;
  --ink:#22262E; --muted:#5B6577;
  --gold24:linear-gradient(135deg,#C9B077 0%,#B8954A 48%,#A68A3F 72%,#B8954A 100%);
  --gold24-hi:linear-gradient(135deg,#D9BE7E 0%,#C9A45C 55%,#B8954A 100%);
}
html[data-theme="ivory"] body{ background:#FCFAF5; color:#22262E; }
html[data-theme="ivory"] h1, html[data-theme="ivory"] h2{ color:#14161A; }
html[data-theme="ivory"] header{
  background:rgba(243,237,220,.92); border-bottom-color:#E3DCC6;
}
html[data-theme="ivory"] .carbon-tex{
  background-image:
    radial-gradient(circle, rgba(90,75,40,.05) 1px, transparent 1.6px),
    repeating-linear-gradient(45deg, rgba(90,75,40,.04) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-45deg, rgba(90,75,40,.04) 0 2px, transparent 2px 7px);
}
html[data-theme="ivory"] .kicker{
  background:linear-gradient(100deg,#A68A3F 0%,#B8954A 55%,#B8954A 100%);
  -webkit-background-clip:text; background-clip:text;
}
html[data-theme="ivory"] .svc-line{ color:#5B6577; }
html[data-theme="ivory"] .goldtext, html[data-theme="ivory"] .goldcaps{ color:#A68A3F; }
html[data-theme="ivory"] .stars{
  background:linear-gradient(100deg,#A68A3F,#B8954A 60%,#B8954A);
  -webkit-background-clip:text; background-clip:text;
}
html[data-theme="ivory"] .hero .img::after{
  background:linear-gradient(90deg, rgba(252,250,245,.88), transparent 40%);
}
@media (max-width:820px){
  html[data-theme="ivory"] .hero .img::after{
    background:linear-gradient(0deg, rgba(252,250,245,.92), transparent 50%);
  }
}
/* Estimate widget + form modals */
html[data-theme="ivory"] .widget{
  background:rgba(255,255,255,.92); box-shadow:0 14px 40px rgba(90,75,40,.12);
}
html[data-theme="ivory"] .modal{
  background:#FFFFFF; box-shadow:0 24px 60px rgba(90,75,40,.20);
}
html[data-theme="ivory"] .modal input, html[data-theme="ivory"] .modal textarea,
html[data-theme="ivory"] .modal select,
html[data-theme="ivory"] .widget input, html[data-theme="ivory"] .widget textarea,
html[data-theme="ivory"] .widget select{
  background:#FFFFFF; border-color:#D8D0B8; color:#22262E;
}
html[data-theme="ivory"] .modal input::placeholder, html[data-theme="ivory"] .modal textarea::placeholder,
html[data-theme="ivory"] .widget input::placeholder, html[data-theme="ivory"] .widget textarea::placeholder{
  color:#8A8F98;
}
html[data-theme="ivory"] input:-webkit-autofill, html[data-theme="ivory"] textarea:-webkit-autofill,
html[data-theme="ivory"] select:-webkit-autofill{
  -webkit-text-fill-color:#22262E !important;
  -webkit-box-shadow:0 0 0 1000px #FFFFFF inset !important;
  box-shadow:0 0 0 1000px #FFFFFF inset !important;
}
html[data-theme="ivory"] .form-status.ok{ color:#2E7D43; }
html[data-theme="ivory"] .form-status.err{ color:#B03A3A; }
html[data-theme="ivory"] .form-filechip{ background:rgba(184,149,74,.08); border-color:rgba(166,138,63,.4); }
html[data-theme="ivory"] .form-filechip .fx-file-icon{ background:rgba(184,149,74,.16); color:#A68A3F; }
html[data-theme="ivory"] .form-filechip .fx-file-remove{ color:#B03A3A; }
html[data-theme="ivory"] .form-filechip .fx-file-remove:hover{ color:#8C2B2B; }
html[data-theme="ivory"] .fx-doc-type{ background:#F7F0DF; border-color:rgba(166,138,63,.5); color:#A68A3F; }
html[data-theme="ivory"] .addr-suggest{
  background:#FFFFFF; box-shadow:0 10px 28px rgba(90,75,40,.18);
}
html[data-theme="ivory"] .addr-suggest button:hover{ background:rgba(184,149,74,.12); }
html[data-theme="ivory"] footer{ background:#F7F0DF; }
html[data-theme="ivory"] .fine{ color:#5B6577; }
html[data-theme="ivory"] .fine a{ color:#5B6577; }
/* Contact/chat ghost buttons keep gold-on-transparent identity */
html[data-theme="ivory"] .contactbtn, html[data-theme="ivory"] .chatbtn,
html[data-theme="ivory"] .tbtn, html[data-theme="ivory"] .modal .btn-ghost{
  color:#A68A3F; border-color:rgba(166,138,63,.6);
}
html[data-theme="ivory"] .contactbtn:hover, html[data-theme="ivory"] .chatbtn:hover,
html[data-theme="ivory"] .tbtn:hover, html[data-theme="ivory"] .modal .btn-ghost:hover{
  color:#8A6F35; border-color:#A68A3F; background:rgba(184,149,74,.08);
}

/* ---- Chat panel (homepage widget + standalone chat page) ---- */
html[data-theme="ivory"] .fx-chat-shell{
  background:#FFFFFF; color:#22262E; border-color:#E3DCC6;
  box-shadow:0 22px 70px rgba(90,75,40,.22);
}
html[data-theme="ivory"] .fx-chat-head{ background:#F7F0DF; border-bottom-color:rgba(184,149,74,.48); }
html[data-theme="ivory"] .fx-chat-title h2{ color:#14161A; }
html[data-theme="ivory"] .fx-chat-title p{ color:#A68A3F; }
html[data-theme="ivory"] .fx-chat-close{ color:#22262E; }
html[data-theme="ivory"] .fx-chat-close:hover{ background:rgba(90,75,40,.08); }
html[data-theme="ivory"] .fx-chat-log{ scrollbar-color:#B8954A #F7F0DF; }
html[data-theme="ivory"] .fx-chat-message.bot p{
  background:#F7F0DF; color:#22262E; border-color:rgba(184,149,74,.35);
}
html[data-theme="ivory"] .fx-chat-message.user p{
  background:#F3EDDC; color:#22262E; border-color:rgba(184,149,74,.5);
}
html[data-theme="ivory"] .fx-chat-chip, html[data-theme="ivory"] .fx-chat-call{
  border-color:rgba(166,138,63,.6); color:#A68A3F; background:transparent;
}
html[data-theme="ivory"] .fx-chat-chip:hover, html[data-theme="ivory"] .fx-chat-call:hover{
  background:#B8954A; color:#0B0E14; border-color:#B8954A;
}
html[data-theme="ivory"] .fx-chat-call{ background:#B8954A; color:#0B0E14; border-color:#B8954A; }
html[data-theme="ivory"] .fx-chat-compose{ background:#F7F0DF; border-top-color:rgba(184,149,74,.42); }
html[data-theme="ivory"] .fx-chat-input{
  background:#FFFFFF; color:#22262E; border-color:#D8D0B8;
}
html[data-theme="ivory"] .fx-chat-input::placeholder{ color:#8A8F98; }
html[data-theme="ivory"] .fx-chat-input:focus{ outline-color:#B8954A; border-color:#B8954A; }
html[data-theme="ivory"] .fx-chat-send{
  background:#B8954A; border-color:#B8954A; color:#0B0E14;
}
html[data-theme="ivory"] .fx-chat-send:hover{ background:#C9A45C; }
html[data-theme="ivory"] .fx-chat-attach{ border-color:#D8D0B8; color:#A68A3F; }
html[data-theme="ivory"] .fx-chat-attach:hover{ border-color:#B8954A; }
html[data-theme="ivory"] .fx-chat-attach:focus-visible,
html[data-theme="ivory"] .fx-chat-close:focus-visible,
html[data-theme="ivory"] .fx-chat-chip:focus-visible,
html[data-theme="ivory"] .fx-chat-call:focus-visible,
html[data-theme="ivory"] .fx-chat-send:focus-visible{
  outline-color:#B8954A;
}
html[data-theme="ivory"] .fx-chat-filechip{ background:#F7F0DF; border-color:#E3DCC6; }
html[data-theme="ivory"] .fx-chat-filechip .fx-file-icon{ background:#B8954A; color:#0B0E14; }
html[data-theme="ivory"] .fx-chat-filechip .fx-file-name{ color:#22262E; }
html[data-theme="ivory"] .fx-chat-filechip .fx-file-size{ color:#5B6577; }
html[data-theme="ivory"] .fx-chat-filechip .fx-file-remove{ color:#5B6577; }
html[data-theme="ivory"] .fx-chat-filechip .fx-file-remove:hover{ color:#B03A3A; }
html[data-theme="ivory"] .fx-chat-privacy{ color:#5B6577; }
html[data-theme="ivory"] .fx-chat-end{ border-color:#D8D0B8; color:#5B6577; }
html[data-theme="ivory"] .fx-chat-end:hover{ border-color:#B8954A; color:#A68A3F; }
html[data-theme="ivory"] .fx-chat-wa-bar{
  background:#EAF7EE; border-top-color:#CDEBD4; color:#128C4B;
}
html[data-theme="ivory"] .fx-chat-wa-bar:hover{ background:#DFF2E4; }
html[data-theme="ivory"] .fx-prechat-title{ color:#14161A; }
html[data-theme="ivory"] .fx-prechat-sub{ color:#5B6577; }
html[data-theme="ivory"] .fx-prechat-label{ color:#5B6577; }
html[data-theme="ivory"] .fx-prechat-input{
  background:#FFFFFF; color:#22262E; border-color:#D8D0B8;
}
html[data-theme="ivory"] .fx-prechat-input:focus{ border-color:#B8954A; }
html[data-theme="ivory"] .fx-prechat-input::placeholder{ color:#8A8F98; }
html[data-theme="ivory"] .fx-prechat-error{ color:#B03A3A; }
html[data-theme="ivory"] .fx-prechat-disclaimer{ color:#5B6577; }
html[data-theme="ivory"] .fx-chat-rush{ color:#5B6577; }

/* ============================================================
   IVORY — quote / estimate-accept page (body.pg-quote)
   ============================================================ */
html[data-theme="ivory"] .pg-quote{
  --qbg:#F7F0DF; --qcard:#FFFFFF; --qgold:#B8954A; --qgold-hi:#A68A3F;
  --qtext:#22262E; --qmuted:#5B6577; --qsub:#3A4354; --qnote:#5B6577;
  --qbtn-text:#0B0E14; --qerr:#B03A3A;
  background:#FCFAF5;
}
html[data-theme="ivory"] .pg-quote .card{
  border-color:#B8954A; box-shadow:0 14px 40px rgba(90,75,40,.10);
}
html[data-theme="ivory"] .pg-quote .details{ background:#F7F0DF; }
html[data-theme="ivory"] .pg-quote .btn-square{ background:#22262E; color:#F7F0DF; }
/* quote.html carries legacy inline gray text colors — remap them in Ivory */
html[data-theme="ivory"] .pg-quote [style*="color: #ccc"],
html[data-theme="ivory"] .pg-quote [style*="color:#ccc"],
html[data-theme="ivory"] .pg-quote [style*="color: #bbb"],
html[data-theme="ivory"] .pg-quote [style*="color:#bbb"],
html[data-theme="ivory"] .pg-quote [style*="color: #999"],
html[data-theme="ivory"] .pg-quote [style*="color:#999"]{ color:#5B6577 !important; }
html[data-theme="ivory"] .pg-quote textarea[style*="background: #1a1a1a"]{
  background:#FFFFFF !important; color:#22262E !important; border-color:#D8D0B8 !important;
}

/* ============================================================
   IVORY — invoice page (body.pg-invoice)
   ============================================================ */
html[data-theme="ivory"] .pg-invoice{
  --bg:#FCFAF5; --card:#FFFFFF; --panel:#F7F0DF;
  --text:#22262E; --muted:#5B6577; --sub:#3A4354; --note:#5B6577;
  --err:#B03A3A; --line:#E3DCC6;
}
html[data-theme="ivory"] .pg-invoice .card{ box-shadow:0 14px 40px rgba(90,75,40,.10); }
html[data-theme="ivory"] .pg-invoice .row + .row{ border-top-color:#EDE8D8; }
html[data-theme="ivory"] .pg-invoice .respond textarea{ border-color:#D8D0B8; }
html[data-theme="ivory"] .pg-invoice .btn-paypal{ border:1px solid #E3DCC6; }
html[data-theme="ivory"] .pg-invoice .accepted-line,
html[data-theme="ivory"] .pg-invoice .respond-ok,
html[data-theme="ivory"] .pg-invoice .declined-state a{ color:#A68A3F; }

/* ============================================================
   IVORY — tracking page (body.pg-track)
   ============================================================ */
html[data-theme="ivory"] .pg-track{ background:#FCFAF5; color:#22262E; }
html[data-theme="ivory"] .pg-track .sub{ color:#5B6577; }
html[data-theme="ivory"] .pg-track .card{
  background:#FFFFFF; border-color:#E3DCC6; box-shadow:0 14px 40px rgba(90,75,40,.08);
}
html[data-theme="ivory"] .pg-track .ref{ color:#A68A3F; }
html[data-theme="ivory"] .pg-track .row{ color:#3A4354; }
html[data-theme="ivory"] .pg-track .row b{ color:#14161A; }
html[data-theme="ivory"] .pg-track .dot{ background:#F7F0DF; color:#5B6577; border-color:#E3DCC6; }
html[data-theme="ivory"] .pg-track .step.done .dot{ background:#B8954A; color:#0B0E14; border-color:#B8954A; }
html[data-theme="ivory"] .pg-track .step.now .dot{ border-color:#B8954A; color:#A68A3F; }
html[data-theme="ivory"] .pg-track .lbl{ color:#5B6577; }
html[data-theme="ivory"] .pg-track .step.done .lbl,
html[data-theme="ivory"] .pg-track .step.now .lbl{ color:#14161A; }
html[data-theme="ivory"] .pg-track .eta{ background:#F7F0DF; border-color:#B8954A; }
html[data-theme="ivory"] .pg-track .eta b{ color:#A68A3F; }
html[data-theme="ivory"] .pg-track input{
  background:#FFFFFF; border-color:#D8D0B8; color:#22262E;
}
html[data-theme="ivory"] .pg-track .btn{ background:#B8954A; color:#0B0E14; }
html[data-theme="ivory"] .pg-track a{ color:#A68A3F; }
html[data-theme="ivory"] .pg-track .logo-chip{ background:transparent; }
html[data-theme="ivory"] .pg-track .st-pending{ background:#FBF3D5; color:#8A6D1F; }
html[data-theme="ivory"] .pg-track .st-confirmed{ background:#E0F2F7; color:#1F6E8C; }
html[data-theme="ivory"] .pg-track .st-assigned{ background:#ECE5F7; color:#5B3E99; }
html[data-theme="ivory"] .pg-track .st-picked_up{ background:#FDEBD2; color:#9A5A14; }
html[data-theme="ivory"] .pg-track .st-delivered{ background:#DFF5E3; color:#1E7A34; }
html[data-theme="ivory"] .pg-track .st-failed,
html[data-theme="ivory"] .pg-track .st-cancelled{ background:#FBE0E0; color:#B03A3A; }

/* ============================================================
   IVORY — business card page (body.pg-biz)
   ============================================================ */
html[data-theme="ivory"] .pg-biz{ background:#FCFAF5; color:#22262E; }
html[data-theme="ivory"] .pg-biz .who p{ color:#A68A3F; }
html[data-theme="ivory"] .pg-biz .card-img{ box-shadow:0 12px 40px rgba(90,75,40,.18); }
html[data-theme="ivory"] .pg-biz .btn-gold{ background:#B8954A; color:#0B0E14; }
html[data-theme="ivory"] .pg-biz .btn-ghost{ border-color:#B8954A; color:#A68A3F; }
html[data-theme="ivory"] .pg-biz .foot{ color:#5B6577; }
html[data-theme="ivory"] .pg-biz .foot a{ color:#A68A3F; }
html[data-theme="ivory"] .pg-biz .toast{
  background:#FFFFFF; border-color:#B8954A; color:#22262E;
  box-shadow:0 14px 40px rgba(90,75,40,.16);
}

/* ============================================================
   IVORY — install page (body.pg-install)
   ============================================================ */
html[data-theme="ivory"] .pg-install{ background:#FCFAF5; color:#22262E; }
html[data-theme="ivory"] .pg-install h1{ color:#A68A3F; }
html[data-theme="ivory"] .pg-install p{ color:#3A4354; }
html[data-theme="ivory"] .pg-install .manual{ color:#5B6577; }
html[data-theme="ivory"] .pg-install .manual strong{ color:#A68A3F; }

/* ============================================================
   IVORY — thank-you page (body.pg-thanks)
   ============================================================ */
html[data-theme="ivory"] .pg-thanks{
  --gold:#B8954A; --gold-hi:#A68A3F; --ink:#22262E; --muted:#5B6577; --bg:#FCFAF5;
}
html[data-theme="ivory"] .pg-thanks .card{
  background:linear-gradient(180deg, rgba(184,149,74,.10), rgba(0,0,0,0) 45%);
  border-color:rgba(184,149,74,.45);
}

/* ============================================================
   IVORY — emergency dispatch page (body.pg-emerg)
   ============================================================ */
html[data-theme="ivory"] .pg-emerg{ background:#FCFAF5; color:#22262E; }
html[data-theme="ivory"] .pg-emerg h1{ color:#A68A3F; }
html[data-theme="ivory"] .pg-emerg .brand span{ color:#22262E; }
html[data-theme="ivory"] .pg-emerg .sub{ color:#5B6577; }
html[data-theme="ivory"] .pg-emerg .warn{ background:#FBE0E0; border-color:#B03A3A; color:#8C2B2B; }
html[data-theme="ivory"] .pg-emerg .order{
  background:#FFFFFF; border-color:#E3DCC6; border-left-color:#B8954A;
}
html[data-theme="ivory"] .pg-emerg .order .ref{ color:#A68A3F; }
html[data-theme="ivory"] .pg-emerg .order .status{ background:#B8954A; color:#0B0E14; }
html[data-theme="ivory"] .pg-emerg .order .row{ color:#3A4354; }
html[data-theme="ivory"] .pg-emerg .order .row b{ color:#14161A; }
html[data-theme="ivory"] .pg-emerg .order a{ color:#A68A3F; }
html[data-theme="ivory"] .pg-emerg .empty{ color:#5B6577; }
html[data-theme="ivory"] .pg-emerg .refresh{ background:#B8954A; color:#0B0E14; }
html[data-theme="ivory"] .pg-emerg .ts{ color:#5B6577; }

/* Narrow screens: the header/footer pill collapses to icons only so the
   Call button keeps its full width (both options remain visible). */
@media (max-width:820px){
  header .fx-theme-toggle .fx-tt-word,
  footer .fx-theme-toggle .fx-tt-word{ display:none; }
  header .fx-theme-toggle .fx-tt,
  footer .fx-theme-toggle .fx-tt{ padding:9px 10px; }
}