/* Анкета за видео о станке — page-form-gift.php, страница /bonusvideo.
   Оформление повторяет Яндекс.Форму, чью вставку блок дублирует: подпись жирная
   с синей звёздочкой, серая пояснительная строка под полем, варианты подарка —
   карточки во всю ширину, у выбранной синяя рамка.

   Шрифт и кегль взяты у текста условий акции выше по странице (запись
   rec2415604541): Montserrat 16px/23.2px — чтобы анкета читалась как продолжение
   статьи, а не как чужая вставка. */

.wsn-gift {
	padding: 0 20px 60px;
}

.wsn-gift * { box-sizing: border-box; }

/* Половина ширины страницы, по центру. Ниже 980px это уже слишком узко для
   адреса и ссылок — там колонка расходится на всю ширину. */
.wsn-gift__box {
	width: 50%;
	margin: 0 auto;
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 16px;
	line-height: 23.2px;
	color: #000;
	text-align: left;
}

/* Заголовок анкеты — был шапкой блока t678 у формы закрытого клуба:
   по центру, крупнее полей, с большим отступом до первого поля. */
.wsn-gift__head {
	margin: 0 0 40px;
	font-size: 28px;
	line-height: 1.3;
	font-weight: 700;
	text-align: center;
}

.wsn-gift__field { margin-bottom: 28px; }

.wsn-gift__label {
	display: block;
	margin-bottom: 10px;
	font-size: 16px;
	line-height: 23.2px;
	font-weight: 700;
}

/* Звёздочка обязательного поля — отдельным знаком слева, как в анкете */
.wsn-gift__req {
	margin-right: 6px;
	color: #4f74f5;
	font-style: normal;
	font-weight: 700;
}

/* Поля во всю ширину колонки */
.wsn-gift__input,
.wsn-gift__area {
	display: block;
	width: 100%;
	border: 1px solid #e3e3e8;
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	font-size: 16px;
	line-height: 23.2px;
	color: #000;
	outline: none;
	transition: border-color .15s ease-in-out;
}

.wsn-gift__input {
	height: 46px;
	padding: 0 14px;
}

.wsn-gift__area {
	min-height: 200px;
	padding: 12px 14px;
	resize: vertical;
}

