/* REV design system — theme layer for the preview app.
   Loaded AFTER each page's inline <style>, so equal-specificity rules win.
   Presentation only: no IDs, no logic, no API changes. */

:root{
  --bg:#F3F5F9; --surface:#FFFFFF; --surface2:#EDF1F7;
  --text:#0A1020; --muted:#5B6678; --border:#E0E6EF;
  --primary:#2358F5; --primary-soft:rgba(35,88,245,.10);
  --success:#0A8F68; --warning:#B26B00; --danger:#D6334A;
  --grad:linear-gradient(135deg,#1F4FE6,#2E86FF);
  --shadow:0 12px 40px rgba(20,41,59,.18);
  --teal:#2358F5; --ink:#0A1020; --line:#E0E6EF;
}
[data-theme="dark"]{
  --bg:#060A13; --surface:#0E1525; --surface2:#172036;
  --text:#ECF1FF; --muted:#8C99B3; --border:#1D2840;
  --primary:#5A8FFF; --primary-soft:rgba(90,143,255,.16);
  --success:#2EDBA5; --warning:#FFC04D; --danger:#FF6B7C;
  --grad:linear-gradient(135deg,#4F86FF,#27CFFF);
  --shadow:0 12px 40px rgba(0,0,0,.5);
  --teal:#5A8FFF; --ink:#ECF1FF; --line:#1D2840;
}

/* ---------- base ---------- */
body{background:var(--bg);color:var(--text);font-variant-numeric:tabular-nums}
h1{font-size:24px;font-weight:800}
h2{font-size:18px;font-weight:800}
#card h2{font-size:18px;font-weight:800}
input,select,textarea{background:var(--surface);color:var(--text);border-color:var(--border)}
input::placeholder{color:var(--muted)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px}
button{font-variant-numeric:tabular-nums}

/* ---------- surfaces (were hardcoded #fff) ---------- */
#card,.sheet,#filters,#empty,#searchForm,#weather,#homeView .sugg,.shcard,
#chatSheet,#loading,#bottomnav,.box,.card,#gnext,#gbottom,
#filters button,#chips button{background:var(--surface);border-color:var(--border)}
#homeView{background:var(--bg)}
#card .plug,.conncard{background:var(--surface2);border-color:var(--border)}
#card .plug .free{color:var(--success)}
#score.good{background:var(--success)}
#score.mid{background:var(--warning)}
#score.bad{background:var(--danger)}

/* ---------- primary (was hardcoded #0866ee) ---------- */
.tabs button.on,.stabs button.on{color:var(--primary);border-bottom-color:var(--primary)}
.chat-msg.user{background:var(--primary)}
.chat-msg button{color:var(--primary);border-color:var(--primary)}
#chatChips button{background:var(--primary-soft);color:var(--primary)}
#chatSend{background:var(--primary)}
.svcgrid .svccell svg{stroke:var(--primary)}
.writereview{border-color:var(--primary);color:var(--primary);background:var(--surface)}
.svchero{background:var(--grad)}
button.main{background:var(--grad)}
#filterBtn{background:var(--primary-soft);color:var(--primary)}
#filterBtn.on{background:var(--primary);color:#fff}
#filterBtn.on svg{stroke:#fff}
#ranaFab{background:var(--grad)}
#card .actions .go{background:var(--grad)}
.sheet .save,#empty button{background:var(--grad)}

/* ---------- bottom nav ---------- */
#bottomnav{background:var(--surface);border-top-color:var(--border)}
#bottomnav a,#bottomnav button{color:var(--muted);min-height:48px;padding:8px 0 6px}
#bottomnav a.active,#bottomnav button.active{background:var(--primary-soft);color:var(--primary)}
#bottomnav svg{stroke-width:1.75}

/* ---------- glassy search + single-row chips ---------- */
#searchForm{background:rgba(255,255,255,.85);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}
#searchForm input{background:transparent;color:var(--text)}
#searchForm button svg{stroke:var(--muted)}
#chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scroll-snap-type:x proximity;scrollbar-width:none}
#chips::-webkit-scrollbar{display:none}
#chips button{flex:0 0 auto;scroll-snap-align:start;min-height:36px;display:inline-flex;align-items:center;gap:6px}
#chips button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#chips button.on{background:var(--primary);color:#fff;border-color:var(--primary)}
#sideBtns button,#sideBtns a{background:var(--surface);border-color:var(--border);color:var(--primary)}
#sideBtns button svg{stroke:var(--primary);stroke-width:1.75}
#count{background:var(--surface);color:var(--text);border:1px solid var(--border)}
#weather{background:var(--surface)}
#weather .aqi{background:var(--surface2);color:var(--warning)}
#weather .aqi small{color:var(--muted)}
#weather .temp svg{width:20px;height:20px;vertical-align:-4px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- pins (geometry kept: 36x52, anchor 18/32) ---------- */
.pind.green{background:linear-gradient(135deg,#2BBF7E,#0A8F68)}
.pind.orange{background:linear-gradient(135deg,#FFB020,#C77400)}
.pind.gray{background:linear-gradient(135deg,#9AA8B5,#5B6678)}
.pind .pbolt{transform:rotate(45deg);display:grid;place-items:center}
.pind .pbolt svg{width:16px;height:16px;fill:#fff;display:block}
.kwbadge{background:#0A1020;color:#fff;font-variant-numeric:tabular-nums;padding:2px 8px;font-size:11px}
#ranaFab svg{width:26px;height:26px;fill:#fff;display:block}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{background:var(--primary-soft);color:var(--primary);font-weight:800}
.leaflet-popup-content-wrapper{background:var(--surface);color:var(--text)}
.leaflet-popup-tip{background:var(--surface)}
.leaflet-bar a{background:var(--surface);color:var(--text);border-color:var(--border)}

/* ---------- primary actions: 44px + press ---------- */
.sheet .save,button.main,#card .actions button,#empty button,#chatSend{min-height:44px}
.sheet .save:active,button.main:active,#card .actions button:active,#empty button:active,#chatSend:active{transform:scale(.98)}
#card .actions .report{background:var(--surface2);color:var(--text)}
#card .actions .star{background:var(--surface2);color:var(--warning);border-color:var(--border)}
#card .handle,.sheet .handle,#gbottom .handle{background:var(--border)}
.sheet .row,.lcard,.legendrow,.reqrow{border-top-color:var(--border)}
#toast{background:#0A1020;color:#fff}
#annBanner{background:#123B34}
#loading{background:var(--surface)}
.revbox{background:var(--surface2);border-color:var(--border)}
.reqrow .acc{background:var(--surface2);color:var(--success)}
.reqrow .rej{background:var(--surface2);color:var(--danger)}
.reqrow .cancel{background:var(--surface2);color:var(--text)}
.chat-msg.rana{background:var(--surface2)}
#chatInputRow{border-top-color:var(--border)}
#chatInput{background:var(--surface);color:var(--text);border-color:var(--border)}

/* ---------- trip page ---------- */
.sumchips span{background:var(--surface2);border-color:var(--border)}
.curve{background:var(--surface2);border-color:var(--border)}
.curve .cap span{color:var(--muted)}
.tl:before{background:var(--border)}
.dot{border-color:var(--primary)}
.dot.dim{border-color:var(--border)}
.dot.stop{border-color:var(--warning);background:var(--warning)}
.dot.end{border-color:var(--success)}
.stopill{background:var(--surface2);border-color:var(--border)}
.tl p{color:var(--muted)}
.sub{color:var(--muted)}

/* ---------- guide page ---------- */
#gnext{background:var(--surface);color:var(--text)}
#grana{background:var(--surface2);color:var(--warning)}
.gman-arrow{background:var(--success)}
#geta .eta-label{color:var(--muted)}
.gmeta{color:var(--muted)}
.gmeta #gdest{color:var(--text)}

/* ---------- dark theme ---------- */
[data-theme="dark"] #searchForm{background:rgba(14,21,37,.85)}
[data-theme="dark"] .leaflet-tile-pane{filter:brightness(.82) invert(1) contrast(1.05) hue-rotate(180deg) saturate(.75)}
[data-theme="dark"] .kwbadge{background:#ECF1FF;color:#0A1020}
[data-theme="dark"] #toast{background:#ECF1FF;color:#0A1020}
[data-theme="dark"] #count{background:rgba(14,21,37,.92)}
[data-theme="dark"] #annBanner{background:#0E2A24}
[data-theme="dark"] .stopill{background:#2A2210;border-color:#3A2E12}
[data-theme="dark"] #grana{background:#2A2210;color:#FFC04D}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}

/* ---------- home view + card actions (hardcoded colors missed in pass 1) ---------- */
#homeView .brand{color:var(--primary)}
#homeView h1{font-size:24px}
#homeView h2{font-size:18px;font-weight:800}
#homeSearchForm{background:var(--surface)}
#homeSearchForm button svg{width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:1.75;stroke-linecap:round}
#homeTiles a,#homeTiles button{background:var(--grad);box-shadow:0 8px 20px rgba(35,88,245,.3)}
#homeView .homehead .avatar{background:var(--primary-soft)}
#homeView .homehead .avatar svg{stroke:var(--primary);stroke-width:1.75}
#homeView .homehead .bell{background:var(--surface);border-color:var(--border)}
#homeView .homehead .bell svg{stroke:var(--text);stroke-width:1.75}
.sugg .kw{color:var(--primary)}
#homeAll{color:var(--primary)}
#card .ocm-head{background:var(--surface)}
.ocm-actions button.primary{background:var(--primary);border-color:var(--primary)}
.conncard .cic{border-color:var(--primary);color:var(--primary)}
.conncard .big b{color:var(--primary)}
#cardSummary .chiprow svg{stroke:var(--primary)}
#cardSummary .sumactions .detail{border-color:var(--primary);color:var(--primary)}
#cardSummary .sumactions .go{background:var(--primary)}
#cardSummary .sumactions .bm{color:var(--primary)}
#cardSummary .sumactions .bm.saved svg{fill:var(--primary)}
.svchero button{color:var(--primary)}
.svcrow svg{stroke:var(--primary)}
.svcrow .ic{background:var(--primary-soft)}
.shcard .price{color:var(--primary)}
#greBtn{border-color:var(--primary);color:var(--primary);background:var(--surface)}
#gdone a{background:var(--primary)}
#gnoplan a{color:var(--primary)}

/* ---------- trip page (missed hardcoded colors) ---------- */
.mcard .opt.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}
.shitem button{background:var(--primary)}
.shitem button.ghost{background:var(--surface);color:var(--primary);border-color:var(--primary)}
a.back{color:var(--primary)}
.trippage h1{color:var(--primary)}

/* ---- Mockup shell: tab "من" + selected pin (pass 3) ---- */
#myView{position:fixed;inset:0;z-index:840;background:var(--bg);overflow-y:auto;padding:16px 16px calc(88px + env(safe-area-inset-bottom));display:none}
#myView.show{display:block}
#myView h1{font-size:24px;font-weight:800;margin:4px 0 14px}
.mehead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.mehead .brand{font-weight:800;font-size:20px;color:var(--primary);letter-spacing:.5px}
.mehead .bell,.mehead .avatar{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.mehead .bell svg,.mehead .avatar svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.mecard{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:18px;padding:16px;display:flex;align-items:center;gap:12px;cursor:pointer;font:inherit;text-align:start;margin-bottom:12px}
.mecard>svg{width:28px;height:28px;stroke:var(--primary);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mecard span{display:flex;flex-direction:column;gap:2px;text-align:start}
.mecard b{font-size:15px}
.mecard small{font-size:12px;color:var(--muted);font-weight:400}
.merows button{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:16px;padding:14px;display:flex;align-items:center;gap:10px;cursor:pointer;font:inherit;font-size:14px;font-weight:700;margin-bottom:8px}
.merows svg{width:22px;height:22px;stroke:var(--primary);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mesec h5{font-size:12px;color:var(--muted);margin:16px 0 8px}
#myView .sugg{background:var(--surface);border-color:var(--line)}
#myView .sugg h4{color:var(--ink)}
#myView .sugg .meta{color:var(--muted)}
.seg{display:flex;gap:4px;background:var(--surface2);border:1px solid var(--line);border-radius:99px;padding:4px}
.seg button{flex:1;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:700;padding:9px 0;border-radius:99px;cursor:pointer}
.seg button.on{background:var(--primary);color:#fff}
.mefoot{font-size:12px;color:var(--muted);text-align:center;margin-top:18px;line-height:1.9}
.pind.sel{background:var(--grad);transform:rotate(-45deg) scale(1.25);box-shadow:0 0 0 3px rgba(35,88,245,.35),0 6px 16px rgba(20,41,59,.4);z-index:10}
.pind.sel .pbolt{transform:rotate(45deg)}
[data-theme="dark"] .pind.sel{box-shadow:0 0 0 3px rgba(90,143,255,.45),0 6px 16px rgba(0,0,0,.5)}

/* ---- Audit fix 1: map chrome must not float over the "من" view ---- */
body.me #searchBar,body.me #chips,body.me #filters,body.me #sideBtns,body.me #count,body.me #weather,body.me #card,body.me #empty,body.me #ranaFab,body.me #battChip{display:none!important}

/* ---- Audit fix 2: 44px close targets ---- */
#card .close,.sheet .close{width:44px;height:44px;display:grid;place-items:center;padding:0;background:var(--surface2);border:1px solid var(--line);border-radius:50%}
#chatClose{width:44px;height:44px;display:grid;place-items:center;background:var(--surface2)!important;border:1px solid var(--line)!important;border-radius:50%}
/* ---- Audit fix 2: dark surfaces (white boxes + inherited ink text) ---- */
[data-theme="dark"] .svcgrid .svccell{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .svcgrid .svccell svg{stroke:var(--primary)}
[data-theme="dark"] .box,[data-theme="dark"] .mcard .opt,[data-theme="dark"] .triprow,[data-theme="dark"] .rana-card,[data-theme="dark"] .wchip{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] #weatherBox,[data-theme="dark"] #sharedSuggest,[data-theme="dark"] #hotelBox,[data-theme="dark"] #returnBox,[data-theme="dark"] #shareBox{background:var(--surface)!important;border-color:var(--line)!important}
[data-theme="dark"] .shitem button.ghost{background:var(--surface);color:var(--primary);border-color:var(--primary)}
[data-theme="dark"] .warn{background:#2A2210;border-color:#3A2E12}
[data-theme="dark"] .skipbtn{background:#2A2210;border-color:#3A2E12;color:#FFC04D}
[data-theme="dark"] .card,[data-theme="dark"] #gnext{background:var(--surface);border-color:var(--line);color:var(--text)}
[data-theme="dark"] #greBtn{background:var(--surface);color:var(--primary);border-color:var(--primary)}
/* ---- Audit fix 2: trip header row + theme button ---- */
.trip-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
#tripThemeBtn{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer}
#tripThemeBtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}