/* =========================================================
   THEME-RESPONSIVE.CSS — Global Responsive Override
   Covers all 16 themes without modifying any theme file.
   ========================================================= */

/* ---- MOBILE HAMBURGER MENU (injected via JS) ---- */
.theme-mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: inherit;
    padding: 8px;
    line-height: 1;
    z-index: 1001;
}
.theme-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity .3s;
}
.theme-mobile-overlay.open { opacity: 1; }
.theme-mobile-drawer {
    position: fixed;
    top: 0; right: -300px;
    width: 280px;
    height: 100vh;
    background: #fff;
    z-index: 9999;
    padding: 60px 20px 30px;
    overflow-y: auto;
    transition: right .3s cubic-bezier(.4,0,.2,1);
    box-shadow: -5px 0 30px rgba(0,0,0,.15);
}
.theme-mobile-drawer.open { right: 0; }
.theme-mobile-drawer a {
    display: block;
    padding: 14px 16px;
    color: #1e293b;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    transition: .2s;
    border-bottom: 1px solid #f1f5f9;
}
.theme-mobile-drawer a:hover { background: #f0ebff; color: #6c4de6; }
.theme-mobile-drawer .drawer-close {
    position: absolute;
    top: 15px; right: 15px;
    background: none; border: none;
    font-size: 22px; cursor: pointer;
    color: #475569;
}
.theme-mobile-drawer .drawer-auth {
    display: flex; gap: 10px;
    margin-top: 20px; padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}
.theme-mobile-drawer .drawer-auth a {
    flex: 1; text-align: center;
    padding: 12px 10px; border-radius: 10px;
    font-size: 14px; font-weight: 700;
    border-bottom: none;
}
.theme-mobile-drawer .drawer-auth .drawer-login {
    background: #f0ebff; color: #6c4de6;
}
.theme-mobile-drawer .drawer-auth .drawer-register {
    background: #6c4de6; color: #fff;
}

/* Dark theme drawer override */
body[style*="background: #0"] .theme-mobile-drawer,
body[style*="background:#0"] .theme-mobile-drawer,
body[style*="background: #1"] .theme-mobile-drawer {
    background: #1a1a2e;
}
body[style*="background: #0"] .theme-mobile-drawer a,
body[style*="background:#0"] .theme-mobile-drawer a,
body[style*="background: #1"] .theme-mobile-drawer a {
    color: #e2e8f0;
    border-bottom-color: #2d2d44;
}


/* =========================================================
   TABLET (max-width: 1024px)
   ========================================================= */
@media (max-width: 1024px) {
    /* Nav links hide, show hamburger */
    .nav-links, .nav-actions { display: none !important; }
    .theme-mobile-toggle { display: block !important; }
    nav, nav.glass {
        flex-wrap: wrap;
        padding: 12px 16px !important;
    }
    nav .nav-inner, nav .sb-inner {
        flex-wrap: wrap;
    }
    
    /* Hero side-by-side → stack */
    .hero {
        flex-direction: column !important;
        text-align: center !important;
        padding: 100px 20px 60px !important;
        gap: 40px !important;
    }
    .hero-content, .hero-visual {
        width: 100% !important;
        flex: none !important;
    }
    .hero h1 { font-size: 42px !important; }
    .hero p { font-size: 18px !important; max-width: 100% !important; }
    .hero-links { flex-wrap: wrap; justify-content: center; }

    /* Phone / Macbook mockups scale */
    .phone-glass { width: 280px !important; height: 560px !important; }
    .mac-container { padding: 0 20px; }
    .macbook { border-radius: 20px 20px 0 0 !important; }

    /* Grids → 2 columns */
    .f-grid, .features-grid, .steps-grid, .seo-grid,
    .pricing-grid, .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Stats → 2 columns */
    .stats-container, .stats-banner {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    /* Footer → 2 columns */
    .f-inner {
        grid-template-columns: 1fr 1fr !important;
        gap: 30px !important;
    }

    /* Section titles scale */
    .f-title, .seo-header, .faq-title,
    .section-title h2 {
        font-size: 32px !important;
    }

    /* Sticky bar */
    .sticky-bar { height: auto !important; padding: 10px 16px !important; }
    .sb-inner { flex-wrap: wrap; gap: 10px; }
    .sb-title { font-size: 16px !important; }
}


/* =========================================================
   MOBILE (max-width: 768px)
   ========================================================= */
@media (max-width: 768px) {
    /* Navbar */
    nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
        padding: 10px 16px !important;
        transform: none !important;
        z-index: 999 !important;
    }

    /* Hero */
    .hero, .hero-section, .hero-area {
        padding: 100px 16px 40px !important;
        min-height: auto !important;
    }
    .hero h1 { font-size: 32px !important; letter-spacing: -0.02em !important; }
    .hero p { font-size: 16px !important; }
    .hero-links { flex-direction: column; gap: 12px; }
    .hero-links a { font-size: 16px !important; }

    /* Badge */
    .badge-glass { font-size: 12px !important; padding: 6px 14px !important; }

    /* CTA Buttons in hero */
    .hero div[style*="display:flex"] {
        flex-direction: column;
        gap: 12px !important;
    }
    .hero .btn-glass, .hero .btn-buy, .hero .btn {
        width: 100% !important;
        text-align: center !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
    }

    /* Phone mockup */
    .phone-glass {
        width: 240px !important;
        height: 480px !important;
        border-radius: 40px !important;
    }
    .hero-visual { display: flex; justify-content: center; }

    /* Macbook hide on very small */
    .mac-container { display: none !important; }

    /* ALL grids → single column */
    .f-grid, .features-grid, .steps-grid, .seo-grid,
    .pricing-grid, .services-grid,
    .stats-container, .stats-banner {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Stat boxes */
    .stat-box { padding: 25px 15px !important; border-radius: 20px !important; }
    .stat-number, .s-num { font-size: 40px !important; }
    .stat-label, .s-text { font-size: 14px !important; }

    /* Feature / Step cards */
    .f-card, .step-box, .seo-item {
        padding: 25px 20px !important;
        border-radius: 20px !important;
    }
    .f-card h3, .step-box h3, .seo-item h3 {
        font-size: 18px !important;
    }
    .f-card p, .step-box p, .seo-item p {
        font-size: 14px !important;
    }
    .step-number {
        width: 50px !important; height: 50px !important;
        font-size: 22px !important; border-radius: 14px !important;
    }

    /* Sections padding */
    .features, .features-section, .steps-section,
    .seo-section, .faq-section, .testimonial-section {
        padding: 60px 16px !important;
    }

    /* Section titles */
    .f-title, .seo-header, .faq-title,
    .section-title h2 {
        font-size: 26px !important;
    }
    .section-title p { font-size: 15px !important; }

    /* FAQ */
    .faq-question { font-size: 15px !important; padding: 18px 20px !important; }
    .faq-answer { padding: 0 20px !important; font-size: 14px !important; }
    .faq-item.active .faq-answer { padding: 0 20px 18px !important; }

    /* Footer */
    footer { padding: 40px 16px 30px !important; margin: 0 !important; border-radius: 0 !important; }
    .f-inner {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    .f-brand h2 { font-size: 22px !important; }
    .f-bottom { font-size: 12px !important; }

    /* Footer flex layout (apple_minimal style) */
    footer > div[style*="display: flex"],
    footer > div[style*="display:flex"] {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }

    /* Testimonial cards */
    .t-card { padding: 25px 20px !important; }

    /* cyberpunk_neon specific */
    .seo[style*="grid-template-columns: 1fr 1fr"],
    .seo { grid-template-columns: 1fr !important; }

    /* Generic tables responsive */
    .ticket-table, .pricing-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Images max width */
    img { max-width: 100%; height: auto; }

    /* Prevent horizontal scroll globally */
    html, body { overflow-x: hidden !important; }
}


/* =========================================================
   VERY SMALL MOBILE (max-width: 480px)
   ========================================================= */
@media (max-width: 480px) {
    .hero h1 { font-size: 26px !important; }
    .hero p { font-size: 14px !important; }

    .f-title, .seo-header, .faq-title,
    .section-title h2 {
        font-size: 22px !important;
    }

    .phone-glass {
        width: 200px !important;
        height: 400px !important;
    }

    .stat-number, .s-num { font-size: 32px !important; }

    nav .logo {
        font-size: 16px !important;
    }
}


/* =========================================================
   CYBERPUNK_NEON & MINIMAL THEMES — extra fixes
   ========================================================= */
@media (max-width: 768px) {
    /* All navs: ensure wrapping */
    nav {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px 16px !important;
    }
    
    /* Minimal themes: hide extra nav links on mobile (handled by drawer) */
    nav > a.btn:not(.logo):not(.theme-mobile-toggle),
    nav > a[class*="btn"]:not(.logo) {
        display: none !important;
    }
    
    /* cyberpunk: hero h1 */
    body[style*="background: #050505"] .hero h1,
    body[style*="background:#050505"] .hero h1 {
        font-size: 28px !important;
    }
    
    /* Mockup terminals (cyberpunk, material_flat) */
    .mockup {
        width: 100% !important;
        max-width: 300px !important;
        margin: 30px auto !important;
    }
    
    /* .seo and .grid for minimal themes */
    .seo {
        grid-template-columns: 1fr !important;
        padding: 30px 16px !important;
    }
    .grid {
        grid-template-columns: 1fr !important;
        padding: 30px 16px !important;
    }
    
    /* Material flat cards */
    .card, .s-block, .product {
        padding: 20px 16px !important;
    }
    
    /* Minimal theme hero - Prevent overlap with header */
    .hero {
        padding: 100px 16px 40px !important;
    }
    .hero h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    .hero p {
        font-size: 15px !important;
    }
    
    /* Row items in mockups */
    .row {
        font-size: 14px !important;
        padding: 12px !important;
    }
}

/* =========================================================
   RE-SHOW HAMBURGER IN DARK NAV THEMES
   ========================================================= */
@media (max-width: 1024px) {
    /* Make hamburger visible on dark navs */
    nav[style*="background: #0"] .theme-mobile-toggle,
    nav[style*="background:#0"] .theme-mobile-toggle,
    nav[style*="background: #2"] .theme-mobile-toggle,
    nav[style*="background:#2"] .theme-mobile-toggle,
    nav[style*="background: #6"] .theme-mobile-toggle,
    nav[style*="background:#6"] .theme-mobile-toggle {
        color: #fff !important;
    }
}