/**
 * Скрытая цена и окно с приглашением.
 *
 * Плагин не знает, в какой теме окажется, поэтому цвета и скругления
 * берутся с запасными значениями: у Super Custom подхватятся её,
 * у любой другой сработают запасные.
 */

/*
 * Цена остаётся на своём месте и своей ширины — размывается только
 * начертание. Ни display: none, ни visibility: скрытая ими цена
 * уронила бы строку, и карточки в ряду разъехались бы по высоте.
 *
 * Выделение мышью и подсказки браузера отключены: под размытием лежит
 * маска из нулей, и копировать её незачем.
 */
.super-prices--blur {
	display: inline-block;
	filter: blur(5px);
	opacity: 0.85;
	user-select: none;
	pointer-events: none;
	/* Размытие рисуется за края — прячем вылет, чтобы не задевал соседей. */
	vertical-align: middle;
}

/* Подпись вместо цены: тот же размер, приглушённый цвет. */
.super-prices--text {
	color: var(--color-text-muted, #7a8494);
}

/* --- Окно --- */

/*
 * Окно всплывает снизу и проявляется вместе с затемнением — тем же
 * способом, каким открываются окна темы: переход по opacity и transform,
 * а display и overlay с allow-discrete. Без них браузер переключает эти
 * два свойства скачком, и анимации закрытия видно не будет.
 *
 * @starting-style задаёт состояние, с которого начинается открытие:
 * само по себе закрытое окно в потоке не участвует, и браузеру не от чего
 * анимировать.
 */
.super-prices-modal {
	max-width: 460px;
	width: calc(100% - 32px);
	padding: 0;
	border: 0;
	border-radius: var(--border-radius-medium, 10px);
	background-color: var(--color-primary, #fff);
	color: var(--color-text, #333);
	box-shadow: var(--shadow-lg, 0 24px 60px rgba(0, 0, 0, 0.18));

	opacity: 0;
	transform: translateY(16px) scale(0.97);
	transition:
		opacity var(--transition-base, 0.25s ease),
		transform var(--transition-base, 0.25s ease),
		overlay var(--transition-base, 0.25s ease) allow-discrete,
		display var(--transition-base, 0.25s ease) allow-discrete;
}

.super-prices-modal[open] {
	opacity: 1;
	transform: none;
}

@starting-style {
	.super-prices-modal[open] {
		opacity: 0;
		transform: translateY(16px) scale(0.97);
	}
}

.super-prices-modal::backdrop {
	background-color: var(--color-backdrop, rgba(0, 0, 0, 0.5));
	opacity: 0;
	transition:
		opacity var(--transition-base, 0.25s ease),
		overlay var(--transition-base, 0.25s ease) allow-discrete,
		display var(--transition-base, 0.25s ease) allow-discrete;
}

.super-prices-modal[open]::backdrop {
	opacity: 1;
}

@starting-style {
	.super-prices-modal[open]::backdrop {
		opacity: 0;
	}
}

.super-prices-modal__body {
	padding: 24px;
}

.super-prices-modal__title {
	margin: 0 0 12px;
	font-size: 20px;
	line-height: 1.25;
}

.super-prices-modal__text {
	margin-bottom: 20px;
	line-height: 1.5;
}

.super-prices-modal__text p {
	margin: 0 0 12px;
}

.super-prices-modal__text p:last-child {
	margin-bottom: 0;
}

.super-prices-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * Кнопки окна набраны сами по себе, без классов темы: тема может
 * называть их как угодно, а окно должно выглядеть одинаково везде.
 * Но ведут они себя так же, как кнопки Super Custom, — эффекты
 * наведения повторены здесь целиком, чтобы окно не выбивалось
 * из сайта.
 *
 * Цвет подписи задан жёстко и для наведения тоже: у ссылок тема
 * на наведении красит текст в акцентный, и подпись на оранжевой кнопке
 * становилась тёмно-оранжевой по оранжевому — кнопка выглядела
 * выключенной.
 */
.super-prices-modal__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--border-radius-button, 6px);
	background-repeat: no-repeat;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--transition-base, 0.25s ease);
}

