/* ═══════════════════════════════════════════════════════════════════════
 *  Ibn Thani Quran — Interface Stylesheet (v3.0 Pro, unified build)
 * ───────────────────────────────────────────────────────────────────────
 *  Single source of truth for UI shell + audio + radio components.
 *  Organized into clearly labelled sections; NO duplicate selectors
 *  (previous build redefined .ibn-liquid-inline-player three times).
 *
 *  Section map:
 *   1.  Design tokens (CSS custom properties)
 *   2.  Base layout shell + scroll padding
 *   3.  Icon system (FontAwesome → SVG override)
 *   4.  Bottom navigation
 *   5.  Reader / Tafseer control bars
 *   6.  Ayah inline audio button
 *   7.  Live-radio cards (premium variant)
 *   8.  Glass mini-player (collapsed bar)
 *   9.  Liquid full surah player (THE main component)
 *   10. Sleep / speed / repeat menus
 *   11. Mushaf viewer hardening
 *   12. Toast notifications
 *   13. Command palette
 *   14. Responsive (≥900, ≤900, ≤620, ≤560)
 *
 *  Maintainer rule:
 *    Edit each component ONLY inside its labelled section.
 *    If you need !important to override class.php inline output, fine —
 *    don't sprinkle it where the cascade already wins.
 * ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────── 1. DESIGN TOKENS ────────────────────────── */
:root {
  --q-navy:        #071d38;
  --q-royal:       #0a2a5e;
  --q-gold:        #d4af37;
  --q-gold-soft:   #f0d577;
  --q-gold-deep:   #b88b2f;
  --q-amber:       #d18424;
  --q-paper:       #faf8f0;
  --q-white:       #fff;
  --q-ink:         #10213a;
  --q-soft-ink:    #53606f;
  --q-border:      rgba(212, 175, 55, .36);
  --q-shadow:      0 16px 36px rgba(7, 29, 56, .12);
  --q-shadow-lg:   0 22px 58px rgba(7, 29, 56, .28);
  --q-safe:        env(safe-area-inset-bottom, 0px);
  --q-radius-sm:   12px;
  --q-radius-md:   18px;
  --q-radius-lg:   24px;
  --q-radius-xl:   28px;
  --q-radius-pill: 999px;
}


/* ─────────────────────── 2. BASE LAYOUT SHELL ────────────────────────── */
body.ibn-quran-app {
  padding-bottom: calc(86px + var(--q-safe)) !important;
  background: #f7f5ed !important;
  overflow-x: hidden !important;
}
html {
  scroll-padding-bottom: 120px !important;
}
.ibn-page-shell {
  padding-bottom: 22px !important;
  max-width: 1220px !important;
}
html, body { max-width: 100% !important; overflow-x: hidden !important; }
.ibn-page-shell,
.ibn-content-card,
.card-custom,
.quran-radio-hero,
.quran-home-gateway,
.quran-home-section { max-width: 100% !important; }


/* ─────────────────────── 3. ICON SYSTEM OVERRIDE ─────────────────────── */
/* Once core.js swaps a FontAwesome <i> with an inline <svg>, we mark it
   with data-svg-icon. The rules below silence the original font glyph. */
i[data-svg-icon]::before { content: none !important; display: none !important; }
.fa::before, .fas::before, .far::before, .fab::before { line-height: 1 !important; }
i[data-svg-icon] svg { width: 1em; height: 1em; display: block; }


/* ───────────────────────── 4. BOTTOM NAVIGATION ──────────────────────── */
.ibn-bottom-nav-final {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(8px + var(--q-safe)) !important;
  transform: translateX(-50%) !important;
  width: min(620px, calc(100% - 22px)) !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 5px !important;
  z-index: 1800 !important;
  border: 1px solid rgba(212, 175, 55, .44) !important;
  border-radius: 20px !important;
  background: rgba(7, 29, 56, .94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 14px 35px rgba(7, 29, 56, .25) !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 4px !important;
  direction: rtl !important;
}
.ibn-bottom-nav-final a,
.ibn-bottom-nav-final button {
  height: 48px !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: transparent !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  padding: 0 !important;
  cursor: pointer !important;
}
.ibn-bottom-nav-final a:hover,
.ibn-bottom-nav-final button:hover,
.ibn-bottom-nav-final .is-active {
  background: rgba(212, 175, 55, .18) !important;
  color: #fff4c6 !important;
}
.qnav-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 10px !important;
  color: var(--q-gold-soft) !important;
  font-size: 17px !important;
  line-height: 1 !important;
}
.ibn-bottom-nav-final span:not(.qnav-icon) {
  font-size: 10.5px !important;
  white-space: nowrap !important;
}
/* Hard rule: if multiple SVGs sneak in, hide all but the first. */
.ibn-bottom-nav-final svg + svg,
.ibn-bottom-nav-final .qnav-icon svg + svg { display: none !important; }


