/* ============================================================
   KURDISHMANHWA.SITE — FULL THEME REDESIGN v3.0.0
   Color Scheme: #061819 (Dark Teal) + #AB173F (Crimson Red)
   Inspired by: Hivetoons.org / Asura Scans
   ============================================================ */

/* === CSS Variable Overrides === */
:root {
  --navbar: #0a2225 !important;
  --greys: #1a3a3d !important;
  --accents: #AB173F !important;
  --ratings: #f59e0b !important;
  --status: #22c55e !important;
  --text-primary: #f0f0f0 !important;

  /* Custom extended palette */
  --bg-primary: #061819;
  --bg-surface: #0a2628;
  --bg-elevated: #0f3234;
  --bg-card: #0c2a2d;
  --border-subtle: rgba(171, 23, 63, 0.15);
  --border-medium: rgba(171, 23, 63, 0.35);
  --accent-hover: #c91e4a;
  --accent-glow: rgba(171, 23, 63, 0.25);
  --text-secondary: rgba(240, 240, 240, 0.7);
  --text-muted: rgba(240, 240, 240, 0.45);
}

/* === Base & Body === */
body,
.mainholder {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

a {
  color: var(--text-primary);
  transition: color 0.25s ease;
}

a:hover {
  color: #AB173F !important;
}

img {
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Force override Themesia inline accent styles */
.flavor,
a.flavor,
.flavor:hover,
.flavor a,
.flavor a:hover,
.colored,
.seriestugenre a,
.thumbook .adds .epxs,
h1.flavor,
h2.flavor {
  color: #AB173F !important;
}

/* === Logo & Header Image === */
.header-img {
  width: 50px !important;
  height: auto !important;
  max-height: 50px !important;
  object-fit: contain;
}

.footer-logo {
  width: 50px !important;
  height: auto !important;
}

/* === Navbar ===
 * Sticky top bar. On mobile, backdrop-filter can be unreliable so we
 * use a fully opaque background to prevent content showing through.
 */
.navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  padding: 0 12px;
  height: auto !important;
  min-height: 56px;
  width: 100%;
  line-height: normal;
  background: #0a2225 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  position: sticky;
  top: 0;
  z-index: 100;
  color: var(--text-primary);
}

.navbar.home-nav {
  border-bottom: none !important;
}

/* Flame Logo area inside navbar */
.flame-logo {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0;
  position: relative;
  height: 56px;
  max-width: 60px;
  padding: 0 !important;
  border-radius: 0 !important;
  z-index: 2;
}

.flame-logo .background-blur { display: none; }

.flame-logo .logo {
  display: flex;
  align-items: center;
  height: 100%;
  border-radius: 0;
  background: transparent;
}

.flame-logo .logo a {
  display: flex;
  align-items: center;
  height: 100%;
}

.flame-logo .logo a img {
  width: 44px !important;
  height: auto !important;
  max-height: 40px !important;
  object-fit: contain;
}

/* Desktop Nav — hidden on mobile */
.desktop-nav {
  display: none;
}

/* Right area */
.right-area {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto !important;
  gap: 6px;
  list-style: none;
  margin: 0;
}

/* Hide search field by default on mobile (only show toggle icon) */
.searchx {
  display: none !important;
}

.right-area .searchx form {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

.right-area .searchx input.search-live,
.searchx #form #s {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
  padding: 6px 12px;
  padding-left: 30px;
  font-size: 0.85rem;
  height: 36px;
  width: 100%;
}

.right-area .searchx input.search-live:focus,
.searchx #form #s:focus {
  border-color: #AB173F !important;
  box-shadow: 0 0 0 2px var(--accent-glow) !important;
  outline: none;
}

.right-area .searchx button,
.searchx #form #submit {
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: 6px 8px;
  position: absolute;
  left: 2px;
}

/* Search mobile toggle icon */
.srcmob {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.04) !important;
  flex-shrink: 0;
  float: none !important;
  margin: 0 !important;
  font-size: inherit !important;
  line-height: normal !important;
  -webkit-tap-highlight-color: transparent;
}

.srcmob svg,
.srcmob i {
  width: 18px;
  height: 18px;
  font-size: 14px;
}

.right-area .socials-menu {
  display: none !important;
}

/* Login hiding for logged-in users */
body.logged-in .login-menu-item,
body.logged-in li.see {
  display: none !important;
}

/* Header Avatar Button */
.header-avatar-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(171,23,63,0.35);
  transition: border-color 0.2s ease;
}

.header-avatar-btn:hover {
  border-color: #AB173F;
}

.header-avatar-btn img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

/* ====== Header Avatar Wrapper & Desktop Dropdown ====== */
.header-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

/* Desktop Dropdown */
.avatar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 260px;
  background: #0c2628;
  border: 1px solid rgba(171,23,63,0.15);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  z-index: 1100;
  overflow: hidden;
  animation: dropdownFadeIn 0.18s ease;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.header-avatar-wrapper.dropdown-open .avatar-dropdown {
  display: block;
}

/* Dropdown user header */
.dropdown-user-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dropdown-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(171,23,63,0.3);
}

.dropdown-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

.dropdown-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dropdown-username {
  color: var(--text-primary, #e5e7eb);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-balance {
  color: #f7931e;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.dropdown-balance .fa-coins {
  font-size: 0.75rem;
}

.dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
}

/* Dropdown menu list */
.dropdown-menu-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 6px 0 !important;
}

.dropdown-menu-list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--text-secondary, #a3b0b4) !important;
  text-decoration: none !important;
  font-size: 0.85rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-menu-list li a:hover {
  background: rgba(171,23,63,0.1);
  color: #AB173F !important;
}

.dropdown-menu-list li a svg {
  color: var(--text-muted, #6b7280);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.dropdown-menu-list li a:hover svg {
  color: #AB173F;
}

/* Dropdown logout */
.dropdown-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #ef4444 !important;
  text-decoration: none !important;
  font-size: 0.85rem;
  transition: background 0.15s ease;
}

.dropdown-logout:hover {
  background: rgba(239,68,68,0.08);
}

.dropdown-logout svg {
  color: #ef4444;
  flex-shrink: 0;
}

/* ====== Mobile Balance Badge ====== */
.header-balance-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(247,147,30,0.12);
  color: #f7931e;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 20px;
  flex-shrink: 0;
  white-space: nowrap;
  border: 1px solid rgba(247,147,30,0.2);
}

.header-balance-badge .fa-coins {
  font-size: 0.72rem;
}

/* Header Login Button (logged out) */
.header-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
  text-decoration: none;
  flex-shrink: 0;
}

.header-login-btn:hover {
  color: #AB173F;
  background: rgba(171,23,63,0.08);
}

/* Hamburger */
.shme {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  cursor: pointer;
  color: var(--text-secondary) !important;
  flex-shrink: 0;
  float: none !important;
  font-size: inherit !important;
  margin: 0 !important;
  -webkit-tap-highlight-color: transparent;
}

.shme svg {
  width: 22px;
  height: 22px;
}

/* Mobile menu overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 998;
  backdrop-filter: blur(2px);
}

.mobile-menu-overlay.active {
  display: block;
}

/* ====== MOBILE SLIDE-IN PANEL ====== */
.mobile-panel {
  position: fixed;
  top: 0;
  right: -300px;
  width: 280px;
  max-width: 85vw;
  height: 100vh;
  height: 100dvh;
  background: #0a1e20 !important;
  color: #f0f0f0 !important;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: right 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid rgba(171,23,63,0.12);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

.mobile-panel.open {
  right: 0;
}

/* Panel Header */
.mobile-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(171, 23, 63, 0.15);
  background: #0c2628 !important;
  flex-shrink: 0;
}

.panel-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.panel-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(171,23,63,0.3);
}

.panel-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

.panel-user-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel-username {
  color: #f0f0f0;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-points {
  color: #f7931e;
  font-size: 0.78rem;
  font-weight: 600;
}

.panel-guest {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.panel-guest svg {
  color: rgba(240, 240, 240, 0.45);
  flex-shrink: 0;
}

.panel-login-link {
  color: #AB173F !important;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.panel-close {
  background: none;
  border: none;
  color: rgba(240, 240, 240, 0.45);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Panel Nav Links */
.mobile-panel-nav {
  padding: 8px 0;
  border-bottom: 1px solid rgba(171, 23, 63, 0.15);
  background: #0a1e20 !important;
}

.panel-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.panel-menu li {
  margin: 0;
}

.panel-menu li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: #f0f0f0 !important;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.15s ease;
}

.panel-menu li a svg {
  color: rgba(240, 240, 240, 0.45);
  flex-shrink: 0;
}

.panel-menu li a:active {
  background: rgba(171,23,63,0.08);
}

.panel-menu li.current-menu-item > a {
  color: #AB173F !important;
}

/* Sub-menus in panel */
.panel-menu .sub-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
  top: auto !important;
  width: 100% !important;
}

.panel-menu .sub-menu li a {
  padding-right: 36px;
  font-size: 0.85rem;
  color: rgba(240, 240, 240, 0.7) !important;
}

/* Panel submenu accordion */
.panel-has-submenu .panel-submenu-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.panel-submenu-toggle .submenu-chevron {
  margin-right: auto;
  margin-left: 0;
  transition: transform 0.25s ease;
  color: rgba(240, 240, 240, 0.45);
  flex-shrink: 0;
}

.panel-has-submenu.submenu-open .submenu-chevron {
  transform: rotate(180deg);
}

.panel-submenu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgba(0,0,0,0.15);
}

.panel-has-submenu.submenu-open .panel-submenu {
  max-height: 300px;
}

.panel-submenu li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 52px;
  color: rgba(240, 240, 240, 0.7) !important;
  text-decoration: none;
  font-size: 0.85rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.panel-submenu li a:active,
.panel-submenu li a:hover {
  background: rgba(171,23,63,0.08);
  color: #AB173F !important;
}

