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

.cookie-banner {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;

    z-index: 999999;
}


.cookie-inner {

    max-width: 1180px;

    margin: 0 auto;

    padding: 22px 24px;

    background: #16213e;

    color: #ffffff;

    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.22);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


.cookie-content {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    max-width: 800px;
}


.cookie-icon {

    font-size: 30px;

    line-height: 1;
}


.cookie-copy h3 {

    margin: 0 0 7px;

    font-size: 21px;

    line-height: 1.2;

    color: #ffffff;
}


.cookie-copy p {

    margin: 0 0 10px;

    font-size: 14px;

    line-height: 1.6;

    color: rgba(255,255,255,0.85);
}


.cookie-link {

    appearance: none;

    border: 0;

    background: none;

    padding: 0;

    margin: 0 16px 0 0;

    color: #ffffff;

    font-size: 14px;

    text-decoration: underline;

    cursor: pointer;
}


.cookie-policy {

    color: #ffffff;

    font-size: 14px;

    text-decoration: underline;
}


.cookie-actions {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;
}



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

.cookie-btn {

    appearance: none;

    border: 0;

    border-radius: 10px;

    padding: 12px 20px;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .15s ease,
        opacity .15s ease,
        background .15s ease;
}


.cookie-btn:hover {

    transform: translateY(-1px);
}


.cookie-btn-accept {

    background:var(--flame);
    color:#fff;
}


.cookie-btn-reject {

    background: transparent;

    color: #ffffff;

    border: 1px solid rgba(255,255,255,0.35);
}


.cookie-btn-reject:hover {

    background: rgba(255,255,255,0.08);
}



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

.cookie-modal {

    position: fixed;

    inset: 0;

    z-index: 1000000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;
}


.cookie-modal[hidden] {

    display: none;
}


.cookie-modal-overlay {

    position: absolute;

    inset: 0;

    background: rgba(9, 14, 30, 0.72);

    backdrop-filter: blur(3px);
}


.cookie-modal-box {

    position: relative;

    width: 100%;

    max-width: 620px;

    max-height: 90vh;

    overflow-y: auto;

    background: #ffffff;

    color: #16213e;

    padding: 30px;

    border-radius: 18px;

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

    z-index: 2;
}


.cookie-modal-box h2 {

    margin: 0 45px 12px 0;

    font-size: 28px;

    color: #16213e;
}


.cookie-modal-intro {

    margin: 0 0 25px;

    color: #4a5470;

    line-height: 1.6;
}


.cookie-close {

    position: absolute;

    right: 20px;

    top: 18px;

    border: 0;

    background: none;

    font-size: 32px;

    line-height: 1;

    cursor: pointer;

    color: #7d86a0;
}



/* =========================================================
   COOKIE SETTING ROWS
========================================================= */

.cookie-setting {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 20px 0;

    border-top: 1px solid #e4e7f2;
}


.cookie-setting:last-of-type {

    border-bottom: 1px solid #e4e7f2;
}


.cookie-setting-text h4 {

    margin: 0 0 5px;

    font-size: 17px;

    color: #16213e;
}


.cookie-setting-text p {

    margin: 0;

    font-size: 14px;

    line-height: 1.5;

    color: #7d86a0;
}


.cookie-always {

    white-space: nowrap;

    font-size: 13px;

    font-weight: 700;

    color: #6266ee;
}



/* =========================================================
   TOGGLE
========================================================= */

.cookie-switch {

    position: relative;

    width: 50px;

    min-width: 50px;

    height: 28px;
}


.cookie-switch input {

    opacity: 0;

    width: 0;

    height: 0;
}


.cookie-slider {

    position: absolute;

    inset: 0;

    background: #d6d9e4;

    border-radius: 30px;

    cursor: pointer;

    transition: .25s;
}


.cookie-slider:before {

    content: "";

    position: absolute;

    width: 20px;

    height: 20px;

    left: 4px;

    top: 4px;

    background: #ffffff;

    border-radius: 50%;

    transition: .25s;

    box-shadow:
        0 2px 6px rgba(0,0,0,0.2);
}


.cookie-switch input:checked + .cookie-slider {

    background: linear-gradient(
        135deg,
        #6266ee,
        #c44ae0
    );
}


.cookie-switch input:checked + .cookie-slider:before {

    transform: translateX(22px);
}



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

.cookie-modal-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 25px;
}


.cookie-modal-actions .cookie-btn-reject {

    color: #16213e;

    border-color: #d6d9e4;
}


.cookie-modal-actions .cookie-btn-reject:hover {

    background: #eef0fb;
}



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

@media (max-width: 760px) {

    .cookie-banner {

        left: 10px;

        right: 10px;

        bottom: 10px;
    }


    .cookie-inner {

        display: block;

        padding: 20px;
    }


    .cookie-content {

        display: block;
    }


    .cookie-icon {

        margin-bottom: 10px;
    }


    .cookie-actions {

        margin-top: 18px;

        width: 100%;
    }


    .cookie-actions .cookie-btn {

        flex: 1;
    }


    .cookie-modal-box {

        padding: 24px 20px;
    }


    .cookie-setting {

        gap: 15px;
    }


    .cookie-modal-actions {

        display: grid;

        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 420px) {

    .cookie-actions {

        display: grid;

        grid-template-columns: 1fr;
    }


    .cookie-modal-actions {

        grid-template-columns: 1fr;
    }

}