/* ==========================================================================
   Romanno Ads — بنر کوچک شناور (Corner Banner)
   همه‌ی کلاس‌ها با پیشوند rca- هستن تا با قالب سایت تداخل نداشته باشن.
   ========================================================================== */

.rca {
	--rca-accent: #ff7a00;
	--rca-accent-2: #ff9d2e;
	--rca-ink: #241533;
	--rca-muted: #7a6a8a;
	--rca-bottom-m: 76px;
	--rca-bottom-d: 76px;
	--rca-gap: 12px;

	position: fixed;
	z-index: 99990;
	bottom: calc(var(--rca-bottom-m) + env(safe-area-inset-bottom, 0px));
	width: min(236px, calc(100vw - (var(--rca-gap) * 2)));
	direction: rtl;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.5;
	color: var(--rca-ink);
	-webkit-tap-highlight-color: transparent;
	pointer-events: none; /* فقط خود کارت کلیک‌پذیره */
	opacity: 0;
	transform: translateY(18px) scale(.94);
	transform-origin: bottom left;
	transition: opacity .38s ease, transform .5s cubic-bezier(.2, .9, .3, 1.25);
	will-change: transform, opacity;
}

.rca[hidden] {
	display: none !important;
}

.rca--left {
	left: var(--rca-gap);
}

.rca--right {
	right: var(--rca-gap);
	transform-origin: bottom right;
}

.rca.rca--in {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.rca.rca--out {
	opacity: 0;
	transform: translateY(14px) scale(.92);
	transition-duration: .26s;
	transition-timing-function: ease-in;
}

/* وقتی پاپ‌آپ معرفی سایت باز هست، بنر موقتاً کنار می‌ره تا روی هم نیفتن */
.rca.rca--yield {
	opacity: 0;
	transform: translateY(14px) scale(.96);
	visibility: hidden;
}

/* ---------- کارت ---------- */
.rca__card {
	position: relative;
	pointer-events: auto;
	display: block;
	border-radius: 18px;
	background: #fff;
	background: linear-gradient(160deg, #ffffff 0%, #fff8f1 100%);
	border: 1px solid rgba(255, 122, 0, .22);
	border: 1px solid color-mix(in srgb, var(--rca-accent) 24%, #ffffff);
	box-shadow:
		0 14px 34px -8px rgba(36, 21, 51, .28),
		0 3px 8px rgba(36, 21, 51, .08),
		inset 0 1px 0 rgba(255, 255, 255, .9);
	overflow: hidden;
	touch-action: pan-y;
	transition: transform .25s ease, box-shadow .25s ease;
}

/* نوار رنگی باریک بالای کارت */
.rca__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--rca-accent), var(--rca-accent-2));
	z-index: 2;
}

/* درخشش عبوری یک‌باره بعد از ظاهر شدن */
.rca__card::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 46%;
	left: -60%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
	transform: skewX(-18deg);
	pointer-events: none;
	z-index: 3;
}

.rca--in .rca__card::after {
	animation: rca-shine 1.3s .55s ease-out 1 both;
}

@keyframes rca-shine {
	from { left: -60%; }
	to   { left: 140%; }
}

.rca__card.rca--dragging {
	transition: none;
}

/* ---------- لینک اصلی ---------- */
.rca__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 9px 9px 9px;
	color: inherit !important;
	text-decoration: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.rca__link:focus-visible {
	outline: 2px solid var(--rca-accent);
	outline-offset: -3px;
	border-radius: 16px;
}

/* ---------- تصویر ---------- */
.rca__media {
	position: relative;
	flex: 0 0 50px;
	width: 50px;
	height: 50px;
	border-radius: 13px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--rca-accent), var(--rca-accent-2));
	box-shadow: 0 5px 12px -3px rgba(255, 122, 0, .45), 0 0 0 2px #fff;
	box-shadow: 0 5px 12px -3px color-mix(in srgb, var(--rca-accent) 55%, transparent), 0 0 0 2px #fff;
}

.rca__media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	margin: 0 !important;
	border-radius: 0 !important;
	transition: transform .5s ease;
}

.rca__card:hover .rca__media img {
	transform: scale(1.08);
}

.rca__media-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #fff;
}

/* ---------- متن ---------- */
.rca__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.rca__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .2px;
	line-height: 1;
	color: var(--rca-accent);
	padding: 3px 7px 3px 8px;
	border-radius: 20px;
	background: rgba(255, 122, 0, .1);
	background: color-mix(in srgb, var(--rca-accent) 11%, #ffffff);
}

.rca__badge i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--rca-accent);
	box-shadow: 0 0 0 0 rgba(255, 122, 0, .55);
	animation: rca-ping 2.2s ease-out infinite;
}

@keyframes rca-ping {
	0%   { box-shadow: 0 0 0 0 rgba(255, 122, 0, .55); }
	70%  { box-shadow: 0 0 0 6px rgba(255, 122, 0, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 122, 0, 0); }
}

.rca__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.5;
	color: var(--rca-ink);
}

.rca__desc {
	display: none; /* روی موبایل جمع‌وجور بمونه */
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--rca-muted);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rca__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 1px;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1;
	color: #fff;
	padding: 5px 10px 5px 8px;
	border-radius: 30px;
	background: linear-gradient(135deg, var(--rca-accent), var(--rca-accent-2));
	box-shadow: 0 5px 12px -3px rgba(255, 122, 0, .55);
	box-shadow: 0 5px 12px -3px color-mix(in srgb, var(--rca-accent) 60%, transparent);
	transition: transform .2s ease, box-shadow .2s ease;
}

