/* ========================================
   COMPREHENSIVE RESPONSIVE BREAKPOINT SYSTEM
   Mobile-First Approach for All Screen Sizes
   ======================================== */

/* EXTRA SMALL: 320px - 374px (Small Phones) */
@media (max-width: 374px) {
    html { font-size: 14px; }
    .site-header .container { gap: 0.5rem; }
    .logo img { height: 40px; }
    .section-heading { font-size: clamp(1.5rem, 6vw, 2rem); }
}

/* SMALL: 375px - 479px (Mobile Phones) */
@media (max-width: 479px) {
    .hero-split-modern { min-height: auto; padding: 2rem 0 1.5rem; overflow: visible; }
    .hero-split-modern__title { font-size: clamp(1.25rem, 7vw, 1.85rem); }
    .hero-split-modern__description { font-size: 0.9375rem; }
    .why-choose-split { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .newsletter form { flex-direction: column; }
}

/* MEDIUM: 480px - 640px (Large Phones) */
@media (min-width: 480px) and (max-width: 640px) {
    .hero-split-modern__title { font-size: clamp(1.5rem, 6vw, 2.25rem); }
    .hero-split-modern__description { font-size: 1rem; }
    .categories-clean-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .category-clean-card { padding: 1.5rem; }
    .why-feature-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* TABLET: 641px - 1023px (Tablets) */
@media (min-width: 641px) and (max-width: 1023px) {
    .hero-split-modern { overflow: visible; }
    .hero-split-modern__title { font-size: clamp(1.75rem, 5vw, 2.75rem); }
    .hero-split-modern__description { font-size: 1.0625rem; }
    .categories-clean-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .section-header-modern { flex-direction: column; align-items: flex-start; }
    .why-choose-split { grid-template-columns: 1fr; }
    .why-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
}

/* SMALL DESKTOP: 1024px - 1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
    .hero-split-modern__title { font-size: clamp(2rem, 4vw, 2.75rem); }
    .categories-clean-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: repeat(3, 1fr); }
}

/* LARGE DESKTOP: 1280px+ */
@media (min-width: 1280px) {
    .categories-clean-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* ========== UNIVERSAL MOBILE FIXES (max-width: 640px) ========== */
@media (max-width: 640px) {
    .section { padding: clamp(2.5rem, 4vw, 3rem) 0; }
    .container, .container-wide, .why-choose-container {
        padding-left: clamp(1rem, 2.5vw, 1.25rem);
        padding-right: clamp(1rem, 2.5vw, 1.25rem);
    }
    .site-header .container { gap: 0.75rem; }
    .button-header-contact { padding: 0.6rem 1rem; font-size: 0.875rem; white-space: nowrap; }
    
    /* Hero Mobile Fixes */
    .hero-split-modern__container { grid-template-columns: 1fr; padding: 0 1rem; gap: 1.5rem; }
    .hero-split-modern__left { padding-right: 0; text-align: center; }
    .hero-split-modern__buttons { justify-content: center; flex-direction: column; width: 100%; }
    .hero-split-modern__buttons .button,
    .hero-split-modern__buttons .button-secondary { width: 100%; padding: 1rem 1.5rem; }
    .hero-split-modern { overflow: visible; } /* Prevent clipping */

    /* Categories Clean Grid - Horizontal Swipe Fix */
    .categories-clean-grid {
        display: flex !important; /* Force flex layout for swipe */
        grid-template-columns: unset !important; /* Disable grid layout */
        overflow-x: auto !important; /* Enable horizontal scrolling */
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 1.25rem;
        padding-bottom: 1.5rem; /* Space for scrollbar/shadow */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    
    /* Hide scrollbar for Chrome/Safari */
    .categories-clean-grid::-webkit-scrollbar {
        display: none;
    }

    .category-clean-card {
        flex: 0 0 280px; /* Fixed width for cards */
        width: 280px;
        scroll-snap-align: center;
    }

    /* Brands Modern Grid - Horizontal Swipe Fix */
    .brands-modern__grid {
        display: flex !important;
        grid-template-columns: unset !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 1.25rem;
        padding-bottom: 1.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .brands-modern__grid::-webkit-scrollbar {
        display: none;
    }

    .brand-card-modern {
        flex: 0 0 200px;
        width: 200px;
        scroll-snap-align: center;
        min-width: 200px;
    }
    
    /* Ensure proper sizing for smaller screens */
    @media (max-width: 350px) {
        .category-clean-card {
            flex: 0 0 240px;
            width: 240px;
        }
        .brand-card-modern {
            flex: 0 0 160px;
            width: 160px;
            min-width: 160px;
            padding: 1.5rem 1rem;
        }
    }

    .feature-grid { grid-template-columns: 1fr; }
    .services-grid { grid-template-columns: 1fr; }
    .testimonial-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .catalog-grid { grid-template-columns: repeat(2, 1fr); }
    .newsletter form { flex-direction: column; }
    .newsletter input[type="email"] { width: 100%; min-width: unset; }
    .filter-group select,
    .filter-group input[type="search"],
    .filter-group input[type="range"] { width: 100%; min-width: unset; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .quick-category-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; }
    form input, form textarea, form select { font-size: 16px; }
}

/* ========== FOOTER STACKING FIXES ========== */
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr !important; gap: 1.75rem; }
    .footer-grid > div { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.25rem; }
    .footer-grid > div:first-child { border-top: none; padding-top: 0; }
    .footer-bottom { flex-direction: column; gap: 1.25rem; }
}

/* ========== SERVICES PAGE REDESIGN RESPONSIVE ========== */
@media (max-width: 768px) {
    .services-hero-redesign {
        padding: 4rem 1.5rem;
        min-height: 400px;
    }
    
    .trust-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .pillars-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .pillar-card {
        padding: 2rem;
    }
    
    .process-steps-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .process-steps-container::before {
        display: none;
    }
    
    .final-cta-redesign {
        padding: 4rem 0;
    }
}

@media (max-width: 480px) {
    .services-hero-redesign {
        padding: 3rem 1rem;
        min-height: 350px;
    }
    
    .trust-stats-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .stat-item strong {
        font-size: 1.75rem;
    }
    
    .pillar-card {
        padding: 1.5rem;
    }
    
    .pillar-icon {
        padding: 0.75rem;
    }
    
    .pillar-icon svg {
        width: 40px;
        height: 40px;
    }
}

/* ========== PAY INVOICE PAGE RESPONSIVE ========== */
@media (max-width: 640px) {
    .pay-wrapper--centered {
        max-width: 100%;
        margin: 0;
    }
    
    .pay-card {
        padding: 1.5rem;
        border-radius: var(--radius-md);
    }
    
    .pay-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 1.25rem;
    }
    
    .pay-icon svg {
        width: 32px;
        height: 32px;
    }
    
    .pay-title {
        font-size: 1.25rem;
        margin-bottom: 0.875rem;
    }
    
    .pay-description {
        font-size: 0.9375rem;
        margin-bottom: 1.5rem;
        padding: 0 0.5rem;
    }
    
    .pay-button {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        width: 100%;
    }
    
    .pay-contact {
        font-size: 0.875rem;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .pay-link {
        display: inline-block;
        word-break: break-all;
    }
}

@media (max-width: 374px) {
    .pay-card {
        padding: 1.25rem;
    }
    
    .pay-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 1rem;
    }
    
    .pay-icon svg {
        width: 28px;
        height: 28px;
    }
    
    .pay-title {
        font-size: 1.125rem;
    }
    
    .pay-description {
        font-size: 0.875rem;
        padding: 0;
    }
    
    .pay-button {
        padding: 0.875rem 1.25rem;
        font-size: 0.9375rem;
    }
    
    .pay-contact {
        font-size: 0.8125rem;
        padding-left: 0;
        padding-right: 0;
    }
}