/**
 * Filmoona Episode Release — frontend widget styles.
 *
 * Design intent (v2.2 — minimalist dark redesign): quiet, compact,
 * invisible-until-needed, same as before — but the visual language for
 * the things that ARE showing is now a deliberate "premium streaming
 * platform" look: soft glassmorphism info cards, a pill-shaped status
 * chip, and bold warm-accent digit badges for the live countdown. Every
 * rule still lives under `.filmoona-widget` so the plugin can never leak
 * into the rest of the theme, and font-family stays `inherit` — this file
 * changes color/shape/spacing, never the host theme's typography.
 *
 * `all: revert` on the root and every descendant strips whatever the
 * theme's own reset/utility CSS (Bootstrap, Tailwind preflight, block
 * theme resets…) would otherwise impose on our elements, without a single
 * `!important` anywhere in this file except the one documented
 * `prefers-reduced-motion` block at the bottom: our own rules, declared
 * after the revert, simply win the normal cascade.
 */

.filmoona-widget,
.filmoona-widget * {
	all: revert;
	box-sizing: border-box;
}

.filmoona-widget {
	--filmoona-warm: #ffa63d;                 /* Fixed warm accent for the live countdown digits — independent of the admin-configurable --filmoona-accent used for the CTA/timeline, so the "ticking" part of the widget always reads as warm/alive regardless of a series' chosen theme color. */
	--filmoona-warm-soft: rgba(255, 166, 61, 0.14);
	--filmoona-green: #34d399;
	--filmoona-green-soft: rgba(52, 211, 153, 0.14);
	--filmoona-red: #ff4d4f;                  /* The collapsed pill's seconds digit only — marks the one number that's actually counting down live, distinct from the three steadier warm units beside it. */
	--filmoona-glass-bg: rgba(255, 255, 255, 0.05);
	--filmoona-glass-border: rgba(255, 255, 255, 0.1);
	display: block;
	position: relative;
	width: var(--filmoona-width, 360px);
	max-width: 100%;
	margin: 12px 0;
	/* Breathing room below the card so it never visually collides with a
	   theme's own floating action buttons (WhatsApp/Telegram/support
	   chat bubbles, "scroll to top", etc.) when this widget lands near
	   the bottom of a page. Raise --filmoona-safe-bottom from the theme
	   if a site's own floating buttons are unusually tall. */
	margin-block-end: max(24px, var(--filmoona-safe-bottom, 24px));
	font-family: inherit; /* Never override the host theme's typeface. */
	font-size: 14px;
	line-height: 1.5;
	color: inherit;
	background: color-mix(in srgb, currentColor 4%, transparent);
	border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	border-radius: var(--filmoona-radius, 14px);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	overflow: hidden;
	transition: box-shadow var(--filmoona-duration, 300ms) ease;
}

.filmoona-widget:hover {
	box-shadow: 0 2px 14px color-mix(in srgb, currentColor 8%, transparent);
}

/* Fallback for browsers without color-mix() support. */
@supports not (background: color-mix(in srgb, red 4%, transparent)) {
	.filmoona-widget {
		background: rgba(127, 127, 127, 0.06);
		border-color: rgba(127, 127, 127, 0.16);
	}
}

/* ---------------------------------------------------------------------- *
 * Placement variants
 * ---------------------------------------------------------------------- */

.filmoona-pos-align-right {
	margin-inline-start: auto;
}

.filmoona-pos-align-left {
	margin-inline-end: auto;
}

/* Floating placement never shows the full card — it's always the small
   chip defined in "Collapsed pill" below (".filmoona-pos-floating,
   .filmoona-widget.is-collapsed"). That's the single source of truth for
   how a floating/collapsed widget looks, positioned, and sized. */

/* Belt-and-braces for display_location = main/both (see the JS's
   findSafeInsertionAnchor): even if the widget ends up inside a flex or
   grid row despite that walk-up logic, force it onto its own full-width
   line rather than squeezing between/inside existing buttons. */
