/*!
 * Tafakor Pardazan Video Player — front-end styles.
 * Everything is scoped under .tpvp so it cannot affect the active theme.
 * Logical properties (inline-start/end, inline-size) make RTL work without a mirrored file.
 */
.tpvp {
	--tpvp-accent: #91DA73;
	--tpvp-accent-2: #69B437;
	--tpvp-bg: #021C25;
	--tpvp-surface: #0E3338;
	--tpvp-deep: #053A3D;
	--tpvp-text: #F6FAF8;
	--tpvp-muted: rgba(246, 250, 248, .72);
	--tpvp-radius: 16px;
	--tpvp-ease: cubic-bezier(.2, .7, .2, 1);
	position: relative;
	display: block;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	margin-block: 1.5em;
	aspect-ratio: var(--tpvp-ratio, 16 / 9);
	border-radius: var(--tpvp-radius);
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 85% 0%, rgba(145, 218, 115, .12), transparent 55%),
		linear-gradient(160deg, var(--tpvp-surface), var(--tpvp-bg) 70%);
	color: var(--tpvp-text);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	text-align: start;
	isolation: isolate;
	contain: layout style;
	box-shadow: 0 24px 60px -28px rgba(2, 28, 37, .9), 0 0 0 1px rgba(246, 250, 248, .07);
	-webkit-tap-highlight-color: transparent;
}
.tpvp *, .tpvp *::before, .tpvp *::after { box-sizing: border-box; }
.tpvp.alignwide { max-inline-size: none; }
.tpvp--w-content { max-inline-size: 840px; margin-inline: auto; }
.tpvp__stage { position: absolute; inset: 0; }
.tpvp__video, .tpvp__iframe {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	background: #000;
	object-fit: contain;
}
.tpvp--embed .tpvp__video { object-fit: cover; }

