/*
 * ModVault — слой магазина доступов: тарифы, статусы, ключи, подписки,
 * переключатель языка, SEO-блоки, аккордеон вопросов.
 * Подключается после components.css.
 */

/* ============================================================= Статус === */

.mv-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 22px;
	padding-inline: var(--mv-space-2);
	border-radius: var(--mv-radius-xs);
	background: var(--mv-surface-3);
	color: var(--mv-text-2);
	font-size: var(--mv-fs-xs);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.mv-status__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}

@supports not (background: color-mix(in srgb, red 20%, transparent)) {
	.mv-status__dot {
		box-shadow: none;
	}
}

.mv-status--success {
	background: var(--mv-accent-soft);
	color: var(--mv-accent);
}

.mv-status--warn {
	background: var(--mv-warn-soft);
	color: var(--mv-warn);
}

.mv-status--danger {
	background: var(--mv-danger-soft);
	color: var(--mv-danger);
}

.mv-status__note {
	display: block;
	margin-top: var(--mv-space-2);
	color: var(--mv-muted);
	font-size: var(--mv-fs-xs);
	font-weight: 400;
	white-space: normal;
}

.mv-card__media .mv-status {
	backdrop-filter: blur(6px);
}

.mv-badge--owned {
	background: var(--mv-accent);
	color: var(--mv-on-accent);
}

/* Плитки-счётчики статусов на главной. */

.mv-status-tile {
	display: grid;
	gap: var(--mv-space-1);
	padding: var(--mv-space-5);
	border: 1px solid var(--mv-border);
	border-radius: var(--mv-radius-md);
	background: var(--mv-surface);
	transition: border-color var(--mv-t-fast), transform var(--mv-t-fast);
}

.mv-status-tile:hover {
	transform: translateY(-2px);
}

.mv-status-tile__count {
	font-family: var(--mv-font-display);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}

.mv-status-tile__label {
	color: var(--mv-muted);
	font-size: var(--mv-fs-sm);
}

.mv-status-tile--success {
	border-color: rgba(0, 229, 160, 0.35);
}

.mv-status-tile--success .mv-status-tile__count {
	color: var(--mv-accent);
}

.mv-status-tile--warn {
	border-color: rgba(255, 177, 61, 0.35);
}

.mv-status-tile--warn .mv-status-tile__count {
	color: var(--mv-warn);
}

.mv-status-tile--danger {
	border-color: rgba(255, 92, 92, 0.35);
}

.mv-status-tile--danger .mv-status-tile__count {
	color: var(--mv-danger);
}

/* ============================================================= Цена ==== */

.mv-price__from {
	color: var(--mv-muted);
	font-family: var(--mv-font-sans);
	font-size: var(--mv-fs-xs);
	font-weight: 400;
}

.mv-price--none .mv-price__now {
	color: var(--mv-muted);
	font-size: 1rem;
}

/* ==================================================== Сроки в карточке == */

