/* Light Theme for The Bookish Club - Minimalist Design */

:root {
  /* Primary Colors - Purple Gradient */
  --light-primary-100: #f3f4f6;
  --light-primary-200: #e5e7eb;
  --light-primary-300: #d1d5db;
  --light-primary-400: #9ca3af;
  --light-primary-500: #6b7280;
  --light-primary-600: #4b5563;
  --light-primary-700: #374151;
  --light-primary-800: #1f2937;
  --light-primary-900: #111827;

  /* Accent Colors - Purple Gradient */
  --light-accent-100: #faf5ff;
  --light-accent-200: #f3e8ff;
  --light-accent-300: #e9d5ff;
  --light-accent-400: #d8b4fe;
  --light-accent-500: #c084fc;
  --light-accent-600: #a855f7;
  --light-accent-700: #9333ea;
  --light-accent-800: #7c3aed;
  --light-accent-900: #6b21a8;

  /* Brand Colors - Primary Purple */
  --light-brand-primary: #0048FF;
  --light-brand-secondary: #764ba2;
  --light-brand-accent: #FE52FB;
  --light-brand-warm: #f5576c;

  /* Background Colors */
  --light-bg-primary: #ffffff;
  --light-bg-secondary: #fafbfc;
  --light-bg-tertiary: #f7fafc;
  --light-bg-quaternary: #edf2f7;
  --light-bg-overlay: rgba(255, 255, 255, 0.95);
  --light-bg-glass: rgba(255, 255, 255, 0.85);

  /* Text Colors */
  --light-text-primary: #2d3748;
  --light-text-secondary: #4a5568;
  --light-text-tertiary: #6b7280;
  --light-text-muted: #9ca3af;
  --light-text-inverse: #ffffff;

  /* Gradient CColors */
  --gradient: linear-gradient(90deg, #0048FF 0%, #FE52FB 100%);
}

.tt-loader {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.tt-loader::after {
  content: "";
  width: 48px;
  height: 48px;
  border: 6px solid #e9d5ff;
  border-top: 6px solid #0048FF;
  border-radius: 50%;
  animation: tt-spin 1s linear infinite;
}

@keyframes tt-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================
   Header - Modern Light Theme
   ========================== */
body.light-mode .tt-2-header {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid #eef2f7;
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.04);
}

body.light-mode .tt-2-header .tt-2-header-nav a {
  color: #374151;
  font-weight: 600;
  letter-spacing: 0.2px;
  position: relative;
  transition: color 0.2s ease;
}

body.light-mode .tt-2-header .tt-2-header-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

body.light-mode .tt-2-header .tt-2-header-nav a:hover {
  color: #111827;
}

body.light-mode .tt-2-header .tt-2-header-nav a:hover::after,
body.light-mode .tt-2-header .tt-2-header-nav a.active::after {
  transform: scaleX(1);
}

/* Theme toggle button */
body.light-mode .theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.06);
  color: #6b7280;
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

body.light-mode .theme-toggle-btn:hover {
  /* transform: translateY(-1px); */
  color: #0048FF !important;
  border: 2px solid transparent !important;
  /* border-radius: 999px !important; */
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(120deg, #0048FF, #FE52FB) border-box !important;
  background-clip: padding-box, border-box !important;
  background-origin: border-box !important;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.08);
  color: #111827;
}


/* Counter Section */
/* .tt-2-counter-box {
  background:  linear-gradient(135deg, #667eea 0%, #764ba2 100%)!important;
  border: none;
  color: white;
  box-shadow: 0 10px 26px rgba(102, 126, 234, 0.3);
} */


body.light-mode .tt-2-counter-section::before,
body.light-mode .tt-2-counter-section::after {
  content: "" !important;
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(90px) !important;
  opacity: 0.25 !important;
  z-index: 0 !important;
}

