/* ==========================================================
   OVKZ Mobile Menu v1.0.0
   Drill-down panelen: één scherm tegelijk, horizontaal
   schuivend — zoals het mobiele menu van lego.com.
   ========================================================== */

.ovkz-mm {
    --mm-oranje:    #e8601c;
    --mm-oranje-dk: #c44e14;
    --mm-oranje-lt: #fff4ef;
    --mm-tekst:     #111827;
    --mm-subtekst:  #6b7280;
    --mm-rand:      #e5e7eb;
    --mm-wit:       #ffffff;
    --mm-breedte:   min(400px, 88vw);
    --mm-kop:       64px;

    position: relative;
    display: inline-block;
    line-height: 0;
}

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

/* ══════════════════════════════════════════════════════════
   HAMBURGER
══════════════════════════════════════════════════════════ */

.ovkz-mm-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--mm-tekst) !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .15s !important;
}

.ovkz-mm-toggle:hover { background: var(--mm-oranje-lt) !important; }

.ovkz-mm-bars {
    display: block;
    position: relative;
    width: 24px;
    height: 16px;
}

.ovkz-mm-bars span {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2.5px;
    border-radius: 3px;
    background: currentColor;
    transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .18s;
}

.ovkz-mm-bars span:nth-child(1) { top: 0; }
.ovkz-mm-bars span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.ovkz-mm-bars span:nth-child(3) { bottom: 0; }

