/**
 * ByEco - Storefront Dynamic Theme & Animated Gradient Engine v3.0
 * Provides responsive full banner display (Issue 1) and dynamic animated gradient flow
 * across navigation menus, category filters, buttons, and badges for all 5 color palettes (Issue 2).
 */

/* ============================================================
   1. HARDWARE-ACCELERATED ANIMATED GRADIENT KEYFRAMES
   ============================================================ */
@keyframes byecoGradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes byecoButtonShine {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes byecoPillGlow {
    0%, 100% {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 0 12px rgba(255, 255, 255, 0.35);
    }
    50% {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.55);
    }
}

/* ============================================================
   2. COLOR PALETTES & GRADIENT TOKENS FOR ALL THEMES
   ============================================================ */

/* Theme 1: Emerald Organic (Default / Health & Organic) */
:root,
[data-theme="green-fresh"],
[data-theme="default"],
[data-theme="green"] {
    --primary: #059669;
    --primary-dark: #064e3b;
    --primary-light: #10b981;
    --primary-rgb: 5, 150, 105;
    --secondary: #10b981;
    --accent: #f59e0b;
    --accent-rgb: 245, 158, 11;
    --gradient-1: #064e3b;
    --gradient-2: #047857;
    --gradient-3: #059669;
    --gradient-4: #10b981;
    --gradient-5: #34d399;
    --glow-color: rgba(16, 185, 129, 0.35);
}

/* Theme 2: Royal Sapphire Blue (Gadgets, Tech & Electronics) */
[data-theme="royal-blue"],
[data-theme="royal_blue"],
[data-theme="blue"] {
    --primary: #0284c7;
    --primary-dark: #0369a1;
    --primary-light: #38bdf8;
    --primary-rgb: 2, 132, 199;
    --secondary: #0ea5e9;
    --accent: #f59e0b;
    --accent-rgb: 245, 158, 11;
    --gradient-1: #0f172a;
    --gradient-2: #1e40af;
    --gradient-3: #0284c7;
    --gradient-4: #0ea5e9;
    --gradient-5: #38bdf8;
    --glow-color: rgba(2, 132, 199, 0.35);
}

/* Theme 3: Luxury Velvet Purple (Beauty, Fashion & Luxury) */
[data-theme="elegant-purple"],
[data-theme="purple"] {
    --primary: #7c3aed;
    --primary-dark: #581c87;
    --primary-light: #a855f7;
    --primary-rgb: 124, 58, 237;
    --secondary: #9333ea;
    --accent: #fb7185;
    --accent-rgb: 251, 113, 133;
    --gradient-1: #2e1065;
    --gradient-2: #581c87;
    --gradient-3: #7c3aed;
    --gradient-4: #9333ea;
    --gradient-5: #c084fc;
    --glow-color: rgba(124, 58, 237, 0.35);
}

/* Theme 4: Minimal Dark Zinc (Ultra-Modern Dark) */
[data-theme="dark-mode"],
[data-theme="dark"] {
    --primary: #3f3f46;
    --primary-dark: #09090b;
    --primary-light: #71717a;
    --primary-rgb: 63, 63, 70;
    --secondary: #52525b;
    --accent: #38bdf8;
    --accent-rgb: 56, 189, 248;
    --gradient-1: #09090b;
    --gradient-2: #18181b;
    --gradient-3: #27272a;
    --gradient-4: #3f3f46;
    --gradient-5: #52525b;
    --glow-color: rgba(82, 82, 91, 0.4);
}

/* Theme 5: Sunset Amber Orange (Food, Spices & Kitchen) */
[data-theme="sunset-orange"],
[data-theme="orange"] {
    --primary: #ea580c;
    --primary-dark: #7c2d12;
    --primary-light: #fb923c;
    --primary-rgb: 234, 88, 12;
    --secondary: #f97316;
    --accent: #facc15;
    --accent-rgb: 250, 204, 21;
    --gradient-1: #431407;
    --gradient-2: #7c2d12;
    --gradient-3: #c2410c;
    --gradient-4: #ea580c;
    --gradient-5: #fb923c;
    --glow-color: rgba(234, 88, 12, 0.35);
}

