/* assets/css/style.css - نسخه اصلاح‌شده و ضدتداخل تم روشن و تاریک */

:root {
  --color-ivory-50: #fdfcf7;
  --color-ivory-100: #f9f6ec;
  --color-ivory-200: #efe9d5;
  --color-ivory-300: #e2d8b8;
  --color-gold-300: #fcd34d;
  --color-gold-400: #fbbf24;
  --color-gold-500: #d97706;
  --color-gold-600: #b45309;
  --color-emerald-800: #065f46;
  --color-emerald-900: #064e3b;
  --color-emerald-950: #022c22;
}

::selection {
  background-color: #fbbf24;
  color: #022c22;
}

::-moz-selection {
  background-color: #fbbf24;
  color: #022c22;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid #b45309;
  outline-offset: 2px;
}

html.dark button:focus-visible,
html.dark a:focus-visible,
html.dark input:focus-visible,
html.dark select:focus-visible,
html.dark summary:focus-visible {
  outline-color: #fbbf24;
}

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

#desktop-nav {
  display: none;
}

#mobile-menu-open-btn {
  display: block;
}

#resume-header-btn {
  display: none;
}

.header-brand-subtitle {
  display: none;
}

@media (min-width: 640px) {
  .header-brand-subtitle {
    display: block;
  }
}

@media (max-width: 1279px) {
  #resume-header-btn {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  #desktop-nav {
    display: flex !important;
  }

  #mobile-menu-open-btn {
    display: none !important;
  }

  #resume-header-btn:not([hidden]) {
    display: inline-flex !important;
  }
}

/* ==================== ۱. رنگ‌های پایه و اختصاصی ==================== */
.bg-ivory-50 { background-color: var(--color-ivory-50) !important; }
.bg-ivory-100 { background-color: var(--color-ivory-100) !important; }
.bg-ivory-100\/80 { background-color: rgba(249, 246, 236, 0.9) !important; }
.bg-ivory-200 { background-color: var(--color-ivory-200) !important; }

.border-ivory-200 { border-color: var(--color-ivory-200) !important; }
.border-ivory-200\/80 { border-color: rgba(239, 233, 213, 0.85) !important; }
.border-ivory-300 { border-color: var(--color-ivory-300) !important; }

.text-gold-300 { color: var(--color-gold-300) !important; }
.text-gold-400 { color: var(--color-gold-400) !important; }
.text-gold-600 { color: var(--color-gold-600) !important; }

.bg-gold-400 { background-color: var(--color-gold-400) !important; }
.bg-gold-500\/15 { background-color: rgba(217, 119, 6, 0.15) !important; }

.border-gold-400\/30 { border-color: rgba(251, 191, 36, 0.35) !important; }
.border-gold-400\/40 { border-color: rgba(251, 191, 36, 0.45) !important; }
.border-gold-400\/50 { border-color: rgba(251, 191, 36, 0.55) !important; }
.border-gold-500\/30 { border-color: rgba(217, 119, 6, 0.35) !important; }

