/* ==========================================================================
   MUSHAF MODE — Continuous flowing Arabic text (book-like Quran layout)
   Triggered by "শুধু আরবি টেক্সট" setting. Renders ayahs as a single
   flowing paragraph like a printed Quran page.
   Lazy-loaded: only needed when mushaf mode is activated.
   ========================================================================== */

/* ── Container: override flex→block so inline children can flow ── */
#surah.mushaf-mode {
    display: block !important;
    flex-direction: unset !important;
    align-items: unset !important;
    justify-content: unset !important;
    direction: rtl;
    text-align: justify;
    padding: 30px 35px;
    line-height: 2.6;
    font-family: 'PDMS Islam', 'Nooheri', serif;
    font-size: var(--quran-ar-font-sz, 28px);
    color: var(--surah-text, #1a1a1a);
    background: linear-gradient(180deg, #fefcf4 0%, #fdf8ec 50%, #fefcf4 100%);
    border: 3px double rgba(160,130,80,0.35);
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.04), inset 0 0 40px rgba(200,180,140,0.06);
    margin: 10px auto;
    max-width: 98%;
    position: relative;
    overflow: hidden;
}

/* Decorative inner frame — like a printed Mushaf page */
#surah.mushaf-mode::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(160,130,80,0.18);
    border-radius: 8px;
    pointer-events: none;
    z-index: 0;
}

/* Content must sit above the ::before frame */
#surah.mushaf-mode > * { position: relative; z-index: 1; }

/* ── Bismillah — centered block header above flowing text ── */
#surah.mushaf-mode .basmalah {
    display: block !important;
    text-align: center;
    margin: 0 auto 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(160,130,80,0.2);
    width: 100%;
    direction: ltr;
}

/* ── Flatten every element in the ayah card chain to inline ── */
#surah.mushaf-mode .ayah.grassCard,
#surah.mushaf-mode .ayah-wrapper,
#surah.mushaf-mode .ayah-upperpart,
#surah.mushaf-mode .ayah-p.normalArabicText,
#surah.mushaf-mode .arabicText.element {
    display: inline !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: 0 !important;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    direction: rtl;
}

/* ── Hide ALL card UI elements ── */
#surah.mushaf-mode .ayah-upperpart-mobile,
#surah.mushaf-mode .ayah-bulletss,
#surah.mushaf-mode .ayah-lowerpart,
#surah.mushaf-mode .suraAyatNumber,
#surah.mushaf-mode .suraAyatNumberMobile {
    display: none !important;
}

/* ── Arabic mushaf: DB text already contains ﴿١﴾ markers — no ::after needed ── */
#surah.mushaf-mode .ayah.grassCard::after {
    content: none;
}

/* ── Bengali mushaf: show Bengali ayah numbers ﴿৩﴾ after each verse ── */
#surah.mushaf-mode.mushaf-mode-bn .ayah.grassCard::after {
    content: "\a0\FD3F" attr(data-aya-bn) "\FD3E\a0";
    display: inline;
    font-size: 0.85em;
    color: #7b5ea7;
    vertical-align: middle;
    white-space: nowrap;
    font-family: 'Kalpurush', sans-serif;
}

/* ── Bengali mushaf: LTR direction + Bengali font ── */
#surah.mushaf-mode.mushaf-mode-bn {
    direction: ltr;
    text-align: justify;
    font-family: 'Kalpurush', sans-serif;
    font-size: var(--quran-bn-font-sz, 23px);
    line-height: 2.2;
}

/* Hide Arabic bismillah SVG in Bengali-only mode */
#surah.mushaf-mode.mushaf-mode-bn .basmalah {
    display: none !important;
}

#surah.mushaf-mode.mushaf-mode-bn .ayah.grassCard,
#surah.mushaf-mode.mushaf-mode-bn .ayah-wrapper,
#surah.mushaf-mode.mushaf-mode-bn .ayah-upperpart,
#surah.mushaf-mode.mushaf-mode-bn .translationText.element {
    direction: ltr;
    font-family: inherit;
}

/* Bengali mushaf: HIDE Arabic text path */
#surah.mushaf-mode.mushaf-mode-bn .ayah-p.normalArabicText,
#surah.mushaf-mode.mushaf-mode-bn .arabicText.element,
#surah.mushaf-mode.mushaf-mode-bn .ayah-middle-part {
    display: none !important;
}

/* Bengali mushaf: show translations inline */
#surah.mushaf-mode.mushaf-mode-bn .ayah-lowerpart,
#surah.mushaf-mode.mushaf-mode-bn .main-surahbox {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
#surah.mushaf-mode.mushaf-mode-bn .translationText.element {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit;
    line-height: inherit;
}
#surah.mushaf-mode.mushaf-mode-bn .translationText .transLationTitle {
    display: none !important;
}

/* ── Hover highlight on each ayah span ── */
#surah.mushaf-mode .ayah.grassCard {
    transition: background-color 0.15s ease;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
#surah.mushaf-mode .ayah.grassCard:hover {
    background-color: rgba(160, 130, 80, 0.12) !important;
    border-radius: 6px !important;
    cursor: pointer;
}

/* ── Word-by-word view inside mushaf — Arabic words inline, meanings hidden ── */
#surah.mushaf-mode .ayah-middle-part {
    display: inline !important;
}
#surah.mushaf-mode .ayah-middle-part .bywords-word {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
}
#surah.mushaf-mode .ayah-middle-part .bywords-word .trans-verse {
    display: none !important;
}
#surah.mushaf-mode .ayah-middle-part .bywords-word .ayah-paragraf {
    display: inline !important;
    font-size: inherit;
    padding: 0 2px;
    margin: 0;
    cursor: default;
    font-family: inherit;
}

/* ── Dark theme ── */
[data-theme="dark"] #surah.mushaf-mode {
    background: linear-gradient(180deg, #1e1e22 0%, #23211e 50%, #1e1e22 100%);
    border-color: rgba(160,130,80,0.25);
    color: var(--dm-arabic, #e8d5b0);
    box-shadow: 0 2px 15px rgba(0,0,0,0.15), inset 0 0 40px rgba(80,70,50,0.08);
}
[data-theme="dark"] #surah.mushaf-mode::before {
    border-color: rgba(160,130,80,0.1);
}
[data-theme="dark"] #surah.mushaf-mode .arabicText.element {
    color: var(--dm-arabic, #e8d5b0) !important;
}
[data-theme="dark"] #surah.mushaf-mode.mushaf-mode-bn .ayah.grassCard::after {
    color: #c9a0dc;
}
[data-theme="dark"] #surah.mushaf-mode.mushaf-mode-bn .translationText.element {
    color: var(--dm-text, #d4d4d4) !important;
}
[data-theme="dark"] #surah.mushaf-mode .ayah.grassCard:hover {
    background-color: rgba(160, 130, 80, 0.08) !important;
}
[data-theme="dark"] #surah.mushaf-mode .basmalah {
    border-bottom-color: rgba(160,130,80,0.12);
}

/* ── Mobile mushaf ── */
@media only screen and (max-width: 768px) {
    #surah.mushaf-mode {
        padding: 20px 16px;
        font-size: var(--quran-ar-font-sz, 22px);
        line-height: 2.3;
        max-width: 100%;
        border-radius: 8px;
        border-width: 2px;
    }
    #surah.mushaf-mode.mushaf-mode-bn {
        font-size: var(--quran-bn-font-sz, 19px);
        line-height: 2.0;
    }
    #surah.mushaf-mode::before { inset: 6px; }
}