/* =========================================================
   K-Category – استایل پایه
   همه مقادیر از طریق متغیرهای CSS تنظیم می‌شوند و المنتور
   این متغیرها را از روی کنترل‌های پنل می‌نویسد.
   ========================================================= */

.kc {
	--kc-gap: 10px;
	--kc-edge: 0px;
	--kc-item-w: 82px;
	--kc-align: stretch;
	--kc-head-gap: 12px;

	--kc-icon-size: 22px;
	--kc-icon-color: currentColor;
	--kc-icon-gap: 8px;
	--kc-more-color: #12a150;
	--kc-more-hover: #0d7c3d;

	--kc-img-w: 72px;
	--kc-img-h: 72px;
	--kc-ratio: 1 / 1;
	--kc-fit: cover;
	--kc-img-bg: transparent;
	--kc-hover-y: -3px;

	--kc-cap-gap: 6px;
	--kc-cap-color: #222;
	--kc-cap-lines: 1;
	--kc-cap-align: center;

	--kc-card-bg: #fff;
	--kc-foot-bg: transparent;
	--kc-logo-h: 22px;
	--kc-name-color: #16181c;
	--kc-action-color: #16181c;

	--kc-nav-size: 36px;
	--kc-nav-color: #16181c;
	--kc-nav-bg: rgba(255, 255, 255, .92);

	width: 100%;
	box-sizing: border-box;

	--kc-bleed: 0px;
}

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

/* ---------------- سربرگ ---------------- */
.kc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: var(--kc-head-gap);
}

.kc-title {
	display: flex;
	align-items: center;
	gap: var(--kc-icon-gap);
	margin: 0;
	line-height: 1.4;
}

.kc-title--before { flex-direction: row-reverse; justify-content: flex-end; }

.kc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--kc-icon-size);
	height: var(--kc-icon-size);
	color: var(--kc-icon-color);
	flex: 0 0 auto;
	font-size: var(--kc-icon-size);
}

.kc-icon svg,
.kc-icon img { width: 100%; height: 100%; display: block; object-fit: contain; fill: currentColor; }

.kc-more {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--kc-more-color);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease;
}

.kc-more:hover { color: var(--kc-more-hover); }
.kc-chev { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.kc[dir="ltr"] .kc-chev { transform: scaleX(-1); }

/* ---------------- ریل اسلایدر ---------------- */
.kc-viewport { position: relative; width: 100%; }

.kc-track {
	display: flex;
	align-items: var(--kc-align);
	gap: var(--kc-gap);
	scroll-padding-inline-start: var(--kc-edge);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.kc-track::-webkit-scrollbar { display: none; }

.kc[data-snap="proximity"] .kc-track { scroll-snap-type: x proximity; }
.kc[data-snap="mandatory"] .kc-track { scroll-snap-type: x mandatory; }
.kc[data-snap="proximity"] .kc-item,
.kc[data-snap="mandatory"] .kc-item { scroll-snap-align: start; }

.kc-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.kc[data-drag="yes"] .kc-track { cursor: grab; }

.kc-item {
	width: var(--kc-item-w);
	flex: 0 0 auto;
}

.kc-viewport { margin-inline: calc(var(--kc-bleed) * -1); }

.kc-item:first-child { margin-inline-start: var(--kc-edge); }
.kc-item:last-child  { margin-inline-end: var(--kc-edge-end, var(--kc-edge)); }

/* عرض آیتم بر اساس محتوا (تصویر) – برای هر دستگاه جداگانه */
.kc-w-desktop-auto .kc-item { width: auto; }

@media (max-width: 1024px) {
	.kc-w-tablet-auto .kc-item  { width: auto; }
	.kc-w-tablet-fixed .kc-item { width: var(--kc-item-w); }
}

@media (max-width: 767px) {
	.kc-w-mobile-auto .kc-item  { width: auto; }
	.kc-w-mobile-fixed .kc-item { width: var(--kc-item-w); }
}

/* ---------------- کارت ---------------- */
.kc-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.kc[data-layout="icon"] .kc-card {
	align-items: center;
	gap: var(--kc-cap-gap);
}

.kc[data-layout="card"] .kc-card {
	background: var(--kc-card-bg);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.kc-card:focus-visible {
	outline: 2px solid var(--kc-more-color);
	outline-offset: 3px;
}

/* ---------------- تصویر ---------------- */
.kc-media {
	display: block;
	background: var(--kc-img-bg);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
	flex: 0 0 auto;
}

.kc-media img {
	display: block;
	border-radius: inherit;
}

/* ۱) عرض و ارتفاع دستی */
.kc[data-size="fixed"] .kc-media { width: var(--kc-img-w); height: var(--kc-img-h); }
.kc[data-size="fixed"] .kc-media img { width: 100%; height: 100%; object-fit: var(--kc-fit); }

/* ۲) نسبت تصویر – عرض کامل آیتم، ارتفاع از روی نسبت */
.kc[data-size="ratio"] .kc-media { width: 100%; aspect-ratio: var(--kc-ratio); }
.kc[data-size="ratio"] .kc-media img { width: 100%; height: 100%; object-fit: var(--kc-fit); }

/* ۳) اندازه طبیعی عکس – اگر ارتفاع بدهید، عرض خودکار متناسب می‌شود */
.kc[data-size="auto"] .kc-media { width: auto; height: auto; }
.kc[data-size="auto"] .kc-media img { width: auto; height: var(--kc-img-h); max-width: none; }

.kc[data-layout="icon"] .kc-card:hover .kc-media { transform: translateY(var(--kc-hover-y)); }
.kc[data-layout="card"] .kc-card:hover { transform: translateY(var(--kc-hover-y)); }

/* ---------------- زیرنویس (چیدمان آیکونی) ---------------- */
.kc-cap {
	display: -webkit-box;
	-webkit-line-clamp: var(--kc-cap-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
	width: 100%;
	color: var(--kc-cap-color);
	text-align: var(--kc-cap-align);
	line-height: 1.7;
}

/* ---------------- نوار پایین (چیدمان کارتی) ---------------- */
.kc-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: var(--kc-foot-bg);
	margin-top: auto;
}

.kc-logo {
	height: var(--kc-logo-h);
	width: auto;
	max-width: 60%;
	object-fit: contain;
	display: block;
}

.kc-name { color: var(--kc-name-color); }

.kc-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--kc-action-color);
	white-space: nowrap;
}

.kc-arrow { width: 1.1em; height: 1.1em; flex: 0 0 auto; transition: transform .2s ease; }
.kc[dir="ltr"] .kc-arrow { transform: scaleX(-1); }
.kc-card:hover .kc-arrow { transform: translateX(-3px); }
.kc[dir="ltr"] .kc-card:hover .kc-arrow { transform: scaleX(-1) translateX(-3px); }

/* ---------------- دکمه‌های ناوبری ---------------- */
.kc-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--kc-nav-size);
	height: var(--kc-nav-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--kc-nav-bg);
	color: var(--kc-nav-color);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
	cursor: pointer;
	z-index: 2;
	transition: opacity .2s ease;
}

.kc-nav svg { width: 55%; height: 55%; }
.kc-nav--prev { inset-inline-start: 4px; }
.kc-nav--next { inset-inline-end: 4px; }
.kc-nav[disabled] { opacity: 0; pointer-events: none; }
.kc[dir="ltr"] .kc-nav svg { transform: scaleX(-1); }

@media (max-width: 767px) {
	.kc[data-arrows-mobi="no"] .kc-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.kc-media,
	.kc-card,
	.kc-arrow { transition: none; }
	.kc-card:hover .kc-media,
	.kc-card:hover { transform: none; }
}