/* =====================================================
   REDitors — Comprehensive Mobile Fixes
   Fixes all known mobile UI/layout issues across
   all pages. Load LAST in the stylesheet chain.
   ===================================================== */

/* ─────────────────────────────────────────────────────
   1. NAV — Hide language dropdown on mobile
   The hamburger menu already handles navigation.
   Keeping the lang trigger clutters the compact nav.
───────────────────────────────────────────────────── */
@media (max-width: 850px) {
    #langDropdown {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────────────
   2. AOS — Prevent black / invisible-content flash
   AOS sets [data-aos] elements to opacity:0 then
   animates them in. On mobile this causes a blank
   screen while AOS JS is still loading (deferred).
   On mobile we just show everything immediately.
───────────────────────────────────────────────────── */
@media (max-width: 850px) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition-property: none !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }
    /* Keep the class-applied state clean too */
    [data-aos].aos-animate {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ─────────────────────────────────────────────────────
   3. FEATURES PAGE — layout fixes
───────────────────────────────────────────────────── */

/* Reduce excessive top padding on mobile (nav is 64px,
   160px of bare dark space looks like a black screen) */
@media (max-width: 768px) {
    section.feat-section#features {
        padding-top: 96px !important;
    }
}

/* Silence Remover stats dashboard — 2-col → 1-col */
@media (max-width: 600px) {
    .sr-dashboard {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* Title Animator grid — 2-col → 1-col */
@media (max-width: 600px) {
    .ta-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* Feature rows: reinforce 1-col on small screens */
@media (max-width: 600px) {
    .feat-row {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .feat-row.reverse {
        direction: ltr !important;
    }
}

/* Lang chips grid: allow wrapping */
@media (max-width: 480px) {
    .lang-grid {
        gap: 6px !important;
    }
    .lang-chip {
        font-size: 0.72rem !important;
        padding: 4px 10px !important;
    }
}

/* ─────────────────────────────────────────────────────
   4. NAV RIGHT — Tighten layout on very small screens
───────────────────────────────────────────────────── */
@media (max-width: 400px) {
    .nav-right {
        gap: 4px !important;
    }
    /* Shrink search button */
    #searchBtn {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ─────────────────────────────────────────────────────
   5. PROFILE DROPDOWN — prevent going off-screen
   On mobile the dropdown can overflow the right edge.
───────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .profile-dropdown {
        right: -8px !important;
        min-width: 195px !important;
        max-width: calc(100vw - 24px) !important;
    }
}

/* ─────────────────────────────────────────────────────
   6. MOBILE MENU — touch-friendly tap targets
───────────────────────────────────────────────────── */
@media (max-width: 850px) {
    .mobile-menu-link {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
    }
    .mobile-menu-close {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* Section 7 removed - handled by overhaul_new.css */

/* ─────────────────────────────────────────────────────
   8. GLOBAL — prevent horizontal overflow on all pages
───────────────────────────────────────────────────── */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

@media (max-width: 768px) {
    img, video {
        max-width: 100% !important;
        height: auto !important;
    }
    /* Prevent wide SVGs from causing overflow */
    svg:not(.nav svg):not([class*="icon"]):not([class*="logo"]) {
        max-width: 100% !important;
    }
}

/* ─────────────────────────────────────────────────────
   9. PRICING PAGE — mobile refinements
───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pricing-hero {
        padding: 100px 16px 40px !important;
    }
    /* Sticky CTA: more compact on mobile */
    .sticky-cta {
        padding: 10px 16px !important;
        gap: 10px !important;
    }
    .sticky-cta-left {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }
    /* Comparison table: allow horizontal scroll */
    .comp-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ─────────────────────────────────────────────────────
   10. CONTACT PAGE — form + sidebar mobile
───────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .contact-page-shell {
        padding: 96px 0 60px !important;
    }
}
@media (max-width: 480px) {
    .contact-form-card {
        padding: 20px !important;
        border-radius: 16px !important;
    }
    .cf-field input,
    .cf-field textarea,
    .cf-field select {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }
}

/* ─────────────────────────────────────────────────────
   11. PLUGIN DOWNLOAD — hero padding
───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .page-hero {
        padding-top: 100px !important;
    }
}

/* ─────────────────────────────────────────────────────
   12. INPUT FIELDS — prevent iOS zoom-on-focus
   iOS zooms in when a text input has font-size < 16px.
───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ─────────────────────────────────────────────────────
   13. SEARCH MODAL — full-screen on mobile
───────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .search-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 0 16px 16px !important;
        top: 0 !important;
        margin: 0 !important;
    }
    #searchInput {
        font-size: 16px !important;
    }
}

/* ─────────────────────────────────────────────────────
   14. COOKIE BANNER — mobile layout
───────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .cookie-container {
        flex-direction: column !important;
        text-align: center !important;
        gap: 12px !important;
        padding: 16px !important;
    }
    .cookie-actions {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
    }
    .cookie-btn-decline,
    .cookie-btn-accept {
        flex: 1 !important;
        justify-content: center !important;
    }
}

/* ─────────────────────────────────────────────────────
   15. HERO SHOWCASE — mobile card sizing
───────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .promo-hero-grid {
        flex-direction: column !important;
        gap: 24px !important;
    }
    .promo-right {
        width: 100% !important;
    }
    .sc-preset-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ─────────────────────────────────────────────────────
   16. TESTIMONIALS — card sizing on mobile
   Fixed 320px cards overflow on 375px screens
───────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .tm-card {
        width: 280px !important;
        min-width: 280px !important;
    }
}

/* ─────────────────────────────────────────────────────
   17. NOTIF PANEL — prevent overflow on mobile
───────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .notif-panel {
        right: -60px !important;
        width: calc(100vw - 24px) !important;
        max-width: 340px !important;
    }
}

/* ─────────────────────────────────────────────────────
   18. USER BUTTONS — show profile on mobile correctly
   Ensure profile circle is always shown (not hidden)
   on mobile when user is logged in.
───────────────────────────────────────────────────── */
@media (max-width: 850px) {
    #userButtons {
        /* Let JS control display, don't hide with CSS */
    }
    .profile-wrapper {
        position: relative !important;
    }
}