/*
 * Mushaf reading mode styles.
 *
 * Inline panel that mirrors #tafsirSection chrome. All colors come from
 * the site's CSS vars (--card, --card2, --line, --text, --muted, --accent,
 * --accent-soft, --accent-muted, --accent-strong) so light/dark mode
 * adapt automatically.
 */

/* ============================================================
 * QCF4 fonts (page-specific Hafs_NN fonts are declared lazily by JS)
 * ============================================================ */
@font-face {
    font-family: "QCF4_QBSML";
    src: url("/fonts/qcf4/QCF4_QBSML.woff2") format("woff2");
    font-display: block;
}

@font-face {
    font-family: "QCF4_Hafs_01";
    src: url("/fonts/qcf4/QCF4_Hafs_01_W.woff2") format("woff2");
    font-display: block;
}

/* ============================================================
 * Mode toggle — iOS-style segmented control with Arabic labels
 * ============================================================ */
.mode-toggle {
    display: inline-flex;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
}

.mode-toggle__btn {
    direction: ltr;
    position: relative;
    display: inline-flex;
    align-items: stretch;
    width: 240px;
    height: 36px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease;
}

.mode-toggle__btn:hover {
    background: rgba(15, 23, 42, 0.09);
}

body.dark .mode-toggle__btn {
    background: rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.2);
}

body.dark .mode-toggle__btn:hover {
    background: rgba(148, 163, 184, 0.20);
}

