/* Банер «200 грн бонусами». Токени взяті з макета «Банер - 200 грн бонусів».
   Шрифти не підключаємо: Manrope і JetBrains Mono вже є на сайті. */

.spb {
	--spb-ink: #0d1b2a;
	--spb-ink-2: #1c2c3e;
	--spb-bg: #f1f2f5;
	--spb-muted: #6b727c;
	--spb-brd: #e2e4e9;
	--spb-field: #f6f7f9;
	--spb-accent: #3b7fd4;

	position: fixed;
	z-index: 100000;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--spb-ink);
}

.spb[hidden] {
	display: none;
}

.spb__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 14, 24, 0.55);
	animation: spb-fade 0.2s ease both;
}

.spb__card {
	position: relative;
	width: 100%;
	max-width: 920px;
	max-height: calc(100vh - 48px);
	overflow: auto;
	background: #fff;
	border-radius: 28px;
	box-shadow: 0 40px 90px rgba(6, 14, 24, 0.18);
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	animation: spb-pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.spb__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}

.spb__close:hover {
	background: rgba(255, 255, 255, 0.26);
}

/* --- Ліва темна панель --- */

.spb__side {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 36px;
	padding: 40px;
	background: var(--spb-ink);
	color: #fff;
}

.spb__glow {
	position: absolute;
	top: -120px;
	right: -120px;
	width: 340px;
	height: 340px;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(59, 127, 212, 0.45), rgba(59, 127, 212, 0) 70%);
	pointer-events: none;
}

.spb__badge {
	position: relative;
	align-self: flex-start;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.spb__pitch {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 22px;
}

.spb__amount {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
	font-size: 64px;
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.03em;
}

.spb__amount span {
	margin-left: 8px;
	font-size: 26px;
	font-weight: 400;
}

.spb__title {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

.spb__lead {
	margin: 0;
	max-width: 320px;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.7);
	text-wrap: pretty;
}

.spb__meter {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.spb__meter-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}

.spb__meter-row b {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}

.spb__bar {
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	overflow: hidden;
}

.spb__bar i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--spb-accent);
}

/* --- Права світла панель --- */

.spb__body {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding: 40px;
}

.spb__steps {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spb__steps li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.spb__steps div {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.spb__steps b {
	font-size: 15px;
	font-weight: 700;
}

.spb__steps span:not(.spb__num) {
	font-size: 14px;
	line-height: 1.45;
	color: var(--spb-muted);
}

.spb__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	min-width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--spb-bg);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 13px;
	font-weight: 700;
}

.spb__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.spb__input {
	width: 100%;
	box-sizing: border-box;
	padding: 17px 18px;
	border: 1px solid var(--spb-brd);
	border-radius: 16px;
	background: var(--spb-field);
	font-family: inherit;
	font-size: 16px;
	color: var(--spb-ink);
	outline: none;
}

.spb__input:focus {
	border-color: var(--spb-accent);
}

.spb__input[aria-invalid="true"] {
	border-color: #b32d2e;
}

.spb__submit {
	width: 100%;
	padding: 18px 12px;
	border: 0;
	border-radius: 16px;
	background: var(--spb-ink);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}

.spb__submit:hover {
	background: var(--spb-ink-2);
}

.spb__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.spb__consent {
	display: flex;
	align-items: center;
	gap: 11px;
	cursor: pointer;
}

.spb__consent input {
	width: 19px;
	height: 19px;
	min-width: 19px;
	margin: 0;
	accent-color: var(--spb-ink);
	cursor: pointer;
}

.spb__consent span {
	font-size: 13px;
	line-height: 1.4;
	color: var(--spb-muted);
}

.spb__hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
}

.spb__msg {
	font-size: 13px;
	line-height: 1.4;
	color: var(--spb-muted);
}

.spb__msg[data-state="ok"] {
	color: #3f6d0f;
	font-weight: 700;
}

.spb__msg[data-state="err"] {
	color: #b32d2e;
}

/* --- Кутовий режим: без затемнення, сторінка лишається робочою --- */

.spb[data-mode="corner"] {
	inset: auto auto 20px 20px;
	padding: 0;
	display: block;
	max-width: calc(100vw - 40px);
}

.spb[data-mode="corner"] .spb__backdrop {
	display: none;
}

.spb[data-mode="corner"] .spb__card {
	width: 360px;
	max-width: 100%;
	max-height: calc(100vh - 40px);
	grid-template-columns: 1fr;
	border-radius: 22px;
	animation: spb-slide 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}

.spb[data-mode="corner"] .spb__side {
	gap: 20px;
	padding: 24px 24px 22px;
}

.spb[data-mode="corner"] .spb__pitch {
	margin-top: 16px;
	gap: 8px;
}

.spb[data-mode="corner"] .spb__amount {
	font-size: 44px;
}

.spb[data-mode="corner"] .spb__amount span {
	font-size: 20px;
}

.spb[data-mode="corner"] .spb__title {
	font-size: 19px;
}

.spb[data-mode="corner"] .spb__lead,
.spb[data-mode="corner"] .spb__steps {
	display: none;
}

.spb[data-mode="corner"] .spb__body {
	gap: 14px;
	padding: 20px 24px 24px;
}

