/*
 * Стили страниц-брифов (templates/template-brief-*.php, inc/brief-front-render.php).
 * Поля переиспользуют классы .w-field__label/.w-field__box/.w-btn — те же компоненты дизайн-
 * системы ocean, что уже используются в попап-форме (css/global.css, template-parts/popups.php),
 * чтобы инпуты/textarea/select выглядели единообразно со всем остальным сайтом без новых
 * базовых стилей. Здесь только то, чего в global.css ещё нет: разметка страницы брифа,
 * группы чекбоксов, секции и honeypot-поле.
 */

.brief-page {
	padding: 48px 0 96px;
}

.brief-page__title {
	margin-bottom: 12px;
}

.brief-page__lede {
	color: var(--mid, #6b7280);
	margin-bottom: 36px;
	max-width: 760px;
}

.brief-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 760px;
}

.brief-form__section {
	margin: 28px 0 4px;
	padding-top: 20px;
	border-top: 1px solid var(--line, #e5e7eb);
	font-size: 20px;
}

.brief-form__row {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.brief-form__note {
	margin: 0;
	font-size: 13px;
	color: var(--faint, #9ca3af);
}

/* Чекбоксы — в две колонки, но только если вариантов больше трёх (иначе колонка остаётся одна —
   делить на два столбца 2-3 коротких варианта визуально ни к чему). :not(:has(...4-й)) --
   "нет четвёртого элемента" эквивалентно "вариантов 3 или меньше". На узких экранах -- всегда
   одна колонка, даже если вариантов много. */
.brief-form__choices {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 24px;
}

.brief-form__choices:not(:has(.brief-form__choice:nth-child(4))) {
	grid-template-columns: 1fr;
}

@media (max-width: 560px) {
	.brief-form__choices {
		grid-template-columns: 1fr;
	}
}

.brief-form__choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	cursor: pointer;
}

/*
 * Кастомный чекбокс — по аналогии с формой на главной / попап-формой (.popup-form__checkbox,
 * css/global.css, template-parts/popups.php, inc/shortcodes.php): тот же квадрат со скруглённым
 * углом и svg-галочка внутри, тот же путь svg (чтобы визуально совпадало 1-в-1), но на своих
 * классах — чекбоксы брифа не завязаны на разметку/JS попап-формы (.user-data--consent и т.п.
 * относятся только к ней). Нативный <input> визуально скрыт (не display:none — так чекбокс
 * остаётся в таб-порядке и доступен для скринридеров), видимый квадрат — соседний элемент,
 * управляется через :checked + .brief-form__choice-box.
 */
.brief-form__choice-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.brief-form__choice-box {
	flex: none;
	width: 1.2em;
	height: 1.2em;
	margin-top: .1em;
	position: relative;
	border: 1px solid var(--line, #e5e7eb);
	border-radius: 4px;
	color: var(--accent, #f08a3c);
	transition: border-color .2s;
}

.brief-form__choice-box svg {
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s;
}

.brief-form__choice-input:checked + .brief-form__choice-box svg {
	opacity: 1;
}

.brief-form__choice-input:focus-visible + .brief-form__choice-box {
	border-color: var(--accent, #f08a3c);
	box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #f08a3c) 25%, transparent);
}

.brief-form__choice:hover .brief-form__choice-box {
	border-color: color-mix(in oklab, var(--accent, #f08a3c) 34%, var(--line, #e5e7eb));
}

/* Чекбокс-переключатель ветки (.brief-form__tab-ttl, inc/brief-front-render.php) — визуально
   выделяем, чтобы было видно, что он ещё и открывает секцию ниже, а не просто обычный вариант. */
.brief-form__choice:has(.brief-form__tab-ttl) {
	font-weight: 500;
}

.brief-form__consent .brief-form__choice-text a {
	color: inherit;
	text-decoration: underline;
}

/* Условная секция (wavecity_brief_tab_config()) — скрыта, пока соответствующий
   .brief-form__tab-ttl не отмечен (js/brief-form.js вешает .is-active). */
.brief-form__tab-panel {
	display: none;
	flex-direction: column;
	gap: 20px;
}

.brief-form__tab-panel.is-active {
	display: flex;
}

.brief-form__row.has-error .w-field__box {
	border-color: #d63638;
}

.brief-form__row.has-error .w-field__label {
	color: #d63638;
}

/* Та же подсветка ошибки, но для чекбокса согласия (.brief-form__consent, inc/brief-form-handler.php
   выставляет has-error, если brief_consent не передан/не отмечен) -- у него нет .w-field__box. */
.brief-form__row.has-error .brief-form__choice-box {
	border-color: #d63638;
}

/* Honeypot: визуально скрыто от людей (но не display:none/visibility:hidden — простые боты
   нередко игнорируют именно такие поля), простые боты всё равно его заполняют. */
.brief-form__hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.brief-form__submit {
	align-self: flex-start;
	margin-top: 12px;
	position: relative;
}

.brief-form.sending .brief-form__submit {
	pointer-events: none;
}

/*
 * Крутилка на кнопке отправки -- перенос той же логики, что уже работает у попап-формы
 * (.popup-form__submit-sending/.popup-form__submit-text, css/global.css): при отправке текст
 * кнопки прячется, вместо него показывается вращающийся кружок. Разметка (.brief-form__submit-sending/
 * .brief-form__submit-text) в inc/brief-front-render.php уже была готова и раньше -- здесь просто не
 * было стилей, поэтому кнопка при отправке только чуть тускнела (opacity:.7 выше), а текст оставался
 * на месте и крутилка не рисовалась вообще. @keyframes spin заново не объявляем -- уже есть в
 * css/global.css, который подключается на каждой странице сайте, включая страницы брифов.
 */
.brief-form.sending .brief-form__submit-text {
	opacity: 0;
}

.brief-form.sending .brief-form__submit-sending {
	opacity: 1;
}

.brief-form__submit-sending {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 4px solid var(--on-accent);
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: calc(50% - 15px);
	left: calc(50% - 15px);
	animation-name: spin;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.brief-form__submit-sending::before {
	content: "";
	position: absolute;
	bottom: 50%;
	left: 50%;
	display: block;
	width: 16px;
	height: 16px;
	background-color: var(--accent);
	border-top-right-radius: 8px;
}

/*
 * Страница просмотра записи брифа (templates/template-brief-view.php) -- перенос табличной
 * вёрстки со старого сайта (templates/template-brief_razrabotka_single.php, класс .brief-tables
 * там же): таблица на всю ширину, зебра по строкам, центрированный h2 как заголовок секции.
 * .brief-page__lede тут не 760px-ограничен -- .brief-view переопределяет ширину под таблицу.
 */
.brief-view .brief-page__title,
.brief-view .brief-page__lede {
	max-width: none;
}

.brief-view__tables {
	max-width: 960px;
}

.brief-view__table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 24px;
}

.brief-view__table td {
	padding: 12px;
	vertical-align: top;
	border-bottom: 1px solid var(--line, #e5e7eb);
}

.brief-view__table td:first-child {
	padding-right: 30px;
	width: 34%;
}

.brief-view__table tr:nth-child(2n) td {
	background-color: color-mix(in oklab, var(--line, #e5e7eb) 45%, transparent);
}

.brief-view__table h2 {
	text-align: center;
	font-size: 24px;
	margin: 0;
}