/**
 * Spider VIP Club — блок подписки над футером.
 *
 * Стиль снят с spiderhoodie.org: шрифт Roboto (подключён темой,
 * spiderhoodieorg-guten/assets/css/fonts.css), монохром чёрный/белый,
 * кнопки-пилюли (--btn-accented-brd-radius: 35px), декор — паутина.
 * Всё под .spdr-vip, чтобы не конфликтовать с Woodmart.
 */

.spdr-vip *{ box-sizing:border-box; }

.spdr-vip{
	--spdr-bg:#000;
	--spdr-ink:#fff;
	--spdr-muted:rgba(255,255,255,.66);
	--spdr-line:rgba(255,255,255,.18);
	--spdr-chip:rgba(255,255,255,.06);
	--spdr-radius:35px;

	position:relative;
	overflow:hidden;
	/* На /shop и архивах футер зовётся внутри контейнера темы — тянем блок
	   на всю ширину вьюпорта независимо от родителя. */
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	font-family:'Roboto',Helvetica,Arial,sans-serif;
	color:var(--spdr-ink);
	background:var(--spdr-bg);
	/* Отступ от контента страницы сверху и вплотную к футеру снизу. */
	margin-top:clamp(40px,5vw,72px);
	margin-bottom:0 !important;
	padding:clamp(48px,6vw,88px) clamp(16px,5vw,64px) clamp(48px,6vw,88px);
	-webkit-font-smoothing:antialiased;
}

/* Зазор под блоком даёт контейнер темы (.wd-content-layout{padding-block:40px}) —
   гасим его нижний паддинг именно там, где внутри лежит наш блок. */
.wd-content-layout:has(.spdr-vip),
.site-content:has(.spdr-vip),
.content-layout-wrapper:has(.spdr-vip){
	padding-bottom:0 !important;
	margin-bottom:0 !important;
}

/* ---- паутина в углу: фирменный декор Sp5der, чистый CSS-градиент + SVG ---- */
.spdr-vip__web{
	position:absolute;
	top:-140px; right:-140px;
	width:min(620px,78vw); height:min(620px,78vw);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='.8' opacity='.5'%3E%3Cpath d='M100 100 L100 0 M100 100 L170 30 M100 100 L200 100 M100 100 L170 170 M100 100 L100 200 M100 100 L30 170 M100 100 L0 100 M100 100 L30 30'/%3E%3Cpath d='M100 70 L121 79 L130 100 L121 121 L100 130 L79 121 L70 100 L79 79 Z'/%3E%3Cpath d='M100 45 L139 61 L155 100 L139 139 L100 155 L61 139 L45 100 L61 61 Z'/%3E%3Cpath d='M100 18 L158 42 L182 100 L158 158 L100 182 L42 158 L18 100 L42 42 Z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
	opacity:.14;
	pointer-events:none;
	z-index:0;
}

/* ---- крупный ghost-текст, как акценты на баннерах сайта ---- */
.spdr-vip__ghost{
	position:absolute;
	right:-1.5%; top:48%;
	transform:translateY(-50%);
	font-family:'Roboto',Helvetica,Arial,sans-serif;
	font-weight:900;
	font-size:clamp(170px,32vw,430px);
	line-height:.8;
	letter-spacing:-.02em;
	color:rgba(255,255,255,.045);
	pointer-events:none;
	user-select:none;
	white-space:nowrap;
	z-index:0;
}

.spdr-vip__inner{
	position:relative;
	z-index:1;
	max-width:1222px;
	margin:0 auto;
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:clamp(28px,5vw,80px);
	align-items:center;
}

/* ---- левая колонка ---- */
.spdr-vip__eyebrow{
	display:inline-block;
	font-size:11px;
	font-weight:700;
	letter-spacing:.2em;
	text-transform:uppercase;
	color:var(--spdr-ink);
	border:1px solid var(--spdr-line);
	border-radius:999px;
	padding:8px 16px;
	margin:0 0 20px;
}

.spdr-vip__title{
	margin:0;
	font-family:inherit;
	font-weight:700;
	text-transform:uppercase;
	font-size:clamp(30px,4.6vw,58px);
	line-height:1.04;
	letter-spacing:-.01em;
	color:var(--spdr-ink);
}
.spdr-vip__title em{
	font-style:normal;
	position:relative;
	white-space:nowrap;
}
.spdr-vip__title em::after{
	content:"";
	position:absolute; left:0; right:0; bottom:.06em;
	height:.07em;
	background:var(--spdr-ink);
}

.spdr-vip__sub{
	margin:18px 0 0;
	max-width:46ch;
	color:var(--spdr-muted);
	font-size:clamp(14px,1.3vw,16px);
	line-height:1.6;
}

.spdr-vip__perks{
	list-style:none;
	display:flex; flex-wrap:wrap; gap:8px;
	margin:24px 0 0;
	padding:0;
}
.spdr-vip__perks li{
	margin:0;
	font-size:12px; font-weight:500;
	letter-spacing:.04em; text-transform:uppercase;
	color:var(--spdr-ink);
	background:var(--spdr-chip);
	border:1px solid var(--spdr-line);
	padding:9px 16px;
	border-radius:999px;
}
.spdr-vip__perks li::before{
	content:"";
	display:inline-block;
	width:5px; height:5px;
	margin-right:9px;
	border-radius:50%;
	background:var(--spdr-ink);
	vertical-align:middle;
	transform:translateY(-1px);
}

