/*!
 * Ardal — حلقهٔ برندها (شبکه، اسلایدر، مارکی)
 *
 * همهٔ اندازه‌ها و رنگ‌ها متغیرند. کنترل‌های المنتور فقط همین متغیرها را
 * روی .ard-br بازنویسی می‌کنند؛ پس هر سبک و هر حالت چیدمان بدون جنگ
 * specificity قابل تنظیم می‌ماند.
 *
 * حالت فعال با [data-active-mode] مشخص می‌شود که اسکریپت از روی متغیر
 * --ard-br-mode (که در هر بریک‌پوینت فرق می‌کند) می‌نویسد.
 */

.elementor-widget-ardal-brand-rings {
	direction: rtl;
	font-family: var(--ard-font);
	color: var(--ard-text);
	text-align: right;
}

.ard-br {
	/* حلقه */
	--ard-br-ring: 110px;
	--ard-br-ratio: 1;
	--ard-br-radius: 50%;
	--ard-br-bw: 0px;
	--ard-br-bstyle: solid;
	--ard-br-line: transparent;
	--ard-br-bg: transparent;
	--ard-br-pad: 0px;
	--ard-br-g1: var(--ard-primary);
	--ard-br-g2: var(--ard-accent);
	--ard-br-g3: var(--ard-primary-light, var(--ard-primary));
	--ard-br-gangle: 140deg;
	--ard-br-spin-dur: 4s;
	--ard-br-dur: .3s;
	--ard-br-lift: -4px;
	--ard-br-zoom: 1.08;

	/* لوگو */
	--ard-br-disc: transparent;
	--ard-br-logo: 70%;
	--ard-br-fit: contain;
	--ard-br-op: 1;

	/* کارت و متن */
	--ard-br-align: center;
	--ard-br-text-align: center;
	--ard-br-inner-gap: 10px;
	--ard-br-name: var(--ard-text);
	--ard-br-lines: 1;

	/* شبکه */
	--ard-br-cols: 6;
	--ard-br-gap-x: 16px;
	--ard-br-gap-y: 22px;
	--ard-br-grid-justify: start;

	/* اسلایدر */
	--ard-br-per: 6;
	--ard-br-gap: 16px;
	--ard-br-arrow: 36px;
	--ard-br-arrow-icon: 17px;
	--ard-br-arrow-x: -8px;
	--ard-br-dot: 7px;
	--ard-br-dot-w: 20px;

	/* مارکی */
	--ard-br-mq-gap: 28px;
	--ard-br-mq-item: calc(var(--ard-br-ring) + 24px);
	--ard-br-fade: 70px;

	/* قاب */
	--ard-br-vpad: 10px;
	--ard-br-hpad: 0px;

	position: relative;
}

/* ============================================================
   سبک‌ها — فقط متغیر مقداردهی می‌کنند
   ============================================================ */

.ard-br--tint {
	--ard-br-bw: 2px;
	--ard-br-pad: 6px;
	--ard-br-line: var(--ard-tint-blue-border);
	--ard-br-bg: var(--ard-tint-blue);
	--ard-br-line-hover: var(--ard-accent);
}

.ard-br--outline {
	--ard-br-bw: 1px;
	--ard-br-pad: 6px;
	--ard-br-line: var(--ard-border);
	--ard-br-bg: var(--ard-base);
	--ard-br-line-hover: var(--ard-primary);
}

.ard-br--gradient {
	--ard-br-pad: 4px;
	--ard-br-disc: var(--ard-base);
	--ard-br-bg: linear-gradient(var(--ard-br-gangle), var(--ard-br-g1), var(--ard-br-g2));
}

/* رنگ اول در انتها تکرار می‌شود تا درزِ دایره دیده نشود؛ چرخشش بی‌پرش است. */
.ard-br--conic {
	--ard-br-pad: 4px;
	--ard-br-disc: var(--ard-base);
	--ard-br-bg: conic-gradient(from var(--ard-br-gangle), var(--ard-br-g1), var(--ard-br-g2), var(--ard-br-g3), var(--ard-br-g1));
}

.ard-br--plain {
	--ard-br-bw: 0px;
	--ard-br-pad: 0px;
	--ard-br-bg: transparent;
}

