/**
 * دُرشکه — اجزای مشترک رابط (DOROSHKE Theme Components، هویت کبالت روشن).
 *
 * هر قاعده زیر .dk-app (قاب افزونه) یا .dk-confirm (دیالوگ تأیید) است:
 * - قالب سایت هم کلاس‌های .dk-btn، .dk-field، .dk-tabs، .dk-row، .dk-price،
 *   .dk-badge، .dk-modal و .dk-pagination را استایل می‌دهد؛ ویژگی (۰,۲,۰) این
 *   قواعد بر (۰,۱,۰) قالب می‌چربد، بدون !important.
 * - هیچ مقدار خامی این‌جا نیست؛ همه از tokens.css می‌آید.
 * - بدون سایه (جز دیالوگ)، بدون گرادیان تزئینی، گوشه‌ها گرد با توکن شعاع.
 *
 * ترتیب بارگذاری: tokens.css → این فایل → showroom.css
 */

/* ============================================================================
   ۱. متن و پیوند
   ============================================================================ */

/* پیوند متنی. کنترل‌ها (ردیف خودرو، تب، تب‌بار، صفحه‌بندی) پیوند نیستند و رنگ
   خودشان را دارند؛ :where() ویژگی اضافه نمی‌کند تا قاعدهٔ (۰,۲,۰) خودشان بچربد. */
.dk-app a:not(.dk-btn):not(:where(.dk-row__main, .dk-tab, .dk-app__link, .dk-pagination__cell, .dk-header__link, .dk-mobile-nav__link)),
.dk-confirm a:not(.dk-btn) {
	color: var(--text-link);
	text-decoration: none;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.dk-app a:not(.dk-btn):not(:where(.dk-row__main, .dk-tab, .dk-app__link, .dk-pagination__cell, .dk-header__link, .dk-mobile-nav__link)):hover {
	color: var(--text-link-hover);
	text-decoration: underline;
}

.dk-app .dk-hint {
	color: var(--text-secondary);
	font-size: var(--text-label);
	line-height: 1.7;
	margin: 0;
}

.dk-app .dk-result-count {
	color: var(--text-secondary);
	font-size: var(--text-label);
	margin: 0 0 var(--space-2);
}

.dk-app .dk-foot-note {
	color: var(--text-secondary);
	font-size: var(--text-label);
	margin: 12px 0 0;
	text-align: center;
}

/* متن خالی ساده (بدون کارت) */
.dk-app .dk-empty {
	color: var(--text-secondary);
	font-size: var(--text-size-body);
	margin: 0;
	padding: var(--space-3);
	text-align: center;
}

/* ============================================================================
   ۲. دکمه
   ============================================================================ */

:is(.dk-app, .dk-confirm) .dk-btn {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--button-radius);
	box-shadow: none;
	color: var(--button-ghost-text);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--font-fa);
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	gap: var(--space-2);
	height: var(--button-height);
	justify-content: center;
	line-height: 1;
	margin: 0;
	padding-inline: var(--button-padding-x);
	text-decoration: none;
	transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
	white-space: nowrap;
}

:is(.dk-app, .dk-confirm) .dk-btn:hover {
	text-decoration: none;
}

:is(.dk-app, .dk-confirm) .dk-btn--sm {
	height: var(--button-height-sm);
	padding-inline: var(--space-3);
}

:is(.dk-app, .dk-confirm) .dk-btn--lg {
	height: var(--button-height-lg);
	padding-inline: var(--space-5);
}

:is(.dk-app, .dk-confirm) .dk-btn--block {
	width: 100%;
}

:is(.dk-app, .dk-confirm) .dk-btn--primary {
	background: var(--button-primary-background);
	color: var(--button-primary-text);
}

:is(.dk-app, .dk-confirm) .dk-btn--primary:hover {
	background: var(--button-primary-hover);
	color: var(--button-primary-text);
}

:is(.dk-app, .dk-confirm) .dk-btn--primary:active {
	background: var(--button-primary-pressed);
}

/* ثانویه: زمینهٔ شفاف، خط یک‌پیکسلی داخلی */
:is(.dk-app, .dk-confirm) .dk-btn--secondary {
	box-shadow: inset 0 0 0 var(--border-width) var(--button-secondary-border);
	color: var(--button-secondary-text);
}

