/*
 * Public CSS Bundle: sale-widget.bundle.css
 * Auto-generated by scripts/bundle_public_css.py
 * DO NOT EDIT - Edit source files instead
 *
 * Sources: sale-widget/sale-widget-base.css, sale-widget/components/leaderboard.css, sale-widget/components/plan-rows.css, sale-widget/sale-widget-tablet.css, sale-widget/sale-widget-mobile.css, sale-widget/sale-widget-mobile-small.css, sale-widget/themes/arena.css, sale-widget/themes/memorial.css
 */

/* === sale-widget/sale-widget-base.css === */

/**
 * Sale Widget — base styles (popup overlay + persistent widget).
 *
 * NO media queries here. NO theme overrides here. NO component-specific
 * rules (leaderboard, plan-rows) here. Those live in their own files.
 *
 * Viewport overrides: sale-widget-tablet.css / -mobile.css / -mobile-small.css
 * Theme overrides:    themes/<name>.css scoped via [data-theme="..."]
 * Components:         components/<name>.css (leaderboard, plan-rows)
 */

/* ============================================
   CSS Variables
   ============================================ */
:root {
    --sale-primary: #2563eb;
    --sale-primary-hover: #1d4ed8;
    --sale-primary-light: #3b82f6;
    --sale-bg: #eff6ff;
    --sale-bg-dark: #dbeafe;
    --sale-text: #1e3a8a;
    --sale-text-light: #3b82f6;
    --sale-white: #ffffff;
    --sale-shadow: 0 20px 40px rgba(37, 99, 235, 0.2);
    --sale-shadow-sm: 0 4px 12px rgba(37, 99, 235, 0.15);
    --sale-radius: 16px;
    --sale-radius-sm: 12px;
    --sale-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   Popup Overlay
   ============================================ */
.sale-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--sale-transition), visibility var(--sale-transition);
    padding: 20px;
}

.sale-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.sale-popup {
    background: linear-gradient(135deg, var(--sale-white) 0%, var(--sale-bg) 100%);
    border-radius: var(--sale-radius);
    box-shadow: var(--sale-shadow);
    padding: 40px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform var(--sale-transition);
}

.sale-popup-overlay.active .sale-popup {
    transform: scale(1) translateY(0);
}

.sale-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--sale-bg-dark);
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    color: var(--sale-text);
    cursor: pointer;
    transition: background var(--sale-transition), transform var(--sale-transition);
}

.sale-popup-close:hover {
    background: var(--sale-primary);
    color: var(--sale-white);
    transform: scale(1.1);
}