/* Theme 6: Ruby Crimson Red (Flash Sales, Festive & Retail) */
[data-theme="ruby-red"],
[data-theme="red"],
[data-theme="crimson"] {
    --primary: #dc2626;
    --primary-dark: #7f1d1d;
    --primary-light: #ef4444;
    --primary-rgb: 220, 38, 38;
    --secondary: #ef4444;
    --accent: #f59e0b;
    --accent-rgb: 245, 158, 11;
    --gradient-1: #450a0a;
    --gradient-2: #7f1d1d;
    --gradient-3: #991b1b;
    --gradient-4: #dc2626;
    --gradient-5: #ef4444;
    --glow-color: rgba(220, 38, 38, 0.35);
}

/* Theme 7: Rose Gold & Blush Pink (Cosmetics, Skincare & Fashion) */
[data-theme="rose-pink"],
[data-theme="pink"],
[data-theme="rose"],
[data-theme="blush"] {
    --primary: #db2777;
    --primary-dark: #831843;
    --primary-light: #f472b6;
    --primary-rgb: 219, 39, 119;
    --secondary: #ec4899;
    --accent: #fb7185;
    --accent-rgb: 251, 113, 133;
    --gradient-1: #500724;
    --gradient-2: #831843;
    --gradient-3: #9d174d;
    --gradient-4: #db2777;
    --gradient-5: #f472b6;
    --glow-color: rgba(219, 39, 119, 0.35);
}

/* Theme 8: Ocean Cyan & Teal (Clean Wellness, Healthcare & Aqua) */
[data-theme="ocean-teal"],
[data-theme="teal"],
[data-theme="cyan"],
[data-theme="aqua"] {
    --primary: #0891b2;
    --primary-dark: #164e63;
    --primary-light: #06b6d4;
    --primary-rgb: 8, 145, 178;
    --secondary: #06b6d4;
    --accent: #10b981;
    --accent-rgb: 16, 185, 129;
    --gradient-1: #083344;
    --gradient-2: #164e63;
    --gradient-3: #0e7490;
    --gradient-4: #0891b2;
    --gradient-5: #06b6d4;
    --glow-color: rgba(8, 145, 178, 0.35);
}

/* Theme 9: Midnight Obsidian Gold (Ultra-Luxury, Watches & Perfumes) */
[data-theme="midnight-gold"],
[data-theme="gold"],
[data-theme="obsidian"],
[data-theme="luxury-gold"] {
    --primary: #d97706;
    --primary-dark: #18181b;
    --primary-light: #fbbf24;
    --primary-rgb: 217, 119, 6;
    --secondary: #f59e0b;
    --accent: #fbbf24;
    --accent-rgb: 251, 191, 36;
    --gradient-1: #09090b;
    --gradient-2: #18181b;
    --gradient-3: #451a03;
    --gradient-4: #78350f;
    --gradient-5: #d97706;
    --glow-color: rgba(217, 119, 6, 0.35);
}

/* Theme 10: Electric Indigo (Tech Gadgets, Sneakers & Gaming) */
[data-theme="electric-indigo"],
[data-theme="indigo"],
[data-theme="electric_indigo"] {
    --primary: #4f46e5;
    --primary-dark: #1e1b4b;
    --primary-light: #818cf8;
    --primary-rgb: 79, 70, 229;
    --secondary: #6366f1;
    --accent: #a855f7;
    --accent-rgb: 168, 85, 247;
    --gradient-1: #1e1b4b;
    --gradient-2: #312e81;
    --gradient-3: #3730a3;
    --gradient-4: #4f46e5;
    --gradient-5: #818cf8;
    --glow-color: rgba(79, 70, 229, 0.35);
}

