/* PersianPod — لایه‌ی «شیشه‌ی مایع» (سبک آیفون). باید بعد از pp-glass.css و آخرین CSS در default.html لود شود.
   بیشتر کار با تغییر متغیرهای pp-glass.css انجام می‌شود، پس همه‌ی دکمه‌ها و باکس‌ها خودکار عوض می‌شوند. */

/* ۱) متغیرها — روشن: شفاف‌تر، لبه‌ی براق‌تر، بلور و اشباع بیشتر */
:root{
  --gl-blur:26px; --gl-sat:190%;
  --gl-fill:
    radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.55),rgba(255,255,255,0) 46%),
    linear-gradient(145deg,rgba(8,203,0,.06),rgba(8,203,0,0) 55%),
    linear-gradient(145deg,rgba(255,255,255,.46),rgba(255,255,255,.20));
  --gl-fill-strong:
    radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.7),rgba(255,255,255,0) 50%),
    linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,255,255,.7));
  --gl-flat:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.28));
  --gl-flat-hover:rgba(255,255,255,.78);
  --gl-edge:rgba(255,255,255,.88); --gl-rim:rgba(22,52,30,.07);
  --gl-hi:rgba(255,255,255,1); --gl-lo:rgba(255,255,255,.45);
  --gl-shadow:0 18px 44px -16px rgba(10,70,25,.30),0 3px 10px rgba(22,32,26,.05);
  --gl-amb-1:rgba(8,203,0,.30); --gl-amb-2:rgba(0,255,156,.26); --gl-amb-3:rgba(90,200,255,.20);
}
/* تیره */
:root[data-theme=dark]{
  --gl-fill:
    radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.20),rgba(255,255,255,0) 46%),
    linear-gradient(145deg,rgba(8,203,0,.08),rgba(8,203,0,0) 55%),
    linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
  --gl-fill-strong:
    radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.14),rgba(255,255,255,0) 50%),
    linear-gradient(145deg,rgba(34,42,38,.88),rgba(22,28,25,.8));
  --gl-flat:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  --gl-flat-hover:rgba(255,255,255,.16);
  --gl-edge:rgba(255,255,255,.22); --gl-rim:rgba(0,0,0,.4);
  --gl-hi:rgba(255,255,255,.34); --gl-lo:rgba(255,255,255,.05);
  --gl-shadow:0 20px 50px -16px rgba(0,0,0,.75),0 3px 10px rgba(0,0,0,.3);
  --gl-amb-1:rgba(8,203,0,.30); --gl-amb-2:rgba(0,255,156,.18); --gl-amb-3:rgba(90,150,255,.16);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]):not([data-theme=dark]){
    --gl-fill:
      radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.20),rgba(255,255,255,0) 46%),
      linear-gradient(145deg,rgba(8,203,0,.08),rgba(8,203,0,0) 55%),
      linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
    --gl-fill-strong:
      radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.14),rgba(255,255,255,0) 50%),
      linear-gradient(145deg,rgba(34,42,38,.88),rgba(22,28,25,.8));
    --gl-flat:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
    --gl-flat-hover:rgba(255,255,255,.16);
    --gl-edge:rgba(255,255,255,.22); --gl-rim:rgba(0,0,0,.4);
    --gl-hi:rgba(255,255,255,.34); --gl-lo:rgba(255,255,255,.05);
    --gl-shadow:0 20px 50px -16px rgba(0,0,0,.75),0 3px 10px rgba(0,0,0,.3);
    --gl-amb-1:rgba(8,203,0,.30); --gl-amb-2:rgba(0,255,156,.18); --gl-amb-3:rgba(90,150,255,.16);
  }
}

/* ۲) پس‌زمینه‌ی رنگی ملایم تا پشت شیشه «چیزی دیده شود» (شیشه بدون رنگ پشتش صاف و بی‌حال است) */
body::before{
  background:
    radial-gradient(42vmax 34vmax at 90% -4%,var(--gl-amb-1),transparent 66%),
    radial-gradient(38vmax 32vmax at -6% 34%,var(--gl-amb-2),transparent 66%),
    radial-gradient(40vmax 34vmax at 74% 106%,var(--gl-amb-3),transparent 66%),
    radial-gradient(30vmax 26vmax at 36% 62%,rgba(170,140,255,.11),transparent 68%),
    radial-gradient(26vmax 22vmax at 14% 100%,rgba(255,190,110,.10),transparent 68%)}
