/**
 * Mobile Responsive Styles
 * Premium mobile experience for all pages
 *
 * This file handles responsive behavior for:
 * - Two-column banner layouts (1fr 1fr)
 * - Multi-column grids (4, 5 columns)
 * - Animated hero graphics
 * - Premium banner sections
 * - Navigation and footer
 * - Hero V2 section
 * - All static HTML pages
 */

/* ========================================
   CSS Custom Properties for Mobile
   ======================================== */
:root {
    --mobile-section-padding: 60px;
    --mobile-container-padding: 20px;
    --mobile-gap: 24px;
}

/* ========================================
   CRITICAL: Prevent Horizontal Scroll
   ======================================== */
html {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
}

/* ========================================
   Global Mobile Resets
   ======================================== */
@media (max-width: 1024px) {
    /* Ensure all images are responsive */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }

    /* Reduce section padding on tablet */
    section {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
}

@media (max-width: 768px) {
    /* Further reduce section padding on mobile */
    section {
        padding-top: var(--mobile-section-padding) !important;
        padding-bottom: var(--mobile-section-padding) !important;
    }

    /* Ensure container has proper mobile padding */
    .container {
        padding-left: var(--mobile-container-padding) !important;
        padding-right: var(--mobile-container-padding) !important;
    }
}

/* ========================================
   Two-Column Banner Layouts (1fr 1fr)
   These are used extensively in premium sections
   ======================================== */
