/**
 * Subscribe Notice — всплывающее уведомление после подписки (22.10).
 *
 * Макета нет: карточка и иконка — как сообщение об успехе форм-заявок
 * (dealer-form.css, .dealer-form__success), крестик — как у окна Rider Project
 * (rider-apply.css), появление — как у кнопки «Наверх» (scroll-top.css).
 * Выше шапки (100), ниже модальных окон (1000).
 */

.subscribe-notice {
	position: fixed;
	bottom: var(--space-30);
	left: 50%;
	z-index: 200;
	display: flex;
	align-items: center;
	gap: var(--space-15);
	width: calc(480 / var(--vw-base) * 100vw);
	padding: var(--space-20);
	border: calc(1 / var(--vw-base) * 100vw) solid var(--color-grey-90);
	border-radius: var(--radius-14);
	font-size: var(--fs-18);
	color: var(--color-dark);
	background: var(--color-white);
	box-shadow: 0 calc(4 / var(--vw-base) * 100vw) calc(18 / var(--vw-base) * 100vw) var(--color-dark-35);
	visibility: hidden;
	opacity: 0;
	transform: translate(-50%, var(--space-10));
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}

.subscribe-notice.-visible {
	visibility: visible;
	opacity: 1;
	transform: translate(-50%, 0);
}

.subscribe-notice__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: calc(48 / var(--vw-base) * 100vw);
	aspect-ratio: 1;
	border: calc(1 / var(--vw-base) * 100vw) solid var(--color-accent-30);
	border-radius: var(--radius-10);
	color: var(--color-accent);
	background: var(--color-accent-10);
}

.subscribe-notice__glyph {
	width: calc(24 / var(--vw-base) * 100vw);
	aspect-ratio: 1;
}

.subscribe-notice__text {
	flex-grow: 1;
	margin: 0;
}

.subscribe-notice__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: calc(32 / var(--vw-base) * 100vw);
	height: calc(32 / var(--vw-base) * 100vw);
	padding: 0;
	border: 0;
	border-radius: 50%;
	font-size: var(--fs-26);
	line-height: var(--lh-100);
	color: var(--color-dark);
	background: var(--color-grey-95);
	cursor: pointer;
	transition: background-color var(--transition-base), color var(--transition-base);
}

.subscribe-notice__close:hover {
	color: var(--color-white);
	background: var(--color-accent);
}

/* Сообщение показывает уведомление — строка ответа CF7 под полем не дублирует его. */
.-with-notice .wpcf7 form.sent .wpcf7-response-output {
	display: none;
}

@media (max-width: 767px) {
	.subscribe-notice {
		right: var(--space-20);
		bottom: var(--space-20);
		left: var(--space-20);
		width: auto;
		font-size: var(--fs-16);
		transform: translateY(var(--space-10));
	}

	.subscribe-notice.-visible {
		transform: none;
	}
}