/* Panel socials section */
.panel-socials-section {
  margin-top: auto;
  border-bottom: none;
}

/* Panel Account Section */
.mobile-panel-section {
  padding: 12px 0;
  border-bottom: 1px solid rgba(171, 23, 63, 0.15);
  background: #0a1e20 !important;
}

.panel-section-label {
  color: rgba(240, 240, 240, 0.55);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 20px 8px;
}

.panel-user-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.panel-user-links li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  color: #f0f0f0 !important;
  text-decoration: none;
  font-size: 0.88rem;
  transition: background 0.15s ease;
}

.panel-user-links li a:active {
  background: rgba(171,23,63,0.08);
}

.panel-user-links li a svg {
  color: rgba(240, 240, 240, 0.45);
  flex-shrink: 0;
}

/* Panel Logout */
.mobile-panel-footer {
  padding: 8px 0;
  border-bottom: 1px solid rgba(171, 23, 63, 0.15);
  background: #0a1e20 !important;
}

.panel-logout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  color: #ef4444 !important;
  text-decoration: none;
  font-size: 0.88rem;
}

.panel-logout svg {
  color: #ef4444;
}

/* Panel Socials */
.mobile-panel-socials {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
}

.mobile-panel-socials a {
  color: rgba(240, 240, 240, 0.45) !important;
  display: flex;
  align-items: center;
}

.mobile-panel-socials a:hover {
  color: #f0f0f0 !important;
}

/* Old menu elements hidden — replaced by new panel */
#main-menu.shwx,
.mm {
  display: none !important;
}

/* Legacy avatar in menu — hide since we use new header-avatar-btn */
body .navbar li.avatar-class {
  display: none !important;
}

/* Search expanded (mobile) */
/* searchx expanded overlay — more specific to beat parent rules */
.searchx.minmb.minmbx {
  display: flex !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  z-index: 200;
  background: var(--bg-primary, #061819) !important;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}

.searchx.minmb.minmbx #form {
  width: 100%;
  max-width: 600px;
}

.searchx.minmb.minmbx #form #s {
  background: var(--bg-surface) !important;
  border-color: rgba(171,23,63,0.4) !important;
}

.srcmob.srccls {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%);
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  cursor: pointer;
  float: none !important;
  font-size: inherit !important;
  color: #AAA !important;
}

.navbar i.fas.fa-times-circle {
  color: #AB173F !important;
}

/* Live Search Results */
div#live-search_sb {
  width: 360px !important;
  margin-left: 5%;
  z-index: 99999 !important;
}

#live-search_results {
  background: var(--bg-elevated, #0f3234) !important;
  margin-top: 5px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Mobile: live-search_sb appears below fixed search bar */
@media (max-width: 890px) {
  div#live-search_sb {
    width: calc(100vw - 20px) !important;
    max-width: 360px;
    left: 10px !important;
    right: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* === Search === */
.search-form input,
.search-form .search-field {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
}

.search-form input:focus,
.search-form .search-field:focus {
  border-color: #AB173F !important;
  box-shadow: 0 0 0 2px var(--accent-glow) !important;
}

/* === Big Slider (Hero) === */
.big-slider {
  overflow: hidden;
  position: relative;
}

.big-slider .swiper-slide {
  width: 240px;
  height: 360px;
  border-radius: 12px;
}

.big-slider img {
  height: 360px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  will-change: transform;
}

.big-slider img:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

.big-slider .bigor {
  display: none;
}

.big-slider .swiper-slide-active .bigor {
  display: block;
}

.big-slider .extra-info {
  justify-content: center;
  margin-bottom: 3px;
  line-height: 1rem;
}

.big-slider .numscore {
  font-size: 0.8rem;
  font-weight: 300;
}

.big-slider a:hover .extra-info {
  color: white;
}

.big-slider .status > i {
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
}

.big-slider ul.sliderInfoGenre {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  justify-content: center;
  padding: 0;
}

.big-slider li {
  color: white;
  background: rgba(171, 23, 63, 0.6);
  padding: 5px 8px;
  border-radius: 6px;
  margin: 2px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: normal;
  border: 1px solid rgba(171, 23, 63, 0.3);
}

/* Slider Pagination */
.swiper-pagination-bullets {
  bottom: initial !important;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-pagination-bullet {
  background: var(--greys) !important;
  opacity: 1;
  margin: 0 2px;
  height: 6px;
  width: 6px;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  background: #AB173F !important;
  height: 8px;
  width: 8px;
  box-shadow: 0 0 8px rgba(171, 23, 63, 0.5);
}

/* === Hot Today / Popular === */
.hotslid {
  margin-bottom: 20px;
}

.pop-list .paging {
  margin: 25px 0;
  height: 1px;
}

.pop-list .swiper-pagination {
  display: flex;
  align-items: center;
  bottom: initial;
  justify-content: center;
}

.hothome .releases h2 {
  padding: 10px 0;
  margin: 0;
  background: none;
  border-radius: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary) !important;
}

.listhot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.full .bs {
  width: 100% !important;
  float: none !important;
}

/* === Card System === */
.bs .bsx .limit {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.bs .bsx .limit::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(6, 24, 25, 0.6) 100%);
  transition: background 0.3s ease;
  pointer-events: none;
}

.bs .bsx .limit:hover::after {
  background: linear-gradient(180deg, transparent 30%, rgba(171, 23, 63, 0.25) 100%);
}

.bs .bsx .limit img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.bs .bsx .limit:hover img {
  transform: scale(1.06);
}

.bs .bsx .tt {
  font-weight: 500;
  line-height: 1.2rem;
  margin-top: 10px;
  height: 3.7rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.05rem;
  color: var(--text-primary) !important;
  transition: color 0.25s ease;
}

.bs .bsx:hover .tt {
  color: #AB173F !important;
}

.bs .bsx .adds {
  display: none;
}

i {
  line-height: normal;
}

/* Rating & Status */
.mobile-rt {
  display: flex;
  gap: 0.25rem;
  font-weight: 300;
  font-size: 0.75rem;
  padding: 4px;
  align-items: center;
  color: var(--text-secondary);
}

.mobile-rt i {
  color: var(--ratings) !important;
  position: relative;
  top: -1px;
}

.imptdt i,
.imptdt a {
  margin: 0;
}

.extra-info {
  display: flex;
  justify-content: space-between;
}

.status {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  padding: 2px;
}

.status > i {
  font-size: 0.8rem;
  font-weight: 300;
  color: white;
}

.imptdt {
  padding: 4px;
}

.status-dot {
  height: 10px;
  width: 10px;
  border-radius: 100%;
  display: inline-block;
  position: relative;
}

.status-dot.Dropped {
  background: #ef4444;
}

.status-dot.Ongoing {
  background: var(--status);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

@keyframes blink {
  0% { opacity: 1; }
  25% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 1; }
}

.status-dot.Mass.Released {
  background: var(--status);
  animation: blink 2s infinite;
}

.status-dot.Completed {
  background: #a855f7;
}

.status-dot.Coming.Soon {
  background: #eab308;
}

.bs .bsx .numscore {
  color: white;
  line-height: normal;
}

/* === Sections Wrapper === */
.releases,
.hothome,
.bixbox {
  background: transparent !important;
  padding: 10px;
  box-shadow: none;
  overflow: visible !important;
}

/* === Section Headings === */
.releases {
  border-bottom: 2px solid #AB173F !important;
  position: relative;
}

.releases::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: #AB173F;
  box-shadow: 0 0 12px rgba(171, 23, 63, 0.6);
}

.releases h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary) !important;
}

.hothome .releases {
  padding: 0 10px;
  border-bottom: 2px solid #AB173F !important;
}

/* === Latest Updates === */
.latest-updates {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.latest-updates .bs .bsx .tt {
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.05rem;
  height: initial;
}

.latest-updates .bs.styletere {
  width: 100%;
}

.latest-updates .bs .bsx {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 0.5rem;
  background: var(--bg-card);
  border-radius: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.latest-updates .bs .bsx:hover {
  border-color: var(--border-medium);
  box-shadow: 0 4px 20px var(--accent-glow);
}

.latest-updates .bigor {
  display: flex;
  flex-direction: column;
  height: auto;
}

/* New chapter pulse */
@keyframes new-chapter {
  0%, 100% { border-color: #AB173F; }
  30% { border-color: var(--greys); }
}

.latest-updates .bs .bsx .adds.new {
  animation: new-chapter 2s infinite;
}

.latest-updates .chapter-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: flex-end;
}

.latest-updates .bs .bsx .adds {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  font-size: 0.83rem;
  font-weight: normal;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.02);
}

.latest-updates .bs.styletere .bsx .tt {
  margin: 0;
  height: auto;
}

.latest-updates .bs.styletere .epxs {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
  margin-right: 10px;
  transition: color 0.3s ease;
}

.latest-updates .bs.styletere .epxdate {
  margin: 0;
  font-size: 0.6rem;
  margin-left: 10px;
  color: var(--text-muted);
}

.latest-updates .adds.all {
  flex-direction: column;
  color: white;
  border-color: #AB173F !important;
}

.latest-updates .bs.styletere .adds:hover {
  border-color: #AB173F !important;
  background: rgba(171, 23, 63, 0.15) !important;
  color: white;
}

.latest-updates .adds:hover .epxs {
  color: white !important;
}

.release .vl {
  display: none;
}

/* View More Button */
.vl-mobile {
  border: 2px solid #AB173F;
  text-align: center;
  padding: 0.5rem 0;
  border-radius: 8px;
  font-size: 0.85rem;
  margin: 1rem;
  transition: all 0.3s ease;
  color: #AB173F;
  font-weight: 500;
}

a.vl-mobile:hover {
  background: #AB173F !important;
  color: white !important;
  border-color: #AB173F !important;
  box-shadow: 0 4px 16px var(--accent-glow);
}

.releases .vl {
  display: none;
}

.bs {
  width: 100%;
}

.bs.styletere .bsx .tt {
  font-weight: 500;
  line-height: 1.2rem;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.05rem;
  line-height: 1.2rem;
}

/* === Coming Soon === */
.coming-soon a:hover {
  color: white;
}

.vl-mobile.coming-soonn:hover {
  background: #AB173F !important;
  color: white !important;
  border-color: #AB173F !important;
}

.coming-soon .listupd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.vl-mobile.coming-soonn {
  margin: 0 25px;
}

/* === Load More Button === */
.latest-wrap-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px 0;
}