/*
 * یک‌درمیان روی کلاس .is-alt، نه nth-child.
 * در مارکی نسخه‌های تکراری پشت سر هم می‌آیند؛ با nth-child و تعداد فرد،
 * رنگ‌ها در نسخهٔ دوم برعکس می‌شد و سر هر دور پرش رنگ دیده می‌شد.
 */
.ard-br--alt .ard-br__item.is-alt {
	--ard-br-line: var(--ard-br-line-alt, var(--ard-tint-green-border));
	--ard-br-bg: var(--ard-br-bg-alt, var(--ard-tint-green));
}

/* ============================================================
   کارت، حلقه، لوگو
   ============================================================ */

.ard-br__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ard-br__item {
	min-inline-size: 0;
}

.ard-br__card {
	display: flex;
	flex-direction: column;
	align-items: var(--ard-br-align);
	gap: var(--ard-br-inner-gap);
	block-size: 100%;
	text-align: var(--ard-br-text-align);
	color: inherit;
	text-decoration: none;
	-webkit-user-drag: none;
	transition: background-color var(--ard-br-dur), border-color var(--ard-br-dur), box-shadow var(--ard-br-dur), transform var(--ard-br-dur);
}

.ard-br-dir-row .ard-br__card {
	flex-direction: row;
	align-items: center;
	justify-content: var(--ard-br-align);
	text-align: start;
}

.ard-br__card:focus-visible {
	outline: 2px solid var(--ard-primary);
	outline-offset: 3px;
	border-radius: var(--ard-radius-sm, 8px);
}

.ard-br__ring {
	position: relative;
	z-index: 0;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: var(--ard-br-ring);
	max-inline-size: 100%;
	aspect-ratio: var(--ard-br-ratio);
	padding: var(--ard-br-pad);
	border: var(--ard-br-bw) var(--ard-br-bstyle) var(--ard-br-line);
	border-radius: var(--ard-br-radius);
	overflow: hidden;
	isolation: isolate;
	transition: border-color var(--ard-br-dur), box-shadow var(--ard-br-dur), transform var(--ard-br-dur);
}

/*
 * زمینهٔ حلقه روی لایهٔ جدا.
 *
 * برای چرخش رنگِ گرادیان باید فقط زمینه بچرخد، نه لوگو. لایه مربعی است و
 * دو برابر پهنای حلقه، تا در هر زاویه‌ای — حتی برای حلقهٔ کشیده یا
 * گوشه‌دار — گوشه‌ای خالی نماند.
 */
.ard-br__ring::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	width: 200%;
	aspect-ratio: 1;
	background: var(--ard-br-bg);
	translate: -50% -50%;
}

.ard-br__disc {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	border-radius: var(--ard-br-disc-radius, var(--ard-br-radius));
	background: var(--ard-br-disc);
	overflow: hidden;
	transition: background-color var(--ard-br-dur);
}

.ard-br__disc img {
	display: block;
	inline-size: var(--ard-br-logo);
	block-size: var(--ard-br-logo);
	max-inline-size: none;
	object-fit: var(--ard-br-fit);
	opacity: var(--ard-br-op);
	-webkit-user-drag: none;
	user-select: none;
	transition: opacity var(--ard-br-dur), filter var(--ard-br-dur), scale var(--ard-br-dur);
}

