/* ==========================
 COOKIE BAR
========================== */

.cookie-bar {

    position: fixed;

    left:50%;
    transform:translateX(-50%);

    z-index:999999;


    background:
    linear-gradient(135deg,#353849,#252837);


    color:var(--ccm-text);


    padding:18px 22px;


    border-radius:18px;


    box-shadow:

    0 15px 45px rgba(0,0,0,.28);


    font-size:var(--ccm-font-size);


    max-width:950px;


    width:calc(100% - 40px);


    display:none;


    align-items:center;


    justify-content:flex-start;


    gap:18px;


    line-height:1.5;


    font-family:var(--ccm-font-family);


    font-weight:var(--ccm-font-weight);


    animation:cookieFade .35s ease;

}



@keyframes cookieFade {


from {

opacity:0;

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

}


to {

opacity:1;

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

}


}




.cookie-bar.ccm-bottom {

bottom:20px;

}



.cookie-bar.ccm-top {

top:20px;

}





/* ==========================
 TEXT
========================== */


.cookie-bar__text {

flex:1;

}



.cookie-bar__text a {

color:#8ab4ff;

text-decoration:underline;

}


.cookie-bar__text a:hover {

color:white;

}






/* ==========================
 BUTTONS
========================== */


.cookie-btn {


border:none;


border-radius:12px;


padding:11px 18px;


font-size:14px;


font-weight:600;


cursor:pointer;


transition:.25s;


white-space:nowrap;


}



.cookie-btn:hover {


transform:translateY(-2px);


}



.cookie-accept {


background:#4f8cff;


color:white;


box-shadow:

0 8px 20px rgba(79,140,255,.35);


}



.cookie-reject {


background:#eef1f7;


color:#1b1f33;


}



.cookie-settings {


background:
rgba(255,255,255,.15);


color:white;


}






/* ==========================
 OVERLAY
========================== */


#cookie-overlay {


position:fixed;


inset:0;


background:

rgba(7,7,16,.65);


z-index:999998;


display:none;


backdrop-filter:blur(4px);


}







/* ==========================
 SETTINGS PANEL
========================== */


#cookie-panel {


position:fixed;


right:25px;


width:420px;


max-width:
calc(100vw - 40px);



background:white;


color:#1b1f33;


border-radius:20px;


padding:25px;


z-index:999999;


display:none;


font-family:var(--ccm-font-family);


font-size:14px;


box-shadow:

0 20px 60px rgba(0,0,0,.25);


}



#cookie-panel.ccm-bottom {


bottom:25px;


}


#cookie-panel.ccm-top {


top:25px;


}





.cookie-title {


font-size:20px;


font-weight:700;


margin-bottom:18px;


}



.cookie-block {


margin-bottom:18px;


padding-bottom:15px;


border-bottom:

1px solid #eceff5;


}



.cookie-row {


display:grid;


grid-template-columns:1fr auto;


align-items:center;


gap:15px;


}



.cookie-block-text {


font-size:13px;


line-height:1.55;


color:#667085;


margin-top:8px;


}





/* ==========================
 PANEL BUTTONS
========================== */


.cookie-actions {


display:flex;


gap:10px;


margin-top:15px;


}



.cookie-save,
.cookie-close {


flex:1;


padding:13px;


border:none;


border-radius:12px;


font-size:14px;


font-weight:600;


cursor:pointer;


}



.cookie-save {


background:#4f8cff;


color:white;


}



.cookie-close {


background:#edf1f7;


color:#1b1f33;


}





/* ==========================
 SWITCH
========================== */


.switch {


position:relative;


width:46px;


height:25px;


}



.switch input {


display:none;


}



.slider {


position:absolute;


inset:0;


background:#ccd1dc;


border-radius:50px;


transition:.25s;


}



.slider:before {


content:"";


position:absolute;


width:19px;


height:19px;


left:3px;


top:3px;


background:white;


border-radius:50%;


transition:.25s;


box-shadow:

0 2px 6px rgba(0,0,0,.2);


}



.switch input:checked + .slider {


background:#22c55e;


}



.switch input:checked + .slider:before {


transform:translateX(21px);


}





/* ==========================
 MOBILE
========================== */


@media(max-width:720px){


.cookie-bar {


left:0;


right:0;


bottom:0;


transform:none;


width:100%;


max-width:none;


border-radius:

20px 20px 0 0;



padding:

20px 16px;



display:none;


flex-direction:column;


align-items:stretch;


gap:15px;


}



.cookie-bar.ccm-top {


border-radius:

0 0 20px 20px;


}



.cookie-btn {


width:100%;


height:46px;


font-size:15px;


}



#cookie-panel {


left:0;


right:0;


bottom:0;


width:100%;


max-width:none;


border-radius:

22px 22px 0 0;


padding:22px 18px;


}



.cookie-actions {


flex-direction:column;


}



}