/*
 * Cookiebot dialog on mobile: compact bottom sheet instead of a near full-screen popup.
 * Layout and size only. Every control stays (Allow all, Allow selection, Deny, the four
 * toggles, Show details), Deny keeps the same size and weight as Allow all, and the
 * Cookiebot branding is only shrunk, not hidden. Desktop is untouched.
 * Version the filename when this changes: web/.htaccess caches static assets as immutable.
 */
@media (max-width: 767.98px) {

    /* Sheet: pinned to the bottom, capped height, internal scroll */
    #CybotCookiebotDialog {
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: 46vh !important;
        max-height: 46svh !important;
        border-radius: 14px 14px 0 0 !important;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, .18) !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Details / declaration tabs need room: let the sheet grow there */
    #CybotCookiebotDialog:has(#CybotCookiebotDialogNavDetails.CybotCookiebotDialogActive),
    #CybotCookiebotDialog:has(#CybotCookiebotDialogNavAbout.CybotCookiebotDialogActive),
    #CybotCookiebotDialog:has(#CybotCookiebotDialogNavDeclaration.CybotCookiebotDialogActive) {
        max-height: 88vh !important;
        max-height: 88svh !important;
    }

    /* Do not dim or block the page behind the sheet */
    #CybotCookiebotDialogBodyUnderlay {
        display: none !important;
        pointer-events: none !important;
    }

    /* Header: slim row, logos shrunk */
    #CybotCookiebotDialogHeader {
        flex: 0 0 auto !important;
        padding: 8px 16px !important;
        min-height: 0 !important;
    }
    #CybotCookiebotDialogHeader img,
    #CybotCookiebotDialogHeader svg,
    #CybotCookiebotDialogPoweredbyLink img {
        max-height: 22px !important;
        width: auto !important;
    }

    /* Body scrolls, footer buttons stay visible */
    #CybotCookiebotDialog form,
    #CybotCookiebotDialogBody {
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 8px 16px !important;
    }
    #CybotCookiebotDialogBodyContentTitle {
        font-size: 15px !important;
        line-height: 1.3 !important;
        margin: 0 0 4px !important;
        padding: 0 !important;
    }
    #CybotCookiebotDialogBodyContentText {
        font-size: 13px !important;
        line-height: 1.4 !important;
        padding: 0 !important;
    }
    #CybotCookiebotDialogBodyContent {
        padding: 0 !important;
        margin: 0 0 8px !important;
    }

    /* Toggles: 2 x 2 grid, each cell fills its column: label left, switch right, 4px min gap */
    #CybotCookiebotDialogBodyLevelButtonsRow,
    #CybotCookiebotDialogBodyLevelButtonsSelectPane {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px 20px !important;
        width: 100% !important;
        padding: 8px 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }
    #CybotCookiebotDialogBodyLevelButtonsRow > #CybotCookiebotDialogBodyLevelButtonsSelectPane {
        display: contents !important;
    }
    /* Cookiebot wraps the four toggles in two extra divs (an anonymous one and
       #CybotCookiebotDialogBodyFieldsetInnerContainer). Without this the grid gets a single
       item and the toggles stack in one column. Flatten both so each toggle is a grid cell. */
    #CybotCookiebotDialogBodyLevelButtonsSelectPane > div,
    #CybotCookiebotDialogBodyFieldsetInnerContainer {
        display: contents !important;
    }
    #CybotCookiebotDialogBodyLevelButtonsSelectPane > *,
    #CybotCookiebotDialogBodyLevelButtonsRow > * {
        margin: 0 !important;
        padding: 0 !important;
    }
    #CybotCookiebotDialogBodyLevelButtonsSelectPane .CybotCookiebotDialogBodyLevelButtonWrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 6px 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, .1) !important;
        font-size: 13px !important;
    }
    #CybotCookiebotDialogBodyLevelButtonsSelectPane .CybotCookiebotDialogBodyLevelButtonWrapper > label:first-child,
    #CybotCookiebotDialogBodyLevelButtonsSelectPane .CybotCookiebotDialogBodyLevelButtonLabel {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: 13px !important;
    }
    #CybotCookiebotDialogBodyLevelButtonsSelectPane .CybotCookiebotDialogBodyLevelButtonSliderWrapper {
        flex: 0 0 auto !important;
        margin: 0 !important;
        zoom: .8;
    }

    /* "Show details" link: small, inline */
    #CybotCookiebotDialogBodyEdgeMoreDetails {
        margin: 0 !important;
        padding: 4px 0 !important;
    }
    #CybotCookiebotDialogBodyEdgeMoreDetailsLink {
        font-size: 13px !important;
    }

    /* Footer: three equal buttons on one row, same size, same weight */
    #CybotCookiebotDialogFooter {
        flex: 0 0 auto !important;
        padding: 8px 16px calc(8px + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid rgba(0, 0, 0, .1) !important;
    }
    #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonsWrapper,
    #CybotCookiebotDialogBodyButtonsWrapper {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #CybotCookiebotDialogBodyButtonsWrapper .CybotCookiebotDialogBodyButton,
    #CybotCookiebotDialogBodyButtonsWrapper button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 8px 4px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
    }
}