/*
 * BuyLowTraders Hero Section — Mobile Responsive
 * Cargado DESPUÉS del stylesheet principal para garantizar override.
 * Aplica SOLO a smartphones (≤600px).
 * Usa !important para vencer conflictos de cascada, especificidad y Elementor.
 *
 * REGLA: todos los selectores están prefijados con .blt-hero-section
 * para no interferir con el resto del plugin ni con estilos de Elementor.
 */

/* =============================================================
   SIGNAL HUB BUTTON
   ============================================================= */

.blt-hero-section .blt-signalhub-btn {
    background: transparent;
    border: 1px solid rgba(0, 247, 255, 0.55);
    color: #00f7ff;
    margin-left: 8px;
}
.blt-hero-section .blt-signalhub-btn:hover {
    background: rgba(0, 247, 255, 0.12);
    border-color: #00f7ff;
}

/* =============================================================
   GLOBAL TAP-HIGHLIGHT KILL (all sizes — applies on any touch device).
   The browser default white/blue flash on tap looks ugly on dark UIs.
   Replaced with a subtle cyan glow on :active for clear feedback.
   ============================================================= */
.blt-hero-section a,
.blt-hero-section button,
.blt-hero-section .blt-register-btn,
.blt-hero-section .blt-signalhub-btn,
.blt-hero-section .blt-hud-card,
.blt-hero-section .blt-sig-row {
    -webkit-tap-highlight-color: transparent !important;
}

/* =============================================================
   SMARTPHONES ≤ 600px
   ============================================================= */