/* ─────────────────── 5. READER / TAFSEER CONTROL BARS ────────────────── */
.listensora,
.changesoraform,
.tafseer-controls {
  background: #fff !important;
  border: 1px solid var(--q-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 26px rgba(7, 29, 56, .07) !important;
  margin: 14px 0 16px !important;
  padding: 14px !important;
  overflow: visible !important;
}
.listensora form,
.changesoraform form { margin: 0 !important; }

.listensora .row,
.changesoraform .row,
.tafseer-controls .row {
  display: grid !important;
  grid-template-columns: 1.35fr 1.15fr .62fr .62fr auto !important;
  gap: 10px !important;
  align-items: end !important;
  margin: 0 !important;
}
.tafseer-controls .row,
.tafseer .changesoraform > .row {
  grid-template-columns: 1fr .72fr 1fr !important;
  align-items: end !important;
}
.listensora [class*="col"],
.changesoraform [class*="col"],
.tafseer-controls [class*="col"] {
  width: auto !important;
  max-width: none !important;
  flex: unset !important;
  padding: 0 !important;
}
.listensora .form-group,
.changesoraform .form-group,
.tafseer-controls .form-group { margin: 0 !important; }

.listensora label,
.changesoraform label,
.tafseer-controls label {
  display: block !important;
  margin: 0 0 6px !important;
  color: var(--q-royal) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}
.listensora select,
.changesoraform select,
.tafseer-controls select,
.listensora input,
.changesoraform input,
.tafseer-controls input {
  height: 46px !important;
  min-height: 46px !important;
  width: 100% !important;
  border: 1px solid rgba(7, 29, 56, .16) !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: var(--q-navy) !important;
  padding: 7px 12px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  direction: rtl !important;
  text-align: right !important;
  box-shadow: 0 7px 18px rgba(7, 29, 56, .05) !important;
}
.changesoraform button,
.listensora button,
.tafseer-controls button,
input[type="submit"].btn,
.changesoraform .btn,
.listensora .btn {
  min-height: 46px !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, var(--q-gold-soft), var(--q-gold)) !important;
  color: var(--q-navy) !important;
  border: 0 !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  padding: 0 18px !important;
  box-shadow: 0 8px 18px rgba(212, 175, 55, .18) !important;
  white-space: nowrap !important;
}
/* Custom dropdown chevron */
.listensora select,
.changesoraform select,
.tafseer .changesoraform select,
.tafseer-controls select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--q-gold) 50%),
    linear-gradient(135deg, var(--q-gold) 50%, transparent 50%) !important;
  background-position: 14px 21px, 8px 21px !important;
  background-size: 7px 7px, 7px 7px !important;
  background-repeat: no-repeat !important;
  padding-left: 32px !important;
}
.listensora select:focus,
.changesoraform select:focus,
.tafseer .changesoraform select:focus,
.tafseer-controls select:focus {
  outline: 0 !important;
  border-color: var(--q-gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .16) !important;
}


