/* ============================================================
   ULTRA PREMIUM UI OVERLAY v2  —  Online Quran Tilawat
   ------------------------------------------------------------
   Bold, dramatic CSS enhancement layer (loaded LAST in <head>).
   Uses #quran-app prefix for safe specificity wins; never touches
   display/opacity/transform on JS-driven nodes. All decorative
   layers are contained & pointer-events:none (no overlapping).
   Palette: emerald, deep green, gold, teal — Islamic-appropriate.
   ============================================================ */

/* ---------- KEYFRAMES ---------- */
@keyframes prAurora{
  0%,100%{background-position:0% 0%,100% 0%,50% 100%,0% 50%}
  50%{background-position:35% 30%,65% 35%,60% 70%,100% 50%}
}
@keyframes prTextShimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes prBtnMove{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes prGlowPulse{
  0%,100%{box-shadow:0 7px 20px -5px rgba(21,128,61,0.5),0 2px 6px rgba(21,128,61,0.28),inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -2px 0 rgba(0,0,0,0.14)}
  50%{box-shadow:0 10px 30px -4px rgba(21,128,61,0.65),0 3px 8px rgba(21,128,61,0.34),inset 0 1px 0 rgba(255,255,255,0.36),inset 0 -2px 0 rgba(0,0,0,0.14),0 0 22px rgba(74,222,128,0.35)}
}
@keyframes prNavShine{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
@keyframes prLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- 1. FOUNDATION ---------- */
#quran-app{
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:96px}

/* ---------- 1B. QURAN FONT (match reading page — Indo-Pak Saleem) ---------- */
@font-face{
  font-family:'Saleem';
  src:url('https://cdn.jsdelivr.net/gh/quran/quran.com-frontend-next@production/public/fonts/quran/hafs/nastaleeq/indopak/indopak-nastaleeq-waqf-lazim-v4.2.1.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/gh/quran/quran.com-frontend-next@production/public/fonts/quran/hafs/nastaleeq/indopak/indopak-nastaleeq-waqf-lazim-v4.2.1.woff') format('woff');
  font-weight:normal;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'SaleemFallback';
  src:url('https://fonts.gstatic.com/s/notonastaliqurdu/v20/LhWNMUPbN-oZdNFcBy1-DJYsEoTq5pudQ9L940pGPkB3Qt_-DK2f2cP0A.woff2') format('woff2');
  font-weight:normal;font-style:normal;font-display:swap;
}
/* use the same font stack as the Quran reading page for all Quran script */
#quran-app .font-quran{
  font-family:'Saleem','Noto Nastaliq Urdu','AlQuran IndoPak by QuranWBW','SaleemFallback',serif;
  line-height:2.5;
}
#quran-app #dailyArabic{line-height:2.35}

/* ---------- 2. SCROLLBAR ---------- */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#15803d,#0f4c2e);background-clip:content-box;border:3px solid transparent;border-radius:12px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#22c55e,#15803d);background-clip:content-box}
.dark ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#4ade80,#166534);background-clip:content-box}
*{scrollbar-width:thin;scrollbar-color:#15803d transparent}
.dark *{scrollbar-color:#4ade80 transparent}

/* ---------- 3. SELECTION & FOCUS ---------- */
::selection{background:rgba(21,128,61,0.22)}
.dark ::selection{background:rgba(74,222,128,0.25)}
body[data-theme="sepia"] ::selection{background:rgba(180,83,9,0.2)}
#quran-app a:focus-visible,#quran-app button:focus-visible{outline:3px solid rgba(21,128,61,0.5);outline-offset:3px;border-radius:8px}
.dark #quran-app a:focus-visible,.dark #quran-app button:focus-visible{outline-color:rgba(74,222,128,0.55)}

/* ---------- 4. PREMIUM GLASS (tinted + glowing) ---------- */
#quran-app .glass{
  background:linear-gradient(135deg,rgba(255,255,255,0.75),rgba(255,255,255,0.5));
  backdrop-filter:blur(22px) saturate(175%);-webkit-backdrop-filter:blur(22px) saturate(175%);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 16px 40px -16px rgba(15,23,42,0.22),0 2px 8px -4px rgba(21,128,61,0.1),inset 0 1px 0 rgba(255,255,255,0.6);
}
.dark #quran-app .glass{
  background:linear-gradient(135deg,rgba(30,41,59,0.65),rgba(15,23,42,0.5));
  border:1px solid rgba(148,163,184,0.16);
  box-shadow:0 18px 44px -18px rgba(0,0,0,0.65),inset 0 1px 0 rgba(255,255,255,0.07);
}
body[data-theme="sepia"] #quran-app .glass{
  background:linear-gradient(135deg,rgba(244,236,216,0.82),rgba(244,236,216,0.6));
  border:1px solid rgba(180,83,9,0.2);
}

