/*
 * HighPassCV consent-safe analytics interface
 * Compact premium design.
 * Google Analytics remains unloaded until explicit acceptance.
 */

:root {
    --hp-consent-navy:
        #002d62;

    --hp-consent-navy-dark:
        #001f45;

    --hp-consent-gold:
        #c99f4a;

    --hp-consent-gold-soft:
        #f4e7ca;

    --hp-consent-ink:
        #182233;

    --hp-consent-muted:
        #667085;

    --hp-consent-line:
        #d7e0ea;

    --hp-consent-focus:
        #175cd3;
}

.hp-consent-banner {
    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    left:
        auto;

    z-index:
        2147483000;

    display:
        none;

    width:
        min(
            460px,
            calc(
                100% -
                32px
            )
        );

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            0,
            45,
            98,
            0.16
        );

    border-radius:
        20px;

    background:
        rgba(
            255,
            255,
            255,
            0.985
        );

    color:
        var(
            --hp-consent-ink
        );

    box-shadow:
        0 24px 70px
        rgba(
            0,
            31,
            69,
            0.25
        );

    font-family:
        Inter,
        Arial,
        sans-serif;

    backdrop-filter:
        blur(
            16px
        );
}

.hp-consent-banner::before {
    display:
        block;

    width:
        100%;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            var(
                --hp-consent-navy
            ),
            var(
                --hp-consent-gold
            )
        );

    content:
        "";
}

.hp-consent-banner.is-visible {
    display:
        block;

    animation:
        hp-consent-enter
        0.3s
        ease-out;
}

.hp-consent-banner__body {
    display:
        grid;

    gap:
        15px;

    padding:
        18px 19px 17px;
}

.hp-consent-banner__heading {
    display:
        grid;

    grid-template-columns:
        40px
        minmax(
            0,
            1fr
        );

    gap:
        12px;

    align-items:
        start;
}

.hp-consent-banner__icon {
    display:
        grid;

    width:
        40px;

    height:
        40px;

    place-items:
        center;

    border:
        1px solid
        rgba(
            0,
            45,
            98,
            0.10
        );

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            #eef5fc,
            #ffffff
        );

    color:
        var(
            --hp-consent-navy
        );

    font-size:
        1rem;

    font-weight:
        900;
}

.hp-consent-banner h2 {
    margin:
        0 0 5px;

    color:
        var(
            --hp-consent-navy
        );

    font-size:
        1rem;

    letter-spacing:
        -0.01em;

    line-height:
        1.35;
}

.hp-consent-banner p {
    margin:
        0;

    color:
        var(
            --hp-consent-muted
        );

    font-size:
        0.79rem;

    line-height:
        1.58;
}

.hp-consent-banner a {
    color:
        var(
            --hp-consent-navy
        );

    font-weight:
        800;

    text-decoration:
        none;
}

.hp-consent-banner a:hover {
    text-decoration:
        underline;

    text-underline-offset:
        3px;
}

.hp-consent-banner__meta {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    align-items:
        center;
}

.hp-consent-status {
    display:
        inline-flex;

    gap:
        5px;

    align-items:
        center;

    padding:
        6px 9px;

    border:
        1px solid
        #e2e8f0;

    border-radius:
        999px;

    background:
        #f8fafc;

    color:
        var(
            --hp-consent-muted
        );

    font-size:
        0.67rem;
}

.hp-consent-status strong {
    color:
        var(
            --hp-consent-ink
        );
}

.hp-consent-banner__privacy-signal {
    display:
        none;

    padding:
        6px 9px;

    border:
        1px solid
        #d7e6f7;

    border-radius:
        999px;

    background:
        #f2f7fd;

    color:
        #344054;

    font-size:
        0.66rem;

    line-height:
        1.4;
}

.hp-consent-banner__privacy-signal.is-visible {
    display:
        inline-flex;
}

.hp-consent-banner__actions {
    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            0,
            1.12fr
        );

    gap:
        9px;
}

.hp-consent-button {
    min-height:
        43px;

    padding:
        10px 12px;

    border:
        1px solid
        var(
            --hp-consent-navy
        );

    border-radius:
        11px;

    font:
        inherit;

    font-size:
        0.76rem;

    font-weight:
        850;

    cursor:
        pointer;

    transition:
        transform
        0.18s
        ease,
        box-shadow
        0.18s
        ease,
        background
        0.18s
        ease;
}

.hp-consent-button:hover {
    transform:
        translateY(
            -1px
        );
}

.hp-consent-button:focus-visible,
.hp-consent-settings:focus-visible {
    outline:
        3px solid
        rgba(
            23,
            92,
            211,
            0.28
        );

    outline-offset:
        3px;
}

.hp-consent-button--reject {
    background:
        #ffffff;

    color:
        var(
            --hp-consent-navy
        );
}

.hp-consent-button--reject:hover {
    background:
        #f4f7fb;
}

.hp-consent-button--accept {
    border-color:
        var(
            --hp-consent-gold
        );

    background:
        linear-gradient(
            135deg,
            #d6ad5c,
            var(
                --hp-consent-gold
            )
        );

    color:
        #10233f;

    box-shadow:
        0 8px 20px
        rgba(
            201,
            159,
            74,
            0.24
        );
}

.hp-consent-button--accept:hover {
    box-shadow:
        0 11px 25px
        rgba(
            201,
            159,
            74,
            0.34
        );
}

.hp-consent-settings {
    position:
        fixed;

    right:
        16px;

    bottom:
        16px;

    z-index:
        2147482999;

    display:
        none;

    min-height:
        39px;

    align-items:
        center;

    gap:
        7px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(
            0,
            45,
            98,
            0.18
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    color:
        var(
            --hp-consent-navy
        );

    box-shadow:
        0 9px 27px
        rgba(
            0,
            45,
            98,
            0.14
        );

    font:
        inherit;

    font-size:
        0.7rem;

    font-weight:
        850;

    cursor:
        pointer;

    backdrop-filter:
        blur(
            12px
        );
}

.hp-consent-settings.is-visible {
    display:
        inline-flex;
}

@keyframes
hp-consent-enter {
    from {
        opacity:
            0;

        transform:
            translateY(
                12px
            )
            scale(
                0.985
            );
    }

    to {
        opacity:
            1;

        transform:
            translateY(
                0
            )
            scale(
                1
            );
    }
}

@media (
    max-width:
        620px
) {
    .hp-consent-banner {
        right:
            10px;

        bottom:
            10px;

        left:
            10px;

        width:
            auto;

        border-radius:
            17px;
    }

    .hp-consent-banner__body {
        padding:
            16px;
    }

    .hp-consent-banner__actions {
        grid-template-columns:
            1fr;
    }

    .hp-consent-button--accept {
        grid-row:
            1;
    }

    .hp-consent-button--reject {
        grid-row:
            2;
    }
}

@media (
    prefers-reduced-motion:
        reduce
) {
    .hp-consent-banner.is-visible {
        animation:
            none;
    }

    .hp-consent-button {
        transition:
            none;
    }
}