@tailwind base;
@tailwind components;
@tailwind utilities;

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Core colors - Emerald green tech theme */
    --background: 0 0% 100%;
    --foreground: 210 11% 15%;
    
    /* Primary brand green */
    --primary: 158 64% 42%;
    --primary-foreground: 0 0% 100%;
    --primary-dark: 158 64% 32%;
    --primary-light: 158 64% 52%;
    --primary-glow: 158 100% 50%;
    
    /* Secondary grays */
    --secondary: 210 5% 96%;
    --secondary-foreground: 210 11% 15%;
    
    /* Accent green */
    --accent: 158 30% 94%;
    --accent-foreground: 158 64% 32%;
    
    /* Tech dark colors */
    --dark: 210 11% 15%;
    --dark-light: 210 11% 25%;
    
    /* Muted grays */
    --muted: 210 10% 95%;
    --muted-foreground: 210 10% 40%;
    
    /* Card surfaces */
    --card: 0 0% 100%;
    --card-foreground: 210 11% 15%;
    --card-hover: 158 20% 98%;
    
    /* Popover */
    --popover: 0 0% 100%;
    --popover-foreground: 210 11% 15%;
    
    /* Destructive */
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    
    /* Borders and inputs */
    --border: 210 10% 88%;
    --input: 210 10% 92%;
    --ring: 158 64% 42%;
    
    /* Radius */
    --radius: 0.75rem;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(158 64% 42%), hsl(158 64% 52%));
    --gradient-secondary: linear-gradient(135deg, hsl(158 64% 32%), hsl(158 100% 50%));
    --gradient-accent: linear-gradient(180deg, hsl(158 64% 42% / 0.1), transparent);
    --gradient-dark: linear-gradient(135deg, hsl(210 11% 15%), hsl(210 11% 25%));
    --gradient-light: linear-gradient(180deg, hsl(0 0% 100%), hsl(210 10% 98%));
    --gradient-radial: radial-gradient(circle at 50% 0%, hsl(158 64% 42% / 0.15), transparent 70%);
    --gradient-mesh: radial-gradient(at 40% 20%, hsl(158 64% 52%) 0px, transparent 50%),
                     radial-gradient(at 80% 0%, hsl(158 100% 50% / 0.3) 0px, transparent 50%),
                     radial-gradient(at 0% 50%, hsl(210 11% 15% / 0.1) 0px, transparent 50%);
    
    /* Shadows */
    --shadow-glow: 0 0 20px hsl(158 64% 42% / 0.3);
    --shadow-glow-lg: 0 0 40px hsl(158 64% 42% / 0.4);
    --shadow-inner-glow: inset 0 0 20px hsl(158 64% 42% / 0.1);
    
    /* Sidebar */
    --sidebar-background: 210 11% 15%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 158 64% 42%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 210 11% 20%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 210 11% 25%;
    --sidebar-ring: 158 64% 42%;
  }

  .dark {
    --background: 210 11% 8%;
    --foreground: 0 0% 98%;
    
    --primary: 158 64% 42%;
    --primary-foreground: 0 0% 100%;
    
    --secondary: 210 11% 15%;
    --secondary-foreground: 0 0% 98%;
    
    --accent: 158 64% 15%;
    --accent-foreground: 158 64% 52%;
    
    --muted: 210 10% 20%;
    --muted-foreground: 210 10% 60%;
    
    --card: 210 11% 12%;
    --card-foreground: 0 0% 98%;
    
    --popover: 210 11% 12%;
    --popover-foreground: 0 0% 98%;
    
    --destructive: 0 62% 30%;
    --destructive-foreground: 0 0% 98%;
    
    --border: 210 11% 20%;
    --input: 210 11% 20%;
    --ring: 158 64% 42%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
  }
}

