/**
 * 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);
}

/* ============================================================
   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-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-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;
}