/* =========================================================
   CATEGORY PAGES MASTER CSS (category.css)
   (Category Hero, Live Search Box, KB/MB Icons)
   ========================================================= */

.category-main { max-width: 1150px; margin: 0 auto; padding: 0px 20px 60px; min-height: 80vh; }

/* Category Hero Section */
.cat-hero { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 20px 20px 30px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.02); margin-bottom: 25px; transition: 0.5s; }
.cat-icon img { width: 60px; height: 60px; margin-bottom: -20px; object-fit: contain; }
.cat-title { font-size: 2.2rem; font-weight: 800; color: #1e293b; margin-bottom: 5px; transition: 0.5s; }
.cat-title span { color: #f97316; }
.cat-desc { color: #475569; font-size: 14px; max-width: 700px; margin: 5px auto 20px auto; line-height: 1.6; transition: 0.5s; }

/* Category Live Search Box */
.cat-search-box { max-width: 500px; margin: 0 auto; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 10px; display: flex; align-items: center; padding: 10px 20px; transition: 0.3s; }
.cat-search-box:focus-within { background: #ffffff; border-color: #8b5cf6; box-shadow: 0 4px 15px rgba(139,92,246,0.1); }
.cat-search-box i { color: #8b5cf6; font-size: 18px; margin-right: 12px; }
.cat-search-box input { flex: 1; border: none; outline: none; background: transparent; font-family: 'Poppins', sans-serif; font-size: 14px; color: #1e293b; }

/* ========================================================= */
/* 🔍 SEARCH HERO BANNER (Light & Dark Mode) */
/* ========================================================= */

/* लाइट मोड में सुंदर पर्पल ग्रेडिएंट */
.search-hero-special {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 1px solid #ddd6fe;
}

/* 🌙 डार्क मोड का जादू (100% Black/Navy) */
html.dark-mode .search-hero-special,
body.dark-mode .search-hero-special {
    background: #1e293b !important; /* डार्क बैकग्राउंड */
    border-color: #334155 !important;
}

html.dark-mode .search-hero-special .cat-title,
body.dark-mode .search-hero-special .cat-title {
    color: #f8fafc !important; /* टेक्स्ट सफ़ेद हो जाएगा */
}

html.dark-mode .search-hero-special .cat-desc,
body.dark-mode .search-hero-special .cat-desc {
    color: #cbd5e1 !important; /* डिस्क्रिप्शन हल्का ग्रे हो जाएगा */
}