/**
 * Ramis Portfolio — frontend.css (v1.0.1)
 * ظاهر سمت سایت: لیست /portfolio، صفحه دسته، تب‌ها، پنج سبک کارت (لیست، طراحی سایت، سئو،
 * تولید محتوا، عادی)، پاپ‌آپ تولید محتوا و پیش‌نمایش زنده تنظیمات.
 * همه کلاس‌ها با پیشوند «rpf-f-» ساخته شده‌اند تا با پوسته مدیریت (style.css) تداخل نکنند.
 * ظاهر هر سبک از متغیرهای CSS و data-attributeهای ریشه (.rpf-f) می‌آید که از «تنظیمات» ساخته می‌شوند.
 * data-theme="dark" رنگ‌های سطح‌ها را برای طراحی‌های تیره عوض می‌کند.
 * رنگ برند: «رنگ اصلی پلاگین» از تنظیمات (پیش‌فرض #3e9597 و ثانویه #004d49) و مشتقات آن از طریق
 * متغیرهای --rpf-f-primary* که PHP (RPF_Frontend::global_css) می‌نویسد؛ مقدارهای این فایل فقط
 * پشتیبان هستند. هیچ رنگی از وردپرس یا المنتور گرفته نمی‌شود.
 * پالت لایت و دارک هر سبک با متغیرهای --rpf-f-l-* و --rpf-f-d-* از تنظیمات می‌آید.
 * مقیاس فاصله: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64.
 */