/* ---------- 5. PREMIUM NAV + animated shine line ---------- */
#quran-app .nav-glass{
  background:linear-gradient(180deg,rgba(255,255,255,0.88),rgba(255,255,255,0.72));
  backdrop-filter:blur(28px) saturate(175%);-webkit-backdrop-filter:blur(28px) saturate(175%);
  border-bottom:1px solid rgba(21,128,61,0.1);
  box-shadow:0 12px 36px -18px rgba(2,6,23,0.18);
  position:relative;
}
.dark #quran-app .nav-glass{
  background:linear-gradient(180deg,rgba(15,23,42,0.9),rgba(15,23,42,0.78));
  border-bottom:1px solid rgba(255,255,255,0.06);
  box-shadow:0 18px 44px -18px rgba(0,0,0,0.6);
}
body[data-theme="sepia"] #quran-app .nav-glass{background:linear-gradient(180deg,rgba(244,236,216,0.92),rgba(244,236,216,0.8))}
/* shimmering gradient underline at bottom of nav (click-safe) */
#quran-app nav.nav-glass::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;pointer-events:none;
}
#quran-app nav.nav-glass::before{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:40%;
  background:linear-gradient(90deg,transparent,#16a34a,#f59e0b,transparent);
  animation:prNavShine 7s ease-in-out infinite;pointer-events:none;z-index:1;
}
/* desktop nav link underline */
#quran-app nav div[class~="md:flex"] a{position:relative}
#quran-app nav div[class~="md:flex"] a::after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:linear-gradient(90deg,#15803d,#f59e0b);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.4,0,.2,1);pointer-events:none;
}
#quran-app nav div[class~="md:flex"] a:hover::after{transform:scaleX(1)}
/* nav logo gentle float */
#quran-app nav img{animation:prLogoFloat 5s ease-in-out infinite;transition:transform .3s ease}

/* ---------- 6. HERO AURORA (animated flowing gradient) ---------- */
#quran-app .hero-gradient{
  background:
    radial-gradient(42% 52% at 15% 20%, rgba(251,191,36,0.24), transparent 70%),
    radial-gradient(46% 56% at 85% 25%, rgba(74,222,128,0.22), transparent 72%),
    radial-gradient(52% 62% at 50% 95%, rgba(129,140,248,0.16), transparent 70%),
    linear-gradient(135deg,#0b2a1b 0%,#14532d 26%,#15803d 54%,#0f4c2e 100%);
  background-size:175% 175%,175% 175%,175% 175%,220% 220%;
  background-position:0% 0%,100% 0%,50% 100%,0% 50%;
  animation:prAurora 16s ease-in-out infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),inset 0 -140px 140px -90px rgba(0,0,0,0.4);
}
.dark #quran-app .hero-gradient{
  background:
    radial-gradient(42% 52% at 15% 20%, rgba(251,191,36,0.18), transparent 70%),
    radial-gradient(46% 56% at 85% 25%, rgba(74,222,128,0.18), transparent 72%),
    radial-gradient(52% 62% at 50% 95%, rgba(129,140,248,0.14), transparent 70%),
    linear-gradient(135deg,#06140d 0%,#0d2a1c 28%,#14532d 56%,#0a3621 100%);
  background-size:175% 175%,175% 175%,175% 175%,220% 220%;
  animation:prAurora 16s ease-in-out infinite;
}
#quran-app .floating-shape{filter:drop-shadow(0 8px 18px rgba(0,0,0,0.18))}
#quran-app .hero-particle{filter:blur(.4px)}

/* ---------- 7. PREMIUM BUTTONS (animated gradient + glow + shine) ---------- */
#quran-app .btn-primary{
  background:linear-gradient(135deg,#16a34a 0%,#15803d 45%,#0f4c2e 60%,#16a34a 100%);
  background-size:220% 220%;
  animation:prBtnMove 7s ease infinite,prGlowPulse 4s ease-in-out infinite;
  border:1px solid rgba(255,255,255,0.16);
  position:relative;overflow:hidden;
}
#quran-app .btn-primary:hover{
  transform:translateY(-3px) scale(1.02);
  background-size:220% 220%;
  animation:prBtnMove 3s ease infinite,prGlowPulse 2.2s ease-in-out infinite;
}
#quran-app .btn-primary:active{transform:translateY(0) scale(.99)}
#quran-app .btn-secondary{
  background:linear-gradient(135deg,rgba(255,255,255,0.2),rgba(255,255,255,0.08));
  border:1.5px solid rgba(255,255,255,0.45);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35),0 8px 20px -8px rgba(0,0,0,0.35);
  position:relative;overflow:hidden;
}
#quran-app .btn-secondary:hover{
  background:linear-gradient(135deg,rgba(255,255,255,0.32),rgba(255,255,255,0.16));
  transform:translateY(-3px) scale(1.02);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45),0 16px 34px -10px rgba(0,0,0,0.45),0 0 24px rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.7);
}
#quran-app .btn-shimmer::after{border-radius:inherit}