@layer components {
  /* Button Components */
  .btn {
    @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }

  .btn-primary {
    @apply btn bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2;
  }

  .btn-secondary {
    @apply btn bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 py-2;
  }

  .btn-outline {
    @apply btn border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2;
  }

  .btn-ghost {
    @apply btn hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2;
  }

  .btn-link {
    @apply btn text-primary underline-offset-4 hover:underline h-10 px-4 py-2;
  }

  .btn-sm {
    @apply h-9 rounded-md px-3;
  }

  .btn-lg {
    @apply h-11 rounded-md px-8;
  }

  .btn-icon {
    @apply h-10 w-10;
  }

  /* Hero Button Components */
  .btn-hero {
    @apply inline-flex items-center justify-center gap-3 px-8 py-4 bg-gradient-primary text-primary-foreground font-inter font-semibold text-lg rounded-xl border border-primary/20 shadow-lg hover:shadow-glow transition-all duration-300 hover:scale-105 hover:border-primary/40;
  }

  .btn-glass {
    @apply inline-flex items-center justify-center gap-3 px-8 py-4 bg-background/10 backdrop-blur-sm text-primary-foreground font-inter font-semibold text-lg rounded-xl border border-primary/30 hover:bg-background/20 hover:border-primary/50 transition-all duration-300 hover:scale-105;
  }

  .btn-tech {
    @apply inline-flex items-center justify-center gap-3 px-6 py-3 bg-gradient-primary text-primary-foreground font-inter font-semibold rounded-lg border border-primary/20 shadow-md hover:shadow-glow hover:scale-105 hover:border-primary/40 transition-all duration-300;
  }

  /* Card Components */
  .card {
    @apply rounded-lg border bg-card text-card-foreground shadow-sm;
  }

  .card-header {
    @apply flex flex-col space-y-1.5 p-6;
  }

  .card-title {
    @apply text-2xl font-semibold leading-none tracking-tight;
  }

  .card-description {
    @apply text-sm text-muted-foreground;
  }

  .card-content {
    @apply p-6 pt-0;
  }

  .card-footer {
    @apply flex items-center p-6 pt-0;
  }

  /* Input Components */
  .input-field {
    @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
  }

  /* Badge Components */
  .badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid;
    padding: 0.125rem 0.625rem;
    font-size: 0.625rem;
    font-weight: 600;
    transition: all 0.2s;
    outline: none;
    gap: 0.25rem;
  }

  .badge:focus {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }

  .badge-default {
    border-color: transparent;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  .badge-default:hover {
    background-color: hsl(var(--primary) / 0.8);
  }

  .badge-secondary {
    border-color: transparent;
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
  }

  .badge-secondary:hover {
    background-color: hsl(var(--secondary) / 0.8);
  }

  .badge-destructive {
    border-color: transparent;
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
  }

  .badge-destructive:hover {
    background-color: hsl(var(--destructive) / 0.8);
  }

  .badge-outline {
    color: hsl(var(--foreground));
  }

  /* Navigation Components */
  .nav-link {
    @apply text-sm font-medium transition-colors hover:text-primary;
  }

  .nav-link-active {
    @apply text-primary;
  }

  /* Container */
  .container {
    @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
  }

  /* Product specific components */
  .product-card {
    @apply card transition-all duration-300 hover:shadow-xl hover:shadow-primary/20 hover:-translate-y-1;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .product-card .p-6 {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .product-card .p-6 > .btn-primary {
    margin-top: auto;
  }

  .product-image {
    @apply aspect-square w-full rounded-lg bg-white object-contain p-4 transition-transform duration-300 group-hover:scale-105;
  }

  /* Product card image container */
  .product-image-container {
    @apply relative overflow-hidden rounded-lg bg-white aspect-square;
  }

  .product-image-inner {
    @apply w-full h-full object-contain p-6 transition-transform duration-500 group-hover:scale-110;
  }

  /* Hero section */
  .hero-gradient {
    background: var(--gradient-mesh);
  }

  /* Text utilities */
  .text-gradient {
    @apply bg-gradient-to-r from-primary to-primary-light bg-clip-text text-transparent;
  }

  /* Glow effects */
  .glow {
    box-shadow: var(--shadow-glow);
  }

  .glow-lg {
    box-shadow: var(--shadow-glow-lg);
  }

  /* Line clamp utilities */
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

@layer utilities {
  /* Animation utilities */
  .animate-fade-in {
    animation: fadeIn 0.6s ease-out;
  }

  .animate-slide-in-left {
    animation: slideInLeft 0.6s ease-out;
  }

  .animate-slide-in-right {
    animation: slideInRight 0.6s ease-out;
  }

  /* Custom animations */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Responsive grid utilities */
  .grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  /* Scrollbar styling */
  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: hsl(var(--muted));
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: hsl(var(--accent));
    border-radius: 4px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary));
  }

  /* Focus utilities */
  .focus-visible {
    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
  }

  /* Transition utilities */
  .transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Text utilities */
  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  /* Loading states */
  .loading {
    @apply animate-pulse;
  }

  .skeleton {
    @apply bg-muted rounded animate-pulse;
  }

  /* Hover effects */
  .hover-lift {
    @apply transition-transform duration-300 hover:-translate-y-1;
  }

  .hover-glow {
    @apply transition-shadow duration-300;
  }

  .hover-glow:hover {
    box-shadow: var(--shadow-glow);
  }
}

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');