.ard-br__initial {
	display: -webkit-box;
	max-inline-size: 100%;
	padding: 4px;
	overflow: hidden;
	font-size: max(10px, calc(var(--ard-br-ring) * .13));
	font-weight: 800;
	line-height: 1.35;
	color: var(--ard-primary-dark, var(--ard-text));
	text-align: center;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.ard-br__text {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: 2px;
	min-inline-size: 0;
	max-inline-size: 100%;
}

.ard-br-dir-row .ard-br__text {
	align-items: flex-start;
}

.ard-br__name {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.55;
	color: var(--ard-br-name);
	-webkit-line-clamp: var(--ard-br-lines);
	-webkit-box-orient: vertical;
	transition: color var(--ard-br-dur);
}

.ard-br__count {
	font-size: 11px;
	color: var(--ard-muted);
}

/* ---------- هاور ---------- */

.ard-br__card:hover .ard-br__ring,
.ard-br__card:focus-visible .ard-br__ring {
	border-color: var(--ard-br-line-hover, var(--ard-br-line));
}

.ard-br__card:hover .ard-br__ring::before,
.ard-br__card:focus-visible .ard-br__ring::before {
	background: var(--ard-br-bg-hover, var(--ard-br-bg));
}

.ard-br__card:hover .ard-br__disc,
.ard-br__card:focus-visible .ard-br__disc {
	background: var(--ard-br-disc-hover, var(--ard-br-disc));
}

.ard-br__card:hover .ard-br__disc img,
.ard-br__card:focus-visible .ard-br__disc img {
	opacity: var(--ard-br-op-hover, var(--ard-br-op));
}

.ard-br__card:hover .ard-br__name,
.ard-br__card:focus-visible .ard-br__name {
	color: var(--ard-br-name-hover, var(--ard-br-name));
}

.ard-br-fx-lift .ard-br__card:hover .ard-br__ring,
.ard-br-fx-lift .ard-br__card:focus-visible .ard-br__ring {
	transform: translateY(var(--ard-br-lift));
}

.ard-br-fx-zoom .ard-br__card:hover .ard-br__disc img,
.ard-br-fx-zoom .ard-br__card:focus-visible .ard-br__disc img {
	scale: var(--ard-br-zoom);
}

.ard-br-fx-glow .ard-br__card:hover .ard-br__ring,
.ard-br-fx-glow .ard-br__card:focus-visible .ard-br__ring {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--ard-br-line-hover, var(--ard-primary)) 22%, transparent), 0 8px 22px color-mix(in srgb, var(--ard-br-line-hover, var(--ard-primary)) 28%, transparent);
}

@keyframes ard-br-spin {
	to {
		rotate: 360deg;
	}
}

.ard-br-spin-yes .ard-br__ring::before,
.ard-br-fx-spin .ard-br__card:hover .ard-br__ring::before,
.ard-br-fx-spin .ard-br__card:focus-visible .ard-br__ring::before {
	animation: ard-br-spin var(--ard-br-spin-dur) linear infinite;
}

/* سیاه‌وسفید */
.ard-br-gray-yes .ard-br__disc img {
	filter: grayscale(1);
}

.ard-br-gray-yes.ard-br-grayhover-yes .ard-br__card:hover .ard-br__disc img,
.ard-br-gray-yes.ard-br-grayhover-yes .ard-br__card:focus-visible .ard-br__disc img {
	filter: none;
}

/* ============================================================
   حالت‌ها
   ============================================================ */

.ard-br__stage {
	position: relative;
}

.ard-br__viewport {
	position: relative;
}

/* ---------- شبکه ---------- */

/*
 * شبکه با flex-wrap و عرض ستونیِ ثابت، نه grid.
 * نتیجه همان ستون‌های هم‌عرض است، ولی ردیف ناقص (ردیف آخر یا وقتی برندها
 * از ستون‌ها کمترند) را می‌شود وسط یا انتها چید؛ grid جای خالی را همیشه
 * در انتها می‌گذارد.
 */
.ard-br[data-active-mode="grid"] .ard-br__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--ard-br-grid-justify);
	gap: var(--ard-br-gap-y) var(--ard-br-gap-x);
	padding-inline: var(--ard-br-hpad);
}

.ard-br[data-active-mode="grid"] .ard-br__item {
	flex: 0 0 calc((100% - (var(--ard-br-cols) - 1) * var(--ard-br-gap-x)) / var(--ard-br-cols));
}

/* ---------- اسلایدر ---------- */

.ard-br[data-active-mode="slider"] .ard-br__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	padding-block: var(--ard-br-vpad);
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--ard-br-hpad);
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.ard-br[data-active-mode="slider"] .ard-br__viewport::-webkit-scrollbar {
	display: none;
}

.ard-br[data-active-mode="slider"] .ard-br__list {
	display: flex;
	gap: var(--ard-br-gap);
	padding-inline: var(--ard-br-hpad);
}

.ard-br[data-active-mode="slider"] .ard-br__item {
	flex: 0 0 calc((100% - (var(--ard-br-per) - 1) * var(--ard-br-gap)) / var(--ard-br-per));
	scroll-snap-align: start;
}

.ard-br[data-active-mode="slider"].is-draggable .ard-br__viewport {
	cursor: grab;
}

