/* Формы RSForm в оформлении сайта (14.10.2026): «Обратный звонок» (6), «Рассчитаем заказ и выставим счёт» (3),
   «Отправить смету» (5), «Не нашли, что искали?» (7), «Консультация» (4). Макеты с классом .sbm-form задаёт
   forms_design.php (migrate_forms.php, шаг F5). Подключается в окне Modals (component.php, после custom.css) и на
   обычных страницах (index.php). Правила custom.css старого сайта для форм в окне (.contentpane.modal …) здесь перекрыты. */

.sbm-form {
	--sbm-blue: #22a9e1;
	--sbm-blue-dark: #1683b1;
	--sbm-text: #1f2b37;
	--sbm-muted: #56636f;
	--sbm-line: #cfd8e0;
	--sbm-err: #c62828;
	max-width: 400px;
	margin: 0 auto;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.45;
	color: var(--sbm-text);
	text-align: left;
	container-type: inline-size;       /* ширина формы, а не окна, решает, встанут ли имя и телефон в одну строку */
}
.sbm-form--wide { max-width: 560px; }
.contentpane.modal .sbm-form { padding: 24px 24px 20px; }

/* заголовок и подзаголовок */
.sbm-form .sbm-form__title,
.contentpane.modal .sbm-form .sbm-form__title {
	margin: 0 0 6px;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--sbm-text);
	text-align: left;
}
.sbm-form .sbm-form__lead { margin: 0 0 16px; font-size: 14px; color: var(--sbm-muted); }

/* сетка Bootstrap 3 и отступы старых правил не нужны: поля друг под другом во всю ширину */
.sbm-form .formContainer { margin: 0; padding: 0; border: 0; min-width: 0; }
.sbm-form .sbm-form__row { margin: 0 0 12px; }
.sbm-form .sbm-form__label,
.sbm-form .rsform-block-name .sbm-form__label,
.sbm-form .rsform-block-phone .sbm-form__label {
	display: block;
	margin: 0 0 5px;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--sbm-text);
	text-align: left;
}
.sbm-form .sbm-form__label i { font-style: normal; color: var(--sbm-blue-dark); }
.sbm-form .sbm-form__label small { font-size: 12px; font-weight: 400; color: var(--sbm-muted); }

/* имя и телефон в одну строку, когда форма шире 440 px (окна 560 px); в узком окне и на телефоне – друг под другом */
@container (min-width: 440px) {
	.sbm-form__pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
}

/* поля ввода (16 px – без увеличения страницы на iPhone) */
.sbm-form .form-control {
	display: block;
	width: 100%;
	height: 44px;
	padding: 9px 12px;
	font: inherit;
	font-size: 16px;
	color: var(--sbm-text);
	background: #fff;
	border: 1px solid var(--sbm-line);
	border-radius: 4px;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.sbm-form .form-control::placeholder { color: #9aa5af; opacity: 1; }
.sbm-form .form-control:focus {
	border-color: var(--sbm-blue);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(34, 169, 225, .18);
}

/* файл: штатное поле браузера, кнопка «Выберите файл» в стиле сайта, под полем – форматы и размер */
.sbm-form input[type="file"] {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;                      /* legacy.css шаблона: 30 px и line-height 30 px – кнопка обрезалась */
	padding: 5px;
	font: inherit;
	font-size: 14px;
	line-height: normal;
	color: var(--sbm-muted);
	background: #fff;
	border: 1px dashed var(--sbm-line);
	border-radius: 4px;
	cursor: pointer;
}
.sbm-form input[type="file"]:hover { border-color: var(--sbm-blue); }
.sbm-form input[type="file"]:focus { outline: 0; }
.sbm-form input[type="file"]:focus-visible { outline: 0; border-color: var(--sbm-blue); box-shadow: 0 0 0 3px rgba(34, 169, 225, .18); }
.sbm-form input[type="file"]::file-selector-button {
	margin: 0 12px 0 0;
	padding: 7px 14px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--sbm-blue-dark);
	background: #f5f9fc;
	border: 1px solid var(--sbm-line);
	border-radius: 4px;
	cursor: pointer;
}
.sbm-form .has-error input[type="file"] { border-color: var(--sbm-err); }
.sbm-form .sbm-form__hint { display: block; margin-top: 4px; font-size: 12px; color: var(--sbm-muted); }

/* ошибки: RSForm ставит блоку has-error, сообщению – formError (formNoError – скрытое) */
.sbm-form .has-error .form-control { border-color: var(--sbm-err); }
.sbm-form .has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(198, 40, 40, .15); }
.sbm-form .sbm-form__error .formNoError { display: none; }
.sbm-form .sbm-form__error .formError { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--sbm-err); }
/* у имени, телефона и кода сообщение справа в строке подписи: форма не растёт и кнопка не уходит за край окна */
.sbm-form .sbm-form__row { position: relative; }
.sbm-form .rsform-block-name .sbm-form__error .formError,
.sbm-form .rsform-block-phone .sbm-form__error .formError,
.sbm-form .rsform-block-captcha .sbm-form__error .formError {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	line-height: 19px;
}
/* общее «заполните все поля» не нужно: у каждого поля своё сообщение */
.sbm-form .formRed { display: none; }