.filmoona-widget.filmoona-relocated {
	flex: 1 1 100%;
	width: 100%;
	grid-column: 1 / -1;
	margin-inline: 0;
}

/* Scroll auto-collapse (inline/align placements) reuses the exact same
   chip as the floating placement — see the unified rule in "Collapsed
   pill" below. Kept as a marker comment so the two rules aren't hunted
   for in two different places. */

/* ---------------------------------------------------------------------- *
 * Body layout
 * ---------------------------------------------------------------------- */

.filmoona-widget__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px 20px;
	min-height: 70px;
	justify-content: center;
}

.filmoona-widget.is-collapsed .filmoona-widget__body,
.filmoona-pos-floating .filmoona-widget__body {
	display: none;
}

.filmoona-widget__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Episode heading — this is the fix for "a countdown with no episode
   number attached to it": always the most prominent line when shown. */
.filmoona-widget__row--episode {
	justify-content: space-between;
}

.filmoona-widget__episode-heading {
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--filmoona-warm);
}

.filmoona-widget__episode-released {
	font-size: 11.5px;
	color: color-mix(in srgb, currentColor 60%, transparent);
}

.filmoona-widget__row--urgency {
	font-size: 12px;
	font-weight: 600;
	color: var(--filmoona-accent, currentColor);
}

.filmoona-widget__row--urgency[hidden] {
	display: none;
}

.filmoona-widget__badge {
	flex-shrink: 0;
	font-size: 11px;
	white-space: nowrap;
	color: color-mix(in srgb, currentColor 65%, transparent);
}

.filmoona-widget__label {
	font-weight: 700;
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Subtle "in progress" breathing cue while subtitles are being prepared —
   deliberately gentle: opacity only, no motion, no color shift. */
.filmoona-stage-broadcast_done .filmoona-widget__label {
	animation: filmoona-breathe 2.6s ease-in-out infinite;
}

@keyframes filmoona-breathe {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.72; }
}

/* ---------------------------------------------------------------------- *
 * Status chip — "زیرنویس آماده شد" and friends. A completed micro-
 * milestone (broadcast done, subtitle ready) reads as a soft, semi-
 * transparent green pill; the "upcoming" weekday/time line — which isn't
 * an achievement, just information — stays neutral. Fully rounded
 * corners per spec; no border needed, the tinted background alone reads
 * clearly against both light and dark host pages.
 * ---------------------------------------------------------------------- */

.filmoona-chip {
	align-self: flex-start;
	padding: 5px 14px;
	border-radius: 50px;
	font-size: 12px;
	font-weight: 600;
}

.filmoona-chip--done {
	background: var(--filmoona-green-soft);
	color: var(--filmoona-green);
}

.filmoona-chip--neutral {
	background: color-mix(in srgb, currentColor 7%, transparent);
	color: color-mix(in srgb, currentColor 70%, transparent);
}

.filmoona-widget__row--meta[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------- *
 * Info cards — Subtitle / Dubbing / Year. Subtle glassmorphism per spec:
 * translucent surface, hairline border, generously rounded corners. Any
 * card whose underlying field is empty/disabled is never rendered at all
 * (see Filmoona_Render::render_info_cards()) — this block only ever has
 * to style what's actually there, never hide anything itself.
 * ---------------------------------------------------------------------- */

.filmoona-widget__info-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
	gap: 8px;
	margin-top: 2px;
}

.filmoona-info-card {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: var(--filmoona-glass-bg);
	border: 1px solid var(--filmoona-glass-border);
	border-radius: 12px;
	min-width: 0;
}

.filmoona-info-card__icon {
	flex-shrink: 0;
	display: inline-flex;
	color: var(--filmoona-warm); /* "Assign a warm, distinct color to icons" — every info-card icon shares this one fixed accent, independent of the series' own theme color, so it always reads as a warm highlight against the glass card. */
}

.filmoona-info-card__icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

