/* Koran lezen — Islamic Coach.
   Opmaak in de huisstijl van islamiccoach.nl; de tajweed-kleuren onderaan komen
   ongewijzigd uit salihcanoz/kk (Apache-2.0). */

:root {
    --bg: #0d0d0d;
    --groen: #3a7d5c;
    --groen-donker: #1f4a36;
    --goud: #c9a227;
    --goud-licht: #e0b93a;
    --tekst: rgba(255, 255, 255, 0.88);
    --grijs: rgba(255, 255, 255, 0.55);
    --lijn: rgba(255, 255, 255, 0.12);
    --papier: #fdfbf5;
    --papier-rand: #e8dfc4;
    --inkt: #1d1d1b;
    --vertaling: #3d4a44;
    --radius: 14px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background:
        radial-gradient(ellipse at 50% -10%, rgba(58, 125, 92, 0.28) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(201, 162, 39, 0.10) 0%, transparent 50%),
        var(--bg);
    background-attachment: fixed;
    color: var(--tekst);
    font-family: 'Poppins', system-ui, sans-serif;
    min-height: 100vh;
}

a {
    color: var(--goud-licht);
}

/* --- Navbar --- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
    padding-top: max(10px, env(safe-area-inset-top));
    background:
        linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.6), transparent) bottom / 100% 1px no-repeat,
        rgba(10, 10, 10, 0.88);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    min-width: 0;
}

.brand img {
    border-radius: 8px;
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    white-space: nowrap;
}

.brand-text small {
    font-size: 0.62rem;
    font-weight: 400;
    color: var(--grijs);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.nav-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-select {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

.navbar select,
.navbar button,
.bookmark-buttons button {
    height: 38px;
    min-width: 0;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--lijn);
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-family: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.navbar select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 30px;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.navbar select option {
    background: #1a1a1a;
    color: #fff;
}

.navbar select:hover,
.navbar button:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.navbar select:focus-visible,
.navbar button:focus-visible,
.pagination button:focus-visible {
    outline: 2px solid var(--goud);
    outline-offset: 2px;
}

.navbar .btn-gold {
    background: var(--goud);
    border-color: var(--goud);
    color: #0d0d0d;
    font-weight: 600;
    white-space: nowrap;
}

.navbar .btn-gold:hover {
    background: var(--goud-licht);
    border-color: var(--goud-licht);
}

/* Knop Latijnse letters: tik aan/uit, goud als hij aan staat */
.navbar .btn-latijn {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    padding: 0 10px;
    white-space: nowrap;
}

.navbar .btn-latijn.is-on {
    background: rgba(201, 162, 39, 0.18);
    border-color: var(--goud);
    color: var(--goud-licht);
}

.latijn-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.navbar .btn-icon {
    width: 38px;
    padding: 0;
}

#langSelect {
    width: auto;
    max-width: 150px;
}

/* --- Instellingen --- */
.reader-settings-dialog {
    position: fixed;
    z-index: 2000;
    width: min(380px, calc(100vw - 24px));
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    border-radius: var(--radius);
    background: #161616;
    border: 1px solid var(--lijn);
    color: var(--tekst);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}

.reader-settings-dialog[hidden] {
    display: none;
}

.reader-settings-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.reader-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reader-settings-header h2 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
}

.dialog-close-button {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--lijn);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
}

.reader-settings-dialog fieldset {
    display: grid;
    gap: 10px;
    border: 1px solid var(--lijn);
    border-radius: 10px;
    padding: 12px;
}

.reader-settings-dialog legend {
    padding: 0 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--goud-licht);
}

.reader-settings-dialog label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    cursor: pointer;
}

.reader-settings-dialog input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--groen);
}

.font-size-row {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

.font-a {
    color: #fff;
    font-weight: 600;
}

.font-a.small { font-size: 0.8rem; }
.font-a.big { font-size: 1.3rem; }

.font-size-slider {
    width: 100%;
    accent-color: var(--goud);
    cursor: pointer;
}

.muted {
    color: var(--grijs);
    font-size: 0.78rem;
}

.bookmark-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bookmark-buttons button {
    height: auto;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 0.82rem;
    line-height: 1.3;
}

.bookmark-buttons button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Koranpagina --- */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 14px max(12px, env(safe-area-inset-left)) 40px max(12px, env(safe-area-inset-right));
}

