/*
File: rafina/inc/frontend/footer/footer-ribbon.css
مدل چهارم فوتر — «نواری» (is-ribbon)

ستون برند پهن است و ستون تماس آیکون کاشی‌شده می‌گیرد؛ نوار پایین از یک خط
جداکننده به یک نوار رنگی گرد تبدیل می‌شود که دکمه‌ی برگشت به بالای صفحه در
انتهای آن می‌نشیند.

هر قاعده به `.is-ribbon` بسته است. سه مدل دیگر روی فروشگاه‌های زنده نشسته‌اند
و یک انتخابگر بی‌پیشوند در این فایل، همه‌شان را با یک به‌روزرسانی جابه‌جا
می‌کند.
*/

.rafina-footer.is-ribbon {
	/* پایین بی فاصله می‌ماند، چون نوار رنگی خودش کف صفحه را می‌بندد */
	padding-block: 54px 0;
}

/* ستون برند پهن‌تر از بقیه؛ هم لوگو دارد، هم یک جمله، هم ردیف آیکون‌ها */
.rafina-footer.is-ribbon .rafina-footer-grid {
	grid-template-columns: 1.7fr repeat(var(--rafina-footer-cols, 3), 1fr);
	gap: 40px;
	margin-bottom: 26px;
}

.rafina-footer.is-ribbon .rafina-footer-brand p {
	max-width: 40ch;
	font-size: 14.5px;
	line-height: 2.1;
}

/*
 * سرتیتر ستون‌ها یک نقطه‌ی رنگی می‌گیرد، نه خط زیرین.
 *
 * خط زیرین را مدل کارتی دارد و دو مدل با یک نشانه، در پیش‌نمایش پنل از هم
 * جدا نمی‌شوند.
 */
.rafina-footer.is-ribbon .rafina-footer-col :is(h3, h4) {
	font-size: 15px;
	margin-bottom: 16px;
}
.rafina-footer.is-ribbon .rafina-footer-col :is(h3, h4)::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rafina-footer-totop-bg, var(--rafina-accent-2));
	margin-inline-end: 9px;
	vertical-align: middle;
}

/*
 * ردیف تماس: آیکون داخل یک کاشی رنگ‌کم می‌نشیند.
 *
 * `box-sizing` صریح نوشته شده چون قالب ریست جامع ندارد و بی آن، padding روی
 * اندازه‌ی ۳۴ پیکسلی سوار می‌شد و کاشی از خط ستون بیرون می‌زد.
 */
.rafina-footer.is-ribbon .rafina-footer-contact li {
	gap: 12px;
	opacity: 1;
}
.rafina-footer.is-ribbon .rafina-footer-contact svg {
	box-sizing: border-box;
	width: 34px;
	height: 34px;
	padding: 9px;
	border-radius: 10px;
	border: 1px solid var(--rafina-border-2);
	background: var(--rafina-ghost-bg);
	color: var(--rafina-accent-2);
}

/* آیکون‌های شبکه‌ی اجتماعی در ستون برند می‌مانند، فقط کمی نرم‌تر */
.rafina-footer.is-ribbon .rafina-social-btn {
	border-radius: 12px;
	background: var(--rafina-card-bg);
}

/*
 * نماد اعتماد همان کامپوننت همیشگی است و فقط قاب می‌گیرد.
 *
 * نسخه‌ی دومی ساخته نشده؛ نماد از ستون خودش می‌آید و این‌جا فقط مثل یک
 * کارت سفید دیده می‌شود تا از متن ستون‌های کناری جدا بایستد.
 */
.rafina-footer.is-ribbon .rafina-footer-enamad {
	display: inline-flex;
	padding: 10px;
	border: 1px solid var(--rafina-border);
	border-radius: 14px;
	background: var(--rafina-card-bg);
}

/* ---------------------------------------------------------
   نوار پایین رنگی، با دکمه‌ی برو بالا در انتهای خط
--------------------------------------------------------- */

