/**
 * SWADS App Shell — black chassis, orange shine / pulse / Tron dock.
 * Load AFTER scan_customer_theme.css on Browse & Scan (/app).
 */

html:has(body.scan-customer) {
    background: #000000 !important;
    background-color: #000000 !important;
    color-scheme: dark only;
}

html:has(body.scan-customer),
body.scan-customer {
    min-height: 100%;
    min-height: 100dvh;
}

body.scan-customer {
    --customer-bg-deep: #050505;
    --customer-bg-mid: #0c0c0c;
    --customer-bg-glow: #161616;
    --browse-bg-deep: #030303;
    --browse-bg-mid: #0a0a0a;
    --browse-bg-glow: #141414;
    --customer-accent: #ff6b00;
    --customer-accent-soft: #ffb77d;
    --customer-glass-bg: rgba(255, 255, 255, 0.05);
    --customer-glass-border: rgba(255, 255, 255, 0.12);
    --customer-glass-panel: rgba(0, 0, 0, 0.45);
    --customer-text: #ffffff;
    --customer-text-muted: rgba(255, 255, 255, 0.88);
    --customer-text-dim: rgba(255, 255, 255, 0.72);
    --customer-text-detail: rgba(255, 248, 240, 0.92);
    --main-font: 'Roboto Flex', 'Segoe UI', sans-serif;
    background: #000000 !important;
    background-color: #000000 !important;
    color: var(--customer-text);
    color-scheme: dark only;
    font-family: var(--main-font);
    font-weight: 300;
    letter-spacing: 0.04em;
}

/* Tall / thin neo-grotesk (free stand-in for TT Commons Pro Light) */
body.scan-customer,
body.scan-customer button,
body.scan-customer input,
body.scan-customer a,
body.scan-customer .scan-orb-label,
body.scan-customer .browse-orb-label {
    font-family: var(--main-font) !important;
}

/* Portal UI uses Roboto Flex; brand mark stays Poppins */
body.scan-customer #swads-portal,
body.scan-customer #swads-portal p,
body.scan-customer #swads-portal span {
    font-family: 'Roboto Flex', sans-serif !important;
}

body.scan-customer #swads-portal .swads-portal__mark,
body.scan-customer #swads-portal .swads-portal__mark span,
body.scan-customer #swads-portal .logo-font,
body.scan-customer #swads-portal .logo-font * {
    font-family: 'Poppins', sans-serif !important;
}

body.scan-customer .scan-welcome-title {
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: clamp(1.65rem, 7.5vw, 2.35rem);
}

body.scan-customer .scan-welcome-tagline {
    font-weight: 300;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: clamp(0.62rem, 2.6vw, 0.75rem);
    opacity: 0.8;
    white-space: normal !important;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.35;
    max-width: 18rem;
}

body.scan-customer .browse-orb-label .browse-title,
body.scan-customer .browse-orb-label--solo .browse-title {
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: clamp(1.55rem, 7vw, 2.2rem);
}

body.scan-customer .scan-orb-label .scan-title,
body.scan-customer .scan-orb-label .scan-sub {
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: clamp(0.78rem, 3.4vw, 1rem);
}

body.scan-customer .browse-header h2,
body.scan-customer .browse-cat-btn,
body.scan-customer .browse-mode-btn,
body.scan-customer .browse-handle-hint,
body.scan-customer .tron-dock__chip,
body.scan-customer #scan-drawer,

body.scan-customer .browse-search-input {
    font-family: var(--main-font) !important;
    font-weight: 300;
    letter-spacing: 0.06em;
}

body.scan-customer .layer-scan {
    background: radial-gradient(
        ellipse 130% 95% at 50% -8%,
        #1a1a1a 0%,
        #0c0c0c 45%,
        #050505 100%
    );
}

body.scan-customer .layer-browse {
    background: radial-gradient(
        ellipse 130% 95% at 50% -8%,
        #161616 0%,
        #0a0a0a 45%,
        #030303 100%
    );
}