.mv-card__periods {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mv-card__periods li {
	margin: 0;
}

.mv-card__period {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding-inline: 7px;
	border: 1px solid var(--mv-border);
	border-radius: var(--mv-radius-xs);
	background: var(--mv-bg-2);
	color: var(--mv-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.mv-card__game {
	color: var(--mv-muted);
	font-size: var(--mv-fs-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.mv-card__game:hover {
	color: var(--mv-primary);
}

.mv-card__pricing {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mv-space-3);
	min-width: 0;
}

/* ========================================================== Тарифы ===== */

.mv-plans-pick {
	display: grid;
	gap: var(--mv-space-2);
	margin: 0;
	padding: 0;
	border: 0;
}

.mv-plans-pick__legend {
	margin-bottom: var(--mv-space-2);
	padding: 0;
	color: var(--mv-text-2);
	font-size: var(--mv-fs-sm);
	font-weight: 600;
}

.mv-plan {
	display: block;
	cursor: pointer;
}

.mv-plan input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.mv-plan__box {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--mv-space-2) var(--mv-space-3);
	padding: var(--mv-space-3) var(--mv-space-4);
	border: 1px solid var(--mv-border);
	border-radius: var(--mv-radius-sm);
	background: var(--mv-surface-2);
	transition: border-color var(--mv-t-fast), background-color var(--mv-t-fast);
}

.mv-plan:hover .mv-plan__box {
	border-color: var(--mv-border-strong);
}

.mv-plan input:checked + .mv-plan__box {
	border-color: var(--mv-primary);
	background: var(--mv-primary-soft);
	box-shadow: inset 0 0 0 1px var(--mv-primary);
}

.mv-plan input:focus-visible + .mv-plan__box {
	box-shadow: var(--mv-ring);
}

.mv-plan__period {
	color: var(--mv-text);
	font-weight: 600;
}

.mv-plan__price {
	color: var(--mv-text);
	font-family: var(--mv-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

.mv-plan__old {
	grid-column: 2;
	color: var(--mv-muted);
	font-size: var(--mv-fs-xs);
	text-align: right;
}

.mv-plan__saving {
	grid-column: 1;
	justify-self: start;
	padding: 2px 7px;
	border-radius: var(--mv-radius-xs);
	background: var(--mv-accent-soft);
	color: var(--mv-accent);
	font-size: 0.6875rem;
	font-weight: 700;
}

.mv-plan__note {
	grid-column: 1 / -1;
	color: var(--mv-muted);
	font-size: var(--mv-fs-xs);
}

/* ======================================================== Блок покупки == */

.mv-buybox__head {
	padding-bottom: var(--mv-space-4);
	border-bottom: 1px solid var(--mv-border);
}

.mv-buybox__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mv-space-4);
	padding-top: var(--mv-space-4);
	border-top: 1px solid var(--mv-border);
}

.mv-buybox__total-label {
	color: var(--mv-muted);
	font-size: var(--mv-fs-sm);
}

.mv-buybox__total-value {
	font-family: var(--mv-font-display);
	font-size: 1.75rem;
	font-weight: 700;
}

.mv-buybox__buy,
.mv-buybox__blocked {
	display: grid;
	gap: var(--mv-space-4);
}

.mv-panel--trust .mv-guarantees {
	margin-bottom: var(--mv-space-4);
}

/* ===================================================== Активный доступ == */

.mv-access {
	display: grid;
	gap: var(--mv-space-3);
	padding: var(--mv-space-4);
	border: 1px solid rgba(0, 229, 160, 0.32);
	border-radius: var(--mv-radius-sm);
	background: var(--mv-accent-soft);
}

.mv-access__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mv-space-3);
}

.mv-access__label {
	color: var(--mv-accent);
	font-size: var(--mv-fs-sm);
	font-weight: 700;
}

.mv-access__until {
	margin: 0;
	color: var(--mv-text-2);
	font-size: var(--mv-fs-xs);
}

.mv-access__key {
	display: grid;
	gap: 4px;
}

.mv-access__key-label {
	color: var(--mv-muted);
	font-size: var(--mv-fs-xs);
}

/* ============================================================ Ключ ===== */

.mv-key {
	display: inline-flex;
	align-items: center;
	gap: var(--mv-space-2);
}

.mv-key__value {
	padding: 5px 9px;
	border: 1px solid var(--mv-border-strong);
	border-radius: var(--mv-radius-xs);
	background: var(--mv-bg);
	color: var(--mv-text);
	font-family: var(--mv-font-mono);
	font-size: var(--mv-fs-sm);
	letter-spacing: 0.06em;
	user-select: all;
}

.mv-key__copy {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--mv-border);
	border-radius: var(--mv-radius-xs);
	background: var(--mv-surface);
	color: var(--mv-muted);
	cursor: pointer;
	transition: color var(--mv-t-fast), border-color var(--mv-t-fast);
}

.mv-key__copy:hover {
	border-color: var(--mv-primary);
	color: var(--mv-primary);
}

/* ======================================================== Отсчёт ======= */

