/* Mobile Enhancements CSS */

/* Global responsive utilities */
* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Better mobile product cards */
@media (max-width: 767px) {
    /* Product Cards on Mobile */
    .grid.grid-cols-2 {
        gap: 0.75rem !important;
    }
    
    .rounded-xl {
        border-radius: 12px !important;
    }
    
    /* Product Images */
    .h-32.sm\\:h-36.md\\:h-40 {
        height: 120px !important;
    }
    
    /* Product Text */
    .text-lg.md\\:text-xl {
        font-size: 14px;
        line-height: 1.4;
    }
    
    .text-xs.md\\:text-sm {
        font-size: 11px;
        line-height: 1.3;
    }
    
    /* Price Text */
    .text-lg.md\\:text-2xl {
        font-size: 16px;
        font-weight: 700;
    }
    
    .text-sm.md\\:text-lg {
        font-size: 13px;
        font-weight: 600;
    }
    
    /* Product buttons on mobile - green styling */
    button[onclick*="addToCart"] {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
        color: white !important;
        font-size: 12px !important;
        padding: 0.5rem !important;
        font-weight: 600 !important;
    }
    
    /* Contact section styling */
    .grid.grid-cols-1.sm\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
    
    .contact-item {
        text-align: center !important;
        padding: 1rem !important;
        border-radius: 12px !important;
        background: white !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    .contact-item .text-2xl {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .contact-item .text-lg {
        font-size: 1rem !important;
        font-weight: 600 !important;
    }
    
    .contact-item .text-gray-600 {
        font-size: 0.875rem !important;
        margin-top: 0.25rem !important;
    }
    
    /* Contact colors */
    .text-green-600 {
        color: #22c55e !important;
        font-weight: 600;
    }
    
    .text-blue-600 {
        color: #3b82f6 !important;
        font-weight: 600;
    }
    
    .text-red-600 {
        color: #dc2626 !important;
        font-weight: 600;
    }
    
    /* Mobile Banner Responsive Design */
    #bannerSlider {
        min-height: 55vh !important;
        position: relative;
        overflow: hidden;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    /* Desktop Banner */
    #bannerSliderDesktop {
        min-height: 70vh !important;
        position: relative;
        overflow: hidden;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    /* Banner section styles */
    .banner-mobile-section {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        position: relative !important;
        height: 55vh !important;
    }
    
    .banner-desktop-section {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        position: relative !important;
        height: 70vh !important;
    }
    
    .banner-slide {
        padding: 0 !important;
        height: 100% !important;
        height: auto;
        max-width: 100vw !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    .banner-slide img {
        object-fit: cover !important;
        object-position: center !important;
        width: 100% !important;
        height: auto;
        display: block !important;
        max-width: none !important;
        border: none !important;
        outline: none !important;
        padding-top:20px;
    }
    
    /* Banner Navigation Dots - Mobile */
    .banner-dot {
        width: 8px !important;
        height: 8px !important;
        background: rgba(255, 255, 255, 0.6) !important;
        transition: all 0.3s ease !important;
        margin: 0 2px !important;
        border: none !important;
        border-radius: 50% !important;
        cursor: pointer !important;
    }
    
    .banner-dot:hover,
    .banner-dot.active {
        background: rgba(255, 255, 255, 0.9) !important;
        transform: scale(1.2) !important;
    }
    
    /* Updated Responsive Heights */
    .banner-slide {
        transition: opacity 1s ease-in-out, transform 1s ease-in-out !important;
    }
    
    .banner-slide.active {
        opacity: 1 !important;
        transform: translateX(0) !important;
    }
    
    .banner-slide:not(.active) {
        opacity: 0 !important;
        transform: translateX(100%) !important;
    }

}

/* Responsive banner heights for different screen sizes */
@media (max-width: 480px) {
    #bannerSlider {
        min-height: 45vh !important;
    }
    
    .banner-mobile-section {
        height: 45vh !important;
    }
    
    .banner-dot {
        width: 6px !important;
        height: 6px !important;
    }
}

@media (min-width: 481px) and (max-width: 640px) {
    #bannerSlider {
        min-height: 50vh !important;
    }
    
    .banner-mobile-section {
        height: 50vh !important;
    }
}

@media (min-width: 641px) and (max-width: 767px) {
    #bannerSlider {
        min-height: 55vh !important;
    }
    
    .banner-mobile-section {
        height: 55vh !important;
    }
}

/* Desktop responsive */
@media (min-width: 768px) {
    #bannerSliderDesktop {
        min-height: 65vh !important;
    }
    
    .banner-desktop-section {
        height: 65vh !important;
    }
}

@media (min-width: 1024px) {
    #bannerSliderDesktop {
        min-height: 70vh !important;
    }
    
    .banner-desktop-section {
        height: 70vh !important;
    }
}

@media (min-width: 1280px) {
    #bannerSliderDesktop {
        min-height: 75vh !important;
    }
    
    .banner-desktop-section {
        height: 75vh !important;
    }
}