/* Day / night view. Night is the original design. Day flips the whole page to a light palette with one filter on the
   page, then flips photos, videos, photo showcases and gold accents back so they keep their true colours. */
html[data-theme=day]{filter:invert(1) hue-rotate(180deg) contrast(1.12)}
/* Softer grey copy is lifted so it reads darker and crisper once flipped to daylight */
html[data-theme=day] :is(.lead,.fine,.card p,.hero p){color:#e4e8ec}
/* Application form panels stay light in daylight (see the end of this file), so their fine print stays a deep grey */
html[data-theme=day] .form :is(.lead,.fine){color:#454b53}
html[data-theme=day] :is(img,video,canvas,iframe):not(:is(.lot-media,.stage,.shot,.sv-hero,.sv-img) *),
html[data-theme=day] :is(.hero-bg,.lot-media,.stage,.shot,.sv-hero,.sv-img:not(.sv-ic),.sv-medal,.sv-parts-logo,.brand .crest),
html[data-theme=day] :is(.nav-cta,.btn:not(.alt),.sv-flag,.sv-badge,.sv-count,.theme-k):not(:is(.sv-hero,.stage,.lot-media,.sv-img:not(.sv-ic)) *){filter:invert(1) hue-rotate(180deg)}
/* Red pills and badges (Live Auction, hot lots) flip back too, so they stay true red instead of turning pink */
html[data-theme=day] :is(.nav-live,.lot-live,.lot-hot,.alarm,.ship-leaf,.rpm i.on.red):not(:is(.lot-media,.stage,.shot,.sv-hero,.sv-img) *){filter:invert(1) hue-rotate(180deg) saturate(1.2)}
html[data-theme=day] .why .hot:before{filter:invert(1) hue-rotate(180deg)}
/* Photos and videos get a little extra colour and contrast so they stand out on the light page */
html[data-theme=day] :is(img,video):not(:is(.lot-media,.stage,.shot,.sv-hero,.sv-img) *),html[data-theme=day] :is(.hero-bg,.lot-media,.stage,.shot,.sv-hero,.sv-img:not(.sv-ic)){filter:invert(1) hue-rotate(180deg) saturate(1.18) contrast(1.04)}
html[data-theme=day] .brand .crest{filter:invert(1) hue-rotate(180deg) drop-shadow(0 4px 10px #0003)}
html[data-theme=day] .contact:before{filter:saturate(1.1) invert(1) hue-rotate(180deg)}
html[data-theme=day] :is(.finish,.custom):before{filter:invert(1) hue-rotate(180deg)}

/* Switch in the header */
.theme-tg{display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;border-radius:30px;border:1px solid #d9b96f66;background:#ffffff08;color:#e8e3d7;font:700 13px/1 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:border-color .25s,background .25s}
.theme-tg:hover{border-color:var(--gold);background:#d9b96f1a}
.theme-k{position:relative;display:block;width:50px;height:28px;border-radius:20px;background:linear-gradient(145deg,#1b2140,#07080b);box-shadow:inset 0 1px 3px #000a,0 0 0 1px #d9b96f55}
.theme-k:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8e0,#d9b96f 60%,#9b7428);box-shadow:0 2px 6px #000a;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.theme-k svg{position:absolute;top:6px;width:16px;height:16px;fill:none;stroke:#f3dc9e;stroke-width:2;stroke-linecap:round;transition:opacity .3s}
.th-sun{left:6px;opacity:0}
.th-moon{right:6px;fill:#f3dc9e!important;stroke:none!important}
[data-theme=day] .theme-k{background:linear-gradient(145deg,#8fc6ff,#f6d98a)}
[data-theme=day] .theme-k:after{transform:translateX(22px);background:radial-gradient(circle at 35% 30%,#fff,#ffe9a8 55%,#f0b93c)}
[data-theme=day] .th-sun{opacity:1;stroke:#7a5410}
[data-theme=day] .th-moon{opacity:0}
@media(max-width:640px){.theme-tg{padding:3px;border-color:transparent;background:none}.theme-l{display:none}}

/* Cream panels (application form sections, chat bubbles, the calculator receipt) are already light in night view, so
   they flip back in daylight and stay light instead of turning black. Anything inside them keeps its natural colours. */
html[data-theme=day] :is(.form,.bubble,.cx-bubble,.cx-panel.cx-receipt){filter:invert(1) hue-rotate(180deg)}
html[data-theme=day] :is(.form,.bubble,.cx-bubble,.cx-panel.cx-receipt) *{filter:none!important}
html[data-theme=day] .form{box-shadow:0 18px 50px #0000001f}