/* Cookie Consent Stylesheet
Overrides devrabiul/laravel-cookie-consent to match the frontend.
Loaded after the package stylesheet by layouts/shared/includes/cookie-consent-styles.blade.php.
20260730
*/

/* PALETTE /* ------------------------------------------------------------------- */
/*
 * Drawn from the frontend: --cc-* are the package's own custom properties, so
 * redefining them here restyles the banner, the preferences modal, and the toggles
 * together. Scoped to the two component roots rather than :root so the values hold
 * regardless of the theme preset the package writes onto the html element.
 */
.cookie-consent-root,
.cookie-preferences-modal {
    --geoapis-blue: #192C9E;
    --geoapis-blue-dark: #0E1958;
    --geoapis-blue-border: #122174;
    --geoapis-navy: #070A4A;
    --geoapis-navy-deep: #020529;
    --geoapis-outline-border: #1E2274;
    --geoapis-rule: rgba(7, 10, 74, 0.12);

    --cc-card-bg-color: #FFFFFF;
    --cc-card-text-color: #20252a;
    --cc-button-bg-color: var(--geoapis-blue);
    --cc-button-bg-color-rgb: 25, 44, 158;
    --cc-button-bg-opacity: 1;
    --cc-button-text-color: #FFFFFF;
    --cc-border-color: var(--geoapis-rule);

    font-family: Inter, sans-serif;
}

/* BANNER /* ------------------------------------------------------------------- */
/*
 * The bar layout already pins the banner to the bottom of the viewport and the
 * package slides it away by setting --cookie-consent-bottom on .cookie-consent-hide,
 * so position and offsets are deliberately left alone. Only the surface is restyled:
 * a white panel with the brand rule along the top, squared off and full bleed to sit
 * flush against the foot of the screen.
 */
.cookie-consent-root {
    background: var(--cc-card-bg-color);
    border-top: 3px solid var(--geoapis-blue);
    border-radius: 0;
    box-shadow: 0 -4px 24px rgba(2, 5, 41, 0.28);
}

.cookie-consent-content-container {
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
}

.cookie-consent-content-title {
    font-family: Inter, sans-serif;
    font-size: var(--font-size-1, 1.1875rem);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--geoapis-navy);
    padding-bottom: 0.35rem;
}

.cookie-consent-content-description {
    font-family: Inter, sans-serif;
    font-size: var(--font-size, 0.875rem);
    line-height: var(--line-height, 1.7143);
    color: var(--cc-card-text-color);
    opacity: 1;
}

.cookie-consent-content-description p {
    margin: 0;
}

/* BANNER BUTTONS /* ------------------------------------------------------------------- */
/*
 * Mirrors .btn-primary and .btn-outline-primary from the frontend button stylesheet
 * so the banner reads as part of the same interface.
 */
.cookie-consent-root .cookie-consent-button-container button {
    font-family: Inter, sans-serif;
    font-size: var(--font-size, 0.875rem);
    font-weight: 600;
    line-height: 1.4;
    padding: 0.45rem 1.1rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}

.cookie-consent-root .cookie-consent-button-container button:focus-visible {
    outline: 2px solid var(--geoapis-blue);
    outline-offset: 2px;
}

.cookie-consent-root .cookie-consent-button-container button.cookie-consent-accept {
    background-color: var(--geoapis-blue);
    border-color: var(--geoapis-blue-border);
    color: #FFFFFF;
}

.cookie-consent-root .cookie-consent-button-container button.cookie-consent-accept:hover,
.cookie-consent-root .cookie-consent-button-container button.cookie-consent-accept:focus {
    background-color: var(--geoapis-blue-dark);
    border-color: #13237C;
    color: #FFFFFF;
}

.cookie-consent-root .cookie-consent-button-container button.cookie-consent-reject,
.cookie-consent-root .cookie-consent-button-container button.preferences-btn {
    background-color: transparent;
    border-color: var(--geoapis-outline-border);
    color: var(--geoapis-navy);
}

.cookie-consent-root .cookie-consent-button-container button.cookie-consent-reject:hover,
.cookie-consent-root .cookie-consent-button-container button.cookie-consent-reject:focus,
.cookie-consent-root .cookie-consent-button-container button.preferences-btn:hover,
.cookie-consent-root .cookie-consent-button-container button.preferences-btn:focus {
    background-color: var(--geoapis-navy);
    border-color: var(--geoapis-outline-border);
    color: #FFFFFF;
}

