/****************************
 * Simple Popup
****************************/
/* avoid page scroll when popup is open */
html.has-popup-open {overflow:hidden;}
html.has-popup-open .site-nav--desktop,
html.has-popup-open .site-content,
html.has-popup-open .twc-simple-popup {padding-right:calc(100vw - var(--twc-100vw));}

/* wrapper */
.twc-simple-popup:not(.popup-open) {opacity:0; visibility:hidden;}
.twc-simple-popup {
    position:fixed; top:0; left:0; width:100%; height:100%; z-index:90;
    transition:opacity .4s ease, visibility .4s ease; background:rgba(0, 0, 0, .3);
}
.twc-simple-popup-wrap {position:relative; height:100%;}

/* close layer */
.twc-simple-popup__close-layer {
    position:absolute; top:0; left:50%; width:100vw; height:100%;
    transform:translateX(-50%);
}

/* close button */
.twc-simple-popup__close-button {position:absolute; top:0; left:100%; z-index:2;}
.twc-simple-popup__close-button button {
    line-height:1; display:inline-block; padding:15px; background:none; font-size:14px;
}

/* close button desktop */
.twc-simple-popup__close-button.desktop button {background:var(--twc-color-pink); color:#fff;}
.twc-simple-popup__close-button.desktop button:hover {background:var(--twc-color-primary);}

/* close button mobile */
.twc-simple-popup__close-button.mobile {background:#eee; width:100%; text-align:right;}
.twc-simple-popup__close-button.mobile button {color:#000;}
.twc-simple-popup__close-button.mobile button:hover {color:var(--twc-color-primary);}

/* overflow */
.twc-simple-popup__overflow {
    position:relative; z-index:2;
    width:100%; max-height:100%; overflow-y:auto; overflow-x:hidden;
}
.twc-simple-popup__container {
    position:relative;
    padding:40px 20px; width:100%; max-width:1060px; margin:0 auto;
}

/* inner */
.twc-simple-popup__inner {background:#fff; padding:40px; position:relative;}

/****************************
 * Simple Popup Responsive
****************************/
@media only screen and (max-width:1023px) {
    /* mobile popup */
    .twc-simple-popup:not(.popup-open) .twc-simple-popup__overflow {transform:translateY(90%);}
    .twc-simple-popup-wrap {align-items:flex-end;}
    .twc-simple-popup__overflow {
        max-height:calc(100% - 70px); /* minus header height */
        max-width:900px;
        overflow:hidden; border-radius:10px 10px 0 0; display:flex;
        transition:all .3s ease; background:#fff;
    }
    .twc-simple-popup__container {padding:0; overflow:auto; min-height:60vh;}
    .twc-simple-popup__inner {padding:60px 20px 30px;}
    .twc-simple-popup__close-button {display:none;}
    .twc-simple-popup__close-button.mobile.hidden {display:block; left:auto; right:0;}
    /* end mobile popup */
}