.latest-wrap-btn a#load-more {
  display: block;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  padding: 12px 0;
  transition: all 0.3s ease;
  background: transparent !important;
  border: 2px solid #AB173F !important;
  color: #AB173F !important;
  border-radius: 8px;
  font-weight: 600;
}

.latest-wrap-btn a#load-more:hover {
  background: #AB173F !important;
  color: white !important;
  box-shadow: 0 4px 16px var(--accent-glow);
}

/* === No Chapters === */
.no-chapters {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 100px;
  color: var(--text-muted);
}

/* ==============================
   TABLET (570px+)
   ============================== */
@media (min-width: 570px) {
  .latest-updates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .vl-mobile {
    grid-column: 1 / -1;
  }

  .coming-soon .listupd {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .listupd {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
  }

  .navbar i.fas.fa-times-circle {
    margin-top: 0.4rem;
  }
}

/* Fix Genre Bar collision */
@media (min-width: 890px) and (max-width: 928px) {
  .home-genres .genre-listx a:last-child {
    display: none;
  }

  .desktop-nav .menu > li > a {
    padding: 8px 8px;
    font-size: 0.82rem;
  }
}

/* ==============================
   DESKTOP (890px+)
   ============================== */
@media (min-width: 890px) {
  .navbar.home-nav {
    position: absolute;
    z-index: 2;
    background: rgba(6, 24, 25, 0.88) !important;
    backdrop-filter: blur(12px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  }

  /* Show desktop nav, hide hamburger */
  .desktop-nav {
    display: flex !important;
    align-items: center;
    flex: 1;
    min-width: 0;
    margin: 0 16px;
  }

  .desktop-nav .menu {
    display: flex !important;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
  }

  .desktop-nav .menu > li {
    position: relative;
  }

  .desktop-nav .menu > li > a {
    color: var(--text-primary) !important;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 8px 12px;
    position: relative;
    white-space: nowrap;
    transition: color 0.2s ease;
  }

  .desktop-nav .menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #AB173F;
    transition: all 0.25s ease;
    transform: translateX(-50%);
  }

  .desktop-nav .menu > li > a:hover::after,
  .desktop-nav .menu > li.current-menu-item > a::after {
    width: 70%;
  }

  .desktop-nav .menu > li > a:hover {
    color: #AB173F !important;
  }

  .desktop-nav .menu > li.current-menu-item > a {
    color: #AB173F !important;
  }

  /* Desktop dropdown sub-menus */
  .desktop-nav .menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    min-width: 180px;
    padding: 6px 0;
    list-style: none;
    z-index: 500;
  }

  .desktop-nav .menu > li:hover > .sub-menu {
    display: block;
  }

  .desktop-nav .menu .sub-menu li a {
    display: block;
    padding: 8px 16px;
    color: var(--text-secondary) !important;
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .desktop-nav .menu .sub-menu li a:hover {
    background: rgba(171,23,63,0.1) !important;
    color: #AB173F !important;
  }

  .shme {
    display: none !important;
  }

  .mobile-panel {
    display: none !important;
  }

  .mobile-menu-overlay {
    display: none !important;
  }

  /* Hide mobile balance badge on desktop */
  .header-balance-badge {
    display: none !important;
  }

  /* Desktop dropdown positioning */
  .avatar-dropdown {
    left: auto;
    right: 0;
  }

  /* Desktop search — show inline */
  .searchx {
    display: flex !important;
    align-items: center;
  }

  .searchx #form {
    width: 100%;
    min-width: 180px;
  }

  /* Hide mobile search toggle on desktop */
  .srcmob {
    display: none !important;
  }

  /* Desktop right-area */
  .right-area {
    gap: 10px;
  }

  .right-area .socials-menu {
    display: none !important;
  }

  /* Slider */
  .big-slider {
    padding: 0;
    height: 500px;
    overflow: hidden;
    position: relative;
  }

  .swiper-button-next,
  .swiper-button-prev {
    top: 50%;
    opacity: 1;
  }

  .sliderInfoGenre li {
    color: white;
  }

  .mainslider::before {
    background: none;
  }

  .mainslider .limit {
    position: relative;
    background: var(--bg-primary) !important;
    overflow: hidden;
    height: 500px;
    display: flex;
  }

  .mainslider .limit::before {
    display: none;
  }

  .mainslider .limit .sliderinfo {
    display: block;
    bottom: 0;
    z-index: 5;
    position: relative;
    width: 25%;
  }

  .mainslider .tt {
    font-size: 3rem;
    line-height: 2.6rem;
    width: 175%;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  }

  .mainslider .limit .bigbanner {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 500px;
    width: 75%;
    position: relative;
    transition: transform 0.6s ease;
  }

  .mainslider .bigbanner:before {
    content: "";
    background: linear-gradient(
      90deg,
      var(--bg-primary) 2%,
      var(--bg-primary) 12%,
      transparent 40%,
      transparent 97%,
      transparent 100%
    );
    width: 110%;
    height: 100%;
    right: -10%;
    top: 0;
    position: absolute;
    pointer-events: none;
  }

  .mainslider .limit:hover .bigbanner {
    transform: scale(1.02);
  }

  .mainslider .limit .bigbanner:hover {
    color: white;
  }

  .mainslider .limit .sliderinfo .sliderinfolimit {
    width: 100%;
    margin: 0;
    margin-left: 3vw;
    margin-top: 45%;
    text-align: start;
  }

  .mainslider .limit:hover {
    color: white;
  }

  .mainslider .mobile-rt {
    font-weight: 400;
    font-size: 1rem;
  }

  .mainslider .status > i {
    font-size: 1rem;
    font-weight: 400;
    color: white;
  }

  .mainslider .extra-info {
    justify-content: flex-start;
  }

  .swiper-button-next:after {
    content: "f054";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    color: white;
  }

  .swiper-button-prev:after {
    content: "f053";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    color: white;
  }

  .big-slider ul.sliderInfoGenre {
    justify-content: flex-start;
  }

  .sliderInfoGenre li {
    list-style: none;
    margin: 0.1rem;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 90%;
    color: white;
    background: rgba(171, 23, 63, 0.5);
    border: 1px solid rgba(171, 23, 63, 0.3);
  }

  a:hover .mainslider .tt {
    color: white;
  }

  /* === Genre Bar === */
  .home-genres {
    position: relative;
    display: flex;
    background: var(--bg-elevated) !important;
    margin: 0;
    align-items: center;
    max-width: 100%;
    padding: 0;
    border-radius: 0;
    justify-content: center;
    z-index: 1;
    border-bottom: 1px solid var(--border-subtle);
  }

  .home-genres .genre-listx {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    margin: 0 0.8rem;
  }

  .home-genres .genre-left-text {
    padding: 0 10px;
    font-size: 130%;
    font-weight: 600;
    color: var(--text-primary);
  }

  .home-genres .genre-all-genres a {
    color: #AB173F !important;
    padding: 0 10px;
    font-size: 100%;
    font-weight: 400;
    transition: color 0.3s ease;
  }

  .home-genres .genre-listx > a {
    color: var(--text-primary);
    border: 1px solid rgba(171, 23, 63, 0.4);
    border-radius: 6px;
    padding: 9px 14px;
    margin: 10px 4px;
    line-height: 10px;
    font-size: 13px;
    text-transform: capitalize;
    transition: all 0.3s ease;
    background: rgba(171, 23, 63, 0.06);
  }

  .home-genres .genre-listx > a:hover {
    background: #AB173F !important;
    color: white !important;
    border-color: #AB173F;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--accent-glow);
  }

  .home-genres .genre-all-genres a:hover {
    color: var(--accent-hover) !important;
  }

  /* Desktop Popular Grid */
  .pop-list-desktop {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
  }

  /* Desktop Latest Updates */
  .latest-updates {
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    gap: 1rem;
  }

  .latest-updates .bs.styletere .epxs {
    font-size: 0.8rem;
  }

  .latest-updates .bs .bsx .adds {
    padding: 5px 8px;
  }

  .vl-mobile {
    grid-column: 1 / 4;
    width: 45%;
    margin-top: 1rem;
  }

  /* Coming Soon Desktop */
  .vl-mobile.coming-soonn {
    width: 30rem;
    margin: 0;
  }

  .coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .status > i {
    font-weight: 400;
  }

  .mobile-rt {
    font-weight: 400;
  }

  .coming-soon .listupd {
    display: flex;
    gap: 1rem;
  }
}

/* === New Slider Section === */
.slidernew {
  margin-top: 20px;
  position: relative;
}

.swiper-container {
  position: relative;
}

.slider-content {
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  display: block;
  max-width: 100%;
  transition: transform 0.3s ease;
}

.slider-content:hover {
  transform: scale(1.01);
}

