/* ---------------------------------------------------------------------------
 * Mihan Melk — پیام کوتاه، پنجره، نوار مقایسه و فرم گزارش
 * ------------------------------------------------------------------------ */

/* ---------- پیام کوتاه ---------- */

.mm-toasts {
	position: fixed;
	inset-block-end: 24px;
	inset-inline-start: 24px;
	z-index: 9999;
	display: grid;
	gap: 10px;
	max-width: min(360px, calc(100vw - 48px));
	pointer-events: none;
}

.mm-toast {
	padding: 12px 16px;
	border-radius: var(--mm-radius-md);
	background: var(--mm-gray-900);
	color: var(--mm-white);
	font-size: var(--mm-fs-sm);
	line-height: 22px;
	box-shadow: var(--mm-shadow-lg);
	animation: mm-toast-in .22s ease both;
}

.mm-toast--ok    { background: #15803d; }
.mm-toast--warn  { background: #a16207; }
.mm-toast--error { background: #b91c1c; }

.mm-toast.is-out {
	animation: mm-toast-out .3s ease both;
}

@keyframes mm-toast-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@keyframes mm-toast-out {
	to { opacity: 0; transform: translateY(8px); }
}

/* ---------- پنجره ---------- */

body.mm-modal-open {
	overflow: hidden;
}

.mm-modal {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.mm-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 4, 4, .55);
	animation: mm-fade .2s ease both;
}

.mm-modal__box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(1100px, 100%);
	max-height: calc(100vh - 48px);
	background: var(--mm-surface);
	border-radius: var(--mm-radius-xl);
	box-shadow: var(--mm-shadow-lg);
	overflow: hidden;
	animation: mm-pop .22s ease both;
}

@keyframes mm-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes mm-pop {
	from { opacity: 0; transform: scale(.97) translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.mm-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--mm-border);
}

.mm-modal__title {
	margin: 0;
	font-size: var(--mm-fs-lg);
	font-weight: var(--mm-fw-bold);
}

.mm-modal__close {
	width: 36px;
	height: 36px;
	flex: none;
	border: 0;
	border-radius: var(--mm-radius-md);
	background: var(--mm-surface-soft);
	font-size: 22px;
	line-height: 1;
	color: var(--mm-text-muted);
	cursor: pointer;
	transition: background-color var(--mm-transition), color var(--mm-transition);
}

.mm-modal__close:hover {
	background: var(--mm-border);
	color: var(--mm-text);
}

.mm-modal__body {
	padding: 20px;
	overflow: auto;
}

.mm-modal__loading {
	margin: 0;
	padding: 32px 0;
	text-align: center;
	color: var(--mm-text-muted);
}

/* ---------- جدول مقایسه ---------- */

.mm-compare__wrap {
	overflow-x: auto;
}

.mm-compare__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: var(--mm-fs-sm);
}

.mm-compare__table th,
.mm-compare__table td {
	padding: 12px 14px;
	border: 1px solid var(--mm-border);
	text-align: start;
	vertical-align: middle;
}

/*
 * عرض ستون‌ها بسته می‌شود تا با دو ملک، تصویرِ سربرگ نصف پنجره را نگیرد.
 */
.mm-compare__table thead th {
	background: var(--mm-surface-soft);
	vertical-align: top;
	width: 240px;
	min-width: 200px;
}

.mm-compare__corner {
	width: 150px;
	min-width: 130px;
}

.mm-compare__table tbody th {
	background: var(--mm-surface-soft);
	font-weight: var(--mm-fw-semibold);
	white-space: nowrap;
}

.mm-compare__table tbody tr:nth-child(even) td {
	background: rgba(249, 250, 252, .6);
}

.mm-compare__head {
	display: grid;
	gap: 8px;
	color: var(--mm-text);
}

.mm-compare__head img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--mm-radius-sm);
}

.mm-compare__head span {
	font-weight: var(--mm-fw-semibold);
	line-height: 20px;
}

.mm-compare__head:hover span {
	color: var(--mm-primary);
}

.mm-compare__drop {
	margin-top: 8px;
	padding: 4px 10px;
	border: 1px solid var(--mm-border-strong);
	border-radius: var(--mm-radius-sm);
	background: transparent;
	font: inherit;
	font-size: var(--mm-fs-xs);
	color: var(--mm-danger);
	cursor: pointer;
}

.mm-compare__drop:hover {
	border-color: var(--mm-danger);
}

/* ---------- نوار شناور مقایسه ---------- */

.mm-comparebar {
	position: fixed;
	inset-block-end: 24px;
	inset-inline-end: 24px;
	z-index: 9997;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: var(--mm-radius-xl);
	background: var(--mm-surface);
	box-shadow: var(--mm-shadow-lg);
	border: 1px solid var(--mm-border);
	animation: mm-toast-in .22s ease both;
}

.mm-comparebar__count {
	font-size: var(--mm-fs-sm);
	font-weight: var(--mm-fw-medium);
	white-space: nowrap;
}

.mm-comparebar__clear {
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--mm-fs-xs);
	color: var(--mm-text-muted);
	cursor: pointer;
	text-decoration: underline;
}

.mm-comparebar__clear:hover {
	color: var(--mm-danger);
}

/* ---------- حالت فعال دکمه‌های ابزار ---------- */

.mm-single__tool.is-on {
	border-color: var(--mm-accent);
	color: var(--mm-accent);
}

.mm-single__tool.is-on svg {
	color: var(--mm-accent);
}

/* ---------- فرم گزارش ---------- */

.mm-reportform {
	display: grid;
	gap: 16px;
}

.mm-reportform__note {
	margin: 0;
	padding: 10px 14px;
	border-radius: var(--mm-radius-md);
	font-size: var(--mm-fs-sm);
}

.mm-reportform__note.is-error {
	background: rgba(239, 68, 68, .08);
	color: #b91c1c;
}

.mm-reportform .mm-btn {
	justify-self: start;
}

/* ---------- واکنش‌گرایی ---------- */

@media (max-width: 560px) {
	.mm-modal {
		padding: 12px;
	}

	.mm-comparebar,
	.mm-toasts {
		inset-inline: 12px;
	}

	.mm-comparebar {
		justify-content: space-between;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mm-toast,
	.mm-modal__backdrop,
	.mm-modal__box,
	.mm-comparebar {
		animation: none;
	}
}