/* Уведомления «Success: You have added ... to your shopping cart!» и подобные —
 * ядро вставляет их в #alert() common.js. Раньше это была голубая бутстраповская
 * плашка. Теперь — по центру экрана, в тон темы: обычный успех/ошибка простым
 * штампом, а добавление в корзину — целой карточкой с плашкой `.sb-band` (тот же
 * знак, что у доски отделов и стены поступлений) и оттиском `.sb-stamp` — и после
 * паузы улетает в иконку корзины и пропадает (extension/soviet/catalog/view/
 * javascript/alert.js решает, когда именно лететь и когда собирать карточку:
 * по клику на кнопку «В корзину» в последние 2 секунды).
 */

/* Ядро (catalog/view/stylesheet/stylesheet.css) уже держит #alert зафиксированным
 * по центру через left:50%/margin-left — тем удобнее: делаем #alert самим
 * центрирующим оверлеем на весь экран (flex), а не гасим/пересчитываем чужой
 * трюк с margin-left под каждый брейкпоинт. pointer-events:none на оверлее и
 * :auto на самой карточке — под него по-прежнему кликается страница. */
#alert {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	/* width/height явно в vw/dvh, а не через inset:0 на все четыре стороны —
	 * если где-то на странице есть горизонтальный переполнение (напр. категорийная
	 * полоса в шапке шире экрана на мобильном), inset:0 растягивает fixed-блок
	 * по «раздутому» layout viewport (мог оказаться на 100+ px шире реального
	 * экрана), и вся центровка штампа съезжает. vw/dvh считаются от настоящего
	 * видимого экрана независимо от переполнения контента. */
	width: 100vw;
	height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 0;
	padding: 16px;
	box-sizing: border-box;
	pointer-events: none;
}

#alert .alert-dismissible {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: min(420px, 100%);
	margin: 0;
	padding: 14px 44px 14px 16px;
	border: none;
	border-left: 8px solid var(--sb-red);
	background: var(--sb-ink);
	color: var(--sb-paper);
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-red);
	font-size: 14px;
	pointer-events: auto;
	animation: sb-alert-in .3s ease both;
}

#alert .alert-dismissible .btn-close {
	position: absolute;
	top: 14px;
	right: 14px;
	filter: invert(1) grayscale(1) brightness(1.8);
}

#alert .alert-success i {
	color: #8fce8f;
}

#alert .alert-danger i,
#alert .alert-warning i {
	color: var(--sb-red);
}

@keyframes sb-alert-in {
	from {
		transform: translateY(18px) scale(.96);
		opacity: 0;
	}

	to {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

/* --- Добавление в корзину и удаление из неё: не строка, а карточка с той же
 * плашкой, что у доски отделов и стены поступлений (сборка — alert.js, buildCard).
 * Крупнее и весомее рядового штампа: это единственные успехи, которые стоит подать
 * с размахом, остальные (избранное, купон, ошибки форм) остаются простой строкой.
 *
 * Стили здесь самодостаточны, не наследуются от #alert .alert-dismissible — сама
 * buildCard() снимает класс alert-dismissible с узла сразу после сборки карточки.
 * Причина: у ядра (common.js) свой таймер на #alert .alert-dismissible — через
 * 3с гасит через jQuery fadeTo, ещё через 3с удаляет из DOM, всего 6с. Наш HOLD_MS
 * можно поставить и длиннее шести секунд (просили держать подольше) — без снятия
 * класса ядро выдёргивало бы карточку из-под собственной анимации на середине
 * полёта, и вместо «улетела» получалось «взяла и пропала», ракета не долетала. */
#alert .sb-alert--cart {
	position: relative;
	display: block;
	width: min(560px, 100%);
	margin: 0;
	padding: 0 0 20px;
	border: none;
	background: var(--sb-ink);
	color: var(--sb-paper);
	font-size: 14px;
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-red);
	pointer-events: auto;
	animation: sb-alert-in .3s ease both;
	transition: background .25s ease, box-shadow .25s ease;
}

.sb-alert__head {
	margin-bottom: 16px;
}

/* Обычный .sb-kicker-стиль темы (12px, разрядка .22em) рассчитан на короткие
 * ярлыки в два-три слова («PASSED · OTK»); здесь же — целый лозунг-предложение,
 * тем же кеглем и разрядкой он превращался в нечитаемую кашу. Крупнее, разрядка
 * вдвое уже, вес потяжелее — и высота строки посвободнее на перенос в две строки. */
.sb-alert__kicker {
	margin: 0;
	color: var(--sb-red);
	font-family: var(--sb-display);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.25;
	text-transform: uppercase;
}

