/* =====================================================
   MOBIELE AANPASSINGEN — SCHOON EN VEILIG
   Alleen telefoon, PC blijft normaal
   ===================================================== */

@media (max-width: 600px) {

  /* =====================================================
     ALGEMEEN / SETTINGS
     ===================================================== */

  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  img,
  video {
    max-width: 100% !important;
  }

  div[class*="menu"],
  div[class*="panel"],
  div[class*="settings"] {
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #menuToggle {
    width: 40px !important;
    height: 40px !important;
    top: 10px !important;
    right: 10px !important;
    border-radius: 12px !important;
    padding: 6px !important;
  }

  #menuToggle i {
    font-size: 0.95rem !important;
  }

  .side-menu {
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
    top: 8px !important;
    right: -110% !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 28px 0 0 28px !important;
    overflow-x: hidden !important;
  }

  .side-menu.open {
    right: 8px !important;
  }

  .side-menu *,
  .side-menu *::before,
  .side-menu *::after {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* =====================================================
     HERO — HOMEPAGE / READ / AUDIO
     ===================================================== */

  .subtitle,
  .hero-description {
    display: none !important;
  }

  .hero {
    padding: 8px 6px !important;
  }

  .hero-card {
    padding: 24px 16px 20px !important;
    min-height: 165px !important;
    border-radius: 20px !important;
    text-align: center !important;
  }

  .hero h1 {
    font-size: 1.3rem !important;
    margin: 4px 0 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
  }

  .search-wrapper {
    margin: 10px auto 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
    position: relative !important;
  }

  .search {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 14px !important;
    font-size: 0.72rem !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
    text-align: right !important;
    margin: 0 !important;
  }

  .search::placeholder {
    font-size: 0.7rem !important;
  }

  .buttons {
    margin-top: 14px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 4px !important;
    overflow: visible !important;
    width: 100% !important;
  }

  .hero-chip-btn {
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 0.68rem !important;
    border-radius: 14px !important;
    gap: 6px !important;
    font-weight: 700 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hero-chip-btn i,
  .hero-chip-btn span {
    font-size: 0.68rem !important;
  }

  #favoritesSection {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding: 0 4px !important;
    width: 100% !important;
  }

  #favoritesSection .big-fav-btn,
  #favoritesSection .hero-chip-btn {
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 1 auto !important;
  }

  /* =====================================================
     HOMEPAGE — MAIN / SECTION
     ===================================================== */

  body:not(.read-list-mode) main {
    padding: 18px 10px 28px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .section-header {
    margin-bottom: 14px !important;
  }

  .section-header h2 {
    font-size: 1.3rem !important;
  }

  .result-text {
    font-size: 0.72rem !important;
  }

  body:not(.read-list-mode) main #surahGrid.grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* =====================================================
     SURAH CARDS — HOMEPAGE TELEFOON
     ===================================================== */

  body:not(.read-list-mode) main #surahGrid.grid .card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    height: auto !important;

    padding: 7px 36px 7px 11px !important;
    gap: 7px !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  text-align: left !important;

    border-radius: 13px !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  body:not(.read-list-mode) main #surahGrid.grid .card .number {
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 0.74rem !important;
  }

  body:not(.read-list-mode) main #surahGrid.grid .card .info {
    flex: 1 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  body:not(.read-list-mode) main #surahGrid.grid .card .info h3 {
    font-size: 0.88rem !important;
    margin-bottom: 1px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  body:not(.read-list-mode) main #surahGrid.grid .card .info p {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }

  body:not(.read-list-mode) main #surahGrid.grid .card .arabic {
    min-width: auto !important;
    text-align: right !important;
  }

  body:not(.read-list-mode) main #surahGrid.grid .card .arabic h3 {
    font-size: 1.05rem !important;
    margin-bottom: 1px !important;
    line-height: 1.2 !important;
  }

  body:not(.read-list-mode) main #surahGrid.grid .card .arabic p {
    font-size: 0.64rem !important;
    line-height: 1.2 !important;
  }

  body:not(.read-list-mode) main #surahGrid.grid .card .favorite-btn {
    position: absolute !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;

    top: 6px !important;
    right: 6px !important;
    left: auto !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 0.75rem !important;
    line-height: 1 !important;

    border-radius: 6px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;

    box-sizing: border-box !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 30 !important;
  }

  body:not(.read-list-mode) main #surahGrid.grid .card .favorite-btn i {
    font-size: 0.75rem !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }

  /* =====================================================
     SURAH DETAIL PAGINA — ALLEEN TELEFOON
     ===================================================== */

  .has-floating-back {
    margin: 12px auto !important;
    width: calc(100% - 16px) !important;
  }

  .has-floating-back .detail-card {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .has-floating-back .floating-back-btn {
    padding: 8px 14px !important;
    font-size: 0.78rem !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .has-floating-back .detail-header {
    background: var(--card) !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 18px 16px 16px 16px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .has-floating-back .detail-header .detail-main-info {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .has-floating-back .detail-header h1 {
    font-size: 1.5rem !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
  }

  .has-floating-back .detail-header p {
    font-size: 0.82rem !important;
    margin: 4px 0 !important;
  }

  .has-floating-back .detail-header .detail-arabic {
    flex-shrink: 0 !important;
  }

  .has-floating-back .detail-header .detail-arabic h2 {
   font-size: 1.55rem !important; 
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  .has-floating-back .surah-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin-top: 16px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .has-floating-back .surah-actions a.read-surah-link,
  .has-floating-back .surah-actions a.listen-surah-link {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
    height: 38px !important;
    padding: 0 6px !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    text-align: center !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #e5e7eb !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
    text-decoration: none !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .has-floating-back .detail-boxes {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    background: var(--card) !important;
    border-radius: 0 0 18px 18px !important;
    padding: 0 16px 18px 16px !important;
    margin: 0 0 20px 0 !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
  }

  .has-floating-back .detail-box {
    background: var(--soft-card) !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  .has-floating-back .detail-box h3 {
    font-size: 0.7rem !important;
    margin-bottom: 6px !important;
    font-weight: 700 !important;
  }

  .has-floating-back .detail-box p {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  .has-floating-back .detail-box:nth-child(3) p {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
  }

  .has-floating-back .ayah-section {
    margin-top: 24px !important;
  }

  .has-floating-back .ayah-section-title {
    font-size: 1.1rem !important;
    margin: 0 0 12px !important;
    padding: 0 4px !important;
  }

  .has-floating-back .ayah-list {
    gap: 12px !important;
  }

  .has-floating-back .ayah-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 14px 12px !important;
    margin: 0 !important;
  }

  .has-floating-back .ayah-card.active {
    border: 2px solid #2563eb !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1) !important;
  }

  .has-floating-back .ayah-number-badge {
    font-size: 0.68rem !important;
    padding: 5px 10px !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
  }

  .has-floating-back .ayah-arabic {
    font-size: 1.3rem !important;
    line-height: 1.85 !important;
    margin: 0 0 12px !important;
  }

  .has-floating-back .translation-block {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin-top: 8px !important;
  }

  .has-floating-back .translation-block h3 {
    font-size: 0.72rem !important;
    margin-bottom: 4px !important;
    font-weight: 700 !important;
  }

  .has-floating-back .translation-block:not(.translation-pashto):not(.translation-dari) p {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
  }

  .has-floating-back .translation-pashto p,
  .has-floating-back .translation-dari p {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
  }

  .has-floating-back .translation-block p:empty {
    min-height: 4px !important;
    margin: 0 !important;
  }

  .has-floating-back .ayah-favorite-btn {
    padding: 6px 10px !important;
    font-size: 0.7rem !important;
    top: 12px !important;
    right: 12px !important;
  }

  .has-floating-back .ayah-copy-btn {
    width: 32px !important;
    height: 32px !important;
    top: 12px !important;
    right: 130px !important;
  }

  .has-floating-back .media-section {
    margin-top: 18px !important;
  }

  .has-floating-back .media-section h3 {
    font-size: 0.95rem !important;
    margin-bottom: 10px !important;
    padding: 0 4px !important;
  }

  .has-floating-back .video-box {
    padding: 12px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }

  .has-floating-back .video-box p {
    font-size: 0.72rem !important;
    margin: 0 0 8px !important;
  }

  .has-floating-back .video-box p strong {
    font-size: 0.75rem !important;
  }

  .has-floating-back .video-box a.video-link {
    padding: 7px 12px !important;
    font-size: 0.68rem !important;
    border-radius: 10px !important;
    display: inline-block !important;
  }

  .page-end-card {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    margin-top: 10px !important;
  }

  .page-end-card h3 {
    font-size: 0.95rem !important;
    margin: 0 !important;
  }

  /* =====================================================
     FOOTER MOBILE
     ===================================================== */

  .site-footer {
    padding: 28px 18px 20px !important;
    border-radius: 20px !important;
  }

  .footer-about h2 {
    font-size: 1.4rem !important;
    margin-bottom: 10px !important;
  }

  .footer-about p {
    font-size: 0.82rem !important;
    line-height: 1.6 !important;
  }

  .footer-links h3 {
    font-size: 1.2rem !important;
    margin-bottom: 14px !important;
    margin-top: 6px !important;
  }

  .footer-links a {
    font-size: 0.85rem !important;
    margin-bottom: 12px !important;
    gap: 10px !important;
  }

  .footer-links a i {
    font-size: 0.9rem !important;
  }

  .footer-container {
    gap: 20px !important;
  }

  .footer-bottom {
    margin-top: 24px !important;
    font-size: 0.75rem !important;
  }
}













/* =====================================================
   MOBIEL — Read Quran pagina (telefoon size)
   ALLERSTERKSTE selector — wint van alle oude regels
   ===================================================== */

@media (max-width: 600px) {

  /* ✅ Back-knoppen verbergen op telefoon */
  body.read-list-mode .hero-back-link,
  body.read-list-mode #readerBackLink,
  body.read-list-mode #readerBackToList,
  body.read-list-mode .reader-top-links {
    display: none !important;
  }

  /* ✅ Hero — strak, geen lege ruimte boven titel */
  body.read-list-mode #readerContent > .hero {
    padding: 10px 8px !important;
  }

  body.read-list-mode #readerContent > .hero .hero-card {
    padding: 16px 16px 18px !important;
    min-height: auto !important;
    border-radius: 20px !important;
  }

  /* ✅ "Read Quran" titel — homepage size */
  body.read-list-mode #readerContent > .hero .hero-card h1 {
    font-size: 1.3rem !important;
    margin: 2px 0 !important;
    line-height: 1.1 !important;
  }

  /* ✅ Subtitle + description verbergen */
  body.read-list-mode #readerContent > .hero .hero-card .subtitle,
  body.read-list-mode #readerContent > .hero .hero-card .hero-description {
    display: none !important;
  }

  /* ✅ Zoekbalk — homepage size */
  body.read-list-mode #readerContent .search-wrapper {
    margin: 10px auto 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  body.read-list-mode #readerContent .search {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 14px !important;
    font-size: 0.72rem !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
    text-align: right !important;
    margin: 0 !important;
  }

  body.read-list-mode #readerContent .search::placeholder {
    font-size: 0.7rem !important;
  }

  /* ✅ 3 knopjes container — homepage size */
  body.read-list-mode #readerContent .buttons {
    margin-top: 14px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 4px !important;
    width: 100% !important;
  }

  /* ✅ Knopjes zelf — homepage size */
  body.read-list-mode #readerContent .hero-chip-btn {
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 0.68rem !important;
    border-radius: 14px !important;
    gap: 6px !important;
    font-weight: 700 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.read-list-mode #readerContent .hero-chip-btn i,
  body.read-list-mode #readerContent .hero-chip-btn span {
    font-size: 0.68rem !important;
  }

  /* ✅ Darkmode knop — klein (telefoon size) */
  .read-theme-toggle {
    width: 40px !important;
    height: 40px !important;
    top: 10px !important;
    right: 10px !important;
    border-radius: 12px !important;
    padding: 6px !important;
  }

  .read-theme-toggle i {
    font-size: 0.95rem !important;
  }

  /* ✅ "All Surahs" titel — homepage size */
  body.read-list-mode .read-list-section-title {
    font-size: 1.3rem !important;
  }

  /* ✅ Surah grid — 1 per rij */
  body.read-list-mode #readSurahGrid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 10px !important;
  }

  /* ✅ Read surah card — homepage size (WINT van oude regels) */
  body.read-list-mode #readSurahGrid .read-surah-card {
    min-height: 52px !important;
    height: auto !important;
    padding: 9px 40px 9px 13px !important;
    gap: 8px !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    border-radius: 14px !important;
    position: relative !important;
  }

  /* ✅ Nummer (ruit) homepage size */
  body.read-list-mode #readSurahGrid .read-surah-card .number {
    min-width: 32px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 0.78rem !important;
  }

  /* ✅ Info homepage size */
  body.read-list-mode #readSurahGrid .read-surah-card .info h3 {
    font-size: 0.92rem !important;
    margin-bottom: 1px !important;
    font-weight: 700 !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card .info p {
    font-size: 0.72rem !important;
  }

  /* ✅ Arabisch homepage size */
  body.read-list-mode #readSurahGrid .read-surah-card .arabic h3 {
    font-size: 1.15rem !important;
    margin-bottom: 1px !important;
  }

  /* ✅ Hartje knop — klein, rechtsboven (zoals homepage) */
  body.read-list-mode #readSurahGrid .read-surah-card .fav-btn {
    position: absolute !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 0.75rem !important;
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}



