:is(.dk-app, .dk-confirm) .dk-btn--secondary:hover {
	background: var(--button-secondary-hover);
	color: var(--button-secondary-text);
}

:is(.dk-app, .dk-confirm) .dk-btn--secondary:active {
	background: var(--button-secondary-pressed);
}

:is(.dk-app, .dk-confirm) .dk-btn--ghost {
	background: transparent;
	color: var(--button-ghost-text);
}

:is(.dk-app, .dk-confirm) .dk-btn--ghost:hover {
	background: var(--button-ghost-hover);
	color: var(--button-ghost-text);
}

/* مخرب: فقط دکمهٔ اصلیِ دیالوگ اقدام حساس */
:is(.dk-app, .dk-confirm) .dk-btn--destructive {
	background: var(--button-destructive-background);
	color: var(--button-destructive-text);
}

:is(.dk-app, .dk-confirm) .dk-btn--destructive:hover {
	background: var(--button-destructive-hover);
	color: var(--button-destructive-text);
}

:is(.dk-app, .dk-confirm) .dk-btn--destructive:active {
	background: var(--button-destructive-pressed);
}

/* غیرفعال — اندازه حفظ می‌شود تا چیدمان نپرد. */
:is(.dk-app, .dk-confirm) .dk-btn:disabled,
:is(.dk-app, .dk-confirm) .dk-btn[aria-disabled="true"] {
	background: var(--button-disabled-background);
	box-shadow: none;
	color: var(--button-disabled-text);
	cursor: not-allowed;
	pointer-events: none;
}

:is(.dk-app, .dk-confirm) .dk-btn--secondary:disabled {
	background: transparent;
	box-shadow: inset 0 0 0 var(--border-width) var(--surface-disabled);
	color: var(--text-disabled);
}

:is(.dk-app, .dk-confirm) .dk-btn--ghost:disabled {
	background: transparent;
	color: var(--text-disabled);
}

/* در حال ارسال */
:is(.dk-app, .dk-confirm) .dk-btn[aria-busy="true"] {
	pointer-events: none;
}

:is(.dk-app, .dk-confirm) .dk-btn__spinner {
	animation: dk-spin 700ms linear infinite;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: var(--radius-full);
	flex: 0 0 auto;
	height: 14px;
	width: 14px;
}

@keyframes dk-spin {
	to {
		transform: rotate(360deg);
	}
}

/* دکمهٔ فقط‌آیکون (بستن دیالوگ) */
:is(.dk-app, .dk-confirm) .dk-icon-btn {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--radius-full);
	color: var(--text-secondary);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: var(--font-en);
	font-size: 20px;
	height: var(--control-h-sm);
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background-color var(--dur-fast) var(--ease);
	width: var(--control-h-sm);
}

:is(.dk-app, .dk-confirm) .dk-icon-btn:hover {
	background: var(--surface-muted);
	color: var(--text-body);
}

/* فلش ۴۵ درجه با حاشیه؛ بدون فونت آیکون. پیش‌فرض رو به پایین (بسته). */
.dk-app .dk-chevron {
	border-block-end: 2px solid currentColor;
	border-inline-start: 2px solid currentColor;
	display: inline-block;
	flex: 0 0 auto;
	height: 8px;
	transform: rotate(-45deg) translateY(-2px);
	transition: transform var(--dur-fast) var(--ease);
	width: 8px;
}

.dk-app .is-open .dk-chevron,
.dk-app [aria-expanded="true"] .dk-chevron,
.dk-app details[open] > summary .dk-chevron {
	transform: rotate(135deg) translateY(-2px);
}

/* ============================================================================
   ۳. فرم‌ها: فیلد، ورودی، فهرست کشویی، متن چندخطی
   ============================================================================ */

.dk-app .dk-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	min-width: 0;
}

.dk-app .dk-field__label,
.dk-app .dk-field > span:first-child {
	color: var(--text-body);
	font-size: var(--text-label);
	font-weight: var(--weight-semibold);
	line-height: 1.4;
	margin: 0;
}

.dk-app .dk-field__hint,
.dk-app .dk-field small {
	color: var(--text-secondary);
	font-size: var(--text-caption);
	line-height: var(--lh-caption);
}

