/* Dark orange theme: extra rules for the homepage (index.html) and the customer pages (scan.html, track.html).
   Loaded after theme-ember.css. Remove both <link>s from a page to go back to mint. */

/* ---- Homepage ---- */
.dark { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink); }
.step { background: var(--glass) !important; border: 1px solid var(--glass-line); color: var(--ink); }
.step .n { background: linear-gradient(180deg, #ffa04a, #f2701a); border: 0; color: var(--on-ember); }
.step p { color: var(--ink-2); }
.float { background: rgba(28,20,15,.88); border-color: var(--glass-line); color: var(--ink); }
.phone { background: #070505; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(255,120,30,.12), inset 0 0 0 2px rgba(255,255,255,.12); }
.screen .notch { background: #070505; }
.s-shop i { background: linear-gradient(180deg, #ffa04a, #f2701a); color: var(--on-ember); }
.s-ring { background: conic-gradient(var(--ember) var(--p, 30%), rgba(255,255,255,.12) 0); }
.s-ring div { background: #15100c; }
.s-ready { background: radial-gradient(circle at 50% 30%, #ffb062, #ff8a2a 55%, #e8641a); color: var(--on-ember); }
.s-ready .b { background: var(--on-ember); }
.s-ready .b svg { stroke: var(--ember); }
#newPin { color: var(--on-ember); }
summary::after { color: var(--ember); }
.done-box a { color: var(--ember); }

/* ---- Customer pages ---- */
a { color: inherit; }
.footer-note a { color: var(--ember); }
.big-input { color: var(--ink); }
.tile { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.tile.mint { background: linear-gradient(160deg, #ffa04a, #f2701a); color: var(--on-ember); border: 0; }
.tile.mint .muted, .tile.mint .cap { color: var(--on-ember); }
.timer-row circle:not(#arc) { stroke: rgba(255,255,255,.12); }
#arc { stroke: var(--ember); }
.sound-bar { background: var(--glass-2); border: 1px solid var(--glass-line); color: var(--ink); }
.toggle input[type=checkbox] { accent-color: var(--ember); }
.stars { color: var(--ember); }
.stars .icon { fill: var(--ember); stroke: var(--ember); }
[style*="background:var(--honey)"] .icon { stroke: var(--on-ember); }
.ready-screen { background: radial-gradient(circle at 50% 30%, #ffb062, #ff8a2a 55%, #e8641a); color: var(--on-ember); animation: ember-flash .9s ease-in-out infinite alternate; }
@keyframes ember-flash { from { filter: brightness(1); } to { filter: brightness(1.18); } }
.ready-screen .muted, .ready-screen p, .ready-screen .cap { color: var(--on-ember); }
.ready-screen .bell { background: var(--on-ember); }
.ready-screen .bell svg { stroke: var(--ember); }
.ready-screen .btn-primary { background: var(--on-ember); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
:root { --ring-track: rgba(255,255,255,.12); }
.toggle input[type=checkbox] { appearance: none; -webkit-appearance: none; padding: 0; border: 2px solid #8f8078; border-radius: 5px; background: transparent; cursor: pointer; }
.toggle input[type=checkbox]:checked { border-color: var(--ember); background: var(--ember) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a0f08' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat; }