/* Immersive prayer display. Flex and opaque colors also support older WebViews. */
@font-face { font-family: 'Cairo'; src: url('/assets/fonts/Cairo-Variable.ttf') format('truetype'); font-style: normal; font-weight: 400; font-weight: 200 900; font-display: swap; }
:root {
    --theme-primary: #0093a4;
    --theme-secondary: #0093a2;
    --theme-gradient: linear-gradient(135deg, #0093a4, #0093a2);
    --scene-tint: rgba(10, 48, 36, .2);
    --page-tone: #142e27;
    --surface-background: linear-gradient(145deg, rgba(46,83,69,.74), rgba(18,46,37,.84));
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { background: #111c2a; }
body { color: #f6f1e5; background: #121e2d; background: var(--page-tone); font-family: 'Cairo', Tahoma, Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; }
p, h1, h2, ul { margin: 0; }
button { font: inherit; }
.hidden { display: none !important; }
.container-fluid { height: 100%; width: 100%; padding: 18px 24px 0; display: flex; flex-direction: column; }
.prayer-stage { position: relative; display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0; border: 1px solid rgba(231,227,209,.25); border-radius: 24px; overflow: hidden; background: #162b38; }
.scene-image, .scene-shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.scene-image { display: block; top: -22%; bottom: auto; width: 100%; height: 122%; background: url('/assets/images/mosque-sunset-balanced.jpg') center bottom / cover no-repeat; }
.scene-shade { background: linear-gradient(90deg, rgba(5,16,16,.38), rgba(9,22,25,.1) 55%, rgba(8,20,22,.25)), linear-gradient(0deg, rgba(6,17,20,.43), rgba(8,17,20,.1) 65%, rgba(6,17,20,.22)); }
.scene-shade:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: transparent; background: var(--scene-tint); }
/* The whole scene follows the prayer in the headline. Current prayer is marked separately. */
body[data-scene-phase='Fajr'] { --page-tone: #232b38; --scene-tint: rgba(38,36,65,.2); --surface-background: linear-gradient(145deg, rgba(67,74,100,.74), rgba(32,41,63,.84)); }
body[data-scene-phase='Sunrise'] { --page-tone: #36362b; --scene-tint: rgba(105,68,30,.16); --surface-background: linear-gradient(145deg, rgba(99,95,66,.74), rgba(51,58,41,.84)); }
body[data-scene-phase='Dhuhr'] { --page-tone: #142e27; --scene-tint: rgba(8,47,31,.18); --surface-background: linear-gradient(145deg, rgba(46,83,69,.74), rgba(18,46,37,.84)); }
body[data-scene-phase='Asr'] { --page-tone: #383126; --scene-tint: rgba(86,60,22,.18); --surface-background: linear-gradient(145deg, rgba(102,91,64,.74), rgba(53,55,39,.84)); }
body[data-scene-phase='Maghrib'] { --page-tone: #302333; --scene-tint: rgba(63,24,48,.22); --surface-background: linear-gradient(145deg, rgba(97,62,87,.74), rgba(46,30,53,.84)); }
body[data-scene-phase='Isha'] { --page-tone: #162338; --scene-tint: rgba(7,19,49,.16); --surface-background: linear-gradient(145deg, rgba(46,67,100,.74), rgba(18,33,58,.84)); }
body[data-scene-phase='Fajr'] .scene-image, body[data-scene-phase='Maghrib'] .scene-image { background-image: url('/assets/images/mosque-dusk-balanced.jpg'); }
body[data-scene-phase='Sunrise'] .scene-image, body[data-scene-phase='Asr'] .scene-image { background-image: url('/assets/images/mosque-day-balanced.jpg'); }
body[data-scene-phase='Isha'] .scene-image { background-image: url('/assets/images/mosque-night-moon-low.jpg'); }
.plain-backgrounds .scene-image { display: none; }
.eyebrow { font-size: 11px; font-weight: 400; letter-spacing: .17em; line-height: 1.5; }
.header { position: relative; z-index: 1; display: flex; align-items: center; flex: 0 0 auto; min-height: 82px; padding: 17px 30px; border-bottom: 1px solid rgba(225,233,228,.14); }
.site-identity { flex: 1 1 auto; min-width: 0; padding-right: 20px; }
.site-identity h1 { font-size: 18px; font-weight: 500; line-height: 1.25; overflow-wrap: break-word; }
.site-location { display: block; color: #e6e9df; font-size: 16px; margin-top: 5px; }
.site-context { display: flex; align-items: center; }
.site-context .site-location { margin-top: 0; }
#siteTitle:not(.hidden) + .site-context { margin-top: 2px; }
.header .logo { flex: 0 1 20%; width: 20%; min-width: 0; margin-right: 20px; }
.header .logo img { display: block; width: auto; max-width: 100%; max-height: 53px; object-fit: contain; }
.header .logo.logo-compact { flex: 0 0 auto; width: 54px; }
.header .logo.logo-compact img { max-width: 54px; }
.eid-greeting { color: #eee0ba; font-size: 24px; }
.header .right { display: flex; align-items: center; flex: 0 0 auto; }
.datesection { text-align: right; font-size: 14px; line-height: 1.5; }
.datehijri { display: block; color: #dedbc8; font-family: 'Cairo', Tahoma, Arial, sans-serif; font-size: 19px; }
.weather-info { display: flex; align-items: center; margin-left: 26px; padding-left: 24px; border-left: 1px solid rgba(225,233,228,.22); white-space: nowrap; }
.weather-info span { font-size: 21px; font-weight: 400; }
.weather-symbol { display: inline-block; margin-left: 8px; font-family: 'Segoe UI Symbol', sans-serif; }
.ticker-caption { text-align: right; padding-left: 24px; }
.ticker-caption .eyebrow { font-size: 8px; color: #d2d7cf; }
.ticker-caption p { font-size: 38px; font-weight: 350; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.fullscreen-button { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; margin-left: 22px; padding: 10px; background: rgba(12,24,33,.4); color: #ece6d5; border: 1px solid rgba(227,225,207,.3); border-radius: 50%; cursor: pointer; }
.fullscreen-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
/* The headline and orbit share the available height; the schedule stays below. */
.main-content-row { position: relative; z-index: 1; display: flex; flex: 1 1 0%; min-height: 0; margin: 12px 4.5%; }
.eventssection { width: 100%; min-width: 0; display: flex; flex-direction: column; }
.eventssection > .row.info { display: flex; flex: 1 1 0%; min-height: 0; }
.toast-info.prayer { position: relative; width: 100%; min-width: 0; min-height: 0; }
.prayer-countdown-content { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; }
.next-prayer-details { flex: 1 1 55%; align-self: flex-start; min-width: 0; margin-top: 16px; padding: 8px 20px 8px 12px; }
.hero-label { color: #e0dbc9; font-size: 12px; margin-bottom: 15px; }
.status-dot { display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: #ede0bd; vertical-align: middle; }
.next-prayer-title { line-height: 1.04; }
.next-prayer-title .prayername { font-size: 140px; font-size: clamp(80px, 10vw, 192px); font-weight: 350; letter-spacing: -.045em; }
.prayer-subtitle { display: block; width: 100%; text-align: left; font-family: 'Cairo', Tahoma, Arial, sans-serif; font-size: 56px; color: #e2dcc9; margin-top: 7px; line-height: 1.3; }
.next-prayer-schedule { display: flex; align-items: baseline; margin-top: 21px; }
.next-prayer-time { font-size: 90px; font-size: clamp(54px, 6.5vw, 128px); font-weight: 300; letter-spacing: -.045em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.prayer-date-hint { font-size: 16px; color: #e4e2d5; margin-left: 18px; }
.hero-footer { margin-top: 13px; color: #eff0e3; font-size: 20px; line-height: 1.6; }
.countdown-orbit { position: relative; flex: 0 0 auto; width: 340px; height: 340px; margin-right: 2.5%; border-radius: 50%; background: rgba(24,56,45,.86); background: var(--surface-background); box-shadow: 0 15px 60px rgba(0,0,0,.12), inset 0 0 35px rgba(215,223,214,.04); }
.countdown-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; fill: none; transform: rotate(-90deg); }
.ring-track { stroke: rgba(222,224,210,.2); stroke-width: 1.2; }
.ring-progress { stroke: #eee0b9; stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.countdown-inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 12px; }
.countdown-label { color: #f0ecdb; font-size: 16px; line-height: 1.5; letter-spacing: .04em; margin-bottom: 13px; text-align: center; }
.countdown { font-size: 56px; font-weight: 350; letter-spacing: -.045em; line-height: 1.18; white-space: nowrap; font-variant-numeric: tabular-nums; }
.countdown-units { margin-top: 12px; font-size: 16px; line-height: 1.5; color: #f0ecdb; text-align: center; }
.toast-info.prayer.hero-compact .hero-label { margin-bottom: 4px; font-size: 9px; font-size: calc(var(--hero-space, 260px) * .035); }
.toast-info.prayer.hero-compact .next-prayer-title .prayername { font-size: 64px; font-size: calc(var(--hero-space, 260px) * .27); }
.toast-info.prayer.hero-compact .prayer-subtitle { font-size: 30px; font-size: calc(var(--hero-space, 260px) * .10); margin-top: 0; }
.toast-info.prayer.hero-compact .next-prayer-time { font-size: 48px; font-size: calc(var(--hero-space, 260px) * .2); }
.toast-info.prayer.hero-compact .next-prayer-schedule { margin-top: 6px; }
.toast-info.prayer.hero-compact .hero-footer { margin-top: 5px; font-size: 14px; font-size: calc(var(--hero-space, 260px) * .052); }
.toast-info.prayer.hero-tight .hero-label { margin-bottom: 4px; font-size: 8px; }
.toast-info.prayer.hero-tight .next-prayer-title .prayername { font-size: 43px; }
.toast-info.prayer.hero-tight .prayer-subtitle { font-size: 24px; }
.toast-info.prayer.hero-tight .next-prayer-time { font-size: 33px; }
.toast-info.prayer.hero-tight .prayer-date-hint { font-size: 11px; }
.toast-info.prayer.hero-tight .next-prayer-schedule { margin-top: 7px; }
.toast-info.prayer.hero-tight .hero-footer { margin-top: 5px; font-size: 12px; }
.toast-info.prayer.hero-tight .countdown-label { font-size: 12px; margin-bottom: 6px; }
.toast-info.prayer.hero-tight .countdown-units { font-size: 12px; margin-top: 7px; }
/* Supplementary information is kept in a restrained strip. */
.community-strip { position: relative; z-index: 1; display: flex; flex: 0 0 auto; height: 116px; margin: 0 28px 12px; min-width: 0; }
.clocksection { display: flex; flex: 1 1 0%; min-width: 0; min-height: 0; }
.hadith { display: flex; align-items: center; flex: 1 1 0%; min-width: 0; min-height: 0; padding: 12px 19px; overflow: hidden; background: rgba(24,56,45,.86); background: var(--surface-background); border: 1px solid rgba(224,224,207,.2); border-radius: 13px; }
.hadith-heading { flex: 0 0 auto; margin-right: 20px; color: #d9d0b8; }
.hadith-heading .eyebrow { display: block; max-width: 92px; font-size: 8px; line-height: 1.8; }
.ornament { display: none; }
/* Two complete lines plus room for Arabic marks; longer reminders remain scrollable. */
.quote-content { flex: 1 1 auto; min-width: 0; max-height: 4em; overflow-y: auto; scrollbar-width: none; direction: rtl; text-align: center; font-family: 'Cairo', Tahoma, Arial, sans-serif; font-size: 22px; line-height: 2; }
.quote-content::-webkit-scrollbar { display: none; width: 0; height: 0; }
.hadith small { display: inline; color: #cccdbf; font-size: .65em; line-height: 1.5; margin: 0 9px; }
.eid-content { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; height: 100%; min-width: 0; }
.eid-content img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.hadith.eid-mode { background-position: center; background-repeat: no-repeat; background-size: cover; }
.display-error { position: relative; z-index: 1; flex: 0 0 auto; margin: 5px 20px; font-size: 12px; line-height: 1.5; padding: 7px; color: #ffe6af; background: rgba(20,35,30,.9); direction: ltr; text-align: left; }
.clocksection.has-events .hadith-heading { display: none; }
.clocksection > .event { flex: 1 1 0%; min-width: 0; overflow: auto; margin-left: 10px; }
.clocksection > .event:empty { display: none; }
.clocksection .hadith.hidden + .event { margin: 0; }
.friday-imam-row { flex: 0 1 29%; min-width: 0; margin-left: 12px; overflow: auto; }
.toast-info.friday-imam, .toast-info.event { min-height: 100%; padding: 11px 16px; border: 1px solid rgba(224,224,207,.2); border-radius: 13px; background: rgba(24,56,45,.86); background: var(--surface-background); }
.toast-info .row { display: flex; align-items: center; }
.toast-info .col-2 { flex: 0 0 24px; color: #e0cea2; }
.toast-info .col-10 { flex: 1 1 auto; min-width: 0; }
.friday-imam .name { color: #d7ceba; font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }
.friday-imam .imam-name { font-size: 17px; margin-top: 3px; overflow-wrap: break-word; }
.friday-imam .topic-label { display: inline; color: #cbd1c7; font-size: 10px; }
.friday-imam .topic-text { display: inline; font-size: 11px; margin-left: 5px; overflow-wrap: break-word; }
.toast-info.event { min-height: 0; margin-bottom: 6px; padding: 9px 13px; }
.toast-info.event .name { font-size: 12px; overflow-wrap: break-word; }
.toast-info.event .date { color: #c3cbbb; font-size: 10px; margin-top: 3px; }
.badge-row { display: flex; align-items: center; flex: 0 1 22%; min-width: 0; margin-left: 12px; }
.rq-info.medlem { display: flex; align-items: center; justify-content: flex-end; width: 100%; }
.rq-info.medlem img { display: block; width: auto; max-width: 48%; max-height: 62px; object-fit: contain; margin-left: 6px; border-radius: 5px; }
/* Glass prayer cards, with separate current and upcoming indicators. */
.prayertimesrow { position: relative; z-index: 1; flex: 0 0 auto; padding: 0 28px 24px; }
.schedule-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.prayertimes { display: flex; flex-direction: row-reverse; align-items: stretch; list-style: none; padding: 0; margin: 0 -5px; }
/* Paint each card on its explicitly sized inner box, not the RTL flex list item. */
.prayertimes > li { display: block; position: relative; flex: 1 1 0px; min-width: 0; margin: 0 5px; border-radius: 15px; list-style: none; }
.prayer-wrapper { direction: ltr; position: relative; height: 16vh; min-height: 128px; max-height: 186px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; border: 1px solid rgba(240,242,223,.3); border-radius: 15px; overflow: hidden; background: rgba(24,56,45,.86); background: var(--surface-background); background-clip: padding-box; box-shadow: inset 0 1px 0 rgba(255,255,239,.08), 0 5px 18px rgba(5,18,28,.08); }
.prayer-wrapper > * { flex-shrink: 0; }
.prayer-icon { display: block; flex: 0 0 auto; width: 24px; height: 24px; margin-bottom: 7px; fill: none; stroke: #e6e2d0; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.prayertimes .prayername { font-size: 13px; font-weight: 500; line-height: 1.5; color: #fbf7ec; }
.prayertime { font-size: 43px; font-size: clamp(29px, 3vw, 57px); line-height: 1.1; font-weight: 350; letter-spacing: -.04em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.iqamatime { font-size: 12px; line-height: 1.5; margin-top: 6px; color: #e7ebe1; }
.prayertimes > li.is-next .prayer-wrapper { border-color: rgba(244,233,201,.75); box-shadow: inset 0 0 24px rgba(247,234,190,.1); }
.prayertimes > li.highlight .prayer-wrapper { border-color: #ffdf84; box-shadow: inset 0 0 0 1px #ffdf84, 0 0 20px rgba(240,201,98,.18); }
.prayertimes > li.highlight .prayername, .prayertimes > li.highlight .prayertime { color: #ffe3a0; font-weight: 500; }
.prayertimes > li.highlight .iqamatime { color: #f1dfb0; }
.prayertimes > li.highlight .prayer-icon { stroke: #ffe3a0; }
.highlight .prayer-wrapper:after, .is-next .prayer-wrapper:after { position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: 20px; font-size: 9px; line-height: 1.5; font-weight: 600; letter-spacing: .04em; }
.is-next .prayer-wrapper:after { content: 'NÆSTE'; color: #f2e7c4; background: rgba(242,231,196,.1); }
.highlight .prayer-wrapper:after { content: 'NU'; color: #ffe3a0; background: rgba(255,227,160,.15); }
/* RTL mirrors the flex layout once; numeric times retain their reading order. */
.countdown, .prayertime, .next-prayer-time, .ticker-caption p, #iqamaCountdown { direction: ltr; unicode-bidi: isolate; font-family: 'Cairo', Tahoma, Arial, sans-serif; }
[dir='rtl'] .site-identity { padding-right: 0; padding-left: 20px; }
[dir='rtl'] .header .logo { margin-right: 0; margin-left: 20px; }
[dir='rtl'] .datesection { text-align: left; }
[dir='rtl'] .datehijri { font-family: 'Cairo', Tahoma, Arial, sans-serif; font-size: 12px; line-height: 1.8; }
[dir='rtl'] .weather-info { direction: ltr; margin-left: 0; padding-left: 0; border-left: 0; margin-right: 26px; padding-right: 24px; border-right: 1px solid rgba(225,233,228,.22); }
[dir='rtl'] .ticker-caption { padding-left: 0; padding-right: 24px; }
[dir='rtl'] .fullscreen-button { margin-left: 0; margin-right: 22px; }
[dir='rtl'] .next-prayer-details { padding: 8px 12px 8px 20px; text-align: right; }
[dir='rtl'] .next-prayer-title { line-height: 1.45; }
[dir='rtl'] .next-prayer-title .prayername { font-family: 'Cairo', Tahoma, Arial, sans-serif; font-weight: 400; letter-spacing: 0; }
[dir='rtl'] .prayer-subtitle { font-family: 'Cairo', Tahoma, Arial, sans-serif; font-size: 56px; text-align: right; margin-top: 0; }
[dir='rtl'] .toast-info.prayer.hero-tight .prayer-subtitle { display: block; font-size: 28px; }
[dir='rtl'] .prayer-date-hint { margin-left: 0; margin-right: 18px; }
[dir='rtl'] .status-dot { margin-right: 0; margin-left: 8px; }
[dir='rtl'] .countdown-orbit { margin-right: 0; margin-left: 2.5%; }
[dir='rtl'] .eyebrow, [dir='rtl'] .countdown-label, [dir='rtl'] .friday-imam .name, [dir='rtl'] .mobile-container p, [dir='rtl'] .ticker-label { letter-spacing: 0; }
[dir='rtl'] .hero-label { font-size: 11px; }
[dir='rtl'] .hadith-heading { margin-right: 0; margin-left: 20px; }
[dir='rtl'] .clocksection > .event { margin-left: 0; margin-right: 10px; }
[dir='rtl'] .friday-imam-row, [dir='rtl'] .badge-row { margin-left: 0; margin-right: 12px; }
[dir='rtl'] .highlight .prayer-wrapper:after, [dir='rtl'] .is-next .prayer-wrapper:after { right: auto; left: 10px; letter-spacing: 0; }
[dir='rtl'] .is-next .prayer-wrapper:after { content: 'NÆSTE'; }
[dir='rtl'] .highlight .prayer-wrapper:after { content: 'NU'; }
[dir='rtl'] .audio-control-button { right: auto; left: 0; }
[dir='rtl'] .audio-control-button span { margin-left: 0; margin-right: 7px; }
/* Keep card surfaces out of backdrop-filter compositing on TV browsers. */

/* Ticker has a dedicated, fixed-height row and supports both directions. */
.news-ticker { display: flex; direction: ltr; flex: 0 0 auto; height: 58px; border-top: 1px solid rgba(217,231,221,.13); overflow: hidden; }
.ticker-label { display: flex; align-items: center; flex: 0 0 auto; margin-right: 22px; padding-right: 22px; border-right: 1px solid rgba(217,231,221,.13); color: #c6b783; font-size: 9px; letter-spacing: .14em; }
.safe-news-ticker { position: relative; width: 100%; min-width: 0; height: 100%; overflow: hidden; white-space: nowrap; }
.safe-ticker-track { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; width: auto; max-width: none; height: 100%; white-space: nowrap; color: #d0dbce; font-family: 'Cairo', Tahoma, Arial, sans-serif; font-size: 24px; line-height: 1.4; will-change: transform; backface-visibility: hidden; }
.safe-ticker-group { display: inline-flex; flex: 0 0 auto; align-items: center; height: 100%; white-space: nowrap; }
.safe-ticker-item, .safe-ticker-divider { display: inline-block; flex: 0 0 auto; }
.safe-ticker-divider { padding: 0 25px; color: #ad9e6e; }
.safe-ticker-item { unicode-bidi: isolate; }
.safe-ticker-measuring { visibility: hidden; pointer-events: none; }
.ticker-language-ar .safe-ticker-item { direction: rtl; }
.ticker-language-da .safe-ticker-item { direction: ltr; font-size: .7em; }
@keyframes safeTickerMoveLeft { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes safeTickerMoveRight { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }

/* Inline icon fallbacks avoid a dependency on a remote icon font. */
.fa, .fas, .far { font-style: normal; font-family: 'Segoe UI Symbol', sans-serif; }
.fa-volume-mute:before { content: '♪'; }
.fa-volume-up:before { content: '♫'; }
.fa-volume-off:before { content: '♪'; }
.fa-exclamation-triangle:before { content: '!'; }
.fa-times:before { content: '×'; }
.fa-user:before { content: '♙'; }
.fa-calendar-alt:before { content: '▦'; }
.audio-control-button { position: absolute; top: 16px; right: 16px; z-index: 3; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 9px 12px; color: #f6f1e5; background: rgba(24,56,45,.86); background: var(--surface-background); border: 1px solid rgba(240,242,223,.3); border-radius: 24px; cursor: pointer; font-size: 12px; }
.audio-control-button i { font-size: 20px; }
.audio-control-button span { margin-left: 7px; }
.audio-control-active span, .audio-control-collapsed span { display: none; }
.audio-control-error { color: #ffdf9c; border-color: #d1ac69; }
button:focus { outline: none; }
.keyboard-navigation button:focus { outline: 2px solid #e5c46f; outline-offset: 4px; }

/* Iqamah and Tasbih retain their existing IDs, controls and fitting logic. */
.athan-popup, .notice-popup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; width: 100%; height: 100%; padding: 5vh 5vw; background: #122829; color: #f3f1df; overflow: auto; }
.athan-popup { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, #295047, #102325 75%); }
/* Keep the popup's prayer scene separate from the next prayer on the main display. */
.athan-popup::before { content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: url('/assets/images/mosque-sunset-balanced.jpg') center center / cover no-repeat; opacity: .5; pointer-events: none; }
.athan-popup[data-prayer='Fajr']::before, .athan-popup[data-prayer='Maghrib']::before { background-image: url('/assets/images/mosque-dusk-balanced.jpg'); }
.athan-popup[data-prayer='Asr']::before { background-image: url('/assets/images/mosque-day-balanced.jpg'); }
.athan-popup[data-prayer='Isha']::before { background-image: url('/assets/images/mosque-night-moon-low.jpg'); }
.plain-backgrounds .athan-popup::before { display: none; }
.athan-content { position: relative; z-index: 1; width: 100%; max-width: 1050px; max-height: 100%; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.athan-content > p { font-size: 26px; font-size: clamp(18px, 3vh, 36px); color: #c9d8c8; }
.athan-content h1 { font-size: 80px; font-size: clamp(42px, 10vh, 120px); font-weight: 400; color: #ecd394; margin: 10px 0 24px; }
.athan-content .progress-bar { height: 14px; background: #365250; background: rgba(238,225,187,.22); border-radius: 8px; overflow: hidden; margin: 14px auto 20px; width: 78%; }
#progress { width: 100%; height: 100%; background: #e5c477; background: linear-gradient(90deg, #c8a35b, #f4dda0); border-radius: inherit; transform: scaleX(0); transform-origin: left center; will-change: transform; }
#iqamaLine { display: flex; flex-direction: column; align-items: center; justify-content: center; }
#iqamaCountdowntxt { font-size: 26px; line-height: 1.4; margin: 0 0 4px; }
#iqamaCountdown { font-size: 76px; font-size: clamp(40px, 10vh, 116px); line-height: 1.15; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mobile-container { margin-top: 25px; }
.mobile-container img { max-width: 130px; max-height: 13vh; object-fit: contain; }
.mobile-container p { font-size: 15px; letter-spacing: .15em; margin-top: 10px; }
.athan-popup-close, .notice-popup-close { position: absolute; top: 16px; right: 16px; z-index: 5; display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; color: #e9eedf; background: #294141; border: 1px solid #607c71; border-radius: 50%; font-size: 28px; cursor: pointer; }
.notice-popup { padding: 34px 5vw 20px; }
.notice-content { width: 100%; height: 100%; }
.containerD { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 100%; text-align: center; }
.section { flex: 0 0 auto; padding: 10px 0; }
.section .set { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.section .arabic { color: #f0efda; font-family: 'Cairo', Tahoma, Arial, sans-serif; font-size: 44px; font-size: clamp(28px, 5.5vh, 66px); direction: rtl; line-height: 1.5; }
.section h2 { margin: 0 12px; font-weight: 500; }
.section .badge { display: inline-block; padding: 5px 8px; border: 1px solid #6d7860; border-radius: 7px; color: #e4cf8f; font-size: 13px; white-space: nowrap; }
.translation { color: #d7dfd3; font-size: 22px; font-size: clamp(16px, 2.3vh, 28px); line-height: 1.5; margin: 6px 10px; direction: ltr; }
.section:nth-child(2) .arabic, .section:last-of-type .arabic { font-size: 38px; font-size: clamp(26px, 4.7vh, 58px); }
.section:nth-child(4) { display: flex; justify-content: center; }
.groupp { flex: 1 1 0%; min-width: 0; padding: 5px 12px; }
.groupp + .groupp { border-left: 1px solid #334b46; }
[dir='rtl'] .groupp + .groupp { border-left: 0; border-right: 1px solid #334b46; }
.references { color: #aabdaa; font-size: 13px; padding: 14px 0 5px; }
.blinking { animation: prayerPulse 1s ease-in-out infinite; }
@keyframes prayerPulse { 50% { opacity: .5; } }

/* Reserve a top inset for prayer icons on desktop and TV. */
@media screen and (min-width: 1200px) {
 #tasbihPopupClose, #iqamahPopupClose { display: none; }
 .prayer-wrapper { min-height: 164px; padding-top: 22px; }
 .prayer-icon { margin-top: 8px; }
}

/* Larger header text where the viewport has room, without crowding tablets. */
@media screen and (min-width: 1200px) and (min-height: 700px) {
 /* Keep the requested size even when the hero uses its compact layout. */
 #nextPrayerSecondary { font-size: 56px; }
 .countdown-label, .countdown-units { font-size: 22px; }
 .datesection { font-size: 20px; }
 .datehijri, [dir='rtl'] .datehijri { font-size: 23px; }
 .weather-info span { font-size: 28px; }
 .ticker-caption p { font-size: 48px; }
 .fullscreen-button { width: 46px; height: 46px; }
 .fullscreen-button svg { width: 22px; height: 22px; }
}

/* Landscape kiosks, including compact Android tablets. */
@media screen and (max-height: 760px) and (min-width: 769px) {
 .container-fluid { padding: 10px 14px 0; }
 .prayer-stage { border-radius: 19px; }
 .header { min-height: 64px; padding: 10px 22px; }
 .header .logo img { max-height: 43px; }
 .main-content-row { margin-top: 8px; margin-bottom: 8px; }
 .community-strip { height: 96px; margin: 0 20px 10px; }
 .quote-content { font-size: 20px; }
 .hadith { padding: 6px 15px; }
 .hadith-heading { margin-right: 14px; }
 .prayertimesrow { padding: 0 20px 18px; }
 .prayer-wrapper { height: 15vh; min-height: 120px; padding: 8px; }
 .prayer-icon { width: 19px; height: 19px; margin-bottom: 4px; }
 .prayertimes .prayername { font-size: 12px; }
 .prayertime { font-size: 35px; margin-top: 4px; }
 .iqamatime { margin-top: 4px; font-size: 11px; }
 .news-ticker { height: 44px; }
 .friday-imam .imam-name { font-size: 15px; }
 .toast-info.friday-imam { padding: 7px 10px; }
}
@media screen and (max-width: 1100px) and (min-width: 769px) {
 .container-fluid { padding: 8px 10px 0; }
 .header { min-height: 58px; padding: 9px 18px; }
 .site-identity h1 { font-size: 15px; }
 .site-location { font-size: 10px; margin-top: 3px; }
 .header .logo { flex-basis: 17%; width: 17%; margin-right: 14px; }
 .header .logo img { max-height: 38px; }
 .header .logo.logo-compact { width: 40px; }
 .header .logo.logo-compact img { max-width: 40px; }
 .datesection { font-size: 12px; }
 .datehijri { font-size: 16px; }
 .weather-info { padding-left: 12px; margin-left: 12px; }
 .weather-info span { font-size: 17px; }
 .ticker-caption { padding-left: 14px; }
 .ticker-caption p { font-size: 29px; }
 .fullscreen-button { margin-left: 14px; width: 32px; height: 32px; padding: 8px; }
 .community-strip { height: 84px; margin-left: 16px; margin-right: 16px; }
 .hadith { padding: 4px 12px; }
 .hadith-heading .eyebrow { max-width: 75px; font-size: 7px; }
 .quote-content { font-size: 18px; }
 .badge-row { display: none; }
 .friday-imam-row { flex-basis: 32%; margin-left: 9px; }
 .friday-imam .topic-text { font-size: 10px; }
 .prayertimesrow { padding: 0 16px 14px; }
 .prayer-wrapper { min-height: 96px; height: 17vh; }
 .prayertimes > li, .prayer-wrapper { border-radius: 11px; }
 .prayertime { font-size: 32px; }
 .has-jummah .prayertime { font-size: 29px; }
 .highlight .prayer-wrapper:after, .is-next .prayer-wrapper:after { font-size: 6px; top: 7px; right: 7px; }
 .news-ticker { height: 39px; }
 .safe-ticker-track { font-size: 21px; }
 .audio-control-button { top: 2px; right: 0; min-width: 34px; min-height: 34px; padding: 6px 9px; }
 [dir='rtl'] .header .logo { margin-left: 14px; }
 [dir='rtl'] .weather-info { margin-right: 12px; padding-right: 12px; }
 [dir='rtl'] .ticker-caption { padding-right: 14px; }
 [dir='rtl'] .fullscreen-button { margin-right: 14px; }
 [dir='rtl'] .datehijri { font-size: 10px; }
 [dir='rtl'] .prayer-wrapper { padding: 6px; }
 [dir='rtl'] .prayer-icon { margin-bottom: 3px; }
 [dir='rtl'] .prayertimes .prayername { font-size: 11px; line-height: 1.5; }
 [dir='rtl'] .iqamatime { font-size: 11px; line-height: 1.5; }
 [dir='rtl'] .prayer-subtitle { font-size: 34px; }
}
@media screen and (max-height: 480px) and (min-width: 769px) {
 .site-context .weather-info span { font-size: 12px; line-height: 1.25; }
 .container-fluid { padding-top: 5px; }
 .header { min-height: 50px; padding-top: 5px; padding-bottom: 5px; }
 .header .logo img { max-height: 32px; }
 .main-content-row { margin-top: 6px; margin-bottom: 6px; }
 .community-strip { height: 76px; margin-bottom: 8px; }
 .hadith-heading { display: none; }
 .quote-content { font-size: 16px; }
 .friday-imam .imam-name { font-size: 13px; }
 .friday-imam .name { font-size: 7px; }
 .friday-imam .topic-label, .friday-imam .topic-text { font-size: 9px; }
 .toast-info.friday-imam { padding: 5px 9px; }
 .prayer-wrapper { height: 90px; min-height: 90px; padding: 5px; }
 .prayer-icon { width: 15px; height: 15px; margin-bottom: 3px; }
 .prayertimes .prayername { font-size: 10px; }
 .prayertime, .has-jummah .prayertime { font-size: 26px; margin-top: 2px; }
 .iqamatime { font-size: 10px; margin-top: 3px; }
 .prayertimesrow { padding-bottom: 10px; }
 .news-ticker { height: 31px; }
 [dir='rtl'] .next-prayer-title { line-height: 1.3; }
 [dir='rtl'] .prayer-subtitle { font-size: 28px; }
 [dir='rtl'] .prayer-wrapper { padding: 5px; }
 [dir='rtl'] .prayertimes .prayername { font-size: 10px; }
 [dir='rtl'] .iqamatime { font-size: 10px; }
}
/* Portrait displays scroll naturally, with prayer times before the information strip. */
@media screen and (max-width: 768px) {
 html { overflow-x: hidden; overflow-y: auto; }
 body { height: auto; min-height: 100%; overflow: visible; }
 .container-fluid { height: auto; min-height: 100vh; padding: 10px 10px 0; }
 .prayer-stage { flex: 0 0 auto; border-radius: 20px; }
 .scene-image { top: -120px; bottom: auto; height: 1120px; background-position: 85% bottom; }
 .scene-shade { background: linear-gradient(0deg, #142e27 12%, rgba(9,22,25,.34) 70%, rgba(7,17,22,.4)); background: linear-gradient(0deg, var(--page-tone) 12%, rgba(9,22,25,.34) 70%, rgba(7,17,22,.4)); }
 .header { flex-wrap: wrap; padding: 12px 18px; }
 .site-identity h1 { font-size: 17px; }
 .site-location { font-size: 14px; margin-top: 2px; }
 .header .logo { width: 26%; flex-basis: auto; margin-right: 16px; }
 .header .right { width: 100%; margin-top: 8px; justify-content: space-between; }
 .datesection { text-align: left; flex: 1 1 auto; font-size: 12px; }
 .datehijri { text-align: left; font-size: 17px; }
 .weather-info { margin-left: 10px; padding-left: 10px; }
 .weather-info span { font-size: 18px; }
 .ticker-caption { padding-left: 14px; }
 .ticker-caption p { font-size: 32px; }
 .fullscreen-button { margin-left: 14px; }
 .main-content-row { order: 1; flex: 0 0 auto; height: 340px; margin: 18px 22px; }
 .next-prayer-details { padding-left: 0; }
 .next-prayer-title .prayername { font-size: 65px; }
 .prayer-subtitle { font-size: 34px; }
 .next-prayer-time { font-size: 50px; }
 .countdown-orbit { margin-right: 0; }
 .prayer-date-hint { margin-left: 9px; }
 .hero-footer { font-size: 14px; }
 .prayertimesrow { order: 2; padding: 0 18px 8px; }
 .prayertimes { flex-wrap: wrap; margin: -5px; }
 .prayertimes > li { flex: 1 1 auto; width: calc(33.333% - 10px); margin: 5px; border-radius: 13px; }
 .prayer-wrapper { border-radius: 13px; height: 132px; min-height: 0; max-height: none; padding: 13px; }
 .prayertime { font-size: 36px; }
 .prayer-icon { width: 22px; height: 22px; }
 .community-strip { order: 3; height: auto; margin: 12px 18px 18px; flex-wrap: wrap; }
 .clocksection { flex: 1 1 100%; flex-direction: column; }
 .hadith { display: block; flex: 0 0 auto; min-height: 110px; padding: 17px 20px; }
 .hadith-heading { margin: 0 0 9px; }
 .hadith-heading .eyebrow { max-width: none; font-size: 8px; }
 .quote-content { font-size: 22px; line-height: 1.6; max-height: 180px; padding: 6px 0; }
 .clocksection > .event { flex: 0 0 auto; max-height: 220px; margin: 9px 0 0; }
 .clocksection.has-events .hadith-heading { display: block; }
 .friday-imam-row { flex: 1 1 100%; margin: 9px 0 0; max-height: 160px; }
 .toast-info.friday-imam { padding: 14px; }
 .badge-row { display: none; }
 .eid-content { height: 140px; }
 .news-ticker { height: 46px; margin-top: 5px; }
 .ticker-label { display: none; }
 .safe-ticker-track { font-size: 22px; }
 .audio-control-button { top: 0; right: 0; min-width: 36px; min-height: 36px; padding: 6px 10px; }
 .athan-popup, .notice-popup { padding: 65px 20px 25px; }
 .athan-content h1 { font-size: 58px; }
 #iqamaCountdowntxt { font-size: 22px; }
 #iqamaCountdown { font-size: 62px; }
 .notice-content { height: auto; }
 .containerD { min-height: 0; }
 .section { padding: 8px 0; }
 .section .arabic { font-size: 27px; }
 .section:nth-child(2) .arabic, .section:last-of-type .arabic { font-size: 23px; }
 .section .set { flex-direction: column; }
 .section h2 { margin: 3px 0 5px; }
 .section:nth-child(4) { flex-wrap: wrap; }
 .groupp { padding: 5px; }
 .groupp .arabic { font-size: 24px; }
 .section .badge { font-size: 11px; }
 .translation { font-size: 12px; margin: 4px 0; }
 [dir='rtl'] .header .logo { margin-left: 16px; }
 [dir='rtl'] .datesection, [dir='rtl'] .datehijri { text-align: right; }
 [dir='rtl'] .weather-info { margin-right: 10px; padding-right: 10px; }
 [dir='rtl'] .ticker-caption { padding-right: 14px; }
 [dir='rtl'] .fullscreen-button { margin-right: 14px; }
 [dir='rtl'] .next-prayer-details { padding-right: 0; }
 [dir='rtl'] .countdown-orbit { margin-left: 0; }
 [dir='rtl'] .prayer-date-hint { margin-right: 9px; }
 [dir='rtl'] .hadith-heading { margin: 0 0 9px; }
 [dir='rtl'] .clocksection > .event, [dir='rtl'] .friday-imam-row { margin: 9px 0 0; }
}
@media screen and (max-width: 600px) {
 .header { padding: 12px 14px; min-height: 0; }
 .header .right { flex-wrap: nowrap; }
 .datesection { flex: 1 1 auto; min-width: 0; margin-bottom: 0; font-size: 10px; }
 .datehijri, [dir='rtl'] .datehijri { font-size: 10px; }
 .weather-info { flex: 0 0 auto; margin-left: 8px; padding-left: 0; border: 0; }
 .weather-info span { font-size: 14px; }
 .weather-symbol { margin-left: 4px; }
 .ticker-caption { flex: 0 0 auto; margin-left: 0; padding-left: 8px; }
 .ticker-caption p { font-size: 27px; line-height: 1.2; }
 .ticker-caption .eyebrow { font-size: 7px; }
 .fullscreen-button { width: 30px; height: 30px; padding: 8px; margin-left: 8px; }
 .main-content-row { height: auto; margin: 16px 20px 18px; }
 .prayer-countdown-content { flex-direction: column; text-align: center; }
 .next-prayer-details { flex: 0 0 auto; margin-top: 0; padding: 0; width: 100%; }
 .hero-label { margin-bottom: 6px; font-size: 9px; }
 .next-prayer-title .prayername { font-size: 72px; font-size: clamp(55px, 15vw, 88px); }
 .prayer-subtitle { text-align: center; margin-top: 4px; font-size: 34px; }
 .next-prayer-schedule { justify-content: center; margin-top: 8px; }
 .next-prayer-time { font-size: 50px; }
 .hero-footer { margin-top: 7px; font-size: 16px; }
 .countdown-orbit { margin: 18px auto 0; }
 .countdown-label { font-size: 14px; margin-bottom: 10px; }
 .countdown-units { font-size: 14px; }
 .prayertimes > li { width: calc(50% - 10px); }
 .prayer-wrapper { height: 124px; padding: 13px 9px 10px; }
 .prayertime { font-size: 35px; }
 .quote-content { font-size: 21px; }
 .audio-control-button { top: -6px; right: -8px; }
 [dir='rtl'] .weather-info { margin-right: 8px; padding-right: 0; border: 0; }
 [dir='rtl'] .ticker-caption { margin-left: 0; margin-right: 0; padding-right: 8px; }
 [dir='rtl'] .fullscreen-button { margin-right: 8px; }
 [dir='rtl'] .next-prayer-details { text-align: center; padding: 0; }
 [dir='rtl'] .prayer-subtitle { text-align: center; font-size: 34px; }
 [dir='rtl'] .countdown-orbit { margin: 18px auto 0; }
}
@media screen and (max-width: 350px) {
 .container-fluid { padding: 7px 7px 0; }
 .header { padding: 10px; }
 .site-identity h1 { font-size: 16px; }
 .main-content-row { margin-left: 15px; margin-right: 15px; }
 .next-prayer-title .prayername { font-size: 56px; }
 .next-prayer-time { font-size: 49px; }
 .prayertimesrow { padding-left: 12px; padding-right: 12px; }
 .community-strip { margin-left: 12px; margin-right: 12px; }
 .prayertime { font-size: 31px; }
 .prayer-wrapper { height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
 .blinking { animation: none; }
 .ring-progress { transition: none; }
}