@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');


@font-face {
  font-family: 'Alqalam Majeed';
  src: url('./fonts/Alqalam-Majeed.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Naskh';
  src: url('./fonts/Naskh.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Helicoptina45';
  src: url('./fonts/Helicoptina45.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat Local';
  src: url('./fonts/Montserrat.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Tinta';
  src: url('./fonts/Tinta.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Hafs';
  src: url('./fonts/Hafs.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
--base-font-size: 18px;
--bg: #f3f5f7;
--text: #111827;
--muted: #6b7280;
--card: #ffffff;
--soft-card: #f8fafc;
--hero-bg: linear-gradient(135deg, #e5e9ef, #dbeafe);
--hero-card-bg: rgba(255, 255, 255, 0.6);
--border: #e5e7eb;
--shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
--strong-shadow: 0 30px 60px rgba(15, 23, 42, 0.1);
--primary: #0f172a;
--primary-soft: #1f2937;
--accent: #2563eb;
--surah-hover: #18a0a6;
}


body.theme-dark {
--bg: #0f172a;
--text: #f8fafc;
--muted: #cbd5e1;
--card: #111827;
--soft-card: #1f2937;
--hero-bg: linear-gradient(135deg, #0f172a, #1e293b);
--hero-card-bg: rgba(17, 24, 39, 0.7);
--border: #374151;
--shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
--strong-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
--primary: #f8fafc;
--primary-soft: #e5e7eb;
}


body.theme-sepia {
--bg: #f5ecd9;
--text: #4b3a2a;
--muted: #7b6550;
--card: #fffaf0;
--soft-card: #f3e7d3;
--hero-bg: linear-gradient(135deg, #f3e6cf, #ead8bb);
--hero-card-bg: rgba(255, 250, 240, 0.75);
--border: #dcc9ab;
--shadow: 0 10px 24px rgba(98, 72, 44, 0.12);
--strong-shadow: 0 30px 60px rgba(98, 72, 44, 0.12);
--primary: #5b4632;
--primary-soft: #7b6550;
}



{
box-sizing: border-box;
}


html {
font-size: var(--base-font-size);
scroll-behavior: smooth;
}


body {
font-family: 'Sora', 'Inter', Arial, sans-serif;
background: var(--bg);
margin: 0;
color: var(--text);
transition: background 0.25s ease, color 0.25s ease;
}


/* =========================================
FONT SYSTEM
========================================= */


body,
button,
input,
select,
textarea,
option,
label,
a,
p,
span,
li,
small,
strong,
em,
td,
th,
.result-text,
.no-result,
.menu-link,
.back-link,
.back-btn,
.page-back-link,
.font-size-value,
.video-link,
.video-box p,
.favorite-card,
.big-fav-btn,
.footer-bottom,
.read-list-kicker,
.read-list-subtitle,
.reader-label,
.reader-surah-meta,
.detail-header p,
.detail-box h3,
.detail-box p,
.ayah-number-badge,
.info,
.info h3,
.info p,
.grid .card .arabic p,
.section-header h2,
.footer-about h2,
.footer-about p,
.footer-links h3,
.footer-links a,
.read-list-title,
.read-list-section-title,
.reader-surah-header h1,
.ayah-section-title,
.detail-header h1,
.hero-description,
.subtitle,
.search,
.search::placeholder,
.hero-chip-btn,
.side-menu,
.side-menu label,
.side-menu select,
.side-menu button,
.side-menu a {
font-family: 'Sora', 'Inter', Arial, sans-serif;
}


.arabic h3,
.detail-arabic h2,
.reader-surah-arabic-name {
font-family: 'Hafs', serif !important;
}

.ayah-arabic,
.quran-page-block,
.reader-page-text,
.quran-ayah-inline,
.reader-bismillah,
.ayah-bismillah-text {
font-family: 'Hafs', serif;
}


.translation-pashto,
.translation-pashto *,
.translation-dari,
.translation-dari * {
font-family: 'Vazirmatn', sans-serif !important;
}


.translation-block:not(.translation-pashto):not(.translation-dari),
.translation-block:not(.translation-pashto):not(.translation-dari) h3,
.translation-block:not(.translation-pashto):not(.translation-dari) p {
font-family: 'Sora', 'Inter', Arial, sans-serif !important;
direction: ltr;
text-align: left;
}


.grid .card .arabic p {
font-family: 'Sora', 'Inter', Arial, sans-serif !important;
font-weight: 500;
}


/* =========================================
GENERAL ARABIC / TRANSLATIONS
========================================= */


.ayah-arabic {
direction: rtl;
text-align: right;
font-size: 2.5rem;
line-height: 2.3;
margin: 0 0 1rem;
}


.arabic h3,
.detail-arabic h2 {
direction: rtl;
}


.arabic h3 {
margin: 0 0 0.5rem;
font-size: 2rem;
font-weight: 700;
}


.detail-arabic h2 {
margin: 0;
font-size: 4rem;
}


.translation-pashto p,
.translation-dari p {
direction: rtl;
text-align: right;
font-size: 1.15rem;
line-height: 1.9;
}


/* =========================================
HERO
========================================= */


.hero {
width: 100%;
padding: 18px 10px;
background: var(--hero-bg);
}


.hero-card {
position: relative;
max-width: 1600px;
width: 98%;
margin: auto;
padding: 70px 60px;
border-radius: 28px;
background: var(--hero-card-bg);
backdrop-filter: blur(14px);
box-shadow: var(--strong-shadow);
text-align: center;
}


.subtitle {
margin: 0 0 12px;
font-size: 1rem;
font-weight: 600;
color: var(--muted);
letter-spacing: -0.01em;
}


.hero h1 {
font-size: 4.2rem;
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.04em;
margin: 20px 0;
color: var(--primary);
}


body.theme-light .hero h1,
body.theme-dark .hero h1,
body.theme-sepia .hero h1 {
background: linear-gradient(90deg, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


.hero-description {
max-width: 760px;
margin: 15px auto 0;
font-size: 1.08rem;
font-weight: 500;
line-height: 1.75;
letter-spacing: -0.01em;
color: var(--primary-soft);
opacity: 0.95;
}


.search-wrapper {
margin-top: 34px;
}


.search {
width: 100%;
max-width: 1300px;
padding: 24px 30px;
border-radius: 999px;
border: 1px solid var(--border);
outline: none;
font-size: 1rem;
font-weight: 500;
letter-spacing: -0.01em;
background: var(--card);
color: var(--text);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
transition: 0.3s;
}


.search::placeholder {
color: var(--muted);
opacity: 0.8;
font-weight: 500;
}


.search:focus {
transform: scale(1.01);
border-color: var(--accent);
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}


.buttons {
margin-top: 22px;
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}


/* =========================================
BUTTONS
========================================= */


button,
.menu-link,
select {
font: inherit;
}


button {
padding: 13px 22px;
border: 1px solid transparent;
border-radius: 14px;
background: var(--card);
cursor: pointer;
font-size: 0.95rem;
color: var(--text);
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}


button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}


.hero-chip-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 52px;
padding: 0 22px;
border-radius: 18px;
border: 1px solid #e6e8ec;
background: #ffffff;
color: #526071;
font-size: 0.98rem;
font-weight: 700;
letter-spacing: -0.02em;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}


.hero-chip-btn i {
font-size: 0.95rem;
color: #6f8596;
}


.hero-chip-btn:hover {
transform: translateY(-1px);
background: #ffffff;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}


.hero-chip-btn span {
line-height: 1;
}


body.theme-dark .hero-chip-btn {
background: #111827;
border-color: #374151;
color: #e5e7eb;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}


body.theme-dark .hero-chip-btn i {
color: #cbd5e1;
}


body.theme-sepia .hero-chip-btn {
background: #fffaf0;
border-color: #dcc9ab;
color: #5b4632;
}


body.theme-sepia .hero-chip-btn i {
color: #7b6550;
}


.last-surah-btn.hidden,
.favorites-section.hidden {
display: none;
}


.favorites-section {
display: flex;
justify-content: center;
gap: 18px;
margin-top: 20px;
flex-wrap: wrap;
}


.big-fav-btn {
background: var(--card);
padding: 14px 24px;
border-radius: 16px;
border: 1px solid var(--border);
font-size: 0.95rem;
font-weight: 600;
}


/* =========================================
MAIN / SECTION HEADER
========================================= */


main {
max-width: 1400px;
margin: 0 auto;
padding: 34px 18px 44px;
}


.section-header {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 22px;
}


.section-header h2 {
margin: 0 0 8px;
font-size: 2.1rem;
font-weight: 800;
letter-spacing: -0.03em;
}


.result-text {
margin: 0;
color: var(--muted);
font-size: 0.98rem;
font-weight: 500;
letter-spacing: -0.01em;
}


/* =========================================
SURAH GRID / CARDS
========================================= */


.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 20px;
}


.card {
position: relative;
background: var(--card);
padding: 22px;
border-radius: 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
cursor: pointer;
overflow: hidden;
border: 1.5px solid rgba(15, 23, 42, 0.05);
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}


.card:hover {
transform: translateY(-2px);
border-color: var(--surah-hover);
box-shadow: 0 14px 30px rgba(24, 160, 166, 0.12);
}


.card * {
pointer-events: none;
}


.video-badge {
position: absolute;
top: 14px;
right: 14px;
background: #dcfce7;
color: #166534;
font-size: 0.7rem;
font-weight: 700;
padding: 6px 10px;
border-radius: 999px;
opacity: 0.95;
}


.favorite-btn {
position: absolute;
top: 14px;
left: 14px;
width: 38px;
height: 38px;
border: 1px solid rgba(15, 23, 42, 0.05);
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
font-size: 1rem;
cursor: pointer;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
z-index: 3;
pointer-events: auto;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.favorite-btn:hover {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}


.favorite-btn.active {
color: #dc2626;
}


.number {
min-width: 46px;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: 700;
color: #0f172a;
background: #eef2f6;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}


.card:hover .number {
background: var(--surah-hover);
color: #ffffff;
transform: scale(1.04);
}


.info {
flex: 1;
min-width: 0;
padding-left: 6px;
}


.info h3 {
margin: 0 0 8px;
font-size: 1.45rem;
font-weight: 700;
color: var(--primary);
letter-spacing: -0.02em;
}


.info p {
margin: 0;
font-size: 1rem;
color: var(--muted);
font-weight: 500;
line-height: 1.4;
}


.arabic {
text-align: right;
min-width: 140px;
}


.arabic h3 {
margin: 0 0 8px;
font-size: 2rem;
font-weight: 700;
color: var(--primary);
}


.arabic p {
margin: 0;
font-size: 0.95rem;
color: var(--text);
font-weight: 500;
}


body.theme-dark .card {
background: #111827;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}


body.theme-dark .card:hover {
border-color: #22c7ce;
box-shadow: 0 14px 30px rgba(34, 199, 206, 0.18);
}


body.theme-dark .number {
background: #1f2937;
color: #f8fafc;
}


body.theme-dark .card:hover .number {
background: #22c7ce;
color: #081018;
}


body.theme-dark .favorite-btn {
background: rgba(17, 24, 39, 0.92);
border-color: rgba(255, 255, 255, 0.08);
}


body.theme-sepia .card {
background: #fffaf0;
border-color: rgba(91, 70, 50, 0.08);
}


body.theme-sepia .card:hover {
border-color: #b08968;
box-shadow: 0 14px 28px rgba(176, 137, 104, 0.16);
}


body.theme-sepia .number {
background: #eadfcf;
color: #5b4632;
}


body.theme-sepia .card:hover .number {
background: #b08968;
color: #fffaf0;
}


.no-result {
background: var(--card);
padding: 24px;
border-radius: 18px;
font-size: 1.1rem;
box-shadow: var(--shadow);
}


/* =========================================
DETAIL / READER PAGES
========================================= */


.detail-page,
.reader-page {
max-width: 1200px;
margin: 40px auto;
padding: 20px;
}


.page-top-bar {
position: sticky;
top: 14px;
z-index: 999;
padding: 14px 0 10px;
background: linear-gradient(to bottom, var(--bg) 78%, rgba(243, 245, 247, 0));
}


body.theme-dark .page-top-bar {
background: linear-gradient(to bottom, var(--bg) 78%, rgba(15, 23, 42, 0));
}


body.theme-sepia .page-top-bar {
background: linear-gradient(to bottom, var(--bg) 78%, rgba(245, 236, 217, 0));
}


.page-back-link,
.back-link,
.back-btn {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
text-decoration: none;
color: var(--text);
background: rgba(255, 255, 255, 0.92);
padding: 14px 20px;
border-radius: 18px;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
border: 1px solid var(--border);
font-size: 1rem;
font-weight: 600;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
backdrop-filter: blur(10px);
}


.page-back-link:hover,
.back-link:hover,
.back-btn:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}


body.theme-dark .page-back-link,
body.theme-dark .back-link,
body.theme-dark .back-btn {
background: rgba(17, 24, 39, 0.9);
color: #f8fafc;
border-color: #374151;
}


body.theme-sepia .page-back-link,
body.theme-sepia .back-link,
body.theme-sepia .back-btn {
background: rgba(255, 250, 240, 0.92);
color: #5b4632;
border-color: #dcc9ab;
}


.detail-card {
background: var(--card);
border-radius: 24px;
padding: 34px;
box-shadow: var(--shadow);
}


.detail-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 24px;
}


.detail-header h1 {
margin: 0 0 10px;
font-size: 3rem;
}


.detail-header p {
margin: 8px 0;
font-size: 1rem;
}


.detail-arabic {
text-align: right;
}


.detail-boxes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
margin-top: 28px;
}


.detail-box {
background: var(--soft-card);
padding: 22px;
border-radius: 18px;
}


.detail-box h3 {
margin: 0 0 12px;
font-size: 1rem;
}


.detail-box p {
margin: 0;
font-size: 0.95rem;
}


.detail-main-info {
flex: 1;
}


.surah-actions {
margin-top: 18px;
}


.read-surah-link {
display: inline-block;
}


.ayah-section {
margin-top: 34px;
}


.ayah-section-title {
margin: 0 0 16px;
font-size: 1.6rem;
}


.ayah-list {
display: flex;
flex-direction: column;
gap: 18px;
}


.ayah-card {
position: relative;
background: var(--soft-card);
border-radius: 20px;
padding: 24px;
cursor: pointer;
transition: background 0.2s ease, border 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}


.ayah-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow);
}


.ayah-card.active {
border: 2px solid var(--accent);
background: rgba(37, 99, 235, 0.08);
box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);
}


.ayah-number-badge {
display: inline-block;
background: var(--border);
color: var(--text);
font-size: 0.85rem;
padding: 8px 12px;
border-radius: 12px;
margin-bottom: 16px;
}


.ayah-favorite-btn {
position: absolute;
top: 18px;
right: 18px;
border: 1px solid var(--border);
background: var(--card);
color: var(--text);
border-radius: 999px;
padding: 8px 14px;
font-size: 0.8rem;
cursor: pointer;
box-shadow: var(--shadow);
display: none;
z-index: 3;
}


.ayah-card.active .ayah-favorite-btn {
display: inline-block;
}


.ayah-favorite-btn.saved {
color: #dc2626;
}


.translation-block {
background: var(--card);
border-radius: 16px;
padding: 18px;
margin-top: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}


.translation-block h3 {
margin: 0 0 10px;
font-size: 1rem;
}


.translation-block p {
margin: 0;
font-size: 1.1rem;
line-height: 1.8;
}


.media-section {
margin-top: 34px;
}


.media-section h3 {
margin-bottom: 16px;
font-size: 1.6rem;
}


.video-box {
background: var(--soft-card);
padding: 22px;
border-radius: 18px;
margin-bottom: 18px;
}


.video-box p {
margin-top: 0;
margin-bottom: 14px;
}


.video-link {
display: inline-block;
text-decoration: none;
background: var(--primary);
color: var(--card);
padding: 12px 18px;
border-radius: 14px;
}


.video-box video,
.about-video {
width: 100%;
margin-top: 14px;
border-radius: 16px;
display: block;
background: #000;
}


.not-found {
text-align: center;
margin-top: 80px;
font-size: 1.3rem;
}


/* =========================================
FAVORITES
========================================= */


.favorites-page {
text-align: center;
margin-top: 40px;
}


.favorites-options {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 40px;
flex-wrap: wrap;
}


.favorite-card {
background: var(--soft-card);
padding: 30px 40px;
border-radius: 20px;
font-size: 1.3rem;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}


.favorite-card:hover {
background: var(--border);
transform: scale(1.03);
}


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


.site-footer {
max-width: 1600px;
width: 98%;
margin: 18px auto 24px;
padding: 60px 20px 34px;
border-radius: 28px;
background: var(--hero-card-bg);
backdrop-filter: blur(14px);
box-shadow: var(--strong-shadow);
border-top: none;
}


.footer-container {
max-width: 1200px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
flex-wrap: wrap;
}


.footer-about h2 {
margin: 0 0 16px;
font-size: 2rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--primary);
}


.footer-about p {
margin: 0;
max-width: 620px;
font-size: 1.02rem;
font-weight: 500;
line-height: 1.8;
letter-spacing: -0.01em;
color: var(--primary-soft);
}


.footer-links h3 {
margin: 0 0 18px;
font-size: 1.7rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--primary);
}


.footer-links a {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--primary-soft);
margin-bottom: 14px;
font-size: 1rem;
font-weight: 500;
letter-spacing: -0.01em;
}


.footer-links a i {
font-size: 1rem;
}


.footer-links a:hover {
color: var(--primary);
}


.youtube-icon {
color: #ff0000;
}


.tiktok-icon {
color: #000000;
}


.email-icon {
color: #2563eb;
}


.footer-links a:hover .youtube-icon {
color: #cc0000;
}


.footer-links a:hover .tiktok-icon {
color: #111827;
}


.footer-links a:hover .email-icon {
color: #1d4ed8;
}


.footer-bottom {
text-align: center;
margin-top: 42px;
font-size: 0.98rem;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--muted);
}


/* =========================================
MENU
========================================= */


.menu-toggle {
position: fixed;
top: 28px;
right: 28px;
width: 56px;
height: 56px;
border-radius: 20px;
border: 1px solid var(--border);
background: var(--card);
box-shadow: var(--shadow);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
z-index: 99999;
}


.menu-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.28);
opacity: 0;
visibility: hidden;
transition: 0.25s ease;
z-index: 99997;
}


.menu-overlay.show {
opacity: 1;
visibility: visible;
}


.side-menu {
position: fixed;
top: 16px;
right: -380px;
width: 350px;
max-width: calc(100% - 24px);
max-height: calc(100vh - 32px);
background: var(--card);
box-shadow: -12px 0 40px rgba(15, 23, 42, 0.15);
padding: 26px 22px 22px;
transition: right 0.28s ease;
z-index: 99998;
overflow-y: auto;
border-radius: 32px 0 0 32px;
border: 1px solid var(--border);
}


.side-menu.open {
right: 16px;
}


.side-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}


.side-menu-header h3 {
margin: 0;
font-size: 1.4rem;
}


.close-menu {
background: transparent;
box-shadow: none;
font-size: 30px;
padding: 4px 10px;
border: none;
}


.menu-section {
margin-bottom: 18px;
}


.menu-section label {
display: block;
margin-bottom: 10px;
font-size: 0.95rem;
font-weight: 700;
color: var(--text);
}


.menu-section select,
.menu-link {
width: 100%;
padding: 12px 14px;
border-radius: 18px;
border: 1px solid var(--border);
background: var(--soft-card);
font-size: 0.95rem;
color: var(--text);
}


.menu-link {
display: block;
text-decoration: none;
margin-bottom: 10px;
}


.theme-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}


.theme-btn {
flex: 1;
min-width: 90px;
border-radius: 18px;
}


.theme-btn.active-theme {
background: var(--primary);
color: var(--card);
border-color: var(--primary);
}


.font-size-control {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
background: var(--soft-card);
border: 1px solid var(--border);
border-radius: 22px;
padding: 10px 12px;
}


.font-step-btn {
width: 48px;
min-width: 48px;
height: 48px;
padding: 0;
font-size: 1.6rem;
line-height: 1;
border-radius: 18px;
}


.font-size-value {
min-width: 40px;
text-align: center;
font-size: 1.1rem;
font-weight: 700;
color: var(--text);
}