/* =====================================================
   MOBIEL — Read Quran SINGLE SURAH pagina (telefoon size)
   Als je op een surah klikt
   ===================================================== */

@media (max-width: 600px) {

  /* ✅ "Back to surah list" knop verbergen op telefoon */
  body:not(.read-list-mode) .reader-top-links,
  body:not(.read-list-mode) #readerBackToList,
  body:not(.read-list-mode) .reader-page .back-link {
    display: none !important;
  }

  /* ✅ Reader page — strak, minder ruimte */
  body:not(.read-list-mode) .reader-page {
    margin: 12px auto !important;
    padding: 12px !important;
  }

  /* ✅ De lees-kaart kleiner */
  body:not(.read-list-mode) .quran-reading-card {
    padding: 16px 14px 20px !important;
    border-radius: 16px !important;
  }

  /* ✅ "Now reading" label kleiner */
  body:not(.read-list-mode) .reader-label {
    font-size: 0.75rem !important;
    margin: 0 0 6px !important;
  }

  /* ✅ Surah titel (1. Al-Fatiha) kleiner */
  body:not(.read-list-mode) .reader-surah-header h1,
  body:not(.read-list-mode) .reader-title-row h1 {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
  }

  /* ✅ Titel-rij netjes naast elkaar */
  body:not(.read-list-mode) .reader-title-row {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  /* ✅ Arabische surah naam kleiner */
  body:not(.read-list-mode) .reader-surah-arabic-name {
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
  }

  /* ✅ Meta (7 Ayahs) kleiner + minder ruimte */
  body:not(.read-list-mode) .reader-surah-meta {
    margin-top: 8px !important;
    gap: 8px !important;
    font-size: 0.78rem !important;
  }

  /* ✅ Page-nummer kleiner */
  body:not(.read-list-mode) .reader-page-summary {
    font-size: 0.78rem !important;
    margin-top: 6px !important;
  }

  /* ✅ Header zelf minder ruimte onder */
  body:not(.read-list-mode) .reader-surah-header {
    margin-bottom: 14px !important;
  }
}


/* =====================================================
   MOBIEL — Read Quran ayah-tekst kleiner (telefoon)
   ===================================================== */

@media (max-width: 600px) {

  /* ✅ Arabische ayah-tekst kleiner */
  body:not(.read-list-mode) .reader-page .reader-page-text,
  body:not(.read-list-mode) .reader-page-text {
    font-size: 1.5rem !important;
    line-height: 2.1 !important;
  }

  /* ✅ Bismillah-tekst kleiner */
  body:not(.read-list-mode) .reader-page .reader-bismillah,
  body:not(.read-list-mode) .reader-bismillah {
    font-size: 1.4rem !important;
    line-height: 1.7 !important;
  }

  /* ✅ Bismillah-kaart strakker */
  body:not(.read-list-mode) .reader-bismillah-card {
    padding: 12px 12px !important;
    border-radius: 14px !important;
  }

  /* ✅ Lees-pagina blok strakker */
  body:not(.read-list-mode) .reader-single-page {
    padding: 16px 12px 18px !important;
    border-radius: 16px !important;
  }

  /* ✅ "Ayahs 1 - 7" regel kleiner */
  body:not(.read-list-mode) .reader-page-range {
    font-size: 0.75rem !important;
  }

  /* ✅ "Page 1" onderaan kleiner */
  body:not(.read-list-mode) .reader-page-footer {
    font-size: 0.8rem !important;
  }

  /* ✅ Ayah-nummer rondje kleiner */
  body:not(.read-list-mode) .ayah-inline-number {
    font-size: 0.7rem !important;
    min-width: 22px !important;
    height: 22px !important;
    margin: 0 4px !important;
  }
}


/* =====================================================
   MOBIEL — Read Quran SINGLE SURAH minder ruimte links/rechts
   ===================================================== */

@media (max-width: 600px) {

  /* ✅ Reader page — bijna geen ruimte links/rechts */
  body:not(.read-list-mode) .reader-page {
    margin: 12px auto !important;
    padding: 0 8px !important;
  }

  /* ✅ Reader content ook strak */
  body:not(.read-list-mode) #readerContent {
    padding: 0 !important;
    margin: 0 auto !important;
  }

  /* ✅ Lees-kaart breder (minder eigen padding) */
  body:not(.read-list-mode) .quran-reading-card {
    padding: 16px 12px 18px !important;
  }

  /* ✅ Ayah-blok breder maken */
  body:not(.read-list-mode) .reader-single-page {
    padding: 14px 8px 16px !important;
  }
}

/* =====================================================
   MOBIEL — Read Quran SINGLE SURAH
   Kaart links + rechts EXACT gelijk
   ===================================================== */

@media (max-width: 600px) {

  /* ✅ Reader page — gelijke ruimte beide kanten */
  body:not(.read-list-mode) .reader-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  /* ✅ Reader content — gelijke ruimte beide kanten */
  body:not(.read-list-mode) #readerContent {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* ✅ Lees-kaart — netjes binnen, beide kanten gelijk */
  body:not(.read-list-mode) .quran-reading-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 12px 18px !important;
    box-sizing: border-box !important;
  }

  /* ✅ Ayah-blok — netjes binnen, beide kanten gelijk */
  body:not(.read-list-mode) .reader-single-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 14px 10px 16px !important;
    box-sizing: border-box !important;
  }

  /* ✅ Pages-wrapper geen extra ruimte */
  body:not(.read-list-mode) .reader-pages-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
}



/* =====================================================
   READ QURAN — ayah tekst uitvullen (rand tot rand)
   ===================================================== */

.reader-page-text {
  text-align: justify !important;
  text-align-last: center !important;
  text-justify: inter-word !important;
}

















/* =====================================================
   MOBIEL — AUDIO QURAN PAGINA
   Zelfde telefoon-size als Homepage + Read Quran
   ===================================================== */

@media (max-width: 600px) {

  /* =====================================================
     AUDIO LIST PAGE — algemene wrapper
  ===================================================== */

  .detail-page.audio-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 28px !important;
    box-sizing: border-box !important;
  }

  /* ✅ Back to homepage knop op telefoon verbergen */
  .detail-page.audio-page .hero-back-link,
  .detail-page.audio-page .page-back-link,
  .detail-page.audio-page .back-link,
  .detail-page.audio-page .back-btn {
    display: none !important;
  }

  /* =====================================================
     AUDIO HERO — zelfde size als Read Quran mobiel
  ===================================================== */

  .detail-page.audio-page > .hero {
    padding: 10px 8px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--hero-bg) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

 .detail-page.audio-page > .hero .hero-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 16px 16px 18px !important;
    min-height: auto !important;
    border-radius: 20px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .detail-page.audio-page > .hero .hero-card h1 {
    font-size: 1.3rem !important;
    margin: 2px 0 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
  }

  /* ✅ Subtitle + description weg op telefoon */
  .detail-page.audio-page > .hero .subtitle,
  .detail-page.audio-page > .hero .hero-description {
    display: none !important;
  }

  /* =====================================================
     AUDIO SEARCH — homepage/read size
  ===================================================== */

  .detail-page.audio-page > .hero .search-wrapper {
    margin: 10px auto 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .detail-page.audio-page > .hero .search {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 14px !important;
    font-size: 0.72rem !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
    text-align: left !important;
    margin: 0 !important;
  }

  .detail-page.audio-page > .hero .search::placeholder {
    font-size: 0.7rem !important;
  }

  /* =====================================================
     AUDIO HERO BUTTONS — zelfde als homepage/read
  ===================================================== */

  .detail-page.audio-page > .hero .buttons {
    margin-top: 14px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 4px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .detail-page.audio-page > .hero .hero-chip-btn {
    height: 32px !important;
    padding: 0 14px !important;
    font-size: 0.68rem !important;
    border-radius: 14px !important;
    gap: 6px !important;
    font-weight: 700 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .detail-page.audio-page > .hero .hero-chip-btn i,
  .detail-page.audio-page > .hero .hero-chip-btn span {
    font-size: 0.68rem !important;
  }

  /* =====================================================
     AUDIO DARK MODE BUTTON — telefoon size
  ===================================================== */

  .audio-theme-toggle {
    width: 40px !important;
    height: 40px !important;
    top: 10px !important;
    right: 10px !important;
    border-radius: 12px !important;
    padding: 6px !important;
  }

  .audio-theme-toggle i {
    font-size: 0.95rem !important;
  }

  /* =====================================================
     AUDIO TITLE + SURAH LIST
  ===================================================== */

  .detail-page.audio-page > #audioListTitle {
    max-width: 100% !important;
    width: 100% !important;
    margin: 18px auto 12px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    font-size: 1.3rem !important;
  }

  .detail-page.audio-page > #audioSurahList {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  /* =====================================================
     AUDIO SURAH CARD — zelfde als homepage/read card
  ===================================================== */

  .detail-page.audio-page #audioSurahList .card,
  .detail-page.audio-page #audioSurahList .read-surah-card {
    min-height: 52px !important;
    height: auto !important;

    padding: 9px 40px 9px 13px !important;
    gap: 8px !important;

    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;

    border-radius: 14px !important;
    position: relative !important;

    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ✅ Nummer ruitje */
  .detail-page.audio-page #audioSurahList .card .number,
  .detail-page.audio-page #audioSurahList .read-surah-card .number {
    min-width: 32px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 0.78rem !important;
  }

  /* ✅ Engelse info */
  .detail-page.audio-page #audioSurahList .card .info,
  .detail-page.audio-page #audioSurahList .read-surah-card .info {
    flex: 1 !important;
    padding-left: 0 !important;
    text-align: left !important;
    min-width: 0 !important;
  }

  .detail-page.audio-page #audioSurahList .card .info h3,
  .detail-page.audio-page #audioSurahList .read-surah-card .info h3 {
    font-size: 0.92rem !important;
    margin-bottom: 1px !important;
    font-weight: 700 !important;
  }

  .detail-page.audio-page #audioSurahList .card .info p,
  .detail-page.audio-page #audioSurahList .read-surah-card .info p {
    font-size: 0.72rem !important;
  }

  /* ✅ Arabische naam */
  .detail-page.audio-page #audioSurahList .card .arabic,
  .detail-page.audio-page #audioSurahList .read-surah-card .arabic {
    min-width: auto !important;
    text-align: right !important;
  }

  .detail-page.audio-page #audioSurahList .card .arabic h3,
  .detail-page.audio-page #audioSurahList .read-surah-card .arabic h3 {
    font-size: 1.15rem !important;
    margin-bottom: 1px !important;
  }

  .detail-page.audio-page #audioSurahList .card .arabic p,
  .detail-page.audio-page #audioSurahList .read-surah-card .arabic p {
    font-size: 0.68rem !important;
  }

  /* ✅ Hartje rechtsboven, zoals homepage/read */
  .detail-page.audio-page #audioSurahList .fav-btn,
  .detail-page.audio-page #audioSurahList .favorite-btn {
    position: absolute !important;

    width: 24px !important;
    height: 24px !important;

    top: 6px !important;
    right: 6px !important;
    left: auto !important;

    font-size: 0.75rem !important;
    border-radius: 6px !important;

    background: transparent !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;

    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 30 !important;
  }
}