.dk-app .dk-field__error {
	color: var(--state-error);
	font-size: var(--text-caption);
	font-weight: var(--weight-medium);
	line-height: var(--lh-caption);
}

.dk-app .dk-req,
.dk-app .dk-field__req {
	color: var(--state-error);
	font-weight: var(--weight-semibold);
}

.dk-app .dk-input,
.dk-app .dk-select,
.dk-app .dk-textarea,
.dk-app .dk-field input:where(:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])),
.dk-app .dk-field select,
.dk-app .dk-field textarea {
	appearance: none;
	-webkit-appearance: none;
	background: var(--input-background);
	border: var(--border-width) solid var(--input-border);
	border-radius: var(--radius-sm);
	box-shadow: none;
	color: var(--input-text);
	font-family: var(--font-fa);
	font-size: var(--text-size-body);
	height: var(--input-height);
	line-height: 1.4;
	margin: 0;
	max-width: none;
	min-width: 0;
	padding-block: 0;
	padding-inline: var(--input-padding-x);
	transition: border-color var(--dur-fast) var(--ease);
	width: 100%;
}

.dk-app .dk-textarea,
.dk-app .dk-field textarea {
	height: auto;
	line-height: var(--lh-body);
	min-height: 96px;
	padding-block: 12px;
	resize: vertical;
}

.dk-app .dk-input::placeholder,
.dk-app .dk-field input::placeholder,
.dk-app .dk-field textarea::placeholder {
	color: var(--input-placeholder);
	opacity: 1;
}

.dk-app .dk-input:hover,
.dk-app .dk-select:hover,
.dk-app .dk-field input:hover,
.dk-app .dk-field select:hover,
.dk-app .dk-field textarea:hover {
	border-color: var(--input-border-hover);
}

.dk-app .dk-input:focus-visible,
.dk-app .dk-select:focus-visible,
.dk-app .dk-field input:focus-visible,
.dk-app .dk-field select:focus-visible,
.dk-app .dk-field textarea:focus-visible {
	border-color: var(--input-border-focus);
	outline: var(--focus-width) solid var(--focus-ring);
	outline-offset: var(--focus-offset);
}

.dk-app .dk-input--error,
.dk-app .dk-select--error,
.dk-app [aria-invalid="true"] {
	border-color: var(--input-border-error);
}

.dk-app .dk-input:disabled,
.dk-app .dk-select:disabled,
.dk-app .dk-field input:disabled,
.dk-app .dk-field select:disabled,
.dk-app .dk-field textarea:disabled {
	background: var(--input-disabled-background);
	color: var(--input-disabled-text);
	cursor: not-allowed;
}

.dk-app .dk-input[readonly],
.dk-app .dk-field input[readonly] {
	background: var(--surface-muted);
}

/* فلش فهرست کشویی: دو مثلث ۴۵ درجه، بدون انحنا. */
.dk-app .dk-select,
.dk-app .dk-field select {
	background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
	background-position: var(--space-3) calc(50% - 2px), calc(var(--space-3) + 5px) calc(50% - 2px);
	background-repeat: no-repeat;
	background-size: 5px 5px, 5px 5px;
	padding-inline-end: calc(var(--space-3) * 2 + 8px);
}

/* ورودی‌های لاتین (VIN، قیمت، تاریخ، موبایل) چپ‌چین می‌مانند. */
.dk-app .dk-input--latin,
.dk-app .dk-field input[dir="ltr"],
.dk-app .dk-field textarea[dir="ltr"],
.dk-app .dk-field input[type="number"],
.dk-app .dk-field input[type="date"] {
	direction: ltr;
	font-family: var(--font-en);
	font-variant-numeric: tabular-nums;
	text-align: start;
}

.dk-app input[type="checkbox"],
.dk-app input[type="radio"] {
	accent-color: var(--surface-brand);
	height: var(--checkbox-size);
	margin: 0;
	width: var(--checkbox-size);
}

/* ============================================================================
   ۴. تب‌ها، خرده‌نان، صفحه‌بندی
   ============================================================================ */

.dk-app .dk-tabs {
	background: none;
	border: 0;
	border-bottom: var(--border-width) solid var(--border-default);
	display: flex;
	gap: var(--space-4);
	margin: 0 0 var(--space-3);
	overflow-x: auto;
	padding: 0;
	scrollbar-width: none;
}