/* =========================================
READ QURAN
========================================= */


.read-list-hero {
background: var(--card);
border-radius: 28px;
padding: 34px 28px;
box-shadow: var(--shadow);
margin-bottom: 28px;
text-align: center;
}


.read-list-kicker {
margin: 0 0 10px;
color: var(--muted);
font-size: 0.95rem;
}


.read-list-title {
margin: 0;
font-size: 2.8rem;
color: var(--primary);
}


.read-list-subtitle {
margin: 14px auto 0;
color: var(--primary-soft);
line-height: 1.7;
}


.read-search-box {
margin-top: 24px;
}


.read-list-section-title {
margin: 0 0 18px;
font-size: 1.7rem;
}


.read-surah-card {
min-height: 120px;
}


.reader-top-links {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 24px;
}


.reader-surah-header {
margin-bottom: 24px;
}


.reader-label {
margin: 0 0 10px;
color: var(--muted);
font-size: 0.95rem;
}


.reader-surah-header h1 {
margin: 0;
font-size: 2.6rem;
color: var(--primary);
}


.reader-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}


.reader-title-row h1 {
margin: 0;
}


.reader-surah-meta {
margin-top: 14px;
display: flex;
gap: 18px;
align-items: center;
flex-wrap: wrap;
color: var(--muted);
font-size: 1rem;
}


.reader-surah-arabic-name {
font-size: 3rem;
color: var(--text);
white-space: nowrap;
line-height: 1.2;
}


.reader-loading {
margin-bottom: 20px;
color: var(--muted);
}


.quran-reading-card {
padding: 34px 28px 40px;
}


.quran-text-container {
margin-top: 10px;
}


.quran-page-block {
direction: rtl;
text-align: right;
font-size: 2.8rem;
line-height: 2.5;
letter-spacing: 0.3px;
color: var(--text);
background: var(--card);
border-radius: 24px;
padding: 12px 6px;
}


.reader-page-text {
direction: rtl;
text-align: right;
font-size: 2.8rem;
line-height: 2.5;
letter-spacing: 0.3px;
color: var(--text);
}


.quran-ayah-inline {
display: inline;
}


.ayah-inline-number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
border: 1px solid var(--muted);
border-radius: 999px;
font-family: 'Inter', Arial, sans-serif;
font-size: 0.8rem;
color: var(--muted);
margin: 0 8px;
vertical-align: middle;
}


/* =========================================
BISMILLAH CARDS
========================================= */


.ayah-bismillah-card,
.reader-bismillah-card {
background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(248,250,252,0.85));
border: 1px solid var(--border);
border-radius: 20px;
padding: 16px 18px;
margin: 6px 0 10px;
text-align: center;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}


body.theme-dark .ayah-bismillah-card,
body.theme-dark .reader-bismillah-card {
background: linear-gradient(180deg, rgba(31,41,55,0.88), rgba(17,24,39,0.94));
}


body.theme-sepia .ayah-bismillah-card,
body.theme-sepia .reader-bismillah-card {
background: linear-gradient(180deg, rgba(255,250,240,0.95), rgba(243,231,211,0.98));
}


.ayah-bismillah-text {
direction: rtl;
text-align: center;
font-size: 2.35rem;
line-height: 1.7;
margin: 0;
color: var(--text);
}


.reader-bismillah {
direction: rtl;
text-align: center;
font-size: 2.45rem;
line-height: 1.75;
color: var(--text);
margin: 0;
}


@media (max-width: 900px) {
.reader-bismillah,
.ayah-bismillah-text {
font-size: 2rem;
}
}


@media (max-width: 600px) {
.reader-bismillah,
.ayah-bismillah-text {
font-size: 1.65rem;
line-height: 1.65;
}


.ayah-bismillah-card,
.reader-bismillah-card {
padding: 12px 12px;
border-radius: 16px;
}
}


/* =========================================
RESPONSIVE
========================================= */


@media (max-width: 900px) {
.hero h1 {
font-size: 3.2rem;
}


.section-header h2 {
font-size: 1.8rem;
}


.info h3 {
font-size: 1.2rem;
}


.arabic h3 {
font-size: 1.7rem;
}


.detail-header {
flex-direction: column;
}


.detail-header h1 {
font-size: 2.2rem;
}


.detail-arabic h2 {
font-size: 3rem;
}


.ayah-arabic {
font-size: 2rem;
line-height: 2.1;
}


.translation-block p {
font-size: 1rem;
}


.read-list-title {
font-size: 2.2rem;
}


.reader-surah-header h1 {
font-size: 2rem;
}


.quran-page-block,
.reader-page-text {
font-size: 2rem;
line-height: 2.15;
}


.reader-bismillah,
.ayah-bismillah-text {
font-size: 2.4rem;
}
}


@media (max-width: 700px) {
.reader-title-row {
align-items: flex-start;
}


.reader-surah-arabic-name {
font-size: 2.2rem;
}
}


@media (max-width: 600px) {
.hero {
padding: 12px 8px;
}


.hero-card {
padding: 70px 20px 30px;
}


.hero h1 {
font-size: 2.7rem;
line-height: 1.08;
}


.subtitle {
font-size: 0.92rem;
}


.hero-description {
font-size: 0.96rem;
}


.search {
font-size: 0.95rem;
padding: 16px 18px;
}


.buttons {
gap: 10px;
}


.hero-chip-btn {
height: 48px;
padding: 0 16px;
border-radius: 16px;
font-size: 0.9rem;
gap: 8px;
}


.hero-chip-btn i {
font-size: 0.9rem;
}


.grid {
grid-template-columns: 1fr;
}


.card {
padding: 18px;
gap: 16px;
}


.number {
min-width: 44px;
width: 44px;
height: 44px;
font-size: 0.95rem;
}


.info h3 {
font-size: 1.05rem;
}


.info p,
.arabic p {
font-size: 0.85rem;
}


.arabic {
min-width: 110px;
}


.arabic h3 {
font-size: 1.45rem;
}


.favorite-btn {
top: 10px;
left: 10px;
width: 32px;
height: 32px;
font-size: 0.9rem;
}


.page-top-bar {
top: 8px;
padding: 8px 0 8px;
}


.page-back-link,
.back-link,
.back-btn {
padding: 12px 16px;
font-size: 0.94rem;
border-radius: 16px;
}


.detail-card {
padding: 24px;
}


.detail-header h1 {
font-size: 1.9rem;
}


.detail-arabic h2 {
font-size: 2.5rem;
}


.ayah-arabic {
font-size: 1.6rem;
line-height: 2;
}


.translation-block p {
font-size: 0.95rem;
}


.video-badge {
position: static;
display: inline-block;
margin-bottom: 12px;
}


.favorites-section {
flex-direction: column;
align-items: center;
}


.big-fav-btn {
width: 100%;
max-width: 260px;
}


.favorites-options {
flex-direction: column;
align-items: center;
}


.favorite-card {
width: 90%;
font-size: 1.15rem;
}


.site-footer {
width: calc(100% - 16px);
padding: 46px 18px 28px;
border-radius: 24px;
margin: 16px auto 18px;
}


.footer-about h2 {
font-size: 1.6rem;
}


.footer-about p {
font-size: 0.95rem;
}


.footer-links h3 {
font-size: 1.4rem;
}


.footer-links a {
font-size: 0.95rem;
}


.footer-bottom {
margin-top: 30px;
font-size: 0.9rem;
}


.menu-toggle {
top: 18px;
right: 18px;
width: 50px;
height: 50px;
}


.side-menu {
width: calc(100% - 16px);
max-width: calc(100% - 16px);
top: 8px;
right: -110%;
max-height: calc(100vh - 16px);
border-radius: 28px 0 0 28px;
}


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


.theme-buttons {
flex-direction: column;
}


.read-list-hero {
padding: 24px 18px;
}


.read-list-title {
font-size: 1.8rem;
}


.reader-surah-header h1 {
font-size: 1.6rem;
}


.reader-surah-meta {
gap: 10px;
font-size: 0.95rem;
}


.reader-surah-arabic-name {
font-size: 2.2rem;
}


.quran-reading-card {
padding: 24px 16px 28px;
}


.quran-page-block,
.reader-page-text {
font-size: 1.75rem;
line-height: 2.1;
}


.ayah-inline-number {
font-size: 0.75rem;
min-width: 24px;
height: 24px;
margin: 0 5px;
}


.reader-single-page {
padding: 20px 14px 24px;
border-radius: 20px;
}


.reader-bismillah,
.ayah-bismillah-text {
font-size: 1.9rem;
line-height: 1.85;
}


.reader-page-footer {
font-size: 0.95rem;
}


.reader-page-range {
font-size: 0.85rem;
}


.ayah-bismillah-card,
.reader-bismillah-card {
padding: 20px 14px;
border-radius: 18px;
}
}


/* READ QURAN — grootte/rendering, GEEN font forceren */
.reader-page .reader-page-text,
.reader-page .quran-ayah-inline,
.reader-page .reader-bismillah {
font-size: 2.8rem;
line-height: 2.5;
font-feature-settings: "liga" 1, "calt" 1;
}

.reader-page .reader-surah-arabic-name {
font-family: 'Hafs', serif;
}


.read-actions {
display: flex;
justify-content: center;
gap: 16px;
margin: 22px 0;
flex-wrap: wrap;
}


.action-btn {
display: flex;
align-items: center;
gap: 10px;


padding: 14px 22px;
border-radius: 18px;
border: 1px solid var(--border);


background: var(--card);
color: var(--text);


font-size: 1rem;
font-weight: 700;


cursor: pointer;
box-shadow: var(--shadow);
transition: all 0.25s ease;
}


.action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(15,23,42,0.12);
}


/* =========================
QARI FOTO — STRAK & GELIJK
========================= */


.qari-card img {
width: 180px;
height: 180px;        /* 🔑 ALLES EVEN GROOT /
object-fit: cover;    / 🔑 geen vervormen */
border-radius: 16px;
display: block;
margin: 0 auto;
}


/* ==============================
AUDIO QURAN — 1 SURAH PER RIJ
============================== */


.audio-page .grid {
grid-template-columns: 1fr !important;
}


/* ==============================
PAGE END CARD — HOLY QURAN PASHTO
============================== */


.page-end-card {
background: var(--);
border-radius: 24px;
padding: 28px;
box-shadow: var(--shadow);
text-align: center;


/* belangrijk voor jouw probleem /
margin-top: -60px;   / dichter bij laatste card */
}


.page-end-card h3 {
margin: 5;
font-size: 1.45rem;
font-weight: 700;
color: var(--primary);
}
``


/* =========================
QARI OVERLAY PAGE
========================= */


.qari-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.35);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}


.qari-overlay.hidden {
display: none;
}


.qari-overlay-card {
background: var(--card);
width: 92%;
max-width: 900px;
border-radius: 24px;
padding: 30px;
box-shadow: var(--strong-shadow);
}


/* =========================
QARI STYLES UITGESCHAKELD
Alles hieronder wordt NIET gebruikt

.qari-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
margin: 30px 0;
}


.qari-card {
text-align: center;
cursor: pointer;
padding: 16px 12px;
border-radius: 18px;
}


.qari-card:hover {
transform: translateY(-2px);
}


.qari-card img {
width: 100%;
max-width: 180px;
}


.qari-card.active {
border-color: var(--accent);
}


.qari-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
margin: 36px 0;
}


@media (max-width: 900px) {
.qari-grid {
grid-template-columns: repeat(2, 1fr);
}
}


*/


/* ✅ FIX QARI PAGE WIDTH */
.detail-page .detail-card.qari-page {
max-width: 100%;
}


.detail-page .detail-card {
max-width: 100%;
}


/* ✅ FIX: laat detail-card volle breedte nemen op Qari-pagina */
.detail-page .detail-card {
width: 100%;
}


/* =========================
QARI LAYOUT — DEFINITIEF
========================= */


/* zorg dat de kaart BREED mag zijn */
.qari-page {
align-items: stretch !important;
}


/* ✅ Rij 1 + 2: altijd 4 per rij */
.qari-grid {
display: grid;
grid-template-columns: repeat(4, 220px);
justify-content: center;
gap: 28px;
width: 100%;
margin-bottom: 28px;
}


/* ✅ Rij 3: altijd in het midden */
.qari-last-row {
display: flex;
justify-content: center;
gap: 28px;
width: 100%;
}


/* kaart */
.qari-card {
width: 220px;
text-align: center;
}


/* foto */
.qari-card img {
width: 220px;
height: 220px;
object-fit: cover;
border-radius: 18px;
}


/* naam */
.qari-card p {
margin-top: 10px;
font-size: 0.95rem;
}


/* =========================
QARI ACTION BUTTONS
========================= */


.qari-actions {
display: flex;
justify-content: center;   /* midden van de pagina */
margin-top: 32px;
}


/* knop stijl zoals screenshot */
.qari-action-btn {
display: inline-flex;
align-items: center;
gap: 10px;


padding: 14px 26px;
border-radius: 999px;     /* pill shape */
border: 1px solid var(--border);
background: #ffffff;


font-size: 1rem;
font-weight: 600;
color: var(--primary);


box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
cursor: pointer;
transition: all 0.2s ease;
}


/* hover */
.qari-action-btn:hover:enabled {
transform: translateY(-1px);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}


/* disabled (voor selectie) */
.qari-action-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}


/* =========================
GESELECTEERDE QARI (RAND RONDOM FOTO)
========================= */


.qari-card {
position: relative;
text-align: center;
}


/* foto standaard /
.qari-card img {
width: 220px;        / of jouw maat */
height: 220px;
object-fit: cover;
border-radius: 16px;
transition: all 0.2s ease;
}


/* ✅ blauwe rand RONDOM DE FOTO */
.qari-card.active img {
border: 4px solid #2563eb;
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
}


/* ✅ check-icoon blijft */
.qari-card.active::after {
content: "✓";
position: absolute;
top: 10px;
right: 10px;
width: 26px;
height: 26px;
border-radius: 50%;
background: #2563eb;
color: #ffffff;
font-size: 16px;
font-weight: bold;


display: flex;
align-items: center;
justify-content: center;
}
.selected-qari-text {
text-align: center;
margin-top: 20px;
font-weight: 600;
color: #2563eb;
}'


/* =========================
AUDIO QURAN ACTIONS
========================= */


.audio-actions {
display: flex;
justify-content: center;
gap: 16px;
margin: 28px 0;
flex-wrap: wrap;
}


.audio-action-btn {
display: inline-flex;
align-items: center;
gap: 8px;


padding: 14px 24px;
border-radius: 999px;
border: 1px solid var(--border);
background: #ffffff;


font-size: 0.95rem;
font-weight: 600;
color: var(--primary);


box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
cursor: pointer;
transition: all 0.2s ease;
}


.audio-action-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}


/* primaire knop (Continue) /
.audio-action-btn.primary {
border: 3px solid #2563eb;
}
/ ✅ AUDIO QURAN — 1 SURAH PER RIJ */
.audio-page .grid {
grid-template-columns: 1fr !important;
}


/* =========================
AUDIO PLAYER – CARD STYLE
========================= */


.audio-player-card {
max-width: 420px;
margin: 0 auto;
text-align: center;
}


.audio-player-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}


.audio-player-header h2 {
margin: 0;
font-size: 1.3rem;
font-weight: 800;
}


.audio-qari-image img {
width: 220px;
height: 220px;
object-fit: cover;
border-radius: 18px;
box-shadow: 0 12px 30px rgba(0,0,0,0.25);
display: block;
margin: 0 auto;
}


.audio-qari-name {
margin: 16px 0 10px;
font-size: 1.15rem;
font-weight: 700;
}


.audio-divider {
height: 4px;
width: 80%;
background: #000;
margin: 16px auto 20px;
border-radius: 4px;
}


.audio-controls {
display: flex;
justify-content: space-between;
align-items: center;
}


.audio-controls button {
background: none;
border: none;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
}


/* =========================
ARABISCHE SURAH NAAM (HAFS)
========================= */


.audio-player-header h2:last-child {
font-family: 'Hafs', serif !important;
font-size: 2.4rem;        /* ✅ GROTER */
font-weight: normal;
direction: rtl;
}


.fav-btn {
pointer-events: auto;
cursor: pointer;
background: transparent;
border: none;
font-size: 18px;
position: absolute;
top: 10px;
left: 10px;
z-index: 10;
}


/* =========================
FIX QARI SELECT BUTTON TEXT
========================= */


.qari-action-btn {
color: #0f172a !important;
background: #ffffff !important;
}


.qari-action-btn:disabled {
color: #4b5563 !important;
background: #d1d5db !important;
opacity: 1 !important;
}


body.theme-dark .qari-action-btn {
color: #f8fafc !important;
background: #1f2937 !important;
border-color: #374151 !important;
}


body.theme-dark .qari-action-btn:disabled {
color: #cbd5e1 !important;
background: #374151 !important;
border-color: #4b5563 !important;
opacity: 1 !important;
}


body.theme-sepia .qari-action-btn {
color: #5b4632 !important;
background: #fffaf0 !important;
border-color: #dcc9ab !important;
}


body.theme-sepia .qari-action-btn:disabled {
color: #7b6550 !important;
background: #eadfcf !important;
opacity: 1 !important;
}


/* ========================================
Read Quran — laatste card centreren
als het aantal surahs oneven is
======================================== */
#readSurahGrid .read-surah-card.center-last {
grid-column: 1 / -1;
justify-self: center;
max-width: 620px;
width: 100%;
}


/* ========================================
HERO BACKGROUND OP AUDIO + READ PAGINA'S
Zelfde look als homepage hero
======================================== */


/* Zorg dat .hero overal dezelfde achtergrond, padding en ronding krijgt */
.hero {
width: 100%;
padding: 18px 10px;
background: var(--hero-bg);
box-sizing: border-box;
}


.hero-card {
position: relative;
max-width: 1600px;
width: 98%;
margin: auto;
padding: 70px 60px;
border-radius: 28px;
background: var(--hero-card-bg);
backdrop-filter: blur(14px);
box-shadow: var(--strong-shadow);
text-align: center;
}


/* Zorg dat de knoppen groep netjes centreert en wrapt, overal hetzelfde */
.hero .buttons {
margin-top: 22px;
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}


/* Kleine tweak op mobiel voor Audio en Read pagina's */
@media (max-width: 600px) {
.hero {
padding: 12px 8px;
}


.hero-card {
padding: 60px 20px 30px;
}
}


/* Hero volledig breed maken op Audio + Read pagina's */
.detail-page .hero,
.reader-page .hero {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
}


/* ========================================
BACK KNOP BINNEN HERO-CARD
(voor Read Quran + Audio Quran)
======================================== */
.hero-card {
position: relative;
}


.hero-card .hero-back-link {
position: absolute;
top: 20px;
left: 20px;
margin: 0 !important;
}


@media (max-width: 600px) {
.hero-card .hero-back-link {
top: 14px;
left: 14px;
padding: 10px 14px;
font-size: 0.9rem;
}
}


/* ========================================
Hero volledig bovenaan laten beginnen
(geen witte strook meer boven de card)
======================================== */


/* Haal padding weg boven de hero op Read Quran + Audio Quran */
.reader-page,
.detail-page.audio-page {
padding-top: 0 !important;
margin-top: 0 !important;
}


/* Zorg dat de hero helemaal bovenaan start en geen extra wit erboven heeft */
.reader-page > .hero,
.detail-page.audio-page > .hero {
margin-top: 0 !important;
padding-top: 40px;
}


/* Kleine margin-top voor inhoud onder de hero */
.reader-page > .read-list-section,
.reader-page > #readerContent,
.detail-page.audio-page > h2,
.detail-page.audio-page > #audioSurahList {
margin-top: 30px;
}


/* ========================================
Read Quran — verwijder alle witte ruimte boven + naast hero
======================================== */


html,
body {
margin: 0 !important;
padding: 0 !important;
}


.reader-page {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}


.reader-page > .hero {
margin: 0 !important;
padding: 30px 0 !important;
width: 100% !important;
background: var(--hero-bg) !important;
}


.reader-page > .hero .hero-card {
max-width: 1600px;
width: 98%;
margin: auto;
padding: 70px 60px;
border-radius: 28px;
background: var(--hero-card-bg);
box-shadow: var(--strong-shadow);
text-align: center;
position: relative;
}


