.configurator {
    width: 100%;
    height: 100%;
    z-index: -1;
    background: lightblue;
    margin: 0px;
    overflow: hidden;
    position: relative;
    display: none;
}

    .configurator .configurator-brim {
        background: #000000;
        position: relative;
        width: 100%;
        height: 100vh;
        left: 0px;
        top: 0px;
        bottom: 0px;
        right: 0px;
        max-height: 100vh;
        max-width: 100%;
        min-width: 100%;
        min-height: 100vh !important;
        overflow: hidden;
        position: fixed;
    }

    .configurator.fullscreen {
        z-index: 99;
        display: block;
        position: fixed;
        overflow: hidden;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
    }

    .configurator .render-canvas {
        width: 100%;
        height: 100%;
        touch-action: none;
        position: absolute;
        left: 0px;
        top: 0px;
    }

    .configurator .background {
        position: absolute;
        left: 0px;
        top: 0px;
        opacity: 0;
        transition: 1s;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .configurator.scanning .background,
    .configurator.ar .background {
        opacity: 1;
    }

.configurator.scanning .render-canvas {
    display: none;
}

    .configurator .configurator-scanner {
        display: none;
    }

        .configurator.scanning .configurator-scanner {
            display: block;
        }

        .configurator .configurator-scanner .temp {
            display: none;
        }

/* ===================================================================== */
/* AR Configurator UI chrome (ARConfiguratorComponent.razor)             */
/* ===================================================================== */

:root {
    --black: #0B0C0E;
    --panel: #17181B;
    --panel-soft: rgba(23,24,27,0.72);
    --line: rgba(255,255,255,0.08);
    --white: #F5F6F7;
    --silver: #9BA1A8;
    --cyan: #009EE2;
    --cyan-dim: rgba(0,158,226,0.18);
    --cyan-glow: rgba(0,158,226,0.55);
    --ease: cubic-bezier(.22,1,.36,1);
}

/* BACKGROUND: dark, cyan-toned garage photo simulation */
.garage-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 40% at 50% 32%, rgba(0,158,226,0.14), transparent 62%), url(/images/configurator/garage-bg.jpg) center 30%/cover no-repeat, linear-gradient(180deg,#161a1f 0%, #0f1418 40%, #0a0d10 72%, #070809 100%);
    background-blend-mode: normal, normal, normal;
}

    .garage-bg::before {
        content: "";
        position: absolute;
        top: 5%;
        left: 0;
        right: 0;
        height: 24%;
        background: linear-gradient(90deg, transparent 6%, rgba(200,235,255,0.10) 18%, rgba(200,235,255,0.18) 28%, transparent 40%), linear-gradient(90deg, transparent 58%, rgba(200,235,255,0.10) 70%, rgba(200,235,255,0.18) 80%, transparent 92%);
        filter: blur(2px);
        transform: perspective(320px) rotateX(40deg);
    }

    .garage-bg::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 42%;
        background: radial-gradient(120% 80% at 50% 120%, rgba(0,158,226,0.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.4));
        mask-image: linear-gradient(180deg, transparent, black 45%);
    }

.floor-arrow {
    position: absolute;
    left: 50%;
    bottom: 7%;
    transform: translateX(-50%);
    width: 120px;
    height: 150px;
    opacity: .22;
    background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent);
    clip-path: polygon(50% 0, 100% 55%, 72% 55%, 72% 100%, 28% 100%, 28% 55%, 0 55%);
}

.vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 160px 44px rgba(0,0,0,0.72);
}

/* TOP BAR */
.topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px;
    z-index: 40;
    animation: dropIn .6s var(--ease) both;
    background: linear-gradient(0deg, rgba(11, 12, 14, 0) 0%, rgba(11, 12, 14, 0.92) 30%, #0B0C0E 100%);

}

/* Mobile portrait: price-pill gets its own row above mode-switch/top-right
   instead of squeezing between them. */
@media (max-width: 600px) and (orientation: portrait) {
    .topbar {
        flex-wrap: wrap;
    }

    .price-pill {
        order: -1;
        flex-basis: 100% !important;
        margin-bottom: 8px;
    }
}

