/**
 * RESTRICTED ACCESS: This software is proprietary and closed-source.
 * NO AI TRAINING OR ANALYSIS: prohibited without prior written permission.
 * See TERMS.txt and https://www.yoozecase.com/terms
 *
 * Purpose: styling van het Magic Menu lift-thema (yc_magic_menu element).
 * Alle kleuren en snelheid via --yc-mm-* custom properties; het element
 * zet instance-overrides als inline style op de wrapper. Alle selectors
 * gescoped onder .yc-mm (geen kale classes).
 *
 * (C) 2026 A YOOzeCase Company. All rights reserved.
 */

.yc-mm {
    /* design tokens: instance-overrides komen via inline style op de wrapper */
    --yc-mm-wall: #f2dfa0;
    --yc-mm-wall-speck: rgba(160, 130, 60, .25);
    --yc-mm-floor: #c3a684;
    --yc-mm-frame: #4a4a4f;
    --yc-mm-frame-dark: #2b2b2f;
    --yc-mm-door: #7e7e84;
    --yc-mm-door-edge: #1f1f1f;
    --yc-mm-cab: #1c1c22;
    --yc-mm-scene: linear-gradient(#2e3a4d, #1d2530);
    --yc-mm-btn-bg: #72c5bf;
    --yc-mm-btn-text: #ffffff;
    --yc-mm-btn-border: #101010;
    --yc-mm-lamp: #ffffff;
    --yc-mm-lamp-active: #eb6263;
    --yc-mm-display: #9fe8b7;
    --yc-mm-speed: .9s;
    --yc-mm-radius: 18px;

    position: relative;
    display: flex;
    gap: clamp(20px, 5vw, 56px);
    align-items: stretch;
    padding: clamp(20px, 4vw, 44px);
    border-radius: 14px;
    background:
        radial-gradient(var(--yc-mm-wall-speck) 1.2px, transparent 1.6px),
        linear-gradient(to bottom, var(--yc-mm-wall) 0 82%, var(--yc-mm-floor) 82% 100%);
    background-size: 90px 90px, 100% 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.yc-mm *,
.yc-mm *::before,
.yc-mm *::after {
    box-sizing: border-box;
}

.yc-mm.yc-mm-pos-left {
    flex-direction: row-reverse;
}

.yc-mm.is-transparent {
    background: none;
}

/* ---------- knoppenpaneel ---------- */
.yc-mm-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    padding-top: 24px;
    min-width: 200px;
    flex: 0 1 260px;
}

.yc-mm-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.yc-mm-group + .yc-mm-group {
    margin-top: 34px;
}

.yc-mm-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    min-height: 44px; /* WCAG tap-target, ook op mobiel */
}

.yc-mm-btn .yc-mm-btn-label {
    flex: 1;
    background: var(--yc-mm-btn-bg);
    color: var(--yc-mm-btn-text);
    border: 3px solid var(--yc-mm-btn-border);
    border-radius: 8px;
    /* knoppen schalen mee: kleiner op smalle schermen, leesbaar blijft leidend */
    padding: clamp(5px, 1.2vw, 8px) clamp(10px, 1.8vw, 14px);
    font-weight: 700;
    font-size: clamp(.9rem, .78rem + .6vw, 1.05rem);
    letter-spacing: .3px;
    transition: background .25s ease, color .25s ease;
}

.yc-mm-btn .yc-mm-lamp {
    width: clamp(20px, 3.5vw, 26px);
    height: clamp(20px, 3.5vw, 26px);
    border-radius: 50%;
    background: var(--yc-mm-lamp);
    border: 3px solid var(--yc-mm-btn-border);
    position: relative;
    flex: 0 0 auto;
    transition: background .25s ease, box-shadow .25s ease;
}

.yc-mm-btn .yc-mm-lamp::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 3px solid var(--yc-mm-btn-border);
    background: inherit;
}

.yc-mm-btn:hover .yc-mm-btn-label,
.yc-mm-btn:focus-visible .yc-mm-btn-label {
    background: #ffffff;
    color: var(--yc-mm-btn-bg);
}

.yc-mm-btn.is-active .yc-mm-lamp {
    background: var(--yc-mm-lamp-active);
    box-shadow: 0 0 12px 2px rgba(0, 0, 0, .25);
}

.yc-mm-btn:focus-visible {
    outline: 3px solid var(--yc-mm-btn-bg);
    outline-offset: 3px;
    border-radius: 10px;
}