/* ─────────────────── 6. AYAH INLINE AUDIO BUTTON ─────────────────────── */
.ayat4tafseer {
  position: relative !important;
  background: #fff !important;
  border: 1px solid var(--q-border) !important;
  border-radius: 22px !important;
  padding: 18px 64px 16px 18px !important;
  margin: 12px 0 !important;
  box-shadow: 0 10px 24px rgba(7, 29, 56, .06) !important;
  overflow: visible !important;
}
.ayat4tafseer .listen_aya {
  position: absolute !important;
  left: 18px !important;
  bottom: 14px !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: 42px !important;
  height: 42px !important;
  z-index: 4 !important;
}
.listen_aya a,
.listen_aya .sm2_button {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, var(--q-gold-soft), var(--q-gold)) !important;
  color: var(--q-navy) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(212, 175, 55, .22) !important;
  border: 0 !important;
}
.ayat4tafseer_info {
  margin: 10px 0 0 !important;
  color: var(--q-soft-ink) !important;
  font-size: 13px !important;
}
.ayat4tafseer_text {
  background: #fff !important;
  border: 1px solid rgba(7, 29, 56, .10) !important;
  border-right: 4px solid var(--q-gold) !important;
  border-radius: 20px !important;
  margin: 8px 0 !important;
  padding: 16px 18px !important;
  color: #172033 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 22px rgba(7, 29, 56, .05) !important;
}
.ayat4tafseer_text p  { margin: 0 0 .55em !important; }
.ayat4tafseer_text br { display: block !important; content: "" !important; margin: .18em 0 !important; line-height: 1.1 !important; }


/* ───────────────────── 7. LIVE-RADIO CARDS (HOME) ────────────────────── */
.quran-radio-frame,
.radio-fallback-link { display: none !important; }
.quran-radio-modern-grid,
.quran-radio-grid { align-items: stretch !important; gap: 16px; }

.quran-radio-hero {
  position: relative !important;
  overflow: hidden !important;
  padding: 26px !important;
  margin-top: 26px !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(240, 213, 119, .18), transparent 28%),
    linear-gradient(135deg, #061b34 0%, #09264f 54%, #06182f 100%) !important;
  border: 1px solid rgba(240, 213, 119, .42) !important;
  box-shadow: var(--q-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
.quran-radio-hero h1 {
  font-size: clamp(30px, 4vw, 54px) !important;
  margin: 4px 0 18px !important;
  color: #fff !important;
}
.quran-home-kicker {
  color: var(--q-gold-soft) !important;
  font-weight: 950 !important;
  letter-spacing: .3px !important;
  margin: 0 !important;
}
.quran-radio-modern-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Premium card variant (data-radio-card .quran-radio-premium) */
.quran-radio-modern-card,
.quran-radio-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 176px !important;
  border-radius: 30px !important;
  padding: 26px !important;
  background: linear-gradient(145deg, #1f2b3d, #142033) !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  box-shadow: 0 28px 55px rgba(4, 13, 25, .32), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  color: #fff !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  grid-template-rows: auto 1fr auto !important;
  gap: 14px 18px !important;
  align-items: center !important;
  backdrop-filter: blur(24px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.15) !important;
}
.quran-radio-modern-card.quran-radio-premium::before,
.quran-radio-card.quran-radio-premium::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 24% 20%, rgba(212, 175, 55, .16), transparent 26%),
    radial-gradient(circle at 84% 88%, rgba(10, 45, 98, .30), transparent 34%),
    linear-gradient(115deg, rgba(255, 255, 255, .055), transparent 46%) !important;
  opacity: .95 !important; z-index: -1 !important; pointer-events: none !important;
}
.quran-radio-premium.is-playing {
  box-shadow:
    0 28px 76px rgba(0, 0, 0, .42),
    0 0 44px rgba(212, 175, 55, .13),
    inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}
.quran-radio-premium.is-playing::before { animation: q-radio-ambient 1.35s ease-in-out infinite alternate !important; }
@keyframes q-radio-ambient { from { filter: brightness(.96); } to { filter: brightness(1.18); } }

.radio-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  direction: rtl !important;
  position: relative !important;
  z-index: 2 !important;
}
.radio-live-label {
  font-size: 11px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  letter-spacing: .2em !important;
  color: var(--q-gold) !important;
  font-weight: 950 !important;
}
.quran-radio-symbol {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(212, 175, 55, .32) !important;
  background: rgba(15, 18, 23, .58) !important;
  color: var(--q-gold) !important;
  display: grid !important;
  place-items: center !important;
}
.quran-radio-symbol svg { width: 18px !important; height: 18px !important; display: block !important; }