.mode-toggle__labels {
    /* RTL so the first label in source order (Tafsir) renders on the right */
    direction: rtl;
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

.mode-toggle__label {
    flex: 1;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    pointer-events: none;
    transition: color 200ms ease, font-weight 200ms ease;
    white-space: nowrap;
    padding: 0 6px;
}

/* Active label: dark text on the white pill knob */
[data-app-mode="tafsir"] .mode-toggle__label--tafsir,
[data-app-mode="mushaf"] .mode-toggle__label--mushaf {
    color: var(--accent-strong);
    font-weight: 800;
}

/* Dark mode: inactive labels brighter, active label is
 * pure black on the white pill for maximum contrast. */
body.dark .mode-toggle__label {
    color: #e2e8f0;
}

[data-app-mode="tafsir"] body.dark .mode-toggle__label--tafsir,
[data-app-mode="mushaf"] body.dark .mode-toggle__label--mushaf {
    color: #0f172a;
    font-weight: 800;
}

/* The pill-shaped knob behind the active label */
.mode-toggle__knob {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1;
}

/* Dark mode: keep knob WHITE for contrast against dark bg */
body.dark .mode-toggle__knob {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Tafsir mode: knob on the visual RIGHT (covers the Tafsir label
   which renders on the right because of direction:rtl on the labels). */
[data-app-mode="tafsir"] .mode-toggle__knob {
    transform: translateX(100%);
}

/* Mushaf mode: knob on the visual LEFT (covers the Mushaf label). */
[data-app-mode="mushaf"] .mode-toggle__knob {
    transform: translateX(0);
}

.mode-toggle--in-search {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

/* ============================================================
 * Mushaf panel — inline, mirrors #tafsirSection chrome
 * ============================================================ */
.mushaf-root {
    display: none;
    position: relative;
}

.mushaf-root.is-open {
    display: block;
}

.mx-auto.max-w-4xl.has-mushaf>#tafsirSection,
.mx-auto.max-w-4xl.has-mushaf>#versePanel {
    display: none !important;
}

/* Fix 4: opacity transitions used by setAppMode to fade panels in/out
 * sequentially during a mode toggle. mode-fade-out: fade to 0 over 180ms.
 * mode-fade-in: starts at 0; JS removes the class on the next frame so the
 * panel animates back to 1. */
.mushaf-root,
#tafsirSection {
    transition: opacity 180ms ease;
}

.mode-fade-out {
    opacity: 0 !important;
    pointer-events: none;
}

.mode-fade-in {
    opacity: 0;
}

/* ============================================================
 * Surah header — small "سورة" label above the large Arabic name.
 * The whole header fades together when dimmed (non-target surah).
 * ============================================================ */
.mushaf-surah-header {
    text-align: center;
    margin: 0 auto 22px;
    line-height: 1.15;
    transition: opacity 250ms ease, filter 250ms ease;
}

.mushaf-surah-header:first-child {
    margin-top: 0;
}

.mushaf-surah-header__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.mushaf-surah-header__name {
    display: block;
    font-family: "Amiri", "MeQuran", serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}

/* ============================================================
 * Page footer (centered "صفحة N")
 * ============================================================ */
.mushaf-page-footer {
    text-align: center;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.06em;
}

/* ============================================================
 * Page area + transitions (200ms for snappier feel)
 * ============================================================ */
.mushaf-stage {
    position: relative;
    min-height: 320px;
}

.mushaf-pages {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.mushaf-page {
    --line-gap: 6px;
    --font-size: 32px;
    width: 100%;
    padding: 0 8px 8px;
    text-align: center;
    direction: rtl;
}

.mushaf-page--animating {
    position: absolute;
    inset: 0;
}

/* Keyframe fade: 0% → 100% opacity — guaranteed to run */
@keyframes mushafFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes mushafFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.mushaf-page--fade-in {
    animation: mushafFadeIn 250ms ease-out both;
}

.mushaf-page--fade-out {
    animation: mushafFadeOut 200ms ease-in both;
}

/* Font size presets — only "m" (عادي, default) and "s" (صغير) now. */
[data-font-size="m"] .mushaf-page {
    --font-size: 32px;
    --line-gap: 6px;
}

[data-font-size="s"] .mushaf-page {
    --font-size: 26px;
    --line-gap: 4px;
}

/* ============================================================
 * Lines + words
 * ============================================================ */
.mushaf-line {
    line-height: 1.85;
    margin-bottom: var(--line-gap);
    font-size: var(--font-size);
    text-align: center;
    word-spacing: 0;
    letter-spacing: 0;
    white-space: nowrap; /* Mushaf lines must never wrap — each line is an exact replica of the printed page */
}

.mushaf-line--bismillah {
    font-family: "QCF4_Hafs_01", serif;
    text-align: center;
    margin: 8px 0 10px;
    font-size: calc(var(--font-size) * 1.0);
}

.mushaf-ayah {
    cursor: pointer;
    border-radius: 6px;
    /* In RTL, the right side is the start of the ayah. We add 4px padding to the right
       to extend the box slightly, while keeping 0px on the left to keep it tight. */
    padding: 2px 4px 2px 0px;
    transition: background 600ms ease, box-shadow 600ms ease, opacity 250ms ease, filter 250ms ease;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Hover effect disabled per user request */

.mushaf-ayah--target {
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent-soft);
    border-radius: 6px;
}

.mushaf-ayah--playing {
    background: rgba(34, 197, 94, 0.14);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.14);
    border-radius: 6px;
}

body.dark .mushaf-ayah--playing {
    background: rgba(110, 231, 183, 0.16);
    box-shadow: 0 0 0 1px rgba(110, 231, 183, 0.16);
}

.mushaf-word {
    display: inline-block;
}

.mushaf-end {
    display: inline-block;
    /* In RTL, the right margin separates the symbol from the text.
       Left margin is 0 to prevent the highlight box from extending too far left. */
    margin: 0 4px 0 0;
}

/* ============================================================
 * Target-surah focus dimming (Fix 3: dimmed surahs are now clickable
 * — click any dimmed ayah or its dimmed header to focus that surah)
 * ============================================================ */
.mushaf-ayah--dimmed,
.mushaf-surah-header--dimmed,
.mushaf-line--bismillah.mushaf-line--dimmed {
    opacity: 0.30;
    filter: saturate(0.55);
    cursor: pointer;
}

.mushaf-ayah--dimmed:hover,
.mushaf-surah-header--dimmed:hover {
    opacity: 0.55;
    filter: saturate(0.85);
}

/* ============================================================
 * On-screen page nav arrows
 * ============================================================ */
.mushaf-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--card), var(--card2));
    border: 1px solid var(--line);
    color: var(--text);
    cursor: pointer;
    transition: opacity 200ms ease, background 150ms ease, transform 150ms ease;
    z-index: 4;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.mushaf-nav:hover {
    transform: translateY(-50%) scale(1.04);
}