/* ---------- 8. TYPOGRAPHY (animated shimmer headings) ---------- */
#quran-app .gradient-text{
  background:linear-gradient(115deg,#0f4c2e 0%,#16a34a 30%,#d97706 60%,#f59e0b 80%,#0f4c2e 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:prTextShimmer 7s linear infinite;
  filter:drop-shadow(0 1px 1px rgba(21,128,61,0.1));
}
.dark #quran-app .gradient-text{
  background:linear-gradient(115deg,#4ade80,#86efac 30%,#fbbf24 60%,#fcd34d 80%,#4ade80);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:prTextShimmer 7s linear infinite;
}
body[data-theme="sepia"] #quran-app .gradient-text{
  background:linear-gradient(115deg,#92400e,#b45309 45%,#d97706,#92400e);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:prTextShimmer 7s linear infinite;
}
#quran-app .glow-text{text-shadow:0 0 50px rgba(74,222,128,0.3),0 2px 22px rgba(0,0,0,0.28)}

/* ---------- 9. PREMIUM CARDS (glow ring + 3D hover) ---------- */
#quran-app .card-3d,#quran-app .surah-card{
  box-shadow:0 1px 0 rgba(255,255,255,0.55) inset,0 10px 26px -14px rgba(15,23,42,0.2);
  transition:transform .45s cubic-bezier(.4,0,.2,1),box-shadow .45s cubic-bezier(.4,0,.2,1);
}
#quran-app .surah-card:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:0 0 0 1.5px rgba(21,128,61,0.35),0 34px 60px -20px rgba(15,23,42,0.35),0 12px 22px -12px rgba(21,128,61,0.22),inset 0 1px 0 rgba(255,255,255,0.6);
}
.dark #quran-app .surah-card:hover{
  box-shadow:0 0 0 1.5px rgba(74,222,128,0.3),0 34px 60px -20px rgba(0,0,0,0.7),0 12px 22px -12px rgba(74,222,128,0.18),inset 0 1px 0 rgba(255,255,255,0.06);
}
#quran-app [class*="feature-card-"]{
  box-shadow:0 14px 36px -18px rgba(15,23,42,0.18),inset 0 1px 0 rgba(255,255,255,0.5);
  transition:transform .45s cubic-bezier(.4,0,.2,1),box-shadow .45s cubic-bezier(.4,0,.2,1),border-color .35s ease;
}
#quran-app [class*="feature-card-"]:hover{transform:translateY(-10px) scale(1.015)}
.dark #quran-app [class*="feature-card-"]{box-shadow:0 16px 38px -20px rgba(0,0,0,0.65),inset 0 1px 0 rgba(255,255,255,0.05)}
#quran-app [class*="feature-card-"] .feature-icon{
  box-shadow:0 8px 18px -6px rgba(15,23,42,0.22),inset 0 1px 0 rgba(255,255,255,0.45);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
#quran-app [class*="feature-card-"]:hover .feature-icon{transform:scale(1.15) rotate(-5deg)}
#quran-app [class*="stat-card-"]{
  box-shadow:0 12px 30px -16px rgba(15,23,42,0.18),inset 0 1px 0 rgba(255,255,255,0.4);
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s ease;
}
#quran-app [class*="stat-card-"]:hover{transform:translateY(-5px);box-shadow:0 0 0 1.5px rgba(21,128,61,0.25),0 18px 34px -16px rgba(15,23,42,0.22)}

/* ---------- 10. SECTION AMBIENCE (soft top glow wash) ---------- */
#quran-app .section-white{
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(21,128,61,0.06), transparent 60%),
    #D8C9B0;
}
#quran-app .section-light{
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(245,158,11,0.06), transparent 60%),
    #CEBDA0;
}
.dark #quran-app .section-white{
  background:radial-gradient(120% 70% at 50% 0%, rgba(74,222,128,0.05), transparent 60%),#1e293b;
}
.dark #quran-app .section-light{
  background:radial-gradient(120% 70% at 50% 0%, rgba(251,191,36,0.05), transparent 60%),#0f172a;
}
body[data-theme="sepia"] #quran-app .section-white{background:radial-gradient(120% 70% at 50% 0%, rgba(180,83,9,0.06), transparent 60%),#f4ecd8}
body[data-theme="sepia"] #quran-app .section-light{background:radial-gradient(120% 70% at 50% 0%, rgba(180,83,9,0.06), transparent 60%),#e8dbc8}

