/*
 * 26horses non-blocking cookie banner v3
 *
 * Install as:
 * public_html/include/cookie-banner.css
 */

/*
 * Hide any legacy centered consent popup if an old cached
 * script somehow remains active.
 */
#cc-overlay,
.cc-overlay {
    display: none !important;
}

:root {
    --cookie-banner-background:
        rgba(4, 13, 24, 0.98);

    --cookie-banner-border:
        rgba(91, 184, 255, 0.46);

    --cookie-banner-text:
        #eef8ff;

    --cookie-banner-body:
        #bed4e6;

    --cookie-banner-shadow:
        0 -18px 58px
        rgba(0, 0, 0, 0.54);
}


/****************************************
   BOTTOM BANNER
 ****************************************/

#horses-cookie-banner {
    position: fixed !important;

    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    z-index: 2147483646;

    width: 100%;

    margin: 0;

    padding:
        14px
        max(
            18px,
            calc(
                18px +
                env(safe-area-inset-right)
            )
        )
        max(
            14px,
            calc(
                14px +
                env(safe-area-inset-bottom)
            )
        )
        max(
            18px,
            calc(
                18px +
                env(safe-area-inset-left)
            )
        );

    color:
        var(--cookie-banner-text);

    background:
        linear-gradient(
            180deg,
            rgba(15, 40, 65, 0.98),
            var(--cookie-banner-background)
        );

    border-top:
        1px solid
        var(--cookie-banner-border);

    box-shadow:
        var(--cookie-banner-shadow);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

#horses-cookie-banner[hidden] {
    display: none !important;
}

.horses-cookie-banner-inner {
    width: min(1180px, 100%);

    margin: 0 auto;

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

    align-items: center;

    gap: 18px 28px;
}


/****************************************
   MESSAGE
 ****************************************/

.horses-cookie-message {
    min-width: 0;

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

    align-items: center;

    gap: 13px;
}

.horses-cookie-icon {
    display: block;

    width: 46px;
    height: 46px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 12px
            rgba(90, 200, 255, 0.20)
        );
}

.horses-cookie-copy {
    min-width: 0;
}

.horses-cookie-title {
    margin: 0 0 4px;

    color: #ffffff;

    font-size: 1rem;
    font-weight: 700;

    line-height: 1.2;
    letter-spacing: 0.01em;
}

.horses-cookie-description {
    margin: 0;

    color:
        var(--cookie-banner-body);

    font-size: 0.88rem;
    font-weight: 400;

    line-height: 1.48;
}

.horses-cookie-policy-link {
    color: #b1e7ff;

    font-weight: 650;

    text-underline-offset: 3px;
}

.horses-cookie-policy-link:hover,
.horses-cookie-policy-link:focus-visible {
    color: #ffffff;
}


/****************************************
   BUTTONS
 ****************************************/

.horses-cookie-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;
}

.horses-cookie-button {
    min-height: 44px;

    padding: 10px 16px;

    border:
        1px solid
        rgba(112, 209, 255, 0.58);

    border-radius: 11px;

    color: #ffffff;

    font: inherit;
    font-size: 0.90rem;
    font-weight: 600;

    line-height: 1.25;
    letter-spacing: 0.015em;

    text-align: center;

    cursor: pointer;

    background:
        linear-gradient(
            145deg,
            rgba(47, 159, 218, 0.34),
            rgba(13, 56, 88, 0.52)
        );

    transition:
        transform 150ms ease,
        border-color 150ms ease,
        background-color 150ms ease;
}

.horses-cookie-button:hover,
.horses-cookie-button:focus-visible {
    border-color: #d1f3ff;

    background:
        linear-gradient(
            145deg,
            rgba(62, 183, 242, 0.48),
            rgba(19, 73, 111, 0.62)
        );

    transform:
        translateY(-1px);
}

.horses-cookie-button-secondary {
    border-color:
        rgba(159, 194, 215, 0.42);

    color: #dceaf3;

    background:
        rgba(15, 34, 50, 0.68);
}