.dk-app .dk-tabs::-webkit-scrollbar {
	display: none;
}

.dk-app .dk-tab {
	align-items: center;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--text-secondary);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: var(--font-fa);
	font-size: var(--text-button);
	font-weight: var(--weight-medium);
	gap: var(--space-1);
	height: var(--control-h);
	margin: 0 0 calc(var(--border-width) * -1);
	padding: 0;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
	white-space: nowrap;
}

.dk-app .dk-tab:hover {
	color: var(--text-body);
	text-decoration: none;
}

.dk-app .dk-tab.is-active,
.dk-app .dk-tab[aria-selected="true"] {
	border-bottom-color: var(--navigation-active-indicator);
	color: var(--text-body);
	font-weight: var(--weight-semibold);
}

.dk-app .dk-tab:focus-visible {
	outline-offset: calc(var(--focus-offset) * -1);
}

.dk-app .dk-tab__count {
	color: var(--text-secondary);
	font-family: var(--font-fa);
	font-size: var(--text-caption);
	font-weight: var(--weight-regular);
	margin-inline-start: var(--space-1);
}

.dk-app .dk-breadcrumb {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: var(--text-caption);
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
}

.dk-app .dk-breadcrumb__sep {
	color: var(--text-secondary);
	direction: ltr;
	unicode-bidi: isolate;
}

.dk-app .dk-breadcrumb [aria-current="page"] {
	color: var(--text-body);
	font-weight: var(--weight-semibold);
}

.dk-app .dk-pagination {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: var(--space-3) 0 0;
}

.dk-app .dk-pagination__cell {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--radius-sm);
	box-shadow: inset 0 0 0 var(--border-width) var(--border-default);
	color: var(--text-body);
	display: inline-flex;
	font-family: var(--font-fa);
	font-size: var(--text-label);
	font-variant-numeric: tabular-nums;
	height: var(--control-h-sm);
	justify-content: center;
	min-width: var(--control-h-sm);
	padding-inline: var(--space-2);
	text-decoration: none;
}

.dk-app .dk-pagination__cell:hover {
	background: var(--surface-brand-wash);
	color: var(--text-body);
	text-decoration: none;
}

.dk-app .dk-pagination__cell[aria-current="page"] {
	background: var(--surface-brand);
	box-shadow: none;
	color: var(--text-on-brand);
	font-weight: var(--weight-bold);
}

.dk-app .dk-pagination__gap {
	box-shadow: none;
	color: var(--text-secondary);
}

/* ============================================================================
   ۵. برچسب‌ها و نشان‌های وضعیت
   ============================================================================ */

.dk-app .dk-tag,
.dk-app .dk-unit__state,
.dk-app .dk-step {
	align-items: center;
	background: transparent;
	border: var(--border-width) solid var(--chip-border);
	border-radius: var(--radius-xs);
	color: var(--text-secondary);
	display: inline-flex;
	font-size: var(--chip-font-size);
	font-weight: var(--weight-medium);
	gap: 6px;
	height: var(--chip-height);
	line-height: 1;
	padding-inline: var(--space-2);
	white-space: nowrap;
}

.dk-app .dk-tag--pending {
	background: var(--state-warning-bg);
	border-color: var(--state-warning);
	color: var(--state-warning);
}

.dk-app .dk-tag--error {
	background: var(--state-error-bg);
	border-color: var(--state-error);
	color: var(--state-error);
}

.dk-app .dk-tag--ok,
.dk-app .dk-unit__state--active {
	background: var(--state-success-bg);
	border-color: var(--state-success);
	color: var(--state-success);
}

/* ============================================================================
   ۶. پیام‌ها (alert / notice)
   ============================================================================ */

.dk-app .dk-alert,
.dk-app .dk-notice,
.dk-app .dk-note {
	background: var(--surface-card);
	border: var(--alert-border-width) solid var(--border-default);
	border-radius: var(--radius-sm);
	color: var(--text-body);
	font-size: var(--text-size-body);
	line-height: var(--lh-body);
	margin: 0 0 var(--space-3);
	padding: var(--alert-padding);
}

