/* 
 * Curved Mobile Menu CSS - สำหรับเมนู Mobile แบบโค้งตามรูป LIMGAR
 * Version: 1.0
 * Date: 2024-01-15
 */

/* ===== MOBILE CURVED NAVIGATION ===== */
@media (max-width: 768px) {
    
    /* Base Curved Navigation */
    .mobile-curved-nav {
        pointer-events: none; /* Allow clicks to pass through background */
    }
    
    .mobile-curved-nav > div {
        pointer-events: auto; /* Re-enable clicks on content */
    }
    
    /* SVG Background Enhancements */
    .mobile-curved-nav svg {
        width: 100% !important;
        height: 80px !important;
        display: block !important;
        overflow: visible !important;
    }
    
    /* Navigation Items Container */
    .mobile-curved-nav .absolute.inset-0 {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 32px 0 32px !important;
        height: 80px !important;
    }
    
    /* Curved Navigation Items */
    .curved-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 8px 4px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border-radius: 12px !important;
        min-width: 44px !important;
        min-height: 60px !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Hover Effects for Curved Items */
    .curved-nav-item:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        transform: translateY(-2px) !important;
    }
    
    .curved-nav-item:active {
        transform: translateY(0) scale(0.95) !important;
    }
    
    /* Icons in Curved Navigation */
    .curved-nav-item i {
        font-family: 'Font Awesome 5 Free' !important;
        font-weight: 900 !important;
        font-size: 1.25rem !important; /* 20px */
        color: #ffffff !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        line-height: 1 !important;
        text-align: center !important;
        transition: all 0.3s ease !important;
        text-rendering: optimizeLegibility !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    /* Icon Hover Effects */
    .curved-nav-item:hover i {
        transform: scale(1.1) !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Text Labels in Curved Navigation */
    .curved-nav-item span.thai-text {
        font-family: 'Sarabun', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-size: 0.625rem !important; /* 10px - smaller for curved design */
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        line-height: 1.2 !important;
        text-align: center !important;
        margin-top: 0.25rem !important;
        transition: all 0.3s ease !important;
        white-space: nowrap !important;
        letter-spacing: 0.025em !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* Text Hover Effects */
    .curved-nav-item:hover span.thai-text {
        color: #ffffff !important;
        font-weight: 600 !important;
        transform: translateY(-1px) !important;
    }
    
    /* ===== HOME CENTER BUTTON ===== */
    .home-center-button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* Center Button Circle */
    .home-center-button > div:first-child {
        width: 64px !important;
        height: 64px !important;
        background: #ffffff !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-8px) !important;
        transition: all 0.3s ease !important;
        border: 3px solid rgba(255, 255, 255, 0.8) !important;
    }
    
    /* Inner Green Square */
    .home-center-button .bg-green-600 {
        width: 32px !important;
        height: 32px !important;
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3) !important;
    }
    
    /* Home Icon */
    .home-center-button .fas.fa-home {
        font-size: 1.125rem !important; /* 18px */
        color: #ffffff !important;
    }
    
    /* Home Button Hover */
    .home-center-button:hover > div:first-child {
        transform: translateY(-10px) scale(1.05) !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2) !important;
    }
    
    .home-center-button:active > div:first-child {
        transform: translateY(-6px) scale(0.98) !important;
    }
    
    /* Home Button Text */
    .home-center-button span.thai-text {
        font-family: 'Sarabun', 'Noto Sans Thai', sans-serif !important;
        font-size: 0.625rem !important; /* 10px */
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.95) !important;
        text-align: center !important;
        margin-top: 0.25rem !important;
        transform: translateY(-4px) !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* ===== CART BADGE ENHANCEMENTS ===== */
    .curved-nav-item .cart-count {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
        color: #ffffff !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        font-size: 0.625rem !important; /* 10px */
        font-weight: 700 !important;
        line-height: 1 !important;
        min-width: 18px !important;
        height: 18px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        z-index: 10 !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4) !important;
        animation: cartPulse 2s infinite !important;
    }
    
    /* Cart Badge Animation */
    @keyframes cartPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }
    
    /* ===== ONLINE INDICATOR ===== */
    .curved-nav-item .bg-yellow-400 {
        width: 12px !important;
        height: 12px !important;
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
        border-radius: 50% !important;
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        z-index: 10 !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3) !important;
        animation: onlinePulse 3s infinite !important;
    }
    
    /* Online Indicator Animation */
    @keyframes onlinePulse {
        0%, 100% { box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3); }
        50% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.1); }
    }
    
    /* ===== ACTIVE STATES ===== */
    .curved-nav-item[data-active="true"] {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: translateY(-2px) !important;
    }
    
    .curved-nav-item[data-active="true"] i {
        color: #fbbf24 !important; /* Yellow for active state */
        transform: scale(1.05) !important;
        text-shadow: 0 2px 8px rgba(251, 191, 36, 0.5) !important;
    }
    
    .curved-nav-item[data-active="true"] span.thai-text {
        color: #fbbf24 !important;
        font-weight: 600 !important;
    }
    
    .home-center-button[data-active="true"] .bg-green-600 {
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
        box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4) !important;
    }
    
    /* ===== SPECIFIC ICON IMPROVEMENTS ===== */
    /* Shopping Bag Icon */
    .fas.fa-shopping-bag {
        font-size: 1.25rem !important;
    }
    
    /* Grid/Category Icon */
    .fas.fa-th {
        font-size: 1.125rem !important;
    }
    
    /* Comments/Chat Icon */
    .fas.fa-comments {
        font-size: 1.25rem !important;
    }
    
    /* User/Profile Icon */
    .fas.fa-user {
        font-size: 1.125rem !important;
    }
    
    /* ===== SVG RESPONSIVENESS ===== */
    .mobile-curved-nav svg path {
        transition: all 0.3s ease !important;
    }
    
    /* Different screen sizes */
    @media (max-width: 360px) {
        .mobile-curved-nav .absolute.inset-0 {
            padding: 8px 24px 0 24px !important;
        }
        
        .curved-nav-item span.thai-text {
            font-size: 0.5rem !important; /* 8px for very small screens */
        }
        
        .home-center-button > div:first-child {
            width: 56px !important;
            height: 56px !important;
        }
        
        .home-center-button .bg-green-600 {
            width: 28px !important;
            height: 28px !important;
        }
    }
    
    @media (min-width: 390px) and (max-width: 430px) {
        .mobile-curved-nav .absolute.inset-0 {
            padding: 8px 36px 0 36px !important;
        }
    }
    
    /* ===== LOADING ANIMATIONS ===== */
    /* Stagger loading animations */
    .curved-nav-item:nth-child(1) {
        animation: slideInLeft 0.6s ease-out 0.1s both;
    }
    
    .curved-nav-item:nth-child(2) {
        animation: slideInLeft 0.6s ease-out 0.2s both;
    }
    
    .home-center-button {
        animation: scaleIn 0.6s ease-out 0.3s both;
    }
    
    .curved-nav-item:nth-child(4) {
        animation: slideInRight 0.6s ease-out 0.4s both;
    }
    
    .curved-nav-item:nth-child(5) {
        animation: slideInRight 0.6s ease-out 0.5s both;
    }
    
    @keyframes slideInLeft {
        0% {
            opacity: 0;
            transform: translateX(-30px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes slideInRight {
        0% {
            opacity: 0;
            transform: translateX(30px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes scaleIn {
        0% {
            opacity: 0;
            transform: scale(0.8) translateY(-8px);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateY(-8px);
        }
    }
    
    /* ===== ACCESSIBILITY IMPROVEMENTS ===== */
    /* Focus states */
    .curved-nav-item:focus,
    .home-center-button:focus {
        outline: 2px solid rgba(255, 255, 255, 0.8) !important;
        outline-offset: 4px !important;
    }
    
    /* High contrast mode */
    @media (prefers-contrast: high) {
        .curved-nav-item i,
        .curved-nav-item span.thai-text {
            color: #ffffff !important;
        }
        
        .mobile-curved-nav svg path {
            fill: #000000 !important;
        }
        
        .home-center-button > div:first-child {
            background: #ffffff !important;
            border: 3px solid #000000 !important;
        }
    }
    
    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .curved-nav-item,
        .home-center-button,
        .curved-nav-item i,
        .cart-count,
        .bg-yellow-400 {
            animation: none !important;
            transition: none !important;
        }
        
        .curved-nav-item:hover,
        .home-center-button:hover > div:first-child {
            transform: none !important;
        }
    }
}

/* ===== DESKTOP OVERRIDES ===== */
@media (min-width: 769px) {
    .mobile-curved-nav {
        display: none !important;
    }
    
    body {
        padding-bottom: 0 !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .mobile-curved-nav {
        display: none !important;
    }
}

/* ===== RTL SUPPORT ===== */
[dir="rtl"] .mobile-curved-nav .absolute.inset-0 {
    flex-direction: row-reverse !important;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.mobile-curved-nav {
    will-change: transform !important;
    contain: layout style paint !important;
}

.curved-nav-item {
    will-change: transform !important;
}

.home-center-button > div:first-child {
    will-change: transform !important;
}