/* ---- Buttons (hardened against theme button styles) ------------------- */
.tpvp button.tpvp__btn, .tpvp button.tpvp__big, .tpvp button.tpvp__facade, .tpvp button.tpvp__menu-item, .tpvp .tpvp__cta {
	appearance: none; -webkit-appearance: none;
	margin: 0; padding: 0; border: 0; border-radius: 0;
	background: none; box-shadow: none; text-shadow: none; text-transform: none; letter-spacing: normal;
	font: inherit; line-height: 1; color: inherit; cursor: pointer;
}
.tpvp button:focus-visible, .tpvp a:focus-visible, .tpvp [role="slider"]:focus-visible, .tpvp input:focus-visible {
	outline: 2px solid var(--tpvp-accent);
	outline-offset: 2px;
}
.tpvp__btn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	inline-size: 40px; block-size: 40px; flex: none;
	border-radius: 999px;
	transition: background-color .18s var(--tpvp-ease), color .18s var(--tpvp-ease), transform .18s var(--tpvp-ease);
}
.tpvp__btn:hover { background: rgba(145, 218, 115, .16); color: var(--tpvp-accent); }
.tpvp__btn:active { transform: scale(.94); }
.tpvp__btn[aria-pressed="true"], .tpvp__btn[aria-expanded="true"] { color: var(--tpvp-accent); }
.tpvp__btn svg { inline-size: 22px; block-size: 22px; display: block; fill: currentColor; pointer-events: none; }
.tpvp__btn .tpvp__ico-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tpvp__btn--text { inline-size: auto; padding-inline: 10px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.tpvp__btn[hidden] { display: none; }

/* ---- Overlay UI --------------------------------------------------------- */
.tpvp__ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
.tpvp__ui > * { pointer-events: auto; }
.tpvp__shade {
	position: absolute; inset: auto 0 0 0; block-size: 45%;
	background: linear-gradient(to top, rgba(2, 28, 37, .88), rgba(2, 28, 37, 0));
	pointer-events: none; opacity: 1; transition: opacity .25s var(--tpvp-ease);
}
.tpvp__controls { position: relative; padding: 0 12px 8px; transition: opacity .25s var(--tpvp-ease), transform .25s var(--tpvp-ease); }
.tpvp.is-idle .tpvp__controls, .tpvp.is-idle .tpvp__brand, .tpvp.is-idle .tpvp__shade { opacity: 0; }
.tpvp.is-idle .tpvp__controls { transform: translateY(6px); pointer-events: none; }
.tpvp.is-idle.is-playing { cursor: none; }
.tpvp__bar { display: flex; align-items: center; gap: 2px; }
.tpvp__spacer { flex: 1; }
.tpvp__time { color: var(--tpvp-text); font-variant-numeric: tabular-nums; font-size: 13px; padding-inline: 8px; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.tpvp__time-sep { opacity: .55; margin-inline: 3px; }

/* ---- Timeline ----------------------------------------------------------- */
.tpvp__progress {
	position: relative; block-size: 20px; margin-inline: 2px; display: flex; align-items: center;
	cursor: pointer; touch-action: none; outline-offset: 0;
}
.tpvp__track { position: relative; inline-size: 100%; block-size: 4px; border-radius: 999px; background: rgba(246, 250, 248, .22); transition: block-size .15s var(--tpvp-ease); overflow: visible; }
.tpvp__progress:hover .tpvp__track, .tpvp__progress:focus-visible .tpvp__track, .tpvp__progress.is-dragging .tpvp__track { block-size: 7px; }
.tpvp__buffered, .tpvp__played { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; }
.tpvp__buffered { background: rgba(246, 250, 248, .3); inline-size: 0; }
.tpvp__played { background: linear-gradient(90deg, var(--tpvp-accent-2), var(--tpvp-accent)); inline-size: 0; }
.tpvp--rtl .tpvp__played { background: linear-gradient(270deg, var(--tpvp-accent-2), var(--tpvp-accent)); }
.tpvp__thumb {
	position: absolute; inset-block-start: 50%; inset-inline-start: 0; inline-size: 14px; block-size: 14px; margin-inline-start: -7px; margin-block-start: -7px;
	border-radius: 50%; background: var(--tpvp-accent); box-shadow: 0 0 0 4px rgba(145, 218, 115, .25), 0 2px 8px rgba(0, 0, 0, .5);
	transform: scale(0); transition: transform .15s var(--tpvp-ease);
}
.tpvp--rtl .tpvp__thumb { margin-inline-start: 0; margin-inline-end: -7px; }
.tpvp__progress:hover .tpvp__thumb, .tpvp__progress:focus-visible .tpvp__thumb, .tpvp__progress.is-dragging .tpvp__thumb { transform: scale(1); }
.tpvp__tip {
	position: absolute; inset-block-end: 22px; inset-inline-start: 0; padding: 4px 8px; border-radius: 8px; transform: translateX(-50%);
	background: rgba(2, 28, 37, .94); color: var(--tpvp-text); font-size: 12px; font-variant-numeric: tabular-nums; border: 1px solid rgba(145, 218, 115, .35);
	pointer-events: none; opacity: 0; transition: opacity .12s; white-space: nowrap; direction: ltr;
}
.tpvp--rtl .tpvp__tip { transform: translateX(50%); }
.tpvp__progress:hover .tpvp__tip, .tpvp__progress.is-dragging .tpvp__tip { opacity: 1; }

/* ---- Volume ------------------------------------------------------------- */
.tpvp__vol { display: flex; align-items: center; }
.tpvp__vol-range {
	-webkit-appearance: none; appearance: none; direction: ltr;
	inline-size: 0; opacity: 0; margin: 0; background: transparent; height: 24px; cursor: pointer;
	transition: inline-size .2s var(--tpvp-ease), opacity .2s var(--tpvp-ease), margin .2s var(--tpvp-ease);
}
.tpvp__vol:hover .tpvp__vol-range, .tpvp__vol:focus-within .tpvp__vol-range { inline-size: 72px; opacity: 1; margin-inline: 4px 8px; }
.tpvp__vol-range::-webkit-slider-runnable-track { block-size: 4px; border-radius: 99px; background: linear-gradient(to right, var(--tpvp-accent) var(--tpvp-fill, 100%), rgba(246, 250, 248, .25) var(--tpvp-fill, 100%)); }
.tpvp__vol-range::-moz-range-track { block-size: 4px; border-radius: 99px; background: rgba(246, 250, 248, .25); }
.tpvp__vol-range::-moz-range-progress { block-size: 4px; border-radius: 99px; background: var(--tpvp-accent); }
.tpvp__vol-range::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 12px; block-size: 12px; margin-block-start: -4px; border-radius: 50%; background: var(--tpvp-accent); border: 0; }
.tpvp__vol-range::-moz-range-thumb { inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--tpvp-accent); border: 0; }