.rpf-f {
	--rpf-f-primary: #3e9597;
	--rpf-f-primary-dark: #004d49;
	--rpf-f-primary-light: #e6f2f1;
	--rpf-f-primary-lighter: #f4f9f9;
	--rpf-f-on-primary: #ffffff;
	--rpf-f-tag-fs: 12px;
	--rpf-f-shadow-sm: 0 1px 2px rgba(16, 24, 24, 0.04);
	--rpf-f-shadow-md: 0 4px 14px rgba(16, 24, 24, 0.06);
	--rpf-f-shadow-lg: 0 10px 30px rgba(16, 24, 24, 0.09);

	/* پالت لایت (مقدارهای --rpf-f-l-* از تنظیمات روی ریشه نوشته می‌شوند) */
	--rpf-f-bg: var(--rpf-f-l-bg, #ffffff);
	--rpf-f-text: var(--rpf-f-l-text, #1d2327);
	--rpf-f-title: var(--rpf-f-l-title, var(--rpf-f-text));
	--rpf-f-muted: var(--rpf-f-l-muted, #656b6a);
	--rpf-f-line: var(--rpf-f-l-line, #e2e5e4);
	--rpf-f-tile: var(--rpf-f-l-tile, var(--rpf-f-primary-lighter));
	--rpf-f-accent: var(--rpf-f-l-accent, var(--rpf-f-primary));
	--rpf-f-on-accent: var(--rpf-f-l-on-accent, #ffffff);
	--rpf-f-hover-title: var(--rpf-f-l-hover-title, var(--rpf-f-accent));
	--rpf-f-backdrop: var(--rpf-f-l-backdrop, var(--rpf-f-primary-lighter));
	--rpf-f-line-soft: var(--rpf-f-line);
	--rpf-f-chip-bg: var(--rpf-f-primary-light);
	--rpf-f-chip-ink: var(--rpf-f-primary-dark);
	--rpf-f-up-bg: #e5f5ea;
	--rpf-f-up-ink: #1e8e3e;
	--rpf-f-down-bg: #fbe1e1;
	--rpf-f-down-ink: #d63638;
	--rpf-f-tag-base: #ffffff;
	--rpf-f-tag-mix: 14%;
	--rpf-f-tag-ink: #000000;
	--rpf-f-tag-ink-pct: 72%;

	--rpf-f-cols: 3;
	--rpf-f-gap: 24px;
	--rpf-f-radius: 14px;
	--rpf-f-inner-radius: 10px;
	--rpf-f-fs-title: 17px;
	--rpf-f-fs-text: 14px;
	--rpf-f-fs-stat: 20px;
	--rpf-f-title-weight: 800;
	--rpf-f-scroll: 6s;
	--rpf-f-chart: var(--rpf-f-accent);
	--rpf-f-overlay: 0.4;
	--rpf-f-ratio: 16 / 9;
	--rpf-f-popup-dim: 0.78;
	--rpf-f-popup-radius: 14px;
	--rpf-f-mac-frame: #14181a;
	--rpf-f-mac-base: #4a5154;
	--rpf-f-phone-frame: #14181a;
	--rpf-f-mac-bezel: 1.5%;
	--rpf-f-phone-bezel: 2px;

	direction: rtl;
	text-align: right;
	font-family: inherit;
	color: var(--rpf-f-text);
	box-sizing: border-box;
	max-width: 100%;
}

@supports (color: color-mix(in srgb, red 10%, white)) {
	.rpf-f {
		--rpf-f-line-soft: color-mix(in srgb, var(--rpf-f-line) 55%, var(--rpf-f-bg));
		--rpf-f-chip-bg: color-mix(in srgb, var(--rpf-f-accent) 15%, var(--rpf-f-bg));
		--rpf-f-chip-ink: color-mix(in srgb, var(--rpf-f-accent) 78%, var(--rpf-f-text));
	}
}

/* پالت دارک: حالت «دارک» یا «خودکار» (هماهنگ با تنظیم دارک مرورگر/سیستم بازدیدکننده) */
.rpf-f[data-theme="dark"] {
	--rpf-f-bg: var(--rpf-f-d-bg, #14181a);
	--rpf-f-text: var(--rpf-f-d-text, #f3f4f4);
	--rpf-f-title: var(--rpf-f-d-title, var(--rpf-f-text));
	--rpf-f-muted: var(--rpf-f-d-muted, #9aa3a2);
	--rpf-f-line: var(--rpf-f-d-line, #2a3235);
	--rpf-f-tile: var(--rpf-f-d-tile, #1d2427);
	--rpf-f-accent: var(--rpf-f-d-accent, var(--rpf-f-primary));
	--rpf-f-on-accent: var(--rpf-f-d-on-accent, #ffffff);
	--rpf-f-hover-title: var(--rpf-f-d-accent, var(--rpf-f-accent));
	--rpf-f-backdrop: var(--rpf-f-d-backdrop, #0b1011);
	--rpf-f-chip-bg: #1f3a39;
	--rpf-f-chip-ink: #a9dcd9;
	--rpf-f-up-bg: #173a22;
	--rpf-f-up-ink: #6fd68b;
	--rpf-f-down-bg: #4a1d1d;
	--rpf-f-down-ink: #ff8a8c;
	--rpf-f-tag-base: #14181a;
	--rpf-f-tag-mix: 24%;
	--rpf-f-tag-ink: #ffffff;
	--rpf-f-tag-ink-pct: 55%;
	--rpf-f-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--rpf-f-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
	--rpf-f-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45);
	color-scheme: dark;
}

@supports (color: color-mix(in srgb, red 10%, white)) {
	.rpf-f[data-theme="dark"] {
		--rpf-f-chip-bg: color-mix(in srgb, var(--rpf-f-accent) 22%, var(--rpf-f-bg));
		--rpf-f-chip-ink: color-mix(in srgb, var(--rpf-f-accent) 55%, #ffffff);
	}
}

@media (prefers-color-scheme: dark) {
	.rpf-f[data-theme="auto"] {
		--rpf-f-bg: var(--rpf-f-d-bg, #14181a);
		--rpf-f-text: var(--rpf-f-d-text, #f3f4f4);
		--rpf-f-title: var(--rpf-f-d-title, var(--rpf-f-text));
		--rpf-f-muted: var(--rpf-f-d-muted, #9aa3a2);
		--rpf-f-line: var(--rpf-f-d-line, #2a3235);
		--rpf-f-tile: var(--rpf-f-d-tile, #1d2427);
		--rpf-f-accent: var(--rpf-f-d-accent, var(--rpf-f-primary));
		--rpf-f-on-accent: var(--rpf-f-d-on-accent, #ffffff);
		--rpf-f-hover-title: var(--rpf-f-d-accent, var(--rpf-f-accent));
		--rpf-f-backdrop: var(--rpf-f-d-backdrop, #0b1011);
		--rpf-f-chip-bg: #1f3a39;
		--rpf-f-chip-ink: #a9dcd9;
		--rpf-f-up-bg: #173a22;
		--rpf-f-up-ink: #6fd68b;
		--rpf-f-down-bg: #4a1d1d;
		--rpf-f-down-ink: #ff8a8c;
		--rpf-f-tag-base: #14181a;
		--rpf-f-tag-mix: 24%;
		--rpf-f-tag-ink: #ffffff;
		--rpf-f-tag-ink-pct: 55%;
		--rpf-f-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
		--rpf-f-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
		--rpf-f-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45);
		color-scheme: dark;
	}
	@supports (color: color-mix(in srgb, red 10%, white)) {
		.rpf-f[data-theme="auto"] {
			--rpf-f-chip-bg: color-mix(in srgb, var(--rpf-f-accent) 22%, var(--rpf-f-bg));
			--rpf-f-chip-ink: color-mix(in srgb, var(--rpf-f-accent) 55%, #ffffff);
		}
	}
}

.rpf-f *,
.rpf-f *::before,
.rpf-f *::after {
	box-sizing: border-box;
}

.rpf-f img {
	max-width: 100%;
	display: block;
}

/* ===================== صفحه‌ها و سرتیتر ===================== */

.rpf-f-page {
	direction: rtl;
	max-width: 1240px;
	margin: 0 auto;
	padding: 48px 20px;
}

.rpf-f-head { margin-bottom: 32px; }

.rpf-f-head-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 8px;
	font-size: var(--rpf-f-head-fs, 32px);
	line-height: 1.4;
	font-weight: 800;
	color: var(--rpf-f-head-color, inherit);
}

.rpf-f-head-title i {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}

.rpf-f-head-desc {
	margin: 0;
	max-width: 720px;
	font-size: var(--rpf-f-head-desc-fs, 16px);
	line-height: 1.9;
	color: var(--rpf-f-head-desc-color, #656b6a);
}

.rpf-f-crumb {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 13px;
	color: var(--rpf-f-primary, #3e9597);
	text-decoration: none;
}

.rpf-f-crumb:hover { color: var(--rpf-f-primary-dark, #004d49); }

.rpf-f-empty {
	padding: 48px 20px;
	text-align: center;
	color: var(--rpf-f-muted, #656b6a);
	background: var(--rpf-f-tile, var(--rpf-f-primary-lighter, #f4f9f9));
	border-radius: 14px;
}

.rpf-f-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--rpf-f-inner-radius, 10px);
	background: var(--rpf-f-accent, var(--rpf-f-primary, #3e9597));
	color: var(--rpf-f-on-accent, #fff);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.rpf-f-btn:hover { filter: brightness(0.88); color: var(--rpf-f-on-accent, #fff); }

.rpf-f-more { display: flex; justify-content: center; margin-top: 32px; }
.rpf-f-more .rpf-f-btn.is-loading { opacity: 0.6; pointer-events: none; }

/* ===================== تگ دسته‌بندی ===================== */

.rpf-f-tags { display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }

.rpf-f-tag {
	--rpf-f-tag-color: var(--rpf-f-primary, #3e9597);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	font-size: var(--rpf-f-tag-fs, 12px);
	line-height: 1.6;
	font-weight: 700;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--rpf-f-tag-base, #ffffff);
	color: var(--rpf-f-tag-color);
}

.rpf-f-tag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rpf-f-tag-color); flex-shrink: 0; }

[data-tag-style="soft"] .rpf-f-tag {
	background: color-mix(in srgb, var(--rpf-f-tag-color) var(--rpf-f-tag-mix, 14%), var(--rpf-f-tag-base, #ffffff));
	color: color-mix(in srgb, var(--rpf-f-tag-color) var(--rpf-f-tag-ink-pct, 72%), var(--rpf-f-tag-ink, #000000));
}

[data-tag-style="filled"] .rpf-f-tag { background: var(--rpf-f-tag-color); color: var(--rpf-f-tag-on, #ffffff); border-color: var(--rpf-f-tag-color); }
[data-tag-style="filled"] .rpf-f-tag-dot { background: var(--rpf-f-tag-on, #ffffff); }

[data-tag-style="outline"] .rpf-f-tag { background: color-mix(in srgb, var(--rpf-f-tag-base, #ffffff) 92%, transparent); border-color: var(--rpf-f-tag-color); color: var(--rpf-f-tag-color); }

[data-tag-radius="md"] .rpf-f-tag { border-radius: 10px; }
[data-tag-radius="sm"] .rpf-f-tag { border-radius: 6px; }
[data-tag-size="md"] .rpf-f-tag { padding: 8px 12px; font-size: calc(var(--rpf-f-tag-fs, 12px) + 1px); }
[data-tag-dot="0"] .rpf-f-tag-dot { display: none; }
[data-tag-max="1"] .rpf-f-tag:nth-child(n + 2) { display: none; }
[data-tag-max="2"] .rpf-f-tag:nth-child(n + 3) { display: none; }

.rpf-f-tags-float { position: absolute; z-index: 4; max-width: calc(100% - 24px); }

[data-tag-pos="top-right"] .rpf-f-tags-float { top: 12px; right: 12px; }
[data-tag-pos="top-left"] .rpf-f-tags-float { top: 12px; left: 12px; }
[data-tag-pos="bottom-right"] .rpf-f-tags-float { bottom: 12px; right: 12px; }
[data-tag-pos="bottom-left"] .rpf-f-tags-float { bottom: 12px; left: 12px; }

[data-tag-pos="inline"] .rpf-f-tags-float { display: none; }
.rpf-f-tags-inline { display: none; margin-bottom: 8px; }
[data-tag-pos="inline"] .rpf-f-tags-inline { display: flex; }

/* ===================== تب زیردسته‌ها / فیلتر ===================== */

.rpf-f-tabs {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 100%;
	margin-bottom: 32px;
	padding: 4px;
	border-radius: 14px;
}

.rpf-f-tabs-indicator {
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), width 0.4s cubic-bezier(0.22, 1, 0.36, 1), height 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.rpf-f-tabs.has-indicator .rpf-f-tabs-indicator { opacity: 1; }

.rpf-f-tabs .rpf-f-tab {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 20px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	box-shadow: none;
	color: var(--rpf-f-tabc-text, var(--rpf-f-tabs-text, #656b6a));
	font: inherit;
	font-size: var(--rpf-f-tabs-fs, 14px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.25s ease, background 0.25s ease;
}

/* رنگ‌های حالت‌های Hover/Focus/Active دقیقاً از تنظیمات پلاگین می‌آیند، نه از قالب یا المنتور */
.rpf-f-tabs .rpf-f-tab:hover,
.rpf-f-tabs .rpf-f-tab:focus,
.rpf-f-tabs .rpf-f-tab:active {
	background: transparent;
	box-shadow: none;
	color: var(--rpf-f-tabc-hover, var(--rpf-f-tabs-hover, #1d2327));
	text-decoration: none;
}
.rpf-f-tabs .rpf-f-tab:focus-visible { outline: 2px solid var(--rpf-f-primary, #3e9597); outline-offset: 2px; }
.rpf-f-tabs[data-tabs-hover="1"] .rpf-f-tab:not(.is-active):hover { background: color-mix(in srgb, var(--rpf-f-tabc-hover) 12%, transparent); }
.rpf-f-tabs .rpf-f-tab.is-active,
.rpf-f-tabs .rpf-f-tab.is-active:hover,
.rpf-f-tabs .rpf-f-tab.is-active:focus {
	background: transparent;
	color: var(--rpf-f-tabc-active-text, var(--rpf-f-tabs-active-text, #ffffff));
}

/* نشانگر (تب فعال): رنگ پیش‌فرض = رنگ همان دسته؛ در صورت تنظیم، رنگ تب فعال پلاگین؛ سفارشی دسته بالاتر از همه */
.rpf-f-tabs:not([data-tabs-custom="1"]) .rpf-f-tabs-indicator { background: var(--rpf-f-tabs-ind, var(--rpf-f-tabs-active-bg, var(--rpf-f-active-color, var(--rpf-f-primary, #3e9597)))); }
.rpf-f-tabs[data-tabs-custom="1"] .rpf-f-tabs-indicator { background: var(--rpf-f-tabc-active) !important; }

.rpf-f-tab-count {
	min-width: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.08);
	font-size: 12px;
	font-style: normal;
	line-height: 24px;
	text-align: center;
}

.rpf-f-tab.is-active .rpf-f-tab-count { background: rgba(255, 255, 255, 0.28); }
[data-tabs-count="0"] .rpf-f-tab-count { display: none; }

[data-tabs-style="pill"] .rpf-f-tabs-indicator,
.rpf-f-tabs:not([data-tabs-style]) .rpf-f-tabs-indicator { border-radius: 999px; }
[data-tabs-style="pill"] .rpf-f-tab { border-radius: 999px; }

[data-tabs-style="segment"] { gap: 0; background: var(--rpf-f-tabs-bg, #f3f4f4); border: 1px solid var(--rpf-f-tabs-line, #e2e5e4); }
[data-tabs-style="segment"] .rpf-f-tabs-indicator { border-radius: 10px; }

[data-tabs-style="underline"] { gap: 20px; padding: 0; border-radius: 0; border-bottom: 1px solid var(--rpf-f-tabs-line, #e2e5e4); }
.rpf-f-tabs[data-tabs-style="underline"] .rpf-f-tab { padding: 12px 4px; border-radius: 0; color: var(--rpf-f-tabc-text, var(--rpf-f-tabs-text, #656b6a)); }
.rpf-f-tabs[data-tabs-style="underline"] .rpf-f-tab:hover { color: var(--rpf-f-tabc-hover, var(--rpf-f-tabs-hover, #1d2327)); }
.rpf-f-tabs[data-tabs-style="underline"] .rpf-f-tab.is-active,
.rpf-f-tabs[data-tabs-style="underline"] .rpf-f-tab.is-active:hover { color: var(--rpf-f-tabc-active-text, var(--rpf-f-tabs-hover, #1d2327)); }
[data-tabs-style="underline"][data-tabs-hover="1"] .rpf-f-tab:not(.is-active):hover { background: transparent; }
[data-tabs-style="underline"] .rpf-f-tabs-indicator { top: auto; bottom: -1px; height: 3px !important; border-radius: 3px 3px 0 0; }
[data-tabs-style="underline"] .rpf-f-tab-count { background: var(--rpf-f-tabs-bg, #f3f4f4); }
[data-tabs-style="underline"] .rpf-f-tab.is-active .rpf-f-tab-count { background: var(--rpf-f-primary-light, #e6f2f1); }

/* ===================== گرید و کارت پایه ===================== */

.rpf-f-stage { position: relative; min-height: 160px; }

.rpf-f-stage.is-leaving .rpf-f-grid-wrap { opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; }
[data-anim="slide"] .rpf-f-stage.is-leaving .rpf-f-grid-wrap { transform: translateY(12px); }
[data-anim="scale"] .rpf-f-stage.is-leaving .rpf-f-grid-wrap { transform: scale(0.97); }

.rpf-f-stage.is-loading::after {
	content: "";
	position: absolute;
	top: 48px;
	left: 50%;
	width: 32px;
	height: 32px;
	margin-left: -16px;
	border: 3px solid var(--rpf-f-primary-light, #e6f2f1);
	border-top-color: var(--rpf-f-primary, #3e9597);
	border-radius: 50%;
	animation: rpf-f-spin 0.7s linear infinite;
}

.rpf-f-grid {
	display: grid;
	grid-template-columns: repeat(var(--rpf-f-cols), minmax(0, 1fr));
	gap: var(--rpf-f-gap);
}

.rpf-f-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: var(--rpf-f-radius);
	background: var(--rpf-f-bg);
	color: var(--rpf-f-text);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
	/* backwards (نه both): بعد از پایان انیمیشن ورود، transform آزاد می‌شود تا افکت Hover کار کند */
	animation: rpf-f-in-fade 0.5s ease backwards;
	animation-delay: calc(var(--rpf-f-i, 0) * 45ms);
}

[data-anim="slide"] .rpf-f-card { animation-name: rpf-f-in-slide; }
[data-anim="scale"] .rpf-f-card { animation-name: rpf-f-in-scale; }

[data-border="1"] .rpf-f-card { border-color: var(--rpf-f-line); }
[data-shadow="sm"] .rpf-f-card { box-shadow: var(--rpf-f-shadow-sm); }
[data-shadow="md"] .rpf-f-card { box-shadow: var(--rpf-f-shadow-md); }
[data-shadow="lg"] .rpf-f-card { box-shadow: var(--rpf-f-shadow-lg); }

[data-hover="lift"] .rpf-f-card:hover,
[data-hover="lift-zoom"] .rpf-f-card:hover { transform: translateY(-6px); box-shadow: var(--rpf-f-shadow-lg); }
[data-hover="lift"][data-border="1"] .rpf-f-card:hover,
[data-hover="lift-zoom"][data-border="1"] .rpf-f-card:hover,
[data-hover="overlay"][data-border="1"] .rpf-f-card:hover { border-color: color-mix(in srgb, var(--rpf-f-accent) 45%, var(--rpf-f-line)); }

.rpf-f-card-link { position: absolute; inset: 0; z-index: 5; border-radius: inherit; }
.rpf-f-card-link:focus-visible { outline: 2px solid var(--rpf-f-accent); outline-offset: -2px; }

.rpf-f-card-media { position: relative; overflow: hidden; }

.rpf-f-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }

[data-hover="zoom"] .rpf-f-card:hover .rpf-f-normal-media img,
[data-hover="zoom"] .rpf-f-card:hover .rpf-f-content-media img,
[data-hover="zoom"] .rpf-f-card:hover .rpf-f-hub-media img,
[data-hover="lift-zoom"] .rpf-f-card:hover .rpf-f-normal-media img,
[data-hover="lift-zoom"] .rpf-f-card:hover .rpf-f-content-media img,
[data-hover="lift-zoom"] .rpf-f-card:hover .rpf-f-hub-media img { transform: scale(1.07); }

/* افکت «پوشش رنگی»: لایه رنگ تأکیدی با آیکن فلش روی تصویر هنگام Hover */
[data-hover="overlay"] .rpf-f-card-media::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
	background: var(--rpf-f-accent);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
[data-hover="overlay"] .rpf-f-card:hover .rpf-f-card-media::after { opacity: 0.78; }
[data-hover="overlay"] .rpf-f-card-media::before {
	content: "\2190";
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	border-radius: 50%;
	background: var(--rpf-f-on-accent, #ffffff);
	color: var(--rpf-f-accent);
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}
[data-hover="overlay"] .rpf-f-card:hover .rpf-f-card-media::before { opacity: 1; transform: scale(1); }
[data-hover="overlay"][data-style="content"] .rpf-f-card-media::before,
[data-hover="overlay"][data-style="seo"] .rpf-f-card-media::before,
[data-hover="overlay"][data-style="seo"] .rpf-f-card-media::after { display: none; }

.rpf-f-card-body { padding: 16px 20px 20px; }

.rpf-f-card-title { margin: 0; font-size: var(--rpf-f-fs-title, 17px); line-height: 1.7; font-weight: var(--rpf-f-title-weight, 800); color: var(--rpf-f-title, inherit); transition: color 0.25s ease; }

/* Hover عنوان: رنگ تنظیم‌شده برای عنوان در Hover (پیش‌فرض: رنگ تأکیدی) وقتی عنوان روی سطح کارت است */
[data-hover]:not([data-hover="none"]) .rpf-f-card-normal:hover .rpf-f-card-title,
[data-hover]:not([data-hover="none"]) .rpf-f-card-hub:hover .rpf-f-card-title,
[data-hover]:not([data-hover="none"]) .rpf-f-card-seo:hover .rpf-f-card-title { color: var(--rpf-f-hover-title, var(--rpf-f-accent)); }
[data-style="hub"][data-layout="b"] .rpf-f-card-hub:hover .rpf-f-card-title,
[data-style="hub"][data-layout="d"] .rpf-f-card-hub:hover .rpf-f-card-title { color: #ffffff; }

.rpf-f-card-excerpt {
	margin: 8px 0 0;
	font-size: var(--rpf-f-fs-text, 14px);
	line-height: 1.9;
	color: var(--rpf-f-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

[data-show-excerpt="0"] .rpf-f-card-excerpt { display: none; }

.rpf-f-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 120px;
	background: var(--rpf-f-tile);
	color: var(--rpf-f-muted);
	font-size: 13px;
}

.rpf-f-arrow { display: none; }

/* ===================== لیست نمونه‌کارها (/portfolio) ===================== */

.rpf-f-hub-media { aspect-ratio: var(--rpf-f-ratio); }
[data-style="hub"][data-align="center"] .rpf-f-card-body { text-align: center; }
[data-show-tags="0"] .rpf-f-card-hub .rpf-f-tags { display: none; }

/* مدل B: نام روی تصویر */
[data-style="hub"][data-layout="b"] .rpf-f-card-hub .rpf-f-card-body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	padding: 48px 16px 16px;
	background: linear-gradient(to top, rgba(0, 20, 20, 0.78), rgba(0, 20, 20, 0));
	color: #ffffff;
	pointer-events: none;
}
[data-style="hub"][data-layout="b"] .rpf-f-card-hub .rpf-f-card-title { color: #ffffff; }

/* مدل C: ردیف فشرده (تصویر کوچک + نام + فلش) */
[data-style="hub"][data-layout="c"] .rpf-f-card-hub { flex-direction: row; align-items: center; }
[data-style="hub"][data-layout="c"] .rpf-f-hub-media { width: 88px; flex-shrink: 0; aspect-ratio: 1 / 1; margin: 12px; border-radius: var(--rpf-f-inner-radius); }
[data-style="hub"][data-layout="c"] .rpf-f-card-body { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 8px 12px 20px; text-align: right; }
[data-style="hub"][data-layout="c"] .rpf-f-arrow { display: block; width: 10px; height: 10px; border-bottom: 2px solid var(--rpf-f-accent); border-left: 2px solid var(--rpf-f-accent); transform: rotate(45deg); flex-shrink: 0; }
[data-style="hub"][data-layout="c"] .rpf-f-tags-float { display: none; }

/* مدل D: نام هنگام Hover */
[data-style="hub"][data-layout="d"] .rpf-f-card-hub .rpf-f-card-body {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 20, 20, 0.58);
	color: #ffffff;
	text-align: center;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
[data-style="hub"][data-layout="d"] .rpf-f-card-hub:hover .rpf-f-card-body { opacity: 1; }
[data-style="hub"][data-layout="d"] .rpf-f-card-hub .rpf-f-card-title { color: #ffffff; }
[data-style="hub"][data-layout="d"] .rpf-f-tags-inline { display: none; }

/* ===================== سبک ۱: طراحی سایت ===================== */

.rpf-f-card-site { container-type: inline-size; }

.rpf-f-site-stage { background: var(--rpf-f-backdrop); padding: 24px 24px 32px; }

.rpf-f-devices { position: relative; padding-bottom: 8px; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

.rpf-f-mac { width: 84%; margin: 0 auto; }
[data-scale="sm"] .rpf-f-mac { width: 68%; }
[data-scale="lg"] .rpf-f-mac { width: 96%; }

/* قاب لپ‌تاپ: ضخامت و رنگ از تنظیمات «طراحی سایت ← دستگاه‌ها» (حالت روشن: سفید/طوسی مک‌بوک) */
.rpf-f-mac-screen {
	padding: var(--rpf-f-mac-bezel, 1.5%) var(--rpf-f-mac-bezel, 1.5%) calc(var(--rpf-f-mac-bezel, 1.5%) * 1.15);
	background: var(--rpf-f-mac-frame, #14181a);
	border-radius: 12px 12px 4px 4px;
	box-shadow: inset 0 0 0 1px #3a4144;
}

.rpf-f-mac-display { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: #ffffff; outline: 1px solid rgba(0, 0, 0, 0.3); }

.rpf-f-mac-display::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	left: 50%;
	width: 16%;
	height: 4%;
	transform: translateX(-50%);
	background: var(--rpf-f-mac-frame, #14181a);
	border-radius: 0 0 6px 6px;
}

.rpf-f-mac-base { position: relative; width: 108%; height: 10px; margin: 0 0 0 -4%; background: var(--rpf-f-mac-base, #4a5154); border-radius: 0 0 14px 14px; }
.rpf-f-mac-base::after { content: ""; position: absolute; top: 0; left: 50%; width: 16%; height: 4px; transform: translateX(-50%); background: rgba(0, 0, 0, 0.22); border-radius: 0 0 6px 6px; }

@supports (color: color-mix(in srgb, red 10%, white)) {
	.rpf-f-mac-screen { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rpf-f-mac-frame, #14181a) 78%, #7b8387), 0 0 0 1px color-mix(in srgb, var(--rpf-f-mac-frame, #14181a) 88%, #000); }
	.rpf-f-mac-base { background: linear-gradient(color-mix(in srgb, var(--rpf-f-mac-base, #4a5154) 78%, #ffffff), var(--rpf-f-mac-base, #4a5154)); }
}

.rpf-f-mac-display img,
.rpf-f-phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: object-position var(--rpf-f-scroll) linear; }

.rpf-f-card-site:hover .rpf-f-mac-display img,
.rpf-f-card-site:hover .rpf-f-phone-screen img { object-position: bottom; }

[data-hover="zoom"] .rpf-f-card-site:hover .rpf-f-devices { transform: scale(1.03); }

/* آیفون ۱۸ پرو مکس: ضخامت قاب (پیش‌فرض ۲ پیکسل) و رنگ از تنظیمات */
.rpf-f-phone {
	position: absolute;
	bottom: 0;
	left: 4%;
	width: 21%;
	padding: var(--rpf-f-phone-bezel, 2px);
	background: var(--rpf-f-phone-frame, #14181a);
	border-radius: 18% / 8.5%;
	box-shadow: 0 8px 20px rgba(16, 24, 24, 0.22);
}

@supports (color: color-mix(in srgb, red 10%, white)) {
	.rpf-f-phone { box-shadow: 0 8px 20px rgba(16, 24, 24, 0.22), inset 0 0 0 1px color-mix(in srgb, var(--rpf-f-phone-frame, #14181a) 70%, #6b7276), 0 0 0 1px color-mix(in srgb, var(--rpf-f-phone-frame, #14181a) 85%, #000); }
	.rpf-f-phone::after { background: color-mix(in srgb, var(--rpf-f-phone-frame, #14181a) 55%, #8a9195) !important; }
}

[data-scale="sm"] .rpf-f-phone { width: 17%; }
[data-scale="lg"] .rpf-f-phone { width: 24%; }
[data-mobile-pos="right"] .rpf-f-phone { left: auto; right: 4%; }
[data-mobile-pos="none"] .rpf-f-phone { display: none; }

.rpf-f-phone::after { content: ""; position: absolute; top: 22%; right: -2px; width: 2px; height: 14%; background: #4a5154; border-radius: 2px; }
[data-mobile-pos="right"] .rpf-f-phone::after { right: auto; left: -2px; }

.rpf-f-phone-screen { position: relative; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 16% / 7.6%; background: #ffffff; }

.rpf-f-phone-screen::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 2.4%;
	left: 50%;
	width: 32%;
	height: 3%;
	transform: translateX(-50%);
	background: #000;
	border-radius: 999px;
}

/* اطلاعات کارت سایت */
.rpf-f-site-head { display: flex; flex-direction: column; gap: 4px; }
.rpf-f-site-project { margin: 0; font-size: calc(var(--rpf-f-fs-text, 14px) * 0.92); line-height: 1.7; color: var(--rpf-f-muted); }
.rpf-f-site-more { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 12px; }
.rpf-f-site-info { margin: 0; font-size: var(--rpf-f-fs-text, 14px); line-height: 1.9; color: var(--rpf-f-text); opacity: 0.86; }

.rpf-f-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.rpf-f-chip {
	padding: 4px 12px;
	border-radius: var(--rpf-f-inner-radius);
	background: var(--rpf-f-chip-bg);
	color: var(--rpf-f-chip-ink);
	font-size: calc(var(--rpf-f-fs-text, 14px) * 0.86);
	line-height: 1.7;
	font-weight: 700;
}

.rpf-f-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: var(--rpf-f-inner-radius);
	background: var(--rpf-f-accent);
	color: var(--rpf-f-on-accent, #fff);
	font-size: calc(var(--rpf-f-fs-text, 14px) * 0.93);
	font-weight: 700;
	transition: gap 0.25s ease;
}

.rpf-f-cta::after { content: "\2190"; }
.rpf-f-card-site:hover .rpf-f-cta { gap: 12px; }

[data-style="site"][data-align="center"] .rpf-f-card-body { text-align: center; }
[data-style="site"][data-align="center"] .rpf-f-site-more { align-items: center; }
[data-style="site"][data-align="center"] .rpf-f-chips { justify-content: center; }

[data-style="site"][data-show-title="0"] .rpf-f-card-site .rpf-f-card-title,
[data-style="site"][data-show-project="0"] .rpf-f-site-project,
[data-style="site"][data-show-info="0"] .rpf-f-site-info,
[data-style="site"][data-show-chips="0"] .rpf-f-chips,
[data-style="site"][data-show-cta="0"] .rpf-f-cta { display: none; }

/* مدل B: عنوان روی تصویر؛ جزئیات هنگام Hover */
[data-style="site"][data-layout="b"] .rpf-f-card-site .rpf-f-site-stage { padding-bottom: 72px; }
[data-style="site"][data-layout="b"] .rpf-f-card-site .rpf-f-card-body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	padding: 40px 20px 16px;
	background: linear-gradient(to top, rgba(0, 20, 20, 0.86), rgba(0, 20, 20, 0));
	color: #ffffff;
	pointer-events: none;
}
[data-style="site"][data-layout="b"] .rpf-f-card-site .rpf-f-card-title { color: #ffffff; }
[data-style="site"][data-layout="b"] .rpf-f-card-site .rpf-f-site-project { color: rgba(255, 255, 255, 0.82); }
[data-style="site"][data-layout="b"] .rpf-f-card-site .rpf-f-site-info { color: #ffffff; }
[data-style="site"][data-layout="b"] .rpf-f-card-site .rpf-f-chip { background: rgba(255, 255, 255, 0.18); color: #ffffff; }
[data-style="site"][data-layout="b"] .rpf-f-site-more { max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; transition: max-height 0.45s ease, opacity 0.3s ease, margin 0.3s ease; }
[data-style="site"][data-layout="b"] .rpf-f-card-site:hover .rpf-f-site-more { max-height: 240px; margin-top: 12px; opacity: 1; }

/* مدل C: دو ستونه (دستگاه‌ها + اطلاعات) */
[data-style="site"][data-layout="c"] .rpf-f-card-site { flex-direction: row; }
[data-style="site"][data-layout="c"] .rpf-f-card-site .rpf-f-site-stage { flex: 1.3; min-width: 0; }
[data-style="site"][data-layout="c"] .rpf-f-card-site .rpf-f-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 20px; }

@container (max-width: 560px) {
	[data-style="site"][data-layout="c"] .rpf-f-card-site { flex-direction: column; }
}

/* مدل D: عنوان بالا، جزئیات با پنل شیشه‌ای هنگام Hover */
[data-style="site"][data-layout="d"] .rpf-f-card-site .rpf-f-card-body { order: -1; text-align: center; padding-bottom: 16px; }
[data-style="site"][data-layout="d"] .rpf-f-card-site .rpf-f-site-more {
	position: absolute;
	z-index: 3;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 20px;
	align-items: center;
	background: color-mix(in srgb, var(--rpf-f-bg) 94%, transparent);
	backdrop-filter: blur(8px);
	transform: translateY(101%);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}
[data-style="site"][data-layout="d"] .rpf-f-card-site:hover .rpf-f-site-more { transform: none; }
[data-style="site"][data-layout="d"] .rpf-f-chips { justify-content: center; }
[data-style="site"][data-layout="d"] .rpf-f-site-info { text-align: center; }

@media (hover: none) {
	[data-style="site"][data-layout="b"] .rpf-f-site-more { max-height: 240px; margin-top: 12px; opacity: 1; }
	[data-style="site"][data-layout="d"] .rpf-f-card-site .rpf-f-site-more { position: static; transform: none; padding: 0 20px 20px; backdrop-filter: none; background: transparent; }
}

/* ===================== سبک ۲: سئو (کارت عریض) ===================== */

[data-style="seo"] { container-type: inline-size; }

.rpf-f-card-seo { flex-direction: row; }
[data-chart-pos="left"] .rpf-f-card-seo { flex-direction: row-reverse; }

/* ستون نمودار: عرض قابل تنظیم (۳۰ تا ۷۰ درصد) */
.rpf-f-seo-chartcol {
	flex: 0 0 var(--rpf-f-seo-chart-w);
	min-width: 30%;
	max-width: 70%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	background: var(--rpf-f-tile);
}

.rpf-f-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.rpf-f-chart-name { font-size: 13px; font-weight: 700; color: var(--rpf-f-muted); }
.rpf-f-chart-now { font-size: calc(var(--rpf-f-fs-stat, 20px) * 1.2); line-height: 1.3; font-weight: 800; color: var(--rpf-f-title, var(--rpf-f-text)); }
[data-show-chart-head="0"] .rpf-f-chart-head { display: none; }

/* نمودار تعاملی */
.rpf-f-ichart { direction: ltr; flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.rpf-f-ichart-body { display: flex; gap: 8px; flex: 1; }

.rpf-f-ichart-y {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 36px;
	flex-shrink: 0;
	font-size: 11px;
	line-height: 1;
	color: var(--rpf-f-muted);
	text-align: right;
}

.rpf-f-ichart-plot { position: relative; z-index: 6; flex: 1; height: var(--rpf-f-seo-chart-h); touch-action: pan-y; cursor: crosshair; }

.rpf-f-chart { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
[data-chart="area"] .rpf-f-chart-area-wrap,
[data-chart="line"] .rpf-f-chart-line-wrap,
[data-chart="bar"] .rpf-f-chart-bar-wrap { display: block; }

.rpf-f-chart-grid { stroke: var(--rpf-f-line); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.rpf-f-chart-line { fill: none; stroke: var(--rpf-f-chart); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rpf-f-chart-area { fill: var(--rpf-f-chart); fill-opacity: 0.18; stroke: none; }
.rpf-f-chart-bar { fill: var(--rpf-f-chart); fill-opacity: 0.8; transition: fill-opacity 0.2s ease; }

[data-show-grid="0"] .rpf-f-chart-grid { display: none; }
[data-show-axis="0"] .rpf-f-ichart-y,
[data-show-axis="0"] .rpf-f-ichart-x,
[data-show-axis-x="0"] .rpf-f-ichart-x { display: none; }

.rpf-f-pt {
	position: absolute;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border: 2px solid var(--rpf-f-chart);
	border-radius: 50%;
	background: var(--rpf-f-bg);
	transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
	pointer-events: none;
}

.rpf-f-pt.is-active { transform: scale(1.5); background: var(--rpf-f-chart); }
[data-show-points="0"] .rpf-f-pt:not(.is-active),
[data-chart="bar"] .rpf-f-pt:not(.is-active) { opacity: 0; }

.rpf-f-marker { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rpf-f-chart); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.rpf-f-ichart.is-hover .rpf-f-marker { opacity: 0.45; }

.rpf-f-tip {
	position: absolute;
	z-index: 6;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 12px;
	border-radius: var(--rpf-f-inner-radius);
	background: #14181a;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 12px;
	line-height: 1.5;
	white-space: nowrap;
	text-align: center;
	opacity: 0;
	transform: translate(-50%, -125%);
	transition: opacity 0.15s ease;
	pointer-events: none;
	box-shadow: var(--rpf-f-shadow-lg);
}

.rpf-f-tip.is-start { transform: translate(-12px, -125%); }
.rpf-f-tip.is-end { transform: translate(calc(-100% + 12px), -125%); }
.rpf-f-tip b { font-weight: 700; opacity: 0.8; }
.rpf-f-tip span { font-size: 16px; font-weight: 800; }
.rpf-f-ichart.is-hover .rpf-f-tip { opacity: 1; }

[data-tip="accent"] .rpf-f-tip { background: var(--rpf-f-chart); color: #ffffff; }
[data-tip="light"] .rpf-f-tip { background: var(--rpf-f-bg); color: var(--rpf-f-text); border: 1px solid var(--rpf-f-line); }

.rpf-f-ichart-x { position: relative; height: 16px; margin-left: 44px; font-size: 11px; color: var(--rpf-f-muted); }
.rpf-f-ichart-x span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; direction: rtl; }
.rpf-f-ichart-x span:first-child { transform: none; }
.rpf-f-ichart-x span:last-child { transform: translateX(-100%); }

.rpf-f-chart-empty { display: flex; align-items: center; justify-content: center; min-height: 120px; border-radius: var(--rpf-f-inner-radius); background: var(--rpf-f-tile); color: var(--rpf-f-muted); font-size: 13px; }

/* ستون اطلاعات (سمت دیگر نمودار) */
.rpf-f-seo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 24px; font-size: var(--rpf-f-fs-text, 14px); }

.rpf-f-seo-heading { order: 0; }

.rpf-f-seo-block.is-stats { order: var(--rpf-f-ord-stats, 1); }
.rpf-f-seo-block.is-keywords { order: var(--rpf-f-ord-keywords, 2); }
.rpf-f-seo-block.is-period { order: var(--rpf-f-ord-period, 3); }
.rpf-f-seo-block.is-chips { order: var(--rpf-f-ord-chips, 4); }
.rpf-f-seo-block.is-desc { order: var(--rpf-f-ord-desc, 5); }

[data-show-stats="0"] .rpf-f-seo-block.is-stats,
[data-show-keywords="0"] .rpf-f-seo-block.is-keywords,
[data-show-period="0"] .rpf-f-seo-block.is-period,
[data-show-chips="0"] .rpf-f-seo-block.is-chips,
[data-show-desc="0"] .rpf-f-seo-block.is-desc { display: none; }

.rpf-f-seo-label { margin: 0 0 8px; font-size: 0.86em; font-weight: 700; color: var(--rpf-f-muted); }

.rpf-f-seo-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.rpf-f-seo-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: var(--rpf-f-inner-radius); background: var(--rpf-f-tile); }
.rpf-f-seo-stat strong { font-size: var(--rpf-f-fs-stat, 20px); line-height: 1.4; font-weight: 800; color: var(--rpf-f-title, var(--rpf-f-text)); }
.rpf-f-seo-stat span { font-size: 0.86em; line-height: 1.6; color: var(--rpf-f-muted); }

.rpf-f-seo-change { align-self: flex-start; padding: 0 8px; border-radius: 999px; background: var(--rpf-f-line-soft); color: var(--rpf-f-muted); font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }
.rpf-f-seo-change.is-up { background: var(--rpf-f-up-bg); color: var(--rpf-f-up-ink); }
.rpf-f-seo-change.is-down { background: var(--rpf-f-down-bg); color: var(--rpf-f-down-ink); }

.rpf-f-seo-kw { margin: 0; padding: 0; list-style: none; }
.rpf-f-seo-kw li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rpf-f-line-soft); }
.rpf-f-seo-kw li:first-child { border-top: 0; }
.rpf-f-kw-name { font-weight: 600; }
.rpf-f-kw-rank { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92em; }
.rpf-f-kw-rank s { color: var(--rpf-f-muted); }
.rpf-f-kw-rank b { color: var(--rpf-f-accent); font-weight: 800; font-size: 1.15em; }
.rpf-f-kw-rank i { color: var(--rpf-f-muted); font-style: normal; }

.rpf-f-period { display: flex; align-items: center; gap: 12px; }
.rpf-f-period span { display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.rpf-f-period small { font-size: 0.8em; font-weight: 400; color: var(--rpf-f-muted); }
.rpf-f-period i { position: relative; flex: 1; min-width: 24px; height: 2px; background: var(--rpf-f-line); border-radius: 2px; }
.rpf-f-period i::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-bottom: 2px solid var(--rpf-f-line); border-left: 2px solid var(--rpf-f-line); transform: rotate(45deg); }

.rpf-f-chip-seo { background: var(--rpf-f-chip-bg); color: var(--rpf-f-chip-ink); }
@supports (background: color-mix(in srgb, red 10%, white)) {
	.rpf-f-chip-seo {
		background: color-mix(in srgb, var(--rpf-f-seo-chip, var(--rpf-f-primary, #3e9597)) 16%, var(--rpf-f-bg));
		color: color-mix(in srgb, var(--rpf-f-seo-chip, var(--rpf-f-primary, #3e9597)) 78%, var(--rpf-f-text));
	}
}

.rpf-f-seo-desc { margin: 0; line-height: 2; color: var(--rpf-f-muted); }

/* مدل B: نمودار بالا (تمام‌عرض)، اطلاعات پایین */
[data-style="seo"][data-layout="b"] .rpf-f-card-seo { flex-direction: column; }
[data-style="seo"][data-layout="b"] .rpf-f-seo-chartcol { flex: 0 0 auto; width: 100%; max-width: none; }

@container (max-width: 480px) {
	[data-style="seo"] .rpf-f-card-seo { flex-direction: column; }
	[data-style="seo"] .rpf-f-seo-chartcol { flex: 0 0 auto; width: 100%; max-width: none; }
}

/* جای تگ شناور داخل ستون نمودار: بالا یا پایین، بدون هم‌پوشانی با سرتیتر/برچسب‌ها */
[data-tag-pos^="top"] .rpf-f-seo-chartcol { padding-top: 56px; }
[data-tag-pos^="bottom"] .rpf-f-seo-chartcol { padding-bottom: 56px; }

/* ===================== سبک ۳: تولید محتوا ===================== */

.rpf-f-card-content { background: #14181a; }
.rpf-f-content-media { aspect-ratio: 1 / 1; }
.rpf-f-card-content[data-size="2x1"] .rpf-f-content-media { aspect-ratio: 16 / 10; }
.rpf-f-card-content[data-size="1x2"] .rpf-f-content-media { aspect-ratio: 5 / 8; }
.rpf-f-card-content[data-size="2x2"] .rpf-f-content-media { aspect-ratio: 1 / 1.2; }
.rpf-f-content-media img { position: absolute; inset: 0; }

/* بدنه به‌صورت لایه روی تصویر (مدل A، B، D) */
.rpf-f-card-content .rpf-f-card-body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	padding: 48px 16px 16px;
	background: linear-gradient(to top, rgba(0, 0, 0, var(--rpf-f-overlay)), rgba(0, 0, 0, 0));
	color: #ffffff;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.rpf-f-card-content .rpf-f-card-title { color: #ffffff; }
.rpf-f-biz { display: block; margin-top: 4px; font-size: calc(var(--rpf-f-fs-text, 14px) * 0.86); line-height: 1.6; opacity: 0.82; }

[data-show-title="0"] .rpf-f-card-content .rpf-f-card-title,
[data-show-business="0"] .rpf-f-biz { display: none; }
[data-style="content"][data-show-title="0"] .rpf-f-card-content .rpf-f-card-body { display: none; }

/* مدل B: عنوان هنگام Hover */
[data-style="content"][data-layout="b"] .rpf-f-card-content .rpf-f-card-body { opacity: 0; transform: translateY(8px); }
[data-style="content"][data-layout="b"] .rpf-f-card-content:hover .rpf-f-card-body { opacity: 1; transform: none; }

/* مدل C: کپشن زیر تصویر روی خود کارت */
[data-style="content"][data-layout="c"] .rpf-f-card-content { background: var(--rpf-f-bg); }
[data-style="content"][data-layout="c"] .rpf-f-card-content .rpf-f-card-body { position: static; padding: 12px 16px 16px; background: transparent; color: var(--rpf-f-text); }
[data-style="content"][data-layout="c"] .rpf-f-card-content .rpf-f-card-title { color: var(--rpf-f-title, var(--rpf-f-text)); }
[data-style="content"][data-layout="c"] .rpf-f-biz { color: var(--rpf-f-muted); opacity: 1; }
[data-style="content"][data-layout="c"][data-show-title="0"] .rpf-f-card-content .rpf-f-card-body { display: none; }

/* مدل D: فقط تصویر/ویدیو (بدون متن روی کارت) */
[data-style="content"][data-layout="d"] .rpf-f-card-content .rpf-f-card-body { display: none; }

/* دکمه پخش */
.rpf-f-play {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	border-radius: 50%;
	background: var(--rpf-f-accent);
	box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.28);
	color: var(--rpf-f-on-accent, #ffffff);
	transition: transform 0.3s ease;
}

.rpf-f-play b { display: none; font-size: 13px; font-weight: 700; }

.rpf-f-play::before {
	content: "";
	margin-left: 4px;
	border-style: solid;
	border-width: 10px 0 10px 17px;
	border-color: transparent transparent transparent var(--rpf-f-on-accent, #ffffff);
}

.rpf-f-card-content:hover .rpf-f-play { transform: scale(1.12); }

[data-play="pill"] .rpf-f-play { width: auto; height: auto; margin: 0; padding: 8px 20px; border-radius: 999px; box-shadow: none; transform: translate(-50%, -50%); }
[data-play="pill"] .rpf-f-play::before { margin: 0; border-width: 6px 0 6px 10px; }
[data-play="pill"] .rpf-f-play b { display: inline; }
[data-play="pill"] .rpf-f-card-content:hover .rpf-f-play { transform: translate(-50%, -50%) scale(1.08); }
[data-play="none"] .rpf-f-play { display: none; }

/* ماسونری */
[data-style="content"][data-mode="masonry"] .rpf-f-grid { display: block; column-count: var(--rpf-f-cols); column-gap: var(--rpf-f-gap); }
[data-style="content"][data-mode="masonry"] .rpf-f-card { display: block; margin-bottom: var(--rpf-f-gap); break-inside: avoid; }

/* کاشی منظم */
[data-style="content"][data-mode="tile"] { container-type: inline-size; }

[data-style="content"][data-mode="tile"] .rpf-f-grid {
	grid-auto-flow: dense;
	grid-auto-rows: calc((100cqw - (var(--rpf-f-cols) - 1) * var(--rpf-f-gap)) / var(--rpf-f-cols));
}

[data-style="content"][data-mode="tile"] .rpf-f-content-media { flex: 1; min-height: 0; aspect-ratio: auto; }
[data-style="content"][data-mode="tile"] .rpf-f-card-content[data-size="2x1"] { grid-column: span 2; }
[data-style="content"][data-mode="tile"] .rpf-f-card-content[data-size="1x2"] { grid-row: span 2; }
[data-style="content"][data-mode="tile"] .rpf-f-card-content[data-size="2x2"] { grid-column: span 2; grid-row: span 2; }

/* ===================== سبک ۴: عادی ===================== */

.rpf-f-normal-media { aspect-ratio: var(--rpf-f-ratio); }

[data-style="normal"][data-layout="b"] .rpf-f-card-normal { background: transparent; border-color: transparent; box-shadow: none; overflow: visible; }
[data-style="normal"][data-layout="b"] .rpf-f-card-normal:hover { box-shadow: none; border-color: transparent; }
[data-style="normal"][data-layout="b"] .rpf-f-card-normal .rpf-f-normal-media { transition: box-shadow 0.35s ease; }
[data-style="normal"][data-layout="b"][data-hover="lift"] .rpf-f-card-normal:hover .rpf-f-normal-media,
[data-style="normal"][data-layout="b"][data-hover="lift-zoom"] .rpf-f-card-normal:hover .rpf-f-normal-media { box-shadow: var(--rpf-f-shadow-lg); }

/* انیمیشن Hover کارت عادی: نوار رنگی زیر کارت، فلش «مشاهده نمونه‌کار» و تغییر رنگ عنوان */
.rpf-f-card-normal::after {
	content: "";
	position: absolute;
	z-index: 4;
	right: 0;
	bottom: 0;
	width: 0;
	height: 3px;
	background: var(--rpf-f-accent);
	transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}
.rpf-f-card-normal:hover::after { width: 100%; }
[data-hover="none"] .rpf-f-card-normal::after { display: none; }
[data-style="normal"][data-layout="b"] .rpf-f-card-normal::after { display: none; }

.rpf-f-more-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	color: var(--rpf-f-accent);
	font-size: calc(var(--rpf-f-fs-text, 14px) * 0.93);
	font-weight: 700;
	transition: gap 0.3s ease;
}
.rpf-f-more-link::after { content: "\2190"; display: inline-block; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.rpf-f-card-normal:hover .rpf-f-more-link { gap: 14px; }
.rpf-f-card-normal:hover .rpf-f-more-link::after { transform: translateX(-4px); }
[data-show-more="0"] .rpf-f-more-link { display: none; }
[data-style="normal"][data-layout="b"] .rpf-f-card-normal .rpf-f-normal-media { border-radius: var(--rpf-f-radius); }
[data-style="normal"][data-layout="b"] .rpf-f-card-normal .rpf-f-card-body { padding: 16px 4px 4px; }

/* ===================== پاپ‌آپ تولید محتوا ===================== */

.rpf-f-modal {
	position: fixed;
	z-index: 999999;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(8, 14, 14, var(--rpf-f-popup-dim));
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	will-change: opacity;
}

.rpf-f-modal.is-open { opacity: 1; visibility: visible; }

/* ۹۰٪ عرض و ارتفاع مانیتور؛ ۹۵٪ در موبایل */
.rpf-f-modal-dialog {
	display: flex;
	flex-direction: row;
	width: 90vw;
	height: 90vh;
	overflow: hidden;
	border-radius: var(--rpf-f-popup-radius);
	background: var(--rpf-f-popup-bg, var(--rpf-f-bg));
	color: var(--rpf-f-popup-text, var(--rpf-f-text));
	font-family: inherit;
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

[data-popup-anim="zoom"] .rpf-f-modal-dialog { transform: scale(0.94); }
[data-popup-anim="slide"] .rpf-f-modal-dialog { transform: translateY(32px); }
.rpf-f-modal.is-open .rpf-f-modal-dialog { transform: none; }

.rpf-f-modal-media {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}

.rpf-f-modal-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.rpf-f-modal-media iframe,
.rpf-f-modal-media video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }

.rpf-f-modal-info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 360px;
	flex-shrink: 0;
	padding: 24px;
	overflow-y: auto;
	background: var(--rpf-f-popup-bg, var(--rpf-f-bg));
}

.rpf-f-modal-info .rpf-f-tags-inline { display: flex; margin: 0; }
.rpf-f-modal-title { margin: 0; font-size: var(--rpf-f-popup-fs-title, 20px); line-height: 1.6; font-weight: 800; color: var(--rpf-f-popup-title, var(--rpf-f-title, var(--rpf-f-text))); }
.rpf-f-modal-biz { font-size: 13px; color: var(--rpf-f-muted); }
.rpf-f-modal-biz:empty { display: none; }
.rpf-f-modal-desc { margin: 0; font-size: var(--rpf-f-popup-fs-desc, 15px); line-height: 2; color: var(--rpf-f-popup-text, var(--rpf-f-muted)); }
.rpf-f-modal-desc:empty { display: none; }
.rpf-f-modal-btn { margin-top: auto; }

[data-popup-desc="0"] .rpf-f-modal-desc,
[data-popup-tags="0"] .rpf-f-modal-info .rpf-f-tags { display: none; }

[data-popup-layout="bottom"] .rpf-f-modal-dialog { flex-direction: column; }
[data-popup-layout="bottom"] .rpf-f-modal-info { width: auto; max-height: 38%; flex-shrink: 0; }
[data-popup-layout="bottom"] .rpf-f-modal-btn { margin-top: 0; align-self: flex-start; }

/* اطلاعات روی محتوا (بالای تصویر/ویدیو) */
[data-popup-layout="overlay"] .rpf-f-modal-dialog { position: relative; }
[data-popup-layout="overlay"] .rpf-f-modal-media { position: absolute; inset: 0; }
[data-popup-layout="overlay"] .rpf-f-modal-info {
	position: absolute;
	z-index: 4;
	top: 0;
	right: 0;
	left: 0;
	width: auto;
	max-height: 40%;
	padding: 20px 72px 48px 72px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
	pointer-events: none;
}
[data-popup-layout="overlay"] .rpf-f-modal-title,
[data-popup-layout="overlay"] .rpf-f-modal-biz,
[data-popup-layout="overlay"] .rpf-f-modal-desc { color: #ffffff; }
[data-popup-layout="overlay"] .rpf-f-modal-btn { pointer-events: auto; margin-top: 0; align-self: flex-start; }

/* عمودی (ریلز / استوری): ویدیو ۹:۱۶ و اطلاعات کنار آن */
[data-popup-layout="reels"] .rpf-f-modal-dialog { width: auto; max-width: 95vw; height: 94vh; }
[data-popup-layout="reels"] .rpf-f-modal-media { flex: none; height: 100%; aspect-ratio: 9 / 16; }

/* سینمایی: فقط محتوا، تمام‌صفحه */
[data-popup-layout="cinema"] .rpf-f-modal { background: #000; }
[data-popup-layout="cinema"] .rpf-f-modal-dialog { width: 100vw; height: 100vh; border-radius: 0; background: #000; }
[data-popup-layout="cinema"] .rpf-f-modal-info { display: none; }
.rpf-f-modal[data-popup-layout="cinema"] { background: #000; }

.rpf-f-modal-close {
	position: absolute;
	z-index: 5;
	top: 12px;
	left: 12px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.rpf-f-modal-close:hover { background: rgba(255, 255, 255, 0.32); }

.rpf-f-modal-nav {
	position: absolute;
	z-index: 5;
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	cursor: pointer;
	transition: background 0.2s ease;
}

.rpf-f-modal-nav:hover { background: rgba(255, 255, 255, 0.32); }
.rpf-f-modal-nav::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; }
.rpf-f-modal-nav.is-prev { right: 12px; }
.rpf-f-modal-nav.is-prev::before { margin: -5px 0 0 -8px; transform: rotate(45deg); }
.rpf-f-modal-nav.is-next { left: 12px; }
.rpf-f-modal-nav.is-next::before { margin: -5px 0 0 -2px; transform: rotate(-135deg); }
[data-popup-nav="0"] .rpf-f-modal-nav { display: none; }

/* پیش‌نمایش ثابت پاپ‌آپ در صفحه تنظیمات */
.rpf-f-modal.is-static {
	position: relative;
	z-index: auto; /* پیش‌نمایش داخل پنل نباید روی نوار تب‌ها و منوهای وردپرس بیاید */
	inset: auto;
	display: block;
	padding: 12px;
	border-radius: 10px;
	opacity: 1;
	visibility: visible;
}

.rpf-f-modal.is-static .rpf-f-modal-dialog { width: 100%; height: 320px; transform: none; }
.rpf-f-modal.is-static .rpf-f-modal-info { width: 44%; padding: 16px; gap: 8px; }
.rpf-f-modal.is-static[data-popup-layout="bottom"] .rpf-f-modal-info { width: auto; max-height: 48%; }
.rpf-f-modal.is-static[data-popup-layout="overlay"] .rpf-f-modal-info { width: auto; max-height: 55%; padding: 14px 16px 30px; }
.rpf-f-modal.is-static[data-popup-layout="reels"] .rpf-f-modal-dialog { width: auto; margin: 0 auto; }
.rpf-f-modal.is-static[data-popup-layout="reels"] .rpf-f-modal-info { width: 220px; }
.rpf-f-modal.is-static[data-popup-layout="cinema"] .rpf-f-modal-dialog { width: 100%; height: 320px; }
.rpf-f-modal.is-static .rpf-f-modal-title { font-size: 15px; }
.rpf-f-modal.is-static .rpf-f-modal-desc { font-size: 12px; line-height: 1.8; }
.rpf-f-modal.is-static .rpf-f-modal-close,
.rpf-f-modal.is-static .rpf-f-modal-nav { display: none; }

/* ===================== پخش‌کننده ویدیو (پاپ‌آپ) ===================== */

.rpf-f-modal-media .rpf-f-player { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; }

.rpf-f-player video,
.rpf-f-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.rpf-f-player video { object-fit: contain; cursor: pointer; }
.rpf-f-player img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }

/* لایه کلیک روی ویدیو (برای تغییر صدا) */
.rpf-f-click { position: absolute; z-index: 3; inset: 0 0 56px 0; cursor: pointer; }

.rpf-f-bigplay {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 50%;
	display: none;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin: -38px 0 0 -38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rpf-f-accent);
	color: var(--rpf-f-on-accent, #ffffff);
	box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.22);
	cursor: pointer;
	transition: transform 0.25s ease;
}

.rpf-f-bigplay:hover { transform: scale(1.08); }
.rpf-f-bigplay svg { width: 34px; height: 34px; margin-left: 4px; fill: currentColor; }
.rpf-f-player.is-paused .rpf-f-bigplay { display: flex; }

.rpf-f-controls {
	position: absolute;
	z-index: 5;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 24px 16px 12px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
	color: #ffffff;
	direction: ltr;
	transition: opacity 0.3s ease;
}

.rpf-f-player.is-playing:not(:hover) .rpf-f-controls { opacity: 0; }
@media (hover: none) { .rpf-f-player.is-playing:not(:hover) .rpf-f-controls { opacity: 1; } }

.rpf-f-ctl { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background 0.2s ease; }
.rpf-f-ctl:hover { background: rgba(255, 255, 255, 0.2); }
.rpf-f-ctl svg { width: 22px; height: 22px; fill: currentColor; }
.rpf-f-ctl.is-sound { width: 28px; height: 28px; background: rgba(255, 255, 255, 0.14); }
.rpf-f-ctl.is-sound svg { width: 16px; height: 16px; }

.rpf-f-controls .is-play svg:nth-child(2),
.rpf-f-controls .is-sound svg:nth-child(2),
.rpf-f-flash svg:nth-child(2) { display: none; }
.rpf-f-player.is-playing .is-play svg:nth-child(1) { display: none; }
.rpf-f-player.is-playing .is-play svg:nth-child(2) { display: block; }
.rpf-f-player.is-muted .is-sound svg:nth-child(1),
.rpf-f-player.is-muted .rpf-f-flash svg:nth-child(1) { display: none; }
.rpf-f-player.is-muted .is-sound svg:nth-child(2),
.rpf-f-player.is-muted .rpf-f-flash svg:nth-child(2) { display: block; }

.rpf-f-progress { position: relative; flex: 1; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.28); cursor: pointer; }
.rpf-f-progress::before { content: ""; position: absolute; inset: -8px 0; }
.rpf-f-progress i { position: absolute; top: 0; left: 0; bottom: 0; width: var(--rpf-f-p, 0%); border-radius: 6px; background: var(--rpf-f-accent); }
.rpf-f-player.is-static .rpf-f-progress i { width: 35%; }
.rpf-f-time { min-width: 44px; font-size: 12px; font-variant-numeric: tabular-nums; }

.rpf-f-flash {
	position: absolute;
	z-index: 6;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin: -34px 0 0 -34px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	opacity: 0;
	pointer-events: none;
}

.rpf-f-flash svg { width: 32px; height: 32px; fill: currentColor; }
.rpf-f-flash.is-on { animation: rpf-f-flash 0.9s ease; }

.rpf-f-hint {
	position: absolute;
	z-index: 6;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	padding: 8px 20px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.62);
	color: #ffffff;
	font-size: 13px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.rpf-f-modal[data-sound-hint="1"] .rpf-f-player.is-muted.is-playing:not(.hint-done) .rpf-f-hint,
.rpf-f-modal.is-static[data-sound-hint="1"] .rpf-f-player.is-muted .rpf-f-hint { opacity: 1; }

/* پخش‌کننده پیش‌فرض مرورگر */
[data-player="native"] .rpf-f-controls,
[data-player="native"] .rpf-f-bigplay,
[data-player="native"] .rpf-f-hint,
[data-player="native"] .rpf-f-flash,
[data-player="native"] .rpf-f-click { display: none; }

@keyframes rpf-f-flash {
	0% { opacity: 0; transform: scale(0.8); }
	20% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.25); }
}

/* ===================== صفحه تکی و امبد ===================== */

.rpf-f-embed { margin: 32px 0; }
.rpf-f-embed-stage { border-radius: var(--rpf-f-radius); padding: 40px 40px 48px; }
.rpf-f-embed-stage .rpf-f-mac { width: 76%; }
.rpf-f-embed-stage .rpf-f-phone { width: 18%; }

.rpf-f-preview-root { padding: 4px; }

/* ===================== انیمیشن‌ها ===================== */

@keyframes rpf-f-spin { to { transform: rotate(360deg); } }
@keyframes rpf-f-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rpf-f-in-slide { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes rpf-f-in-scale { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.rpf-f-card { animation: none; }
	.rpf-f-mac-display img, .rpf-f-phone-screen img { transition: none; }
}

/* ===================== Responsive ===================== */

@media (max-width: 1024px) {
	.rpf-f-grid { grid-template-columns: repeat(min(var(--rpf-f-cols), 3), minmax(0, 1fr)); }
	[data-style="content"][data-mode="masonry"] .rpf-f-grid { column-count: min(var(--rpf-f-cols), 3); }
}

@media (max-width: 782px) {
	.rpf-f-page { padding: 32px 16px; }
	.rpf-f-head-title { font-size: 24px; }
	.rpf-f-grid { grid-template-columns: repeat(min(var(--rpf-f-cols), 2), minmax(0, 1fr)); gap: 16px; }
	[data-style="content"][data-mode="masonry"] .rpf-f-grid { column-count: 2; column-gap: 16px; }
	[data-style="content"][data-mode="masonry"] .rpf-f-card { margin-bottom: 16px; }
	.rpf-f-tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
	.rpf-f-tab { flex-shrink: 0; }
	.rpf-f-seo-stats { grid-template-columns: 1fr; }

	/* پاپ‌آپ موبایل: ۹۵٪ عرض و ارتفاع صفحه، محتوا بالا و اطلاعات پایین */
	.rpf-f-modal:not(.is-static) .rpf-f-modal-dialog { width: 95vw; height: 95vh; flex-direction: column; }
	.rpf-f-modal:not(.is-static) .rpf-f-modal-info { width: auto; max-height: 42%; padding: 16px; }
	.rpf-f-modal:not(.is-static) .rpf-f-modal-btn { margin-top: 0; }
	[data-popup-layout="reels"].rpf-f-modal:not(.is-static) .rpf-f-modal-dialog { width: 95vw; height: 95vh; }
	[data-popup-layout="reels"].rpf-f-modal:not(.is-static) .rpf-f-modal-media { flex: 1; aspect-ratio: auto; height: auto; }
	[data-popup-layout="overlay"].rpf-f-modal:not(.is-static) .rpf-f-modal-info { padding: 16px 52px 36px; }
	[data-popup-layout="cinema"].rpf-f-modal:not(.is-static) .rpf-f-modal-dialog { width: 100vw; height: 100vh; }
	.rpf-f-modal-close { top: 8px; left: 8px; width: 36px; height: 36px; }
	.rpf-f-modal-nav { top: 30%; width: 36px; height: 36px; margin-top: -18px; }
}

@media (max-width: 520px) {
	.rpf-f-grid { grid-template-columns: minmax(0, 1fr); }
	[data-style="content"][data-mode="masonry"] .rpf-f-grid { column-count: 1; }
	[data-style="content"][data-mode="tile"] .rpf-f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc((100cqw - 16px) / 2); }
	.rpf-f-embed-stage { padding: 20px 16px 24px; }
}

/* ===================== صفحه اصلی نمونه‌کارها (v1.0.3) ===================== */

.rpf-f-tabs-wrap { display: flex; justify-content: flex-start; }
.rpf-f-tabs-wrap[data-tabs-align="center"] { justify-content: center; }
.rpf-f-tabs-wrap[data-tabs-align="left"] { justify-content: flex-end; }

/* توضیح کوتاه فقط در مدل‌های دارای بدنه معمولی (A و C) */
[data-style="hub"][data-layout="b"] .rpf-f-card-hub .rpf-f-card-excerpt,
[data-style="hub"][data-layout="d"] .rpf-f-card-hub .rpf-f-card-excerpt { display: none; }
[data-style="hub"][data-layout="c"] .rpf-f-card-hub .rpf-f-card-excerpt { margin-top: 4px; font-size: 13px; }
[data-style="hub"][data-align="center"][data-layout="a"] .rpf-f-card-excerpt { margin-inline: auto; }
.rpf-f-card-hub .rpf-f-card-body { flex: 1; }

/* ---------- شورت‌کد کارت دسته‌بندی‌ها ---------- */
.rpf-f-catlist { margin: 24px 0; }
.rpf-f-catlist .rpf-f-card-excerpt { display: block; }

/* ---------- بلوک متنی بالا / پایین نمونه‌کارهای دسته ---------- */
.rpf-f-block { direction: rtl; margin: 0 0 32px; color: var(--rpf-f-blk-text, inherit); }
.rpf-f-block-bottom { margin: 32px 0 0; }
.rpf-f-block[data-has-bg="1"] { background: var(--rpf-f-blk-bg); border-radius: var(--rpf-f-blk-radius, 10px); }
.rpf-f-block[data-width="boxed"] .rpf-f-block-inner { max-width: 820px; margin-inline: auto; }
.rpf-f-block[data-align="right"] { text-align: right; }
.rpf-f-block[data-align="center"] { text-align: center; }
.rpf-f-block[data-align="left"] { text-align: left; }
.rpf-f-block[data-pad="sm"] { padding: 16px; }
.rpf-f-block[data-pad="md"] { padding: 28px; }
.rpf-f-block[data-pad="lg"] { padding: 48px 40px; }
.rpf-f-block[data-size="sm"] { font-size: 14px; }
.rpf-f-block[data-size="md"] { font-size: 16px; }
.rpf-f-block[data-size="lg"] { font-size: 19px; }
.rpf-f-block-inner { line-height: 2; }
.rpf-f-block-inner > :first-child { margin-top: 0; }
.rpf-f-block-inner > :last-child { margin-bottom: 0; }
.rpf-f-block-inner h1, .rpf-f-block-inner h2, .rpf-f-block-inner h3, .rpf-f-block-inner h4 { color: inherit; line-height: 1.6; }
.rpf-f-block-inner img, .rpf-f-block-inner video, .rpf-f-block-inner iframe { max-width: 100%; height: auto; }
.rpf-f-block-inner a { color: var(--rpf-f-blk-link, var(--rpf-f-primary, #3e9597)); }
@media (max-width: 640px) {
	.rpf-f-block[data-pad="md"] { padding: 20px 16px; }
	.rpf-f-block[data-pad="lg"] { padding: 28px 18px; }
}

/* تعداد نمونه‌کار داخل تب‌ها نمایش داده نمی‌شود */
.rpf-f-tab-count { display: none !important; }

/* نشانگر بارگذاری ویدیو */
.rpf-f-player.is-loading::after {
	content: "";
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: #ffffff;
	border-radius: 50%;
	pointer-events: none;
	animation: rpf-f-spin 0.8s linear infinite;
}
@keyframes rpf-f-spin { to { transform: rotate(360deg); } }
.rpf-f-player.is-loading .rpf-f-bigplay { opacity: 0; }

/* وقتی ساختار یک دسته داخل «همه نمونه‌کارها» نمایش داده می‌شود، عنوان کلی صفحه مخفی می‌شود */
.rpf-f-page.is-category-view > .rpf-f-head { display: none; }
.rpf-f-main .rpf-f-category { margin-top: 8px; }


/* ===================== جداسازی از قالب و المنتور (v1.0.9) =====================
 * رنگ و فونت لینک‌ها، دکمه‌ها و عنوان‌ها فقط از تنظیمات پلاگین می‌آید؛ استایل سراسری
 * قالب/المنتور (رنگ لینک، دکمه، عنوان، Hover و Focus) روی اجزای پلاگین اثر ندارد. */
.rpf-f h1, .rpf-f h2, .rpf-f h3, .rpf-f h4,
.rpf-f-page .rpf-f-head-title {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
}
.rpf-f p { margin-bottom: 0; }
.rpf-f a, .rpf-f a:hover, .rpf-f a:focus { text-decoration: none; box-shadow: none; }
.rpf-f .rpf-f-card-title { color: var(--rpf-f-title, inherit); font-size: var(--rpf-f-fs-title, 17px); font-weight: var(--rpf-f-title-weight, 800); }
.rpf-f .rpf-f-card-content .rpf-f-card-title,
.rpf-f[data-style="hub"][data-layout="b"] .rpf-f-card-title,
.rpf-f[data-style="hub"][data-layout="d"] .rpf-f-card-title,
.rpf-f[data-style="site"][data-layout="b"] .rpf-f-card-title { color: #ffffff; }
.rpf-f[data-style="content"][data-layout="c"] .rpf-f-card-content .rpf-f-card-title { color: var(--rpf-f-title, var(--rpf-f-text)); }
.rpf-f .rpf-f-btn,
.rpf-f .rpf-f-btn:hover,
.rpf-f .rpf-f-btn:focus,
.rpf-f .rpf-f-btn:active {
	background-color: var(--rpf-f-accent, var(--rpf-f-primary, #3e9597));
	color: var(--rpf-f-on-accent, #ffffff);
	border: 0;
	box-shadow: none;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
}
.rpf-f .rpf-f-btn:focus-visible { outline: 2px solid var(--rpf-f-accent); outline-offset: 2px; }
.rpf-f .rpf-f-modal-close, .rpf-f .rpf-f-modal-nav, .rpf-f .rpf-f-ctl, .rpf-f .rpf-f-bigplay { box-shadow: none; text-transform: none; }
.rpf-f-page a.rpf-f-crumb { color: var(--rpf-f-primary, #3e9597); }
.rpf-f-page a.rpf-f-crumb:hover { color: var(--rpf-f-primary-dark, #004d49); }
.rpf-f-tabs .rpf-f-tab, .rpf-f-more .rpf-f-btn { font-family: inherit; }

@media (max-width: 782px) {
	.rpf-f-page .rpf-f-head-title { font-size: min(var(--rpf-f-head-fs, 32px), 26px); }
}

/* فیلتر کارت‌های محتوای یک نمونه‌کار (ویجت/شورت‌کد media با filter="1") */
.rpf-f-cf-item { display: contents; }
.rpf-f-cf-item[hidden] { display: none !important; }
.rpf-f-cfilter .rpf-f-tab.is-active { background: var(--rpf-f-tabs-ind, var(--rpf-f-tabs-active-bg, var(--rpf-f-primary, #3e9597))); color: var(--rpf-f-tabs-active-text, #fff); }