/* Inhoud onder de hero netjes gecentreerd */
.reader-page > #readerContent,
.reader-page > .read-list-section,
.reader-page > .detail-card {
max-width: 1200px;
margin: 30px auto 40px auto;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
}


.reader-page > #readerTopLinks {
padding: 0 20px;
margin-top: 20px;
}


/* Mobiel */
@media (max-width: 600px) {
.reader-page > .hero {
padding: 20px 0 !important;
}


.reader-page > .hero .hero-card {
padding: 60px 20px 30px;
}
}















/* =====================================================
   FINAL FIX — AUDIO QURAN HERO WITTE STROOK WEG
   Back knop binnen hero-card + layout herstellen
   ===================================================== */

.detail-page.audio-page {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.detail-page.audio-page > .hero {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 18px 10px !important;
  background: var(--hero-bg) !important;
  box-sizing: border-box !important;
}

.detail-page.audio-page > .hero .hero-card {
  position: relative !important;
  max-width: 1600px !important;
  width: 98% !important;
  margin: 0 auto !important;
  padding: 70px 60px !important;
  border-radius: 28px !important;
  background: var(--hero-card-bg) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: var(--strong-shadow) !important;
  text-align: center !important;
}

.detail-page.audio-page > .hero .hero-back-link {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  margin: 0 !important;
}

/* Audio lijst netjes gecentreerd onder de hero */
.detail-page.audio-page > #audioListTitle {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 30px auto 18px auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.detail-page.audio-page > #audioSurahList {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto 40px auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* Audio blijft 1 surah per rij */
.detail-page.audio-page #audioSurahList.grid {
  grid-template-columns: 1fr !important;
}

/* Hartjes blijven klikbaar */
.detail-page.audio-page .fav-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 30 !important;
}

/* Mobiel */
@media (max-width: 600px) {
  .detail-page.audio-page > .hero {
    padding: 12px 8px !important;
  }

  .detail-page.audio-page > .hero .hero-card {
    width: 94% !important;
    padding: 60px 20px 30px !important;
  }

  .detail-page.audio-page > .hero .hero-back-link {
    top: 14px !important;
    left: 14px !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
  }

  .detail-page.audio-page > #audioListTitle,
  .detail-page.audio-page > #audioSurahList {
    padding: 0 14px !important;
  }
}









/* AUDIO THEME TOGGLE — rechtsboven zoals homepage */
.audio-theme-toggle {
  position: fixed !important;
  top: 28px !important;
  right: 28px !important;
  z-index: 99999 !important;
}

.audio-theme-toggle i {
  pointer-events: none;
}









/* ========================================
   READ QURAN ONLY — witte strook boven hero weg
   Audio Quran NIET aanraken
======================================== */

/* Alleen Read Quran lijstpagina */
body.read-list-mode {
  margin: 0 !important;
  padding: 0 !important;
}

/* Read main wrapper mag geen top-space maken */
body.read-list-mode .reader-page {
  max-width: 100% !important;
  width: 100% !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* De container rond de hero mag geen top-space maken */
body.read-list-mode #readerContent {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* De hero zelf direct bovenaan laten starten */
body.read-list-mode #readerContent > .hero {
  margin-top: 0 !important;
  padding-top: 18px !important;
  background: var(--hero-bg) !important;
}

/* Als er nog oude top-links ruimte is, verbergen */
body.read-list-mode #readerTopLinks {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}































/* =====================================================
   SAFE NO HORIZONTAL SCROLL FIX
   Raakt GEEN qari/player/about/card grootte aan
   ===================================================== */

/* Alleen horizontale scrollbar weg */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Media nooit buiten scherm */
img,
video {
  max-width: 100%;
}

/* Hero sections veilig binnen scherm houden */
.hero {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Hero-card behoudt homepage stijl, maar veroorzaakt geen overflow */
.hero-card {
  box-sizing: border-box;
}

/* Footer behoudt homepage stijl, maar veroorzaakt geen overflow */
.site-footer {
  box-sizing: border-box;
}

/* =====================================================
   READ QURAN LIST PAGE HERO FIX
   Alleen Read Quran lijstpagina, niet single surah
   ===================================================== */

body.read-list-mode .reader-page {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.read-list-mode #readerTopLinks {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.read-list-mode #readerContent {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.read-list-mode #readerContent > .hero {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 18px 18px !important;
  background: var(--hero-bg) !important;
  box-sizing: border-box !important;
}

body.read-list-mode #readerContent > .hero .hero-card {
  width: 100% !important;
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.read-list-mode #readerContent > .read-list-section {
  max-width: 1400px !important;
  margin: 34px auto 44px !important;
  padding: 0 18px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Back knop binnen Read hero-card */
body.read-list-mode .hero-card .hero-back-link {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  margin: 0 !important;
}

/* =====================================================
   AUDIO QURAN HERO FIX
   Alleen Audio list page, niet qari/player
   ===================================================== */

.detail-page.audio-page {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 44px !important;
}

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

.detail-page.audio-page > .hero .hero-card {
  width: 100% !important;
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.detail-page.audio-page > .hero .hero-back-link {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  margin: 0 !important;
}

.detail-page.audio-page > #audioListTitle {
  max-width: 1200px !important;
  margin: 30px auto 18px !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

.detail-page.audio-page > #audioSurahList {
  max-width: 1200px !important;
  margin: 0 auto 40px !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* Audio blijft 1 surah per rij */
.detail-page.audio-page #audioSurahList.grid {
  grid-template-columns: 1fr !important;
}

/* Audio heart blijft klikbaar */
.detail-page.audio-page .fav-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 30 !important;
}

/* =====================================================
   READ POPULAR/FAVORITES LAST CARD CENTER
   Alleen Read Quran grid
   ===================================================== */

#readSurahGrid .read-surah-card.center-last {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 620px;
  width: 100%;
}

/* =====================================================
   THEME TOGGLE BUTTONS
   Alleen theme buttons
   ===================================================== */

.audio-theme-toggle,
.read-theme-toggle {
  position: fixed !important;
  top: 28px !important;
  right: 28px !important;
  z-index: 99999 !important;
}

.audio-theme-toggle i,
.read-theme-toggle i {
  pointer-events: none;
}

/* =====================================================
   MOBILE SAFE FIX
   ===================================================== */

@media (max-width: 600px) {
  body.read-list-mode #readerContent > .hero,
  .detail-page.audio-page > .hero {
    padding: 12px 12px !important;
  }

  body.read-list-mode #readerContent > .hero .hero-card,
  .detail-page.audio-page > .hero .hero-card {
    width: 100% !important;
    padding: 60px 20px 30px !important;
  }

  body.read-list-mode .hero-card .hero-back-link,
  .detail-page.audio-page > .hero .hero-back-link {
    top: 14px !important;
    left: 14px !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
  }

  .audio-theme-toggle,
  .read-theme-toggle {
    top: 18px !important;
    right: 18px !important;
  }
}












/* =====================================================
   READ QURAN — TERUG NAAR 2 CARDS PER RIJ
   Deze code moet ONDER de safe fix staan
   ===================================================== */

body.read-list-mode #readerContent > .read-list-section {
  max-width: 1200px !important;
}

body.read-list-mode #readSurahGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
  gap: 20px !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Card weer normale grootte */
body.read-list-mode #readSurahGrid .read-surah-card {
  min-height: 120px !important;
  padding: 22px !important;
  border-radius: 20px !important;
}

/* Laatste card bij popular/favorites mooi midden */
body.read-list-mode #readSurahGrid .read-surah-card.center-last {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  max-width: 580px !important;
  width: 100% !important;
}

/* Mobiel/tablet: 1 per rij */
@media (max-width: 900px) {
  body.read-list-mode #readSurahGrid {
    grid-template-columns: 1fr !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card.center-last {
    max-width: 100% !important;
  }
}











/* =====================================================
   READ QURAN — COMPACT CARD SIZE
   Alleen Read Quran lijstpagina
   ===================================================== */

body.read-list-mode #readSurahGrid .read-surah-card {
  min-height: 92px !important;
  height: auto !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
  gap: 14px !important;
}

/* Hartje kleiner en subtieler */
body.read-list-mode #readSurahGrid .read-surah-card .fav-btn {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  top: 10px !important;
  left: 10px !important;
  font-size: 16px !important;
  border-radius: 12px !important;
}

/* Nummer iets compacter */
body.read-list-mode #readSurahGrid .read-surah-card .number {
  min-width: 42px !important;
  width: 42px !important;
  height: 42px !important;
  font-size: 0.9rem !important;
}

/* Tekst compacter */
body.read-list-mode #readSurahGrid .read-surah-card .info h3 {
  font-size: 1.25rem !important;
  margin-bottom: 6px !important;
}

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

/* Arabische naam compacter */
body.read-list-mode #readSurahGrid .read-surah-card .arabic h3 {
  font-size: 1.65rem !important;
  margin-bottom: 0 !important;
}

/* Minder verticale ruimte tussen rows */
body.read-list-mode #readSurahGrid {
  gap: 16px 20px !important;
}









/* =====================================================
   READ QURAN SINGLE SURAH — Back knop netjes boven card
   Alleen als read-list-mode NIET actief is
   ===================================================== */

body:not(.read-list-mode) .reader-page {
  max-width: 1200px !important;
  margin: 40px auto !important;
  padding: 20px !important;
}

body:not(.read-list-mode) .reader-top-links {
  max-width: 1200px !important;
  margin: 0 auto 24px auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
}

body:not(.read-list-mode) .reader-top-links .back-link {
  margin-bottom: 0 !important;
}

body:not(.read-list-mode) #readerContent {
  max-width: 1200px !important;
  margin: 0 auto !important;
}
/* =====================================================
   READ SINGLE PAGE — Back knop uitlijnen met card
   ===================================================== */

body:not(.read-list-mode) .reader-top-links {
  max-width: 1200px !important;
  margin: 40px auto 24px auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

body:not(.read-list-mode) .reader-top-links .back-link {
  margin-left: 0 !important;
}









/* ========================================
   LANGUAGE FONT SWITCH — UI only
   Pashto / Dari / Urdu / Arabic krijgen mooie RTL font
   Quran tekst blijft Hafs
======================================== */

body[dir="rtl"],
body[dir="rtl"] button,
body[dir="rtl"] input,
body[dir="rtl"] select,
body[dir="rtl"] textarea,
body[dir="rtl"] option,
body[dir="rtl"] label,
body[dir="rtl"] a,
body[dir="rtl"] p,
body[dir="rtl"] span,
body[dir="rtl"] li,
body[dir="rtl"] small,
body[dir="rtl"] strong,
body[dir="rtl"] em,
body[dir="rtl"] .result-text,
body[dir="rtl"] .no-result,
body[dir="rtl"] .menu-link,
body[dir="rtl"] .back-link,
body[dir="rtl"] .back-btn,
body[dir="rtl"] .page-back-link,
body[dir="rtl"] .font-size-value,
body[dir="rtl"] .video-link,
body[dir="rtl"] .favorite-card,
body[dir="rtl"] .big-fav-btn,
body[dir="rtl"] .footer-bottom,
body[dir="rtl"] .read-list-kicker,
body[dir="rtl"] .read-list-subtitle,
body[dir="rtl"] .reader-label,
body[dir="rtl"] .reader-surah-meta,
body[dir="rtl"] .detail-header p,
body[dir="rtl"] .detail-box h3,
body[dir="rtl"] .detail-box p,
body[dir="rtl"] .ayah-number-badge,
body[dir="rtl"] .info,
body[dir="rtl"] .info h3,
body[dir="rtl"] .info p,
body[dir="rtl"] .section-header h2,
body[dir="rtl"] .footer-about h2,
body[dir="rtl"] .footer-about p,
body[dir="rtl"] .footer-links h3,
body[dir="rtl"] .footer-links a,
body[dir="rtl"] .read-list-title,
body[dir="rtl"] .read-list-section-title,
body[dir="rtl"] .reader-surah-header h1,
body[dir="rtl"] .ayah-section-title,
body[dir="rtl"] .detail-header h1,
body[dir="rtl"] .hero-description,
body[dir="rtl"] .subtitle,
body[dir="rtl"] .search,
body[dir="rtl"] .search::placeholder,
body[dir="rtl"] .hero-chip-btn,
body[dir="rtl"] .side-menu,
body[dir="rtl"] .side-menu label,
body[dir="rtl"] .side-menu select,
body[dir="rtl"] .side-menu button,
body[dir="rtl"] .side-menu a {
  font-family: 'Vazirmatn', sans-serif !important;
}

/* Surah-NAMEN bij RTL — vaste Hafs */
body[dir="rtl"] .arabic h3,
body[dir="rtl"] .detail-arabic h2,
body[dir="rtl"] .reader-surah-arabic-name,
body[dir="rtl"] .search-history-arabic {
  font-family: 'Hafs', 'Amiri', serif !important;
}
















/* READ THEME TOGGLE — rechtsboven zoals Audio Quran */
.read-theme-toggle {
  position: fixed !important;
  top: 28px !important;
  right: 28px !important;
  z-index: 99999 !important;
}

.read-theme-toggle i {
  pointer-events: none;
}











/* =========================
   SELECTED QARI — THIN BLUE BORDER
   Geen witte ruimte tussen foto en lijn
   ========================= */

.qari-card.active img {
  outline: none !important;
  outline-offset: 0 !important;

  border: 3.5px solid #2563eb !important;
  border-radius: 18px !important;

  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22) !important;
}

/* Check icoon blijft mooi */
.qari-card.active::after {
  content: "✓" !important;
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;

  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;

  background: #2563eb !important;
  color: #ffffff !important;

  font-size: 16px !important;
  font-weight: bold !important;

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

  z-index: 10 !important;
}

.qari-card {
  position: relative !important;
}




















/* =====================================================
   FIX SIDE MENU HORIZONTAL SCROLL
   Geen pijltje / geen zij-scroll bij menu open
   ===================================================== */

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

/* Overlay mag nooit breder dan scherm zijn */
.menu-overlay {
  overflow: hidden !important;
}

/* Side menu mag niet buiten scherm lekken */
.side-menu {
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Alles binnen side menu moet binnen breedte blijven */
.side-menu *,
.side-menu *::before,
.side-menu *::after {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* Inputs/selects/buttons/links in menu niet breder dan container */
.side-menu select,
.side-menu button,
.side-menu a,
.side-menu input,
.side-menu .menu-link,
.side-menu .font-size-control,
.side-menu .theme-buttons,
.side-menu .menu-section {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Menu open: niet buiten viewport */
.side-menu.open {
  right: 16px !important;
  max-width: calc(100vw - 32px) !important;
}

/* Mobiel */
@media (max-width: 600px) {
  .side-menu {
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
  }

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






/* Share Website knop links uitlijnen zoals de andere menu links */
#shareWebsiteBtn {
  text-align: left !important;
  justify-content: flex-start !important;
  display: block !important;
  width: 100% !important;
}
body[dir="rtl"] #shareWebsiteBtn {
  text-align: right !important;
}


















/* =====================================================
   ROOT SURAH DETAIL PAGE — gelijke ruimte links/rechts
   Alleen homepage surah.html detailpagina
   ===================================================== */

.has-floating-back {
  max-width: 1200px !important;
  width: calc(100% - 48px) !important;
  margin: 40px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Back knop gelijk met de card */
.has-floating-back .floating-back-btn {
  margin-left: 0 !important;
  margin-bottom: 24px !important;
}

/* Surah detail card netjes binnen dezelfde breedte */
.has-floating-back #surahDetail {
  width: 100% !important;
}

.has-floating-back #surahDetail .detail-card {
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Mobiel */
@media (max-width: 600px) {
  .has-floating-back {
    width: calc(100% - 24px) !important;
    margin: 24px auto !important;
  }
}




.surah-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}








/* =====================================================
   SURAH DETAIL — grotere vertalingen
   Alleen homepage surah.html detailpagina
   ===================================================== */

.has-floating-back .translation-block p {
  font-size: 1.25rem !important;
  line-height: 2.05 !important;
  font-weight: 500 !important;
}

.has-floating-back .translation-block h3 {
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
}

.has-floating-back .ayah-number-badge {
  font-size: 0.95rem !important;
  padding: 9px 13px !important;
}

/* Pashto/Dari iets mooier leesbaar en dunner gemaakt */
.has-floating-back .translation-pashto p,
.has-floating-back .translation-dari p {
  font-size: 1.25rem !important;
  line-height: 2.15 !important;
  font-weight: 300 !important; /* Dunner gemaakt */
}

/* English ook groter */
.has-floating-back .translation-block:not(.translation-pashto):not(.translation-dari) p {
  font-size: 1.18rem !important;
  line-height: 1.95 !important;
}

/* Mobiel iets kleiner houden */
@media (max-width: 600px) {
  .has-floating-back .translation-block p,
  .has-floating-back .translation-pashto p,
  .has-floating-back .translation-dari p {
    font-size: 1.05rem !important;
    line-height: 1.9 !important;
  }

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








/* =====================================================
   SURAH DETAIL — Alleen Read/Listen knoppen mooi maken
   Raakt vertalingen NIET aan
   ===================================================== */

.has-floating-back .surah-actions {
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-top: 18px !important;
}

.has-floating-back .surah-actions .read-surah-link,
.has-floating-back .surah-actions .listen-surah-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 14px 22px !important;
  border-radius: 18px !important;

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

  font-size: 0.98rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;

  box-shadow: var(--shadow) !important;
  transition: all 0.22s ease !important;
}

.has-floating-back .surah-actions .read-surah-link:hover,
.has-floating-back .surah-actions .listen-surah-link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12) !important;
  border-color: var(--accent) !important;
}

body.theme-dark .has-floating-back .surah-actions .read-surah-link,
body.theme-dark .has-floating-back .surah-actions .listen-surah-link {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: #374151 !important;
}

body.theme-sepia .has-floating-back .surah-actions .read-surah-link,
body.theme-sepia .has-floating-back .surah-actions .listen-surah-link {
  background: #fffaf0 !important;
  color: #5b4632 !important;
  border-color: #dcc9ab !important;
}



















/* =====================================================
   SURAH DETAIL — AYAH COPY BUTTON
   Alleen root surah.html
   ===================================================== */

.has-floating-back .ayah-copy-btn {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;

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

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

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

  cursor: pointer !important;
  box-shadow: var(--shadow) !important;

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

  z-index: 20 !important;
  transition: all 0.2s ease !important;
}

.has-floating-back .ayah-card.active .ayah-copy-btn {
  display: inline-flex !important;
}

.has-floating-back .ayah-copy-btn:hover {
  transform: translateY(-2px) !important;
  border-color: var(--accent) !important;
}

.has-floating-back .ayah-copy-btn.copied {
  color: #16a34a !important;
  border-color: #16a34a !important;
}

body.theme-dark .has-floating-back .ayah-copy-btn {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: #374151 !important;
}

body.theme-sepia .has-floating-back .ayah-copy-btn {
  background: #fffaf0 !important;
  color: #5b4632 !important;
  border-color: #dcc9ab !important;
}






/* =====================================================
   SURAH DETAIL — Copy knop naast Favorite knop
   Alleen root surah.html
   ===================================================== */

/* Favorite blijft rechts */
.has-floating-back .ayah-favorite-btn {
  right: 18px !important;
  left: auto !important;
}

/* Copy knop komt links naast favorite knop */
.has-floating-back .ayah-copy-btn {
  top: 18px !important;
  right: 160px !important;
  left: auto !important;
}

/* Als favorite tekst breder is, iets meer ruimte */
.has-floating-back .ayah-favorite-btn.saved + .ayah-copy-btn,
.has-floating-back .ayah-copy-btn.copied {
  right: 170px !important;
}

/* Mobiel: knoppen iets dichterbij */
@media (max-width: 600px) {
  .has-floating-back .ayah-favorite-btn {
    right: 12px !important;
  }

  .has-floating-back .ayah-copy-btn {
    right: 145px !important;
    top: 12px !important;
  }
}












/* =====================================================
   SURAH DETAIL — info boxes mooier en groter
   Alleen root surah.html
   ===================================================== */

.has-floating-back .detail-box {
  padding: 26px 28px !important;
  border-radius: 20px !important;
}

