/* Компоненты. Стиль: мягкие скруглённые блоки, как в docs/content/site-example.png */

/* Кнопки */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 44px;
	padding: 0.7rem 1.5rem;
	background: var(--color-red-btn);
	color: var(--color-white);
	border: 1.5px solid transparent;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-btn);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast);
}

/* Стрелка в кнопке: <a class="btn btn--arrow"> */
.btn--arrow::after {
	content: '';
	width: 1em;
	height: 1em;
	background: currentcolor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.btn:active {
	transform: translateY(1px);
}

@media (hover: hover) {
	/* «Подъём» тенью, а не сдвигом: сдвинутая кнопка уходит из-под курсора у края, и наведение мигает */
	.btn:hover {
		background: var(--color-red-deep);
		box-shadow: 0 12px 22px -8px rgb(196 30 69 / 0.75);
	}
}

.btn--outline {
	background: transparent;
	color: var(--color-green);
	border-color: var(--color-green);
	box-shadow: none;
}

@media (hover: hover) {
	.btn--outline:hover {
		background: var(--color-green);
		color: var(--color-white);
		box-shadow: none;
	}

	.btn--ghost:hover {
		box-shadow: none;
	}
}

.btn--ghost {
	background: none;
	color: inherit;
	box-shadow: none;
	text-decoration: underline;
}

.btn[disabled],
.btn[aria-disabled='true'] {
	opacity: 0.6;
	pointer-events: none;
}

/* Карточки: розовая мягкая и зелёная акцентная */
.card {
	padding: var(--space-lg);
	background: var(--color-pink-soft);
	border-radius: var(--radius-md);
}

.card--green {
	background: var(--color-green-dark);
	color: var(--color-white);
}

.card--white {
	background: var(--color-white);
	border: var(--border);
	box-shadow: var(--shadow-card);
}

/* Поля форм */
.field {
	margin-bottom: var(--space-lg);
}

.field__label {
	display: block;
	margin-bottom: var(--space-xs);
	font-weight: 700;
}

.field__hint,
.field__error {
	margin: var(--space-xs) 0 0;
	font-size: var(--fs-small);
}

.field__error {
	color: var(--color-red-deep);
	font-weight: 600;
}

.input {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 1rem;
	background: var(--color-white);
	border: var(--border-strong);
	border-radius: var(--radius-sm);
	font-size: 1rem; /* 16px: iOS не зумит поле */
}

textarea.input {
	min-height: 8rem;
	resize: vertical;
}

.input[aria-invalid='true'] {
	border-color: var(--color-red-deep);
}

/* Чипсы: <label class="chip"><input type="checkbox"><span class="chip__label">…</span></label> */
.chip {
	position: relative;
	display: inline-block;
}

.chip input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.chip__label {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	min-height: 44px;
	padding: 0.5rem 1rem;
	background: var(--color-white);
	border: var(--border);
	border-radius: var(--radius-pill);
	font-weight: 600;
}

/* Галочка: выбранное состояние не держится на одном цвете */
.chip__label::before {
	content: '';
	display: none;
	width: 0.35em;
	height: 0.7em;
	border: solid currentcolor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}

.chip input:checked + .chip__label {
	background: var(--color-green);
	border-color: var(--color-green);
	color: var(--color-white);
}

.chip input:checked + .chip__label::before {
	display: block;
}

.chip input:focus-visible + .chip__label {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* FAQ: <details class="faq-item"><summary>…</summary>…</details> */
.faq-item {
	background: var(--color-pink-soft);
	border-radius: var(--radius-md);
}

.faq-item + .faq-item {
	margin-top: var(--space-sm);
}

.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: 44px;
	padding: var(--space-md) var(--space-lg);
	font-weight: 700;
	list-style: none;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: '+';
	font-size: 1.5rem;
	line-height: 1;
}

.faq-item[open] summary::after {
	content: '\2212';
}

.faq-item__body {
	padding: 0 var(--space-lg) var(--space-lg);
}

/* Таймер: зелёная плашка с halftone, цифры на белых «наклейках» (MASTER §4). Размеры от font-size плашки */
.timer {
	--cell-w: clamp(3.75rem, 17vw, 6.2rem);
	position: relative;
	display: grid;
	justify-items: start;
	gap: var(--space-sm);
	width: fit-content;
	max-width: 100%;
	padding: var(--space-md) clamp(var(--space-md), 4vw, var(--space-lg));
	background:
		radial-gradient(circle at center, rgb(255 255 255 / 0.16) 1.2px, transparent 1.8px) 0 0 / 10px 10px,
		var(--color-green);
	border: var(--border-strong);
	border-radius: var(--radius-md);
	box-shadow: 4px 4px 0 var(--color-ink);
	color: var(--color-white);
	rotate: -1deg;
}

.timer__label {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 2.6vw, 1.6rem);
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.timer__cells {
	display: flex;
	gap: clamp(0.4rem, 1.6vw, 0.8rem);
	perspective: 600px;
}

.timer__cell {
	display: grid;
	justify-items: center;
	gap: 0.1rem;
	width: var(--cell-w);
	padding: 0.45rem 0 0.35rem;
	background: var(--color-white);
	border: var(--border-strong);
	border-radius: var(--radius-sm);
	box-shadow: 2px 3px 0 var(--color-ink);
	color: var(--color-ink);
	rotate: 1.5deg;
}

.timer__cell:nth-child(even) {
	rotate: -1.5deg;
}

/* Секунды красные: единственный живой счётчик на виду */
.timer__cell:last-child .timer__num {
	color: var(--color-red-deep);
}

.timer__num {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 7.5vw, 3.6rem);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	backface-visibility: hidden;
}