@media screen and (max-width: 600px) {

    /* ── 1. Contenedor raíz — forzar viewport width ─────────────
       PROBLEMA: en Elementor el hero vive dentro de una columna que
       puede ser más angosta que el viewport en portrait. En landscape
       hay más espacio y se ve bien. La solución es romper fuera de esa
       columna y ocupar 100vw.                                        */

    .blt-hero-section,
    .elementor-widget-container .blt-hero-section,
    .elementor .blt-hero-section,
    .elementor-widget-shortcode .blt-hero-section {
        /* Ocupa el 100% del viewport, no solo de su columna */
        width: 100vw !important;
        max-width: 100vw !important;
        /* Centra respecto al viewport rompiendo el flujo de columna */
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        /* Evitar scroll horizontal */
        overflow-x: hidden !important;
        padding: 60px 12px 20px !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .blt-hero-section .blt-dashboard-hud {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    /* ── 2. Header ───────────────────────────────────────────── */

    .blt-hero-section .blt-hud-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        padding-bottom: 12px !important;
        margin-bottom: 8px !important;
    }

    .blt-hero-section .blt-hud-header .header-left,
    .blt-hero-section .blt-hud-header .header-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }

    /* Center title, tagline AND the "TRACK RECORD" pill on mobile so the
       header-left column reads as a single centered hero block instead of
       a left-aligned text block under the centered MARKET INTELLIGENCE. */
    .blt-hero-section .blt-hud-header .header-left {
        align-items: center !important;
        text-align: center !important;
    }
    .blt-hero-section .blt-hud-header .header-left .blt-hud-title,
    .blt-hero-section .blt-hud-header .header-left .blt-hero-tagline {
        text-align: center !important;
        width: 100% !important;
    }
    .blt-hero-section .blt-hud-header .header-left .blt-live-indicator {
        margin-left: auto !important;
        margin-right: auto !important;
        align-self: center !important;
    }

    /* Header right: greeting on its OWN row (full width, centered), then
       the two CTA buttons SIDE BY SIDE below. Achieved with flex-row +
       wrap, where the greeting takes 100% basis (forces wrap to next line)
       and each button takes equal share of the remaining row.
       Works for 1 OR 2 buttons (the second is optional). */
    .blt-hero-section .blt-hud-header .header-right {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    .blt-hero-section .blt-hud-header .header-right .blt-hero-greeting {
        flex: 1 1 100% !important;     /* full row → forces buttons to wrap below */
        text-align: center !important;
        margin: 0 0 4px !important;
        font-size: 0.95rem !important;
    }
    .blt-hero-section .blt-hud-header .header-right .blt-hero-name {
        font-weight: 800 !important;
    }

    .blt-hero-section .blt-hud-title {
        font-size: 1.3rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.2 !important;
    }

    .blt-hero-section .blt-hero-tagline {
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
        white-space: normal !important;
        word-break: break-word !important;
        margin-top: 4px !important;
        opacity: 0.85 !important;
    }

    /* Buttons: split the row equally (each ~50%) when both exist, full
       width when only one. min-width:0 so flex can actually shrink them
       (text wraps in 2 lines if necessary instead of overflowing). */
    .blt-hero-section .blt-register-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 12px 10px !important;
        font-size: 0.78rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.4px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        text-align: center !important;
        line-height: 1.15 !important;
        min-height: 44px !important;
        border-radius: 10px !important;
        /* Kill the default white tap-flash on iOS / Android. */
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
        -webkit-touch-callout: none !important;
        user-select: none !important;
    }
    /* Custom press feedback: brief opacity dim + tiny scale so the user
       gets clear visual confirmation without the chunky default flash. */
    .blt-hero-section .blt-register-btn:active {
        transform: scale(0.97) !important;
        opacity: 0.88 !important;
        transition: transform 0.08s ease, opacity 0.08s ease !important;
    }
    /* Focus from keyboard navigation only — do NOT show on tap. */
    .blt-hero-section .blt-register-btn:focus { outline: none !important; }
    .blt-hero-section .blt-register-btn:focus-visible {
        outline: 2px solid rgba(0, 247, 255, 0.6) !important;
        outline-offset: 2px !important;
    }

    /* Arrow inside button: smaller and tighter on mobile so text leads. */
    .blt-hero-section .blt-register-btn .btn-arrow,
    .blt-hero-section .blt-register-btn span:last-child {
        font-size: 0.95em !important;
        margin-left: 4px !important;
    }

    /* Signal Hub button on mobile: subtle outline so it reads as
       secondary CTA next to the primary Premium button. */
    .blt-hero-section .blt-signalhub-btn {
        margin-left: 0 !important;
        background: rgba(0, 247, 255, 0.06) !important;
        border: 1px solid rgba(0, 247, 255, 0.4) !important;
        color: #00f7ff !important;
    }
    .blt-hero-section .blt-signalhub-btn:hover,
    .blt-hero-section .blt-signalhub-btn:active {
        background: rgba(0, 247, 255, 0.15) !important;
    }

    /* Very narrow phones (≤360px): tighter padding/letter-spacing so
       the side-by-side layout still fits "ACCESO PREMIUM" + "SIGNAL HUB". */
    @media screen and (max-width: 360px) {
        .blt-hero-section .blt-register-btn {
            font-size: 0.72rem !important;
            padding: 11px 8px !important;
            letter-spacing: 0.2px !important;
        }
        .blt-hero-section .blt-register-btn .btn-arrow {
            display: none !important;
        }
    }

    /* ── 3. Grid principal ───────────────────────────────────── */

    .blt-hero-section .blt-hud-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        /* Solo horizontal para no ocultar cards largas verticalmente */
        overflow-x: hidden !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
        /* Anular grid-template heredado del breakpoint tablet (900px) */
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        grid-template-areas: unset !important;
    }

    /* ── 4. Cards — todas al 100% de ancho ──────────────────── */

    .blt-hero-section .blt-hud-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 14px 16px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
        min-height: unset !important;
        border-radius: 12px !important;
    }

    /* Orden de aparición en mobile */
    .blt-hero-section .blt-area-win     { order: 1 !important; }
    .blt-hero-section .blt-area-signals { order: 2 !important; }
    .blt-hero-section .blt-area-lastopt { order: 3 !important; }
    .blt-hero-section .blt-area-news    { order: 4 !important; }
    .blt-hero-section .blt-area-gain    { order: 5 !important; }
    .blt-hero-section .blt-area-weekly  { order: 6 !important; }
    .blt-hero-section .blt-area-dist    { order: 7 !important; }

    .blt-hero-section .blt-card-title {
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 0.75rem !important;
    }

    /* ── 5. Señales — wrapper, última señal y feed ───────────── */

    .blt-hero-section .blt-signals-wrapper {
        max-height: none !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        gap: 8px !important;
    }

    /* ── Última señal destacada — layout compacto en mobile ──
       Antes: meta ocupaba 100% del row → P&L caía debajo y cuando había
       badge CRYPTO, el "ESTA SEMANA" también se iba a otra línea →
       card altísima desperdiciando espacio.
       Ahora: meta + P&L EN UN SOLO ROW (meta flex:1 con min-width:0,
       P&L flex-shrink:0). Status se oculta (el color del % ya indica
       win/loss). Badges se mantienen inline con nowrap forzado. */
    .blt-hero-section .blt-latest-signal-card {
        padding: 12px 14px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .blt-hero-section .blt-ls-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        width: 100% !important;
        align-items: center !important;
    }

    .blt-hero-section .blt-ls-meta {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        gap: 3px !important;
    }

    .blt-hero-section .blt-ls-ticker {
        font-size: 1.1rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .blt-hero-section .blt-ls-type {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    /* Badges row in the hero latest card: wraps cleanly on mobile */
    .blt-hero-section .blt-ls-badges {
        gap: 5px !important;
        margin-top: 4px !important;
    }

    /* Status text is redundant with the colored % — hide on mobile to
       reclaim horizontal space for the percent. */
    .blt-hero-section .blt-ls-status {
        display: none !important;
    }

    /* P&L stays inline with meta on the same row, big and prominent. */
    .blt-hero-section .blt-ls-pct {
        font-size: 1.7rem !important;
        white-space: nowrap !important;
        width: auto !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
    }
    .blt-hero-section .blt-ls-pct span:last-child {
        font-size: 0.75em !important;
        margin-left: 2px !important;
    }
    .blt-hero-section .blt-ls-date {
        font-size: 0.62rem !important;
        margin-top: 1px !important;
    }

    /* Filas del feed de señales */
    .blt-hero-section .blt-glass-card {
        overflow-x: hidden !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .blt-hero-section .blt-sig-row {
        display: flex !important;
        width: 100% !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        align-items: center !important;
    }

    .blt-hero-section .blt-sig-left {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Texto del ticker y tipo: ellipsis en lugar de overflow */
    .blt-hero-section .blt-sig-ticker {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        font-size: 0.9rem !important;
    }

    .blt-hero-section .blt-sig-type {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        font-size: 0.68rem !important;
    }

    .blt-hero-section .blt-sig-right {
        flex-shrink: 0 !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    .blt-hero-section .blt-sig-pct {
        font-size: 1rem !important;
        white-space: nowrap !important;
    }

    .blt-hero-section .blt-sig-date {
        font-size: 0.6rem !important;
        white-space: nowrap !important;
    }

    /* Unified tags in hero: compact sizing for mobile */
    .blt-hero-section .blt-tag {
        height: 15px !important;
        font-size: 7px !important;
        padding: 0 5px !important;
        letter-spacing: 0.4px !important;
    }
    .blt-hero-section .blt-tag-lg {
        height: 17px !important;
        font-size: 8px !important;
        padding: 0 6px !important;
    }
    /* Badges row in feed cards: wrap on mobile if tight */
    .blt-hero-section .blt-sig-badges {
        gap: 4px !important;
        margin-top: 3px !important;
    }

    /* ── 6. Big numbers y estadísticas ──────────────────────── */

    .blt-hero-section .blt-big-number {
        font-size: 2rem !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }

    .blt-hero-section .blt-circular-stat {
        width: 90px !important;
        height: 90px !important;
    }

    /* ── 7. Asset Mix (distribución) ─────────────────────────── */

    .blt-hero-section .blt-dist-bars-vertical {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Cada columna de barras: igual de ancha, sin overflow */
    .blt-hero-section .dist-col {
        flex: 1 1 30% !important;
        min-width: 0 !important;
        max-width: 33% !important;
        overflow: hidden !important;
    }

    /* ── 8. Last Options WIN ─────────────────────────────────── */

    .blt-hero-section .blt-lastopt-inner {
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .blt-hero-section .blt-lastopt-info {
        min-width: 0 !important;
        overflow: hidden !important;
        flex: 1 !important;
    }

    .blt-hero-section .blt-lastopt-ticker {
        font-size: 1.2rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .blt-hero-section .blt-lastopt-stats {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .blt-hero-section .blt-lastopt-pnl {
        width: 100% !important;
        text-align: left !important;
    }

    .blt-hero-section .blt-lastopt-pnl .pnl-pct {
        font-size: 1.4rem !important;
    }

    /* ── 9. Noticias / Blog ───────────────────────────────────── */

    .blt-hero-section .blt-news-container {
        flex-direction: column !important;
        overflow-x: hidden !important;
        width: 100% !important;
    }

    .blt-hero-section .blt-news-item {
        overflow: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        padding-right: 0 !important;
        padding-bottom: 12px !important;
        /* flex row interno: fecha + contenido */
        display: flex !important;
        gap: 12px !important;
    }

    .blt-hero-section .blt-news-item:last-child {
        border-bottom: none !important;
    }

    /* Fecha: tamaño compacto pero visible */
    .blt-hero-section .news-date {
        min-width: 40px !important;
        font-size: 0.65rem !important;
        flex-shrink: 0 !important;
    }

    /* Contenido: ocupa el resto y no desborda */
    .blt-hero-section .news-content {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .blt-hero-section .news-headline {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        white-space: normal !important;
        font-size: 0.88rem !important;
    }

    /* Excerpt: visible pero compacto (NO ocultar) */
    .blt-hero-section .news-excerpt {
        display: -webkit-box !important;
        font-size: 0.72rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        white-space: normal !important;
    }

    /* ── 10. Ticker legal (footer) ───────────────────────────── */

    .blt-hero-section .blt-legal-ticker {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        margin-top: 20px !important;
        width: 100% !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }

    /* ── 11. SVG / imágenes ──────────────────────────────────── */

    .blt-hero-section svg,
    .blt-hero-section img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* SVG del Win Rate: mantener cuadrado */
    .blt-hero-section .blt-circular-stat svg {
        width: 90px !important;
        height: 90px !important;
    }

    /* =============================================================
       MOBILE TOUCH / SCROLL FIX
       Síntoma reportado: en mobile el swipe vertical sobre las cards
       del hero se sentía "estirable" y bloqueaba el scroll de la
       página. Causas combinadas:
         · :hover { transform: translateY(-3px) } se dispara con tap
         · backdrop-filter + will-change + translateZ(0) saturan el
           compositor GPU y vuelven el touch laggy
         · animación bltCardEnter (0.6s + stagger) sigue corriendo
           cuando el usuario aterriza e intenta scrollear
         · faltaba touch-action explícito
       Estos overrides aplican SOLO en mobile.
       ============================================================= */

    .blt-hero-section,
    .blt-hero-section .blt-dashboard-hud,
    .blt-hero-section .blt-hud-grid,
    .blt-hero-section .blt-hud-card,
    .blt-hero-section .blt-glass-card,
    .blt-hero-section .blt-latest-signal-card,
    .blt-hero-section .blt-signals-wrapper {
        touch-action: pan-y !important;
    }

    /* Liberar el compositor: sin blur ni capa GPU dedicada en mobile */
    .blt-hero-section .blt-dashboard-hud {
        will-change: auto !important;
        transform: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* :hover en touch screens "se pega" al tocar la card y produce el
       efecto estirable. Anular hover-transform en mobile. */
    .blt-hero-section .blt-hud-card,
    .blt-hero-section .blt-hud-card:hover,
    .blt-hero-section .blt-hud-card:active,
    .blt-hero-section .blt-hud-card:focus,
    .blt-hero-section .blt-glass-card:hover,
    .blt-hero-section .blt-latest-signal-card:hover {
        transform: none !important;
        transition: none !important;
    }

    /* Desactivar la animación de entrada escalonada — corría mientras
       el usuario intentaba hacer scroll y robaba frames GPU. */
    .blt-hero-section .blt-hud-grid > .blt-hud-card {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* =============================================================
   MUY PEQUEÑO — iPhone SE y similares (≤375px)
   ============================================================= */
@media screen and (max-width: 375px) {

    /* Mantener el 100vw fix en pantallas muy pequeñas */
    .blt-hero-section {
        padding: 50px 8px 16px !important;
    }

    .blt-hero-section .blt-dashboard-hud {
        padding: 10px !important;
    }

    .blt-hero-section .blt-hud-card {
        padding: 10px !important;
    }

    .blt-hero-section .blt-hud-title {
        font-size: 1.1rem !important;
    }

    .blt-hero-section .blt-big-number {
        font-size: 1.8rem !important;
    }

    .blt-hero-section .blt-ls-pct {
        font-size: 1.4rem !important;
    }

    .blt-hero-section .blt-register-btn {
        font-size: 0.7rem !important;
        padding: 8px 12px !important;
    }
}