/* com_forms.css — стили форм заявок (перенос pdfform, WPU-110). Скоуп: .forms-page */

.forms-page {
	color: #303030;
	font-size: 15px;
	line-height: 1.25;
}.forms-page .inner {
	width: 100%;
	max-width: 1480px;
	margin: 0 auto;
}.forms-page .app-wrapper {
	padding: 75px 10px;
}@media screen and (max-width: 768px){.forms-page .app-wrapper {
		padding: 25px 10px;
	}}.forms-page .app-card {
	min-width: 360px;
	background: #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 30px 40px;
	box-shadow: 0 5px 10px 0 rgba(0,0,0,.25);
	-moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,.25);
	-webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.25);
}.forms-page .form-field {
	/* padding: 5px; */
	margin-bottom: 5px;
}.forms-page .input {
	width: 100%;
	border: none;
	border-bottom: 1px solid #cccccc;
	padding: 5px 10px;
	outline: none;
}.forms-page .app-card-title {
	font-size: 1.25rem;
	font-weight: bold;
	display: block;
}.forms-page .label-tip {
	font-size: .8rem;
    color: #757575;
    transform: translate(.5rem, .25rem);
    -moz-transform: translate(.5rem, .25rem);
    -webkit-transform: translate(.5rem, .25rem);
}.forms-page .btn-add {
	cursor: pointer;
	min-width: 200px;
	padding: .75rem 1.5rem;
	color: #fff;
	font-size: 1.25rem;
	text-align: center;
	display: inline-block;
	background: #aeaeae;
	border: none;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	outline: none;
}.forms-page .btn-submit {
	cursor: pointer;
	min-width: 250px;
	padding: 1rem 2rem;
	color: #fff;
	font-size: 1.25rem;
	text-align: center;
	display: inline-block;
	background: #c42033;
	border: none;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	outline: none;
}.forms-page .input-wrong {
	box-shadow: 0 5px 15px 0 red;
	-moz-box-shadow: 0 5px 15px 0 red;
	-webkit-box-shadow: 0 5px 15px 0 red;
}.forms-page .btn-open {
	cursor: pointer;
	width: 16px;
	height: 16px;
	background: url('../images/icon-minus.png') 0 0 no-repeat;
}.forms-page .collapsed .btn-open {
	background-image: url('../images/icon-plus.png');
}.forms-page .btn-remove {
	cursor: pointer;
	width: 12px;
	height: 14px;
	background: url('../images/icon-remove.png') 0 0 no-repeat;
	display: inline-block;
}.forms-page .vm-filled .btn-remove-wrapper {
	opacity: 0.1;
}.forms-page .fw-bold {
	font-weight: bold!important;
}.forms-page .fs-lil-bigger {
	font-size: 1.1em!important;
}.forms-page .fs-bigger {
	font-size: 1.25em!important;
}.forms-page .fs-even-bigger {
	font-size: 1.5em!important;
}.forms-page .fs-the-biggest {
	font-size: 2em!important;
}.forms-page .has-tip {
	position: relative;
}.forms-page .tip-icon-wrapper {
	position: absolute;
	display: inline-block;
	right: 0;
	top: 0;
}.forms-page .tip-inner {
	display: none;
	position: absolute;
	padding: .5rem;
	display: none;
	font-size: .75rem;
	z-index: 99;
	border-radius: .5rem;
	-moz-border-radius: .5rem;
	-webkit-border-radius: .5rem;
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
	-moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
	width: 275px;
	
	right: 0;
}.forms-page .tip-icon-wrapper:hover .tip-inner {
	display: block;
}.forms-page .tip-icon {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	background: #fff;
	line-height: 25px;
	text-align: center;
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
	-moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
	cursor: pointer;
}.forms-page .tip-heading {
	padding: .5rem .5rem .25rem;
	font-size: 1.1em;
	font-weight: bold;
}.forms-page .tip-content {
	padding: .25rem .5rem .5rem;
	max-height: 350px;
	overflow: auto;
}.forms-page input::-webkit-outer-spin-button,.forms-page input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}.forms-page .hidden-wrapper {
	visibility: hidden;
	-moz-visibility: hidden;
	-webkit-visibility: hidden;
	position: absolute;
	height: 0;
	width: 0;
}.forms-page .app-card-content .form-group-section {
	padding-left: 15px;
	padding-right: 10px;
}.forms-page .app-card-content {
	margin-left: -15px;
	margin-right: -10px;
}.forms-page .fc-red {color:red!important}.forms-page .app-familiarization {
	display: block;
	text-align: center;
	width: max-content;
	margin: 0 auto;
}.forms-page .form-loader {
    width: 24px;
    height: 24px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
	display: none;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
	margin: 0 auto;
}@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}.forms-page .btn-submit p {
	margin-bottom: 0px;
}