.dk-app .dk-alert--success,
.dk-app .dk-notice--ok,
.dk-app .dk-note--ok {
	background: var(--state-success-bg);
	border-color: var(--state-success);
}

.dk-app .dk-alert--error,
.dk-app .dk-notice--error,
.dk-app .dk-note--error {
	background: var(--state-error-bg);
	border-color: var(--state-error);
}

.dk-app .dk-alert--warning,
.dk-app .dk-notice--warn {
	background: var(--state-warning-bg);
	border-color: var(--state-warning);
}

.dk-app .dk-alert--info,
.dk-app .dk-notice--info {
	background: var(--state-info-bg);
	border-color: var(--state-info);
}

.dk-app .dk-alert strong,
.dk-app .dk-notice strong,
.dk-app .dk-alert__title {
	font-weight: var(--weight-bold);
}

.dk-app .dk-alert--success strong,
.dk-app .dk-notice--ok strong {
	color: var(--state-success);
}

.dk-app .dk-alert--error strong,
.dk-app .dk-notice--error strong {
	color: var(--state-error);
}

.dk-app .dk-alert--warning strong,
.dk-app .dk-notice--warn strong,
.dk-app .dk-notice--warn small {
	color: var(--state-warning);
}

.dk-app .dk-notice--warn small {
	display: block;
	font-size: var(--text-label);
	margin-top: 6px;
}

.dk-app .dk-alert--stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.dk-app .dk-alert__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.dk-app .dk-alert--inline {
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
}

/* اعلان مهمان: یک جملهٔ کوتاه، یک‌بار در صفحه. دکمهٔ عضویت و ورود در سرصفحه‌اند. */
.dk-app .dk-notice--guest {
	background: var(--surface-panel);
	color: var(--text-body);
}

.dk-app .dk-notice a:not(.dk-btn),
.dk-app .dk-alert a:not(.dk-btn) {
	font-weight: var(--weight-semibold);
}

.dk-app .dk-notice__sep {
	color: var(--text-secondary);
}

.dk-app .dk-note {
	border-radius: var(--radius-md);
	padding: var(--space-4);
	text-align: center;
}

.dk-app .dk-note p {
	margin: 0 0 var(--space-2);
}

.dk-app .dk-note p:last-child {
	margin-bottom: 0;
}

/* ============================================================================
   ۷. حالت‌ها: کارت وضعیت، اسکلت بارگذاری
   ============================================================================ */

.dk-app .dk-state {
	align-items: center;
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-md);
	color: var(--text-body);
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 40px var(--space-4);
	text-align: center;
}

.dk-app .dk-state__title {
	font-size: var(--text-h3);
	font-weight: var(--weight-bold);
	line-height: var(--lh-h3);
	margin: 0;
}

.dk-app .dk-state__desc {
	color: var(--text-secondary);
	font-size: var(--text-size-body);
	line-height: var(--lh-body);
	margin: 0;
	max-width: 40ch;
}

.dk-app .dk-state__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
	margin-top: var(--space-1);
}

/* حالت فشرده: خالی، بدون نتیجه، محدود — بدون جدول خالی و بدون فضای اضافه */
.dk-app .dk-state--compact {
	gap: 6px;
	margin: 0 0 var(--space-3);
	padding: var(--space-4) var(--space-3);
}

.dk-app .dk-state--compact .dk-state__title {
	font-size: var(--text-size-body);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-body);
}

.dk-app .dk-state--compact .dk-state__desc {
	font-size: var(--text-label);
}

.dk-app .dk-skeleton {
	background: var(--surface-fill);
	border-radius: var(--radius-xs);
	display: block;
	overflow: hidden;
	position: relative;
}

.dk-app .dk-skeleton::after {
	animation: dk-sweep-rtl 1.2s linear infinite;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	content: "";
	inset: 0;
	position: absolute;
}

@keyframes dk-sweep-rtl {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(-100%);
	}
}

/* اسکلت با تناسب همان ردیف؛ ارتفاع ثابت می‌ماند تا محتوا نپرد. */
.dk-app .dk-skeleton-row {
	align-items: center;
	display: flex;
	gap: 12px;
	padding: 12px var(--space-3);
}

.dk-app .dk-skeleton-row + .dk-skeleton-row {
	border-top: var(--border-width) solid var(--border-default);
}

