/*
Theme Name: Best AI Tools
Theme URI: https://bestaitools.com
Author: Best AI Tools
Description: A modern AI tools directory theme with full site editing support, built-in schema markup, and a powder-blue frosted-glass design.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: best-ai-tools
Tags: full-site-editing, custom-colors, custom-fonts, directory
*/

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Serif+Display:ital@0;1&display=swap');

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── CSS VARIABLES ── */
:root {
  --bat-bg:       #9fcad8;
  --bat-card:     rgba(255,255,255,0.85);
  --bat-border:   rgba(255,255,255,0.65);
  --bat-border2:  rgba(255,255,255,0.92);
  --bat-text1:    #0a1f2e;
  --bat-text2:    #1e4460;
  --bat-text3:    #4a7a9b;
  --bat-accent:   #1d4ed8;
  --bat-accent2:  #6366f1;
  --bat-radius:   14px;
  --bat-radius-sm:8px;
  --bat-font:     'Plus Jakarta Sans', sans-serif;
  --bat-font-head:'DM Serif Display', serif;
}

/* ── BASE ── */
html { scroll-behavior: smooth; }
body {
  font-family: var(--bat-font);
  color: var(--bat-text1);
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%,  #9bbfd6 0%,  transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 8%,  #a4c8da 0%,  transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 40%, #b0d0e2 0%,  transparent 55%),
    radial-gradient(ellipse 65% 55% at 5%  75%, #93bace 0%,  transparent 55%),
    linear-gradient(160deg, #8fb8cc 0%, #9ac4d8 35%, #9fcad8 65%, #8db8c8 100%);
  min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
a   { color: var(--bat-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── LAYOUT ── */
.bat-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.bat-glass {
  background: var(--bat-card);
  border: 1px solid var(--bat-border2);
  border-radius: var(--bat-radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── BUTTONS ── */
.bat-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--bat-accent), var(--bat-accent2));
  color: #fff !important; border: none; border-radius: var(--bat-radius-sm);
  padding: 11px 22px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: var(--bat-font); text-decoration: none !important;
  transition: opacity .15s; white-space: nowrap;
}
.bat-btn-primary:hover { opacity: .9; }
.bat-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.78); color: var(--bat-text1) !important;
  border: 1px solid var(--bat-border2); border-radius: var(--bat-radius-sm);
  padding: 11px 18px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: var(--bat-font); text-decoration: none !important;
  transition: background .15s; white-space: nowrap;
}
.bat-btn-secondary:hover { background: rgba(255,255,255,.98); }
.bat-btn-save {
  background: rgba(255,255,255,.78); color: var(--bat-text2);
  border: 1px solid var(--bat-border2); border-radius: var(--bat-radius-sm);
  padding: 11px 14px; font-size: 18px; cursor: pointer; line-height: 1;
  transition: color .15s;
}
.bat-btn-save:hover { color: #e11d48; }

/* ── NAV ── */
.bat-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bat-border);
  padding: .9rem 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.bat-nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 800; color: var(--bat-text1) !important;
  text-decoration: none !important; flex-shrink: 0;
}
.bat-nav-logo-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--bat-accent), var(--bat-accent2));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bat-nav-logo .custom-logo { height: 40px; width: auto; }