@media (max-width: 1024px) {
  .slider-content {
    height: 400px;
  }

  .listhot {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
}

@media (max-width: 768px) {
  .slidernew {
    margin-top: 15px;
  }

  .slider-content {
    height: 300px;
  }

  .listhot {
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .slidernew {
    margin-top: 15px;
  }

  .slider-content {
    height: 220px;
  }

  .big-slider {
    height: 450px;
  }

  .big-slider img {
    height: 320px;
  }
}

@media (max-width: 480px) {
  .big-slider img {
    height: 250px;
  }
}

.slidernew .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-pagination {
  margin-top: 30px;
}

@media (max-width: 600px) {
  .latest-wrap-btn a#load-more {
    width: 100%;
  }
}

/* === Footer ===
 * CRITICAL: Parent theme (mangareader) sets #footer { position: absolute; bottom: 0; }
 * which pins it on top of content and causes overlap. We force it back into
 * normal document flow with position: static !important and bottom: auto.
 */
#footer {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--border-subtle);
  margin-top: 40px !important;
  position: static !important;
  bottom: auto !important;
  width: 100% !important;
  z-index: 1;
}

.site-footer {
  background: var(--bg-surface) !important;
  color: var(--text-secondary);
  padding: 24px 16px 32px;
}

.footer-logo img {
  max-height: 45px;
  opacity: 0.85;
}

.footermenu {
  padding: 8px 0 12px;
}

.footermenu a {
  color: var(--text-secondary) !important;
  transition: color 0.25s ease;
}

.footermenu a:hover {
  color: #AB173F !important;
}

.footercopyright {
  color: var(--text-muted) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 16px 0 24px;
}

.footercopyright .copyright .txt {
  padding: 8px 12px;
  font-size: 0.82rem;
  line-height: 1.7;
}

.footer-az .az-list a {
  color: var(--text-muted) !important;
  transition: color 0.25s ease;
}

.footer-az .az-list a:hover {
  color: #AB173F !important;
}

/* === Scroll-to-Top Button (parent theme .scrollToTop) ===
 * Parent theme sets: position: fixed; bottom: 45px; right: 25px; background: #366ad3;
 * We restyle to match our #AB173F crimson brand.
 */
.scrollToTop {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999;
  background: #AB173F !important;
  color: #fff !important;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
  padding: 0 !important;
}

.scrollToTop:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

/* === Sidebar / Widget Areas === */
.sidebar .widget,
.widget,
aside .widget {
  background: var(--bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 16px;
}

.widget-title,
.sidebar .widget h3,
.sidebar .widget h4 {
  color: var(--text-primary) !important;
  font-weight: 600;
  border-bottom: 2px solid #AB173F;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

/* =============================================
   MANGA / SERIES DETAIL PAGE  –  Full Redesign
   ============================================= */

/* --- Page wrapper --- */
.manga-info.mangastyle {
  background: var(--bg-base) !important;
}

/* --- Hero Banner (big cover bg) --- */
.bigcover {
  position: relative;
  overflow: hidden;
  max-height: 320px;
}

.bigcover .bigbanner {
  background-size: cover !important;
  background-position: center 25% !important;
  min-height: 320px;
  filter: blur(6px) brightness(0.45) saturate(1.3);
  transform: scale(1.08);
}

.bigcover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(6, 24, 25, 0.7) 65%,
    #061819 100%
  );
  pointer-events: none;
}

/* --- Main Info Container --- */
.main-info {
  position: relative;
  z-index: 2;
  margin-top: -80px;
  padding: 0 16px;
}

.first-half {
  display: flex !important;
  gap: 24px;
  align-items: flex-start;
}

/* --- Thumbnail / Cover Image --- */
.thumb-half {
  flex-shrink: 0;
  width: 240px;
  order: -1;
}

.thumb-half .thumb {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(171, 23, 63, 0.25);
}

.thumb-half .thumb img {
  width: 100% !important;
  height: 340px !important;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

/* Bookmark / login-required button under thumbnail */
.disabled-bookmark {
  background: #AB173F !important;
  border-radius: 8px !important;
  padding: 10px 8px !important;
  margin-top: 12px !important;
  font-size: 0.8rem !important;
  text-align: center;
  color: #fff !important;
  cursor: pointer;
  transition: background 0.25s ease;
}

.disabled-bookmark:hover {
  background: #c41e4a !important;
}

.disabled-bookmark i {
  margin-left: 6px;
}

/* --- Info Half (title, rating, status, genres, description) --- */
.info-half {
  flex: 1;
  min-width: 0;
  margin-right: 0 !important;
}

/* Title */
.titles {
  margin-bottom: 8px;
}

.titles .entry-title {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
  font-size: 1.6rem !important;
  line-height: 1.3;
  margin: 0 0 4px 0;
}

.titles .alternative {
  margin-top: 2px;
}

.titles .desktop-titles,
.titles .mobile-titles {
  color: var(--text-muted) !important;
  font-size: 0.85rem;
  font-style: italic;
}

/* Rating + Status row */
.extra-info.a {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.mobile-rt {
  display: flex !important;
  align-items: center;
  gap: 4px;
}

.mobile-rt .rating-prc {
  display: flex !important;
  align-items: center;
}

.mobile-rt .numscore {
  background: linear-gradient(135deg, #AB173F, #d4245a) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-block;
}

.mobile-rt .fa-star {
  color: #f5c518 !important;
  font-size: 0.9rem;
}

/* Status badge in extra-info */
.extra-info .imptdt .status {
  display: flex !important;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface);
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
}

.extra-info .imptdt .status i {
  font-style: normal !important;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

/* --- Genres --- */
.genres-container {
  margin-bottom: 12px;
}

.genres-container .mgen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.genres-container .mgen a {
  display: inline-block;
  background: rgba(171, 23, 63, 0.12) !important;
  color: #e8456a !important;
  border: 1px solid rgba(171, 23, 63, 0.3);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.78rem;
  font-weight: 500;
  transition: all 0.25s ease;
  text-decoration: none;
}

.genres-container .mgen a:hover {
  background: #AB173F !important;
  color: #fff !important;
  border-color: #AB173F;
}

/* --- Synopsis / Description --- */
.summary {
  margin-top: 14px;
}

.summary h2 {
  color: #AB173F !important;
  font-size: 1rem !important;
  font-weight: 700;
  margin-bottom: 10px;
}

.entry-content.entry-content-single {
  color: var(--text-secondary) !important;
  font-size: 0.88rem;
  line-height: 1.85;
  max-height: 100px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.4s ease;
  padding: 4px 0;
}

.entry-content.entry-content-single.clicked {
  max-height: 2000px !important;
}

.entry-content.entry-content-single p {
  color: var(--text-secondary) !important;
  margin-bottom: 8px;
}

.see-more,
.see-less {
  color: #AB173F !important;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  transition: color 0.2s ease;
}

.see-more:hover,
.see-less:hover {
  color: #d4245a !important;
}

.see-more i,
.see-less i {
  font-size: 0.75rem;
}

.hidden {
  display: none !important;
}

/* --- Metadata Panel (tsinfo bixbox) ---
 * Grid layout: labels above values in each cell.
 * Uniform spacing, consistent font sizing.
 */
.tsinfo.bixbox {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin: 20px 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px 28px;
}

/* Each metadata item: label on top, value below */
.tsinfo .imptdt {
  color: var(--text-muted) !important;
  font-size: 0.8rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Value text (inside <i>) */
.tsinfo .imptdt i {
  color: var(--text-primary) !important;
  font-style: normal !important;
  font-weight: 600;
  display: block;
  margin-top: 2px;
  font-size: 0.88rem;
}

.tsinfo .imptdt a {
  color: #AB173F !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.tsinfo .imptdt a:hover {
  color: #d4245a !important;
  text-decoration: underline;
}

.tsinfo .imptdt .author.vcard i {
  display: inline;
}

/* --- Info Desc box (if visible) --- */
.info-desc.bixbox {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* =============================================
   RIGHT SIDE  –  Chapter List
   ============================================= */

.right-side {
  margin-top: 24px;
}

/* ── Outer card wrapper ── */
.bixbox.bxcl.epcheck {
  background: linear-gradient(160deg, rgba(10,34,36,0.98), rgba(6,24,25,0.99)) !important;
  border: 1px solid rgba(171,23,63,0.2) !important;
  border-radius: 16px !important;
  padding: 22px 20px 20px !important;
  position: relative;
  overflow: hidden;
}

.bixbox.bxcl.epcheck::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #AB173F 40%, #d4264f 60%, transparent);
  opacity: 0.8;
}

/* ── Section heading ── */
.bixbox.bxcl .releases {
  margin-bottom: 18px;
}

.bixbox.bxcl .releases h2 {
  color: var(--text-primary) !important;
  font-size: 1.1rem !important;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.bixbox.bxcl .releases h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 18px;
  background: linear-gradient(180deg, #AB173F, #d4264f);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── First / Latest chapter quick links ── */
.lastend {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.lastend .inepcx { flex: unset; }

.lastend .inepcx a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  gap: 4px;
  min-height: 62px;
}

.lastend .inepcx a:hover {
  border-color: rgba(171,23,63,0.4) !important;
  background: rgba(171,23,63,0.07) !important;
  transform: translateY(-1px);
}

.lastend .inepcx a span:first-child {
  color: rgba(255,255,255,0.4) !important;
  font-size: 0.67rem !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
}

.lastend .inepcx a .epcur {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
}

.lastend .inepcx a .epcurlast { color: #AB173F !important; }

/* ── Search bar ── */
.search-chapter {
  margin-bottom: 16px;
  position: relative;
}

.search-chapter input,
#searchchapter {
  width: 100% !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--text-primary) !important;
  border-radius: 10px !important;
  padding: 10px 16px 10px 38px !important;
  font-size: 0.84rem !important;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  direction: rtl;
}

.search-chapter input::placeholder,
#searchchapter::placeholder { color: rgba(255,255,255,0.22) !important; }

.search-chapter input:focus,
#searchchapter:focus {
  border-color: rgba(171,23,63,0.5) !important;
  box-shadow: 0 0 0 3px rgba(171,23,63,0.1) !important;
  outline: none !important;
  background: rgba(255,255,255,0.05) !important;
}

.search-chapter::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.3)'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

/* ══════════════════════════════════════════════
   CHAPTER GRID CARDS
   The parent theme renders .eplister ul as a
   4-column grid. We NEVER override ul layout —
   we only style each li card and its contents.
   ══════════════════════════════════════════════ */

/* Scrollable wrapper — do NOT touch ul display */
#chapterlist.eplister,
.eplister {
  max-height: 580px;
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(171,23,63,0.4) rgba(255,255,255,0.03);
}

#chapterlist.eplister::-webkit-scrollbar,
.eplister::-webkit-scrollbar { width: 4px; }

#chapterlist.eplister::-webkit-scrollbar-track,
.eplister::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 4px; }

#chapterlist.eplister::-webkit-scrollbar-thumb,
.eplister::-webkit-scrollbar-thumb { background: rgba(171,23,63,0.4); border-radius: 4px; }

/* ul: reset only, preserve parent grid */
.eplister ul,
.bxcl ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 10px !important;
}

/* ── Individual card ── */
.bxcl ul li,
.eplister ul li {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  margin-bottom: 0 !important;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
  overflow: hidden;
  position: relative !important;
  height: auto !important;
  min-height: 85px !important;
  display: flex !important;
}

.bxcl ul li:hover,
.eplister ul li:hover {
  background: rgba(171,23,63,0.08) !important;
  border-color: rgba(171,23,63,0.35) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* ── .chbox & .eph-num ── */
.bxcl ul li .chbox,
.eplister ul li .chbox,
.bxcl ul li .eph-num,
.eplister ul li .eph-num {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1 !important;
}

/* ── Link: perfectly spaces text ── */
.bxcl ul li .eph-num a,
.eplister ul li .eph-num a {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* RTL context = aligns right */
  justify-content: center !important;
  padding: 16px 20px !important;
  text-decoration: none !important;
  color: var(--text-primary) !important;
  gap: 6px;
  flex: 1 !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.bxcl ul li .eph-num a:hover,
.eplister ul li .eph-num a:hover {
  color: #e8405a !important;
}

/* ── Chapter name ── */
.chapternum {
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  color: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: calc(100% - 60px) !important; /* Leave room for the coin badge */
  line-height: 1.2 !important;
  font-family: 'Noto Sans Arabic', sans-serif;
}

/* ── Date ── */
.chapterdate {
  color: rgba(255,255,255,0.45) !important;
  font-size: 0.8rem !important;
  white-space: nowrap !important;
  line-height: 1;
  font-family: 'Noto Sans Arabic', sans-serif;
}

/* ── Coin badge — Centered on the left side ── */
.chapter-points-badge {
  position: absolute !important;
  top: 50% !important;
  left: 16px !important; /* Pin to left side */
  transform: translateY(-50%) !important;
  bottom: auto !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: rgba(247,147,30,0.12) !important;
  border: 1px solid rgba(247,147,30,0.25) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  height: auto !important;
  width: auto !important;
  box-sizing: border-box !important;
}

.chapter-points-badge svg {
  width: 14px !important;
  height: 14px !important;
  fill: #f7931e !important;
  color: #f7931e !important;
  flex-shrink: 0;
}

.chapter-points-badge .points-number {
  color: #f7931e !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  line-height: 1;
}

/* Hover: brighten badge */
.eplister ul li:hover .chapter-points-badge,
.bxcl ul li:hover .chapter-points-badge {
  background: rgba(247,147,30,0.2) !important;
  border-color: rgba(247,147,30,0.4) !important;
}

/* Download icon */
.bxcl ul li .dt,
.eplister ul li .dt {
  display: none;
}

/* First chapter */
.eplister ul li.first-chapter,
.bxcl ul li.first-chapter {
  border-color: rgba(100,200,180,0.18) !important;
}

/* Purchased chapters */
.eplister ul li.mpc-owned,
.bxcl ul li.mpc-owned {
  border-color: rgba(74,222,128,0.2) !important;
}

/* =============================================
   COMMENTS SECTION
   ============================================= */
#comments.bixbox.comments-area {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-top: 24px;
}

#comments .releases h2 {
  color: var(--text-primary) !important;
  font-weight: 700;
}

#comments .releases h2 span {
  color: var(--text-primary) !important;
}

