/* --- Mobile-first improvements (desktop untouched) --- */

/* Safer bottom padding for notched phones */
#cookie-consent-panel .container {
    padding-bottom: calc(env(safe-area-inset-bottom) + .25rem);
}

/* Improve link tap target */
#cookie-consent-panel .btn.btn-link {
    padding: .25rem 0;
}

/* Let long labels wrap nicely next to the switch */
#cookie-consent-panel .custom-control-label {
    white-space: normal; /* allow wrapping */
    line-height: 1.35;
}

/* Ensure the switch row has a decent tap area */
#cookie-consent-panel .custom-control {
    min-height: 44px; /* iOS/Material recommended target size */
    align-items: center;
}

/* Keep the details box readable on small screens */
#cookie-consent-categories .border.p-2 {
    padding: .5rem .625rem !important;
}

/* Default action bar stays flexible on larger screens */
#cookie-consent-panel .cc-actions {
    display: flex;
    flex-wrap: wrap;
}

/* --- Phones & small devices --- */
@media (max-width: 767.98px) {
    /* Slightly smaller overall text (already set), tighten spacing a bit */
    .cookie-consent-wrapper {
        font-size: .9rem;
    }

    /* Stack columns vertically for better reading flow */
    #cookie-consent-panel .row {
        display: block; /* avoid side-by-side columns on mobile */
    }

    #cookie-consent-panel .col-md-8,
    #cookie-consent-panel .col-md-4 {
        width: 100%;
        max-width: 100%;
    }

    /* Turn the action buttons into a tidy grid */
    #cookie-consent-panel .cc-actions {
        display: grid;
        grid-template-columns: 1fr; /* single column by default */
        gap: .5rem;
        width: 100%;
        justify-content: stretch;
    }

        /* Make buttons full-width & remove desktop margins that cause wrap gaps */
        #cookie-consent-panel .cc-actions .btn {
            white-space: nowrap;
            width: 100%;
            margin-right: 0 !important; /* overrides .mr-2 on the buttons */
            line-height: 1.35;
            padding: .5rem .75rem;
        }

    /* Slightly smaller buttons on very narrow devices */
    @media (max-width: 430px) {
        #cookie-consent-panel .cc-actions .btn {
            font-size: .9rem;
            padding: .45rem .65rem;
        }
    }

    /* On “wider small” phones, show two columns with Accept spanning both */
    @media (min-width: 400px) and (max-width: 767.98px) {
        #cookie-consent-panel .cc-actions {
            grid-template-columns: 1fr 1fr;
        }

        #cookie-consent-panel #cc-accept {
            grid-column: 1 / -1; /* Accept All gets full-width emphasis */
        }
    }

    /* Keep the Close link visible and aligned after opening from footer */
    #cookie-consent-panel #cc-close {
        display: inline-block !important;
        align-self: flex-start; /* move below buttons naturally */
        margin-top: .25rem;
    }

    /* Make the categories collapse feel less cramped */
    #cookie-consent-categories {
        margin-top: .5rem !important;
    }
}

/* Ultra-narrow fallback: allow buttons to stretch if needed */
@media (max-width: 360px) {
    #cookie-consent-panel .cc-actions .btn {
        font-size: .85rem;
        padding: .4rem .55rem;
    }
}

/* Accessibility: keep visible focus for keyboard users */
#cookie-consent-panel .btn:focus,
#cookie-consent-panel a:focus,
#cookie-consent-panel .custom-control-input:focus ~ .custom-control-label::before {
    outline: 2px solid rgba(13,110,253,.6);
    outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    #cookie-consent-panel,
    #cookie-consent-panel * {
        transition: none !important;
        animation: none !important;
    }
}