/* Primary menu */
.bat-nav-menu {
  display: flex; align-items: center; gap: 1.5rem;
  list-style: none; margin: 0; padding: 0;
}
.bat-nav-menu li a {
  font-size: 14px; font-weight: 500; color: var(--bat-text2);
  text-decoration: none; transition: color .15s;
}
.bat-nav-menu li a:hover { color: var(--bat-text1); }
.bat-nav-menu li.current-menu-item > a { color: var(--bat-accent); font-weight: 700; }
.bat-nav-cta {
  background: linear-gradient(135deg, var(--bat-accent), var(--bat-accent2)) !important;
  color: #fff !important; padding: 8px 18px !important;
  border-radius: var(--bat-radius-sm) !important; font-weight: 700 !important;
  text-decoration: none !important; font-size: 14px !important;
  white-space: nowrap;
}
.bat-nav-social { display: flex; align-items: center; gap: .6rem; }
.bat-nav-social a {
  width: 32px; height: 32px; border-radius: 7px;
  background: rgba(255,255,255,.55); border: 1px solid var(--bat-border2);
  display: flex; align-items: center; justify-content: center;
  color: var(--bat-text2); font-size: 12px; font-weight: 700;
  text-decoration: none; transition: all .15s;
}
.bat-nav-social a:hover { background: rgba(255,255,255,.95); color: var(--bat-text1); }
.bat-nav-hamburger {
  display: none; background: rgba(255,255,255,.55);
  border: 1px solid var(--bat-border); border-radius: 7px; padding: 7px; cursor: pointer;
}
@media (max-width: 820px) {
  .bat-nav-menu { display: none; }
  .bat-nav-menu.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(255,255,255,.97); padding: 1rem 2rem;
    border-bottom: 1px solid var(--bat-border); z-index: 99; gap: .75rem;
  }
  .bat-nav-hamburger { display: flex; }
  .bat-nav-social { display: none; }
}

/* ── BREADCRUMB ── */
.bat-breadcrumb-bar {
  background: rgba(255,255,255,.28); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.4); padding: .7rem 2rem;
}
.bat-breadcrumb {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap;
}
.bat-breadcrumb a   { color: var(--bat-accent); font-weight: 500; }
.bat-breadcrumb span{ color: var(--bat-text2); font-weight: 500; }
.bat-breadcrumb .sep{ color: var(--bat-text3); }

/* ── HERO ── */
.bat-hero {
  padding: 4rem 2rem 2.5rem;
  text-align: center;
}
.bat-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8);
  border-radius: 100px; padding: 5px 18px;
  font-size: 13px; font-weight: 700; color: var(--bat-accent);
  margin-bottom: 1.5rem;
}
.bat-hero h1 {
  font-family: var(--bat-font-head);
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1; font-weight: 400; color: var(--bat-text1);
  max-width: 720px; margin: 0 auto 1rem; letter-spacing: -.5px;
}
.bat-hero-sub {
  font-size: 17px; color: var(--bat-text2);
  max-width: 480px; margin: 0 auto 2rem; line-height: 1.65;
}
.bat-hero-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 2.5rem; flex-wrap: wrap;
}
.bat-stat { text-align: center; }
.bat-stat-num { font-size: 26px; font-weight: 800; color: var(--bat-text1); line-height: 1; }
.bat-stat-lbl { font-size: 12px; color: var(--bat-text3); font-weight: 500; margin-top: 4px; }
.bat-stat-div { width: 1px; height: 32px; background: rgba(0,0,0,.12); }

/* ── SEARCH AREA ── */
.bat-search-area {
  padding: 1.75rem 2rem 0;
  background: rgba(255,255,255,.28);
  border-top: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(10px);
}
.bat-search-wrap { max-width: 820px; margin: 0 auto; display: flex; gap: 10px; }
.bat-search-box {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.82); border: 1px solid var(--bat-border2);
  border-radius: 12px; padding: 0 16px; height: 52px;
}
.bat-search-box svg { flex-shrink: 0; color: var(--bat-text3); }
.bat-search-box input {
  border: none; background: transparent; outline: none;
  font-size: 15px; color: var(--bat-text1); font-family: var(--bat-font); flex: 1; width: 100%;
}
.bat-search-box input::placeholder { color: var(--bat-text3); }
.bat-search-btn {
  background: linear-gradient(135deg, var(--bat-accent), var(--bat-accent2));
  color: #fff; border: none; border-radius: 12px; padding: 0 26px;
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--bat-font); height: 52px;
  white-space: nowrap;
}
.bat-search-btn:hover { opacity: .9; }