@keyframes dropIn {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mode-switch {
    display: flex;
    background: var(--panel-soft);
    backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

    .mode-switch button {
        border: none;
        background: transparent;
        color: var(--silver);
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .03em;
        padding: 7px 13px;
        border-radius: 999px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
        transition: color .25s var(--ease), background .25s var(--ease);
    }

        .mode-switch button.active {
            background: var(--cyan);
            color: #04141c;
        }

    .mode-switch svg {
        width: 13px;
        height: 13px;
    }

.icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--panel-soft);
    backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    cursor: pointer;
    transition: transform .2s var(--ease), border-color .2s var(--ease);
}

    .icon-btn:active {
        transform: scale(.9);
    }

    .icon-btn:hover {
        border-color: var(--cyan);
    }

.top-right {
    display: flex;
    gap: 8px;
}

.price-pill {
    flex: 1;
    text-align: center;
    animation: dropIn .6s var(--ease) .05s both;
}

    .price-pill .amount {
        color: var(--white);
        font-weight: 700;
        font-size: 12px;
        display: flex;
        align-items: baseline;
        gap: 5px;
        justify-content: center;
    }

        .price-pill .amount span {
            color: var(--white);
        }

    .price-pill .sub {
        font-size: 6px;
        color: var(--white);
        margin-top: 0px;
    }

        .price-pill .sub a {
            color: var(--white);
            text-decoration: underline;
        }

/* STAGE */

.zoom-capsule {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 200px;
    border-radius: 999px;
    background: var(--panel-soft);
    backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    z-index: 30;
    animation: sideIn .6s var(--ease) .15s both;
}
@keyframes sideIn {
    from {
        opacity: 0;
        transform: translate(-16px,-50%);
    }
    to {
        opacity: 1;
        transform: translate(0,-50%);
    }
}

.zoom-capsule .zbtn {
    color: var(--silver);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.zoom-capsule .track {
    position: relative;
    width: 3px;
    flex: 1;
    margin: 8px 0;
    background: rgba(255,255,255,0.12);
    border-radius: 3px;
}

.zoom-capsule .handle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cyan);
    transform: translate(-50%,-50%);
    box-shadow: 0 0 0 4px var(--cyan-dim), 0 2px 8px rgba(0,0,0,0.5);
    cursor: grab;
}

/* SCAN MODE */
.configurator.scanning .zoom-capsule,
.configurator.scanning .render-canvas,
.configurator.scanning .stepnav,
.configurator.scanning .sheet-backdrop,
.configurator.scanning .sheet {
    opacity: 0 !important;
    pointer-events: none;
}

.scan-overlay {
    position: absolute;
    inset: 0;
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--ease);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

    .configurator.scanning .scan-overlay {
        opacity: 1;
        pointer-events: auto;
    }

.scan-hint {
    color: var(--black);
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    padding: 0 30px;
}

.scan-frame {
    position: relative;
    width: 75vw;
    aspect-ratio: 520/150;
    border: 1.5px solid rgba(0,158,226,0.35);
    border-radius: 14px;
    background: rgba(0,20,30,0.25);
    overflow: hidden;
}

    .scan-frame .sf {
        position: absolute;
        width: 26px;
        height: 26px;
        border-color: var(--cyan);
        filter: drop-shadow(0 0 6px var(--cyan-glow));
    }

    .scan-frame .tl {
        top: -2px;
        left: -2px;
        border-top: 3px solid;
        border-left: 3px solid;
        border-radius: 10px 0 0 0;
    }

    .scan-frame .tr {
        top: -2px;
        right: -2px;
        border-top: 3px solid;
        border-right: 3px solid;
        border-radius: 0 10px 0 0;
    }

    .scan-frame .bl {
        bottom: -2px;
        left: -2px;
        border-bottom: 3px solid;
        border-left: 3px solid;
        border-radius: 0 0 0 10px;
    }

    .scan-frame .br {
        bottom: -2px;
        right: -2px;
        border-bottom: 3px solid;
        border-right: 3px solid;
        border-radius: 0 0 10px 0;
    }

.scan-sweep {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    top: 0;
    background: linear-gradient(90deg, transparent, var(--cyan) 20%, #bfeeff 50%, var(--cyan) 80%, transparent);
    box-shadow: 0 0 12px 2px var(--cyan-glow);
    opacity: 0;
}

    .scan-frame.scanning .scan-sweep {
        opacity: 1;
        animation: sweep 1.1s ease-in-out infinite;
    }

@keyframes sweep {
    0% {
        top: 4%;
    }
    100% {
        top: 94%;
    }
}

.scan-result {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,158,226,0.14);
    opacity: 0;
    transition: opacity .25s var(--ease);
    color: var(--cyan);
    font-size: 13px;
    font-weight: 600;
}

    .scan-frame.found .scan-result {
        opacity: 1;
    }