.sale-popup-badge {
    display: inline-block;
    background: var(--sale-primary);
    color: var(--sale-white);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sale-popup-headline {
    font-size: 2rem;
    font-weight: 700;
    color: var(--sale-text);
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.sale-popup-countdown {
    background: var(--sale-bg-dark);
    border-radius: var(--sale-radius-sm);
    padding: 16px 24px;
    margin-bottom: 20px;
}

.sale-countdown-label {
    display: block;
    font-size: 0.85rem;
    color: var(--sale-text-light);
    margin-bottom: 4px;
}

.sale-countdown-timer {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sale-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

.sale-popup-code {
    margin-bottom: 24px;
}

.sale-code-label {
    font-size: 0.9rem;
    color: #64748b;
}

.sale-code-value {
    display: inline-block;
    background: var(--sale-text);
    color: var(--sale-white);
    font-size: 1.1rem;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 8px;
    margin-left: 8px;
    letter-spacing: 2px;
    font-family: monospace;
}

.sale-popup-cta {
    display: inline-block;
    background: var(--sale-primary);
    color: var(--sale-white);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 16px 40px;
    border-radius: var(--sale-radius-sm);
    text-decoration: none;
    transition: background var(--sale-transition), transform var(--sale-transition), box-shadow var(--sale-transition);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.sale-popup-cta:hover {
    background: var(--sale-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

/* ============================================
   Persistent Widget
   ============================================ */
.sale-widget {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sale-widget[data-state="hidden"] {
    display: none;
}

/* Toggle Button (Minimized State) */
.sale-widget-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--sale-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sale-shadow-sm);
    transition: transform var(--sale-transition), box-shadow var(--sale-transition);
    position: relative;
}

.sale-widget-toggle:hover {
    transform: scale(1.08);
    box-shadow: var(--sale-shadow);
}

.sale-widget[data-state="expanded"] .sale-widget-toggle {
    display: none;
}

.sale-widget-icon {
    width: 24px;
    height: 24px;
    color: var(--sale-white);
}

.sale-widget-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #dc2626;
    color: var(--sale-white);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Expanded Panel */
.sale-widget-panel {
    background: var(--sale-white);
    border-radius: var(--sale-radius);
    box-shadow: var(--sale-shadow);
    padding: 20px;
    width: 280px;
    display: none;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.sale-widget[data-state="expanded"] .sale-widget-panel {
    display: block;
}

.sale-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.sale-widget-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sale-text);
}

.sale-widget-minimize {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sale-bg);
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--sale-text);
    transition: background var(--sale-transition);
}

.sale-widget-minimize:hover {
    background: var(--sale-bg-dark);
}

.sale-widget-countdown {
    background: var(--sale-bg);
    border-radius: var(--sale-radius-sm);
    padding: 12px;
    text-align: center;
    margin-bottom: 12px;
}

.sale-widget-countdown-label {
    font-size: 0.75rem;
    color: var(--sale-text-light);
    display: block;
    margin-bottom: 2px;
}

.sale-widget-countdown-timer {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sale-text);
    font-variant-numeric: tabular-nums;
}

.sale-widget-code {
    text-align: center;
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 12px;
}

.sale-widget-code strong {
    background: var(--sale-text);
    color: var(--sale-white);
    padding: 4px 10px;
    border-radius: 4px;
    font-family: monospace;
    letter-spacing: 1px;
    margin-left: 4px;
}

.sale-widget-cta {
    display: block;
    background: var(--sale-primary);
    color: var(--sale-white);
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: var(--sale-radius-sm);
    text-decoration: none;
    transition: background var(--sale-transition);
}

.sale-widget-cta:hover {
    background: var(--sale-primary-hover);
}

/* Hide CTA on pricing page (handled by JS adding this class) */
.sale-widget-cta.hidden,
.sale-popup-cta.hidden {
    display: none;
}

/* ============================================
   Urgency Animation (< 1 hour remaining)
   ============================================ */
.sale-countdown-timer.urgent,
.sale-widget-countdown-timer.urgent {
    animation: pulse 1.5s ease-in-out infinite;
    color: #dc2626;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ============================================
   Subtitle (optional — under headline)
   ============================================ */
.sale-popup-subtitle {
    font-size: 0.95rem;
    color: var(--sale-text-light);
    margin: -8px 0 18px;
    line-height: 1.45;
    font-weight: 500;
}


/* === sale-widget/components/leaderboard.css === */

/**
 * Leaderboard component — used by prize-tied sales (Arena Season 1 pattern).
 *
 * Renders inside .sale-popup when sale.leaderboard is provided.
 * Base styling assumes a dark background (Arena theme); a default
 * light-theme fallback is provided via :not([data-theme="arena"]) so
 * future light-theme leaderboard sales render correctly without changes.
 *
 * Per-theme overrides live in themes/<name>.css.
 */

/* ============================================
   Leaderboard (optional — live Top 8 for Arena-style sales)
   Mirrors the rank-row style from the Top 8 email template.
   ============================================ */
.sale-popup-leaderboard {
    margin: 0 0 18px;
    text-align: left;
}

.sale-leaderboard-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #fdcc05;
    margin-bottom: 10px;
    text-align: center;
}

.sale-leaderboard-label::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fdcc05;
    margin-right: 6px;
    vertical-align: middle;
    animation: sale-live-dot 1.4s ease-in-out infinite;
}

@keyframes sale-live-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.sale-leaderboard-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 5px;
}