.radio-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 2 !important;
}
.radio-emblem {
  width: 118px !important; height: 118px !important;
  border-radius: 30px !important;
  background: linear-gradient(145deg, rgba(15, 18, 23, .96), rgba(10, 15, 22, .82)) !important;
  border: 1px solid rgba(212, 175, 55, .16) !important;
  display: grid !important; place-items: center !important;
  color: var(--q-gold) !important;
  box-shadow: 0 0 54px rgba(212, 175, 55, .095), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
.radio-emblem svg { width: 64px !important; height: 64px !important; display: block !important; }
.quran-radio-premium.is-playing .radio-emblem { animation: q-radio-pulse 1.2s ease-in-out infinite !important; }
@keyframes q-radio-pulse {
  50% { transform: scale(1.035); box-shadow: 0 0 72px rgba(212, 175, 55, .17), inset 0 1px 0 rgba(255, 255, 255, .07); }
}

.radio-center h2 {
  margin: 26px 0 0 !important;
  color: #fff !important;
  font-size: clamp(26px, 3.4vw, 33px) !important;
  line-height: 1.18 !important;
  font-weight: 950 !important;
  letter-spacing: -.55px !important;
}
.radio-center p {
  margin: 10px 0 0 !important;
  color: rgba(212, 175, 55, .62) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .20em !important;
  font-weight: 900 !important;
}

.quran-radio-state {
  position: absolute !important;
  top: 28px !important;
  right: 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #73e0ad !important;
  font-weight: 950 !important;
  font-size: 15px !important;
  z-index: 3 !important;
}
.quran-radio-state span {
  width: 8px !important; height: 8px !important;
  border-radius: 999px !important;
  background: #64748b !important;
}
.quran-radio-premium.is-playing .quran-radio-state span {
  background: #73e0ad !important;
  box-shadow: 0 0 0 8px rgba(115, 224, 173, .13) !important;
  animation: q-radio-dot 1.08s ease-in-out infinite !important;
}
.quran-radio-premium.is-error .quran-radio-state { color: #fca5a5 !important; }
.quran-radio-premium.is-error .quran-radio-state span { background: #fca5a5 !important; }
@keyframes q-radio-dot { 50% { transform: scale(1.55); opacity: .7; } }

.radio-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  z-index: 2 !important;
  direction: ltr !important;
}
.radio-side {
  width: 42px !important; height: 42px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(212, 175, 55, .48) !important;
  display: grid !important; place-items: center !important;
  padding: 0 !important;
  transition: .18s ease !important;
}
.radio-side svg { width: 22px !important; height: 22px !important; }
.radio-side:active { transform: scale(.92) !important; color: var(--q-gold) !important; }

.quran-radio-btn,
.radio-play {
  width: 82px !important; height: 82px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: linear-gradient(145deg, #f7b733, #e69b20) !important;
  color: #0f141d !important;
  display: grid !important; place-items: center !important;
  box-shadow: 0 0 32px rgba(212, 175, 55, .30), 0 18px 34px rgba(230, 155, 32, .28) !important;
  transition: transform .16s ease, box-shadow .16s ease !important;
  padding: 0 !important;
  font-size: 0 !important;
}
.quran-radio-btn:active,
.radio-play:active { transform: scale(.93) !important; }
.quran-radio-btn svg,
.radio-play svg { width: 35px !important; height: 35px !important; display: block !important; }
.quran-radio-premium.is-loading .quran-radio-btn,
.quran-radio-premium.is-loading .radio-play { filter: saturate(.86) brightness(1.08) !important; }
.quran-radio-premium.is-muted .radio-mute { color: #fca5a5 !important; }

.radio-spin { animation: q-radio-spin .75s linear infinite !important; }
@keyframes q-radio-spin { to { transform: rotate(360deg); } }


/* ────────────────── 8. GLASS MINI-PLAYER (collapsed) ─────────────────── */
.ibn-glass-player {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(78px + var(--q-safe)) !important;
  transform: translateX(-50%) !important;
  width: min(740px, calc(100% - 18px)) !important;
  max-height: 78px !important;
  min-height: 66px !important;
  padding: 8px 10px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(7, 29, 56, .98), rgba(10, 42, 94, .98)) !important;
  border: 1px solid rgba(212, 175, 55, .5) !important;
  box-shadow: 0 18px 46px rgba(7, 29, 56, .32) !important;
  color: #fff !important;
  z-index: 1900 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: max-height .22s ease, opacity .18s ease, transform .18s ease !important;
}
.ibn-glass-player.is-open,
.ibn-glass-player.is-playing { opacity: 1 !important; pointer-events: auto !important; }
.ibn-glass-player.is-expanded { max-height: min(82vh, 520px) !important; overflow: auto !important; }


/* ═══════════════════════════════════════════════════════════════════════
 *  9. LIQUID FULL SURAH PLAYER — primary component
 * ─────────────────────────────────────────────────────────────────────── */
.ibn-liquid-inline-player {
  width: min(100%, 720px) !important;
  margin: 18px auto 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--q-ink) !important;
  overflow: visible !important;
}
.fluid-player-card {
  position: relative !important;
  direction: rtl !important;
  text-align: center !important;
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid rgba(212, 175, 55, .22) !important;
  border-radius: 28px !important;
  padding: 22px 22px 20px !important;
  box-shadow: 0 16px 38px rgba(7, 29, 56, .08), inset 0 1px 0 rgba(255, 255, 255, .75) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
  overflow: hidden !important;
}
.fluid-player-card::before {
  content: "" !important;
  position: absolute !important;
  inset: auto -18% -42% -18% !important;
  height: 150px !important;
  background: radial-gradient(circle at 50% 0, rgba(212, 175, 55, .13), transparent 60%) !important;
  pointer-events: none !important;
}
.fp-title {
  font-size: clamp(20px, 5vw, 29px) !important;
  font-weight: 950 !important;
  color: var(--q-ink) !important;
  line-height: 1.25 !important;
  margin: 0 0 4px !important;
  letter-spacing: -.25px !important;
}
.fp-reader {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--q-amber) !important;
  min-height: 22px !important;
  margin-bottom: 18px !important;
}

/* Progress bar */
.fp-progress {
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  direction: ltr !important;
}
.fp-progress input {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 7px !important;
  min-height: 7px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  direction: ltr !important;
  accent-color: var(--q-amber) !important;
  cursor: pointer !important;
}
.fp-progress input::-webkit-slider-runnable-track {
  height: 7px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--q-amber) var(--lq-p, 0%), #eef2f7 var(--lq-p, 0%)) !important;
}
.fp-progress input::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 17px !important; height: 17px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 2px solid rgba(209, 132, 36, .9) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15) !important;
  margin-top: -5px !important;
}
.fp-progress input::-moz-range-track    { height: 7px !important; border-radius: 999px !important; background: #eef2f7 !important; }
.fp-progress input::-moz-range-progress { height: 7px !important; border-radius: 999px !important; background: var(--q-amber) !important; }
.fp-progress input::-moz-range-thumb {
  width: 17px !important; height: 17px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 2px solid rgba(209, 132, 36, .9) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15) !important;
}

.fp-times {
  display: flex !important;
  justify-content: space-between !important;
  direction: ltr !important;
  color: #98a1ad !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  margin: 8px auto 12px !important;
  max-width: 620px !important;
  font-variant-numeric: tabular-nums !important;
}
.fp-times time { color: #98a1ad !important; font-size: 11px !important; }

/* Main control row */
.fp-control-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 4px 0 16px !important;
  direction: ltr !important;
}
.fp-control-row button {
  border: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  transition: transform .16s ease, opacity .16s ease, background .2s ease !important;
  cursor: pointer !important;
}
.fp-control-row button:active { transform: scale(.94) !important; }
.fp-skip {
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  background: rgba(16, 33, 58, .06) !important;
  color: rgba(16, 33, 58, .62) !important;
  font-size: 15px !important;
}
.fp-seek-side {
  position: relative !important;
  width: 44px !important; height: 44px !important;
  border-radius: 50% !important;
  background: rgba(16, 33, 58, .05) !important;
  color: rgba(16, 33, 58, .72) !important;
}
.fp-seek-side .seek-label {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  color: rgba(16, 33, 58, .58) !important;
  pointer-events: none !important;
}
.fp-seek-side i { opacity: .45 !important; }
.fp-play {
  width: 70px !important; height: 70px !important;
  border-radius: 50% !important;
  background: var(--q-ink) !important;
  color: #fff !important;
  box-shadow: 0 18px 38px rgba(23, 32, 51, .20) !important;
  font-size: 22px !important;
}
.fp-play i { transform: translateX(-1px) !important; }
.ibn-liquid-inline-player.is-playing .fp-play {
  background: linear-gradient(145deg, var(--q-gold), var(--q-amber)) !important;
  color: #111827 !important;
  box-shadow: 0 18px 42px rgba(209, 132, 36, .26) !important;
}

/* Sub-controls (save / speed / sleep / repeat) */
.fp-sub-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-top: 6px !important;
}
.fp-sub-controls .lq-tool-btn {
  border: 0 !important;
  background: transparent !important;
  color: #71717a !important;
  min-width: 60px !important;
  height: 34px !important;
  border-radius: 999px !important;
  padding: 0 6px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background .18s ease, color .18s ease !important;
}
.fp-sub-controls .lq-tool-btn i { font-size: 13px !important; color: currentColor !important; }
.fp-sub-controls .lq-tool-btn:hover { background: rgba(212, 175, 55, .08) !important; color: var(--q-amber) !important; }
.fp-sub-controls .lq-tool-btn.is-active {
  background: rgba(212, 175, 55, .13) !important;
  color: var(--q-amber) !important;
}

/* Resume pill */
.fp-resume,
.lq-resume {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  height: 30px !important;
  min-height: 30px !important;
  border: 1px solid rgba(209, 132, 36, .24) !important;
  background: rgba(255, 255, 255, .72) !important;
  color: var(--q-amber) !important;
  border-radius: 999px !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}


/* ──────────────────── 10. SLEEP MENU + TOOL POPOVERS ─────────────────── */
.lq-sleep-menu {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 12px !important;
  z-index: 20 !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 7px !important;
  padding: 10px !important;
  border-radius: 18px !important;
  background: rgba(7, 29, 56, .96) !important;
  border: 1px solid rgba(212, 175, 55, .38) !important;
  box-shadow: 0 18px 36px rgba(7, 29, 56, .28) !important;
}
.lq-sleep-menu[hidden] { display: none !important; }
.lq-sleep-menu button {
  min-height: 38px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(212, 175, 55, .28) !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: background .15s ease !important;
}
.lq-sleep-menu button:hover {
  background: rgba(212, 175, 55, .22) !important;
}


/* ──────────────────── 11. MUSHAF VIEWER HARDENING ─────────────────────── */
.royal-mushaf-grid,
.royal-qbooks-grid { gap: 18px !important; }
.royal-mushaf-card,
.royal-qbook-card {
  border-radius: 24px !important;
  min-height: 330px !important;
  display: flex !important;
  flex-direction: column !important;
}
.royal-mushaf-cover,
.royal-qbook-icon {
  height: 240px !important;
  min-height: 240px !important;
  overflow: hidden !important;
  background: #fffaf0 !important;
  border: 1px solid rgba(212, 175, 55, .28) !important;
}
.royal-mushaf-cover img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
.royal-mushaf-viewer,
.royal-qbook-viewer {
  margin-top: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}
.royal-mushaf-viewer-header { min-height: 56px !important; padding: 8px 12px !important; }
.royal-mushaf-viewer-frame {
  height: calc(100vh - 64px) !important;
  min-height: 820px !important;
  background: #fff !important;
}
.royal-mushaf-viewer-nav,
.royal-mushaf-viewer-note { display: none !important; }

body:has(.ibn-full-viewer) .ibn-top-shell,
body:has(.ibn-full-viewer) .ibn-bottom-nav,
body:has(.ibn-full-viewer) .ibn-bottom-nav-final,
body:has(.ibn-full-viewer) .ibn-footer,
body:has(.royal-mushaf-viewer) .ibn-bottom-nav,
body:has(.royal-mushaf-viewer) .ibn-bottom-nav-final,
body:has(.royal-mushaf-viewer) .ibn-footer { display: none !important; }
body:has(.ibn-full-viewer) { padding-bottom: 0 !important; }
.ibn-page-shell:has(.ibn-full-viewer) {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* External fullscreen icon */
.royal-mushaf-external span { font-size: 0 !important; }
.royal-mushaf-external::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background: currentColor;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M5 5h6v2H8.4l3.1 3.1-1.4 1.4L7 8.4V11H5V5Zm8 0h6v6h-2V8.4l-3.1 3.1-1.4-1.4L15.6 7H13V5ZM5 13h2v2.6l3.1-3.1 1.4 1.4L8.4 17H11v2H5v-6Zm12 2.6V13h2v6h-6v-2h2.6l-3.1-3.1 1.4-1.4 3.1 3.1Z"/></svg>') center/contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M5 5h6v2H8.4l3.1 3.1-1.4 1.4L7 8.4V11H5V5Zm8 0h6v6h-2V8.4l-3.1 3.1-1.4-1.4L15.6 7H13V5ZM5 13h2v2.6l3.1-3.1 1.4 1.4L8.4 17H11v2H5v-6Zm12 2.6V13h2v6h-6v-2h2.6l-3.1-3.1 1.4-1.4 3.1 3.1Z"/></svg>') center/contain no-repeat;
}


/* ───────────────────── 12. TOAST NOTIFICATIONS ───────────────────────── */
.ibn-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + var(--q-safe));
  transform: translate(-50%, 24px);
  background: rgba(7, 29, 56, .94);
  color: #fff;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid rgba(212, 175, 55, .42);
  box-shadow: 0 18px 38px rgba(7, 29, 56, .32);
  z-index: 2500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  max-width: calc(100% - 32px);
  text-align: center;
}
.ibn-toast.is-show { opacity: 1; transform: translate(-50%, 0); }