.spb[data-mode="corner"] .spb__input {
	padding: 14px 16px;
	font-size: 15px;
}

.spb[data-mode="corner"] .spb__submit {
	padding: 15px 12px;
	font-size: 15px;
}

/* --- Телефони --- */

@media (max-width: 860px) {
	.spb__card {
		grid-template-columns: 1fr;
	}

	.spb__side,
	.spb__body {
		padding: 28px 24px;
	}

	.spb__amount {
		font-size: 52px;
	}

	.spb__lead {
		max-width: none;
	}
}

@media (max-width: 600px) {
	.spb {
		padding: 12px;
	}

	.spb__card {
		border-radius: 22px;
	}

	/* У куток на вузькому екрані не тиснемо — картка стає нижньою панеллю. */
	.spb[data-mode="corner"] {
		inset: auto 10px 10px 10px;
		max-width: none;
	}

	.spb[data-mode="corner"] .spb__card {
		width: 100%;
	}
}

/* --- Анімації --- */

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

@keyframes spb-pop {
	from { opacity: 0; transform: translateY(12px) scale(0.97); }
	to { opacity: 1; transform: none; }
}

@keyframes spb-slide {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.spb__card,
	.spb__backdrop {
		animation: none;
	}
}

/* --- Захист від стилів теми ---
   WoodMart примусово ставить кнопкам position: relative, через що хрестик
   переставав бути абсолютним і займав першу комірку сітки, ламаючи колонки.
   Заголовкам тема задає свій колір, який перебиває успадкований білий.
   Тому селектори тут навмисно довші — щоб виграти за вагою, без !important. */
.spb .spb__card .spb__close {
	position: absolute;
}

.spb .spb__side .spb__title {
	color: #fff;
}

.spb .spb__side .spb__lead {
	color: rgba(255, 255, 255, 0.7);
}

.spb .spb__body .spb__steps li {
	list-style: none;
	margin: 0;
}

.spb .spb__body .spb__steps li::marker {
	content: none;
}

/* Кнопка і хрестик: тема фарбує всі .button по-своєму й додає uppercase,
   тому повертаємо вигляд з макета явно. */
.spb .spb__body .spb__submit {
	height: auto;
	min-height: 0;
	background: var(--spb-ink);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	border-radius: 16px;
}

.spb .spb__body .spb__submit:hover {
	background: var(--spb-ink-2);
	color: #fff;
}

.spb .spb__card .spb__close {
	background: var(--spb-bg);
	color: var(--spb-ink);
}

.spb .spb__card .spb__close:hover {
	background: var(--spb-brd);
	color: var(--spb-ink);
}

.spb .spb__body .spb__input {
	height: auto;
	min-height: 0;
	text-transform: none;
	letter-spacing: normal;
}

/* Поле вводу і сама іконка хрестика: тема задає полям свої padding та висоту,
   а svg лишає без ширини — тому розміри проставляємо явно. */
.spb .spb__body .spb__input {
	padding: 17px 18px;
	border: 1px solid var(--spb-brd);
	border-radius: 16px;
	background: var(--spb-field);
	line-height: 1.2;
}

.spb .spb__card .spb__close svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* Компактне поле в кутку. Блок вище має таку саму вагу селектора й іде пізніше,
   тому повертаємо менші відступи явно, з більшою вагою. */
.spb[data-mode="corner"] .spb__body .spb__input {
	padding: 14px 16px;
	font-size: 15px;
}

/* Кнопка більша — головна дія банера має важити візуально більше за поле. */
.spb .spb__body .spb__submit {
	padding: 23px 20px;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	border-radius: 18px;
}

.spb[data-mode="corner"] .spb__body .spb__submit {
	padding: 19px 16px;
	font-size: 16px;
	border-radius: 16px;
}

/* Підказка про «Спам» — другим рядком, дрібнішим за саме повідомлення. */
.spb .spb__msg-hint {
	display: block;
	margin-top: 3px;
	font-weight: 400;
	color: var(--spb-muted);
}

/* Розмір кнопки назад до розумного: помітно більша за поле, але не в пів картки. */
.spb .spb__body .spb__submit {
	padding: 18px 18px;
	font-size: 17px;
	border-radius: 16px;
}

.spb[data-mode="corner"] .spb__body .spb__submit {
	padding: 16px 14px;
	font-size: 15px;
	border-radius: 14px;
}

/* Хрестик: тема скидає скруглення в нуль і розтягує кнопку до 40x42,
   через що замість круглої іконки виходив сірий квадрат. */
.spb .spb__card .spb__close {
	width: 36px;
	min-width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--spb-bg);
	color: var(--spb-muted);
	box-shadow: none;
	line-height: 0;
	/* Тема тримає кнопкам свою висоту 42px — інакше коло виходить овалом. */
	min-height: 36px;
	max-height: 36px;
}

.spb .spb__card .spb__close:hover {
	background: var(--spb-brd);
	color: var(--spb-ink);
}

/* Права колонка: вміст по центру, а не притиснутий догори —
   ліва панель вища, і знизу лишалась порожнеча. */
.spb .spb__card .spb__body {
	justify-content: center;
}