/* Site-wide minimizable sale popups (see static/js/promo-popup.js). */

/* ANCHORED TO THE MEASURED SHELL, NOT TO A LITERAL.
 *
 * This was `bottom: 16px` (76px under 768px) against a site bottom bar that
 * MEASURES 123-131px on a phone and 110px at 1280. The popup is z-index 1045
 * and .site-bottom-nav is 1080, so the popup did not paint over the nav — it
 * was painted OVER BY it, and the ~50px that disappeared underneath is
 * `.promo-popup-foot`: the countdown and the "Shop the Sale" button.
 *
 * Measured on the live templates with an active window: at 360/390/414/768 the
 * CTA's centre returned `#siteStatusRow` / `#siteBottomNavShell` / `.sr-chip`
 * from elementFromPoint and a real Playwright click was BLOCKED on pointer
 * interception at all four widths. At 1280 the CTA was clickable but the
 * countdown was still behind the nav's More button. So every sale popup on
 * every phone has shipped with an unclickable call to action.
 *
 * --site-shell-bottom is the shared token app.js measures at runtime
 * (updateShellBottomHeight) and mobile-bottom-nav.css seeds at :root
 * (110px / 96px / 120px). Every other bottom-anchored surface on the site
 * already reads it — boost-banner.css:52, conversion-nudges.css:21, gacha.css,
 * leaderboards.css and a dozen map.css controls. conversion-nudges.css even
 * documents this exact hazard. The promo popup was the one that never got it.
 *
 * The hub is unaffected: hub-shell.css re-anchors #promoPopupRoot against its
 * own measured chrome with `body.hub-body #promoPopupRoot`, which outranks the
 * bare ID selectors here, and hub_base.html contains no .site-bottom-nav.
 *
 * --site-overlay-lift is the SECOND term, and it is 0px on every page but one.
 * --site-shell-bottom covers the chrome the SHELL owns; a page may pin chrome
 * of its own on top of it, and this popup then lands on that instead of on the
 * nav. /casino/roulette does exactly that below 860px (casino_roulette.html
 * pins .rl-controls at --site-shell-bottom so SPIN is not under the nav at the
 * landing scroll offset), and re-anchoring the popup was not optional: with a
 * live sale up, elementFromPoint at SPIN's centre returned
 * `div.promo-popup-card` / `div.promo-popup-message` at 414 and 768 BEFORE the
 * bar existed. A page declares the band it pinned on :root; every
 * bottom-anchored overlay adds it, so the two stack rather than collide, and
 * the popup's own CTA stays clickable. Unset -> var() falls back to 0px and
 * this calc is byte-for-byte the anchor that shipped.
 */
#promoPopupRoot {
    position: fixed;
    right: 16px;
    bottom: calc(var(--site-shell-bottom, 110px)
                 + var(--site-safe-area-bottom, 0px)
                 + var(--site-overlay-lift, 0px) + 12px);
    z-index: 1045; /* above content, below bootstrap modals (1055) */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    max-width: min(340px, calc(100vw - 32px));
    min-width: 0;
    pointer-events: none; /* children re-enable */
}

#promoPopupRoot .promo-popup-card,
#promoPopupRoot .promo-popup-pill {
    pointer-events: auto;
    min-width: 0;
    overflow: hidden;
}

.promo-popup-card {
    width: min(340px, calc(100vw - 32px));
    background: rgba(17, 24, 39, 0.97);
    color: #f9fafb;
    border: 1px solid var(--promo-accent, #ef4444);
    border-left: 4px solid var(--promo-accent, #ef4444);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    padding: 10px 12px;
    animation: promo-popup-in 0.25s ease-out;
}

@keyframes promo-popup-in {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.promo-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.promo-popup-title {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: var(--promo-accent, #ef4444);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promo-popup-min-btn {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    color: #d1d5db;
    font-size: 0.9rem;
    line-height: 1;
    width: 24px;
    height: 24px;
    cursor: pointer;
    padding: 0;
}

.promo-popup-min-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.promo-popup-message {
    margin-top: 6px;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #e5e7eb;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.promo-popup-foot {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.promo-popup-countdown {
    font-size: 0.75rem;
    font-weight: 600;
    color: #fbbf24;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promo-popup-cta {
    flex: 0 0 auto;
    background: var(--promo-accent, #ef4444);
    color: #111827;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
}

.promo-popup-cta:hover {
    filter: brightness(1.1);
    color: #111827;
    text-decoration: none;
}

.promo-popup-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(280px, calc(100vw - 32px));
    background: rgba(17, 24, 39, 0.95);
    border: 1px solid var(--promo-accent, #ef4444);
    border-radius: 999px;
    color: #f9fafb;
    padding: 5px 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.promo-popup-pill:hover {
    background: rgba(31, 41, 55, 0.98);
}

.promo-popup-pill-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--promo-accent, #ef4444);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promo-popup-pill .promo-popup-countdown {
    flex: 0 0 auto;
    font-size: 0.7rem;
}

/* Keep clear of the mobile bottom navigation bar.
   `bottom` is deliberately NOT restated here: the base rule above already
   derives it from --site-shell-bottom, which app.js re-measures per width, so
   the phone case is covered by the same expression rather than by a second
   literal that has to be kept in sync. The 76px that used to live here was
   exactly that second literal, and it was 47-55px short. */
@media (max-width: 768px) {
    #promoPopupRoot {
        right: 8px;
        left: 8px;
        align-items: stretch;
        max-width: none;
    }

    .promo-popup-card {
        width: auto;
    }

    .promo-popup-pill {
        align-self: flex-end;
    }
}