/* ICON UX/UI OPTIMIZATION - COMPREHENSIVE DESIGN SYSTEM */
/* Optimized for both Mobile Responsive and Desktop */

/* ===== ICON SIZE SYSTEM ===== */
:root {
    --icon-xs: 0.75rem;    /* 12px */
    --icon-sm: 1rem;       /* 16px */
    --icon-md: 1.25rem;    /* 20px */
    --icon-lg: 1.5rem;     /* 24px */
    --icon-xl: 2rem;       /* 32px */
    --icon-2xl: 2.5rem;    /* 40px */
    --icon-3xl: 3rem;      /* 48px */
}

/* ===== NAVIGATION ICONS ===== */
/* Desktop Navigation */
.desktop-header .nav-link i {
    font-size: var(--icon-sm) !important;
    margin-right: 0.5rem !important;
    vertical-align: middle !important;
    transition: all 0.3s ease !important;
}

.desktop-header .nav-link:hover i {
    transform: scale(1.1) !important;
    color: #34d399 !important;
}

/* Mobile Top Bar */
.mobile-top-bar i {
    font-size: var(--icon-lg) !important;
    line-height: 1 !important;
    color: white !important;
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav i {
    font-size: var(--icon-lg) !important;
    margin-bottom: 0.25rem !important;
    transition: all 0.2s ease !important;
    color: #6b7280 !important;
}

.mobile-bottom-nav .active i {
    color: #22c55e !important;
    transform: scale(1.1) !important;
}

/* ===== CONTACT SECTION ICONS ===== */
.contact-item i,
.contact-info i {
    font-size: var(--icon-2xl) !important;
    color: #22c55e !important;
    margin-bottom: 0.75rem !important;
    display: block !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

.contact-item:hover i {
    transform: scale(1.15) rotate(5deg) !important;
    color: #16a34a !important;
}

/* Phone Icons */
.fa-phone,
.fa-phone-alt {
    color: #10b981 !important;
}

/* Email Icons */
.fa-envelope {
    color: #3b82f6 !important;
}

/* Location Icons */
.fa-map-marker-alt {
    color: #ef4444 !important;
}

/* Clock/Time Icons */
.fa-clock {
    color: #f59e0b !important;
}

/* ===== SOCIAL MEDIA ICONS ===== */
.social-icons a {
    width: 2.5rem !important;
    height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    margin: 0.25rem !important;
}

.social-icons a:hover {
    transform: translateY(-2px) scale(1.1) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.social-icons i {
    font-size: var(--icon-sm) !important;
    color: white !important;
}

/* Brand-specific colors */
.fab.fa-facebook-f { color: #1877f2 !important; }
.social-icons a:has(.fa-facebook-f) { background: #1877f2 !important; }

.fab.fa-line { color: #00b900 !important; }
.social-icons a:has(.fa-line) { background: #00b900 !important; }

.fab.fa-tiktok { color: #000000 !important; }
.social-icons a:has(.fa-tiktok) { background: #000000 !important; }

.fab.fa-youtube { color: #ff0000 !important; }
.social-icons a:has(.fa-youtube) { background: #ff0000 !important; }

.fab.fa-facebook-messenger { color: #0084ff !important; }
.social-icons a:has(.fa-facebook-messenger) { background: #0084ff !important; }

.fab.fa-instagram { color: #e4405f !important; }
.social-icons a:has(.fa-instagram) { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; }

/* ===== PRODUCT ICONS ===== */
.product-card i,
.group i {
    transition: all 0.2s ease !important;
}

/* Star Ratings */
.fa-star {
    color: #f59e0b !important;
    font-size: var(--icon-sm) !important;
    margin-right: 0.125rem !important;
}

/* Heart/Wishlist */
.fa-heart {
    color: #ef4444 !important;
    font-size: var(--icon-md) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.fa-heart:hover {
    transform: scale(1.2) !important;
    color: #dc2626 !important;
}

/* Shopping Cart */
.fa-shopping-cart {
    color: #22c55e !important;
    font-size: var(--icon-md) !important;
}

/* Cart Add Button */
.fa-cart-plus {
    color: white !important;
    font-size: var(--icon-sm) !important;
    margin-right: 0.5rem !important;
}

/* ===== FEATURE ICONS ===== */
.feature-icon i {
    font-size: var(--icon-3xl) !important;
    color: #22c55e !important;
    margin-bottom: 1rem !important;
    display: block !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

.feature-icon:hover i {
    transform: scale(1.1) rotate(-5deg) !important;
    color: #16a34a !important;
}

/* Specific Feature Icons */
.fa-truck { color: #3b82f6 !important; }
.fa-shield-alt { color: #10b981 !important; }
.fa-headset { color: #8b5cf6 !important; }
.fa-undo { color: #f59e0b !important; }

/* ===== BANNER/SLIDER ICONS ===== */
.banner-nav i,
.slider-nav i {
    font-size: var(--icon-md) !important;
    color: white !important;
    transition: all 0.2s ease !important;
}

.banner-nav:hover i,
.slider-nav:hover i {
    transform: scale(1.2) !important;
    color: #f3f4f6 !important;
}

/* ===== MOBILE RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    
    /* Larger touch targets for mobile */
    .mobile-nav-item i {
        font-size: var(--icon-xl) !important;
        padding: 0.5rem !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Contact icons smaller on mobile */
    .contact-item i {
        font-size: var(--icon-xl) !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Social icons more compact on mobile */
    .social-icons a {
        width: 2rem !important;
        height: 2rem !important;
        margin: 0.125rem !important;
    }
    
    .social-icons i {
        font-size: var(--icon-xs) !important;
    }
    
    /* Product icons adjust for mobile */
    .fa-star {
        font-size: var(--icon-xs) !important;
        margin-right: 0.0625rem !important;
    }
    
    /* Feature icons smaller on mobile */
    .feature-icon i {
        font-size: var(--icon-2xl) !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Cart badge positioning */
    .cart-count,
    .mobile-cart-badge {
        top: -0.25rem !important;
        right: -0.25rem !important;
        min-width: 1.25rem !important;
        height: 1.25rem !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: #ef4444 !important;
        color: white !important;
        border: 2px solid white !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }
}

/* ===== SMALL MOBILE DEVICES ===== */
@media (max-width: 375px) {
    
    .mobile-nav-item i {
        font-size: var(--icon-lg) !important;
        padding: 0.375rem !important;
    }
    
    .contact-item i {
        font-size: var(--icon-lg) !important;
    }
    
    .feature-icon i {
        font-size: var(--icon-xl) !important;
    }
    
    .social-icons a {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
    
    .cart-count,
    .mobile-cart-badge {
        min-width: 1rem !important;
        height: 1rem !important;
        font-size: 0.625rem !important;
    }
}

/* ===== DESKTOP ENHANCEMENTS ===== */
@media (min-width: 1024px) {
    
    /* Desktop navigation hover effects */
    .desktop-header .nav-link {
        position: relative !important;
        overflow: hidden !important;
    }
    
    .desktop-header .nav-link::before {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: -100% !important;
        width: 100% !important;
        height: 2px !important;
        background: #22c55e !important;
        transition: left 0.3s ease !important;
    }
    
    .desktop-header .nav-link:hover::before {
        left: 0 !important;
    }
    
    /* Desktop contact cards */
    .contact-item {
        transition: all 0.3s ease !important;
        cursor: pointer !important;
    }
    
    .contact-item:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Desktop feature cards */
    .feature-icon {
        transition: all 0.3s ease !important;
    }
    
    .feature-icon:hover {
        transform: translateY(-8px) !important;
        box-shadow: 0 15px 40px rgba(34, 197, 94, 0.15) !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
/* High contrast mode support */
@media (prefers-contrast: high) {
    .fas, .far, .fab, .fal, .fat, .fad, .fass,
    [class*="fa-"] {
        text-shadow: 0 0 1px currentColor !important;
        font-weight: 900 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .fas, .far, .fab, .fal, .fat, .fad, .fass,
    [class*="fa-"],
    .mobile-nav-item i,
    .contact-item i,
    .feature-icon i,
    .social-icons a {
        transition: none !important;
        animation: none !important;
    }
}

/* Focus indicators for keyboard navigation */
.mobile-nav-item:focus i,
.contact-item:focus i,
.social-icons a:focus i {
    outline: 2px solid #22c55e !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* ===== LOADING STATES ===== */
.icon-loading {
    opacity: 0.6 !important;
    animation: pulse 1.5s ease-in-out infinite !important;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ===== ERROR STATES ===== */
.icon-error {
    color: #ef4444 !important;
    animation: shake 0.5s ease-in-out !important;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

/* ===== SUCCESS STATES ===== */
.icon-success {
    color: #22c55e !important;
    animation: bounce 0.6s ease-in-out !important;
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}