/* ==========================================================
   AmazeFlip Cookie System
   Modern Responsive Design
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#0d6efd;
    --dark:#111827;
    --white:#ffffff;
    --text:#444;
    --border:#e5e7eb;
    --shadow:0 20px 60px rgba(0,0,0,.18);

}

#cookieOverlay{

    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    display:none;
    z-index:9998;

}

#cookieBanner{

    position:fixed;

    left:25px;
    right:25px;
    bottom:25px;

    background:#fff;

    border-radius:20px;

    box-shadow:var(--shadow);

    display:none;

    justify-content:space-between;

    align-items:center;

    padding:28px;

    gap:30px;

    z-index:9999;

    animation:cookieUp .45s ease;

}

@keyframes cookieUp{

from{

opacity:0;
transform:translateY(60px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.cookie-left{

display:flex;

align-items:flex-start;

gap:20px;

flex:1;

}

.cookie-icon{

width:65px;

height:65px;

border-radius:50%;

background:#fff4d4;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

flex-shrink:0;

}

.cookie-content h3{

font-size:23px;

margin-bottom:12px;

color:#111;

}

.cookie-content p{

font-size:15px;

line-height:1.8;

color:#555;

margin-bottom:10px;

}

.cookie-content a{

color:var(--primary);

font-weight:600;

text-decoration:none;

}

.cookie-right{

display:flex;

gap:12px;

flex-wrap:wrap;

}

.cookie-btn{

padding:13px 24px;

border-radius:10px;

border:none;

cursor:pointer;

font-size:15px;

font-weight:700;

transition:.3s;

}

.cookie-btn.primary{

background:var(--primary);

color:#fff;

}

.cookie-btn.primary:hover{

transform:translateY(-2px);

}

.cookie-btn.secondary{

background:#ef4444;

color:#fff;

}

.cookie-btn.secondary:hover{

background:#dc2626;

}

.cookie-btn.outline{

background:#fff;

border:2px solid var(--primary);

color:var(--primary);

}

.cookie-btn.outline:hover{

background:var(--primary);

color:#fff;

}






/* MODAL */

#cookieModal{

position:fixed;

inset:0;

display:none;

align-items:center;

justify-content:center;

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

z-index:99999;

padding:20px;

}

.cookie-modal-box{

width:100%;

max-width:720px;

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:0 25px 80px rgba(0,0,0,.25);

animation:cookieZoom .35s ease;

}

@keyframes cookieZoom{

from{

transform:scale(.9);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.cookie-modal-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:24px;

border-bottom:1px solid #eee;

}

.cookie-modal-header h2{

font-size:24px;

}

#closeCookieModal{

background:none;

border:none;

font-size:34px;

cursor:pointer;

}

.cookie-modal-body{

padding:25px;

}

.cookie-option{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

border-bottom:1px solid #eee;

gap:20px;

}

.cookie-option:last-child{

border:none;

}

.cookie-option h4{

font-size:18px;

margin-bottom:8px;

}

.cookie-option p{

font-size:14px;

line-height:1.7;

color:#666;

}

.cookie-modal-footer{

display:flex;

justify-content:flex-end;

gap:12px;

padding:22px;

border-top:1px solid #eee;

}





/* SWITCH */

.switch{

position:relative;

display:inline-block;

width:58px;

height:30px;

}

.switch input{

display:none;

}

.slider{

position:absolute;

cursor:pointer;

top:0;

left:0;

right:0;

bottom:0;

background:#ccc;

transition:.4s;

border-radius:40px;

}

.slider:before{

content:"";

position:absolute;

height:22px;

width:22px;

left:4px;

bottom:4px;

background:white;

transition:.4s;

border-radius:50%;

}

input:checked+.slider{

background:var(--primary);

}

input:checked+.slider:before{

transform:translateX(28px);

}





@media(max-width:991px){

#cookieBanner{

flex-direction:column;

align-items:flex-start;

}

.cookie-right{

width:100%;

}

.cookie-btn{

flex:1;

}

}



@media(max-width:600px){

#cookieBanner{

left:10px;
right:10px;
bottom:10px;

padding:20px;

}

.cookie-left{

flex-direction:column;

}

.cookie-content h3{

font-size:20px;

}

.cookie-modal-box{

max-height:90vh;

overflow:auto;

}

.cookie-modal-footer{

flex-direction:column;

}

.cookie-modal-footer .cookie-btn{

width:100%;

}

.cookie-right{

flex-direction:column;

width:100%;

}

.cookie-right .cookie-btn{

width:100%;

}

}