/* Theme 11: Roasted Mocha & Caramel (Artisan Coffee & Handcrafted Goods) */
[data-theme="roasted-mocha"],
[data-theme="mocha"],
[data-theme="coffee"],
[data-theme="brown"] {
    --primary: #854d0e;
    --primary-dark: #381a06;
    --primary-light: #b45309;
    --primary-rgb: 133, 77, 14;
    --secondary: #a16207;
    --accent: #ca8a04;
    --accent-rgb: 202, 138, 4;
    --gradient-1: #271406;
    --gradient-2: #381a06;
    --gradient-3: #5c2c0e;
    --gradient-4: #854d0e;
    --gradient-5: #b45309;
    --glow-color: rgba(133, 77, 14, 0.35);
}

/* Theme 12: Tropical Coral Sunset (Summer Fashion, Kids & Lifestyle) */
[data-theme="coral-sunset"],
[data-theme="coral"],
[data-theme="coral-peach"],
[data-theme="peach"] {
    --primary: #f43f5e;
    --primary-dark: #881337;
    --primary-light: #fb7185;
    --primary-rgb: 244, 63, 94;
    --secondary: #fb7185;
    --accent: #fb923c;
    --accent-rgb: 251, 146, 60;
    --gradient-1: #4c0519;
    --gradient-2: #881337;
    --gradient-3: #be123c;
    --gradient-4: #f43f5e;
    --gradient-5: #fb7185;
    --glow-color: rgba(244, 63, 94, 0.35);
}

/* ============================================================
   3. ISSUE 1 SOLVED: WIDER THEME BANNER FULL DISPLAY
   Prevents fixed-height clipping and displays 100% full banner
   ============================================================ */
.banner-carousel,
html[data-layout="fullwidth"] .banner-carousel,
body.layout-fullwidth .banner-carousel {
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    border-bottom: none !important;
    background-color: transparent !important;
}

.banner-carousel .carousel-inner,
.banner-carousel .carousel-item,
html[data-layout="fullwidth"] .banner-carousel .carousel-inner,
body.layout-fullwidth .banner-carousel .carousel-inner,
html[data-layout="fullwidth"] .banner-carousel .carousel-item,
body.layout-fullwidth .banner-carousel .carousel-item {
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    overflow: visible !important;
}

.banner-carousel .carousel-item img,
html[data-layout="fullwidth"] .banner-carousel .carousel-item img,
body.layout-fullwidth .banner-carousel .carousel-item img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Indicators on Banner */
.banner-carousel .carousel-indicators {
    bottom: 12px !important;
    margin-bottom: 0 !important;
    z-index: 4 !important;
}
.banner-carousel .carousel-indicators button {
    background-color: #ffffff !important;
    opacity: 0.55 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}
.banner-carousel .carousel-indicators button.active {
    opacity: 1 !important;
    background-color: var(--primary-light) !important;
    width: 26px !important;
    border-radius: 9999px !important;
}

/* ============================================================
   4. ISSUE 2 SOLVED: ANIMATED GRADIENT NAVIGATION MENUS
   ============================================================ */

/* Top Master Header Navigation Bar */
nav.horizontal-menu-wrapper,
.horizontal-menu-wrapper.bg-primary {
    background: linear-gradient(-45deg, var(--gradient-1), var(--gradient-2), var(--gradient-3), var(--gradient-4), var(--gradient-2)) !important;
    background-size: 300% 300% !important;
    animation: byecoGradientShift 14s ease infinite !important;
    will-change: background-position;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12) !important;
}

/* Top Master Nav Links */
nav.horizontal-menu-wrapper .nav-link-item {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.25s ease !important;
    font-size: 13.5px !important;
}
nav.horizontal-menu-wrapper .nav-link-item:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-1px);
}
nav.horizontal-menu-wrapper .nav-link-item.active-menu {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    font-weight: 700 !important;
}