/* Нажатие: кнопка на мгновение поджимается — как будто её вдавили. */
.super-prices-modal__button:active {
	transform: scale(0.98);
}

/*
 * Главная кнопка. Блик для наведения — это фон, а не наложенный сверху
 * слой: фон рисуется под текстом, и подпись остаётся такой же чёткой.
 * В покое блик стоит за правым краем кнопки, и его не видно.
 */
.super-prices-modal__button--main,
.super-prices-modal__button--main:hover,
.super-prices-modal__button--main:focus {
	border-color: var(--color-accent, #ff6d01);
	background-color: var(--color-accent, #ff6d01);
	color: #fff;
}

.super-prices-modal__button--main {
	background-image: linear-gradient(
		100deg,
		transparent 40%,
		rgba(255, 255, 255, 0.28) 50%,
		transparent 60%
	);
	background-size: 300% 100%;
	background-position: 100% 0;
}

/*
 * Проход блика — анимация, а не переход: переход отыгрывался бы назад,
 * стоит увести курсор, и блик уезжал бы справа налево. Анимация всегда
 * идёт в одну сторону, слева направо.
 */
@keyframes super-prices-btn-shine {
	from {
		background-position: 100% 0;
	}

	to {
		background-position: 0 0;
	}
}

/* Наведение: цвет и положение те же, кнопка чуть прибавляет в размере. */
.super-prices-modal__button--main:hover {
	animation: super-prices-btn-shine var(--transition-shine, 0.7s ease) both;
	transform: scale(1.02);
}

/*
 * Тот же проход по классу: его ставит скрипт плагина. Так блик успевает
 * пройти не только когда на кнопку наводят, но и когда курсор уводят, —
 * одним CSS второй проход не поймать.
 */
.super-prices-modal__button--main.is-shining {
	animation: super-prices-btn-shine var(--transition-shine, 0.7s ease) both;
}

/*
 * Светлая кнопка ведёт себя иначе: при наведении её заливает акцент,
 * при уходе курсора заливка сходит. Обе стороны идут слева направо —
 * заливка приходит слева и уходит тоже слева.
 *
 * Рисует её один и тот же фон: жёсткая граница ровно посередине картинки
 * шириной в две кнопки. Двигая картинку, получаем и наступающий край
 * заливки, и отступающий — направление у обоих одно.
 *
 * Подпись перекрашивается с задержкой, к середине пути: раньше она
 * побелела бы на ещё белом фоне и пропала.
 */
.super-prices-modal__button--outline {
	background-color: transparent;
	background-image: linear-gradient(
		to right,
		var(--color-accent, #ff6d01) 50%,
		transparent 50%
	);
	background-size: 200% 100%;
	background-position: 100% 0;
	border-color: var(--color-accent, #ff6d01);
	color: var(--color-accent, #ff6d01);
	transition:
		transform var(--transition-base, 0.25s ease),
		color var(--transition-fast, 0.15s ease) 0.25s;
}

@keyframes super-prices-btn-fill-in {
	from {
		background-position: 100% 0;
	}

	to {
		background-position: 0 0;
	}
}

@keyframes super-prices-btn-fill-out {
	from {
		background-position: 0 0;
	}

	to {
		background-position: -100% 0;
	}
}

/* Наведение: заливка приходит слева и остаётся, пока курсор на кнопке. */
.super-prices-modal__button--outline:hover,
.super-prices-modal__button--outline.is-shining:hover {
	animation: super-prices-btn-fill-in var(--transition-shine, 0.7s ease) both;
	color: #fff;
}

/*
 * Уход курсора: класс ставит скрипт, и заливка сходит — тоже слева
 * направо. Как только анимация закончится, скрипт снимет класс,
 * и кнопка вернётся к прозрачному фону.
 */
.super-prices-modal__button--outline.is-shining:not(:hover) {
	animation: super-prices-btn-fill-out var(--transition-shine, 0.7s ease) both;
}

/* «Закрыть» — та же светлая кнопка, только отодвинута к правому краю. */
.super-prices-modal__button--quiet {
	margin-left: auto;
}