/* ── FILTER PILLS ── */
.bat-filter-pills {
  max-width: 820px; margin: 0 auto;
  display: flex; gap: 8px; flex-wrap: wrap; padding: 1rem 0 1.5rem; align-items: center;
}
.bat-pill {
  font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 100px;
  cursor: pointer; border: 1.5px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.42); color: var(--bat-text2);
  transition: all .15s; font-family: var(--bat-font);
  display: inline-flex; align-items: center; gap: 4px;
}
.bat-pill:hover { background: rgba(255,255,255,.78); color: var(--bat-text1); border-color: rgba(255,255,255,.95); }
.bat-pill.active { background: var(--bat-accent); color: #fff !important; border-color: var(--bat-accent); }

/* ── SECTION HEADERS ── */
.bat-section-hd {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem;
}
.bat-section-hd h2 {
  font-size: 20px; font-weight: 800; color: var(--bat-text1);
}
.bat-see-all {
  font-size: 13px; font-weight: 700; color: var(--bat-accent);
  text-decoration: none; white-space: nowrap;
}
.bat-see-all:hover { opacity: .75; }

/* ── CAT SECTION HEADER ── */
.bat-cat-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 1rem; padding: .85rem 1rem; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.6); backdrop-filter: blur(10px);
}
.bat-cat-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.45); flex-shrink: 0; font-size: 18px;
}
.bat-cat-header h3 { font-size: 16px; font-weight: 800; flex: 1; }
.bat-cat-count    { font-size: 12px; font-weight: 600; opacity: .65; }

/* ── TOOL CARDS ── */
.bat-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.bat-tool-card {
  background: var(--bat-card);
  border: 1px solid var(--bat-border2);
  border-radius: var(--bat-radius); padding: 1.1rem; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  display: flex; flex-direction: column; gap: 8px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.bat-tool-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(10,31,46,.12); }
.bat-tool-card-top { display: flex; align-items: center; gap: 10px; }
.bat-tool-name { font-size: 14px; font-weight: 800; color: var(--bat-text1); }
.bat-tool-cat-tag {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 100px;
  display: inline-block; margin-top: 3px;
  background: var(--bat-accent); color: #fff; opacity: .85;
}
.bat-tool-desc {
  font-size: 12px; color: var(--bat-text2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  flex: 1;
}
.bat-tool-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,.06); flex-wrap: wrap; gap: 4px;
}

/* ── LOGOS ── */
.bat-tool-logo {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
  overflow: hidden; border: 1.5px solid rgba(0,0,0,.07);
  background: var(--bat-accent);
}
.bat-tool-logo img       { width: 100%; height: 100%; object-fit: cover; display: block; }
.bat-tool-hero-logo      { width: 72px !important; height: 72px !important; border-radius: 16px !important; font-size: 22px !important; }
.bat-alt-logo            { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; overflow: hidden; background: var(--bat-accent); }
.bat-alt-logo img        { width: 100%; height: 100%; object-fit: cover; }