/* ==================== ۲. اصلاح قطعی پس‌زمینه هیرو (ترکیب گرادینت زمردی + نقوش اسلیمی) ==================== */
.islamic-pattern-bg {
  background-color: #064e3b !important;
  background-image: 
    radial-gradient(circle at 15% 20%, rgba(251, 191, 36, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(16, 185, 129, 0.22) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg stroke='%23fbbf24' stroke-width='0.7' stroke-opacity='0.14'%3E%3Cpath d='M30 0l15 15-15 15-15-15zM0 30l15 15-15 15-15-15zM60 30l15 15-15 15-15-15zM30 60l15 15-15 15-15-15z'/%3E%3Ccircle cx='30' cy='30' r='8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, #064e3b 0%, #065f46 50%, #022c22 100%) !important;
  color: #ffffff !important;
}

.islamic-pattern-bg h1,
.islamic-pattern-bg strong {
  color: #ffffff !important;
}

.islamic-pattern-bg p {
  color: #ecfdf5 !important;
}

/* ==================== ۳. قفل کردن استایل‌های حالت روشن (Light Mode) برای جلوگیری از تداخل سیستم‌عامل ==================== */
html.light body {
  background-color: var(--color-ivory-50) !important;
  color: #1e293b !important;
}

/* هدر و پلیر پایین در حالت روشن */
html.light header {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: var(--color-ivory-200) !important;
}

html.light #sticky-audio-player {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-top-color: var(--color-ivory-300) !important;
}

/* کارت‌ها و باکس‌های سفید در حالت روشن */
html.light .reciter-card,
html.light .surah-card,
html.light #view-home > div.bg-white,
html.light #view-home > article,
html.light #reciter-profile-header,
html.light #view-reciter > div.bg-white,
html.light #view-surahs > div.bg-white,
html.light #view-favorites > div.bg-white,
html.light #view-about > div.bg-white {
  background-color: #ffffff !important;
  border-color: var(--color-ivory-200) !important;
}

/* تضمین دیده شدن تمام تیترها و نام قاریان در حالت روشن */
html.light h1:not(.islamic-pattern-bg h1),
html.light h2,
html.light h3,
html.light .reciter-card h3,
html.light .surah-card h3,
html.light #player-surah-title,
html.light header a .brand-title {
  color: #022c22 !important;
}

/* متون فرعی و توضیحات در حالت روشن */
html.light p:not(.islamic-pattern-bg p):not(footer p),
html.light #reciters-result-summary,
html.light #player-reciter-name {
  color: #475569 !important;
}

html.light .reciter-card .text-xs.font-medium {
  color: #065f46 !important;
}

/* ورودی‌های جستجو و فیلترهای Select در حالت روشن */
html.light input[type="search"],
html.light select {
  background-color: var(--color-ivory-50) !important;
  border-color: var(--color-ivory-300) !important;
  color: #0f172a !important;
}

html.light input[type="search"]::placeholder {
  color: #64748b !important;
}

/* باکس‌های داخلی (FAQ و کارت‌های توضیحی) در حالت روشن */
html.light article .bg-ivory-50,
html.light details,
html.light #view-about .bg-ivory-50 {
  background-color: var(--color-ivory-50) !important;
  border-color: var(--color-ivory-200) !important;
}

html.light details summary {
  color: #022c22 !important;
}

/* آیکون تغییر تم در هدر */
html.light #theme-icon-dark { display: block !important; }
html.light #theme-icon-light { display: none !important; }
html.dark #theme-icon-dark { display: none !important; }
html.dark #theme-icon-light { display: block !important; }

/* ==================== ۴. استایل‌های حالت تاریک (Dark Mode) ==================== */
html.dark body {
  background-color: #022c22 !important;
  color: #f1f5f9 !important;
}

html.dark header,
html.dark #sticky-audio-player {
  background-color: rgba(6, 78, 59, 0.96) !important;
  border-color: #065f46 !important;
}

html.dark .reciter-card,
html.dark .surah-card,
html.dark #view-home > div.bg-white,
html.dark #view-home > article,
html.dark #reciter-profile-header,
html.dark #view-reciter > div.bg-white,
html.dark #view-surahs > div.bg-white,
html.dark #view-favorites > div.bg-white,
html.dark #view-about > div.bg-white {
  background-color: rgba(6, 78, 59, 0.75) !important;
  border-color: #065f46 !important;
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark #player-surah-title,
html.dark header a .brand-title {
  color: #ffffff !important;
}

html.dark input[type="search"],
html.dark select {
  background-color: #022c22 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
}

/* ==================== ۵. دکمه‌های منوی ناوبری و فیلترها ==================== */
html.light .nav-btn {
  color: #334155 !important;
  background-color: transparent;
}
html.light .nav-btn:hover {
  background-color: var(--color-ivory-100) !important;
  color: #022c22 !important;
}
html.light .nav-btn.active-nav {
  background-color: #064e3b !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(6, 78, 59, 0.2);
}