body.light-mode .tt-2-counter-section::before {
  width: 320px !important;
  height: 320px !important;
  background: linear-gradient(135deg, #a7f3d0, #93c5fd) !important;
  top: -120px !important;
  left: -100px !important;
}

body.light-mode .tt-2-counter-section::after {
  width: 380px !important;
  height: 380px !important;
  bottom: -160px !important;
  right: -140px !important;
}

body.light-mode .tt-2-counter-box {
  background: linear-gradient(90deg, #0048FF 0%, #FE52FB 100%) !important;
  border-radius: 20px !important;
  padding: 34px 24px !important;
  position: relative !important;
  z-index: 1 !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

body.light-mode .tt-2-counter-box:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(17, 24, 39, 0.12), inset 0 1px 3px rgba(255, 255, 255, 0.5) !important;
}

body.light-mode .tt-2-counter-number {
  display: block !important;
  font-size: 56px !important;
  font-weight: 800;
  line-height: 1.1 !important;
  /* background-size: 300% 300% !important; */
  /* -webkit-background-clip: text !important; */
  /* background-clip: text !important; */
  color: var(--light-text-inverse) !important;
  animation: gradient-shimmer 6s ease infinite !important;
  text-shadow: 0 2px 12px rgba(102, 126, 234, 0.2) !important;
}


@keyframes gradient-shimmer {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

body.light-mode .tt-2-counter-label {
  display: block !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: whitesmoke !important;
  letter-spacing: 0.4px !important;
}

/* Menu Button */
body.light-mode .tt-2-header-right button {
  color: var(--light-text-secondary) !important;
}

/* 🌐 Responsive Design for Light Theme */

/* General mobile-first typography scaling */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4 {
  line-height: 1.2 !important;
  word-break: break-word !important;
}

/* -------------------- */
/* Header (Navigation) */
/* -------------------- */

/* Mobile */
@media (max-width: 576px) {
  body.light-mode .tt-2-header {
    padding: 0.5rem 1rem !important;
  }

  body.light-mode .tt-2-header .tt-2-header-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 0.5rem 0 !important;
  }

  body.light-mode .tt-2-header .theme-toggle-btn {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Tablet */
@media (min-width: 577px) and (max-width: 991px) {
  body.light-mode .tt-2-header {
    padding: 0.75rem 1.25rem !important;
  }

  body.light-mode .tt-2-header .tt-2-header-nav a {
    font-size: 0.95rem !important;
  }
}

/* Laptop & above */
@media (min-width: 992px) {
  body.light-mode .tt-2-header .tt-2-header-nav {
    display: flex !important;
  }
}


/* ==========================
    Footer 
    ========================== */
/* ==========================
   Sidebar Footer Light Theme
   ========================== */
body.light-mode .ul-sidebar {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: saturate(140%) blur(10px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(10px) !important;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.10) !important;
  border-right: 1px solid #eef2f7 !important;
  color: #374151 !important;
}

body.light-mode .ul-sidebar-header {
  background: transparent !important;
  border-bottom: 1px solid #eef2f7 !important;
}

body.light-mode .ul-sidebar-header-logo .logo {
  filter: none !important;
}

body.light-mode .ul-sidebar-closer {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.06) !important;
  color: #6b7280 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
}

body.light-mode .ul-sidebar-closer:hover {
  color: #0048FF !important;
  border: 2px solid transparent !important;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(120deg, #0048FF, #FE52FB) border-box !important;
  background-clip: padding-box, border-box !important;
  background-origin: border-box !important;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.08) !important;
}

body.light-mode .ul-sidebar a {
  color: #374151 !important;
  transition: color 0.2s ease !important;
}

body.light-mode .ul-sidebar a:hover {
  color: #111827 !important;
}

body.light-mode .ul-sidebar-footer {
  background: linear-gradient(90deg, #e3f2fd 0%, #f8e1f4 50%, #ede7f6 100%) !important;
  padding: 1rem 1.5rem !important;
  text-align: center !important;
  border-top: 1px solid #ddd !important;
}

body.light-mode .ul-sidebar-footer-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #4a148c;
  /* deep purple text */
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* =============================
   Coming Soon page (Light Mode)
   ============================= */
body.light-mode .tt-coming-soon-wrapper .tt-footer-top__socials a {
  background: #d8d3d3 !important;
  border: 1px solid #e5e7eb !important;
  color: #334155 !important;
  box-shadow: 0 4px 12px rgba(17,24,39,0.06) !important;
}
body.light-mode .tt-coming-soon-wrapper .tt-footer-top__socials a:hover {
  background: linear-gradient(90deg, #0048FF 0%, #FE52FB 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Timer boxes keep base fixed size; only surface/text colors change */
/* body.light-mode .tt-coming-soon-wrapper #tt-coming-soon-timer > div {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 6px 18px rgba(17,24,39,0.06) inset, 0 2px 8px rgba(17,24,39,0.04) !important;
} */
body.light-mode .tt-coming-soon-wrapper #tt-coming-soon-timer .number {
  color: #1f2937 !important;
}
body.light-mode .tt-coming-soon-wrapper #tt-coming-soon-timer > div span:last-child {
  color: #6b7280 !important;
}

body.light-mode .ul-sidebar-footer-social a {
  display: inline-block;
  margin: 0 8px;
  color: #6a1b9a;
  /* purple icons */
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

body.light-mode .ul-sidebar-footer-social a:hover {
  color: #d81b60;
  /* pink on hover */
  transform: translateY(-3px);
}

/* Responsive tweaks */
@media (max-width: 576px) {
  body.light-mode .ul-sidebar-footer {
    padding: 0.75rem;
  }

  body.light-mode .ul-sidebar-footer-social a {
    margin: 0 5px;
    font-size: 1rem;
  }
}

/* ==========================
   Modern Footer Light Theme
   ========================== */
body.light-mode .tt-footer {
  background: linear-gradient(90deg, #6a1b9a, #d81b60) !important;
  color: var(--light-accent-100) !important;
  padding-top: clamp(77px, 4.2vw, 80px);
  box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.05) !important;
  border-top: none !important;
  position: relative;
  z-index: 1;
}

/* Footer Top Links */
body.light-mode .tt-footer-top__links {
  text-align: center !important;
  margin-bottom: 1.5rem !important;
}

body.light-mode .tt-footer-top__links a {
  margin: 0 12px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #fcfcfc !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

body.light-mode .tt-footer-top__links a::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -4px !important;
  width: 0 !important;
  height: 2px !important;
  /* background: linear-gradient(90deg, #6a1b9a, #d81b60) !important; */
  transition: width 0.3s ease !important;
}

body.light-mode .tt-footer-top__links a:hover {
  color: #fad6e3 !important;

}

body.light-mode .tt-footer-top__links a:hover::after {
  width: 100% !important;
}

/* Social Media Icons */
body.light-mode .tt-footer-socials {
  text-align: center !important;
}

body.light-mode .tt-footer-bottom-side{
  color: var(--white) !important;
  background-color: rgba(181, 181, 181, 0.40);
  padding: clamp(12px, 0.79vw, 15px) clamp(20px, 3.68vw, 70px);
  font-weight: 500;
  font-size: clamp(13px, 0.84vw, 16px);
}

body.light-mode .tt-footer-bottom-side a {
  color: var(--white) !important;
}

body.light-mode .tt-footer-socials a {
  margin: 0 10px !important;
  font-size: 1.4rem !important;
  color: #6a1b9a !important;
  display: inline-block !important;
  background: #fff !important;
  border-radius: 50% !important;
  padding: 10px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .tt-footer-socials a:hover {
  background: linear-gradient(135deg, #6a1b9a, #d81b60) !important;
  color: #fff !important;
  transform: translateY(-4px) scale(1.05) !important;
}

/* Footer Bottom */
body.light-mode .tt-footer-bottom {
  margin-top: 2rem !important;
  font-size: 0.9rem !important;
  text-align: center !important;
  color: #4a148c !important;
}

body.light-mode .tt-footer-bottom-links a {
  margin: 0 8px !important;
  /* color: #6a1b9a !important; */
  font-weight: 500 !important;
  transition: color 0.3s ease !important;
}

body.light-mode .tt-footer-bottom-links a:hover {
  color: #d81b60 !important;
}

/* Responsive */
@media (max-width: 768px) {
  body.light-mode .tt-footer-top__links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  body.light-mode .tt-footer-socials {
    margin: 1rem 0 !important;
  }

  body.light-mode .tt-footer-bottom-links {
    margin-top: 1rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }
}


/* ==========================
   Reviewers & Authors Section
   ========================== */
body.light-mode .reviewers-authors-modern-section {
  position: relative !important;
  overflow: hidden !important;
}

body.light-mode .reviewers-authors-modern-section::before,
body.light-mode .reviewers-authors-modern-section::after {
  content: "" !important;
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  opacity: 0.28 !important;
  z-index: 0 !important;
}

body.light-mode .reviewers-authors-modern-section::before {
  width: 360px !important;
  height: 360px !important;
  background: radial-gradient(circle at 30% 30%, #c7d2fe, transparent 60%) !important;
  top: -140px !important;
  left: -120px !important;
}

body.light-mode .reviewers-authors-modern-section::after {
  width: 420px !important;
  height: 420px !important;
  background: radial-gradient(circle at 70% 70%, #fde68a, transparent 60%) !important;
  bottom: -160px !important;
  right: -140px !important;
}

/* Card */
body.light-mode .modern-slider-card {
  /* Keep exact layout as base; only colors differ */
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  border-radius: 32px !important;
  padding: 36px 48px !important;
  gap: 40px !important;
  min-height: 260px !important;
  position: relative !important;
  overflow: hidden !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
  /* color surface comes from variables in landing-page.css */
  border: 1.5px solid var(--ra-card-border) !important;
  box-shadow: 0 8px 32px 0 var(--ra-card-shadow), 0 1.5px 8px 0 var(--ra-card-shadow-2) !important;
  background: var(--ra-card-bg) !important;
}

/* Avatar */
body.light-mode .modern-slider-avatar { position: relative !important; }

body.light-mode .modern-slider-avatar img {
  width: 110px !important;
  height: 110px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 4px solid var(--ra-avatar-border) !important;
  box-shadow: 0 4px 24px 0 var(--ra-avatar-shadow) !important;
  background: var(--ra-avatar-bg) !important;
}

/* Remove gradient ring to match base */
body.light-mode .modern-slider-avatar::after { content: none !important; }

/* Badge */
body.light-mode .modern-badge {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  border-radius: 16px !important;
  padding: 6px 18px 6px 12px !important;
  position: absolute !important;
  bottom: -18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.10) !important;
}

body.light-mode .modern-badge.author {
  /* keep author variant color only */
  box-shadow: 0 6px 14px rgba(185, 28, 28, 0.18) !important;
}

/* Content */
body.light-mode .modern-slider-title {
  color: var(--ra-title-color) !important;
  font-size: 2.1rem !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
  letter-spacing: 1px !important;
}

body.light-mode .modern-slider-desc {
  color: var(--ra-desc-color) !important;
  font-size: 1.15rem !important;
  margin-bottom: 26px !important;
  line-height: 1.6 !important;
}

/* Button */
body.light-mode .modern-slider-btn {
  display: inline-block !important;
  padding: 12px 38px !important;
  border-radius: 24px !important;
  color: var(--ra-btn-text) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 2px 12px 0 var(--ra-btn-shadow) !important;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s !important;
}

body.light-mode .modern-slider-btn:hover {
  transform: scale(1.04) !important;
}

/* Swiper pagination */
body.light-mode .reviewers-authors-swiper .swiper-pagination-bullet {
  background: #c7d2fe !important;
  opacity: 1 !important;
}

body.light-mode .reviewers-authors-swiper .swiper-pagination-bullet-active {
  background: #667eea !important;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  body.light-mode .modern-slider-card {
    flex-direction: column !important;
    padding: 24px 16px !important;
    gap: 18px !important;
    min-height: 180px !important;
  }

  body.light-mode .modern-slider-avatar img {
    width: 80px !important;
    height: 80px !important;
  }

  body.light-mode .modern-slider-title { font-size: 1.3rem !important; }
  body.light-mode .modern-slider-desc { font-size: 1rem !important; }
  body.light-mode .modern-slider-btn { font-size: 1rem !important; padding: 10px 24px !important; }
}

@media (max-width: 767.98px) {
  body.light-mode .reviewers-authors-modern-section { padding: 18px 0 8px 0 !important; }
  body.light-mode .modern-slider-card {
    flex-direction: column !important;
    align-items: center !important;
    border-radius: 16px !important;
    padding: 16px 6px 20px 6px !important;
    min-height: 120px !important;
    max-width: 95vw !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  body.light-mode .modern-slider-avatar { margin-bottom: 12px !important; width: 100% !important; position: relative !important; }
  body.light-mode .modern-slider-avatar img { width: 64px !important; height: 64px !important; margin: 0 auto !important; display: block !important; }

  body.light-mode .modern-badge {
    font-size: 0.85rem !important;
    padding: 4px 10px 4px 8px !important;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    position: absolute !important;
    white-space: nowrap !important;
    max-width: 90vw !important;
    text-align: center !important;
  }

  body.light-mode .modern-slider-content { padding-left: 0 !important; align-items: center !important; width: 100% !important; margin-bottom: 14px !important; }
  body.light-mode .modern-slider-title { font-size: 1.15rem !important; margin-bottom: 8px !important; width: 100% !important; }
  body.light-mode .modern-slider-desc { font-size: 0.97rem !important; margin-bottom: 16px !important; width: 100% !important; }
  body.light-mode .modern-slider-btn { width: 100% !important; max-width: 320px !important; margin: 0 auto !important; display: block !important; }
}

/* (Removed duplicate responsive block – using base-aligned rules above) */


/* ==========================
   Info Cards Section
   ========================== */
body.light-mode .tt-info-card {
  /* Match base layout; color only differs */
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 24px 0 rgba(0, 72, 255, 0.07) !important;
  padding: 36px 32px 28px 32px !important;
  margin-bottom: 24px !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
  border: 1.5px solid rgba(0, 0, 0, 0.06) !important;
  min-height: 320px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  position: relative !important;
}

body.light-mode .tt-info-card.author { border-left: 6px solid #0048FF !important; }
body.light-mode .tt-info-card.reviewer { border-left: 6px solid #FF9046 !important; }

body.light-mode .tt-info-card-header { display: flex !important; align-items: center !important; gap: 16px !important; margin-bottom: 18px !important; }

body.light-mode .tt-info-card-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0048FF 0%, #FE52FB 100%) !important;
  color: #fff !important;
  font-size: 2rem !important;
  box-shadow: 0 2px 8px 0 rgba(0, 72, 255, 0.10) !important;
}

body.light-mode .tt-info-card-title { font-size: 1.5rem !important; font-weight: 700 !important; color: #2d3748 !important; margin: 0 !important; letter-spacing: 0.5px !important; }

body.light-mode .tt-info-card-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.light-mode .tt-info-card-list li { font-size: 1.08rem !important; color: #4a5568 !important; margin-bottom: 16px !important; display: flex !important; align-items: center !important; gap: 12px !important; font-weight: 500 !important; letter-spacing: 0.1px !important; }

body.light-mode .tt-info-card-list-icon {
  font-size: 18px !important;
  margin-right: 10px !important;
}

/* ==========================
   Info Cards Section (Responsive)
   ========================== */

/* Tablets (992px and below) */
@media (max-width: 991.98px) {
  body.light-mode .tt-info-cards-row { flex-direction: column !important; gap: 18px !important; }
  body.light-mode .tt-info-card { min-height: 0 !important; padding: 28px 16px 20px 16px !important; }
}

/* Mobiles (768px and below) */
@media (max-width: 767.98px) {
  body.light-mode .tt-info-cards-section { border-radius: 12px !important; margin-bottom: 24px !important; }
  body.light-mode .tt-info-card { border-radius: 10px !important; padding: 18px 8px 14px 8px !important; margin-bottom: 12px !important; text-align: center !important; }
  body.light-mode .tt-info-card-header { 
    flex-direction: row !important; 
    align-items: center !important; 
    gap: 10px !important; 
    margin-bottom: 12px !important; 
  }
  body.light-mode .tt-info-card-title { font-size: 1.1rem !important; }
  body.light-mode .tt-info-card-list li { 
    font-size: 0.98rem !important; 
    margin-bottom: 10px !important; 
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px !important;
  }
  body.light-mode .tt-info-card-list-icon { font-size: 1.1em !important; margin-right: 4px !important; }
}

/* Small phones (576px and below) */
@media (max-width: 575.98px) {
  body.light-mode .tt-info-card {
    padding: 16px !important;
    border-radius: 14px !important;
  }

  body.light-mode .tt-info-card-title {
    font-size: 1rem !important;
  }

  body.light-mode .tt-info-card-list li {
    font-size: 0.85rem !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: 0.1px !important;
  }

  body.light-mode .tt-info-card-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }
}


/* ================================
     Congratulations Section
  ================================ */
body.light-mode .tt-congrats-section { padding-top: 0 !important; padding-bottom: 48px !important; margin-bottom: 48px !important; }

body.light-mode .tt-congrats-header { display: flex !important; align-items: center !important; gap: 18px !important; margin-bottom: 32px !important; }

body.light-mode .tt-congrats-header .tt-2-section-title {
  font-family: var(--font-barlow) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--black) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;

}

body.light-mode .tt-congrats-icon { font-size: 2.5rem !important; color: #FF9046 !important; background: linear-gradient(135deg, #0048FF 0%, #FE52FB 100%) !important; border-radius: 50% !important; width: 56px !important; height: 56px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 12px 0 rgba(0, 72, 255, 0.10) !important; }

/* Congrats Boxes */
body.light-mode .tt-congrats-box { background: #211e2a0f !important; border-radius: 18px !important; box-shadow: 0 4px 24px 0 rgba(0, 72, 255, 0.07) !important; padding: 32px 24px 28px 24px !important; margin-bottom: 24px !important; transition: box-shadow 0.2s, transform 0.2s !important; border: 1.5px solid rgba(0,0,0,0.06) !important; min-height: 340px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; position: relative !important; }

body.light-mode .tt-congrats-box.reviewer { border-top: none !important; }
body.light-mode .tt-congrats-box.author { border-top: none !important; }

body.light-mode .tt-congrats-box:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 28px rgba(0, 72, 255, 0.15) !important;
}

/* Box Header */
body.light-mode .tt-congrats-box-header {
  margin-bottom: 20px !important;
}

body.light-mode .tt-congrats-badge { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: linear-gradient(90deg, #FF9046 0%, #FE52FB 100%) !important; color: #fff !important; font-size: 1.1rem !important; font-weight: 700 !important; border-radius: 16px !important; padding: 6px 18px 6px 12px !important; box-shadow: 0 2px 8px 0 rgba(254, 82, 251, 0.10) !important; border: 2px solid #fff2 !important; margin-bottom: 8px !important; }

body.light-mode .tt-congrats-badge.author {
  background: var(--ttPurple) !important;
}

/* Description */
body.light-mode .tt-congrats-desc { color: #4a5568 !important; font-size: 1.08rem !important; margin-bottom: 18px !important; font-weight: 500 !important; letter-spacing: 0.1px !important; min-height: 100px !important; }

/* Profiles inside Swiper */
body.light-mode .tt-congrats-profile { background: rgba(255, 255, 255, 0.07) !important; border-radius: 16px !important; box-shadow: 0 2px 12px 0 rgba(0, 72, 255, 0.08) !important; padding: 18px 16px 14px 16px !important; display: flex !important; align-items: center !important; gap: 18px !important; position: relative !important; transition: box-shadow 0.2s, transform 0.2s !important; cursor: pointer !important; min-width: 220px !important; max-width: 320px !important; min-height: 100px !important; margin: 0 auto !important; }

body.light-mode .tt-congrats-profile:hover {
  border-color: var(--ttBlue) !important;
  box-shadow: 0 8px 20px rgba(0, 72, 255, 0.15) !important;
}

body.light-mode .tt-congrats-profile-img {
  flex-shrink: 0 !important;
  margin-right: 15px !important;
}

body.light-mode .tt-congrats-profile-img { width: 56px !important; height: 56px !important; border-radius: 50% !important; overflow: hidden !important; border: 3px solid #0048FF !important; box-shadow: 0 2px 8px #0048FF22 !important; background: #fff !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; }
body.light-mode .tt-congrats-box.reviewer .tt-congrats-profile-img { border-color: #FF9046 !important; }

body.light-mode .tt-congrats-profile-info {
  flex-grow: 1 !important;
}

body.light-mode .tt-congrats-profile-name { font-size: 1.13rem !important; font-weight: 700 !important; color: #2d3748 !important; margin-bottom: 2px !important; }

body.light-mode .tt-congrats-profile-meta { font-size: 0.98rem !important; color: #718096 !important; font-weight: 500 !important; }

/* Medal Icons */
body.light-mode .tt-congrats-medal { position: absolute !important; right: 12px !important; top: 12px !important; font-size: 1.5rem !important; color: #FF9046 !important; filter: drop-shadow(0 0 6px #FF9046aa) !important; }
body.light-mode .tt-congrats-medal.silver { color: #bfc7d5 !important; filter: drop-shadow(0 0 6px #bfc7d5cc) !important; }
body.light-mode .tt-congrats-medal.bronze { color: #c97c3b !important; filter: drop-shadow(0 0 6px #c97c3bcc) !important; }

body.light-mode .tt-congrats-medal.silver {
  color: #c0c0c0 !important;
}

body.light-mode .tt-congrats-medal.bronze {
  color: #cd7f32 !important;
}

/* Swiper Pagination */
body.light-mode .tt-congrats-swiper .swiper-pagination-bullet {
  background: var(--ttGray2) !important;
  opacity: 0.6 !important;
}

body.light-mode .tt-congrats-swiper .swiper-pagination-bullet-active {
  background: var(--ttBlue) !important;
  opacity: 1 !important;
}


/* FAQ Section */
/* FAQ Section */
body.light-mode .tt-faq-section {
  padding-top: 0 !important;
  padding-bottom: 48px !important;
  margin-bottom: 48px !important;
}

/* Add extra space below FAQ if followed by a colored section */
body.light-mode .tt-faq-section+.tt-congrats-section,
body.light-mode .tt-faq-section+.tt-2-top-10,
body.light-mode .tt-faq-section+.tt-2-popular-shows {
  margin-top: 48px !important;
}

body.light-mode .tt-faq-accordion {
  max-width: 700px !important;
  margin: 0 auto !important;
}

body.light-mode .sa-single-accordion-item {
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 14px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 72, 255, 0.05) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.06) !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateY(0) !important;
}

body.light-mode .sa-single-accordion-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 20px 0 rgba(0, 72, 255, 0.08) !important;
}

body.light-mode .sa-single-accordion-item.open {
  box-shadow: 0 8px 32px 0 rgba(0, 72, 255, 0.15) !important;
  border-color: #0048FF40 !important;
  transform: translateY(-4px) !important;
}

/* ================================
   Congratulations Section (Responsive)
  ================================ */

/* Tablet screens (≤991px) */
@media (max-width: 991.98px) {
  body.light-mode .tt-congrats-section { border-radius: 14px !important; margin-bottom: 28px !important; padding-top: 18px !important; padding-bottom: 18px !important; }
  body.light-mode .tt-congrats-box { min-height: 0 !important; padding: 18px 8px 14px 8px !important; }
  body.light-mode .tt-congrats-profile { min-width: 180px !important; max-width: 100% !important; padding: 12px 8px 10px 8px !important; }
  body.light-mode .tt-congrats-profile-img { width: 44px !important; height: 44px !important; }
  body.light-mode .tt-congrats-profile-name { font-size: 1rem !important; }
  body.light-mode .tt-congrats-profile-meta { font-size: 0.9rem !important; }
  body.light-mode .tt-congrats-medal { font-size: 1.1rem !important; right: 12px !important; top: 12px !important; margin-top: 5px !important; margin-right: 5px !important; }
}

/* Mobile screens (≤767px) */
@media (max-width: 767.98px) {
  body.light-mode .tt-congrats-header { gap: 10px !important; margin-bottom: 18px !important; }
  body.light-mode .tt-congrats-section { border-radius: 8px !important; margin-bottom: 16px !important; padding-top: 8px !important; padding-bottom: 8px !important; }
  body.light-mode .tt-congrats-box { border-radius: 8px !important; padding: 10px 2px 8px 2px !important; margin-bottom: 8px !important; text-align: center !important; }
  body.light-mode .tt-congrats-desc { text-align: center !important; font-size: 0.98rem !important; margin-bottom: 10px !important; }
  body.light-mode .tt-congrats-profile { min-width: 140px !important; padding: 8px 2px 6px 2px !important; gap: 8px !important; padding: 15px !important; flex-direction: column !important; }
  body.light-mode .tt-congrats-profile-img { width: 32px !important; height: 32px !important; margin: 0 0 12px !important; }
}

/* Small phones (≤575px) */
@media (max-width: 575.98px) {
  body.light-mode .tt-congrats-section {
    padding: 40px 0 !important;
  }

  body.light-mode .tt-congrats-header .tt-2-section-title {
    font-size: 1.3rem !important;
    gap: 6px !important;
  }

  body.light-mode .tt-congrats-box {
    padding: 16px !important;
    border-radius: 14px !important;
  }

  body.light-mode .tt-congrats-badge {
    font-size: 0.8rem !important;
    padding: 4px 10px !important;
  }

  body.light-mode .tt-congrats-profile-img img {
    width: 48px !important;
    height: 48px !important;
  }

  body.light-mode .tt-congrats-profile-name {
    font-size: 0.9rem !important;
  }

  body.light-mode .tt-congrats-profile-meta {
    font-size: 0.8rem !important;
  }
}

/* ================================
   FAQ Section (Responsive)
  ================================ */

/* Tablet screens */
@media (max-width: 991.98px) {
  body.light-mode .tt-faq-accordion {
    max-width: 90% !important;
  }
}

/* Mobile screens */
@media (max-width: 767.98px) {
  body.light-mode .tt-faq-section {
    padding-bottom: 36px !important;
    margin-bottom: 36px !important;
  }

  body.light-mode .tt-faq-accordion {
    max-width: 100% !important;
  }

  body.light-mode .sa-single-accordion-item {
    margin-bottom: 14px !important;
  }
}

/* Small phones */
@media (max-width: 575.98px) {
  body.light-mode .sa-single-accordion-item {
    border-radius: 10px !important;
    padding: 12px !important;
  }
}


/* ==============================
   FAQ Section
  ============================ */
body.light-mode .sa-single-accordion-item .tt-faq-question {
  cursor: pointer;
  padding: 22px 28px 22px 22px !important;
  font-size: 1.13rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  background: none !important;
}

/* FAQ Question hover effect */
body.light-mode .sa-single-accordion-item .tt-faq-question::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 144, 70, 0.1), transparent) !important;
  transition: left 0.6s ease !important;
}

body.light-mode .sa-single-accordion-item .tt-faq-question:hover::before {
  left: 100% !important;
}

/* FAQ Question when open: gradient background, white text */

body.light-mode .sa-single-accordion-item.open .tt-faq-question,
body.light-mode .sa-single-accordion-item.open .tt-faq-q {
  background: linear-gradient(90deg, #0048FF 60%, #FE52FB 100%) !important;
  color: var(--light-text-inverse) !important;
  box-shadow: 0 4px 16px 0 rgba(0, 72, 255, 0.12) !important;
  border-radius: 14px 14px 0 0 !important;
  transform: scale(1.02) !important;
}

/* FAQ Icon: always orange */
body.light-mode .sa-single-accordion-item .tt-faq-icon {
  font-size: 1.5rem !important;
  color: #FF9046 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 10px !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: rotate(0deg) !important;
  text-shadow: none !important;
}

/* FAQ Icon when open: rotate, keep orange */
body.light-mode .sa-single-accordion-item.open .tt-faq-icon {
  transform: rotate(180deg) !important;
  color: #FF9046 !important;
  text-shadow: 0 0 8px rgba(255, 144, 70, 0.4) !important;
}

body.light-mode .tt-faq-q {
  flex: 1 !important;

}

/* FAQ Answer */
body.light-mode .tt-faq-answer {
  font-size: 1.05rem !important;
  color: #e0e0e0 !important;
  line-height: 1.6 !important;
  max-height: 0 !important;
  padding: 0 28px 0 54px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateY(-10px) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid transparent !important;
}

body.light-mode .sa-single-accordion-item.open .tt-faq-answer {
  max-height: 200px !important;
  min-height: 60px !important;
  padding: 20px 28px 20px 54px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--light-text-primary) !important;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  body.light-mode .tt-faq-section {
    padding: 24px 0 16px 0;
  }

  body.light-mode .tt-faq-accordion {
    max-width: 98vw;
  }

  body.light-mode .sa-single-accordion-item .tt-faq-question {
    font-size: 1.05rem;
    padding: 16px 16px 16px 14px;
  }

  body.light-mode .tt-faq-answer {
    font-size: 0.98rem;
    padding: 0 16px 0 36px;
  }

  body.light-mode .sa-single-accordion-item.open .tt-faq-answer {
    padding: 16px 16px 16px 36px;
  }
}

@media (max-width: 767.98px) {
  body.light-mode .tt-faq-section {
    padding: 12px 8px 8px 8px;
    border-radius: 12px;
    margin-bottom: 24px;
  }

  body.light-mode .tt-faq-accordion {
    max-width: 100vw;
    padding: 0 2vw;
  }

  body.light-mode .sa-single-accordion-item .tt-faq-question {
    font-size: 0.99rem;
    padding: 12px 8px 12px 8px;
  }

  body.light-mode .tt-faq-answer {
    font-size: 0.93rem;
    padding: 8px 8px 8px 24px;
  }

  body.light-mode .sa-single-accordion-item.open .tt-faq-answer {
    padding: 12px 8px 12px 24px;
  }
}


/* Sidebar - Light Theme */
body.light-mode .tt-sidebar {
  background: var(--light-bg-primary, #fff) !important;
  color: var(--light-text-primary) !important;
  border: 1px solid var(--light-border-muted, rgba(0, 0, 0, 0.05)) !important;
  box-shadow: 0 2px 12px var(--light-shadow-md, rgba(0, 0, 0, 0.08)) !important;
}

body.light-mode .tt-sidebar__nav a {
  position: relative;
  z-index: 1;
  
  /* display: flex !important;
  align-items: center !important;
  padding: 14px !important; */
  color: var(--light-text-primary) !important;
  background: var(--light-accent-300) !important;
  border: 1px solid var(--light-brand-primary) !important;
  border-radius: 8px !important;
  /* margin-bottom: 2px !important; */
  /* font-weight: 500 !important;
  transition: background 0.2s, color 0.2s !important; */
}

body.light-mode .tt-sidebar__nav a .tt-sidebar__icon {
  color: var(--light-bg-primary) !important;
  font-size: 20px !important;
  margin-right: 12px !important;
  transition: color 0.2s !important;
}

body.light-mode .tt-sidebar__nav a:hover,
body.light-mode .tt-sidebar__nav a.active {
  background: var(--light-gradient-primary, linear-gradient(135deg, #0048FF 0%, #FE52FB 100%)) !important;
  color: var(--light-text-inverse) !important;
}

body.light-mode .tt-sidebar__nav a:hover .tt-sidebar__icon,
body.light-mode .tt-sidebar__nav a.active .tt-sidebar__icon {
  color: var(--light-text-inverse) !important;
}

body.light-mode .tt-sidebar__nav a.active,
body.light-mode .tt-sidebar__nav a.active span,
body.light-mode .tt-sidebar__nav a.active i {
  color: #fff !important;
}

/* Optional: Make sure icons are always visible */
body.light-mode .tt-sidebar__nav a .tt-sidebar__icon {
  filter: none !important;
  opacity: 1 !important;
}

/* ==========================
   BREADCRUMBS
   ========================== */
/* Breadcrumb - Light Theme */
body.light-mode .tt-breadcrumb,
body.light-mode .breadcrumb,
body.light-mode .tt-2-breadcrumb {
  background: #f9f9ff !important;
  padding: 15px 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.06) !important;
  margin-bottom: 24px !important;
}

body.light-mode .tt-breadcrumb-title,
body.light-mode .breadcrumb-title,
body.light-mode .tt-2-breadcrumb-title {
  color: #222 !important;
  font-weight: 900 !important;
  font-size: 3rem !important;
  letter-spacing: 0.04em !important;
}

body.light-mode .tt-breadcrumb-nav a,
body.light-mode .breadcrumb-nav a,
body.light-mode .tt-2-breadcrumb-nav a {
  color: black !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  transition: color 0.2s !important;
}

body.light-mode .tt-breadcrumb-nav a:hover,
body.light-mode .breadcrumb-nav a:hover,
body.light-mode .tt-2-breadcrumb-nav a:hover {
  text-decoration: underline !important;

}

body.light-mode .tt-breadcrumb-nav .current-page,
body.light-mode .breadcrumb-nav .current-page,
body.light-mode .tt-2-breadcrumb-nav .current-page {
  color: black !important;
  font-weight: 700 !important;
}

body.light-mode .tt-breadcrumb-separator,
body.light-mode .breadcrumb-separator,
body.light-mode .tt-2-breadcrumb-separator {
  color: #bdbdbd !important;
  margin: 0 8px !important;
  font-size: 1rem !important;
}

/* ==========================
   About Us Page
   ========================== */
body.light-mode {
  background: #ffffff !important;
  color: #222 !important;
}

/* Highlight Our Story */
body.light-mode .highlight-card {
  background: linear-gradient(90deg, #eeddfc 0%, #f6e4fc 100%) !important;
  color: black !important;
  font-size: 1.5em !important;
  line-height: 1.4 !important;
  padding: 40px 15px !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 18px rgba(128, 52, 190, 0.486) !important;
  text-align: center !important;
  animation: fadeInUp 1s ease !important;
}

body.light-mode p,
body.light-mode span,
body.light-mode div {
  color: black !important;
  line-height: 1.6 !important;
}

body.light-mode .tt-inner-about-title {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  color: black !important;
  margin-bottom: 24px !important;
  letter-spacing: 0.02em !important;
}

body.light-mode .highlight-text {
  font-weight: bold !important;
  background: linear-gradient(45deg, #4c2692, #e14eca) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
  animation: pulseHighlight 2s infinite !important;
}

@keyframes pulseHighlight {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
  }
}

/* ==========================
   About Us Page - Responsive Add-ons
   ========================== */

/* Large screens (desktops >1400px) */
@media (min-width: 1400px) {
  body.light-mode .tt-inner-about-title {
    font-size: 3rem !important;
  }

  body.light-mode .highlight-card {
    max-width: 1100px !important;
    margin: 0 auto !important;
    font-size: 1.6em !important;
    padding: 50px 40px !important;
  }
}

/* Laptops (992px – 1399px) */
@media (max-width: 1399px) and (min-width: 992px) {
  body.light-mode .tt-inner-about-title {
    font-size: 2.5rem !important;
  }

  body.light-mode .highlight-card {
    font-size: 1.4em !important;
    padding: 40px 25px !important;
  }
}

/* Tablets (768px – 991px) */
@media (max-width: 991px) and (min-width: 768px) {
  body.light-mode .tt-inner-about-title {
    font-size: 2rem !important;
    text-align: center !important;
  }

  body.light-mode .highlight-card {
    font-size: 1.3em !important;
    padding: 30px 20px !important;
  }
}

/* Mobiles (576px – 767px) */
@media (max-width: 767px) and (min-width: 576px) {
  body.light-mode .tt-inner-about-title {
    font-size: 1.8rem !important;
    text-align: center !important;
  }

  body.light-mode .highlight-card {
    font-size: 1.2em !important;
    padding: 25px 18px !important;
  }
}

/* Small Mobiles (<576px) */
@media (max-width: 575px) {
  body.light-mode .tt-inner-about-title {
    font-size: 1.5rem !important;
    text-align: center !important;
  }

  body.light-mode .highlight-card {
    font-size: 1em !important;
    padding: 20px 15px !important;
  }
}

/* ==========================
  Founder Cards
   ========================== */
body.light-mode .founder-card {
  background: linear-gradient(120deg, #f9f9ff 70%, #e9d5ff 100%) !important;
  border: 2px solid #e9d5ff !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.09) !important;
  padding: 32px 24px !important;
  margin-bottom: 36px !important;
  position: relative !important;
  transition: box-shadow 0.3s, transform 0.3s !important;
  overflow: hidden !important;
}

body.light-mode .founder-card::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #0048FF 0%, #FE52FB 100%);
  border-radius: 18px 18px 0 0;
  opacity: 0.18;
  pointer-events: none;
}

body.light-mode .founder-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 16px 40px rgba(102, 126, 234, 0.16) !important;
  border-color: #FE52FB !important;
}

body.light-mode .founder-card h5 {
  color: #7e3ff2 !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.02em !important;
}

body.light-mode .founder-card p {
  color: #444 !important;
  font-size: 1.08rem !important;
  line-height: 1.7 !important;
  margin-bottom: 0 !important;
}

body.light-mode .founder-img {
  width: 120px !important;
  height: 120px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 4px solid #fff !important;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.12) !important;
  position: relative !important;
  margin-bottom: 18px !important;
  background: #f3e8ff !important;
}

body.light-mode .founder-img::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0048FF, #FE52FB);
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
}

/* Responsive tweaks */
@media (max-width: 767.98px) {
  body.light-mode .founder-card {
    padding: 18px 10px !important;
    border-radius: 14px !important;
  }

  body.light-mode .founder-img {
    width: 80px !important;
    height: 80px !important;
  }
}

/* ==========================
   Section Cards
   ========================== */
body.light-mode .section-card {
  background: linear-gradient(90deg, #d2dcf5 0%, #f8b9f7 100%) !important;
  border-left: 6px solid #0048FF !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(11, 35, 143, 0.048) !important;
  padding: 32px 28px !important;
  margin-bottom: 36px !important;
  position: relative !important;
  transition: box-shadow 0.3s, transform 0.3s !important;
  overflow: hidden !important;
}

body.light-mode .section-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 16px 40px rgba(102, 126, 234, 0.16) !important;
  border-left: 6px solid #FE52FB !important;
}

body.light-mode .section-card h2,
body.light-mode .section-card h3 {
  color: #222 !important;
  font-weight: 700 !important;
  margin-bottom: 18px !important;
  letter-spacing: 0.02em !important;
}

body.light-mode .section-card p {
  color: #444 !important;
  font-size: 1.08rem !important;
  line-height: 1.7 !important;
}

body.light-mode .top-header-btn {
  background: linear-gradient(90deg, #7e3ff2, #e14eca) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 6px 20px !important;
  transition: opacity 0.3s !important;
}

body.light-mode .top-header-btn:hover {
  opacity: 0.9;
}

/* ==========================
   Breadcrumbs
   ========================== */
body.light-mode .tt-breadcrumb {
  background: #f9f9ff !important;
  padding: 15px 0 !important;
}

body.light-mode .tt-breadcrumb-title {
  color: #222 !important;
}

body.light-mode .tt-breadcrumb-nav a {
  color: #340d7c !important;
}

body.light-mode .tt-breadcrumb-nav a:hover {
  text-decoration: underline !important;
}

body.light-mode .tt-breadcrumb-nav .current-page {
  color: #000 !important;
}

/* ==================
  Upload Video Modal 
  ===================*/
body.light-mode .tt-upload-video-modal {
  width: clamp(300px, 57.8vw, 1100px);
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.9) !important;
  z-index: 100 !important;
  background-color: #ffffff !important;
  border-radius: 30px !important;
  box-shadow: 0px 6px 64px rgba(0, 0, 0, 0.267) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: 0.3s ease !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
}

@media screen and (max-width: 767px) {
  body.light-mode .tt-upload-video-modal {
    width: 90% !important;
  }
}

body.light-mode .tt-upload-video-modal.active {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;

}

body.light-mode .tt-upload-video-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1) !important;
  padding: clamp(15px, 1.05vw, 20px) clamp(20px, 2.1vw, 40px) !important;
}

body.light-mode .tt-upload-video-modal-header .title {
  font-size: clamp(17px, 1.05vw, 20px) !important;
  font-weight: 600 !important;
  color: #5120a1 !important;
}

body.light-mode .tt-upload-video-modal-close {
  width: 32px !important;
  aspect-ratio: 1/1 !important;
  background-color: rgba(255, 0, 0, 0.1) !important;
  color: #d32f2f !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
}

body.light-mode .tt-upload-video-modal-close:hover {
  background-color: #d32f2f !important;
  color: #fff !important;
}

body.light-mode .tt-upload-video-modal-body {
  padding: 0 clamp(20px, 2.1vw, 40px) !important;
  text-align: center !important;
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 20px 30px !important;
}

body.light-mode .ul-btn {
  color: #0048FF !important;
  border: 3px solid transparent !important;
  border-radius: 99px !important;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(120deg, #0048FF, #FE52FB) border-box !important;
  background-clip: padding-box, border-box !important;
  background-origin: border-box !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
}

body.light-mode .ul-btn:hover {
  opacity: 0.9 !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
  background: linear-gradient(135deg, #FE52FB, #5120a1) !important;
  border: none !important;
  border-radius: 99px !important;
  transition: all 0.3s ease !important;
}

/* ---------------------------
   Upload modal form fields
   --------------------------- */
body.light-mode .tt-upload-video-modal .ul-contact-form .form-group input[type="text"],
body.light-mode .tt-upload-video-modal .ul-contact-form .form-group input[type="email"],
body.light-mode .tt-upload-video-modal .ul-contact-form .form-group input[type="file"],
body.light-mode .tt-upload-video-modal .ul-contact-form .form-group input[type="number"],
body.light-mode .tt-upload-video-modal .ul-contact-form .form-group textarea,
body.light-mode .tt-upload-video-modal .tt-single-select-display,
body.light-mode .tt-upload-video-modal .tt-multi-select-display {
  background: var(--light-accent-200) !important;
  border: 1px solid #decdf5 !important;
  border-radius: 3px !important;
  color: #222 !important;
  font-size: 14px !important;
  transition: all 0.25s ease !important;
}

/* make file input look consistent (if browser allows) */
body.light-mode .tt-upload-video-modal .ul-contact-form .form-group input[type="file"].custom-file-input {
  padding: 10px 12px !important;
  background: var(--light-accent-200) !important;
  border-radius: 8px !important;
  border: 1px solid var(--light-accent-300) !important;
}

/* focus state */
body.light-mode .tt-upload-video-modal .ul-contact-form .form-group input:focus,
body.light-mode .tt-upload-video-modal .ul-contact-form .form-group textarea:focus,
body.light-mode .tt-upload-video-modal .tt-single-select-display:focus {
  border-color: transparent !important;
  outline: none !important;
  background: #fff !important;
  box-shadow:
    0 0 0 3px #fff, 0 0 0 5px rgb(82, 43, 190),
    0 0 12px rgba(254, 82, 251, 0.514) !important;
}


/* custom single-select dropdown container */
body.light-mode .tt-upload-video-modal .tt-single-select-container,
body.light-mode .tt-upload-video-modal .tt-multi-select-container {
  border-radius: 10px !important;
  border: 1px solid #ecebf8 !important;
  background: #ffffff !important;
  padding: 4px !important;
}

/* display (clickable area) */
body.light-mode .tt-upload-video-modal .tt-single-select-display,
body.light-mode .tt-upload-video-modal .tt-multi-select-display {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  cursor: pointer !important;
  padding: 10px 12px !important;
}

/* dropdown list */
body.light-mode .tt-upload-video-modal .tt-single-select-dropdown,
body.light-mode .tt-upload-video-modal .tt-multi-select-dropdown,
body.light-mode .tt-upload-video-modal .tt-single-select-options,
body.light-mode .tt-upload-video-modal .tt-multi-select-options {
  background: #ffffff !important;
  border: 1px solid #f0edf8 !important;
  box-shadow: 0 8px 30px rgba(59, 25, 96, 0.06) !important;
  border-radius: 10px !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  padding: 8px !important;
}

/* option row */
body.light-mode .tt-upload-video-modal .tt-single-select-option,
body.light-mode .tt-upload-video-modal .tt-multi-select-option,
body.light-mode .tt-upload-video-modal label.tt-multi-select-option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: #222 !important;
}

/* option hover */
body.light-mode .tt-upload-video-modal .tt-single-select-option:hover,
body.light-mode .tt-upload-video-modal .tt-multi-select-option:hover,
body.light-mode .tt-upload-video-modal label.tt-multi-select-option:hover {
  background: linear-gradient(90deg, rgba(66, 165, 245, 0.08), rgba(187, 104, 245, 0.06)) !important;
}

/* checkbox custom style: hide native, style span */
body.light-mode .tt-upload-video-modal .tt-multi-select-option input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

body.light-mode .tt-upload-video-modal .tt-multi-select-option .tt-checkbox-custom {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  background: #fff !important;
  border: 1px solid #e8e6f3 !important;
  display: inline-block !important;
  box-sizing: border-box !important;
}

/* checked state for custom checkbox (input + span) */
body.light-mode .tt-upload-video-modal .tt-multi-select-option input[type="checkbox"]:checked+.tt-checkbox-custom {
  background: linear-gradient(120deg, #FE52FB, #7B2FF7) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(123, 47, 247, 0.18) !important;
}

/* option text spacing */
body.light-mode .tt-upload-video-modal .tt-multi-select-option .tt-option-text,
body.light-mode .tt-upload-video-modal .tt-single-select-option .tt-option-text {
  color: #2b2b2b !important;
  font-size: 14px !important;
}

/* small search fields inside dropdown */
body.light-mode .tt-upload-video-modal .tt-single-select-search input,
body.light-mode .tt-upload-video-modal .tt-multi-select-search input {
  width: 100% !important;
  padding: 8px 10px !important;
  border: 1px solid #eee !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  box-sizing: border-box !important;
}

/* style textarea specifically */
body.light-mode .tt-upload-video-modal .ul-contact-form textarea {
  min-height: 140px !important;
  resize: vertical !important;
}

/* custom scrollbar for the modal body */
body.light-mode .tt-upload-video-modal .tt-upload-video-modal-body::-webkit-scrollbar {
  width: 10px !important;
}

body.light-mode .tt-upload-video-modal .tt-upload-video-modal-body::-webkit-scrollbar-track {
  background: transparent !important;
}

body.light-mode .tt-upload-video-modal .tt-upload-video-modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7B2FF7, #FE52FB) !important;
  border-radius: 10px !important;
  border: 2px solid #fff !important;
}

/* increase specificity for stubborn overrides (last resort) */
body.light-mode .tt-upload-video-modal .ul-contact-form .form-group input[type="text"],
body.light-mode .tt-upload-video-modal .ul-contact-form .form-group textarea {
  border: 1px solid #efeefe !important;
}



/* ==========================
   Profile
   ========================== */
body.light-mode .tt-channel-customize-form input,
body.light-mode .tt-channel-customize-form textarea,
body.light-mode .tt-channel-customize-form select {
  background: linear-gradient(120deg, #eddefd 0%, #ffe0fd 100%);
  border: 1px solid var(--light-primary-300);
  color: var(--light-text-primary);
}

body.light-mode.tt-channel-customize-form label {
  color: var(--light-text-secondary);
}

body.light-mode .tt-channel-customize-form input:focus,
body.light-mode .tt-channel-customize-form textarea:focus,
body.light-mode .tt-channel-customize-form select:focus {
  border: 3px solid var(--light-brand-secondary);
}

/* body.light-mode .tt-channel-customize-form button {
  background: linear-gradient(90deg, #0048FF 0%, #FE52FB 100%);
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 25px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 72, 255, 0.3);
  transition: opacity 0.3s, transform 0.2s;
} */

/* ==========================
   Sign In - Light Theme
   ========================== */

body.light-mode .tt-login-page {
  padding: 60px 40px !important;
  min-height: calc(100vh - 200px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.light-mode .tt-login {
  background: linear-gradient(120deg, #fad4f8, #e4d4f7) !important;
  padding: 10px 30px !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.12) !important;
  max-width: 480px !important;
  width: 100% !important;
}

/* Title and Subtitle */
body.light-mode .tt-login__title {
  color: #1e3a8a !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

body.light-mode .tt-login__subtitle {
  color: #64748b !important;
  font-size: 14px !important;
}

/* Input Fields */
body.light-mode .tt-login-form input {
  width: 100% !important;
  padding: 12px 14px !important;
  /* border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important; */
  margin-bottom: 10px !important;
  margin-top: 10px !important;
  outline: none !important;
  transition: border 0.3s, box-shadow 0.3s !important;
}

/* Submit Button */
body.light-mode .tt-login-form__submit-btn {
  background: linear-gradient(90deg, #2563eb, #f63bce) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 25px !important;
  padding: 12px 20px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3) !important;
  transition: transform 0.2s, opacity 0.3s !important;
}

body.light-mode .tt-login-form__submit-btn:hover {
  opacity: 0.95 !important;
  transform: translateY(-2px) !important;
}

/* Keep Stay Signed in and Forgot Password aligned */
body.light-mode .sub-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 18px !important;
}

/* Wrap checkbox + label in one line */
body.light-mode .sub-actions div {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

/* Style checkbox */
body.light-mode .sub-actions input[type="checkbox"] {
  margin: 0 !important;
  vertical-align: middle !important;
}

/* Style label */
body.light-mode .sub-actions label {
  margin: 0 !important;
  font-size: 14px !important;
  color: #1e40af !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

/* Forgot Password button styled like a link */
body.light-mode .sub-actions button {
  background: none !important;
  border: none !important;
  color: #2563eb !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: color 0.3s !important;
}

body.light-mode .sub-actions button:hover {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
}

/* Not a member? text styling */
body.light-mode .other-login-options__title {
  text-align: center !important;
  margin: 20px 0 !important;
}

body.light-mode .other-login-options__title span {
  display: inline-block !important;
  background: linear-gradient(90deg, #dbeafe, #f9f9ff) !important;
  color: #1e3a8a !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15) !important;
}

/* ==========================
   Sign Up - Light Theme
   ========================== */
/*body.light-mode .tt-signup-form {
  background: #f9f9ff !important;
  padding: 30px !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05) !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

body.light-mode .tt-signup-form__title {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #222 !important;
  text-align: center !important;
  margin-bottom: 12px !important;
  font-family: "Barlow", "Poppins", sans-serif !important;
}

body.light-mode .tt-signup-form__desc {
  color: #444 !important;
  font-size: 1.08rem !important;
  text-align: center !important;
  margin-bottom: 18px !important;
}

body.light-mode .tt-signup-form__input {
  background: #fff !important;
  border: 1.5px solid #e9d5ff !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 1rem !important;
  color: #222 !important;
  margin-bottom: 10px !important;
  transition: border-color 0.2s !important;
}

body.light-mode .tt-signup-form__input:focus {
  border-color: #7e3ff2 !important;
  outline: none !important;
}

body.light-mode .tt-signup-form__submit-btn {
  background: linear-gradient(90deg, #7e3ff2, #e14eca) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.18) !important;
  cursor: pointer !important;
  transition: opacity 0.3s, box-shadow 0.2s !important;
}

body.light-mode .tt-signup-form__submit-btn:hover {
  opacity: 0.92 !important;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.22) !important;
}

body.light-mode .tt-signup-form__switch {
  text-align: center !important;
  margin-top: 10px !important;
  font-size: 0.98rem !important;
  color: #7e3ff2 !important;
}

body.light-mode .tt-signup-form__switch a {
  color: #e14eca !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
  transition: color 0.2s !important;
}

body.light-mode .tt-signup-form__switch a:hover {
  color: #0048FF !important;
}

body.light-mode .tt-signup-form__badge {
  display: inline-block !important;
  background: linear-gradient(90deg, #0048FF 0%, #FE52FB 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 6px 16px !important;
  border-radius: 16px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.12) !important;
}

body.light-mode .tt-signup-form__badge.reviewer {
  background: linear-gradient(90deg, #7e3ff2 0%, #e14eca 100%) !important;
}

body.light-mode .tt-signup-form__badge.author {
  background: linear-gradient(90deg, #0048FF 0%, #FE52FB 100%) !important;
}

@media (max-width: 767.98px) {
  body.light-mode .tt-signup-form {
    padding: 16px 8px !important;
    border-radius: 8px !important;
    max-width: 98vw !important;
  }

  body.light-mode .tt-signup-form__title {
    font-size: 1.3rem !important;
  }
} */


/* ==========================
   Magazines
   ========================== */
body.light-mode .tt-magazine-card {
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.3s !important;
}

/* ==========================
   Book List - Light Theme
   ========================== */
body.light-mode .book-list-container {
  background: var(--light-bg-secondary, #fafbfc) !important;
  padding: 40px 0 !important;
  min-height: 100vh !important;
}

body.light-mode .book-list-title {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  color: var(--light-text-primary, #2d3748) !important;
  margin-bottom: 32px !important;
  text-align: center !important;
  font-family: "Barlow", "Poppins", sans-serif !important;
}

body.light-mode .book-list-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 32px !important;
  margin: 0 auto !important;
  max-width: 1200px !important;
}

body.light-mode .book-card {
  background: var(--light-bg-primary, #fff) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 18px var(--light-shadow-md, rgba(0, 0, 0, 0.08)) !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  border: 1px solid var(--light-border-muted, rgba(0, 0, 0, 0.05)) !important;
}

body.light-mode .book-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 28px var(--light-shadow-lg, rgba(0, 0, 0, 0.12)) !important;
  border: 2px solid #1e097c !important;
}

body.light-mode .book-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--light-text-primary, #2d3748) !important;
  margin-bottom: 8px !important;
}

body.light-mode .book-author {
  font-size: 1rem !important;
  color: var(--light-text-secondary, #4a5568) !important;
  margin-bottom: 14px !important;
  text-align: left !important;
}

/* body.light-mode .book-action-btn {
  background: var(--light-gradient-primary, linear-gradient(135deg, #0048FF 0%, #FE52FB 100%)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  box-shadow: 0 4px 12px var(--light-shadow-brand, rgba(102, 126, 234, 0.3)) !important;
  cursor: pointer !important;
  transition: opacity 0.2s, box-shadow 0.2s !important;
  margin-top: 10px !important;
}

body.light-mode .book-action-btn:hover {
  opacity: 0.92 !important;
  box-shadow: 0 8px 20px var(--light-shadow-brand, rgba(102, 126, 234, 0.3)) !important;
} */

/* Navigation buttons */
body.light-mode .tt-2-top-10-slider-nav button {
  background: linear-gradient(90deg, #0048FF 0%, #FE52FB 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.12) !important;
  cursor: pointer !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  outline: none !important;
}

/*===========================
   Web Series Slider - Light Theme
   ========================== */
body.light-mode .tt-2-web-series-slider .swiper-slide {
  background: linear-gradient(90deg, #e2e2fc 0%, #e0c4ff 100%) !important;
  border: 2px solid #ddd5ff !important;
  border-radius: 30px !important;
  box-shadow: 0 8px 32px rgba(52, 65, 124, 0.09) !important;
  padding: 0 !important;
  margin: 0 12px !important;
  display: flex !important;
  align-items: stretch !important;
  transition: box-shadow 0.3s, border-color 0.3s !important;
  position: relative !important;
  overflow: visible !important;
}

body.light-mode .tt-2-web-series-slider .swiper-slide::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  border-radius: 18px 18px 0 0;
  opacity: 0.18;
  pointer-events: none;
}

/* body.light-mode .tt-2-web-series-slider .swiper-slide:hover {
  box-shadow: 0 8px 18px rgba(73, 52, 190, 0.151) !important;

} */

/* Card content */
body.light-mode .tt-2-web-series-item {
  border-radius: 20px;
  padding: clamp(14px, 1.05vw, 20px);
  display: flex;
  gap: clamp(12px, 1.26vw, 24px);
  align-items: center;
  background: transparent !important;
}

/* Title */
body.light-mode .tt-2-web-series-item-title a {
  color: #7e3ff2 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  transition: color 0.2s !important;
}

body.light-mode .tt-2-web-series-item-title a:hover {
  font-weight: 800 !important;
  color: #1e097c !important;
}

/* Author & Publisher */
body.light-mode .tt-2-web-series-item-txt .book-author,
body.light-mode .tt-2-web-series-item-txt .book-publisher {
  color: #000 !important;
  font-size: 1rem !important;
  margin-bottom: 2px !important;
}

/* Rating */
body.light-mode .tt-2-web-series-item-txt .book-rating {
  color: #7e3ff2 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

/* Button */
body.light-mode .tt-2-web-series-item-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(90deg, #0048FF 0%, #FE52FB 100%) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 5px 14px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
  border: none !important;
  transition: opacity 0.2s, box-shadow 0.2s !important;
}

body.light-mode .tt-2-web-series-item-btn:hover {
  opacity: 0.92 !important;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.18) !important;
}

body.light-mode .tt-2-web-series-item-btn .flaticon-play-button {
  font-size: 1.2rem !important;
  color: #fff !important;
}

/* Image */
body.light-mode .tt-2-web-series-item-img {
  max-width: clamp(173px, 9.25vw, 176px);
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
}

body.light-mode .tt-2-web-series-item-img img {
  object-fit: cover !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.09) !important;
  background: #f3e8ff !important;
  border: 4px solid #fff !important;
  position: relative !important;
}

body.light-mode .tt-2-web-series-item-img img::after {
  content: "" !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #0048FF, #FE52FB) !important;
  z-index: -1 !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

body.light-mode .tt-user-dropdown-toggler {
  color: #3f1386 !important;
  background: #fff !important;
}

body.light-mode .d-xl-inline-block {
  color: #002ec6 !important;
}

/* Apply hover effect only on laptop/desktop screens */
@media (min-width: 992px) {

  body.light-mode .tt-user-dropdown-toggler:hover,
  body.light-mode .tt-header button:hover {
    color: #0048FF !important;
    border: 2px solid transparent !important;
    /* border-radius: 999px !important; */
    background:
      linear-gradient(#ffffff, #ffffff) padding-box,
      linear-gradient(120deg, #0048FF, #FE52FB) border-box !important;
    background-clip: padding-box, border-box !important;
    background-origin: border-box !important;
    font-weight: 700;
  }
}


/* Responsive tweaks */
@media (max-width: 991.98px) {
  body.light-mode .tt-2-web-series-item-img img {
    width: 80px !important;
    height: 120px !important;
  }

  body.light-mode .tt-2-web-series-item {
    gap: 12px !important;
    padding: 10px !important;
  }

  body.light-mode .tt-2-web-series-slider .swiper-slide {
    border-radius: 14px !important;
    margin: 0 6px !important;
  }
}

@media (max-width: 767.98px) {
  body.light-mode .tt-2-web-series-slider {
    padding: 12px 0 !important;
    border-radius: 10px !important;
  }

  body.light-mode .tt-2-web-series-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  body.light-mode .tt-2-web-series-item-img img {
    width: 100px !important;
    height: 140px !important;
    margin-bottom: 8px !important;
  }

  body.light-mode .tt-2-web-series-item-txt {
    gap: 4px !important;
  }

  body.light-mode .tt-2-web-series-slider .swiper-slide {
    border-radius: 10px !important;
    margin: 0 2px !important;
  }
}

/* ==========================
   Books details - Light Theme
   ========================== */
body.light-mode .book-cover-container {
  background: var(--light-bg-primary) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

body.light-mode .book-cover-container:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Enhanced Book Details Content */
body.light-mode .book-details-content {
  background: linear-gradient(135deg,
      rgba(201, 206, 253, 0.85) 0%,
      rgba(227, 212, 251, 0.9) 40%,
      rgba(235, 192, 250, 0.95) 100%) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 8px 32px rgba(172, 95, 246, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

body.light-mode .book-details-content:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 36px rgba(172, 95, 246, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Gradient Title */
body.light-mode .book-details-content .book-title {
  font-size: 2rem !important;
  font-weight: 700 !important;
  background: linear-gradient(90deg, #7c3aed, #fe52fb) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Author Link */
body.light-mode .book-details-content .author-link {
  color: #5a3ae5 !important;
  font-weight: 600 !important;
  transition: color 0.3s ease !important;
}

body.light-mode .book-details-content .author-link:hover {
  color: #fe52fb !important;
}

/* Metadata Labels */
body.light-mode .book-details-content .metadata-label {
  font-weight: 600 !important;
  color: #4a4a4a !important;
}

body.light-mode .book-details-content .metadata-value {
  color: #2c2c2c !important;
}

/* Section Titles */
body.light-mode .book-details-content .section-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  border-left: 4px solid #7c3aed !important;
  padding-left: 10px !important;
  margin-bottom: 12px !important;
  color: #3a2e70 !important;
}

/* Social Buttons */
body.light-mode .book-details-content .btn-outline-primary {
  border: 1.5px solid transparent !important;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #7c3aed, #fe52fb) border-box !important;
  color: #7c3aed !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

body.light-mode .book-details-content .btn-outline-primary:hover {
  background: linear-gradient(90deg, #7c3aed, #fe52fb) ! important;
  color: #fff !important;
}


body.light-mode .book-cover-image {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

body.light-mode .book-cover-wrapper:hover .book-cover-image {
  transform: scale(1.05) !important;
}

/* body.light-mode .book-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.1) 0%, rgba(254, 82, 251, 0.25) 100%) !important;
  opacity: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.4s ease !important;
} */

body.light-mode .book-cover-wrapper:hover .book-overlay {
  opacity: 1 !important;
}

body.light-mode .book-actions {
  display: flex !important;
  gap: 12px !important;
}

body.light-mode .action-btn {
  background: var(--gradient) !important;
  border: none !important;
  border-radius: 50% !important;
  padding: 10px 12px !important;
  color: var(--light-text-inverse) !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important;
}

body.light-mode .action-btn:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25) !important;
}

/* body.light-mode .reviewer-badge {
  background: var(--light-accent-500);
  color: var(--light-text-inverse);
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
} */


/* Reviews Section Container */
body.light-mode .reviews-container {
  background: linear-gradient(135deg,
      rgba(201, 206, 253, 0.85) 0%,
      rgba(227, 212, 251, 0.9) 40%,
      rgba(235, 192, 250, 0.95) 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
}

body.light-mode .reviews-container:hover {
  box-shadow: 0 10px 28px rgba(124, 58, 237, 0.25),
    0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

/* Section Title */
body.light-mode .reviews-container .section-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  background: linear-gradient(90deg, #7c3aed, #fe52fb) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-fill-color: transparent !important;

}

/* Review Items */
body.light-mode .review-item {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(124, 58, 237, 0.1) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body.light-mode .review-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 16px rgba(172, 95, 246, 0.2) !important;
}

/* Reviewer Avatar */
body.light-mode .reviewer-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 2px solid #7c3aed !important;
  margin-right: 12px !important;
}

/* Reviewer Name */
body.light-mode .reviewer-name {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #2c2c2c !important;
}

/* Rating Stars */
body.light-mode .review-rating .stars i {
  color: #ffb400 !important;
  margin-right: 2px !important;
}

/* Review Date */
body.light-mode .review-date {
  font-size: 0.85rem !important;
  color: #666 !important;
  margin-left: 10px !important;
}

/* Review Content */
body.light-mode .review-content p {
  font-size: 0.95rem !important;
  color: #333 !important;
  line-height: 1.5 !important;
}

body.light-mode .reviews-filter .form-select {
  border: 3px solid rgba(124, 58, 237, 0.2) !important;
  padding: 10px 12px !important;
  background: rgba(245, 214, 247, 0.7) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  color: #411d80 !important;
  cursor: pointer !important;
  text-align: center !important;
  font-weight: 600 !important;
}

body.light-mode .reviews-filter .form-select:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.25) !important;
}

/* Review Actions */
body.light-mode .review-actions .btn {
  font-size: 0.85rem !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
}

body.light-mode .review-actions .btn-outline-primary {
  border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #7c3aed, #fe52fb) border-box !important;
  color: #7c3aed !important;
  transition: all 0.3s ease !important;
}

body.light-mode .review-actions .btn-outline-primary:hover {
  background: linear-gradient(90deg, #7c3aed, #fe52fb) !important;
  color: #fff !important;
}

/* Load More Button */
body.light-mode .reviews-container .text-center .btn-outline-primary {
  border-radius: 10px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
}

/* Review Form Card */
body.light-mode .review-form-card {
  background: linear-gradient(135deg,
      rgba(248, 240, 255, 0.85) 0%,
      rgb(246, 231, 247) 100%) !important;
  border: 1px solid rgba(124, 58, 237, 0.39) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.12) !important;
}

body.light-mode .review-form-card .card-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: #3a2e70 !important;
  margin-bottom: 16px !important;
}

body.light-mode .form-label {
  font-weight: 600 !important;
  color: #363636 !important;
  margin-bottom: 6px !important;
}

/* Review Form Inputs */
body.light-mode .review-form .form-control {
  border-radius: 10px !important;
  border: 1px solid rgba(124, 58, 237, 0.2) !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.light-mode .review-form .form-control:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.25) !important;
}

/* Submit Button */
body.light-mode .review-form button[type="submit"] {
  background: linear-gradient(90deg, #7c3aed, #fe52fb) !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 10px !important;
  border-radius: 10px !important;
  transition: opacity 0.3s ease !important;
}

body.light-mode .review-form button[type="submit"]:hover {
  opacity: 0.9 !important;
}

/* Responsive */
@media (max-width: 576px) {
  .book-actions {
    gap: 8px;
  }

  .action-btn {
    padding: 8px 10px;
    font-size: 1rem;
  }
}


/* ==========================
   Author Dashboard
   ========================== */
body.light-mode .my-books-section {
  background: linear-gradient(135deg, #e3dbfc, #fdddf1, #e6efff) !important;
  padding: 2rem 1rem !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1) !important;
}

/* Section Title */
body.light-mode .my-books-section .section-title {
  color: #4b0082 !important;
  font-weight: 900 !important;
  font-size: 1.5rem !important;
}

body.light-mode .my-books-section .text-muted {
  color: #6b6b83 !important;
}

/* Buttons */
body.light-mode .my-books-section .btn-outline-primary {
  border-color: #7c3aed !important;
  color: #7c3aed !important;
  transition: all 0.3s ease !important;
}

body.light-mode .my-books-section .btn-outline-primary:hover {
  background: #7c3aed !important;
  color: #fff !important;
}

body.light-mode .my-books-section .btn-primary {
  background: linear-gradient(90deg, #7c3aed, #fe52fb) !important;
  border: none !important;
  color: #fff !important;
  transition: all 0.3s ease !important;
}

body.light-mode .my-books-section .btn-primary:hover {
  background: linear-gradient(90deg, #5b21b6, #d946ef) !important;
}

/* Stats Cards */
body.light-mode .my-books-section .stats-card {
  background: linear-gradient(90deg, #dbc9f8, #efc0f7) !important;
  border-radius: 14px !important;
  padding: 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.1) !important;
  transition: transform 0.3s ease !important;
  border: 3px solid var(--light-accent-900) !important;
}

body.light-mode .my-books-section .stats-card:hover {
  transform: translateY(-5px) !important;
}

/* Stats Icon */
body.light-mode .my-books-section .stats-icon {
  font-size: 1.8rem !important;
  padding: 0.6rem !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
}

body.light-mode .my-books-section .stats-icon.published {
  background: linear-gradient(135deg, #00d4aa 0%, #0099cc 100%);
}

body.light-mode .my-books-section .stats-icon.draft {
  background: linear-gradient(135deg, #ffa726 0%, #ff7043 100%);
}

body.light-mode .my-books-section .stats-icon.review {
  background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%);
}

body.light-mode .my-books-section .stats-number {
  font-weight: 700;
  font-size: 1.5rem;
  color: #2e2e4f;
}

body.light-mode .my-books-section .stats-label {
  color: #6b6b83;
}

/* Book Cards */
body.light-mode .my-books-section .my-book-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.light-mode .my-books-section .my-book-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(124, 58, 237, 0.15);
}

/* Status Badge */
body.light-mode .my-books-section .status-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  color: #fff;
}

/* body.light-mode .my-books-section .book-status.published .status-badge {
  background: linear-gradient(90deg, #22d3ee, #3b82f6);
}

body.light-mode .my-books-section .book-status.draft .status-badge {
  background: linear-gradient(90deg, #fcd34d, #f472b6);
}

body.light-mode .my-books-section .book-status.review .status-badge {
  background: linear-gradient(90deg, #f97316, #ec4899);
} */

/* Book Info */

body.light-mode .book-cover {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 300px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px var(--light-shadow-sm, rgba(0, 0, 0, 0.05)) !important;
  margin-bottom: 18px !important;
  background: var(--light-gradient-card, linear-gradient(135deg, #ffffff 0%, #f7fafc 100%)) !important;
}

body.light-mode .book-image {
  width: 100% !important;
  height: 280px !important;
  object-fit: cover !important;
  filter: brightness(0.95) saturate(1.1) !important;
  transition: filter 0.2s, transform 0.3s !important;
}

body.light-mode .my-book-card:hover .book-image {
  filter: brightness(1.05) saturate(1.2) !important;
  transform: scale(1.05) !important;
}

body.light-mode .book-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  opacity: 0 !important;
  transition: opacity 0.3s !important;
}

body.light-mode .my-book-card:hover .book-overlay {
  opacity: 1 !important;
}

body.light-mode .book-actions {
  display: flex !important;
  gap: 0.5rem !important;
}

body.light-mode .action-btn {
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #333 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

body.light-mode .action-btn:hover {
  transform: scale(1.1) !important;
  background: #fff !important;
}

body.light-mode .action-btn.preview {
  background: linear-gradient(135deg, #00d4aa 0%, #0099cc 100%) !important;
  color: #fff !important;
}

body.light-mode .action-btn.edit {
  background: linear-gradient(135deg, #ffa726 0%, #ff7043 100%) !important;
  color: #fff !important;
}

body.light-mode .action-btn.delete {
  background: linear-gradient(135deg, #ef5350 0%, #d32f2f 100%) !important;
  color: #fff !important;
}

body.light-mode .book-info {
  padding: 1.5rem !important;
}



body.light-mode .my-books-section .book-title {
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: #1e1e2f !important;
}

body.light-mode .my-books-section .book-author {
  font-size: 1.1rem !important;
  color: #151d8b !important;
  font-weight: 700 !important;
}

body.light-mode .my-books-section .book-description {
  font-size: 1rem !important;
  color: #172538 !important;
}

/* Analytics + Reviews */
body.light-mode .my-books-section .analytics-item,
body.light-mode .my-books-section .rating-text {
  color: #0a0a16 !important;
}

body.light-mode .my-books-section .stars i {
  color: #f7d035 !important;
}

/* Meta Info */
body.light-mode .my-books-section .book-meta small {
  color: #03070f !important;
}

/* Pagination */
body.light-mode .pagination-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #fff !important;
  padding: 1rem 1.5rem !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  gap: 1rem !important;
}

body.light-mode .pagination-info {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

body.light-mode .pagination-info .showing-text {
  font-size: 0.95rem !important;
  color: #130e0e !important;
}

body.light-mode .showing-text strong {
  font-weight: 600 !important;
  color: #000 !important;
}

body.light-mode .pagination-nav .pagination {
  margin: 0 !important;
  gap: 0.3rem !important;
}

body.light-mode .pagination .page-link {
  border: 1px solid #ddd !important;
  color: #333 !important;
  background: var(--light-accent-400) !important;
  padding: 0.45rem 0.9rem !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

body.light-mode .pagination .page-link:hover {
  background: var(--light-accent-400) !important;
  border: 2px solid #1f1db1 !important;
  color: #000 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* Active page */
body.light-mode .pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #002ec6, #e91de9) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Disabled arrows */
body.light-mode .pagination .page-item.disabled .page-link {
  background: var(--light-accent-400) !important;
  border-color: #ddd !important;
  color: #999 !important;
  pointer-events: none !important;
}

/* Dropdown (per page selector) */
body.light-mode .pagination-actions .form-select {
  border-radius: 8px !important;
  border: 1px solid #ddd !important;
  padding: 0.35rem 1.8rem 0.35rem 0.6rem !important;
  font-size: 0.9rem !important;
  background-color: #fff !important;
  color: #333 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body.light-mode .pagination-actions .form-select:focus {
  border-color: #00c6a7 !important;
  box-shadow: 0 0 0 3px rgba(0, 198, 167, 0.2) !important;
}


/* ==========================
   Points & Activity - Light Theme
   ========================== */
body.light-mode .points-activity-section {
  background: linear-gradient(135deg, #f0e3f8, #e0e7ff) !important;
  padding: 1.5rem !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s ease-in-out !important;
}

/* Section Header */
body.light-mode .points-activity-section .section-header {
  border-bottom: 2px solid #f2f2f7 !important;
  padding-bottom: 0.5rem !important;
}

body.light-mode .points-activity-section .section-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: #3a2e70 !important;
  /* background: linear-gradient(135deg, #7b61ff, #ff61c0) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important; */
}

body.light-mode .points-activity-section .points-overview .total-points {
  font-size: 1rem !important;
  font-weight: 500 !important;
  color: #f7f5f5 !important;
}

/* Points Cards */
body.light-mode .points-card {
  display: flex !important;
  align-items: center !important;
  background: linear-gradient(135deg, #e0f7fa, #ede7f6) !important;
  border-radius: 14px !important;
  padding: 1rem !important;
  transition: all 0.3s ease-in-out !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

body.light-mode .points-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
}

body.light-mode .points-card .points-icon {
  font-size: 1.8rem !important;
  margin-right: 0.8rem !important;
  color: #6a1b9a !important;
}

body.light-mode .points-card .points-number {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #1e88e5 !important;
}

body.light-mode .points-card .points-label {
  font-size: 0.9rem !important;
  color: #666 !important;
}

/* Activity Card */
body.light-mode .activity-card {
  background: #fff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease-in-out !important;
}

body.light-mode .activity-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
}

body.light-mode .activity-card .card-header {
  background: linear-gradient(135deg, #7e57c2, #ec407a) !important;
  color: #fff !important;
  padding: 0.75rem 1rem !important;
}

body.light-mode .activity-card .card-title {
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

body.light-mode .activity-card .activity-filter select {
  border-radius: 8px !important;
  border: 1px solid #ddd !important;
  font-size: 0.85rem !important;
  padding: 0.25rem 1.2rem 0.25rem 0.5rem !important;
  transition: border-color 0.3s ease !important;
}

body.light-mode .activity-card .activity-filter select:focus {
  border-color: #7e57c2 !important;
  box-shadow: 0 0 0 3px rgba(126, 87, 194, 0.2) !important;
}

/* Activity List */
body.light-mode .activity-list {
  padding: 1rem !important;
}

body.light-mode .activity-item {
  display: flex !important;
  align-items: flex-start !important;
  padding: 0.8rem 0 !important;
  border-bottom: 1px solid #f1f1f6 !important;
  transition: all 0.2s ease !important;
}

body.light-mode .activity-item:last-child {
  border-bottom: none !important;
}

body.light-mode .activity-item:hover {
  background: #f9f9ff !important;
  border-radius: 10px !important;
  padding-left: 0.5rem !important;
}

body.light-mode .activity-book-cover .book-image {
  width: 50px !important;
  height: 70px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  margin-right: 0.8rem !important;
}

body.light-mode .activity-content .book-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #3949ab !important;
}

body.light-mode .activity-content .activity-date {
  font-size: 0.8rem !important;
  color: #999 !important;
}

body.light-mode .activity-details {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 0.3rem 0 !important;
}

body.light-mode .activity-details .stars {
  color: #ffb300 !important;
  font-size: 0.9rem !important;
}

body.light-mode .activity-details .rating-text {
  font-size: 0.85rem !important;
  color: #666 !important;
  margin-left: 5px !important;
}

body.light-mode .activity-details .points-earned .points-badge {
  background: linear-gradient(135deg, #00c6ff, #0072ff) !important;
  color: #fff !important;
  padding: 0.25rem 0.6rem !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

body.light-mode .activity-content .review-excerpt {
  font-size: 0.85rem !important;
  color: #555 !important;
  margin-top: 0.3rem !important;
}

/* View All Activity */
body.light-mode .activity-card .card-footer {
  text-align: center !important;
  padding: 0.6rem 1rem !important;
  background: #fafafa !important;
}

body.light-mode .activity-card .btn-outline-primary {
  border-radius: 8px !important;
  font-size: 1rem !important;
  padding: 0.3rem 0.9rem !important;
  border: 1px solid #1e196d !important;
  color: #1e196d !important;
  transition: all 0.3s ease !important;
  background: #f0f0f0 !important;
}

body.light-mode .activity-card .btn-outline-primary:hover {
  background: #f0f0f0 !important;
  border-color: 1px solid var(--light-brand-primary) !important;
  color: var(--light-brand-primary) !important;
}

/* Top Books List */
body.light-mode .top-books-list {
  padding: 1.3rem !important;
}

body.light-mode .top-book-item {
  display: flex !important;
  align-items: center !important;
  padding: 0.7rem 0.2rem !important;
  border-bottom: 1px solid #f2f2f7 !important;
  transition: all 0.2s ease !important;
}

body.light-mode .card-title {
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: #fcfcfc !important;
  padding: 0.3rem 0 !important;
}

body.light-mode .top-book-item:last-child {
  border-bottom: none !important;
}

body.light-mode .top-book-item:hover {
  background: #f9f9ff !important;
  border-radius: 10px !important;
  padding-left: 0.5rem !important;
}

body.light-mode .top-book-item .book-rank {
  font-weight: 700 !important;
  color: #ec407a !important;
  margin-right: 0.8rem !important;
  font-size: 1rem !important;
}

body.light-mode .top-book-item .book-cover-small .book-image {
  width: 40px !important;
  height: 55px !important;
  object-fit: cover !important;
  border-radius: 6px !important;

}

body.light-mode .top-book-item .book-info-small .book-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #3949ab !important;
}

body.light-mode .top-book-item .book-stats {
  font-size: 1rem !important;
  color: #0f0a0a !important;
}

body.light-mode .top-book-item .avg-rating {
  color: #ff9800 !important;
  font-weight: 600 !important;
  margin-left: 5px !important;
}

/* ================================
   Achievements & Badges - Light Theme
   ================================ */
body.light-mode .achievements-section {
  background: linear-gradient(135deg, #f0e3f8, #e0e7ff) !important;
  padding: 2rem !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease-in-out !important;
}

/* Section Header */
body.light-mode .achievements-section .section-header {
  border-bottom: 2px solid #e0e7ff !important;
  padding-bottom: 0.5rem !important;
}

body.light-mode .achievements-section .section-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #374151 !important;
}

body.light-mode .achievements-overview .total-achievements {
  font-size: 1rem !important;
  color: #6b7280 !important;
}

/* =====================
   Achievement Stats Cards
   ===================== */
body.light-mode .achievement-card {
  background: linear-gradient(135deg, #e0f2fe, #f3e8ff) !important;
  border-radius: 12px !important;
  padding: 1.2rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body.light-mode .achievement-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}

body.light-mode .achievement-icon {
  font-size: 2rem !important;
  color: #6d28d9 !important;
  flex-shrink: 0 !important;
}

body.light-mode .achievement-number {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
}

body.light-mode .achievement-label {
  font-size: 0.9rem !important;
  color: #6b7280 !important;
}

/* =====================
   Achievements Grid Card
   ===================== */
body.light-mode .achievements-card {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  transition: box-shadow 0.3s ease !important;
}

body.light-mode .achievements-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1) !important;
}

body.light-mode .achievements-card .card-header {
  background: linear-gradient(135deg, #dbeafe, #fce7f3) !important;
  padding: 1rem !important;
  border-bottom: 1px solid #e5e7eb !important;
}

body.light-mode .achievements-card .card-title {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

body.light-mode .achievements-filter select {
  border-radius: 8px !important;
  border: 1px solid #d1d5db !important;
  background: #ffffff !important;
  color: #374151 !important;
  transition: border-color 0.2s ease !important;
}

body.light-mode .achievements-filter select:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

/* Achievements List Items */
body.light-mode .achievement-item {
  display: flex !important;
  align-items: flex-start !important;
  padding: 1rem !important;
  border-bottom: 1px solid #f3f4f6 !important;
  transition: background 0.2s ease !important;
}

body.light-mode .achievement-item:hover {
  background: #f9fafb !important;
}

body.light-mode .achievement-badge .badge-icon {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.3rem !important;
  color: #fff !important;
  margin-right: 1rem !important;
}

body.light-mode .badge-icon.gold {
  background: linear-gradient(135deg, #facc15, #f59e0b) !important;
}

body.light-mode .badge-icon.silver {
  background: linear-gradient(135deg, #d1d5db, #9ca3af) !important;
}

body.light-mode .badge-icon.special {
  background: linear-gradient(135deg, #a78bfa, #6366f1) !important;
}

body.light-mode .achievement-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

body.light-mode .achievement-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

body.light-mode .achievement-date {
  font-size: 0.85rem !important;
  color: #6b7280 !important;
}

body.light-mode .achievement-details {
  display: flex !important;
  justify-content: space-between !important;
  margin: 0.5rem 0 !important;
}

body.light-mode .category-badge {
  font-size: 0.75rem !important;
  padding: 0.2rem 0.6rem !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}

body.light-mode .category-badge.gold {
  background: #fef3c7 !important;
  color: #92400e !important;
}

body.light-mode .category-badge.silver {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

body.light-mode .category-badge.special {
  background: #ede9fe !important;
  color: #5b21b6 !important;
}

body.light-mode .points-badge {
  background: #dbeafe !important;
  color: #1e40af !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 0.2rem 0.6rem !important;
  border-radius: 6px !important;
}

body.light-mode .achievement-description {
  font-size: 0.9rem !important;
  color: #4b5563 !important;
  margin-top: 0.3rem !important;
}

body.light-mode .achievements-card .card-footer {
  padding: 0.8rem !important;
  border-top: 1px solid #e5e7eb !important;
  text-align: right !important;
}

body.light-mode .achievements-card .btn-outline-primary {
  border-color: #6366f1 !important;
  color: #6366f1 !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

body.light-mode .achievements-card .btn-outline-primary:hover {
  background: #6366f1 !important;
  color: #fff !important;
}

/* =====================
   Upcoming Milestones
   ===================== */
body.light-mode .milestones-list {
  padding: 1rem !important;
}

body.light-mode .milestone-item {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.8rem 0 !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

body.light-mode .milestone-icon {
  font-size: 1.5rem !important;
  color: #ec4899 !important;
}

body.light-mode .milestone-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

body.light-mode .milestone-progress {
  margin-top: 0.4rem !important;
}

body.light-mode .progress-bar {
  background: #f3f4f6 !important;
  border-radius: 8px !important;
  height: 8px !important;
  width: 100% !important;
  overflow: hidden !important;
}

body.light-mode .progress-fill {
  background: linear-gradient(135deg, #6366f1, #ec4899) !important;
  height: 100% !important;
  border-radius: 8px !important;
  transition: width 0.4s ease !important;
}

body.light-mode .progress-text {
  font-size: 0.75rem !important;
  color: #6b7280 !important;
  margin-top: 0.2rem !important;
  display: block !important;
}

/* =====================
   Reviewer Dashboard
   ===================== */
body.light-mode #my-points {
  background: linear-gradient(135deg, #e9e9fd 0%, #f6e8fd 50%, #fde2e2 100%) !important;
  color: #2d2d2d !important;
  padding: 20px !important;
  border-radius: 14px !important;
}

/* Section Title */
body.light-mode #my-points .section-title {
  color: #4a148c !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #e0d7f7 !important;
  padding: 0.6rem !important;
}

/* Points Cards */
body.light-mode #my-points .points-card {
  background: linear-gradient(145deg, #ffffff, #f3e8ff) !important;
  border: 1px solid #e5d5f9 !important;
  border-radius: 14px !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

body.light-mode #my-points .points-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 18px rgba(155, 81, 224, 0.15) !important;
}

/* Numbers & Gradient Text */
body.light-mode #my-points .points-card .display-5,
body.light-mode #my-points .points-card .display-6 {
  background: linear-gradient(90deg, #6a11cb, #2575fc, #ff4081) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 700 !important;
}

/* Subtext */
body.light-mode #my-points .points-card .fs-5,
body.light-mode #my-points .points-card .fs-6 {
  color: #5e35b1 !important;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
}

body.light-mode #my-points .points-card .text-muted {
  color: #7b5fa4 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

/* Activity Card */
body.light-mode #my-points .activity-card {
  background: #ffffff !important;
  border: 1px solid #e0cffe !important;
  border-radius: 14px !important;
  transition: box-shadow 0.25s ease !important;
}

body.light-mode #my-points .activity-card:hover {
  box-shadow: 0 6px 16px rgba(122, 45, 186, 0.12) !important;
}

/* Activity Header */
body.light-mode #my-points .activity-card h5 {
  color: #6a11cb !important;
  font-weight: 600 !important;
}

/* Activity List */
body.light-mode #my-points .activity-card ul li {
  background: #faf5ff !important;
  border: 1px solid #edd7ff !important;
  border-radius: 10px !important;
  padding: 0.8rem 1rem !important;
  transition: all 0.25s ease !important;
}

body.light-mode #my-points .activity-card ul li:not(:last-child) {
  margin-bottom: 0.7rem !important;
}

body.light-mode #my-points .activity-card ul li:hover {
  background: linear-gradient(135deg, #f3e5f5, #e1f5fe, #fce4ec) !important;
  box-shadow: 0 4px 10px rgba(186, 104, 200, 0.15) !important;
}

/* Icons inside list */
body.light-mode #my-points .activity-card i {
  font-size: 1rem !important;
  vertical-align: middle !important;
  color: #6a11cb !important;
}

/* Badges inside list */
body.light-mode #my-points .activity-card .badge {
  font-size: 0.75rem !important;
  border-radius: 8px !important;
  padding: 0.35rem 0.6rem !important;
}

/* Points badge */
body.light-mode #my-points .activity-card .badge.bg-success {
  background: linear-gradient(135deg, #ff4081, #7b1fa2) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Date (right aligned small text) */
body.light-mode #my-points .activity-card .text-muted {
  color: #9c27b0 !important;
  font-size: 0.8rem !important;
}

/* My Saved Books */
body.light-mode #saved-books {
  background: linear-gradient(135deg, #fafaff, #fff0f6, #f3e5f5) !important;
  padding: 1.5rem !important;
  border-radius: 16px !important;
}

/* Section Title */
body.light-mode #saved-books .section-title {
  color: #6a11cb !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #e3d7f9 !important;
  padding-bottom: 0.5rem !important;
}

/* Book Card */
body.light-mode #saved-books .book-card {
  background: linear-gradient(145deg, #ffffff, #f9f0ff) !important;
  border: 1px solid #e3d0fa !important;
  border-radius: 14px !important;
  color: #2d2d2d !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

body.light-mode #saved-books .book-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 18px rgba(106, 17, 203, 0.18) !important;
}

/* Book Image */
body.light-mode #saved-books .book-card img {
  border-radius: 12px 12px 0 0 !important;
}

/* Title */
body.light-mode #saved-books .book-card .card-title {
  color: #4a148c !important;
  font-weight: 600 !important;
}

/* Author */
body.light-mode #saved-books .book-card .card-text {
  color: #7b5fa4 !important;
  font-style: italic !important;
}

/* Remove Button */
body.light-mode #saved-books .book-card button {
  border: 1px solid #ba68c8 !important;
  background: linear-gradient(135deg, #ff80ab, #7e57c2) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: background 0.25s ease, transform 0.2s ease !important;
}

body.light-mode #saved-books .book-card button:hover {
  background: linear-gradient(135deg, #6a11cb, #ff4081) !important;
  transform: scale(1.05) !important;
}

body.light-mode .scroll-x-container {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thick !important;
  scrollbar-color: var(--light-accent-500) var(--light-accent-200) !important;
  padding-bottom: 50px !important;
  height: 100% !important;
  width: 100% !important;
}

/* My reviews*/
/* 🌸 Light Mode - My Reviews (Bluish Pink Purple Theme) */
body.light-mode #my-reviews {
  background: linear-gradient(135deg, #fafaff, #fff0f6, #f3e5f5) !important;
  padding: 1.3rem !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Section Title */
body.light-mode #my-reviews .section-title {
  color: #6a11cb !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #e3d7f9 !important;
  padding-bottom: 0.5rem !important;
}

/* Info Badge (review count) */
body.light-mode #my-reviews .badge.bg-primary {
  background: linear-gradient(135deg, #7e57c2, #42a5f5) !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow: 0 3px 8px rgba(66, 165, 245, 0.25) !important;
}

/* Book Review Card */
body.light-mode #my-reviews .book-review-card {
  background: linear-gradient(145deg, #ffffff, #f9f0ff) !important;
  border: 1px solid #e3d0fa !important;
  border-radius: 14px !important;
  color: #2d2d2d !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

body.light-mode #my-reviews .book-review-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 18px rgba(106, 17, 203, 0.18) !important;
}

/* Book Cover */
body.light-mode #my-reviews .book-review-img {
  border-radius: 12px 12px 0 0 !important;
}

/* Title */
body.light-mode #my-reviews .book-review-card .card-title {
  color: #4a148c !important;
  font-weight: 600 !important;
}

/* Description */
body.light-mode #my-reviews .book-review-card .card-text.text-muted {
  color: #7b5fa4 !important;
  font-style: italic !important;
}

/* Badges inside review card */
body.light-mode #my-reviews .book-review-card .badge.bg-success {
  background: linear-gradient(135deg, #81c784, #43a047) !important;
  font-weight: 500 !important;
}

body.light-mode #my-reviews .book-review-card .badge.bg-info {
  background: linear-gradient(135deg, #64b5f6, #0288d1) !important;
  font-weight: 500 !important;
  color: #fff !important;
}

/* Review Text */
body.light-mode #my-reviews .book-review-card p {
  color: #333 !important;
}

/* CTA Button */
body.light-mode #my-reviews .book-review-card a.btn {
  border: 1px solid #ba68c8 !important;
  background: linear-gradient(135deg, #ff80ab, #7e57c2) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: background 0.25s ease, transform 0.2s ease !important;
}

body.light-mode #my-reviews .book-review-card a.btn:hover {
  background: linear-gradient(135deg, #6a11cb, #ff4081) !important;
  transform: scale(1.05) !important;
}

body.light-mode .file-upload-label {
  display: flex;
  align-items: center;
  background: #f3e5f5;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #d1c4e9;
  width: 100%;
}

body.light-mode .file-btn {
  background: #d1c4e9;
  padding: 6px 12px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
}

body.light-mode .tt-selected-tag {
  background-color: var(--ttRed);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

body.light-mode .tt-coming-soon-wrapper {
  background: linear-gradient(135deg, #f0e3f8, #e0e7ff) !important;
  padding: 1.5rem !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s ease-in-out !important;
}

body.light-mode .tt-coming-soon-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.6);
}

body.light-mode #tt-coming-soon-timer .number {
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 48px;
  font-weight: 700;
  aspect-ratio: 1/1;
  min-width: 96px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}