/**
 * Talacote Freemium v2 — banners + modals styles
 * Pinned to bottom-LEFT (matches the legacy v1 badge position the user
 * is used to). Non-blocking for the rest of the UI.
 */

.tc-fm-banner {
    position: fixed;
    z-index: var(--tc-z-modal-fm, 9998);
    /* H6 audit May 2026: iOS Safari rubber-band scroll lock workaround */
    will-change: transform;
    transform: translateZ(0);
    left: 20px;
    bottom: 20px;
    max-width: 380px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.4;
    animation: tcFmSlideIn .35s cubic-bezier(.2,.9,.2,1);
}
@keyframes tcFmSlideIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Audit fix Apr 2026 — `silent` is the discreet always-visible state.
   Subtle, low-contrast, no urgency — just informs the user that the
   freemium counter exists. Visible from use 0/15 onward. */
.tc-fm-banner--silent {
    background: rgba(13, 21, 16, 0.85);
    border: 1px solid rgba(46, 204, 113, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 0.85rem;
    padding: 10px 14px;
    opacity: 0.9;
}
.tc-fm-banner--silent:hover { opacity: 1; }

.tc-fm-banner--banner   { background: linear-gradient(135deg, #1f6e3d, #145228); border: 1px solid #2ecc71; }
.tc-fm-banner--critical { background: linear-gradient(135deg, #b8731a, #7a4a0d); border: 1px solid #f1c40f; }
.tc-fm-banner--register,
.tc-fm-banner--premium_block {
    background: linear-gradient(135deg, #b53636, #6e2020);
    border: 1px solid #e74c3c;
}

.tc-fm-banner__icon {
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
}
.tc-fm-banner__msg {
    flex: 1;
    color: #fff;
}
.tc-fm-banner__cta {
    display: inline-block;
    padding: 6px 12px;
    background: #fff;
    color: #1a1a1a !important;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.tc-fm-banner__cta:hover { transform: translateY(-1px); }
.tc-fm-banner__cta--soft {
    background: rgba(255,255,255,0.15);
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.4);
}

@media (max-width: 600px) {
    .tc-fm-banner {
        /* Compact, ancré bottom-left, pas full-width.
           Audit Apr 2026: was stretching full viewport with both
           left + right at 10px — hideous on mobile. Now auto-width
           with a sane max so les CTA states (banner/critical/register)
           wrappent leur texte au lieu de hugger les bords.
           May 2026 fix: stack vertically (text on top, CTA below) on
           narrow screens — the previous horizontal layout had the
           message wrapping to 5+ lines while the nowrap CTA button
           overflowed the right edge of the viewport. */
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: calc(100vw - 20px);
        font-size: 0.85rem;
        padding: 12px 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .tc-fm-banner__msg {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    .tc-fm-banner__cta {
        align-self: stretch;
        text-align: center;
        padding: 10px 14px;
        font-size: 0.9rem;
        white-space: normal;
    }
    /* Hide the icon on the stacked layout — saves a row of vertical
       space and the message itself is clear enough without it. */
    .tc-fm-banner__icon {
        display: none;
    }
    /* Le silent state (compteur discret 15/15) doit rester très compact
       et HORIZONTAL (X/Y + label seulement, pas de CTA) — il n'a pas le
       problème d'overflow car pas de bouton. */
    .tc-fm-banner--silent {
        max-width: 220px;
        right: auto;
        font-size: 0.8rem;
        padding: 8px 12px;
        flex-direction: row;
        align-items: center;
    }
    .tc-fm-banner--silent .tc-fm-banner__icon {
        display: inline-block;
    }
}

/* ----- Modal ----- */

.tc-fm-modal {
    position: fixed;
    inset: 0;
    z-index: var(--tc-z-modal-fm, 9998);
    /* H6 audit May 2026: iOS scroll lock workaround */
    will-change: transform;
    transform: translateZ(0);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 14, 10, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .2s ease;
    padding: 20px;
}
.tc-fm-modal.is-open { opacity: 1; }

.tc-fm-modal__card {
    background: linear-gradient(160deg, #13302a, #0a1f19);
    border: 1px solid rgba(46, 204, 113, 0.4);
    border-radius: 16px;
    padding: 32px 36px;
    max-width: 480px;
    width: 100%;
    color: #fff;
    text-align: center;
    position: relative;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    transform: translateY(15px);
    transition: transform .2s ease;
}
.tc-fm-modal.is-open .tc-fm-modal__card { transform: translateY(0); }

.tc-fm-modal__close {
    position: absolute;
    top: 8px; right: 12px;
    background: transparent;
    border: 0;
    font-size: 1.8rem;
    color: #c0d4c7;
    cursor: pointer;
    line-height: 1;
}
.tc-fm-modal__close:hover { color: #fff; }

.tc-fm-modal__card h2 {
    margin: 0 0 12px;
    font-size: 1.5rem;
    color: #fff;
}
.tc-fm-modal__card p {
    color: #c0d4c7;
    margin: 0 0 24px;
    line-height: 1.6;
}

/* Apr 2026 — Tâche 18 (Option C): inline benefits + price block.
   Sits between the body copy and the CTA so the value prop is
   visible in the same scan as the buy button. Uses the same green
   accent as the rest of the theme so it reads native to the modal. */
.tc-fm-modal__benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    /* Tâche 30: start = reading-flow start, auto-flips for Arabic */
    text-align: start;
    display: inline-block;
    max-width: 100%;
}
.tc-fm-modal__benefits li {
    position: relative;
    padding: 6px 0 6px 26px;
    color: #e8f5e9;
    font-size: 0.92rem;
    line-height: 1.45;
}
.tc-fm-modal__benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 6px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background: #2ecc71;
    color: #0a0f1a;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}
.tc-fm-modal__price {
    margin: 0 0 22px;
    padding: 12px 16px;
    background: rgba(46, 204, 113, 0.08);
    border: 1px solid rgba(46, 204, 113, 0.25);
    border-radius: 10px;
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}
.tc-fm-modal__price-amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: #f1c40f;
    line-height: 1;
}
.tc-fm-modal__price-suffix {
    font-size: 0.78rem;
    color: #dde6f0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tc-fm-modal__cta {
    display: inline-block;
    padding: 14px 28px;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: #fff !important;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.95rem;
    transition: all .15s ease;
}
.tc-fm-modal__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(46,204,113,0.35);
}

/* Secondary "see all features" link below the primary Stripe CTA — only
   rendered when the modal is deeplinking to Stripe (audit fix #9). */
.tc-fm-modal__secondary {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.85rem;
    color: #dde6f0;
    text-decoration: underline;
}
.tc-fm-modal__secondary:hover { color: #c0d4c7; }

/* ----- "Already viewed" badge for prediction pages ----- */

.tc-fm-already-seen {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(46,204,113,0.15);
    color: #2ecc71;
    border-radius: 12px;
    font-size: 0.8rem;
    /* Tâche 30: inline-start gap → preceding element side in any
       direction. The badge sits *after* a title in DOM order, so
       in LTR the gap is on the left, in RTL it's on the right. */
    margin-inline-start: 8px;
    font-weight: 600;
}

/* ----- Announcement banner (pre-launch) ----- */

.tc-fm-announce {
    background: linear-gradient(90deg, #f1c40f, #d4ac0d);
    color: #1a1a1a;
    text-align: center;
    padding: 10px 16px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
}
.tc-fm-announce a {
    color: #1a1a1a;
    font-weight: 700;
    text-decoration: underline;
}

/* =====================================================
   STICKY POST-DISMISS BANNER — Tâche 40 (Apr 2026), Option C
   Slides up from bottom after the user dismisses the paywall modal.
   Non-blocking, dismissable, sessionStorage-deduped.
===================================================== */
.tc-fm-sticky {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: 720px;
    margin: 0 auto;
    background: linear-gradient(135deg, #131b2e 0%, #0f1828 100%);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
    z-index: 9990;
    color: #edf3ff;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.tc-fm-sticky.is-open {
    transform: translateY(0);
    opacity: 1;
}
.tc-fm-sticky__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.tc-fm-sticky__label {
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
    min-width: 200px;
}
.tc-fm-sticky__cta {
    background: #2ecc71;
    color: #041a09;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, transform 0.1s;
}
.tc-fm-sticky__cta:hover { background: #27ae60; transform: translateY(-1px); }
.tc-fm-sticky__close {
    background: transparent;
    border: 0;
    color: #dde6f0;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s;
}
.tc-fm-sticky__close:hover { color: #fff; }
.tc-fm-sticky__cta:focus-visible,
.tc-fm-sticky__close:focus-visible {
    outline: 2px solid #2ecc71;
    outline-offset: 2px;
}
@media (max-width: 600px) {
    .tc-fm-sticky { left: 8px; right: 8px; bottom: 8px; padding: 10px 12px; }
    .tc-fm-sticky__label { font-size: 12px; }
    .tc-fm-sticky__cta { padding: 7px 11px; font-size: 12px; }
}