/* _ensanak-overrides.css — small, targeted tweaks ON TOP of the ported irancast
   theme CSS (/irancast/style.css). Loaded LAST so it wins. Keep this minimal —
   the theme CSS does the heavy lifting; this only adapts a few things to our
   content (IRANSansX runs a touch wider than the theme's Estedad). */

/* header + banner bands full-bleed (owner: "header width 100%") */
.irancast-header { width: 100%; }
.irancast-header > svg { width: 100%; }

/* hero: keep the title + lede inside the folder shape (our font is wider) */
.irancast-banner .left-section-banner h1 {
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: 1.35;
}
.irancast-banner .left-section-banner p {
  font-size: 0.95rem;
  line-height: 1.9;
}

/* season-category: our picker switches seasons instantly on the client, so it
   needs a persistent selected state — mirror the theme's :hover look onto
   .active, and reset the native <button> chrome (theme used an <a>). */
.season-category .seasons .four-sesasons .each-season {
  border: 0;
  font: inherit;
  text-align: inherit;
}
/* keep the floating title bar's subtitle inside the viewport (IRANSansX is wider
   than the theme's Estedad, so the theme's -126px right offset clips «با انتخاب…») */
.season-category .seasons .seasons-title {
  right: -70px;
}
.season-category .seasons .four-sesasons .each-season.active {
  background: linear-gradient(180deg, color-mix(in srgb, #fff 20%, transparent) 0%, #ffffff00 100%);
  background-color: var(--maincolor);
  box-shadow: 2px 2px 9px -1px var(--maincolor);
}
.season-category .seasons .four-sesasons .each-season.active h3,
.season-category .seasons .four-sesasons .each-season.active .episode-count {
  color: var(--LightParagraphs);
}
.season-category .seasons .four-sesasons .each-season.active .season-num {
  background-color: var(--TenPercentWhite);
  color: var(--LightParagraphs);
}

/* «از کجا بشنویم» (listen): the owner's REAL platform logos are FULL button
   images (yellow bg + logo + name baked in), so we don't use the theme's
   icon-pill styling — we lay the 14 button-images out in a clean centred grid.
   Unwrap the two theme folder cards so all buttons flow together. */
.irancast-second-advertisement .content {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
  padding: 74px clamp(16px, 4vw, 40px) 40px;
}
.irancast-second-advertisement .content .each-card,
.irancast-second-advertisement .content .each-card > div {
  display: contents;
}
.irancast-second-advertisement .content .each-card > svg { display: none; }
.irancast-second-advertisement .platform-btn {
  display: block;
  inline-size: clamp(140px, 15vw, 175px);
  transition: transform 0.16s ease;
}
.irancast-second-advertisement .platform-btn:hover { transform: translateY(-3px); }
.irancast-second-advertisement .platform-btn .platform-logo {
  inline-size: 100%;
  block-size: auto;
  display: block;
  border-radius: 8px;
}

/* ── CONTRAST: the theme colours accent <span>s with --maincolor (yellow).
   On LIGHT section backgrounds that text is invisible → force readable dark.
   (Dark-context accents like the mic card / «بشنویم» pill are left yellow.) ── */
.irancast-favorite .header h2 span,
.irancast-guest .container header h2 span,
.irancast-book .container header h2 span,
.irancast-read-more .container header h2 span,
.irancast-read-more header h2 span,
.irancast-comments .container header h2 span,
.irancast-comments header h2 span,
.irancast-faq header h2 span,
.season-category .episodes .episodes-div .episodes-title h3 span {
  color: #25292a;
}
/* card meta (publish date / count) on the light cards → dark, still a touch warm */
.irancast-new-episodes .each-card .content .desc p.count,
.irancast-read-more .each-card .content .desc p.count,
.irancast-read-more .each-card .content .desc p.count a {
  color: #6b5300;
}

/* ── page background: the theme's body is a flat colour; the template also has a
   subtle blueprint DOT-GRID across the page. Add it (the big faint diagonal
   vector shapes already come from the theme's section ::before/::after). ── */
body {
  background-color: var(--SiteBackgroundColor, #ebebeb);
  background-image: radial-gradient(rgba(37, 41, 42, 0.07) 1.1px, transparent 1.1px);
  background-size: 24px 24px;
  background-position: 0 0;
}

/* ═══════════ READABILITY / CONTRAST SWEEP (owner: "can't see the text") ═══════════ */

/* header + footer full-bleed 100% width */
.irancast-header, footer.irancast-footer, footer.irancast-footer .footer-background { width: 100%; }

/* FOOTER — force readable light text on the black footer */
.irancast-footer .footer-middle,
.irancast-footer .footer-middle h2,
.irancast-footer .footer-middle h3,
.irancast-footer .footer-middle .title h3,
.irancast-footer .footer-middle p,
.irancast-footer .footer-middle span,
.irancast-footer .foote-bottom,
.irancast-footer .irancast-copy-right { color: #fff; }
.irancast-footer .footer-middle a,
.irancast-footer .footer-middle li a,
.irancast-footer .foote-bottom a { color: rgba(255,255,255,0.78); }
.irancast-footer .footer-middle a:hover,
.irancast-footer .foote-bottom a:hover { color: var(--maincolor); }

/* SUPPORT band (custom section, was white-on-light → invisible) → real dark band */
section.support.band--dark { background-color: #25292a; }
section.support.band--dark h2 { color: #fff; }
section.support.band--dark p { color: rgba(255,255,255,0.82); }
section.support.band--dark .eyebrow { color: var(--maincolor); }

/* SEASON cards — episode counts were low-contrast (light-on-light / yellow-on-yellow) */
.season-category .seasons .four-sesasons .each-season .episode-count,
.season-category .seasons .four-sesasons .each-season div span { color: #4a4f52; }
.season-category .seasons .four-sesasons .each-season.active .episode-count,
.season-category .seasons .four-sesasons .each-season.active div span { color: #25292a; }

/* SECTION subtitles (نظرات «آنچه شنونده…», faq «هرچه درباره…») were faint → readable */
.irancast-comments .container header > span,
.irancast-comments header > span,
.irancast-faq header > span,
.irancast-guest .container header > span,
.irancast-book .container header > span { color: #5a5f62; }
/* «نظرات شنوندگان» accent + any header accent that landed on light */
.irancast-comments .container header h2 span,
.irancast-comments header h2 span { color: #25292a; }

/* «از کدوم اپیزودها شروع کنیم؟» + «چگونه دنبال کنیم؟» help sub-cards: the waveform/
   mic image was oversized and squeezed the heading into a 1-word-per-line strip.
   Constrain the image and give the text real width. */
.irancast-help .container .right-section .content,
.irancast-help .container .left-section .content { align-items: center; gap: 12px; }
.irancast-help .container .right-section .content > img,
.irancast-help .container .left-section .content > img { max-inline-size: 42%; height: auto; flex: none; }
.irancast-help .container .right-section .content > div,
.irancast-help .container .left-section .content > div { flex: 1 1 auto; min-inline-size: 200px; }
.irancast-help .container .right-section .content > div h3,
.irancast-help .container .left-section .content > div h3 { white-space: normal; word-break: normal; line-height: 1.6; }

/* footer YouTube CTA banner was spilling off the left edge */
footer.irancast-footer { overflow-x: clip; }

/* ═══════════════ FINAL POLISH PASS (2026-07-10) — readability / in-box ═══════════════
   Every rule below was verified against a live contrast audit + element crops. The theme
   paints many accent <span>s / subtitles WHITE or YELLOW (correct on its dark/navy
   originals) — where our port put them on a LIGHT or YELLOW band they go invisible.
   !important is used deliberately: the theme's own colour rules carry equal-or-higher
   weight, so these targeted fixes must win. */

/* ── HOME hero: folder is YELLOW but the theme text is WHITE → force dark ── */
.irancast-banner .left-section-banner h1 { color: #1c1f20 !important; }
.irancast-banner .left-section-banner p  { color: #2e3234 !important; opacity: 1; }
.irancast-banner .left-section-banner .podcast-title span { color: #1c1f20 !important; }

/* ── Section subtitles the theme renders WHITE (invisible on our light page) ── */
.irancast-new-episodes .new-episodes-header .after-h2,
.irancast-new-episodes .after-h2 { color: #565b5e !important; }
.irancast-read-more header p { color: #565b5e !important; }

/* ── «نظرات» comments folder (YELLOW bg): subtitle white → dark ── */
.irancast-comments header .header-content span { color: #25292a !important; }
/* comments empty-state card (LIGHT): gold subtitle → readable gray */
.irancast-comments .each-comment-header .user-comment span { color: #565b5e !important; }

/* ── Help section: the RIGHT card is LIGHT, its yellow accent is invisible → dark
   (the LEFT card is dark, so its accent stays yellow — untouched) ── */
.irancast-help .right-section .content h3 span { color: #1c1f20 !important; }

/* ── «معرفی کتاب» cards are DARK, but the theme paints the book title near-black
   (#16181a) → dark-on-dark. Lighten it. ── */
.irancast-book .right-content h4,
.irancast-book .left-content h4,
.irancast-book .each-card h4 { color: #f4f4f5 !important; }

/* ── Season picker: ACTIVE season title was pale gold on yellow → dark ── */
.season-category .seasons .four-sesasons .each-season.active h3 { color: #1c1f20 !important; }

/* ── Card category / episode-number labels: yellow on the white card → dark gold
   (home «جدید ترین اپیزودها», blog archive, episodes list all share .each-card) ── */
.each-card .content .desc .count,
.each-card .content .desc .count a { color: #6b5300 !important; }

/* ── EPISODE single page ── */
.single-episode-banner h1 { color: #1c1f20 !important; }             /* was yellow on white card */
.single-episode-body .about .header .left span,
.single-episode-body .header .left span { color: #565b5e !important; } /* white → readable */
/* banner lede: justify into a clean block flush with the player pill it sits above */
.single-episode-banner .bottom-details h1 + span { text-align: justify; }

/* ── BLOG single: post title is WHITE on the yellow folder → dark ── */
.archive-page .single-content h1 { color: #1c1f20 !important; }

/* ── FOOTER «ما را در یوتیوب» CTA banner ── */
.footer-youtube-container h2, .f-y-section h2 { color: #1c1f20 !important; }   /* white → dark */
.footer-youtube-container p,  .f-y-section p  { color: #33383a !important; }   /* faint white → dark */
/* the theme places this absolutely-positioned banner with left:720px + translateX(-600)
   which spills off the left edge as soon as the element's computed width shifts. Re-centre
   it with the width-independent absolute technique (left/right:0 + margin:auto). */
.irancast-footer .footer-youtube-container {
  left: 0 !important;
  right: 0 !important;
  margin-inline: auto !important;
  transform: none !important;
}

/* ── AUTH (login / signup): the switch link accent is yellow on a light card → dark ── */
.irancast-login .link-accent {
  color: #1c1f20 !important;
  font-weight: 800;
  text-decoration-color: currentColor;
}

/* ── Blog listing: breadcrumb current + sidebar «مشاهده همه» yellow on light → readable ── */
.archive-page .bread-crumb .current,
.bread-crumb .breadcrumbs .current { color: #565b5e !important; }
/* «مشاهده همه» is the highlighted (all) category — the theme paints it yellow on a
   light-gray pill → invisible. Dark = readable + still reads as the active item. */
.rest-side-blog > a:first-child { color: #1c1f20 !important; }

/* ── 404 page: the «صفحه اصلی» return link is yellow on the light page → dark ── */
.four-o-four-page .buttons .home-link { color: #1c1f20 !important; }

/* ── Reading bodies: JUSTIFY within their centered column (owner's resolution) ── */
.single-content .body p,
.single-content .sub-body p,
.single-content .sub-body li,
.single-content .single-sections p,
.single-episode-body .sub-body p,
.single-episode-body .matn p { text-align: justify; text-justify: inter-word; }

/* ═══ 2nd fix pass (owner: overflow + text-outside-box) ═══ */

/* «از کجا بشنویم»: was overflowing the right edge — make it a CONTAINED grid
   (3–4 columns, centered, no horizontal overflow). Overrides the earlier flex. */
.irancast-second-advertisement .content {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  max-inline-size: 940px;
  margin-inline: auto;
  padding: 80px 24px 40px;
  justify-items: stretch;
}
.irancast-second-advertisement .platform-btn { inline-size: auto !important; }
.irancast-second-advertisement .platform-btn .platform-logo { inline-size: 100%; }

/* help sub-cards: pull the heading/subtitle INSIDE the card, vertically centered,
   so the title no longer sits at/over the top edge */
.irancast-help .container .right-section .content,
.irancast-help .container .left-section .content {
  align-items: center !important;
  padding-block: 18px;
  padding-inline: 26px;
}
.irancast-help .container .right-section .content > div,
.irancast-help .container .left-section .content > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  align-self: center;
}

/* ═══ 3rd fix pass (2026-07-11) — stacking + contrast both-directions ═══ */

/* BUG 1 — «نظرات شنوندگان»: the theme paints the yellow folder header (absolute,
   z:auto) BEFORE the comment card (also z:auto) in the DOM, so the light card wins
   the paint order and covers the lower half of the title + subtitle. Two problems:
   (a) header text renders BEHIND the card, (b) our wider IRANSansX blows the h2 up to
   43px → it wraps to 2 lines (98px tall) and the flex-ROW pushes the whole text block
   down into the card's overlap zone.
   Fix: lift the header above everything (z-index), lay the text as a compact CENTERED
   COLUMN that fits inside the 159px folder, and drop the card clear of the folder so
   nothing overlaps and every glyph is readable. */
.irancast-comments { padding-top: 176px; }
.irancast-comments header { z-index: 3; }
.irancast-comments header .header-content {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 159px;
  padding: 14px 44px 0;      /* clear the folder tab notch at the very top */
  text-align: center;
}
.irancast-comments header .header-content .resp { gap: 10px; }
.irancast-comments header .header-content h2 {
  margin-left: 0;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  line-height: 1.25;
}
.irancast-comments header .header-content > span {
  line-height: 1.7;
  max-inline-size: 470px;
}
/* empty-state card carries an extra CTA button; the theme's fixed 163px card height
   makes it spill 14px out the bottom — let this single card size to its content */
.irancast-comments .content > .each-comment {
  height: auto;
  padding-block-end: 18px;
}

/* ── BUG 3 — CONTRAST, BOTH directions (dark-on-dark text + light-pill icons) ──
   This theme is dark-origin: the base h2 colour + --LightParagraphs (#fff) are meant
   for text sitting ON dark surfaces. Where our light port placed them on a light/yellow
   surface they vanish; where a folder stayed BLACK/dark-photo the theme's dark base text
   vanishes. Recolour per real background. !important: theme rules carry equal weight. */

/* Dark folder HEADERS — the h2 BASE words render dark on a BLACK / dark-photo folder
   (only the yellow accent span showed). Lift the base text to light, keep accents. */
.irancast-second-advertisement header .header-content h2 { color: #f4f4f5 !important; }
.season-category .seasons .seasons-title .season-title-text h2 { color: #f4f4f5 !important; }
.season-category .seasons .seasons-title .season-title-text h2 span { color: var(--maincolor) !important; }
.season-category .seasons .seasons-title .season-title-text p { color: rgba(255,255,255,0.82) !important; }

/* Header search icon: white glyph on the YELLOW search pill → dark */
.irancast-header .header-search-section .header-search-button i,
.left-top-header .header-search-button i { color: #1c1f20 !important; }

/* Season number badges: yellow-on-white (idle) & white-on-yellow (active) → dark on both */
.season-category .seasons .four-sesasons .each-season .season-num,
.season-category .seasons .four-sesasons .each-season.active .season-num { color: #1c1f20 !important; }

/* Episodes list: the order number + play triangle are yellow on a white row → readable dark */
.season-category .episodes .episodes-list .each-episode .title > span { color: #6b5300 !important; }
.season-category .episodes .episodes-list .each-episode .time a i { color: #25292a !important; }

/* FAQ expand chevrons: pale yellow on the light card → dark */
.irancast-faq .content .each-faq .the-head i { color: #25292a !important; }

/* «چگونه دنبال کنیم / از کدوم اپیزودها» help sub-cards: white arrow on the yellow pill → dark */
.irancast-help .container .right-section .content a i,
.irancast-help .container .left-section .content a i { color: #1c1f20 !important; }

/* Footer «ما را در یوتیوب» CTA arrow: white on the translucent pill over yellow → dark */
.irancast-footer .footer-youtube-container .f-y-section a i { color: #1c1f20 !important; }

/* ── BUG 3 (cont.) — inner routes (episodes / blog / episode+about single / contact / auth) ── */

/* Sidebar «folder» headers are BLACK bars: the h2 BASE words render dark → invisible
   («فیلتر اپیزود ها», «دسته‌بندی مقالات», «از کجا بشنویم؟»). Lift base → light, keep accent. */
.archive-side .aside-title h2,
.single-episode-sidebar .title h2 { color: #f4f4f5 !important; }
.archive-side .aside-title h2 span,
.single-episode-sidebar .title h2 span { color: var(--maincolor) !important; }

/* Episodes category cards: the guest/user icon is yellow on the white card → dark */
.each-cat .up-cat .sss i { color: #25292a !important; }

/* About — achievement stat cards are SOLID YELLOW; the white number + label → dark */
.irancast-about-us .each-achievement .count,
.irancast-about-us .each-achievement .count span { color: #1c1f20 !important; }
/* About — article section index number is yellow on white → dark gold */
.single-content .body .single-sections .header span { color: #6b5300 !important; }

/* Contact — pin/contact icons are white on the yellow pill → dark */
.irancast-contact-us .middle span[class*="fa-"],
.irancast-contact-us .middle .contact-icon,
.irancast-contact-us .middle i[class*="fa-"] { color: #1c1f20 !important; }

/* Auth — the primary submit button is a YELLOW pill with a white label → dark (brand primary) */
.irancast-login .right-login form .submit_button,
.right-login form.ajax-auth button.submit_button { color: #1c1f20 !important; }

/* ── BUG 5 — help sub-cards «چگونه دنبال کنیم / از کدوم اپیزودها»: content spilled OUT ──
   The theme sizes each card by an in-flow folder SVG (viewBox 592×143 → only ~131px tall)
   with `.content` absolutely filling it. Our wider IRANSansX text (5 lines) + the tall mic
   overflow that box: the title clips at the top edge and the subtitle spills out the bottom.
   Fix: let the CONTENT define the card height, stretch the folder SVG to fill (the SVGs now
   carry preserveAspectRatio="none"), equalize both cards, and vertically center the content. */
.irancast-help .container .right-section,
.irancast-help .container .left-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.irancast-help .container .right-section > svg.desktop,
.irancast-help .container .left-section > svg.desktop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.irancast-help .container .right-section .content,
.irancast-help .container .left-section .content {
  position: relative;   /* back into flow so the section grows to fit the text */
  height: auto;
  min-block-size: 150px;
  gap: 16px;
}
/* cap the decorative mic so it doesn't drive an over-tall card */
.irancast-help .container .left-section .content > img { max-block-size: 132px; }

/* ═══ FOOTER top ═══
   Whole footer dark, NO gray gap above it, logo removed, and the yellow YouTube
   CTA pinned flush to the TOP-LEFT of the footer (was centered). The removed logo
   left an empty brand-top which we keep as a slim spacer so the absolute CTA has
   room and doesn't overlap the columns. */
/* small light gap above the footer so the yellow CTA can straddle the top edge */
footer.irancast-footer { background-color: #0d1112; margin-block-start: 58px !important; overflow: visible; }

/* brand-top kept as a slim spacer (logo removed) */
.irancast-footer .footer-top,
.irancast-footer .footer-top--nologo { min-height: 96px; background: transparent; }

/* yellow CTA → LEFT edge + pulled UP so it sits half in the dark footer, half in
   the light page background above (straddles the top edge). */
.irancast-footer .footer-youtube-container {
  left: 0 !important;
  right: auto !important;
  top: -55px !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.irancast-footer .footer-youtube-container .f-y-section {
  border-radius: 0 24px 24px 0 !important;   /* flush to the left edge, rounded right */
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.5);
}
.irancast-footer .footer-youtube-container .f-y-section::after { display: none !important; }

/* footer «جدید ترین اپیزود ها» cards: 5-word titles overflowed the fixed 70px box
   → smaller text, clamp to 2 lines, let the card grow to fit the text */
.all-new-episodes .each-new-ep-footer { height: auto; min-height: 70px; align-items: center; }
.all-new-episodes .each-new-ep-footer div p {
  font-size: 13px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══ batch fixes (owner) ═══ */

/* «از کجا بشنویم»: exactly 3 columns */
.irancast-second-advertisement .content {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px;
  max-inline-size: 760px;
  margin-inline: auto;
  padding: 80px 24px 40px;
  justify-items: stretch;
}
.irancast-second-advertisement .platform-btn { inline-size: auto !important; }

/* FAQ: one question per row (full width) */
.irancast-faq .container .content .each-faq { flex: 0 0 100% !important; max-inline-size: 100% !important; }

/* حمایت band: centre the copy + the countdown timer */
section.support.band--dark .support__inner { text-align: center; }
section.support.band--dark .countdown,
section.support.band--dark [class*="countdown"] { justify-content: center !important; margin-inline: auto; }
section.support.band--dark .band__inner > div:last-child { display: flex; flex-direction: column; align-items: center; }

/* whole episode/read-more card clickable. The theme styles EVERY <a> inside a
   .each-card as the black play button (background: var(--SecondMaincolor) = #000),
   so our stretched link was painting the whole card body solid black. Force it
   fully transparent (no bg / shadow / border) in ALL states — THIS is the "black"
   the cards were showing. The real play button keeps its own styling (z-index 3). */
.irancast-new-episodes .container .new-episodes-cards .each-card,
.irancast-read-more .container .read-more-cards .each-card { position: relative; }
.irancast-new-episodes .container .new-episodes-cards .each-card .ep-card-stretch,
.irancast-read-more .container .read-more-cards .each-card .ep-card-stretch {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
/* the floating play button (.each-card>a) keeps the theme's absolute bottom-left
   position — DON'T override position (that hid it). Its theme z-index:5 already
   sits above the stretch link (z-index:1), so it stays clickable + visible. */
.irancast-new-episodes .container .new-episodes-cards .each-card > a:not(.ep-card-stretch),
.irancast-read-more .container .read-more-cards .each-card > a:not(.ep-card-stretch) { z-index: 5 !important; }

/* a little breathing room between the cards (they were touching/overlapping) */
.irancast-new-episodes .container .new-episodes-cards,
.irancast-read-more .container .read-more-cards { gap: 18px; }

/* «معرفی کتاب»: a standing CSS 3D BOOK (cover face + page thickness + spine),
   sized into the theme's book-card image slot (was absolute bottom-left). Admin
   later swaps in a real iranketab cover → it auto-renders as this book. */
.irancast-book .container .content .right-section .ensanak-book3d,
.irancast-book .container .content .left-section .ensanak-book3d {
  position: absolute;
  bottom: 16px;
  left: 40px;
  width: 42%;
  max-width: 150px;
  height: 80%;
  perspective: 1300px;
  z-index: 2;
}
.ensanak-book3d__pane {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(-26deg);
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.irancast-book .container .content .right-section:hover .ensanak-book3d__pane,
.irancast-book .container .content .left-section:hover .ensanak-book3d__pane {
  transform: rotateY(-12deg);
}
.ensanak-book3d__pane img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px 6px 6px 2px;
  box-shadow: 0 18px 32px -12px rgba(0, 0, 0, 0.7);
  backface-visibility: hidden;
}
/* page block (thickness) extending back from the RIGHT (spine) edge */
.ensanak-book3d__pages {
  position: absolute;
  top: 3%;
  height: 94%;
  right: 0;
  width: 20px;
  transform-origin: right center;
  transform: rotateY(90deg);
  background: repeating-linear-gradient(to bottom, #f4f1e9 0, #f4f1e9 1px, #d3ccbb 2px, #f4f1e9 3px);
}
/* spine shade on the cover's right edge */
.ensanak-book3d__spine {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 100%;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* episode/read-more cards: the theme darkens .sub-div-relative to solid black on
   hover — with the whole card clickable, hovering anywhere turned the card black.
   Keep it light on hover (the play button still lights up yellow for feedback). */
.irancast-new-episodes .container .new-episodes-cards .each-card:hover .sub-div-relative,
.irancast-read-more .container .read-more-cards .each-card:hover .sub-div-relative { background: transparent !important; }

/* ── GUEST cards (اندیشمندان): the writer's role+name sat in a cramped 45% column
   and the name spilled onto the photo (unreadable). Put the whole text INSIDE a
   clean rounded panel top-right, above the silhouette, readable in both states. */
.irancast-guest .container .content .each-card-guest .guest-desc {
  max-width: 56% !important;
  top: 20px !important;
  right: 18px !important;
  left: auto !important;
  z-index: 4 !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(13, 17, 18, 0.55) !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.irancast-guest .container .content .each-card-guest .guest-desc p {
  color: #ffffff !important;
  -webkit-line-clamp: 3 !important;
  margin: 0 0 4px !important;
  line-height: 1.5 !important;
}
.irancast-guest .container .content .each-card-guest .guest-desc span {
  color: var(--maincolor) !important;
  opacity: 1 !important;
  font-weight: 600;
}
/* keep the «اپیزود ها» button above the photo too */
.irancast-guest .container .content .each-card-guest > a { z-index: 4; }

/* ── Notifications: header bell + badge (T3), account nav bell icon + unread badge (T2). ──
   The bell sits inside .left-top-header next to the account button; the account-tab nav icon
   reuses the theme's ::before pattern (FontAwesome bell \f0f3). */
.header-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 10px;
  color: var(--LightParagraphs, #fff);
  margin-inline-end: 8px;
  transition: background 0.2s ease-in-out;
}
.header-bell:hover { background: rgba(255, 255, 255, 0.12); }
.header-bell i { font-size: 18px; line-height: 1; }
.header-bell__badge {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  min-inline-size: 18px;
  block-size: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #0C0E0B;
  background: var(--maincolor);
  border-radius: 999px;
}

/* ── a11y CONTRAST (2026-07-13): footer newsletter «عضویت» submit — a YELLOW pill
   (--maincolor #ffd200) whose label inherited --LightParagraphs (white) → 1.45:1,
   unreadable. Same yellow-pill-with-white-label case the auth submit fix (above)
   already handles; this one was missed in the sweep. Dark label = ~13:1. ── */
footer.irancast-footer .container .foote-bottom .newsletter input[type="submit"] {
  color: #1c1f20;
}

/* account-dashboard notifications nav icon (theme keys ::before on the endpoint class) */
.woocommerce-MyAccount-navigation-link--notifications a:before {
  content: "\f0f3" !important;
}
/* unread counter next to the «اعلان‌ها» nav label */
.nav-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 18px;
  block-size: 18px;
  padding: 0 5px;
  margin-inline-start: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #0C0E0B;
  background: var(--maincolor);
  border-radius: 999px;
}