/**
 * RC Baki Theme Colors
 * =====================
 * Centralized color system for easy customization.
 * 
 * To change colors for a new project:
 * 1. Edit the color values in :root
 * 2. All components will update automatically
 */

.section-title {
   font-weight: 700 !important;
   font-size: 26px !important;
   color: var(--color-primary) !important;
   margin: 0;
}

.section-subtitle {
   font-size: 14px !important;
   color: #6c757d !important;
   margin-bottom: 0;
}

.btn-outline-brand-secondary {
   border-color: var(--color-secondary) !important;
   color: var(--color-secondary) !important;
   background: transparent !important;
   border-width: 1.5px !important;
   border-radius: 5px !important;
   padding: 5px 15px !important;
   font-weight: 600 !important;
   transition: all 0.3s ease !important;
}

.btn-outline-brand-secondary:hover {
   background: var(--color-secondary) !important;
   color: #fff !important;
   transform: translateY(-1px);
}

:root,
.theme-color-1,
.theme-color-2,
.theme-color-3,
.theme-color-4,
.theme-color-5,
.theme-color-6,
.theme-color-7,
.theme-color-8,
.theme-color-9,
.theme-color-10 {
   /* ========================================
       PRIMARY COLORS
       ======================================== */

   /* Main theme color - used for buttons, links, accents */
   --color-primary: #0d1b38;
   /* Deep Blue */
   --color-primary-hover: #091226;
   /* Darker Deep Blue */
   --color-primary-light: #e6e8ed;
   /* Light Blue Background */
   --color-primary-rgb: 13,
      27,
      56;
   /* RGB for opacity usage */

   /* Multikart template compatibility */
   --theme-color: #0d1b38;
   /* Must match --color-primary */
   --theme-color2: #00AEEF;
   /* Secondary/Accent */

   /* ========================================
       SECONDARY COLORS
       ======================================== */

   /* Secondary color - used for secondary buttons, accents */
   --color-secondary: #00AEEF;
   /* Accent Blue */
   --color-secondary-hover: #0099D1;
   /* Darker Accent */
   --color-secondary-light: #e5f7fd;
   /* Light Accent Background */

   /* ========================================
       ACCENT COLORS
       ======================================== */

   /* Accent color - for special highlights */
   --color-accent: #2196f3;
   /* Blue */
   --color-accent-hover: #1976d2;
   /* Darker blue */

   /* ========================================
       SEMANTIC COLORS
       ======================================== */

   /* Success */
   --color-success: #28a745;
   --color-success-light: #d4edda;

   /* Warning */
   --color-warning: #ffc107;
   --color-warning-light: #fff3cd;

   /* Danger */
   --color-danger: #dc3545;
   --color-danger-light: #f8d7da;

   /* Info */
   --color-info: #17a2b8;
   --color-info-light: #d1ecf1;

   /* ========================================
       TEXT COLORS
       ======================================== */

   --color-text-primary: #333333;
   /* Main text */
   --color-text-secondary: #666666;
   /* Secondary text */
   --color-text-muted: #999999;
   /* Muted text */
   --color-text-light: #ffffff;
   /* Light text (on dark bg) */

   /* ========================================
       BACKGROUND COLORS
       ======================================== */

   --color-bg-primary: #ffffff;
   /* Main background */
   --color-bg-secondary: #f8f9fa;
   /* Secondary background */
   --color-bg-dark: #333333;
   /* Dark background */

   /* ========================================
       BORDER COLORS
       ======================================== */

   --color-border: #e0e0e0;
   --color-border-light: #f0f0f0;

   /* ========================================
       SHADOWS
       ======================================== */

   --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Background colors */
.bg-primary {
   background-color: var(--color-primary) !important;
}

.bg-secondary {
   background-color: var(--color-secondary) !important;
}

.bg-accent {
   background-color: var(--color-accent) !important;
}

.bg-success {
   background-color: var(--color-success) !important;
}

.bg-warning {
   background-color: var(--color-warning) !important;
}

.bg-danger {
   background-color: var(--color-danger) !important;
}

/* Text colors */
.text-primary {
   color: var(--color-primary) !important;
}

.text-secondary {
   color: var(--color-secondary) !important;
}

.text-accent {
   color: var(--color-accent) !important;
}

.text-muted {
   color: var(--color-text-muted) !important;
}

/* Border colors */
.border-primary {
   border-color: var(--color-primary) !important;
}

/* ========================================
   COMPONENT OVERRIDES
   ======================================== */

/* --------------------------------------------------------------------------
   Header Layout Fixes (Prevent Overflow)
   -------------------------------------------------------------------------- */

.main-menu {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: nowrap;
   /* Prevent wrapping but ensure children shrink */
   gap: 15px;
   width: 100%;
}

.main-menu .menu-left {
   flex-shrink: 0;
   /* Logo shouldn't shrink */
}

.main-menu form.form_search {
   width: 100%;
   min-width: 200px;
   /* Minimum width for search */
   max-width: 500px;
   /* Maximum width */
   position: relative;
   border: 1.5px solid var(--color-secondary) !important;
}

.main-menu .main-nav-center {
   flex-shrink: 0;
   white-space: nowrap;
   /* Links shouldn't break lines */
}

/* Colored Main Header Styling */
.header-main-colored {
   background-color: var(--color-secondary) !important;
}

.header-main-colored .brand-logo h2 {
   color: #080808 !important;
   margin: 0;
   font-weight: 700;
}

.header-main-colored .main-nav-center #main-menu {
   display: flex;
   gap: 20px;
}