.sb-alert__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0 0;
	color: #fff;
	font-size: clamp(22px, 4vw, 28px);
}

.sb-alert__title::before {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: var(--sb-red);
	content: '';
	mask: var(--sb-i-star) center / contain no-repeat;
	-webkit-mask: var(--sb-i-star) center / contain no-repeat;
}

.sb-alert__body {
	padding: 0 24px 4px;
}

.sb-alert__row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sb-alert--cart .sb-alert__row i {
	flex: 0 0 auto;
	font-size: 26px;
}

.sb-alert--cart .sb-alert__row span {
	font-size: 16px;
	line-height: 1.4;
}

.sb-alert--cart a {
	color: var(--sb-paper);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sb-alert--cart a:hover,
.sb-alert--cart a:focus-visible {
	color: #8fce8f;
}

/* Кнопки «Log in» / «Create an account» в карточке «нужна регистрация»
 * (alert.js, buildWishlistCard) — по прямой просьбе пользователя, 20.08.2026,
 * две, не одна. Сама фраза ядра уже несёт обе ссылки посреди предложения
 * (текст, не оформлена) — кнопки заметное второе приглашение, а не замена:
 * ссылки в тексте не убираем. Регистрация — заливкой (у большинства гостей
 * аккаунта ещё нет, это основной путь), вход — контуром рядом, второй
 * по весу. Тот же язык кнопки, что и по всей теме (--sb-shift), но без
 * подчёркивания, в отличие от остальных ссылок карточки — префикс
 * `.sb-alert--cart`, не просто класс: специфичность должна побить общее
 * правило ссылок карточки (`.sb-alert--cart a`), иначе оно и здесь
 * подчёркивает текст. */
.sb-alert__actions {
	display: flex;
	gap: 10px;
	margin: 14px 0 0;
}

.sb-alert--cart .sb-alert__cta {
	display: block;
	flex: 1 1 0;
	margin: 0;
	padding: 11px 16px;
	border: var(--sb-rule) solid var(--sb-paper);
	background: var(--sb-red);
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-paper);
	color: #fff;
	font-family: var(--sb-display);
	font-size: 14px;
	letter-spacing: .08em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: translate .12s, box-shadow .12s, background-color .12s, color .12s;
}

.sb-alert--cart .sb-alert__cta:hover,
.sb-alert--cart .sb-alert__cta:focus-visible {
	translate: calc(var(--sb-shift) * -1) calc(var(--sb-shift) * -1);
	box-shadow: calc(var(--sb-shift) * 2) calc(var(--sb-shift) * 2) 0 var(--sb-paper);
	color: #fff;
}

/* Вход — контуром, не заливкой: второй по весу рядом с регистрацией,
 * не спорит взглядом. Наведение — не сдвиг, а инверсия в цвет плашки,
 * тот же приём, что у «All departments»/«All brands» на светлом фоне,
 * только зеркально под тёмный. */
.sb-alert--cart .sb-alert__cta--ghost {
	background: transparent;
	box-shadow: none;
}

.sb-alert--cart .sb-alert__cta--ghost:hover,
.sb-alert--cart .sb-alert__cta--ghost:focus-visible {
	translate: 0 0;
	background: var(--sb-paper);
	box-shadow: none;
	color: var(--sb-ink);
}

/* Плашка занята лозунгом, заголовком и оттиском «Approved» до самого клина —
 * крестик закрытия внутри неё вечно на что-то наступал. Выносим за пределы
 * карточки совсем, отдельным кружком, как ещё один оттиск в углу бланка.
 *
 * position:absolute — свой, не полагаемся на общий `#alert .alert-dismissible
 * .btn-close` (там же position): у карточки-приглашения (buildWishlistCard,
 * не autoDismiss) класс alert-dismissible снят сознательно, чтобы ядро её
 * само не убрало, — без своего position крестик проваливался бы в обычный
 * поток и падал под кнопки вместо угла карточки. */
.sb-alert--cart .btn-close {
	position: absolute;
	top: -12px;
	right: -12px;
	width: 26px;
	height: 26px;
	border: var(--sb-rule) solid var(--sb-ink);
	border-radius: 50%;
	background-color: var(--sb-paper);
	background-size: 11px;
	opacity: 1;
	filter: none;
}

@media (max-width: 480px) {
	.sb-alert__body {
		padding: 0 16px 4px;
	}

	/* На узком экране заголовку и так тесно рядом со звёздочкой — оттиск
	 * «Approved» вместе с ними в один ряд не помещается и наезжает на крестик
	 * закрытия в углу. Сам оттиск декоративный, лозунг и заголовок сверху уже
	 * всё сказали — на мобильном просто не показываем. */
	.sb-alert__head .sb-stamp {
		display: none;
	}
}