html.dark .nav-btn {
  color: #d1fae5 !important;
}
html.dark .nav-btn:hover {
  background-color: rgba(4, 120, 87, 0.5) !important;
}
html.dark .nav-btn.active-nav {
  background-color: #fbbf24 !important;
  color: #022c22 !important;
}

/* دکمه‌های حروف الفبا و فیلتر مکی/مدنی */
html.light .stype-btn,
html.light .gs-filter-btn,
html.light .alpha-btn {
  color: #334155 !important;
  background-color: var(--color-ivory-50) !important;
  border-color: var(--color-ivory-300) !important;
}

html.dark .stype-btn,
html.dark .gs-filter-btn,
html.dark .alpha-btn {
  color: #d1fae5 !important;
  background-color: #022c22 !important;
  border-color: #065f46 !important;
}

.stype-btn.active-stype,
.gs-filter-btn.active-stype,
.alpha-btn.active-alpha {
  background-color: #065f46 !important;
  color: #ffffff !important;
  border-color: #065f46 !important;
}

html.dark .stype-btn.active-stype,
html.dark .gs-filter-btn.active-stype,
html.dark .alpha-btn.active-alpha {
  background-color: #fbbf24 !important;
  color: #022c22 !important;
  border-color: #fbbf24 !important;
}

/* ==================== ۶. اسکرول‌بار، اکولایزر و انیمیشن‌ها ==================== */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@keyframes eq-bar {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}
.eq-bar-1 { animation: eq-bar 0.7s ease-in-out infinite; }
.eq-bar-2 { animation: eq-bar 0.5s ease-in-out infinite 0.15s; }
.eq-bar-3 { animation: eq-bar 0.8s ease-in-out infinite 0.3s; }

.reciter-card,
.surah-card {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.reciter-card:hover,
.surah-card:hover {
  transform: translateY(-3px);
}

#player-seek-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #065f46;
  border: 2px solid #fbbf24;
  cursor: pointer;
  transition: transform 0.15s ease;
}
html.dark #player-seek-slider::-webkit-slider-thumb {
  background: #fbbf24;
  border-color: #022c22;
}
#player-seek-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
}

#sticky-audio-player {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

#player-seek-slider {
  height: 32px;
  min-width: 0;
  touch-action: pan-x;
}

#player-seek-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
}

#player-seek-slider::-moz-range-track {
  height: 4px;
  border-radius: 999px;
}

#player-play-btn,
#mobile-player-settings-btn,
#sticky-audio-player button[aria-label="سوره قبلی"],
#sticky-audio-player button[aria-label="سوره بعدی"] {
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

#sticky-audio-player button:disabled,
#player-seek-slider:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

#mobile-player-tray {
  display: none;
}

#mobile-player-tray:not(.hidden) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.player-tray-control {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  touch-action: manipulation;
}

.player-control-active {
  background-color: #065f46 !important;
  border-color: #065f46 !important;
  color: #ffffff !important;
}

html.dark .player-control-active {
  background-color: #fbbf24 !important;
  border-color: #fbbf24 !important;
  color: #022c22 !important;
}

@media (min-width: 768px) {
  #mobile-player-tray,
  #mobile-player-tray:not(.hidden) {
    display: none !important;
  }
}

/* Tailwind's bundled dark utilities follow the OS preference; keep the
   manually selected light theme readable regardless of that preference. */
html.light [class~="dark:bg-emerald-800"],
html.light [class~="dark:bg-emerald-800/60"] {
  background-color: var(--color-ivory-100) !important;
}

html.light [class~="dark:bg-emerald-900"],
html.light [class~="dark:bg-emerald-900/40"],
html.light [class~="dark:bg-emerald-900/50"],
html.light [class~="dark:bg-emerald-900/60"],
html.light [class~="dark:bg-emerald-900/70"],
html.light [class~="dark:bg-emerald-900/75"],
html.light [class~="dark:bg-emerald-900/80"],
html.light [class~="dark:bg-emerald-900/90"],
html.light [class~="dark:bg-emerald-900/95"] {
  background-color: #ffffff !important;
}

