/* ==========================================================================
   mangaVerse — shared base stylesheet
   Header + navigation + auth controls + design tokens.
   Loaded AFTER each page's inline <style> so this is the single, consistent
   source of truth for the header across every page (mobile-first & responsive).
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --bg-deep: #0a0e17;
  --bg-primary: #0d1321;
  --bg-secondary: #111827;
  --bg-card: #151d2e;
  --bg-card-hover: #1a2740;
  --blue-accent: #2980b9;
  --blue-bright: #3b9cda;
  --blue-neon: #5bb8f0;
  --blue-glow: rgba(59, 156, 218, 0.4);
  --text-primary: #e8edf3;
  --text-secondary: #b0bec5;
  --text-muted: #78909c;
  --gold: #f0c060;
  --danger: #e74c3c;
  --border-subtle: #1e2d40;
  --radius-md: 14px;
  --radius-lg: 20px;
  --font-lalezar: 'Lalezar', 'Tahoma', sans-serif;
  --header-h-gap: clamp(12px, 2vw, 28px);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
}

* , *::before , *::after { box-sizing: border-box; }

/* ---------- Page shell (یکسان در همه‌ی صفحات) ----------
   قبلاً بعضی صفحات body را flex-column کرده بودند و بعضی نه؛ نتیجه این بود که
   فوتر در صفحات کوتاه یک‌جا زیر محتوا می‌نشست و در بقیه به کف صفحه می‌چسبید.
   چون این فایل بعد از استایل داخلی همه‌ی صفحات بارگذاری می‌شود، همان‌جای
   اصلیِ تعریف پوسته‌ی صفحه است: هدر بالا، محتوا کشیده، فوتر پایین. */
/* رنگ پشتِ سند: بدون این خط، پس‌زمینه‌ی body به کل «بوم» مرورگر منتقل می‌شود و
   چون ارتفاعش به اندازه‌ی ویوپورت حساب می‌شود، گرادیان هر یک ویوپورت یک‌بار
   تکرار می‌شد؛ همان نوار/خطِ تیره‌ای که وسط صفحه‌های بلند (و بالای فوتر)
   دیده می‌شد. */
html { background-color: var(--bg-deep); }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  /* توجه: background-repeat/background-size را عمداً دست نمی‌زنیم؛ بعضی
     صفحات یک بافت نقطه‌ای (SVG) هم دارند که باید مثل قبل تکرار شود. با
     تعیین رنگ در html بالا، انتقال پس‌زمینه‌ی body به «بوم» مرورگر متوقف
     می‌شود و گرادیان یک‌بار روی کل ارتفاع صفحه می‌نشیند. */
}
body > main,
body > .main-content,
body > .reader-main,
body > .nf-main {
  flex: 1 0 auto;
}

/* ---------- Header ---------- */
.site-header,
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: rgba(13, 19, 33, 0.85);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 2px 25px rgba(0, 0, 0, 0.45);
  transition: background 0.35s ease, box-shadow 0.35s ease;
  flex-shrink: 0;
}
.header.scrolled {
  background: rgba(10, 14, 23, 0.94);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

.nav-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: var(--space-3) var(--header-h-gap);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* دو ویژگی زیر قبلاً فقط در استایل داخلی بعضی صفحات بود (مثل صفحه‌ی
     اشتراک نبود) و باعث می‌شد چیدمان هدر بین صفحات فرق کند. */
  justify-content: space-between;
  gap: var(--space-2);
}
.nav-container > .logo-section { flex: 0 0 auto; }

