#cookie-overlay {

    position:fixed;
    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;
    visibility:hidden;

    transition:.4s;

    z-index:9998;

}



#cookie-overlay.active {

    opacity:1;
    visibility:visible;

}




.cookie-banner {


    position:fixed;

    left:50%;
    bottom:25px;

    transform:
    translateX(-50%)
    translateY(50px);


    width:min(95%,1100px);


    background:
    linear-gradient(
    135deg,
    #07111f,
    #111827
    );


    color:white;


    border-radius:22px;


    padding:30px;


    box-shadow:
    0 20px 60px rgba(0,0,0,.45);



    opacity:0;
    visibility:hidden;


    transition:.5s;


    z-index:9999;


    border:
    1px solid rgba(255,255,255,.1);

}




.cookie-banner.active {

    opacity:1;

    visibility:visible;


    transform:
    translateX(-50%)
    translateY(0);

}





.cookie-content {


    display:flex;

    align-items:center;

    justify-content:space-between;


    gap:30px;


}





.cookie-text h3 {


    margin:0 0 12px;


    font-family:
    Georgia,
    serif;


    font-size:26px;


}




.cookie-text p {


    color:#d1d5db;

    line-height:1.6;

    max-width:650px;


}




.cookie-text a {


    color:#d4af37;

    text-decoration:none;


}





.cookie-buttons {


    display:flex;

    gap:12px;


}




.cookie-btn {


    padding:12px 24px;


    border-radius:50px;


    cursor:pointer;


    font-size:14px;


    transition:.3s;


}



.primary {


    background:#d4af37;

    color:#111;

    border:none;


}




.primary:hover {

    transform:translateY(-2px);

}




.secondary {


    background:white;

    color:#111;

    border:none;


}



.outline {


    background:transparent;

    color:white;

    border:
    1px solid rgba(255,255,255,.4);


}






/* MODAL */


.cookie-modal {


    position:fixed;

    inset:0;


    display:flex;

    justify-content:center;

    align-items:center;


    opacity:0;

    visibility:hidden;


    z-index:10000;


}





.cookie-modal.active {


    opacity:1;

    visibility:visible;


}





.cookie-modal-box {


    background:white;

    color:#111;


    width:min(90%,450px);


    padding:35px;


    border-radius:20px;


    position:relative;


}





.cookie-close {


    position:absolute;


    right:20px;

    top:15px;


    border:none;

    background:none;


    font-size:30px;

    cursor:pointer;


}





.cookie-option {


    display:flex;

    justify-content:space-between;


    padding:18px 0;


    border-bottom:1px solid #ddd;


}





.save {


    width:100%;

    margin-top:20px;


}





@media(max-width:768px){


.cookie-content {


    flex-direction:column;

    align-items:flex-start;


}


.cookie-buttons {


    width:100%;

    flex-direction:column;


}


.cookie-btn {


    width:100%;


}


}