/* Immersive composition from salah-interactive.html, using the design's colours and components. */
.salah-immersive { margin: 0; overflow: hidden; background: #f8f9fa; }
.immersive-shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.immersive-header { flex: 0 0 auto; z-index: 1020; }
.immersive-walk { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.immersive-body { display: flex; flex: 1; min-height: 0; }
.immersive-sidebar { width: 255px; flex: 0 0 255px; }
.immersive-step-list { overflow-y: auto; flex: 1; min-height: 0; }
.immersive-step-list .step-item { width: 100%; text-align: left; border: 0; background: transparent; }
.immersive-step-list .step-item small { display: block; }
.immersive-step-list .step-circle { background: #e9ecef; color: #495057; box-shadow: none; width: 32px; height: 32px; font-size: 14px; }
.immersive-step-list .step-item.active .step-circle { background: #198754; color: #fff; }
.immersive-step-list .step-item.completed .step-circle { background: #d1e7dd; color: #146c43; }
.immersive-main { flex: 1; min-width: 0; overflow-y: auto; padding: 24px; scrollbar-gutter: stable; }
.immersive-card { border: 0; background: transparent; box-shadow: none; }
/* The posture drawings are 292x470 portraits. The box is reserved so the panel does not jump from step to
   step, and the picture is fitted inside it: never cropped at the head or the feet, never stretched. */
.immersive-position-image { width: 100%; height: min(46vh, 430px); object-fit: contain; object-position: center; }
.immersive-controls { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: max(16px, env(safe-area-inset-bottom)) !important; }
.immersive-controls .btn { min-height: 42px; }
.immersive-main .quran-text { font-size: 30px; color: #16563e; }
.salah-large-text .immersive-main .quran-text { font-size: 42px; }
.immersive-main .SalatStepsTimeline { display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 3px 0 12px; }
.immersive-main .SalatStepsTimeline button { border-radius: 50%; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid #dee2e6; background: transparent; color: inherit; font-size: 13px; }
.immersive-main .SalatStepsTimeline button.active { background: #198754; color: white; border-color: #198754; }
.immersive-main .SalatStepsTimeline button.completed { background: #d1e7dd; color: #146c43; border-color: #d1e7dd; }
.immersive-main .SalatStepsTimeline::before { display: none; }
.immersive-main .SalatStepsTimeline .step-circle { width: auto; height: auto; background: transparent; color: inherit; box-shadow: none; font-size: inherit; }
.immersive-shell #paSelectorPanel { width: min(850px, calc(100% - 32px)); margin: 20px auto; overflow-y: auto; }
.immersive-shell #paResume { width: min(850px, calc(100% - 32px)); margin: 16px auto 0; }
.immersive-shell #paCompletePanel { width: min(760px, calc(100% - 32px)); margin: auto; overflow-y: auto; padding: 24px 0; }
.immersive-shell #paCompletePanel h3 { font-size: 2rem; }
.salah-immersive .offcanvas { --bs-offcanvas-width: 420px; max-width: 92vw; }
/* Change-prayer drawer: the design's two-phase header. */
.pa-drawer-num { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; flex: 0 0 28px; }
.pa-drawer-rule { height: 2px; background: rgba(0,0,0,.1); }
.pa-drawer-type.active, .pa-drawer-prayer.active { border-color: #198754 !important; box-shadow: inset 0 0 0 1px #198754; }
body.dark .pa-drawer-rule { background: rgba(255,255,255,.15); }
.salah-immersive button:focus-visible, .salah-immersive a:focus-visible { outline: 3px solid #d6a849; outline-offset: 3px; }
/* Male/Female and EN/العربية, where the design puts them: at the right-hand end of the header. */
.salah-switch .btn.active { background: #198754; border-color: #198754; color: #fff; }
body.dark .salah-switch .btn:not(.active) { color: #e4e9ef; }
/* Arabic: the walkthrough is read right to left, and the recitation's Arabic leads while the transliteration
   and the English translation follow it. Nothing is translated here; only the order of attention changes. */
.salah-rtl .immersive-step-list .step-item { text-align: right; }
.salah-rtl .SalatStepsTimeline { flex-direction: row-reverse; justify-content: flex-end; }
.salah-rtl #paRakatPills { flex-direction: row-reverse; }
.salah-rtl .immersive-main .quran-text { font-size: 34px; }
.salah-rtl #paTranslitCol .fs-14, .salah-rtl #paTranslationCol .fs-14 { font-size: 13px; }
.salah-rtl #paTranslit, .salah-rtl #paTranslation { font-size: 13px; opacity: .85; }
.salah-rtl #paInstrLangBadge { font-weight: 600; }
body.dark.salah-immersive { background: #151c24; }
body.dark .immersive-main .quran-text { color: #a8dfc3; }
body.dark .immersive-sidebar { background: #1c2530 !important; }
body.dark .immersive-step-list .step-item { color: #e4e9ef; }
body.dark .immersive-step-list .step-item.active { background: #234838; }
body.dark .immersive-main .bg-success-subtle { background: #203d32 !important; }
body.dark .immersive-main .bg-warning-subtle { background: #43391e !important; color: #f1dfad !important; }
@media (min-width: 992px)
{
    .immersive-sidebar { position: static; visibility: visible !important; transform: none !important; }
}
@media (max-width: 991.98px)
{
    .immersive-sidebar { width: 290px; }
    .immersive-main { padding: 20px; }
}
@media (max-width: 575.98px)
{
    .immersive-main { padding: 16px; }
    .immersive-position-image { height: 230px; }
    .immersive-controls { gap: 6px; }
    .immersive-controls .btn { font-size: 12px; padding: 8px 10px !important; }
    .immersive-shell #paRakatPills { display: none !important; }
    .immersive-start-heading h2 { font-size: 1.4rem !important; }
    .immersive-start-heading p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce)
{
    .salah-immersive *, .salah-immersive *::before, .salah-immersive *::after { scroll-behavior: auto !important; transition: none !important; }
}