/* Logo */
.logo-section {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
}
.logo-section:hover { transform: scale(1.03); }
.logo-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue-accent), var(--blue-bright));
  color: #fff;
  font-size: 24px;
  box-shadow: 0 0 20px rgba(59, 156, 218, 0.45);
  /* تپش نورِ لوگو؛ قبلاً فقط در ۱۲ صفحه تعریف شده بود و در بقیه لوگو ثابت بود */
  animation: logoPulse 3.5s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(59, 156, 218, 0.45); }
  50% { box-shadow: 0 0 32px rgba(77, 168, 232, 0.65); }
}
.logo-icon img { width: 100%; height: 100%; object-fit: contain; }
.logo-text {
  font-size: clamp(22px, 4.5vw, 32px);
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
  /* گرادیان نام تجاری: قبلاً فقط در استایل داخلی صفحات بود و صفحه‌ی ۴۰۴
     لوگوی ساده و بی‌گرادیان داشت؛ حالا همه‌جا یکی است. */
  background: linear-gradient(135deg, #ffffff 20%, #b8dff5 60%, #8cc8f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hamburger */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  background: none;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle:hover { color: var(--blue-bright); }
.menu-toggle:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

/* Nav (mobile-first: vertical drawer) */
.nav-container .nav-links {
  order: 10;
  display: none;
  flex-direction: column;
  width: 100%;
  max-height: calc(100dvh - 70px);
  overflow-y: auto;
  list-style: none;
  margin: 6px 0 0;
  padding: 10px 14px;
  gap: 2px;
  background: var(--bg-primary, #0d1321);
  border: 1px solid var(--border-subtle, #1e2d40);
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}
.nav-links.open { display: flex; }
.nav-links > li { position: relative; width: 100%; }
.nav-links > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 14px 4px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 17px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: color 0.2s ease;
}
.nav-links > li > a:hover,
.nav-links > li > a.active { color: #fff; }
.nav-links > li:last-child > a { border-bottom: none; }

.nav-links .dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 4px 18px;
  display: none;
}
.nav-links > li.active-dropdown .dropdown-menu { display: block; }
.nav-links .dropdown-menu li a {
  display: block;
  padding: 11px 4px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
}
.nav-links .dropdown-menu li a:hover { color: #fff; }
.nav-links .dropdown-toggle {
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

/* Auth controls */
.auth-buttons {
  order: 2;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.auth-buttons .btn {
  font-family: var(--font-lalezar);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  width: 136px;
  padding: 10px 16px;
  border-radius: 30px;
  border: 2px solid transparent;
  text-decoration: none;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.auth-buttons .btn-login,
.auth-buttons .btn-signup {
  min-height: 54px;
  width: 148px;
  padding: 11px 16px;
  font-size: 18px;
  font-weight: 700;
}
.auth-buttons .btn-login {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--blue-accent);
  box-shadow: 0 0 12px rgba(41, 128, 185, 0.2);
}
.auth-buttons .btn-login:hover {
  background: rgba(41, 128, 185, 0.15);
  border-color: var(--blue-bright);
  box-shadow: 0 0 22px rgba(59, 156, 218, 0.45);
  color: #fff;
  transform: translateY(-2px);
}
.auth-buttons .btn-signup {
  background: linear-gradient(135deg, var(--blue-accent), var(--blue-bright));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 18px rgba(41, 128, 185, 0.45), 0 4px 15px rgba(0, 0, 0, 0.3);
}
.auth-buttons .btn-signup:hover {
  background: linear-gradient(135deg, var(--blue-bright), var(--blue-neon));
  box-shadow: 0 0 30px rgba(77, 168, 232, 0.65), 0 6px 20px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}
.auth-buttons .btn-logout {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--danger);
  box-shadow: 0 0 12px rgba(231, 76, 60, 0.2);
  /* دکمه‌ی جمع‌وجور: نه عرض ثابت ۱۳۶px که از .auth-buttons .btn ارث می‌برد
     (و دکمه را بی‌دلیل کشیده می‌کرد) و نه به بزرگی دکمه‌ی «آپلود». */
  width: auto;
  min-height: 40px;
  padding: 6px 14px;
  font-size: 14px;
  line-height: 1.2;
  gap: 6px;
}
.auth-buttons .btn-logout:hover {
  background: rgba(231, 76, 60, 0.15);
  border-color: var(--danger);
  box-shadow: 0 0 25px rgba(231, 76, 60, 0.4);
  color: #fff;
}
.auth-buttons .upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: #fff;
  padding: 10px 18px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(243, 156, 18, 0.3);
  transition: all 0.3s ease;
}
.auth-buttons .upload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(243, 156, 18, 0.5);
}
.auth-buttons .profile-container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.auth-buttons .profile-link {
  /* مثل صفحه‌ی خانه: آیکون بالا و «حساب کاربری» دقیقاً زیرش (نه روبروی آیکون) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.auth-buttons .profile-link:hover { transform: scale(1.04); }
.auth-buttons .profile-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 50%;
  background: rgba(41, 128, 185, 0.15);
  border: 2px solid var(--blue-accent);
  box-shadow: 0 0 15px rgba(41, 128, 185, 0.2);
}
.auth-buttons .profile-label { font-size: 13px; color: var(--text-muted); }

/* همین چیدمان برای همه‌ی صفحه‌ها (قیمت‌گذاری، خواننده و…) با اولویت بالاتر از
   قاعده‌های داخل هر صفحه؛ و روی موبایل متن پنهان می‌شود — دقیقاً مثل خانه. */
.nav-container .auth-buttons .profile-link {
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
@media (max-width: 768px) {
  .nav-container .auth-buttons .profile-label { display: none; }
}

/* ---------- Mobile: keep آپلود + خروج adjacent, profile icon aside ----------
   Overrides the per-page @media(max-width:768px) auto-margins that spread
   these buttons far apart. Higher specificity so it always wins. */
@media (max-width: 991px) {
  .nav-container .auth-buttons .profile-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
  }
  /* آپلود + خروج را کنار هم نگه می‌داریم */
  .nav-container .auth-buttons .profile-container .upload-btn { order: 1; margin: 0; flex: 0 0 auto; }
  .nav-container .auth-buttons .profile-container .btn-logout { order: 2; margin: 0; flex: 0 0 auto; }
  /* آیکون پروفایل را به سمت انتهای برداریم (RTL یعنی چپ) */
  .nav-container .auth-buttons .profile-container .profile-link {
    order: 3;
    margin: 0 0 0 auto;
    flex: 0 0 auto;
  }
}

/* ---------- Search bar (سرچ‌بار هدر) ----------
   دسکتاپ: آیکون بلافاصله کنار تب «همکاری» (order: 1 بین منو و دکمه‌ها)
   موبایل: بلافاصله کنار دکمه‌ی سه‌خط (order: 2، در همان گروه همبرگری)
   پنل باز‌شده: چون .header خودش positioned است، پنل زیر کل هدر پهن می‌شود. */
.header-search {
  display: inline-flex;
  align-items: center;
  order: 1;
  flex: 0 0 auto;
}
.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 19px;
  cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.search-toggle:hover { color: var(--blue-bright); transform: translateY(-2px); }
.search-toggle:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.header-search.open .search-toggle {
  color: var(--blue-bright);
  background: rgba(41, 128, 185, 0.15);
}

.search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1001;
  display: none;
  padding: 14px var(--header-h-gap) 16px;
  background: rgba(10, 14, 23, 0.97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.55);
}
.header-search.open .search-panel {
  display: block;
  animation: mvSearchDrop 0.22s ease;
}
@keyframes mvSearchDrop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.search-panel-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--font-lalezar);
}
.search-field { display: inline-flex; flex: 0 1 auto; }
.search-field-text { flex: 1 1 260px; }
.search-panel input[type='search'],
.search-panel select {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  font-family: var(--font-lalezar);
  font-size: 16px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.search-panel input[type='search']::placeholder { color: var(--text-muted); }
.search-panel input[type='search']:focus,
.search-panel select:focus {
  outline: none;
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 3px rgba(59, 156, 218, 0.25);
}
.search-panel select option { background: var(--bg-primary); color: var(--text-primary); }
.search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 24px;
  border: none;
  border-radius: 30px;
  font-family: var(--font-lalezar);
  font-size: 17px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--blue-accent), var(--blue-bright));
  box-shadow: 0 0 18px rgba(41, 128, 185, 0.45);
  transition: all 0.3s ease;
}
.search-submit:hover { box-shadow: 0 0 28px rgba(77, 168, 232, 0.6); transform: translateY(-2px); }
.search-submit:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; }