/* Category Menu Bar (Attached directly beneath Banner Carousel) */
.horizontal-menu-section,
html[data-layout="fullwidth"] .horizontal-menu-section,
body.layout-fullwidth .horizontal-menu-section {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    position: relative !important;
    z-index: 5 !important;
}

.horizontal-menu-section .horizontal-menu-wrapper,
html[data-layout="fullwidth"] .horizontal-menu-wrapper,
body.layout-fullwidth .horizontal-menu-wrapper {
    background: linear-gradient(-45deg, var(--gradient-1), var(--gradient-2), var(--gradient-3), var(--gradient-4), var(--gradient-2)) !important;
    background-size: 300% 300% !important;
    animation: byecoGradientShift 12s ease infinite !important;
    will-change: background-position;
    border-radius: 0 0 16px 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    padding: 8px 12px !important;
}

/* Category Pills Inside Filter Bar */
.horizontal-menu-section .horizontal-menu-list,
.horizontal-menu-list {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    list-style: none !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}
.horizontal-menu-list::-webkit-scrollbar {
    display: none !important;
}

.horizontal-menu-list a {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.horizontal-menu-list a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.24) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.horizontal-menu-list a.active {
    background: #ffffff !important;
    color: var(--primary-dark) !important;
    border-color: #ffffff !important;
    animation: byecoPillGlow 2.5s ease-in-out infinite !important;
    font-weight: 700 !important;
    transform: translateY(-1px) !important;
}

/* Urgency Topbar in Wider / TechNexus Theme */
.tech-urgency-topbar {
    background: linear-gradient(-45deg, var(--gradient-1), var(--gradient-2), var(--gradient-3), var(--gradient-1)) !important;
    background-size: 300% 300% !important;
    animation: byecoGradientShift 10s ease infinite !important;
    will-change: background-position;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 4px 16px var(--glow-color) !important;
}

/* ============================================================
   5. ISSUE 2 SOLVED: ANIMATED GRADIENT BUTTONS & CTAs
   ============================================================ */

/* Primary Action Buttons */
.btn-primary,
.btn-buy,
.btn-checkout,
.btn-suggested-buy,
.btn-confirm-order-desktop,
.btn-confirm-order,
.btn-mobile-sticky-order,
.header-search-bar .btn,
#mobileSearchModal .btn-primary {
    background: linear-gradient(135deg, var(--gradient-2) 0%, var(--gradient-3) 50%, var(--gradient-4) 100%) !important;
    background-size: 200% 200% !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px var(--glow-color) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
}

.btn-primary:hover,
.btn-buy:hover,
.btn-checkout:hover,
.btn-suggested-buy:hover,
.btn-confirm-order-desktop:hover,
.btn-confirm-order:hover,
.btn-mobile-sticky-order:hover,
.header-search-bar .btn:hover,
#mobileSearchModal .btn-primary:hover {
    background-position: 100% 50% !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px var(--glow-color) !important;
    color: #ffffff !important;
}

.btn-primary:active,
.btn-buy:active,
.btn-checkout:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px var(--glow-color) !important;
}

/* Search Bar Outline & Focus */
.header-search-bar .form-control:focus,
#mobileSearchInput:focus {
    border-color: var(--primary-light) !important;
    box-shadow: 0 0 0 3.5px var(--glow-color) !important;
}

/* Text & Highlight Elements */
.text-primary,
.brand-logo-text {
    color: var(--primary) !important;
}
.bg-primary {
    background-color: var(--primary) !important;
}
.border-primary {
    border-color: var(--primary) !important;
}

.product-price,
.price-current {
    color: var(--primary) !important;
    font-weight: 700;
}

.product-card:hover {
    border-color: var(--primary-light) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 4px 12px var(--glow-color) !important;
}

/* Cart Icon & Floating Badges */
.fa-cart-shopping,
.fa-user.text-primary {
    color: var(--primary) !important;
}