.header-main-colored .main-nav-center #main-menu li a {
   color: #080808 !important;
   font-weight: 600;
}

.header-main-colored .icon-nav i {
   color: #080808 !important;
}

.header-main-colored .form_search {
   border: 1.5px solid #080808 !important;
   background: #fff;
}

.header-main-colored .form_search input {
   background: transparent;
   color: #080808 !important;
}

.header-main-colored .btn-search {
   background-color: #080808 !important;
}

.header-main-colored .btn-search i {
   color: #ffffff !important;
   font-size: 20px;
}

.header-main-colored .cart_qty_cls {
   background-color: #080808 !important;
   color: var(--color-secondary) !important;
}

/* Language Switcher in Header */
.header-main-colored .locale-container {
   height: 100%;
   display: flex;
   gap: 8px;
   align-items: center;
}

.header-main-colored .locale-link {
   text-decoration: none;
   display: flex;
   align-items: center;
   transition: all 0.2s;
   font-size: 13px;
   color: #080808 !important;
}

.header-main-colored .locale-link.active {
   opacity: 1;
   font-weight: 700;
}

.header-main-colored .locale-link:not(.active) {
   opacity: 0.4;
   font-weight: 500;
}

.header-main-colored .locale-separator {
   color: rgba(8, 8, 8, 0.2);
   font-size: 12px;
}

/* Ensure Category Sidebar Button doesn't break layout */
#categorySidebarToggle {
   white-space: nowrap;
}

/* Responsive adjustments for smaller desktops */
@media (min-width: 1200px) and (max-width: 1400px) {
   .main-menu form.form_search {
      max-width: 300px;
      /* Shrink search on smaller screens */
   }

   .main-menu .main-nav-center ul {
      gap: 10px !important;
   }

   .main-menu .main-nav-center ul li a {
      font-size: 13px !important;
   }
}

/* Buttons - using theme colors */
.btn-theme {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   color: var(--color-text-primary);
}

.btn-theme:hover {
   background-color: var(--color-primary-hover);
   border-color: var(--color-primary-hover);
}

.btn-theme-outline {
   background-color: transparent;
   border-color: var(--color-primary);
   color: var(--color-primary);
}

