/*
 * Форма отзыва.
 *
 * ─── ДВА КЛАССА В КАЖДОМ СЕЛЕКТОРЕ ─────────────────────────────────────────
 * Кит Elementor (.elementor-kit-8) красит любые input, button и a правилами
 * специфичности (0,1,1). Одноклассовый селектор (0,1,0) им проигрывает —
 * и проигрывает незаметно: на десктопе выглядит нормально, ломается на мобиле.
 * Поэтому везде .irga-rf .irga-rf__…, а для :hover и :focus правила
 * переутверждаются явно — у кита для них свои строки той же силы.
 *
 * ─── ЗНАЧЕНИЯ ──────────────────────────────────────────────────────────────
 * Из 08_Дизайн/Токены.md. Берём переменные кита, но с запасными значениями:
 * форма должна выглядеть правильно и на странице без кита.
 * Стекла и градиентов нет — они в системе запрещены.
 */

.irga-rf {
	--irga-accent: var(--accent, #FD6A0A);
	--irga-accent-hover: var(--accent-hover, #EA580C);
	--irga-surface: var(--light-surface, #FFFFFF);
	--irga-band: var(--light-band, #E9EDF1);
	--irga-border: var(--light-border, #E2E8F0);
	--irga-text: var(--text, #0F172A);
	--irga-muted: var(--muted, #475569);
	--irga-radius: 8px;

	max-width: 720px;
	margin: 0 auto;
	font-family: var(--font-body, "Inter", -apple-system, "Segoe UI", Roboto, sans-serif);
	color: var(--irga-text);
	text-align: left;
}

.irga-rf .irga-rf__field { margin: 0 0 20px; }
.irga-rf .irga-rf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.irga-rf .irga-rf__label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--irga-text);
}

.irga-rf .irga-rf__req { color: var(--irga-accent); }

/* font-size 16px обязателен: на меньшем iOS зумит страницу при фокусе. */
.irga-rf .irga-rf__input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 12px 16px;
	/* Не токен Border: #E2E8F0 на белом даёт 1.28:1, ниже нормы 3:1 для границ
	   элементов управления. #475569 — 7.2:1. */
	border: 1px solid var(--irga-muted);
	border-radius: var(--irga-radius);
	background: var(--irga-surface);
	color: var(--irga-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.irga-rf .irga-rf__input:focus,
.irga-rf .irga-rf__input:focus-visible {
	border-color: var(--irga-accent);
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(253, 106, 10, .22);
}

.irga-rf .irga-rf__textarea { min-height: 220px; resize: vertical; }
.irga-rf .irga-rf__select { appearance: auto; }

.irga-rf .irga-rf__file {
	display: block;
	width: 100%;
	padding: 12px 0;
	font-size: 15px;
	color: var(--irga-text);
}

.irga-rf .irga-rf__hint {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--irga-muted);
}

/* ── Репитеры файлов и ссылок ────────────────────────────────────────────── */

.irga-rf .irga-rf__rows { margin: 0 0 10px; }

.irga-rf .irga-rf__row-item {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0 0 10px;
	min-width: 0;
}

.irga-rf .irga-rf__row-item--link { flex-wrap: wrap; }
.irga-rf .irga-rf__row-item--link .irga-rf__input { flex: 1 1 100%; min-width: 0; }

.irga-rf .irga-rf__row-item .irga-rf__file { flex: 1 1 auto; min-width: 0; padding: 0; }

.irga-rf .irga-rf__row-del {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--irga-border);
	border-radius: var(--irga-radius);
	background: var(--irga-surface);
	color: var(--irga-muted);
	font-family: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 160ms ease, color 160ms ease;
}

.irga-rf .irga-rf__row-del:hover,
.irga-rf .irga-rf__row-del:focus {
	border-radius: var(--irga-radius);
	border-color: var(--irga-muted);
	color: var(--irga-text);
	background: var(--irga-surface);
	transform: none;
	box-shadow: none;
}

.irga-rf .irga-rf__add {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--irga-border);
	border-radius: var(--irga-radius);
	background: var(--irga-surface);
	color: var(--irga-accent);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.irga-rf .irga-rf__add:hover,
.irga-rf .irga-rf__add:focus {
	border-radius: var(--irga-radius);
	border-color: var(--irga-accent);
	background: var(--irga-band);
	color: var(--irga-accent);
	transform: none;
	box-shadow: none;
}

.irga-rf .irga-rf__hint--row { margin: -12px 0 20px; }
.irga-rf .irga-rf__hint--foot { margin-top: 12px; text-align: center; }

.irga-rf .irga-rf__filelist {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: var(--irga-radius);
	background: var(--irga-band);
	font-size: 13px;
	line-height: 1.6;
	color: var(--irga-muted);
	/* Имена файлов с телефона бывают без пробелов и длиннее колонки. */
	overflow-wrap: anywhere;
}

.irga-rf .irga-rf__block {
	margin: 0 0 24px;
	padding: 20px;
	border: 1px solid var(--irga-border);
	border-radius: 12px;
	background: var(--irga-surface);
	/* fieldset по умолчанию не даёт себя сжать ниже ширины содержимого —
	   длинное имя файла в сводке иначе растянуло бы блок за края формы. */
	min-inline-size: 0;
}

/*
 * Заголовок блока — обычный абзац НАД fieldset, а не <legend>.
 * Браузерный legend получает display:table, садится верхом на линию рамки и
 * сдвигается внутрь на padding блока (у нас это было 17 px). Стилями это
 * чинится плохо и по-разному в разных браузерах, поэтому заголовок вынесен
 * наружу, а группа связана с ним через aria-labelledby.
 */
.irga-rf .irga-rf__block-title {
	padding: 0;
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	color: var(--irga-text);
}

.irga-rf .irga-rf__check {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.55;
	cursor: pointer;
}

.irga-rf .irga-rf__check:last-child { margin-bottom: 0; }
.irga-rf .irga-rf__check--small { font-size: 14px; margin-bottom: 10px; }

.irga-rf .irga-rf__check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--irga-accent);
}

.irga-rf .irga-rf__check a { color: var(--irga-accent); text-decoration: underline; }
.irga-rf .irga-rf__check a:hover { color: var(--irga-accent-hover); }

.irga-rf .irga-rf__details { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--irga-border); }
.irga-rf .irga-rf__summary { cursor: pointer; font-size: 15px; font-weight: 600; line-height: 1.4; }

/*
 * Кнопка — общий токен сайта (Токены.md §1). Радиус переутверждается в :hover
 * и :focus: кит держит для них отдельные правила с border-radius:999px, и без
 * этих строк угол скачет на пилюлю при наведении.
 */
.irga-rf .irga-rf__btn {
	display: block;
	width: 100%;
	padding: 16px 32px;
	border: 0;
	border-radius: var(--irga-radius);
	background: var(--irga-accent);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.irga-rf .irga-rf__btn:hover,
.irga-rf .irga-rf__btn:focus,
.irga-rf .irga-rf__btn:focus-visible {
	border-radius: var(--irga-radius);
	background: var(--irga-accent-hover);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(253, 106, 10, .28);
}

.irga-rf .irga-rf__btn:active { transform: translateY(0); box-shadow: none; }

.irga-rf .irga-rf__btn[disabled] {
	opacity: .6;
	cursor: progress;
	transform: none;
	box-shadow: none;
}

.irga-rf .irga-rf__errors,
.irga-rf .irga-rf__ok {
	margin: 0 0 24px;
	padding: 16px 20px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.6;
}

.irga-rf .irga-rf__errors {
	border: 1px solid #FCA5A5;
	background: #FEF2F2;
	color: #7F1D1D;
}

.irga-rf .irga-rf__errors-title { margin: 0 0 8px; font-weight: 600; }
.irga-rf .irga-rf__errors ul { margin: 0; padding-left: 20px; }
.irga-rf .irga-rf__errors li { margin: 0 0 4px; overflow-wrap: anywhere; }
.irga-rf .irga-rf__errors-note { margin: 10px 0 0; font-size: 14px; }

.irga-rf .irga-rf__ok {
	margin: 0;
	padding: 32px;
	border: 1px solid var(--irga-border);
	background: var(--irga-surface);
	text-align: center;
}

.irga-rf .irga-rf__ok p { margin: 0 0 10px; }
.irga-rf .irga-rf__ok p:last-child { margin-bottom: 0; }
.irga-rf .irga-rf__ok-title { font-size: 20px; font-weight: 700; line-height: 1.3; }

/* Honeypot. Не display:none и не hidden — часть ботов такие поля пропускает. */
.irga-rf .irga-rf__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 640px) {
	.irga-rf .irga-rf__row { grid-template-columns: 1fr; gap: 0; }
	.irga-rf .irga-rf__hint--row { margin: -8px 0 20px; }
	.irga-rf .irga-rf__block { padding: 16px; }
	.irga-rf .irga-rf__ok { padding: 24px 20px; }
	.irga-rf .irga-rf__textarea { min-height: 180px; }
}