/* ==========================================================================
   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: 0;
    line-height: 2.6;
    font-family: var(--font-arabic);
    font-size: var(--quran-ar-font-sz, 28px);
    color: var(--surah-text, #1a1a1a);
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 10px auto;
    max-width: 98%;
    position: relative;
    overflow: visible;
}

/* Old ::before frame removed — now on each .mushaf-page-card */
#surah.mushaf-mode::before {
    content: none;
}

/* ── Mushaf Page Card — each card = 1 "page" (8 ayahs) ── */
.mushaf-page-card {
    display: block;
    direction: rtl;
    text-align: justify;
    padding: 40px 42px;
    margin: 0 0 28px 0;
    background: linear-gradient(180deg, #fefcf4 0%, #fdf8ec 50%, #fefcf4 100%);
    border: 3px double rgba(160,130,80,0.35);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 15px rgba(0,0,0,0.04), inset 0 0 40px rgba(200,180,140,0.06);
    position: relative;
    overflow: hidden;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
/* Calligraphy-style inner frame */
.mushaf-page-card::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(160,130,80,0.22);
    border-radius: var(--radius-sm);
    pointer-events: none;
    z-index: 0;
}
/* Remove old text ::after */
.mushaf-page-card::after { content: none; }
.mushaf-page-card > * { position: relative; z-index: 1; }

/* ── SVG Calligraphy Corner Ornaments ── */
.mushaf-corner-svg {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.35;
}
.mushaf-corner-svg path { fill: #a08250; }
.mushaf-corner-tl { top: 4px; left: 4px; }
.mushaf-corner-tr { top: 4px; right: 4px; transform: scaleX(-1); }
.mushaf-corner-bl { bottom: 4px; left: 4px; transform: scaleY(-1); }
.mushaf-corner-br { bottom: 4px; right: 4px; transform: scale(-1,-1); }

/* Page number label */
.mushaf-page-num {
    display: block;
    text-align: center;
    font-size: var(--text-sm);
    color: rgba(160,130,80,0.6);
    margin-top: 10px;
    direction: ltr;
    font-family: sans-serif;
}

/* Dark mode for page cards */
[data-theme="dark"] .mushaf-page-card {
    background: linear-gradient(180deg, #1e1e22 0%, #23211e 50%, #1e1e22 100%);
    border-color: rgba(160,130,80,0.25);
    box-shadow: 0 2px 15px rgba(0,0,0,0.15), inset 0 0 40px rgba(80,70,50,0.08);
}
[data-theme="dark"] .mushaf-page-card::before { border-color: rgba(160,130,80,0.1); }
[data-theme="dark"] .mushaf-corner-svg path { fill: #8a7040; }
[data-theme="dark"] .mushaf-corner-svg { opacity: 0.25; }
[data-theme="dark"] .mushaf-page-num { color: rgba(160,130,80,0.4); }

/* Mobile page cards */
@media only screen and (max-width: 768px) {
    .mushaf-page-card {
        padding: 20px 16px;
        margin-bottom: 20px;
        border-radius: var(--radius-sm);
        border-width: 2px;
    }
    .mushaf-page-card::before { inset: 6px; }
    .mushaf-corner-svg { width: 28px; height: 28px; }
}


/* 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: var(--font-bn);
}

/* ── Bengali mushaf: LTR direction + Bengali font ── */
#surah.mushaf-mode.mushaf-mode-bn {
    direction: ltr;
    text-align: justify;
    font-family: var(--font-bn);
    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 {
    color: var(--dm-arabic, #e8d5b0);
}
[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);
}

/* ── Mushaf Ayah Translation Tooltip ── */
.mushaf-trans-tooltip {
    position: absolute;
    z-index: 9999;
    max-width: 360px;
    min-width: 180px;
    padding: 14px 18px;
    background: linear-gradient(180deg, #fefcf4 0%, #fdf8ec 100%);
    border: 2px solid rgba(160,130,80,0.35);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    font-family: var(--font-bn);
    font-size: var(--text-md);
    line-height: 1.7;
    color: #333;
    direction: ltr;
    text-align: right;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.mushaf-trans-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}
.mushaf-trans-tooltip .tt-title {
    display: block;
    font-size: var(--text-xs);
    color: rgba(160,130,80,0.7);
    margin-bottom: 6px;
    font-weight: 600;
}
.mushaf-trans-tooltip .tt-close {
    position: absolute;
    top: 4px;
    left: 8px;
    cursor: pointer;
    font-size: var(--text-18);
    color: #999;
    line-height: 1;
    background: none;
    border: none;
    padding: 2px 6px;
}
.mushaf-trans-tooltip .tt-close:hover { color: #666; }
/* Arrow pointing up (default — tooltip below ayah) */
.mushaf-trans-tooltip::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 30px;
    width: 14px;
    height: 14px;
    background: #fefcf4;
    border-top: 2px solid rgba(160,130,80,0.35);
    border-left: 2px solid rgba(160,130,80,0.35);
    transform: rotate(45deg);
}
/* Arrow pointing down (tooltip above ayah) */
.mushaf-trans-tooltip.tt-above::before {
    top: auto;
    bottom: -8px;
    border-top: none;
    border-left: none;
    border-bottom: 2px solid rgba(160,130,80,0.35);
    border-right: 2px solid rgba(160,130,80,0.35);
}
/* Dark mode */
[data-theme="dark"] .mushaf-trans-tooltip {
    background: linear-gradient(180deg, #2a2a2e 0%, #23211e 100%);
    border-color: rgba(160,130,80,0.25);
    color: #d4d4d4;
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
[data-theme="dark"] .mushaf-trans-tooltip::before {
    background: #2a2a2e;
    border-color: rgba(160,130,80,0.25);
}
[data-theme="dark"] .mushaf-trans-tooltip.tt-above::before {
    border-top: none;
    border-left: none;
    border-bottom: 2px solid rgba(160,130,80,0.25);
    border-right: 2px solid rgba(160,130,80,0.25);
}
[data-theme="dark"] .mushaf-trans-tooltip .tt-title { color: rgba(160,130,80,0.5); }
[data-theme="dark"] .mushaf-trans-tooltip .tt-close { color: #777; }

/* Mobile tooltip */
@media only screen and (max-width: 768px) {
    .mushaf-trans-tooltip {
        max-width: 90vw;
        font-size: var(--text-14);
        padding: 12px 14px;
        left: 5vw !important;
        right: auto !important;
    }
}

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