/* =====================================================
   MOBIEL — AUDIO QARI PAGE FIX
   Back knop weg + 2 qari per rij + kleinere fotos
   MOET HELEMAAL ONDERAAN style.css
===================================================== */

@media (max-width: 600px) {

  /* ✅ Back to surah list knop verbergen op telefoon */
  .detail-page:has(.qari-page) .back-link,
  .detail-page:has(.qari-page) .page-back-link,
  .detail-page:has(.qari-page) .back-btn,
  .detail-page:has(.qari-page) .floating-back-btn,
  .detail-page:has(.qari-page) a[href*="audio"],
  .detail-page:has(.qari-page) a[href*="surah"] {
    display: none !important;
  }

  /* ✅ Qari page container kleiner/strakker */
  .detail-page .detail-card.qari-page,
  .detail-card.qari-page,
  .qari-page {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    margin: 12px auto 24px !important;
    padding: 24px 16px 24px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }

  /* ✅ Titel Choose a Qari kleiner */
  .qari-page h1,
  .qari-page h2,
  .detail-card.qari-page h1,
  .detail-card.qari-page h2 {
    font-size: 2rem !important;
    line-height: 1.15 !important;
    margin: 0 0 22px !important;
    letter-spacing: -0.03em !important;
  }

  /* ✅ Qari grid: precies 2 per rij */
  .qari-page .qari-grid,
  .detail-card.qari-page .qari-grid,
  .qari-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 22px !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: start !important;
    box-sizing: border-box !important;
  }

  /* ✅ Laatste rij ook 2 per rij */
  .qari-page .qari-last-row,
  .detail-card.qari-page .qari-last-row,
  .qari-last-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* ✅ Qari card zelf */
  .qari-page .qari-card,
  .detail-card.qari-page .qari-card,
  .qari-card {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* ✅ Qari foto's kleiner */
  .qari-page .qari-card img,
  .detail-card.qari-page .qari-card img,
  .qari-card img {
    width: 100% !important;
    max-width: 145px !important;
    height: 145px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* ✅ Qari naam kleiner */
  .qari-page .qari-card p,
  .detail-card.qari-page .qari-card p,
  .qari-card p {
    margin: 8px auto 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    max-width: 150px !important;
    text-align: center !important;
  }

  /* ✅ Selected qari border */
  .qari-page .qari-card.active img,
  .detail-card.qari-page .qari-card.active img,
  .qari-card.active img {
    border: 3px solid #2563eb !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2) !important;
  }

  /* ✅ Check icon kleiner */
  .qari-page .qari-card.active::after,
  .detail-card.qari-page .qari-card.active::after,
  .qari-card.active::after {
    width: 22px !important;
    height: 22px !important;
    top: 6px !important;
    right: calc(50% - 68px) !important;
    font-size: 13px !important;
    z-index: 10 !important;
  }

  /* ✅ Continue/select knop kleiner */
  .qari-page .qari-actions,
  .detail-card.qari-page .qari-actions,
  .qari-actions {
    margin-top: 20px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .qari-page .qari-action-btn,
  .detail-card.qari-page .qari-action-btn,
  .qari-action-btn {
    height: 36px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
  }
}





















/* =====================================================
   MOBIEL — QARI LAST ROW FIX
   2 per rij + laatste alleen in het midden
   MOET HELEMAAL ONDERAAN style.css
===================================================== */

@media (max-width: 600px) {

  /* ✅ Geen horizontale scroll */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* ✅ Qari pagina binnen scherm houden */
  .detail-page:has(.qari-page) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 20px 0 !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* ✅ Qari card binnen scherm */
  .detail-page .detail-card.qari-page,
  .detail-card.qari-page,
  .qari-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 20px auto !important;
    padding: 22px 12px 22px 12px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* ✅ Normale qari grid: 2 per rij */
  .detail-card.qari-page .qari-grid,
  .qari-page .qari-grid,
  .qari-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 12px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto 22px auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* ✅ Laatste rij OOK 2 per rij maken, niet flex */
  .detail-card.qari-page .qari-last-row,
  .qari-page .qari-last-row,
  .qari-last-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 12px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    justify-content: initial !important;
    align-items: start !important;
  }

  /* ✅ Alle qari cards normaal binnen kolom */
  .detail-card.qari-page .qari-card,
  .qari-page .qari-card,
  .qari-card {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
    box-sizing: border-box !important;

    flex: none !important;
  }

  /* ✅ Foto size — mooie size zoals jij wilde */
  .detail-card.qari-page .qari-card img,
  .qari-page .qari-card img,
  .qari-card img {
    width: 145px !important;
    max-width: 145px !important;
    height: 145px !important;

    object-fit: cover !important;
    border-radius: 16px !important;

    display: block !important;
    margin: 0 auto !important;
  }

  /* ✅ Naam netjes kleiner en gecentreerd */
  .detail-card.qari-page .qari-card p,
  .qari-page .qari-card p,
  .qari-card p {
    font-size: 0.9rem !important;
    line-height: 1.22 !important;
    font-weight: 500 !important;

    max-width: 155px !important;
    margin: 8px auto 0 auto !important;

    text-align: center !important;
    word-break: normal !important;
  }

  /* ✅ Als laatste qari alleen overblijft in qari-grid */
  .detail-card.qari-page .qari-grid > .qari-card:last-child:nth-child(odd),
  .qari-page .qari-grid > .qari-card:last-child:nth-child(odd),
  .qari-grid > .qari-card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;

    width: 145px !important;
    max-width: 145px !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ✅ Als laatste qari alleen overblijft in qari-last-row */
  .detail-card.qari-page .qari-last-row > .qari-card:last-child:nth-child(odd),
  .qari-page .qari-last-row > .qari-card:last-child:nth-child(odd),
  .qari-last-row > .qari-card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;

    width: 145px !important;
    max-width: 145px !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ✅ Foto + naam van centered laatste qari */
  .qari-grid > .qari-card:last-child:nth-child(odd) img,
  .qari-grid > .qari-card:last-child:nth-child(odd) p,
  .qari-last-row > .qari-card:last-child:nth-child(odd) img,
  .qari-last-row > .qari-card:last-child:nth-child(odd) p {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* ✅ Select knop mooi onderaan */
  .qari-actions {
    margin-top: 22px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .qari-action-btn {
    height: 36px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
  }
}


































/* =====================================================
   MOBILE FIX — Homepage + Read Quran cards compacter
   en Read Quran netjes gecentreerd
   ===================================================== */
@media (max-width: 600px) {

  /* =========================
     HOMEPAGE SURAH CARDS
     ========================= */
  #surahGrid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  #surahGrid .card {
    min-height: 52px !important;
    padding: 9px 40px 9px 13px !important;
    gap: 8px !important;
    border-radius: 14px !important;
  }

  #surahGrid .card .number {
    min-width: 32px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 0.78rem !important;
  }

  #surahGrid .card .info h3 {
    font-size: 0.92rem !important;
    margin-bottom: 1px !important;
  }

  #surahGrid .card .info p {
    font-size: 0.72rem !important;
  }

  #surahGrid .card .arabic h3 {
    font-size: 1.15rem !important;
    margin-bottom: 1px !important;
  }

  #surahGrid .card .arabic p {
    font-size: 0.68rem !important;
  }

  /* =========================
     READ QURAN SECTION CENTREREN
     ========================= */
  body.read-list-mode #readerContent > .read-list-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px auto 28px auto !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  body.read-list-mode #readSurahGrid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  /* =========================
     READ QURAN SURAH CARDS
     ========================= */
  body.read-list-mode #readSurahGrid .read-surah-card {
    min-height: 52px !important;
    height: auto !important;
    padding: 9px 40px 9px 13px !important;
    gap: 8px !important;
    border-radius: 14px !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card .number {
    min-width: 32px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 0.78rem !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card .info h3 {
    font-size: 0.92rem !important;
    margin-bottom: 1px !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card .info p {
    font-size: 0.72rem !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card .arabic h3 {
    font-size: 1.15rem !important;
    margin-bottom: 1px !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card .arabic p {
    font-size: 0.68rem !important;
  }

  /* Hartje netjes rechtsboven */
  body.read-list-mode #readSurahGrid .read-surah-card .fav-btn {
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
  }
}






/* =====================================================
   DESKTOP RESET — voorkomt dat telefoon card-style op pc werkt
   ===================================================== */
@media (min-width: 601px) {
  .card {
    padding: 22px !important;
    gap: 18px !important;
    border-radius: 20px !important;
    min-height: unset !important;
  }

  .card .number {
    min-width: 46px !important;
    width: 46px !important;
    height: 46px !important;
    font-size: 1rem !important;
  }

  .card .info {
    padding-left: 6px !important;
  }

  .card .info h3 {
    font-size: 1.45rem !important;
    margin-bottom: 8px !important;
  }

  .card .info p {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  .card .arabic {
    min-width: 140px !important;
  }

  .card .arabic h3 {
    font-size: 2rem !important;
    margin-bottom: 8px !important;
  }

  .card .arabic p {
    font-size: 0.95rem !important;
  }

  .card .favorite-btn {
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 1rem !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
  }
}
























/* =====================================================
   HOMEPAGE MOBILE — zelfde spacing/card/heart als Audio & Read
   Alleen telefoon, alleen homepage
   ===================================================== */
@media (max-width: 600px) {

  /* Homepage main dezelfde zijruimte als Audio/Read */
  body > main:not(.detail-page):not(.reader-page) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 18px 10px 28px !important;
    box-sizing: border-box !important;
  }

  /* Homepage grid exact gecentreerd */
  body > main:not(.detail-page):not(.reader-page) #surahGrid.grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Homepage card zelfde telefoon-size als Audio/Read */
  body > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    height: auto !important;

    padding: 9px 40px 9px 13px !important;
    gap: 8px !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;

    border-radius: 14px !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* Nummer ruitje */
  body > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .number {
    min-width: 32px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 0.78rem !important;
  }

  /* Engelse info */
  body > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .info {
    flex: 1 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  body > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .info h3 {
    font-size: 0.92rem !important;
    margin-bottom: 1px !important;
    font-weight: 700 !important;
  }

  body > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .info p {
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
  }

  /* Arabische naam */
  body > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .arabic {
    min-width: auto !important;
    text-align: right !important;
  }

  body > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .arabic h3 {
    font-size: 1.15rem !important;
    margin-bottom: 1px !important;
  }

  body > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .arabic p {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
  }

  /* Hartje klein zoals Audio/Read */
  body > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .favorite-btn {
    position: absolute !important;

    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;

    top: 6px !important;
    right: 6px !important;
    left: auto !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 0.75rem !important;
    line-height: 1 !important;

    border-radius: 6px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;

    box-sizing: border-box !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 30 !important;
  }

  body > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .favorite-btn i {
    font-size: 0.75rem !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }
}















/* =====================================================
   FINAL MOBILE SURAH CARDS FIX
   Alleen telefoon — Homepage + Read Quran + Audio Quran
   Pc blijft normaal
   ===================================================== */
@media (max-width: 600px) {

  /* =========================
     HOMEPAGE GRID SPACING
     ========================= */
  body:not(.read-list-mode) main #surahGrid.grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  body:not(.read-list-mode) main {
    padding: 18px 10px 28px !important;
    box-sizing: border-box !important;
  }

  /* =========================
     READ QURAN GRID SPACING
     ========================= */
  body.read-list-mode #readerContent > .read-list-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px auto 28px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  body.read-list-mode #readSurahGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* =========================
     AUDIO QURAN GRID SPACING
     ========================= */
  .detail-page.audio-page > #audioSurahList {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 28px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
  }

  /* =========================
     ALL MOBILE SURAH CARDS
     Homepage + Read + Audio
     ========================= */
  body:not(.read-list-mode) main #surahGrid.grid .card,
  body.read-list-mode #readSurahGrid .read-surah-card,
  .detail-page.audio-page #audioSurahList .card,
  .detail-page.audio-page #audioSurahList .read-surah-card {
    width: 100% !important;
    max-width: 100% !important;

    min-height: 46px !important;
    height: auto !important;

    padding: 7px 36px 7px 11px !important;
    gap: 7px !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;

    border-radius: 13px !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /* =========================
     NUMBER DIAMOND
     ========================= */
  body:not(.read-list-mode) main #surahGrid.grid .card .number,
  body.read-list-mode #readSurahGrid .read-surah-card .number,
  .detail-page.audio-page #audioSurahList .card .number,
  .detail-page.audio-page #audioSurahList .read-surah-card .number {
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 0.74rem !important;
  }

  /* =========================
     INFO TEXT
     ========================= */
  body:not(.read-list-mode) main #surahGrid.grid .card .info,
  body.read-list-mode #readSurahGrid .read-surah-card .info,
  .detail-page.audio-page #audioSurahList .card .info,
  .detail-page.audio-page #audioSurahList .read-surah-card .info {
    flex: 1 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  body:not(.read-list-mode) main #surahGrid.grid .card .info h3,
  body.read-list-mode #readSurahGrid .read-surah-card .info h3,
  .detail-page.audio-page #audioSurahList .card .info h3,
  .detail-page.audio-page #audioSurahList .read-surah-card .info h3 {
    font-size: 0.88rem !important;
    margin-bottom: 1px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  body:not(.read-list-mode) main #surahGrid.grid .card .info p,
  body.read-list-mode #readSurahGrid .read-surah-card .info p,
  .detail-page.audio-page #audioSurahList .card .info p,
  .detail-page.audio-page #audioSurahList .read-surah-card .info p {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }

  /* =========================
     ARABIC SIDE
     ========================= */
  body:not(.read-list-mode) main #surahGrid.grid .card .arabic,
  body.read-list-mode #readSurahGrid .read-surah-card .arabic,
  .detail-page.audio-page #audioSurahList .card .arabic,
  .detail-page.audio-page #audioSurahList .read-surah-card .arabic {
    min-width: auto !important;
    text-align: right !important;
  }

  body:not(.read-list-mode) main #surahGrid.grid .card .arabic h3,
  body.read-list-mode #readSurahGrid .read-surah-card .arabic h3,
  .detail-page.audio-page #audioSurahList .card .arabic h3,
  .detail-page.audio-page #audioSurahList .read-surah-card .arabic h3 {
    font-size: 1.05rem !important;
    margin-bottom: 1px !important;
    line-height: 1.2 !important;
  }

  body:not(.read-list-mode) main #surahGrid.grid .card .arabic p,
  body.read-list-mode #readSurahGrid .read-surah-card .arabic p,
  .detail-page.audio-page #audioSurahList .card .arabic p,
  .detail-page.audio-page #audioSurahList .read-surah-card .arabic p {
    font-size: 0.64rem !important;
    line-height: 1.2 !important;
  }

  /* =========================
     HEART BUTTON SMALL
     ========================= */
  body:not(.read-list-mode) main #surahGrid.grid .card .favorite-btn,
  body.read-list-mode #readSurahGrid .read-surah-card .fav-btn,
  body.read-list-mode #readSurahGrid .read-surah-card .favorite-btn,
  .detail-page.audio-page #audioSurahList .fav-btn,
  .detail-page.audio-page #audioSurahList .favorite-btn {
    position: absolute !important;

    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;

    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;

    top: 6px !important;
    right: 6px !important;
    left: auto !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 0.75rem !important;
    line-height: 1 !important;

    border-radius: 6px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;

    box-sizing: border-box !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 30 !important;
  }

  body:not(.read-list-mode) main #surahGrid.grid .card .favorite-btn i,
  body.read-list-mode #readSurahGrid .read-surah-card .fav-btn i,
  body.read-list-mode #readSurahGrid .read-surah-card .favorite-btn i,
  .detail-page.audio-page #audioSurahList .fav-btn i,
  .detail-page.audio-page #audioSurahList .favorite-btn i {
    font-size: 0.75rem !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }
}











