/**
 * Cookiebot (Swift / "bottom-v2" template) mobile overrides.
 *
 * On phones Cookiebot renders its consent dialog as a near full-screen
 * modal. These overrides restyle it into a slim bottom bar - two lines of
 * scrollable intro text, category toggles and the details link on one row,
 * action buttons on another - so it leaves the page content (hero CTA)
 * visible. CSS overrides are Cookiebot's officially supported
 * customization path:
 * https://support.cookiebot.com/hc/en-us/articles/360003922714
 *
 * Scoped to Cookiebot's own phone breakpoint (<601px); tablet and desktop
 * keep the stock layout. Everything needs !important because Cookiebot
 * injects its stylesheet at runtime, after this one.
 *
 * Only loaded alongside the https://consent.cookiebot.com/uc.js tag (see
 * the layouts that emit the id="Cookiebot" script).
 */

@media screen and (max-width: 600px) {
    /* Pin to the bottom edge as a full-width slim bar instead of a
       near-full-screen centered modal. */
    #CybotCookiebotDialog {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 40vh !important;
        border-radius: 10px 10px 0 0 !important;
        font-size: 11px !important;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2) !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }

    /* Drop the branding header row and the "This website uses cookies"
       heading on phones - every row counts. Branding stays on desktop. */
    #CybotCookiebotDialogHeader,
    #CybotCookiebotDialogBodyContentTitle {
        display: none !important;
    }

    /* Intro text: slightly larger than the rest of the bar, most of it
       visible, scrollable for the rest */
    #CybotCookiebotDialogBody .CybotCookiebotScrollContainer {
        max-height: 10.4em !important;
        border-bottom: none !important;
    }

    #CybotCookiebotDialogBodyContent {
        font-size: 13px !important;
        padding: 0.4em 0.85em 0.2em !important;
    }

    /* Toggles + "Show details" link share one row */
    #CybotCookiebotDialog .CybotCookiebotDialogBodyBottomWrapper {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        padding: 0 0.75em !important;
    }

    #CybotCookiebotDialogBodyLevelWrapper {
        width: auto !important;
        flex: 1 1 auto !important;
    }

    #CybotCookiebotDialogBodyLevelButtonsSelectPane {
        padding: 0 !important;
        border-bottom: none !important;
    }

    #CybotCookiebotDialogBodyFieldsetInnerContainer {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0 0.6em !important;
    }

    #CybotCookiebotDialogBodyLevelButtonsSelectPane
        .CybotCookiebotDialogBodyLevelButtonWrapper {
        width: auto !important;
        padding: 0 !important;
        justify-content: flex-start !important;
        gap: 0.2em !important;
    }

    #CybotCookiebotDialogBodyLevelButtonsSelectPane
        .CybotCookiebotDialogBodyLevelButtonDescription {
        font-size: 10px !important;
    }

    /* Shrink the 57x32px toggle switches */
    #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSliderWrapper {
        transform: scale(0.6);
        transform-origin: center left;
        margin: -5px -18px -5px 0 !important;
    }

    /* "Show details" link: inline at the end of the toggle row */
    #CybotCookiebotDialog #CybotCookiebotDialogBodyEdgeMoreDetails {
        margin: 0 0 0 auto !important;
        flex: 0 0 auto !important;
    }

    /* Action buttons: one compact horizontal row */
    #CybotCookiebotDialogFooter .CybotCookiebotScrollArea {
        padding: 0.4em 1em 0.6em !important;
    }

    #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonsWrapper {
        flex-direction: row !important;
        gap: 0.5em !important;
    }

    #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
        flex: 1 1 0 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0.6em 0.25em !important;
        white-space: normal !important;
    }
}

/* Short phone screens (e.g. iPhone SE): drop the inline toggle rows and
   clamp the text back to about two lines so the bar clears the hero CTA.
   Granular category choices remain available through "Show details". */
@media screen and (max-width: 600px) and (max-height: 700px) {
    #CybotCookiebotDialogBodyLevelWrapper {
        display: none !important;
    }

    #CybotCookiebotDialogBody .CybotCookiebotScrollContainer {
        max-height: 4.9em !important;
    }

    #CybotCookiebotDialog #CybotCookiebotDialogBodyEdgeMoreDetails {
        margin: 0.2em 0 !important;
    }
}