/*
 * Cookiebot consent banner - compact look.
 *
 * Scoped to `.CybotCompact` on purpose: when the visitor opens
 * "Customize", Cookiebot drops that class and switches the same element
 * to its large popup template, which must keep its native layout.
 * `!important` is needed because Cookiebot injects its own stylesheet
 * and inline styles after the theme's CSS.
 */

#CybotCookiebotDialog.CybotCompact {
    font-size: 13px !important;
    letter-spacing: normal !important;
}

#CybotCookiebotDialog.CybotCompact #CybotCookiebotDialogHeader {
    padding: 6px 12px !important;
}

#CybotCookiebotDialog.CybotCompact #CybotCookiebotDialogPoweredbyCybot svg {
    height: 18px !important;
    width: auto !important;
}

#CybotCookiebotDialog.CybotCompact #CybotCookiebotDialogBodyContent {
    padding: 8px 12px 2px !important;
}

#CybotCookiebotDialog.CybotCompact #CybotCookiebotDialogBodyContentTitle {
    font-size: 13px !important;
    line-height: 18px !important;
    margin-bottom: 4px !important;
}

#CybotCookiebotDialog.CybotCompact #CybotCookiebotDialogBodyContentText,
#CybotCookiebotDialog.CybotCompact #CybotCookiebotDialogBodyContentText * {
    font-size: 13px !important;
    line-height: 18px !important;
}

#CybotCookiebotDialog.CybotCompact #CybotCookiebotDialogBodyContentTextToggle {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 12px !important;
}

#CybotCookiebotDialog.CybotCompact #CybotCookiebotDialogFooter .CybotCookiebotScrollArea {
    padding: 4px 12px 10px !important;
}

#CybotCookiebotDialog.CybotCompact #CybotCookiebotDialogBodyButtonsWrapper {
    gap: 6px !important;
}

#CybotCookiebotDialog.CybotCompact .CybotCookiebotDialogBodyButton {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
}

/* Desktop: small card pinned to the bottom right corner */
@media (min-width: 768px) {
    #CybotCookiebotDialog.CybotCompact {
        width: 340px !important;
        max-width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        top: auto !important;
        left: auto !important;
        right: 12px !important;
        bottom: 12px !important;
        transform: none !important;
    }
}

/* Mobile: full width strip at the bottom, buttons side by side */
@media (max-width: 767px) {
    #CybotCookiebotDialog.CybotCompact {
        max-height: 60vh !important;
    }

    #CybotCookiebotDialog.CybotCompact #CybotCookiebotDialogBodyButtonsWrapper {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    #CybotCookiebotDialog.CybotCompact .CybotCookiebotDialogBodyButton {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* "Allow all" gets the full row, the other two share the second row */
    #CybotCookiebotDialog.CybotCompact #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
        flex-basis: 100% !important;
    }
}