.dk-app .dk-skeleton-row__thumb {
	flex: 0 0 auto;
	height: 56px;
	width: 84px;
}

.dk-app .dk-skeleton-row__lines {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}

.dk-app .dk-skeleton-row__lines .dk-skeleton:first-child {
	height: 14px;
	width: 55%;
}

.dk-app .dk-skeleton-row__lines .dk-skeleton:last-child {
	height: 12px;
	width: 30%;
}

.dk-app .dk-skeleton-row__price {
	flex: 0 0 auto;
	height: 16px;
	width: 72px;
}

/* ============================================================================
   ۸. قیمت و قاب تصویر
   ============================================================================ */

/* در قالب، .dk-price یک ستون flex است؛ این‌جا یک رقم درون‌خطی. */
.dk-app .dk-price {
	direction: ltr;
	display: inline-block;
	flex-direction: row;
	font-family: var(--font-en);
	font-variant-numeric: tabular-nums;
	font-weight: var(--price-figure-weight);
	gap: 0;
	unicode-bidi: isolate;
}

/* قیمت قفل برای بیننده‌ای که مجوز ندارد: سه نقطه، نه متن تکراری. */
.dk-app .dk-price--locked {
	color: var(--text-disabled);
	font-weight: var(--weight-semibold);
	letter-spacing: 2px;
}

.dk-app .dk-thumb {
	background: var(--image-frame-background);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--thumb-radius);
	display: block;
	flex: 0 0 auto;
	height: 56px;
	overflow: hidden;
	position: relative;
	width: 84px;
}