.quran-text {
    position: relative;
    background:
        radial-gradient(ellipse at 50% 0%, #fffdf7 0%, transparent 70%),
        linear-gradient(180deg, #fbf7ec 0%, #f6efdc 100%);
    color: var(--inkt);
    padding: 34px 30px;
    border-radius: 18px;
    border: 1px solid var(--goud);
    box-shadow:
        inset 0 0 0 5px #fbf7ec,
        inset 0 0 0 6px rgba(201, 162, 39, 0.45),
        inset 0 0 0 9px #fbf7ec,
        inset 0 0 0 10px rgba(201, 162, 39, 0.25),
        0 24px 60px rgba(0, 0, 0, 0.55);
    direction: rtl;
    text-align: justify;
    min-height: 60vh;
    cursor: pointer;
    font-family: 'Lateef', serif;
}

.quran-content {
    line-height: 2.2;
    font-variant-ligatures: common-ligatures contextual;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "mkmk" 1, "ccmp" 1, "rlig" 1, "mark" 1, "cv01" 1;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    direction: rtl;
    unicode-bidi: isolate;
    -webkit-font-smoothing: antialiased;
}

.quran-text.compact-line-height .quran-content {
    line-height: 1.85;
}

.surah-header {
    margin: 10px 0 14px;
    padding: 10px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #e8cf7a;
    background: linear-gradient(135deg, #0b0b0b 0%, #1d1d1d 50%, #0b0b0b 100%);
    border: 1px solid var(--goud);
    border-radius: 12px;
    box-shadow: inset 0 0 0 3px #0b0b0b, inset 0 0 0 4px rgba(201, 162, 39, 0.55), 0 6px 18px rgba(0, 0, 0, 0.25);
    direction: ltr;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.surah-header .surah-ar {
    font-family: 'Lateef', serif;
    font-size: 2.3em;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
}

.surah-header {
    scroll-margin-top: 150px;
}

.basmalah {
    text-align: center;
    margin-bottom: 10px;
    width: 100%;
}

.verse-block {
    display: inline;
    border-radius: 6px;
    cursor: pointer;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: background-color 0.15s ease;
}

.verse-number {
    display: inline-block;
    min-width: 28px;
    height: 28px;
    padding: 0 4px;
    margin: 0 4px 0 10px;
    border-radius: 50%;
    border: 1.5px solid var(--goud);
    background: radial-gradient(circle at 35% 30%, #fff8dc 0%, #f1e2a8 60%, #e3cc7c 100%);
    box-shadow: 0 0 0 2px #fbf7ec, 0 0 0 3px rgba(201, 162, 39, 0.45);
    color: #5b4610;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 25px;
    text-align: center;
    vertical-align: middle;
}

.sajdah-verse {
    background-color: #f7efd6;
}

.is-selected,
.verse-row.is-selected .verse-block {
    background-color: #fff3c4;
}

.is-playing,
.verse-row.is-playing .verse-block {
    background-color: #f1e3b0;
}

/* Vertaling onder elk vers */
.with-translation {
    text-align: right;
}

.verse-row {
    padding: 14px 8px 18px;
    border-radius: 10px;
    background:
        linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.45), transparent) bottom / 100% 1px no-repeat;
    scroll-margin-top: 150px;
}

.verse-row:last-child {
    border-bottom: none;
}

.verse-row .verse-block {
    display: block;
    text-align: justify;
    text-align-last: right;
}

.verse-row.is-selected,
.verse-row.is-playing {
    background: transparent;
}

.verse-tr {
    direction: ltr;
    text-align: left;
    margin-top: 8px;
    padding-left: 12px;
    border-left: 2px solid rgba(201, 162, 39, 0.6);
    font-family: 'Poppins', sans-serif;
    font-size: max(1.1rem, 0.48em);
    line-height: 1.7;
    color: var(--vertaling);
}

.repeat-row {
    display: grid;
    gap: 8px;
}

.repeat-title {
    font-size: 0.92rem;
}

.scope-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scope-switch label {
    justify-content: center;
    text-align: center;
    font-size: 0.82rem;
    padding: 8px 4px;
}

.scope-switch input[type="radio"] {
    display: none;
}

.repeat-row.is-off .scope-switch {
    opacity: 0.4;
    pointer-events: none;
}

.view-switch {
    display: grid;
    gap: 6px;
}

.view-switch label {
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--lijn);
}

.view-switch label:has(input:checked) {
    border-color: var(--goud);
    background: rgba(201, 162, 39, 0.12);
    color: #fff;
}

.view-switch input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--goud);
}

