/**
 * E-JEEP — compact layout for vanilla-cookieconsent v3 on small screens.
 * Loaded after cookieconsent.css (see view/components/cookie_consent_head.php).
 */

/* Above landing intro overlay (index.css z-index: 10000000) */
#cc-main {
    z-index: 10000001;
}

@media (max-width: 599.98px) {
    #cc-main {
        --cc-modal-margin: 0.45rem;
        --cc-modal-border-radius: 0.4rem;
        --cc-btn-border-radius: 0.32rem;
        font-size: 13px;
    }

    /* Full-width bottom sheet instead of a narrow floating card */
    #cc-main .cm {
        max-width: none;
        width: auto;
        left: var(--cc-modal-margin);
        right: var(--cc-modal-margin);
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #cc-main .cm--bottom {
        bottom: max(0.45rem, env(safe-area-inset-bottom, 0px));
    }

    #cc-main .cm__btn--close {
        height: 36px;
        width: 36px;
    }

    #cc-main .cm__texts {
        padding: 0.5rem 0 0;
    }

    #cc-main .cm__title,
    #cc-main .cm__desc {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    #cc-main .cm__title {
        font-size: 0.95em;
        padding-right: 2.35rem;
    }

    #cc-main .cm__title + .cm__desc {
        margin-top: 0.45em;
    }

    #cc-main .cm__desc {
        font-size: 0.8em;
        line-height: 1.32;
        max-height: min(24vh, 7.75rem);
        padding-bottom: 0.45em;
    }

    #cc-main .cm__btns,
    #cc-main .cm__links {
        padding: 0.4rem 0.55rem;
    }

    #cc-main .cm__btn {
        min-height: 34px;
        font-size: 0.74em;
        padding: 0.32em 0.45em;
    }

    #cc-main .cm__btn + .cm__btn,
    #cc-main .cm__btn-group + .cm__btn-group {
        margin-top: 0.26rem;
    }

    /* Primary pair side-by-side; “Manage preferences” full width below */
    #cc-main .cm__btn-group {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 0.26rem;
    }

    #cc-main .cm__btn-group + .cm__btn-group {
        margin-top: 0.26rem !important;
    }

    #cc-main .cm__btn-group .cm__btn {
        flex: 1 1 0;
        min-width: 0;
    }

    #cc-main .cm__btn-group + .cm__btn-group .cm__btn {
        flex: 0 0 100%;
        width: 100%;
    }

    /* Preferences modal: cap height so it does not dominate the screen */
    #cc-main .pm {
        max-height: calc(
            100vh - 2 * var(--cc-modal-margin) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px)
        );
        max-height: calc(
            100dvh - 2 * var(--cc-modal-margin) - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px)
        );
    }

    #cc-main .pm__body {
        max-height: min(50vh, 20rem);
    }

    #cc-main .pm__footer,
    #cc-main .pm__header {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }
}