/* =====================================================
   ROOT
   ===================================================== */

:root {

    --primary: #d81757;
    --primary-hover: #c91450;
    --primary-light: rgba(216, 23, 87, 0.08);

    --text: #18181d;
    --text-secondary: #62626c;
    --text-light: #85858f;

    --white: #ffffff;
    --bg-light: #f7f7f9;
    --border: #e9e9ee;

}


/* =====================================================
   RESET
   ===================================================== */

.popup-overlay,
.popup-overlay * {
    box-sizing: border-box;
}


/* =====================================================
   SCROLL LOCK
   ===================================================== */

html.popup-open,
body.popup-open {
    overflow: hidden !important;
}


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

.popup-overlay {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding: 16px;

    background:
        rgba(255, 255, 255, 0.10);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    animation:
        overlayIn .30s ease forwards;

}


/* =====================================================
   POPUP BOX
   ===================================================== */

.popup-box {

    position: relative;

    width: 100%;

    max-width: 420px;

    max-height:
        calc(100vh - 32px);

    padding:
        30px 28px 26px;

    text-align:
        center;

    color:
        var(--text);

    background:
        rgba(255, 255, 255, 0.98);

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

    border-radius:
        20px;

    box-shadow:
        0 25px 65px rgba(25,25,40,.15),
        0 8px 25px rgba(25,25,40,.07);

    overflow-y:
        auto;

    animation:
        popupIn .45s cubic-bezier(.2,.8,.2,1)
        forwards;

}


/* =====================================================
   INNER GLOW
   ===================================================== */

.popup-box::after {

    content: "";

    position: absolute;

    top: -100px;
    left: 50%;

    width: 220px;
    height: 160px;

    transform:
        translateX(-50%);

    background:
        rgba(216,23,87,.055);

    filter:
        blur(45px);

    pointer-events:
        none;

}


/* =====================================================
   LOGO
   ===================================================== */

.pop-logo {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 78px;
    height: 78px;

    margin:
        0 auto 16px;

    background:
        #d81757;

    border:
        5px solid #fff;

    border-radius:
        50%;

    box-shadow:
        0 8px 22px rgba(216,23,87,.23),
        0 0 0 7px rgba(216,23,87,.07);

}


.pop-logo img {

    display: block;

    width: 55px;
    height: 55px;

    object-fit:
        contain;

    border-radius:
        50%;

}


/* =====================================================
   18+ BADGE
   ===================================================== */

.pop-logo span {

    position: absolute;

    right: -6px;
    bottom: -1px;

    z-index: 5;

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 35px;
    height: 24px;

    padding:
        0 7px;

    color:
        #d81757;

    background:
        #fff;

    border:
        2px solid #d81757;

    border-radius:
        20px;

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1;

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

}


/* =====================================================
   BRAND
   ===================================================== */

.pop-brand {

    position:
        relative;

    z-index:
        2;

    margin:
        -5px auto 16px;

    color:
        #d81757;

    font-size:
        18px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        1.5px;

    text-align:
        center;

}


.pop-brand span {

    font-size:
        9px;

    font-weight:
        600;

    color:
        #777780;

    letter-spacing:
        0;

    margin-left:
        1px;

}


/* =====================================================
   HEADING
   ===================================================== */

.popup-box h2 {

    position:
        relative;

    z-index:
        2;

    margin:
        0 0 12px;

    color:
        var(--text);

    font-size:
        23px;

    line-height:
        1.3;

    font-weight:
        750;

    letter-spacing:
        -.35px;

}


/* =====================================================
   PARAGRAPH
   ===================================================== */

.popup-box p {

    position:
        relative;

    z-index:
        2;

    max-width:
        370px;

    margin:
        0 auto 10px;

    color:
        var(--text-secondary);

    font-size:
        13px;

    line-height:
        1.6;

}


/* =====================================================
   AGE NOTICE
   ===================================================== */

.age-notice {

    color:
        var(--text-secondary) !important;

}


.accept-text {

    margin-top:
        15px !important;

    margin-bottom:
        18px !important;

    color:
        #35353d !important;

    font-weight:
        600;

}


