/* ==========================================================================
   MADISONMART CENTRALIZED RESPONSIVE STYLESHEET
   ========================================================================== */

/* --------------------------------------------------------------------------
   MODULE 1: GLOBAL HEADER & NAVIGATION (Applicable to all user-facing pages)
   -------------------------------------------------------------------------- */

/* Tablet View (Max Width: 992px) */
@media screen and (max-width: 992px) {
    /* Hide desktop center menu & right search box */
    .header .nav-center,
    .header .nav-right .search-box {
        display: none !important;
    }

    /* Show Mobile Hamburger Button */
    .header .hamburger-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        background: transparent;
        border: none;
        color: var(--medkart-blue, #1c5ba6);
        cursor: pointer;
    }

    .header .navbar {
        padding: 10px 16px !important;
    }
}

/* Mobile View (Max Width: 576px) */
@media screen and (max-width: 576px) {
    .header .logo-img {
        height: 36px !important;
    }

    .header .action-btn span {
        display: none !important; /* Mobile me sirf Sign-in Icon dikhega */
    }

    .header .action-btn {
        padding: 8px 12px !important;
    }
}


/* --------------------------------------------------------------------------
   MODULE 2: INDEX PAGE SPECIFIC SCOPED STYLES (index.php)
   -------------------------------------------------------------------------- */

/* Large Tablets & Small Laptops (Max Width: 1200px) */
@media screen and (max-width: 1200px) {
    /* Categories Grid: 4 Columns */
    .concerns-section .categories-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
    }
}

/* Tablets (Max Width: 992px) */
@media screen and (max-width: 992px) {
    /* Hero Banner Slider */
    .banner-section .slide img {
        height: auto !important;
        min-height: 200px;
        object-fit: cover;
    }

    .banner-section .slider-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
    }

    /* Categories Grid: 3 Columns */
    .concerns-section .categories-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Choose Smart Generic Section */
    .generic-info-section .generic-container {
        flex-direction: column-reverse !important;
        gap: 30px !important;
        padding: 24px 16px !important;
    }

    .generic-info-section .generic-cards-wrapper {
        width: 100% !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Promo Banners Stack */
    .promo-banners-container {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .promo-banners-container .promo-banner {
        width: 100% !important;
    }
}

/* Mobile Devices (Max Width: 768px) */
@media screen and (max-width: 768px) {
    /* Health Concerns / Categories Header */
    .concerns-section .concerns-header {
        flex-direction: row !important;
        align-items: center !important;
    }

    .concerns-section .concerns-title {
        font-size: 1.2rem !important;
    }

    /* Categories Grid: 2 Columns on Mobile */
    .concerns-section .categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .concerns-section .category-card .cat-img-wrapper {
        height: 110px !important;
    }

    /* Choose Smart Generic Cards Stack */
    .generic-info-section .generic-cards-wrapper {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Section Titles */
    .trending-title, 
    .spotlight-title, 
    .section-header h2,
    .testimonials-section .section-title,
    .faq-main-title,
    .stats-heading {
        font-size: 1.25rem !important;
    }

    /* Slider Arrows Mobile Adjustment */
    .trending-carousel-wrapper .nav-arrow,
    .spotlight-carousel-wrapper .nav-arrow,
    .carousel-container .scroll-btn {
        display: none !important;
    }

    /* Dynamic Tracks enable Touch Horizontal Scroll */
    .trending-track,
    .spotlight-track,
    .generic-track {
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }

    /* Trust Stats Grid */
    .trust-stats-section .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

/* Extra Small Devices (Max Width: 480px) */
@media screen and (max-width: 480px) {
    /* Trust Stats Grid: 1 Column */
    .trust-stats-section .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .promo-banner .banner-content h2 {
        font-size: 1.1rem !important;
    }

    .promo-banner .banner-content p {
        font-size: 0.8rem !important;
    }
}