.mv-countdown {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: var(--mv-radius-pill);
	background: var(--mv-surface-3);
	color: var(--mv-text);
	font-size: var(--mv-fs-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.mv-countdown--forever {
	background: var(--mv-accent-soft);
	color: var(--mv-accent);
}

.mv-countdown--over {
	background: var(--mv-danger-soft);
	color: var(--mv-danger);
}

/* ======================================================== Подписки ===== */

.mv-subs {
	display: grid;
	gap: var(--mv-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mv-sub {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--mv-space-4);
	margin: 0;
	padding: var(--mv-space-4);
	border: 1px solid var(--mv-border);
	border-radius: var(--mv-radius-md);
	background: var(--mv-surface);
}

.mv-sub.is-expired {
	opacity: 0.72;
}

.mv-sub.is-active {
	border-color: rgba(0, 229, 160, 0.28);
}

.mv-sub__img {
	width: 120px;
	border-radius: var(--mv-radius-sm);
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--mv-grad-placeholder);
}

.mv-sub__info {
	display: grid;
	gap: var(--mv-space-2);
	min-width: 0;
}

.mv-sub__title {
	color: var(--mv-text);
	font-weight: 600;
}

.mv-sub__title:hover {
	color: var(--mv-primary);
}

.mv-sub__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mv-space-2);
	color: var(--mv-muted);
	font-size: var(--mv-fs-sm);
}

.mv-sub__key {
	display: grid;
	gap: 3px;
}

.mv-sub__term {
	display: grid;
	gap: 4px;
	justify-items: end;
	text-align: right;
}

.mv-sub__until {
	color: var(--mv-muted);
	font-size: var(--mv-fs-xs);
}

.mv-sub__actions {
	display: grid;
	gap: var(--mv-space-2);
	justify-items: stretch;
}

@media (max-width: 900px) {
	.mv-sub {
		grid-template-columns: 84px minmax(0, 1fr);
		grid-template-areas:
			"img info"
			"term term"
			"act act";
	}

	.mv-sub__img {
		grid-area: img;
		width: 84px;
	}

	.mv-sub__info {
		grid-area: info;
	}

	.mv-sub__term {
		grid-area: term;
		justify-items: start;
		text-align: left;
	}

	.mv-sub__actions {
		grid-area: act;
		grid-auto-flow: column;
		justify-content: start;
	}
}

/* ======================================================== Состав ======= */

.mv-features {
	display: grid;
	gap: var(--mv-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mv-features__item {
	display: flex;
	align-items: flex-start;
	gap: var(--mv-space-3);
	margin: 0;
	color: var(--mv-text-2);
}

.mv-features__item .mv-icon {
	margin-top: 3px;
	color: var(--mv-accent);
}

.mv-install--launch .mv-install__item::before {
	background: var(--mv-accent-soft);
	color: var(--mv-accent);
}

/* ==================================================== Переключатель ==== */

.mv-langs {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--mv-border);
	border-radius: var(--mv-radius-sm);
	background: var(--mv-bg-2);
}

.mv-langs__item {
	display: grid;
	place-items: center;
	min-width: 34px;
	height: 28px;
	padding-inline: 8px;
	border-radius: var(--mv-radius-xs);
	color: var(--mv-muted);
	font-size: var(--mv-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	transition: background-color var(--mv-t-fast), color var(--mv-t-fast);
}

.mv-langs__item:hover {
	color: var(--mv-text-2);
}

.mv-langs__item.is-active {
	background: var(--mv-surface-3);
	color: var(--mv-text);
}

.mv-drawer__foot .mv-langs {
	justify-self: start;
}

/* ========================================================= Аккордеон === */

.mv-faq {
	display: grid;
	gap: var(--mv-space-2);
}

.mv-faq__item {
	border: 1px solid var(--mv-border);
	border-radius: var(--mv-radius-sm);
	background: var(--mv-surface);
	overflow: hidden;
}

.mv-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mv-space-4);
	width: 100%;
	padding: var(--mv-space-4) var(--mv-space-5);
	border: 0;
	background: none;
	color: var(--mv-text);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.mv-faq__q:hover {
	background: var(--mv-surface-2);
}

.mv-faq__q .mv-icon {
	flex: none;
	color: var(--mv-muted);
	transition: transform var(--mv-t-fast);
}

.mv-faq__q[aria-expanded="true"] .mv-icon {
	transform: rotate(180deg);
}

.mv-faq__a {
	display: none;
	padding: 0 var(--mv-space-5) var(--mv-space-5);
}

.mv-faq__a.is-open {
	display: block;
}

.mv-faq__group {
	margin-bottom: var(--mv-space-8);
}

.mv-faq__group-title {
	margin-bottom: var(--mv-space-4);
}

/* ======================================================= SEO-блоки ===== */

.mv-seo-text {
	padding-block: var(--mv-space-9);
	border-top: 1px solid var(--mv-border);
}

.mv-seo-text .mv-container {
	max-width: calc(880px + var(--mv-container-pad) * 2);
}

.mv-seo-text__title {
	margin-bottom: var(--mv-space-4);
	color: var(--mv-text-2);
	font-family: var(--mv-font-sans);
	font-size: var(--mv-fs-h4);
	font-weight: 600;
}

.mv-seo-text--game {
	background: var(--mv-bg-2);
}

.mv-seo-text--product .mv-prose {
	color: var(--mv-muted);
}

/* ========================================================= Промо ======= */

.mv-promo__list {
	display: grid;
	gap: var(--mv-space-2);
	margin: var(--mv-space-5) 0 0;
	padding: 0;
	list-style: none;
}

.mv-promo__list li {
	display: flex;
	align-items: center;
	gap: var(--mv-space-3);
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.9375rem;
}

.mv-promo__list .mv-icon {
	color: #fff;
}

/* ========================================================== Hero ======= */

.mv-hero__art-label {
	display: block;
	margin-bottom: var(--mv-space-2);
	color: var(--mv-muted);
	font-size: var(--mv-fs-overline);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mv-single-mod__lead {
	max-width: 70ch;
	margin: 0 0 var(--mv-space-4);
	color: var(--mv-text-2);
	font-size: var(--mv-fs-lg);
}

.mv-game-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mv-space-7);
	margin: 0 0 var(--mv-space-5);
	padding: 0;
	list-style: none;
}

