* {
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}


/* ==========================
   COOKIE BANNER
========================== */

.cc-banner {

    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;

    max-width: 900px;
    margin: auto;

    background: #ffffff;

    border-radius: 16px;

    padding: 25px;

    box-shadow: 0 10px 40px rgba(0,0,0,.18);

    z-index: 9998;

    display: none;

}


.cc-header h2 {

    margin: 0 0 10px;

    font-size: 22px;

}


.cc-header p {

    margin: 0;

    color: #555;

    line-height: 1.5;

}


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

.cc-buttons,
.cc-footer {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 20px;

}


button {

    border: none;

    cursor: pointer;

    padding: 12px 22px;

    border-radius: 8px;

    font-size: 15px;

    transition: .2s;

}


button:hover {

    opacity: .85;

}


.primary {

    background: #2563eb;

    color: white;

}


.secondary {

    background: #111827;

    color: white;

}


.outline {

    background: white;

    color: #111827;

    border: 1px solid #ccc;

}



/* ==========================
   MODAL
========================== */


.cc-modal {

    position: fixed;

    inset: 0;

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

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 9999;

    padding: 20px;

}



.cc-window {

    background:white;

    width:100%;

    max-width:700px;

    max-height:90vh;

    overflow-y:auto;

    border-radius:18px;

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

}



.cc-title {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px;

    border-bottom:1px solid #eee;

}


.cc-title h2 {

    margin:0;

}


.cc-title button {

    background:none;

    font-size:22px;

    padding:5px 10px;

}



/* ==========================
   COOKIE ITEMS
========================== */


.cc-body {

    padding:20px 25px;

}



.cookie-item {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px 0;

    border-bottom:1px solid #eee;

}



.cookie-item h3 {

    margin:0 0 6px;

    font-size:17px;

}



.cookie-item p {

    margin:0;

    color:#666;

    font-size:14px;

    line-height:1.4;

}



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


.switch {

    position:relative;

    display:inline-block;

    width:52px;

    height:28px;

    flex-shrink:0;

}



.switch input {

    opacity:0;

    width:0;

    height:0;

}



.slider {

    position:absolute;

    cursor:pointer;

    inset:0;

    background:#ccc;

    border-radius:30px;

    transition:.3s;

}



.slider:before {

    content:"";

    position:absolute;

    height:22px;

    width:22px;

    left:3px;

    bottom:3px;

    background:white;

    border-radius:50%;

    transition:.3s;

    box-shadow:0 2px 5px rgba(0,0,0,.3);

}



.switch input:checked + .slider {

    background:#2563eb;

}



.switch input:checked + .slider:before {

    transform:translateX(24px);

}



.switch input:disabled + .slider {

    background:#22c55e;

    cursor:not-allowed;

}



/* ==========================
   FOOTER
========================== */


.cc-footer {

    padding:20px 25px;

    border-top:1px solid #eee;

}



/* ==========================
   FLOATING BUTTON
========================== */


.cookie-settings-button {

    position:fixed;

    bottom:20px;

    right:20px;

    display:none;

    background:#111827;

    color:white;

    border-radius:50px;

    padding:12px 20px;

    z-index:9997;

}



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


@media(max-width:600px){


    .cc-banner {

        left:10px;

        right:10px;

        bottom:10px;

        padding:18px;

    }


    .cc-buttons button,
    .cc-footer button {

        width:100%;

    }


    .cookie-item {

        align-items:flex-start;

    }


    .cc-title {

        padding:18px;

    }


    .cc-body {

        padding:15px 18px;

    }


}