.scan-sub {
    color: var(--black);
    font-size: 11.5px;
    text-align: center;
}

.shutter-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid var(--white);
    background: rgba(255,255,255,0.06);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s var(--ease);
}

    .shutter-btn:active {
        transform: scale(.9);
    }

    .shutter-btn .shutter-ring {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: var(--white);
        transition: background .2s var(--ease), transform .2s var(--ease);
    }

    .shutter-btn.busy .shutter-ring {
        background: var(--cyan);
        transform: scale(.7);
        border-radius: 14px;
    }

/* STEP NAV */
.stepnav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(11,12,14,0) 0%, rgba(11,12,14,0.92) 30%, #0B0C0E 100%);
    padding: 26px 12px 14px;
    z-index: 50;
}

.cart-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.steps {
    display: flex;
    gap: 5px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 5px;
}

    .steps::-webkit-scrollbar {
        display: none;
    }

.step-pill {
    flex: 1 0 auto;
    min-width: 58px;
    text-align: center;
    padding: 9px 6px;
    border-radius: 12px;
    cursor: pointer;
    transition: background .25s var(--ease);
    position: relative;
}

    .step-pill .lbl {
        font-size: 10px;
        font-weight: 600;
        color: var(--silver);
        white-space: nowrap;
    }

    .step-pill .val {
        font-size: 8.5px;
        color: #5b6066;
        margin-top: 2px;
        display: block;
        white-space: nowrap;
    }

    .step-pill.active {
        background: var(--cyan-dim);
    }

        .step-pill.active .lbl {
            color: var(--cyan);
        }

        .step-pill.active .val {
            color: var(--white);
        }

    .step-pill.done .lbl::after {
        content: " ✓";
        color: var(--cyan);
    }

.confi-cart-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    background: var(--cyan);
    color: #04141c;
    border: none;
    border-radius: 16px;
    padding: 22px 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,158,226,0.35);
    transition: transform .2s var(--ease);
    min-width: 50px;
}

    .confi-cart-btn:active {
        transform: scale(.94);
    }

    .confi-cart-btn .ctxt {
        font-size: 10px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

/* SHEET */
.sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease);
    z-index: 60;
}

    .sheet-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

.sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    background: #111214;
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    padding: 10px 18px 22px;
    transform: translateY(100%);
    transition: transform .38s var(--ease);
    max-height: 84%;
    overflow-y: auto;
}

    .sheet.open {
        transform: translateY(0);
    }

    .sheet .grabber {
        width: 36px;
        height: 4px;
        background: #33363a;
        border-radius: 3px;
        margin: 4px auto 14px;
    }

    .sheet h3 {
        font-size: 15px;
        margin: 0 0 4px;
    }

    .sheet .desc {
        font-size: 11.5px;
        color: var(--silver);
        margin: 0 0 16px;
    }

.opt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.opt-card {
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}

    .opt-card .name {
        font-size: 11px !important;
        font-weight: 600;
        line-height: 1.2;
    }

    .opt-card.selected {
        border-color: var(--cyan);
        background: var(--cyan-dim);
    }

    .opt-card.icon-card {
        background: #f2f3f4;
        border-color: rgba(255,255,255,0.14);
    }

        .opt-card.icon-card.selected {
            background: #f2f3f4;
            border-color: var(--cyan);
            box-shadow: 0 0 0 1px var(--cyan);
        }

        .opt-card.icon-card .name {
            color: #16171a;
        }

.swatch-img {
    width: 100%;
    height: 46px;
    object-fit: contain;
    margin-bottom: 6px;
    display: block;
}

.opt-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.season-range-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.plate-input-group {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

    .plate-input-field {
        flex: 1;
        min-width: 0;
    }

    .plate-input-field label {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: var(--silver);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 6px;
    }

    .plate-input-field input {
        width: 100%;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 12px 8px;
        color: var(--white);
        font-size: 16px;
        letter-spacing: .08em;
        text-transform: uppercase;
        text-align: center;
        outline: none;
        transition: border-color .2s var(--ease);
    }

        .plate-input-field input:focus {
            border-color: var(--cyan);
        }

        .plate-input-field input::placeholder {
            color: #5b6066;
            text-transform: none;
            letter-spacing: normal;
        }

.engschrift-accepted {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.engschrift-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
}

    .engschrift-check input {
        width: 18px;
        height: 18px;
        accent-color: var(--cyan);
        cursor: pointer;
    }

.engschrift-info {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--silver);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .2s var(--ease), color .2s var(--ease);
}

    .engschrift-info:hover {
        border-color: var(--cyan);
        color: var(--cyan);
    }