/* ---- правая колонка: форма ---- */
.spdr-vip__form-wrap{ width:100%; }
.spdr-vip__form{ display:flex; flex-direction:column; gap:12px; }

.spdr-vip__field{
	display:flex;
	background:#fff;
	border:1px solid #fff;
	border-radius:var(--spdr-radius);
	overflow:hidden;
	padding:5px;
	transition:box-shadow .18s ease;
}
.spdr-vip__field:focus-within{ box-shadow:0 0 0 3px rgba(255,255,255,.3); }

/* !important — Woodmart вешает на input свою рамку, фон и радиус. */
.spdr-vip__input{
	flex:1; min-width:0;
	background:transparent !important;
	border:0 !important;
	border-radius:999px !important;
	/* Тема красит текст инпутов в светлый — на белом поле он пропадает. */
	color:#000 !important;
	-webkit-text-fill-color:#000;
	opacity:1;
	font-family:inherit;
	font-size:16px;            /* 16px — иначе iOS зумит страницу при фокусе */
	line-height:1.2;
	padding:14px 20px !important;
	margin:0 !important;
	outline:none;
	box-shadow:none !important;
	height:auto;
	min-height:0;
}
.spdr-vip__input::placeholder{ color:#8a8a8a !important; -webkit-text-fill-color:#8a8a8a; opacity:1; }
/* Автозаполнение Chrome тоже перекрашивает поле — держим его белым. */
.spdr-vip__input:-webkit-autofill,
.spdr-vip__input:-webkit-autofill:focus{
	-webkit-text-fill-color:#000;
	box-shadow:0 0 0 60px #fff inset !important;
}

/* !important — кнопки Woodmart приходят со своим фоном, цветом и радиусом. */
.spdr-vip__btn{
	flex:0 0 auto;
	background:#000 !important;
	color:#fff !important;
	border:0 !important;
	border-radius:999px !important;
	font-family:inherit;
	font-size:13px; font-weight:700;
	letter-spacing:.1em; text-transform:uppercase;
	padding:0 28px;
	min-height:48px;
	cursor:pointer;
	white-space:nowrap;
	transition:background .18s ease, transform .05s ease;
}
.spdr-vip__btn:hover{ background:#333 !important; color:#fff !important; }
.spdr-vip__btn:active{ transform:translateY(1px); }
.spdr-vip__btn:disabled{ opacity:.6; cursor:default; }
.spdr-vip__btn:focus-visible{ outline:2px solid #000; outline-offset:2px; }

.spdr-vip__fine{
	margin:0;
	color:rgba(255,255,255,.5);
	font-size:11.5px; line-height:1.55;
}
.spdr-vip__fine a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }

.spdr-vip__error{
	display:none; margin:0;
	color:#ff6a5a; font-size:12.5px; font-weight:600;
}
.spdr-vip__error.is-visible{ display:block; }

/* ---- экран «спасибо» ---- */
.spdr-vip__success{ display:none; }
.spdr-vip__success.is-visible{ display:block; animation:spdr-vip-rise .4s ease both; }
.spdr-vip__success-label{
	margin:0 0 12px;
	font-weight:700; text-transform:uppercase;
	font-size:clamp(20px,2.6vw,28px); line-height:1.1;
	color:var(--spdr-ink);
}
.spdr-vip__success-label em{ font-style:normal; text-decoration:underline; text-underline-offset:4px; }
.spdr-vip__success-note{ margin:0; color:var(--spdr-muted); font-size:14px; line-height:1.6; max-width:42ch; }

.spdr-vip__code{
	display:inline-flex; align-items:center; gap:12px;
	margin:0 0 14px;
	padding:8px 8px 8px 18px;
	background:#fff;
	border-radius:999px;
}
.spdr-vip__code-val{
	font-size:16px; font-weight:700; letter-spacing:.16em;
	text-transform:uppercase; color:#000;
}
.spdr-vip__copy{
	border:0 !important; border-radius:999px !important;
	background:#000 !important; color:#fff !important;
	font-family:inherit; font-size:11px; font-weight:700;
	letter-spacing:.1em; text-transform:uppercase;
	padding:10px 18px; cursor:pointer;
}
.spdr-vip__copy:hover{ background:#333 !important; }
@keyframes spdr-vip-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---- адаптив ---- */
@media (max-width:900px){
	.spdr-vip__inner{ grid-template-columns:1fr; gap:30px; }
	.spdr-vip__ghost{ opacity:.7; top:36%; }
	.spdr-vip__web{ width:420px; height:420px; top:-120px; right:-160px; }
}
@media (max-width:560px){
	.spdr-vip__field{ flex-direction:column; border-radius:24px; padding:6px; gap:6px; }
	.spdr-vip__input{ text-align:center; padding:12px 14px; }
	.spdr-vip__btn{ width:100%; padding:0 18px; border-radius:999px !important; }
	.spdr-vip__code{ display:flex; justify-content:space-between; }
}
@media (prefers-reduced-motion:reduce){
	.spdr-vip__success.is-visible{ animation:none; }
	.spdr-vip *{ transition:none !important; }
}