/* ============================================================
   Audio Player CSS — Mini Player + Full Player + Quran UI
   نور Islamic App v3
   ============================================================ */

/* ── CSS Variable Additions ─────────────────────────────── */
:root {
  --mini-player-height: 72px;
  --fp-handle:     rgba(255,255,255,0.18);
}

/* ── Page Bottom Padding when player active ─────────────── */
#page-container.player-active {
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--mini-player-height) + 4px);
}

/* ═══════════════════════════════════════════════════════════
   MINI PLAYER
   ══════════════════════════════════════════════════════════ */
#mini-player {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 2px));
  width: 100%;
  max-width: var(--max-width);
  z-index: 190;
  transition: transform 0.40s var(--ease-spring);
  will-change: transform;
}

#mini-player.visible {
  transform: translateX(-50%) translateY(0);
}

.mp-inner {
  margin: 0 8px;
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow:
    0 -2px 8px rgba(0,0,0,0.35),
    0 4px 20px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.05);
  cursor: pointer;
  transition: box-shadow var(--transition-base);
}

.mp-inner:active { opacity: 0.9; }

/* Progress strip at top */
.mp-progress-strip {
  height: 2.5px;
  background: var(--border-subtle);
  position: relative;
}
.mp-progress-fill {
  position: absolute; top: 0; left: 0;
  height: 100%;
  background: var(--color-primary);
  border-radius: 0 2px 2px 0;
  transition: width 0.25s linear;
  min-width: 0%;
  max-width: 100%;
}

/* Content row */
.mp-body {
  display: flex; align-items: center;
  gap: var(--space-3);
  padding: 10px 12px 10px 14px;
  height: calc(var(--mini-player-height) - 2.5px);
}

/* Artwork circle */
.mp-artwork {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--gradient-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.mp-artwork svg { display: block; }

/* Text */
.mp-info { flex: 1; min-width: 0; }
.mp-surah {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-reciter {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}

/* Controls */
.mp-controls {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}

.mp-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-spring);
  min-height: 36px;
}
.mp-btn:active { transform: scale(0.85); }
.mp-btn svg   { display: block; }

.mp-btn-play {
  width: 40px; height: 40px;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(16,185,129,0.35);
}
.mp-btn-play:active { transform: scale(0.88); }

/* Loading state */
.mp-btn-play.loading { background: var(--bg-elevated); color: var(--color-primary); }
.mp-btn-play.loading svg { animation: spin 0.8s linear infinite; }


/* ═══════════════════════════════════════════════════════════
   FULL PLAYER (Bottom Sheet Overlay)
   ══════════════════════════════════════════════════════════ */
#full-player {
  position: fixed;
  inset: 0;
  z-index: 280;
  pointer-events: none;
  max-width: var(--max-width);
  left: 50%;
  transform: translateX(-50%);
}

#full-player.open { pointer-events: all; }

/* Backdrop */
.fp-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.38s var(--ease-in-out);
}
#full-player.open .fp-backdrop { background: rgba(0,0,0,0.72); }

/* Sheet */
.fp-sheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-surface);
  border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
  border-top: 1px solid var(--border-default);
  padding-bottom: calc(var(--safe-bottom) + var(--space-6));
  transform: translateY(100%);
  transition: transform 0.42s var(--ease-spring);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.55);
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#full-player.open .fp-sheet { transform: translateY(0); }

/* Handle bar */
.fp-handle-bar {
  width: 36px; height: 4px;
  background: var(--border-default);
  border-radius: var(--radius-full);
  margin: 12px auto 0;
}

/* Full player header */
.fp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-5);
}
.fp-header-title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1px;
}

/* Artwork */
.fp-artwork-wrap {
  margin: var(--space-4) auto;
  width: 192px; height: 192px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  animation: fadeInScale 0.38s var(--ease-spring) both;
}
.fp-artwork-wrap svg { display: block; width: 100%; height: 100%; }

/* Track info */
.fp-info {
  text-align: center;
  padding: 0 var(--space-5);
  margin-bottom: var(--space-4);
}
.fp-surah-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.2;
}
.fp-reciter-name {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
  font-weight: 500;
}

/* Progress scrubber */
.fp-scrubber {
  padding: 0 var(--space-5);
  margin-bottom: var(--space-4);
}
.fp-track {
  height: 4px;
  background: var(--border-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.fp-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: width 0.25s linear;
  pointer-events: none;
}
.fp-times {
  display: flex; justify-content: space-between;
  margin-top: var(--space-2);
}
.fp-time {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.5px;
  direction: ltr;
}

/* Main controls */
.fp-controls {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  margin-bottom: var(--space-5);
}
.fp-ctrl-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none; background: none;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-spring);
  min-height: 48px;
}
.fp-ctrl-btn:active { transform: scale(0.85); }
.fp-ctrl-btn svg   { display: block; }
.fp-ctrl-btn:hover { color: var(--text-primary); }

.fp-play-btn {
  width: 68px; height: 68px;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: var(--shadow-emerald);
  border-radius: 50%;
}
.fp-play-btn:active  { transform: scale(0.90); }

.fp-play-btn.loading {
  background: var(--bg-elevated);
  color: var(--color-primary);
  box-shadow: none;
}
.fp-play-btn.loading svg { animation: spin 0.8s linear infinite; }

/* Surah switcher row */
.fp-surah-list {
  padding: 0 var(--space-4);
  border-top: 1px solid var(--border-subtle);
  max-height: 240px;
  overflow-y: auto;
}
.fp-surah-row {
  display: flex; align-items: center;
  gap: var(--space-3);
  padding: 11px var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}
.fp-surah-row:last-child { border-bottom: none; }
.fp-surah-row:active, .fp-surah-row:hover { background: var(--color-primary-subtle); }
.fp-surah-row.playing { background: var(--color-primary-subtle); }
.fp-surah-num {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
  font-family: var(--font-display);
}
.fp-surah-row.playing .fp-surah-num {
  background: var(--color-primary);
  border-color: transparent;
  color: #fff;
}
.fp-surah-name-txt { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); flex: 1; }
.fp-surah-meta    { font-size: 11px; color: var(--text-muted); }


/* ═══════════════════════════════════════════════════════════
   QURAN PAGE COMPONENTS
   ══════════════════════════════════════════════════════════ */

/* Reciter scroll */
.reciter-scroll {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reciter-scroll::-webkit-scrollbar { display: none; }

.reciter-card {
  flex-shrink: 0;
  width: 100px;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-spring);
  position: relative; overflow: hidden;
}
.reciter-card:active { transform: scale(0.93); }
.reciter-card.active {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

.reciter-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}
.reciter-avatar svg { display: block; width: 100%; height: 100%; }

.reciter-name-card {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.35;
}
.reciter-country {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
}

.reciter-fav-btn {
  position: absolute; top: 6px; left: 6px;
  width: 22px; height: 22px;
  background: none; border: none;
  color: var(--text-disabled);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--transition-fast), transform var(--transition-spring);
  padding: 0;
}
.reciter-fav-btn.active { color: var(--color-accent); }
.reciter-fav-btn:active { transform: scale(1.25); }
.reciter-fav-btn svg { display: block; }

/* Surah list item */
.surah-row {
  display: flex; align-items: center;
  gap: var(--space-3);
  padding: 11px var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--transition-fast);
  min-height: 56px;
}
.surah-row:last-child { border-bottom: none; }
.surah-row:active, .surah-row:hover { background: var(--bg-card-hover); }
.surah-row.playing { background: var(--color-primary-subtle); }

.surah-num-badge {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  color: var(--text-muted);
  font-family: var(--font-display);
  flex-shrink: 0;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.surah-row.playing .surah-num-badge {
  background: var(--color-primary);
  border-color: transparent; color: #fff;
}

.surah-info { flex: 1; min-width: 0; }
.surah-arabic {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.surah-meta {
  display: flex; align-items: center; gap: 5px;
  margin-top: 2px;
}
.surah-meta-text {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.surah-dot {
  width: 3px; height: 3px;
  background: var(--text-disabled);
  border-radius: 50%;
}

.surah-play-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border-default);
  background: none;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: all var(--transition-spring);
}
.surah-play-btn:active { transform: scale(0.85); }
.surah-row.playing .surah-play-btn {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.surah-play-btn svg { display: block; }

/* Search bar */
.search-bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 10px var(--space-4);
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  transition: border-color var(--transition-fast);
}
.search-bar:focus-within { border-color: var(--color-primary-border); }
.search-bar svg { display: block; flex-shrink: 0; }
.search-bar input {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--text-primary); direction: rtl; text-align: right;
}
.search-bar input::placeholder { color: var(--text-disabled); }

/* Continue Listening card */
.continue-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border-em);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
  cursor: pointer;
  box-shadow: var(--card-shadow-em);
  transition: transform var(--transition-spring);
}
.continue-card:active { transform: scale(0.97); }
.continue-artwork {
  width: 48px; height: 48px;
  border-radius: 12px;
  overflow: hidden; flex-shrink: 0;
}
.continue-info { flex: 1; min-width: 0; }
.continue-label { font-size: 10px; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.8px; }
.continue-surah { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.continue-reciter { font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; }

/* Radio Live Channel Card */
.live-channel-card {
  background: var(--gradient-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  position: relative; overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-emerald);
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
}
.live-channel-card:active { transform: scale(0.96); box-shadow: var(--shadow-sm); }
.live-channel-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 55%);
}
.live-channel-card.playing {
  box-shadow: var(--shadow-emerald), 0 0 0 2px var(--color-primary);
}


/* ════════════════════════════════════════════════════════════
   QURAN READER OVERLAY
   ════════════════════════════════════════════════════════════ */
.reader-overlay {
  position: fixed; inset: 0; z-index: 240;
  background: var(--bg-base);
  display: flex; flex-direction: column;
  max-width: var(--max-width);
  left: 50%; transform: translate(-50%, 100%);
  transition: transform 0.4s var(--ease-spring);
  visibility: hidden;
}
.reader-overlay.open {
  transform: translate(-50%, 0);
  visibility: visible;
}

.reader-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding: calc(var(--safe-top) + var(--space-3)) var(--space-4) var(--space-3);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(20px);
}
.reader-topbar-title {
  font-family: var(--font-display);
  font-size: var(--text-md); font-weight: 800;
  color: var(--text-primary);
  flex: 1; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 var(--space-2);
}

.reader-scroll {
  flex: 1; overflow-y: auto;
  padding: var(--space-5) var(--space-4) calc(var(--space-8) + var(--mini-player-height));
  -webkit-overflow-scrolling: touch;
}

.reader-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-5) var(--space-4);
  box-shadow: var(--card-shadow);
}

.reader-surah-head {
  text-align: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-4);
}
.reader-surah-name-large {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: var(--space-2);
}
.reader-surah-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
}

.reader-bismillah {
  font-family: 'Amiri', 'Cairo', serif;
  font-size: var(--text-2xl);
  font-weight: 400;
  text-align: center;
  color: var(--color-primary);
  padding: var(--space-3) 0 var(--space-5);
  direction: rtl;
  line-height: 1.6;
}

.reader-ayahs {
  font-family: 'Amiri', 'Cairo', serif;
  font-size: 22px;
  line-height: 2.4;
  color: var(--text-primary);
  text-align: justify;
  direction: rtl;
  word-spacing: 1px;
}

.ayah-block { display: inline; }
.ayah-text  { color: var(--text-primary); }

.ayah-num-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 6px;
  margin: 0 4px;
  border-radius: 50%;
  background: var(--color-primary-subtle);
  border: 1.5px solid var(--color-primary-border);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  vertical-align: middle;
  font-feature-settings: "ss01";
}

.reader-loading {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: var(--space-12) var(--space-4);
  gap: var(--space-3);
  color: var(--text-muted);
}
.reader-loading svg { animation: spin 0.8s linear infinite; color: var(--color-primary); }

.reader-error {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Surah row "Read" action — flips between play/read */
.surah-actions { display: flex; gap: 6px; flex-shrink: 0; }
.surah-read-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border-default);
  background: none;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: all var(--transition-spring);
}
.surah-read-btn:active { transform: scale(0.85); }
.surah-read-btn:hover  { color: var(--color-primary); border-color: var(--color-primary-border); }
.surah-read-btn svg { display: block; }

/* ════════════════════════════════════════════════════════════
   TV CHANNELS
   ════════════════════════════════════════════════════════════ */
.tv-channel-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
  display: flex; flex-direction: column;
}
.tv-channel-card:active { transform: scale(0.97); }

.tv-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-surface));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tv-thumb-icon {
  position: relative; z-index: 1;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(255,255,255,0.96);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  transition: transform 0.25s var(--ease-spring);
}
.tv-channel-card:hover .tv-thumb-icon { transform: scale(1.08); }
.tv-thumb-bg {
  position: absolute; inset: 0;
  opacity: 0.85;
}

.tv-thumb-live {
  position: absolute; top: var(--space-2); left: var(--space-2);
  background: #ef4444;
  color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: var(--radius-full);
  letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 5px;
  z-index: 2;
}
.tv-thumb-live::before {
  content: ''; width: 6px; height: 6px;
  background: #fff; border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}

[dir="ltr"] .tv-thumb-live { left: var(--space-2); }
[dir="rtl"] .tv-thumb-live { left: unset; right: var(--space-2); }

.tv-info {
  padding: var(--space-3) var(--space-4);
}
.tv-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.tv-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════
   VIDEO OVERLAY (Full-screen player for TV)
   ════════════════════════════════════════════════════════════ */
.video-overlay {
  position: fixed; inset: 0; z-index: 295;
  background: #000;
  display: flex; flex-direction: column;
  max-width: var(--max-width);
  left: 50%; transform: translate(-50%, 100%);
  transition: transform 0.4s var(--ease-spring);
  visibility: hidden;
}
.video-overlay.open {
  transform: translate(-50%, 0);
  visibility: visible;
}

.video-overlay-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  padding: calc(var(--safe-top) + var(--space-3)) var(--space-3) var(--space-3);
  background: rgba(0,0,0,0.92);
  position: relative; z-index: 2;
}
.video-overlay-bar .icon-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
}
.video-overlay-title {
  flex: 1; text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-sm); font-weight: 700;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 var(--space-2);
}

.video-frame-wrap {
  flex: 1;
  position: relative;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.video-frame-wrap iframe {
  width: 100%; height: 100%;
  border: 0;
  background: #000;
}

.video-overlay-footer {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-3) var(--space-4) calc(var(--safe-bottom) + var(--space-4));
  background: rgba(0,0,0,0.92);
}
.video-overlay-footer a {
  color: rgba(255,255,255,0.75);
  font-size: var(--text-xs);
  text-decoration: none;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
}
.video-overlay-footer a:active { background: rgba(255,255,255,0.16); }

/* ════════════════════════════════════════════════════════════
   MOSQUE PAGE
   ════════════════════════════════════════════════════════════ */
.mosque-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  min-height: 64px;
}
.mosque-row:last-child { border-bottom: none; }

.mosque-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--color-primary-subtle);
  border: 1px solid var(--color-primary-border);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mosque-icon svg { display: block; }

.mosque-info { flex: 1; min-width: 0; }
.mosque-name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.mosque-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.mosque-distance {
  color: var(--color-primary);
  font-weight: 700;
  font-family: var(--font-display);
}
.mosque-meta svg { display: inline-block; vertical-align: middle; }

.mosque-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.mosque-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1.5px solid var(--border-default);
  background: none;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: all var(--transition-spring);
}
.mosque-btn:hover  { color: var(--color-primary); border-color: var(--color-primary-border); }
.mosque-btn:active { transform: scale(0.88); }
.mosque-btn svg    { display: block; }

.mosque-btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.mosque-btn-primary:hover { background: var(--color-primary-hover, var(--color-primary)); color: #fff; }