/* Du'a pages: reading space (PDF / PowerPoint inside the page + audio underneath) and the small badges on the list.
   templates/library/duas.html, dua_detail.html; behaviour static/js/dua_reader.js.
   Only palette variables are used (the white PDF paper is the one fixed colour), so colour schemes, glass look and dark mode all reach it. */

/* ---------- badges on the list cards (the whole card opens the du'a page) ---------- */
.bh-lib-dua .bh-lib-title { display: block; text-decoration: none; }
.bh-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.bh-chip {
    display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600; line-height: 1.4;
    color: var(--c-primary); background: rgba(var(--rgb-accent), .1); border: 1px solid rgba(var(--rgb-accent), .38);
}
.bh-chip svg, .bh-rd-tools svg, .bh-rd-poster svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bh-chip svg { width: 1em; height: 1em; }

/* ---------- audio only (no slides) ---------- */
.bh-dua-files {
    padding: 1.2rem 1.2rem 1.3rem; border: 1px solid var(--c-border); border-radius: 16px; background: var(--c-card); text-align: center;
    box-shadow: 0 8px 22px rgba(var(--rgb-ink), .07);
}
.bh-dua-files-title { margin: 0 0 .9rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-kicker); }
.bh-dua-audio audio { width: 100%; }
html[lang="fa"] .bh-dua-files-title { letter-spacing: 0; text-transform: none; }
html[lang="fa"] .bh-chip { font-size: .85rem; }

/* ---------- reading space: a presentation-like dark frame ---------- */
.bh-reader {
    display: flex; flex-direction: column; margin-bottom: .6rem; border-radius: 18px; overflow: hidden; color: var(--c-salam);
    background: linear-gradient(160deg, var(--c-primary-deeper), var(--c-ink-4));
    box-shadow: 0 26px 46px -28px rgba(var(--rgb-ink), .75), 0 8px 18px -10px rgba(var(--rgb-ink), .5), inset 0 1px 0 rgba(255,255,255,.14);
}
.bh-rd-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .8rem; border-bottom: 1px solid rgba(var(--rgb-accent-light), .22); }
.bh-rd-name { min-width: 0; font-size: .85rem; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-rd-tools { display: flex; align-items: center; gap: .3rem; flex: none; }
.bh-rd-tools button {
    display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; cursor: pointer; color: var(--c-salam);
    border-radius: 50%; border: 1px solid rgba(var(--rgb-accent-light), .34); background: rgba(255,255,255,.07); transition: background-color .2s ease, transform .2s ease;
}
.bh-rd-tools button:hover { background: rgba(var(--rgb-accent-light), .3); }
.bh-rd-tools button:active { transform: scale(.94); }
.bh-rd-tools button[hidden] { display: none; }
.bh-rd-tools svg { width: 1.05rem; height: 1.05rem; }
.bh-rd-pageinfo, .bh-rd-zoominfo { min-width: 3.2rem; text-align: center; font-size: .8rem; font-variant-numeric: tabular-nums; opacity: .9; }
.bh-rd-zoominfo { min-width: 2.8rem; opacity: .7; }
.bh-reader.is-single .bh-rd-prev, .bh-reader.is-single .bh-rd-next, .bh-reader.is-single .bh-rd-pageinfo { display: none; }
.bh-reader:not(.js) .bh-rd-tools { display: none; }

.bh-rd-view { position: relative; flex: 1 1 auto; min-height: 0; }
.bh-rd-stage {
    height: min(76vh, 780px); min-height: 300px; overflow: auto; padding: 10px; outline: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    background: radial-gradient(120% 90% at 50% 0%, rgba(var(--rgb-accent-light), .1), transparent 70%), rgba(0,0,0,.28);
}
.bh-rd-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--c-gold); }
.bh-rd-pages { margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.bh-rd-page { position: relative; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.bh-rd-page canvas { display: block; }
.bh-rd-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 1rem; text-align: center; pointer-events: none; font-size: .95rem; color: var(--c-salam); }
.bh-rd-status[hidden] { display: none; }
.bh-rd-status.is-error { color: var(--c-gold); }
.bh-reader.is-failed .bh-rd-status { background: rgba(0,0,0,.3); }

/* PowerPoint: 16:9 frame with a poster; the viewer iframe fills it after the tap */
.bh-reader[data-kind="pptx"] .bh-rd-stage { height: auto; aspect-ratio: 16 / 9; min-height: 260px; padding: 0; overflow: hidden; position: relative; }
.bh-rd-poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1.2rem; text-align: center; }
.bh-rd-poster svg { width: 3.2rem; height: 3.2rem; color: var(--c-gold); opacity: .9; }
.bh-rd-poster p { margin: 0; max-width: 34rem; font-size: .82rem; opacity: .8; }
.bh-rd-poster[hidden] { display: none; }
.bh-rd-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }

/* audio bar: always under the pages, also in full screen */
.bh-rd-audio { display: flex; align-items: center; gap: .8rem; padding: .55rem .8rem; border-top: 1px solid rgba(var(--rgb-accent-light), .22); background: rgba(0,0,0,.2); }
.bh-rd-audio span { flex: none; font-size: .8rem; font-weight: 600; color: var(--c-gold); }
.bh-rd-audio audio { flex: 1 1 auto; min-width: 0; height: 40px; }
@media (max-width: 520px) {
    .bh-rd-audio { flex-wrap: wrap; gap: .3rem; }
    .bh-rd-audio audio { flex-basis: 100%; }
    .bh-rd-name { display: none; }
    .bh-rd-bar { justify-content: center; }
}

/* full screen: the whole box (pages + audio bar) */
.bh-reader:fullscreen, .bh-reader.is-full { border-radius: 0; height: 100%; width: 100%; margin: 0; }
.bh-reader:fullscreen .bh-rd-stage, .bh-reader.is-full .bh-rd-stage { height: 100%; }
.bh-reader:fullscreen[data-kind="pptx"] .bh-rd-stage, .bh-reader.is-full[data-kind="pptx"] .bh-rd-stage { aspect-ratio: auto; }
.bh-reader:-webkit-full-screen { border-radius: 0; height: 100%; width: 100%; margin: 0; }
.bh-reader:-webkit-full-screen .bh-rd-stage { height: 100%; }

.bh-rd-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: center; margin: .5rem 0 1.4rem; font-size: .9rem; }
.bh-rd-links a { color: var(--c-kicker); }
html[data-bh-mode="dark"] .bh-chip { color: var(--c-accent-light); background: rgba(var(--rgb-accent-light), .12); border-color: rgba(var(--rgb-accent-light), .4); }
html[data-bh-mode="dark"] .bh-dua-files { background: var(--bh-d-surface, var(--c-card)); border-color: var(--bh-d-line, var(--c-border)); }
html[data-bh-mode="dark"] .bh-rd-links a { color: var(--c-accent-light); }
@media (prefers-reduced-motion: reduce) { .bh-rd-tools button { transition: none; } }