html.light [class~="dark:bg-emerald-950"],
html.light [class~="dark:bg-emerald-950/50"],
html.light [class~="dark:bg-emerald-950/60"],
html.light [class~="dark:bg-emerald-950/90"],
html.light [class~="dark:bg-emerald-950/95"] {
  background-color: var(--color-ivory-50) !important;
}

html.light [class~="dark:border-emerald-700"],
html.light [class~="dark:border-emerald-800"],
html.light [class~="dark:border-emerald-800/80"] {
  border-color: var(--color-ivory-200) !important;
}

html.light [class~="dark:text-amber-300"],
html.light [class~="dark:text-emerald-100"],
html.light [class~="dark:text-emerald-100/90"],
html.light [class~="dark:text-emerald-200"],
html.light [class~="dark:text-emerald-200/90"],
html.light [class~="dark:text-emerald-300"],
html.light [class~="dark:text-emerald-300/70"],
html.light [class~="dark:text-emerald-300/80"],
html.light [class~="dark:text-slate-100"] {
  color: #334155 !important;
}

html.light [class~="dark:text-gold-300"],
html.light [class~="dark:text-gold-300/90"],
html.light [class~="dark:text-gold-400"] {
  color: #065f46 !important;
}

html.light [class~="dark:text-emerald-950"],
html.light [class~="dark:text-white"] {
  color: #022c22 !important;
}

html.light .islamic-pattern-bg [class~="dark:text-white"] {
  color: #ffffff !important;
}

html.light #view-about p,
html.light #view-about li {
  color: #334155 !important;
  font-size: 0.9rem;
  line-height: 1.8;
}

html.light #view-about .bg-white.text-xs > div:not(.font-bold) {
  color: #475569 !important;
  font-size: 0.875rem;
  line-height: 1.7;
}

html.light #view-about .bg-white.text-xs > .font-bold {
  color: #022c22 !important;
}

html.light #mobile-player-tray {
  background-color: var(--color-ivory-50) !important;
}

html.light #mobile-player-settings-btn,
html.light #mobile-player-tray .player-tray-control {
  background-color: #ffffff !important;
  border-color: var(--color-ivory-300) !important;
  color: #334155 !important;
}

html.light #mobile-player-tray .player-control-active {
  background-color: #065f46 !important;
  border-color: #065f46 !important;
  color: #ffffff !important;
}

/* Subtle geometric texture shared by the content surfaces. */
html.light .reciter-card,
html.light .surah-card,
html.light #reciter-profile-header,
html.light #view-reciter > div.bg-white,
html.light #view-surahs > div.bg-white,
html.light #view-favorites > div.bg-white,
html.light #view-about > div.bg-white {
  background-image:
    radial-gradient(circle at 100% 0, rgba(217, 119, 6, 0.075), transparent 13rem),
    repeating-linear-gradient(45deg, rgba(6, 78, 59, 0.018) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-45deg, rgba(6, 78, 59, 0.018) 0 1px, transparent 1px 18px);
}

html.dark .reciter-card,
html.dark .surah-card,
html.dark #reciter-profile-header,
html.dark #view-reciter > div.bg-white,
html.dark #view-surahs > div.bg-white,
html.dark #view-favorites > div.bg-white,
html.dark #view-about > div.bg-white {
  background-image:
    radial-gradient(circle at 100% 0, rgba(251, 191, 36, 0.11), transparent 13rem),
    repeating-linear-gradient(45deg, rgba(167, 243, 208, 0.035) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-45deg, rgba(167, 243, 208, 0.035) 0 1px, transparent 1px 18px);
}

html.light #view-about .bg-ivory-50 {
  background-image:
    radial-gradient(circle at 100% 0, rgba(217, 119, 6, 0.07), transparent 11rem),
    repeating-linear-gradient(45deg, rgba(6, 78, 59, 0.018) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, rgba(6, 78, 59, 0.018) 0 1px, transparent 1px 16px);
}

html.dark #view-about .bg-ivory-50 {
  background-image:
    radial-gradient(circle at 100% 0, rgba(251, 191, 36, 0.1), transparent 11rem),
    repeating-linear-gradient(45deg, rgba(167, 243, 208, 0.035) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, rgba(167, 243, 208, 0.035) 0 1px, transparent 1px 16px);
}

.reciter-card:hover,
.surah-card:hover {
  border-color: rgba(180, 83, 9, 0.5) !important;
  box-shadow: 0 12px 28px rgba(6, 78, 59, 0.1);
}

html.dark .reciter-card:hover,
html.dark .surah-card:hover {
  border-color: rgba(251, 191, 36, 0.55) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

#view-favorites > div:first-child,
#view-surahs > div:first-child,
#view-reciter > div:nth-child(2) {
  box-shadow: inset -3px 0 0 rgba(180, 83, 9, 0.75), 0 8px 24px rgba(6, 78, 59, 0.045);
}

html.dark #view-favorites > div:first-child,
html.dark #view-surahs > div:first-child,
html.dark #view-reciter > div:nth-child(2) {
  box-shadow: inset -3px 0 0 rgba(251, 191, 36, 0.75), 0 8px 24px rgba(0, 0, 0, 0.12);
}

#site-footer-content {
  grid-template-columns: minmax(0, 1fr);
}

#site-footer-content > :nth-child(1),
#site-footer-content > :nth-child(2),
#site-footer-content > :nth-child(3) {
  grid-column: 1 / -1;
  min-width: 0;
  height: auto;
}

#site-footer-content > :nth-child(3) {
  align-self: end;
}

@media (min-width: 768px) {
  #site-footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #site-footer-content > :nth-child(1),
  #site-footer-content > :nth-child(2) {
    grid-column: auto;
  }
}

#reciter-profile-header {
  position: relative;
}

#moshaf-tabs-container {
  width: 100%;
  min-width: 0;
}

.moshaf-accordion {
  position: relative;
  width: min(100%, 30rem);
  color: #022c22;
}

.moshaf-accordion-trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #d8c99d;
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0, rgba(217, 119, 6, 0.1), transparent 8rem),
    #fffdf7;
  color: #022c22;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.moshaf-accordion-trigger::-webkit-details-marker {
  display: none;
}

.moshaf-accordion-trigger:hover,
.moshaf-accordion[open] .moshaf-accordion-trigger {
  border-color: #b45309;
  box-shadow: 0 3px 12px rgba(6, 78, 59, 0.1);
}

.moshaf-accordion-label {
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.moshaf-accordion-current {
  overflow: hidden;
  color: #065f46;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.moshaf-accordion-chevron {
  width: 20px;
  height: 20px;
  color: #8a5a12;
  transition: transform 0.18s ease;
}

.moshaf-accordion[open] .moshaf-accordion-chevron {
  transform: rotate(180deg);
}

.moshaf-accordion-options {
  display: grid;
  gap: 6px;
  max-height: min(50vh, 320px);
  margin-top: 8px;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid #e2d8b8;
  border-radius: 14px;
  background: #fffdf7;
  box-shadow: 0 12px 28px rgba(2, 44, 34, 0.14);
}

.moshaf-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #334155;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: right;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.moshaf-option:hover {
  border-color: #d8c99d;
  background-color: #f9f6ec;
  color: #022c22;
}

.moshaf-option.is-active {
  border-color: #065f46;
  background-color: #065f46;
  color: #ffffff;
}

.moshaf-option-count {
  flex: 0 0 auto;
  color: #64748b;
  font-size: 0.6875rem;
  font-weight: 600;
}

.moshaf-option.is-active .moshaf-option-count {
  color: #d1fae5;
}

html.dark .moshaf-accordion {
  color: #f8fafc;
}

html.dark .moshaf-accordion-trigger {
  border-color: #047857;
  background:
    radial-gradient(circle at 100% 0, rgba(251, 191, 36, 0.12), transparent 8rem),
    #022c22;
  color: #f8fafc;
}

html.dark .moshaf-accordion-trigger:hover,
html.dark .moshaf-accordion[open] .moshaf-accordion-trigger {
  border-color: #fbbf24;
}

html.dark .moshaf-accordion-current,
html.dark .moshaf-accordion-chevron {
  color: #fcd34d;
}

html.dark .moshaf-accordion-options {
  border-color: #065f46;
  background: #022c22;
}

html.dark .moshaf-option {
  color: #d1fae5;
}

html.dark .moshaf-option:hover {
  border-color: #047857;
  background-color: #064e3b;
  color: #ffffff;
}

html.dark .moshaf-option.is-active {
  border-color: #fbbf24;
  background-color: #fbbf24;
  color: #022c22;
}

html.dark .moshaf-option-count {
  color: #a7f3d0;
}

html.dark .moshaf-option.is-active .moshaf-option-count {
  color: #064e3b;
}

@media (max-width: 639px) {
  .moshaf-accordion-trigger {
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 2px 10px;
  }

  .moshaf-accordion-label {
    grid-column: 1;
  }

  .moshaf-accordion-current {
    grid-column: 1;
    grid-row: 2;
  }

  .moshaf-accordion-chevron {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

#alphabet-filter-row {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#alphabet-filter-row::-webkit-scrollbar {
  display: none;
}

#alphabet-filter-bar {
  flex-wrap: nowrap;
}

#alphabet-filter-bar .alpha-btn:not([data-letter="all"]) {
  width: 28px;
  min-width: 28px;
  padding-inline: 0;
  text-align: center;
}

#alphabet-filter-bar .alpha-btn[data-letter="all"] {
  min-width: 42px;
  text-align: center;
}

html.light #view-reciter .stype-btn {
  color: #334155 !important;
  background-color: #fdfcf7 !important;
  border-color: #e2d8b8 !important;
}

html.light #view-reciter .stype-btn:hover {
  background-color: #efe9d5 !important;
  color: #022c22 !important;
}

html.light #view-reciter .stype-btn.active-stype {
  background-color: #065f46 !important;
  border-color: #065f46 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(6, 78, 59, 0.2);
}

html.dark #view-reciter .stype-btn {
  color: #d1fae5 !important;
  background-color: #022c22 !important;
  border-color: #047857 !important;
}

html.dark #view-reciter .stype-btn:hover {
  background-color: #065f46 !important;
  color: #ffffff !important;
}

html.dark #view-reciter .stype-btn.active-stype {
  background-color: #fbbf24 !important;
  border-color: #fbbf24 !important;
  color: #022c22 !important;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.2);
}

@media (min-width: 1024px) {
  #alphabet-filter-row {
    overflow-x: hidden;
  }

  #alphabet-filter-bar {
    gap: 2px;
  }

  #alphabet-filter-bar .alpha-btn:not([data-letter="all"]) {
    width: 20px;
    min-width: 20px;
  }
}

@media (min-width: 1280px) {
  #alphabet-filter-bar {
    gap: 4px;
  }

  #alphabet-filter-bar .alpha-btn:not([data-letter="all"]) {
    width: 28px;
    min-width: 28px;
  }
}

#view-about h2,
#view-favorites > div:first-child h1,
#view-surahs > div:first-child h1 {
  text-wrap: balance;
}

@media (max-width: 639px) {
  .reciter-card,
  .surah-card,
  #reciter-profile-header,
  #view-surahs > div.bg-white,
  #view-favorites > div.bg-white,
  #view-about > div.bg-white {
    background-size: auto, 14px 14px, 14px 14px;
  }
}