/*
 * Standing lifetime-VIP sales popup (#magazine_modal).
 *
 * Built to the "7day Popup - NSFW/SFW" frames: 386 x 415, 10px radius, three bands —
 * a 27px timer bar, a 266px artwork stage over the summer gradient, and a 122px
 * yellow CTA block. Every inner size is expressed in cqw against the 386px frame,
 * so the whole popup scales as one unit on narrow screens.
 *
 * Loaded from the view itself (like the livestream popup) so it lands after
 * custom.css and the sales-page stylesheets, which both carry older rules for
 * these class names.
 */

.sales-popup .modal-dialog {
    max-width: min(386px, calc(100vw - 24px));
}

/* specificity has to clear custom.css's .modal-dialog.modal-subscribe .modal-content a.close-modal */
.sales-popup .modal-dialog.modal-subscribe .modal-content a.close-modal {
    position: absolute;
    top: -32px;
    right: 0;
    z-index: 2;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 22px;
    line-height: 1;
    color: rgba(255, 255, 255, .55);
}

.sales-popup .modal-dialog.modal-subscribe .modal-content a.close-modal:hover,
.sales-popup .modal-dialog.modal-subscribe .modal-content a.close-modal:focus {
    color: #FFF;
}

.sales-popup .modal-content {
    position: relative;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 10px;
    /* stays visible so the close control can sit above the frame; the body does the clipping */
    overflow: visible;
    container-type: inline-size;
}

.sales-popup .modal-body {
    padding: 0;
    background: #FFF;
    border-radius: 10px;
    overflow: hidden;
}

/* ---------------------------------------------------------------- timer bar */

.sales-popup .modal-body__timer {
    height: 6.995cqw; /* 27 of 386 */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #D20000;
}

.sales-popup .sales-page__timer-numbers {
    font-family: 'Avenir Next', sans-serif;
    font-weight: 600;
    font-size: 4.663cqw; /* 18 of 386 */
    line-height: 1;
    letter-spacing: .02em;
    color: #FFF;
}

/* -------------------------------------------------------------------- stage */

.sales-popup__stage {
    position: relative;
    height: 68.912cqw; /* 266 of 386 */
    overflow: hidden;
    background: linear-gradient(180deg, #E92563 0%, #FFC526 100%);
}

.sales-popup__stage::before {
    /* same decor tile and 35% strength as the page header */
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url('../../img/sales-page/summer-sales-header-decor-7.svg') repeat center top;
    background-size: 25.26cqw 25.26cqw; /* 97.5px tile at full width, as in the header */
    opacity: .35;
}

.sales-popup__art {
    position: absolute;
    left: 50%;
    /* the design runs the artwork past the CTA block and lets it clip there (~22% of
       its height), which is what puts the heads clear of the lockup */
    bottom: -14.04cqw;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    z-index: 2;
}

/* ----------------------------------------------------- logo + waves lockup */

.sales-popup__lockup {
    position: absolute;
    top: 0.904cqw;  /* 30.49 - 27 */
    left: 1.295cqw; /* 5 of 386 */
    z-index: 3;
    width: 97.409cqw; /* 376 of 386 */
    display: flex;
    flex-direction: column;
    align-items: center;
    container-type: inline-size;
}

.sales-popup__logo {
    width: 52.77%; /* 362 of the 686-wide design lockup */
    height: auto;
    position: relative;
    z-index: 3;
}

.sales-popup__wave {
    position: absolute;
    top: 1.54%;
    width: 32.08%; /* 220 of 686 */
    height: auto;
    z-index: 1;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48.3%, rgba(0, 0, 0, 0) 99.2%);
    mask-image: linear-gradient(180deg, #000 0%, #000 48.3%, rgba(0, 0, 0, 0) 99.2%);
}

.sales-popup__wave--left {
    left: 0;
}

.sales-popup__wave--right {
    right: 0;
}

.sales-popup .under-logo {
    position: relative;
    z-index: 3;
    font-family: 'Avenir Next', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.19;
    white-space: nowrap;
    font-size: 8.32cqw; /* 57.07 of 686 */
    background: linear-gradient(0deg, #FFC526 0%, #FFFFFF 64%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* -------------------------------------------------------------- CTA block */

.sales-popup .modal-body__bottom {
    height: 31.606cqw; /* 122 of 386 */
    padding: 4.404cqw 4.922cqw 0; /* 17 top, 19 sides */
    background: #FFC72C;
    text-align: center;
}

.sales-popup .modal-body__subheading {
    padding: 0;
    margin: 0;
}

.sales-popup .modal-body__subheading p {
    margin: 0;
    font-family: 'Avenir Next', sans-serif;
    font-weight: 600;
    font-size: 4.145cqw; /* 16 of 386 */
    line-height: 1.19;
    text-transform: uppercase;
    color: #E92563;
}

.sales-popup .modal-body__subheading p span {
    color: #FFF;
}

.sales-popup__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 10.622cqw; /* 41 of 386 */
    margin-top: 1.295cqw; /* design: button sits at y353 */
    border-radius: 2.073cqw;
    background: #D20000;
    font-family: 'Avenir Next', sans-serif;
    font-weight: 600;
    font-size: 4.145cqw;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    color: #FFF;
}

.sales-popup__cta:hover,
.sales-popup__cta:focus {
    background: #B80000;
    color: #FFF;
}