/* код с картинки: картинка, поле и кнопка «Обновить» (значок) в одну строку */
.sbm-form .sbm-form__captcha .row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	align-items: center;
	margin: 0;
}
.sbm-form .sbm-form__captcha .row::before,
.sbm-form .sbm-form__captcha .row::after { display: none; }
.sbm-form .sbm-form__captcha .row > div { float: none; width: auto; min-width: 0; padding: 0; text-align: left; }
.sbm-form .sbm-form__captcha img {
	display: block;
	height: 44px;
	width: auto;
	padding: 4px 8px;
	background: #fff;
	border: 1px solid var(--sbm-line);
	border-radius: 4px;
}
.sbm-form .sbm-form__captcha .input-group { display: flex; width: 100%; }
.sbm-form .sbm-form__captcha .input-group .form-control { flex: 1 1 auto; min-width: 0; border-radius: 4px 0 0 4px; }
.sbm-form .sbm-form__captcha .input-group-btn { display: flex; width: auto; }
.sbm-form .sbm-form__captcha .rsform-captcha-refresh-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 0 0 -1px;
	padding: 0;
	font-size: 0;                      /* текст «Обновить» остаётся для экранных дикторов, видно значок */
	color: var(--sbm-blue-dark);
	background: #f5f9fc;
	border: 1px solid var(--sbm-line);
	border-radius: 0 4px 4px 0;
	box-shadow: none;
	text-decoration: none;
}
.sbm-form .sbm-form__captcha .rsform-captcha-refresh-button::before { content: "\21BB"; font-size: 20px; line-height: 1; }
.sbm-form .sbm-form__captcha .rsform-captcha-refresh-button:hover,
.sbm-form .sbm-form__captcha .rsform-captcha-refresh-button:focus { background: #eaf4fa; color: var(--sbm-blue-dark); }

/* согласие на обработку данных: галочка слева, текст ровным блоком */
.sbm-form .sbm-form__consent .rsfp-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.sbm-form .sbm-form__consent .checkbox-inline,
.contentpane.modal .sbm-form .sbm-form__consent .checkbox-inline {
	display: block;
	position: relative;
	margin: 0;
	padding: 0 0 0 24px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--sbm-muted);
}
.sbm-form .sbm-form__consent input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 1px;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--sbm-blue);
}
.sbm-form .sbm-form__consent a { color: var(--sbm-blue-dark); }

/* кнопка */
.sbm-form .sbm-form__submit { margin: 16px 0 0; }
.sbm-form .rsform-submit-button {
	display: block;
	width: 100%;
	height: 46px;
	padding: 0 16px;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--sbm-blue);
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	cursor: pointer;
	transition: background .15s;
}
.sbm-form .rsform-submit-button:hover,
.sbm-form .rsform-submit-button:focus { background: var(--sbm-blue-dark); color: #fff; outline: 0; }
.sbm-form .rsform-submit-button:focus-visible { box-shadow: 0 0 0 3px rgba(34, 169, 225, .35); }

/* или позвонить */
.sbm-form .sbm-form__alt { margin: 12px 0 0; font-size: 13px; color: var(--sbm-muted); text-align: center; }
.sbm-form .sbm-form__alt a { font-weight: 600; color: var(--sbm-text); white-space: nowrap; text-decoration: none; }
.sbm-form .sbm-form__alt a:hover { color: var(--sbm-blue-dark); }

/* после отправки: «Спасибо, заявка принята» (текст благодарности формы в том же оформлении) */
.sbm-form--done { padding-top: 8px; }
.contentpane.modal .sbm-form--done { padding-top: 32px; }
.sbm-form--done .sbm-form__title::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	margin: 0 0 14px;
	border-radius: 50%;
	background: #e6f6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231683b1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.sbm-form--done .sbm-form__alt { text-align: left; }
.sbm-form .sbm-nowrap { white-space: nowrap; }
body.contentpane.modal { margin: 0; }      /* без формы на странице (благодарность) Bootstrap RSForm не грузится */