/* =============================================
   SERIES PAGE  –  Responsive  (v2.2.0)
   =============================================
   Three breakpoints: 768 → tablet, 480 → phone, 360 → small phone.
   Cover stacks above info in column layout.
   Chapter list: name wraps, date goes beneath on narrow screens.
   ============================================= */

/* ---------- Tablet  (≤ 768px) ---------- */
@media (max-width: 768px) {
  /* Hero banner */
  .bigcover {
    max-height: 260px;
  }

  .bigcover .bigbanner {
    min-height: 260px;
  }

  .main-info {
    margin-top: -60px;
    padding: 0 14px;
  }

  /* Stack cover above info */
  .first-half {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
    gap: 18px;
  }

  /* --- Cover: large & prominent --- */
  .thumb-half {
    width: 320px;
    max-width: 85vw;
    order: -1;
  }

  .thumb-half .thumb img {
    height: 450px !important;
  }

  /* --- Info section --- */
  .info-half {
    flex: 1;
    min-width: 0;
    width: 100%;
  }

  .titles .entry-title {
    font-size: 1.35rem !important;
    line-height: 1.4;
  }

  .titles .alternative {
    font-size: 0.82rem;
    margin-top: 4px;
  }

  .extra-info.a {
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .genres-container .mgen {
    justify-content: center;
  }

  .genres-container .mgen a {
    padding: 4px 13px;
    font-size: 0.76rem;
  }

  /* Synopsis: comfortable padding + line-height */
  .summary {
    margin-top: 12px;
  }

  .summary h2 {
    font-size: 0.92rem !important;
  }

  .entry-content.entry-content-single {
    font-size: 0.84rem;
    line-height: 1.75;
    max-height: 90px;
    text-align: right;
    padding: 6px 4px;
  }

  /* Metadata grid — 2 columns, uniform gaps */
  .tsinfo.bixbox {
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    padding: 16px !important;
    margin: 16px 0 !important;
  }

  .tsinfo .imptdt {
    font-size: 0.78rem;
  }

  .tsinfo .imptdt i {
    font-size: 0.84rem;
  }

  /* ── Chapter quick links ── */
  .lastend {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .lastend .inepcx a {
    padding: 10px 12px !important;
    min-height: 54px;
  }

  .bixbox.bxcl.epcheck {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .bixbox.bxcl .releases h2 {
    font-size: 1rem !important;
  }

  .eplister,
  #chapterlist.eplister {
    max-height: 500px;
  }

  /* Cards: compact on tablet */
  .bxcl ul li,
  .eplister ul li {
    min-height: 74px !important;
    height: auto !important;
  }

  .bxcl ul li .eph-num a,
  .eplister ul li .eph-num a {
    padding: 12px 14px !important;
  }

  .chapternum {
    font-size: 0.84rem !important;
	white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    max-width: 100% !important;
  }

  .chapterdate {
    font-size: 0.66rem !important;
  }

  .chapter-points-badge {
    left: 12px !important;
    padding: 4px 10px !important;
  }

  /* Bookmark button */
  .disabled-bookmark,
  .bookmark {
    font-size: 0.82rem !important;
    padding: 10px 10px !important;
    margin-top: 14px !important;
  }

  /* Footer: normal flow, not absolute */
  #footer {
    margin-top: 30px !important;
    position: static !important;
    bottom: auto !important;
  }

  .footercopyright {
    padding: 16px 10px 24px;
  }
}

/* ---------- Phone  (≤ 480px) ---------- */
@media (max-width: 480px) {
  .bigcover {
    max-height: 220px;
  }

  .bigcover .bigbanner {
    min-height: 220px;
  }

  .main-info {
    margin-top: -50px;
    padding: 0 10px;
  }

  .first-half {
    gap: 14px;
  }

  .thumb-half {
    width: 280px;
    max-width: 80vw;
  }

  .thumb-half .thumb img {
    height: 400px !important;
  }

  .titles .entry-title {
    font-size: 1.2rem !important;
  }

  .genres-container .mgen a {
    padding: 3px 10px;
    font-size: 0.72rem;
  }

  .entry-content.entry-content-single {
    max-height: 70px;
    font-size: 0.82rem;
    line-height: 1.7;
    padding: 4px 2px;
  }

  /* Metadata: 2 columns tight */
  .tsinfo.bixbox {
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    padding: 12px !important;
  }

  .tsinfo .imptdt {
    font-size: 0.75rem;
  }

  .tsinfo .imptdt i {
    font-size: 0.82rem;
  }

  /* Chapter cards: smaller fixed height on phones */
  .bxcl ul li,
  .eplister ul li {
    min-height: 68px !important;
    height: auto !important;
    border-radius: 8px !important;
  }

  .bxcl ul li .eph-num a,
  .eplister ul li .eph-num a {
    padding: 10px 12px !important;
  }

  .chapternum {
    font-size: 0.8rem !important;
  }

  .chapterdate {
    font-size: 0.63rem !important;
  }

  .chapter-points-badge {
    left: 10px !important;
    padding: 4px 8px !important;
  }

  .chapter-points-badge svg {
    width: 12px !important;
    height: 12px !important;
  }

  .chapter-points-badge .points-number {
    font-size: 0.75rem !important;
  }

  .bixbox.bxcl .releases h2 {
    font-size: 0.95rem !important;
  }

  .lastend {
    gap: 6px;
  }

  .lastend .inepcx a {
    padding: 8px 10px !important;
    min-height: 50px;
  }

  .lastend .inepcx a .epcur {
    font-size: 0.85rem !important;
  }

  #footer {
    margin-top: 24px !important;
    position: static !important;
    bottom: auto !important;
  }
}

