/* Livestream announcement popup (app/Views/frontend/modals/popups/livestream.php).
   Self-contained: the only thing it borrows from custom.css is the .icon-bs-close font. */

/* Same width as the sales popup at every breakpoint. That one is a plain Bootstrap
   .modal-dialog capped at 430px from 600px up, so matching the cap is enough —
   below 600px both fall back to identical Bootstrap defaults. Height is free to differ. */
@media (min-width: 600px) {
    .livestream-popup .modal-dialog {
        max-width: 430px;
    }
}

/* The close button sits above the popup, so the rounded corners are clipped on the
   body rather than on .modal-content — clipping there would swallow the button. */
.livestream-popup .modal-content {
    background: transparent;
    border: 0;
}

.livestream-popup .modal-body {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
}

/* Matches how the other popups sit their close button: just outside the right edge,
   plain white on the backdrop. Restated here rather than borrowing .modal-subscribe,
   which would drag in that skin's sizing too. */
.livestream-popup .modal-content a.close-modal {
    position: absolute;
    top: 0;
    right: -25px;
    z-index: 2;
    width: 26px;
    height: 26px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: 24px;
    line-height: 1;
    color: rgb(255 255 255 / 35%);
}

.livestream-popup .modal-content a.close-modal:hover {
    color: rgb(255 255 255 / 50%);
}

.livestream-popup .modal-content a.close-modal .icon-bs-close {
    font-size: 24px;
    color: inherit;
}

/* No room to hang it outside on a phone — tuck it back over the top corner,
   same as .modal-subscribe does at this breakpoint. */
@media (max-width: 575px) {
    .livestream-popup .modal-content a.close-modal {
        top: -30px;
        right: 0;
        display: flex;
        width: fit-content;
        height: fit-content;
    }
}

.livestream-popup__eyebrow {
    background: #d80000;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    padding: 4.5px 20px;
}

/* Beach plate sits behind the girls, who are cut out on transparency. */
.livestream-popup__visual {
    position: relative;
    line-height: 0;
    background: url('../../img/popups/live-popup-bg-img-1.webp') center bottom / cover no-repeat;
}

.livestream-popup__visual::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #FFF;
    opacity: 0.5;
}

/* Capped so the popup never outgrows the viewport. Site-wide .modal-dialog is
   max-width:90%, which resolves against a narrower box once the modal scrolls —
   letting this overflow would make the popup measurably narrower than the sales one.
   `contain` rather than `cover` so the cap shrinks the girls instead of cropping them,
   and the beach behind fills whatever it frees up. */
.livestream-popup__girls {
    display: block;
    width: 100%;
    height: auto;
    max-height: 46vh;
    object-fit: contain;
    object-position: bottom center;
    position: relative;
    z-index: 2;
    padding-top: 35px;
}

.livestream-popup__logo {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 82%;
    max-width: 311px;
    height: auto;
    z-index: 2;
}

.livestream-popup__band {
    background: linear-gradient(90deg, #d80000 0%, #e8125e 100%);
    color: #fff;
    text-align: center;
    padding: 8px 20px 4px 20px;
}

.livestream-popup__names {
    display: inline-block;
    vertical-align: middle;
    margin: 0 15px 0 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-align: right;
}

.livestream-popup__chaturbate {
    display: inline-block;
    vertical-align: middle;
    width: 127px;
    height: auto;
}

.livestream-popup__when {
    margin: 7px 0 0;
    font-size: 14px;
    font-weight: 400;
}

.livestream-popup__when b {
    font-weight: 700;
}

.livestream-popup__footer {
    padding: 13px 20px;
    text-align: center;
}

.livestream-popup__cta {
    display: block;
    background: linear-gradient(180deg, #e11b1b 0%, #8f0000 100%);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10.5px 16px;
    transition: filter .2s ease;
}

.livestream-popup__cta:hover,
.livestream-popup__cta:focus {
    color: #fff;
    filter: brightness(1.12);
}

/* On-air variant: the eyebrow gets a pulse so it reads as "happening now". */
.livestream-popup.is-live .livestream-popup__eyebrow {
    animation: livestream-popup-pulse 1.6s ease-in-out infinite;
}

@keyframes livestream-popup-pulse {
    0%, 100% { background: #d80000; }
    50%      { background: #ff2b2b; }
}

@media (prefers-reduced-motion: reduce) {
    .livestream-popup.is-live .livestream-popup__eyebrow {
        animation: none;
    }
}