.mv-game-hero__stats li {
	margin: 0;
}

.mv-game-hero__stats b {
	display: block;
	color: var(--mv-text);
	font-family: var(--mv-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
}

.mv-game-hero__stats span {
	color: var(--mv-muted);
	font-size: var(--mv-fs-sm);
}

.mv-game-hero__lead {
	max-width: 66ch;
	margin: 0 0 var(--mv-space-5);
	color: var(--mv-text-2);
}

.mv-game-tile__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mv-space-2);
}

.mv-game-tile__price {
	color: #fff;
	font-size: var(--mv-fs-xs);
	font-weight: 700;
}

/* ======================================================== Корзина ====== */

.mv-cart-item__period {
	max-width: 260px;
}

.mv-order-items {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--mv-fs-sm);
}

.mv-order-items li {
	margin: 0;
}

/* ==================================================== Пустое состояние = */

.mv-empty__art {
	width: 240px;
	max-width: 100%;
	height: auto;
	opacity: 0.9;
}

/* ======================================================= Фильтры ======= */

/* Пока грузится новая выдача, сетка притухает, но не «прыгает». */
.mv-grid.is-loading {
	position: relative;
	opacity: 0.45;
	pointer-events: none;
	transition: opacity var(--mv-t-fast);
}

.mv-grid.is-loading::after {
	content: "";
	position: absolute;
	top: var(--mv-space-8);
	left: 50%;
	width: 26px;
	height: 26px;
	margin-left: -13px;
	border: 2px solid var(--mv-border-strong);
	border-top-color: var(--mv-primary);
	border-radius: 50%;
	animation: mv-spin 700ms linear infinite;
}

.mv-switch__label {
	color: var(--mv-text-2);
	font-size: 0.9375rem;
}

.mv-filter-group__body .mv-switch {
	padding-block: var(--mv-space-1);
}

.mv-pager {
	display: grid;
	gap: var(--mv-space-4);
}

.mv-pager .mv-catalog__loadmore {
	margin-top: var(--mv-space-6);
}

/* ============================================================ Таблицы == */

.mv-table td .mv-status {
	white-space: nowrap;
}

.mv-table__product {
	display: flex;
	align-items: center;
	gap: var(--mv-space-3);
	min-width: 0;
}

.mv-table__product img {
	width: 56px;
	border-radius: var(--mv-radius-xs);
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--mv-grad-placeholder);
}

/* ====================================================== Способы оплаты == */

.mv-payment__note {
	grid-column: 1 / -1;
	color: var(--mv-muted);
	font-size: var(--mv-fs-xs);
	line-height: 1.45;
}

.mv-payment .mv-badge {
	justify-self: start;
}