.mushaf-nav:active {
    transform: translateY(-50%) scale(0.96);
}

.mushaf-nav svg {
    width: 18px;
    height: 18px;
}

.mushaf-nav--prev {
    right: -6px;
}

.mushaf-nav--next {
    left: -6px;
}

.mushaf-nav[disabled] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* ============================================================
 * Floating ayah action menu (two views: main, settings)
 * ============================================================ */
.mushaf-ayah-menu {
    position: absolute;
    padding: 6px;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--card), var(--card2));
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16),
        0 2px 8px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 30;
    opacity: 0;
    transform: translateY(4px) scale(0.96);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

.mushaf-ayah-menu--open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

body.dark .mushaf-ayah-menu {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

.mushaf-ayah-menu__main {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mushaf-ayah-menu__settings {
    display: none;
    flex-direction: column;
    gap: 14px;
    width: 280px;
    padding: 6px 4px;
}

.mushaf-ayah-menu[data-view="settings"] .mushaf-ayah-menu__main {
    display: none;
}

.mushaf-ayah-menu[data-view="settings"] .mushaf-ayah-menu__settings {
    display: flex;
}

.mushaf-ayah-menu__btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: transparent;
    border: 0;
    color: var(--text);
    cursor: pointer;
    transition: background 150ms ease;
    padding: 0;
}

.mushaf-ayah-menu__btn:hover {
    background: var(--accent-soft);
}

.mushaf-ayah-menu__btn svg {
    width: 20px;
    height: 20px;
}

/* Volume mute toggle (lives inside the playback bar). */
.mushaf-volume-icon--muted {
    color: var(--muted);
}

/* ============================================================
 * Settings sub-view (sections, labels, chips)
 * ============================================================ */
.mushaf-settings__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mushaf-settings__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-align: right;
    padding-right: 2px;
}

.mushaf-settings__row {
    display: flex;
    gap: 6px;
}

/* Reciter row: compact horizontal pills, wraps to a second line on narrow
 * screens. Pills feel like controls, not list items. */
.mushaf-settings__row--pills {
    flex-wrap: wrap;
    gap: 6px;
}

.mushaf-settings__row--pills .mushaf-settings__chip {
    flex: 0 1 auto;
    min-height: 28px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.mushaf-settings__row--pills .mushaf-settings__chip[aria-checked="true"] {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #fff;
}

body.dark .mushaf-settings__row--pills .mushaf-settings__chip[aria-checked="true"] {
    color: #0b1326;
}

.mushaf-settings__chip {
    flex: 1;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--card2);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    text-align: center;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
    font-family: inherit;
}

.mushaf-settings__chip:hover {
    background: var(--accent-soft);
}

.mushaf-settings__chip[aria-checked="true"] {
    background: var(--accent-soft);
    border-color: var(--accent-muted);
    color: var(--accent-strong);
}

/* ============================================================
 * Floating playback bar (Fix 1b)
 *   - sits below the mushaf page content
 *   - frosted-glass card, hairline border, low elevation
 *   - fades in when audio starts, fades out 3s after audio stops
 * ============================================================ */
.mushaf-playback-bar {
    margin-top: 18px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--card2);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
}

.mushaf-playback-bar--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

body.dark .mushaf-playback-bar {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.32);
}

.mushaf-playback-bar__indicator {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    direction: rtl;
    padding-inline-start: 6px;
}

.mushaf-playback-bar__controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mushaf-playback-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: transparent;
    border: 0;
    color: var(--text);
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
    padding: 0;
}

.mushaf-playback-btn:hover {
    background: var(--accent-soft);
}

.mushaf-playback-btn:active {
    transform: scale(0.94);
}

.mushaf-playback-btn svg {
    width: 16px;
    height: 16px;
}