@media (max-width: 1024px) {
    /* Target all inline grid layouts with 1fr 1fr */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* Target 2fr 1fr layouts (settlements map section) */
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:2fr 1fr"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* Target 1fr 1.5fr layouts (contact grid) */
    [style*="grid-template-columns: 1fr 1.5fr"],
    [style*="grid-template-columns:1fr 1.5fr"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
}

@media (max-width: 768px) {
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: 1fr 1.5fr"],
    [style*="grid-template-columns:1fr 1.5fr"] {
        gap: var(--mobile-gap) !important;
    }
}

/* ========================================
   Multi-Column Grids (4, 5 columns)
   Used in stats, values, benefits sections
   ======================================== */
@media (max-width: 1200px) {
    /* 5-column grids -> 3 columns on large tablets */
    [style*="grid-template-columns: repeat(5, 1fr)"],
    [style*="grid-template-columns:repeat(5, 1fr)"],
    [style*="grid-template-columns: repeat(5,1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* 4-column grids -> 2 columns on large tablets */
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns:repeat(4, 1fr)"],
    [style*="grid-template-columns: repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 3-column grids -> 2 columns on large tablets */
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns:repeat(3, 1fr)"],
    [style*="grid-template-columns: repeat(3,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    /* 5-column grids -> 2 columns on mobile */
    [style*="grid-template-columns: repeat(5, 1fr)"],
    [style*="grid-template-columns:repeat(5, 1fr)"],
    [style*="grid-template-columns: repeat(5,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* 4-column grids -> 2 columns on mobile */
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns:repeat(4, 1fr)"],
    [style*="grid-template-columns: repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* 3-column grids -> 2 columns on mobile */
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns:repeat(3, 1fr)"],
    [style*="grid-template-columns: repeat(3,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
}

@media (max-width: 480px) {
    /* 5-column grids -> 1 column on small mobile */
    [style*="grid-template-columns: repeat(5, 1fr)"],
    [style*="grid-template-columns:repeat(5, 1fr)"],
    [style*="grid-template-columns: repeat(5,1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* 4-column grids -> 2 columns on small mobile */
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns:repeat(4, 1fr)"],
    [style*="grid-template-columns: repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ========================================
   2-Column Stats Grid (settlements map section)
   ======================================== */
@media (max-width: 768px) {
    [style*="grid-template-columns: 1fr 1fr"][style*="gap: 16px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ========================================
   Hero Animated Graphics
   Hide on mobile for performance & space
   ======================================== */
@media (max-width: 1024px) {
    /* Hide the large animated graphics on hero sections */
    [style*="position: absolute"][style*="width: 280px"][style*="height: 280px"],
    [style*="position: absolute"][style*="width: 350px"][style*="height: 350px"],
    .hero-visual[style*="width: 350px"] {
        display: none !important;
    }

    /* Reduce size of glowing orbs */
    [style*="width: 350px"][style*="height: 350px"][style*="radial-gradient"],
    [style*="width: 300px"][style*="height: 300px"][style*="radial-gradient"],
    [style*="width: 400px"][style*="height: 400px"][style*="radial-gradient"] {
        width: 200px !important;
        height: 200px !important;
    }
}

@media (max-width: 768px) {
    /* Further reduce or hide decorative elements */
    [style*="position: absolute"][style*="radial-gradient"][style*="blur"] {
        width: 150px !important;
        height: 150px !important;
        opacity: 0.5 !important;
    }
}

/* ========================================
   Content with Large Padding
   (e.g., padding-right: 350px for graphic space)
   ======================================== */
@media (max-width: 1024px) {
    [style*="padding-right: 350px"],
    [style*="padding-right:350px"] {
        padding-right: 0 !important;
    }

    [style*="padding-left: 350px"],
    [style*="padding-left:350px"] {
        padding-left: 0 !important;
    }

    /* Center text when graphic is hidden */
    [style*="margin-right: auto"][style*="padding-right: 350px"] {
        margin-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
}

/* ========================================
   Hero Section Mobile Optimization
   ======================================== */
@media (max-width: 1024px) {
    .hero-premium,
    .hero {
        min-height: auto !important;
        padding-top: calc(72px + 60px) !important;
        padding-bottom: 60px !important;
    }

    .hero-content {
        max-width: 100% !important;
        text-align: center !important;
        padding: 0 20px !important;
    }

    .hero-title-premium,
    .hero h1 {
        font-size: clamp(2rem, 8vw, 3.5rem) !important;
    }

    .hero-description {
        font-size: 1.1rem !important;
        max-width: 100% !important;
    }

    .hero-actions {
        justify-content: center !important;
    }

    .hero-stats-premium {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 20px !important;
    }
}

@media (max-width: 768px) {
    .hero-premium,
    .hero {
        padding-top: calc(72px + 40px) !important;
        padding-bottom: 40px !important;
    }

    .hero-title-premium,
    .hero h1 {
        font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
    }

    .hero-description {
        font-size: 1rem !important;
    }

    .hero-stats-premium {
        gap: 16px !important;
    }

    .hero-stat-item {
        min-width: 45% !important;
    }
}

/* ========================================
   Premium Banner Sections with Inline Styles
   Center content on mobile
   ======================================== */
@media (max-width: 1024px) {
    /* Center hero section text on mobile */
    section[style*="min-height: 500px"] .container > div[style*="max-width: 700px"],
    section[style*="min-height: 500px"] .container > div[style*="max-width:700px"] {
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* Adjust h1 on page heroes */
    section[style*="min-height: 500px"] h1 {
        font-size: clamp(2rem, 6vw, 3.5rem) !important;
    }

    /* Adjust paragraph on page heroes */
    section[style*="min-height: 500px"] p {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ========================================
   Feature Lists & Cards Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Feature list items */
    [style*="display: flex"][style*="gap: 12px"][style*="padding: 16px"] {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }

    /* Benefit/Feature cards */
    [style*="padding: 32px 24px"][style*="border-radius: 20px"] {
        padding: 24px 16px !important;
    }

    /* Reduce icon sizes on mobile */
    [style*="width: 60px"][style*="height: 60px"][style*="font-size: 1.8rem"] {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
    }

    [style*="width: 72px"][style*="height: 72px"] {
        width: 56px !important;
        height: 56px !important;
    }
}

/* ========================================
   Timeline Section (Milestones)
   Convert to vertical on mobile
   ======================================== */
@media (max-width: 1024px) {
    /* The timeline grid needs special handling */
    [style*="grid-template-columns: repeat(5, 1fr)"][style*="position: relative"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* Hide horizontal timeline line on mobile */
    [style*="position: absolute"][style*="height: 2px"][style*="left: 10%"][style*="right: 10%"] {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* Reduce milestone circle size */
    [style*="width: 80px"][style*="height: 80px"][style*="border-radius: 50%"] {
        width: 60px !important;
        height: 60px !important;
    }

    [style*="width: 80px"][style*="height: 80px"] span {
        font-size: 0.8rem !important;
    }
}

/* ========================================
   Image Containers Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Reduce image heights on mobile */
    [style*="height: 400px"][style*="object-fit: cover"],
    [style*="height: 450px"][style*="object-fit: cover"] {
        height: 280px !important;
    }

    /* Map placeholder height */
    [style*="height: 450px"][style*="backdrop-filter"] {
        height: 300px !important;
    }

    /* Border radius adjustments */
    [style*="border-radius: 24px"] {
        border-radius: 16px !important;
    }
}

/* ========================================
   Floating Badges & Decorative Elements
   ======================================== */
@media (max-width: 768px) {
    /* Reposition floating badges */
    [style*="position: absolute"][style*="bottom: -20px"][style*="left: -20px"],
    [style*="position: absolute"][style*="bottom: -20px"][style*="right: -20px"] {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin-top: 16px !important;
        display: inline-block !important;
    }

    /* Hide purely decorative rings */
    [style*="position: absolute"][style*="border: 3px solid"][style*="border-radius: 50%"][style*="animation"] {
        display: none !important;
    }
}

/* ========================================
   CTA Buttons Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Stack CTA buttons vertically */
    [style*="display: flex"][style*="gap: 20px"][style*="justify-content: center"] {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    /* Full-width buttons on mobile */
    [style*="padding: 18px 40px"],
    [style*="padding: 18px 36px"] {
        width: 100% !important;
        max-width: 300px !important;
        justify-content: center !important;
    }
}

/* ========================================
   Team Grid Mobile
   ======================================== */
@media (max-width: 1024px) {
    .team-grid,
    [style*="display: grid"][style*="repeat(4, 1fr)"][style*="gap: 30px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .team-grid,
    [style*="display: grid"][style*="repeat(4, 1fr)"][style*="gap: 30px"] {
        grid-template-columns: 1fr !important;
    }

    /* Team member photo size */
    [style*="width: 100px"][style*="height: 100px"][style*="border-radius: 50%"] {
        width: 80px !important;
        height: 80px !important;
    }
}

/* ========================================
   Problem/Solution Cards (About page)
   ======================================== */
@media (max-width: 768px) {
    [style*="padding: 40px"][style*="backdrop-filter"] {
        padding: 24px !important;
    }

    /* List items in problem/solution */
    [style*="display: flex"][style*="gap: 12px"][style*="align-items: center"][style*="margin-bottom: 14px"] {
        flex-wrap: wrap !important;
    }
}

/* ========================================
   Stats Cards Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Stat number size */
    [style*="font-size: 2.8rem"],
    [style*="font-size: 2.5rem"] {
        font-size: 2rem !important;
    }

    /* Stat card padding */
    [style*="padding: 36px 24px"][style*="text-align: center"] {
        padding: 20px 16px !important;
    }

    [style*="padding: 24px"][style*="text-align: center"][style*="backdrop-filter"] {
        padding: 16px 12px !important;
    }
}

/* ========================================
   Quote Blocks Mobile
   ======================================== */
@media (max-width: 768px) {
    [style*="border-right: 4px solid #fbbf24"][style*="padding: 24px"],
    .quote-block {
        padding: 16px !important;
    }
}

/* ========================================
   Join Page Grid (Login/Register)
   ======================================== */
@media (max-width: 1024px) {
    /* The main two-column layout */
    body[style*="min-height: 100vh"] > div > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        max-width: 600px !important;
    }

    /* Hide benefits grid on very small screens */
    [style*="display: grid"][style*="grid-template-columns: 1fr 1fr"][style*="gap: 20px"] {
        display: none !important;
    }
}

/* ========================================
   Contact Form Mobile
   ======================================== */
@media (max-width: 768px) {
    .contact-form-card {
        padding: 24px !important;
    }

    .grid.sm\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   Footer Mobile Optimization
   ======================================== */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        text-align: center !important;
    }

    .footer-brand {
        margin-bottom: 16px !important;
    }

    .footer-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* ========================================
   Donate Page Mobile
   ======================================== */
@media (max-width: 768px) {
    .donation-options {
        grid-template-columns: 1fr !important;
    }

    .donation-stats {
        flex-direction: column !important;
        gap: 24px !important;
    }

    .amount-presets {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .tax-info-content {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   Equipment Page Mobile
   ======================================== */
@media (max-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .products-grid {
        grid-template-columns: 1fr !important;
    }

    .category-card {
        padding: 16px !important;
    }
}

@media (max-width: 480px) {
    .categories-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   Settlements Page Mobile
   ======================================== */
@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column !important;
    }

    .filter-group {
        width: 100% !important;
        min-width: auto !important;
    }

    .settlements-grid {
        grid-template-columns: 1fr !important;
    }

    .settlement-card-stats {
        justify-content: space-around !important;
    }
}

/* ========================================
   FAQ Section Mobile
   ======================================== */
@media (max-width: 768px) {
    .accordion {
        max-width: 100% !important;
    }

    .accordion-header {
        padding: 16px !important;
        font-size: 0.95rem !important;
    }

    .accordion-body {
        padding: 16px !important;
    }
}

/* ========================================
   Text Sizing Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Reduce large headings */
    h1, [style*="font-size: clamp(2.8rem"] {
        font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
    }

    h2, [style*="font-size: clamp(2rem"], [style*="font-size: clamp(1.8rem"] {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    /* Reduce paragraph text that's too large */
    [style*="font-size: 1.25rem"],
    [style*="font-size: 1.2rem"] {
        font-size: 1.05rem !important;
    }

    [style*="font-size: 1.15rem"],
    [style*="font-size: 1.1rem"] {
        font-size: 1rem !important;
    }
}

/* ========================================
   Gap Adjustments Mobile
   ======================================== */
@media (max-width: 768px) {
    [style*="gap: 80px"] {
        gap: 40px !important;
    }

    [style*="gap: 60px"] {
        gap: 32px !important;
    }

    [style*="gap: 40px"] {
        gap: 24px !important;
    }
}

/* ========================================
   Specific Element Fixes
   ======================================== */

/* Fix for elements with position absolute and percentage-based positioning */
@media (max-width: 1024px) {
    [style*="position: absolute"][style*="right: 8%"],
    [style*="position: absolute"][style*="left: 8%"] {
        display: none !important;
    }
}

/* Fix for inline max-width that might cause issues */
@media (max-width: 768px) {
    [style*="max-width: 700px"],
    [style*="max-width: 600px"],
    [style*="max-width: 500px"] {
        max-width: 100% !important;
    }
}

/* ========================================
   Hero Section - Animated Shield Graphics
   Hide on tablet/mobile for clean layout
   ======================================== */
@media (max-width: 1200px) {
    /* Hide the animated shield graphic on the left side of heroes */
    .hero-visual,
    [style*="position: absolute"][style*="left: 5%"][style*="transform: translateY(-50%)"],
    [style*="position: absolute"][style*="left: 8%"][style*="transform: translateY(-50%)"] {
        display: none !important;
    }
}

/* ========================================
   Index Page Specific Fixes
   ======================================== */
@media (max-width: 1024px) {
    /* About section grid */
    #about [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    #about .about-story-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 36px !important;
    }

    /* Features section grid */
    #features [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Reverse order for visual-first sections on mobile */
    #about .container > div {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* ========================================
   About Page Specific Fixes
   ======================================== */
@media (max-width: 1024px) {
    /* Hero content centering */
    section[style*="min-height: 500px"] [style*="padding-right: 350px"] {
        padding-right: 0 !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* Values 4-column grid -> 2 columns */
    section [style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Timeline 5-column grid -> 3 columns */
    section [style*="grid-template-columns: repeat(5, 1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    /* Values grid -> 2 columns */
    section [style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Timeline -> 2 columns then scrollable */
    section [style*="grid-template-columns: repeat(5, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Team grid -> 2 columns */
    section [style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 30px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 480px) {
    /* Timeline -> 2 columns on small screens */
    section [style*="grid-template-columns: repeat(5, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Team grid -> 2 columns */
    section [style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 30px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ========================================
   Settlements Page Map Section Fix
   ======================================== */
@media (max-width: 1024px) {
    /* Map section 2fr 1fr layout */
    [style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Stats mini-grid should stay 2 columns */
    [style*="grid-template-columns: 1fr 1fr"][style*="gap: 16px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ========================================
   Benefits Section (used in multiple pages)
   ======================================== */
@media (max-width: 768px) {
    /* Benefits grid with gap: 20px */
    [style*="display: grid"][style*="grid-template-columns: 1fr 1fr"][style*="gap: 20px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

/* ========================================
   Stats Row with gap: 40px (join page, etc)
   ======================================== */
@media (max-width: 768px) {
    [style*="display: flex"][style*="gap: 40px"][style*="margin-top"] {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 24px 40px !important;
    }
}

/* ========================================
   Hero V2 Section - Mobile Optimization
   ======================================== */
@media (max-width: 1024px) {
    .hero-v2 {
        padding: calc(72px + 40px) 20px 60px !important;
        min-height: 85vh !important;
    }

    .hero-v2 .hero-content {
        max-width: 100% !important;
        text-align: center !important;
    }

    .hero-v2 .hero-badge {
        justify-content: center !important;
    }

    .hero-v2 .hero-title {
        font-size: clamp(1.8rem, 6vw, 3rem) !important;
        line-height: 1.2 !important;
    }

    .hero-v2 .hero-subtitle {
        font-size: 1rem !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }

    .hero-v2 .hero-features {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .hero-v2 .hero-feature {
        font-size: 0.85rem !important;
        padding: 8px 14px !important;
    }

    .hero-v2 .hero-cta {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .hero-v2 .hero-cta a {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
    }

    .hero-v2 .hero-stats {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 16px !important;
    }

    .hero-v2 .hero-stat {
        min-width: 100px !important;
        text-align: center !important;
    }

    .hero-v2 .hero-stat-value {
        font-size: 1.5rem !important;
    }

    .hero-v2 .hero-stat-label {
        font-size: 0.75rem !important;
    }

    .scroll-indicator {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .hero-v2 {
        padding: calc(72px + 30px) 16px 40px !important;
    }

    .hero-v2 .hero-title {
        font-size: clamp(1.5rem, 8vw, 2rem) !important;
    }

    .hero-v2 .hero-features {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .hero-v2 .hero-feature {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ========================================
   Mobile Menu Premium Enhancement
   ======================================== */
@media (max-width: 1024px) {
    .mobile-menu-premium {
        padding: 20px !important;
        top: 60px !important;
    }

    .mobile-menu-premium .mobile-nav {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }

    .mobile-menu-premium .mobile-nav-link {
        font-size: 1rem !important;
        padding: 14px 16px !important;
        border-radius: 8px !important;
        margin-bottom: 4px !important;
    }

    .mobile-menu-premium .mobile-nav-link:hover,
    .mobile-menu-premium .mobile-nav-link.active {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    .mobile-menu-premium .mobile-auth {
        padding-top: 20px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin-top: 16px !important;
    }

    .mobile-menu-premium .btn-mobile-auth,
    .mobile-menu-premium .btn-mobile-dashboard {
        padding: 14px 20px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
    }
}

/* ========================================
   Premium Navbar Mobile Improvements
   ======================================== */
@media (max-width: 1024px) {
    .navbar-premium .navbar-container {
        padding: 12px 16px !important;
    }

    .navbar-premium .brand-text {
        display: none !important;
    }

    .navbar-premium .navbar-toggle {
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
    }
}

@media (max-width: 480px) {
    .navbar-premium .navbar-container {
        padding: 10px 12px !important;
    }

    .navbar-premium .navbar-logo {
        width: 68px !important;
        height: 68px !important;
        margin-top: 10px !important;
    }

    .navbar-premium .brand-text {
        display: none !important;
    }
}

/* ========================================
   Static Pages - Touch-Friendly Adjustments
   ======================================== */
@media (max-width: 1024px) {
    /* Ensure minimum touch target sizes */
    a, button, .clickable {
        min-height: 44px;
    }

    /* Better spacing for clickable items */
    .navbar-link,
    .mobile-nav-link,
    .footer-link {
        padding: 12px 16px !important;
    }

    /* Smooth scrolling for better mobile experience */
    html {
        scroll-behavior: smooth;
    }
}

/* ========================================
   Static Pages - Card and Content Spacing
   ======================================== */
@media (max-width: 768px) {
    /* Reduce large padding on cards */
    [style*="padding: 48px"],
    [style*="padding: 40px"] {
        padding: 24px !important;
    }

    [style*="padding: 32px"] {
        padding: 20px !important;
    }

    /* Reduce border radius on mobile */
    [style*="border-radius: 32px"] {
        border-radius: 20px !important;
    }

    [style*="border-radius: 28px"] {
        border-radius: 16px !important;
    }

    /* Center all text content sections */
    .section-header,
    [style*="text-align: center"][style*="max-width"] {
        padding: 0 16px !important;
    }
}

@media (max-width: 480px) {
    /* Further reduce padding on small screens */
    [style*="padding: 24px"] {
        padding: 16px !important;
    }

    /* Reduce margins */
    [style*="margin-bottom: 60px"] {
        margin-bottom: 32px !important;
    }

    [style*="margin-bottom: 72px"],
    [style*="margin-bottom: 80px"] {
        margin-bottom: 40px !important;
    }
}

/* ========================================
   Features Section Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Feature list with icons */
    [style*="display: flex"][style*="flex-direction: column"][style*="gap: 20px"] {
        gap: 16px !important;
    }

    /* Feature item styling */
    [style*="display: flex"][style*="gap: 16px"][style*="align-items: center"] {
        gap: 12px !important;
    }

    /* Feature icon boxes */
    [style*="width: 40px"][style*="height: 40px"][style*="border-radius"] {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
    }
}

/* ========================================
   Info Boxes and Alerts Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Info/Alert boxes */
    [style*="backdrop-filter"][style*="border-radius"][style*="padding"] {
        padding: 16px !important;
    }

    /* List items in info boxes */
    [style*="display: flex"][style*="gap: 12px"][style*="margin-bottom: 14px"] {
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    /* Checkmark/Cross icons */
    [style*="font-size: 1.3rem"] {
        font-size: 1.1rem !important;
        flex-shrink: 0 !important;
    }
}

/* ========================================
   Tables Mobile - Horizontal Scroll
   ======================================== */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    table th,
    table td {
        padding: 12px 16px !important;
        font-size: 0.875rem !important;
    }
}

/* ========================================
   Form Elements Mobile
   ======================================== */
@media (max-width: 768px) {
    input, select, textarea {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 12px 16px !important;
    }

    /* Form grid layouts */
    .form-grid,
    [style*="display: grid"][style*="gap"][class*="form"] {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   Button Improvements Mobile
   ======================================== */
@media (max-width: 768px) {
    /* Primary CTA buttons */
    .btn-hero-primary,
    .btn-hero-secondary {
        padding: 14px 24px !important;
        font-size: 0.95rem !important;
        width: 100% !important;
        max-width: 300px !important;
    }

    /* Inline button groups */
    [style*="display: flex"][style*="gap"][style*="button"],
    [style*="display: flex"][style*="gap"] > a[style*="padding"] {
        flex-direction: column !important;
        width: 100% !important;
    }
}

/* ========================================
   Footer Mobile Comprehensive Fix
   ======================================== */
@media (max-width: 768px) {
    .footer {
        padding: 48px 20px 24px !important;
    }

    .footer .container {
        padding: 0 !important;
    }

    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
        text-align: center !important;
    }

    .footer-brand {
        order: -1 !important;
    }

    .footer-brand-name {
        font-size: 1.25rem !important;
    }

    .footer-brand-description {
        font-size: 0.9rem !important;
        max-width: 100% !important;
    }

    .footer-heading {
        font-size: 1rem !important;
        margin-bottom: 12px !important;
    }

    .footer-links {
        gap: 8px !important;
    }

    .footer-link {
        font-size: 0.9rem !important;
    }

    .footer-bottom {
        margin-top: 32px !important;
        padding-top: 24px !important;
    }

    .footer-copyright {
        font-size: 0.8rem !important;
    }
}

/* ========================================
   Index + Equipment Card Density Fixes
   ======================================== */
@media (max-width: 768px) {
    .about-story-visual {
        display: none !important;
    }

    .about-story-time-badge {
        display: none !important;
    }

    .about-monthly-flow {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-bottom: 24px !important;
    }

    .about-monthly-card,
    .about-monthly-time-chip {
        min-width: 0 !important;
        flex: initial !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
    }

    .about-monthly-time-chip {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
        border: 1px solid rgba(251, 191, 36, 0.35) !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    }

    .about-monthly-time-value {
        color: #0f172a !important;
        font-size: 1.3rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .about-monthly-time-label {
        color: rgba(15, 23, 42, 0.82) !important;
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        margin-top: 4px !important;
        line-height: 1.3 !important;
    }

    .feature-floating-badge {
        display: none !important;
    }

    .feature-capabilities-overlay {
        gap: 10px !important;
    }

    .feature-capability-title {
        font-size: 1.05rem !important;
    }

    .feature-capability-subtitle {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
    }

    .group-purchase-grid,
    .adopt-community-grid,
    .equipment-categories-grid,
    .equipment-steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .group-purchase-card,
    .adopt-community-card,
    .equipment-category-card,
    .equipment-step-card {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .group-purchase-card [style*="font-size: 2.5rem"],
    .equipment-category-card [style*="font-size: 3rem"] {
        font-size: 1.7rem !important;
        margin-bottom: 10px !important;
    }

    .group-purchase-card [style*="font-size: 1.4rem"] {
        font-size: 1.15rem !important;
    }

    .group-purchase-card [style*="font-size: 1.05rem"],
    .equipment-category-card h3,
    .equipment-step-card h3,
    .adopt-community-card h3 {
        font-size: 0.95rem !important;
        margin-bottom: 8px !important;
    }

    .group-purchase-card [style*="font-size: 0.9rem"],
    .group-purchase-card [style*="font-size: 0.85rem"],
    .equipment-category-card p,
    .equipment-step-card p,
    .adopt-community-card p {
        font-size: 0.8rem !important;
        line-height: 1.45 !important;
    }
}

@media (max-width: 480px) {
    .about-monthly-flow {
        gap: 8px !important;
    }

    .about-monthly-card,
    .about-monthly-time-chip {
        padding: 10px 12px !important;
    }

    .about-monthly-time-value {
        font-size: 1.15rem !important;
    }

    .about-monthly-time-label {
        font-size: 0.68rem !important;
    }

    .group-purchase-grid,
    .adopt-community-grid,
    .equipment-categories-grid,
    .equipment-steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .group-purchase-card,
    .adopt-community-card,
    .equipment-category-card,
    .equipment-step-card {
        padding: 14px !important;
    }
}

@media (min-width: 769px) {
    .about-monthly-time-chip {
        display: none !important;
    }
}

/* ========================================
   Print Styles (Bonus)
   ======================================== */
@media print {
    /* Hide decorative elements */
    [style*="animation"],
    .hero-particles,
    .hero-glow-orb,
    [style*="radial-gradient"][style*="blur"] {
        display: none !important;
    }

    /* Ensure single column */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}