/* Latijnse letters onder het Arabisch */
.verse-lat {
    direction: ltr;
    text-align: left;
    margin-top: 8px;
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    font-size: max(1.2rem, 0.52em);
    line-height: 1.7;
    color: #2f6b4f;
}

.basmalah-lat {
    text-align: center;
    margin: -4px 0 12px;
}

/* Alleen vertaling: tekst schaalt mee met de lettergrootte-schuif */
.only-translation .verse-tr {
    margin-top: 0;
    font-size: max(1.15rem, 0.52em);
}

.only-translation .basmalah {
    text-align: center;
    border-left: none;
    padding-left: 0;
    font-style: italic;
    margin: 4px 0 10px;
}

.only-translation .verse-row {
    padding: 12px 6px 14px;
}

.verse-tr .tr-num {
    font-weight: 600;
    color: #8a6d12;
    margin-right: 4px;
}

.no-verses {
    text-align: center;
}

/* Paginering */
.pagination button:active:not(:disabled) {
    transform: scale(0.97);
}

.pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
}

.pagination button {
    min-height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid rgba(201, 162, 39, 0.55);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    color: #f3e3a6;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.pagination button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
}

#nextBtn {
    justify-self: end;
}

#prevBtn {
    justify-self: start;
}

.pagination button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

#pageInfo {
    font-size: 0.78rem;
    color: var(--grijs);
    text-align: center;
}

.credits {
    margin-top: 18px;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--grijs);
    display: grid;
    gap: 6px;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: max(20px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 2500;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--groen);
    color: #fff;
    font-size: 0.9rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.toast[hidden] {
    display: none;
}

@media (max-width: 560px) {
    .brand-text small {
        display: none;
    }

    #langSelect {
        max-width: 104px;
    }

    .brand img {
        width: 30px;
        height: 30px;
    }

    .navbar .btn-gold {
        padding: 0 10px;
    }

    .nav-select {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .nav-select #surahSelect {
        grid-column: 1 / -1;
    }

    .quran-text {
        padding: 22px 14px;
        border-radius: 14px;
    }

    .pagination button {
        padding: 0 12px;
        font-size: 0.85rem;
    }

    .legend-list {
        grid-template-columns: 1fr 1fr !important;
        font-size: 0.8rem !important;
    }
}

/* ===== Hieronder ongewijzigd uit salihcanoz/kk (style.css) ===== */

/* Tajweed Legend */
.legend-title {
    margin-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
}


.legend-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
}

.legend-item--toggle {
    gap: 6px;
}

.legend-rule-toggle {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: currentColor;
}

.legend-swatch {
    font-size: 2rem;
    margin-right: 5px;
}