/* def.css */
.forms-page .vh-100 {
	height: 100vh;
}.forms-page .w-auto {
	width: auto!important;
}.forms-page .fs-lil-smaller { font-size: .9em!important }.forms-page .fs-smaller { font-size: .75em!important }

/* ===== WPU-110: крошки, согласие, дизейбл, успех ===== */
.forms-page .forms-breadcrumbs { width:100%; max-width:1480px; margin:0 auto 48px; padding:0 10px; font-size:14px; color:#757575; }
/* «Главная» — кликабельная ссылка: фиолет + underline + жёлтый hover.
   !important + -webkit-text-fill-color, чтобы перебить `a { color: inherit !important }` в styles.css
   (через инлайн/спецсимвол `currentColor` в text-fill, оригинальный color иногда не применяется). */
.forms-page .forms-breadcrumbs a.crumb { color:#5c41a6 !important; -webkit-text-fill-color:#5c41a6 !important; text-decoration:underline !important; text-decoration-color:rgba(92,65,166,.45) !important; cursor:pointer; }
.forms-page .forms-breadcrumbs a.crumb:hover,
.forms-page .forms-breadcrumbs a.crumb:focus { color:#efda49 !important; -webkit-text-fill-color:#efda49 !important; text-decoration-color:#efda49 !important; }
.forms-page .forms-breadcrumbs .crumb.current { color:#757575 !important; -webkit-text-fill-color:#757575 !important; text-decoration:none !important; cursor:default; }
.forms-page .forms-breadcrumbs .crumb-sep { color:#c4c4c4; margin:0 4px; }
.forms-page .btn-submit[disabled] { opacity:.5; cursor:not-allowed; }
.forms-page .pdf-consent { width:auto !important; margin-top:4px; }
.forms-page .consent-link, .forms-page .text-left a { color:#6759ac; }
.forms-page .forms-success { padding:80px 20px; text-align:center; }
.forms-page .forms-success .fs-bigger { color:#483b89; }

/* =====================================================================
   WPU-110: адаптация форм под фирменный стиль ABS Pro.
   Токены: шрифт PF BeauSans Pro (заголовки) / Roboto (тело, наследуется),
   фиолетовый #5c41a6 / #543b97 / #6f58ae,
   текст #2c2c3a, мягкие сиреневые бордеры #e2e0ee/#e6e3f2, спокойная
   фиолетовая кнопка #6f58ae, фон страницы #f7f6fb. Низкоконтрастный
   вариант в духе .svc-info (def.css) + footer-title.
   ===================================================================== */

/* Полотно страницы и базовая типографика */
.forms-page { background:#f7f6fb; color:#2c2c3a; font-size:16px; }
.forms-page .app-wrapper { padding:60px 10px; }

/* Заголовки — PF BeauSans Pro, фирменный фиолетовый */
.forms-page .app-title h1,
.forms-page h1 {
	font-family:'PF BeauSans Pro', 'Roboto', sans-serif !important;
	font-size:2.1rem !important;
	font-weight:600 !important;
	color:#543b97;
	line-height:1.25;
	margin-bottom:.4rem;
}
.forms-page .app-heading a { color:#5c41a6; text-decoration:underline; font-size:1rem; }
.forms-page .app-card-title,
.forms-page .form-group-heading .fw-bold {
	font-family:'PF BeauSans Pro', 'Roboto', sans-serif;
	color:#543b97;
}

/* Карточки — белые, лёгкий сиреневый бордер + мягкая тень */
.forms-page .app-card {
	background:#fff;
	border:1px solid #e6e3f2;
	border-radius:16px;
	box-shadow:0 6px 24px rgba(84,59,151,.07);
	padding:28px 32px;
}

/* Текстовые поля / селекты / textarea — мягкие сиренево-серые бордеры (без чёрного) */
.forms-page input.input:not([type="radio"]):not([type="checkbox"]),
.forms-page select.input,
.forms-page textarea.input {
	border:1px solid #e2e0ee;
	border-bottom:1px solid #e2e0ee;
	border-radius:10px;
	background:#fcfbfe;
	padding:10px 16px;
	color:#2c2c3a;
	font-size:1rem;
	outline:none;
	transition:border-color .2s, box-shadow .2s, background .2s;
}
.forms-page input.input:focus,
.forms-page select.input:focus,
.forms-page textarea.input:focus {
	border-color:#9b8bd0;
	background:#fff;
	box-shadow:0 0 0 3px rgba(111,88,174,.12);
}
.forms-page .input::placeholder { color:#a8a2c2; opacity:1; }
.forms-page input.input.input-wrong,
.forms-page textarea.input.input-wrong { border-color:#d98a84; box-shadow:0 0 0 3px rgba(196,32,51,.10); }
.forms-page .pdf-form-message {
	color:#5d5478;
	background:#f6f3fb;
	border:1px solid rgba(111,88,174,.18);
	border-radius:5px;
	font-size:1rem;
	line-height:1.35;
}
.forms-page .pdf-form-message.is-error {
	color:#9f1d2a;
	background:#fff0f2;
	border-color:rgba(196,32,51,.25);
}

/* Радио/чекбоксы — мягкий фиолетовый акцент */
.forms-page input[type="radio"].input,
.forms-page input[type="checkbox"].input,
.forms-page .input-radio,
.forms-page .pdf-consent {
	accent-color:#6f58ae;
	width:auto !important;
	border:none !important;
	box-shadow:none !important;
}

/* Подписи-подсказки */
.forms-page .label-tip { color:#8a8a99; }

/* Первичная кнопка отправки — спокойный фирменный фиолетовый (вместо жёлто-чёрной) */
.forms-page .btn-submit {
	background:#6f58ae;
	color:#fff;
	border:none;
	border-radius:10px;
	padding:.9rem 2.6rem;
	font-size:1.1rem;
	font-weight:600;
	box-shadow:0 6px 18px rgba(111,88,174,.25);
	transition:background .2s, box-shadow .2s, transform .15s;
}
.forms-page .btn-submit:hover:not([disabled]) { background:#5c41a6; box-shadow:0 8px 22px rgba(92,65,166,.28); transform:translateY(-1px); }
.forms-page .btn-submit[disabled] { opacity:.5; cursor:not-allowed; box-shadow:none; }

/* Вторичная кнопка «Добавить новый автомат» — лёгкий фиолетовый контур */
.forms-page .btn-add {
	background:#fff;
	color:#6f58ae;
	border:1px solid #c9c0e6;
	border-radius:10px;
	font-size:1.02rem;
	font-weight:600;
	transition:.2s;
}
.forms-page .btn-add:hover { background:#f1edf9; color:#543b97; border-color:#b3a6de; }

/* Спиннер на фиолетовой кнопке — белый */
.forms-page .form-loader { border-color:#fff; border-bottom-color:transparent; }

/* Ссылки согласия, предупреждения — в палитре сайта (крошки уже определены выше, ≈198-205) */
.forms-page .consent-link,
.forms-page .text-left a,
.forms-page .app-card-content a { color:#5c41a6; text-decoration:underline; }
.forms-page .fc-red, .forms-page .fs-red { color:#cf5a4c !important; }

/* Подсказки (tip) — фирменные акценты вместо нейтральных */
.forms-page .tip-icon { color:#543b97; box-shadow:0 0 0 2px #e2e0ee inset; }
.forms-page .tip-inner { border-color:#e2e0ee; }
.forms-page .tip-heading { color:#543b97; }

/* Сводка свёрнутого автомата */
.forms-page .data-wrapper-heading { border-bottom:1px solid #e2e0ee; }
.forms-page .vm-text, .forms-page .sn-text { color:#543b97; font-weight:600; }

/* =====================================================================
 * WPU-110: Нормализация лэйаута полей (UX/UI)
 * Исправляет:
 *   1) Перекрытие подсказки-«?» с правым краем инпута → padding-right + центрирование иконки
 *   2) Двойные .pr-2 от копипасты unicum → нейтрализуем
 *   3) Поля в ряду не выравнивались → flex:1 + gap
 *   4) Слишком тесные вертикальные отступы (5px) → 14-20px
 *   5) Inline style="width:240px" на пароле точки доступа → snap to flex
 *   6) .label-tip с transform: translate → нормальный поток, отступ сверху
 * ===================================================================== */

/* Вертикальный ритм */
.forms-page .form-froup { margin-bottom: 20px; }
.forms-page .form-field { margin-bottom: 14px; }
.forms-page .form-field:last-child { margin-bottom: 0; }
.forms-page .form-group-section { margin-bottom: 20px; }

/* Горизонтальные ряды: gap вместо copy-paste pr-2 */
.forms-page .form-froup > .d-flex,
.forms-page .form-froup > .d-flex > .d-flex,
.forms-page .form-froup .has-tip > .d-flex { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.forms-page .form-froup .form-field.pr-2 { padding-right: 0 !important; }
.forms-page .form-froup .pr-2 > .pr-2 { padding-right: 0 !important; }
.forms-page .form-froup .form-field > .pr-2 { padding-right: 0 !important; }

/* Равные колонки полей в ряду + минимальная ширина (не схлопывается на узких экранах) */
.forms-page .form-froup .form-field { flex: 1 1 180px; min-width: 0; margin-bottom: 0; }
/* снять inline width:240px у пароля точки доступа */
.forms-page .form-froup .form-field[style*="width"] { width: auto !important; }

/* Inputs/select: одинаковая высота, удобные внутренние отступы, место под ? */
.forms-page .input { padding: 10px 14px; }
.forms-page .has-tip { position: relative; flex: 1 1 180px; min-width: 0; }
/* Padding-right:44px только тем инпутам, что СОСЕДНИЕ с .tip-icon-wrapper
   (form-field сам по себе .has-tip, или form-field — прямой ребёнок .has-tip) */
.forms-page .form-field.has-tip .input,
.forms-page .has-tip > .form-field .input { padding-right: 44px !important; }

/* «?» по центру строки инпута, не лезет на текст */
.forms-page .tip-icon-wrapper { top: 50%; right: 10px; transform: translateY(-50%); }
/* частный случай — .has-tip оборачивает .form-field (нужно сместить чуть ниже, на уровень поля, не подписи) */
.forms-page .has-tip > .form-field + .tip-icon-wrapper,
.forms-page .has-tip > .tip-icon-wrapper { top: 22px; transform: none; }

/* Подписи под полями — нормальный поток, мягкий цвет */
.forms-page .label-tip { display: block; transform: none; margin: 6px 0 0; padding-left: 4px; font-size: .82rem; line-height: 1.35; }

/* Радио-группы (Да/Нет) — компактно рядом, не растягиваются на весь ряд.
   Нейтрализую `.form-field { flex: 1 1 180px }` для обёрток внутри .form-group-content. */
.forms-page .form-group-content .form-field { flex: 0 0 auto !important; margin-bottom: 0; }
.forms-page .form-group-content .form-field.pr-2 { padding-right: 0 !important; }
.forms-page .form-group-content > .d-flex { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.forms-page .form-group-content .form-field .input-radio { margin-right: 4px; }

/* `?` в заголовке группы — рядом с текстом, не у правого края секции.
   Для input-рядов tip-icon остаётся position:absolute (другое правило выше). */
.forms-page .form-group-heading { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.forms-page .form-group-heading > .tip-icon-wrapper { position: static !important; transform: none !important; margin: 0 !important; }

/* Блок «Постоянный онлайн» — лёгкая подсветка как у инфоблоков сайта */
.forms-page .forms-success { color:#2c2c3a; }

/* SMS-код: поле сужено через inline max-width, прижато к левому краю (наследует от .form-field).
   text-align на input.text-center нейтрализуем — текст внутри тоже к левому краю, как у других. */
.forms-page input[name$="[smscode]"] { text-align: left !important; }

/* Textarea «Причина переподключения» — узкое поле слева, в стиле остальных инпутов:
   фиксированная max-width, прижато к левому краю формы (margin-left:0), ресайз вертикальный,
   шрифт наследуется (чтобы не сваливался в monospace). */
.forms-page .reconnection-wrapper { margin: 10px 0 6px; }
.forms-page textarea[name="reconnection-reason"] {
	display: block;
	width: 100%;
	max-width: 480px;
	margin-left: 0;
	min-height: 80px;
	padding: 10px 16px;
	resize: vertical;
	font-family: inherit;
	line-height: 1.4;
	text-align: left;
}

/* WPU-110: плавный fade между фоном формы (#f7f6fb) и фоном секции «Контакты» (#f5f2ed).
   Реализовано через ::after на .forms-page — пустой 160px-блок сразу под последним
   содержимым формы, с линейным градиентом из одного фона в другой. */
.forms-page::after {
	content: "";
	display: block;
	width: 100%;
	height: 160px;
	background: linear-gradient(180deg, #f7f6fb 0%, #f5f2ed 100%);
}
@media (max-width: 768px) {
	.forms-page::after { height: 100px; }
}

/* Плавный переход цвета у ссылок-согласий (фиолетовый → жёлтый при hover). */
.forms-page .consent-link,
.forms-page .text-left a,
.forms-page .app-card-content a {
	transition: color .2s ease, text-decoration-color .2s ease;
}
.forms-page .consent-link:hover,
.forms-page .consent-link:focus,
.forms-page .text-left a:hover,
.forms-page .text-left a:focus,
.forms-page .app-card-content a:hover,
.forms-page .app-card-content a:focus {
	color: #efda49;
	text-decoration-color: #efda49;
}


/* WPU-110: всплывающая подсказка-«?» выпадает строго ПОД полем/иконкой,
   а не накрывает форму справа/сверху. */
.forms-page .tip-inner {
	top: 100%;
	bottom: auto;
	right: 0;
	left: auto;
	margin-top: 8px;
	max-width: 320px;
}
/* для «?» в заголовке группы (wrapper static) — подсказка ниже заголовка, по левому краю */
.forms-page .form-group-heading .tip-inner { right: auto; left: 0; }