.rights-warning-icon { flex: 0 0 auto; color: var(--gold); font-size: 1.1em; }

/* ---------- Genre filter chips (فیلتر ژانر صفحات فهرست و سرچ) ---------- */
.genre-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  font-family: var(--font-lalezar);
}
.genre-filter-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.genre-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 30px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
  transition: all 0.25s ease;
}
.genre-chip:hover {
  color: #fff;
  border-color: var(--blue-bright);
  background: rgba(41, 128, 185, 0.16);
  transform: translateY(-2px);
}
.genre-chip.is-active {
  color: #fff;
  border-color: var(--blue-bright);
  background: linear-gradient(135deg, var(--blue-accent), var(--blue-bright));
  box-shadow: 0 0 16px rgba(59, 156, 218, 0.4);
}

/* ---------- Genre links (صفحه‌ی محصول → فهرست همان ژانر) ---------- */
.genre-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 2px 0;
  padding: 3px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  background: rgba(41, 128, 185, 0.14);
  color: var(--blue-neon) !important;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.6;
  transition: all 0.25s ease;
}
.genre-link:hover {
  background: rgba(41, 128, 185, 0.3);
  border-color: var(--blue-bright);
  color: #fff !important;
  transform: translateY(-2px);
}

/* ---------- Search backdrop (تیره‌شدن بقیه‌ی صفحه هنگام باز بودن سرچ‌بار) ----------
   کلاس mv-search-open روی <body> گذاشته می‌شود (partial هدر). */