.has-floating-back .detail-box h3 {
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  margin-bottom: 14px !important;
  color: var(--primary) !important;
  letter-spacing: -0.02em !important;
}

.has-floating-back .detail-box p {
  font-size: 1.12rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1.6 !important;
}

/* Arabische naam in info box iets mooier */
.has-floating-back .detail-box:nth-child(3) p {
  font-family: 'Hafs', serif !important;
  font-size: 1.25rem !important;
  direction: rtl !important;
}

/* Op mobiel iets kleiner houden */
@media (max-width: 600px) {
  .has-floating-back .detail-box {
    padding: 22px 20px !important;
  }

  .has-floating-back .detail-box h3 {
    font-size: 1.05rem !important;
  }

  .has-floating-back .detail-box p {
    font-size: 1rem !important;
  }

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



/* =====================================================
   SURAH DETAIL — Arabic name in info box links uitlijnen
   Alleen root surah.html
   ===================================================== */

.has-floating-back .detail-box:nth-child(3) p {
  text-align: left !important;
  direction: rtl !important;
  display: block !important;
}


/* =====================================================
   SURAH DETAIL — Arabic name text groter maken
   Alleen root surah.html
   ===================================================== */

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













/* Highlight ayah when using Continue */
.highlight-ayah {
  background-color: #fff3cd; /* zacht geel */
  border-radius: 6px;
  transition: background-color 0.5s ease;
}








/* ===== Continue Reading - Highlight Effect ===== */
.highlight-ayah {
  background: linear-gradient(135deg, #fff8dc 0%, #ffe6a3 100%);
  box-shadow: 0 0 25px rgba(255, 193, 7, 0.6);
  border: 2px solid #ffc107;
  animation: highlightGlow 3s ease-out;
}

@keyframes highlightGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 193, 7, 0);
  }
  20% {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(255, 193, 7, 0.8);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.4);
  }
}





























/* =====================================================
   MOBIELE AANPASSINGEN — VOLLEDIG SCHOON (1 net bestand)
   ===================================================== */

@media (max-width: 600px) {

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

  /* ✅ Menu knop */
  #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;
  }

  /* ✅ Surah grid */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 10px !important;
  }

  /* ✅ Alleen op telefoon verbergen */
  .subtitle {
    display: none !important;
  }

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

  /* ✅ Hero — strakker */
  .hero {
    padding: 8px 6px !important;
  }

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

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

  /* ✅ Zoekbalk */
  .search-wrapper {
    margin: 10px auto 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !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: left !important;
    margin: 0 !important;
  }

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

  /* ✅ Hoofdknoppen homepage */
  .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 {
    font-size: 0.68rem !important;
  }

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

  /* ✅ Favorites knoppen */
  #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 {
    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;
  }

  /* ✅ Main / Section */
  main {
  padding: 14px 10px 24px !important;
}

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

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

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

  /* ✅ Surah cards homepage */
  .card {
    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;
    min-height: 52px !important;
    position: relative !important;
  }

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

  .card .info {
    flex: 1 !important;
    padding-left: 0 !important;
    text-align: left !important;
    min-width: 0 !important;
  }

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

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

  .card .arabic {
    min-width: auto !important;
    text-align: right !important;
  }

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

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

  .card .favorite-btn {
    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;
  }

  /* ===== SURAH DETAIL PAGINA ===== */

  /* ✅ Detail page — minder ruimte boven/onder */
  .has-floating-back {
    margin: 12px auto !important;
    width: calc(100% - 16px) !important;
  }

  /* ✅ Detail-card achtergrond weg (ayahs vrij) */
  .has-floating-back .detail-card {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* ✅ Back to homepage knop */
  .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;
  }

  /* ✅ Detail header — eigen witte card (boven afgerond) */
  .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.8rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  /* ✅ Read/Listen knoppen — mooi, naast elkaar */
  .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;
  }

  body.theme-dark .has-floating-back .surah-actions a.read-surah-link,
  body.theme-dark .has-floating-back .surah-actions a.listen-surah-link {
    background: #111827 !important;
    color: #f8fafc !important;
    border-color: #374151 !important;
  }

  body.theme-sepia .has-floating-back .surah-actions a.read-surah-link,
  body.theme-sepia .has-floating-back .surah-actions a.listen-surah-link {
    background: #fffaf0 !important;
    color: #5b4632 !important;
    border-color: #dcc9ab !important;
  }

  /* ✅ Detail info boxes — eigen witte card (onder afgerond) */
  .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;
  }

  /* ===== AYAH SECTIE ===== */

  .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;
  }

  /* ✅ Ayah card */
  .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;
  }

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

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

  /* ✅ Translation block */
  .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;
  }

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

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

  /* ✅ Pashto tekst */
  .has-floating-back .translation-pashto p {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
  }

  /* ✅ Dari tekst */
  .has-floating-back .translation-dari p {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
  }

  /* ✅ Lege vertaling boxes minder hoog */
  .has-floating-back .translation-block p:empty {
    min-height: 4px !important;
    margin: 0 !important;
  }

  /* ✅ Favorite knop op ayah card */
  .has-floating-back .ayah-favorite-btn {
    padding: 6px 10px !important;
    font-size: 0.7rem !important;
    top: 12px !important;
    right: 12px !important;
  }

  /* ✅ Copy knop op ayah card */
  .has-floating-back .ayah-copy-btn {
    width: 32px !important;
    height: 32px !important;
    top: 12px !important;
    right: 130px !important;
  }

  /* ===== AUDIO/VIDEO + PAGE-END ===== */

  .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;
  }
}

/* ✅ voorkomt scroll op achtergrond */
.body-lock {
  position: fixed !important;
  top: var(--menu-scroll-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}







/* ===== Continue Reading - Highlight Effect ===== */
.highlight-ayah {
  background: linear-gradient(135deg, #fff8dc 0%, #ffe6a3 100%);
  box-shadow: 0 0 25px rgba(255, 193, 7, 0.6);
  border: 2px solid #ffc107;
  animation: highlightGlow 3s ease-out;
}

@keyframes highlightGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 193, 7, 0);
  }
  20% {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(255, 193, 7, 0.8);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.4);
  }
}


/* =====================================================
   FONT KIEZER — Quran tekst lettertype (STERK)
   ===================================================== */

/* Standaard = Hafs */
body.quran-font-hafs .arabic h3,
body.quran-font-hafs .detail-arabic h2,
body.quran-font-hafs .ayah-arabic,
body.quran-font-hafs .reader-surah-arabic-name,
body.quran-font-hafs .quran-page-block,
body.quran-font-hafs .reader-page-text,
body.quran-font-hafs .quran-ayah-inline,
body.quran-font-hafs .reader-bismillah,
body.quran-font-hafs .ayah-bismillah-text,
body.quran-font-hafs[dir="rtl"] .arabic h3,
body.quran-font-hafs[dir="rtl"] .detail-arabic h2,
body.quran-font-hafs[dir="rtl"] .ayah-arabic,
body.quran-font-hafs[dir="rtl"] .reader-surah-arabic-name,
body.quran-font-hafs[dir="rtl"] .quran-page-block,
body.quran-font-hafs[dir="rtl"] .reader-page-text,
body.quran-font-hafs[dir="rtl"] .quran-ayah-inline,
body.quran-font-hafs[dir="rtl"] .reader-bismillah,
body.quran-font-hafs[dir="rtl"] .ayah-bismillah-text,
body.quran-font-hafs .reader-page .reader-surah-arabic-name,
body.quran-font-hafs .reader-page .reader-page-text,
body.quran-font-hafs .reader-page .quran-ayah-inline,
body.quran-font-hafs .reader-page .reader-bismillah {
  font-family: 'Hafs', serif !important;
}

/* Scheherazade font — GEEN .arabic h3 en .detail-arabic h2 ! */
body.quran-font-amiri .ayah-arabic,
body.quran-font-amiri .reader-surah-arabic-name,
body.quran-font-amiri .quran-page-block,
body.quran-font-amiri .reader-page-text,
body.quran-font-amiri .quran-ayah-inline,
body.quran-font-amiri .reader-bismillah,
body.quran-font-amiri .ayah-bismillah-text,
body.quran-font-amiri[dir="rtl"] .ayah-arabic,
body.quran-font-amiri[dir="rtl"] .reader-surah-arabic-name,
body.quran-font-amiri[dir="rtl"] .quran-page-block,
body.quran-font-amiri[dir="rtl"] .reader-page-text,
body.quran-font-amiri[dir="rtl"] .quran-ayah-inline,
body.quran-font-amiri[dir="rtl"] .reader-bismillah,
body.quran-font-amiri[dir="rtl"] .ayah-bismillah-text,
body.quran-font-amiri .reader-page .reader-surah-arabic-name,
body.quran-font-amiri .reader-page .reader-page-text,
body.quran-font-amiri .reader-page .quran-ayah-inline,
body.quran-font-amiri .reader-page .reader-bismillah {
  font-family: 'Scheherazade New', serif !important;
}








/* =====================================================
   QURAN FONT ACCORDION — uitklap-knop in Settings
   ===================================================== */

.font-accordion-btn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  background: var(--soft-card) !important;
  color: var(--text) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
  cursor: pointer !important;
}

.font-accordion-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
}

.font-accordion-arrow {
  transition: transform 0.25s ease !important;
  font-size: 0.8rem !important;
}

.font-accordion-btn.open .font-accordion-arrow {
  transform: rotate(180deg) !important;
}

.font-accordion-panel {
  display: none !important;
  margin-top: 8px !important;
  padding: 14px 12px !important;
  background: var(--soft-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
}

.font-accordion-panel.open {
  display: block !important;
}

.font-group {
  margin-bottom: 12px !important;
}

.font-group:last-child {
  margin-bottom: 0 !important;
}

.font-group-title {
  margin: 0 0 6px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
}

/* ✅ Font-knoppen — mooie lijst onder elkaar */
.font-accordion-panel .theme-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.font-accordion-panel .theme-buttons .font-opt {
  width: 100% !important;
  margin: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 12px !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  text-align: left !important;
  white-space: normal !important;
  line-height: 1.3 !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--text) !important;
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
}

/* Het vinkje — standaard onzichtbaar */
.font-accordion-panel .theme-buttons .font-opt::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.85rem;
  opacity: 0;
}

/* De GEKOZEN font — blauw + vinkje zichtbaar */
.font-accordion-panel .theme-buttons .font-opt.active-theme {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
}

.font-accordion-panel .theme-buttons .font-opt.active-theme::after {
  opacity: 1;
}






/* =====================================================
   THEME KNOPPEN — ALTIJD 3 per rij (vast)
   ===================================================== */

.menu-section .theme-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

/* ✅ Maar de FONT-knoppen panel mag z'n eigen layout houden */
.font-accordion-panel .theme-buttons {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}




/* =====================================================
   FONT KIEZER — Alqalam Majeed (Arabic)
   ===================================================== */
body.quran-font-alqalam .arabic h3,
body.quran-font-alqalam .detail-arabic h2,
body.quran-font-alqalam .ayah-arabic,
body.quran-font-alqalam .reader-surah-arabic-name,
body.quran-font-alqalam .quran-page-block,
body.quran-font-alqalam .reader-page-text,
body.quran-font-alqalam .quran-ayah-inline,
body.quran-font-alqalam .reader-bismillah,
body.quran-font-alqalam .ayah-bismillah-text,
body.quran-font-alqalam[dir="rtl"] .reader-page-text,
body.quran-font-alqalam[dir="rtl"] .reader-bismillah,
body.quran-font-alqalam .reader-page .reader-page-text,
body.quran-font-alqalam .reader-page .reader-bismillah {
  font-family: 'Alqalam Majeed', serif !important;
}

/* =====================================================
   FONT KIEZER — Pashto & Dari vertaling
   ===================================================== */
body.trans-font-vazirmatn .translation-pashto,
body.trans-font-vazirmatn .translation-pashto *,
body.trans-font-vazirmatn .translation-dari,
body.trans-font-vazirmatn .translation-dari * {
  font-family: 'Vazirmatn', sans-serif !important;
}

body.trans-font-naskh .translation-pashto,
body.trans-font-naskh .translation-pashto *,
body.trans-font-naskh .translation-dari,
body.trans-font-naskh .translation-dari * {
  font-family: 'Naskh', sans-serif !important;
}

body.trans-font-helicoptina .translation-pashto,
body.trans-font-helicoptina .translation-pashto *,
body.trans-font-helicoptina .translation-dari,
body.trans-font-helicoptina .translation-dari * {
  font-family: 'Helicoptina45', sans-serif !important;
}

/* =====================================================
   FONT KIEZER — English vertaling
   ===================================================== */
body.eng-font-sora .translation-block:not(.translation-pashto):not(.translation-dari),
body.eng-font-sora .translation-block:not(.translation-pashto):not(.translation-dari) h3,
body.eng-font-sora .translation-block:not(.translation-pashto):not(.translation-dari) p {
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
}

body.eng-font-lora .translation-block:not(.translation-pashto):not(.translation-dari),
body.eng-font-lora .translation-block:not(.translation-pashto):not(.translation-dari) h3,
body.eng-font-lora .translation-block:not(.translation-pashto):not(.translation-dari) p {
  font-family: 'Lora', serif !important;
}

body.eng-font-tinta .translation-block:not(.translation-pashto):not(.translation-dari),
body.eng-font-tinta .translation-block:not(.translation-pashto):not(.translation-dari) h3,
body.eng-font-tinta .translation-block:not(.translation-pashto):not(.translation-dari) p {
  font-family: 'Tinta', serif !important;
}





/* =====================================================
   FONT-FIX DEFINITIEF — surah-namen los, ayah-tekst vrij
   Dit blok staat onderaan en wint van alle oude regels
   ===================================================== */

/* 1. Surah-NAMEN — ALTIJD vaste Hafs, font-kiezer raakt ze NIET */
body .arabic h3,
body .detail-arabic h2,
body .reader-surah-arabic-name,
body[dir="rtl"] .arabic h3,
body[dir="rtl"] .detail-arabic h2,
body[dir="rtl"] .reader-surah-arabic-name {
  font-family: 'Hafs', serif !important;
}

/* 2. HAFS gekozen — ayah-tekst = Hafs */
body.quran-font-hafs .ayah-arabic,
body.quran-font-hafs .quran-page-block,
body.quran-font-hafs .reader-page-text,
body.quran-font-hafs .quran-ayah-inline,
body.quran-font-hafs .reader-bismillah,
body.quran-font-hafs .ayah-bismillah-text,
body.quran-font-hafs .reader-page .reader-page-text,
body.quran-font-hafs .reader-page .quran-ayah-inline,
body.quran-font-hafs .reader-page .reader-bismillah {
  font-family: 'Hafs', serif !important;
}

/* 3. SCHEHERAZADE gekozen — ayah-tekst = Scheherazade */
body.quran-font-amiri .ayah-arabic,
body.quran-font-amiri .quran-page-block,
body.quran-font-amiri .reader-page-text,
body.quran-font-amiri .quran-ayah-inline,
body.quran-font-amiri .reader-bismillah,
body.quran-font-amiri .ayah-bismillah-text,
body.quran-font-amiri .reader-page .reader-page-text,
body.quran-font-amiri .reader-page .quran-ayah-inline,
body.quran-font-amiri .reader-page .reader-bismillah {
  font-family: 'Scheherazade New', serif !important;
}

/* Surah namen ALTIJD Hafs — wint van alles */
body.quran-font-hafs .arabic h3,
body.quran-font-amiri .arabic h3,
body.quran-font-alqalam .arabic h3,
body.quran-font-hafs .detail-arabic h2,
body.quran-font-amiri .detail-arabic h2,
body.quran-font-alqalam .detail-arabic h2,
body.quran-font-hafs[dir="rtl"] .arabic h3,
body.quran-font-amiri[dir="rtl"] .arabic h3,
body.quran-font-alqalam[dir="rtl"] .arabic h3,
body.quran-font-hafs[dir="rtl"] .detail-arabic h2,
body.quran-font-amiri[dir="rtl"] .detail-arabic h2,
body.quran-font-alqalam[dir="rtl"] .detail-arabic h2 {
  font-family: 'Hafs', serif !important;
}




































/* =====================================================
   AYAH NUMMER CIRKEL
   ===================================================== */

.ayah-num-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0 0.4rem;
  vertical-align: middle;
  background: #dbeafe;
  border-radius: 50%;
  border: 1.5px solid #2563eb;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: 'Vazirmatn', sans-serif !important;
  color: #1e3a8a !important;
  line-height: 1 !important;
  direction: ltr !important;
  position: relative;
  z-index: 1;
}

/* Hafs — eigen symbool, geen cirkel */
body.quran-font-hafs .ayah-num-circle {
  all: unset;
}















/* =====================================================
   SURAH DETAIL MOBILE TOP CARD — FINAL
   Alleen telefoon, PC blijft normaal
===================================================== */

.mobile-surah-summary {
  display: none !important;
}

.desktop-surah-summary {
  display: none !important;
}

@media (min-width: 601px) {
  .mobile-surah-summary {
    display: none !important;
  }

  .desktop-surah-summary {
    display: block !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    box-shadow: var(--shadow) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-sizing: border-box !important;
  }

  .desktop-surah-summary .surah-nav {
    display: flex !important;
    margin-bottom: 20px !important;
  }

  .desktop-surah-summary .detail-header {
    display: flex !important;
    margin-bottom: 0 !important;
  }

  .desktop-surah-summary .detail-boxes {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 20px !important;
  }
}