/* Font family utilities */
.font-mono {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
}

/* Custom scrollbar for the entire page */
html {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--accent)) hsl(var(--muted));
}

html::-webkit-scrollbar {
  width: 8px;
}

html::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

html::-webkit-scrollbar-thumb {
  background: hsl(var(--accent));
  border-radius: 4px;
}

html::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary));
}

/* Анимации для мобильного меню */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Улучшения для выпадающего меню каталога */
.dropdown-menu-wide {
  min-width: 24rem;
}

/* Ограничения для десктопного выпадающего меню */
@media (min-width: 1024px) {
  .desktop-dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
  }
  
  .desktop-dropdown-content {
    max-height: 65vh;
    overflow-y: auto;
  }
  
  .desktop-categories-grid {
    max-height: 50vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--accent)) transparent;
  }
  
  .desktop-categories-grid::-webkit-scrollbar {
    width: 6px;
  }
  
  .desktop-categories-grid::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .desktop-categories-grid::-webkit-scrollbar-thumb {
    background: hsl(var(--accent));
    border-radius: 3px;
  }
  
  .desktop-categories-grid::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary));
  }
}

/* Стили для мобильного меню */
@media (max-width: 1023px) {
  [data-mobile-menu] {
    overflow-y: auto;
  }
  
  [data-mobile-menu] > div {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
  
  [data-mobile-menu] .bg-card {
    max-width: calc(100vw - 2rem) !important;
    width: 100% !important;
    margin: 0 1rem;
  }
  
  [data-mobile-categories] {
    max-height: 60vh;
    overflow-y: auto;
  }
}

@media (max-width: 768px) {
  .dropdown-menu-wide {
    min-width: 20rem;
  }
}

/* Каталог - независимая прокрутка боковой панели */
.catalog-sidebar {
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground)) transparent;
}

/* Мобильная адаптивность для боковой панели */
.mobile-sidebar {
  /* На мобильных устройствах убираем sticky и ограничиваем высоту */
  @media (max-width: 1023px) {
    position: static !important;
    max-height: 60vh;
    overflow-y: auto;
    margin-bottom: 1.5rem;
  }
  
  /* На очень маленьких экранах делаем меню еще компактнее */
  @media (max-width: 640px) {
    max-height: 50vh;
    padding: 1rem !important;
  }
}

.catalog-sidebar::-webkit-scrollbar {
  width: 6px;
}

.catalog-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.catalog-sidebar::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted-foreground) / 0.3);
  border-radius: 3px;
}

.catalog-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--muted-foreground) / 0.5);
}

/* ==================== КАТАЛОГ ==================== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.product-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

.product-info {
    padding: 1.25rem;
}

.product-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #22c55e;
    margin-bottom: 1rem;
}

.product-actions {
    display: flex;
    gap: 0.75rem;
}



.btn-secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    padding: 0.75rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-secondary:hover {
    background: #e2e8f0;
    color: #334155;
}

/* ==================== НОВОЕ МЕНЮ КАТЕГОРИЙ ==================== */
.new-categories-menu {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Cookie Consent Banner Styles */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: hsl(var(--card));
  border-top: 1px solid hsl(var(--border));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  padding: 1.5rem;
  animation: slideUp 0.3s ease-out;
}