/* POLICY LINKS /* ------------------------------------------------------------------- */
/*
 * Restyled to match footer.page-footer, which anchors the banner to the foot of the
 * page the same way the site footer does.
 */
.cookie-consent-root .cookie-consent-links-container {
    background: var(--geoapis-navy-deep);
    padding: 0.5rem 1.5rem;
}

.cookie-consent-root .cookie-consent-links-container a {
    font-family: Inter, sans-serif;
    font-size: 0.8rem;
    color: rgb(235, 235, 235);
}

.cookie-consent-root .cookie-consent-links-container a:hover,
.cookie-consent-root .cookie-consent-links-container a:focus {
    color: #FFFFFF;
    text-decoration: underline;
}

/* PREFERENCES MODAL /* ------------------------------------------------------------------- */
.cookie-preferences-modal-content {
    border-radius: 0.5rem;
    border-top: 3px solid var(--geoapis-blue);
}

.cookie-preferences-modal-header {
    border-bottom: 1px solid var(--geoapis-rule);
}

.cookie-preferences-modal-header h2 {
    font-family: Inter, sans-serif;
    font-size: var(--font-size-1, 1.1875rem);
    font-weight: 600;
    color: var(--geoapis-navy);
}

.cookie-preferences-modal p {
    font-family: Inter, sans-serif;
    font-size: var(--font-size, 0.875rem);
    line-height: var(--line-height, 1.7143);
    color: var(--cc-card-text-color);
    opacity: 1;
}

.cookie-preferences-modal .cookie-category {
    border-bottom: 1px solid var(--geoapis-rule);
}

.cookie-preferences-modal .cookie-category-header h3 {
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--geoapis-navy);
}

.cookie-preferences-modal-footer {
    border-top: 1px solid var(--geoapis-rule);
}

.cookie-preferences-modal-close {
    background: transparent;
    color: var(--geoapis-navy);
}

.cookie-preferences-modal-close:hover,
.cookie-preferences-modal-close:focus {
    background-color: rgba(7, 10, 74, 0.08);
    color: var(--geoapis-navy);
}

/* MODAL BUTTONS /* ------------------------------------------------------------------- */
/*
 * The modal footer marks every button .primary-button, so accept and save take the
 * filled treatment and reject falls back to the outline treatment, matching the
 * emphasis the banner gives the same three actions.
 */
.cookie-preferences-modal .primary-button {
    font-family: Inter, sans-serif;
    font-size: var(--font-size, 0.875rem);
    font-weight: 600;
    padding: 0.45rem 1.1rem;
    border: 1px solid var(--geoapis-blue-border);
    border-radius: 0.375rem;
    background-color: var(--geoapis-blue);
    color: #FFFFFF;
    transition: all 0.2s ease-in-out;
}

.cookie-preferences-modal .primary-button:hover,
.cookie-preferences-modal .primary-button:focus {
    background-color: var(--geoapis-blue-dark);
    border-color: #13237C;
    color: #FFFFFF;
}

.cookie-preferences-modal .primary-button.cookie-consent-reject {
    background-color: transparent;
    border-color: var(--geoapis-outline-border);
    color: var(--geoapis-navy);
}

.cookie-preferences-modal .primary-button.cookie-consent-reject:hover,
.cookie-preferences-modal .primary-button.cookie-consent-reject:focus {
    background-color: var(--geoapis-navy);
    border-color: var(--geoapis-outline-border);
    color: #FFFFFF;
}

.cookie-preferences-modal .primary-button:focus-visible {
    outline: 2px solid var(--geoapis-blue);
    outline-offset: 2px;
}

/* TOGGLES /* ------------------------------------------------------------------- */
.cookie-preferences-modal .cookie-toggle input:checked + .cookie-toggle-slider {
    background-color: var(--geoapis-blue);
}

.cookie-preferences-modal .cookie-toggle input:focus-visible + .cookie-toggle-slider {
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--geoapis-blue);
}

/* RESPONSIVE /* ------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .cookie-consent-content-container {
        padding: 1rem;
    }

    .cookie-consent-root .cookie-consent-links-container {
        padding: 0.5rem 1rem;
    }
}