/* Mobile Categories 2-Row Fix - Override all other styles */
@media screen and (max-width: 768px) {
    
    /* Mobile carousel pill buttons - smaller size for mobile */
    .carousel-btn, 
    .events-carousel .carousel-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.7rem !important;
        border-radius: 8px !important;
        border-width: 1px !important;
        box-shadow: 0 4px 12px rgba(24, 119, 242, 0.2) !important;
    }
    
    /* Categories carousel specific buttons - highest specificity */
    html body .categories-carousel-wrapper .carousel-btn.carousel-btn-prev,
    html body .categories-carousel-wrapper .carousel-btn.carousel-btn-next {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 9999 !important;
        background: linear-gradient(135deg, #1877f2 0%, #166fe5 100%) !important;
        border: 2px solid rgba(24, 119, 242, 0.3) !important;
        border-radius: 50% !important;
        width: 45px !important;
        height: 45px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        color: white !important;
        box-shadow: 0 4px 15px rgba(24, 119, 242, 0.5) !important;
        transition: all 0.3s ease !important;
        font-size: 16px !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    html body .categories-carousel-wrapper .carousel-btn.carousel-btn-prev {
        left: 5px !important;
    }

    html body .categories-carousel-wrapper .carousel-btn.carousel-btn-next {
        right: 5px !important;
    }

    html body .categories-carousel-wrapper .carousel-btn.carousel-btn-prev:active,
    html body .categories-carousel-wrapper .carousel-btn.carousel-btn-next:active {
        background: linear-gradient(135deg, #166fe5 0%, #0866d0 100%) !important;
        transform: translateY(-50%) scale(0.95) !important;
        box-shadow: 0 6px 16px rgba(24, 119, 242, 0.4) !important;
    }

    html body .categories-carousel-wrapper .carousel-btn i {
        pointer-events: none !important;
        font-size: 16px !important;
    }
    
    /* Hero CTA buttons - red premium color for mobile */
    .hero-cta {
        padding: 12px 24px !important;
        font-size: 14px !important;
        border-radius: 30px !important;
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
        color: white !important;
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 6px 20px rgba(231, 76, 60, 0.25) !important;
    }
    
    .hero-cta:hover {
        background: linear-gradient(135deg, #c0392b 0%, #a93226 100%) !important;
        box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4) !important;
        transform: translateY(-2px) !important;
    }
    
    .hero-cta i {
        font-size: 14px !important;
    }
    
    /* Creative Menu Button - Mobile Specific Optimizations */
    .mobile-menu-toggle {
        width: 42px !important;
        height: 42px !important;
        top: 15px !important;
        left: 15px !important;
        border-radius: 50% !important;
    }
    
    .creative-menu-icon {
        width: 22px !important;
        height: 22px !important;
    }
    
    .menu-dots {
        width: 16px !important;
        height: 16px !important;
        gap: 3px !important;
    }
    
    .dot {
        width: 3px !important;
        height: 3px !important;
    }
    
    .menu-ring {
        width: 26px !important;
        height: 26px !important;
        border-width: 1.5px !important;
    }
    
    .menu-pulse {
        width: 30px !important;
        height: 30px !important;
    }
    
    /* Creative Cart Button - Mobile Specific Optimizations */
    .mobile-cart-button {
        width: 47px !important;
        height: 47px !important;
        top: 15px !important;
        right: 15px !important;
        border: none !important;
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    .creative-cart-icon {
        width: 50px !important;
        height: 50px !important;
    }
    
    .cart-body {
        width: 50px !important;
        height: 45px !important;
    }
    
    .cart-base {
        width: 50px !important;
        height: 45px !important;
        border: none !important;
    }
    
    .cart-handle {
        width: 13px !important;
        height: 6px !important;
        border-width: 1.5px !important;
        top: -2px !important;
        left: -6px !important;
    }
    
    .wheel {
        width: 5px !important;
        height: 5px !important;
        bottom: -9px !important;
        border-width: 1.5px !important;
    }
    
    .cart-grid {
        width: 13px !important;
        height: 10px !important;
        top: 3px !important;
        left: 3px !important;
    }
    
    .cart-grid {
        display: none !important;
    }
    
    .falling-items {
        width: 42px !important;
        height: 50px !important;
        top: -20px !important;
        left: -3px !important;
    }
    
    .falling-item {
        width: 5px !important;
        height: 5px !important;
    }
    html body .categories-carousel-wrapper {
        position: relative !important;
        padding: 0 55px !important;
        overflow: visible !important;
    }

    html body .categories-carousel-container {
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        position: relative !important;
    }

    html body .categories-carousel-container::-webkit-scrollbar {
        display: none !important;
    }

    html body .categories-carousel {
        display: grid !important;
        grid-template-rows: repeat(2, 150px) !important;
        grid-auto-flow: column !important;
        grid-auto-columns: 160px !important;
        gap: 16px !important;
        padding: 15px 5px !important;
        overflow: visible !important;
    }

    .category-card {
        width: 160px !important;
        height: 150px !important;
        min-width: 160px !important;
        min-height: 150px !important;
        max-width: 160px !important;
        max-height: 150px !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 30px 20px !important;
        scroll-snap-align: start !important;
    }
    
    .category-card i {
        font-size: 1.8rem !important;
        margin-bottom: 0.3rem !important;
    }

    /* Keep the same colorful gradient icons as desktop */
    .category-card[data-category="Food & Dining"] i {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 4px rgba(255, 107, 107, 0.4)) !important;
    }

    .category-card[data-category="Beauty & Spas"] i {
        background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 4px rgba(255, 154, 158, 0.4)) !important;
    }

    .category-card[data-category="Activities"] i {
        background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 4px rgba(78, 205, 196, 0.4)) !important;
    }

    .category-card[data-category="Trains"] i {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.4)) !important;
    }

    .category-card[data-category="Flights"] i {
        background: linear-gradient(135deg, #1877f2 0%, #166fe5 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 4px rgba(24, 119, 242, 0.4)) !important;
    }

    .category-card[data-category="Vacations"] i {
        background: linear-gradient(135deg, #1877f2 0%, #166fe5 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 4px rgba(24, 119, 242, 0.4)) !important;
    }

    .category-card[data-category="Transportation"] i {
        background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 4px rgba(137, 247, 254, 0.4)) !important;
    }

    .category-card[data-category="Car Hire"] i {
        background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 4px rgba(137, 247, 254, 0.4)) !important;
    }

    .category-card[data-category="Experiences"] i {
        background: linear-gradient(135deg, #ffd93d 0%, #ff6b6b 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 4px rgba(255, 217, 61, 0.4)) !important;
    }

    .category-card[data-category="Accommodation"] i {
        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 4px rgba(168, 237, 234, 0.4)) !important;
    }

    .category-card[data-category="Health & Wellness"] i {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 4px rgba(67, 233, 123, 0.4)) !important;
    }

    .category-card[data-category="Car Sales"] i {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 4px rgba(250, 112, 154, 0.4)) !important;
    }

    .category-card[data-category="Hotels Booking"] i {
        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 4px rgba(255, 236, 210, 0.4)) !important;
    }

    .category-card[data-category="Gifting"] i {
        background: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 4px rgba(210, 153, 194, 0.4)) !important;
    }

    .category-card[data-category="Shopping"] i {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        filter: drop-shadow(0 2px 4px rgba(240, 147, 251, 0.4)) !important;
    }
    
    .category-card span {
        font-size: 0.75rem !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }
}