/* ---------- Small phone  (≤ 360px) ---------- */
@media (max-width: 360px) {
  .thumb-half {
    width: 240px;
    max-width: 78vw;
  }

  .thumb-half .thumb img {
    height: 340px !important;
  }

  .titles .entry-title {
    font-size: 1.1rem !important;
  }

  .genres-container .mgen a {
    padding: 2px 8px;
    font-size: 0.68rem;
  }

  .extra-info.a {
    gap: 6px;
  }

  .mobile-rt .numscore {
    font-size: 0.75rem;
    padding: 2px 8px;
  }

  .eplister .chapternum {
    font-size: 0.82rem;
  }

  .eplister .chapterdate {
    font-size: 0.65rem;
  }
}

/* Override inline disabled-bookmark style */
.disabled-bookmark {
  background: #AB173F !important;
}

/* Legacy infox selectors (fallback) */
.infox h1,
.infox .entry-title {
  color: var(--text-primary) !important;
  font-weight: 700;
}

.spe span,
.infox .spe span {
  color: var(--text-secondary) !important;
}

.spe span b,
.infox .spe span b {
  color: var(--text-primary) !important;
}

/* === Reader === */
@media only screen and (max-width: 800px) {
  #readerarea.rdminimal {
    margin: 0px;
  }
}

/* RTL Navigation */
.nextprev {
  direction: rtl;
}

/* === Buttons Global === */
.btn,
button,
input[type="submit"],
.flavor-btn {
  transition: all 0.3s ease;
}

.flavor-btn,
.flavor-btn:visited {
  background: #AB173F !important;
  color: white !important;
  border: none;
  border-radius: 8px;
}

.flavor-btn:hover {
  background: var(--accent-hover) !important;
  box-shadow: 0 4px 16px var(--accent-glow);
  transform: translateY(-1px);
}

/* === Scrollbar === */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-elevated);
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

::-webkit-scrollbar-thumb:hover {
  background: #AB173F;
}

/* === Selection === */
::selection {
  background: rgba(171, 23, 63, 0.35);
  color: white;
}

::-moz-selection {
  background: rgba(171, 23, 63, 0.35);
  color: white;
}

/* === Contact Dialog === */
.mpc-contact-notice {
  position: relative;
  background: linear-gradient(135deg, rgba(171, 23, 63, 0.08) 0%, rgba(6, 24, 25, 0.9) 100%) !important;
  border: 2px solid rgba(171, 23, 63, 0.2) !important;
  border-radius: 16px;
  padding: 40px 50px;
  text-align: center;
  color: var(--text-primary);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  max-width: 600px;
  margin: 0 auto;
  animation: slideInUp 0.4s ease-out;
}

.mpc-contact-notice::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #AB173F, #061819);
  border-radius: 16px;
  opacity: 0.1;
  z-index: -1;
}

.mpc-contact-notice p {
  margin: 0 0 24px 0;
  line-height: 1.7;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.9);
}

.mpc-contact-notice p:first-of-type {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 12px;
}

.mpc-contact-links {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.mpc-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  color: #fff !important;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.mpc-contact-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.5s ease;
}

.mpc-contact-link:hover::before {
  left: 100%;
}

.mpc-contact-link i {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.mpc-contact-link:hover i {
  transform: scale(1.2) rotate(5deg);
}

.mpc-contact-link.discord {
  background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
}

.mpc-contact-link.telegram {
  background: linear-gradient(135deg, #229ed9 0%, #0088cc 100%);
}

.mpc-contact-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  color: white !important;
}

.mpc-contact-link:active {
  transform: translateY(-1px);
}

/* Contact Banner Variant */
.mpc-contact-banner {
  background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%) !important;
  border: 2px solid rgba(171, 23, 63, 0.15) !important;
  border-radius: 16px;
  padding: 32px 40px;
  margin-bottom: 24px;
  text-align: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.mpc-contact-banner p {
  margin: 0 0 20px 0;
  color: var(--text-primary);
  line-height: 1.7;
  font-size: 16px;
}

.mpc-contact-banner .mpc-contact-links {
  margin-top: 16px;
}

/* Icon Enhancement */
.mpc-contact-notice .icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(171, 23, 63, 0.2) 0%, rgba(6, 24, 25, 0.4) 100%) !important;
  margin-bottom: 20px;
}

.mpc-contact-notice .icon-wrapper i {
  font-size: 32px;
  background: linear-gradient(135deg, #AB173F, #c91e4a) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mpc-contact-link {
  animation: slideInUp 0.4s ease-out;
}

.mpc-contact-link:nth-child(1) {
  animation-delay: 0.1s;
}

.mpc-contact-link:nth-child(2) {
  animation-delay: 0.2s;
}

/* Contact Responsive */
@media (max-width: 768px) {
  .mpc-contact-notice {
    padding: 32px 24px;
    max-width: 90%;
  }

  .mpc-contact-notice p {
    font-size: 15px;
  }

  .mpc-contact-notice p:first-of-type {
    font-size: 17px;
  }

  .mpc-contact-link {
    padding: 12px 24px;
    font-size: 15px;
  }

  .mpc-contact-banner {
    padding: 24px 20px;
  }
}

@media (max-width: 480px) {
  .mpc-contact-links {
    flex-direction: column;
    width: 100%;
  }

  .mpc-contact-link {
    width: 100%;
    justify-content: center;
  }
}


/* === Flame Mascot === */
.flame-mascot,
.flame_mascot {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

/* === Pagination === */
.pagination a,
.page-numbers {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  transition: all 0.25s ease;
}

.pagination a:hover,
.page-numbers:hover {
  background: rgba(171, 23, 63, 0.15) !important;
  border-color: #AB173F !important;
  color: #AB173F !important;
}

.pagination .current,
.page-numbers.current {
  background: #AB173F !important;
  color: white !important;
  border-color: #AB173F !important;
}

/* === Breadcrumb === */
.breadcrumb,
#breadcrumbs {
  color: var(--text-muted) !important;
}

.breadcrumb a,
#breadcrumbs a {
  color: var(--text-secondary) !important;
}

.breadcrumb a:hover,
#breadcrumbs a:hover {
  color: #AB173F !important;
}

/* === Taxonomy / Genre Tags on Series Page === */
.seriestugenre a {
  background: rgba(171, 23, 63, 0.1) !important;
  border: 1px solid rgba(171, 23, 63, 0.3) !important;
  color: #AB173F !important;
  border-radius: 6px;
  padding: 4px 12px;
  display: inline-block;
  margin: 2px;
  transition: all 0.25s ease;
  font-size: 0.85rem;
}

.seriestugenre a:hover {
  background: #AB173F !important;
  color: white !important;
}

/* === Tabs (Hot/New) === */
.tabseries .tabslist a,
ul.flavor-tabs li a {
  color: var(--text-secondary) !important;
  border-bottom: 2px solid transparent;
  transition: all 0.25s ease;
  padding-bottom: 6px;
}

.tabseries .tabslist a:hover,
ul.flavor-tabs li a:hover {
  color: #AB173F !important;
}

.tabseries .tabslist a.active,
ul.flavor-tabs li.active a,
ul.flavor-tabs li a.active {
  color: #AB173F !important;
  border-bottom-color: #AB173F !important;
  font-weight: 600;
}

/* === Bookmark / Favorite Button === */
.bmc,
.bookmark-btn {
  background: var(--bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-primary) !important;
  border-radius: 8px;
  transition: all 0.25s ease;
}

.bmc:hover,
.bookmark-btn:hover {
  border-color: #AB173F !important;
  color: #AB173F !important;
}

/* === Login / Auth Forms === */
.login-form,
.auth-form,
#loginform {
  background: var(--bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}

/* === Tooltip / Popover === */
.tippy-box,
.tooltip {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

/* === General Overrides for Theme Inline Accents === */
.colored,
.flavor-text,
.accent-text {
  color: #AB173F !important;
}

/* Override any remaining inline accent from Themesia Customizer */
a:not(.mpc-contact-link):hover {
  color: #AB173F !important;
}

.genre-listx a:hover {
  color: white !important;
}

/* === Force Dark Background Everywhere === */
.content-area,
.mainholder .content-area,
.mainholder #content,
#content {
  background: transparent !important;
}

/* Sub-pages & archives */
.listupd,
.listpage,
.archivelist {
  background: transparent !important;
}

/* ==========================================================
   Archive / Manga Grid — CSS Grid override
   Parent theme uses float:left + width% which breaks layout.
   Convert to modern CSS Grid for all .listupd grids.
   ========================================================== */

/* Make postbody full-width — sidebar is empty/unused */
.postbody {
  float: none !important;
  width: 100% !important;
}

/* Hide empty sidebar */
#sidebar:empty {
  display: none !important;
}

/* Base grid: 2 columns on mobile (default) */
.listupd {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  padding: 10px !important;
  overflow: visible !important;
}

/* Override float-based layout on .bs items inside grid */
.listupd .bs {
  float: none !important;
  width: 100% !important;
}