.filmoona-info-card__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.filmoona-info-card__label {
	font-size: 10.5px;
	font-weight: 600;
	color: color-mix(in srgb, currentColor 55%, transparent);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.filmoona-info-card__status {
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.filmoona-info-card__status.is-done {
	color: var(--filmoona-green);
}

.filmoona-info-card__status.is-pending {
	color: color-mix(in srgb, currentColor 75%, transparent);
}

/* ---------------------------------------------------------------------- *
 * Countdown — CRITICAL per spec: a live, ticking H/M/S display, digits
 * visually separated from their unit labels via bold high-contrast
 * "badges" in a warm accent color, with the seconds group specifically
 * getting a slightly livelier tick so the page reads as dynamic at a
 * glance, not just on close inspection.
 * ---------------------------------------------------------------------- */

.filmoona-widget__countdown {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 2px;
}

.filmoona-widget__countdown[hidden] {
	display: none;
}

.filmoona-widget__digits {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Number and unit letter sit inline on one baseline now ("21h", not "21"
   over "h") — a horizontal flex row instead of the old stacked column, to
   match a reference "digital timer" style the site wanted (big bold number,
   small letter immediately after it, no separate label row underneath). */
.filmoona-digit-group {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	line-height: 1.1;
	min-width: 42px;
	justify-content: center;
	padding: 6px 6px 5px;
	border-radius: calc(var(--filmoona-radius, 14px) * 0.5);
	background: var(--filmoona-warm-soft);
}

.filmoona-digit {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	font-size: 18px;
	color: var(--filmoona-warm);
	transition: opacity var(--filmoona-duration, 300ms) ease, transform var(--filmoona-duration, 300ms) ease;
}

.filmoona-digit.is-updating {
	opacity: 0.35;
	transform: translateY(-2px);
}

/* The seconds badge gets a touch more presence and a brief warm glow on
   every tick — reusing the same .is-updating hook the JS already toggles
   every second for this group, no extra JS needed for the distinction. */
.filmoona-digit-group--seconds {
	background: color-mix(in srgb, var(--filmoona-warm) 20%, var(--filmoona-warm-soft));
}

.filmoona-digit-group--seconds .filmoona-digit.is-updating {
	transform: scale(1.08);
	opacity: 1;
	text-shadow: 0 0 10px color-mix(in srgb, var(--filmoona-warm) 60%, transparent);
}

/* The small trailing unit letter ("d"/"h"/"m"/"s") right after each
   number — an <i> chosen only because it's a short, semantically-neutral
   inline element, not for italics (font-style is reset below). Fixed
   Latin letters, deliberately not run through the labels/i18n system —
   see the matching note on $episode_heading in class-filmoona-render.php
   for why this one element is intentionally English regardless of site
   language, same as the collapsed pill's h/m/s. */
.filmoona-digit-unit {
	font-style: normal;
	font-size: 10.5px;
	font-weight: 700;
	margin-inline-start: 1.5px;
	color: color-mix(in srgb, var(--filmoona-warm) 75%, currentColor);
}

.filmoona-digit-sep {
	font-weight: 700;
	font-size: 16px;
	color: color-mix(in srgb, var(--filmoona-warm) 50%, transparent);
	transform: translateY(-3px);
}

/* Compact countdown (7 days → 24h out): calmer, no seconds, smaller badges. */
.filmoona-countdown--compact .filmoona-digit-group {
	min-width: 36px;
	padding: 4px 5px;
}

.filmoona-countdown--compact .filmoona-digit {
	font-size: 15px;
}

.filmoona-countdown--compact [data-unit="seconds"],
.filmoona-countdown--compact .filmoona-digit-sep:last-of-type {
	display: none;
}

/* Expanded countdown (< 24h out): the days group would always read "0d"
   here — there's never a day left to show once you're inside 24h of the
   milestone — so it (and its separator) drop out entirely rather than
   sit there as dead weight. Compact keeps its own days group above,
   where it's the most meaningful number on display. */
.filmoona-countdown--expanded [data-unit="days"],
.filmoona-countdown--expanded .filmoona-digit-sep:first-of-type {
	display: none;
}

/* Expanded countdown (< 24h): the moment the widget is allowed to be a
   little more present — larger badges, still the same warm accent. */
.filmoona-countdown--expanded .filmoona-digit-group {
	min-width: 48px;
	padding: 8px 7px 6px;
}

.filmoona-countdown--expanded .filmoona-digit {
	font-size: 21px;
}

/* ---------------------------------------------------------------------- *
 * Hourglass — tiny, quiet, pure CSS by default.
 * ---------------------------------------------------------------------- */

.filmoona-hourglass {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	font-size: 15px;
	transform-origin: center;
	animation: filmoona-hourglass-tilt 15s ease-in-out infinite;
}

.filmoona-hourglass.is-paused {
	animation-play-state: paused;
}

@keyframes filmoona-hourglass-tilt {
	0%   { transform: rotate(0deg); }
	50%  { transform: rotate(2deg); }
	100% { transform: rotate(0deg); }
}

/* ---------------------------------------------------------------------- *
 * Timeline — one line, three quiet nodes.
 * ---------------------------------------------------------------------- */

.filmoona-widget__timeline {
	margin-top: 4px;
}

.filmoona-timeline__track {
	position: relative;
	height: 4px;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.filmoona-timeline__fill {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 0%;
	border-radius: 999px;
	background: var(--filmoona-accent, currentColor);
	transition: width var(--filmoona-duration, 300ms) ease;
}

.filmoona-timeline__node {
	position: absolute;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 25%, transparent);
	transform: translate(50%, -50%);
	transition: background var(--filmoona-duration, 300ms) ease;
}

.filmoona-timeline__node[data-stage-node="upcoming"] { inset-inline-start: 2%; }
.filmoona-timeline__node[data-stage-node="broadcast_done"] { inset-inline-start: 50%; }
.filmoona-timeline__node[data-stage-node="subtitle_done"] { inset-inline-start: 98%; }

.filmoona-widget[data-current-node="upcoming"] .filmoona-timeline__node[data-stage-node="upcoming"],
.filmoona-widget[data-current-node="broadcast_done"] .filmoona-timeline__node[data-stage-node="broadcast_done"],
.filmoona-widget[data-current-node="subtitle_done"] .filmoona-timeline__node[data-stage-node="subtitle_done"] {
	background: var(--filmoona-accent, currentColor);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--filmoona-accent, currentColor) 20%, transparent);
}

.filmoona-timeline__legend {
	display: flex;
	justify-content: space-between;
	margin-top: 5px;
	font-size: 10px;
	color: color-mix(in srgb, currentColor 55%, transparent);
}

/* ---------------------------------------------------------------------- *
 * Call to action
 * ---------------------------------------------------------------------- */

.filmoona-widget__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 4px;
	padding: 10px 18px;
	border-radius: calc(var(--filmoona-radius, 14px) * 0.6);
	background: var(--filmoona-accent, currentColor);
	color: #14161a;
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none;
	align-self: flex-start;
	transition: opacity var(--filmoona-duration, 300ms) ease, transform var(--filmoona-duration, 300ms) ease;
}