body.scan-customer .scan-shell::before,
body.scan-customer .browse-shell::before {
    background: radial-gradient(circle at 50% 38%, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
}

/* —— Orbs: black base, orange only on glow / rim / pulse —— */
body.scan-customer .scan-orb-btn,
body.scan-customer .browse-orb-btn {
    background:
        radial-gradient(ellipse 38% 30% at 30% 26%, rgba(255, 255, 255, 0.22) 0%, transparent 55%),
        radial-gradient(circle at 50% 72%, rgba(0, 0, 0, 0.85) 0%, transparent 55%),
        radial-gradient(circle at 50% 48%, #2a2a2a 0%, #141414 42%, #070707 100%);
    box-shadow:
        inset 0 -14px 28px rgba(0, 0, 0, 0.75),
        inset 0 10px 22px rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(255, 107, 0, 0.35),
        0 0 0 3px rgba(255, 107, 0, 0.08),
        0 18px 44px rgba(0, 0, 0, 0.65),
        0 0 36px rgba(255, 107, 0, 0.28),
        0 0 72px rgba(255, 107, 0, 0.12);
}

body.scan-customer .scan-orb-btn {
    box-shadow:
        inset 0 -10px 20px rgba(0, 0, 0, 0.7),
        inset 0 6px 14px rgba(255, 255, 255, 0.07),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 107, 0, 0.3),
        0 0 0 2px rgba(255, 107, 0, 0.06),
        0 10px 28px rgba(0, 0, 0, 0.6),
        0 0 22px rgba(255, 107, 0, 0.22),
        0 0 48px rgba(255, 107, 0, 0.1);
}

/* Soft orange aura behind the black orb (pulse) */
body.scan-customer .scan-orb-btn::before,
body.scan-customer .browse-orb-btn::before {
    background: radial-gradient(
        circle,
        rgba(255, 107, 0, 0.55) 0%,
        rgba(255, 107, 0, 0.18) 42%,
        transparent 70%
    );
    filter: blur(2px);
}

/* Specular catch stays bright; glisten gets a warm white → orange edge */
body.scan-customer .scan-orb-specular {
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 183, 125, 0.35) 45%,
        transparent 72%
    );
}

body.scan-customer .scan-orb-shine::after {
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 183, 125, 0.08) 32%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 107, 0, 0.18) 62%,
        transparent 100%
    );
}

/* Pulse rings — orange hairlines on black */
body.scan-customer .browse-ring,
body.scan-customer .scan-ring {
    border-color: rgba(255, 107, 0, 0.22);
}

body.scan-customer .browse-ring--outer,
body.scan-customer .scan-ring--outer {
    border-color: rgba(255, 107, 0, 0.32);
    box-shadow: 0 0 18px rgba(255, 107, 0, 0.12);
}

body.scan-customer .browse-ring--mid {
    border-color: rgba(255, 107, 0, 0.18);
}

body.scan-customer .browse-ring--ripple,
body.scan-customer .scan-ring--ripple {
    border-color: rgba(255, 107, 0, 0.4);
}

/* Menu / chips — black glass, orange outline accents */
body.scan-customer .scan-menu-btn {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 107, 0, 0.35);
    color: #ffb77d;
}

body.scan-customer .scan-topbar__dash {
    font-family: var(--main-font) !important;
}

body.scan-customer .scan-garage-portal {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 107, 0, 0.4);
}

body.scan-customer .scan-garage-portal__row i {
    color: #ff6b00;
}

body.scan-customer .scan-install-btn {
    border-color: rgba(255, 107, 0, 0.4);
    background: rgba(0, 0, 0, 0.5);
    color: #ffb77d;
}

body.scan-customer #scan-drawer {
    background: rgba(8, 8, 8, 0.97);
    border-left: 1px solid rgba(255, 107, 0, 0.28);
}

body.scan-customer #scan-drawer-backdrop {
    background: rgba(0, 0, 0, 0.72);
}

body.scan-customer .browse-handle-zone {
    background: linear-gradient(to bottom, rgba(5, 5, 5, 0.95), rgba(5, 5, 5, 0));
}

body.scan-customer .browse-handle {
    background: #ff6b00;
}

body.scan-customer .browse-cat-btn.is-active,
body.scan-customer .browse-filter-btn.is-active {
    border-color: rgba(255, 107, 0, 0.55);
    box-shadow: 0 0 16px rgba(255, 107, 0, 0.2);
    background: rgba(0, 0, 0, 0.5);
}

body.scan-customer .browse-mode-btn.is-active {
    /* Orb chrome + neon — defined in scan_customer_theme.css */
    color: #fff;
    font-weight: 600 !important;
}

body.scan-customer .browse-search-btn {
    border-color: rgba(255, 107, 0, 0.45);
    background: rgba(0, 0, 0, 0.55);
    color: #ffb77d;
    box-shadow: 0 0 14px rgba(255, 107, 0, 0.18);
}