/* ---- Menu (speed) ------------------------------------------------------- */
.tpvp__menu-wrap { position: relative; }
.tpvp__menu {
	position: absolute; inset-block-end: 48px; inset-inline-end: 0; min-inline-size: 140px; padding: 6px; margin: 0; list-style: none;
	background: rgba(9, 30, 39, .97); border: 1px solid rgba(145, 218, 115, .3); border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7);
	backdrop-filter: blur(10px); z-index: 5;
}
.tpvp__menu[hidden] { display: none; }
.tpvp__menu-item { display: flex !important; align-items: center; inline-size: 100%; padding: 9px 12px !important; border-radius: 9px !important; gap: 8px; font-size: 13px; text-align: start; white-space: nowrap; }
.tpvp__menu-item:hover, .tpvp__menu-item:focus-visible { background: rgba(145, 218, 115, .14) !important; }
.tpvp__menu-item[aria-checked="true"] { color: var(--tpvp-accent); font-weight: 700; }
.tpvp__menu-item[aria-checked="true"]::before { content: "✓"; }
.tpvp__menu-item::before { content: ""; inline-size: 1em; }

/* ---- Big play, loader, brand ------------------------------------------- */
.tpvp__big {
	position: absolute; inset: 0; margin: auto !important; inline-size: 76px !important; block-size: 76px !important; border-radius: 50% !important;
	display: grid !important; place-items: center; background: linear-gradient(145deg, var(--tpvp-accent), var(--tpvp-accent-2)) !important; color: var(--tpvp-bg) !important;
	box-shadow: 0 0 0 10px rgba(145, 218, 115, .16), 0 18px 40px -10px rgba(0, 0, 0, .7) !important;
	transition: transform .2s var(--tpvp-ease), opacity .2s var(--tpvp-ease); z-index: 2; pointer-events: auto;
}
.tpvp__big:hover { transform: scale(1.06); }
.tpvp__big svg { inline-size: 34px; block-size: 34px; fill: currentColor; margin-inline-start: 4px; }
.tpvp.is-playing .tpvp__big, .tpvp.is-ended .tpvp__big, .tpvp.is-error .tpvp__big { opacity: 0; pointer-events: none; transform: scale(.8); }
.tpvp__loader {
	position: absolute; inset: 0; margin: auto; inline-size: 56px; block-size: 56px; border-radius: 50%; z-index: 3; pointer-events: none; opacity: 0;
	background: conic-gradient(from 0deg, transparent 0 25%, var(--tpvp-accent) 75%, var(--tpvp-accent-2));
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	transition: opacity .2s;
}
.tpvp.is-loading .tpvp__loader { opacity: 1; animation: tpvp-spin .9s linear infinite; }
.tpvp.is-loading .tpvp__big { opacity: 0; }
.tpvp.no-loader-anim.is-loading .tpvp__loader { animation: none; }
@keyframes tpvp-spin { to { transform: rotate(360deg); } }
.tpvp__brand {
	position: absolute; inset-block-start: 12px; inset-inline-start: 14px; z-index: 2; display: flex; align-items: center; gap: 8px;
	padding: 6px 12px; border-radius: 999px; background: rgba(2, 28, 37, .55); border: 1px solid rgba(145, 218, 115, .25);
	backdrop-filter: blur(8px); font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--tpvp-text);
	pointer-events: none; transition: opacity .25s var(--tpvp-ease);
}
.tpvp__brand-logo { inline-size: 20px; block-size: 20px; border-radius: 50%; object-fit: cover; }
.tpvp.is-playing:not(.is-idle) .tpvp__brand { opacity: .85; }