@media (max-width: 600px) {

  .mobile-surah-summary {
    display: block !important;
    margin-bottom: 18px !important;
  }

  /* Oude desktop header/info alleen op telefoon verbergen */
  .has-floating-back .detail-header,
  .has-floating-back .detail-boxes {
    display: none !important;
  }

  /* De hele witte card */
  .mobile-surah-pill {
    width: 100% !important;
    background: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    box-shadow: var(--shadow) !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  /* Bovenste rij: namen links, info knop rechts */
  .mobile-surah-top-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  /* Engelse + Arabische naam dicht bij elkaar */
  .mobile-surah-names {
    flex: 1 !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .mobile-surah-title {
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    color: var(--primary) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
    white-space: nowrap !important;
  }

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

  /* Surah info knop rechts */
  .mobile-surah-info-btn {
    width: 72px !important;
    min-width: 72px !important;
    height: 58px !important;

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

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

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

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

  .mobile-surah-info-btn:hover {
    transform: none !important;
    box-shadow: none !important;
  }

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

  .mobile-info-text {
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-top: 3px !important;
    white-space: nowrap !important;
  }

  /* Read / Listen knoppen BINNEN dezelfde card */
  .mobile-surah-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .mobile-surah-action-link {
    height: 42px !important;
    padding: 0 10px !important;

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

    border-radius: 16px !important;
    background: var(--soft-card) !important;
    color: var(--primary) !important;

    border: 1px solid var(--border) !important;
    box-shadow: none !important;

    font-size: 0.82rem !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  /* Uitklap info card */
  .mobile-surah-info-panel {
    display: none !important;

    margin-top: 14px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    padding: 12px !important;

    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;

    box-shadow: var(--shadow) !important;
  }

  .mobile-surah-info-panel.open {
    display: grid !important;
  }

  .mobile-info-box {
    background: var(--soft-card) !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
  }

  .mobile-info-box h3 {
    margin: 0 0 6px !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    color: var(--muted) !important;
  }

  .mobile-info-box p {
    margin: 0 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    line-height: 1.25 !important;
  }

  .mobile-info-box:nth-child(3) p {
    font-family: 'Hafs', serif !important;
    font-size: 1.15rem !important;
    direction: rtl !important;
  }
}


/* =====================================================
   MOBILE SURAH INFO BUTTON — active kleur bij open
   Alleen telefoon
===================================================== */

@media (max-width: 600px) {

  .mobile-surah-info-btn.open {
    background: var(--primary) !important;
    color: var(--card) !important;
    border-color: var(--primary) !important;
  }

  .mobile-surah-info-btn.open .mobile-info-icon,
  .mobile-surah-info-btn.open .mobile-info-text {
    color: var(--card) !important;
  }

}






/* =====================================================
   MOBILE SURAH DETAIL — hide old desktop info + remove top space
   Alleen telefoon
===================================================== */

@media (max-width: 600px) {

  /* ✅ Verberg back knop + alle ruimte ervan */
  body .has-floating-back > a,
  body .has-floating-back .floating-back-btn,
  body .has-floating-back .back-link,
  body .has-floating-back .page-back-link,
  body .has-floating-back .back-btn {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* ✅ Container helemaal naar boven */
  body .has-floating-back {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

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

  body .has-floating-back #surahDetail > .detail-card {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* ✅ Nieuwe mobile card helemaal boven */
  body .has-floating-back .mobile-surah-summary {
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }

  /* ✅ Oude desktop header/info verbergen op telefoon */
  body .has-floating-back #surahDetail > .detail-card > .detail-header,
  body .has-floating-back #surahDetail > .detail-card > .detail-boxes {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

































/* =====================================================
   LANGUAGE DROPDOWN — exact zelfde maat als Quran Fonts knop
   ===================================================== */

.menu-section select#languageSelect {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  width: 100% !important;
  padding: 12px 14px !important;
  padding-right: 44px !important;
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  background-color: var(--soft-card) !important;
  color: var(--text) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
  cursor: pointer !important;
  box-sizing: border-box !important;

  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236b7280%27%20stroke-width%3D%273%27%3E%3Cpath%20d%3D%27M6%209l6%206%206-6%27%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px !important;
}
/* =====================================================
   LANGUAGE DROPDOWN — EXACT zelfde hoogte als Quran Fonts
   ===================================================== */

aside#sideMenu .menu-section select#languageSelect {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 12px 44px 12px 14px !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
}



/* =====================================================
   QURAN FONTS BUTTON — zelfde stijl als Language
   ===================================================== */
.font-accordion-btn {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;

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

  padding: 0 18px !important;
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;

  background: var(--soft-card) !important;
  color: var(--text) !important;

  font-size: 0.95rem !important;
  font-weight: 500 !important;
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
  line-height: 1 !important;

  box-sizing: border-box !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.font-accordion-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  font-size: 0.95rem !important;
  font-weight: 500 !important;
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
  color: var(--text) !important;
}
.font-accordion-arrow {
  font-size: 0.9rem !important;
  color: var(--muted) !important;
  transition: transform 0.25s ease !important;
}
.font-accordion-btn.open .font-accordion-arrow {
  transform: rotate(180deg) !important;
}
/* =====================================================
   QURAN FONTS BUTTON — zelfde stijl als Language
   ===================================================== */
.font-accordion-btn {
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 18px !important;
  border-radius: 18px !important;
  border: 1px solid var(--border) !important;
  background: var(--soft-card) !important;
  color: var(--text) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.font-accordion-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
  color: var(--text) !important;
}

.font-accordion-arrow {
  font-size: 0.9rem !important;
  color: var(--muted) !important;
  transition: transform 0.25s ease !important;
}

.font-accordion-btn.open .font-accordion-arrow {
  transform: rotate(180deg) !important;
}





/* =====================================================
   QURAN FONTS BUTTON — iets kleiner zodat hij matcht
   ===================================================== */
.font-accordion-btn {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  font-size: 0.95rem !important;
  border-radius: 18px !important;
  line-height: 1 !important;
}
.font-accordion-btn {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
}



#quranFontToggle .font-accordion-arrow {
  font-size: 0 !important;
  width: 12px !important;
  height: 12px !important;
  position: relative !important;
}

#quranFontToggle .font-accordion-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 2.5px solid #6b7280;
  border-bottom: 2.5px solid #6b7280;
  transform: translate(-50%, -60%) rotate(45deg);
}

#quranFontToggle.open .font-accordion-arrow::before {
  transform: translate(-50%, -35%) rotate(-135deg);
}























/* =====================================================
   READ QURAN PC — extra kleine compacte cards
   Alleen desktop / PC
===================================================== */

@media (min-width: 901px) {

  body.read-list-mode #readerContent > .read-list-section {
    max-width: 1080px !important;
    width: 100% !important;
    margin: 30px auto 40px auto !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
  }

  body.read-list-mode #readSurahGrid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 16px !important;

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

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

    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card {
    min-height: 110px !important;
padding: 12px 15px !important;

    padding: 11px 14px !important;
    gap: 10px !important;

    border-radius: 14px !important;

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

    box-sizing: border-box !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card .number {
    min-width: 34px !important;
    width: 34px !important;
    height: 34px !important;

    font-size: 0.78rem !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card .info {
    flex: 1 !important;
    min-width: 0 !important;
    padding-left: 2px !important;
    text-align: left !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card .info h3 {
    font-size: 1rem !important;
    margin: 0 0 3px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card .info p {
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card .arabic {
    min-width: 100px !important;
    text-align: right !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card .arabic h3 {
    font-size: 1.3rem !important;
    margin: 0 0 3px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card .arabic p {
    font-size: 0.74rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card .fav-btn,
  body.read-list-mode #readSurahGrid .read-surah-card .favorite-btn {
    position: absolute !important;

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

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

    padding: 0 !important;

    border-radius: 8px !important;
    font-size: 0.72rem !important;

    background: rgba(255, 255, 255, 0.95) !important;
    border: none !important;
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.07) !important;

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

    box-sizing: border-box !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card.center-last {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    max-width: 520px !important;
    width: 100% !important;
  }
}


/* =====================================================
   READ QURAN PC — card size goed, tekst groter
   Alleen desktop / PC
===================================================== */

@media (min-width: 901px) {

  /* Card size houden zoals jij wilt */
  body.read-list-mode #readSurahGrid .read-surah-card {
    min-height: 110px !important;
    padding: 12px 15px !important;
  }

  /* Engelse surah naam groter */
  body.read-list-mode #readSurahGrid .read-surah-card .info h3 {
    font-size: 1.22rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    margin-bottom: 5px !important;
  }

  /* Vertaling groter */
  body.read-list-mode #readSurahGrid .read-surah-card .info p {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
  }

  /* Arabische surah naam groter */
  body.read-list-mode #readSurahGrid .read-surah-card .arabic h3 {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin-bottom: 5px !important;
  }

  /* Ayahs tekst groter */
  body.read-list-mode #readSurahGrid .read-surah-card .arabic p {
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
  }

  /* Nummer ruitje iets beter passend */
  body.read-list-mode #readSurahGrid .read-surah-card .number {
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
  }

  /* Arabische kolom iets breder zodat tekst mooi staat */
  body.read-list-mode #readSurahGrid .read-surah-card .arabic {
    min-width: 135px !important;
  }

  /* Info spacing iets beter */
  body.read-list-mode #readSurahGrid .read-surah-card .info {
    padding-left: 8px !important;
  }
}











/* =====================================================
   HOMEPAGE PC — Surah cards zoals Read Quran, maar 3 per rij
   Alleen desktop / PC
===================================================== */

@media (min-width: 901px) {

  /* Homepage main breedte */
 body:not(.read-list-mode) main {
  max-width: 1360px !important;
 width: calc(100% - 80px) !important;
  margin: 0 auto !important;
  padding: 34px 0 44px !important;
  box-sizing: border-box !important;
}

  /* Homepage grid: 3 per rij */
  body:not(.read-list-mode) #surahGrid.grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;

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

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

  padding: 0 !important;
  box-sizing: border-box !important;
}

  /* Card size zoals Read Quran */
  body:not(.read-list-mode) #surahGrid.grid .card {
    min-height: 110px !important;
    height: auto !important;

    padding: 12px 15px !important;
    gap: 12px !important;

    border-radius: 18px !important;

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

    box-sizing: border-box !important;
  }

  /* Nummer ruitje */
  body:not(.read-list-mode) #surahGrid.grid .card .number {
    min-width: 40px !important;
    width: 40px !important;
    height: 40px !important;

    font-size: 0.9rem !important;
    font-weight: 800 !important;
  }

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

  /* Engelse surah naam */
  body:not(.read-list-mode) #surahGrid.grid .card .info h3 {
    font-size: 1.22rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    margin: 0 0 5px !important;
  }

  /* Engelse vertaling */
  body:not(.read-list-mode) #surahGrid.grid .card .info p {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    margin: 0 !important;
  }

  /* Arabische kant */
  body:not(.read-list-mode) #surahGrid.grid .card .arabic {
    min-width: 135px !important;
    text-align: right !important;
  }

  /* Arabische surah naam */
  body:not(.read-list-mode) #surahGrid.grid .card .arabic h3 {
    font-size: 1.75rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin: 0 0 5px !important;
  }

  /* Ayahs tekst */
  body:not(.read-list-mode) #surahGrid.grid .card .arabic p {
    font-size: 0.9rem !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    margin: 0 !important;
  }

  /* Hartje zoals Read Quran */
  body:not(.read-list-mode) #surahGrid.grid .card .favorite-btn {
    position: absolute !important;

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

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

    padding: 0 !important;

    border-radius: 10px !important;
    font-size: 0.85rem !important;

    background: rgba(255, 255, 255, 0.95) !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08) !important;

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

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









/* =====================================================
   QARI PAGE + AUDIO PLAYER — gecentreerd
   ===================================================== */

.detail-page:has(.qari-page),
.detail-page:has(.audio-player-card) {
  max-width: 1200px !important;
  width: calc(100% - 48px) !important;
  margin: 40px auto !important;
  padding: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

.detail-page:has(.qari-page) .detail-card,
.detail-page:has(.audio-player-card) .detail-card {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.detail-page:has(.qari-page),
.detail-page:has(.audio-player-card) {
  margin-top: 20px !important;
  padding-top: 0 !important;
}

.detail-page:has(.qari-page) .page-top-bar,
.detail-page:has(.audio-player-card) .page-top-bar {
  padding-top: 0 !important;
}















body:not(.read-list-mode) .reader-page {
  max-width: 1200px !important;
  width: calc(100% - 48px) !important;
  margin: 20px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}

body:not(.read-list-mode) .reader-top-links {
  width: 100% !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body:not(.read-list-mode) #readerContent {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}









.search-wrapper {
  position: relative !important;
  z-index: 10000 !important;
}

.hero-card {
  overflow: visible !important;
}

.hero {
  overflow: visible !important;
}










/* =====================================================
   READ QURAN CONTINUE — highlight page/ayah block
   Werkt op PC en telefoon
===================================================== */

.reader-single-page.highlight-ayah {
  background: linear-gradient(135deg, #fff8dc 0%, #ffe6a3 100%) !important;
  border: 2px solid #ffc107 !important;
  box-shadow: 0 0 25px rgba(255, 193, 7, 0.55) !important;
  animation: readHighlightGlow 3s ease-out !important;
}

@keyframes readHighlightGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 193, 7, 0);
  }

  20% {
    transform: scale(1.015);
    box-shadow: 0 0 30px rgba(255, 193, 7, 0.75);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 25px rgba(255, 193, 7, 0.4);
  }
}








/* =====================================================
   ABOUT PAGE — Title card + info panel
   PC + telefoon
===================================================== */

.about-title-card {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 18px 20px;

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

  box-sizing: border-box;
  margin-bottom: 16px;
}

.about-title-left {
  min-width: 0;
  text-align: left;
}

.about-title-right {
  min-width: 0;
  text-align: right;
}

.about-title-card .about-title {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--primary);
  letter-spacing: -0.04em;
}

.about-title-card .about-pashto-heading {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.25;
  direction: rtl;
  text-align: right;
  color: var(--text);
  font-family: 'Vazirmatn', sans-serif;
}

.about-info-btn {
  width: 58px;
  height: 58px;
  min-width: 58px;

  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--soft-card);
  color: var(--text);

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

  font-size: 0.95rem;
  font-weight: 900;
  font-family: 'Sora', 'Inter', Arial, sans-serif;

  padding: 0;
  margin: 0;
  cursor: pointer;
  box-shadow: none;
  transition: 0.2s ease;
}

.about-info-btn:hover {
  transform: translateY(-1px);
}

.about-info-btn.open {
  background: var(--primary);
  color: var(--card);
  border-color: var(--primary);
}

.about-info-panel {
  display: none;

  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);

  padding: 18px 20px;
  margin: 0 0 18px;

  box-sizing: border-box;
}

.about-info-panel.open {
  display: block;
}

.about-info-panel h3 {
  margin: 0 0 14px;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.03em;
  font-family: 'Sora', 'Inter', Arial, sans-serif;
}

.about-info-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.about-info-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  text-decoration: none;
  color: var(--primary-soft);
  background: var(--soft-card);

  border: 1px solid var(--border);
  border-radius: 16px;

  padding: 12px 16px;

  font-size: 0.95rem;
  font-weight: 800;
  font-family: 'Sora', 'Inter', Arial, sans-serif;
}

.about-info-links a:hover {
  color: var(--primary);
}

.about-info-links i {
  font-size: 1rem;
}

.about-info-links .youtube-icon {
  color: #ff0000;
}

.about-info-links .tiktok-icon {
  color: #000000;
}

.about-info-links .email-icon {
  color: #2563eb;
}

/* Dark theme */
body.theme-dark .about-info-links .tiktok-icon {
  color: #f8fafc;
}

/* =====================================================
   ABOUT PAGE — Mobile title card
===================================================== */

@media (max-width: 600px) {
  .about-title-card {
    border-radius: 18px;
    padding: 12px 12px;

    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    gap: 8px;

    margin-bottom: 14px;
  }

  .about-title-card .about-title {
    font-size: 1.05rem !important;
    line-height: 1.08 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

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

  .about-info-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;

    font-size: 0.72rem;
    border-radius: 50%;
  }

  .about-info-panel {
    border-radius: 18px;
    padding: 14px 12px;
    margin-bottom: 14px;
  }

  .about-info-panel h3 {
    font-size: 1.05rem;
    margin-bottom: 10px;
  }

  .about-info-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .about-info-links a {
    width: 100%;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 0.85rem;
    box-sizing: border-box;
  }

  .about-text-row {
    margin-top: 12px !important;
  }
}









/* =====================================================
   ABOUT WEBSITE — PC breedte zoals Read Quran
   Alleen desktop
===================================================== */

@media (min-width: 901px) {
  .about-page .detail-page {
    max-width: 1200px !important;
    width: calc(100% - 48px) !important;
    margin: 40px auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  .about-page .detail-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 34px !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
  }

  .about-page .about-back-link {
    margin-left: 0 !important;
    margin-bottom: 24px !important;
  }

  .about-page .about-title-card,
  .about-page .about-info-panel,
  .about-page .video-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .about-page .about-video {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 520px !important;
    object-fit: cover !important;
  }

  .about-page .about-footer-text {
    max-width: 1200px !important;
    margin: 24px auto 0 !important;
    text-align: center !important;
  }
}

/* =====================================================
   ABOUT WEBSITE PC — minder ruimte boven back knop
   Zelfde gevoel als Read Quran pagina
===================================================== */