:root[data-theme=dark] body::before{
  background:
    radial-gradient(42vmax 34vmax at 90% -4%,var(--gl-amb-1),transparent 66%),
    radial-gradient(38vmax 32vmax at -6% 34%,var(--gl-amb-2),transparent 66%),
    radial-gradient(40vmax 34vmax at 74% 106%,var(--gl-amb-3),transparent 66%),
    radial-gradient(30vmax 26vmax at 36% 62%,rgba(150,120,255,.10),transparent 68%)}

/* ۳) پنل‌ها و باکس‌های بزرگ: گوشه‌ی نرم‌تر مثل ویجت‌های آیفون */
:root .pd-filters,:root .pd-group,:root .pp-map-section,:root .pp-doc,:root .pp-news,
:root .pp-embed-box,:root .pl-stage,:root .pod-hero,:root .pod .facts,:root .cp-card,
:root .cp-m-box,:root .pf-set,:root .pf-acc,:root .pf-title,:root .pf-modal-box,
:root .pp-suggest,:root .cp-list,:root .pp-sug{border-radius:26px}
:root .pp-glass{border-radius:24px}

/* ۴) دکمه‌ها و چیپ‌ها: قرص کامل + حرکت فنری هنگام لمس */
:root .btn,:root .pod .links .btn,:root .pod-pill,:root .tags a,:root .tags span,:root a.pd-tag,
:root .pd-chip,:root .pd-reset,:root .pd-eps-more,:root .pp-map-btn,:root .pp-more-btn,
:root .pp-install button,:root .pl-links a,:root .pf-btn-ghost,:root .cp-btn,:root .pf-btn,
:root .pf-add,:root .pf-tg-add,:root .pf-tg,:root .pp-donate,:root .pp-news-link,
:root .pp-glass .pp-nav a,:root .pp-cats a,:root .pp-tools button,:root .pd-ftoggle,
:root #pd-filters .pd-actions .pd-reset,:root #pd-filters .pd-actions .pd-apply{
  border-radius:999px;
  transition:transform .34s cubic-bezier(.34,1.56,.64,1),background .25s,box-shadow .25s,border-color .25s}
:root .btn:active,:root .pod .links .btn:active,:root .pd-chip:active,:root .pd-reset:active,
:root .pf-btn:active,:root .cp-btn:active,:root .pf-btn-ghost:active,:root .pp-donate:active,
:root .pp-glass .pp-nav a:active,:root .pp-cats a:active,:root .pp-tools button:active,
:root .pp-news-link:active,:root .pd-ftoggle:active,:root #pd-filters .pd-actions button:active{
  transform:scale(.955);transition-duration:.12s}

/* ۵) فیلدها: گرد و شیشه‌ای */
:root select,:root .pd-filters select,:root .pd-filters input[type=text],:root .cp-box input,
:root .pf-row input[type=text],:root .pp-form input[type=text],:root .pp-form input[type=email],
:root .pp-form input[type=url],:root .pp-form select,:root .pp-search{border-radius:16px}
:root .pp-form textarea{border-radius:18px}
:root .pp-search{border-radius:999px}

/* ۶) کارت‌های پادکستی که پس‌زمینه‌ی مات دارند (نتایج مشابه، تازه‌ها و ...) → شیشه‌ی تخت.
      کارت‌های ردیف/شبکه‌ی صفحه‌ی اصلی عمداً شفاف‌اند و دست نمی‌خورند. */