.timer__unit {
	font-size: var(--fs-small); /* не меньше 14px (MASTER §2): поэтому короткие подписи */
	font-weight: 700;
	line-height: 1;
}

.timer__note {
	margin: 0;
	font-size: var(--fs-small);
	font-weight: 700;
}

/* live / past: штамп вместо цифр */
.timer--live,
.timer--past {
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.timer__stamp {
	margin: 0;
	padding: 0.15em 0.55em 0.25em;
	background: var(--color-white);
	border: var(--border-strong);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card), 3px 3px 0 var(--color-ink);
	color: var(--color-red-deep);
	font-family: var(--font-accent);
	font-size: clamp(1.5rem, 5vw, 2.5rem);
	line-height: 1.1;
	rotate: -3deg;
}

.timer--live .timer__stamp {
	animation: stamp-pulse 2.4s ease-in-out infinite;
}

@keyframes stamp-pulse {
	50% { scale: 1.04; rotate: -1deg; }
}

@media (max-width: 639px) {
	.timer {
		padding: var(--space-sm) var(--space-md);
	}

	.timer__cell {
		padding-block: 0.3rem 0.25rem;
	}
}

/* Дополнительный контакт в VK: одна строчка мелким текстом, не спорит с формой */
.vk-note {
	margin: 0;
	font-size: var(--fs-small);
	opacity: 0.8;
}

.vk-note a {
	color: inherit;
	font-weight: 600;
	text-underline-offset: 0.2em;
}

/* Плашка иконки в списках и карточках. Форма — настройка ярмарки «Форма значков» (класс на body, main_theme_icon_shape()):
   круг по умолчанию, шар-игрушка для зимней ярмарки, наклейка. Размер — width/height элемента, цвет — --badge */
.icon-badge {
	--badge: var(--color-green);
	position: relative;
	display: grid;
	flex-shrink: 0;
	place-items: center;
	background: var(--badge);
	border-radius: 50%;
	color: var(--color-white);
}

/* Шар-игрушка (зима): колпачок и петелька сверху, под них запас */
.icons-bauble .icon-badge {
	margin-top: 0.6em;
}

.icons-bauble .icon-badge::before,
.icons-bauble .icon-badge::after {
	content: '';
	position: absolute;
	left: 50%;
	translate: -50% 0;
}

.icons-bauble .icon-badge::before {
	bottom: 94%;
	width: 34%;
	height: 16%;
	background: var(--badge);
	border-radius: 3px 3px 0 0;
	box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.2);
}

.icons-bauble .icon-badge::after {
	bottom: 106%;
	width: 18%;
	aspect-ratio: 1;
	border: 2px solid var(--badge);
	border-radius: 50%;
}

/* Наклейка: скруглённый квадрат с обводкой и жёсткой тенью, как остальные наклейки сайта */
.icons-sticker .icon-badge {
	border: var(--border-strong);
	border-radius: 30%;
	box-shadow: 2px 2px 0 var(--color-ink);
	rotate: -4deg;
}

/* Заголовок-афиша: как «КОСТРОМА! БЕРИ!» — зелёный с красной и белой подложкой, выделенное слово красное с зелёной */
.poster-title {
	color: var(--color-green);
	line-height: 0.98;
	text-shadow: 0.04em 0.04em 0 var(--color-red), 0.08em 0.08em 0 var(--color-white);
	text-transform: uppercase;
	text-wrap: balance;
}

.poster-title__accent {
	color: var(--color-red);
	text-shadow: 0.04em 0.04em 0 var(--color-green), 0.08em 0.08em 0 var(--color-white);
}