/* actieve verdieping ook met vorm, niet alleen kleur (WCAG) */
.yc-mm-btn.is-active .yc-mm-btn-label {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- de lift ---------- */
.yc-mm-lift {
    flex: 1 1 320px;
    max-width: 460px;
    aspect-ratio: 382 / 470;
    position: relative;
    align-self: flex-end;
    margin-bottom: calc(-1 * clamp(20px, 4vw, 44px)); /* staat op de vloer */
}

.yc-mm-housing {
    position: absolute;
    inset: 0;
    background: var(--yc-mm-frame);
    border: 4px solid var(--yc-mm-frame-dark);
    border-bottom: none;
    border-radius: var(--yc-mm-radius) var(--yc-mm-radius) 0 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.yc-mm-head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 11%;
    background: var(--yc-mm-frame-dark);
    border-radius: calc(var(--yc-mm-radius) - 4px) calc(var(--yc-mm-radius) - 4px) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yc-mm-display {
    min-width: 46%;
    text-align: center;
    background: #0b0f0c;
    color: var(--yc-mm-display);
    border-radius: 6px;
    padding: 3px 14px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: clamp(.65rem, 1.9vw, 1rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .95;
}

.yc-mm-cab {
    position: absolute;
    left: 7.5%;
    right: 7.5%;
    top: 13.5%;
    bottom: 0;
    background: var(--yc-mm-cab);
    border: 4px solid var(--yc-mm-door-edge);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.yc-mm-cab.yc-mm-cab-full {
    top: 6%;
}

.yc-mm-interior {
    position: absolute;
    inset: 0;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--yc-mm-scene);
    transition: transform .5s ease;
}

.yc-mm-interior.is-current {
    opacity: 1;
}

.yc-mm-interior-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yc-mm-interior-label {
    color: rgba(255, 255, 255, .85);
    font-weight: 700;
    font-size: clamp(1rem, 3vw, 1.6rem);
    letter-spacing: 1px;
    text-align: center;
    padding: 0 10%;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.yc-mm-cablight {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 34%;
    height: 10px;
    border-radius: 0 0 10px 10px;
    background: #3a3a42;
    z-index: 3;
    transition: background var(--yc-mm-speed) ease, box-shadow var(--yc-mm-speed) ease;
}

.yc-mm.is-open .yc-mm-cablight {
    background: #fff7d6;
    box-shadow: 0 6px 24px 6px rgba(255, 244, 200, .45);
}

.yc-mm-door {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50.5%;
    background:
        linear-gradient(to right, rgba(255, 255, 255, .10), rgba(0, 0, 0, .12)),
        var(--yc-mm-door);
    border: 4px solid var(--yc-mm-door-edge);
    z-index: 2;
    transition: transform var(--yc-mm-speed) cubic-bezier(.65, 0, .3, 1);
    will-change: transform;
}

.yc-mm-door-l {
    left: 0;
    border-radius: 6px 0 0 0;
}

.yc-mm-door-r {
    right: 0;
    border-radius: 0 6px 0 0;
}

.yc-mm.is-open .yc-mm-door-l {
    transform: translateX(-96%);
}

.yc-mm.is-open .yc-mm-door-r {
    transform: translateX(96%);
}

/* volg-bevestiging: interieur komt licht naar voren */
.yc-mm.is-follow .yc-mm-interior.is-current {
    transform: scale(1.06);
}

/* ---------- screenreader-only ---------- */
.yc-mm-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- responsive: 640px = smartphone ---------- */
@media (max-width: 640px) {
    .yc-mm {
        flex-direction: column-reverse;
        align-items: center;
    }

    .yc-mm.yc-mm-pos-left {
        flex-direction: column-reverse;
    }

    .yc-mm-panel {
        width: 100%;
        max-width: 380px;
        padding-top: 0;
        flex-basis: auto;
    }

    .yc-mm-group {
        gap: 8px;
    }

    .yc-mm-group + .yc-mm-group {
        margin-top: 16px;
    }

    .yc-mm-lift {
        align-self: center;
        width: min(75vw, 340px);
        flex: 0 0 auto;
    }

    /* knoppen compacter op de telefoon, tap-target blijft 44px */
    .yc-mm-btn {
        gap: 10px;
    }

    .yc-mm-btn .yc-mm-btn-label {
        font-size: .9rem;
        padding: 4px 10px;
        border-width: 2px;
    }

    .yc-mm-btn .yc-mm-lamp {
        width: 18px;
        height: 18px;
        border-width: 2px;
    }

    .yc-mm-btn .yc-mm-lamp::after {
        inset: 2px;
        border-width: 2px;
    }

    /* optioneel: knoppenlijst in plaats van lift op de telefoon */
    .yc-mm.yc-mm-mobile-list .yc-mm-lift {
        display: none;
    }

    .yc-mm.yc-mm-mobile-list {
        background: linear-gradient(to bottom, var(--yc-mm-wall), var(--yc-mm-floor));
    }

    .yc-mm.yc-mm-mobile-list.is-transparent {
        background: none;
    }
}

@media (max-width: 420px) {
    .yc-mm {
        padding: 16px 12px;
    }

    .yc-mm-lift {
        width: min(82vw, 300px);
    }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .yc-mm-door,
    .yc-mm-cablight,
    .yc-mm-interior {
        transition-duration: .01s !important;
    }
}