/* ==========================================================================
   433 Recirculation — Mobile Sticky Strip
   Premium editorial sports-news component.
   ========================================================================== */

/* Hidden on desktop */
.f433-recirc-card {
    display: none;
}

@media (max-width: 768px) {
    /* ---- Card Container (Strip Variant) ---- */
    .f433-recirc-card {
        display: flex;
        align-items: stretch;

        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px) + var(--f433-inapp-offset, 0px));
        z-index: 999999;

        /* Solid Editorial Design */
        background: #0E1116; /* Dark background */
        border: none;
        border-radius: 0;
        box-shadow: none;
        
        overflow: hidden;
        pointer-events: none;

        /* Slide-up animation — NO fade */
        opacity: 1;
        transform: translateY(100%);
        transition: transform 0.47s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .f433-recirc-card:active {
        background: #000000;
    }

    /* ---- Visible State ---- */
    .f433-recirc-card.is-visible {
        transform: translateY(0);
        pointer-events: auto;
    }

    /* ---- Cookie banner overlap — slide out ---- */
    .f433-recirc-card.is-overlapped {
        transform: translateY(100%);
        pointer-events: none;
    }

    /* ---- Hidden when nav is hidden (footer visible) ---- */
    .f433-recirc-card.is-nav-hidden {
        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--f433-inapp-offset, 0px));
    }

    /* ---- Inner Link Wrapper ---- */
    .f433-recirc-card-link {
        display: flex;
        flex-grow: 1;
        align-items: stretch;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        min-width: 0;
    }

    /* ---- Close Button ---- */
    .f433-recirc-close {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 16px;
        background: transparent;
        border: none;
        color: #ffffff;
        opacity: 0.7;
        cursor: pointer;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }

    /* ---- Left Accent Stripe ---- */
    .f433-recirc-stripe {
        width: 3px;
        background: #F5C542;
        flex-shrink: 0;
    }

    .f433-recirc-stripe--red {
        background: #e80f0f;
    }

    /* ---- Content Wrapper ---- */
    .f433-recirc-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 12px 14px;
        min-width: 0;
    }

    /* ---- Label Row ---- */
    .f433-recirc-label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: "Inter", sans-serif;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: -.01em;
        color: #A7B0BE;
        line-height: 1;
    }

    /* ---- Title Row ---- */
    .f433-recirc-title {
        font-family: "Inter", sans-serif;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.25;
        color: #F8FAFC;
        
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ---- Dot Indicator ---- */
    .f433-recirc-dot {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .f433-recirc-dot--static {
        background: #F5C542;
    }

    .f433-recirc-dot--pulse_red {
        background: #e80f0f;
        box-shadow: 0 0 0 0 rgba(232, 15, 15, 0.7);
        animation: f433-recirc-pulse 1.5s ease-in-out infinite;
    }

    @keyframes f433-recirc-pulse {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(232, 15, 15, 0.7); }
        50% { transform: scale(1); box-shadow: 0 0 0 4px rgba(232, 15, 15, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(232, 15, 15, 0); }
    }
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
    .f433-recirc-card {
        transition: none !important;
    }

    .f433-recirc-dot--pulse_red {
        animation: none;
    }
}