:root {
    --ctl:        44px;
    --ctl-mark:   24px;
    --mark-gap:    4px;
    --bar:        60px;
    --icon:       21px;
    --logo-nav:   36px;
    --logo-foot:  28px;
}

:root { --gutter: clamp(16px, 2.5%, 40px); }

:root { --row-ctl: 2.2rem; --row-ctl-gap: .35rem; }

html[lang^="en"] .navbar { min-height: var(--bar); padding-block: 0; }
@media (max-width: 991.98px) {
    html[lang^="en"] .navbar { padding-block: calc((var(--bar) - var(--ctl)) / 2); }
}
html[lang^="en"] .navbar-logo { height: var(--logo-nav); }
html[lang^="en"] .footer-logo { height: var(--logo-foot); }

.btn,
.form-control,
.form-select,
.nav-tabs .nav-link,
.nav-icon-btn,
.hadith-icon-btn,
.footer-contact,
.nav-surah,
.btn-quiz,
.book-index-link {
    min-height: var(--ctl);
}
.footer-contact { min-width: var(--ctl); min-height: var(--ctl); }

.btn { display: inline-flex; align-items: center; justify-content: center; }
.btn.w-100, .btn.d-block { display: flex; }

.nav-icon-btn,
.footer-contact,
.hadith-icon-btn.icon-only { min-width: var(--ctl); min-height: var(--ctl); }
.fav-act { min-height: 0; position: relative; }
.fav-act::before {
    content: ""; position: absolute; inset: 50% auto auto 50%;
    width: var(--ctl); height: var(--ctl); transform: translate(-50%, -50%);
}

.fav-btn { position: absolute; }
.fav-btn::before {
    content: ""; position: absolute; inset: 50% auto auto 50%;
    width: var(--ctl); height: var(--ctl); transform: translate(-50%, -50%);
}
.hadith-kebab, .hadith-play { position: relative; }
.hadith-kebab::before,
.hadith-play::before {
    content: ""; position: absolute; inset: 50% auto auto 50%;
    width: var(--ctl); height: var(--ctl); transform: translate(-50%, -50%);
}
.btn-close { min-width: var(--ctl); min-height: var(--ctl); }

html[lang^="en"] .aya-kebab,
html[lang^="en"] .aya-play,
html[lang^="en"] .aya-fav {
    width: var(--ctl-mark); height: var(--ctl-mark); position: absolute; top: 50%;
}
html[lang^="en"] .aya-kebab { margin-top: calc(-1.5 * var(--ctl-mark) - var(--mark-gap)); }
html[lang^="en"] .aya-play  { margin-top: calc(-0.5 * var(--ctl-mark)); }
html[lang^="en"] .aya-fav   { margin-top: calc(0.5 * var(--ctl-mark) + var(--mark-gap)); }
@media (min-width: 576px) {
    html[lang^="en"] #quranCard.show-wbw .aya-kebab { top: 1rem; margin-top: 0; }
    html[lang^="en"] #quranCard.show-wbw .aya-play  { top: calc(1rem + var(--ctl-mark) + var(--mark-gap)); margin-top: 0; }
    html[lang^="en"] #quranCard.show-wbw .aya-fav   { top: calc(1rem + 2 * (var(--ctl-mark) + var(--mark-gap))); margin-top: 0; }
}
.aya-kebab::before,
.aya-play::before,
.aya-fav::before {
    content: ""; position: absolute; inset: 50% auto auto 50%;
    width: var(--ctl); height: var(--ctl); transform: translate(-50%, -50%);
}

