/* =========================================================
   GREEN SHOP OCTOBER CELEBRATION POPUP
   ========================================================= */

#gs-oct-celebrate-overlay{
    position:fixed;
    inset:0;

    z-index:999998;

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

    opacity:0;
    visibility:hidden;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}


#gs-oct-celebrate-overlay.show{
    opacity:1;
    visibility:visible;
}


/* POPUP */

#gs-oct-celebrate-popup{
    position:fixed;

    left:50%;
    top:50%;

    z-index:999999;

    width:min(90vw,420px);

    transform:
        translate(-50%,-46%)
        scale(.94);

    overflow:hidden;

    border-radius:24px;

    background:#fff;

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

    opacity:0;
    visibility:hidden;

    direction:rtl;
    text-align:center;

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s ease;
}


#gs-oct-celebrate-popup.show{
    opacity:1;
    visibility:visible;

    transform:
        translate(-50%,-50%)
        scale(1);
}


/* HEADER */

#gs-oct-celebrate-popup
.gs-oct-popup-head{

    position:relative;

    padding:
        24px 18px 20px;

    background:
        linear-gradient(
            135deg,
            #15D93A 0%,
            #0DAE2B 100%
        );

    color:#fff;
}


#gs-oct-celebrate-popup
.gs-oct-popup-close{

    position:absolute;

    top:10px;
    left:11px;

    display:flex;

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

    width:30px;
    height:30px;

    margin:0;
    padding:0;

    border:0;
    border-radius:50%;

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

    color:#fff;

    font-size:21px;
    line-height:1;

    font-weight:700;

    cursor:pointer;
}


#gs-oct-celebrate-popup
.gs-oct-popup-emoji{

    font-size:47px;
    line-height:1;
}


#gs-oct-celebrate-popup
.gs-oct-popup-title{

    margin-top:10px;

    color:#fff;

    font-size:22px;
    line-height:1.35;

    font-weight:900;
}


#gs-oct-celebrate-popup
.gs-oct-popup-subtitle{

    margin-top:4px;

    color:
        rgba(255,255,255,.94);

    font-size:13px;
    line-height:1.4;

    font-weight:700;
}


/* BODY */

#gs-oct-celebrate-popup
.gs-oct-popup-body{

    padding:
        18px 18px 20px;

    background:
        linear-gradient(
            180deg,
            #F4FFF6,
            #FFFFFF
        );
}


/* REWARDS */

#gs-oct-celebrate-popup
.gs-oct-popup-rewards{

    display:flex;

    flex-direction:column;

    gap:8px;
}


#gs-oct-celebrate-popup
.gs-oct-popup-reward{

    display:flex;

    align-items:center;

    gap:10px;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(21,217,58,.25);

    border-radius:14px;

    background:#fff;

    text-align:right;
}


#gs-oct-celebrate-popup
.gs-oct-popup-reward-icon{

    display:flex;

    flex:0 0 36px;

    width:36px;
    height:36px;

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

    border-radius:50%;

    background:#EAFFEF;

    font-size:19px;
}


#gs-oct-celebrate-popup
.gs-oct-popup-reward-text{

    color:#222;

    font-size:15px;
    line-height:1.4;

    font-weight:800;
}


#gs-oct-celebrate-popup
.gs-oct-popup-reward-text strong{

    color:#079326;

    font-size:17px;

    font-weight:900;
}


/* NOTE */

#gs-oct-celebrate-popup
.gs-oct-popup-note{

    margin-top:12px;

    color:#616762;

    font-size:12px;
    line-height:1.5;

    font-weight:700;
}


/* BUTTON */

#gs-oct-celebrate-popup
.gs-oct-popup-continue{

    width:100%;

    margin-top:15px;

    padding:11px 18px;

    border:0;
    border-radius:999px;

    background:#15D93A;

    color:#fff;

    font-size:15px;

    font-weight:900;

    cursor:pointer;
}


/* Tier 4 special look */

#gs-oct-celebrate-popup.gs-tier-4
.gs-oct-popup-head{

    background:
        linear-gradient(
            135deg,
            #13C835,
            #079326
        );
}


/* MOBILE */

@media(max-width:600px){

    #gs-oct-celebrate-popup{
        width:
            min(91vw,390px);

        border-radius:21px;
    }


    #gs-oct-celebrate-popup
    .gs-oct-popup-head{

        padding:
            21px 15px 17px;
    }


    #gs-oct-celebrate-popup
    .gs-oct-popup-emoji{

        font-size:42px;
    }


    #gs-oct-celebrate-popup
    .gs-oct-popup-title{

        font-size:19px;
    }


    #gs-oct-celebrate-popup
    .gs-oct-popup-body{

        padding:
            15px 14px 17px;
    }


    #gs-oct-celebrate-popup
    .gs-oct-popup-reward{

        padding:
            9px 10px;
    }


    #gs-oct-celebrate-popup
    .gs-oct-popup-reward-text{

        font-size:14px;
    }
}