/* Улетает в сторону корзины: направление и расстояние (--sb-fly-x/-y) считает JS
 * по реальным координатам #cart на экране — работает при любой ширине и на скролле.
 * Длительности здесь и константы в alert.js (HOLD_MS/FLY_DURATION_MS) должны
 * совпадать — это одна анимация, описанная в двух файлах, не менять по отдельности. */
/* #alert .sb-alert--fly, не просто .sb-alert--fly: специфичность должна как минимум
 * сравняться с #alert .sb-alert--cart (у неё своя transition на background/box-shadow) —
 * transition это шорткод, он не суммируется между правилами, а полностью замещается
 * тем, что выиграло каскад. Раньше здесь стоял голый класс, более специфичное
 * .sb-alert--cart перебивало transition целиком, и transform/opacity переставали
 * анимироваться вообще — карточка телепортировалась в конечный масштаб мгновенно. */
/* Без затухания: непрозрачность держится 1 весь полёт — ракета должна оставаться
 * видимой все секунды, пока летит, и пропасть только когда долетела и карточка
 * убралась из DOM (alert.js), а не растаять по дороге. opacity родителя множится
 * на opacity потомков (композитинг слоёв), поэтому если бы тут стоял fade-out —
 * .sb-alert__rocket ниже гас бы вместе с карточкой, что бы сам ни объявлял. */
#alert .sb-alert--fly {
	transition: transform 1.1s cubic-bezier(.5, 0, .75, .4);
	transform: translate(var(--sb-fly-x, 0), var(--sb-fly-y, 0)) scale(.12);
	pointer-events: none;
}

/* Вся карточка кликабельна для досрочного полёта. */
#alert .sb-alert--cart:not(.sb-alert--fly) {
	cursor: pointer;
}

/* «Превращается в ракету»: плашка, заголовок и строка с товаром гаснут, фон
 * и тень карточки становятся прозрачными, и на месте всего этого остаётся
 * только оверлей .sb-alert__rocket — он и летит вместе с карточкой дальше
 * по общему .sb-alert--fly. Специфичность #alert .sb-alert--rocket нарочно
 * равна #alert .sb-alert--cart выше — иначе фон/тень оттуда не погасли бы. */
#alert .sb-alert--rocket {
	background: transparent;
	box-shadow: none;
}

.sb-alert--rocket > *:not(.sb-alert__rocket) {
	transition: opacity .2s ease;
	opacity: 0;
}

.sb-alert__rocket {
	position: absolute;
	inset: 0;
	width: 40px;
	height: 40px;
	margin: auto;
	font-size: 34px;
	line-height: 40px;
	text-align: center;
	opacity: 0;
	/* Кумачовая ракета на пути к корзине пересекает кумачовую же полосу меню —
	 * без ободка в этот момент она сливается с фоном насмерть. Двойной
	 * drop-shadow заменяет обводку (у filter нет spread, как у box-shadow),
	 * держит контраст на любом фоне вдоль всего маршрута полёта. */
	filter: drop-shadow(0 0 2px var(--sb-paper)) drop-shadow(0 0 2px var(--sb-paper));
	pointer-events: none;
	transition: opacity .3s ease .1s;
}

/* Специфичность на класс её выше: #alert .alert-success i красит зелёным любую
 * иконку в успехе, а ракета должна остаться кумачовой при любом раскладе. */
#alert .alert-success .sb-alert__rocket {
	color: var(--sb-red);
}

.sb-alert--rocket .sb-alert__rocket {
	opacity: 1;
}

/* --- Удаление из корзины: та же карточка-плашка, но без полёта — улетать
 * удалённому товару некуда, оседает и тает на месте. Иконка красная, а не
 * зелёная, — это не успех, а потеря, пусть и оформленная тем же штампом. */
.sb-alert--loss .sb-alert__row i {
	color: var(--sb-red);
}

.sb-alert--dismiss {
	transition: transform .5s ease, opacity .5s ease;
	transform: translateY(24px) scale(.92);
	opacity: 0;
	pointer-events: none;
}

/* Корзина в шапке чуть подпрыгивает, когда «получает» долетевший штамп. */
.sb-cart-bump {
	animation: sb-cart-bump .4s ease;
}

@keyframes sb-cart-bump {
	0%, 100% {
		transform: scale(1);
	}

	45% {
		transform: scale(1.1);
	}
}