/*
 * Cookiebot dialog on mobile: compact bottom sheet instead of a near full-screen popup.
 * Layout and size only. First view is lean: title, text, Deny / Customize / Allow all.
 * Customize opens the Details tab, which has the toggles, the cookie list and Allow selection.
 * Every control still exists, 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;
    }

    /* Details / About tabs: let the height chain shrink to the sheet. Without min-height: 0 the
       tab content is taller than the sheet, so the buttons fall outside it and are clipped.
       Now the content scrolls inside the sheet while header, tabs and buttons stay put. */
    #CybotCookiebotDialog .CybotCookiebotDialogContentWrapper {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }
    #CybotCookiebotDialogTabContent {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    #CybotCookiebotDialogTabContent > .CybotCookiebotScrollContainer {
        min-height: 0 !important;
        max-height: none !important;
    }
    #CybotCookiebotDialogTabContentDetails {
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Details tab, compact: slimmer tabs, tighter cards, smaller type and smaller switches
       (same .8 zoom as the switches on the first view used to have) */
    #CybotCookiebotDialog .CybotCookiebotDialogNavItemLink {
        padding: 9px 15px !important;
    }
    #CybotCookiebotDialog .CookieCard {
        padding: 10px 0 !important;
    }
    #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieTypeIntro {
        padding-top: 6px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerButton {
        font-size: 14px !important;
    }
    #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieContainerHeader .CybotCookiebotDialogBodyLevelButtonSliderWrapper {
        zoom: .8;
    }

    /* Lean first view: the four toggles, "Show details" and Allow selection are hidden, and
       Cookiebot's own Customize button (hidden by default) is shown instead, without its
       chevron. Customize opens the Details tab, where the toggles and Allow selection are
       visible again. Only applies while neither Details nor About is the active tab. */
    #CybotCookiebotDialog:not(:has(#CybotCookiebotDialogNavDetails.CybotCookiebotDialogActive)):not(:has(#CybotCookiebotDialogNavAbout.CybotCookiebotDialogActive)) #CybotCookiebotDialogBodyLevelButtonsRow,
    #CybotCookiebotDialog:not(:has(#CybotCookiebotDialogNavDetails.CybotCookiebotDialogActive)):not(:has(#CybotCookiebotDialogNavAbout.CybotCookiebotDialogActive)) #CybotCookiebotDialogBodyEdgeMoreDetails,
    #CybotCookiebotDialog:not(:has(#CybotCookiebotDialogNavDetails.CybotCookiebotDialogActive)):not(:has(#CybotCookiebotDialogNavAbout.CybotCookiebotDialogActive)) #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
        display: none !important;
    }
    #CybotCookiebotDialog:not(:has(#CybotCookiebotDialogNavDetails.CybotCookiebotDialogActive)):not(:has(#CybotCookiebotDialogNavAbout.CybotCookiebotDialogActive)) #CybotCookiebotDialogBodyLevelButtonCustomize {
        display: block !important;
    }
    #CybotCookiebotDialogBodyLevelButtonCustomize .CybotCookiebotDialogArrow {
        display: none !important;
    }
    /* No divider between the text and the buttons on the first view */
    #CybotCookiebotDialogBody .CybotCookiebotScrollContainer {
        border-bottom: 0 !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. No divider above the
       buttons, and Cookiebot's own 15px padding around them is dropped so they line up with
       the text and toggles above (saves vertical space in the sheet). */
    #CybotCookiebotDialogFooter {
        flex: 0 0 auto !important;
        padding: 8px 16px calc(8px + env(safe-area-inset-bottom)) !important;
        border-top: 0 !important;
    }
    #CybotCookiebotDialogFooter .CybotCookiebotScrollArea {
        padding: 0 !important;
    }
    /* Visual order: Deny, Customize / Allow selection, Allow all (primary on the right). DOM order is unchanged. */
    #CybotCookiebotDialogBodyButtonDecline {
        order: 1 !important;
    }
    #CybotCookiebotDialogBodyLevelButtonCustomize,
    #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
        order: 2 !important;
    }
    #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
        order: 3 !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;
    }
}