.horses-cookie-button-secondary:hover,
.horses-cookie-button-secondary:focus-visible {
    border-color:
        rgba(192, 224, 242, 0.78);

    background:
        rgba(28, 58, 82, 0.82);
}

.horses-cookie-button:focus-visible,
#horses-cookie-settings:focus-visible,
.horses-cookie-policy-link:focus-visible {
    outline:
        3px solid
        rgba(111, 211, 255, 0.42);

    outline-offset: 3px;
}


/****************************************
   SETTINGS BUTTON
 ****************************************/

#horses-cookie-settings {
    position: fixed;

    left:
        calc(
            12px +
            env(safe-area-inset-left)
        );

    bottom:
        calc(
            12px +
            env(safe-area-inset-bottom)
        );

    z-index: 2147483645;

    min-height: 38px;

    padding: 7px 12px;

    border:
        1px solid
        rgba(91, 184, 255, 0.34);

    border-radius: 999px;

    color: #cbeeff;

    font: inherit;
    font-size: 0.76rem;
    font-weight: 650;

    line-height: 1.2;

    cursor: pointer;

    background:
        rgba(5, 18, 31, 0.90);

    box-shadow:
        0 8px 26px
        rgba(0, 0, 0, 0.38);
}

#horses-cookie-settings:hover,
#horses-cookie-settings:focus-visible {
    border-color:
        rgba(132, 220, 255, 0.82);

    color: #ffffff;
}

#horses-cookie-settings[hidden] {
    display: none !important;
}


/****************************************
   TABLETS
 ****************************************/

@media (
    max-width: 980px
) {
    .horses-cookie-banner-inner {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .horses-cookie-actions {
        justify-content: stretch;
    }

    .horses-cookie-button {
        flex: 1 1 220px;
    }
}


/****************************************
   PHONES
 ****************************************/

@media (
    orientation: portrait
) and (
    max-width: 599px
) {
    #horses-cookie-banner {
        padding:
            14px
            calc(
                12px +
                env(safe-area-inset-right)
            )
            calc(
                12px +
                env(safe-area-inset-bottom)
            )
            calc(
                12px +
                env(safe-area-inset-left)
            );
    }

    .horses-cookie-banner-inner {
        gap: 13px;
    }

    .horses-cookie-message {
        grid-template-columns: 1fr;

        gap: 8px;

        text-align: center;
    }

    .horses-cookie-icon {
        width: 44px;
        height: 44px;

        margin: 0 auto;
    }

    .horses-cookie-title {
        font-size: 0.98rem;
    }

    .horses-cookie-description {
        font-size: 0.84rem;

        line-height: 1.45;
    }

    .horses-cookie-actions {
        display: grid;
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .horses-cookie-button {
        width: 100%;
        min-height: 46px;

        padding: 11px 14px;

        font-size: 0.91rem;
    }
}


/****************************************
   SHORT LANDSCAPE PHONES
 ****************************************/

@media (
    orientation: landscape
) and (
    max-height: 560px
) {
    #horses-cookie-banner {
        padding:
            9px
            calc(
                14px +
                env(safe-area-inset-right)
            )
            calc(
                9px +
                env(safe-area-inset-bottom)
            )
            calc(
                14px +
                env(safe-area-inset-left)
            );
    }

    .horses-cookie-banner-inner {
        gap: 10px 18px;
    }

    .horses-cookie-icon {
        width: 36px;
        height: 36px;
    }

    .horses-cookie-title {
        font-size: 0.90rem;
    }

    .horses-cookie-description {
        font-size: 0.78rem;

        line-height: 1.35;
    }

    .horses-cookie-button {
        min-height: 38px;

        padding: 8px 12px;

        font-size: 0.80rem;
    }
}


/****************************************
   REDUCED MOTION
 ****************************************/

@media (
    prefers-reduced-motion: reduce
) {
    .horses-cookie-button {
        transition: none;
    }
}