/* 3 columns at 570px+ (tablet) */
@media (min-width: 570px) {
  .listupd {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
}

/* 4 columns at 768px+ */
@media (min-width: 768px) {
  .listupd {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
}

/* 5 columns at 890px+ (desktop) */
@media (min-width: 890px) {
  .listupd {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 16px !important;
  }
}

/* 6 columns at 1200px+ (wide desktop) */
@media (min-width: 1200px) {
  .listupd {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

/* Desktop Menu Items — now handled in the desktop 890px+ media query above */

/* === Smooth Page Transitions === */
.bsx,
.bs,
.limit,
img {
  will-change: auto;
}

/* === Table Styling (if used) === */
table {
  border-collapse: collapse;
}

table th,
table td {
  border-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-primary);
}

table th {
  background: var(--bg-elevated) !important;
}

table tr:nth-child(even) {
  background: var(--bg-card) !important;
}

table tr:hover {
  background: rgba(171, 23, 63, 0.05) !important;
}

/* === Comment Section (if present) === */
.comments-area,
.comment-body {
  background: var(--bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}

.comment-reply-link {
  color: #AB173F !important;
}

.comment-form textarea,
.comment-form input {
  background: var(--bg-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
}

.comment-form textarea:focus,
.comment-form input:focus {
  border-color: #AB173F !important;
  box-shadow: 0 0 0 2px var(--accent-glow) !important;
}

/* === 404 / Empty States === */
.not-found h1,
.error-404 h1 {
  color: #AB173F !important;
}

/* === Misc Theme Overrides === */
.epxs::before {
  color: var(--text-muted);
}

mark,
.highlight {
  background: rgba(171, 23, 63, 0.2) !important;
  color: white !important;
}

/* Remove any blue tones from the genre bar */
.home-genres {
  background: var(--bg-elevated) !important;
}

/* Ensure all background layers are dark teal */
.mainholder > *:not(.navbar):not(.big-slider) {
  background: transparent !important;
}

/* ============================================================
   THEMESIA INLINE STYLE OVERRIDES
   Override the ionCube-generated inline style block
   that still uses the old accent color (#8b5cf6 / #0b7ced)
   ============================================================ */

/* Pagination bullets */
.pagination span.swiper-pagination-bullet-active {
  background: #AB173F !important;
}

.pagination span.page-numbers.current {
  background: #AB173F !important;
}

/* Quick filter & hover states */
.quickfilter .filter li a:hover {
  background: #AB173F !important;
}

.bs.stylesix .bsx .chfiv li a:hover {
  background: #AB173F !important;
}

.bs.stylesix .bsx .chfiv li a {
  color: #AB173F !important;
}

.bs.stylesix .bsx .chfiv li a:before {
  background: #AB173F !important;
}

/* Chapter number links */
.eph-num a:hover {
  background: #AB173F !important;
  border-color: #AB173F !important;
}

.paginationjs ul li.active a {
  background: #AB173F !important;
}

/* Series list & visited links */
.serieslist ul li .leftseries span a,
.luf ul li a,
.luf ul li a:visited {
  color: #AB173F !important;
}

/* Episode history */
#ts-episode-history .eph-num a:hover {
  border-color: #AB173F !important;
  background: #AB173F !important;
}

/* Genre bar - kill old blue #0b7ced */
.home-genres .alman a {
  color: #AB173F !important;
}

.home-genres.gennom2,
.lightmode .home-genres.gennom2 {
  border-color: #AB173F !important;
  background: var(--bg-elevated) !important;
}

.home-genres.gennom2 .alman a,
.lightmode .home-genres.gennom2 .alman a {
  background: #AB173F !important;
  color: white !important;
}

/* Tab items  */
.chap .epxs,
.thumbook .adds .epxs {
  color: #AB173F !important;
}

/* Any leftover flavor/accent anchors */
.colored,
a.colored,
.flavor a,
span.flavor {
  color: #AB173F !important;
}

/* lightmode overrides (in case user toggles) */
.lightmode .serieslist ul li .leftseries span a {
  color: #AB173F !important;
}


/* ==========================================================
   Chapter Reader Protection
   Ensure chapter text/lock content is never clipped
   ========================================================== */
#content.readercontent .postbody,
#content.readercontent .postbody.full,
#content.readercontent #readerarea,
#content.readercontent .entry-content,
#content.readercontent .entry-content-single {
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
}

/* Keep the reader area fully visible */
#readerarea {
  max-height: none !important;
  overflow: visible !important;
}

/* Undo all gradient overlays on chapter reading pages */
#content.readercontent .entry-content::after,
#content.readercontent .entry-content-single::after {
  content: none !important;
  display: none !important;
}


/* ==========================================================
   Lock Screen — Crimson Theme Override (replaces cyan)
   ========================================================== */
:root {
  --mpc-accent: #AB173F !important;
  --mpc-accent-dim: rgba(171, 23, 63, 0.12) !important;
  --mpc-accent-glow: rgba(171, 23, 63, 0.25) !important;
}

.mpc-chapter-lock {
  background: var(--bg-primary, #061819) !important;
  min-height: 50vh !important;
  border-radius: 16px !important;
  margin: 20px 0 !important;
}

.mpc-chapter-lock::before {
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(171, 23, 63, 0.08) 0%, transparent 70%) !important;
}

.mpc-lock-content {
  background: var(--bg-card, #0a1214) !important;
  border: 1px solid rgba(171, 23, 63, 0.15) !important;
  border-radius: 20px !important;
  padding: 40px 32px !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(171, 23, 63, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* Lock Icon */
.mpc-lock-icon {
  background: rgba(171, 23, 63, 0.12) !important;
}

.mpc-lock-icon i {
  color: #AB173F !important;
  -webkit-text-fill-color: #AB173F !important;
}

.mpc-lock-content h2 {
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
}

.mpc-lock-subtitle {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Price Box */
.mpc-price-box {
  background: rgba(171, 23, 63, 0.06) !important;
  border: 1px solid rgba(171, 23, 63, 0.15) !important;
  border-radius: 14px !important;
}

.mpc-price-box::before {
  display: none !important;
}

.mpc-price-value {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.mpc-price-value .coin-icon {
  background: linear-gradient(135deg, #f7931e, #f5a623) !important;
  box-shadow: 0 4px 12px rgba(247, 147, 30, 0.3) !important;
}

/* Balance Box */
.mpc-balance-box {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.mpc-balance-box strong {
  color: #AB173F !important;
}

.mpc-balance-box .coin-icon {
  background: linear-gradient(135deg, #f7931e, #f5a623) !important;
}

/* Notices */
.mpc-insufficient-notice {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.18) !important;
  color: #f87171 !important;
}

.mpc-login-notice {
  background: rgba(171, 23, 63, 0.08) !important;
  border: 1px solid rgba(171, 23, 63, 0.18) !important;
  color: #AB173F !important;
}

/* Buttons */
.mpc-buy-chapter-btn {
  background: #AB173F !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(171, 23, 63, 0.3) !important;
}

.mpc-buy-chapter-btn:hover {
  box-shadow: 0 8px 28px rgba(171, 23, 63, 0.45) !important;
  filter: brightness(1.1);
}

.mpc-get-points-btn {
  background: transparent !important;
  color: #AB173F !important;
  border: 2px solid #AB173F !important;
  border-radius: 14px !important;
}

.mpc-get-points-btn:hover {
  background: rgba(171, 23, 63, 0.1) !important;
  box-shadow: 0 8px 24px rgba(171, 23, 63, 0.2) !important;
}

.mpc-login-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 14px !important;
}

.mpc-login-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

/* Premium Badge */
.mpc-badge.premium {
  background: rgba(171, 23, 63, 0.12) !important;
  color: #AB173F !important;
  border: 1px solid rgba(171, 23, 63, 0.2) !important;
}

/* Chapter List Locked Hover — handled in chapter list section above */

/* Modal Overrides */
.mpc-modal-overlay {
  background: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(16px) !important;
}

.mpc-modal-content {
  background: var(--bg-primary, #061819) !important;
  border: 1px solid rgba(171, 23, 63, 0.12) !important;
  border-radius: 24px !important;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(171, 23, 63, 0.08) !important;
}

.mpc-modal-close:hover {
  background: rgba(171, 23, 63, 0.08) !important;
  border-color: rgba(171, 23, 63, 0.2) !important;
  color: #AB173F !important;
}

.mpc-modal-kicker {
  background: rgba(171, 23, 63, 0.08) !important;
  color: #AB173F !important;
  border: 1px solid rgba(171, 23, 63, 0.12) !important;
}

.mpc-modal-kicker i {
  color: #AB173F !important;
}

/* Package Cards */
.mpc-package-card:hover {
  border-color: rgba(171, 23, 63, 0.25) !important;
  background: rgba(171, 23, 63, 0.04) !important;
}

.mpc-package-card.selected {
  border-color: #AB173F !important;
  background: rgba(171, 23, 63, 0.08) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px #AB173F,
    0 0 24px rgba(171, 23, 63, 0.12) !important;
}

.mpc-package-coin {
  background: linear-gradient(135deg, #f7931e, #f5a623) !important;
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.15),
    0 4px 12px rgba(247, 147, 30, 0.25) !important;
}

.mpc-package-bonus-chip {
  background: rgba(171, 23, 63, 0.12) !important;
  color: #AB173F !important;
  border: 1px solid rgba(171, 23, 63, 0.18) !important;
}

/* Summary in Modal */
.mpc-summary-total {
  color: #AB173F !important;
}

.mpc-modal-scroll::-webkit-scrollbar-thumb {
  background: rgba(171, 23, 63, 0.2) !important;
}

.mpc-modal-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(171, 23, 63, 0.4) !important;
}

/* Lock Screen Responsive */
@media (max-width: 640px) {
  .mpc-lock-content {
    padding: 28px 18px !important;
    border-radius: 16px !important;
  }

  .mpc-lock-content h2 {
    font-size: 19px !important;
  }

  .mpc-modal-content {
    border-radius: 16px !important;
  }
}


/* =============================================================================
   POST REACTIONS BAR — Manga Series & Chapter Pages 
   ============================================================================= */

.km-post-reactions {
    background: linear-gradient(135deg, rgba(12, 42, 45, 0.95), rgba(6, 24, 25, 0.98));
    border: 1px solid rgba(171, 23, 63, 0.25);
    border-radius: 16px;
    padding: 20px 24px;
    margin: 20px 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
}

.km-post-reactions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #AB173F, #d4264f, #AB173F, transparent);
    opacity: 0.6;
}

.km-pr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(240, 240, 240, 0.08);
}

.km-pr-label {
    font-size: 15px;
    font-weight: 700;
    color: #f0f0f0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.km-pr-label i {
    color: #AB173F;
    font-size: 14px;
}

.km-pr-total {
    font-size: 13px;
    color: rgba(240, 240, 240, 0.5);
}

.km-pr-total-count {
    color: #d4264f;
    font-weight: 700;
    font-size: 14px;
}

.km-pr-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.km-pr-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(240, 240, 240, 0.04);
    border: 1px solid rgba(240, 240, 240, 0.08);
    border-radius: 12px;
    padding: 12px 14px 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 72px;
    position: relative;
    overflow: hidden;
    color: #f0f0f0;
    font-family: inherit;
}

.km-pr-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(171, 23, 63, 0.15), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.km-pr-btn:hover {
    background: rgba(171, 23, 63, 0.12);
    border-color: rgba(171, 23, 63, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(171, 23, 63, 0.15);
}

.km-pr-btn:hover::before {
    opacity: 1;
}

.km-pr-btn:active {
    transform: translateY(0) scale(0.96);
}

.km-pr-btn.active {
    background: rgba(171, 23, 63, 0.18);
    border-color: rgba(212, 38, 79, 0.5);
    box-shadow: 0 0 16px rgba(171, 23, 63, 0.2), inset 0 0 12px rgba(171, 23, 63, 0.08);
}

.km-pr-btn.active .km-pr-name {
    color: #d4264f;
    font-weight: 600;
}

.km-pr-btn.active .km-pr-count {
    background: rgba(212, 38, 79, 0.25);
    color: #f0f0f0;
}

.km-pr-btn.km-loading {
    opacity: 0.6;
    pointer-events: none;
}

.km-pr-emoji {
    font-size: 28px;
    line-height: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.km-pr-btn:hover .km-pr-emoji {
    transform: scale(1.2);
}

.km-pr-btn.active .km-pr-emoji {
    transform: scale(1.1);
    animation: km-pr-pulse 2s ease-in-out infinite;
}

@keyframes km-pr-pulse {
    0%, 100% { transform: scale(1.1); }
    50% { transform: scale(1.2); }
}

.km-pr-btn.km-pr-just-toggled .km-pr-emoji {
    animation: km-pr-pop 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes km-pr-pop {
    0% { transform: scale(1); }
    30% { transform: scale(1.5) rotate(-10deg); }
    60% { transform: scale(0.9) rotate(5deg); }
    100% { transform: scale(1.1); }
}

.km-pr-name {
    font-size: 11px;
    color: rgba(240, 240, 240, 0.55);
    font-weight: 500;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.km-pr-count {
    font-size: 12px;
    font-weight: 700;
    color: rgba(240, 240, 240, 0.7);
    background: rgba(240, 240, 240, 0.06);
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

/* Floating emoji animation */
.km-pr-float {
    position: absolute;
    font-size: 32px;
    pointer-events: none;
    z-index: 9999;
    animation: km-pr-float-up 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes km-pr-float-up {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    50% { opacity: 0.8; transform: translateY(-40px) scale(1.3); }
    100% { opacity: 0; transform: translateY(-80px) scale(0.6); }
}

/* Chapter page specific — narrower layout */
.chapterbody .km-post-reactions {
    margin: 16px auto;
    max-width: 600px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .km-post-reactions {
        padding: 16px;
        border-radius: 12px;
    }
    .km-pr-buttons {
        gap: 6px;
    }
    .km-pr-btn {
        min-width: 56px;
        padding: 10px 8px 8px;
        border-radius: 10px;
    }
    .km-pr-emoji {
        font-size: 24px;
    }
    .km-pr-name {
        font-size: 10px;
    }
    .km-pr-count {
        font-size: 11px;
        padding: 1px 6px;
    }
    .km-pr-header {
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
    .km-pr-label {
        font-size: 13px;
    }
}

/* ═══════════════════════════════════════════════════════════
   RECRUITMENT BANNER — Glass-morphism UI
   ═══════════════════════════════════════════════════════════ */

.km-recruit-banner {
    --km-accent: #AB173F;
    position: relative;
    margin: 0 auto 20px;
    max-width: 100%;
    padding: 0 15px;
}

.km-recruit-inner {
    position: relative;
    background: linear-gradient(135deg, rgba(12, 42, 45, 0.95), rgba(6, 24, 25, 0.98));
    border: 1px solid rgba(171, 23, 63, 0.25);
    border-radius: 16px;
    padding: 28px 32px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 0 60px rgba(171, 23, 63, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ── Animated background orbs ── */
.km-recruit-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.12;
    pointer-events: none;
    animation: km-recruit-orb-float 8s ease-in-out infinite;
}

.km-recruit-bg-orb-1 {
    width: 200px;
    height: 200px;
    background: var(--km-accent);
    top: -60px;
    right: -40px;
    animation-delay: 0s;
}

.km-recruit-bg-orb-2 {
    width: 150px;
    height: 150px;
    background: #1a8a8a;
    bottom: -40px;
    left: -30px;
    animation-delay: -4s;
}

@keyframes km-recruit-orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(15px, -10px) scale(1.1); }
}

/* ── Header ── */
.km-recruit-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.km-recruit-icon-wrap {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--km-accent), rgba(171, 23, 63, 0.6));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 16px rgba(171, 23, 63, 0.3);
}

.km-recruit-titles {
    flex: 1;
    min-width: 200px;
}

.km-recruit-title {
    font-size: 20px;
    font-weight: 700;
    color: #f0f0f0;
    margin: 0 0 6px;
    line-height: 1.3;
    font-family: 'Noto Sans Arabic', sans-serif;
}

.km-recruit-subtitle {
    font-size: 14px;
    color: rgba(240, 240, 240, 0.65);
    margin: 0;
    line-height: 1.6;
    font-family: 'Noto Sans Arabic', sans-serif;
}

.km-recruit-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(171, 23, 63, 0.15);
    border: 1px solid rgba(171, 23, 63, 0.3);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #e8a0b4;
    white-space: nowrap;
    font-family: 'Noto Sans Arabic', sans-serif;
}

.km-recruit-badge-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: km-recruit-pulse 2s ease-in-out infinite;
}

@keyframes km-recruit-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* ── Roles Grid ── */
.km-recruit-roles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.km-recruit-role {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
    transition: all 0.25s ease;
}

.km-recruit-role:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(171, 23, 63, 0.25);
    transform: translateY(-1px);
}

.km-recruit-role.km-role-closed {
    opacity: 0.5;
}

.km-recruit-role-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--km-accent);
}

.km-role-open .km-recruit-role-icon {
    color: #e8a0b4;
    background: rgba(171, 23, 63, 0.12);
}

.km-recruit-role-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.km-recruit-role-name {
    font-size: 14px;
    font-weight: 600;
    color: #f0f0f0;
    font-family: 'Noto Sans Arabic', sans-serif;
}

.km-recruit-role-desc {
    font-size: 12px;
    color: rgba(240, 240, 240, 0.5);
    line-height: 1.4;
    font-family: 'Noto Sans Arabic', sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.km-recruit-role-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Noto Sans Arabic', sans-serif;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 8px;
}

.km-role-open .km-recruit-role-status {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.km-role-closed .km-recruit-role-status {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.15);
}

.km-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.km-status-dot.open {
    background: #22c55e;
    animation: km-recruit-pulse 2s ease-in-out infinite;
}

.km-status-dot.closed {
    background: #94a3b8;
}

/* ── CTA Buttons — Telegram + Discord side by side ── */
.km-recruit-cta {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.km-recruit-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff !important;
    padding: 12px 32px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s ease;
    font-family: 'Noto Sans Arabic', sans-serif;
    min-width: 160px;
    justify-content: center;
}

/* Telegram button */
.km-recruit-btn-tg {
    background: linear-gradient(135deg, #0088cc, #00aaee);
    box-shadow: 0 4px 20px rgba(0, 136, 204, 0.35);
}

.km-recruit-btn-tg:hover {
    box-shadow: 0 6px 28px rgba(0, 136, 204, 0.50);
}

/* Discord button */
.km-recruit-btn-dc {
    background: linear-gradient(135deg, #5865F2, #7289DA);
    box-shadow: 0 4px 20px rgba(88, 101, 242, 0.35);
}

.km-recruit-btn-dc:hover {
    box-shadow: 0 6px 28px rgba(88, 101, 242, 0.50);
}

/* Fallback — generic accent if no variant class */
.km-recruit-btn:not(.km-recruit-btn-tg):not(.km-recruit-btn-dc) {
    background: linear-gradient(135deg, var(--km-accent), #d4264f);
    box-shadow: 0 4px 20px rgba(171, 23, 63, 0.35);
}

.km-recruit-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    color: #fff !important;
    text-decoration: none !important;
}

.km-recruit-btn:active {
    transform: translateY(0);
}

.km-recruit-btn i {
    font-size: 18px;
}

.km-recruit-btn svg {
    transition: transform 0.3s ease;
}

.km-recruit-btn:hover svg {
    transform: translateX(-4px);
}

/* ── RTL adjustments ── */
.rtl .km-recruit-btn:hover svg {
    transform: translateX(4px);
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    .km-recruit-inner {
        padding: 22px 18px;
        border-radius: 12px;
    }

    .km-recruit-banner {
        padding: 0 10px;
    }

    .km-recruit-header {
        gap: 12px;
    }

    .km-recruit-icon-wrap {
        width: 44px;
        height: 44px;
    }

    .km-recruit-icon-wrap svg {
        width: 22px;
        height: 22px;
    }

    .km-recruit-title {
        font-size: 17px;
    }

    .km-recruit-subtitle {
        font-size: 13px;
    }

    .km-recruit-badge {
        font-size: 11px;
        padding: 4px 10px;
    }

    .km-recruit-roles {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .km-recruit-role {
        padding: 12px 14px;
    }

    .km-recruit-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .km-recruit-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 24px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .km-recruit-inner {
        padding: 18px 14px;
    }

    .km-recruit-role-desc {
        display: none;
    }

    .km-recruit-header {
        flex-direction: column;
        align-items: stretch;
    }

    .km-recruit-header > div:first-child {
        display: flex;
        align-items: center;
        gap: 12px;
    }
}