.btn-theme-outline:hover {
   background-color: var(--color-primary);
   color: var(--color-text-primary);
}

/* Links with theme color */
a.theme-link {
   color: var(--color-primary);
}

a.theme-link:hover {
   color: var(--color-primary-hover);
}

/* Badge with theme color */
.badge-theme {
   background-color: var(--color-primary);
   color: var(--color-text-primary);
}

/* Custom Button Colors */
.btn.btn-solid-black {
   background: #333 !important;
   background-color: #333 !important;
   border-color: #333 !important;
   color: #fff !important;
}

.btn.btn-solid-black:hover,
.btn.btn-solid-black:focus,
.btn.btn-solid-black:active {
   background: #000 !important;
   background-color: #000 !important;
   border-color: #000 !important;
}

/* Custom WhatsApp Button Style */
.btn.btn-solid-green {
   background: #25D366 !important;
   background-color: #25D366 !important;
   border-color: #25D366 !important;
   color: #fff !important;
}

.btn.btn-solid-green:hover,
.btn.btn-solid-green:focus,
.btn.btn-solid-green:active {
   background: #fff !important;
   background-color: #fff !important;
   color: #25D366 !important;
   border: 1px solid #25D366 !important;
}

/* Mobile Fixed Bottom Buttons */
@media (max-width: 767px) {
   .mobile-bottom-actions {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #fff;
      padding: 15px;
      box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
      z-index: 10010;
      display: flex;
      gap: 10px;
   }

   .mobile-bottom-actions .btn {
      margin: 0;
      width: 100%;
   }

   .cart-section {
      padding-bottom: 140px;
   }
}



/* Color Swatch Selection (Admin) */
.color-swatch-label .color-swatch-circle {
   transition: transform 0.2s, box-shadow 0.2s;
}

.color-swatch-label:hover .color-swatch-circle {
   transform: scale(1.1);
}