.accept-text a {

    color:
        #d81757;

    font-weight:
        700;

    text-decoration:
        none;

    /*text-underline-offset:*/
    /*    3px;*/

}


/* =====================================================
   BUTTON BASE
   ===================================================== */

.popup-box button {

    position:
        relative;

    z-index:
        3;

    display:
        block;

    width:
        100%;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        700;

    border:
        0;

    outline:
        none;

    cursor:
        pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        color .2s ease,
        opacity .2s ease;

}


/* =====================================================
   PRIMARY
   ===================================================== */

.btn-primary {

    min-height:
        48px;

    padding:
        0 18px;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #d81757 0%,
            #e21d60 50%,
            #d81757 100%
        );

    border-radius:
        12px;

    box-shadow:
        0 8px 20px
        rgba(216,23,87,.22);

}


.btn-primary:hover {

    background:
        linear-gradient(
            135deg,
            #e21d60 0%,
            #d81757 50%,
            #c91450 100%
        );

    transform:
        translateY(-2px);

    box-shadow:
        0 11px 26px
        rgba(216,23,87,.28);

}


.btn-primary:active {

    transform:
        translateY(0);

}


/* =====================================================
   SECONDARY
   ===================================================== */

.btn-secondary {

    min-height:
        46px;

    margin-top:
        9px;

    padding:
        0 18px;

    color:
        #55555e;

    background:
        #f7f7f9;

    border:
        1px solid #e6e6eb !important;

    border-radius:
        12px;

}


.btn-secondary:hover {

    color:
        #222229;

    background:
        #f0f0f3;

    border-color:
        #dcdce2 !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 5px 13px
        rgba(0,0,0,.05);

}


/* =====================================================
   LINK BUTTON
   ===================================================== */

.popup-link {

    min-height:
        auto !important;

    margin-top:
        15px;

    padding:
        0;

    color:
        #777780;

    background:
        transparent;

    font-size:
        12px !important;

    font-weight:
        600 !important;

    text-decoration:
        none;

    /*text-decoration-thickness:*/
    /*    1px;*/

    /*text-underline-offset:*/
    /*    3px;*/

}


.popup-link:hover {

    color:
        #d81757;

    background:
        transparent;

}


/* =====================================================
   MANAGER
   ===================================================== */

.cookie-manager-box {

    max-width:
        470px;

    text-align:
        left;

}


.cookie-manager-box h2,
.cookie-manager-box > p {

    text-align:
        center;

}


/* =====================================================
   COOKIE OPTION
   ===================================================== */

.cookie-option {

    position:
        relative;

    margin-top:
        10px;

    background:
        #f8f8fa;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    overflow:
        hidden;

}


.cookie-option-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    min-height:
        56px;

    padding:
        10px 12px;

}


/* =====================================================
   COOKIE TITLE
   ===================================================== */

.cookie-title {

    display:
        flex !important;

    align-items:
        center;

    width:
        auto !important;

    min-height:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--text);

    background:
        transparent !important;

    font-size:
        12.5px !important;

    font-weight:
        700 !important;

    text-align:
        left;

}


.cookie-title:hover {

    color:
        #d81757;

}


.cookie-arrow {

    display:
        inline-block;

    margin-right:
        7px;

    color:
        #85858f;

    font-size:
        19px;

    line-height:
        1;

    transition:
        transform .2s ease;

}


.cookie-option.open
.cookie-arrow {

    transform:
        rotate(90deg);

}


/* =====================================================
   COOKIE DESCRIPTION
   ===================================================== */

.cookie-description {

    display:
        none;

    padding:
        0 13px 13px;

    color:
        var(--text-secondary);

    font-size:
        11px;

    line-height:
        1.55;

}


.cookie-option.open
.cookie-description {

    display:
        block;

}


/* =====================================================
   ALWAYS ACTIVE
   ===================================================== */

.always-active {

    flex-shrink:
        0;

    color:
        #777780;

    font-size:
        10px;

    font-weight:
        700;

    white-space:
        nowrap;

}


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

.cookie-switch {

    position:
        relative;

    display:
        block;

    width:
        43px;

    height:
        23px;

    flex-shrink:
        0;

}


.cookie-switch input {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    opacity:
        0;

}