@media (max-width: 575.98px) {
    .nav-tabs {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        justify-content: flex-start !important;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link { white-space: nowrap; }
    .card-header.d-flex { flex-wrap: wrap; gap: .5rem; }
}

.nav-icon-btn svg,
footer .footer-contact svg { width: var(--icon); height: var(--icon); }

.aya-kebab, .aya-play, .aya-fav,
.hadith-table .hadith-play, .hadith-table .hadith-kebab {
    background-color: var(--surface, #f1f5f9);
    color: var(--accent, #475569);
    border: 0;
    border-radius: 50%;
    opacity: 1;
    box-shadow: none;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.quran-table.quran-table > tbody > tr:nth-of-type(odd) .aya-kebab,
.quran-table.quran-table > tbody > tr:nth-of-type(odd) .aya-play,
.quran-table.quran-table > tbody > tr:nth-of-type(odd) .aya-fav,
.hadith-table .hadith-row.stripe .hadith-play,
.hadith-table .hadith-row.stripe .hadith-kebab { background-color: var(--page, #fff); }
.quran-table.quran-table > tbody > tr .aya-kebab:hover,
.quran-table.quran-table > tbody > tr .aya-kebab:focus-visible,
.quran-table.quran-table > tbody > tr.selected .aya-kebab,
.quran-table.quran-table > tbody > tr .aya-play:hover,
.quran-table.quran-table > tbody > tr .aya-play:focus-visible,
.quran-table.quran-table > tbody > tr .aya-play.playing,
.quran-table.quran-table > tbody > tr .aya-fav:hover,
.quran-table.quran-table > tbody > tr .aya-fav:focus-visible,
.quran-table.quran-table > tbody > tr .aya-fav[aria-pressed="true"],
.hadith-table.hadith-table .hadith-play:hover,
.hadith-table.hadith-table .hadith-play:focus-visible,
.hadith-table.hadith-table .hadith-play.playing,
.hadith-table.hadith-table .hadith-kebab:hover,
.hadith-table.hadith-table .hadith-kebab:focus-visible {
    background-color: var(--accent, #475569);
    border-color: var(--accent, #475569);
    color: var(--on-accent, #fff);
    opacity: 1;
}

.dropdown-menu {
    
    --bs-dropdown-link-color: var(--text, #1a1a1a);
    --bs-dropdown-link-hover-bg: var(--surface-2, #e2e8f0);
    --bs-dropdown-link-hover-color: var(--accent-hover, #334155);
    --bs-dropdown-link-active-bg: var(--accent, #475569);
    --bs-dropdown-link-active-color: var(--on-accent, #fff);
}

    .reader-tools .dropdown-menu {
        min-width: var(--ctl, 44px); width: var(--ctl, 44px); padding: 0;
        overflow: hidden;
    }
    .reader-more-item { min-width: 0; width: 100%; height: var(--ctl, 44px); padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--heading, #1a1a1a); }
    
    .reader-more-item svg { width: var(--icon, 21px); height: var(--icon, 21px); }
    
    .reader-more-item svg.icon-wide { flex: none; width: auto; height: var(--icon, 21px); }
    .reader-tools .dropdown-menu .fav-btn {
        position: static; inset: auto; margin: 0; border-radius: 0;
    }
    .reader-tools .dropdown-menu li + li .reader-more-item {
        border-top: 1px solid var(--border, #dee2e6);
    }
    
    .reader-tools .dropdown-menu.reader-panel {
        width: auto; min-width: 13rem; max-width: calc(100vw - 2rem);
        padding: .25rem 0; overflow-x: hidden;
        inset-inline-end: 0; inset-inline-start: auto;
    }
    .reader-tools .reader-panel .dropdown-item {
        display: flex; align-items: center; min-height: var(--ctl, 44px);
        padding: .3rem 1rem; white-space: nowrap;
    }
    .reader-tools .reader-panel .dropdown-header { padding: .4rem 1rem .2rem; }
    
    .reader-tools .dropdown-menu.reader-hostmenu { overflow: visible; }
    
    .dropdown-menu [data-zoom-target][aria-pressed="true"],
    .dropdown-menu .reader-more-item[aria-pressed="true"] {
        background-color: var(--accent, #0d6efd);
        color: var(--on-accent, #fff);
    }
    
    .reader-tools #matnPlayBtn .mp-pause, .reader-tools #matnPlayBtn.is-playing .mp-play { display: none; }
    .reader-tools #matnPlayBtn.is-playing .mp-pause { display: inline-flex; }
    .reader-tools .reader-sub { position: relative; }
    
    .reader-tools .dropdown-menu.reader-submenu {
        display: none; position: absolute; top: 0; inset-inline-end: 100%; inset-inline-start: auto;
        margin: 0 .25rem;
    }
    .reader-tools .dropdown-menu.reader-submenu.show { display: block; }
    @media (max-width: 575.98px) {
        .reader-tools .dropdown-menu.reader-submenu {
            top: 100%; inset-inline-start: auto; inset-inline-end: 0; margin: 0;
            min-width: 0; max-width: calc(100vw - 9rem);
        }
    }

.dropdown-toggle.hadith-icon-btn::after,
.rt-menus .dropdown-toggle::after { display: none; }
.dropdown-toggle.hadith-icon-btn { padding-inline-end: .6rem; }

.share-row {
    display: flex; justify-content: center; align-items: center; flex-wrap: nowrap;
    gap: clamp(.3rem, 2vw, .6rem); padding: .9rem 0 .5rem;
}
.share-btn {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: clamp(44px, 12.5vw, 3rem); height: clamp(44px, 12.5vw, 3rem); padding: 0;
    background: var(--accent, #475569); color: var(--on-accent, #fff);
    border: 0; border-radius: 50%; cursor: pointer; text-decoration: none;
    transition: background .12s ease;
}
.share-btn:hover, .share-btn:focus-visible {
    background: var(--accent-hover, #334155); text-decoration: none;
}
.share-row .share-btn.share-btn { color: var(--on-accent, #fff); }
.share-ico { display: inline-flex; }
.share-ico svg { width: 20px; height: 20px; display: block; }
.share-copy .share-ico-ok, .share-copy.copied .share-ico-link { display: none; }
.share-copy.copied .share-ico-ok { display: block; }
.share-copy.copied { background: var(--accent-hover, #334155); }

.share-block { border-top: 1px solid var(--border, #dee2e6); padding-top: 1rem; margin-bottom: 2.5rem; }
.share-block .share-head { color: var(--muted, #6c757d); text-align: center; margin-bottom: .2rem; }

.reader-toolbar {
    display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: .5rem;
    margin-bottom: 0; background-color: var(--heading, #333);
    border-block: 1px solid var(--heading, #333);
}
.reader-toolbar .hadith-icon-btn,
.reader-toolbar .hadith-icon-btn:visited,
.reader-toolbar .hadith-icon-btn:active {
    background-color: var(--bg, #fff); color: var(--heading, #1a1a1a);
    border-color: var(--border, #ced4da); text-decoration: none; box-shadow: none;
}
.reader-toolbar .hadith-icon-btn:hover,
.reader-toolbar .hadith-icon-btn:focus,
.reader-toolbar .hadith-icon-btn:focus-visible {
    background-color: var(--surface, #f1f5f9); color: var(--text, #1a1a1a);
    border-color: var(--border, #ced4da); text-decoration: none; box-shadow: none;
}
.reader-toolbar .hadith-icon-btn { padding: .5rem .75rem; }
.reader-toolbar .hadith-icon-btn svg,
.reader-toolbar .hadith-icon-btn .zoom-ico { width: var(--icon, 21px); height: var(--icon, 21px); }

.reader-toolbar .hadith-icon-btn svg.icon-wide {
    
    flex: none; height: var(--icon, 21px); width: auto;
}
.reader-toolbar .hadith-icon-btn i { font-size: var(--icon, 21px); line-height: 1; }
.reader-tools { align-items: center; }
.reader-tools > .btn, .reader-tools > .dropdown > .btn:not(.reader-more-btn) { width: var(--ctl, 44px); flex: none; }
.reader-tools > .dropdown,
.reader-toolbar .dropdown,
#quranCard .card-header .dropdown,
.reciter-toolbar .card-header .dropdown { display: inline-flex; align-items: center; }
.reader-tools > .dropdown > .btn { border-radius: 0; margin-inline-start: -1px; }

.listen-modal { border-radius: 0; background: var(--page, #fff); }
.listen-modal .modal-header, .listen-modal .modal-footer { border-color: var(--border, #dee2e6); }
.lm-seek { height: 3.2rem; padding: 0; }
.lm-seek::-webkit-slider-runnable-track { height: 22px; border-radius: 11px; background: var(--surface, #e2e8f0); }
.lm-seek::-moz-range-track { height: 22px; border-radius: 11px; background: var(--surface, #e2e8f0); }
.lm-seek::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; margin-top: -6px;
width: 34px; height: 34px; border-radius: 50%;
background: var(--accent, #0d6efd); border: 3px solid var(--page, #fff);
}
.lm-seek::-moz-range-thumb {
width: 34px; height: 34px; border: 3px solid var(--page, #fff); border-radius: 50%;
background: var(--accent, #0d6efd);
}
.lm-seek:focus { outline: none; box-shadow: none; }
.lm-ctl {
width: 3.4rem; height: 3.4rem; padding: 0; border-radius: 50%;
border: 1px solid var(--border, #dee2e6); background: var(--bg, #fcfcfd);
color: var(--accent, #0d6efd);
display: inline-flex; align-items: center; justify-content: center; line-height: 0;
transition: background-color .1s ease, color .1s ease;
}
.lm-ctl svg { width: 22px; height: 22px; }
html[lang^="ar"] .lm-flip { transform: scaleX(-1); }
html[lang^="en"] .lm-flip-en { transform: scaleX(-1); }
.lm-ctl:hover, .lm-ctl:focus { background: var(--surface, #f8f9fa); color: var(--accent-hover, #0a58ca); border-color: var(--border, #dee2e6); }
.lm-ctl:active { background: var(--surface-2, #e2e8f0); }
.lm-ctl:focus, .lm-ctl:focus-visible {
background: var(--surface, #f8f9fa); color: var(--accent-hover, #0a58ca);
box-shadow: none; outline: 2px solid var(--accent, #0d6efd); outline-offset: 2px;
}
.lm-ctl[aria-pressed="true"], .lm-ctl.active {
background: var(--surface-2, #e2e8f0); color: var(--accent-hover, #0a58ca);
border-color: var(--accent, #0d6efd);
}