/* ==========================================================================
   iOS Safari Compatibility Layer — Jeloda
   ---------------------------------------------------------------------------
   iOS Safari kills the tab when VRAM exceeds ~200-300 MB.
   backdrop-filter: blur() on fullscreen / large elements at DPR 3 costs
   ~12-18 MB per snapshot. With 5-15 simultaneous blurred elements, this
   quickly exceeds the limit.

   This file uses @supports (-webkit-touch-callout: none) to target ONLY
   iOS Safari (and iPadOS Safari). No other browser matches this gate.
   It replaces every backdrop-filter with a solid semi-transparent fallback
   that looks nearly identical but costs 0 VRAM.

   LOAD ORDER: This file MUST load AFTER all page/module CSS so that
   !important overrides take effect.
   ========================================================================== */

@supports (-webkit-touch-callout: none) {

    /* ==================================================================
       NUCLEAR KILL: Remove ALL backdrop-filter from every element.
       This is the safest approach — a single rule catches everything,
       including dynamically-added elements and future pages.
       ================================================================== */
    *,
    *::before,
    *::after {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* ==================================================================
       FALLBACK BACKGROUNDS — Dark Theme
       Replace the glass effect with solid semi-transparent backgrounds
       that approximate the blurred look.
       ================================================================== */

    /* ── Global Layout Components ── */

    /* Ghost buttons */
    .btn--ghost {
        background: rgba(255, 255, 255, 0.06) !important;
    }

    /* Glass cards */
    .card--glass {
        background: rgba(20, 20, 20, 0.92) !important;
    }

    /* ── Header / Navigation ── */

    .header--hero-mode.scrolled {
        background: rgba(10, 10, 10, 0.95) !important;
    }

    .header-dropdown-content {
        background: rgba(18, 18, 24, 0.96) !important;
    }

    /* ── Preloader (already has fix in layout inline, but belt & suspenders) ── */
    #preloader {
        background: rgba(8, 8, 18, 0.92) !important;
    }

    /* ── Lead Popup ── */
    .lead-popup-overlay {
        background: rgba(0, 0, 0, 0.85) !important;
    }

    /* ── WhatsApp Float ── */
    .wa-float__tooltip {
        background: rgba(18, 18, 24, 0.94) !important;
    }

    /* ==================================================================
       PAGE-SPECIFIC FALLBACKS — Dark Theme
       ================================================================== */

    /* ── Home ── */
    .hero__badge {
        background: rgba(15, 15, 20, 0.88) !important;
    }

    .hero__stat-card,
    .theme--light .hero__stat-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    .hero__control-btn {
        background: rgba(20, 20, 28, 0.88) !important;
    }

    #ai-about .video {
        background: rgba(10, 10, 16, 0.92) !important;
    }

    .blog-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    /* ── Shared Product Page Components ── */
    .badge-premium {
        background: rgba(15, 15, 22, 0.9) !important;
    }

    .highlights-card {
        background: rgba(18, 18, 20, 0.88) !important;
    }

    .theme--dark .highlights-card {
        background: rgba(18, 18, 20, 0.88) !important;
    }

    .theme--light .highlights-card {
        background: rgba(245, 245, 250, 0.92) !important;
    }

    /* ── Nomina Electronica ── */
    .payroll-tabs-container {
        background: rgba(15, 15, 20, 0.9) !important;
    }

    .payroll-feature-card {
        background: rgba(20, 20, 28, 0.88) !important;
    }

    .theme--dark .payroll-feature-card {
        background: rgba(20, 20, 28, 0.88) !important;
    }

    .theme--light .payroll-feature-card {
        background: rgba(245, 245, 250, 0.9) !important;
    }

    /* ── Facturacion Electronica ── */
    .doctype-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    .cert-pricing-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    .step-onboarding-card {
        background: rgba(18, 18, 24, 0.88) !important;
    }

    /* ── Software POS / Restaurantes / Shared Vertical Cards ── */
    .yros-ai-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    .sector-card {
        background: rgba(18, 18, 24, 0.88) !important;
    }

    .service-mode-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    .value-card {
        background: rgba(18, 18, 24, 0.88) !important;
    }

    .pos-modal-card {
        background: rgba(18, 18, 24, 0.92) !important;
    }

    .testimonial-card {
        background: rgba(18, 18, 24, 0.88) !important;
    }

    /* ── Ferreteria ── */
    .fraction-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    .quote-mock-card {
        background: rgba(18, 18, 24, 0.88) !important;
    }

    /* ── Drogueria ── */
    .medication-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    /* ── Taller Mecanico ── */
    .workorder-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    /* ── Veterinaria ── */
    .pet-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    /* ── Belleza ── */
    .appointment-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    /* ── Precio ── */
    .pricing-calculator-card {
        background: rgba(18, 18, 24, 0.92) !important;
    }

    .price-card.general,
    .price-card.value {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    /* ── Nosotros ── */
    .stats-bar {
        background: rgba(18, 18, 24, 0.92) !important;
    }

    .founder-section {
        background: rgba(15, 15, 20, 0.9) !important;
    }

    .pilar-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    .company-footer {
        background: rgba(12, 12, 18, 0.94) !important;
    }

    .step-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    /* ── Contacto ── */
    .card.contact-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    .contact-form-card {
        background: rgba(18, 18, 24, 0.92) !important;
    }

    /* ── USA ── */
    .usa-hero__badge {
        background: rgba(15, 15, 20, 0.88) !important;
    }

    .usa-hero__cities {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    .theme--dark .usa-problem__col {
        background: rgba(18, 18, 24, 0.88) !important;
    }

    /* ── Version ── */
    .version-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    /* ── Comparativa Titanium ── */
    .comparison-table-wrapper {
        background: rgba(18, 18, 24, 0.92) !important;
    }

    /* ── Error ── */
    .error-glass-card {
        background: rgba(18, 18, 24, 0.92) !important;
    }

    /* ── Yros AI ── */
    .ai-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    .chat-window-box {
        background: rgba(15, 15, 20, 0.92) !important;
    }

    /* ── Map Position ── */
    .map-demo-card {
        background: rgba(18, 18, 24, 0.9) !important;
    }

    /* ── WhatsApp ── */
    .whatsapp-glass-card {
        background: rgba(18, 18, 24, 0.92) !important;
    }

    /* ── Referidos ── */
    .calculator-card {
        background: rgba(18, 18, 24, 0.92) !important;
    }

    /* ==================================================================
       LIGHT THEME OVERRIDES
       When theme--light is active, use lighter fallback backgrounds
       ================================================================== */

    .theme--light .badge-premium {
        background: rgba(240, 238, 248, 0.92) !important;
    }

    .theme--light .payroll-tabs-container {
        background: rgba(248, 248, 252, 0.94) !important;
    }

    .theme--light .btn--ghost {
        background: rgba(0, 0, 0, 0.04) !important;
    }

    .theme--light .card--glass {
        background: rgba(255, 255, 255, 0.88) !important;
    }

    .theme--light .hero__badge {
        background: rgba(248, 248, 252, 0.92) !important;
    }

    .theme--light .hero__control-btn {
        background: rgba(245, 245, 250, 0.9) !important;
    }

    .theme--light .blog-card {
        background: rgba(255, 255, 255, 0.9) !important;
    }

    .theme--light .yros-ai-card,
    .theme--light .sector-card,
    .theme--light .service-mode-card,
    .theme--light .value-card,
    .theme--light .fraction-card,
    .theme--light .medication-card,
    .theme--light .workorder-card,
    .theme--light .pet-card,
    .theme--light .appointment-card,
    .theme--light .doctype-card,
    .theme--light .cert-pricing-card,
    .theme--light .step-onboarding-card,
    .theme--light .pos-modal-card,
    .theme--light .testimonial-card,
    .theme--light .quote-mock-card,
    .theme--light .step-card,
    .theme--light .pilar-card,
    .theme--light .ai-card,
    .theme--light .version-card,
    .theme--light .map-demo-card {
        background: rgba(255, 255, 255, 0.88) !important;
    }

    .theme--light .pricing-calculator-card,
    .theme--light .price-card.general,
    .theme--light .price-card.value,
    .theme--light .comparison-table-wrapper,
    .theme--light .error-glass-card,
    .theme--light .whatsapp-glass-card,
    .theme--light .calculator-card {
        background: rgba(255, 255, 255, 0.92) !important;
    }

    .theme--light .stats-bar {
        background: rgba(248, 248, 252, 0.94) !important;
    }

    .theme--light .founder-section {
        background: rgba(248, 248, 252, 0.9) !important;
    }

    .theme--light .card.contact-card,
    .theme--light .contact-form-card {
        background: rgba(255, 255, 255, 0.9) !important;
    }

    .theme--light .usa-hero__badge {
        background: rgba(248, 248, 252, 0.92) !important;
    }

    .theme--light .usa-hero__cities {
        background: rgba(255, 255, 255, 0.9) !important;
    }

    /* ==================================================================
       DECORATIVE PERFORMANCE — Reduce large CSS filter blur on iOS
       Large radial-gradient blurs (filter: blur(60-80px)) are also
       expensive on iOS. Cap them to reasonable values.
       ================================================================== */

    .hero-1-shapes__glow,
    .hero-1-shapes__glow--left,
    .hero-1-shapes__glow--right,
    .xclusive-section-glow,
    .footer-1__glow {
        filter: blur(30px) !important;
        opacity: 0.5 !important;
    }

    /* Reduce decorative floating animations to prevent jank */
    .deco-shapes .shape,
    .shape-hexa,
    .shape-diamond {
        animation: none !important;
        opacity: 0.3 !important;
    }

    .product-bg-wave {
        animation: none !important;
    }
}