/**
 * ══════════════════════════════════════════════════════════════════════════════
 * OURMASJID DIGITAL BOARD — VIRTUAL 1920×1080 TV CANVAS ENGINE (tv-canvas.css)
 * ══════════════════════════════════════════════════════════════════════════════
 * 
 * 4-Layer Architecture:
 * 1. OUTER VIEWPORT FRAME: 100vw × 100vh, centering, clipping, ambient background.
 * 2. INNER BOARD CANVAS: Exact 1920px × 1080px canonical design coordinate system.
 *    Derived mathematically from approved golden desktop layout (sidebar: 614px, header: 125px).
 * 3. TV CANONICAL TYPOGRAPHY SYSTEM: Intentionally designed for prayer-hall viewing (3–10m).
 *    Scaled once by canvas transform; controlled by a hierarchical readability multiplier.
 * 4. SLIDE BOUNDARY CONTRACT: Child content reflows first within allocated area (min-width: 0, min-height: 0).
 */

/* ── 1. OUTER VIEWPORT FRAME & TYPOGRAPHY SYSTEM ────────────────────────────── */
html {
  background: #000000 !important;
}
.tv-viewport-frame {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--tenant-bg, var(--bg-main, #0D2625));
  font-family: var(--tenant-font-body, 'Outfit', sans-serif);
  font-style: var(--tenant-font-style-body, normal);
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  /* ══════════════════════════════════════════════════════════════════════════
     CANONICAL TV PERSISTENT COMPONENT TOKENS (Header & Sidebar)
     ══════════════════════════════════════════════════════════════════════════ */
  --tv-font-clock:        48px;  /* Live digital clock in header (balanced from 84px) */
  --tv-font-countdown:    28px;  /* Next Adhan & Iftar countdown in header/footer */
  --tv-font-headline:     32px;  /* Header section titles */
  --tv-font-prayer-time:  24px;  /* Adhan & Iqamah numeric values in sidebar */
  --tv-font-calligraphy:  26px;  /* Header Arabic Bismillah emblem */
  --tv-font-prayer-name:  22px;  /* Fajr, Sunrise, Dhuhr, Asr, Maghrib, Isha */
  --tv-font-section:      24px;  /* Section sub-headings */
  --tv-font-masjid-title: 26px;  /* Mosque name in header */
  --tv-font-ticker:       16px;  /* Footer discipline rotating messages */
  --tv-font-body:         16px;  /* Standard small text */
  --tv-font-sub:          12px;  /* Multi-language sub-names (Sinhala / Tamil) */
  --tv-font-meta:         13px;  /* Date widget, location badge */
  --tv-font-tag:          11px;  /* Small pills */

  /* ══════════════════════════════════════════════════════════════════════════
     GOVERNED SMART TV READABILITY SCALE DEFAULTS
     ══════════════════════════════════════════════════════════════════════════ */
  --tv-header-title-size: 21px;  /* Top bar active slide title */
  --tv-prayer-time-size:  34px;  /* Adhan & Iqamah numeric clock digits */
  --tv-prayer-data-size:  22px;  /* Prayer names and schedule columns */
  --tv-countdown-size:    60px;  /* Large hero countdown */
  --tv-disc-font-size:    18px;  /* Bottom rotating discipline ticker */
  --tv-ramadan-table-size: 18px; /* Daily Ramadan matrix table content */
  --tv-ramadan-dua-arabic: 38px; /* Ramadan spiritual Du'a Arabic script */
  --tv-ramadan-dua-trans:  22px; /* Ramadan spiritual Du'a translations */
  --tv-porridge-scale:     18px; /* Ramadan porridge distribution cards */
  --tv-qurban-scale:       19px; /* Qurban campaign dashboard cards */

  /* ══════════════════════════════════════════════════════════════════════════
     PRESENTATION ENGINE CANONICAL SIZING (1080p Baseline Canvas)
     ══════════════════════════════════════════════════════════════════════════ */
  --presentation-header-height: 74px;
  --presentation-footer-height: 64px;

  /* ══════════════════════════════════════════════════════════════════════════
     CANONICAL 7-LEVEL TV TYPOGRAPHY SYSTEM (1920 × 1080 Baseline Canvas)
     Guarantees 3–5 meter prayer hall readability (28px–48px on TV screen).
     ══════════════════════════════════════════════════════════════════════════ */
  --tv-type-display:      48px;  /* Quran verse, Hadith Arabic (balanced from 80px) */
  --tv-type-h1:           42px;  /* Slide main titles, event headlines (balanced from 60px) */
  --tv-type-h2:           36px;  /* Prominent timings, key badges (balanced from 48px) */
  --tv-type-body:         30px;  /* Main translations, notice paragraphs (balanced from 40px) */
  --tv-type-secondary:    26px;  /* Supporting descriptions, secondary translations */
  --tv-type-meta:         22px;  /* Narrator/Bukhari source, date widgets, contact desk */
  --tv-type-tag:          18px;  /* Category pills, status badges, language labels */

  /* ══════════════════════════════════════════════════════════════════════════
     CENTRAL PLATFORM TYPOGRAPHY REGISTRY (1080p Baseline Canvas-Relative Values)
     Standardized role metrics for multi-lingual presentation (No ambiguous vw).
     ══════════════════════════════════════════════════════════════════════════ */
  --role-h1-size:        var(--tv-role-h1-size, 44px);  /* H1: Page Title */
  --role-h2-size:        var(--tv-role-h2-size, 38px);  /* H2: Section / Category Title */
  --role-h3-size:        var(--tv-role-h3-size, 52px);  /* H3: Hero Content / Arabic Display */
  --role-h4-en-size:     var(--tv-role-h4-en-size, 28px);  /* H4-EN: English Content (Standardized with Tamil/Sinhala) */
  --role-h4-t-size:      var(--tv-role-h4-t-size, 28px);  /* H4-T: Tamil Content (balanced glyphs) */
  --role-h4-s-size:      var(--tv-role-h4-s-size, 28px);  /* H4-S: Sinhala Content (balanced glyphs) */
  --role-h4-ar-size:     var(--tv-role-h4-ar-size, 44px);  /* H4-AR: Arabic Secondary / Du'a (balanced) */
  --role-h5-size:        var(--tv-role-h5-size, 24px);  /* H5: Secondary / Discipline Ticker */
  --role-h6-size:        var(--tv-role-h6-size, 20px);  /* H6: Metadata / Sources / Dates */
  --role-time-size:      var(--tv-role-time-size, 48px);  /* TIME: Numeric Prayer Time Clocks */
  --role-countdown-size: var(--tv-role-countdown-size, var(--tv-countdown-size, 72px));  /* COUNTDOWN: Hero Countdown Digits */
  --role-label-size:     var(--tv-role-label-size, 20px);  /* LABEL: Table & Header Labels */
  --role-badge-size:     var(--tv-role-badge-size, 18px);  /* BADGE: Status Pills (NEXT, LIVE) */
  --role-footer-size:    var(--tv-role-footer-size, 20px);  /* FOOTER: Auxiliary Footer Text */

  /* Standard Content Role Colors (Customizable via Theme Manager, Fallback to Theme Palette) */
  --role-h1-color:        var(--tv-role-h1-color, var(--tv-text-primary));
  --role-h2-color:        var(--tv-role-h2-color, var(--tv-text-gold));
  --role-h3-color:        var(--tv-role-h3-color, var(--tv-text-gold));
  --role-h4-en-color:     var(--tv-role-h4-en-color, var(--tv-text-primary));
  --role-h4-t-color:      var(--tv-role-h4-t-color, var(--tv-text-primary));
  --role-h4-s-color:      var(--tv-role-h4-s-color, var(--tv-text-primary));
  --role-h4-ar-color:     var(--tv-role-h4-ar-color, var(--tv-text-gold));
  --role-h5-color:        var(--tv-role-h5-color, var(--tv-text-secondary));
  --role-h6-color:        var(--tv-role-h6-color, var(--tv-text-muted));
  --role-time-color:      var(--tv-role-time-color, var(--tv-text-primary));
  --role-countdown-color: var(--tv-role-countdown-color, var(--tv-text-gold));
  --role-label-color:     var(--tv-role-label-color, var(--tv-text-secondary));
  --role-badge-color:     var(--tv-role-badge-color, var(--tv-text-gold));
  --role-footer-color:    var(--tv-role-footer-color, var(--tv-text-secondary));

  /* Semantic Aliases for Slide Presentation Tokens */
  --tv-slide-arabic:      var(--tv-type-display, 48px);
  --tv-slide-title:       var(--tv-type-h1, 42px);
  --tv-slide-h2:          var(--tv-type-h2, 36px);
  --tv-slide-trans:       var(--tv-type-body, 30px);
  --tv-slide-body:        var(--tv-type-body, 30px);
  --tv-slide-secondary:   var(--tv-type-secondary, 26px);
  --tv-slide-meta:        var(--tv-type-meta, 22px);
  --tv-slide-tag:         var(--tv-type-tag, 18px);
  --tv-slide-qurban-name: var(--tv-type-secondary, 26px);

  /* ══════════════════════════════════════════════════════════════════════════
     THEME-DRIVEN SEMANTIC COLOR TOKENS (ZERO HARD-CODED COLORS)
     Flows from the tenant active theme; 100% compatible with all theme presets.
     ══════════════════════════════════════════════════════════════════════════ */
  --tv-text-primary:      var(--tenant-text-primary, var(--text-primary, #F8FAFC));
  --tv-text-secondary:    var(--tenant-desc-color, var(--text-muted, #A7C4B8));
  --tv-text-muted:        var(--tenant-text-muted, #75998B);
  --tv-text-gold:         var(--tenant-gold, var(--gold, #D4AF37));
  --tv-text-gold-soft:    var(--tenant-gold-soft, #F1D98A);
  --tv-surface:           var(--tenant-surface, var(--bg-surface, #072A20));
  --tv-surface-elevated:  var(--tenant-surface-elevated, var(--bg-elevated, #0B3A2B));
  --tv-border:            var(--tenant-border, var(--border-color, rgba(224, 190, 86, 0.20)));
  --tv-border-gold:       var(--tenant-gold, var(--gold, #D4AF37));
  --tv-border-subtle:     var(--tenant-border-subtle, rgba(212, 175, 55, 0.22));

  /* ══════════════════════════════════════════════════════════════════════════
     PRESENTATION ENGINE SPATIAL RATIO TOKENS
     Decouples spatial layout from hard-coded percentages for theme overrides.
     Enforces mathematical invariant: schedule + hero = 100%.
     ══════════════════════════════════════════════════════════════════════════ */
  --prayer-schedule-width: 60%;
  --prayer-hero-width:     calc(100% - var(--prayer-schedule-width, 60%));

  /* Readability profile multiplier (Compact: 0.92, Normal: 1.00, Large: 1.10, Extra: 1.20) */
  --tv-font-multiplier:   1;
}

/* ── 2. INNER 1920×1080 BOARD CANVAS ────────────────────────────────────────── */
.tv-viewport-frame .board-container {
  width: 1920px !important;
  height: 1080px !important;
  min-width: 1920px !important;
  min-height: 1080px !important;
  max-width: 1920px !important;
  max-height: 1080px !important;
  flex: 0 0 1920px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
  transform-origin: center center !important;
  transform: scale(var(--tv-canvas-scale, 1)) !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: var(--tv-inset-top, 0px) var(--tv-inset-right, 0px) var(--tv-inset-bottom, 0px) var(--tv-inset-left, 0px) !important;
  gap: 0 !important; /* Zero space between header and body */
  font-size: 16px !important; /* Locked root baseline inside canvas: NO double scaling */
  background: var(--tenant-bg, #0D2625) !important;
}

/* Ensure global Islamic geometric pattern watermark fills 100% of the canvas */
.tv-viewport-frame .global-pattern-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── 3. DERIVED GOLDEN LAYOUT PROPORTIONS & TYPOGRAPHY BINDINGS ──────────────── */

/* Persistent Top Header (84px baseline with balanced padding away from borders) */
.tv-viewport-frame .board-header {
  flex: 0 0 var(--presentation-header-height, 84px) !important;
  height: var(--presentation-header-height, 84px) !important;
  min-height: var(--presentation-header-height, 84px) !important;
  max-height: var(--presentation-header-height, 84px) !important;
  padding: 8px 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 20px !important;
  background: var(--header-bg, var(--tenant-bg, #0D2625)) !important;
  border-bottom: 1px solid var(--tv-border-subtle, rgba(212, 175, 55, 0.22)) !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
}

/* Header Left: Mosque Logo with comfortable breathing room */
.tv-viewport-frame .header-left {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  height: 100% !important;
}

.tv-viewport-frame .header-left .logo-box {
  width: auto !important;
  min-width: 60px !important;
  max-width: 280px !important;
  height: 100% !important;
  max-height: 64px !important;
  border-radius: var(--logo-frame-radius, 12px) !important;
  border: var(--logo-frame-border, none) !important;
  background: var(--logo-frame-bg, transparent) !important;
  box-shadow: var(--logo-frame-shadow, none) !important;
  padding: 2px 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.tv-viewport-frame .header-left .logo-box .logo-img {
  width: auto !important;
  height: 100% !important;
  max-height: 100% !important;
  max-width: 260px !important;
  object-fit: contain !important;
  filter: var(--logo-drop-shadow, none) !important;
}

/* Header Center: Active Slide Title Region (Left-aligned right after Masjid Logo) */
.tv-viewport-frame .header-center-title-region {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 10px !important;
}

.tv-viewport-frame .header-slide-title {
  font-size: var(--tv-header-title-size, 17px) !important;
  font-weight: 700 !important;
  color: var(--tv-text-gold, #D4AF37) !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
  max-width: 100% !important;
  line-height: 1.2 !important;
}

/* Header Right: Live Clock Dominant + Short Date Secondary (aligned right) */
.tv-viewport-frame .header-right-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 2px !important;
  text-align: right !important;
  min-width: 0 !important;
}

/* On Prayer Slide only: Hide clock & date from header as requested by user */
.tv-viewport-frame.is-prayer-slide-active .header-right-col,
#mainBoardContainer.is-prayer-slide-active .header-right-col {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.tv-viewport-frame .clock-dominant,
.tv-viewport-frame #digitalClock {
  font-size: 34px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--tv-text-primary, #FFFFFF) !important;
  line-height: 1 !important;
  letter-spacing: 0.5px !important;
}

.tv-viewport-frame .header-dates-secondary,
.tv-viewport-frame .date-short {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--tv-text-secondary, #A7C4B8) !important;
  white-space: nowrap !important;
}

/* ── 4. MAIN BODY PRESENTATION CONTAINER ─────────────────────────────────────── */
.tv-viewport-frame .board-body {
  position: relative !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  padding-top: 18px !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

:root[style*="--slide-top-progress-show: none"] .tv-viewport-frame .board-body,
html[style*="--slide-top-progress-show: none"] .tv-viewport-frame .board-body {
  padding-top: 0 !important;
}

/* Flatten body and components border radius for seamless full-bleed TV layout */
.tv-viewport-frame .board-body,
.tv-viewport-frame .prayer-sidebar,
.tv-viewport-frame .slides-viewport,
.tv-viewport-frame .slide-card,
.tv-viewport-frame .prayer-page-main,
.tv-viewport-frame #slide-prayers {
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* 1ST LEVEL (MAIN SLIDE ROTATOR): Positioned inside BODY TOP, single line (= Header Length) */
.main-slide-timing-row {
  position: absolute !important;
  top: 2px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 14px !important;
  min-height: 14px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  z-index: 100 !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}

.main-slide-timing-row .slide-progress-track {
  flex: 1 1 auto !important;
  height: var(--slide-progress-height, 5px) !important;
  background: var(--slide-progress-track-bg, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: auto !important;
}

.main-slide-timing-row .slide-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--slide-progress-start, var(--gold, #d4af37)) 0%, var(--slide-progress-end, #10b981) 100%) !important;
  box-shadow: var(--slide-progress-glow, 0 0 10px var(--slide-progress-start, var(--gold, #d4af37))) !important;
  border-radius: 3px !important;
}

.main-slide-timing-row .global-slide-carousel-dots,
.global-slide-carousel-dots {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--global-dots-bg, var(--tenant-surface-elevated, rgba(4, 30, 22, 0.78))) !important;
  padding: 2px 10px !important;
  border-radius: 20px !important;
  border: 1px solid var(--global-dots-border, var(--tenant-border, rgba(212, 175, 55, 0.22))) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  pointer-events: auto !important;
  z-index: 101 !important;
}

:root[style*="--slide-top-progress-show: none"] .main-slide-timing-row,
html[style*="--slide-top-progress-show: none"] .main-slide-timing-row {
  display: none !important;
}

:root[style*="--slide-bottom-progress-show: none"] .subpage-timing-row,
html[style*="--slide-bottom-progress-show: none"] .subpage-timing-row {
  display: none !important;
}

/* 2ND LEVEL (SUBPAGE ROTATOR): Positioned in BOTTOM of each slide content, single line (= Slide Width) */
.subpage-timing-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 12px !important;
  margin-top: auto !important;
  margin-bottom: 2px !important;
  padding: 1px 4px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 50 !important;
  height: 16px !important;
  min-height: 16px !important;
}

.subpage-timing-row .subpage-progress-track {
  flex: 1 1 auto !important;
  height: var(--slide-progress-height, 5px) !important;
  background: var(--slide-progress-track-bg, rgba(255, 255, 255, 0.12)) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
  width: auto !important;
}

.subpage-timing-row .subpage-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--slide-progress-start, #d4af37) 0%, var(--slide-progress-end, #10b981) 100%) !important;
  box-shadow: var(--slide-progress-glow, 0 0 8px rgba(212, 175, 55, 0.5)) !important;
  border-radius: 3px !important;
}

.subpage-timing-row .subpage-dots-pill {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--global-dots-bg, rgba(4, 30, 22, 0.78)) !important;
  padding: 1px 8px !important;
  border-radius: 20px !important;
  border: 1px solid var(--global-dots-border, rgba(212, 175, 55, 0.22)) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  margin-left: 0 !important;
}

@keyframes slideProgressBarAnim {
  0% { width: 0%; }
  100% { width: 100%; }
}
@-webkit-keyframes slideProgressBarAnim {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes subpageBarAnim {
  0% { width: 0%; }
  100% { width: 100%; }
}
@-webkit-keyframes subpageBarAnim {
  0% { width: 0%; }
  100% { width: 100%; }
}
@-webkit-keyframes slideProgressBarAnim {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes subpageBarAnim {
  0% { width: 0%; }
  100% { width: 100%; }
}
@-webkit-keyframes subpageBarAnim {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* Persistent Bottom Footer (Canonical 64px, 100% aligned with 74px header + 942px body) */
.tv-viewport-frame .board-footer {
  flex: 0 0 var(--presentation-footer-height, 64px) !important;
  height: var(--presentation-footer-height, 64px) !important;
  min-height: var(--presentation-footer-height, 64px) !important;
  max-height: var(--presentation-footer-height, 64px) !important;
  box-sizing: border-box !important;
  padding: 2px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--footer-bg, var(--header-bg, var(--tenant-bg, #0D2625))) !important;
  border-top: 1px solid var(--tv-border-subtle, rgba(212, 175, 55, 0.22)) !important;
  border-bottom: 1px solid var(--tv-border-subtle, rgba(212, 175, 55, 0.22)) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 10 !important;
  overflow: hidden !important;
}

/* Left Prayer Times Sidebar (614px = 32% of 1920) */
.tv-viewport-frame .prayer-sidebar {
  width: 614px !important;
  min-width: 614px !important;
  max-width: 614px !important;
  flex: 0 0 614px !important;
  padding: 16px 20px !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.tv-viewport-frame .sidebar-title span:first-child {
  font-size: calc(var(--tv-font-section) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 800 !important;
}

.tv-viewport-frame .sidebar-title .language-sub {
  font-size: calc(var(--tv-font-sub) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 600 !important;
}

/* Prayer Rows: Bold TV Typography */
.tv-viewport-frame .prayer-row,
.tv-viewport-frame .prayer-card {
  padding: 8px 16px !important;
  box-sizing: border-box !important;
}

.tv-viewport-frame .prayer-name-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.tv-viewport-frame .p-name {
  font-size: calc(var(--tv-font-prayer-name) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  display: flex !important;
  align-items: center !important;
}

.tv-viewport-frame .p-name i,
.p-name i {
  margin-right: 10px !important;
  font-size: 0.9em !important;
  color: var(--tv-text-gold, #D4AF37) !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 22px !important;
  text-align: center !important;
}

.tv-viewport-frame .p-sub {
  font-size: calc(var(--tv-font-sub) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  opacity: 0.9 !important;
  margin-top: 4px !important;
}

.tv-viewport-frame .time-value,
.tv-viewport-frame .adhan-time {
  font-size: calc(var(--tv-font-prayer-time) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
}

.tv-viewport-frame .time-label {
  font-size: calc(var(--tv-font-tag) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Right Slides Viewport */
.tv-viewport-frame .slides-viewport {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  /* Baseline auto-fit scale (tuned dynamically per slide by board.js auto-fit engine) */
  --slide-fit-scale: 1;

  /* Priority-Based Scaling:
     - Priority 1 (Titles, Arabic, Qurban): scales gently at 50% rate
     - Priority 2 (Translations, body, descriptions): scales at 100% rate
     - Priority 3 (Tags, pills, metadata, footer): scales at 115% rate */
  --slide-title-fit-scale: calc(1 - (1 - var(--slide-fit-scale, 1)) * 0.5);
  --slide-body-fit-scale:  var(--slide-fit-scale, 1);
  --slide-meta-fit-scale:  calc(1 - (1 - var(--slide-fit-scale, 1)) * 1.15);

  /* Semantic presentation font variables */
  --slide-arabic-size:  calc(var(--tv-slide-arabic) * var(--slide-title-fit-scale, 1) * var(--tv-font-multiplier, 1));
  --slide-title-size:   calc(var(--tv-slide-title) * var(--slide-title-fit-scale, 1) * var(--tv-font-multiplier, 1));
  --slide-trans-size:   calc(var(--tv-slide-trans) * var(--slide-body-fit-scale, 1) * var(--tv-font-multiplier, 1));
  --slide-body-size:    calc(var(--tv-slide-body) * var(--slide-body-fit-scale, 1) * var(--tv-font-multiplier, 1));
  --slide-meta-size:    calc(var(--tv-slide-meta) * var(--slide-meta-fit-scale, 1) * var(--tv-font-multiplier, 1));
  --slide-tag-size:     calc(var(--tv-slide-tag) * var(--slide-meta-fit-scale, 1) * var(--tv-font-multiplier, 1));
  --slide-qurban-size:  calc(var(--tv-slide-qurban-name) * var(--slide-title-fit-scale, 1) * var(--tv-font-multiplier, 1));
}

/* ══════════════════════════════════════════════════════════════════════════
   STANDARD CONTENT ELEMENT SYSTEM (data-text-role)
   Universal platform text-role classes for all slides & pages.
   Enforces consistent hierarchy & language-normalized font metrics.
   ══════════════════════════════════════════════════════════════════════════ */
.tv-viewport-frame [data-text-role="H1"] {
  font-family: var(--tenant-font-heading, 'Outfit', sans-serif) !important;
  font-style: var(--tenant-font-style-heading, normal) !important;
  font-size: calc(var(--role-h1-size) * var(--slide-title-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
  font-weight: var(--tenant-fw-heading, 800) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.5px !important;
  color: var(--role-h1-color, var(--tv-text-primary)) !important;
}

.tv-viewport-frame [data-text-role="H2"] {
  font-family: var(--tenant-font-heading, 'Outfit', sans-serif) !important;
  font-style: var(--tenant-font-style-heading, normal) !important;
  font-size: calc(var(--role-h2-size) * var(--slide-title-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
  font-weight: var(--tenant-fw-heading, 800) !important;
  line-height: 1.25 !important;
  letter-spacing: 1px !important;
  color: var(--role-h2-color, var(--tv-text-gold)) !important;
}

.tv-viewport-frame [data-text-role="H3"] {
  font-family: var(--tenant-font-heading, 'Outfit', sans-serif) !important;
  font-style: var(--tenant-font-style-heading, normal) !important;
  font-size: calc(var(--role-h3-size) * var(--slide-title-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  color: var(--role-h3-color, var(--tv-text-gold)) !important;
  text-align: center !important;
}

/* Dedicated Arabic Heading Override for True Arabic Titles */
.tv-viewport-frame [data-text-role="H3"][dir="rtl"],
.tv-viewport-frame [data-text-role="H3"].arabic,
.tv-viewport-frame .special-arabic-title {
  font-family: var(--tenant-font-arabic, var(--font-arabic, 'Scheherazade New', 'Amiri', serif)) !important;
  direction: rtl !important;
}

.tv-viewport-frame [data-text-role="H4-EN"] {
  font-family: var(--tenant-font-body, 'Outfit', sans-serif) !important;
  font-style: var(--tenant-font-style-body, normal) !important;
  font-size: calc(var(--role-h4-en-size) * var(--slide-body-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
  font-weight: var(--tenant-fw-body, 600) !important;
  line-height: 1.45 !important;
  color: var(--role-h4-en-color, var(--tv-text-primary)) !important;
}

.tv-viewport-frame [data-text-role="H4-T"] {
  font-family: 'Noto Sans Tamil', var(--tenant-font-body, 'Outfit', sans-serif) !important;
  font-style: normal !important;
  font-size: calc(var(--role-h4-t-size) * var(--slide-body-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  color: var(--role-h4-t-color, var(--tv-text-primary)) !important;
}

.tv-viewport-frame [data-text-role="H4-S"] {
  font-family: 'Noto Sans Sinhala', var(--tenant-font-body, 'Outfit', sans-serif) !important;
  font-style: normal !important;
  font-size: calc(var(--role-h4-s-size) * var(--slide-body-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  color: var(--role-h4-s-color, var(--tv-text-primary)) !important;
}

.tv-viewport-frame [data-text-role="H4-AR"] {
  font-family: var(--tenant-font-arabic, var(--font-arabic, 'Scheherazade New', 'Amiri', serif)) !important;
  font-style: normal !important;
  font-size: calc(var(--role-h4-ar-size) * var(--slide-body-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  direction: rtl !important;
  color: var(--role-h4-ar-color, var(--tv-text-gold)) !important;
}

.tv-viewport-frame [data-text-role="H5"] {
  font-family: var(--tenant-font-body, 'Outfit', sans-serif) !important;
  font-style: var(--tenant-font-style-body, normal) !important;
  font-size: calc(var(--role-h5-size) * var(--slide-meta-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--role-h5-color, var(--tv-text-secondary)) !important;
}

.tv-viewport-frame [data-text-role="H6"] {
  font-family: var(--tenant-font-desc, 'Outfit', sans-serif) !important;
  font-style: var(--tenant-font-style-body, normal) !important;
  font-size: calc(var(--role-h6-size) * var(--slide-meta-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--role-h6-color, var(--tv-text-muted)) !important;
}

.tv-viewport-frame [data-text-role="TIME"] {
  font-family: var(--tenant-font-heading, 'Outfit', sans-serif) !important;
  font-size: calc(var(--role-time-size) * var(--slide-title-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
  color: var(--role-time-color, var(--tv-text-primary)) !important;
}

.tv-viewport-frame [data-text-role="COUNTDOWN"] {
  font-size: calc(var(--role-countdown-size) * var(--slide-title-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 0.95 !important;
  letter-spacing: -1px !important;
  color: var(--role-countdown-color, var(--tv-text-gold)) !important;
}

.tv-viewport-frame [data-text-role="LABEL"] {
  font-size: calc(var(--role-label-size) * var(--slide-meta-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--role-label-color, var(--tv-text-secondary)) !important;
}

.tv-viewport-frame [data-text-role="BADGE"] {
  font-size: calc(var(--role-badge-size) * var(--slide-meta-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  color: var(--role-badge-color, var(--tv-text-gold)) !important;
}

.tv-viewport-frame [data-text-role="FOOTER"] {
  font-size: calc(var(--role-footer-size) * var(--slide-meta-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--role-footer-color, var(--tv-text-secondary)) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTEXT & PRESENTATION DENSITY MODIFIERS (data-density)
   Separation of Concerns:
   - data-text-role  -> Defines what the text is (semantic role)
   - data-density    -> Defines how densely it is presented (compact | standard | hero)
   - data-ui-role    -> Defines what the component represents
   - data-state      -> Defines the active runtime state
   ══════════════════════════════════════════════════════════════════════════ */
.tv-viewport-frame [data-density="compact"] {
  font-size: calc(1em * 0.82) !important;
  line-height: 1.2 !important;
}

.tv-viewport-frame [data-density="micro"] {
  font-size: calc(1em * 0.70) !important;
  line-height: 1.15 !important;
}

.tv-viewport-frame [data-density="hero"] {
  font-size: calc(1em * 1.25) !important;
  line-height: 1.1 !important;
}

/* Explicit Density Combinations for Arabic & Numeric Elements */
.tv-viewport-frame [data-text-role="H4-AR"][data-density="compact"] {
  font-size: calc(var(--role-h4-ar-size) * 0.78 * var(--slide-body-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
  line-height: 1.3 !important;
}

.tv-viewport-frame [data-text-role="TIME"][data-density="compact"] {
  font-size: calc(var(--role-time-size) * 0.72 * var(--slide-title-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
}

.tv-viewport-frame [data-text-role="H2"][data-density="compact"] {
  font-size: calc(var(--role-h2-size) * 0.75 * var(--slide-title-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
}

.tv-viewport-frame [data-text-role="H6"][data-density="compact"] {
  font-size: calc(var(--role-h6-size) * 0.85 * var(--slide-meta-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SEMANTIC UI ROLES & RUNTIME STATE SELECTORS (data-ui-role & data-state)
   ══════════════════════════════════════════════════════════════════════════ */
.tv-viewport-frame [data-ui-role="PRAYER_ROW"] {
  position: relative !important;
  transition: all 0.4s ease !important;
}

/* Runtime States on Prayer Rows */
.tv-viewport-frame [data-ui-role="PRAYER_ROW"][data-state="active"],
.tv-viewport-frame [data-ui-role="PRAYER_ROW"][data-state="next"] {
  background: linear-gradient(105deg, rgba(212, 175, 55, 0.24), rgba(212, 175, 55, 0.08)) !important;
  border-color: var(--tv-text-gold) !important;
  box-shadow: inset 4px 0 0 var(--tv-text-gold), 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

.tv-viewport-frame [data-ui-role="PRAYER_ROW"][data-state="adhan-now"] {
  background: linear-gradient(105deg, rgba(245, 158, 11, 0.32), rgba(245, 158, 11, 0.12)) !important;
  border-color: #f59e0b !important;
  animation: tvAdhanPulse 2s infinite !important;
}

.tv-viewport-frame [data-ui-role="PRAYER_ROW"][data-state="iqamah-now"] {
  background: linear-gradient(105deg, rgba(16, 185, 129, 0.35), rgba(16, 185, 129, 0.12)) !important;
  border-color: #10b981 !important;
  animation: tvIqamahPulse 1.8s infinite !important;
}

.tv-viewport-frame [data-ui-role="PRAYER_ROW"][data-state="completed"] {
  opacity: 0.7 !important;
}

/* ── 5. PERSISTENT BOTTOM FOOTER (Canonical 64px Baseline) ──────────────────── */
.tv-viewport-frame .board-footer {
  flex: 0 0 var(--presentation-footer-height, 64px) !important;
  height: var(--presentation-footer-height, 64px) !important;
  min-height: var(--presentation-footer-height, 64px) !important;
  max-height: var(--presentation-footer-height, 64px) !important;
  padding: 2px 24px !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.tv-viewport-frame .discipline-wrapper {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
  margin-right: 16px !important;
}

.tv-viewport-frame .footer-right-group {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

/* Discipline Drum Viewport & Text */
.tv-viewport-frame .disp-drum-viewport,
.tv-viewport-frame .disp-texts-viewport {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 48px !important;
  max-height: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.tv-viewport-frame .disp-drum-track {
  width: 100% !important;
  min-width: 0 !important;
}

.tv-viewport-frame .disp-drum-item {
  width: 100% !important;
  min-width: 0 !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  line-height: 24px !important;
  flex: 0 0 24px !important;
}

.tv-viewport-frame .disp-drum-text,
.tv-viewport-frame .disp-lang-content {
  font-size: var(--tv-disc-font-size, 18px) !important;
  font-weight: 700 !important;
  line-height: 24px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.tv-viewport-frame .disp-drum-text.lang-ta {
  font-size: var(--disp-font-ta, calc(var(--tv-disc-font-size, 18px) * 0.9)) !important;
}
.tv-viewport-frame .disp-drum-text.lang-si {
  font-size: var(--disp-font-si, calc(var(--tv-disc-font-size, 18px) * 0.92)) !important;
}
.tv-viewport-frame .disp-drum-text.lang-en {
  font-size: var(--disp-font-en, var(--tv-disc-font-size, 18px)) !important;
}

/* Footer Adhan Countdown Split Widget */
.tv-viewport-frame .f-adhan-label {
  font-size: calc(var(--tv-font-tag) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 700 !important;
}

.tv-viewport-frame .f-adhan-prayer {
  font-size: calc(var(--tv-font-sub) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 800 !important;
}

.tv-viewport-frame .f-adhan-time {
  font-size: calc(var(--tv-font-countdown) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}

.tv-viewport-frame .footer-qr-title {
  font-size: calc(var(--tv-font-sub) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 800 !important;
}

.tv-viewport-frame .footer-qr-sub {
  font-size: calc(var(--tv-font-tag) * var(--tv-font-multiplier, 1)) !important;
  font-weight: 600 !important;
}

/* ── 6. UNIFIED FULL-CANVAS PRESENTATION ARCHITECTURE ────────────────────────────── */
/* In TV Presentation mode, the old left sidebar is retired. Every slide owns 100% width. */
.tv-viewport-frame .prayer-sidebar {
  display: none !important;
}

.tv-viewport-frame .slides-viewport {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* In the Unified Presentation Engine, all slides including #slide-prayers participate in the 74px Header + 926px Body + 64px Footer layout */


/* ── 7. SLIDE BOUNDARY CONTRACTS & TYPOGRAPHY ───────────────────────────────── */

/* Base Slide Card */
.tv-viewport-frame .slide-card {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 4px 14px 2px 14px !important;
  gap: 2px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.tv-viewport-frame #slide-prayers.slide-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* Canonical Canvas Slide Card alignment for Ramadan Hub - Transparent to match prayer time main canvas */
.tv-viewport-frame #slide-ramadan.slide-card,
.tv-viewport-frame #slide-ramadan {
  padding: 4px 14px 2px 14px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Presentation Engine: Completely eliminate redundant inner slide headers on TV Canvas */
.tv-viewport-frame .slide-card > .slide-header-decor,
.tv-viewport-frame .slide-header-decor {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

.tv-viewport-frame .slide-card > .slide-header-decor h2 {
  display: none !important;
}

/* Standard Fullscreen Slide Content Wrappers: Distribute 100% height to body */
.tv-viewport-frame .slide-card > div:not(.subpage-timing-row):not(.slide-header-decor),
.tv-viewport-frame #slide-social .social-fullscreen-wrap,
.tv-viewport-frame #slide-forms .forms-fullscreen-wrap,
.tv-viewport-frame #slide-special-prayers .special-prayers-container,
.tv-viewport-frame #slide-porridge .porridge-fullscreen-wrap,
.tv-viewport-frame #slide-gallery .gallery-fullscreen-wrap {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: calc(100% - 20px) !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Hide legacy timing bar placeholders (replaced by standard universal 2nd Level subpage-timing-row) */
.tv-viewport-frame #qurbanTimingBarContainer,
.tv-viewport-frame #qurbanDashTimingBarContainer,
.tv-viewport-frame #porridgeTimingBarContainer {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ── A. HARMONIZED QR PRESENTATION SLIDES: FORMS (#slide-forms) & SOCIAL (#slide-social) ── */
.tv-viewport-frame #slide-social .social-fullscreen-wrap,
.tv-viewport-frame #slide-forms .forms-fullscreen-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: calc(100% - 20px) !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.tv-viewport-frame #slide-social .social-tv-row,
.tv-viewport-frame #slide-forms .forms-tv-slide-row {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 16px !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

/* Left Column: Shared Layout */
.tv-viewport-frame #slide-social .social-tv-info-card,
.tv-viewport-frame #slide-forms .forms-tv-left-card {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 22px 28px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

/* Inner content area expands to distribute vertical space */
.tv-viewport-frame #slide-social .social-tv-info-card > div:first-child,
.tv-viewport-frame #slide-forms .forms-tv-left-card > div:first-child {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-around !important;
  min-height: 0 !important;
  gap: 10px !important;
}

.tv-viewport-frame #slide-social .social-tv-info-card h1,
.tv-viewport-frame #slide-social .social-tv-info-card h2,
.tv-viewport-frame #slide-forms .forms-tv-left-card h1 {
  font-size: var(--slide-title-size) !important;
  font-weight: 800 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

.tv-viewport-frame #slide-social .social-tv-info-card p,
.tv-viewport-frame #slide-forms .forms-tv-left-card p {
  font-size: var(--slide-body-size) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}

/* Metadata, badges, prerequisites checklist, direct links */
.tv-viewport-frame #slide-social .social-tv-info-card div[style*="border-top"],
.tv-viewport-frame #slide-forms .forms-tv-left-card div[style*="border-top"] {
  font-size: var(--slide-meta-size) !important;
  padding-top: 12px !important;
  margin-top: 8px !important;
}

/* Central Category Badge Pill for Forms, Social & Gallery (Box 1 in user screenshot) */
.tv-viewport-frame #slide-forms [data-text-role="BADGE"],
.tv-viewport-frame #slide-social [data-text-role="BADGE"],
.tv-viewport-frame #slide-gallery .gallery-qr-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(4, 30, 22, 0.92) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.7) !important;
  color: #f4dc82 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.75px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.tv-viewport-frame #slide-forms [data-text-role="BADGE"] span,
.tv-viewport-frame #slide-social [data-text-role="BADGE"] span {
  color: #f4dc82 !important;
}

/* Refined Guidance & Deadline Alert Banner for Forms & Social (Box 2 in user screenshot) */
.tv-viewport-frame #slide-forms div[data-text-role="H5"],
.tv-viewport-frame #slide-social div[data-text-role="H5"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.16) 0%, rgba(16, 185, 129, 0.14) 100%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  color: #ffffff !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  margin-top: 8px !important;
  margin-bottom: 4px !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.tv-viewport-frame #slide-forms div[data-text-role="H5"] span,
.tv-viewport-frame #slide-social div[data-text-role="H5"] span {
  color: #ffffff !important;
}

.tv-viewport-frame #slide-forms div[data-text-role="H5"] strong,
.tv-viewport-frame #slide-social div[data-text-role="H5"] strong {
  color: #f4dc82 !important;
  font-weight: 800 !important;
}

.tv-viewport-frame #slide-forms .forms-tv-left-card div[style*="Required Documents"] {
  font-size: var(--slide-meta-size) !important;
}

.tv-viewport-frame #slide-forms .forms-tv-left-card div[style*="grid-template-columns"] div {
  font-size: var(--slide-meta-size) !important;
}

/* Right Column: Unified Locked QR Showcase Card (Theme Harmonized) */
.tv-viewport-frame #slide-social .social-tv-qr-card,
.tv-viewport-frame #slide-forms .forms-tv-right-card {
  flex: 0 0 340px !important;
  width: 340px !important;
  max-width: 340px !important;
  min-width: 340px !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px 16px !important;
  box-sizing: border-box !important;
  background: var(--card-bg, var(--bg-panel, rgba(7, 42, 32, 0.95))) !important;
  border: 1.5px solid var(--border-light, rgba(212, 175, 55, 0.3)) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Unified Exact Square QR Box (Clean White Scanner Pad with Theme Gold Border & Subtle Glow) */
.tv-viewport-frame #slide-social .social-tv-qr-box,
.tv-viewport-frame #slide-forms .forms-tv-qr-box {
  width: 210px !important;
  height: 210px !important;
  aspect-ratio: 1 / 1 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--qr-backdrop-bg, #ffffff) !important;
  padding: 12px !important;
  border-radius: 16px !important;
  margin-bottom: 12px !important;
  box-sizing: border-box !important;
  border: 3px solid var(--gold, #d4af37) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px var(--gold-glow, rgba(212, 175, 55, 0.35)) !important;
}

.tv-viewport-frame #slide-social .social-tv-qr-box img,
.tv-viewport-frame #slide-forms .forms-tv-qr-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* ── B. QURBAN CAMPAIGN SLIDE (#slide-qurban) ───────────────────────────────── */
.tv-viewport-frame #slide-qurban .qurban-fullscreen-wrap {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 14px !important;
  padding: 4px 6px !important;
  overflow: hidden !important;
}

/* ── B2. RECENT EVENTS & GALLERY SLIDE (#slide-gallery) ────────────────────────── */
.tv-viewport-frame #slide-gallery .gallery-fullscreen-wrap {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 20px !important;
  padding: 4px 6px !important;
  overflow: hidden !important;
}

.tv-viewport-frame #slide-gallery .gallery-left-panel {
  width: 54% !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(224, 190, 86, 0.28) !important;
  background: rgba(0, 0, 0, 0.55) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

.tv-viewport-frame #slide-gallery .gallery-left-panel > div {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

.tv-viewport-frame #slide-gallery .gallery-left-panel img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
  display: block !important;
}

.tv-viewport-frame #slide-gallery .gallery-right-panel {
  flex: 1 1 auto !important;
  width: 46% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: var(--tenant-surface, linear-gradient(150deg, rgba(14, 42, 38, 0.88), rgba(5, 18, 18, 0.88))) !important;
  border: 1.5px solid var(--tenant-border, rgba(224, 190, 86, 0.28)) !important;
  border-radius: 18px !important;
  padding: 24px 28px !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.45) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.tv-viewport-frame #slide-gallery .gallery-fullscreen-title {
  font-size: 38px !important;
  font-weight: 800 !important;
  color: var(--gold, #d4af37) !important;
  line-height: 1.25 !important;
  margin: 0 0 12px 0 !important;
}

.tv-viewport-frame #slide-gallery .gallery-badge-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.tv-viewport-frame #slide-gallery .gallery-date-pill,
.tv-viewport-frame #slide-gallery .gallery-timing-pill {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(224, 190, 86, 0.25) !important;
  color: #e2e8f0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
}

.tv-viewport-frame #slide-gallery .gallery-fullscreen-desc {
  flex: 1 1 auto !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
  color: #cbd5e1 !important;
  overflow: hidden !important;
}

.tv-viewport-frame #slide-gallery .gallery-qr-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(224, 190, 86, 0.25) !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  margin-top: 14px !important;
  flex-shrink: 0 !important;
}

.tv-viewport-frame #slide-gallery .gallery-qr-img-box {
  width: 90px !important;
  height: 90px !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  padding: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border: 2px solid var(--gold, #d4af37) !important;
}

.tv-viewport-frame #slide-gallery .gallery-qr-img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.tv-viewport-frame #slide-gallery .gallery-qr-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.tv-viewport-frame #slide-gallery .gallery-qr-badge {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  color: var(--tv-text-gold, #f4dc82) !important;
}

.tv-viewport-frame #slide-gallery .gallery-qr-label {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.tv-viewport-frame #slide-gallery .gallery-qr-hint {
  font-size: 12px !important;
  color: var(--tv-text-muted, #a8beb9) !important;
}

/* ── C. RAMADAN HUB SLIDE (#slide-ramadan) ──────────────────────────────────── */
.tv-viewport-frame #slide-ramadan .ramadan-split-container {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 16px !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-left-panel {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
  overflow: hidden !important;
  background: var(--ramadan-panel-bg, var(--tenant-surface, linear-gradient(150deg, rgba(14, 42, 38, 0.88), rgba(5, 18, 18, 0.88)))) !important;
  border: 1.5px solid var(--ramadan-panel-border, var(--tenant-border, rgba(224, 190, 86, 0.28))) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-right-panel {
  flex: 1.2 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow: hidden !important;
  background: var(--ramadan-panel-bg, var(--tenant-surface, linear-gradient(150deg, rgba(14, 42, 38, 0.88), rgba(5, 18, 18, 0.88)))) !important;
  border: 1.5px solid var(--ramadan-panel-border, var(--tenant-border, rgba(224, 190, 86, 0.28))) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-day-title {
  font-size: var(--slide-title-size) !important;
  font-weight: 900 !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-countdown-box {
  background: var(--tv-surface-elevated, var(--tenant-surface-elevated, linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.92)))) !important;
  border: 1px solid rgba(224, 190, 86, 0.28) !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  margin: 4px 0 8px 0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-countdown-val,
.tv-viewport-frame #slide-ramadan .ramadan-unit-val {
  font-size: calc(var(--tv-type-h1) * 0.9 * var(--slide-title-fit-scale, 1)) !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-grid-sep {
  font-size: calc(var(--tv-type-h1) * 0.8 * var(--slide-title-fit-scale, 1)) !important;
  font-weight: 900 !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-unit-lbl {
  font-size: var(--slide-tag-size) !important;
  font-weight: 800 !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-time-val,
.tv-viewport-frame #slide-ramadan .ramadan-pill-val {
  font-size: calc(var(--tv-type-h2) * var(--slide-title-fit-scale, 1)) !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-suhoor-box,
.tv-viewport-frame #slide-ramadan .sahoor-box,
.tv-viewport-frame #slide-ramadan .ramadan-iftar-box,
.tv-viewport-frame #slide-ramadan .iftar-box,
.tv-viewport-frame #slide-ramadan .ramadan-time-pill {
  background: var(--tv-surface-elevated, var(--tenant-surface-elevated, linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.92)))) !important;
  border: 1.5px solid var(--ramadan-pill-border, rgba(212, 175, 55, 0.35)) !important;
  border-radius: 12px !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-journey-box {
  padding: 8px 16px !important;
  margin: 0 !important;
  background: var(--tv-surface-elevated, var(--tenant-surface-elevated, linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.92)))) !important;
  border: 1px solid rgba(224, 190, 86, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-daily-dua-box,
.tv-viewport-frame #slide-ramadan .ramadan-dua-card {
  padding: 12px 18px !important;
  margin: 0 !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: center !important;
  background: var(--ramadan-dua-bg, var(--tenant-surface-elevated, linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.92)))) !important;
  border: 1.5px solid rgba(224, 190, 86, 0.28) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-dua-arabic,
.tv-viewport-frame .ramadan-dua-card .ramadan-dua-arabic {
  font-size: var(--tv-ramadan-dua-arabic, 38px) !important;
  line-height: 1.35 !important;
  text-shadow: 0 0 16px rgba(223, 183, 108, 0.4), 0 2px 4px rgba(0, 0, 0, 0.7) !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-dua-trans,
.tv-viewport-frame .ramadan-dua-card .ramadan-dua-en,
.tv-viewport-frame .ramadan-dua-card .ramadan-dua-translation .ramadan-dua-en {
  font-size: var(--tv-ramadan-dua-trans, 22px) !important;
  line-height: 1.35 !important;
}

.tv-viewport-frame .ramadan-dua-card .ramadan-dua-ta,
.tv-viewport-frame .ramadan-dua-card .ramadan-dua-si,
.tv-viewport-frame .ramadan-dua-card .ramadan-dua-translation .ramadan-dua-ta,
.tv-viewport-frame .ramadan-dua-card .ramadan-dua-translation .ramadan-dua-si {
  font-size: calc(var(--tv-ramadan-dua-trans, 22px) * 0.85) !important;
  line-height: 1.3 !important;
}

.tv-viewport-frame .ramadan-dua-card .ramadan-dua-tag {
  font-size: calc(var(--tv-ramadan-dua-trans, 22px) * 0.65) !important;
  flex-shrink: 0 !important;
}

.tv-viewport-frame .ramadan-dua-card .ramadan-dua-translation {
  flex-shrink: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* Governed Daily Ramadan Timetable & Program Matrix Table */
.tv-viewport-frame #slide-ramadan .ramadan-matrix-table-wrap {
  background: var(--ramadan-matrix-bg, var(--tenant-surface-elevated, linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.92)))) !important;
  border: 1px solid rgba(224, 190, 86, 0.28) !important;
  border-radius: 14px !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-matrix-header-row {
  background: var(--ramadan-table-hdr-bg, linear-gradient(135deg, rgba(14, 42, 38, 0.95) 0%, rgba(5, 18, 18, 0.95) 100%)) !important;
  border-bottom: 1.5px solid var(--tenant-border, rgba(224, 190, 86, 0.25)) !important;
  font-size: calc(var(--tv-ramadan-table-size, 18px) * 0.85) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-matrix-data-row {
  font-size: var(--tv-ramadan-table-size, 18px) !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-matrix-data-row span[style*="font-size:0.96rem"] {
  font-size: calc(var(--tv-ramadan-table-size, 18px) * 1.1) !important;
  font-weight: 900 !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-matrix-data-row div[style*="font-size:0.75rem"] {
  font-size: calc(var(--tv-ramadan-table-size, 18px) * 0.8) !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-matrix-data-row div[style*="font-size:0.78rem"] {
  font-size: calc(var(--tv-ramadan-table-size, 18px) * 0.88) !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-matrix-data-row span[style*="font-size:0.9rem"] {
  font-size: calc(var(--tv-ramadan-table-size, 18px) * 0.95) !important;
  font-weight: 800 !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-matrix-data-row span[style*="font-size:0.74rem"] {
  font-size: calc(var(--tv-ramadan-table-size, 18px) * 0.8) !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-matrix-data-row span[style*="font-size:0.78rem"] {
  font-size: calc(var(--tv-ramadan-table-size, 18px) * 0.85) !important;
  font-weight: 800 !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-matrix-data-row.row-even,
.tv-viewport-frame .ramadan-matrix-data-row.row-even {
  background: var(--ramadan-matrix-row-even, var(--ramadan-row-even-bg, #07110F)) !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-matrix-data-row.row-odd,
.tv-viewport-frame .ramadan-matrix-data-row.row-odd {
  background: var(--ramadan-matrix-row-odd, var(--ramadan-row-odd-bg, #0F1816)) !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-matrix-data-row.row-highlight,
.tv-viewport-frame .ramadan-matrix-data-row.row-highlight {
  background: var(--ramadan-matrix-row-hl, var(--ramadan-row-highlight, #07110F)) !important;
  border-left: 4px solid var(--ramadan-row-highlight-border, var(--ramadan-accent-gold, #D4AF37)) !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-matrix-data-row.row-27,
.tv-viewport-frame .ramadan-matrix-data-row.row-27 {
  background: var(--ramadan-row-27-bg, #07110F) !important;
  border-left: 4px solid var(--ramadan-row-27-border, var(--ramadan-accent-gold, #D4AF37)) !important;
  border-bottom-color: rgba(212, 175, 55, 0.35) !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-subpage-pill {
  font-size: var(--slide-tag-size) !important;
  padding: 4px 12px !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-ashra-badge {
  font-size: var(--slide-tag-size) !important;
}

/* Canonical Canvas harmonization for Ramadan Subpages, Ticker & Subpage Timing */
.tv-viewport-frame #slide-ramadan .ramadan-tv-layout {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  gap: 4px !important;
}

.tv-viewport-frame #slide-ramadan #ramadanMainContentContainer {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-odd-nights-page,
.tv-viewport-frame #slide-ramadan .ramadan-table-page,
.tv-viewport-frame #slide-ramadan .ramadan-laylatul-qadr-page {
  border-radius: 18px !important;
  padding: 8px 14px !important;
  background: var(--ramadan-table-bg, var(--tenant-surface, linear-gradient(150deg, rgba(14, 42, 38, 0.88), rgba(5, 18, 18, 0.88)))) !important;
  border: 1.5px solid var(--tenant-border, rgba(224, 190, 86, 0.28)) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-subpage-header-bar {
  background: var(--ramadan-subpage-header-bg, var(--tenant-surface, linear-gradient(150deg, rgba(14, 42, 38, 0.88), rgba(5, 18, 18, 0.88)))) !important;
  border: 1px solid var(--tenant-border, rgba(224, 190, 86, 0.25)) !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-bottom-ticker,
.tv-viewport-frame #slide-ramadan #ramadanBottomTickerContainer {
  background: var(--ramadan-ticker-bg, var(--tenant-surface, linear-gradient(90deg, rgba(5, 18, 18, 0.95) 0%, rgba(14, 42, 38, 0.95) 50%, rgba(5, 18, 18, 0.95) 100%))) !important;
  border: 1px solid var(--ramadan-ticker-border, var(--tenant-border, rgba(224, 190, 86, 0.22))) !important;
  padding: 3px 12px !important;
  border-radius: 8px !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  box-sizing: border-box !important;
}

.tv-viewport-frame #slide-ramadan .subpage-timing-row {
  margin-top: 2px !important;
  margin-bottom: 0 !important;
  padding: 0 4px !important;
  flex-shrink: 0 !important;
}

/* ── 8. WISDOM, NOTICES, GALLERY & QURBAN SLIDES TYPOGRAPHY ──────────────────── */
.tv-viewport-frame #slide-wisdom .wisdom-box {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  height: 100% !important;
  padding: 24px 30px !important;
  box-sizing: border-box !important;
}

.tv-viewport-frame #slide-wisdom .wisdom-tag {
  font-size: var(--slide-tag-size) !important;
  letter-spacing: 1px !important;
  margin-bottom: 6px !important;
}

.tv-viewport-frame #slide-wisdom .wisdom-arabic,
.tv-viewport-frame #slide-wisdom .wisdom-arabic-large {
  font-size: var(--slide-arabic-size) !important;
  line-height: 1.45 !important;
  text-align: center !important;
  margin: 10px 0 16px 0 !important;
  padding: 0 16px !important;
  max-width: 100% !important;
}

.tv-viewport-frame #slide-wisdom .wisdom-translations,
.tv-viewport-frame #slide-wisdom .wisdom-translations-large {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  gap: 12px !important;
  margin: 8px 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
}

.tv-viewport-frame #slide-wisdom .translation-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  font-size: var(--slide-trans-size) !important;
  line-height: 1.45 !important;
}

.tv-viewport-frame #slide-wisdom .lang-tag {
  font-size: var(--slide-tag-size) !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}

.tv-viewport-frame #slide-wisdom .wisdom-source-badge {
  font-size: var(--slide-meta-size) !important;
  padding-top: 10px !important;
  margin-top: auto !important;
}

/* Sacred Wisdom Duet Layout inside Viewport Frame */
.tv-viewport-frame #slide-wisdom .wisdom-duet-stage {
  padding: 0 !important;
}

.tv-viewport-frame #slide-wisdom .wisdom-duet-zone {
  background: var(--wisdom-card-bg, var(--tenant-surface, rgba(7, 42, 32, 0.95))) !important;
  border-color: var(--wisdom-card-border, var(--tenant-border, rgba(212, 175, 55, 0.25))) !important;
}

.tv-viewport-frame #slide-wisdom .wisdom-duet-zone::before {
  z-index: 0 !important;
}

.tv-viewport-frame #slide-wisdom .wisdom-duet-zone-header,
.tv-viewport-frame #slide-wisdom .wisdom-duet-arabic,
.tv-viewport-frame #slide-wisdom .wisdom-duet-ref,
.tv-viewport-frame #slide-wisdom .wisdom-duet-divider,
.tv-viewport-frame #slide-wisdom .wisdom-duet-trans-row {
  position: relative !important;
  z-index: 1 !important;
}

.tv-viewport-frame #slide-wisdom .wisdom-duet-zone--quran::before {
  background: radial-gradient(ellipse at 20% 80%, rgba(140, 105, 25, 0.035) 0%, transparent 65%) !important;
}

.tv-viewport-frame #slide-wisdom .wisdom-duet-trans-col {
  background: var(--wisdom-box-bg, var(--tenant-surface-elevated, rgba(255, 255, 255, 0.04))) !important;
  border-color: var(--wisdom-box-border, var(--tenant-border, rgba(255, 255, 255, 0.07))) !important;
}

.tv-viewport-frame #slide-wisdom .wisdom-duet-trans-text {
  font-size: calc(var(--role-h4-en-size, 28px) * var(--slide-body-fit-scale, 1) * var(--tv-font-multiplier, 1)) !important;
  color: var(--wisdom-trans-color, var(--role-h4-en-color, var(--tenant-text-primary, #f8fafc))) !important;
}

.tv-viewport-frame #slide-wisdom .wisdom-duet-arabic {
  color: var(--wisdom-arabic-color, var(--role-h4-ar-color, var(--tenant-gold, #f5d061))) !important;
}

/* Notices Typography */
.tv-viewport-frame #slide-notices .notice-lang-title {
  font-size: var(--slide-title-size) !important;
  font-weight: 800 !important;
}

.tv-viewport-frame #slide-notices .notice-lang-body {
  font-size: var(--slide-body-size) !important;
  line-height: 1.45 !important;
}

/* Gallery / Recent Events Presentation Layout & Typography */
.tv-viewport-frame #slide-gallery .gallery-fullscreen-title {
  font-size: var(--slide-title-size) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.tv-viewport-frame #slide-gallery .gallery-date-pill,
.tv-viewport-frame #slide-gallery .gallery-timing-pill {
  font-size: var(--slide-tag-size) !important;
  padding: 4px 12px !important;
}

.tv-viewport-frame #slide-gallery .gallery-fullscreen-desc {
  font-size: var(--slide-body-size) !important;
  line-height: 1.5 !important;
  padding: 16px 20px !important;
}

.tv-viewport-frame #slide-gallery .gallery-qr-details .gallery-qr-badge {
  font-size: var(--slide-tag-size) !important;
}

.tv-viewport-frame #slide-gallery .gallery-qr-details .gallery-qr-label {
  font-size: var(--slide-meta-size) !important;
}

.tv-viewport-frame #slide-gallery .gallery-qr-details .gallery-qr-hint {
  font-size: calc(var(--slide-meta-size) * 0.85) !important;
}

/* Qurban Shareholder Names & Cards */
.tv-viewport-frame #slide-qurban .slot-name-main,
.tv-viewport-frame .qurban-slot-card .slot-name-main {
  font-size: var(--slide-qurban-size) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.tv-viewport-frame #slide-qurban .slot-share-num,
.tv-viewport-frame .qurban-slot-card .slot-share-num {
  font-size: var(--slide-tag-size) !important;
}

.tv-viewport-frame #slide-qurban .slot-badge,
.tv-viewport-frame .qurban-slot-card .slot-badge {
  font-size: var(--slide-tag-size) !important;
}

.tv-viewport-frame #slide-qurban .qurban-spec-val,
.tv-viewport-frame .qurban-spec-tile .q-spec-val {
  font-size: var(--slide-meta-size) !important;
}

/* 8th Slot Guidelines & Distribution Card: +2px increase */
.tv-viewport-frame #slide-qurban .qurban-guidelines-card .q-guide-header {
  font-size: calc(0.74rem + 2px) !important;
}

.tv-viewport-frame #slide-qurban .qurban-guidelines-card .q-guide-body {
  font-size: calc(0.76rem + 2px) !important;
  line-height: 1.4 !important;
}

/* ── SPECIAL PRAYER SCHEDULE PRESENTATION SLIDE (#slide-special-prayers) ─── */
.tv-viewport-frame #slide-special-prayers .special-prayers-container {
  width: 100% !important;
  height: calc(100% - 50px) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.tv-viewport-frame #slide-special-prayers .special-prayer-card-wrap {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 20px 32px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: var(--special-card-bg, #030E0D) !important;
  border: 2px solid var(--tv-border) !important;
  border-radius: 20px !important;
}

.tv-viewport-frame #slide-special-prayers .special-title-header {
  border-bottom: 1.5px solid var(--tv-border-subtle) !important;
  padding-bottom: 8px !important;
}

.tv-viewport-frame #slide-special-prayers .special-event-title {
  font-size: var(--slide-title-size) !important;
  font-weight: 900 !important;
  color: var(--tv-text-gold) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

.tv-viewport-frame #slide-special-prayers .special-arabic-title {
  font-size: calc(var(--slide-arabic-size) * 0.75) !important;
  line-height: 1.3 !important;
}

.tv-viewport-frame #slide-special-prayers .special-sub-titles {
  font-size: var(--slide-meta-size) !important;
  color: var(--tv-text-secondary) !important;
}

.tv-viewport-frame #slide-special-prayers .special-date-badge,
.tv-viewport-frame #slide-special-prayers .special-hijri-badge,
.tv-viewport-frame #slide-special-prayers .special-venue-badge {
  font-size: var(--slide-tag-size) !important;
  padding: 6px 16px !important;
  border-radius: 12px !important;
}

.tv-viewport-frame #slide-special-prayers .special-bayan-badge {
  font-size: var(--slide-meta-size) !important;
  padding: 6px 18px !important;
  margin-top: 8px !important;
  border-radius: 10px !important;
}

.tv-viewport-frame #slide-special-prayers .special-dua-box {
  padding: 12px 20px !important;
  margin: 8px 0 !important;
  background: var(--special-dua-bg, var(--special-guide-bg, #030E0D)) !important;
  border: 1.5px solid var(--tv-border-subtle) !important;
  border-radius: 14px !important;
}

.tv-viewport-frame #slide-special-prayers .special-arabic-dua {
  font-size: calc(var(--slide-arabic-size) * 0.7) !important;
  line-height: 1.35 !important;
  color: var(--tv-text-gold) !important;
}

.tv-viewport-frame #slide-special-prayers .special-dua-trans {
  font-size: var(--slide-meta-size) !important;
  color: var(--tv-text-secondary) !important;
}

.tv-viewport-frame #slide-special-prayers .special-times-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 24px !important;
  margin: 14px 0 !important;
  flex: 1 1 auto !important;
  align-content: center !important;
  min-height: 0 !important;
}

.tv-viewport-frame #slide-special-prayers .special-time-box {
  padding: 16px 24px !important;
  border-radius: 18px !important;
  background: var(--mens-box-bg, #030E0D) !important;
  border: 2px solid var(--tv-border) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.tv-viewport-frame #slide-special-prayers .special-time-label {
  font-size: var(--slide-tag-size) !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  padding: 4px 16px !important;
  border-radius: 10px !important;
}

.tv-viewport-frame #slide-special-prayers .special-time-value {
  font-size: calc(var(--tv-type-h1) * var(--slide-title-fit-scale, 1)) !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.1 !important;
}

.tv-viewport-frame #slide-special-prayers .special-womens-arrangement-bar {
  font-size: var(--slide-meta-size) !important;
  padding: 10px 18px !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  background: var(--womens-box-bg, #030E0D) !important;
}

.tv-viewport-frame #slide-special-prayers .special-explanation-box {
  padding: 12px 18px !important;
  border-radius: 12px !important;
  background: var(--special-guide-bg, #030E0D) !important;
  border: 1.5px solid var(--tv-border) !important;
}

.tv-viewport-frame #slide-special-prayers .special-explanation-title {
  font-size: var(--slide-tag-size) !important;
  font-weight: 800 !important;
  color: var(--tv-text-gold) !important;
}

.tv-viewport-frame #slide-special-prayers .special-explanation-text {
  font-size: var(--slide-body-size) !important;
  line-height: 1.4 !important;
  color: var(--tv-text-primary) !important;
}

/* ── QURBAN MASTER DASHBOARD (#slide-qurban-dashboard) ─────────────────────── */
.tv-viewport-frame #slide-qurban-dashboard .qurban-dashboard-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  gap: 18px !important;
  width: 100% !important;
  height: calc(100% - 50px) !important;
  box-sizing: border-box !important;
}

.tv-viewport-frame #slide-qurban-dashboard .qurban-dash-card {
  background: var(--tv-surface-elevated, var(--tenant-surface-elevated, linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.90)))) !important;
  border: 2px solid var(--tv-border) !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  font-size: var(--tv-qurban-scale, 19px) !important;
}

.tv-viewport-frame #slide-qurban-dashboard .qurban-dash-title {
  font-size: calc(var(--tv-qurban-scale, 19px) * 1.22) !important;
  font-weight: 800 !important;
  color: var(--tv-text-gold) !important;
  line-height: 1.2 !important;
}

.tv-viewport-frame #slide-qurban-dashboard .qurban-dash-header .pill-badge {
  font-size: calc(var(--tv-qurban-scale, 19px) * 0.78) !important;
  padding: 4px 14px !important;
  font-weight: 800 !important;
}

.tv-viewport-frame #slide-qurban-dashboard .qurban-dash-stats {
  font-size: var(--tv-qurban-scale, 19px) !important;
  padding: 10px 14px !important;
  gap: 12px !important;
  background: rgba(0, 0, 0, 0.20) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 10px !important;
}

.tv-viewport-frame #slide-qurban-dashboard .qurban-dash-stats div {
  font-size: var(--tv-qurban-scale, 19px) !important;
}

.tv-viewport-frame #slide-qurban-dashboard .qurban-dash-stats div span {
  font-size: var(--tv-qurban-scale, 19px) !important;
  font-weight: 800 !important;
}

.tv-viewport-frame #slide-qurban-dashboard .qurban-dash-progress-label {
  font-size: calc(var(--tv-qurban-scale, 19px) * 0.85) !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

.tv-viewport-frame #slide-qurban-dashboard .qurban-dash-progress-bar {
  height: 12px !important;
  border-radius: 6px !important;
}

.tv-viewport-frame #slide-qurban-dashboard .qurban-dash-avail-list {
  font-size: calc(var(--tv-qurban-scale, 19px) * 0.85) !important;
}

/* ── PORRIDGE DISTRIBUTION PRESENTATION LAYOUT (#slide-porridge) ────────────── */
.tv-viewport-frame #slide-porridge .porridge-slots-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px 10px !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.tv-viewport-frame #slide-porridge .porridge-day-card,
.tv-viewport-frame #slide-porridge .porridge-slot-card {
  position: relative !important;
  overflow: hidden !important;
  background: var(--tv-surface-elevated) !important;
  border: 2px solid var(--tv-border) !important;
  border-radius: 12px !important;
  padding: 7px 12px 7px 14px !important;
  box-sizing: border-box !important;
  font-size: var(--tv-porridge-scale, 18px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* Porridge Left Sidebar full color without white at top */
.tv-viewport-frame #slide-porridge .porridge-day-card::before,
.tv-viewport-frame #slide-porridge .porridge-slot-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 5px !important;
  height: 100% !important;
  border-radius: 4px 0 0 4px !important;
  z-index: 2 !important;
}

.tv-viewport-frame #slide-porridge .porridge-day-card.status-open::before,
.tv-viewport-frame #slide-porridge .porridge-slot-card.status-open::before {
  background: linear-gradient(to bottom, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.6) !important;
}

.tv-viewport-frame #slide-porridge .porridge-day-card.status-partial::before,
.tv-viewport-frame #slide-porridge .porridge-slot-card.status-partial::before {
  background: linear-gradient(to bottom, #f59e0b 0%, #d97706 100%) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6) !important;
}

.tv-viewport-frame #slide-porridge .porridge-day-card.status-booked::before,
.tv-viewport-frame #slide-porridge .porridge-slot-card.status-booked::before {
  background: linear-gradient(to bottom, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6) !important;
}

.tv-viewport-frame #slide-porridge .porridge-day-number,
.tv-viewport-frame #slide-porridge .porridge-slot-number {
  font-size: calc(var(--tv-porridge-scale, 18px) * 1.08) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.1 !important;
}

.tv-viewport-frame #slide-porridge .porridge-day-date {
  font-size: calc(var(--tv-porridge-scale, 18px) * 0.78) !important;
  color: var(--tv-text-muted, #a8beb9) !important;
  line-height: 1.2 !important;
}

.tv-viewport-frame #slide-porridge .porridge-today-badge {
  font-size: calc(var(--tv-porridge-scale, 18px) * 0.65) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
}

.tv-viewport-frame #slide-porridge .porridge-status-badge,
.tv-viewport-frame #slide-porridge .porridge-slot-badge {
  font-size: calc(var(--tv-porridge-scale, 18px) * 0.72) !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  letter-spacing: 0.3px !important;
}

.tv-viewport-frame #slide-porridge .porridge-card-middle {
  margin: 2px 0 3px 0 !important;
}

.tv-viewport-frame #slide-porridge .porridge-progress-labels {
  margin-bottom: 2px !important;
}

.tv-viewport-frame #slide-porridge .porridge-progress-bar {
  height: 6px !important;
  border-radius: 4px !important;
}

/* Porridge Sponsor / Niyyah section styled like Qurban dashboard */
.tv-viewport-frame #slide-porridge .porridge-card-bottom {
  padding: 5px 10px !important;
  gap: 2px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.14) 0%, rgba(14, 40, 38, 0.75) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.30) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.tv-viewport-frame #slide-porridge .porridge-sponsor-label {
  font-size: calc(var(--tv-porridge-scale, 18px) * 0.62) !important;
  font-weight: 700 !important;
  color: var(--tv-text-muted, #a8beb9) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.tv-viewport-frame #slide-porridge .porridge-sponsor-name,
.tv-viewport-frame #slide-porridge .porridge-slot-name {
  font-size: calc(var(--tv-porridge-scale, 18px) * 0.95) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.tv-viewport-frame #slide-porridge .porridge-type-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: 1px !important;
}

.tv-viewport-frame #slide-porridge .porridge-type-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: calc(var(--tv-porridge-scale, 18px) * 0.68) !important;
  font-weight: 700 !important;
  color: var(--tv-text-gold, #f4dc82) !important;
  background: rgba(212, 175, 55, 0.12) !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.tv-viewport-frame #slide-porridge .porridge-niyyah-text {
  font-size: calc(var(--tv-porridge-scale, 18px) * 0.75) !important;
  color: var(--tv-text-secondary, #cbd5e1) !important;
  font-family: var(--tenant-font-desc, 'Outfit', sans-serif) !important;
  font-style: var(--tenant-font-style-body, normal) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.tv-viewport-frame #slide-porridge .porridge-funded-val {
  font-size: calc(var(--tv-porridge-scale, 18px) * 0.82) !important;
  font-weight: 800 !important;
  color: var(--tv-text-gold, #f4dc82) !important;
}

.tv-viewport-frame #slide-porridge .porridge-target-val {
  font-size: calc(var(--tv-porridge-scale, 18px) * 0.72) !important;
  color: var(--tv-text-muted, #a8beb9) !important;
}

.tv-viewport-frame #slide-porridge .porridge-summary-pill {
  font-size: calc(var(--tv-porridge-scale, 18px) * 0.82) !important;
  padding: 5px 14px !important;
}

/* ── 8B. DEDICATED FULL-CANVAS PRAYER TIMES PAGE (#slide-prayers) ─────────────
   60/40 Split: 60% Today's Prayer Table, 40% Hero Next Prayer Showcase,
   Top Slide Header (10–12%), Bottom Auxiliary Strip (10–12%).
   ══════════════════════════════════════════════════════════════════════════ */
.tv-viewport-frame #slide-prayers {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  overflow: hidden !important;
}

/* 1. Main Content Canvas: Dynamic Schedule & Hero Split (60% / 40%) */
.tv-viewport-frame #slide-prayers .prayer-page-main {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: minmax(680px, 0.88fr) minmax(920px, 1.55fr) !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Glassmorphic Panel Foundations: Balanced card borders and smooth dark emerald gradient */
.tv-viewport-frame #slide-prayers .prayer-schedule-panel,
.tv-viewport-frame #slide-prayers .hero-prayer-panel {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  border: 1.5px solid var(--tenant-border, rgba(224, 190, 86, 0.28)) !important;
  border-radius: 18px !important;
  background: var(--prayer-panel-bg, var(--tenant-surface, linear-gradient(150deg, rgba(14, 42, 38, 0.88), rgba(5, 18, 18, 0.88)))) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Flagship Royal Emerald & Imperial Gold specific theme panel glass background */
[data-theme="emerald-gold"] .tv-viewport-frame:not([data-theme]) #slide-prayers .prayer-schedule-panel,
[data-theme="emerald-gold"] .tv-viewport-frame:not([data-theme]) #slide-prayers .hero-prayer-panel,
.tv-viewport-frame[data-theme="emerald-gold"] #slide-prayers .prayer-schedule-panel,
.tv-viewport-frame[data-theme="emerald-gold"] #slide-prayers .hero-prayer-panel,
:root:not([data-theme]) .tv-viewport-frame #slide-prayers .prayer-schedule-panel,
:root:not([data-theme]) .tv-viewport-frame #slide-prayers .hero-prayer-panel,
[data-theme="emerald-gold"] .tv-viewport-frame:not([data-theme]) #slide-ramadan .ramadan-fasting-hero,
[data-theme="emerald-gold"] .tv-viewport-frame:not([data-theme]) #slide-ramadan .ramadan-today-card,
[data-theme="emerald-gold"] .tv-viewport-frame:not([data-theme]) #slide-ramadan .ramadan-right-panel,
[data-theme="emerald-gold"] .tv-viewport-frame:not([data-theme]) #slide-ramadan .ramadan-table-wrap,
[data-theme="emerald-gold"] .tv-viewport-frame:not([data-theme]) #slide-ramadan .ramadan-subpage-header,
.tv-viewport-frame[data-theme="emerald-gold"] #slide-ramadan .ramadan-fasting-hero,
.tv-viewport-frame[data-theme="emerald-gold"] #slide-ramadan .ramadan-today-card,
.tv-viewport-frame[data-theme="emerald-gold"] #slide-ramadan .ramadan-right-panel,
.tv-viewport-frame[data-theme="emerald-gold"] #slide-ramadan .ramadan-table-wrap,
.tv-viewport-frame[data-theme="emerald-gold"] #slide-ramadan .ramadan-subpage-header,
:root:not([data-theme]) .tv-viewport-frame #slide-ramadan .ramadan-fasting-hero,
:root:not([data-theme]) .tv-viewport-frame #slide-ramadan .ramadan-today-card,
:root:not([data-theme]) .tv-viewport-frame #slide-ramadan .ramadan-right-panel,
:root:not([data-theme]) .tv-viewport-frame #slide-ramadan .ramadan-table-wrap,
:root:not([data-theme]) .tv-viewport-frame #slide-ramadan .ramadan-subpage-header,
[data-theme="emerald-gold"] .tv-viewport-frame:not([data-theme]) #slide-wisdom .tv-wisdom-card,
.tv-viewport-frame[data-theme="emerald-gold"] #slide-wisdom .tv-wisdom-card,
:root:not([data-theme]) .tv-viewport-frame #slide-wisdom .tv-wisdom-card,
[data-theme="emerald-gold"] .tv-viewport-frame:not([data-theme]) #slide-notices .notice-card,
.tv-viewport-frame[data-theme="emerald-gold"] #slide-notices .notice-card,
:root:not([data-theme]) .tv-viewport-frame #slide-notices .notice-card,
[data-theme="emerald-gold"] .tv-viewport-frame:not([data-theme]) #slide-porridge .porridge-day-card,
.tv-viewport-frame[data-theme="emerald-gold"] #slide-porridge .porridge-day-card,
:root:not([data-theme]) .tv-viewport-frame #slide-porridge .porridge-day-card {
  background: linear-gradient(145deg, rgba(10, 36, 31, 0.95), rgba(4, 18, 16, 0.95)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Generic Dynamic Theme panel glass background for all other themes */
.tv-viewport-frame #slide-prayers .prayer-schedule-panel,
.tv-viewport-frame #slide-prayers .hero-prayer-panel {
  background: var(--prayer-panel-bg, var(--tenant-surface)) !important;
}

.tv-viewport-frame #slide-ramadan .ramadan-fasting-hero,
.tv-viewport-frame #slide-ramadan .ramadan-today-card,
.tv-viewport-frame #slide-ramadan .ramadan-right-panel,
.tv-viewport-frame #slide-ramadan .ramadan-table-wrap,
.tv-viewport-frame #slide-ramadan .ramadan-subpage-header {
  background: var(--ramadan-panel-bg, var(--ramadan-card-bg, var(--tenant-surface))) !important;
}

.tv-viewport-frame #slide-wisdom .tv-wisdom-card {
  background: var(--wisdom-card-bg, var(--tenant-surface)) !important;
}

.tv-viewport-frame #slide-notices .notice-card {
  background: var(--notice-card-bg, var(--tenant-surface)) !important;
}

.tv-viewport-frame #slide-porridge .porridge-day-card {
  background: var(--porridge-card-bg, var(--tenant-surface)) !important;
}

/* Document & Forms and Community Channel unified section cards */
.tv-viewport-frame #slide-forms .forms-tv-left-card,
.tv-viewport-frame #slide-social .social-tv-info-card {
  background: var(--forms-card-bg, #09221D) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.tv-viewport-frame #slide-forms .forms-tv-right-card,
.tv-viewport-frame #slide-social .social-tv-qr-card {
  background: var(--forms-qr-card-bg, var(--social-qr-card-bg, #091B1B)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Special Prayer Schedule section colors */
.tv-viewport-frame #slide-special-prayers .special-prayer-card-wrap {
  background: var(--special-card-bg, #091B1B) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.tv-viewport-frame #slide-special-prayers .special-dua-box {
  background: var(--special-dua-bg, #09221D) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Left: Prayer Schedule Panel */
.tv-viewport-frame #slide-prayers .prayer-schedule-panel {
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.tv-viewport-frame #slide-prayers .panel-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  padding: 4px 8px 12px !important;
  border-bottom: 1px solid var(--tenant-border, rgba(224, 190, 86, 0.15)) !important;
}

.tv-viewport-frame #slide-prayers .panel-head-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.tv-viewport-frame #slide-prayers .panel-kicker {
  color: var(--tv-text-gold, #f4dc82) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 2.2px !important;
  text-transform: uppercase !important;
}

.tv-viewport-frame #slide-prayers .panel-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin-top: 3px !important;
  color: var(--role-h1-color, var(--tenant-text-primary, #ffffff)) !important;
  letter-spacing: 0.5px !important;
}

.tv-viewport-frame #slide-prayers .panel-ar {
  font-family: "Scheherazade New", 'Amiri', serif !important;
  font-size: 28px !important;
  color: var(--tenant-gold, #f4dc82) !important;
  direction: rtl !important;
  line-height: 1 !important;
  text-shadow: 0 0 16px rgba(216, 182, 76, 0.55), 0 2px 6px rgba(0, 0, 0, 0.8) !important;
}

.tv-viewport-frame #slide-prayers .schedule-columns {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr 1fr !important;
  align-items: center !important;
  color: var(--role-label-color, var(--tenant-desc-color, #a8beb9)) !important;
  font-size: calc(var(--tv-prayer-data-size, 22px) * 0.68) !important;
  font-weight: 800 !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  padding: 10px 16px 6px !important;
}

.tv-viewport-frame #slide-prayers .schedule-columns span:not(:first-child) {
  text-align: center !important;
}

.tv-viewport-frame #slide-prayers .schedule-rows {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 0 !important;
  padding: 14px 0 10px !important;
}

/* Individual Prayer Row: Elegant, spacious, unified spacing filling panel height */
.tv-viewport-frame #slide-prayers .prayer-table-row {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr 1fr !important;
  align-items: center !important;
  position: relative !important;
  padding: 16px 24px !important;
  min-height: 84px !important;
  border-radius: 18px !important;
  border: 1px solid var(--prayer-row-border, rgba(37, 126, 99, 0.28)) !important;
  background: var(--tv-surface-elevated, var(--tenant-surface-elevated, linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.90)))) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition: all 0.4s ease !important;
}

.tv-viewport-frame #slide-prayers .prayer-table-row .row-name-col {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.tv-viewport-frame #slide-prayers .prayer-table-row .row-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  background: rgba(216, 182, 76, 0.12) !important;
  color: var(--tv-text-gold, #f4dc82) !important;
  flex: 0 0 36px !important;
}

.tv-viewport-frame #slide-prayers .prayer-table-row .row-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.tv-viewport-frame #slide-prayers .prayer-table-row .row-name {
  font-weight: 800 !important;
  font-size: var(--tv-prayer-data-size, 22px) !important;
  color: var(--prayer-name-color, var(--tenant-text-primary, #ffffff)) !important;
  letter-spacing: 0.3px !important;
}

.tv-viewport-frame #slide-prayers .prayer-table-row .row-name-texts {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.25 !important;
  gap: 6px !important;
}

.tv-viewport-frame #slide-prayers .prayer-table-row .row-name-texts span:first-child {
  letter-spacing: 0.3px !important;
}

.tv-viewport-frame #slide-prayers .prayer-table-row .row-name-texts span:last-child {
  font-size: calc(var(--tv-prayer-data-size, 22px) * 0.65) !important;
  color: var(--tenant-desc-color, #a8beb9) !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
  letter-spacing: 0.3px !important;
}

.tv-viewport-frame #slide-prayers .prayer-table-row .row-time-col {
  text-align: center !important;
  font-size: var(--tv-prayer-time-size, 34px) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--adhan-color, var(--tenant-text-primary, #ffffff)) !important;
}

/* Dynamic States: NEXT, ADHAN, IQAMAH */
.tv-viewport-frame #slide-prayers .prayer-table-row.state-next {
  background: var(--active-prayer-bg, linear-gradient(105deg, rgba(216, 182, 76, 0.20), rgba(216, 182, 76, 0.06))) !important;
  border: 1px solid var(--active-prayer-border, rgba(244, 220, 130, 0.42)) !important;
  box-shadow: inset 4px 0 0 var(--active-prayer-border, var(--tv-gold, #d8b64c)), 0 8px 25px rgba(0, 0, 0, 0.16) !important;
}

.tv-viewport-frame #slide-prayers .prayer-table-row.state-next .row-icon {
  background: var(--tv-gold, #d8b64c) !important;
  color: #16201d !important;
}

.tv-viewport-frame #slide-prayers .row-next-badge {
  position: absolute !important;
  right: 12px !important;
  top: -9px !important;
  background: var(--tv-text-gold, #f4dc82) !important;
  color: #17221f !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.tv-viewport-frame #slide-prayers .prayer-table-row.state-adhan-now {
  background: linear-gradient(105deg, rgba(245, 158, 11, 0.28), rgba(245, 158, 11, 0.08)) !important;
  border: 1px solid #f59e0b !important;
  animation: tvAdhanPulse 2s infinite !important;
}

.tv-viewport-frame #slide-prayers .prayer-table-row.state-iqamah-now {
  background: linear-gradient(105deg, rgba(16, 185, 129, 0.30), rgba(16, 185, 129, 0.08)) !important;
  border: 1px solid #10b981 !important;
  animation: tvIqamahPulse 1.8s infinite !important;
}

.tv-viewport-frame #slide-prayers .prayer-table-row.state-completed {
  opacity: 0.65 !important;
}

/* Right Hero Panel: Organized into 3 distinct structured cards */
.tv-viewport-frame #slide-prayers .hero-prayer-panel {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 14px !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

@keyframes heroCenterGlowPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.88);
    opacity: 0.55;
    filter: blur(10px);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.10);
    opacity: 0.95;
    filter: blur(20px);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.88);
    opacity: 0.55;
    filter: blur(10px);
  }
}

.tv-viewport-frame #slide-prayers .hero-prayer-panel:before {
  content: "" !important;
  display: var(--hero-glow-display, none) !important;
  position: absolute !important;
  width: 540px !important;
  height: 540px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(216, 182, 76, 0.24) 0%, rgba(212, 175, 55, 0.12) 38%, rgba(212, 175, 55, 0.03) 58%, transparent 72%) !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: heroCenterGlowPulse 5s ease-in-out infinite alternate !important;
}

.tv-viewport-frame #slide-prayers .hero-prayer-panel > * {
  position: relative !important;
  z-index: 1 !important;
}

/* 1. Mosque Identity Sub-Card (Top of Hero Panel) */
.tv-viewport-frame #slide-prayers .prayer-masjid-card {
  width: 100% !important;
  background: var(--tv-surface-elevated, var(--tenant-surface-elevated, linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.92)))) !important;
  border: 1px solid var(--masjid-card-border, rgba(216, 182, 76, 0.22)) !important;
  border-radius: 16px !important;
  padding: 10px 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Arabic Calligraphy Center Emblem - Pure Radiant Gold */
.tv-viewport-frame #slide-prayers .masjid-card-emblem {
  font-family: 'Amiri', 'Scheherazade New', 'Cairo', serif !important;
  font-size: var(--header-calligraphy-size, var(--tv-font-calligraphy, 38px)) !important;
  font-weight: 700 !important;
  color: var(--masjid-emblem-color, var(--calligraphy-color, var(--tenant-gold, #f4dc82))) !important;
  line-height: 1.35 !important;
  direction: rtl !important;
  text-shadow: 0 0 18px rgba(216, 182, 76, 0.65), 0 2px 6px rgba(0, 0, 0, 0.8) !important;
  letter-spacing: 1px !important;
  margin-top: 10px !important;
  margin-bottom: 8px !important;
  padding: 2px 0 !important;
  user-select: none !important;
}

.tv-viewport-frame #slide-prayers .masjid-card-name {
  font-family: var(--tenant-font-heading, 'Outfit', sans-serif) !important;
  font-style: var(--tenant-font-style-heading, normal) !important;
  font-size: 40px !important;
  font-weight: 900 !important;
  color: var(--masjid-name-color, var(--tenant-text-primary, #ffffff)) !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  margin: 2px 0 6px 0 !important;
  line-height: 1.2 !important;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.7) !important;
}

/* Home Page City and URL stacked with line break & distinct beautiful colors */
.tv-viewport-frame #slide-prayers .masjid-card-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin-top: 3px !important;
}

.tv-viewport-frame #slide-prayers .masjid-meta-break {
  display: block !important;
  height: 0 !important;
  margin: 0 !important;
}

/* Distinct City styling: Soft Mint / Sage Emerald with seamless borderless pill */
.tv-viewport-frame #slide-prayers .masjid-location-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: var(--masjid-loc-pill-bg, rgba(16, 185, 129, 0.16)) !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--masjid-loc-pill-text, #a7f3d0) !important;
}

.tv-viewport-frame #slide-prayers .masjid-location-pill .masjid-card-city {
  color: var(--masjid-loc-pill-text, #a7f3d0) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* Distinct URL styling: Radiant Imperial Gold */
.tv-viewport-frame #slide-prayers .masjid-url-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 14px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  background: var(--masjid-url-pill-bg, linear-gradient(135deg, rgba(212, 175, 55, 0.24) 0%, rgba(212, 175, 55, 0.08) 100%)) !important;
  border: 1.5px solid var(--tenant-gold, #d4af37) !important;
  color: var(--masjid-url-pill-text, var(--tv-text-gold, #f4dc82)) !important;
  text-transform: lowercase !important;
  letter-spacing: 0.6px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.tv-viewport-frame #slide-prayers .masjid-url-pill .masjid-card-url {
  color: var(--masjid-url-pill-text, var(--tv-text-gold, #f4dc82)) !important;
  font-weight: 800 !important;
}

.tv-viewport-frame #slide-prayers .masjid-meta-pill .meta-icon {
  font-size: 12px !important;
  line-height: 1 !important;
}

/* 2. Live Next Prayer & QR Divided Showcase Card (Middle of Hero Panel) */
.tv-viewport-frame #slide-prayers .hero-prayer-center {
  flex: 1 1 auto !important;
  width: 100% !important;
  background: var(--tenant-surface-elevated, radial-gradient(ellipse at center, rgba(212, 175, 55, 0.08) 0%, rgba(0, 0, 0, 0.42) 100%)) !important;
  border: 1.5px solid var(--tenant-border, rgba(224, 190, 86, 0.28)) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

.tv-viewport-frame #slide-prayers .hero-prayer-divided {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 16px !important;
  align-items: stretch !important;
}

/* Left Sub-Column: Live Prayer Status, Next Prayer, Countdown, Clock */
.tv-viewport-frame #slide-prayers .hero-prayer-split-left {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-width: 0 !important;
  padding: 4px 6px !important;
  background: var(--countdown-card-bg, transparent) !important;
  border-right: 1.5px solid var(--countdown-card-border, var(--tenant-border, rgba(224, 190, 86, 0.2))) !important;
}

.tv-viewport-frame #slide-prayers .hero-prayer-split-left:before {
  content: "" !important;
  display: var(--countdown-glow-display, none) !important;
  position: absolute !important;
  width: 360px !important;
  height: 360px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(216, 182, 76, 0.22) 0%, rgba(212, 175, 55, 0.08) 45%, transparent 70%) !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: heroCenterGlowPulse 5s ease-in-out infinite alternate !important;
}

.tv-viewport-frame #slide-prayers .hero-prayer-split-left > * {
  position: relative !important;
  z-index: 1 !important;
}

.tv-viewport-frame #slide-prayers .hero-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 3px 12px !important;
  border-radius: 20px !important;
  background: var(--hero-status-pill-bg, rgba(16, 185, 129, 0.15)) !important;
  color: var(--hero-status-pill-color, #34d399) !important;
  border: 1px solid var(--hero-status-pill-border, rgba(16, 185, 129, 0.38)) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

.tv-viewport-frame #slide-prayers .status-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: 0 0 15px currentColor !important;
  animation: tvDotPulse 1.7s infinite !important;
}

.tv-viewport-frame #slide-prayers .hero-next-label {
  margin-top: 6px !important;
  color: var(--countdown-label-color, var(--tv-text-muted, #a8beb9)) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

.tv-viewport-frame #slide-prayers .hero-next-name {
  font-family: var(--tenant-font-heading, 'Outfit', sans-serif) !important;
  font-style: var(--tenant-font-style-heading, normal) !important;
  color: var(--countdown-prayer-name, var(--tv-text-gold, #f4dc82)) !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  margin: 1px 0 !important;
  letter-spacing: 1px !important;
  line-height: 1.1 !important;
}

/* Dominant Countdown */
.tv-viewport-frame #slide-prayers .hero-countdown {
  margin: 2px 0 !important;
  font-size: 54px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--countdown-digits-color, var(--role-countdown-color, var(--tenant-gold, #ffffff))) !important;
  text-shadow: 0 6px 25px rgba(216, 182, 76, 0.3) !important;
}

.tv-viewport-frame #slide-prayers .hero-count-caption {
  margin-top: 3px !important;
  color: var(--role-h5-color, var(--tenant-desc-color, #a8beb9)) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

.tv-viewport-frame #slide-prayers .hero-progress-bar {
  width: 90% !important;
  height: 5px !important;
  border-radius: 10px !important;
  background: var(--countdown-bar-track, var(--slide-progress-track-bg, rgba(255, 255, 255, 0.08))) !important;
  margin-top: 8px !important;
  overflow: hidden !important;
}

.tv-viewport-frame #slide-prayers .hero-progress-bar span {
  display: block !important;
  height: 100% !important;
  background: var(--countdown-bar-fill, linear-gradient(90deg, var(--slide-progress-start, #d8b64c), var(--slide-progress-end, #f4dc82))) !important;
  border-radius: inherit !important;
  box-shadow: 0 0 15px rgba(216, 182, 76, 0.45) !important;
  transition: width 1s linear !important;
}

.tv-viewport-frame #slide-prayers .hero-clock {
  margin-top: 8px !important;
  width: 90% !important;
  box-sizing: border-box !important;
  color: var(--tenant-text-primary, rgba(255, 255, 255, 0.88)) !important;
  font-variant-numeric: tabular-nums !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  background: var(--tenant-surface-elevated, rgba(0, 0, 0, 0.32)) !important;
  padding: 5px 12px !important;
  border-radius: 12px !important;
  border: 1px solid var(--tenant-border, rgba(224, 190, 86, 0.18)) !important;
}

.tv-viewport-frame #slide-prayers .hero-clock-time-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.tv-viewport-frame #slide-prayers .hero-clock-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--tv-text-gold, #f4dc82) !important;
  background: rgba(212, 175, 55, 0.12) !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
}

.tv-viewport-frame #slide-prayers #heroDigitalClock {
  color: var(--header-clock-color, var(--tenant-text-primary, #ffffff)) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}

.tv-viewport-frame #slide-prayers .hero-clock-dates-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--tenant-desc-color, #a8beb9) !important;
}

.tv-viewport-frame #slide-prayers .hero-date-divider {
  color: var(--tv-text-gold, #d4af37) !important;
  opacity: 0.7 !important;
}

/* Right Sub-Column: Large Mobile Community Portal QR Showcase */
.tv-viewport-frame #slide-prayers .hero-prayer-split-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-width: 0 !important;
  padding: 8px 10px !important;
  background: var(--qr-card-bg, var(--tenant-surface-elevated, rgba(0, 0, 0, 0.28))) !important;
  border-radius: 14px !important;
  border: 1px solid var(--qr-card-border, var(--tenant-border, rgba(224, 190, 86, 0.22))) !important;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4) !important;
}

.tv-viewport-frame #slide-prayers .hero-qr-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  margin-bottom: 6px !important;
}

.tv-viewport-frame #slide-prayers .hero-qr-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  background: var(--hero-qr-badge-bg, rgba(16, 185, 129, 0.18)) !important;
  color: var(--hero-qr-badge-color, #34d399) !important;
  border: 1px solid var(--hero-qr-badge-border, rgba(16, 185, 129, 0.35)) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}

.tv-viewport-frame #slide-prayers .hero-qr-title {
  font-family: var(--tenant-font-heading, 'Outfit', sans-serif) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--qr-title-color, var(--tv-text-gold, #f4dc82)) !important;
  margin: 1px 0 0 0 !important;
  letter-spacing: 0.8px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

.tv-viewport-frame #slide-prayers .hero-qr-subtitle {
  font-size: 10.5px !important;
  color: var(--qr-sub-color, var(--tv-text-muted, #a8beb9)) !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.2px !important;
}

.tv-viewport-frame #slide-prayers .hero-qr-frame {
  width: 220px !important;
  height: 220px !important;
  background: var(--qr-frame-bg, #ffffff) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 20px rgba(212, 175, 55, 0.3) !important;
  border: 2px solid var(--qr-frame-border, var(--tv-text-gold, #d4af37)) !important;
  margin: 8px 0 4px 0 !important;
}

.tv-viewport-frame #slide-prayers .hero-qr-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.tv-viewport-frame #slide-prayers .hero-qr-footer {
  display: none !important;
}

.tv-viewport-frame #slide-prayers .hero-qr-url-pill {
  display: none !important;
}

/* 3. Auxiliary Times Sub-Card (Bottom of Hero Panel) */
.tv-viewport-frame #slide-prayers .prayer-aux-card {
  width: 100% !important;
  background: var(--tv-surface-elevated, var(--tenant-surface-elevated, linear-gradient(145deg, rgba(14, 48, 42, 0.88), rgba(6, 26, 23, 0.92)))) !important;
  border: 1.5px solid var(--aux-card-border, var(--tenant-border, rgba(224, 190, 86, 0.32))) !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.tv-viewport-frame #slide-prayers .aux-item {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}

.tv-viewport-frame #slide-prayers .aux-item:not(:last-child) {
  border-right: 1px solid rgba(224, 190, 86, 0.15) !important;
}

.tv-viewport-frame #slide-prayers .aux-item .aux-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--aux-label-color, var(--tv-text-gold, #f4dc82)) !important;
  line-height: 1.2 !important;
}

.tv-viewport-frame #slide-prayers .aux-item .aux-time {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--aux-time-color, #ffffff) !important;
  line-height: 1.2 !important;
  margin-top: 1px !important;
  font-variant-numeric: tabular-nums !important;
}

/* ── 8C. CANONICAL REUSABLE GLOBAL FOOTER (64px) ───────────────────────────── */
.tv-viewport-frame .board-footer {
  flex: 0 0 var(--presentation-footer-height, 64px) !important;
  height: var(--presentation-footer-height, 64px) !important;
  min-height: var(--presentation-footer-height, 64px) !important;
  max-height: var(--presentation-footer-height, 64px) !important;
  padding: 2px 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: none !important;
  border-top: 1px solid var(--footer-border-color, var(--tv-border-subtle, rgba(212, 175, 55, 0.22))) !important;
  border-bottom: 1px solid var(--footer-border-color, var(--tv-border-subtle, rgba(212, 175, 55, 0.22))) !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden !important;
}

.tv-viewport-frame .discipline-wrapper {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  position: relative !important;
  margin-right: 16px !important;
}

.tv-viewport-frame .discipline-card {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.5s ease, transform 0.5s ease !important;
}

.tv-viewport-frame .discipline-card.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.tv-viewport-frame .disp-icon {
  font-size: 24px !important;
  color: var(--tv-text-gold, #D4AF37) !important;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4)) !important;
}

.tv-viewport-frame .disp-drum-text {
  font-size: var(--tv-disc-font-size, 18px) !important;
  font-weight: 600 !important;
  color: var(--tv-text-primary, #F8FAFC) !important;
  letter-spacing: 0.3px !important;
}

.tv-viewport-frame .footer-right-group {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-shrink: 0 !important;
}

.tv-viewport-frame .footer-adhan-widget-split {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 8px !important;
  box-shadow: none !important;
}

.tv-viewport-frame .f-adhan-label {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--tv-text-muted) !important;
}

.tv-viewport-frame .f-adhan-prayer {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--tv-text-gold) !important;
}

.tv-viewport-frame .f-adhan-divider {
  width: 1px !important;
  height: 24px !important;
  background: var(--tv-border) !important;
}

.tv-viewport-frame .f-adhan-time {
  font-size: 18px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--countdown-badge-text, #041c17) !important;
}

/* ── 9. CALIBRATION MODALS & FULLSCREEN DIALOGS REMAIN AT VIEWPORT LEVEL ────── */
.tv-calib-modal,
.tv-setup-overlay,
.tv-device-info-modal,
.tv-sleep-overlay {
  z-index: 99999 !important;
}

/* ==========================================================================
   PRAYER SLIDE CONDITIONAL FOOTER & CANVAS OVERRIDES
   When on #slide-prayers (active slide), hide footer Adhan split & footer QR.
   Expand discipline banner to full available width from the left edge.
   On other slides (Wisdom, Notices, Posters, Qurban, Ramadan, etc.),
   footer Adhan split and footer QR remain visible and functional.
   ========================================================================== */
body.is-prayers-slide #footerAdhanWidget,
body.is-prayers-slide #mobileQrBadgeContainer,
#mainBoardContainer.is-prayers-slide #footerAdhanWidget,
#mainBoardContainer.is-prayers-slide #mobileQrBadgeContainer {
  display: none !important;
}

body.is-prayers-slide .discipline-wrapper,
#mainBoardContainer.is-prayers-slide .discipline-wrapper {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-right: 18px !important;
}

body.is-prayers-slide .discipline-card,
#mainBoardContainer.is-prayers-slide .discipline-card {
  width: 100% !important;
  max-width: 100% !important;
}

body.is-prayers-slide .board-header,
#mainBoardContainer.is-prayers-slide .board-header {
  background: var(--header-bg, var(--tenant-bg, #041c17)) !important;
}

body.is-prayers-slide .board-footer,
#mainBoardContainer.is-prayers-slide .board-footer {
  background: var(--footer-bg, var(--header-bg, var(--tenant-bg, #041c17))) !important;
}

/* ── Porridge Distribution: Flagship Emerald-Gold & Full-Color Sidebar Styling ── */
.porridge-day-card.status-open::before {
  background: linear-gradient(to bottom, #10b981 0%, #059669 100%) !important;
}
.porridge-day-card.status-partial::before {
  background: linear-gradient(to bottom, #f59e0b 0%, #d97706 100%) !important;
}
.porridge-day-card.status-booked::before {
  background: linear-gradient(to bottom, #ef4444 0%, #dc2626 100%) !important;
}

[data-theme="emerald-gold"] .porridge-card-bottom,
:root:not([data-theme]) .porridge-card-bottom {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.14) 0%, rgba(14, 40, 38, 0.75) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.30) !important;
}