:root .pd-card:not(.pd-row .pd-card):not(.pd-grid .pd-card){
  background:var(--gl-flat)!important;border:1px solid var(--gl-edge)!important;border-radius:22px!important;
  box-shadow:inset 0 1px 0 var(--gl-hi),0 0 0 1px var(--gl-rim),0 10px 26px -14px rgba(10,70,25,.28)!important;
  transition:transform .34s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
:root .pd-card:not(.pd-row .pd-card):not(.pd-grid .pd-card):hover{
  transform:translateY(-3px)!important;
  box-shadow:inset 0 1px 0 var(--gl-hi),0 0 0 1px rgba(8,203,0,.4),0 16px 34px -12px rgba(8,203,0,.45)!important}

/* ۷) کاور پادکست‌ها: لبه‌ی براق مثل آیکن اپ‌های iOS */
:root .pd-card .pd-logo,:root .pod-cover img{
  box-shadow:0 0 0 1px var(--gl-edge),0 10px 24px -12px rgba(10,60,25,.4)}

/* ۸) اگر کاربر کاهش حرکت یا شفافیت خواسته باشد */
@media (prefers-reduced-motion:reduce){
  :root .btn,:root .pf-btn,:root .cp-btn,:root .pp-cats a,:root .pp-glass .pp-nav a,:root .pd-card{transition:none}
  :root .btn:active,:root .pf-btn:active,:root .cp-btn:active,:root .pp-cats a:active{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  :root,:root[data-theme=dark]{--gl-fill:var(--card);--gl-flat:var(--card);--gl-fill-strong:var(--card);--gl-flat-hover:var(--bg)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root,:root[data-theme=dark]{--gl-fill:var(--card);--gl-fill-strong:var(--card);--gl-flat:var(--card);--gl-flat-hover:var(--bg)}
}

/* ۹) لایه‌ی شیشه‌ای ظریف روی کاورهای صفحه‌ی اصلی (ردیف‌ها و شبکه)
      ثابت: نور خیلی کم‌رنگ از گوشه‌ی بالا + لبه‌ی نازک براق، بدون هیچ حرکتی (هزینه‌ی کارایی صفر)
      هاور/لمس: یک برق نرم فقط روی همان کاور یک‌بار از راست به چپ رد می‌شود */
:root .pd-group .pd-card:not(.pl-card) .pd-logo,
:root .pd-grid .pd-card:not(.pl-card) .pd-logo{position:relative;isolation:isolate}
:root .pd-group .pd-card:not(.pl-card) .pd-logo::before,
:root .pd-grid .pd-card:not(.pl-card) .pd-logo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.07) 26%,rgba(255,255,255,0) 52%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -14px 22px -18px rgba(0,0,0,.28)}
:root .pd-group .pd-card:not(.pl-card) .pd-logo::after,
:root .pd-grid .pd-card:not(.pl-card) .pd-logo::after{
  content:"";position:absolute;top:-10%;bottom:-10%;right:0;width:9%;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(160%) skewX(-18deg);
  transition:opacity .3s ease,transform 0s linear .3s}
@media (hover:hover){
  :root .pd-group .pd-card:not(.pl-card):hover .pd-logo::after,
  :root .pd-grid .pd-card:not(.pl-card):hover .pd-logo::after,
  :root .pd-group .pd-card:not(.pl-card):focus-within .pd-logo::after,
  :root .pd-grid .pd-card:not(.pl-card):focus-within .pd-logo::after{
    opacity:1;transform:translateX(-1250%) skewX(-18deg);
    transition:opacity .2s ease,transform .9s cubic-bezier(.4,0,.2,1)}
}
@media (hover:none){
  :root .pd-group .pd-card:not(.pl-card):active .pd-logo::after,
  :root .pd-grid .pd-card:not(.pl-card):active .pd-logo::after{
    opacity:1;transform:translateX(-1250%) skewX(-18deg);
    transition:opacity .2s ease,transform .9s cubic-bezier(.4,0,.2,1)}
}
@media (prefers-reduced-motion:reduce){
  :root .pd-group .pd-card:not(.pl-card) .pd-logo::after,
  :root .pd-grid .pd-card:not(.pl-card) .pd-logo::after{display:none}
}

/* ============================================================
   ۱۰) اصلاحات نهایی (سرعت + ظاهر). این بخش باید آخر فایل بماند.
   ============================================================ */

/* کارایی: blur پس‌زمینه روی پنل‌های بزرگ و ده‌ها دکمه‌ی تکراری (۲۳ گروه، ۴۶ فلش، نقشه، ستون‌ها) در هر اسکرول بازسازی می‌شود و
   صفحه را کند می‌کند. ظاهر شیشه‌ای می‌ماند (گرادیان + لبه‌ی براق)، فقط خودِ blur برای هدر، پلیر و پنجره‌ها نگه داشته می‌شود.
   نکته‌ی باگ نقشه: backdrop-filter روی پنل، «position:fixed» راهنمای نقشه را نسبت به همان پنل می‌کرد و جایش می‌پرید. */
:root .pd-group,:root .pd-filters,:root .pp-map-section,:root .pp-cats,:root .pp-doc,:root .pp-news,
:root .pp-embed-box,:root .pl-stage,:root .pod-hero,:root .pod .facts,:root .cp-card,:root .cp-m-box,
:root .pf-set,:root .pf-acc,:root .pf-title,:root .pd-ftoggle,:root .pd-arrow,
:root .pp-map-btn,:root .pd-chip,:root .pd-clear{
  -webkit-backdrop-filter:none;backdrop-filter:none}

/* ۷ و ۸) دکمه‌های «پخش» (گوش بده) و «گوش بده» (تازه‌ها): شیشه‌ی سبز بدون blur.
   پیشوند html:not(#pp) لازم است چون قاعده‌ی قبلی (pp-cards/pp-v4) همین را دارد و بدون آن برنده می‌شد. */
html:not(#pp) .pl-play,html:not(#pp) .nw .nw-listen{
  background:linear-gradient(180deg,rgba(8,203,0,.34),rgba(8,203,0,.12));
  border:1px solid var(--gl-green-edge,rgba(8,203,0,.5));
  color:var(--acc);font-weight:800;text-shadow:none;
  box-shadow:inset 0 1px 0 var(--gl-hi),inset 0 -1px 0 var(--gl-lo),0 0 0 1px var(--gl-rim),0 6px 16px -8px rgba(8,203,0,.55);
  transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
html:not(#pp) .pl-card:hover .pl-play,html:not(#pp) .pl-card:focus-visible .pl-play,html:not(#pp) .nw .nw-listen:hover,html:not(#pp) .nw .nw-listen:focus-visible{
  background:linear-gradient(180deg,rgba(40,224,30,.62),rgba(8,203,0,.26));
  box-shadow:inset 0 1px 0 var(--gl-hi),inset 0 -1px 0 var(--gl-lo),0 0 0 1px rgba(8,203,0,.45),0 10px 22px -8px rgba(0,255,156,.6);
  transform:translateY(-1px)}
html:not(#pp) .pl-card[aria-current=true] .pl-play{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border-color:#08cb00;color:var(--acc)}

/* ۶) برچسب‌های زیر کارت پادکست‌ها و مطلب‌های آموزش: بیضی (قرص) به‌جای مربع */
:root .pd-card:not(.pl-card) .pd-meta .pd-b,
:root .pd-group .pd-card .pd-meta .pd-b,
:root .pl-meta .pl-own,:root .pl-meta .pl-src,:root .pl-meta .pl-tag,
:root .pp-learn .pp-badge,:root .pp-tags button{
  display:inline-flex !important;align-items:center;margin:2px 0 0 4px;
  padding:1px 11px !important;border-radius:999px !important;
  border:1px solid var(--gl-edge) !important;background:var(--gl-flat) !important;
  box-shadow:inset 0 1px 0 var(--gl-hi);font-size:.74rem;line-height:1.8;text-decoration:none}
:root .pd-card:not(.pl-card) .pd-meta .pd-b + .pd-b::before{content:none !important}
:root .pd-card:not(.pl-card) .pd-meta .pd-b.new{background:rgba(8,203,0,.16) !important;border-color:rgba(8,203,0,.55) !important}
:root .pd-card:not(.pl-card) .pd-meta .pd-b.off{opacity:.85}
:root .pd-card:not(.pl-card) a.pd-tag:hover,:root .pd-card:not(.pl-card) a.pd-tag:focus-visible{
  border:1px solid rgba(8,203,0,.5) !important;color:var(--acc)}
/* قاعده‌های قبلیِ «کدام برچسب‌ها دیده شوند» که بالا با !important بازنویسی شدند */
:root .pd-group .pd-card .pd-meta .pd-b:first-child:not(.new):not(.off){display:none !important}
:root .pd-group .pd-card .pd-meta .pd-b:nth-child(n+3):not(.off):not(.new){display:none !important}
:root .pd-grid .pd-card:not(.pl-card) .pd-meta .pd-b:nth-child(n+4):not(.off):not(.new){display:none !important}

/* ۱۱) فهرست بازشونده‌ی select (جست‌وجوی پیشرفته، مرتب‌سازی و …): پنجره‌ی گزینه‌ها را مرورگر/سیستم‌عامل می‌کشد و پس‌زمینه‌اش سفید می‌ماند،
   ولی رنگ متن گزینه‌ها از select (روشن در حالت شب) ارث می‌رفت؛ پس سفید روی سفید و دیده نمی‌شد. رنگ هر دو را صریح می‌گذاریم. */
:root[data-theme=dark] select,:root[data-theme=dark] select option,:root[data-theme=dark] select optgroup{
  color-scheme:dark;background-color:#161c19;color:#e9f0ea}
:root[data-theme=light] select option,:root[data-theme=light] select optgroup{
  color-scheme:light;background-color:#ffffff;color:#16201a}
select option:disabled{color:#8fa095}