:root {
    --red: #ef4850; --red-dark: #d43d45; --red-light: #fef0f0;
    --blue: #2c99d4; --blue-dark: #2280b5; --blue-light: #eff6ff;
    --black: #1a1a1a; --gray-50: #f8fafb; --gray-100: #f5f5f5;
    --gray-200: #e5e5e5; --gray-300: #d4d4d4; --gray-400: #a3a3a3;
    --gray-500: #737373; --gray-600: #404040; --white: #fff;
    --green: #16a34a; --green-light: #f0fdf4;
    --purple: #8b5cf6; --orange: #f97316; --teal: #0d9488;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.1); --shadow-xl: 0 20px 50px rgba(0,0,0,0.12);
}

/* ===== HERO ===== */
.categories-hero {
    background: linear-gradient(135deg, var(--red-light) 0%, var(--blue-light) 100%);
    padding: 2rem 0 3rem; text-align: center; position: relative; overflow: hidden;
}
.categories-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-shape { position: absolute; border-radius: 50%; opacity: 0.05; }
.hero-shape-1 { width: 400px; height: 400px; background: var(--red); top: -100px; right: -5%; animation: floatShape 8s ease-in-out infinite; }
.hero-shape-2 { width: 300px; height: 300px; background: var(--blue); bottom: -50px; left: -5%; animation: floatShape 6s ease-in-out infinite reverse; }
@keyframes floatShape { 0%,100%{transform:translate(0,0)}50%{transform:translate(15px,-15px)} }
.categories-hero-content { position: relative; z-index: 1; max-width: 650px; margin: 0 auto; }
.hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; background: var(--white); border-radius: 9999px; font-size: 0.8125rem; font-weight: 600; color: var(--red); margin-bottom: 1rem; box-shadow: var(--shadow-sm); }
.categories-hero-title { font-size: 2.25rem; font-weight: 800; color: var(--black); margin-bottom: 0.75rem; }
@media(min-width:768px){.categories-hero-title{font-size:3rem}}
.text-gradient { background: linear-gradient(135deg, var(--red) 0%, var(--blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.categories-hero-subtitle { font-size: 0.9375rem; color: var(--gray-500); margin-bottom: 1.5rem; }

.hero-search { position: relative; max-width: 450px; margin: 0 auto; }
.hero-search svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--gray-400); }
.hero-search-input { width: 100%; padding: 0.75rem 1rem 0.75rem 2.75rem; border: 2px solid var(--gray-200); border-radius: 9999px; font-size: 0.9375rem; font-family: inherit; outline: none; background: var(--white); box-shadow: var(--shadow-md); transition: all 0.3s; }
.hero-search-input:focus { border-color: var(--red); box-shadow: 0 0 0 4px rgba(239,72,80,0.08); }

/* ===== CONTENT ===== */
.categories-content-section { padding: 2.5rem 0 5rem; background: var(--gray-50); min-height: 60vh; }

/* Stats */
.categories-stats { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 2rem; flex-wrap: wrap; }
.cat-stat { text-align: center; padding: 1rem 1.5rem; background: var(--white); border-radius: 12px; box-shadow: var(--shadow-sm); min-width: 120px; }
.cat-stat-number { display: block; font-size: 1.5rem; font-weight: 800; color: var(--red); }
.cat-stat-label { font-size: 0.75rem; color: var(--gray-500); }

/* Results */
.results-info { margin-bottom: 1.25rem; }
.results-info span { font-size: 0.8125rem; color: var(--gray-500); }

/* ===== CATEGORIES GRID ===== */
.categories-grid { display: grid; gap: 1.25rem; }
@media(min-width:480px){.categories-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.categories-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.categories-grid{grid-template-columns:repeat(4,1fr)}}
.categories-loading { grid-column: 1 / -1; text-align: center; color: var(--gray-500); padding: 2rem 0; }

.category-card {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: 20px; padding: 2rem 1.5rem; text-align: center;
    text-decoration: none; transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: transparent; }
.category-card-icon {
    width: 80px; height: 80px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.4s ease;
}
.category-card:hover .category-card-icon { transform: scale(1.1) rotate(-5deg); }
.icon-allopathy { background: var(--red-light); color: var(--red); }
.icon-antibiotics { background: var(--blue-light); color: var(--blue); }
.icon-cardiovascular { background: #fef2f2; color: #dc2626; }
.icon-vitamins { background: var(--green-light); color: var(--green); }
.icon-ayurvedic { background: #fff7ed; color: var(--orange); }
.icon-surgical { background: #f5f3ff; color: var(--purple); }
.icon-generics { background: #f0fdfa; color: var(--teal); }
.icon-speciality { background: #fefce8; color: #b45309; }

.category-card-title { font-size: 1.125rem; font-weight: 700; color: var(--black); transition: color 0.3s; }
.category-card:hover .category-card-title { color: var(--red); }
.category-card-count { font-size: 0.8125rem; color: var(--gray-500); }
.category-card-arrow {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.5rem 1.25rem; border: 1.5px solid var(--gray-200);
    border-radius: 9999px; font-size: 0.8125rem; font-weight: 600;
    color: var(--gray-600); transition: all 0.3s;
}
.category-card:hover .category-card-arrow { border-color: var(--red); color: var(--red); background: var(--red-light); }

/* ===== EMPTY ===== */
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 4rem 2rem; text-align: center; }
.empty-state h3 { font-size: 1.125rem; font-weight: 700; margin: 1rem 0 0.5rem; }
.empty-state p { color: var(--gray-500); }

/* ===== TOAST ===== */
.categories-toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(100%); background: var(--black); color: var(--white); padding: 0.75rem 1.5rem; border-radius: 9999px; font-size: 0.875rem; display: flex; align-items: center; gap: 0.625rem; z-index: 9999; opacity: 0; transition: all 0.3s; box-shadow: var(--shadow-xl); white-space: nowrap; }
.categories-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.categories-toast-success { border: 1px solid var(--green); }

@media(max-width:640px){.categories-hero-title{font-size:1.75rem}}