.opt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}

    .opt-row.selected {
        border-color: var(--cyan);
        background: var(--cyan-dim);
    }

    .opt-row .name {
        font-size: 12.5px;
        font-weight: 600;
    }

    .opt-row .radio {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid #444;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .opt-row.selected .radio {
        border-color: var(--cyan);
    }

        .opt-row.selected .radio::after {
            content: "";
            width: 7px;
            height: 7px;
            background: var(--cyan);
            border-radius: 50%;
        }

.sheet-next {
    width: 100%;
    margin-top: 16px;
    padding: 13px;
    border: none;
    border-radius: 14px;
    background: var(--cyan);
    color: #04141c;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

/* COACHMARK */
.coach-backdrop {
    position: absolute;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s var(--ease);
}

    .coach-backdrop.on {
        opacity: 1;
        pointer-events: auto;
    }

.coach-hole {
    position: absolute;
    border-radius: 16px;
    box-shadow: 0 0 0 4000px rgba(6,8,10,0.80), 0 0 0 2px var(--cyan), 0 0 26px 4px var(--cyan-glow);
    transition: all .42s var(--ease);
    pointer-events: none;
}

.coach-pulse {
    position: absolute;
    border-radius: 16px;
    border: 2px solid var(--cyan);
    animation: pulse 1.8s ease-out infinite;
    pointer-events: none;
}
@keyframes pulse {
    0% {
        opacity: .7;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.12);
    }
}

.coach-tip {
    position: absolute;
    width: 250px;
    max-width: calc(100% - 40px);
    background: #15171a;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 15px 16px 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    transition: top .42s var(--ease), left .42s var(--ease);
}

    .coach-tip .ct-step {
        font-size: 10px;
        color: var(--cyan);
        letter-spacing: .08em;
        margin-bottom: 6px;
    }

    .coach-tip h4 {
        font-size: 14.5px;
        margin: 0 0 5px;
    }

    .coach-tip p {
        font-size: 12px;
        line-height: 1.45;
        color: var(--silver);
        margin: 0 0 13px;
    }

.coach-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.coach-dots {
    display: flex;
    gap: 5px;
}

    .coach-dots i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #3a3d42;
        transition: background .2s, width .2s;
    }

        .coach-dots i.on {
            background: var(--cyan);
            width: 16px;
            border-radius: 3px;
        }

.coach-btns {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .coach-btns button {
        border: none;
        cursor: pointer;
        font-weight: 600;
        border-radius: 10px;
    }

.coach-back {
    background: transparent;
    color: var(--silver);
    font-size: 12px;
    padding: 8px 6px;
}

.coach-next {
    background: var(--cyan);
    color: #04141c;
    font-size: 12px;
    padding: 9px 16px;
}

.coach-skip {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 82;
    background: var(--panel-soft);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    color: var(--silver);
    font-size: 11px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}

    .coach-skip.on {
        opacity: 1;
        pointer-events: auto;
    }

/* INFO POPUP (e.g. Engschrift explanation) - same card look as .coach-tip,
   centered with its own backdrop instead of pointing at a specific element. */
.info-backdrop {
    position: absolute;
    inset: 0;
    z-index: 85;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

    .info-backdrop.on {
        opacity: 1;
        pointer-events: auto;
    }

.info-card {
    width: min(90vw,380px);
    max-height: 80%;
    overflow-y: auto;
    background: #15171a;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px 20px 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}

    .info-card h4 {
        font-family: 'Space Grotesk',sans-serif;
        font-size: 15px;
        color: var(--white);
        margin: 0 0 10px;
    }

    .info-card p {
        font-size: 12.5px;
        line-height: 1.55;
        color: var(--silver);
        margin: 0 0 16px;
    }

    .info-card button {
        width: 100%;
        padding: 11px;
        border: none;
        border-radius: 12px;
        background: var(--cyan);
        color: #04141c;
        font-family: 'Space Grotesk',sans-serif;
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
    }

.toast {
    position: absolute;
    left: 50%;
    bottom: 110px;
    transform: translate(-50%,20px);
    background: var(--cyan);
    color: #04141c;
    font-weight: 700;
    font-size: 13px;
    padding: 12px 20px;
    border-radius: 999px;
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    box-shadow: 0 10px 30px rgba(0,158,226,0.4);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .toast.on {
        opacity: 1;
        transform: translate(-50%,0);
    }

@media (prefers-reduced-motion:reduce) {
    .configurator * {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}