/* ==========================================
   COOKIE CONSENT
========================================== */

#cookieConsent{
    position:fixed;
    left:24px;
    bottom:24px;
    width:min(420px,calc(100vw - 32px));

    background:#ffffff;

    border:1px solid rgba(0,0,0,.08);
    border-radius:22px;

    padding:28px;

    box-shadow:
        0 18px 60px rgba(0,0,0,.15);

    z-index:999999;

    opacity:0;
    visibility:hidden;

    transform:translateY(30px);

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s;
}

#cookieConsent.show{

    opacity:1;
    visibility:visible;
    transform:translateY(0);

}

/* ==========================
Title
========================== */

#cookieConsent h3{

    margin:0 0 12px;

    font-size:26px;

    font-weight:600;

    line-height:1.2;

    color:#111;

}

/* ==========================
Text
========================== */

#cookieConsent p{

    margin:0;

    color:#666;

    font-size:15px;

    line-height:1.7;

}

/* ==========================
Buttons
========================== */

.cookie-buttons{

    display:flex;

    gap:12px;

    margin-top:28px;

    flex-wrap:wrap;

}

.cookie-buttons button{

    flex:1;

    min-width:140px;

    border:none;

    border-radius:999px;

    padding:15px 18px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    transition:.25s;

}

/* Accept */

#acceptCookies{

    background:#111;

    color:#fff;

}

#acceptCookies:hover{

    background:#000;

    transform:translateY(-2px);

}

/* Reject */

#rejectCookies{

    background:#f3f3f3;

    color:#111;

}

#rejectCookies:hover{

    background:#e8e8e8;

}

/* ==========================
Footer
========================== */

.cookie-footer{

    margin-top:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

.cookie-footer a{

    color:#666;

    font-size:13px;

    text-decoration:none;

}

.cookie-footer a:hover{

    color:#111;

}

.open-cookie-settings{

    cursor:pointer;

}

/* ==========================
Animation
========================== */

@keyframes consentFade{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

#cookieConsent.show{

    animation:consentFade .35s ease;

}

/* ==========================
Mobile
========================== */

@media(max-width:768px){

#cookieConsent{

    left:16px;

    right:16px;

    bottom:16px;

    width:auto;

    padding:22px;

}

#cookieConsent h3{

    font-size:22px;

}

.cookie-buttons{

    flex-direction:column;

}

.cookie-buttons button{

    width:100%;

}

}