/*
 * چهار کلاس عمدی، نه سه.
 *
 * قاعده‌ی `:not(.is-modern)` در فایل پایه هم‌وزن این‌جاست و برنده شدنش به
 * ترتیب بارگذاری بند می‌شد؛ افزودن `.rafina-container` وزن را قطعی می‌کند.
 *
 * رنگ نوار از توکن خود نوار کپی‌رایت می‌آید، نه از رنگ برند: آن جفت در
 * «رنگ‌بندی سایت» با متنش تنظیم می‌شود و در حالت شب هم جور می‌ماند. چیزی
 * که این‌جا اضافه می‌شود شکل نوار است — گوشه‌ی گرد و خط رنگی بالای آن.
 */
.rafina-footer.is-ribbon .rafina-container .rafina-footer-bottom {
	position: relative;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 20px;
	margin-top: 8px;
	border-top: 3px solid var(--rafina-accent-2);
	border-radius: 18px 18px 0 0;
	padding: 20px 60px 22px;
	background: var(--rafina-footer-bottom-bg, var(--rafina-bg-2));
	color: var(--rafina-footer-bottom-color, var(--rafina-text-dimmer));
}

.rafina-footer.is-ribbon .rafina-footer-copy {
	font-size: 13px;
}

/* لینک‌های نوار پایین سطر خودشان را می‌گیرند تا کپی‌رایت وسط بماند */
.rafina-footer.is-ribbon .rafina-footer-bottom-links {
	flex-basis: 100%;
	justify-content: center;
}
.rafina-footer.is-ribbon .rafina-footer-bottom-links a {
	color: inherit;
}

/*
 * دکمه در انتهای خط می‌نشیند، نه گوشه‌ی چپ.
 *
 * `inset-inline-end` یعنی در فارسی سمت چپ و در چیدمان لاتین سمت راست؛
 * همان چیزی که طرح مرجع با `left: 0` گرفته بود و در انگلیسی می‌شکست.
 */
.rafina-footer.is-ribbon .rafina-footer-totop {
	position: absolute;
	inset-inline-end: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 50%;
	background: var(--rafina-accent-2);
	color: var(--rafina-footer-totop-icon, var(--rafina-on-accent));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: transform .2s ease, opacity .2s ease;
}
.rafina-footer.is-ribbon .rafina-footer-totop:hover {
	transform: translateY(calc(-50% - 2px));
}
.rafina-footer.is-ribbon .rafina-footer-totop svg {
	width: 17px;
	height: 17px;
}

/*
 * در پوسته‌ی تیره جوهر دکمه تیره می‌شود، نه سفید.
 *
 * رنگ برند آن‌جا روشن است و فلش سفید رویش دیده نمی‌شود — سنجیده شد: سفید
 * روی accent-2 تیره نسبت ۲٫۱۳ می‌دهد و با جوهر تیره به ۹ می‌رسد. همان
 * کاری که دکمه‌ی دسته‌بندی طرح فروشگاهی هدر می‌کند.
 */
:root[data-rafina-theme="dark"] .rafina-footer.is-ribbon .rafina-footer-totop {
	color: var(--rafina-bg);
}

@media (max-width: 900px) {
	.rafina-footer.is-ribbon .rafina-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
	.rafina-footer.is-ribbon .rafina-footer-brand { grid-column: 1 / -1; }
	.rafina-footer.is-ribbon .rafina-footer-brand p { max-width: none; }
}

/*
 * روی موبایل دکمه از حالت شناور درمی‌آید.
 *
 * نوار پایین آن‌جا دو سه سطر می‌شود و دکمه‌ی مطلق روی متن می‌افتاد؛ سطر
 * خودش را می‌گیرد و هدف لمسی هم به ۴۴ پیکسل می‌رسد.
 */
@media (max-width: 600px) {
	.rafina-footer.is-ribbon .rafina-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
	.rafina-footer.is-ribbon .rafina-container .rafina-footer-bottom { padding: 18px 16px 20px; }
	.rafina-footer.is-ribbon .rafina-footer-totop {
		position: static;
		transform: none;
		width: 44px;
		height: 44px;
	}
	.rafina-footer.is-ribbon .rafina-footer-totop:hover { transform: none; }
	.rafina-footer.is-ribbon .rafina-social-btn { width: 44px; height: 44px; }
	.rafina-footer.is-ribbon .rafina-footer-contact li { min-height: 44px; }
}