.color-swatch-input:checked+.color-swatch-circle {
   box-shadow: 0 0 0 3px var(--theme-color, #007bff) !important;
   transform: scale(1.1);
}


/* --------------------------------------------------------------------------
   Category Sidebar Customization
   -------------------------------------------------------------------------- */

.category-sidebar-content {
   background-color: #080808 !important;
   max-height: 380px !important;
   /* Approx height for 6 items */
   overflow-y: auto !important;
   /* Scrollable */
   overflow-x: hidden !important;
   /* Prevent horizontal scroll */
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
   padding-bottom: 0px !important;

   /* Firefox Support */
   scrollbar-width: thin;
   scrollbar-color: var(--theme-color2) transparent;
}

/* Ensure UL doesn't scroll independently */
.category-sidebar-content ul.sm-vertical {
   background-color: transparent !important;
   max-height: none !important;
   overflow: visible !important;
   box-shadow: none !important;
   padding-bottom: 0 !important;
}

/* Custom Webkit Scrollbar */
.category-sidebar-content::-webkit-scrollbar {
   width: 6px !important;
}

.category-sidebar-content::-webkit-scrollbar-track {
   background: transparent !important;
}

.category-sidebar-content::-webkit-scrollbar-thumb {
   background-color: var(--theme-color2) !important;
   /* Secondary Color */
   border-radius: 3px;
}

.category-sidebar-content::-webkit-scrollbar-thumb:hover {
   background-color: var(--theme-color2) !important;
   opacity: 0.8;
}

/* Links & Text */
.category-sidebar-content .sm-vertical {
   padding-bottom: 0 !important;
}

.category-sidebar-content .sm-vertical li {
   background-color: transparent !important;
}

.category-sidebar-content .sm-vertical li a {
   color: #ffffff !important;
   /* Very light gray */
   border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
   background-color: transparent !important;
   padding: 12px 20px !important;
   font-size: 14px !important;
   transition: all 0.3s;
}

.category-sidebar-content .sm-vertical li a:hover {
   color: #fff !important;
   background-color: rgba(255, 255, 255, 0.1) !important;
   padding-left: 25px !important;
   /* Slight hover movement */
}

/* Remove arrow if not valid */
.category-sidebar-content .sm-vertical li a .sub-arrow {
   color: rgba(255, 255, 255, 0.5) !important;
}

/* Remove default white background from inline styles if present */
@media (min-width: 1200px) {
   .category-sidebar-content {
      display: block !important;
      /* Ensure it's visible on large screens especially on home */
   }
}

/* --------------------------------------------------------------------------
   Template Overrides & Components (Migrated from shop.blade.php)
   -------------------------------------------------------------------------- */

/* Button colors */
.btn-animation,
.btn-solid {
   background-color: var(--theme-color) !important;
   border-color: var(--theme-color) !important;
   color: #fff;
}

.btn-animation:hover,
.btn-solid:hover {
   background-color: var(--theme-color2) !important;
   border-color: var(--theme-color2) !important;
}

/* Links and accents */
a:hover,
.product-box .product-detail h4 a:hover,
.footer-contant ul li a:hover,
.header-dropdown li a:hover {
   color: var(--theme-color) !important;
}

/* Top header */
.top-header-theme {
   background-color: #080808 !important;
}

.top-header-theme .header-contact ul li,
.top-header-theme .header-contact ul li i,
.top-header-theme .header-dropdown li,
.top-header-theme .header-dropdown li a,
.top-header-theme .header-dropdown li i,
.top-header-theme .header-dropdown .onhover-dropdown {
   color: var(--theme-color2) !important;
}

/* Category sidebar */
.toggle-sidebar {
   background-color: var(--theme-color) !important;
}

/* Price colors */
.product-box .product-detail h5,
.price-detail {
   color: var(--theme-color) !important;
}

/* Cart icon badge */
.cart_qty_cls {
   background-color: var(--theme-color) !important;
}

/* Search button */
.btn-search {
   background-color: var(--theme-color) !important;
}

/* Bottom navigation */
.bottom-light {
   border-top: 1px solid #eee;
}

/* Active menu */
.sm-horizontal>li>a.active,
.sm-horizontal>li:hover>a {
   color: var(--theme-color) !important;
}

/* Custom Toast Notifications */
#toast-container {
   position: fixed;
   top: 20px;
   right: 20px;
   z-index: 99999;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.custom-toast {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 20px;
   border-radius: 12px;
   background: #fff;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
   min-width: 280px;
   max-width: 380px;
   transform: translateX(120%);
   opacity: 0;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-toast.show {
   transform: translateX(0);
   opacity: 1;
}

.custom-toast i {
   font-size: 22px;
   flex-shrink: 0;
}

.custom-toast span {
   flex: 1;
   font-size: 14px;
   font-weight: 500;
   color: #333;
}

.custom-toast .toast-close {
   background: none;
   border: none;
   font-size: 20px;
   color: #999;
   cursor: pointer;
   padding: 0;
   line-height: 1;
   transition: color 0.2s;
}

.custom-toast .toast-close:hover {
   color: #333;
}

/* Toast types */
.custom-toast.toast-success {
   border-left: 4px solid var(--color-success);
}

.custom-toast.toast-success i {
   color: var(--color-success);
}

.custom-toast.toast-danger {
   border-left: 4px solid var(--color-danger);
}

.custom-toast.toast-danger i {
   color: var(--color-danger);
}

.custom-toast.toast-warning {
   border-left: 4px solid var(--color-warning);
}

.custom-toast.toast-warning i {
   color: var(--color-warning);
}

.custom-toast.toast-info {
   border-left: 4px solid var(--color-info);
}

.custom-toast.toast-info i {
   color: var(--color-info);
}

@media (max-width: 576px) {
   #toast-container {
      left: 10px;
      right: 10px;
      top: 10px;
   }

   .custom-toast {
      min-width: auto;
      max-width: none;
   }
}

/* Mobile Menu Fix */
#mySidenav {
   z-index: 99999 !important;
}

