/* Snoeten r381 — paginabrede mobiele rechterkolom en omgekeerde sluitknop. */
.mobile-right-sidebar-backdrop[hidden],
.mobile-right-sidebar-handle[hidden],
.mobile-right-sidebar-close[hidden] { display: none !important; }

@media (max-width: 1024px) {
    html body.mobile-right-sidebar-open { overflow: hidden !important; }

    html body #content-sidebar[data-mobile-right-sidebar="1"],
    html body #sidebar[data-mobile-right-sidebar="1"],
    html body .welcome-home-side[data-mobile-right-sidebar="1"],
    html body [data-mobile-right-sidebar="1"] {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 2901 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        width: 100vw !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
        padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) 52px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        background: #f3f5f8 url("../../img/site/snoeten-nederland.webp") center top / cover no-repeat !important;
        box-shadow: -12px 0 32px rgba(20,36,57,.24) !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        grid-area: auto !important;
        flex: none !important;
        transform: translate3d(105%,0,0) !important;
        opacity: 1 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform .24s ease, visibility .24s ease !important;
        -webkit-overflow-scrolling: touch;
    }
    html body #content-sidebar[data-mobile-right-sidebar="1"].is-mobile-right-sidebar-open,
    html body #sidebar[data-mobile-right-sidebar="1"].is-mobile-right-sidebar-open,
    html body .welcome-home-side[data-mobile-right-sidebar="1"].is-mobile-right-sidebar-open,
    html body [data-mobile-right-sidebar="1"].is-mobile-right-sidebar-open {
        transform: translate3d(0,0,0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-right-sidebar-backdrop:not([hidden]) {
        display: block !important;
        position: fixed !important;
        z-index: 2900 !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(19,31,49,.46) !important;
        cursor: pointer;
    }
    .mobile-right-sidebar-handle:not([hidden]) {
        position: fixed !important;
        z-index: 2899 !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 34px !important;
        height: 50px !important;
        min-height: 50px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #345c91 !important;
        border-right: 0 !important;
        border-radius: 9px 0 0 9px !important;
        background: #4b72aa !important;
        color: white !important;
        box-shadow: -3px 2px 9px rgba(24,50,80,.2) !important;
        font-size: 19px !important;
        font-weight: 700;
        writing-mode: initial;
        cursor: pointer;
    }
    .mobile-right-sidebar-handle > span:first-child { font-size: 19px; line-height: 1; }
    /* De sluitknop staat links BUITEN de lade, op de verduisterde pagina. */
    .mobile-right-sidebar-close:not([hidden]) {
        position: fixed !important;
        z-index: 2903 !important;
        top: 50% !important;
        right: auto !important;
        left: 0 !important;
        transform: translateY(-50%) !important;
        display: grid !important;
        place-items: center !important;
        width: min(40px, 10vw) !important;
        height: 82px !important;
        min-width: 0 !important;
        min-height: 82px !important;
        margin: 0 !important;
        padding: 6px 0 !important;
        border: 1px solid #a62935 !important;
        border-left: 0 !important;
        border-right: 1px solid #a62935 !important;
        border-radius: 0 9px 9px 0 !important;
        background: #d83d49 !important;
        box-shadow: -3px 2px 9px rgba(100,25,35,.22) !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: .02em;
        white-space: nowrap;
        writing-mode: vertical-rl !important;
        text-orientation: mixed;
        cursor: pointer;
    }
    .mobile-right-sidebar-close:not([hidden]):hover,
    .mobile-right-sidebar-close:not([hidden]):focus-visible {
        background: #b82b38 !important;
    }
    /* De platen bewegen mee met de scroll van de rechterkolom.
       Oude algemene sidebarregels maakten section/nav sticky. */
    html body [data-mobile-right-sidebar="1"] :is(
        section, article, nav, .panel, .card, [class*="-panel"]
    ) {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
    }
    html body [data-mobile-right-sidebar="1"] > * {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
    }
    /* Bestaande mobiele modules voegen soms onderaan nog 20px marge toe.
       Alleen de ruimte tussen de platen blijft bestaan, onderaan niet dubbel. */
    html body [data-mobile-right-sidebar="1"] > :last-child {
        margin-bottom: 0 !important;
    }
    html body [data-mobile-right-sidebar="1"] > :last-child > :last-child {
        margin-bottom: 0 !important;
    }
    /* De losse, blauwe uitklapmenu-linkjes volgen dezelfde taakbalkstijl. */
    /* Gewone siteplaten zijn op mobiel hoekig; de lade vormt een eigen context. */
    html body #container #content-sidebar[data-mobile-right-sidebar="1"] > :is(
        section, article, .panel, .card, .directory-sidebar-panel,
        .dashboard-sidebar-panel, .notifications-sidebar-panel,
        .welcome-panel, .site-page-panel, [class*="-panel"]
    ),
    html body #container #sidebar[data-mobile-right-sidebar="1"] > :is(
        section, article, .panel, .card, .directory-sidebar-panel,
        .dashboard-sidebar-panel, .notifications-sidebar-panel,
        .welcome-panel, .site-page-panel, [class*="-panel"]
    ),
    html body #container .welcome-home-side[data-mobile-right-sidebar="1"] > :is(
        section, article, .panel, .card, .directory-sidebar-panel,
        .dashboard-sidebar-panel, .notifications-sidebar-panel,
        .welcome-panel, .site-page-panel, [class*="-panel"]
    ),
    html body [data-mobile-right-sidebar="1"] > :is(
        section, article, .panel, .card, .directory-sidebar-panel,
        .dashboard-sidebar-panel, .notifications-sidebar-panel,
        .welcome-panel, .site-page-panel, [class*="-panel"]
    ) {
        box-sizing: border-box !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 12px !important;
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }
    html body #content-sidebar[data-mobile-right-sidebar] > *,
    html body #sidebar[data-mobile-right-sidebar] > *,
    html body .welcome-home-side[data-mobile-right-sidebar] > * {
        max-width: 100% !important;
        min-width: 0 !important;
    }
}
@media (min-width: 1025px) {
    .mobile-right-sidebar-handle,
    .mobile-right-sidebar-backdrop,
    .mobile-right-sidebar-close { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    html body [data-mobile-right-sidebar] { transition: none !important; }
}