.filmoona-widget__cta[hidden] {
	display: none;
}

.filmoona-widget__cta:hover {
	opacity: 0.88;
	transform: translateY(-1px);
}

.filmoona-widget__cta:focus-visible {
	outline: 2px solid var(--filmoona-accent, currentColor);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------- *
 * Collapsed pill — the ONLY thing a floating widget ever shows, and what
 * a scroll-collapsed inline/align widget shows once it's scrolled past.
 *
 * Two visually separate pieces stacked with zero gap between them:
 *   .filmoona-widget__collapsed-tag  — small plain-text "NEW EPISODE : N" line
 *   .filmoona-widget__collapsed-box  — the glass pill with icon + digits
 * This used to be one shared box holding both (or, worse, the tag
 * absolutely-positioned to overlap the box's top edge) — either way, "the
 * tag versus the digits" was a collision waiting to happen. Splitting them
 * into genuinely separate elements, the tag painted after the box in
 * source order so it can never be drawn over, makes the overlap
 * structurally impossible rather than just carefully spaced against.
 *
 * All the fixed-positioning concerns (viewport anchor, z-index, the
 * movie-chat handoff) stay on the outer .filmoona-widget.is-collapsed /
 * .filmoona-pos-floating element, same as before — only the glass
 * background/border/blur/shadow moved down onto -box specifically, since
 * that's the piece that actually needs to look like a pill; the tag has
 * its own distinct look instead of inheriting the box's.
 *
 * Coordinated by hand with this site's own movie-chat plugin rather than
 * detected automatically (two independent plugins have no reliable way to
 * discover each other's layout): --filmoona-floating-offset below matches
 * movie-chat.css's own --mc-bottom-clearance (76px) so both floating
 * pieces sit at the same height instead of stacking at different offsets.
 *
 * z-index is deliberately kept HIGH here (same idea as before this pill
 * existed: a floating element needs to sit above ordinary page content —
 * headers, sliders, other floating buttons — most of which land somewhere
 * in the low thousands). The movie-chat conflict is handled entirely by
 * the `.filmoona-yield` rule + watchExternalChatOverlay() in
 * filmoona-frontend.js instead of by z-index ordering — trying to solve it
 * by staying *below* movie-chat's own z-index (99999) instead just traded
 * one bug for another: it also put this pill below everything else on an
 * ordinary page, not only below the chat window. Fading it out of the DOM
 * flow's visual stack while chat is open is the only version of this fix
 * that doesn't have that side effect.
 * ---------------------------------------------------------------------- */

.filmoona-widget.is-collapsed,
.filmoona-pos-floating {
	--filmoona-floating-offset: 76px; /* matches movie-chat.css's --mc-bottom-clearance */
	--filmoona-pill-z: 999999; /* stay above ordinary page content; the movie-chat conflict specifically is handled by .filmoona-yield below, not by this number */
	position: fixed;
	inset-inline-start: 16px;
	inset-inline-end: auto;
	inset-block-end: calc(var(--filmoona-floating-offset) + env(safe-area-inset-bottom, 0px));
	z-index: var(--filmoona-pill-z);
	width: auto;
	max-width: min(75vw, 300px);
	color: #f3f4f6;
	transition: transform var(--filmoona-duration, 300ms) ease, opacity var(--filmoona-duration, 300ms) ease;
}

.filmoona-widget.is-collapsed:hover,
.filmoona-pos-floating:hover {
	transform: translateY(-2px);
}

/* Belt-and-braces alongside the z-index gap above: movie-chat's own JS
   toggles a `movie-chat-open` class on #movie-chat-widget when its chat
   window opens — filmoona-frontend.js watches for exactly that (see
   watchExternalChatOverlay()) and mirrors it here as `.filmoona-yield` on
   whichever of these two selectors is currently showing. A z-index gap
   alone only fixes stacking *order*; on a narrow screen the chat window is
   close to full-width, so without this the pill would still visibly sit
   underneath/behind chat messages instead of being out of the way
   entirely. Faded out, not display:none, so the transform/opacity
   transition above still runs. */
.filmoona-widget.is-collapsed.filmoona-yield,
.filmoona-pos-floating.filmoona-yield {
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
}

@keyframes filmoona-pill-glow {
	0%, 100% {
		box-shadow:
			0 10px 28px rgba(0, 0, 0, 0.35),
			inset 0 1px 0 rgba(255, 255, 255, 0.08),
			0 0 20px -8px color-mix(in srgb, var(--filmoona-warm) 50%, transparent);
	}
	50% {
		box-shadow:
			0 12px 30px rgba(0, 0, 0, 0.38),
			inset 0 1px 0 rgba(255, 255, 255, 0.1),
			0 0 28px -6px color-mix(in srgb, var(--filmoona-warm) 75%, transparent);
	}
}

@media (max-width: 480px) {
	.filmoona-widget.is-collapsed,
	.filmoona-pos-floating {
		/* Width shrinks for smaller screens, but the offset stays the same
		   76px as the base rule — movie-chat's own launcher doesn't move on
		   mobile either (only its *opened widget* goes full-screen, at
		   which point .filmoona-yield above hides this pill entirely), so
		   bumping our offset here would only break the alignment we just
		   fixed. */
		max-width: min(85vw, 280px);
	}
}

.filmoona-widget__collapsed {
	display: none;
	flex-direction: column;
	align-items: flex-start;
}

.filmoona-widget.is-collapsed .filmoona-widget__collapsed,
.filmoona-pos-floating .filmoona-widget__collapsed {
	display: flex;
}

/* The "NEW EPISODE : N" tag — genuinely outside and above the glass box
 * below it (a separate element, not a child of it, not absolutely
 * positioned over any part of it). Plain colored text now, no
 * background/border/shadow of its own — the color alone marks it,
 * not a badge shape, per spec. Painted second, the box below always
 * draws over the small gap between them regardless, so the tag still
 * can't overlap the digits inside it even without a shape of its own
 * to fuse against — that's the structural fix from before, unrelated
 * to whether this element happens to look like a badge or plain text.
 */
.filmoona-widget__collapsed-tag {
	margin-inline-start: 13px;
	margin-bottom: 3px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.4px;
	white-space: nowrap;
	color: var(--filmoona-warm);
}

/* The episode number specifically gets WhatsApp's own green rather than
   the tag's warm accent — a deliberate, fixed brand color for this one
   number, independent of --filmoona-accent/--filmoona-warm. */
.filmoona-widget__collapsed-tag-number {
	color: #25d366;
}

/* The glass pill itself — icon + digits only, nothing else competing for
   space inside it. Same visual treatment (translucent + blur) this
   whole component has had throughout, just moved from the outer fixed
   element onto this inner one so the tag above has real, separate room
   to exist in rather than sharing (and fighting over) the same box. */
.filmoona-widget__collapsed-box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 92px; /* Without this, the published state (digits hidden, only the ✅ icon left) shrinks the box to a tiny square far narrower than the "NEW EPISODE : N" tag sitting above it — the two pieces stop looking attached at all. Keeps both states the same visual weight. */
	padding: 9px 14px 8px 12px;
	background: rgba(22, 24, 32, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	animation: filmoona-pill-glow 2.6s ease-in-out infinite;
	white-space: nowrap;
	overflow: hidden;
}

/* Fallback for browsers without backdrop-filter support: fall back to a
   near-solid dark chip rather than a see-through-but-unblurred one that
   would be unreadable over busy content. */
@supports not (backdrop-filter: blur(1px)) {
	.filmoona-widget__collapsed-box {
		background: rgba(17, 19, 24, 0.92);
	}
}

/* No separate fixed-theme override needed here: `.filmoona-widget
   .filmoona-fixed-theme` (below, in "Fixed theme") already has higher
   specificity than the box rule above, so an admin who explicitly opts
   out of adaptive theming still gets that same dark glass look — just
   pill-shaped and repositioned, since those properties aren't touched by
   the fixed-theme rule. */

/* An hourglass, not a clock — and one that visibly flips end-over-end
   rather than sitting still, echoing the "sand still running" idea
   without the geometry risk of hand-drawing an animated sand level. */
.filmoona-widget__collapsed-icon {
	display: inline-flex;
	flex-shrink: 0;
	font-size: 13px;
	line-height: 1;
	transform-origin: 50% 55%;
	animation: filmoona-pill-hourglass-flip 3.6s ease-in-out infinite;
}

/* Published: swapped to a checkmark in JS/PHP — no reason for a static
   checkmark to keep flipping end-over-end like the hourglass it replaced. */
.filmoona-widget__collapsed-icon.is-done {
	animation: none;
}

@keyframes filmoona-pill-hourglass-flip {
	0%, 38% { transform: rotate(0deg); }
	50%, 88% { transform: rotate(180deg); }
	100% { transform: rotate(360deg); }
}

/* Live D:H:M:S sequence, always forced left-to-right (both the `dir="ltr"`
 * attribute in the markup and `direction: ltr` here) regardless of the
 * page's own RTL context — without this, the Unicode bidi algorithm can
 * reorder a raw run of digits/punctuation inside RTL text unpredictably,
 * which is exactly what made the seconds read from the wrong side before.
 * Digits are always Latin and hour/minute/second each carry a small
 * trailing h/m/s (day doesn't — see class-filmoona-render.php) — both
 * independent of the site-wide Persian-digits setting, a deliberate,
 * distinct look for just this element. The seconds digit — the one
 * actually counting down live — gets its own red so it reads as "this is
 * the part that's moving" at a glance, distinct from the slower-moving
 * warm-colored units beside it. Sized to genuinely read as a small,
 * quiet pill — this is the one thing this chip shows now, so it doesn't
 * need to compete with a label line for space the way it used to. */
.filmoona-widget__collapsed-time {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	direction: ltr;
	font-weight: 800;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: 0.1px;
}

.filmoona-widget__collapsed-time[hidden] {
	display: none;
}

.filmoona-widget__collapsed-time span {
	color: var(--filmoona-warm);
}

.filmoona-pill-sep {
	font-weight: 600;
	font-size: 10px;
	color: color-mix(in srgb, #ffffff 45%, transparent);
}

/* Each h/m/s unit is its own {number}{letter} pair rather than bare
   colon-separated digits — unambiguous at a glance, "like a real timer".
   Direction is set explicitly here too (not just inherited from the
   parent's `direction: ltr` above) so number-then-letter order can never
   depend on inheritance alone holding up. */
.filmoona-pill-unit {
	display: inline-flex;
	direction: ltr;
	align-items: baseline;
	gap: 1px;
}

.filmoona-pill-unit > i {
	font-style: normal;
	font-weight: 600;
	font-size: 8.5px;
	color: color-mix(in srgb, #ffffff 55%, transparent);
}

/* Scoped under the parent class (not just `.filmoona-pill-seconds` alone)
   specifically so this beats ".filmoona-widget__collapsed-time span"
   above on specificity (2 classes > 1 class+1 element) — that's the actual
   reason red wasn't showing before: the generic span rule was silently
   winning every time, regardless of source order or cache state. */
.filmoona-widget__collapsed-time .filmoona-pill-seconds {
	display: inline-block;
	min-width: 1.4em;
	text-align: center;
	color: var(--filmoona-red, #ff4d4f);
}

.filmoona-widget__collapsed-time .filmoona-pill-seconds.is-tick {
	animation: filmoona-pill-tick 380ms ease;
}

@keyframes filmoona-pill-tick {
	0% {
		transform: scale(1.3);
		text-shadow: 0 0 10px color-mix(in srgb, var(--filmoona-red, #ff4d4f) 75%, transparent);
	}
	100% {
		transform: scale(1);
		text-shadow: none;
	}
}

/* ---------------------------------------------------------------------- *
 * Compact mode — an explicit, always-on density override, independent of
 * the automatic urgency-driven sizing (Settings → حالت فشرده).
 * ---------------------------------------------------------------------- */

.filmoona-widget.filmoona-compact .filmoona-widget__body {
	padding: 12px 14px 14px;
	gap: 6px;
	min-height: 0;
}

.filmoona-widget.filmoona-compact .filmoona-widget__episode-heading {
	font-size: 14px;
}

.filmoona-widget.filmoona-compact .filmoona-widget__label {
	font-size: 13px;
}

.filmoona-widget.filmoona-compact .filmoona-digit-group {
	min-width: 32px;
	padding: 4px 3px;
}

.filmoona-widget.filmoona-compact .filmoona-digit {
	font-size: 14px;
}

.filmoona-widget.filmoona-compact .filmoona-countdown--expanded .filmoona-digit {
	font-size: 16px;
}

.filmoona-widget.filmoona-compact [data-unit="seconds"],
.filmoona-widget.filmoona-compact .filmoona-digit-sep:last-of-type {
	display: none;
}

.filmoona-widget.filmoona-compact .filmoona-widget__timeline {
	margin-top: 2px;
}

.filmoona-widget.filmoona-compact .filmoona-widget__info-cards {
	grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
}

.filmoona-widget.filmoona-compact .filmoona-info-card {
	padding: 7px 9px;
}

/* ---------------------------------------------------------------------- *
 * Fixed theme — when "تطبیق خودکار با پس‌زمینه" is switched off, stop
 * inheriting currentColor from the host page and use a fixed dark surface
 * instead (this plugin's own target sites are dark-themed streaming
 * platforms, so the *fixed* fallback is dark too, not a light card that
 * would clash with the rest of a dark page). Still no `!important`: these
 * rules simply have higher specificity (an extra class) than the adaptive
 * rules above them.
 * ---------------------------------------------------------------------- */

.filmoona-widget.filmoona-fixed-theme {
	color: #f3f4f6;
	background: #14161c;
	border-color: rgba(255, 255, 255, 0.09);
}

.filmoona-widget.filmoona-fixed-theme:hover {
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.filmoona-widget.filmoona-fixed-theme .filmoona-widget__badge,
.filmoona-widget.filmoona-fixed-theme .filmoona-timeline__legend,
.filmoona-widget.filmoona-fixed-theme .filmoona-widget__episode-released {
	color: #9a9ea6;
}

.filmoona-widget.filmoona-fixed-theme .filmoona-chip--neutral {
	background: rgba(255, 255, 255, 0.07);
	color: #c6c9d0;
}

.filmoona-widget.filmoona-fixed-theme .filmoona-widget__cta {
	color: #14161a;
}

/* ---------------------------------------------------------------------- *
 * RTL / Persian typography
 *
 * The rest of this file already uses logical properties throughout
 * (inset-inline-*, margin-inline-*, border-inline-*) specifically so
 * nothing needs to branch on direction — the same rules that lay the
 * widget out correctly in `dir="rtl"` (the only direction
 * Filmoona_Render ever emits) degrade correctly to LTR too. The two
 * tweaks below are the only spots that need an explicit nudge: Persian
 * digits sit very slightly differently on the vertical rhythm than
 * Latin ones in most Persian webfonts (Vazirmatn, Yekan, IRANSans…), and
 * the countdown separators need to be excluded from being mirrored.
 * ---------------------------------------------------------------------- */

.filmoona-widget[dir="rtl"] .filmoona-digit-sep {
	transform: translateY(-2px) scaleX(1); /* Explicitly un-mirrored — a colon should never flip. */
}

.filmoona-widget[dir="rtl"] .filmoona-widget__cta {
	letter-spacing: 0; /* Persian script has no letter-spacing concept; avoids webfonts that inherit a Latin default. */
}

/* ---------------------------------------------------------------------- *
 * Accessibility helpers
 * ---------------------------------------------------------------------- */

.filmoona-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-contrast: more) {
	.filmoona-widget {
		border-width: 2px;
		background: transparent;
	}
	.filmoona-widget__badge,
	.filmoona-digit-unit,
	.filmoona-timeline__legend,
	.filmoona-info-card {
		color: inherit;
		opacity: 0.85;
	}
	.filmoona-info-card {
		background: transparent;
		border-width: 2px;
	}
	.filmoona-chip--neutral,
	.filmoona-chip--done {
		background: transparent;
		border: 1px solid currentColor;
	}
}

@media (prefers-reduced-motion: reduce) {
	.filmoona-widget,
	.filmoona-widget * {
		animation: none !important;
		transition: none !important;
	}
}

/* The one deliberate use of !important in this file: reduced-motion is an
   accessibility guarantee, not a style preference, so it must always win —
   including against the widget's own inline --filmoona-duration variable. */