/* عکس کامل در قاب؛ هیچ برش یا کشیدگی */
.dk-app .dk-thumb img {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

/* بدون عکس: قاب خنثی و عمدی — طرح خطی خودرو + برچسب (بدون فونت آیکون) */
.dk-app .dk-thumb__empty {
	align-items: center;
	background: var(--surface-fill);
	color: var(--text-secondary);
	display: flex;
	flex-direction: column;
	gap: 2px;
	height: 100%;
	justify-content: center;
	line-height: 1.3;
	width: 100%;
}

.dk-app .dk-thumb__icon {
	display: block;
	flex: 0 0 auto;
	height: 20px;
	width: 20px;
}

.dk-app .dk-thumb__label {
	font-size: var(--text-caption);
	line-height: 1.3;
	white-space: nowrap;
}

.dk-app .dk-image {
	background: var(--image-frame-background);
	border-radius: var(--image-frame-radius);
	display: block;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.dk-app .dk-image--3x2 {
	aspect-ratio: 3 / 2;
}

.dk-app .dk-image img,
.dk-app .dk-image .dk-thumb__empty {
	display: block;
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.dk-app .dk-image img {
	object-fit: contain;
}

.dk-app .dk-image .dk-thumb__empty {
	display: flex;
	gap: 6px;
}

.dk-app .dk-image .dk-thumb__icon {
	height: 32px;
	width: 32px;
}

.dk-app .dk-image__label {
	align-items: center;
	background: var(--surface-inverse);
	border-radius: var(--radius-xs);
	bottom: var(--space-2);
	color: var(--text-on-inverse);
	display: inline-flex;
	font-size: var(--chip-font-size);
	font-weight: var(--weight-semibold);
	height: var(--chip-height);
	inset-inline-start: var(--space-2);
	padding-inline: var(--space-2);
	position: absolute;
}

/* ============================================================================
   ۹. ناوبری افزونه: تب‌بار زیر سرصفحهٔ قالب یا خرده‌نان
   ============================================================================ */

.dk-app__nav {
	background: var(--navigation-background);
	border-bottom: var(--border-width) solid var(--navigation-border);
	margin: 0 0 var(--space-5);
}

.dk-app__nav-inner {
	align-items: stretch;
	display: flex;
	gap: var(--space-4);
	margin-inline: auto;
	max-width: var(--grid-max);
	overflow-x: auto;
	scrollbar-width: none;
}

.dk-app__nav-inner::-webkit-scrollbar {
	display: none;
}

.dk-app .dk-app__link {
	align-items: center;
	border-bottom: 2px solid transparent;
	color: var(--text-secondary);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: var(--text-size-body);
	font-weight: var(--weight-medium);
	height: 48px;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
	white-space: nowrap;
}

.dk-app .dk-app__link:hover,
.dk-app .dk-app__link:focus-visible {
	color: var(--text-body);
	text-decoration: none;
}

.dk-app .dk-app__link.is-active {
	border-bottom-color: var(--navigation-active-indicator);
	color: var(--text-body);
	font-weight: var(--weight-semibold);
}

.dk-app__account {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: var(--space-3);
	margin-inline-start: auto;
}

/* اقدام‌های حساب در تب‌بار (فقط قالب‌های غیر DOROSHKE): «ورود» پیوند ثانویه، «درخواست عضویت» دکمهٔ اصلی */
.dk-app .dk-app__account .dk-header__signin {
	color: var(--text-link);
	font-size: var(--text-size-body);
	font-weight: var(--weight-medium);
	text-decoration: none;
}

.dk-app .dk-app__account .dk-header__signin:hover {
	color: var(--text-link-hover);
	text-decoration: underline;
}

.dk-app .dk-app__account .dk-header__user {
	color: var(--text-secondary);
	font-size: var(--text-label);
}

.dk-app .dk-app__account .dk-header__logout {
	color: var(--text-link);
	font-size: var(--text-label);
	text-decoration: none;
}

/* ============================================================================
   ۱۰. دیالوگ تأیید اقدام حساس (.dk-confirm) — تنها عنصر سایه‌دار
   ============================================================================ */

.dk-confirm {
	align-items: center;
	display: flex;
	font-family: var(--font-fa);
	font-size: var(--text-size-body);
	inset: 0;
	justify-content: center;
	line-height: var(--lh-body);
	padding: var(--space-3);
	position: fixed;
	z-index: 100000;
}

.dk-confirm__backdrop {
	background: var(--overlay-scrim);
	inset: 0;
	position: absolute;
}

.dk-confirm__box {
	animation: dk-modal-in var(--dur-base) var(--ease);
	background: var(--overlay-background);
	border: var(--border-width) solid var(--overlay-border);
	border-radius: var(--overlay-radius);
	box-shadow: var(--overlay-shadow);
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - var(--space-5));
	max-width: var(--overlay-max-width);
	position: relative;
	width: 100%;
}

@keyframes dk-modal-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.dk-confirm__head {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 20px var(--space-4) var(--space-2);
}

.dk-confirm__title {
	color: var(--text-body);
	font-family: var(--font-fa);
	font-size: 18px;
	font-weight: var(--weight-bold);
	line-height: 1.5;
	margin: 0;
}

.dk-confirm__scroll {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	overflow: auto;
	padding: 0 var(--space-4) 20px;
}

.dk-confirm__body {
	color: var(--text-body);
	margin: 0;
}

.dk-confirm__facts {
	background: var(--surface-page);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-sm);
	display: grid;
	font-size: var(--text-label);
	gap: var(--space-1) var(--space-3);
	grid-template-columns: auto minmax(0, 1fr);
	margin: 0;
	padding: 12px var(--space-3);
}

.dk-confirm__fact {
	display: contents;
}

.dk-confirm__fact dt {
	color: var(--text-secondary);
	margin: 0;
}

.dk-confirm__fact dd {
	font-weight: var(--weight-medium);
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
	unicode-bidi: plaintext;
}

.dk-confirm__fact:first-child dd {
	font-weight: var(--weight-semibold);
}

.dk-confirm__actions {
	border-top: var(--border-width) solid var(--border-default);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: flex-start;
	padding: var(--space-3) var(--space-4) 20px;
}

/* موبایل: دیالوگ به شکل صفحهٔ پایینی */
@media (max-width: 600px) {
	.dk-confirm {
		align-items: flex-end;
		padding: 0;
	}

	.dk-confirm__box {
		animation-name: dk-sheet-in;
		border-bottom: 0;
		border-radius: var(--overlay-radius) var(--overlay-radius) 0 0;
		max-height: 92vh;
		max-width: none;
	}

	.dk-confirm__actions .dk-btn {
		flex: 1 1 0;
		height: var(--control-h);
	}
}

@keyframes dk-sheet-in {
	from {
		transform: translateY(100%);
	}

	to {
		transform: none;
	}
}