/* ---------- 11. DUA & PRAYER CARDS ---------- */
#quran-app .hm-dua-card{box-shadow:0 10px 26px -16px rgba(22,163,74,0.18),inset 0 1px 0 rgba(255,255,255,0.45);transition:transform .35s ease,box-shadow .35s ease}
#quran-app .hm-dua-card:hover{transform:translateY(-5px);box-shadow:0 0 0 1.5px rgba(21,128,61,0.25),0 20px 40px -18px rgba(22,163,74,0.25),inset 0 1px 0 rgba(255,255,255,0.5)}

/* ---------- 12. TOGGLE & BADGES ---------- */
#quran-app .toggle-track::before{box-shadow:0 2px 6px rgba(0,0,0,0.28),inset 0 1px 0 rgba(255,255,255,0.6)}
#quran-app input:checked + .toggle-track{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 0 14px rgba(21,128,61,0.4)}
#quran-app .streak-badge-btn{box-shadow:0 4px 14px -4px rgba(245,158,11,0.4),inset 0 1px 0 rgba(255,255,255,0.4);transition:transform .2s ease,box-shadow .2s ease}
#quran-app .streak-badge-btn:hover{transform:translateY(-2px) scale(1.05)}
#quran-app .share-theme-btn{transition:all .2s ease}
#quran-app .share-theme-btn.active{box-shadow:0 4px 12px -4px rgba(21,128,61,0.32),inset 0 1px 0 rgba(255,255,255,0.3)}

/* ---------- 13. READ PAGE HEADER ---------- */
#quran-app .header-gradient{
  background:linear-gradient(135deg,#0b2a1b 0%,#14532d 50%,#0f4c2e 100%);
  box-shadow:0 14px 36px -16px rgba(2,6,23,0.4),inset 0 1px 0 rgba(255,255,255,0.1);
}
#quran-app .header-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
#quran-app .header-btn:hover{transform:translateY(-2px)}
#quran-app .tooltip::after{box-shadow:0 6px 18px -6px rgba(0,0,0,0.45)}

/* READ HEADER — responsive controls (prevent mobile/tablet overflow) */
@media (max-width:1024px){
  #quran-app #reciterSelect{min-width:0!important;max-width:150px;font-size:.85rem}
}
@media (max-width:640px){
  #quran-app header .flex.items-center.justify-between{flex-wrap:wrap;row-gap:.5rem}
  #quran-app header .flex.items-center.gap-1{flex-wrap:wrap;justify-content:flex-end;row-gap:.4rem;flex:1 1 100%}
  #quran-app #reciterSelect{max-width:128px!important;min-width:0!important;font-size:.76rem;padding:.35rem .45rem}
  #quran-app header .header-btn{padding:.35rem}
  #quran-app header .header-btn svg{width:1.1rem;height:1.1rem}
}

/* ---------- 14. RESPONSIVE: TABLET ---------- */
@media (max-width:1024px){
  #quran-app .hero-3d h1{line-height:1.1}
  #quran-app #dailyArabic{line-height:2.3}
}

/* ---------- 15. RESPONSIVE: MOBILE ---------- */
@media (max-width:640px){
  #quran-app #hero .btn-primary,#quran-app #hero .btn-secondary{width:100%;padding-top:.95rem;padding-bottom:.95rem}
  #quran-app nav img{height:2.25rem;width:2.25rem;animation:none}
  #quran-app .glass{backdrop-filter:blur(16px) saturate(155%);-webkit-backdrop-filter:blur(16px) saturate(155%)}
  #quran-app .nav-glass{backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
  #quran-app .surah-card:hover{transform:translateY(-5px) scale(1.01)}
  #quran-app [class*="feature-card-"]:hover{transform:translateY(-5px)}
  #quran-app .btn-primary,#quran-app .btn-primary:hover{animation:prBtnMove 7s ease infinite}
  section[id]{scroll-margin-top:80px}
  /* Verse of the Day — compact & elegant on phones */
  #quran-app #dailyArabic{font-size:1.3rem;line-height:2.05}
  #quran-app #dailyVerseCard{padding:1.15rem}
  #quran-app #dailyVerseWrapper{padding-bottom:2rem}
  #quran-app #dailyTranslation{font-size:.95rem}
  #quran-app #dailyMotivation{font-size:.8rem}
  #quran-app #hero .max-w-7xl{padding-top:2.5rem}
  /* prevent brand title / button overflow on small phones */
  #quran-app nav .gap-2{gap:.3rem}
  #quran-app nav a[href="index.html"] span{font-size:1rem;line-height:1.15}
}
/* very small phones: brand logo-only + tighter verse */
@media (max-width:380px){
  #quran-app nav a[href="index.html"] span{display:none}
  #quran-app #dailyArabic{font-size:1.15rem}
  #quran-app #hero .max-w-7xl{padding-top:1.75rem}
}

/* ---------- 16. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  #quran-app *,#quran-app *::before,#quran-app *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}