/* ==========================================
   CUSTOM COLORS: RAINBOW BOLD THEME
   ========================================== */
   
/* Base Variables & Helper Classes */
:root {
    --rainbow-grad: linear-gradient(90deg, #ff0000, #ff7f00, #ffd700, #00ff00, #0000ff, #4b0082, #8b00ff);
    --rainbow-grad-bold: linear-gradient(135deg, #FF1053, #FF8200, #FFD100, #00C853, #00B4D8, #7209B7);
}

body { font-family: 'Poppins', sans-serif; background-color: #f8fafc; color: #1e293b; }

/* Strong Rainbow Utilities */
.bg-rainbow-bold {
    background: var(--rainbow-grad-bold);
    background-size: 300% 300%;
    animation: gradientMove 6s ease infinite;
    color: white !important;
}

.text-rainbow-bold {
    background: var(--rainbow-grad-bold);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 6s ease infinite;
}

.border-rainbow-bold {
    border: 3px solid transparent;
    background: linear-gradient(white, white) padding-box, var(--rainbow-grad-bold) border-box;
    background-size: 300% 300%;
    animation: gradientMove 6s ease infinite;
}

/* Animations */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Sidebar styling (Rainbow Hover) */
.sidebar-menu li a { transition: all 0.3s; border-left: 4px solid transparent; }
.sidebar-menu li a:hover { 
    background-color: #f8fafc; 
    border-left-color: #FF1053;
    padding-left: 1.5rem; /* Slide effect */
}
.sidebar-menu li a i.chevron { font-size: 10px; color: #9ca3af; transition: 0.3s; }
.sidebar-menu li a:hover i.chevron { color: #FF1053; transform: translateX(5px); }

/* Banner Styling */
.hero-banner-main {
    background: var(--rainbow-grad-bold);
    background-size: 300% 300%;
    animation: gradientMove 10s ease infinite;
    position: relative;
    overflow: hidden;
}
.hero-banner-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.3) 100%);
    pointer-events: none;
}

/* Product Card - Rainbow Glow Hover */
.product-card { 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    border: 1px solid #e2e8f0;
}
.product-card:hover { 
    transform: translateY(-8px) scale(1.02); 
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box, var(--rainbow-grad) border-box;
    box-shadow: 0 15px 30px -10px rgba(139, 0, 255, 0.3); 
    z-index: 10; 
}

/* Buttons */
.btn-rainbow {
    background: var(--rainbow-grad);
    background-size: 200% auto;
    color: white;
    transition: 0.5s;
    border: none;
}
.btn-rainbow:hover {
    background-position: right center;
    box-shadow: 0 10px 20px -5px rgba(255, 0, 0, 0.5);
}

/* Category Icons Hover */
.category-box { transition: 0.3s; border: 2px solid #f1f5f9; }
.category-box:hover {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box, var(--rainbow-grad) border-box;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 200, 83, 0.3);
}
.category-box .cat-icon { transition: 0.3s; }
.category-box:hover .cat-icon {
    background: var(--rainbow-grad);
    color: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Scrollbar Helper */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }