/* ═══════════════════════════════════════════════════════════════════════════
   زاد — css/premium-ui.css
   ─────────────────────────────────────────────────────────────────────────
   حزمة التحسينات البصرية Premium — تحافظ على الهوية (أخضر زيتوني + ذهبي)
   1. Dark mode أغنى (gradients + glow هادئ، بدون نيون)
   2. Glassmorphism أقوى + ظلال ناعمة
   3. Micro-interactions (ripple + button press + glow)
   4. Page transitions ناعمة
   تُحمَّل بعد style.css فلا تكسر أي شيء — مجرد تحسينات فوقية.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   1. DARK MODE أغنى بصرياً (هوية محفوظة)
   ─────────────────────────────────────────────────────────
   نستبدل الأخضر النيون بأخضر زمردي أهدأ + خلفية بعمق
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  /* أخضر أهدأ من النيون — يحافظ على الطابع الروحاني */
  --green-deep: #5fb87a;
  --green-mid:  #3f9960;
  --green-soft: #4fa86d;
  /* خلفية بعمق متدرّج */
  --bg: #0a1410;
}

/* خلفية الـ app بعمق ودفء — glow ذهبي/أخضر خفيف */
html[data-theme="dark"] .app {
  background:
    radial-gradient(1000px 500px at 85% -5%, rgba(201,161,74,.07), transparent 55%),
    radial-gradient(800px 450px at -5% 105%, rgba(95,184,122,.06), transparent 55%),
    linear-gradient(170deg, #0c1813 0%, #0a1410 50%, #081109 100%);
}

html[data-theme="oled"] .app {
  background:
    radial-gradient(800px 400px at 85% -5%, rgba(201,161,74,.05), transparent 50%),
    #000000;
}

/* البطاقات في الدارك — depth ناعم بدل flat */
html[data-theme="dark"] .card,
html[data-theme="dark"] .zd-card {
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 8px 28px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
}

/* ═══════════════════════════════════════════════════════════
   2. GLASSMORPHISM أقوى (للعناصر العائمة والـ overlays)
   ═══════════════════════════════════════════════════════════ */
.glass,
.notif-dropdown,
.float-tasbih-panel,
.zad-more-sheet,
.bottom-bar {
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

/* كارت زجاجي قابل لإعادة الاستخدام */
.glass-card {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 8px 32px -8px rgba(0,0,0,.18);
}
html[data-theme="dark"] .glass-card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

/* ظلال ناعمة متدرجة (soft depth) */
.card,
.zd-card {
  transition: transform .25s cubic-bezier(.4,0,.2,1),
              box-shadow .25s cubic-bezier(.4,0,.2,1);
}
.card:hover,
.zd-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -16px rgba(14,59,46,.30);
}
html[data-theme="dark"] .card:hover {
  box-shadow: 0 16px 44px -16px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ═══════════════════════════════════════════════════════════
   3. MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════════ */

/* أ. ضغط الأزرار — scale down ثم bounce */
button:not(.zad-bnav-tab),
.btn,
.card[onclick],
a.card,
.quick-card {
  transition: transform .15s cubic-bezier(.34,1.56,.64,1);
}
button:not(.zad-bnav-tab):active,
.btn:active,
.card[onclick]:active,
a.card:active,
.quick-card:active {
  transform: scale(.96);
}

/* ب. Ripple effect — يُضاف عبر JS class .rippling */
.ripple-host { position: relative; overflow: hidden; }
.ripple-ink {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(201,161,74,.35), transparent 70%);
  transform: scale(0); animation: zad-ripple .6s ease-out;
}
html[data-theme="dark"] .ripple-ink {
  background: radial-gradient(circle, rgba(95,184,122,.30), transparent 70%);
}
@keyframes zad-ripple {
  to { transform: scale(3); opacity: 0; }
}

/* ج. Glow هادئ للعناصر النشطة (ذهبي/أخضر — مش نيون) */
@keyframes zad-soft-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(201,161,74,.15); }
  50%      { box-shadow: 0 0 22px rgba(201,161,74,.32); }
}
.glow-soft { animation: zad-soft-glow 3s ease-in-out infinite; }

html[data-theme="dark"] .glow-soft {
  animation-name: zad-soft-glow-dark;
}
@keyframes zad-soft-glow-dark {
  0%, 100% { box-shadow: 0 0 10px rgba(95,184,122,.18); }
  50%      { box-shadow: 0 0 26px rgba(95,184,122,.35); }
}

/* د. Float — حركة عائمة بطيئة للعناصر المميزة */
@keyframes zad-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.float-gentle { animation: zad-float 6s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════
   4. PAGE TRANSITIONS ناعمة
   ═══════════════════════════════════════════════════════════ */
@keyframes zad-page-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
main.main, #main-content {
  animation: zad-page-enter .4s cubic-bezier(.4,0,.2,1);
  /* بدون 'both' — لو فشل الأنيميشن لأي سبب يفضل المحتوى ظاهر */
  opacity: 1;
}

/* دخول البطاقات بتتابع (stagger) */
@keyframes zad-card-enter {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.stagger-in > * {
  animation: zad-card-enter .45s cubic-bezier(.4,0,.2,1);
}
/* ضمان: عناصر stagger ظاهرة دائماً حتى لو فشل الأنيميشن */
.stagger-in > * { opacity: 1; }
.stagger-in > *:nth-child(1) { animation-delay: .05s; }
.stagger-in > *:nth-child(2) { animation-delay: .10s; }
.stagger-in > *:nth-child(3) { animation-delay: .15s; }
.stagger-in > *:nth-child(4) { animation-delay: .20s; }
.stagger-in > *:nth-child(5) { animation-delay: .25s; }
.stagger-in > *:nth-child(6) { animation-delay: .30s; }

/* ═══════════════════════════════════════════════════════════
   5. تحسينات إضافية — Bottom Nav glow + active states
   ═══════════════════════════════════════════════════════════ */
.zad-bnav-tab.active .zad-bnav-icon {
  animation: zad-tab-pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes zad-tab-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* progress ring glow في الـ daily hub */
.zdh-ring-fg {
  filter: drop-shadow(0 0 4px rgba(230,201,122,.4));
}

/* ═══════════════════════════════════════════════════════════
   احترام تفضيل تقليل الحركة (إلزامي للـ accessibility)
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  main.main, #main-content,
  .stagger-in > *,
  .glow-soft, .float-gentle {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   خط ثُمانية للعناوين (Thmanyah Serif Display + Text)
   ═══════════════════════════════════════════════════════════ */
@font-face{font-family:'ThmanyahDisplay';src:url('../fonts/thmanyahserifdisplay-Black.otf') format('opentype');font-weight:900;font-display:swap}
@font-face{font-family:'ThmanyahDisplay';src:url('../fonts/thmanyahserifdisplay-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'ThmanyahDisplay';src:url('../fonts/thmanyahserifdisplay-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'ThmanyahDisplay';src:url('../fonts/thmanyahserifdisplay-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'ThmanyahText';src:url('../fonts/thmanyahseriftext-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'ThmanyahText';src:url('../fonts/thmanyahseriftext-Regular.otf') format('opentype');font-weight:400;font-display:swap}

/* تطبيق الخط على العناوين فقط (بدون نصوص مُشكّلة — التشكيل يتقطّع على هذا الخط) */
.page-title,
.section-title,
h1, h2, h3,
.zdh-greet-text,
.hero-title,
.nw-hero-title,
.k-sec-title,
.feat-title,
.cl-title,
.dua-card-title,
.dua-block-title,
.rh-title {
  font-family: 'ThmanyahDisplay', 'Amiri', serif !important;
  letter-spacing: -0.01em;
}

/* النصوص القرآنية والأذكار المُشكّلة تبقى على Amiri (يعرض الحركات بدقة) */
.verse .ar,
.az-arabic,
.adh-dhikr,
.bb-full-name {
  font-family: 'Amiri', 'Scheherazade New', serif !important;
}

/* ═══════════════════════════════════════════════════════════
   إصلاح آمن: المحتوى يظهر دائماً (الأنيميشن تحسين فقط، بدون both)
   ═══════════════════════════════════════════════════════════ */
main.main, #main-content { opacity: 1; }

/* Topbar عادي فوق على الموبايل — بسيط ومستقر (بدون sticky عشان overflow-x) */
@media (max-width: 768px) {
  .topbar {
    margin: 0 0 12px 0;
    padding: 10px 16px;
  }
  .hamburger {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; border-radius: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════
   RTL — حماية النصوص الطويلة من كسر التصميم
   ═══════════════════════════════════════════════════════════ */
.verse .ar, .az-arabic, .adh-dhikr, .time-verse,
.dua-text, .bb-full-name, .nw-hadith-text,
.section-title, .page-title, .card p, .card div {
  overflow-wrap: break-word;
  word-wrap: break-word;
  max-width: 100%;
}
.surah-name, .nav a span, .page-title {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .ten-days-wrap, .prayer-table-wrap, [class*="table-wrap"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ═══════════════════════════════════════════════════════════
   Accessibility — focus states واضحة (keyboard navigation)
   ═══════════════════════════════════════════════════════════ */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible,
[tabindex]:focus-visible, .card:focus-visible {
  outline: 3px solid var(--gold, #c9a14a);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════
   تحسين كونتراست النص الخافت في dark/oled (كان باهت)
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --muted: #9db8a0;      /* كان 7a9a7a — أفتح وأوضح */
  --muted-2: #6a8a6c;    /* كان 4a6a4a */
}
html[data-theme="oled"] {
  --muted: #c2d8c4;      /* كان b8cfba — أوضح على الأسود */
  --muted-2: #8aae8c;
}

/* ════════════════════════════════════════════════════════════
   إصلاح الكونتراست الجذري — نصوص واضحة على الخلفية الغامقة
   (يُحمَّل بعد style.css فيكسب الأولوية — مصدر الحقيقة للكونتراست)
   ════════════════════════════════════════════════════════════ */
html[data-theme="dark"]{
  --ink:#eaf5ea;          /* كان d8ead8 — أنصع وأوضح */
  --muted:#a8c5ab;        /* نص ثانوي واضح */
  --muted-2:#7e9e80;
}
html[data-theme="oled"]{
  --ink:#ffffff;          /* أبيض كامل على الأسود */
  --muted:#cadccb;
  --muted-2:#90b292;
}
/* النصوص العامة: امنع أي بهتان (opacity منخفض) على الغامق */
html[data-theme="dark"] body,
html[data-theme="oled"] body{ color:var(--ink); }

/* العناوين الخضراء على الغامق → فاتحة واضحة */
html[data-theme="dark"] .section-title,
html[data-theme="oled"] .section-title{ color:var(--ink); }

/* آية اليوم والآيات: أخضر فاتح ناصع + لا شفافية */
html[data-theme="dark"] .verse .ar,
html[data-theme="oled"] .verse .ar{ color:#7ce89a; opacity:1; }
html[data-theme="dark"] .verse .src,
html[data-theme="oled"] .verse .src{ color:var(--gold-soft); opacity:1; }

/* النصوص الباهتة جداً داخل الكروت — ارفع وضوحها بلطف (بدون !important حتى لا نكسر العناصر الزخرفية) */
html[data-theme="dark"] .verse .src,
html[data-theme="oled"] .verse .src{ color:var(--gold-soft); }

/* تأكيد: نصوص الـ muted لا تختفي */
html[data-theme="dark"] .muted, html[data-theme="dark"] [class*="-sub"], html[data-theme="dark"] small,
html[data-theme="oled"] .muted, html[data-theme="oled"] [class*="-sub"], html[data-theme="oled"] small{
  color:var(--muted);
}

/* ══ Theme segmented control (للصفحات اللي تحمّل premium-ui فقط مثل إذاعة القرآن) ══ */
.theme-seg{display:flex;gap:5px;background:var(--sand);border:1px solid var(--border);border-radius:13px;padding:5px;margin:10px 0}
.theme-opt{flex:1;padding:9px 6px;border-radius:9px;border:none;background:transparent;color:var(--ink);color:color-mix(in srgb,var(--ink) 78%,transparent);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .18s;white-space:nowrap}
.theme-opt:hover{color:var(--ink)}
.theme-opt.active{background:var(--green-deep);color:#fff}
html[data-theme="dark"] .theme-opt.active,html[data-theme="oled"] .theme-opt.active{background:var(--sys-green);color:#001a08}