/* =====================================================
   MOBILE — Hide Back to homepage on Surah detail page
===================================================== */

@media (max-width: 600px) {
  .has-floating-back .floating-back-btn,
  .has-floating-back .back-link,
  .has-floating-back .page-back-link,
  .has-floating-back .back-btn {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}




/* =====================================================
   MOBILE — force remove space under YouTube section
===================================================== */

@media (max-width: 600px) {

  .has-floating-back .media-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .has-floating-back .video-box {
    margin-bottom: 0 !important;
    padding-bottom: 12px !important;
  }

  .has-floating-back {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .has-floating-back #surahDetail {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .has-floating-back #surahDetail > .detail-card {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .page-end-card {
    margin-top: 0 !important;
  }
}





/* =====================================================
   MOBILE — Holy Quran-Pashto geen card + dichter bij YouTube
   Alleen telefoon
===================================================== */

@media (max-width: 600px) {

  /* Minder ruimte onder YouTube gedeelte */
  .has-floating-back .media-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .has-floating-back .video-box {
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
  }

  .has-floating-back #surahDetail,
  .has-floating-back #surahDetail > .detail-card {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Holy Quran-Pashto direct onder YouTube, zonder card */
  .has-floating-back + .page-end-card,
  .page-end-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;

    padding: 0 !important;
   margin: -4px auto 8px auto !important;

    border-radius: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }

  .has-floating-back + .page-end-card h3,
  .page-end-card h3 {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    line-height: 1.2 !important;
  }
}





/* =====================================================
   MOBILE — Ayah buttons klein, zonder ayah card groter te maken
   Alleen telefoon
===================================================== */

@media (max-width: 600px) {

  /* ✅ Ayah card NIET groter maken */
  .has-floating-back .ayah-card {
    padding-top: 14px !important;
  }

  /* ✅ Knoppen standaard verbergen */
  .has-floating-back .ayah-copy-btn,
  .has-floating-back .ayah-favorite-btn {
    display: none !important;
  }

  /* ✅ Copy knop alleen tonen als ayah actief is */
  .has-floating-back .ayah-card.active .ayah-copy-btn {
    display: inline-flex !important;
    position: absolute !important;

    top: 10px !important;
    right: 124px !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;

    background: #ffffff !important;
    color: #0f172a !important;

    align-items: center !important;
    justify-content: center !important;

    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08) !important;
    z-index: 20 !important;
  }

  .has-floating-back .ayah-card.active .ayah-copy-btn svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2.3 !important;
  }

  /* ✅ Favorite knop alleen tonen als ayah actief is */
  .has-floating-back .ayah-card.active .ayah-favorite-btn {
    display: inline-flex !important;
    position: absolute !important;

    top: 10px !important;
    right: 12px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    min-width: 96px !important;
    max-width: 120px !important;

    padding: 0 10px !important;
    margin: 0 !important;

    border-radius: 999px !important;
    border: 1px solid #e5e7eb !important;

    background: #ffffff !important;
    color: #dc2626 !important;

    align-items: center !important;
    justify-content: center !important;

    font-size: 0.72rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08) !important;
    z-index: 20 !important;
  }

  /* ✅ Niet opgeslagen favorite */
  .has-floating-back .ayah-card.active .ayah-favorite-btn:not(.saved) {
    color: #0f172a !important;
  }

  /* ✅ Als tekst Favorited lang is */
  .has-floating-back .ayah-card.active .ayah-favorite-btn.saved {
    min-width: 106px !important;
    max-width: 128px !important;
  }

  /* ✅ Copy feedback */
  .has-floating-back .ayah-card.active .ayah-copy-btn.copied {
    color: #16a34a !important;
    border-color: #16a34a !important;
    background: #f0fdf4 !important;
  }
}





/* =====================================================
   MOBILE — meer ruimte tussen Copy en Favorite knop
===================================================== */

@media (max-width: 600px) {
  .has-floating-back .ayah-copy-btn {
    right: 130px !important;
  }
}





/* =====================================================
   SURAH INFO KNOP — rond en klein op mobiel
===================================================== */

@media (max-width: 600px) {
  .mobile-surah-info-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    background: var(--soft-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;

    box-shadow: none !important;
    cursor: pointer !important;
  }

  .mobile-surah-info-btn .mobile-info-icon {
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  .mobile-surah-info-btn .mobile-info-text {
    display: none !important; /* Verberg tekst, alleen 'i' icoon */
  }

  /* Zorg dat de surah titels genoeg ruimte krijgen */
  .mobile-surah-main {
    flex-grow: 1 !important;
    padding-right: 8px !important;
  }
}



@media (max-width: 600px) {
  /* Maak info knop compact blok met tekst */
  .mobile-surah-info-btn {
    width: auto !important;
    min-width: 42px !important;
    height: 28px !important;

    padding: 0 12px !important;
    border-radius: 14px !important;

    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;

    background: var(--soft-card) !important;
    border: 1px solid var(--border) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;
  }

  /* Verberg icoontje als je alleen “info” tekst wilt */
  .mobile-surah-info-btn .mobile-info-icon {
    display: none !important;
  }

  .mobile-surah-info-btn .mobile-info-text {
    display: none !important;
  }

  /* Maak mobiel su rah namen en knop op 1 rij */
  .mobile-surah-main {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Zorg dat arabische naam netjes naast info knop komt */
  .mobile-surah-arabic {
    order: 2 !important; /* rechts van info knop */
  }
}







@media (max-width: 600px) {
  .mobile-surah-main {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .mobile-surah-name-info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .mobile-surah-title {
    font-weight: 900 !important;
    font-size: 1.25rem !important;
    color: var(--primary) !important;
    white-space: nowrap !important;
  }

  .mobile-surah-info-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;

    font-size: 0.85rem !important;
    font-weight: 700 !important;

    background: var(--soft-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;

    cursor: pointer !important;
  }

  .mobile-surah-arabic {
    font-family: 'Hafs', serif !important;
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    direction: rtl !important;
    white-space: nowrap !important;
  }
}







@media (max-width: 600px) {
  .ayah-num-circle {
    width: 26px !important;
    height: 26px !important;
    font-size: 13px !important;
    margin: 0 4px !important;
  }
}







/* =====================================================
   MOBILE — Ayah + vertalingen iets groter
   Alleen telefoon
===================================================== */

@media (max-width: 600px) {

  /* Titel: Ayahs and translations */
  .has-floating-back .ayah-section-title {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    margin-bottom: 16px !important;
  }

  /* Arabische ayah tekst groter */
  .has-floating-back .ayah-arabic {
    font-size: 1.45rem !important;
    line-height: 2.05 !important;
    margin: 6px 0 16px !important;
  }

  /* Translation cards iets ruimer */
  .has-floating-back .translation-block {
    padding: 13px 14px !important;
    border-radius: 14px !important;
    margin-top: 10px !important;
  }

  /* Titels Pashto / English / Dari */
  .has-floating-back .translation-block h3 {
    font-size: 0.88rem !important;
    font-weight: 900 !important;
    margin-bottom: 7px !important;
  }

  /* Engelse/Dari/Pashto tekst groter */
  

.has-floating-back .translation-english p {
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
}


  /* Pashto en Dari iets beter leesbaar */
 
.has-floating-back .translation-pashto p,
.has-floating-back .translation-dari p {
  font-size: 0.92rem !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
}




  /* Ayah card zelf niet te groot maken, alleen mooi ademruimte */
  .has-floating-back .ayah-card {
    padding: 16px 14px !important;
    border-radius: 18px !important;
  }
}





@media (max-width: 600px) {
  body:not(.read-list-mode) .reader-page {
    padding-bottom: 20px !important;
  }
}






/* =====================================================
   MOBILE — Favorite Ayahs page responsive
   Alleen telefoon
===================================================== */

@media (max-width: 600px) {

  .favorite-ayahs-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px auto 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  .favorite-ayahs-page .back-btn {
    padding: 9px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    margin: 0 0 12px 0 !important;
  }

  .favorite-ayahs-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 14px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
  }

  #favoriteAyahsTitle {
    font-size: 1.7rem !important;
    line-height: 1.15 !important;
    margin: 0 0 16px !important;
    letter-spacing: -0.04em !important;
  }

  #favoriteAyahsContainer {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #favoriteAyahsContainer .ayah-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 12px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #favoriteAyahsContainer .ayah-number-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 11px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    border-radius: 11px !important;
    margin: 0 0 12px 0 !important;
  }

  #favoriteAyahsContainer .ayah-arabic {
    direction: rtl !important;
    text-align: right !important;
    font-size: 1.45rem !important;
    line-height: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .favorite-ayahs-page + .page-end-card,
  .page-end-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin-top: 10px !important;
    padding: 0 0 14px !important;
    border-radius: 0 !important;
    text-align: center !important;
  }

  .page-end-card h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    color: var(--primary) !important;
    line-height: 1.2 !important;
  }
}











/* =====================================================
   MOBILE — Favorite Ayahs title + remove/favorite knop kleiner
   Alleen telefoon
===================================================== */

@media (max-width: 600px) {

  /* Grote witte wrapper iets compacter */
  .favorite-ayahs-card {
    padding: 16px 12px !important;
    border-radius: 22px !important;
  }

  /* Titel Favorite Ayahs kleiner */
  #favoriteAyahsTitle {
    font-size: 1.45rem !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 16px !important;
  }

  /* Ayah card compacter */
  #favoriteAyahsContainer .favorite-ayah-card {
    position: relative !important;
    padding: 13px 12px !important;
    border-radius: 16px !important;
    min-height: auto !important;
  }

  /* Als card actief is, geef ruimte voor knop zonder te groot te worden */
 /* =====================================================
   MOBILE — Favorite Ayahs knop kleiner + badge blijft staan
   Alleen telefoon
===================================================== */

@media (max-width: 600px) {

  /* ✅ Als card active is: NIET extra naar beneden duwen */
  #favoriteAyahsContainer .favorite-ayah-card.active {
    padding-top: 12px !important;
  }

  /* ✅ Badge blijft gewoon links boven */
  #favoriteAyahsContainer .favorite-ayah-card .ayah-number-badge {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 5px 10px !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    border-radius: 10px !important;

    margin: 0 0 10px 0 !important;
  }

  /* ✅ Favorite / Removed knop kleiner */
  #favoriteAyahsContainer .favorite-ayah-card .ayah-favorite-btn {
    position: absolute !important;

    top: 10px !important;
    right: 10px !important;
    left: auto !important;

    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;

    min-width: 76px !important;
    max-width: 96px !important;

    padding: 0 8px !important;
    margin: 0 !important;

    border-radius: 999px !important;

    font-size: 0.62rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    background: #ffffff !important;
    color: #dc2626 !important;
    border: 1px solid #e5e7eb !important;

    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.08) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    z-index: 20 !important;
  }

  /* ✅ Removed state ook klein houden */
  #favoriteAyahsContainer .favorite-ayah-card .ayah-favorite-btn:not(.saved) {
    color: #0f172a !important;
  }

  /* ✅ Arabische tekst blijft normaal */
  #favoriteAyahsContainer .favorite-ayah-card .ayah-arabic {
    margin-top: 4px !important;
  }
}













/* =====================================================
   MOBILE — About Website compact
   Alleen telefoon
===================================================== */

@media (max-width: 600px) {
  .about-page .detail-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px auto 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  .about-page .detail-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
  }

  .about-page .about-back-link {
    padding: 9px 14px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    margin: 0 0 14px 0 !important;
  }

  /* Titels dichter bij elkaar */
  .about-page .about-top-row {
    display: block !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .about-page .about-left,
  .about-page .about-right {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }


  about-page .about-title {
  font-size: 1.25rem !important;
  line-height: 1.05 !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: -0.04em !important;
  }

  .about-page .about-pashto-heading {
    font-size: 1.18rem !important;
    line-height: 1.15 !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    text-align: right !important;
    direction: rtl !important;
  }

  /* Beschrijving dichter bij elkaar */
  .about-page .about-text-row {
    display: block !important;
    margin: 8px 0 8px 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .about-page .about-subtitle {
    width: 100% !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .about-page .about-pashto-inline {
    width: 100% !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    text-align: right !important;
    direction: rtl !important;
  }

  .about-page .about-section-title {
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    margin: 18px 0 12px !important;
    letter-spacing: -0.04em !important;
  }

  .about-page .video-box {
    padding: 14px 12px !important;
    border-radius: 18px !important;
    margin-bottom: 12px !important;
  }

  .about-page .about-video-title {
    font-size: 0.95rem !important;
    margin-bottom: 6px !important;
  }

  .about-page .about-video-text {
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
  }

  .about-page .about-video {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    margin-top: 10px !important;
  }

  .about-page .about-footer-text {
    font-size: 0.95rem !important;
    margin-top: 14px !important;
  }
}















/* =====================================================
   MOBILE — About info knop exact midden in title card
===================================================== */

@media (max-width: 600px) {
  body.about-page .about-title-card {
    position: relative !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) !important;
    align-items: center !important;

    gap: 8px !important;
    padding: 10px 10px !important;
  }

  body.about-page .about-title-left {
    grid-column: 1 !important;
    justify-self: start !important;
    min-width: 0 !important;
  }

  body.about-page .about-info-btn {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;

    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 0.62rem !important;
    font-weight: 900 !important;

    transform: none !important;
  }

  body.about-page .about-title-right {
    grid-column: 3 !important;
    justify-self: end !important;
    min-width: 0 !important;
    text-align: right !important;
  }

  body.about-page .about-title-card .about-title {
    font-size: 0.82rem !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  body.about-page .about-title-card .about-pashto-heading {
    font-size: 0.92rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 600px) {
  body.about-page .about-info-btn {
    transform: translateX(0px) !important;
  }
}

@media (max-width: 600px) {
  body.about-page .about-info-btn {
    transform: translateX(8px) !important;
  }
}





















/* =====================================================
   FEATURED SECTIE — mobiel
===================================================== */

@media (max-width: 600px) {
  #featuredSection {
    width: calc(100% - 24px) !important;
    margin: 12px auto -10px auto !important;
  }

  #featuredSection h3 {
    font-size: 1.1rem !important;
  }

  #featuredSection p {
    font-size: 0.85rem !important;
  }

  #featuredSection a {
    padding: 10px 20px !important;
    font-size: 0.85rem !important;
  }

  #featuredSection iframe {
    border-radius: 14px !important;
  }

  #featuredSection .video-row,
  #featuredSection .foto-row {
    flex-direction: column !important;
  }
}


@media (max-width: 600px) {
  #featuredSection [style*="font-family: 'Hafs'"] {
    font-size: 1.6rem !important;
    line-height: 1.8 !important;
  }
}













/* =====================================================
   AUDIO PLAYER MOBILE — alles goed
===================================================== */

@media (max-width: 600px) {

  /* Lege ruimte weg + card gecentreerd */
  main.audio-player-page {
    margin: 0 !important;
    padding: 16px !important;
    min-height: 100svh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Back knop weg */
  .detail-page:has(.audio-player-card) .back-link,
  main.audio-player-page .back-link {
    display: none !important;
  }

  /* Card kleiner */
  .audio-player-card {
    width: 100% !important;
    max-width: 360px !important;
    padding: 20px 18px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
  }

  /* Surah naam kleiner + foto niet overlappen */
  .audio-player-header {
    margin-bottom: 16px !important;
  }

  .audio-player-header h2 {
    font-size: 1rem !important;
    font-weight: 800 !important;
  }

  .audio-player-header h2:last-child {
    font-size: 1.2rem !important;
  }

  /* Foto kleiner */
  .audio-qari-image img {
    width: 160px !important;
    height: 160px !important;
    border-radius: 16px !important;
  }

  /* Qari naam dunner */
  .audio-qari-name {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin: 12px 0 10px !important;
  }

  /* Progress bar breder + tijd kleiner */
  .audio-progress-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 8px 0 !important;
  }

  .audio-progress-wrapper span {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .audio-progress-wrapper input[type="range"] {
    flex: 1 !important;
    height: 3px !important;
  }

  /* Controls kleiner */
  .audio-main-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 12px !important;
  }

  .skip-btn {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    padding: 0 16px !important;
    height: 36px !important;
    border-radius: 14px !important;
  }

  .play-btn {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #000000 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}






























/* =====================================================
   AUDIO PLAYER MOBILE — COMPLETE FINAL
   Alleen telefoon
===================================================== */

@media (max-width: 600px) {

  /* =========================
     LIVE BACKGROUND
  ========================= */

  body:has(.audio-player-card) {
    min-height: 100svh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;

    background: linear-gradient(
      135deg,
      #f8fafc 0%,
      #eef7ff 25%,
      #e0f2fe 48%,
      #f8e8f3 74%,
      #fff7ed 100%
    ) !important;

    background-size: 350% 350% !important;
    animation: audioLivePageBg 9s ease-in-out infinite !important;
  }

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

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

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

  /* =========================
     PAGE WRAPPER
  ========================= */

  body:has(.audio-player-card) main.detail-page {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;

    margin: 0 auto !important;
    padding: 12px 14px 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
  }

  body:has(.audio-player-card) .back-link,
  body:has(.audio-player-card) .page-back-link,
  body:has(.audio-player-card) .back-btn {
    display: none !important;
  }

  /* =========================
     FULL PLAYER CARD
  ========================= */

  body:has(.audio-player-card) .audio-player-card {
    position: relative !important;

    width: 100% !important;
    max-width: 390px !important;
    min-height: calc(100svh - 30px) !important;

    margin: 0 auto !important;
    padding: 18px 18px 24px !important;

    background: rgba(255, 255, 255, 0.58) !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    border-radius: 34px !important;

    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12) !important;

    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* =========================
     LIVE SHADOW / COLOR INSIDE CARD BOTTOM
  ========================= */

  body:has(.audio-player-card) .audio-player-card::before {
    content: "" !important;
    position: absolute !important;

    left: -35% !important;
    right: -35% !important;
    bottom: -70px !important;

    height: 240px !important;

    background:
      radial-gradient(circle at 18% 45%, rgba(56, 189, 248, 0.78), transparent 36%),
      radial-gradient(circle at 55% 55%, rgba(168, 85, 247, 0.50), transparent 38%),
      radial-gradient(circle at 86% 42%, rgba(244, 114, 182, 0.70), transparent 36%) !important;

    filter: blur(20px) !important;
    opacity: 0.95 !important;

    animation: audioCardBottomGlow 5.5s ease-in-out infinite alternate !important;

    z-index: 0 !important;
    pointer-events: none !important;
  }

  @keyframes audioCardBottomGlow {
    0% {
      transform: translateX(-20px) scale(1);
    }

    50% {
      transform: translateX(20px) scale(1.08);
    }

    100% {
      transform: translateX(-8px) scale(1.03);
    }
  }

  body:has(.audio-player-card) .audio-player-card > * {
    position: relative !important;
    z-index: 2 !important;
  }

  /* =========================
     SURAH NAME CARD
     NIET TE VEEL VERANDEREN
  ========================= */

  body:has(.audio-player-card) .audio-player-header {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;

    margin: 0 0 22px !important;
    padding: 12px 14px !important;

    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 22px !important;

    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important;

    box-sizing: border-box !important;
  }

  body:has(.audio-player-card) .audio-player-header h2 {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 1.22rem !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;

    color: var(--primary) !important;
    letter-spacing: -0.04em !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    text-align: left !important;
  }

  body:has(.audio-player-card) .audio-player-header h2:last-child {
    font-family: 'Hafs', serif !important;
    font-size: 1.65rem !important;
    font-weight: normal !important;

    direction: rtl !important;
    text-align: right !important;
    letter-spacing: 0 !important;
  }

  /* =========================
     QARI IMAGE
     GROTER EN MINDER LEEGTE LINKS/RECHTS
  ========================= */

  body:has(.audio-player-card) .audio-qari-image {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 12px auto 4px !important;
    padding: 0 !important;
  }

  body:has(.audio-player-card) .audio-qari-image img {
    width: min(86vw, 300px) !important;
    height: min(86vw, 300px) !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 34px !important;

    display: block !important;
    margin: 0 auto !important;

    background: #ffffff !important;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.18) !important;
  }

  /* =========================
     QARI NAME
     DICHTER ONDER FOTO
  ========================= */

  body:has(.audio-player-card) .audio-qari-name {
    width: 100% !important;

    margin: 4px auto 18px !important;
    padding: 0 !important;

    text-align: center !important;

    font-size: 1.12rem !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;

    color: var(--primary) !important;
    letter-spacing: -0.035em !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* =========================
     PROGRESS LINE + TIME
     BINNEN CARD, KORTER, DUN
  ========================= */

  body:has(.audio-player-card) .audio-progress-wrapper {
    width: calc(100% - 42px) !important;
    max-width: calc(100% - 42px) !important;

    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 10px !important;

    margin: auto auto 18px !important;
    padding: 0 !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body:has(.audio-player-card) .audio-progress-wrapper span {
    font-size: 0.62rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    color: var(--primary) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  body:has(.audio-player-card) #progressBar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    accent-color: var(--primary) !important;
    box-sizing: border-box !important;
  }

  body:has(.audio-player-card) #progressBar::-webkit-slider-runnable-track {
    height: 2px !important;
    border-radius: 999px !important;
  }

  body:has(.audio-player-card) #progressBar::-webkit-slider-thumb {
    margin-top: -5px !important;
  }

  body:has(.audio-player-card) #progressBar::-moz-range-track {
    height: 2px !important;
    border-radius: 999px !important;
  }

  /* =========================
     CONTROLS
     NIET TE VEEL VERANDEREN
  ========================= */

  body:has(.audio-player-card) .audio-main-controls {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 62px 56px 62px !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;

    gap: 8px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }

  body:has(.audio-player-card) .audio-main-controls button {
    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    cursor: pointer !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
  }

  body:has(.audio-player-card) .skip-btn {
    width: 62px !important;
    height: 32px !important;

    border-radius: 13px !important;

    font-size: 0.58rem !important;
    font-weight: 900 !important;

    background: rgba(255, 255, 255, 0.88) !important;
    color: var(--primary) !important;

    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08) !important;

    white-space: nowrap !important;
  }

  body:has(.audio-player-card) .play-btn {
    width: 56px !important;
    height: 56px !important;

    border-radius: 50% !important;

    background: var(--primary) !important;
    color: var(--card) !important;

    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.24) !important;
  }

  body:has(.audio-player-card) .play-btn svg {
    width: 24px !important;
    height: 24px !important;
  }
}


/* =====================================================
   AUDIO PLAYER MOBILE — progress en knoppen positie herstellen
===================================================== */

@media (max-width: 600px) {

  body:has(.audio-player-card) .audio-progress-wrapper {
    margin-top: 80px !important;
    margin-bottom: 18px !important;
    transform: none !important;
  }

  body:has(.audio-player-card) .audio-main-controls {
    transform: none !important;
    margin-top: 0 !important;
  }
}




/* =====================================================
   AUDIO PLAYER MOBILE — progress lijn + minuten fix
   Alleen telefoon
===================================================== */

@media (max-width: 600px) {

  /* Progress rij: tijd | lijn | tijd */
  body:has(.audio-player-card) .audio-progress-wrapper {
    width: calc(100% - 34px) !important;
    max-width: calc(100% - 34px) !important;

    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    gap: 12px !important;

    margin: 70px auto 18px !important;
    padding: 0 !important;

    box-sizing: border-box !important;
    overflow: visible !important;

    position: relative !important;
    transform: none !important;
  }

  /* Minuten/uren groter en boven de lijn */
  body:has(.audio-player-card) .audio-progress-wrapper span,
  body:has(.audio-player-card) #currentTime,
  body:has(.audio-player-card) #duration {
    position: relative !important;
    z-index: 3 !important;

    font-size: 0.78rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    color: var(--primary) !important;
    text-align: center !important;
    white-space: nowrap !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Range zelf */
  body:has(.audio-player-card) #progressBar {
    position: relative !important;
    z-index: 1 !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    box-sizing: border-box !important;

    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* Chrome/Safari track */
  body:has(.audio-player-card) #progressBar::-webkit-slider-runnable-track {
    height: 3px !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.28) !important;
  }

  /* Chrome/Safari thumb */
  body:has(.audio-player-card) #progressBar::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;

    width: 12px !important;
    height: 12px !important;

    margin-top: -4.5px !important;

    border-radius: 50% !important;
    background: var(--primary) !important;
    border: none !important;
  }

  /* Firefox track */
  body:has(.audio-player-card) #progressBar::-moz-range-track {
    height: 3px !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.28) !important;
  }

  /* Firefox thumb */
  body:has(.audio-player-card) #progressBar::-moz-range-thumb {
    width: 12px !important;
    height: 12px !important;

    border-radius: 50% !important;
    background: var(--primary) !important;
    border: none !important;
  }
}











/* =====================================================
   AUDIO PLAYER MOBILE — progress lijn boven, tijden onder
   Alleen telefoon
===================================================== */

@media (max-width: 600px) {

  /* Progress wrapper */
  body:has(.audio-player-card) .audio-progress-wrapper {
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;

    row-gap: 6px !important;
    column-gap: 0 !important;

    margin: 70px auto 14px !important;
    padding: 0 !important;

    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Lijn helemaal boven en lang */
  body:has(.audio-player-card) #progressBar {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    accent-color: var(--primary) !important;
    box-sizing: border-box !important;
  }

  /* Linker tijd onder de lijn */
  body:has(.audio-player-card) #currentTime {
    grid-column: 1 !important;
    grid-row: 2 !important;

    justify-self: start !important;
    text-align: left !important;

    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    color: var(--primary) !important;

    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  /* Rechter tijd onder de lijn */
  body:has(.audio-player-card) #duration {
    grid-column: 2 !important;
    grid-row: 2 !important;

    justify-self: end !important;
    text-align: right !important;

    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;

    color: var(--primary) !important;

    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  /* Dunne lijn — Chrome/Safari */
  body:has(.audio-player-card) #progressBar::-webkit-slider-runnable-track {
    height: 2px !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.28) !important;
  }

  body:has(.audio-player-card) #progressBar::-webkit-slider-thumb {
    margin-top: -5px !important;
  }

  /* Dunne lijn — Firefox */
  body:has(.audio-player-card) #progressBar::-moz-range-track {
    height: 2px !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.28) !important;
  }
}


/* =====================================================
   AUDIO PLAYER MOBILE — controls kleiner + dichter bij lijn
   Alleen telefoon
===================================================== */

@media (max-width: 600px) {

  /* Minder ruimte tussen progress/tijd en knoppen */
  body:has(.audio-player-card) .audio-progress-wrapper {
    margin-bottom: 6px !important;
  }

  /* Controls dichter naar boven */
  body:has(.audio-player-card) .audio-main-controls {
    grid-template-columns: 56px 46px 56px !important;
    gap: 8px !important;

    margin-top: 0 !important;
    transform: translateY(-2px) !important;
  }

  /* 30 sec knoppen kleiner */
  body:has(.audio-player-card) .skip-btn {
    width: 56px !important;
    height: 30px !important;

    border-radius: 13px !important;

    font-size: 0.56rem !important;
    font-weight: 900 !important;

    padding: 0 !important;
  }

  /* Play / pause knop kleiner */
  body:has(.audio-player-card) .play-btn {
    width: 46px !important;
    height: 46px !important;

    border-radius: 50% !important;
  }

  body:has(.audio-player-card) .play-btn svg {
    width: 21px !important;
    height: 21px !important;
  }
}







/* =====================================================
   AUDIO PLAYER MOBILE — LIVE COLOR OUTSIDE CARD FIX
   Alleen telefoon
   Verandert layout niet, alleen live kleuren buiten/rond card
===================================================== */

@media (max-width: 600px) {

  /* Pagina moet layers kunnen tonen */
  body:has(.audio-player-card) {
    position: relative !important;
    isolation: isolate !important;
    overflow-x: hidden !important;

    background: linear-gradient(
      135deg,
      #f8fafc 0%,
      #eef7ff 35%,
      #fff1f7 70%,
      #f8fafc 100%
    ) !important;
  }

  /* ✅ Live kleur buiten de card */
  body:has(.audio-player-card)::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;

    background:
      radial-gradient(circle at 15% 95%, rgba(56, 189, 248, 1), transparent 25%),
      radial-gradient(circle at 85% 95%, rgba(244, 114, 182, 1), transparent 25%),
      radial-gradient(circle at 50% 100%, rgba(168, 85, 247, 0.8), transparent 30%),
      radial-gradient(circle at 30% 100%, rgba(14, 165, 233, 0.7), transparent 25%),
      radial-gradient(circle at 70% 100%, rgba(236, 72, 153, 0.7), transparent 25%) !important;

    filter: blur(14px) !important;
opacity: 1 !important;

    background-size: 160% 160% !important;
   animation: audioOutsideGlowMove 3s ease-in-out infinite alternate !important;

    z-index: -1 !important;
    pointer-events: none !important;
  }





  @keyframes audioOutsideGlowMove {
    0% {
      transform: translateX(-18px) translateY(6px) scale(1);
      opacity: 0.75;
      filter: blur(14px) hue-rotate(0deg);
    }

    50% {
      transform: translateX(18px) translateY(-8px) scale(1.05);
      opacity: 1;
      filter: blur(18px) hue-rotate(120deg);
    }

    100% {
      transform: translateX(-8px) translateY(8px) scale(1.02);
      opacity: 0.9;
      filter: blur(14px) hue-rotate(240deg);
    }
  }





  /* Zorg dat content boven background layer blijft */
  body:has(.audio-player-card) main.detail-page {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
  }

  /* ✅ Glow rondom de card zelf, buiten zichtbaar */
  body:has(.audio-player-card) .audio-player-card {
    position: relative !important;
    z-index: 2 !important;

    background: rgba(255, 255, 255, 0.64) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;

    box-shadow:
      0 24px 65px rgba(15, 23, 42, 0.14),
      -28px 38px 80px rgba(56, 189, 248, 0.35),
      28px 42px 90px rgba(244, 114, 182, 0.35),
      0 55px 110px rgba(168, 85, 247, 0.22) !important;

    animation: audioCardOuterGlowPulse 5s ease-in-out infinite alternate !important;
  }

  @keyframes audioCardOuterGlowPulse {
    0% {
      box-shadow:
        0 24px 65px rgba(15, 23, 42, 0.14),
        -22px 36px 70px rgba(56, 189, 248, 0.28),
        24px 42px 80px rgba(244, 114, 182, 0.28),
        0 50px 95px rgba(168, 85, 247, 0.18);
    }

    100% {
      box-shadow:
        0 24px 65px rgba(15, 23, 42, 0.14),
        -34px 42px 95px rgba(56, 189, 248, 0.45),
        36px 46px 105px rgba(244, 114, 182, 0.42),
        0 60px 125px rgba(168, 85, 247, 0.28);
    }
  }
}











@media (max-width: 600px) {
  .search,
  .search::placeholder {
    text-align: right !important;
    direction: rtl !important;
  }

  body:not([dir="rtl"]) .search,
  body:not([dir="rtl"]) .search::placeholder {
    text-align: left !important;
    direction: ltr !important;
  }
}






/* ✅ Arabische ayah-tekst kleiner */
  body:not(.read-list-mode) .reader-page .reader-page-text,
  body:not(.read-list-mode) .reader-page-text {
    font-size: 1.7rem !important;
    line-height: 2.1 !important;
  }








  @media (max-width: 600px) {
  body:has(.audio-player-card) .audio-player-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  body:has(.audio-player-card) .audio-player-header h2:first-child {
    text-align: left !important;
    font-family: 'Sora', 'Inter', Arial, sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
  }

  body:has(.audio-player-card) .audio-player-header h2:last-child {
    text-align: right !important;
    font-size: 1.4rem !important;
  }
}










@media (max-width: 600px) {
  .detail-page.audio-page > #audioSurahList {
    margin-bottom: 8px !important;
  }

  .detail-page.audio-page + .page-end-card,
  .audio-page ~ .page-end-card,
  .detail-page.audio-page .page-end-card {
    margin-top: 0px !important;
    padding-top: 0 !important;
  }
}









@media (max-width: 600px) {
  #audioSearchHistoryDropdown,
  #readSearchHistoryDropdown,
  #searchHistoryDropdown {
    border-radius: 14px !important;
    margin-top: 6px !important;
    font-size: 0.82rem !important;
  }

  #audioSearchHistoryDropdown .search-history-item,
  #readSearchHistoryDropdown .search-history-item,
  #searchHistoryDropdown .search-history-item {
    padding: 8px 12px !important;
    font-size: 0.82rem !important;
  }
}









@media (max-width: 600px) {
  .mobile-surah-info-btn {
    width: auto !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 90px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}




@media (max-width: 600px) {
  .hero-card .search-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}








/* =====================================================
   Home Page Holy Quran en andere pages title naam Size: als het groot is moet ik alleen font-size: 1.5rem !important; naar
    1.4 of 1.4rem veranderen en als ik meer ruimte tussen de title en zoekbalk wil moet ik alleen  margin: 6px 0 14px !important;
    0 14px naar 15 of 16 veranderen 
===================================================== */


@media (max-width: 600px) {
  .hero-card h1,
  body.read-list-mode #readerContent > .hero .hero-card h1,
  .detail-page.audio-page > .hero .hero-card h1 {
    font-size: 1.5rem !important;
    margin: 6px 0 14px !important;
    line-height: 1.1 !important;
  }
}
/* =====================================================
Tot hier is de codes voor title 
===================================================== */








/* =====================================================
   FIX — Audio zoekbalk RTL op telefoon (alle talen behalve Engels)
===================================================== */

@media (max-width: 600px) {
  body[dir="rtl"] .detail-page.audio-page > .hero .search,
  body[dir="rtl"] .detail-page.audio-page > .hero .search::placeholder {
    text-align: right !important;
    direction: rtl !important;
  }

  body[dir="ltr"] .detail-page.audio-page > .hero .search,
  body[dir="ltr"] .detail-page.audio-page > .hero .search::placeholder {
    text-align: left !important;
    direction: ltr !important;
  }
}









/* =====================================================
   Video — extra knopjes (picture-in-picture) weghalen
   Vooral op telefoon
===================================================== */

video::-webkit-media-controls-picture-in-picture-button {
  display: none !important;
}

video {
  pointer-events: auto;
}






/* =====================================================
 Settinng MEnu size 
===================================================== */

@media (max-width: 600px) {
  .side-menu .menu-section {
    margin-bottom: 10px !important;
  }
  .side-menu label,
  .side-menu .side-menu-header h3 {
    margin-bottom: 5px !important;
    font-size: 0.92rem !important;
  }
  .side-menu select,
  .side-menu .theme-btn,
  .side-menu .font-size-control,
  .side-menu .menu-link,
  .side-menu .google-login-btn {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    font-size: 0.95rem !important;
  }
  .side-menu .user-photo {
    width: 52px !important;
    height: 52px !important;
  }
}
/* =====================================================
   Tot heir
===================================================== */


/* =====================================================
   Setting background zwart kleur
===================================================== */
@media (max-width: 600px) {
  #menuOverlay.menu-overlay,
  .menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    min-height: 100vh !important;
  }
}
/* =====================================================
   Tot heir
===================================================== */





@media (max-width: 600px) {
  body[dir="rtl"] #sideMenu,
  body[dir="rtl"] .side-menu {
    overflow-x: hidden !important;
    direction: rtl !important;
  }
  
  body[dir="rtl"] #sideMenu select,
  body[dir="rtl"] .side-menu select {
    width: 100% !important;
    background-position: left 12px center !important;
  }
}



/* =====================================================
   SETTINGS MENU — zelfde visuele size voor RTL talen
   Gebaseerd op body[dir="rtl"], niet op html[lang]
===================================================== */
@media (max-width: 600px) {

  /* basis blijft zoals jouw Engelse versie */
  .side-menu .menu-section {
    margin-bottom: 10px !important;
  }

  .side-menu label,
  .side-menu .side-menu-header h3 {
    margin-bottom: 5px !important;
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
  }

  .side-menu select,
  .side-menu .theme-btn,
  .side-menu .font-size-control,
  .side-menu .menu-link,
  .side-menu .google-login-btn {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }

  /* alleen RTL talen visueel gelijk trekken */
  body[dir="rtl"] .side-menu label,
  body[dir="rtl"] .side-menu .side-menu-header h3 {
    font-size: 0.88rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
  }

  body[dir="rtl"] .side-menu select,
  body[dir="rtl"] .side-menu .theme-btn,
  body[dir="rtl"] .side-menu .menu-link,
  body[dir="rtl"] .side-menu .google-login-btn {
    font-size: 0.88rem !important;
    line-height: 1.15 !important;
    font-weight: 500 !important;
  }

  body[dir="rtl"] .side-menu .theme-btn,
  body[dir="rtl"] .side-menu .menu-link,
  body[dir="rtl"] .side-menu .google-login-btn {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .side-menu .user-photo {
    width: 52px !important;
    height: 52px !important;
  }
}

/* =====================================================
   Tot heir
===================================================== */












/* =========================================
   MENU OP PC — zelfde grootte in alle talen
========================================= */
@media (min-width: 769px) {
  .side-menu,
  .side-menu label,
  .side-menu select,
  .side-menu button,
  .side-menu a {
    line-height: 1.3 !important;
  }
  .menu-section {
    margin-bottom: 12px;
  }
  .menu-link {
    margin-bottom: 7px;
  }
}
/* =========================================
  Tot hier
========================================= */






/* =========================================
  De drie strepje knopje: Als de menu open gaat die weg
========================================= */

/* Hamburger-knop verbergen als settings-menu open is (pc + telefoon) */
body:has(.side-menu.open) #menuToggle {
  display: none !important;
}
/* =========================================
  Tot hier
========================================= */






/* =========================================
   SETTINGS MENU TOP SPACE FIX
========================================= */
@media (max-width: 600px) {
  .side-menu {
    padding-top: 14px !important;
  }

  .side-menu .side-menu-header {
    margin-bottom: 6px !important;
    padding-top: 0 !important;
    min-height: auto !important;
  }

  /* Engels / standaard */
  .side-menu .side-menu-header h3 {
    font-size: 1.45rem !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
  }

  /* RTL talen */
  body[dir="rtl"] .side-menu .side-menu-header h3 {
    font-size: 1.28rem !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
  }

  .side-menu #authBox,
  .side-menu .google-login-btn {
    margin-top: 0 !important;
  }

  .side-menu .menu-section:first-of-type {
    margin-top: 6px !important;
  }
}










@media (max-width: 600px) {
  body[dir="rtl"] .user-name {
    direction: rtl !important;
    unicode-bidi: isolate !important;
    text-align: right !important;
  }
}









/* =====================================================
   FAVORITE AYAHS — RTL-talen: knop naar links, badge blijft rechts
   (zodat surah/ayah-nummer niet meer achter de knop verdwijnt)
   Eén blok voor Pashto + Dari + Arabisch + Urdu samen
   Alleen telefoon, alleen RTL — Engels blijft zoals het is
===================================================== */

@media (max-width: 600px) {
  body[dir="rtl"] #favoriteAyahsContainer .favorite-ayah-card .ayah-favorite-btn {
    right: auto !important;
    left: 10px !important;
  }
}





/* =====================================================
   HOMEPAGE TELEFOON — favorieten/zoekresultaten altijd 1 per rij
   (pc houdt z'n 2-per-rij; dit geldt voor alle talen)
===================================================== */

@media (max-width: 600px) {
  body:not(.read-list-mode) #surahGrid.grid:has(.card:nth-child(2):last-child),
  body:not(.read-list-mode) #surahGrid.grid:has(.card:nth-child(3):last-child),
  body:not(.read-list-mode) #surahGrid.grid:has(.card:nth-child(4):last-child) {
    grid-template-columns: 1fr !important;
  }
}






/* =====================================================
   ZOEKGESCHIEDENIS TELEFOON — card even breed als zoekbalk + gecentreerd
===================================================== */

@media (max-width: 600px) {
  .search-history-dropdown {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
  }

  .search-history-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
}




/* =====================================================
   ZOEKGESCHIEDENIS TELEFOON — alles iets compacter
===================================================== */

@media (max-width: 600px) {
  .search-history-card {
    padding: 4px !important;
  }

  .search-history-main {
    padding: 7px 8px !important;
    gap: 8px !important;
  }

  .search-history-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 0.62rem !important;
  }

  .search-history-title {
    font-size: 0.78rem !important;
  }

  .search-history-sub {
    font-size: 0.64rem !important;
  }

  .search-history-number {
    min-width: 18px !important;
    height: 18px !important;
    font-size: 0.56rem !important;
  }

  .search-history-remove {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }
}





@media (max-width: 600px) {
  .search-history-dropdown {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
  }
}







/* =====================================================
QCF font size
===================================================== */

/* SURAH DETAIL — QCF kleiner op telefoon */
@media (max-width: 600px) {
  .has-floating-back .qcf-ayah-inline {
   font-size: 1.50rem !important;
line-height: 2.2 !important;
gap: 0 0.065em !important;
  }

  .has-floating-back .qcf-ayah-inline span {
    font-size: inherit !important;
    line-height: inherit !important;
  }
}
/* =====================================================
tot hier
===================================================== */













/* =====================================================
   FONTS — 3 per rij pill-stijl (zoals quran.com) op telefoon
   Raakt ALLEEN de fonts, niet Theme/menu
===================================================== */
@media (max-width: 600px) {
  .font-accordion-panel .font-group {
    margin-bottom: 14px !important;
  }
  .font-accordion-panel .font-group:last-child {
    margin-bottom: 0 !important;
  }
  .font-accordion-panel .font-group-title {
    margin: 0 0 7px !important;
    padding: 0 10px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
  }
  .font-accordion-panel .theme-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: #f1f3f5 !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px !important;
    padding: 3px !important;
    box-sizing: border-box !important;
  }
  .font-accordion-panel .theme-buttons .font-opt {
    min-width: 0 !important;
    width: 100% !important;
    height: 40px !important;
    padding: 0 2px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text) !important;
    font-size: clamp(0.62rem, 2.8vw, 0.8rem) !important;
    font-weight: 650 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* RTL-talen: zelfde grootte als Engels */
  body[dir="rtl"] .font-accordion-panel .theme-buttons .font-opt {
    font-size: clamp(0.62rem, 2.8vw, 0.8rem) !important;
    font-weight: 650 !important;
  }

  .font-accordion-panel .theme-buttons .font-opt::after {
    content: none !important;
  }
  .font-accordion-panel .theme-buttons .font-opt.active-theme {
    background: #111827 !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
}
/* =====================================================
   SETTINGS MENU — breder op telefoon (wint van alle regels)
===================================================== */
@media (max-width: 600px) {
  #sideMenu {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
  }
  #sideMenu.open {
    right: 6px !important;
    left: auto !important;
  }
}

/* =====================================================
   SETTINGS MENU — inhoud tot aan de rand (telefoon)
===================================================== */
@media (max-width: 600px) {
  #sideMenu {
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }
  #sideMenu .menu-section,
  #sideMenu .theme-buttons,
  #sideMenu .font-size-control,
  #sideMenu .font-accordion-btn,
  #sideMenu .font-accordion-panel,
  #sideMenu select,
  #sideMenu .menu-link,
  #sideMenu .google-login-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}








/* =====================================================
   MOBILE — Arabic name in info panel altijd Hafs
===================================================== */
@media (max-width: 600px) {
  body .has-floating-back .mobile-surah-info-panel .mobile-info-box:nth-child(3) p {
    font-family: 'Hafs', serif !important;
    direction: rtl !important;
    font-size: 1.2rem !important;
    line-height: 1.35 !important;
  }

  body[dir="ltr"] .has-floating-back .mobile-surah-info-panel .mobile-info-box:nth-child(3) p {
    text-align: left !important;
  }

  body[dir="rtl"] .has-floating-back .mobile-surah-info-panel .mobile-info-box:nth-child(3) p {
    text-align: right !important;
  }
}













/* =====================================================
   FONT-NAMEN — zelfde grootte in ALLE talen (homepage + tandwiel)
===================================================== */
@media (max-width: 600px) {
  body[dir="rtl"] .font-accordion-panel .theme-buttons .font-opt,
  body[dir="rtl"] #quranFontPanel .theme-buttons .font-opt,
  body[dir="ltr"] .font-accordion-panel .theme-buttons .font-opt,
  body[dir="ltr"] #quranFontPanel .theme-buttons .font-opt {
    font-size: clamp(0.62rem, 2.8vw, 0.8rem) !important;
    font-weight: 650 !important;
  }
}




@media (max-width: 600px) {
  button:active,
  button.tap-feedback,
  .back-link:active,
  .back-link.tap-feedback,
  .back-btn:active,
  .back-btn.tap-feedback,
  .page-back-link:active,
  .page-back-link.tap-feedback,
  .hero-chip-btn:active,
  .hero-chip-btn.tap-feedback,
  .theme-btn:active,
  .theme-btn.tap-feedback,
  .font-step-btn:active,
  .font-step-btn.tap-feedback,
  .font-accordion-btn:active,
  .font-accordion-btn.tap-feedback,
  .menu-link:active,
  .menu-link.tap-feedback {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
    opacity: 1 !important;
  }

  button:active i,
  button.tap-feedback i,
  .hero-chip-btn:active i,
  .hero-chip-btn.tap-feedback i,
  .font-accordion-btn:active i,
  .font-accordion-btn.tap-feedback i {
    color: #ffffff !important;
  }
}







/* =====================================================
   SURAH DETAIL MOBILE — info card zoals ayah card
===================================================== */

@media (max-width: 600px) {
  body:has(#surahDetail) .mobile-surah-info-panel {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  body:has(#surahDetail) .mobile-info-box {
    background: var(--soft-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
  }
}
/* =====================================================
  TOT Hier 
===================================================== */



/* =====================================================
   FAVORITE AYAHS MOBILE — QCF kleiner
===================================================== */

@media (max-width: 600px) {
  .favorite-ayah-card .qcf-ayah-inline {
    font-size: 1.40rem !important;
    line-height: 2.15 !important;
    gap: 0 0.08em !important;
  }

  .favorite-ayah-card .qcf-ayah-inline span {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  
/* =====================================================
   De hele website op elke telefoon hetzelfde moet zijn 
===================================================== */

  @media (max-width: 600px) {
  body.quran-font-qcf .ayah-arabic,
  body.quran-font-qcf .qcf-ayah-inline {
    font-size: 1.40rem !important;
    line-height: 2.15 !important;
    letter-spacing: 0 !important;
    word-spacing: 0.02em !important;
  }

  body.quran-font-qcf .ayah-arabic span,
  body.quran-font-qcf .qcf-ayah-inline span {
    font-size: inherit !important;
    line-height: inherit !important;
  }
}



/* =====================================================
   MOBILE — zelfde tekst-schaal op alle telefoons
   Eerst testen, raakt alleen telefoon
===================================================== */

@media (max-width: 600px) {
  html {
    font-size: 17px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  body {
    font-size: 17px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  button,
  input,
  select,
  textarea {
    font-size: inherit;
  }
}


/* =====================================================
   TOT HIER 
===================================================== */


@media (max-width: 600px) {
  .search-history-toast {
    max-width: calc(100% - 12px);
    margin: 4px auto 6px;
    padding: 7px 12px;
    font-size: 0.76rem;
  }
}








/* FIX MOBIEL — zwarte selectie (wint van style.css) */
@media (max-width: 600px) {

  #sideMenu .theme-buttons-slider .theme-slider {
    background: #111827 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  }

  #sideMenu .theme-buttons-slider .theme-btn.active-theme {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
  }

  #sideMenu .theme-buttons-slider .theme-btn:not(.active-theme) {
    color: #64748b !important;
  }

  #sideMenu .font-buttons-slider .font-slider {
    display: none !important;
  }

  #sideMenu .font-accordion-panel .theme-buttons .font-opt.active-theme,
  #sideMenu .font-accordion-panel .theme-buttons.font-buttons-slider .font-opt.active-theme {
    background: #111827 !important;
    color: #ffffff !important;
    border-color: #111827 !important;
    box-shadow: none !important;
  }

  #sideMenu .font-accordion-panel .theme-buttons .font-opt:not(.active-theme) {
    color: var(--text) !important;
    background: transparent !important;
  }

  #sideMenu .font-size-value,
  #sideMenu #fontSizeValue {
    color: #111827 !important;
  }
}