.sale-leaderboard-row {
    display: grid;
    grid-template-columns: 32px 32px 1fr auto;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-left: 4px solid var(--rank-accent, #cbd5e1);
    border-radius: 8px;
    padding: 7px 10px 7px 8px;
    color: rgba(255, 255, 255, 0.96);
    font-size: 0.85rem;
    line-height: 1.2;
}

.sale-rank-num {
    font-family: 'Helvetica Neue', Arial Black, sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--rank-accent, #cbd5e1);
    text-align: center;
}

.sale-rank-insignia {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    border: 1.5px solid var(--rank-accent, #cbd5e1);
    padding: 1px;
    object-fit: contain;
    display: block;
}

.sale-rank-insignia-empty {
    background: rgba(255, 255, 255, 0.06);
    border-style: dashed;
}

.sale-rank-name {
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sale-rank-branch {
    display: block;
    font-size: 0.6rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 1.1px;
    text-transform: uppercase;
    margin-top: 2px;
}

.sale-rank-points {
    font-family: 'Helvetica Neue', Arial Black, sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--rank-accent, #fff);
    text-align: right;
    line-height: 1.05;
}

.sale-rank-points-label {
    display: block;
    font-size: 0.55rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 1.1px;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Light-theme fallback (when no Arena theme — gives a default look) */
.sale-popup-overlay:not([data-theme="arena"]) .sale-leaderboard-row {
    background: var(--sale-bg);
    border-color: var(--sale-bg-dark);
    color: var(--sale-text);
}

.sale-popup-overlay:not([data-theme="arena"]) .sale-rank-name {
    color: var(--sale-text);
}

.sale-popup-overlay:not([data-theme="arena"]) .sale-rank-branch,
.sale-popup-overlay:not([data-theme="arena"]) .sale-rank-points-label {
    color: var(--sale-text-light);
}

.sale-popup-overlay:not([data-theme="arena"]) .sale-leaderboard-label {
    color: var(--sale-primary);
}

.sale-popup-overlay:not([data-theme="arena"]) .sale-leaderboard-label::before {
    background: var(--sale-primary);
}


/* === sale-widget/components/plan-rows.css === */

/**
 * Plan-rows component — per-plan apply table (Memorial 2026 pattern).
 *
 * Renders inside both .sale-popup and .sale-widget-panel when sale.plan_rows
 * is set. Each row shows plan name + code + discount + Apply button.
 *
 * Base styles only (no media queries). Responsive overrides for this
 * component live in sale-widget-mobile.css and sale-widget-mobile-small.css.
 *
 * Theme-specific row coloring (active state, best-row accent) lives in
 * themes/<name>.css.
 */

/* ============================================
   Plan rows (per-plan apply table — Memorial 2026 pattern)
   Used by both popup and widget when sale.plan_rows is set.
   ============================================ */
.sale-popup-wide {
    max-width: 480px;
    /* 5 rows + headline + countdown + CTA can exceed viewport height on
       smaller desktop windows. Cap to viewport with internal scroll as
       safety, then tighten internal spacing below so most viewports
       don't need to scroll at all. */
    max-height: 92vh;
    overflow-y: auto;
    padding: 28px 32px;
}

/* Tighten popup spacing for the plan-rows variant so 5 rows fit on desktop
   without the top badge or bottom CTA getting clipped. Scoped to
   .sale-popup-wide so the single-code popup variant is unaffected. */
.sale-popup-wide .sale-popup-headline {
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.sale-popup-wide .sale-popup-subtitle {
    margin: -2px 0 8px;
}

.sale-popup-wide .sale-popup-memorial-note {
    margin: 0 0 12px;
}

.sale-popup-wide .sale-popup-countdown {
    padding: 12px 18px;
    margin-bottom: 14px;
}

.sale-popup-wide .sale-countdown-timer {
    font-size: 1.35rem;
}

.sale-popup-wide .sale-plan-rows {
    margin-bottom: 14px;
    gap: 5px;
}

.sale-popup-wide .sale-plan-row {
    padding: 8px 10px;
}

.sale-popup-wide .sale-popup-cta {
    padding: 12px 32px;
    font-size: 1rem;
}

.sale-widget-panel-wide {
    width: 320px;
}

.sale-widget-titles {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sale-plan-rows {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    gap: 6px;
}

.sale-plan-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #cbd5e1;
    border-radius: 10px;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.sale-plan-row:hover {
    background: #f1f5f9;
    transform: translateX(2px);
}

.sale-plan-row.active {
    background: #fef2f2;
    border-color: #b91c1c;
    border-left-width: 4px;
    box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.15);
}

.sale-plan-row-best {
    border-left-color: #d4a017;
}

.sale-plan-row-best.active {
    border-left-color: #b91c1c;
}

.sale-plan-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sale-plan-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0c1e3e;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sale-plan-code {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 800;
    color: #b91c1c;
    letter-spacing: 1.2px;
    margin-top: 2px;
}

.sale-plan-discount {
    font-size: 0.82rem;
    font-weight: 800;
    color: #0c1e3e;
    text-align: right;
    white-space: nowrap;
}

.sale-plan-row-best .sale-plan-discount {
    color: #b45309;
}

.sale-plan-apply {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    background: #0c1e3e;
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    transition: background 0.18s ease, transform 0.18s ease;
    white-space: nowrap;
}

.sale-plan-apply:hover {
    background: #1e3a8a;
    transform: translateX(2px);
}

.sale-plan-row.active .sale-plan-apply {
    background: #b91c1c;
}

.sale-plan-row.active .sale-plan-apply:hover {
    background: #991b1b;
}

/* Compact widget variant — tighter padding so 5 rows fit */
.sale-plan-rows-widget .sale-plan-row {
    padding: 8px 10px;
    gap: 6px;
}

.sale-plan-rows-widget .sale-plan-name {
    font-size: 0.82rem;
}

.sale-plan-rows-widget .sale-plan-code {
    font-size: 0.66rem;
    letter-spacing: 1px;
}

.sale-plan-rows-widget .sale-plan-discount {
    font-size: 0.74rem;
}

.sale-plan-rows-widget .sale-plan-apply {
    padding: 5px 9px;
    font-size: 0.7rem;
}


/* === sale-widget/sale-widget-tablet.css === */

/**
 * Sale Widget — tablet viewport overrides (max-width: 1024px).
 *
 * Layout-only adjustments. No base styling, no theme overrides, no
 * new components. If a rule isn't here, the base file's value applies.
 */

/* ============================================
   Responsive: Tablet (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .sale-popup {
        max-width: 400px;
        padding: 32px;
    }

    .sale-popup-headline {
        font-size: 1.75rem;
    }

    .sale-widget-panel {
        width: 260px;
    }
}


/* === sale-widget/sale-widget-mobile.css === */

/**
 * Sale Widget — mobile viewport overrides (max-width: 768px).
 *
 * Layout-only adjustments. Covers both the base popup/widget overrides
 * AND the plan-rows component overrides at this breakpoint.
 */

/* ============================================
   Responsive: Mobile (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    .sale-popup-overlay {
        padding: 16px;
    }

    .sale-popup {
        max-width: 100%;
        padding: 28px 24px;
    }

    .sale-popup-headline {
        font-size: 1.5rem;
    }

    .sale-countdown-timer {
        font-size: 1.5rem;
    }

    .sale-popup-cta {
        padding: 14px 32px;
        font-size: 1rem;
        width: 100%;
    }

    .sale-widget {
        bottom: 16px;
        left: 16px;
    }

    .sale-widget-panel {
        width: 240px;
        padding: 16px;
    }

    .sale-widget-toggle {
        width: 52px;
        height: 52px;
    }

    /* Plan rows — POPUP keeps inline 3-col layout (popup goes full-width on
       mobile so there's room) but tightens spacing aggressively so 5 rows
       fit above the fold. WIDGET stacks the Apply button below each row
       because the panel is too narrow for inline. */
    .sale-popup-wide {
        max-width: 100%;
        padding: 20px 18px;
    }
    .sale-popup-wide .sale-popup-headline {
        font-size: 1.3rem;
    }
    .sale-popup-wide .sale-countdown-timer {
        font-size: 1.2rem;
    }
    .sale-popup-wide .sale-plan-row {
        padding: 7px 9px;
        gap: 8px;
    }
    .sale-popup-wide .sale-plan-name {
        font-size: 0.82rem;
    }
    .sale-popup-wide .sale-plan-code {
        font-size: 0.65rem;
    }
    .sale-popup-wide .sale-plan-discount {
        font-size: 0.75rem;
    }
    .sale-popup-wide .sale-plan-apply {
        padding: 6px 10px;
        font-size: 0.72rem;
    }
    .sale-popup-wide .sale-popup-cta {
        padding: 11px 24px;
        font-size: 0.95rem;
    }

    /* Widget plan-rows — compact 2-col / 2-row layout per row so the panel
       doesn't dominate the screen. Layout per row:
           [Plan name              ] [ Discount  ]
           [Code                   ] [ Apply →   ]
       Panel fixed at 270px (was calc(100vw - 32px) max 320px = ~84% of viewport). */
    .sale-widget-panel-wide {
        width: 270px;
        max-width: 270px;
        padding: 14px;
    }
    .sale-widget-panel-wide .sale-widget-header {
        margin-bottom: 8px;
    }
    .sale-widget-panel-wide .sale-widget-title {
        font-size: 0.92rem;
    }
    .sale-widget-panel-wide .sale-widget-subtitle {
        font-size: 0.6rem;
        letter-spacing: 0.5px;
    }
    .sale-widget-panel-wide .sale-widget-countdown {
        padding: 7px 10px;
        margin-bottom: 8px;
    }
    .sale-widget-panel-wide .sale-widget-countdown-label {
        font-size: 0.68rem;
    }
    .sale-widget-panel-wide .sale-widget-countdown-timer {
        font-size: 1rem;
    }
    .sale-widget-panel-wide .sale-plan-rows {
        gap: 4px;
        margin-bottom: 8px;
    }
    .sale-widget-panel-wide .sale-plan-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 2px 8px;
        padding: 6px 8px;
    }
    .sale-widget-panel-wide .sale-plan-info {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    .sale-widget-panel-wide .sale-plan-name {
        font-size: 0.78rem;
    }
    .sale-widget-panel-wide .sale-plan-code {
        font-size: 0.6rem;
        letter-spacing: 0.8px;
        margin-top: 1px;
    }
    .sale-widget-panel-wide .sale-plan-discount {
        grid-column: 2;
        grid-row: 1;
        font-size: 0.68rem;
        text-align: right;
        align-self: center;
        order: unset;
    }
    .sale-widget-panel-wide .sale-plan-apply {
        grid-column: 2;
        grid-row: 2;
        padding: 4px 10px;
        font-size: 0.64rem;
        width: auto;
        justify-content: center;
        align-self: center;
        order: unset;
    }
    .sale-widget-panel-wide .sale-widget-cta {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
}


/* === sale-widget/sale-widget-mobile-small.css === */

/**
 * Sale Widget — small mobile viewport overrides (max-width: 480px).
 *
 * Layout-only adjustments for the tightest screens. Cascades over both
 * tablet and mobile breakpoint files. Covers base popup/widget AND
 * plan-rows component at this breakpoint.
 */

/* ============================================
   Responsive: Mobile Portrait (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    .sale-popup {
        padding: 24px 20px;
        border-radius: var(--sale-radius-sm);
    }

    .sale-popup-badge {
        font-size: 0.75rem;
        padding: 5px 12px;
    }

    .sale-popup-headline {
        font-size: 1.35rem;
    }

    .sale-popup-countdown {
        padding: 12px 16px;
    }

    .sale-countdown-timer {
        font-size: 1.35rem;
    }

    .sale-code-value {
        font-size: 1rem;
        padding: 6px 14px;
    }

    .sale-widget {
        bottom: 12px;
        left: 12px;
    }

    .sale-widget-panel {
        width: 220px;
        padding: 14px;
    }

    .sale-widget-toggle {
        width: 48px;
        height: 48px;
    }

    .sale-widget-icon {
        width: 20px;
        height: 20px;
    }

    /* Plan rows — popup-wide goes even tighter on tiny screens so 5 rows
       fit + leave room for headline, countdown, and CTA without scrolling. */
    .sale-popup-wide {
        padding: 16px 14px;
    }
    .sale-popup-wide .sale-popup-headline {
        font-size: 1.2rem;
    }
    .sale-popup-wide .sale-popup-subtitle {
        font-size: 0.85rem;
    }
    .sale-popup-wide .sale-popup-memorial-note {
        font-size: 0.78rem;
    }
    .sale-popup-wide .sale-popup-countdown {
        padding: 9px 12px;
        margin-bottom: 10px;
    }
    .sale-popup-wide .sale-countdown-timer {
        font-size: 1.1rem;
    }
    .sale-popup-wide .sale-plan-rows {
        margin-bottom: 10px;
        gap: 4px;
    }
    .sale-popup-wide .sale-plan-row {
        padding: 6px 8px;
    }
    .sale-popup-wide .sale-plan-name {
        font-size: 0.78rem;
    }
    .sale-popup-wide .sale-plan-code {
        font-size: 0.62rem;
    }
    .sale-popup-wide .sale-plan-apply {
        padding: 5px 8px;
        font-size: 0.68rem;
    }
    .sale-popup-wide .sale-popup-cta {
        padding: 10px 18px;
        font-size: 0.9rem;
    }

    /* Widget plan-rows: compact mobile layout from sale-widget-mobile.css
       already handles this viewport; nothing extra needed for ≤480px. */
}


/* === sale-widget/themes/arena.css === */

/**
 * Theme: arena — black + gold palette (Top 8 email match).
 *
 * Activates when [data-theme="arena"] is on .sale-popup-overlay or .sale-widget.
 * No media queries here — theme overrides cascade through all viewports.
 */

/* ============================================
   THEME: arena — black + gold (Top 8 email palette)
   Activates when [data-theme="arena"] is on .sale-popup-overlay or .sale-widget
   ============================================ */
.sale-popup-overlay[data-theme="arena"],
.sale-widget[data-theme="arena"] {
    --sale-primary: #fdcc05;          /* Arena gold */
    --sale-primary-hover: #f59e0b;    /* Amber */
    --sale-primary-light: #facc15;
    --sale-bg: #fffbeb;               /* Light yellow */
    --sale-bg-dark: #fef3c7;
    --sale-text: #0f172a;             /* Dark navy */
    --sale-text-light: #475569;
    --sale-shadow: 0 20px 40px rgba(15, 23, 42, 0.35);
    --sale-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.25);
}

/* Arena popup — solid navy background with gold accents (matches email) */
.sale-popup-overlay[data-theme="arena"] .sale-popup {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
}

.sale-popup-overlay[data-theme="arena"] .sale-popup-close {
    background: rgba(255, 255, 255, 0.1);
    color: #fdcc05;
}

.sale-popup-overlay[data-theme="arena"] .sale-popup-close:hover {
    background: #fdcc05;
    color: #0f172a;
}

.sale-popup-overlay[data-theme="arena"] .sale-popup-badge {
    background: #fdcc05;
    color: #0f172a;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.sale-popup-overlay[data-theme="arena"] .sale-popup-headline {
    color: #fff;
}

.sale-popup-overlay[data-theme="arena"] .sale-popup-subtitle {
    color: rgba(255, 255, 255, 0.94);
}

.sale-popup-overlay[data-theme="arena"] .sale-popup-countdown {
    background: rgba(253, 204, 5, 0.12);
    border: 1px solid rgba(253, 204, 5, 0.4);
}

.sale-popup-overlay[data-theme="arena"] .sale-countdown-label {
    color: #fdcc05;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.sale-popup-overlay[data-theme="arena"] .sale-countdown-timer {
    color: #fff;
}

.sale-popup-overlay[data-theme="arena"] .sale-popup-code {
    margin-bottom: 18px;
}

.sale-popup-overlay[data-theme="arena"] .sale-code-label {
    color: rgba(255, 255, 255, 0.88);
}

.sale-popup-overlay[data-theme="arena"] .sale-code-value {
    background: #0f172a;
    color: #fdcc05;
    border: 1px solid rgba(253, 204, 5, 0.4);
    font-family: 'SF Mono', 'Menlo', Consolas, monospace;
    letter-spacing: 2.5px;
    font-weight: 800;
}

/* Leaderboard label gold for Arena (default uses primary blue) */
.sale-popup-overlay[data-theme="arena"] .sale-leaderboard-label {
    color: #fdcc05;
}

.sale-popup-overlay[data-theme="arena"] .sale-leaderboard-label::before {
    background: #fdcc05;
    box-shadow: 0 0 8px rgba(253, 204, 5, 0.6);
}

/* Arena leaderboard rows — white cards so branch accents + points pop */
.sale-popup-overlay[data-theme="arena"] .sale-leaderboard-row {
    background: #ffffff;
    border: 1px solid transparent;
    border-left: 4px solid var(--rank-accent, #cbd5e1);
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.sale-popup-overlay[data-theme="arena"] .sale-rank-name {
    color: #0f172a;
}

.sale-popup-overlay[data-theme="arena"] .sale-rank-branch {
    color: #64748b;
    font-weight: 800;
}

.sale-popup-overlay[data-theme="arena"] .sale-rank-points-label {
    color: #94a3b8;
    font-weight: 800;
}

/* Insignia on white card — add subtle inner ring for definition */
.sale-popup-overlay[data-theme="arena"] .sale-rank-insignia {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.sale-popup-overlay[data-theme="arena"] .sale-popup-cta {
    background: #fdcc05;
    color: #0f172a;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(253, 204, 5, 0.35);
}

.sale-popup-overlay[data-theme="arena"] .sale-popup-cta:hover {
    background: #f59e0b;
    box-shadow: 0 8px 24px rgba(253, 204, 5, 0.5);
}

/* Arena widget (bottom-left) — gold toggle, navy panel */
.sale-widget[data-theme="arena"] .sale-widget-toggle {
    background: #fdcc05;
}

.sale-widget[data-theme="arena"] .sale-widget-icon {
    color: #0f172a;
}

.sale-widget[data-theme="arena"] .sale-widget-badge {
    background: #0f172a;
    color: #fdcc05;
}

.sale-widget[data-theme="arena"] .sale-widget-panel {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
}

.sale-widget[data-theme="arena"] .sale-widget-title {
    color: #fdcc05;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.sale-widget[data-theme="arena"] .sale-widget-minimize {
    background: rgba(255, 255, 255, 0.1);
    color: #fdcc05;
}

.sale-widget[data-theme="arena"] .sale-widget-minimize:hover {
    background: #fdcc05;
    color: #0f172a;
}

.sale-widget[data-theme="arena"] .sale-widget-countdown {
    background: rgba(253, 204, 5, 0.12);
    border: 1px solid rgba(253, 204, 5, 0.3);
}

.sale-widget[data-theme="arena"] .sale-widget-countdown-label {
    color: #fdcc05;
}

.sale-widget[data-theme="arena"] .sale-widget-countdown-timer {
    color: #fff;
}

.sale-widget[data-theme="arena"] .sale-widget-code {
    color: rgba(255, 255, 255, 0.7);
}

.sale-widget[data-theme="arena"] .sale-widget-code strong {
    background: #0f172a;
    color: #fdcc05;
    border: 1px solid rgba(253, 204, 5, 0.4);
    font-family: 'SF Mono', 'Menlo', Consolas, monospace;
    letter-spacing: 1.5px;
    font-weight: 800;
}

.sale-widget[data-theme="arena"] .sale-widget-prize-hint {
    color: rgba(255, 255, 255, 0.7);
}

.sale-widget[data-theme="arena"] .sale-widget-prize-hint strong {
    color: #fdcc05;
}

.sale-widget[data-theme="arena"] .sale-widget-cta {
    background: #fdcc05;
    color: #0f172a;
    font-weight: 800;
}

.sale-widget[data-theme="arena"] .sale-widget-cta:hover {
    background: #f59e0b;
}

/* Wider popup for Arena to fit giveaway prize list comfortably */
.sale-popup-overlay[data-theme="arena"] .sale-popup {
    max-width: 460px;
}


/* === sale-widget/themes/memorial.css === */

/**
 * Theme: memorial — red / white / navy with gold accent (Memorial Day 2026).
 *
 * Activates when [data-theme="memorial"] is on .sale-popup-overlay or .sale-widget.
 * No media queries here — theme overrides cascade through all viewports.
 */

/* ============================================
   THEME: memorial — red / white / navy with gold accent
   Activates when [data-theme="memorial"] is on .sale-popup-overlay or .sale-widget
   ============================================ */
.sale-popup-overlay[data-theme="memorial"],
.sale-widget[data-theme="memorial"] {
    --sale-primary: #b91c1c;          /* Red-700 */
    --sale-primary-hover: #991b1b;    /* Red-800 */
    --sale-primary-light: #ef4444;    /* Red-500 */
    --sale-bg: #fef2f2;               /* Red-50 */
    --sale-bg-dark: #fee2e2;          /* Red-100 */
    --sale-text: #0c1e3e;             /* Deep navy */
    --sale-text-light: #475569;       /* Slate-600 */
    --sale-shadow: 0 22px 44px rgba(12, 30, 62, 0.28);
    --sale-shadow-sm: 0 4px 14px rgba(12, 30, 62, 0.18);
}

.sale-popup-overlay[data-theme="memorial"] .sale-popup {
    background: #ffffff;
    border-top: 6px solid #b91c1c;
}

.sale-popup-overlay[data-theme="memorial"] .sale-popup-badge {
    background: #b91c1c;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.sale-popup-overlay[data-theme="memorial"] .sale-popup-headline {
    color: #0c1e3e;
    font-weight: 800;
}

.sale-popup-overlay[data-theme="memorial"] .sale-popup-subtitle {
    color: #334155;
    font-weight: 600;
}

.sale-popup-overlay[data-theme="memorial"] .sale-popup-memorial-note {
    color: #64748b;
    font-style: italic;
    font-size: 0.9rem;
    margin: -2px 0 14px;
    line-height: 1.4;
    text-align: center;
}

.sale-popup-overlay[data-theme="memorial"] .sale-popup-countdown {
    background: #fef2f2;
    border: 1px solid #fee2e2;
}

.sale-popup-overlay[data-theme="memorial"] .sale-countdown-label {
    color: #b91c1c;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.sale-popup-overlay[data-theme="memorial"] .sale-countdown-timer {
    color: #0c1e3e;
}

.sale-popup-overlay[data-theme="memorial"] .sale-popup-cta,
.sale-widget[data-theme="memorial"] .sale-widget-cta {
    background: #0c1e3e;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.3px;
    box-shadow: 0 6px 18px rgba(12, 30, 62, 0.35);
}

.sale-popup-overlay[data-theme="memorial"] .sale-popup-cta:hover,
.sale-widget[data-theme="memorial"] .sale-widget-cta:hover {
    background: #1e3a8a;
    box-shadow: 0 8px 22px rgba(12, 30, 62, 0.45);
}

/* Memorial widget — navy panel with red toggle */
.sale-widget[data-theme="memorial"] .sale-widget-toggle {
    background: #b91c1c;
}

.sale-widget[data-theme="memorial"] .sale-widget-icon {
    color: #ffffff;
}

.sale-widget[data-theme="memorial"] .sale-widget-badge {
    background: #0c1e3e;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.sale-widget[data-theme="memorial"] .sale-widget-panel {
    background: #ffffff;
    border-top: 4px solid #b91c1c;
}

.sale-widget[data-theme="memorial"] .sale-widget-title {
    color: #0c1e3e;
    font-weight: 800;
}

.sale-widget[data-theme="memorial"] .sale-widget-subtitle {
    color: #b91c1c;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    display: block;
    margin-top: 2px;
}

.sale-widget[data-theme="memorial"] .sale-widget-minimize {
    background: #fef2f2;
    color: #b91c1c;
}

.sale-widget[data-theme="memorial"] .sale-widget-minimize:hover {
    background: #b91c1c;
    color: #ffffff;
}

.sale-widget[data-theme="memorial"] .sale-widget-countdown {
    background: #fef2f2;
    border: 1px solid #fee2e2;
}

.sale-widget[data-theme="memorial"] .sale-widget-countdown-label {
    color: #b91c1c;
    font-weight: 700;
}