/* ---- End and error screens --------------------------------------------- */
.tpvp__end, .tpvp__error {
	position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center;
	background: radial-gradient(90% 80% at 50% 0%, rgba(22, 90, 84, .55), rgba(2, 28, 37, .94) 70%); backdrop-filter: blur(6px);
}
.tpvp.is-ended .tpvp__end, .tpvp.is-error .tpvp__error { display: flex; animation: tpvp-fade .35s var(--tpvp-ease); }
@keyframes tpvp-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tpvp__end-brand { font-size: 12px; font-weight: 700; color: var(--tpvp-accent); letter-spacing: .04em; }
.tpvp__end-title, .tpvp__error-title { margin: 0; font-size: clamp(16px, 2.6vw, 24px); font-weight: 700; color: var(--tpvp-text); }
.tpvp__end-text, .tpvp__error-text { margin: 0; max-inline-size: 46ch; color: var(--tpvp-muted); }
.tpvp__end-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-block-start: 4px; }
.tpvp__cta, .tpvp button.tpvp__cta {
	display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px !important; border-radius: 12px !important; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer;
	border: 1.5px solid rgba(145, 218, 115, .45) !important; color: var(--tpvp-text) !important; background: rgba(145, 218, 115, .08) !important;
	transition: background-color .18s, transform .18s, border-color .18s;
}
.tpvp__cta:hover { background: rgba(145, 218, 115, .18) !important; border-color: var(--tpvp-accent) !important; transform: translateY(-1px); }
.tpvp__cta--primary, .tpvp button.tpvp__cta--primary { background: linear-gradient(145deg, var(--tpvp-accent), var(--tpvp-accent-2)) !important; color: var(--tpvp-bg) !important; border-color: transparent !important; }
.tpvp__cta--primary:hover { filter: brightness(1.06); background: linear-gradient(145deg, var(--tpvp-accent), var(--tpvp-accent-2)) !important; }
.tpvp__cta svg { inline-size: 18px; block-size: 18px; fill: currentColor; }
.tpvp .tpvp__ico-stroke, .tpvp .tpvp__cta svg.tpvp__ico-stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Embeds / privacy facade ------------------------------------------- */
.tpvp__facade {
	position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	background-size: cover; background-position: center; background-color: transparent;
}
.tpvp__facade::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(2, 28, 37, .8), rgba(2, 28, 37, .25)); }
.tpvp__facade-play {
	position: relative; inline-size: 76px; block-size: 76px; border-radius: 50%; display: grid; place-items: center;
	background: linear-gradient(145deg, var(--tpvp-accent), var(--tpvp-accent-2)); box-shadow: 0 0 0 10px rgba(145, 218, 115, .16), 0 18px 40px -10px rgba(0, 0, 0, .7);
	transition: transform .2s var(--tpvp-ease);
}
.tpvp__facade-play::after { content: ""; border-inline-start: 24px solid var(--tpvp-bg); border-block: 15px solid transparent; margin-inline-start: 6px; }
.tpvp__facade:hover .tpvp__facade-play { transform: scale(1.07); }
.tpvp__facade-note { position: relative; font-size: 12px; color: var(--tpvp-muted); padding: 4px 10px; border-radius: 999px; background: rgba(2, 28, 37, .55); }
.tpvp.is-embed-loaded .tpvp__brand { opacity: 0; }

/* ---- Fullscreen --------------------------------------------------------- */
.tpvp:fullscreen, .tpvp:-webkit-full-screen { aspect-ratio: auto; border-radius: 0; margin: 0; max-inline-size: none; inline-size: 100%; block-size: 100%; }
.tpvp:fullscreen .tpvp__video, .tpvp:-webkit-full-screen .tpvp__video { object-fit: contain; }

/* ---- Misc --------------------------------------------------------------- */
.tpvp-notice { padding: 10px 14px; border-radius: 10px; border: 1px dashed #c3a54a; background: rgba(195, 165, 74, .12); color: inherit; font-size: 13px; }
.tpvp--enhanced { margin-block: 0; }
.tpvp--enhanced.tpvp--embed { box-shadow: none; }
.tpvp-sr { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (pointer: coarse) {
	.tpvp__btn { inline-size: 44px; block-size: 44px; }
	.tpvp__progress { block-size: 28px; }
	.tpvp__vol-range { display: none; }
	.tpvp__time { font-size: 12px; padding-inline: 4px; }
}
@media (max-width: 520px) {
	.tpvp { font-size: 13px; }
	.tpvp__controls { padding: 0 6px 4px; }
	.tpvp__btn { inline-size: 40px; block-size: 40px; }
	.tpvp__big { inline-size: 64px !important; block-size: 64px !important; }
	.tpvp__brand { inset-block-start: 8px; inset-inline-start: 8px; font-size: 11px; padding: 4px 10px; }
	.tpvp__vol-range, .tpvp__btn--pip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tpvp *, .tpvp *::before, .tpvp *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
	.tpvp.is-loading .tpvp__loader { animation: none; opacity: 1; }
}
@media (forced-colors: active) {
	.tpvp__played { background: Highlight; }
	.tpvp__btn:focus-visible { outline-color: Highlight; }
}
