/* Light-mode overrides for the standalone fire pages (belgravia-72, chelsea-60, ...).
   These pages carry their own dark stylesheet, so light mode is layered on top of it here.
   Dark on purpose in both themes: the nav, the hero, the photo viewer (.av-main) and the drawing/preview canvases. */

/* theme switch (injected into .nav-r by theme.js) */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:transparent;color:#fff;cursor:pointer;transition:background-color .15s ease}
.theme-toggle:hover{background:rgba(255,255,255,.1)}
.theme-toggle svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:block}
:root[data-theme="light"] .theme-toggle .i-moon{display:none}
@media(max-width:520px){nav .nav-wa{display:none}}

/* palette: page surfaces flip, accent gets a darker orange for contrast on light */
:root[data-theme="light"]{--black:#FBF8F2;--dark:#F5EFE4;--char:#EFE7D8;--fire3:#B03A0A}
/* ...and the always-dark zones keep the original palette */
:root[data-theme="light"] nav,
:root[data-theme="light"] .hero,
:root[data-theme="light"] .av-main{--black:#0A0806;--dark:#141210;--char:#1C1A16;--fire3:#E8741A}
:root[data-theme="light"] body{color:#1F1A14}
:root[data-theme="light"] .hero,
:root[data-theme="light"] nav{color:#fff}

/* headings + text */
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] .mt,
:root[data-theme="light"] .adv-card h3{color:#1F1A14}
:root[data-theme="light"] .ms,
:root[data-theme="light"] .ml,
:root[data-theme="light"] .adv-card p,
:root[data-theme="light"] .ck-list li,
:root[data-theme="light"] .room-lbl{color:rgba(31,26,20,.68)}
:root[data-theme="light"] .adv-card p.tag,
:root[data-theme="light"] .ck-list li span{color:var(--fire3)}

/* angle viewer side panel */
:root[data-theme="light"] .av-panel .av-k{color:rgba(31,26,20,.6)}
:root[data-theme="light"] .av-panel .av-v{color:#1F1A14}
:root[data-theme="light"] .av-row{border-bottom-color:rgba(31,26,20,.1)}
:root[data-theme="light"] .av-panel .av-th{border-color:rgba(31,26,20,.18)}
:root[data-theme="light"] .av-panel .av-th.on{border-color:var(--fire3)}

/* spec accordion + table */
:root[data-theme="light"] .spec-acc{border-color:rgba(31,26,20,.16);background:#fff}
:root[data-theme="light"] .spec-acc>summary{color:#1F1A14}
:root[data-theme="light"] .spec-acc[open]>summary{border-bottom-color:rgba(31,26,20,.12)}
:root[data-theme="light"] .spec-t td{border-bottom-color:rgba(31,26,20,.1)}
:root[data-theme="light"] .spec-t td:first-child{color:rgba(31,26,20,.62)}
:root[data-theme="light"] .spec-t td:last-child{color:#1F1A14}
:root[data-theme="light"] .spec-t tr:nth-child(even) td{background:rgba(31,26,20,.03)}
:root[data-theme="light"] .spec-t .spec-highlight td:last-child{color:var(--fire3)}

/* cards */
:root[data-theme="light"] .mode-card,
:root[data-theme="light"] .ic{border-color:rgba(31,26,20,.1)}
:root[data-theme="light"] .inst-grid .ic{background:#fff}
:root[data-theme="light"] .inst-grid .ic.ft{background:rgba(200,64,16,.05);border-color:rgba(200,64,16,.28)}
:root[data-theme="light"] .adv-grid{background:rgba(31,26,20,.1);border-color:rgba(31,26,20,.1)}
:root[data-theme="light"] .adv-card{background:#fff}
:root[data-theme="light"] .adv-card:hover{background:#FBF8F2}
:root[data-theme="light"] .rc{background:#fff}
:root[data-theme="light"] .rc:hover{background:#FBF3EA}
:root[data-theme="light"] .rc.cur{background:rgba(200,64,16,.06);border-color:rgba(200,64,16,.35)}

/* model selector chips */
:root[data-theme="light"] .mchip{border-color:rgba(31,26,20,.18);background:#fff}
:root[data-theme="light"] .mchip:hover{border-color:rgba(31,26,20,.4)}
:root[data-theme="light"] .mchip b{color:#1F1A14}
:root[data-theme="light"] .mchip span{color:rgba(31,26,20,.6)}
:root[data-theme="light"] .mchip.on{border-color:var(--fire3);background:rgba(200,64,16,.08)}
:root[data-theme="light"] .mchip.on b{color:var(--fire3)}

/* footer, modal, toast */
:root[data-theme="light"] footer{border-top-color:rgba(31,26,20,.1)}
:root[data-theme="light"] footer .logo-t{color:#1F1A14}
:root[data-theme="light"] footer p,
:root[data-theme="light"] .ft-links a{color:rgba(31,26,20,.62)}
:root[data-theme="light"] .ft-links a:hover{color:var(--fire)}
:root[data-theme="light"] .mbox{background:#fff;border-color:rgba(31,26,20,.12)}
:root[data-theme="light"] .mbg{background:rgba(20,14,8,.6)}
:root[data-theme="light"] .mx{color:rgba(31,26,20,.5)}
:root[data-theme="light"] .mx:hover{color:#1F1A14}
:root[data-theme="light"] .mi,
:root[data-theme="light"] .mse{background:#FBF8F2;border-color:rgba(31,26,20,.2);color:#1F1A14}
:root[data-theme="light"] .mse option{background:#fff;color:#1F1A14}
:root[data-theme="light"] .toast{background:#fff;border-color:rgba(31,26,20,.12);border-left-color:var(--fire3);color:#1F1A14}

/* inline-styled text: the pages hard-code white text in style="" attributes.
   Buttons (solid background) and the dark zones are left alone. */
:root[data-theme="light"] [style*="color:#fff"]:not(.btn-p):not([style*="background:#25D366"]):not([style*="background:var(--fire"]):not(.hero *):not(nav *):not(.av-main *){color:#1F1A14!important}
:root[data-theme="light"] [style*="color:rgba(255,255,255"]:not(.hero *):not(nav *):not(.av-main *){color:rgba(31,26,20,.66)!important}
:root[data-theme="light"] [style*="background:rgba(255,255,255"]:not(.hero *):not(nav *){background:rgba(31,26,20,.05)!important}
:root[data-theme="light"] [style*="border:1px solid rgba(255,255,255"]:not(.hero *):not(nav *){border-color:rgba(31,26,20,.16)!important}
/* links with JS hover colours (they set white, which vanishes on light) */
:root[data-theme="light"] [onmouseenter]{color:rgba(31,26,20,.7)!important;border-color:rgba(31,26,20,.18)!important}
:root[data-theme="light"] [onmouseenter]:hover{color:var(--fire)!important;border-color:var(--fire)!important}

/* embedded room designer (studio.js hard-codes white-on-dark chrome; its preview stage stays dark) */
:root[data-theme="light"] .mf-studio .mfs-head h2{color:#1F1A14}
:root[data-theme="light"] .mf-studio .mfs-head p,
:root[data-theme="light"] .mf-studio .mfs-note,
:root[data-theme="light"] .mf-studio .mfs-lbl,
:root[data-theme="light"] .mf-studio .mfs-rng label{color:rgba(31,26,20,.66)}
:root[data-theme="light"] .mf-studio .mfs-tab,
:root[data-theme="light"] .mf-studio .mfs-chip{background:#fff;border-color:rgba(31,26,20,.18);color:rgba(31,26,20,.7)}
:root[data-theme="light"] .mf-studio .mfs-tab:hover,
:root[data-theme="light"] .mf-studio .mfs-chip:hover{color:#1F1A14;border-color:var(--fire3)}
:root[data-theme="light"] .mf-studio .mfs-tab.on{background:var(--f);border-color:var(--f);color:#fff}
:root[data-theme="light"] .mf-studio .mfs-chip.on{color:#1F1A14;border-color:var(--fire3);background:rgba(200,64,16,.08)}
:root[data-theme="light"] .mf-studio .mfs-sample{border-color:rgba(31,26,20,.16)}
:root[data-theme="light"] .mf-studio .mfs-sample.on{border-color:var(--fire3)}
:root[data-theme="light"] .mf-studio .mfs-sw{border-color:rgba(31,26,20,.25)}
:root[data-theme="light"] .mf-studio .mfs-cta{border-top-color:rgba(31,26,20,.14)}
:root[data-theme="light"] .mf-studio .mfs-cta-t{color:#1F1A14}
:root[data-theme="light"] .mf-studio .mfs-btn.ghost{border-color:rgba(31,26,20,.3);color:#1F1A14}

/* hero: on desktop the price card already carries Reserve + WhatsApp, so drop the duplicates beside the description.
   Below 1000px the price card is hidden, so they stay there. */
@media(min-width:1001px){.hero-cta>.btn-p,.hero-cta>a{display:none!important}}