.cookie-consent-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.cookie-consent-text h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.5rem;
}

.cookie-consent-text p {
  font-size: 0.9rem;
  color: hsl(var(--muted-foreground));
  margin: 0;
  line-height: 1.5;
}

.cookie-consent-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.cookie-consent-buttons .btn {
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.9rem;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}

.cookie-consent-buttons .btn-primary {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.cookie-consent-buttons .btn-primary:hover {
  background: hsl(var(--primary-dark));
  border-color: hsl(var(--primary-dark));
}

.cookie-consent-buttons .btn-secondary {
  background: transparent;
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}

.cookie-consent-buttons .btn-secondary:hover {
  background: hsl(var(--muted));
}

.cookie-policy-link {
  color: hsl(var(--primary));
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}

.cookie-policy-link:hover {
  text-decoration: underline;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Responsive design for cookie consent */
@media (max-width: 768px) {
  .cookie-consent-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .cookie-consent-buttons {
    width: 100%;
    justify-content: space-between;
  }
  
  .cookie-consent-buttons .btn {
    flex: 1;
    text-align: center;
  }
  
  .cookie-policy-link {
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
  }
}

.category-toggle {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
}

.category-toggle:hover {
    background-color: rgba(34, 197, 94, 0.1);
}

.category-toggle [data-lucide="chevron-right"] {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #64748b;
    width: 1rem;
    height: 1rem;
    transform-origin: center;
}

.category-toggle.expanded [data-lucide="chevron-right"] {
    transform: rotate(90deg);
}

.category-toggle.collapsed [data-lucide="chevron-right"] {
    transform: rotate(0deg);
}

.category-toggle:hover [data-lucide="chevron-right"] {
    color: #3b82f6;
}

.category-children {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.category-children.hidden {
    max-height: 0 !important;
}

.category-children:not(.hidden) {
    max-height: none;
}

/* Стили для родительских категорий */
.category-parent-item {
    position: relative;
    transition: all 0.2s ease;
}

.category-parent-item:hover {
    background-color: #f8fafc;
    transform: translateX(2px);
}

.category-parent-item.active {
    background-color: #f0fdf4;
    border-left: 3px solid #22c55e;
}

/* Стили для дочерних категорий */
.child-category-group {
    position: relative;
}

.child-category-group > div {
    transition: all 0.2s ease;
}

.child-category-group > div:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateX(2px);
}

/* Визуальная иерархия уровней */
.category-level-0 {
    font-weight: 600;
    color: #1e293b;
}

.category-level-1 {
    font-weight: 500;
    color: #334155;
    padding-left: 1rem;
}

.category-level-2 {
    font-weight: 400;
    color: #475569;
    padding-left: 2rem;
}

.category-level-3 {
    font-weight: 400;
    color: #64748b;
    padding-left: 3rem;
}

@keyframes slideDown {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 500px;
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        max-height: 500px;
        opacity: 1;
    }
    to {
        max-height: 0;
        opacity: 0;
    }
}

.child-category-item:hover {
    background-color: #f1f5f9;
}

.category-item:last-child {
    border-bottom: none !important;
}

/* Улучшенные стили для чекбоксов категорий */
.category-item .w-4.h-4.rounded.border-2,
.child-category-item .w-3.h-3.rounded.border-2,
.w-2.h-2.rounded.border {
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.category-item .w-4.h-4.rounded.border-2:hover,
.child-category-item .w-3.h-3.rounded.border-2:hover {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* Стили для счетчиков */
.text-xs.bg-slate-100,
.text-xs.bg-blue-50 {
    font-weight: 500;
    letter-spacing: 0.025em;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .category-parent {
        padding: 0.75rem 1rem;
    }
    
    .child-category-item a {
        padding: 0.5rem 1rem 0.5rem 1.5rem;
    }
    
    .max-h-80 {
        max-height: 60vh;
    }
}