.cookie-slider {

    position:
        absolute;

    inset:
        0;

    background:
        #d5d5da;

    border-radius:
        30px;

    cursor:
        pointer;

    transition:
        .2s ease;

}


.cookie-slider::before {

    content:
        "";

    position:
        absolute;

    width:
        17px;

    height:
        17px;

    left:
        3px;

    top:
        3px;

    background:
        #fff;

    border-radius:
        50%;

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

    transition:
        .2s ease;

}


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

    background:
        #d81757;

}


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

    transform:
        translateX(20px);

}


/* =====================================================
   MANAGER BUTTON
   ===================================================== */

.cookie-manager-button {

    margin-top:
        12px;

}


/* =====================================================
   DISABLED
   ===================================================== */

.popup-box button:disabled {

    opacity:
        .55;

    cursor:
        not-allowed;

    transform:
        none !important;

    pointer-events:
        none;

}


/* =====================================================
   ANIMATION
   ===================================================== */

@keyframes overlayIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes popupIn {

    from {

        opacity:
            0;

        transform:
            translateY(20px)
            scale(.96);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}


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

@media (max-width:600px) {

    .popup-overlay {

        padding:
            12px;

    }


    .popup-box {

        max-width:
            360px;

        max-height:
            calc(100vh - 24px);

        padding:
            27px 20px 22px;

        border-radius:
            19px;

    }


    .pop-logo {

        width:
            72px;

        height:
            72px;

        margin-bottom:
            15px;

        border-width:
            4px;

    }


    .pop-logo img {

        width:
            51px;

        height:
            51px;

    }


    .pop-logo span {

        right:
            -5px;

        min-width:
            33px;

        height:
            22px;

        padding:
            0 6px;

        font-size:
            9px;

    }


    .pop-brand {

        margin:
            -4px auto 14px;

        font-size:
            16px;

        letter-spacing:
            1.3px;

    }


    .popup-box h2 {

        margin-bottom:
            11px;

        font-size:
            21px;

    }


    .popup-box p {

        max-width:
            320px;

        font-size:
            12.5px;

        line-height:
            1.58;

    }


    .btn-primary {

        min-height:
            46px;

        border-radius:
            11px;

    }


    .btn-secondary {

        min-height:
            44px;

        margin-top:
            8px;

        border-radius:
            11px;

    }


    .cookie-manager-box {

        max-width:
            360px;

        padding:
            22px 18px 20px;

    }


    .cookie-option-header {

        min-height:
            52px;

        padding:
            9px 10px;

    }


    .cookie-title {

        font-size:
            11.5px !important;

    }


    .always-active {

        font-size:
            9px;

    }


    .cookie-description {

        padding:
            0 11px 11px;

        font-size:
            10.5px;

    }

}


/* =====================================================
   SMALL PHONES
   ===================================================== */

@media (max-width:380px) {

    .popup-overlay {

        padding:
            10px;

    }


    .popup-box {

        max-width:
            340px;

        padding:
            24px 17px 19px;

        border-radius:
            18px;

    }


    .pop-logo {

        width:
            67px;

        height:
            67px;

    }


    .pop-logo img {

        width:
            47px;

        height:
            47px;

    }


    .popup-box h2 {

        font-size:
            19px;

    }


    .popup-box p {

        font-size:
            12px;

        line-height:
            1.52;

    }

}


/* =====================================================
   REDUCED MOTION
   ===================================================== */

@media (prefers-reduced-motion:reduce) {

    .popup-overlay,
    .popup-box {

        animation:
            none;

    }

    .popup-box button,
    .cookie-slider,
    .cookie-slider::before {

        transition:
            none;

    }

}
.btn-primary:hover {

    background:
        linear-gradient(
            135deg,
            #e21d60 0%,
            #d81757 50%,
            #c91450 100%
        );

    transform:
        none !important;

    box-shadow:
        0 11px 26px
        rgba(216,23,87,.28);

}


.btn-secondary:hover {

    color:
        #222229;

    background:
        #f0f0f3;

    border-color:
        #dcdce2 !important;

    transform:
        none !important;

    box-shadow:
        0 5px 13px
        rgba(0,0,0,.05);

}
.popup-overlay *:hover {
    transform: none !important;
}