.legend-ghunna { color: #16a085; }
.legend-madd-muttasil { color: #A64AC9; }
.legend-madd-munfasil { color: #A64AC9; }
.legend-madd-arid { color: #1ABC9C; }
.legend-madd-liin { color: #F39C12; }
.legend-silat-ha { color: #7ea24b; }
.legend-madd-asli { color: #e74c3c; }
.legend-qalqalah { color: #2980b9; }
.legend-iqlab { color: #8e44ad; }
.legend-idgham-ghunna { color: #00BFFF; }
.legend-idgham-bila { color: #5DADE2; }
.legend-idgham-mutakaribain { color: #5DADE2; }
.legend-idgham-mithlain { color: #5DADE2; }
.legend-ikhfa { color: #d0a386; }
.legend-qasr { color: #888; }
.legend-med { color: #e74c3c; }


/* --- Tajweed Rule Colors --- */
.tajweed-ghunna {
    color: #16a085; /* Green - Nasalization */
}

.tajweed-ghunna-ikhfa-shafawi {
    color: #16a085; /* Green - Nasalization */
}

.tajweed-ghunna-idgam-mithlayn {
    color: #16a085; /* Green - Nasalization */
}

.tajweed-madd-muttasil {
    color: #A64AC9; /* Purple - Connected Elongation */
}

.tajweed-madd-munfasil {
    color: #A64AC9; /* Pink - Separated Elongation */
}

.tajweed-madd-arid {
    color: #1ABC9C; /* Teal - Temporary Elongation */
}

.tajweed-madd-asli {
    color: #e74c3c; /* Lighter Red - Natural Elongation */
}

.tajweed-madd-liin {
    color: #F39C12; /* Orange - Soft Elongation */
}

.tajweed-madd-lazim {
    color: #c0392b;
}

.tajweed-qalqalah {
    color: #2980b9; /* Blue - Echoing */
}

.tajweed-ikhfa {
    color: #d0a386; /* Orange - Hiding */
}

.tajweed-idgham-bi-ghunna {
    color: #00BFFF; /* DeepSkyBlue - Merging with nasalization */
}

.tajweed-idgham-bila-ghunna {
    color: #5DADE2; /* Lighter Blue - Merging without nasalization */
}

.tajweed-idgham-mutakaribain {
    color: #5DADE2;
}

.tajweed-idgham-mithlain {
    color: #5DADE2;
}

.tajweed-iqlab {
    color: #8e44ad; /* Purple - Conversion */
}

.tajweed-qasr {
    color: #888;
}

.tajweed-med {
    color: #e74c3c;
}

.tajweed-tashiil {
    color: inherit;
}

.tajweed-sakta {
    color: inherit;
}

.tajweed-ishmam {
    color: inherit;
}

.tajweed-silat-ha {
    color: #7ea24b;
}

.tajweed-ikhfa-shafawi {
    color: #e67e22; /* Orange */
}

/* --- Waqf & Sajdah Signs --- */
.waqf-sign {
    font-size: 0.75em;
    position: relative;
    font-family: 'Scheherazade', 'Lateef', 'Traditional Arabic', serif;
}

/* Specific colors based on your legend */
.waqf-lazim, .waqf-awla, .waqf-jaiz {
    font-size: 1em;
    position: relative;
    color: red; /* Stopping signs in Red */
    margin: 0 15px 0 5px;
    font-family: 'Scheherazade', 'Lateef', 'Traditional Arabic', serif;
}

 .waqf-muanaqah {
    font-size: 1em;
    position: relative;
    color: red; /* Stopping signs in Red */
    font-family: 'Scheherazade', 'Lateef', 'Traditional Arabic', serif;

}

.waqf-continue {
    font-size: 1em;
    position: relative;
    color: green; /* Stopping signs in Red */
    font-family: 'Scheherazade', 'Lateef', 'Traditional Arabic', serif;
}

/* Specific colors for each waqf type */
.waqf-lazim {
    position: relative;
    color: #D9534F; /* Red - Mandatory Stop */
}

.waqf-jaiz {
    position: relative;
    color: #D9534F; /* Red - Permissible Stop */
}

.waqf-continue {
    position: relative;
    color: #27ae60; /* Green - Better to Continue */
}

.waqf-awla {
    position: relative;
    color: #D9534F; /* Red - Better to Stop */
}

.waqf-muanaqah {
    position: relative;
    color: #D9534F; /* Red - Stop at one spot */
}

.sajdah-sign {
    color: #D9534F; /* Same red for consistency */
    font-weight: bold;
    vertical-align: middle;
}

/* --- Tajweed Abbreviations in Text (Toggled by JS) --- */
[class^="tajweed-"] {
    position: relative;
}

[class^="tajweed-"]::after {
    position: absolute;
    bottom: -15px; ; /* Position below the letter, accounting for descenders */
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-family: sans-serif;
    font-weight: normal;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

/* Show abbreviations when toggle is on */
.show-abbreviations [class^="tajweed-"]::after {
    opacity: 1;
}

/* Abbreviation content and colors matching their rules */
/* Using CSS variables for dynamic content */
:root {
    --abbr-ghunna: "Gh";
    --abbr-madd-muttasil: "MM";
    --abbr-madd-munfasil: "Mn";
    --abbr-madd-arid: "A";
    --abbr-madd-liin: "ML";
    --abbr-silat-ha: "S";
    --abbr-madd-lazim: "Lz";
    --abbr-madd-asli: "MA";
    --abbr-qalqalah: "Q";
    --abbr-iqlab: "Iq";
    --abbr-idgham-ghunna: "IdG";
    --abbr-idgham-bila: "IdB";
    --abbr-idgham-mutakaribain: "IdM";
    --abbr-idgham-mithlain: "Idm";
    --abbr-ikhfa: "Ik";
    --abbr-qasr: "Qsr";
    --abbr-med: "Med";
    --abbr-tashiil: "Tashiil";
    --abbr-sakta: "Sakta";
    --abbr-ishmam: "Ishmam";
}

.tajweed-ghunna::after {
    content: var(--abbr-ghunna);
    color: #16a085;
}

.tajweed-ghunna-ikhfa-shafawi::after {
    content: attr(data-label);
    color: #16a085;
}

.tajweed-ghunna-idgam-mithlayn::after {
    content: attr(data-label);
    color: #16a085;
}

.tajweed-madd-muttasil::after {
    content: var(--abbr-madd-muttasil);
    color: #A64AC9;
}

.tajweed-madd-munfasil::after {
    content: var(--abbr-madd-munfasil);
    color: #A64AC9;
}

.tajweed-madd-arid::after {
    content: var(--abbr-madd-arid);
    color: #1ABC9C;
}

.tajweed-madd-liin::after {
    content: var(--abbr-madd-liin);
    color: #F39C12;
}

.tajweed-silat-ha::after {
    content: var(--abbr-silat-ha);
    color: #7ea24b;
}

.tajweed-madd-lazim::after {
    content: var(--abbr-madd-lazim);
    color: #c0392b;
}

.tajweed-madd-asli::after {
    content: var(--abbr-madd-asli);
    color: #e74c3c;
}

.tajweed-qalqalah::after {
    content: var(--abbr-qalqalah);
    color: #2980b9;
}

.tajweed-iqlab::after {
    content: var(--abbr-iqlab);
    color: #8e44ad;
}

.tajweed-idgham-bi-ghunna::after {
    content: var(--abbr-idgham-ghunna);
    color: #00BFFF;
}

.tajweed-idgham-bila-ghunna::after {
    content: var(--abbr-idgham-bila);
    color: #5DADE2;
}

.tajweed-idgham-mutakaribain::after {
    content: var(--abbr-idgham-mutakaribain);
    color: #5DADE2;
}

.tajweed-idgham-mithlain::after {
    content: var(--abbr-idgham-mithlain);
    color: #5DADE2;
}

.tajweed-ikhfa::after {
    content: var(--abbr-ikhfa);
    color: #d0a386;
}

.tajweed-qasr::after {
    content: var(--abbr-qasr);
    color: inherit;
}

.tajweed-med::after {
    content: var(--abbr-med);
    color: inherit;
}

.tajweed-tashiil::after {
    content: var(--abbr-tashiil);
    color: inherit;
}

.tajweed-sakta::after {
    content: var(--abbr-sakta);
    color: inherit;
}

.tajweed-ishmam::after {
    content: var(--abbr-ishmam);
    color: inherit;
}

.tajweed-ikhfa-shafawi::after {
    content: attr(data-label);
    color: orange;
}

#abbrLabel {
    margin-Left: 5px;
    cursor: pointer;
    font-size: .8rem;
}

.silent-letter {
    color: #b4b4b9 !important;
}

/* If a silent letter ever ends up with an abbreviation pseudo-element, suppress it */
.silent-letter::after {
    content: none !important;
}


.hidden-char {
    display: none;
}

.hidden-char::after {
    display: none;
}

/* Legenda in de huisstijl */
#tajweed-legend {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--lijn);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.04);
    color: var(--tekst);
}

#tajweed-legend .legend-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--goud-licht);
    border-bottom-color: var(--lijn);
}

#tajweed-legend .legend-item {
    filter: brightness(1.35);
}