/* Hamburger wordt kruisje wanneer open */
.ovkz-mm.is-open .ovkz-mm-bars span:nth-child(1) { transform: translateY(6.75px) rotate(45deg); }
.ovkz-mm.is-open .ovkz-mm-bars span:nth-child(2) { opacity: 0; }
.ovkz-mm.is-open .ovkz-mm-bars span:nth-child(3) { transform: translateY(-6.75px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════════
   SCRIM (donkere laag achter het paneel)
══════════════════════════════════════════════════════════ */

.ovkz-mm-scrim {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(17,24,39,.5) !important;
    opacity: 0;
    transition: opacity .28s ease;
    z-index: 99998 !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ovkz-mm-scrim[hidden] { display: none !important; }
.ovkz-mm.is-open .ovkz-mm-scrim { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   DRAWER
══════════════════════════════════════════════════════════ */

.ovkz-mm-drawer {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    width: var(--mm-breedte) !important;
    max-width: 100vw !important;
    background: var(--mm-wit) !important;
    box-shadow: 0 0 40px rgba(0,0,0,.22) !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
    font-family: inherit;
    line-height: 1.5;
    color: var(--mm-tekst);
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    /* Veilige zone op iPhones met notch */
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.ovkz-mm-drawer[hidden] { display: none !important; }

.ovkz-mm--right .ovkz-mm-drawer { right: 0 !important; left: auto !important; transform: translateX(100%); }
.ovkz-mm--left  .ovkz-mm-drawer { left: 0 !important; right: auto !important; transform: translateX(-100%); }

.ovkz-mm.is-open .ovkz-mm-drawer { transform: translateX(0) !important; }

/* ── Kop ─────────────────────────────────────────────────── */

.ovkz-mm-head {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: var(--mm-kop) !important;
    padding: 0 8px 0 16px !important;
    border-bottom: 1px solid var(--mm-rand) !important;
    flex-shrink: 0 !important;
}

.ovkz-mm-heading {
    flex: 1 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--mm-tekst) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ovkz-mm-back,
.ovkz-mm-close {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--mm-tekst) !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: background .15s, color .15s !important;
}

.ovkz-mm-back:hover,
.ovkz-mm-close:hover {
    background: var(--mm-oranje-lt) !important;
    color: var(--mm-oranje) !important;
}

.ovkz-mm-back[hidden] { display: none !important; }
.ovkz-mm-back-txt { display: inline-block; }

/* ── Zoekbalk ────────────────────────────────────────────── */

.ovkz-mm-search {
    position: relative !important;
    flex-shrink: 0 !important;
    margin: 14px 16px !important;
    padding: 0 !important;
    background: var(--mm-wit) !important;
    border: 1.5px solid var(--mm-rand) !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    transition: border-color .18s, box-shadow .18s !important;
}

.ovkz-mm-search:focus-within {
    border-color: var(--mm-oranje) !important;
    box-shadow: 0 0 0 3px rgba(232,96,28,.12) !important;
}

.ovkz-mm-search-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 52px 0 18px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: .9rem !important;
    color: var(--mm-tekst) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.ovkz-mm-search-input::placeholder { color: #9ca3af !important; }

.ovkz-mm-search-btn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 50px 50px 0 !important;
    background: var(--mm-oranje) !important;
    color: var(--mm-wit) !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .15s !important;
}

.ovkz-mm-search-btn:hover { background: var(--mm-oranje-dk) !important; }

/* ══════════════════════════════════════════════════════════
   PANELEN  —  één scherm tegelijk, horizontaal schuivend
══════════════════════════════════════════════════════════ */

.ovkz-mm-viewport {
    position: relative !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    min-height: 0 !important;
}

.ovkz-mm-panel {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 8px 0 24px !important;
    list-style: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: var(--mm-wit) !important;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.4,0,.2,1), visibility .28s;
}

/* Actief paneel staat in beeld */
.ovkz-mm-panel.is-active {
    transform: translateX(0);
    visibility: visible;
}

/* Ouderpaneel is naar links weggeschoven */
.ovkz-mm-panel.is-parked {
    transform: translateX(-28%);
    visibility: hidden;
}

/* ── Menu-items ──────────────────────────────────────────── */

.ovkz-mm-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: none !important;
}

.ovkz-mm-link,
.ovkz-mm-drill {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 14px 18px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--mm-tekst) !important;
    font-family: inherit !important;
    font-size: .975rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .14s, color .14s !important;
}

.ovkz-mm-drill { font-weight: 600 !important; }

.ovkz-mm-link:hover,
.ovkz-mm-drill:hover,
.ovkz-mm-link:focus-visible,
.ovkz-mm-drill:focus-visible {
    background: var(--mm-oranje-lt) !important;
    color: var(--mm-oranje-dk) !important;
}

.ovkz-mm-drill svg {
    flex-shrink: 0;
    color: var(--mm-subtekst);
    transition: transform .16s, color .14s;
}

.ovkz-mm-drill:hover svg {
    color: var(--mm-oranje);
    transform: translateX(3px);
}

/* Overzichtslink bovenaan een subpaneel */
.ovkz-mm-overview .ovkz-mm-link {
    color: var(--mm-oranje) !important;
    font-weight: 700 !important;
    font-size: .8rem !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.ovkz-mm-overview {
    border-bottom: 1px solid var(--mm-rand) !important;
    margin-bottom: 6px !important;
}

/* ══════════════════════════════════════════════════════════
   CTA + VOETTEKST
══════════════════════════════════════════════════════════ */

.ovkz-mm-cta-wrap {
    flex-shrink: 0 !important;
    padding: 12px 16px 0 !important;
}

.ovkz-mm-cta {
    display: block !important;
    width: 100% !important;
    padding: 13px 18px !important;
    border-radius: 50px !important;
    background: var(--mm-oranje) !important;
    color: var(--mm-wit) !important;
    font-size: .925rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(232,96,28,.3) !important;
    transition: background .15s !important;
}

.ovkz-mm-cta:hover { background: var(--mm-oranje-dk) !important; color: var(--mm-wit) !important; }

.ovkz-mm-foot {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    border-top: 1px solid var(--mm-rand) !important;
}

.ovkz-mm-foot-label {
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: var(--mm-subtekst) !important;
}

.ovkz-mm-social {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.ovkz-mm-social a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #f3f4f6 !important;
    color: var(--mm-subtekst) !important;
    text-decoration: none !important;
    transition: background .15s, color .15s, transform .15s !important;
}

.ovkz-mm-social a:hover {
    background: var(--mm-oranje) !important;
    color: var(--mm-wit) !important;
    transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════════════════════
   TOEGANKELIJKHEID
══════════════════════════════════════════════════════════ */

/* Scroll van de pagina blokkeren wanneer het menu open is */
body.ovkz-mm-locked {
    overflow: hidden !important;
    touch-action: none !important;
}

.ovkz-mm-link:focus-visible,
.ovkz-mm-drill:focus-visible,
.ovkz-mm-back:focus-visible,
.ovkz-mm-close:focus-visible,
.ovkz-mm-toggle:focus-visible {
    outline: 2px solid var(--mm-oranje) !important;
    outline-offset: -2px !important;
}

/* Respecteer 'verminder beweging' */
@media (prefers-reduced-motion: reduce) {
    .ovkz-mm-drawer,
    .ovkz-mm-panel,
    .ovkz-mm-scrim,
    .ovkz-mm-bars span {
        transition: none !important;
    }
}

/* Op kleine telefoons het paneel volledig laten vullen */
@media (max-width: 400px) {
    .ovkz-mm { --mm-breedte: 100vw; }
    .ovkz-mm-back-txt { display: none; }
}