#mySidenav nav {
   position: relative;
   z-index: 5 !important;
   background-color: #fff;
   height: 100%;
}

#mySidenav .sidebar-overlay {
   z-index: 1 !important;
}

/* Logo text style */
.brand-logo h2 {
   font-family: 'Montserrat', sans-serif;
}

/* Breadcrumb */
.breadcrumb-section {
   background-color: #f8f8f8;
   padding: 20px 0;
}

/* Product card hover */
.product-box:hover {
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* Footer */
.footer-2 {
   background-color: #222;
   color: #fff;
   padding-top: 40px;
}

.footer-2 h4 {
   color: var(--theme-color);
   margin-bottom: 20px;
}

.footer-contant ul li {
   margin-bottom: 8px;
}

.footer-contant ul li a {
   color: #ccc;
}

.footer-social li a {
   background-color: var(--theme-color) !important;
   color: #fff !important;
}

.sub-footer {
   background-color: #111;
   padding: 15px 0;
   margin-top: 30px;
}

.contact-list li {
   color: #ccc;
   margin-bottom: 10px;
}

.contact-list li i {
   color: var(--theme-color);
   margin-right: 10px;
}

/* Alert styles */
.alert-success {
   background-color: #d4edda;
   border-color: #c3e6cb;
   color: #155724;
   padding: 15px;
   margin-bottom: 20px;
   border-radius: 5px;
}

.alert-error,
.alert-danger {
   background-color: #f8d7da;
   border-color: #f5c6cb;
   color: #721c24;
   padding: 15px;
   margin-bottom: 20px;
   border-radius: 5px;
}

/* ========================================
   BRAND BOX (Homepage)
   ======================================== */
.brand-box-custom {
   background: #fff;
   border: 1px solid #eee;
   border-radius: 8px;
   transition: all 0.3s ease;
}

.brand-box-custom:hover {
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   transform: translateY(-2px);
}

/* ========================================
   FEATURED CATEGORIES SECTION (Homepage)
   ======================================== */
.featured-cats-section {
   padding: 50px 0 40px;
   background: #f7f9fb;
}

.featured-cats-header {
   text-align: center;
   margin-bottom: 36px;
}

.featured-cats-tag {
   display: inline-block;
   background: var(--color-secondary, #0da2e7);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   padding: 4px 14px;
   border-radius: 20px;
   margin-bottom: 12px;
}

.featured-cats-title {
   font-size: 28px;
   font-weight: 800;
   color: var(--color-primary, #0d1b38);
   margin: 0 0 10px;
}

.featured-cats-sub {
   font-size: 15px;
   color: #666;
   margin: 0;
}

.featured-cats-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
}

.featured-cat-card {
   position: relative;
   border-radius: 8px;
   overflow: hidden;
   min-height: 240px;
   display: flex;
   align-items: stretch;
   text-decoration: none !important;
   cursor: pointer;
   transition: transform 0.35s cubic-bezier(.22, .68, 0, 1.2), box-shadow 0.3s;
}

.featured-cat-card:hover {
   transform: translateY(-6px) scale(1.01);
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.featured-cat-card--blue .featured-cat-card__bg {
   background: linear-gradient(135deg, #0d1b38 0%, #1a3a6e 60%, #0d2b5e 100%);
}

.featured-cat-card--teal .featured-cat-card__bg {
   background: linear-gradient(135deg, #0a6b9a 0%, #0da2e7 60%, #06c8f0 100%);
}

.featured-cat-card__bg {
   position: absolute;
   inset: 0;
   z-index: 0;
}

.featured-cat-card__glow {
   position: absolute;
   width: 300px;
   height: 300px;
   border-radius: 50%;
   opacity: 0;
   transition: opacity 0.4s, transform 0.4s;
   z-index: 1;
   top: -100px;
   right: -100px;
   pointer-events: none;
}

.featured-cat-card--blue .featured-cat-card__glow {
   background: radial-gradient(circle, rgba(13, 162, 231, 0.25) 0%, transparent 70%);
}

.featured-cat-card--teal .featured-cat-card__glow {
   background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
}

.featured-cat-card:hover .featured-cat-card__glow {
   opacity: 1;
   transform: scale(1.2);
}

.featured-cat-card__content {
   position: relative;
   z-index: 2;
   padding: 35px 32px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.featured-cat-card__icon {
   width: 64px;
   height: 64px;
   margin-bottom: 18px;
   transition: transform 0.35s cubic-bezier(.22, .68, 0, 1.2);
}

.featured-cat-card:hover .featured-cat-card__icon {
   transform: scale(1.12) rotate(-3deg);
}

.featured-cat-card__title {
   font-size: 24px;
   font-weight: 800;
   margin: 0 0 10px;
}

.featured-cat-card--blue .featured-cat-card__title {
   color: var(--color-secondary) !important;
}

.featured-cat-card--teal .featured-cat-card__title {
   color: var(--color-primary) !important;
}

.featured-cat-card__desc {
   font-size: 14px;
   line-height: 1.6;
   margin: 0 0 22px;
   max-width: 320px;
}

.featured-cat-card--blue .featured-cat-card__desc {
   color: rgba(13, 162, 231, 0.85) !important;
   /* Secondary with opacity */
}

.featured-cat-card--teal .featured-cat-card__desc {
   color: rgba(13, 27, 56, 0.8) !important;
   /* Primary with opacity */
}

.featured-cat-card__btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 14px;
   font-weight: 700;
   padding: 8px 20px;
   border-radius: 30px;
   width: fit-content;
   transition: background 0.25s, border-color 0.25s;
}

.featured-cat-card--blue .featured-cat-card__btn {
   color: var(--color-secondary) !important;
   border: 2px solid var(--color-secondary) !important;
}

.featured-cat-card--teal .featured-cat-card__btn {
   color: var(--color-primary) !important;
   border: 2px solid var(--color-primary) !important;
}

.featured-cat-card:hover .featured-cat-card__btn {
   background: rgba(255, 255, 255, 0.15);
   border-color: rgba(255, 255, 255, 0.9);
}

.featured-cat-card__btn i {
   transition: transform 0.25s;
}

.featured-cat-card:hover .featured-cat-card__btn i {
   transform: translateX(4px);
}

.featured-cat-card__particles {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   overflow: hidden;
}

.featured-cat-card__particles span {
   position: absolute;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.08);
   animation: floatParticle 6s infinite ease-in-out;
}

.featured-cat-card__particles span:nth-child(1) {
   width: 120px;
   height: 120px;
   bottom: -40px;
   right: 20px;
}

.featured-cat-card__particles span:nth-child(2) {
   width: 70px;
   height: 70px;
   top: 20px;
   right: 80px;
   animation-delay: 2s;
}

.featured-cat-card__particles span:nth-child(3) {
   width: 45px;
   height: 45px;
   bottom: 30px;
   right: 130px;
   animation-delay: 4s;
}

@keyframes floatParticle {

   0%,
   100% {
      transform: translateY(0) rotate(0deg);
      opacity: 0.6;
   }

   50% {
      transform: translateY(-15px) rotate(20deg);
      opacity: 1;
   }
}

@media (max-width: 767px) {
   .featured-cats-grid {
      grid-template-columns: 1fr;
   }

   .featured-cat-card__content {
      padding: 25px 22px;
   }

   .featured-cat-card__title {
      font-size: 20px;
   }

   .featured-cat-card {
      min-height: 200px;
   }
}

/* ========================================
   CATEGORY SIDEBAR + MEGA MENU (Homepage)
   ======================================== */
.category-sidebar-wrapper {
   position: relative;
   margin-top: 15px;
}

.category-sidebar-header {
   background: #080808 !important;
   padding: 16px 20px;
   display: flex;
   align-items: center;
   border-radius: 5px 5px 0 0;
}

.category-sidebar-header i {
   color: #ffffff !important;
   font-size: 18px;
   margin-right: 8px;
}

.category-sidebar-header h6 {
   margin: 0;
   color: #ffffff !important;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.cat-sidebar-list {
   list-style: none;
   margin: 0;
   padding: 0;
   background: #080808 !important;
   border: 1px solid #080808;
   border-top: none;
   border-radius: 0 0 5px 5px;
}

.cat-sidebar-item {
   display: block !important;
   float: none !important;
   width: 100% !important;
   border-bottom: 1px solid rgba(13, 162, 231, 0.15);
   /* Secondary color with opacity for border */
   position: static;
}

.cat-sidebar-item:last-child {
   border-bottom: none;
}

.cat-sidebar-link {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 20px;
   font-size: 14px;
   font-weight: 600;
   color: #ffffff !important;
   text-decoration: none;
   transition: all 0.2s ease;
}

.cat-sidebar-link:hover {
   background: rgba(13, 162, 231, 0.12) !important;
   color: #fff !important;
   padding-left: 24px;
}

.cat-sidebar-arrow {
   font-size: 17px;
   color: #ffffff !important;
   opacity: 0.8;
   transition: transform 0.2s;
}

.cat-sidebar-link:hover .cat-sidebar-arrow {
   transform: translateX(4px);
   opacity: 1;
}

/* Mega Menu Panel */
.cat-mega-menu {
   position: absolute;
   top: 0;
   left: calc(100% + 5px);
   z-index: 9999;
   background: #fff;
   border: 1px solid #e8e8e8;
   border-radius: 8px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
   min-width: 800px;
   max-width: 1000px;
   height: 520px;
   /* Fixed height for roughly 3 rows */
   overflow: hidden;
   /* Hide outer overflow */
   display: flex;
   flex-direction: column;
   padding: 0;
   opacity: 0;
   pointer-events: none;
   transform: translateX(-12px);
   transition: opacity 0.2s, transform 0.2s;
}

.cat-mega-inner {
   padding: 20px;
   height: 100%;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   overscroll-behavior: contain;
}

.cat-mega-menu.visible {
   opacity: 1;
   pointer-events: all;
   transform: translateX(0);
}

.cat-mega-title {
   font-size: 13px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--color-primary);
   padding-bottom: 12px;
   margin-bottom: 16px;
   border-bottom: 2px solid var(--color-primary);
}

.cat-mega-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 10px;
}

.cat-mega-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-decoration: none;
   border: 1px solid #f0f0f0;
   border-radius: 8px;
   padding: 8px 5px;
   transition: all 0.2s ease;
   color: #333;
}

.cat-mega-item:hover {
   border-color: var(--color-primary);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   transform: translateY(-2px);
   color: var(--color-primary);
}

.cat-mega-img-wrap {
   width: 75px;
   aspect-ratio: 4 / 3;
   border-radius: 5px;
   overflow: hidden;
   background: #f8f8f8;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 6px;
   position: relative;
}

.cat-mega-img-blur {
   position: absolute;
   inset: -10px;
   background-size: cover;
   background-position: center;
   filter: blur(8px) brightness(0.9);
   z-index: 0;
   opacity: 0.6;
}

.cat-mega-img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   position: relative;
   z-index: 1;
}

.cat-mega-img-placeholder {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ccc;
   font-size: 28px;
}

.cat-mega-name {
   font-size: 11px;
   font-weight: 600;
   text-align: center;
   line-height: 1.3;
   margin-top: 4px;
   color: #444;
   max-width: 100%;
   word-break: break-word;
}