body.mv-search-open::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(4, 7, 12, 0.62);
  -webkit-backdrop-filter: blur(3px) saturate(0.9);
  backdrop-filter: blur(3px) saturate(0.9);
  animation: mvBackdropIn 0.25s ease;
}
@keyframes mvBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* هدر و پنل سرچ باید روی این لایه بمانند */
body.mv-search-open .header { position: sticky; z-index: 1000; }

/* ---------- VIP: برچسب‌ها و قفل محتوا ---------- */
.vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-start: 8px;
  padding: 3px 12px;
  border-radius: 30px;
  font-size: 13px;
  font-family: var(--font-lalezar);
  color: #fff;
  background: linear-gradient(135deg, #d9a441, var(--gold, #f0c060));
  box-shadow: 0 0 14px rgba(240, 192, 96, 0.45);
  vertical-align: middle;
}
/* Rating + VIP share one row at the bottom-left of the cover (next to the rating). */
.card-rating-row {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 20px);
}
/* Each page positions .card-rating absolutely on its own; static wins by specificity
   so both chips sit side by side inside the row instead of overlapping. */
.card-img-wrapper .card-rating-row > .card-rating {
  position: static;
  background: rgba(0, 0, 0, 0.75);
  color: var(--gold);
  padding: 3px 8px;
  border-radius: 14px;
  font-size: 12px;
  z-index: auto;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
/* VIP tag: same smoky pill as the rating, gold text. */
.card-img-wrapper .card-vip-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 14px;
  font-size: 12px;
  font-family: var(--font-lalezar);
  color: var(--gold, #f0c060);
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(240, 192, 96, 0.38);
  box-shadow: none;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
.card-meta .card-likes { display: inline-flex; align-items: center; gap: 4px; }
.card-meta .card-likes > i { color: #e74c3c; font-size: 11px; }
.manga-card.is-vip,
.category-card.is-vip { border-color: rgba(240, 192, 96, 0.35); }
.manga-card.is-vip:hover {
  border-color: rgba(240, 192, 96, 0.7);
  box-shadow: 0 0 25px rgba(240, 192, 96, 0.25), 0 12px 30px rgba(0, 0, 0, 0.5);
}

/* پنل قفل در صفحه‌ی عنوان */
.vip-lock {
  margin: 26px 0;
  padding: 34px 24px;
  text-align: center;
  border-radius: 24px;
  border: 1px solid rgba(240, 192, 96, 0.38);
  background: linear-gradient(180deg, rgba(240, 192, 96, 0.10), rgba(21, 29, 46, 0.85));
  box-shadow: 0 0 40px rgba(240, 192, 96, 0.18), 0 10px 30px rgba(0, 0, 0, 0.45);
  font-family: var(--font-lalezar);
}
.vip-lock-crown {
  font-size: 46px;
  color: var(--gold, #f0c060);
  margin-bottom: 8px;
  filter: drop-shadow(0 0 18px rgba(240, 192, 96, 0.55));
}
.vip-lock h2 { font-size: 24px; color: #fff; margin-bottom: 8px; }
.vip-lock p {
  color: var(--text-secondary);
  font-size: 16px;
  max-width: 620px;
  margin: 0 auto 18px;
  line-height: 1.9;
}
.vip-lock p strong { color: var(--gold, #f0c060); }
.vip-lock-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-vip-cta,
.btn-vip-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 26px;
  border-radius: 30px;
  text-decoration: none;
  font-family: var(--font-lalezar);
  font-size: 17px;
  transition: all 0.3s ease;
}
.btn-vip-cta {
  color: #fff;
  background: linear-gradient(135deg, #d9a441, var(--gold, #f0c060));
  box-shadow: 0 0 20px rgba(240, 192, 96, 0.45);
}
.btn-vip-cta:hover { transform: translateY(-2px); box-shadow: 0 0 32px rgba(240, 192, 96, 0.65); }
.btn-vip-ghost {
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.04);
}
.btn-vip-ghost:hover { color: #fff; border-color: var(--blue-bright); background: rgba(41, 128, 185, 0.16); }

/* نوتیف شناور VIP (public/js/vip.js) */
.mv-vip-toast {
  position: fixed;
  inset-inline: 0;
  bottom: 26px;
  z-index: 99999;
  display: none;
  align-items: center;
  gap: 12px;
  width: min(680px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(240, 192, 96, 0.45);
  background: rgba(13, 19, 33, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 26px rgba(240, 192, 96, 0.22);
  font-family: var(--font-lalezar);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mv-vip-toast.show { opacity: 1; transform: translateY(0); }
.mv-vip-toast-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--gold, #f0c060);
  background: rgba(240, 192, 96, 0.14);
  border: 1px solid rgba(240, 192, 96, 0.35);
  font-size: 19px;
}
.mv-vip-toast-text { flex: 1 1 auto; color: var(--text-primary); font-size: 16px; line-height: 1.7; }
.mv-vip-toast-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 30px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #d9a441, var(--gold, #f0c060));
  font-family: var(--font-lalezar);
  font-size: 15px;
  white-space: nowrap;
  transition: all 0.25s ease;
}
.mv-vip-toast-cta:hover { transform: translateY(-2px); }
.mv-vip-toast-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.mv-vip-toast-close:hover { color: #fff; }
@media (max-width: 600px) {
  .mv-vip-toast { flex-wrap: wrap; justify-content: center; text-align: center; bottom: 14px; padding: 12px 14px; }
  .mv-vip-toast-text { flex: 1 1 100%; font-size: 14px; }
  .mv-vip-toast-cta { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Nav link اشتراک (تب اشتراک‌های ماهانه در هدر) ---------- */
.nav-links > li > a.nav-vip { color: var(--gold, #f0c060); }
.nav-links > li > a.nav-vip::after { background: var(--gold, #f0c060); box-shadow: 0 0 12px rgba(240, 192, 96, 0.6); }
.nav-links > li > a.nav-vip:hover { color: #fff8e6; }
.nav-links > li > a.nav-vip.active { color: var(--gold, #f0c060); }

/* ---------- Desktop / tablet navigation ---------- */
@media (min-width: 992px) {
  .nav-container { flex-wrap: nowrap; gap: 20px; }
  .menu-toggle { display: none; }
  .nav-container .nav-links {
    order: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    overflow: visible;
    align-items: center;
    gap: 20px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .nav-links > li { width: auto; }
  .nav-links > li > a {
    justify-content: flex-start;
    width: auto;
    padding: 8px 2px;
    border-bottom: none;
    font-size: 18px;
    font-weight: 700;
  }
  .nav-links > li > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 0;
    height: 2.5px;
    border-radius: 4px;
    background: var(--blue-bright);
    box-shadow: 0 0 10px var(--blue-glow);
    transition: width 0.35s ease;
  }
  .nav-links > li > a:hover::after,
  .nav-links > li > a.active::after { width: 100%; }

  .nav-links .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    display: block;
    min-width: 190px;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 8px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }
  .nav-links > li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-links .dropdown-menu li a { padding: 10px 20px; color: var(--text-secondary); }
  .nav-links .dropdown-menu li a:hover { background: rgba(41, 128, 185, 0.15); color: #fff; }
  .nav-links .dropdown-toggle { display: none; }

  /* سرچ‌بار را به گروه ناوبری می‌چسباند (کنار تب «همکاری»).
     خودِ فضای آزاد به سمت چپ سرچ می‌رود، پس space-between صفحه‌ها
     این آیکون را وسط هدر شناور نمی‌کند. */
  .nav-container .header-search { margin-inline-end: auto; }

  .auth-buttons { flex: 0 0 auto; }
}

/* ---------- Mobile: سرچ‌بار کنار دکمه‌ی سه‌خط ---------- */
@media (max-width: 991px) {
  /* همان گروه دکمه‌ی همبرگری → بلافاصله کنارش می‌نشیند */
  .nav-container .header-search { order: 2; }
  .search-toggle { width: 40px; height: 40px; font-size: 18px; }
  .search-panel { padding: 12px 14px 14px; }
  .search-panel-inner { gap: 8px; }
  /* ترتیب مهم است: .search-field بعد از .search-field-text نیاید،
     وگرنه عرض فیلد جستجو را به یک‌سوم کم می‌کند */
  .search-panel-inner .search-field { flex: 1 1 30%; }
  .search-panel-inner .search-field-text { flex: 1 1 100%; }
  .search-panel input[type='search'],
  .search-panel select { min-height: 44px; font-size: 15px; }
  .search-submit { flex: 1 1 100%; min-height: 44px; }

  /* چیپ‌های ژانر روی موبایل جمع‌وجورتر */
  .genre-filter { gap: 6px; margin-bottom: 14px; }
  .genre-chip { padding: 5px 12px; font-size: 13px; }
}

/* ---------- Small phones ---------- */
@media (max-width: 420px) {
  .nav-container { gap: var(--space-2); }
  .logo-text { font-size: 21px; }
  .logo-icon { width: 40px; height: 40px; font-size: 20px; }
  .auth-buttons .btn-login,
  .auth-buttons .btn-signup { min-height: 54px; width: 148px; padding: 11px 10px; font-size: 17px; font-weight: 700; }
  .auth-buttons { gap: 8px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * , *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Shared header/footer popover (logout) modal — responsive safety ---------- */
.modal-overlay .modal {
  width: min(380px, calc(100vw - 2rem)) !important;
  max-height: min(80dvh, 90vh);
}

/* ==========================================================================
   SEO: متن معرفی دسته‌ها (فهرست‌های مانگا/مانهوا/انیمه)
   ========================================================================== */
.page-intro {
  max-width: 940px;
  margin: 6px 0 18px;
  color: var(--text-secondary);
  font-family: var(--font-lalezar);
  font-size: 16px;
  line-height: 1.95;
}
@media (max-width: 600px) {
  .page-intro { font-size: 15px; line-height: 1.85; margin-bottom: 14px; }
}

/* ==========================================================================
   SEO: مسیر راهنما (breadcrumb) — نمایش موقعیت صفحه در ساختار سایت
   هم برای کاربر و هم برای گوگل (کنار BreadcrumbList در JSON-LD)
   ========================================================================== */
.mv-crumbs {
  max-width: 1300px;
  margin: 16px auto 0;
  padding: 0 28px;
  font-family: var(--font-lalezar);
  font-size: 14px;
}
.mv-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
}
.mv-crumbs a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mv-crumbs a:hover { color: var(--blue-bright); }
.mv-crumbs .mv-sep { color: var(--text-muted); opacity: 0.7; }
.mv-crumbs [aria-current='page'] {
  color: var(--text-primary);
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .mv-crumbs { padding: 0 14px; font-size: 13px; margin-top: 12px; }
  .mv-crumbs [aria-current='page'] { max-width: 30ch; }
}

/* ==========================================================================
   SEO: صفحه‌بندی قابل خزش (لینک‌های واقعی در HTML، هم‌شکل با دکمه‌های سایت)
   ========================================================================== */
.mv-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 1300px;
  margin: 26px auto 0;
  padding: 0 28px;
  font-family: var(--font-lalezar);
}
.mv-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 42px;
  min-height: 42px;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 30px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 16px;
  transition: all 0.25s ease;
}
.mv-page-btn:hover {
  color: #fff;
  border-color: var(--blue-bright);
  background: rgba(41, 128, 185, 0.16);
  transform: translateY(-2px);
}
.mv-page-btn.is-active {
  color: #fff;
  border-color: var(--blue-bright);
  background: linear-gradient(135deg, var(--blue-accent), var(--blue-bright));
  box-shadow: 0 0 18px rgba(59, 156, 218, 0.45);
}
.mv-page-gap { color: var(--text-muted); padding: 0 2px; }
/* دکمه‌های صفحه‌بندی (جاهایی که آدرس صفحه‌دار نیستند و <button> رندر می‌شود) */
button.mv-page-btn { font-family: inherit; font-size: 16px; cursor: pointer; line-height: 1; }
button.mv-page-btn:disabled, .mv-page-btn.is-disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
/* نوار صفحه‌بندی داخل کارت‌های پنل ادمین (بدون حاشیه‌ی جانبی) */
.mv-admin-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
/* بلوکِ نوارِ صفحه‌بندی: nav + خط اطلاعات؛ کل این بلوک با AJAX جایگزین می‌شود */
.mv-pagination-block { width: 100%; }
/* حالت بارگذاری گرید هنگام رفتن به صفحه‌ی بعد (بدون refresh کل صفحه) */
.mv-list-loading { opacity: 0.45; pointer-events: none; transition: opacity 0.15s ease; }
.mv-pagination-info {
  text-align: center;
  color: var(--text-muted);
  font-family: var(--font-lalezar);
  font-size: 14px;
  margin: 10px 0 0;
}
@media (max-width: 600px) {
  .mv-pagination { gap: 6px; padding: 0 14px; margin-top: 20px; }
  .mv-page-btn { min-width: 38px; min-height: 38px; padding: 4px 11px; font-size: 15px; }
}

/* ==========================================================================
   SEO/A11y: متن فقط-برای-صفحه‌خوان (بدون هیچ تأثیری روی ظاهر صفحه)
   ========================================================================== */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  /* clip-path روش مدرن است؛ clip قدیمی برای مرورگرهای قدیمی‌تر نگه داشته شده */
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* ==========================================================================
   پلن‌های اشتراک: تم نقره‌ای برای برچسب‌های محتوای اشتراکی
   (کلاس‌های قدیمی vip-badge/vip-lock برای سازگاری حفظ شده‌اند، ولی رنگ و
    متن آن‌ها «نقره‌ای» است.)
   ========================================================================== */
.vip-badge {
  color: #17222b;
  background: linear-gradient(135deg, #a9bac4, #dbe4e8);
  box-shadow: 0 0 14px rgba(207, 216, 220, 0.45);
}
.card-img-wrapper .card-vip-badge {
  color: #dbe4e8;
  border-color: rgba(207, 216, 220, 0.42);
}
.manga-card.is-vip,
.category-card.is-vip { border-color: rgba(207, 216, 220, 0.32); }
.manga-card.is-vip:hover {
  border-color: rgba(207, 216, 220, 0.65);
  box-shadow: 0 0 25px rgba(207, 216, 220, 0.22), 0 12px 30px rgba(0, 0, 0, 0.5);
}
.vip-lock {
  border-color: rgba(207, 216, 220, 0.35);
  background: linear-gradient(180deg, rgba(207, 216, 220, 0.09), rgba(21, 29, 46, 0.85));
  box-shadow: 0 0 40px rgba(207, 216, 220, 0.16), 0 10px 30px rgba(0, 0, 0, 0.45);
}
.vip-lock-crown {
  color: #cfd8dc;
  filter: drop-shadow(0 0 18px rgba(207, 216, 220, 0.5));
}
.vip-lock p strong { color: #dbe4e8; }

/* ===== نشان پلن کنار نام کاربر (نظرات، پنل، نوار بالا) ===== */
.mv-plan-badge,
.comment-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 20px;
  font-family: var(--font-lalezar);
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
}
.mv-plan-badge.silver,
.comment-plan-badge.silver {
  color: #e6eef2;
  background: linear-gradient(135deg, rgba(169, 186, 196, 0.3), rgba(219, 228, 232, 0.18));
  border: 1px solid rgba(207, 216, 220, 0.5);
}
.mv-plan-badge.gold,
.comment-plan-badge.gold {
  color: #fff;
  background: linear-gradient(135deg, #d9a441, #f0c060);
  border: 1px solid rgba(240, 192, 96, 0.65);
  box-shadow: 0 0 12px rgba(240, 192, 96, 0.3);
}