/* ───────────────────────── 13. COMMAND PALETTE ───────────────────────── */
.ibn-command {
  position: fixed;
  inset: 0;
  background: rgba(7, 29, 56, .55);
  z-index: 2000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 16px;
  backdrop-filter: blur(8px);
}
.ibn-command.is-open { display: flex; }
.ibn-command-box {
  width: min(720px, 100%);
  background: #fff;
  border-radius: 28px;
  border: 1px solid var(--q-border);
  box-shadow: var(--q-shadow-lg);
  overflow: hidden;
}
.ibn-command-head {
  padding: 16px 20px;
  background: var(--q-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ibn-command-head kbd {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-family: inherit;
}
.ibn-command-body { padding: 14px; }
.ibn-command-body input {
  width: 100%;
  border: 1px solid rgba(7, 29, 56, .15);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 700;
  direction: rtl;
  margin-bottom: 8px;
}
.ibn-command-body input:focus {
  outline: 0;
  border-color: var(--q-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .15);
}
.ibn-command-results { max-height: 60vh; overflow: auto; }
.ibn-command-results a {
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--q-royal);
  transition: background .15s ease;
}
.ibn-command-results a:hover { background: #fff7d8; }
.ibn-command-results a small { color: #888; font-weight: 700; }


/* ─────────────────────────── 14. RESPONSIVE ──────────────────────────── */
@media (max-width: 980px) {
  .quran-radio-modern-grid,
  .quran-radio-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)) !important; }
}
@media (max-width: 900px) {
  .listensora .row,
  .changesoraform .row { grid-template-columns: 1fr 1fr !important; }
  .tafseer-controls .row,
  .tafseer .changesoraform > .row { grid-template-columns: 1fr !important; }
  .quran-radio-modern-card.quran-radio-premium,
  .quran-radio-card.quran-radio-premium {
    min-height: 285px !important;
    border-radius: 32px !important;
    padding: 24px !important;
  }
  .radio-emblem { width: 104px !important; height: 104px !important; border-radius: 28px !important; }
  .radio-emblem svg { width: 58px !important; height: 58px !important; }
  .quran-radio-btn, .radio-play { width: 74px !important; height: 74px !important; }
  .radio-center h2 { font-size: 27px !important; }
  .royal-mushaf-grid, .royal-qbooks-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .royal-mushaf-cover, .royal-qbook-icon { height: 210px !important; min-height: 210px !important; }
}
@media (max-width: 720px) {
  .ibn-liquid-inline-player { margin: 12px auto 6px !important; width: 100% !important; }
  .fluid-player-card { border-radius: 25px !important; padding: 20px 16px 17px !important; }
  .fp-title { font-size: 22px !important; }
  .fp-reader { font-size: 13px !important; margin-bottom: 15px !important; }
  .fp-progress { max-width: 100% !important; }
  .fp-control-row { gap: 10px !important; margin: 2px 0 13px !important; }
  .fp-play { width: 64px !important; height: 64px !important; }
  .fp-skip { width: 38px !important; height: 38px !important; }
  .fp-seek-side { width: 40px !important; height: 40px !important; }
  .fp-sub-controls .lq-tool-btn { min-width: 54px !important; font-size: 11px !important; padding: 0 6px !important; }
  .fp-times { margin-top: 7px !important; }
  .lq-sleep-menu { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 620px) {
  .quran-radio-modern-grid,
  .quran-radio-grid { grid-template-columns: 1fr !important; }
  .quran-radio-modern-card.quran-radio-premium,
  .quran-radio-card.quran-radio-premium {
    width: 100% !important;
    max-width: 430px !important;
    margin-inline: auto !important;
    min-height: 300px !important;
  }
  .radio-card-top { padding-inline: 2px !important; }
  .quran-radio-state { top: 25px !important; right: 25px !important; }
  .radio-center h2 { font-size: 28px !important; }
  .radio-center p { font-size: 11px !important; }
  .radio-bottom { padding-inline: 4px !important; }
}
@media (max-width: 560px) {
  body.ibn-quran-app { padding-bottom: calc(82px + var(--q-safe)) !important; }
  .ibn-bottom-nav-final { height: 60px !important; border-radius: 20px !important; }
  .ibn-bottom-nav-final a,
  .ibn-bottom-nav-final button { height: 48px !important; }
  .qnav-icon { font-size: 16px !important; }
  .ibn-bottom-nav-final span:not(.qnav-icon) { font-size: 10px !important; }
  .listensora .row, .changesoraform .row { grid-template-columns: 1fr !important; }
  .royal-mushaf-grid, .royal-qbooks-grid { grid-template-columns: 1fr !important; }
  .ayat4tafseer { padding: 16px 58px 14px 14px !important; }
  .ayat4tafseer_text { font-size: 17px !important; padding: 14px 15px !important; line-height: 1.38 !important; }
  .listen_aya a, .listen_aya .sm2_button,
  .ayat4tafseer .listen_aya { width: 40px !important; height: 40px !important; }
  .ibn-glass-player { bottom: calc(72px + var(--q-safe)) !important; }
}

/* ─── Web share fallback (PHP-generated icon clusters) ─── */
.post-share, .share-icons, .social-share {
  display: flex !important;
  justify-content: center !important;
  margin: 14px 0 !important;
}
.post-share a, .share-icons a, .social-share a { display: none !important; }
.ibn-web-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 24px;
  border-radius: 15px;
  background: #fff;
  border: 1px solid var(--q-border);
  color: var(--q-navy);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(7, 29, 56, .06);
  cursor: pointer;
}

/* ─── Khatma section ─── */
.quran-khatma-box {
  background: linear-gradient(135deg, #fff, #fff9e8) !important;
  border: 1px solid rgba(212, 175, 55, .32) !important;
}
.quran-khatma-inner {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  align-items: center !important;
  color: var(--q-navy) !important;
}
.quran-khatma-inner strong { font-size: 22px !important; }
.quran-khatma-inner span { color: var(--q-soft-ink) !important; }
.quran-khatma-btn {
  height: 44px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, var(--q-gold-soft), var(--q-gold)) !important;
  color: var(--q-navy) !important;
  font-weight: 950 !important;
  padding: 0 18px !important;
  cursor: pointer !important;
}
@media (max-width: 560px) {
  .quran-khatma-inner { grid-template-columns: 1fr !important; }
}

/* ─── Soft page transition cue ─── */
.ibn-soft-navigate body { opacity: .85; transition: opacity .15s ease; }