.wsn-gift__input:focus,
.wsn-gift__area:focus { border-color: #4f74f5; }

.wsn-gift__hint {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 23.2px;
	color: #9a9aa4;
}

/* Пояснение НАД полем — в анкете мастера серая строка про видеосвязь стоит
   между подписью группы и карточками ответов, а не под ними. */
.wsn-gift__hint_top { margin: -4px 0 10px; }

/* ---------- выбор подарка ---------- */

.wsn-gift__opts {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wsn-gift__opt {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border: 1px solid #e3e3e8;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease-in-out;
}

.wsn-gift__opt:hover { border-color: #c9c9d2; }

/* Выбранная карточка обводится синим — по ней видно ответ, не приглядываясь
   к кружку. :has поддерживают все актуальные браузеры; где нет, останется
   обычная рамка, а сам выбор всё равно виден по кружку. */
.wsn-gift__opt:has(.wsn-gift__radio:checked) { border-color: #4f74f5; }

/* Кружок рисуем сами: штатный вид переключателя в разных браузерах разный,
   а карточка должна выглядеть одинаково везде. */
.wsn-gift__radio {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1px solid #d4d4dc;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease-in-out;
}

.wsn-gift__radio:checked {
	border-color: #4f74f5;
	background-image: radial-gradient(circle, #4f74f5 0 5px, #fff 6px 100%);
}

.wsn-gift__opt-text {
	font-size: 16px;
	line-height: 23.2px;
}

/* ---------- ошибки заполнения ----------
   Строка ошибки стоит сразу под полем и выше серой подсказки —
   так же, как было в анкете. Пока ошибки нет, абзац скрыт атрибутом
   hidden и места не занимает. */

.wsn-gift__error {
	margin: 8px 0 0;
	font-size: 16px;
	line-height: 23.2px;
	color: #ff2c2c;
}

.wsn-gift__error[hidden] { display: none; }

/* Серая подсказка после красной строки прижимается к ней вплотную:
   два одинаковых отступа подряд читаются как разрыв. */
.wsn-gift__error + .wsn-gift__hint { margin-top: 4px; }

.wsn-gift__input_bad,
.wsn-gift__input_bad:focus { border-color: #ff2c2c; }

.wsn-gift__opt_bad { border-color: #ff2c2c; }

/* Мелкая строка про согласие — вид сохранён тот же, что был под вставкой
   Яндекс.Формы: Arial 13px, светло-серый, ссылка подчёркнута. */

.wsn-gift__consent {
	margin: 28px 0 0;
	font-family: Arial, sans-serif;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.45;
	color: #a3a3a3;
}

.wsn-gift__consent a { color: #adadad; text-decoration: underline; }
.wsn-gift__consent a:hover { color: #3a8aee; }

/* ---------- анкета за отзыв ----------
   Вступление стояло внутри Яндекс.Формы: две жирные строки и серое пояснение
   под ними. Строка-тупик про фото — обычным текстом, без красного: это не
   ошибка заполнения, а просьба вернуться позже. Кнопка «Загрузить» повторяет
   вид анкеты: рамка, скругление, значок со стрелкой вверх. */

.wsn-gift__intro {
	margin: 0 0 4px;
	font-size: 16px;
	line-height: 23.2px;
	font-weight: 700;
}

.wsn-gift__intro-note {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 23.2px;
	color: #9a9aa4;
}

.wsn-gift__stop {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 23.2px;
	font-weight: 700;
}

.wsn-gift__file-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Само поле выбора файлов скрыто: вид «Обзор…» у каждого браузера свой, а
   кнопка в анкете одна и та же. Нажимают на подпись, поле внутри неё. */
.wsn-gift__file {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.wsn-gift__file-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border: 1px solid #e3e3e8;
	border-radius: 8px;
	background: #fff;
	font-size: 16px;
	line-height: 1;
	font-weight: 700;
	cursor: pointer;
	transition: border-color .15s ease-in-out;
}

.wsn-gift__file-btn:hover { border-color: #c9c9d2; }

/* Значок «стрелка вверх из скобки» рисуем фоном: одна картинка на кнопку,
   отдельный файл ради 16 пикселей не нужен. */
.wsn-gift__file-ico {
	width: 16px;
	height: 16px;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10.5V2.5'/%3E%3Cpath d='M5 5.5 8 2.5l3 3'/%3E%3Cpath d='M2.5 10.5v2a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-2'/%3E%3C/svg%3E");
}

.wsn-gift__file-note {
	font-size: 16px;
	line-height: 23.2px;
	color: #9a9aa4;
}

.wsn-gift__file-list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.wsn-gift__file-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 16px;
	line-height: 23.2px;
}

.wsn-gift__file-name { word-break: break-all; }

.wsn-gift__file-del {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 1px solid #e3e3e8;
	border-radius: 50%;
	background: #fff;
	font-size: 16px;
	line-height: 1;
	color: #9a9aa4;
	cursor: pointer;
}

.wsn-gift__file-del:hover { border-color: #ff2c2c; color: #ff2c2c; }

/* ---------- кнопка ---------- */

.wsn-gift__btn {
	margin-top: 20px;
	padding: 14px 26px;
	border: 0;
	border-radius: 8px;
	background: #4f74f5;
	font-family: inherit;
	font-size: 16px;
	line-height: 1;
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease-in-out;
}

.wsn-gift__btn:hover { background: #4165e6; }

/* Строка под кнопкой: ошибка отправки. Ошибки полей живут у самих
   полей, эта — про связь с сервером, поэтому отдельно. */

.wsn-gift__sent {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 23.2px;
}

.wsn-gift__sent_bad { color: #ff2c2c; }

/* Благодарность на месте анкеты после отправки */
.wsn-gift__thanks {
	margin: 0;
	padding: 40px 0;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
}

/* ---------- узкие экраны ---------- */

@media (max-width: 979px) {
	.wsn-gift__box { width: 100%; max-width: 640px; }
}

@media (max-width: 640px) {
	.wsn-gift { padding-bottom: 40px; }
	/* Кнопка и подпись рядом не влезают — подпись уходит под кнопку */
	.wsn-gift__file-row { flex-direction: column; align-items: flex-start; gap: 10px; }
	.wsn-gift__opt { padding: 15px 16px; gap: 12px; }
	.wsn-gift__area { min-height: 160px; }
	.wsn-gift__btn { width: 100%; }
}