@media (min-width: 901px) {
  .about-page .detail-page {
   margin-top: 18px !important;
    padding-top: 0 !important;
  }

  .about-page .about-back-link {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

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












/* =====================================================
   ABOUT PAGE — Back knop altijd links houden
   Ook bij Pashto/Dari/Arabic/Urdu
===================================================== */

.about-page main.detail-page {
  direction: ltr !important;
}

.about-page #aboutBackLink {
  display: inline-flex !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  direction: ltr !important;
  text-align: left !important;
  font-family: 'Vazirmatn', sans-serif !important;
}








/* =====================================================
   SURAH DETAIL PC — breedte + ruimte fix
   Target direct #surahDetail
   Alleen desktop / PC
===================================================== */

@media (min-width: 901px) {

  /* De main/container waar surahDetail in zit */
  body:has(#surahDetail) main,
  body:has(#surahDetail) .detail-page,
  body:has(#surahDetail) .has-floating-back {
    max-width: 1200px !important;
    width: calc(100% - 48px) !important;
    margin: 28px auto 40px auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Back knop minder ruimte boven */
  body:has(#surahDetail) .floating-back-btn,
  body:has(#surahDetail) .back-link,
  body:has(#surahDetail) .back-btn,
  body:has(#surahDetail) .page-back-link {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

  /* Surah detail zelf */
  body:has(#surahDetail) #surahDetail {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Grote detail card */
  body:has(#surahDetail) #surahDetail > .detail-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 34px !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
  }

  /* Ayah lijst/card niet te breed */
  body:has(#surahDetail) .ayah-list {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body:has(#surahDetail) .ayah-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  /* Video/youtube section */
  body:has(#surahDetail) .media-section,
  body:has(#surahDetail) .video-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}



/* =====================================================
   SURAH DETAIL PC — back knop ruimte boven kleiner
   Zelfde gevoel als About Website
===================================================== */

@media (min-width: 901px) {

  body:has(#surahDetail) .has-floating-back,
  body:has(#surahDetail) main.has-floating-back,
  body:has(#surahDetail) .detail-page {
    margin-top: 20px !important;
    padding-top: 0 !important;
  }

  body:has(#surahDetail) .floating-back-btn,
  body:has(#surahDetail) > .back-link,
  body:has(#surahDetail) .back-link,
  body:has(#surahDetail) .back-btn,
  body:has(#surahDetail) .page-back-link {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }

  body:has(#surahDetail) #surahDetail {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}




#aboutBackLink {
  direction: ltr !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.about-back-link {
  direction: ltr !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-direction: row !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;
  }
}










/* =====================================================
   FAVORITE AYAHS PC — Back knop ruimte boven kleiner
   Alleen computer / desktop
===================================================== */

@media (min-width: 901px) {

  body:has(#favoriteAyahsContainer) .detail-page.favorite-ayahs-page {
    max-width: 1200px !important;
    width: calc(100% - 48px) !important;
    margin: 18px auto 40px auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body:has(#favoriteAyahsContainer) .favorite-ayahs-page .back-btn,
  body:has(#favoriteAyahsContainer) .favorite-ayahs-page .back-link,
  body:has(#favoriteAyahsContainer) .favorite-ayahs-page .page-back-link {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }

  body:has(#favoriteAyahsContainer) .favorite-ayahs-card {
    margin-top: 0 !important;
  }
}



#readSurahGrid:has(.read-surah-card:only-child) {
  grid-template-columns: 1fr !important;
}


/* ✅ Surah cards altijd LTR — taal verandert de layout niet */
.card,
.read-surah-card {
  direction: ltr !important;
}

.back-link,
.hero-back-link,
.back-btn,
.floating-back-btn {
  direction: ltr !important;
  text-align: left !important;
  display: inline-flex !important;
  align-items: center !important;
}


.back-link,
.hero-back-link {
  unicode-bidi: plaintext !important;
}


body[dir="rtl"] #languageSelect {
  font-family: 'Vazirmatn', sans-serif !important;
}

body[dir="ltr"] #languageSelect {
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
}



body[dir="rtl"] .has-floating-back .detail-box p,
body[dir="rtl"] .has-floating-back .mobile-info-box p {
  text-align: right !important;
}




body[dir="rtl"] .has-floating-back,
body[dir="rtl"] .detail-page,
body[dir="rtl"] .reader-page {
  direction: ltr !important;
}

body[dir="rtl"] .has-floating-back #surahDetail,
body[dir="rtl"] .has-floating-back .detail-card,
body[dir="rtl"] .detail-page .detail-card,
body[dir="rtl"] .reader-page #readerContent {
  direction: rtl !important;
}




body[dir="rtl"] .search {
  text-align: right !important;
  direction: rtl !important;
}



body[dir="rtl"] .detail-page.audio-page .buttons {
  flex-direction: row-reverse !important;
}












/* Audio player altijd LTR — ongeacht taal */
body[dir="rtl"] .audio-player-card,
body[dir="rtl"] .audio-player-header,
body[dir="rtl"] .audio-progress-wrapper,
body[dir="rtl"] .audio-main-controls,
body[dir="rtl"] #progressBar,
body[dir="rtl"] #currentTime,
body[dir="rtl"] #duration,
body[dir="rtl"] .skip-btn,
body[dir="rtl"] .play-btn {
  direction: ltr !important;
}

/* Surah naam links, Arabische naam rechts — altijd */
body[dir="rtl"] .audio-player-header h2:first-child {
  text-align: right !important;
  direction: rtl !important;
}

body[dir="rtl"] .audio-player-header h2:last-child {
  text-align: left !important;
  direction: ltr !important;
}







.audio-player-header h2:first-child {
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
}


body[dir="rtl"] .qari-action-btn {
  direction: ltr !important;
  unicode-bidi: embed !important;
}








.search-wrapper {
  position: relative !important;
}


















/* =====================================================
   SEARCH HISTORY — CLEAN APP STYLE
===================================================== */

.hero,
.hero-card,
.search-wrapper {
  overflow: visible !important;
}

.hero {
  position: relative;
  z-index: 50;
}

.hero-card {
  position: relative;
  z-index: 60;
}

.search-wrapper {
  position: relative;
  z-index: 99999;
}

.search-history-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 999999 !important;
}

.search-history-dropdown.open {
  display: block;
}

.search-history-card {
  width: min(100%, 460px);
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  padding: 6px;
}

.search-history-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 14px;
}

.search-history-row:not(:last-child) {
  margin-bottom: 3px;
}

.search-history-row:hover {
  background: rgba(37, 99, 235, 0.08);
}

body.theme-dark .search-history-row:hover {
  background: rgba(96, 165, 250, 0.14);
}

body.theme-sepia .search-history-row:hover {
  background: rgba(120, 53, 15, 0.08);
}

.search-history-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;

  border: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;

  padding: 10px 10px;
  text-align: left;
  color: var(--text);
  font-family: inherit;
}

.search-history-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: var(--soft-card);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
}

.search-history-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-history-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;

  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-history-number {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--card);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
  font-weight: 900;
}

.search-history-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;

  font-size: 0.74rem;
  color: var(--muted);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-history-arabic {
  font-family: 'Hafs', 'Amiri', serif;
  font-size: 0.92rem;
  color: var(--primary);
  font-weight: 600;
}

.search-history-remove {
  width: 30px;
  height: 30px;
  min-width: 30px;

  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;

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

.search-history-remove:hover {
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
}





body[dir="rtl"] .search-history-main {
  text-align: right;
  justify-content: flex-end;
}

body[dir="rtl"] .search-history-title,
body[dir="rtl"] .search-history-sub {
  flex-direction: row-reverse;
}





main {
  position: relative;
  z-index: 1;
}

@media (max-width: 600px) {
  .search-history-dropdown {
    left: 0;
    transform: none;
    width: 100%;
    top: calc(100% + 8px);
  }

  .search-history-card {
    width: 100%;
    border-radius: 14px;
    padding: 5px;
  }

  .search-history-main {
    padding: 9px 8px;
    gap: 8px;
  }

  .search-history-icon {
    width: 27px;
    height: 27px;
    min-width: 27px;
    font-size: 0.68rem;
  }

  .search-history-title {
    font-size: 0.83rem;
  }

  .search-history-sub {
    font-size: 0.68rem;
    gap: 5px;
  }

  .search-history-number {
    min-width: 20px;
    height: 20px;
    font-size: 0.6rem;
  }

  .search-history-remove {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }
}



/* =====================================================
   SEARCH HISTORY — PC SIZE FIX (UPDATED)
   Breder, dunner + glas/spiegel effect
===================================================== */

@media (min-width: 701px) {

/* zoekbalk-wrapper op volle breedte, zodat de lijst onder de hele zoekbalk hangt */
  .search-wrapper {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .search-history-dropdown {
    top: calc(100% + 12px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;

    /* veiligheid: geen extra witte box om de card heen */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

 .search-history-card {
    width: 1100px;
    max-width: 94%;
    margin: 0 auto;
    padding: 5px;
    border-radius: 18px;

    /* nette witte card */
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
  }

  /* elke rij vult de hele card */
  .search-history-row {
    width: 100%;
    border-radius: 12px;
  }

  .search-history-main {
    flex: 1;
    width: 100%;
    padding: 0px 18px;
    gap: 14px;
  }

  .search-history-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 0.85rem;
  }

  .search-history-content {
    flex: 1;
    min-width: 0;
  }

  /* surah-tekst */
  .search-history-title {
    font-size: 1.1rem;
    font-weight: 800;
    gap: 10px;
  }

  .search-history-number {
    min-width: 28px;
    height: 28px;
    padding: 0 9px;
    font-size: 0.78rem;
  }

  .search-history-sub {
    font-size: 0.92rem;
    gap: 10px;
  }

  .search-history-arabic {
    font-size: 1.2rem;
  }

  .search-history-remove {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 1.05rem;
  }
}




/* =====================================================
   HOMEPAGE — zoekresultaten netjes in grid
   1 resultaat = volle breedte (niet smal links)
===================================================== */

body:not(.read-list-mode) #surahGrid.grid:has(.card:only-child) {
  grid-template-columns: 1fr !important;
}
/* =====================================================
   HOMEPAGE — zoekresultaten max 2 per rij
   2 t/m 6 kaarten = 2 per rij (i.p.v. 3)
===================================================== */

/* 2 kaarten = 2 per rij */
body:not(.read-list-mode) #surahGrid.grid:has(.card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* 3 of 4 kaarten = ook 2 per rij */
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: repeat(2, 1fr) !important;
}


/* =====================================================
   "No surah found" — volle breedte (homepage + read)
===================================================== */

body:not(.read-list-mode) #surahGrid.grid:has(.no-result),
body.read-list-mode #readSurahGrid.grid:has(.no-result) {
  grid-template-columns: 1fr !important;
}

.no-result {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* =====================================================
   "No surah found" — compacte kaart, gecentreerd
   Alle pagina's, alle talen
===================================================== */

.no-result {
  grid-column: 1 / -1 !important;
  max-width: 850px !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  text-align: center !important;
}


/* =====================================================
   AUDIO QURAN — "All Surahs" titel rechts bij RTL
===================================================== */

body[dir="rtl"] #audioListTitle {
  text-align: right !important;
}







/* =====================================================
   ZOEKBALK — Sora voor Engels, Vazirmatn voor Arabisch
   Alle pagina's, alle talen, ook telefoon
===================================================== */

body .search,
body #searchInput,
body #readSearchInput,
body #audioSearchInput,
body[dir="rtl"] .search,
body[dir="ltr"] .search,
body .search::placeholder,
body[dir="rtl"] .search::placeholder,
body[dir="ltr"] .search::placeholder {
  font-family: 'Sora', 'Vazirmatn', 'Inter', Arial, sans-serif !important;
}





/* =====================================================
   Taal-dropdown — pijltje links bij RTL (zoals Quran Fonts)
===================================================== */

body[dir="rtl"] #languageSelect {
  direction: rtl !important;
  text-align: right !important;
  background-position: left 14px center !important;
  padding-left: 36px !important;
  padding-right: 14px !important;
}






/* =====================================================
   Video — picture-in-picture knopje weghalen (Chrome)
===================================================== */

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



/* =====================================================
   Surah-pagina — Engelse surah-naam altijd Sora
   Ook bij RTL-talen
===================================================== */

body .detail-header h1,
body .mobile-surah-title,
body[dir="rtl"] .detail-header h1,
body[dir="rtl"] .mobile-surah-title {
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
}
/* =====================================================
   Surah-pagina — Engelse tekst altijd Sora
   Naam, vertaling, ayah-nummer, ook bij RTL
===================================================== */

body .detail-header h1,
body .detail-header p,
body .detail-header .detail-main-info,
body .mobile-surah-title,
body[dir="rtl"] .detail-header h1,
body[dir="rtl"] .detail-header p,
body[dir="rtl"] .detail-header .detail-main-info,
body[dir="rtl"] .mobile-surah-title {
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
}


/* =====================================================
   Vertaling-kopjes — NEGEER de eng-font keuze
   Altijd Sora (Engels) of Vazirmatn (RTL)
===================================================== */

body[class*="eng-font"][dir="ltr"] .translation-block h3,
body[class*="eng-font"][dir="ltr"] .ayah-card .translation-block h3 {
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
}

body[class*="eng-font"][dir="rtl"] .translation-block h3,
body[class*="eng-font"][dir="rtl"] .ayah-card .translation-block h3 {
  font-family: 'Vazirmatn', sans-serif !important;
}












/* =====================================================
   INTERFACE-FONT per taal (niet de font-keuze volgen)
   RTL-talen → Vazirmatn  |  Engels → Sora
   Quran-tekst + vertalingen worden NIET geraakt
   هارون
===================================================== */

/* =====================================================
   Read Quran labels — STERKSTE font-fix per taal
===================================================== */

html body[dir="rtl"] .reader-page-range,
html body[dir="rtl"] .reader-page-footer,
html body[dir="rtl"] .reader-page-summary,
html body[dir="rtl"] .reader-surah-meta,
html body[dir="rtl"] .reader-label {
  font-family: 'Vazirmatn', sans-serif !important;
}

html body[dir="ltr"] .reader-page-range,
html body[dir="ltr"] .reader-page-footer,
html body[dir="ltr"] .reader-page-summary,
html body[dir="ltr"] .reader-surah-meta,
html body[dir="ltr"] .reader-label {
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
}







/* =====================================================
   Info-kaarten — Engelse waardes ALTIJD Sora (sterk)
===================================================== */

html body[dir="rtl"] .detail-box p,
html body[dir="rtl"] .mobile-info-box p,
html body[dir="ltr"] .detail-box p,
html body[dir="ltr"] .mobile-info-box p {
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
}


/* =====================================================
   Media-sectie (Audio/Video) — font per taal
===================================================== */

html body[dir="rtl"] .media-section h3,
html body[dir="rtl"] .media-section .video-box p,
html body[dir="rtl"] .media-section .video-link {
  font-family: 'Vazirmatn', sans-serif !important;
}

html body[dir="ltr"] .media-section h3,
html body[dir="ltr"] .media-section .video-box p,
html body[dir="ltr"] .media-section .video-link {
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
}





/* =====================================================
   ALLES IN ÉÉN — interface per taal
   RTL → Vazirmatn  |  Engels → Sora
===================================================== */

html body[dir="rtl"] .detail-box h3,
html body[dir="rtl"] .mobile-info-box h3,
html body[dir="rtl"] .media-section h3,
html body[dir="rtl"] .media-section .video-box p,
html body[dir="rtl"] .ayah-section-title,
html body[dir="rtl"] .reader-label,
html body[dir="rtl"] .reader-page-range,
html body[dir="rtl"] .reader-page-footer,
html body[dir="rtl"] .reader-page-summary,
html body[dir="rtl"] .reader-surah-meta {
  font-family: 'Vazirmatn', sans-serif !important;
}

html body[dir="rtl"] .detail-box p,
html body[dir="rtl"] .mobile-info-box p,
html body[dir="ltr"] .detail-box p,
html body[dir="ltr"] .mobile-info-box p,
html body[dir="ltr"] .detail-box h3,
html body[dir="ltr"] .mobile-info-box h3,
html body[dir="ltr"] .media-section h3,
html body[dir="ltr"] .media-section .video-box p,
html body[dir="ltr"] .ayah-section-title,
html body[dir="ltr"] .reader-label,
html body[dir="ltr"] .reader-page-range,
html body[dir="ltr"] .reader-page-footer,
html body[dir="ltr"] .reader-page-summary,
html body[dir="ltr"] .reader-surah-meta {
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
}




.footer-bottom {
  direction: ltr !important;
  text-align: center !important;
}













/* =====================================================
   LOGIN MET GOOGLE — knop + profiel in settings-menu
===================================================== */

.google-login-btn {
  width: 100% !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 13px 16px !important;
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  background: var(--accent) !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

.google-login-btn i {
  font-size: 1.05rem !important;
}

.google-login-btn:hover {
  transform: translateY(-1px) !important;
}

.user-profile {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  background: var(--soft-card) !important;
}

.user-photo {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.user-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.user-name {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.logout-btn {
  align-self: flex-start !important;
  padding: 4px 12px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  color: var(--text) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
/* Login: tonen/verbergen via class (wint altijd) */
.auth-hidden,
.profile-popup-overlay.auth-hidden {
  display: none !important;
}
/* =====================================================
  Tot hier
===================================================== */




/* =====================================================
   PROFIEL POPUP — land + leeftijd na inloggen
===================================================== */

.profile-popup-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.55) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  z-index: 1000000 !important;
  padding: 60px 20px 20px !important;
  overflow-y: auto !important;
}

.profile-popup-card {
  background: var(--card) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3) !important;
  padding: 28px 24px !important;
  width: 100% !important;
  max-width: 420px !important;
  box-sizing: border-box !important;
}

.profile-popup-card h2 {
  margin: 0 0 8px !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
}

.profile-popup-subtitle,
.profile-popup-card p {
  margin: 0 0 20px !important;
  font-size: 1rem !important;
  color: var(--muted) !important;
}

.profile-popup-label {
  display: block !important;
  margin: 0 0 8px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}

.profile-popup-select {
  width: 100% !important;
  padding: 13px 14px !important;
  border-radius: 16px !important;
  border: 1px solid var(--border) !important;
  background: var(--soft-card) !important;
  color: var(--text) !important;
  font-size: 0.95rem !important;
  margin-bottom: 18px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.profile-popup-save {
  width: 100% !important;
  padding: 14px !important;
  border-radius: 16px !important;
  border: none !important;
  background: var(--accent) !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25) !important;
}

.profile-popup-save:hover {
  transform: translateY(-1px) !important;
}




/* =========================================
  MENU OP PC — zelfde grootte in alle talen
========================================= */

@media (max-width: 600px) {
  .side-menu.open ~ #menuToggle,
  body:has(.side-menu.open) #menuToggle {
    display: none !important;
  }
}

/* =========================================
  Tot hier
========================================= */


/* =========================================
   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
========================================= */




@media (max-width: 600px) {
  .side-menu .side-menu-header {
    margin-bottom: 6px !important;
    padding-top: 0 !important;
  }
  .side-menu .side-menu-header h3 {
    font-size: 50xp !important;
    margin: 0 !important;
  }
  .side-menu #authBox,
  .side-menu .google-login-btn {
    margin-top: 0 !important;
  }
  .side-menu .menu-section:first-of-type {
    margin-top: 6px !important;
  }
}














/* =====================================================
   FAVORITE AYAHS — witte card past nu netjes in z'n vak
   (padding telt mee in de breedte → niet meer scheef)
===================================================== */

@media (min-width: 901px) {
  body:has(#favoriteAyahsContainer) .favorite-ayahs-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}









/* =====================================================
   SURAH-PAGINA — Settings menu eigen stijl
   Blauw accent (B) + compacte thema-knoppen (C)
   Alleen surah.html (body.surah-settings-style)
===================================================== */

/* Actieve thema-knop blauw */
.surah-settings-style .theme-btn.active-theme {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
}

/* Thema-knoppen compacter (zoals C) */
.surah-settings-style .theme-buttons .theme-btn {
  padding: 8px 0 !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
}

/* Font Size: nummer in blauw */
.surah-settings-style .font-size-value {
  color: var(--accent) !important;
}

/* Font Size: − en + als nette knopjes */
.surah-settings-style .font-step-btn {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

/* Actieve font-knop ook blauw */
.surah-settings-style .font-opt.active-theme {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
}

/* =====================================================
   SURAH-PAGINA — font-knoppen: meer ruimte links/rechts binnen
   Alleen surah.html
===================================================== */

.surah-settings-style .font-accordion-panel .theme-buttons .font-opt {
  padding-left: 16px !important;
  padding-right: 16px !important;
}









/* =====================================================
   HOMEPAGE — alleen de hero-titel (#heroTitle) houdt z'n font
   Read/Audio titels NIET geraakt
===================================================== */

body[dir="rtl"] #heroTitle {
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
}












/* =====================================================
   SETTINGS MENU — scrollbalk verbergen (scrollen blijft werken)
===================================================== */

.side-menu {
  scrollbar-width: none !important;        /* Firefox */
  -ms-overflow-style: none !important;     /* oude Edge/IE */
}

.side-menu::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;                /* Chrome, Safari */
}
/* =====================================================
  tot hier
===================================================== */





.side-menu {
  scrollbar-width: none !important;        /* Firefox */
  -ms-overflow-style: none !important;     /* oude Edge/IE */
  overscroll-behavior: none !important;    /* stop bij einde, geen lege ruimte */
}








/* Homepage fallback: als QCF gekozen is, blijven surah-namen leesbaar */
body.quran-font-qcf .arabic h3,
body.quran-font-qcf .detail-arabic h2,
body.quran-font-qcf .reader-surah-arabic-name {
  font-family: 'Hafs', serif !important;
}








/* SURAH DETAIL — QCF ayah rechts, met correcte woord-volgorde */
.has-floating-back .qcf-ayah-text {
  direction: rtl !important;
  text-align: right !important;
}

.has-floating-back .qcf-ayah-inline {
  direction: rtl !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 0.18em !important;
  font-size: 2.4rem !important;
  line-height: 2.4 !important;
}

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










.has-floating-back .qcf-ayah-inline {
  direction: rtl !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;

 gap: 0 0.10em !important;

  font-size: 2.35rem !important;
  line-height: 2.45 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

.has-floating-back .qcf-ayah-inline span {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  -webkit-text-stroke: 0 !important;
  font-weight: 400 !important;
}








/* QCF BISMILLAH  */

.qcf-clean-bismillah {
  font-family: 'QCF4_Hafs_01' !important;
  font-size: 2.7rem !important;
  line-height: 2 !important;
  text-align: center !important;
  direction: rtl !important;
  margin-bottom: 18px !important;
}

@font-face {
  font-family: 'QCF4_Hafs_01';
  src: url('./fonts/QCF4_Hafs_01_W.woff2') format('woff2');
  font-display: swap;
}

/* Tot hier */








/* Bij de read quran tijdens de surah openen komt eerst mooi desigen   */
.qcf-skeleton {
  display: grid;
  gap: 18px;
  padding: 32px 12px;
}

.qcf-skeleton span {
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef2f7, #f8fafc, #eef2f7);
  animation: qcfSkeletonPulse 1.2s ease-in-out infinite;
}

.qcf-skeleton span:nth-child(1) {
  width: 62%;
  margin: 0 auto;
}

.qcf-skeleton span:nth-child(2) {
  width: 82%;
  margin: 0 auto;
}

.qcf-skeleton span:nth-child(3) {
  width: 72%;
  margin: 0 auto;
}

@keyframes qcfSkeletonPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
/* tot hier   */









/* =====================================================
   Knopje bewegen tijdens klikken
===================================================== */

button,
.back-link,
.back-btn,
.page-back-link,
.card,
.read-surah-card,
.hero-chip-btn,
.theme-btn,
.font-step-btn,
.font-accordion-btn,
.menu-link {
  transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.12s ease !important;
  -webkit-tap-highlight-color: transparent;
}

button:active,
.back-link:active,
.back-btn:active,
.page-back-link:active,
.card:active,
.read-surah-card:active,
.hero-chip-btn:active,
.theme-btn:active,
.font-step-btn:active,
.font-accordion-btn:active,
.menu-link:active {
  transform: scale(0.985) !important;
  opacity: 0.92 !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) !important;
}
/* =====================================================
   tot hier
===================================================== */



/* =====================================================
   skeleton op homepage
===================================================== */
.qcf-skeleton-one {
  display: block !important;
  padding: 18px 0 !important;
}

.qcf-skeleton-one span {
  display: block !important;
  width: 78% !important;
  height: 20px !important;
  margin: 0 auto !important;
  border-radius: 999px !important;
}
/* =====================================================
   tot hier
===================================================== */







/* =====================================================
   VANAF HIER 
===================================================== */

/* =====================================================
   SURAH DETAIL PC — ayah card rand + hoeken duidelijker
===================================================== */

@media (min-width: 901px) {
  body:has(#surahDetail) .ayah-card {
    background: var(--soft-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 22px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
    padding: 28px !important;
    overflow: hidden !important;
  }

  body:has(#surahDetail) .translation-block {
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
  }
}

/* =====================================================
   SURAH DETAIL PC — active ayah blauwe rand terug
===================================================== */

@media (min-width: 901px) {
  body:has(#surahDetail) .ayah-card.active {
    border: 2px solid var(--accent) !important;
    background: rgba(37, 99, 235, 0.08) !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12) !important;
  }
}

/* =====================================================
   SURAH DETAIL PC — info cards rand + hoeken
===================================================== */

@media (min-width: 901px) {
  body:has(#surahDetail) .detail-box {
    background: var(--soft-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05) !important;
    box-sizing: border-box !important;
  }
}

/* =====================================================
   SURAH DETAIL PC — audio/video card rand + hoeken
===================================================== */

@media (min-width: 901px) {
  body:has(#surahDetail) .media-section .video-box {
    background: var(--soft-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05) !important;
    box-sizing: border-box !important;
  }
}

/* =====================================================
   Tot hier  
===================================================== */







/* =====================================================
   FAVORITE AYAHS — QCF layout mooier
===================================================== */

.favorite-ayah-card .qcf-ayah-inline {
  direction: rtl !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 0.12em !important;
  font-size: 2.25rem !important;
  line-height: 2.3 !important;
}

.favorite-ayah-card .qcf-ayah-inline span {
  margin: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  -webkit-text-stroke: 0 !important;
  font-weight: 400 !important;
}




/* =====================================================
   FAVORITE AYAHS — cards zoals homepage
===================================================== */

.favorite-ayah-card {
  background: var(--card) !important;
  border: 1.5px solid rgba(15, 23, 42, 0.05) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

.favorite-ayah-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--surah-hover) !important;
  box-shadow: 0 14px 30px rgba(24, 160, 166, 0.12) !important;
}



/* =====================================================
   SURAH DETAIL — continue/favorite ayah gele highlight terug
===================================================== */

body:has(#surahDetail) .ayah-card.highlight-ayah,
body:has(#surahDetail) .reader-single-page.highlight-ayah {
  background: linear-gradient(135deg, #fff8dc 0%, #ffe6a3 100%) !important;
  border: 2px solid #ffc107 !important;
  box-shadow: 0 0 25px rgba(255, 193, 7, 0.6) !important;
  animation: highlightGlow 3s ease-out !important;
}



/* =====================================================
   ABOUT WEBSITE — video cards zoals Favorite Ayahs
===================================================== */

.about-page .video-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
  padding: 18px !important;
  margin-bottom: 22px !important;
}

.about-page .about-video {
  width: 100% !important;
  border-radius: 16px !important;
  display: block !important;
}



/* =====================================================
   PAGE END — Holy Quran-Pashto zoals About pagina
===================================================== */

.page-end-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 34px !important;
  border-radius: 0 !important;
  text-align: center !important;
  margin: 34px auto 0 !important;
}

.page-end-card h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  line-height: 1.2 !important;
}
/* =====================================================
   tot hier 
===================================================== */





.back-inner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  white-space: nowrap !important;
}

.back-inner i {
  flex: 0 0 auto !important;
}










/* =====================================================
   DONATIE — popup + bedrag scherm (ALLES IN 1)
===================================================== */

.donate-section {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 32px auto 0;
}

.donate-btn {
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  background: var(--primary);
  color: var(--card);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  transition: opacity 0.2s ease !important;
}

.donate-btn:hover {
  transform: none !important;
  opacity: 0.92;
}


.donate-popup-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.donate-popup-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.donate-popup-overlay.closing {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.donate-popup-card {
  transition: transform 0.35s ease, opacity 0.35s ease;
  transform: scale(0.96) translateY(10px);
  opacity: 0;
}

.donate-popup-overlay.open .donate-popup-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.donate-popup-overlay.closing .donate-popup-card {
  transform: scale(0.96) translateY(10px);
  opacity: 0;
}


.donate-popup-card {
  position: relative;
  width: min(92vw, 760px) !important;
  max-width: 760px !important;
  min-height: 360px !important;
  background: linear-gradient(135deg, #fff3c4, #fffaf0) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18) !important;
  padding: 28px 32px 22px !important;
  color: var(--text);
  box-sizing: border-box;
  text-align: center !important;
}

.donate-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 5;
  border: none;
  background: rgba(255, 255, 255, 0.7);
  color: #ef4444;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1.35rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  transition: opacity 0.2s ease !important;
}

.donate-popup-close:hover {
  transform: none !important;
  opacity: 0.85;
}

.donate-popup-card.donate-amount-open .donate-popup-close {
  display: none !important;
}

.donate-popup-card h2 {
  margin: 8px 0 12px !important;
  padding: 0 40px;
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  color: var(--primary);
  line-height: 1.15;
  text-align: center !important;
}

.donate-popup-card p {
  line-height: 1.55 !important;
  text-align: center !important;
}

.donate-progress-box {
  margin: 16px 0 12px;
}

.donate-progress-line {
  width: 100%;
  height: 10px;
  background: #eef2f7;
  border-radius: 999px;
  overflow: hidden;
}

#donateProgressFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f43f5e, #f59e0b);
  border-radius: 999px;
}

#donateProgressText {
  margin: 8px 0 0 !important;
  color: var(--muted);
  font-weight: 800;
  text-align: center !important;
}

#donateProgressText strong {
  color: #0284c7;
  font-size: 1.45rem;
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
  direction: ltr !important;
  unicode-bidi: isolate;
}

.donate-reward-text {
  margin: 14px 0 12px !important;
  color: var(--muted);
  font-size: 0.95rem;
}

.donate-main-link {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  width: 100%;
  border: none;
  border-radius: 16px;
  background: var(--primary);
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
  transition: opacity 0.2s ease !important;
}

.donate-main-link:hover {
  transform: none !important;
  opacity: 0.92;
}

.donate-lang-card {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  direction: ltr !important;
}

.donate-lang-card button {
  min-width: 46px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.78);
  color: #0f172a;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
  direction: ltr !important;
  transition: opacity 0.2s ease !important;
}

.donate-lang-card button:hover {
  transform: none !important;
  opacity: 0.85;
}

.donate-lang-card button.active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

.hidden {
  display: none !important;
}

.donate-amount-view {
  min-height: 300px;
}

.donate-amount-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-bottom: 14px;
  padding: 0 48px;
  direction: ltr !important;
  text-align: center !important;
}

.donate-back-mini {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) !important;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: #0f172a;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 2;
  transition: opacity 0.2s ease !important;
}

.donate-back-mini:hover {
  transform: translateY(-50%) !important;
  opacity: 0.85;
}

.donate-amount-top h2 {
  margin: 0 !important;
  width: 100%;
  padding: 0 6px;
  text-align: center !important;
}

.donate-amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0;
}

.donate-amount-btn {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  background: var(--primary);
  color: #ffffff;
  border-radius: 18px;
  padding: 18px 10px;
  font-size: 1.35rem;
  font-weight: 900;
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
  transition: opacity 0.2s ease !important;
}

.donate-amount-btn:hover {
  transform: none !important;
  opacity: 0.92;
}

.donate-custom-box {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 16px;
  text-align: center !important;
}

/* =====================================================
   DONATIE FONTS
   Engels + Holy Quran-Pashto = Sora
   Pashto/Dari/Arabic/Urdu tekst = Vazirmatn
===================================================== */

.donate-brand {
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
  direction: ltr !important;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Engels = Sora */
.donate-popup-card.donate-lang-en #donatePopupTitle,
.donate-popup-card.donate-lang-en #donatePopupText,
.donate-popup-card.donate-lang-en #donateRewardText,
.donate-popup-card.donate-lang-en #donateAmountTitle,
.donate-popup-card.donate-lang-en #donateAmountSubtitle,
.donate-popup-card.donate-lang-en #donatePaypalLabel,
.donate-popup-card.donate-lang-en #donateProgressText,
.donate-popup-card.donate-lang-en .donate-main-link,
.donate-section.donate-lang-en .donate-btn {
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
  direction: ltr !important;
}

/* Pashto, Dari, Arabic, Urdu = Vazirmatn */
.donate-popup-card.donate-lang-ps #donatePopupTitle,
.donate-popup-card.donate-lang-ps #donatePopupText,
.donate-popup-card.donate-lang-ps #donateRewardText,
.donate-popup-card.donate-lang-ps #donateAmountTitle,
.donate-popup-card.donate-lang-ps #donateAmountSubtitle,
.donate-popup-card.donate-lang-ps #donatePaypalLabel,
.donate-popup-card.donate-lang-ps #donateProgressText,
.donate-popup-card.donate-lang-ps .donate-main-link,
.donate-section.donate-lang-ps .donate-btn,
.donate-popup-card.donate-lang-da #donatePopupTitle,
.donate-popup-card.donate-lang-da #donatePopupText,
.donate-popup-card.donate-lang-da #donateRewardText,
.donate-popup-card.donate-lang-da #donateAmountTitle,
.donate-popup-card.donate-lang-da #donateAmountSubtitle,
.donate-popup-card.donate-lang-da #donatePaypalLabel,
.donate-popup-card.donate-lang-da #donateProgressText,
.donate-popup-card.donate-lang-da .donate-main-link,
.donate-section.donate-lang-da .donate-btn,
.donate-popup-card.donate-lang-ur #donatePopupTitle,
.donate-popup-card.donate-lang-ur #donatePopupText,
.donate-popup-card.donate-lang-ur #donateRewardText,
.donate-popup-card.donate-lang-ur #donateAmountTitle,
.donate-popup-card.donate-lang-ur #donateAmountSubtitle,
.donate-popup-card.donate-lang-ur #donatePaypalLabel,
.donate-popup-card.donate-lang-ur #donateProgressText,
.donate-popup-card.donate-lang-ur .donate-main-link,
.donate-section.donate-lang-ur .donate-btn,
.donate-popup-card.donate-lang-ar #donatePopupTitle,
.donate-popup-card.donate-lang-ar #donatePopupText,
.donate-popup-card.donate-lang-ar #donateRewardText,
.donate-popup-card.donate-lang-ar #donateAmountTitle,
.donate-popup-card.donate-lang-ar #donateAmountSubtitle,
.donate-popup-card.donate-lang-ar #donatePaypalLabel,
.donate-popup-card.donate-lang-ar #donateProgressText,
.donate-popup-card.donate-lang-ar .donate-main-link,
.donate-section.donate-lang-ar .donate-btn {
  font-family: 'Vazirmatn', sans-serif !important;
  direction: rtl !important;
}

/* Settings: Naskh */
body.trans-font-naskh .donate-popup-card.donate-lang-ps #donatePopupTitle,
body.trans-font-naskh .donate-popup-card.donate-lang-ps #donatePopupText,
body.trans-font-naskh .donate-popup-card.donate-lang-ps #donateRewardText,
body.trans-font-naskh .donate-popup-card.donate-lang-ps #donateAmountTitle,
body.trans-font-naskh .donate-popup-card.donate-lang-ps #donateAmountSubtitle,
body.trans-font-naskh .donate-popup-card.donate-lang-ps #donatePaypalLabel,
body.trans-font-naskh .donate-popup-card.donate-lang-ps .donate-main-link,
body.trans-font-naskh .donate-section.donate-lang-ps .donate-btn,
body.trans-font-naskh .donate-popup-card.donate-lang-da #donatePopupTitle,
body.trans-font-naskh .donate-popup-card.donate-lang-da #donatePopupText,
body.trans-font-naskh .donate-popup-card.donate-lang-da #donateRewardText,
body.trans-font-naskh .donate-popup-card.donate-lang-da #donateAmountTitle,
body.trans-font-naskh .donate-popup-card.donate-lang-da #donateAmountSubtitle,
body.trans-font-naskh .donate-popup-card.donate-lang-da #donatePaypalLabel,
body.trans-font-naskh .donate-popup-card.donate-lang-da .donate-main-link,
body.trans-font-naskh .donate-section.donate-lang-da .donate-btn,
body.trans-font-naskh .donate-popup-card.donate-lang-ur #donatePopupTitle,
body.trans-font-naskh .donate-popup-card.donate-lang-ur #donatePopupText,
body.trans-font-naskh .donate-popup-card.donate-lang-ur #donateRewardText,
body.trans-font-naskh .donate-popup-card.donate-lang-ur #donateAmountTitle,
body.trans-font-naskh .donate-popup-card.donate-lang-ur #donateAmountSubtitle,
body.trans-font-naskh .donate-popup-card.donate-lang-ur #donatePaypalLabel,
body.trans-font-naskh .donate-popup-card.donate-lang-ur .donate-main-link,
body.trans-font-naskh .donate-section.donate-lang-ur .donate-btn,
body.trans-font-naskh .donate-popup-card.donate-lang-ar #donatePopupTitle,
body.trans-font-naskh .donate-popup-card.donate-lang-ar #donatePopupText,
body.trans-font-naskh .donate-popup-card.donate-lang-ar #donateRewardText,
body.trans-font-naskh .donate-popup-card.donate-lang-ar #donateAmountTitle,
body.trans-font-naskh .donate-popup-card.donate-lang-ar #donateAmountSubtitle,
body.trans-font-naskh .donate-popup-card.donate-lang-ar #donatePaypalLabel,
body.trans-font-naskh .donate-popup-card.donate-lang-ar .donate-main-link,
body.trans-font-naskh .donate-section.donate-lang-ar .donate-btn {
  font-family: 'Naskh', serif !important;
}

/* Settings: Helicoptina */
body.trans-font-helicoptina .donate-popup-card.donate-lang-ps #donatePopupTitle,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ps #donatePopupText,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ps #donateRewardText,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ps #donateAmountTitle,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ps #donateAmountSubtitle,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ps #donatePaypalLabel,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ps .donate-main-link,
body.trans-font-helicoptina .donate-section.donate-lang-ps .donate-btn,
body.trans-font-helicoptina .donate-popup-card.donate-lang-da #donatePopupTitle,
body.trans-font-helicoptina .donate-popup-card.donate-lang-da #donatePopupText,
body.trans-font-helicoptina .donate-popup-card.donate-lang-da #donateRewardText,
body.trans-font-helicoptina .donate-popup-card.donate-lang-da #donateAmountTitle,
body.trans-font-helicoptina .donate-popup-card.donate-lang-da #donateAmountSubtitle,
body.trans-font-helicoptina .donate-popup-card.donate-lang-da #donatePaypalLabel,
body.trans-font-helicoptina .donate-popup-card.donate-lang-da .donate-main-link,
body.trans-font-helicoptina .donate-section.donate-lang-da .donate-btn,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ur #donatePopupTitle,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ur #donatePopupText,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ur #donateRewardText,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ur #donateAmountTitle,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ur #donateAmountSubtitle,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ur #donatePaypalLabel,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ur .donate-main-link,
body.trans-font-helicoptina .donate-section.donate-lang-ur .donate-btn,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ar #donatePopupTitle,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ar #donatePopupText,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ar #donateRewardText,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ar #donateAmountTitle,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ar #donateAmountSubtitle,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ar #donatePaypalLabel,
body.trans-font-helicoptina .donate-popup-card.donate-lang-ar .donate-main-link,
body.trans-font-helicoptina .donate-section.donate-lang-ar .donate-btn {
  font-family: 'Helicoptina45', sans-serif !important;
}

/* Scroll lock achtergrond */
html {
  scrollbar-gutter: stable;
}

body.body-lock {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  top: var(--menu-scroll-top, 0) !important;
  left: 0 !important;
  right: 0 !important;
}


@media (max-width: 600px) {
  .donate-popup-card {
    width: calc(100vw - 28px) !important;
    min-height: 360px !important;
    padding: 22px 18px 16px !important;
    border-radius: 24px !important;
  }

  .donate-popup-card h2 {
    font-size: 1.25rem !important;
  }

  .donate-popup-card p {
    font-size: 0.88rem !important;
  }

  .donate-main-link {
    min-height: 48px;
    font-size: 1rem;
  }

  .donate-amount-grid {
    gap: 10px;
  }

  .donate-amount-btn {
    min-height: 54px;
    font-size: 1.15rem;
  }

  .donate-lang-card button {
    min-width: 38px;
    height: 28px;
    font-size: 0.65rem;
  }
}






/* =====================================================
   ZOEKGESCHIEDENIS — zelfde als Audio (Pashto/Dari/Urdu/Arabic)
===================================================== */
body[dir="rtl"] .search-wrapper .search-history-dropdown,
body[dir="rtl"] .search-wrapper .search-history-card,
body[dir="rtl"] .search-wrapper .search-history-row,
body[dir="rtl"] .search-wrapper .search-history-main {
  direction: ltr !important;
}

body[dir="rtl"] .search-wrapper .search-history-main {
  justify-content: flex-end !important;
}

body[dir="rtl"] .search-wrapper .search-history-content {
  flex: 0 1 auto !important;
  text-align: right !important;
}

body[dir="rtl"] .search-wrapper .search-history-title,
body[dir="rtl"] .search-wrapper .search-history-sub {
  width: auto !important;
  justify-content: flex-start !important;
}

@media (min-width: 701px) {
  body[dir="rtl"] .search-wrapper .search-history-content {
    flex: 0 1 auto !important;
  }

  body[dir="rtl"] .search-wrapper .search-history-title,
  body[dir="rtl"] .search-wrapper .search-history-sub {
    width: auto !important;
  }
}

/* Alleen klok iets omhoog — maat van lijst blijft hetzelfde */
.search-history-icon {
  transform: translateY(-2px);
}














/* Pin-knop zoekgeschiedenis */
.search-history-pin {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.search-history-pin:hover {
  background: rgba(37, 99, 235, 0.10);
  color: var(--accent);
}

.search-history-pin.active {
  color: var(--accent);
  transform: rotate(45deg);
}

.search-history-pin.active i {
  color: var(--accent);
}

.search-history-pin-spacer {
  width: 30px;
  min-width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-block;
}
.search-history-pin.is-hidden {
  visibility: hidden;
  pointer-events: none;
}










.search-history-toast {
  display: block;
  width: fit-content;
  max-width: calc(100% - 16px);
  margin: 4px auto 8px;
  margin-inline: auto;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.22);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.search-history-toast.is-fading {
  opacity: 0;
}

body.theme-dark .search-history-toast {
  background: rgba(96, 165, 250, 0.16);
  border-color: rgba(96, 165, 250, 0.28);
}

body.theme-sepia .search-history-toast {
  background: rgba(120, 53, 15, 0.1);
  border-color: rgba(120, 53, 15, 0.2);
}

@keyframes searchHistoryPinPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: none;
    background: transparent;
  }
  50% {
    transform: scale(1.14);
    box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.22);
    background: rgba(37, 99, 235, 0.18);
  }
}

@keyframes searchHistoryPinPulseActive {
  0%, 100% {
    transform: rotate(45deg) scale(1);
    box-shadow: none;
    background: transparent;
  }
  50% {
    transform: rotate(45deg) scale(1.14);
    box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.22);
    background: rgba(37, 99, 235, 0.18);
  }
}

.search-history-pin.pin-hint-pulse {
  animation: searchHistoryPinPulse 0.45s ease 2;
}

.search-history-pin.active.pin-hint-pulse {
  animation: searchHistoryPinPulseActive 0.45s ease 2;
}

















/* Settings menu — light + dark + sepia */
.side-menu .menu-link,
.side-menu #shareWebsiteBtn,
.side-menu select#languageSelect,
.side-menu .font-accordion-btn,
.side-menu .font-size-control,
.side-menu .user-profile,
.side-menu .theme-buttons .theme-btn:not(.active-theme) {
  background: var(--soft-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}

.side-menu .menu-link,
.side-menu #shareWebsiteBtn,
.side-menu select#languageSelect,
.side-menu .font-accordion-btn {
  font-weight: 600 !important;
}

.side-menu .font-size-control {
  border-radius: 18px !important;
}

.side-menu .font-step-btn {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}

.side-menu .menu-section label,
.side-menu .side-menu-header h3 {
  color: var(--text) !important;
  font-weight: 700 !important;
}

.side-menu .side-menu-header h3 {
  font-weight: 800 !important;
}

.side-menu .font-size-value {
  color: var(--accent) !important;
  font-weight: 700 !important;
}

.side-menu {
  padding-bottom: 28px !important;
}

.side-menu .theme-btn.active-theme,
.side-menu .font-opt.active-theme {
  background: rgba(17, 24, 39, 0.1) !important;
  border-color: #111827 !important;
  color: #111827 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1) !important;
  font-weight: 600 !important;
}

/* Light mode — beetje extra contrast */
body:not(.theme-dark):not(.theme-sepia) .side-menu .menu-link,
body:not(.theme-dark):not(.theme-sepia) .side-menu #shareWebsiteBtn,
body:not(.theme-dark):not(.theme-sepia) .side-menu select#languageSelect,
body:not(.theme-dark):not(.theme-sepia) .side-menu .font-accordion-btn,
body:not(.theme-dark):not(.theme-sepia) .side-menu .font-size-control,
body:not(.theme-dark):not(.theme-sepia) .side-menu .user-profile,
body:not(.theme-dark):not(.theme-sepia) .side-menu .theme-buttons .theme-btn:not(.active-theme) {
  background: #f8fafc !important;
  border-color: #d1d5db !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  color: #1f2937 !important;
}

body:not(.theme-dark):not(.theme-sepia) .side-menu .font-step-btn {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #1f2937 !important;
}

/* Dark mode — labels + knoppen leesbaar */
body.theme-dark .side-menu .theme-btn.active-theme,
body.theme-dark .side-menu .font-opt.active-theme {
  background: rgba(248, 250, 252, 0.12) !important;
  border-color: #e5e7eb !important;
  color: #f8fafc !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

body.theme-dark .side-menu select#languageSelect {
  background-color: var(--soft-card) !important;
  color: var(--text) !important;
}

/* Font panel — zelfde card-stijl als menu */
.side-menu .font-accordion-panel {
  background: var(--soft-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 18px !important;
}

body:not(.theme-dark):not(.theme-sepia) .side-menu .font-accordion-panel {
  background: #f8fafc !important;
  border-color: #d1d5db !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

/* Font knoppen — niet geselecteerd */
.side-menu .font-accordion-panel .theme-buttons .font-opt:not(.active-theme) {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
}

body:not(.theme-dark):not(.theme-sepia) .side-menu .font-accordion-panel .theme-buttons .font-opt:not(.active-theme) {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
  color: #1f2937 !important;
}

/* Font knoppen — geselecteerd (zelfde als Theme Light) */
.side-menu .font-accordion-panel .theme-buttons .font-opt.active-theme {
  background: rgba(17, 24, 39, 0.1) !important;
  border-color: #111827 !important;
  color: #111827 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1) !important;
  font-weight: 600 !important;
}

.side-menu .font-accordion-panel .theme-buttons .font-opt.active-theme::after {
  color: #111827 !important;
  opacity: 1 !important;
}

/* Dark mode font panel */
body.theme-dark .side-menu .font-accordion-panel {
  background: var(--soft-card) !important;
  border-color: var(--border) !important;
}

body.theme-dark .side-menu .font-accordion-panel .theme-buttons .font-opt.active-theme {
  background: rgba(248, 250, 252, 0.12) !important;
  border-color: #e5e7eb !important;
  color: #f8fafc !important;
}

body.theme-dark .side-menu .font-accordion-panel .theme-buttons .font-opt.active-theme::after {
  color: #f8fafc !important;
}
/* tOt hier */







/* Homepage dark mode — favorite hart zichtbaar */
body.theme-dark:not(.read-list-mode) #surahGrid.grid .card .favorite-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #f8fafc !important;
}

body.theme-dark:not(.read-list-mode) #surahGrid.grid .card .favorite-btn.active {
  color: #dc2626 !important;
}






.theme-buttons-slider {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 !important;
  padding: 4px;
  border-radius: 18px;
  background: #f1f5f9;
  overflow: hidden;
}

body.theme-dark .theme-buttons-slider {
  background: #1f2937;
}

.theme-buttons-slider .theme-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  height: calc(100% - 8px);
  border-radius: 14px;
  background: #dbeafe;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

body.theme-dark .theme-buttons-slider .theme-slider {
  background: rgba(96, 165, 250, 0.25);
}

.theme-buttons-slider .theme-btn {
  position: relative;
  z-index: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: color 0.35s ease !important;
}

.theme-buttons-slider .theme-btn.active-theme {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #111827 !important;
  font-weight: 700 !important;
}

body.theme-dark .theme-buttons-slider .theme-btn.active-theme {
  color: #111827 !important;
}

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









/* Font sliders — zelfde rustig als theme (0.45s) */
.font-buttons-slider {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 4px !important;
  border-radius: 14px !important;
  background: #f1f5f9 !important;
  overflow: hidden !important;
  grid-template-columns: none !important;
}

body.theme-dark .font-buttons-slider {
  background: #1f2937 !important;
}

.font-buttons-slider .font-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc((100% - 8px) / 3);
  border-radius: 10px;
  background: #dbeafe;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

body.theme-dark .font-buttons-slider .font-slider {
  background: rgba(96, 165, 250, 0.25);
}

.font-buttons-slider .font-opt {
  position: relative;
  z-index: 1;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: color 0.35s ease !important;
}

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

/* ALLE geselecteerde knoppen — tekst + vinkje ZWART */
.side-menu .theme-btn.active-theme,
.side-menu .font-opt.active-theme,
.theme-buttons-slider .theme-btn.active-theme,
.font-buttons-slider .font-opt.active-theme {
  color: #111827 !important;
  font-weight: 700 !important;
}

body.theme-dark .side-menu .theme-btn.active-theme,
body.theme-dark .side-menu .font-opt.active-theme,
body.theme-dark .theme-buttons-slider .theme-btn.active-theme,
body.theme-dark .font-buttons-slider .font-opt.active-theme {
  color: #111827 !important;
}

.side-menu .font-accordion-panel .font-opt.active-theme::after,
.font-buttons-slider .font-opt.active-theme::after {
  color: #111827 !important;
  opacity: 1 !important;
}

.font-buttons-slider .font-opt.active-theme {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}












/* =====================================================
   FIX 2 — geselecteerd = ZWART (slider + knop)
===================================================== */

/* 1) Het bewegende vlak achter de knop = ZWART */
.side-menu .theme-buttons-slider .theme-slider,
.side-menu .font-buttons-slider .font-slider {
  background: #111827 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

body.theme-dark .side-menu .theme-buttons-slider .theme-slider,
body.theme-dark .side-menu .font-buttons-slider .font-slider {
  background: #111827 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* 2) Geselecteerde tekst = WIT (op zwarte achtergrond) */
.side-menu .theme-buttons-slider .theme-btn.active-theme,
.side-menu .font-buttons-slider .font-opt.active-theme {
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* 3) Vinkje = WIT */
.side-menu .font-buttons-slider .font-opt.active-theme::after,
.side-menu .font-accordion-panel .theme-buttons .font-opt.active-theme::after {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* 4) Niet-geselecteerde knoppen = grijs */
.side-menu .theme-buttons-slider .theme-btn:not(.active-theme),
.side-menu .font-buttons-slider .font-opt:not(.active-theme) {
  color: #64748b !important;
}

/* 5) Font size nummer = zwart */
.side-menu .font-size-value,
#fontSizeValue {
  color: #111827 !important;
}

/* 6) Surah-pagina (geen slider) = volledig zwarte knop */
.side-menu .font-accordion-panel .theme-buttons:not(.font-buttons-slider) .font-opt.active-theme,
.side-menu .font-accordion-panel .theme-buttons:not(.font-buttons-slider) .theme-btn.active-theme,
.surah-settings-style .theme-btn.active-theme,
.surah-settings-style .font-opt.active-theme {
  background: #111827 !important;
  color: #ffffff !important;
  border-color: #111827 !important;
  box-shadow: none !important;
}

.surah-settings-style .font-size-value {
  color: #111827 !important;
}








/* FIX 3 — witte tekst op zwarte font-knop */
.side-menu .font-accordion-panel .theme-buttons.font-buttons-slider .font-opt.active-theme {
  color: #ffffff !important;
}

.side-menu .font-accordion-panel .theme-buttons.font-buttons-slider .font-opt.active-theme::after {
  color: #ffffff !important;
  opacity: 1 !important;
}

.side-menu .theme-buttons-slider .theme-btn.active-theme {
  color: #ffffff !important;
}













/* FIX slider v2 — originele fonts card + links + card erboven */

/* Slider card = BOVEN witte knoppen tijdens bewegen */
.side-menu .font-buttons-slider .font-slider,
.side-menu .theme-buttons-slider .theme-slider {
  z-index: 5 !important;
}

/* Niet-geselecteerde knoppen = originele witte card terug */
.side-menu .font-buttons-slider .font-opt:not(.active-theme) {
  position: relative !important;
  z-index: 1 !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
  color: #1f2937 !important;
}

/* Geselecteerde knop = transparant, tekst LINKS in het midden */
.side-menu .font-buttons-slider .font-opt.active-theme {
  position: relative !important;
  z-index: 6 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  padding: 7px 12px !important;
  color: #ffffff !important;
}

/* Theme knoppen — tekst gecentreerd (Light/Dark/Sepia) */
.side-menu .theme-buttons-slider .theme-btn {
  position: relative !important;
  z-index: 6 !important;
}

/* Dark mode — witte cards aanpassen */
body.theme-dark .side-menu .font-buttons-slider .font-opt:not(.active-theme) {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* FIX slider v3 — zwarte card zelfde grootte als witte knoppen */

.side-menu .font-buttons-slider .font-opt,
.side-menu .font-buttons-slider .font-opt:not(.active-theme),
.side-menu .font-buttons-slider .font-opt.active-theme {
  min-height: 38px !important;
  height: 38px !important;
  box-sizing: border-box !important;
}

/* Geselecteerde knop — zelfde hoogte (border transparant) */
.side-menu .font-buttons-slider .font-opt.active-theme {
  border: 1px solid transparent !important;
}

/* Zwarte card — exact zelfde hoogte, geen grote shadow */
.side-menu .font-buttons-slider .font-slider {
  height: 38px !important;
  box-shadow: none !important;
}

/* Witte knoppen — minder shadow, zelfde formaat */
.side-menu .font-buttons-slider .font-opt:not(.active-theme) {
  box-shadow: none !important;
}




/* Geen hover-sprong op de gekozen font-knop (anders wit randje onder de zwarte card) */
.side-menu .font-buttons-slider .font-opt.active-theme:hover {
  transform: none !important;
  box-shadow: none !important;
}









/* DARK MODE — thema-knoppen leesbaar maken (net als de font-knoppen) */

/* Gekozen knop: witte tekst op de donkere kaart */
body.theme-dark .side-menu .theme-buttons-slider .theme-btn.active-theme {
  color: #ffffff !important;
}

/* Niet-gekozen knoppen: lichtere, leesbare tekst */
body.theme-dark .side-menu .theme-buttons-slider .theme-btn:not(.active-theme) {
  color: var(--text) !important;
}


/* DARK MODE — Font size getal leesbaar maken */
body.theme-dark .side-menu .font-size-value,
body.theme-dark #fontSizeValue {
  color: #ffffff !important;
}









/* Surah-pagina: thema-slider net als homepage (kaart zichtbaar maken) */
.surah-settings-style .side-menu .theme-buttons-slider .theme-btn.active-theme {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}










/* DARK MODE — witte rand op de SCHUIVENDE kaart (thema + fonts), beweegt mee */
body.theme-dark .side-menu .theme-buttons-slider .theme-slider,
body.theme-dark .side-menu .font-buttons-slider .font-slider {
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-sizing: border-box !important;
}

/* DARK MODE — de gekozen knop heeft zelf GEEN rand meer (kaart doet het) → geen flits */
body.theme-dark .side-menu .theme-buttons-slider .theme-btn.active-theme,
body.theme-dark .side-menu .font-buttons-slider .font-opt.active-theme {
  border-color: transparent !important;
  box-shadow: none !important;
}
/* DARK MODE — witte rand op de SCHUIVENDE kaart (thema + fonts), beweegt mee */
body.theme-dark .side-menu .theme-buttons-slider .theme-slider,
body.theme-dark .side-menu .font-buttons-slider .font-slider {
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-sizing: border-box !important;
}

/* DARK MODE — de gekozen knop heeft zelf GEEN rand meer (kaart doet het) → geen flits */
body.theme-dark .side-menu .theme-buttons-slider .theme-btn.active-theme,
body.theme-dark .side-menu .font-buttons-slider .font-opt.active-theme {
  border-color: transparent !important;
  box-shadow: none !important;
}










/* =========================================
   DARK MODE — hero + footer zichtbaar
   (zelfde stijl als surah cards)
   ========================================= */

body.theme-dark .hero-card,
body.theme-dark .site-footer {
  background: #111827;
  border: 1.5px solid rgba(255, 255, 255, 0.20);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}




/* DARK MODE — Read-pagina hartje net als homepage (geen witte card) */
body.theme-dark.read-list-mode #readSurahGrid .read-surah-card .fav-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* DARK MODE — QCF Quran-tekst op de Read-pagina leesbaar (licht) maken */
body.theme-dark .reader-page .qcf-page-text,
body.theme-dark .reader-page .qcf-line,
body.theme-dark .reader-page .qcf-line span,
body.theme-dark .reader-page .qcf-clean-bismillah {
  color: #f8fafc !important;
}




/* DARK MODE — zachte witte gloed rond de grote kaart (homepage, surah, read) */
body.theme-dark .hero-card,
body.theme-dark .detail-card {
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.12) !important;
}





/* DARK MODE — About-pagina video-card donker maken (about-page staat OP de body) */
body.theme-dark.about-page .video-box {
  background: var(--soft-card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}



/* DARK MODE — TikTok-icoon wit maken (footer) */
body.theme-dark .tiktok-icon {
  color: #ffffff !important;
}







/* DARK MODE — Continue-highlight zachter (warme gloed i.p.v. fel geel blok) */
body.theme-dark:has(#surahDetail) .ayah-card.highlight-ayah,
body.theme-dark .ayah-card.highlight-ayah,
body.theme-dark .reader-single-page.highlight-ayah {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.18) 0%, rgba(255, 193, 7, 0.10) 100%) !important;
  border: 2px solid rgba(255, 193, 7, 0.65) !important;
  box-shadow: 0 0 22px rgba(255, 193, 7, 0.30) !important;
}




/* RTL — surah-naam (Latijn) op de Read-pagina in Sora houden i.p.v. Vazirmatn */
body[dir="rtl"] .reader-surah-header .reader-title-row h1 {
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
}




/* Naam "Holy Quran-Pashto" onderaan: altijd het Engelse website-font (Sora), ook in RTL */
.page-end-card h3,
.footer-about h2,
body[dir="rtl"] .page-end-card h3,
body[dir="rtl"] .footer-about h2 {
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
}


/* Surah-kaart: Latijnse naam + vertaling altijd in Engels website-font (Sora), ook in RTL */
body[dir="rtl"] .info,
body[dir="rtl"] .info h3,
body[dir="rtl"] .info p {
  font-family: 'Sora', 'Inter', Arial, sans-serif !important;
}


/* RTL — gradient terug, maar gradient-vak iets hoger zodat Arabische letters volledig kleuren.
   padding-top groeit, margin-top compenseert → card blijft even groot. */
body[dir="rtl"] .hero h1 {
  padding-top: 0.3em !important;
  margin-top: -0.3em !important;
}




/* Audio-pagina subtitle: punt/leestekens altijd op de juiste plek in RTL */
body[dir="rtl"] #audioSubtitle {
  direction: rtl !important;
  unicode-bidi: plaintext !important;
}






/* DARK MODE — zachte witte gloed rond elke surah-kaart (homepage, read, audio) */
body.theme-dark .card {
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.10) !important;
}




















/* Vorige/volgende surah — naam-kaart met pijlen (boven in de detail-kaart) */
.surah-nav {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 22px;
  direction: ltr; /* links = volgende surah, rechts = vorige — ook bij RTL site-taal */
}

.surah-nav-name {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--soft-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 20px;
}

.surah-nav-latin { font-size: 1.4rem; font-weight: 700; color: var(--text); }
.surah-nav-arabic { font-size: 1.5rem; font-weight: 700; color: var(--text); }

.surah-nav-btn {
  width: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--soft-card);
  color: var(--text);
  font-size: 1.2rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.surah-nav-btn:hover { background: var(--card); }

/* Lege plek (bij surah 1 of 114): onzichtbaar, houdt de kaart gecentreerd */
.surah-nav-empty { visibility: hidden; border: none; background: none; }

/* RTL — pijlen de goede kant op (flex draait de volgorde al automatisch om) */
/* Nav blijft ltr — pijlen niet spiegelen */

/* Dark mode — zachte witte gloed zoals je andere kaarten */
body.theme-dark .surah-nav-name,
body.theme-dark .surah-nav-btn {
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.10);
}


/* Naam in het vorige/volgende-kaartje: zelfde maat als eerst */
.surah-nav-name h1 { font-size: 1.4rem; font-weight: 700; margin: 0; color: var(--text); }
.surah-nav-name h2 { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--text); }




/* Surah-naam in het kaartje: zelfde grote maat als de oude titel */
.surah-nav-name h1 { font-size: 3rem; font-weight: 700; margin: 0; color: var(--text); }
.surah-nav-name h2 { font-size: 3rem; font-weight: 700; margin: 0; color: var(--text); }

/* Op telefoon iets kleiner zodat het netjes past */
@media (max-width: 600px) {
  .surah-nav-name h1 { font-size: 1.6rem; }
  .surah-nav-name h2 { font-size: 1.7rem; }
}



/* Arabische surah-naam in het kaartje: altijd Hafs font (zoals je oude titel) */
.surah-nav-name h2,
body[dir="rtl"] .surah-nav-name h2 {
  font-family: 'Hafs', serif !important;
}







/* Ronde pijl-knoppen naast het naam-kaartje */
.surah-nav { align-items: center; }

.surah-nav-btn {
  width: 50px;
  height: 45px;
  border-radius: 50%;
  align-self: center;
}









/* Optie 2 — pijl-knoppen BINNEN de naam-kaart */
.surah-nav {
  position: relative;
  background: var(--soft-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px 12px;
  gap: 10px;
}

/* De naam-kaart binnenin wordt "kaal" (geen dubbele rand/achtergrond) */
.surah-nav .surah-nav-name {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 6px;
}

/* Knoppen iets kleiner zodat ze netjes in de kaart passen */
.surah-nav .surah-nav-btn {
  width: 46px;
  height: 45px;
  border-radius: 50%;
}




/* Naam-kaart met pijlen (surah.html): alleen PC + iPad/tablet, niet op telefoon */
@media (max-width: 600px) {
  .detail-card .surah-nav { display: none !important; }
}











/* =====================================================
   DESKTOP SURAH CARD
   ===================================================== */

@media (min-width: 601px) {

  /* Geen dubbele witte card */
  body:has(#surahDetail) #surahDetail > .detail-card {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Verberg dubbele tekst (staat al in boxes) */
  .desktop-surah-summary .detail-header .detail-main-info > p {
    display: none !important;
  }



  /* Read + Listen knoppen — jouw favoriet */
  .desktop-surah-summary .surah-actions {
    display: flex !important;
    gap: 14px !important;
    margin-top: 20px !important;
    width: 100% !important;
  }

  .desktop-surah-summary .surah-actions .read-surah-link,
  .desktop-surah-summary .surah-actions .listen-surah-link {
    flex: 1 !important;
    text-align: center !important;
    padding: 10px 22px !important;
    min-height: 42px !important;
    font-weight: 800 !important;
  }



  /* Info boxes — lege ruimte weg + beetje ruimte */
  .desktop-surah-summary .detail-boxes {
    align-items: start !important;
    gap: 14px !important;
    margin-top: 24px !important;
  }

  .desktop-surah-summary .detail-box {
    height: auto !important;
    align-self: start !important;
    padding: 16px 18px !important;
  }

  .desktop-surah-summary .detail-box h3 {
    margin-bottom: 8px !important;
  }
}
















/* =====================================================
   SURAH — vertalingen aan/uit
   ===================================================== */

.translation-toggle-buttons {
  display: flex !important;
  gap: 8px !important;
}

.translation-toggle-buttons .trans-toggle-btn {
  flex: 1 !important;
  text-align: center !important;
}

/* Verberg vertalingen als uit */
body:not(.trans-visible-pashto) .translation-pashto {
  display: none !important;
}

body:not(.trans-visible-english) .translation-block:not(.translation-pashto):not(.translation-dari) {
  display: none !important;
}

body:not(.trans-visible-dari) .translation-dari {
  display: none !important;
}















/* Translation knoppen — witte tekst (wint van regel ~9067) */
.side-menu .translation-toggle-buttons .theme-btn.active-theme {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.theme-dark .side-menu .translation-toggle-buttons .theme-btn.active-theme {
  border-color: rgba(255, 255, 255, 0.85) !important;
  color: #ffffff !important;
}

body.theme-dark .side-menu .translation-toggle-buttons .theme-btn:not(.active-theme) {
  color: #f8fafc !important;
}