.mushaf-playback-btn--primary {
    width: 40px;
    height: 40px;
    background: var(--accent-strong);
    color: #fff;
}

.mushaf-playback-btn--primary:hover {
    background: var(--accent-strong);
    filter: brightness(1.05);
}

.mushaf-playback-btn--primary svg {
    width: 18px;
    height: 18px;
}

body.dark .mushaf-playback-btn--primary {
    color: #0b1326;
}

/* ============================================================
 * Mushaf toolbar — settings + play/stop at top of mushaf panel
 * ============================================================ */
.mushaf-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    direction: ltr;
}

.mushaf-toolbar__btn-wrap {
    position: relative;
    display: inline-flex;
}

.mushaf-toolbar__btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--card2);
    border: 1px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, transform 200ms ease;
    padding: 0;
}

.mushaf-toolbar__btn svg {
    width: 18px;
    height: 18px;
}

.mushaf-toolbar__btn:hover {
    background: var(--accent-soft);
    color: var(--text);
}

.mushaf-toolbar__btn--settings:hover {
    transform: rotate(30deg);
}

/* The play button gets a green tint when audio is active */
.mushaf-toolbar__btn--play[data-playing="true"] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
}

body.dark .mushaf-toolbar__btn--play[data-playing="true"] {
    background: rgba(110, 231, 183, 0.15);
    color: #6ee7b7;
    border-color: rgba(110, 231, 183, 0.25);
}

/* Dropdown panels shared styling */
.mushaf-toolbar__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    padding: 16px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.14),
        0 4px 12px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 40;
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.dark .mushaf-toolbar__dropdown {
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}

.mushaf-toolbar__dropdown--open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.mushaf-toolbar__dropdown--settings {
    width: 300px;
}

/* Volume dropdown: appears when audio is playing */
.mushaf-toolbar__dropdown--volume {
    width: 220px;
}

/* Volume row inside dropdown */
.mushaf-toolbar__vol-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mushaf-toolbar__vol-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: transparent;
    border: 0;
    color: var(--text);
    cursor: pointer;
    transition: background 150ms ease;
    padding: 0;
}

.mushaf-toolbar__vol-btn svg {
    width: 14px;
    height: 14px;
}

.mushaf-toolbar__vol-btn:hover {
    background: var(--accent-soft);
}

.mushaf-toolbar__slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--line);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}

.mushaf-toolbar__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-strong);
    border: 2px solid var(--card);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}

.mushaf-toolbar__slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-strong);
    border: 2px solid var(--card);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}

/* ============================================================
 * Mobile adjustments
 * ============================================================ */
@media (max-width: 640px) {
    /* Reduce padding on the mushaf root to maximise content width.
       The class p-6 (24px) on .mushaf-root is overridden here. */
    .mushaf-root {
        padding: 12px 6px !important;
    }

    .mushaf-page {
        padding: 4px 0;
    }

    /* Font-size is now calculated dynamically by autoFitFontSize() in JS,
       so we only set sensible CSS defaults as initial values.  The JS will
       override --font-size on each .mushaf-page after measuring lines. */
    [data-font-size="m"] .mushaf-page {
        --font-size: 24px;
    }

    [data-font-size="s"] .mushaf-page {
        --font-size: 20px;
    }

    .mushaf-nav {
        width: 36px;
        height: 36px;
    }

    .mushaf-nav--prev {
        right: 2px;
    }

    .mushaf-nav--next {
        left: 2px;
    }

    .mushaf-surah-header__name {
        font-size: 26px;
    }

    .mushaf-surah-header__label {
        font-size: 12px;
    }

    .mushaf-toolbar__dropdown--settings {
        width: 260px;
    }

    .mushaf-playback-bar {
        padding: 6px 10px;
        gap: 8px;
        margin-top: 14px;
    }

    .mushaf-playback-bar__indicator {
        font-size: 12px;
    }

    .mode-toggle__btn {
        width: 220px;
    }

    .mode-toggle__label {
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .mode-toggle__btn {
        width: 200px;
        height: 34px;
    }

    .mode-toggle__label {
        font-size: 11px;
    }
}