body.scan-customer .browse-top-controls {
    background: rgba(0, 0, 0, 0.55);
    border-bottom-color: rgba(255, 107, 0, 0.12);
}

body.scan-customer .browse-header h2 {
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: clamp(0.85rem, 3.2vw, 1rem);
}

body.scan-customer .glass-card,
body.scan-customer .product-grid-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* Promo merchant header — beat body font-weight: 300 + Roboto Flex on anchors */
body.scan-customer .product-grid-card--promo .product-grid-card__merchant-name {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
}

body.scan-customer .glass-card.glass-card--slim {
    background:
        linear-gradient(
            135deg,
            rgba(255, 107, 0, 0.12) 0%,
            rgba(255, 255, 255, 0.05) 42%,
            rgba(0, 0, 0, 0.4) 100%
        ),
        rgba(14, 14, 14, 0.82);
    border-color: rgba(255, 107, 0, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 4px 16px rgba(0, 0, 0, 0.32);
}

body.scan-customer .glass-card.glass-card--slim:active {
    border-color: rgba(255, 107, 0, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 0 18px rgba(255, 107, 0, 0.16);
}

body.scan-customer .store-signal-icons {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    /* Room for ban circle above/below chips (overflow-x:auto also clips Y) */
    padding: 6px 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

body.scan-customer .store-signal-icons::-webkit-scrollbar {
    display: none;
}

body.scan-customer .store-signal-icons--compact .store-signal-chip {
    height: 22px;
    padding: 0 7px;
    font-size: 11px;
    flex-shrink: 0;
}

body.scan-customer .store-signal-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.88);
    font-size: 11px;
    font-weight: 700;
    overflow: visible;
}

body.scan-customer .store-signal-chip i {
    font-size: 12px;
    color: #ff6b00;
}

body.scan-customer .store-signal-chip--home i,
body.scan-customer .store-signal-chip--shop i,
body.scan-customer .store-signal-chip--place i { color: #ff6b00; }
body.scan-customer .store-signal-chip--on i,
body.scan-customer .store-signal-chip--off i,
body.scan-customer .store-signal-chip--on .store-signal-chip__text,
body.scan-customer .store-signal-chip--off .store-signal-chip__text { color: #ff6b00; }
body.scan-customer .store-signal-chip--on .store-signal-pig__body,
body.scan-customer .store-signal-chip--off .store-signal-pig__body { background-color: #ff6b00; }
body.scan-customer .store-signal-chip--halal i { color: #ff6b00; }
body.scan-customer .store-signal-chip--pet i { color: #ff6b00; }
body.scan-customer .store-signal-glyph {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    width: auto;
    height: 16px;
    flex-shrink: 0;
    overflow: visible;
}
body.scan-customer .store-signal-24h {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
    white-space: nowrap;
    color: inherit;
}
body.scan-customer .store-signal-24h__num {
    font-size: 11px;
}
body.scan-customer .store-signal-24h__hr {
    font-size: 8px;
    margin-left: 1px;
    font-weight: 700;
}
body.scan-customer .store-signal-chip--on .store-signal-24h,
body.scan-customer .store-signal-chip--off .store-signal-24h { color: #ff6b00; }
body.scan-customer .store-signal-ring,
body.scan-customer .store-signal-ban {
    position: absolute;
    inset: -5px;
    width: auto;
    height: auto;
    color: #ff6b00;
    pointer-events: none;
    overflow: visible;
}
body.scan-customer .store-signal-slash {
    position: absolute;
    inset: -5px;
    width: auto;
    height: auto;
    color: #ffffff;
    pointer-events: none;
    overflow: visible;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.85));
}
body.scan-customer .store-signal-pig {
    position: relative;
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}
body.scan-customer .store-signal-pig__body,
body.scan-customer .store-signal-pig__face {
    position: absolute;
    inset: 0;
    display: block;
}
body.scan-customer .store-signal-pig__body {
    background-color: currentColor;
    -webkit-mask: url('/img/store-signal-pig.png?v=4') center / contain no-repeat;
    mask: url('/img/store-signal-pig.png?v=4') center / contain no-repeat;
}
body.scan-customer .store-signal-pig__face {
    background-color: #0a0a0a;
    -webkit-mask: url('/img/store-signal-pig-face.png?v=4') center / contain no-repeat;
    mask: url('/img/store-signal-pig-face.png?v=4') center / contain no-repeat;
}

body.scan-customer .store-signal-chip__text {
    max-width: 3.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.scan-customer .glass-card:active,
body.scan-customer .product-grid-card:active {
    border-color: rgba(255, 107, 0, 0.4);
}

body.scan-customer .customer-product-actions {
    background: rgba(5, 5, 5, 0.96);
    border-top: 1px solid rgba(255, 107, 0, 0.18);
}


/* —— Tron dock: scan orb + thick bottom nav as one unit —— */
body.scan-customer .scan-stage--tron {
    justify-content: center;
    padding-bottom: 1.25rem;
    transform: translateY(-0.65rem);
}

body.scan-customer .scan-shell {
    overflow: visible;
}

body.scan-customer .layer-scan {
    overflow: visible;
}

body.scan-customer .tron-dock {
    position: relative;
    flex-shrink: 0;
    z-index: 20;
    /* Keep scan glow clear of phone gesture / system nav */
    padding: 0 0 max(4.75rem, calc(2.75rem + env(safe-area-inset-bottom, 0px)));
    margin-top: auto;
    background: transparent;
    transform: none;
}

body.scan-customer .tron-dock__unit {
    --tron-bar-h: 4.25rem;
    --tron-orb: var(--secondary-orb-size);
    position: relative;
    height: var(--tron-bar-h);
    width: 100%;
    max-width: var(--app-shell-w);
    margin: 0 auto;
    background: transparent;
    box-shadow: none;
    animation: none;
    border-radius: 0;
}

body.scan-customer .tron-dock__scan {
    position: absolute;
    left: 50%;
    bottom: calc(var(--tron-bar-h) * 0.42);
    width: calc(var(--tron-orb) + 2.5rem);
    height: calc(var(--tron-orb) + 2.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    margin: 0;
    transform: translate(-50%, 52%);
}

body.scan-customer .tron-dock__side {
    position: absolute;
    z-index: 7;
    padding: 0 14px;
    pointer-events: none;
}

body.scan-customer .tron-dock__side > * {
    pointer-events: auto;
}

body.scan-customer .tron-dock__side--left {
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Sit just under the right horizontal neon segment */
body.scan-customer .tron-dock__side--right {
    right: 2px;
    left: auto;
    top: 0;
    bottom: auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    transform: translateY(0);
    padding-right: 4px;
    padding-left: 0;
}

/* Neon path: soft rail + glowing comet (not a hard dash) */
body.scan-customer .tron-dock__svg {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 6;
}

body.scan-customer .tron-dock__path-base {
    stroke: rgba(255, 107, 0, 0.4);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: url(#tron-glow-soft);
    animation: tron-rail-pulse 2.8s ease-in-out infinite 0.3s;
}

body.scan-customer .tron-dock__path-trail {
    stroke: rgba(255, 160, 80, 0.55);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: url(#tron-glow-soft);
    stroke-dasharray: 14 86;
    stroke-dashoffset: 0;
    animation: tron-path-run 2.8s linear infinite;
    opacity: 0.55;
}

@keyframes tron-path-run {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -100; }
}

body.scan-customer .tron-dock__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 107, 0, 0.4);
    background: rgba(0, 0, 0, 0.55);
    color: #ffb77d;
    text-decoration: none;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow:
        0 0 12px rgba(255, 107, 0, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.scan-customer .tron-dock__chip i {
    color: #ff6b00;
    font-size: 0.85rem;
}

body.scan-customer .tron-dock__chip.hidden {
    display: none !important;
}

body.scan-customer .tron-dock__scan .scan-orb-btn {
    box-shadow:
        inset 0 -10px 20px rgba(0, 0, 0, 0.7),
        inset 0 6px 14px rgba(255, 255, 255, 0.07),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 107, 0, 0.45),
        0 0 0 3px rgba(255, 107, 0, 0.1),
        0 14px 36px rgba(0, 0, 0, 0.55),
        0 0 28px rgba(255, 107, 0, 0.35),
        0 0 48px rgba(255, 107, 0, 0.16);
}

body.scan-customer .tron-dock__scan .scan-orb-btn::before {
    /* Extend aura downward toward the bar */
    inset: -18% -12% -28%;
    background: radial-gradient(
        ellipse 70% 80% at 50% 55%,
        rgba(255, 107, 0, 0.55) 0%,
        rgba(255, 107, 0, 0.2) 40%,
        transparent 72%
    );
}

@keyframes tron-rail-pulse {
    0%, 100% {
        opacity: 0.45;
    }
    50% {
        opacity: 0.9;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.scan-customer .tron-dock__path-base,
    body.scan-customer .tron-dock__path-trail {
        animation: none !important;
    }
}