/* Exit-intent popup - 2026/2027 app + fantasy campaign.
   Base .exit-popup-* classes live in engagement-features.css. */

/* The mobile variant now renders on phones (previously the popup never
   rendered below 992px). Its content - icon + title + message + three
   feature rows + CTA + two link rows - is taller than the old desktop-only
   content and can overflow a short landscape viewport (e.g. 320x568),
   pushing the close button off-screen. Cap the height and let it scroll. */
.exit-popup-content {
    max-height: 90vh;
    overflow-y: auto;
}

.exit-popup-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0;
    text-align: left;
    background: linear-gradient(135deg, #f0fff0 0%, #e8f5e9 100%);
    padding: 15px 20px;
    border-radius: 12px;
    border-left: 4px solid #007105;
}

.exit-popup-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #333;
}

.feature-icon { font-size: 18px; }

.exit-popup-cta-primary {
    background: linear-gradient(135deg, #ff6b00 0%, #ff8c00 100%) !important;
    animation: pulse-cta 2s infinite;
    font-size: 20px !important;
    padding: 18px 45px !important;
}

.exit-popup-cta-primary:hover {
    background: linear-gradient(135deg, #e65c00 0%, #e67c00 100%) !important;
}

@keyframes pulse-cta {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(255, 107, 0, 0.4); }
    50% { transform: scale(1.02); box-shadow: 0 6px 25px rgba(255, 107, 0, 0.6); }
}

.exit-popup-links {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.exit-popup-login-link {
    color: #007105 !important;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.exit-popup-login-link:hover { color: #005504 !important; text-decoration: underline; }
.exit-popup-login-link strong { text-decoration: underline; }

.exit-popup-fantasy-link {
    color: #1a73e8 !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.exit-popup-fantasy-link:hover { color: #1557b0 !important; }
.exit-popup-divider { color: #ccc; }

@media (max-width: 768px) {
    .exit-popup-features { padding: 12px 15px; }
    .exit-popup-feature { font-size: 13px; }
    .exit-popup-cta-primary { font-size: 16px !important; padding: 15px 30px !important; }
    .exit-popup-links { flex-direction: column; gap: 10px; }
    .exit-popup-divider { display: none; }
}

/* Exactly one variant is revealed by exit-intent-popup.js. Both are rendered
   server-side so the markup stays cacheable and nothing shifts on reveal. */
.exit-popup-variant { display: none; }
.exit-popup-variant.is-active { display: block; }

@media (max-width: 480px) {
    .exit-popup-cta-primary {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 14px 20px !important;
        font-size: 15px !important;
    }
    .exit-popup-title { font-size: 22px; }
    .exit-popup-message { font-size: 14px; }
    .exit-popup-icon { font-size: 44px; margin-bottom: 12px; }
}