.ard-br[data-active-mode="slider"].is-dragging .ard-br__viewport {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}

/* ---------- مارکی ---------- */

/*
 * نوار همیشه چپ‌به‌راست چیده می‌شود تا حساب جابه‌جایی در هر جهت صفحه یکی
 * باشد؛ خودِ کارت‌ها جهت متنشان را نگه می‌دارند. فاصله با margin است نه gap
 * تا عرض هر دور دقیقاً «تعداد × (عرض + فاصله)» شود و درز دیده نشود.
 */
.ard-br[data-active-mode="marquee"] .ard-br__viewport {
	direction: ltr;
	overflow: hidden;
	padding-block: var(--ard-br-vpad);
	touch-action: pan-y;
}

.ard-br[data-active-mode="marquee"] .ard-br__list {
	display: flex;
	inline-size: max-content;
	will-change: transform;
	backface-visibility: hidden;
}

.ard-br[data-active-mode="marquee"] .ard-br__item {
	flex: 0 0 var(--ard-br-mq-item);
	inline-size: var(--ard-br-mq-item);
	margin-inline-end: var(--ard-br-mq-gap);
	direction: rtl;
}

.ard-br[data-active-mode="marquee"][data-mq-drag="1"] .ard-br__viewport {
	cursor: grab;
}

.ard-br[data-active-mode="marquee"].is-dragging .ard-br__viewport {
	cursor: grabbing;
	user-select: none;
}

.ard-br-fade-yes .ard-br[data-active-mode="marquee"] .ard-br__viewport {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--ard-br-fade), #000 calc(100% - var(--ard-br-fade)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--ard-br-fade), #000 calc(100% - var(--ard-br-fade)), transparent);
}

/* کاربری که حرکت را خاموش کرده: نوار ثابت و با دست قابل اسکرول. */
.ard-br[data-active-mode="marquee"].is-static .ard-br__viewport {
	overflow-x: auto;
	scrollbar-width: none;
}

.ard-br[data-active-mode="marquee"].is-static .ard-br__viewport::-webkit-scrollbar {
	display: none;
}

/* ============================================================
   فلش‌ها و نقطه‌ها
   ============================================================ */

.ard-br__arrow[class] {
	position: absolute;
	inset-block-start: var(--ard-br-arrow-y, var(--ard-br-arrow-auto, 50%));
	z-index: 3;
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: var(--ard-br-arrow);
	block-size: var(--ard-br-arrow);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ard-border);
	border-radius: 50%;
	background: var(--ard-base);
	color: var(--ard-primary-dark, var(--ard-text));
	font: inherit;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(var(--ard-primary-dark-rgb, 15, 23, 42), .10);
	translate: 0 -50%;
	transition: background .2s, border-color .2s, color .2s, opacity .2s;
}

.ard-br__arrow[class] svg {
	inline-size: var(--ard-br-arrow-icon);
	block-size: var(--ard-br-arrow-icon);
}

.ard-br__arrow[class]:hover {
	background: var(--ard-tint-blue);
	border-color: var(--ard-tint-blue-border);
}

.ard-br__arrow--prev[class] {
	inset-inline-start: var(--ard-br-arrow-x);
}

.ard-br__arrow--next[class] {
	inset-inline-end: var(--ard-br-arrow-x);
}

.ard-br__arrow[class][disabled] {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

.ard-br[data-active-mode="slider"]:not(.is-fit) .ard-br__arrow[class] {
	display: var(--ard-br-arrows, flex);
}

.ard-br__dots[class] {
	display: none;
	justify-content: center;
	gap: 5px;
	margin-block-start: 12px;
}

.ard-br[data-active-mode="slider"]:not(.is-fit) .ard-br__dots[class]:not(:empty) {
	display: var(--ard-br-dots, flex);
}

.ard-br__dot[class] {
	inline-size: var(--ard-br-dot);
	block-size: var(--ard-br-dot);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--ard-primary) 25%, var(--ard-base));
	font: inherit;
	cursor: pointer;
	transition: inline-size .25s, background .25s;
}

.ard-br__dot.is-active[class] {
	inline-size: var(--ard-br-dot-w);
	background: var(--ard-primary);
}

/* ============================================================
   دسترس‌پذیری
   ============================================================ */

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