.rca__cta svg {
	transition: transform .2s ease;
}

.rca__card:hover .rca__cta svg,
.rca__link:focus-visible .rca__cta svg {
	transform: translateX(-3px);
}

/* ---------- دکمه‌ی بستن ---------- */
.rca__close {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(36, 21, 51, .08);
	color: #6b5a7b;
	cursor: pointer;
	line-height: 1;
	box-shadow: none;
	transition: background .2s ease, color .2s ease, transform .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.rca--right .rca__close {
	left: auto;
	right: 8px;
}

/* ناحیه‌ی لمس بزرگ‌تر (۴۴ پیکسل) بدون بزرگ کردن ظاهر دکمه */
.rca__close::after {
	content: "";
	position: absolute;
	inset: -11px;
}

.rca__close:hover,
.rca__close:focus-visible {
	background: var(--rca-ink);
	color: #fff;
	transform: rotate(90deg);
	outline: none;
}

.rca__close:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 122, 0, .4);
}

/* جا برای دکمه‌ی بستن که روی محتوا نیفته */
.rca--left .rca__link {
	padding-left: 34px;
}

.rca--right .rca__link {
	padding-right: 34px;
}

/* ---------- نوار زمان (فقط وقتی «مخفی شدن خودکار» فعاله) ---------- */
.rca__timer {
	position: absolute;
	inset: auto 0 0 0;
	height: 2px;
	background: rgba(255, 122, 0, .14);
	display: none;
}

.rca__timer::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--rca-accent), var(--rca-accent-2));
	transform-origin: right center;
	transform: scaleX(1);
}

.rca--timed .rca__timer {
	display: block;
}

.rca--timed.rca--in .rca__timer::after {
	animation: rca-timer var(--rca-autohide, 8s) linear forwards;
}

.rca--timed:hover .rca__timer::after {
	animation-play-state: paused;
}

@keyframes rca-timer {
	to { transform: scaleX(0); }
}

/* ==========================================================================
   دسکتاپ
   ========================================================================== */
@media (min-width: 783px) {
	.rca {
		--rca-gap: 22px;
		bottom: calc(var(--rca-bottom-d) + env(safe-area-inset-bottom, 0px));
		width: 332px;
		font-size: 14px;
	}

	.rca__link {
		gap: 13px;
		padding: 15px 14px 14px 14px;
		align-items: flex-start;
	}

	.rca--left .rca__link {
		padding-left: 40px;
	}

	.rca--right .rca__link {
		padding-right: 40px;
	}

	.rca__media {
		flex-basis: 78px;
		width: 78px;
		height: 78px;
		border-radius: 16px;
	}

	.rca__badge {
		font-size: 10.5px;
	}

	.rca__title {
		font-size: 14.5px;
	}

	.rca__desc {
		display: -webkit-box;
	}

	.rca__cta {
		margin-top: 5px;
		font-size: 12px;
		padding: 8px 15px 8px 12px;
	}

	.rca__card:hover {
		transform: translateY(-3px);
		box-shadow:
			0 20px 40px -8px rgba(36, 21, 51, .34),
			0 4px 10px rgba(36, 21, 51, .1),
			inset 0 1px 0 rgba(255, 255, 255, .9);
	}

	.rca__close {
		top: 11px;
		left: 11px;
		width: 24px;
		height: 24px;
	}

	.rca--right .rca__close {
		left: auto;
		right: 11px;
	}
}

/* صفحه‌های خیلی کوچک */
@media (max-width: 340px) {
	.rca__media {
		flex-basis: 46px;
		width: 46px;
		height: 46px;
	}
}

/* ==========================================================================
   دسترسی‌پذیری و چاپ
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.rca,
	.rca__card,
	.rca__media img,
	.rca__cta svg,
	.rca__close {
		transition-duration: .01ms !important;
	}

	.rca--in .rca__card::after,
	.rca__badge i,
	.rca--timed.rca--in .rca__timer::after {
		animation: none !important;
	}
}

@media print {
	.rca {
		display: none !important;
	}
}

/* ==========================================================================
   پیش‌نمایش داخل پنل مدیریت (همون طراحی، بدون position: fixed)
   ========================================================================== */
.rca.rca--preview {
	position: relative;
	left: auto;
	right: auto;
	bottom: auto;
	opacity: 1;
	transform: none;
	transition: none;
	display: block;
	pointer-events: none;
}

.rca.rca--preview[hidden] {
	display: block !important;
}

.rca.rca--preview .rca__card::after {
	animation: none;
}

.rca.rca--preview.rca--wide {
	width: 332px;
	max-width: 100%;
}

.rca.rca--preview.rca--wide .rca__link {
	gap: 13px;
	padding: 15px 14px 14px 14px;
	align-items: flex-start;
}

.rca.rca--preview.rca--wide.rca--left .rca__link { padding-left: 40px; }
.rca.rca--preview.rca--wide.rca--right .rca__link { padding-right: 40px; }
.rca.rca--preview.rca--wide .rca__media { flex-basis: 78px; width: 78px; height: 78px; border-radius: 16px; }
.rca.rca--preview.rca--wide .rca__title { font-size: 14.5px; }
.rca.rca--preview.rca--wide .rca__desc { display: -webkit-box; }
.rca.rca--preview.rca--wide .rca__cta { margin-top: 5px; font-size: 12px; padding: 8px 15px 8px 12px; }
.rca.rca--preview.rca--wide .rca__close { top: 11px; left: 11px; width: 24px; height: 24px; }
.rca.rca--preview.rca--wide.rca--right .rca__close { left: auto; right: 11px; }