/* ── BADGES ── */
.bat-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
}
.bat-badge-free      { background: #dcfce7; color: #14532d; }
.bat-badge-paid      { background: #fef3c7; color: #78350f; }
.bat-badge-freemium  { background: #ede9fe; color: #3b0764; }
.bat-badge-free-trial{ background: #dbeafe; color: #1e3a8a; }
.bat-badge-new       { background: #ffe4e6; color: #881337; }
.bat-badge-verified  { background: #ccfbf1; color: #134e4a; }
.bat-rating          { font-size: 12px; color: var(--bat-text3); display: flex; align-items: center; gap: 3px; }
.bat-rating .star    { color: #f59e0b; }

/* ── LISTING PAGE ── */
.bat-listing-wrap {
  max-width: 1100px; margin: 0 auto; padding: 2rem;
  display: grid; grid-template-columns: 1fr 300px; gap: 2rem; align-items: start;
}
@media (max-width: 900px) { .bat-listing-wrap { grid-template-columns: 1fr; } }

.bat-title-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.bat-title-left    { display: flex; align-items: flex-start; gap: 16px; }
.bat-title-meta h1 { font-family: var(--bat-font-head); font-size: 30px; font-weight: 400; color: var(--bat-text1); line-height: 1.2; margin-bottom: .35rem; }
.bat-title-meta .tagline { font-size: 15px; color: var(--bat-text2); line-height: 1.5; max-width: 520px; }
.bat-title-badges  { display: flex; align-items: center; gap: 8px; margin-top: .5rem; flex-wrap: wrap; }
.bat-cta-row       { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; padding-top: 4px; }

/* Tabs */
.bat-tabs {
  display: flex; gap: 0;
  background: rgba(255,255,255,.52); border-radius: 12px; padding: 4px;
  margin-bottom: 1.5rem; border: 1px solid rgba(255,255,255,.75); flex-wrap: wrap;
}
.bat-tab {
  font-size: 13px; font-weight: 700; padding: 8px 18px; border-radius: 9px;
  cursor: pointer; border: none; background: transparent; color: var(--bat-text2);
  font-family: var(--bat-font); transition: all .15s; white-space: nowrap;
}
.bat-tab:hover { color: var(--bat-text1); }
.bat-tab.active { background: #fff; color: var(--bat-accent); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.bat-tab-panel { display: none; }
.bat-tab-panel.active { display: block; }

/* Content card */
.bat-content-card {
  background: var(--bat-card); border: 1px solid var(--bat-border2);
  border-radius: var(--bat-radius); padding: 1.5rem;
  backdrop-filter: blur(12px); margin-bottom: 1.25rem;
}
.bat-content-card h2 { font-size: 17px; font-weight: 800; color: var(--bat-text1); margin-bottom: 1rem; }

/* Article content */
.bat-article-content               { font-size: 15px; color: var(--bat-text2); line-height: 1.75; }
.bat-article-content h2            { font-family: var(--bat-font-head); font-size: 22px; font-weight: 400; color: var(--bat-text1); margin: 2rem 0 .75rem; scroll-margin-top: 80px; }
.bat-article-content h3            { font-size: 17px; font-weight: 700; color: var(--bat-text1); margin: 1.5rem 0 .5rem; }
.bat-article-content p             { margin-bottom: 1rem; }
.bat-article-content ul,
.bat-article-content ol            { margin: .5rem 0 1rem 1.5rem; }
.bat-article-content li            { margin-bottom: .4rem; }
.bat-article-content strong        { font-weight: 700; color: var(--bat-text1); }
.bat-article-content img           { border-radius: var(--bat-radius-sm); margin: 1.5rem 0; }
.bat-article-content blockquote    { border-left: 3px solid var(--bat-accent); padding-left: 1rem; color: var(--bat-text2); font-style: italic; margin: 1rem 0; }

/* Features grid */
.bat-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bat-feature-item  { display: flex; align-items: flex-start; gap: 10px; padding: .75rem; background: rgba(255,255,255,.52); border-radius: 10px; border: 1px solid rgba(255,255,255,.85); }
.bat-feature-icon  { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--bat-accent); color: #fff; font-size: 16px; }
.bat-feature-title { font-size: 13px; font-weight: 700; color: var(--bat-text1); }
.bat-feature-desc  { font-size: 12px; color: var(--bat-text2); margin-top: 2px; line-height: 1.4; }

/* Pricing */
.bat-pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.bat-price-card   { background: rgba(255,255,255,.62); border: 1.5px solid rgba(255,255,255,.88); border-radius: 12px; padding: 1rem; text-align: center; }
.bat-price-card.featured { border-color: var(--bat-accent); background: rgba(99,102,241,.08); }
.bat-plan-name    { font-size: 11px; font-weight: 800; color: var(--bat-text3); text-transform: uppercase; letter-spacing: .5px; }
.bat-plan-price   { font-size: 24px; font-weight: 800; color: var(--bat-text1); }
.bat-plan-period  { font-size: 11px; color: var(--bat-text3); margin-bottom: .5rem; }
.bat-plan-features{ font-size: 12px; color: var(--bat-text2); line-height: 1.6; }

/* Reviews */
.bat-review-summary { display: flex; align-items: center; gap: 1.5rem; padding: 1rem; background: rgba(255,255,255,.52); border-radius: 12px; margin-bottom: 1.25rem; }
.bat-big-num        { font-size: 44px; font-weight: 800; color: var(--bat-text1); line-height: 1; }
.bat-stars          { display: flex; gap: 2px; color: #f59e0b; margin: .25rem 0; }
.bat-review-card    { background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.88); border-radius: 12px; padding: 1rem; margin-bottom: .75rem; }
.bat-rev-header     { display: flex; align-items: center; gap: 10px; margin-bottom: .6rem; }
.bat-rev-avatar     { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0; background: linear-gradient(135deg, var(--bat-accent), var(--bat-accent2)); }
.bat-rev-name       { font-size: 14px; font-weight: 700; color: var(--bat-text1); }
.bat-rev-date       { font-size: 11px; color: var(--bat-text3); }
.bat-rev-body       { font-size: 13px; color: var(--bat-text2); line-height: 1.6; }
.bat-write-review   { background: rgba(255,255,255,.55); border: 1.5px dashed rgba(29,78,216,.3); border-radius: 12px; padding: 1.25rem; margin-top: 1rem; }
.bat-form-row       { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: .75rem; }
.bat-form-field label    { font-size: 12px; font-weight: 700; color: var(--bat-text2); display: block; margin-bottom: 4px; }
.bat-form-field input,
.bat-form-field textarea { width: 100%; background: rgba(255,255,255,.78); border: 1px solid var(--bat-border2); border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--bat-text1); font-family: var(--bat-font); outline: none; }
.bat-form-field textarea { resize: vertical; min-height: 80px; }

/* Sidebar */
.bat-sidebar-card   { background: var(--bat-card); border: 1px solid var(--bat-border2); border-radius: var(--bat-radius); padding: 1.25rem; backdrop-filter: blur(12px); margin-bottom: 1.25rem; }
.bat-sidebar-card h3{ font-size: 14px; font-weight: 800; color: var(--bat-text1); margin-bottom: 1rem; }
.bat-info-row       { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.05); font-size: 13px; }
.bat-info-row:last-child { border-bottom: none; }
.bat-info-row .lbl  { color: var(--bat-text3); font-weight: 500; }
.bat-info-row .val  { color: var(--bat-text1); font-weight: 600; text-align: right; }
.bat-alt-card       { display: flex; align-items: flex-start; gap: 10px; padding: .85rem; background: rgba(255,255,255,.55); border-radius: 10px; border: 1px solid rgba(255,255,255,.88); cursor: pointer; transition: transform .12s; margin-bottom: .6rem; text-decoration: none; }
.bat-alt-card:hover { transform: translateY(-1px); }
.bat-alt-name       { font-size: 13px; font-weight: 700; color: var(--bat-text1); }
.bat-alt-desc       { font-size: 11px; color: var(--bat-text2); margin-top: 3px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bat-share-btns     { display: flex; gap: 8px; flex-wrap: wrap; margin-top: .75rem; }

/* ── CATEGORY PAGE ── */
.bat-cat-hero-wrap { background: rgba(255,255,255,.2); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.38); padding-bottom: 1.5rem; }
.bat-cat-hero      { max-width: 1200px; margin: 0 auto; padding: 2.5rem 2rem 0; display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start; }
.bat-cat-hero h1   { font-family: var(--bat-font-head); font-size: clamp(26px,4vw,40px); font-weight: 400; color: var(--bat-text1); line-height: 1.15; margin-bottom: .6rem; }
.bat-cat-hero h1 span{ color: var(--bat-accent); }
.bat-cat-hero-desc { font-size: 14px; color: var(--bat-text2); max-width: 560px; line-height: 1.65; margin-bottom: 1.25rem; }
.bat-cat-stats     { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.bat-cat-stat      { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.82); border-radius: 100px; padding: 5px 13px; font-size: 12px; font-weight: 600; color: var(--bat-text1); }
.bat-cat-hero-img  { width: 100px; height: 100px; border-radius: 18px; background: linear-gradient(135deg,#a8ccde,#8ab4c8); display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,.82); flex-shrink: 0; font-size: 46px; }
.bat-related-cats  { display: flex; gap: 6px; flex-wrap: wrap; margin-top: .75rem; }
.bat-related-cat   { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 100px; background: rgba(255,255,255,.48); border: 1px solid rgba(255,255,255,.78); color: var(--bat-text2); text-decoration: none; transition: all .12s; }
.bat-related-cat:hover { background: rgba(255,255,255,.88); color: var(--bat-text1); }

.bat-filter-bar    { max-width: 1200px; margin: 1.25rem auto 0; padding: 0 2rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bat-filter-section{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.bat-filter-lbl    { font-size: 12px; font-weight: 700; color: var(--bat-text3); white-space: nowrap; }
.bat-sort-select   { background: rgba(255,255,255,.65); border: 1px solid var(--bat-border2); border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--bat-text1); font-family: var(--bat-font); cursor: pointer; outline: none; }

.bat-cat-body      { max-width: 1200px; margin: 1.25rem auto 0; padding: 0 2rem 3rem; display: grid; grid-template-columns: 210px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 768px) { .bat-cat-body { grid-template-columns: 1fr; } .bat-cat-hero { grid-template-columns: 1fr; } .bat-cat-hero-img { display: none; } }

.bat-subcat-sidebar{ background: var(--bat-card); border: 1px solid var(--bat-border2); border-radius: var(--bat-radius); padding: 1.1rem; backdrop-filter: blur(12px); position: sticky; top: 72px; }
.bat-subcat-item   { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--bat-text2); transition: all .12s; margin-bottom: 2px; text-decoration: none; }
.bat-subcat-item:hover{ background: rgba(255,255,255,.68); color: var(--bat-text1); }
.bat-subcat-item.active{ background: #dbeafe; color: var(--bat-accent); font-weight: 700; }
.bat-subcat-count  { font-size: 11px; font-weight: 700; background: rgba(0,0,0,.06); padding: 2px 7px; border-radius: 100px; color: var(--bat-text3); }

.bat-pagination    { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 2rem 0 0; }
.bat-page-btn      { min-width: 34px; height: 34px; border-radius: 8px; padding: 0 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid rgba(255,255,255,.78); background: rgba(255,255,255,.48); color: var(--bat-text2); font-family: var(--bat-font); transition: all .12s; text-decoration: none; }
.bat-page-btn:hover,.bat-page-btn.active { background: linear-gradient(135deg,var(--bat-accent),var(--bat-accent2)); color: #fff; border-color: transparent; }

/* ── FOOTER ── */
.bat-footer {
  border-top: 1px solid rgba(255,255,255,.42); padding: 1.5rem 2rem;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  background: rgba(255,255,255,.22); backdrop-filter: blur(10px);
}
.bat-footer p           { font-size: 13px; color: var(--bat-text3); }
.bat-footer-links       { display: flex; gap: 1.5rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.bat-footer-links a     { font-size: 13px; color: var(--bat-text2); text-decoration: none; }
.bat-footer-links a:hover{ color: var(--bat-text1); }
.bat-footer-social      { display: flex; gap: .6rem; }
.bat-footer-social a    { width: 32px; height: 32px; border-radius: 7px; background: rgba(255,255,255,.48); border: 1px solid rgba(255,255,255,.72); display: flex; align-items: center; justify-content: center; color: var(--bat-text2); font-size: 12px; font-weight: 700; text-decoration: none; transition: all .15s; }
.bat-footer-social a:hover{ background: rgba(255,255,255,.88); color: var(--bat-text1); }

/* ── EDITOR COMPAT ── */
.editor-styles-wrapper { background: #f0f6f9 !important; }