/**
 * Глобальные стили форм: карточка (.s24-form-layout), поля ввода (fill-паттерн),
 * лейблы, grid-таблица полей, компоненты дат/денег, select-search, datepicker.
 * Токены: var(--s24-*) из s24-tokens.css.
 */
.s24-form-layout {
	max-width: var(--s24-content-max);
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
	margin-bottom: 3rem;
	padding: clamp(1rem, 3vw, 2.5rem);
	background: var(--s24-surface);
	border-radius: var(--s24-radius-lg);
	box-shadow: var(--s24-shadow-card);
	border: 1px solid var(--s24-border);
	box-sizing: border-box;
}

.s24-form-layout.myform {
	width: 100%;
}

/* Legacy .myform-* bridge — для гостевых форм (add_unreg), которые ещё используют старые классы */
.s24-form-layout .myform-header {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 700;
	color: var(--s24-ink);
	margin: 0 0 1.25rem;
	line-height: 1.3;
	padding: 0 0 1rem;
	border: none;
	border-bottom: 1px solid var(--s24-border);
	background: transparent;
	box-shadow: none;
}

.s24-form-layout .myform-body {
	padding: 0;
	border: none;
	box-shadow: none;
	background: transparent;
	margin-bottom: 0;
}

.s24-form-layout .myform-footer {
	margin-top: 1.5rem;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--s24-border);
	text-align: center;
	font-size: inherit;
	line-height: inherit;
	box-shadow: none;
}

.s24-form-layout .myform-body > .table {
	width: 100%;
	margin-bottom: 0;
}

.s24-form-layout .myform-body .table > tbody > tr > td {
	border: none;
	padding: 0.65rem 0;
	vertical-align: top;
}

.s24-form-layout .myform-body .table > tbody > tr > td.formaddtitle,
.s24-form-layout .formaddtitle {
	color: var(--s24-text-muted);
	font-weight: 600;
	font-size: 0.9375rem;
	padding-right: 1rem;
	width: 32%;
	min-width: 120px;
}

@media (max-width: 767px) {
	.s24-form-layout .myform-body .table > tbody > tr,
	.s24-form-layout .myform-body .table > tbody > tr > td {
		display: block;
		width: 100%;
	}
	.s24-form-layout .formaddtitle {
		padding-bottom: 0.35rem;
		padding-top: 0.75rem;
	}
}

/* ========== Единые поля ввода — fill pattern (Author24-inspired) ==========
   Канонический стиль для всех контекстов: формы, модалки, настройки профиля.
   Шеврон select — глобальный, в этом файле (единый владелец для input/select/textarea).
   background-color (не shorthand background) — чтобы не сбрасывать background-image шеврона.
   :where() на внешнем контексте — нулевая специфичность обёртки,
   чтобы страничные overrides (profile compact и т.д.) могли перебить базу.
   ========================================================================== */

/* Базовый fallback для текстовых полей вне s24-контекстов.
   Ранее это было в base-слое; владелец полей — только s24-forms.css. */
:where(
	input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="image"]):not([type="color"]),
	textarea,
	[contenteditable="true"]
) {
	border: 1px solid #cccccc;
	padding: 8px 10px;
	border-radius: 10px;
	font-family: var(--s24-font-family);
}

/* Глобальный select: кастомный шеврон */
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
	cursor: pointer;
	border: 1px solid #cccccc;
    padding: 8px 36px 8px 10px;
    border-radius: 10px;
	font-family: var(--s24-font-family);
}

select::-ms-expand {
	display: none;
}

:where(
	.s24-form-layout,
	.s24-profile-layout,
	.modal .modal-body,
	.s24-add-offer-drawer-form,
	table.s24-payer-form,
	.s24-mo-promo-input-wrap
) :is(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	select,
	textarea
) {
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	border-radius: var(--s24-radius-md);
	background-color: var(--s24-surface-alt);
	color: var(--s24-text);
	font-family: var(--s24-font-family);
	font-size: var(--s24-caption);
	line-height: 1.45;
	padding: 0.75rem 1rem;
	min-height: 48px;
	box-sizing: border-box;
	box-shadow: none;
	transition: border-color var(--s24-transition-fast), box-shadow var(--s24-transition-fast), background-color var(--s24-transition-fast);
}

/* Контексты, где также применяется input:not([type]) (не только input[type="text"]) */
:where(table.s24-payer-form, .s24-mo-promo-input-wrap) input:not([type]) {
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	border-radius: var(--s24-radius-md);
	background-color: var(--s24-surface-alt);
	color: var(--s24-text);
	font-family: var(--s24-font-family);
	font-size: 1rem;
	line-height: 1.45;
	padding: 0.75rem 1rem;
	min-height: 48px;
	box-sizing: border-box;
	box-shadow: none;
	transition: border-color var(--s24-transition-fast), box-shadow var(--s24-transition-fast), background-color var(--s24-transition-fast);
}

/*
 * Плотный контекст формы: обычный текст и поля = --s24-caption.
 * Перебивает font-size: 1rem у полей выше (выше специфичность за счёт модификатора).
 * Корень: напр. class="s24-balance-page s24-form-context--caption".
 */
.s24-form-context--caption {
	font-size: var(--s24-caption);
}

.s24-form-context--caption .s24-form__label {
	font-size: var(--s24-caption);
}

.s24-form-context--caption .s24-body-text {
	font-size: var(--s24-caption);
	line-height: var(--s24-lh-relaxed);
}

.s24-form-context--caption .s24-profile-layout :is(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	select,
	textarea
),
.s24-form-context--caption.s24-profile-layout :is(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	select,
	textarea
),
.s24-form-context--caption .s24-form-layout :is(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	select,
	textarea
) {
	font-size: var(--s24-caption);
}

/* Ширина 100% для полей в формах и профиле; обёртки (.s24-input-money и т.д.)
   ограничивают через свой max-width.
   Модалки не включены — там ширина управляется контекстно. */
.s24-form-layout :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], select, textarea),
.s24-profile-layout :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], select, textarea) {
	width: 100%;
}

/* disabled/readonly — visual lock. Базовый background полей уже задан в fill-стилях
   выше с той же специфичностью (0,0,2), этот блок идёт ниже в том же файле → побеждает
   без !important. */
input:disabled,
input[readonly],
select:disabled,
textarea:disabled,
textarea[readonly] {
	background: var(--s24-surface-alt);
	color: var(--s24-text-muted);
	cursor: default;
	opacity: 0.7;
}

/* Select: padding-right для шеврона — :is() с input нужен для равной специфичности с базовым shorthand */
:where(.s24-form-layout, .s24-profile-layout, .modal .modal-body, .s24-add-offer-drawer-form, table.s24-payer-form) :is(input[type="text"], select):where(select) {
	padding-right: 36px;
}

:where(.s24-form-layout, .s24-profile-layout, .modal .modal-body, .s24-add-offer-drawer-form) textarea {
	min-height: 140px;
	resize: vertical;
}

:where(
	.s24-form-layout,
	.s24-profile-layout,
	.modal .modal-body,
	.s24-add-offer-drawer-form,
	table.s24-payer-form,
	.s24-mo-promo-input-wrap
) :is(input, select, textarea):focus,
:where(table.s24-payer-form, .s24-mo-promo-input-wrap) input:not([type]):focus {
	border-color: var(--s24-border-focus);
	background-color: var(--s24-surface);
	outline: none;
	box-shadow: var(--s24-shadow-input-focus);
}

:where(
	.s24-form-layout,
	.s24-profile-layout,
	.modal .modal-body,
	.s24-add-offer-drawer-form,
	table.s24-payer-form,
	.s24-mo-promo-input-wrap
) :is(input, textarea)::placeholder,
:where(table.s24-payer-form, .s24-mo-promo-input-wrap) input:not([type])::placeholder {
	color: var(--s24-text-soft);
}

/* Fill-поля вне карточки формы (инлайн-редактирование на странице проекта и т.п.) */
textarea.s24-input-fill,
.s24-input-fill:is(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"]
) {
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	border-radius: var(--s24-radius-md);
	background-color: var(--s24-surface-alt);
	color: var(--s24-text);
	font-family: var(--s24-font-family);
	font-size: 1rem;
	line-height: 1.45;
	padding: 0.75rem 1rem;
	min-height: 48px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	box-shadow: none;
	transition: border-color var(--s24-transition-fast), box-shadow var(--s24-transition-fast), background-color var(--s24-transition-fast);
}

textarea.s24-input-fill {
	min-height: 7.5rem;
	resize: vertical;
}

textarea.s24-input-fill:focus,
.s24-input-fill:is(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"]
):focus {
	border-color: var(--s24-border-focus);
	background-color: var(--s24-surface);
	outline: none;
	box-shadow: var(--s24-shadow-input-focus);
}

textarea.s24-input-fill::placeholder,
.s24-input-fill:is(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	input[type="search"]
)::placeholder {
	color: var(--s24-text-soft);
}

/* Дата: блок bootstrap-datepicker */
:where(.s24-form-layout, .s24-profile-layout) .input-append.date {
	display: inline-flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: var(--s24-space-2);
	margin: 0;
}

:where(.s24-form-layout, .s24-profile-layout) .input-append.date input {
	box-shadow: none;
}

/* ── Глобально: дата с иконкой календаря внутри поля (bootstrap-datepicker `.input-append.date`) ── */
.input-append.date.s24-input-date {
	position: relative;
	display: block;
	width: 100%;
	max-width: min(12rem, 100%);
	margin: 0;
	padding: 0;
}

.input-append.date.s24-input-date--fill {
	max-width: 100%;
}

.input-append.date.s24-input-date input[type="text"],
.input-append.date.s24-input-date input:not([type]) {
	width: 100%;
	box-sizing: border-box;
	padding-right: calc(var(--s24-space-3) + 2rem + var(--s24-space-2));
}

.input-append.date.s24-input-date .add-on {
	position: absolute;
	right: var(--s24-space-2);
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--s24-radius-sm);
	background: transparent;
	cursor: pointer;
	z-index: 1;
	pointer-events: auto;
}

.input-append.date.s24-input-date .add-on:hover svg {
	opacity: 1;
}

.input-append.date.s24-input-date .add-on svg {
	margin: 0;
	opacity: 0.65;
	color: var(--s24-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   .s24-input-money — компонент «поле суммы + код валюты справа внутри капсулы».
   Единственное место, где задаётся размер капсулы (ширина, суффикс, отступы).
   Контекстные page/form-стили НЕ должны перекрывать width/max-width —
   вместо этого пользоваться модификаторами.

   Дефолт — компактная капсула 10rem (~160px) под «бюджет/цена» в табличной
   форме (market, projects, payments balance). На узких экранах — 100% ширины
   своего родителя (td/div), чтобы распадаться на отдельную строку.

   Модификаторы:
     .s24-input-money--fill   — капсула 100% шириной родителя на всех
                                breakpoint'ах (форма «Пополнение/Вывод»
                                в чекаут-таблицах, где поле всегда раскрытое).
     .s24-input-money--sm     — узкая капсула 7rem (~112px) для мелких сумм
                                в очень узких контекстах (резерв, не используется).

   Используется в:
     payments.balance.tpl (пополнение, вывод)
     market.add.tpl, market.edit.tpl (total, tax, cost, income-tax, to-payout)
     projects.add.tpl, projects.edit.tpl (cost)
     projects.offers.tpl (total, cost — форма предложения Автором)
   ═══════════════════════════════════════════════════════════════════════════ */
.s24-input-money {
	position: relative;
	display: block;
	width: 100%;
	max-width: 10rem;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	min-height: 0;
}

.s24-input-money--fill {
	max-width: 100%;
}

.s24-input-money--sm {
	max-width: 7rem;
}

.s24-input-money input[type="text"],
.s24-input-money input.money-format {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	text-align: left;
	padding-right: calc(var(--s24-space-3) + 3.25rem + var(--s24-space-4));
}

.s24-input-money__suffix {
	position: absolute;
	right: var(--s24-space-4);
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	pointer-events: none;
	font-size: var(--s24-caption);
	font-weight: 500;
	color: var(--s24-text-muted);
	white-space: nowrap;
	line-height: 1;
}

/* Капсула цены — строго до 160px на ВСЕХ экранах (и на мобиле тоже),
   чтобы короткое значение «1 000 BYN» не растягивалось во весь td/ячейку
   и суффикс валюты не уезжал далеко от цифр. Контекстам, которым нужно
   fill-поведение (balance: «Пополнить/Вывод», чекаут-формы), опт-ин через
   модификатор .s24-input-money--fill или свой селектор (см. s24-payments.css —
   `.s24-balance-billing__summ-field`, `.s24-input-money--fill`). */

@media (max-width: 600px) {
	.s24-form-layout .editor {
		width: 100%;
	}
	.s24-form-layout #remail,
	.s24-form-layout #rtelephone {
		width: 100%;
	}
	.s24-form-layout .preformtext {
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.s24-form-layout {
		padding: 0.75rem;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
	}
	.s24-form-layout .preformtext {
		padding: 1rem 0.35rem;
	}
}

/* ========== Гостевая заявка (projects.add_unreg): та же карточка, модификатор --guest ========== */
.s24-form-layout--guest {
	max-width: min(36rem, calc(100% - 2rem));
	margin-top: 0;
	margin-bottom: 2rem;
}

.s24-prj-add-hero {
	position: relative;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 var(--s24-section-pad);
	box-sizing: border-box;
}

.s24-prj-add-hero > h1 {
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--s24-ink);
	text-align: center;
	max-width: 48rem;
	margin: 0 auto;
	padding: 0.5rem 1rem 1rem;
}

.s24-form-layout--guest .preformtext {
	text-align: center;
	margin-bottom: 1rem;
}

.s24-prj-add-brand {
	font-size: clamp(1.75rem, 4vw, 2.375rem);
	font-weight: 600;
	color: var(--s24-text);
	margin-top: 0.35rem;
}

.s24-prj-add-tagline {
	font-size: 0.875rem;
	color: var(--s24-text-muted);
	letter-spacing: 0.03em;
	margin-top: 0.35rem;
}

.s24-prj-add-lead {
	font-size: 1.0625rem;
	color: var(--s24-text);
	margin-top: 1.25rem;
	line-height: 1.45;
}

/* Одна колонка полей (гость без двухколоночных formaddtitle) */
.s24-form-layout--guest .myform-body .table {
	width: 100%;
	table-layout: fixed;
}

.s24-form-layout--guest .myform-body .table > tbody > tr > td {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.s24-form-layout--guest input[type="text"],
.s24-form-layout--guest input[type="email"],
.s24-form-layout--guest textarea,
.s24-form-layout--guest select {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.s24-form-layout--guest .select-search {
	min-width: 0;
	max-width: 100%;
}

.s24-form-layout--guest .select-search-block {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Полоса фона за формой (замена легаси ::after на токен) */
.s24-prj-add-hero .myform .myform-body {
	position: relative;
}

.s24-prj-add-hero .myform .myform-body::after {
	content: "";
	position: absolute;
	background: var(--s24-page-bg);
	left: 50%;
	transform: translateX(-50%);
	width: var(--s24-breakout-width);
	top: -280px;
	height: 520px;
	z-index: -2;
	pointer-events: none;
}

/* ========== Новые form-компоненты (Author24 паттерн) ========== */

.s24-form-section {
	background: var(--s24-surface-alt);
	border-radius: var(--s24-radius-lg);
	padding: var(--s24-space-6);
	box-sizing: border-box;
}

.s24-form-section + .s24-form-section {
	margin-top: var(--s24-space-6);
}

.s24-form-section :is(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"],
	select,
	textarea
) {
	background-color: var(--s24-surface);
}

.s24-form-hint {
	color: var(--s24-text-muted);
	font-size: var(--s24-caption);
	margin-top: var(--s24-space-1);
	line-height: 1.4;
}

.s24-form-row {
	display: flex;
	gap: var(--s24-space-4);
	align-items: flex-start;
}
.s24-form-row > * { flex: 1; min-width: 0; }

@media (max-width: 640px) {
	.s24-form-row { flex-direction: column; }
}

.s24-form-card--accent {
	border-left: 3px solid var(--s24-primary);
}

/* ========== / Новые form-компоненты ========== */

/* ========== Глобальные форм-структурные классы ========== */

.s24-form__header {
	font-size: var(--s24-heading-md);
	font-weight: 700;
	color: var(--s24-ink);
	line-height: 1.3;
	margin: 0 0 var(--s24-space-5);
	padding: 0 0 var(--s24-space-4);
	border-bottom: 1px solid var(--s24-border);
}

.s24-form__body > table {
	width: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
}

.s24-form__body > table > tbody {
	display: flex;
	flex-direction: column;
	gap: var(--s24-space-4);
}

.s24-form__body table tr,
.s24-form__body table td {
	border: none;
}

.s24-form__body table > tbody > tr {
	display: grid;
	grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
	gap: var(--s24-space-4);
	align-items: center;
}

.s24-form__body table > tbody > tr > td {
	padding: 0;
}

.s24-form__body table > tbody > tr.hidden {
	display: none;
}

.s24-form__label {
	font-size: var(--s24-label);
	font-weight: 500;
	color: var(--s24-text-muted);
}

/* Лейбл‑подсказка: пунктирное подчёркивание + help‑курсор.
   Используется там, где раньше ставили отдельный значок «?» для popover/tooltip.
   Сам border‑bottom прижимается только под текстом (за счёт text-decoration). */
.s24-form__label--hint {
	text-decoration: underline dashed color-mix(in srgb, currentColor 50%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: help;
}

.s24-form__label--hint:hover {
	text-decoration-color: color-mix(in srgb, currentColor 80%, transparent);
}

.s24-form__body table > tbody > tr:has(textarea) {
	align-items: start;
}

.s24-form__body table > tbody > tr:has(textarea) .s24-form__label {
	padding-top: 0.75rem;
}

.s24-form__footer {
	margin-top: var(--s24-space-8);
	padding-top: var(--s24-space-6);
	border-top: 1px solid var(--s24-border);
}

.s24-form__section-title {
	font-weight: 600;
	font-size: var(--s24-body);
	color: var(--s24-ink);
	padding-top: var(--s24-space-4);
	border-top: 1px solid var(--s24-border);
}

.s24-required {
	color: var(--s24-danger);
	font-size: 0.95em;
	margin-left: 2px;
}

.s24-dotted-hint {
	border-bottom: 1px dashed var(--s24-text-muted);
	cursor: help;
}

/* Инлайн-ссылка «переключатель» (кликабельная, не popover) — замена
   inline style='cursor:pointer; border-bottom: 1px dashed;' в redesigned-шаблонах. */
.s24-dotted-link {
	border-bottom: 1px dashed currentColor;
	cursor: pointer;
}

@media (max-width: 767px) {
	.s24-form__body table > tbody > tr {
		grid-template-columns: 1fr;
		gap: var(--s24-space-1);
	}

	.s24-form__body table > tbody > tr:has(textarea) .s24-form__label {
		padding-top: 0;
	}
}

/* ========== / Глобальные форм-структурные классы ========== */

/* ═══ Загрузка файлов (mavatars plugin) ═══
   Кнопка-пилюля с иконкой скрепки: нейтральный бэкграунд, hover/focus — подсветка. */
.s24-file-upload {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0;
	cursor: pointer;
}

.s24-file-upload .attachment-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--s24-space-2);
	padding: 6px 20px 6px 12px;
	border: 1px solid var(--s24-border);
	border-radius: 999px;
	background: var(--s24-surface-alt);
	color: var(--s24-primary);
	font-size: var(--s24-caption);
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	transition:
		background var(--s24-transition-fast),
		border-color var(--s24-transition-fast),
		box-shadow var(--s24-transition-fast),
		color var(--s24-transition-fast);
}

/* Заливка прогресса загрузки FileAPI — поверх фона пилюли, под текстом и иконкой */
.s24-file-upload__progress-layer {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
}

.s24-file-upload__progress-fill {
	display: block;
	height: 100%;
	width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: color-mix(in srgb, var(--s24-primary) 38%, transparent);
	box-sizing: border-box;
}

.s24-file-upload .attachment-icon::before,
.s24-file-upload__label {
	position: relative;
	z-index: 1;
}

.s24-file-upload .attachment-icon::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230088cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.49'/%3E%3C/svg%3E") center / contain no-repeat;
}

.s24-file-upload:hover .attachment-icon,
.s24-file-upload:focus-within .attachment-icon {
	background: var(--s24-primary-soft, #e6f4fb);
	border-color: var(--s24-primary);
	color: var(--s24-primary-hover, #0077b3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.s24-file-upload__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	font-size: 0;
	z-index: 1;
}

/* ========== Select-search (кастомный dropdown из Cotonti-ресурса `input_select2`) ==========
   Раньше база была `width: 200px`, что заставляло все места-использования (hero-форма лендинга,
   профиль, фильтры проектов) перекрывать ширину через `!important`. Теперь база 100% — ширина
   определяется контейнером, а где нужна фикс-ширина — override локально без `!important`. */

div.select-search-block {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

div.select-search-block > input.input-select-search {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

div.select-search-block > div.select-search {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	width: auto;
	max-width: 100%;
	min-width: 0;
	margin-top: -1px;
	border-top: none;
	background-color: var(--s24-surface);
	border: 1px solid var(--s24-border);
	border-radius: var(--s24-radius-sm);
	padding: var(--s24-space-1);
	z-index: 10;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 200px;
	height: min-content;
	box-shadow: var(--s24-shadow-soft);
	box-sizing: border-box;
}

div.select-search-block > div.select-search > div.select-option {
	padding: var(--s24-space-1) var(--s24-space-2);
	cursor: pointer;
	z-index: 2;
	border-radius: var(--s24-radius-sm);
	transition: background-color var(--s24-transition-fast);
}

div.select-search-block > div.select-search > div.select-option:hover {
	background-color: var(--s24-surface-alt);
}

div.select-search-block > div.select-search > div.select-option[selected] {
	background-color: var(--s24-surface-alt);
	cursor: default;
}

div.select-search-block > div.select-search > div.select-option[disabled] {
	font-weight: 600;
	color: var(--s24-text);
	padding-top: var(--s24-space-3);
	padding-bottom: var(--s24-space-1);
	background-color: transparent;
	cursor: default;
}

/* bootstrap-datepicker — карточка S24 вместо жёлтых/синих градиентов из bootstrap-datepicker.min.css */
.datepicker {
	padding: var(--s24-space-4);
	border-radius: var(--s24-radius-lg);
	border: 1px solid var(--s24-border);
	box-shadow: var(--s24-shadow-elevated);
	background: var(--s24-surface);
	font-family: var(--s24-font-family);
	font-size: var(--s24-caption);
	color: var(--s24-text);
}

.datepicker-dropdown:before {
	border-bottom-color: color-mix(in srgb, var(--s24-border) 90%, transparent);
}

.datepicker-dropdown:after {
	border-bottom-color: var(--s24-surface);
}

.datepicker.datepicker-dropdown.datepicker-orient-top:before {
	border-top-color: color-mix(in srgb, var(--s24-border) 90%, transparent);
}

.datepicker.datepicker-dropdown.datepicker-orient-top:after {
	border-top-color: var(--s24-surface);
}

.datepicker thead tr:first-child th {
	border-bottom: 1px solid var(--s24-border);
	padding-bottom: var(--s24-space-3);
}

.datepicker th.dow {
	font-weight: 600;
	color: var(--s24-text-muted);
	font-size: var(--s24-label);
	padding-top: var(--s24-space-2);
	padding-bottom: var(--s24-space-2);
}

.datepicker .datepicker-switch {
	font-weight: 600;
	color: var(--s24-ink);
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
	background: var(--s24-surface-alt);
}

.datepicker .prev,
.datepicker .next {
	color: var(--s24-text-muted);
}

.datepicker table tr th,
.datepicker table tr td {
	min-width: 2rem;
	height: 2.25rem;
	line-height: 1.2;
	padding: var(--s24-space-1);
	border-radius: var(--s24-radius-sm);
	vertical-align: middle;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
	background: var(--s24-surface-alt);
	background-image: none;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
	color: var(--s24-text-soft);
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
	background: var(--s24-surface-alt);
	background-image: none;
	color: var(--s24-text);
	border: 1px solid var(--s24-border);
	text-shadow: none;
	filter: none;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.selected,
.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover {
	background: color-mix(in srgb, var(--s24-primary) 12%, transparent);
	background-image: none;
	color: var(--s24-primary);
	font-weight: 600;
	border-radius: var(--s24-radius-sm);
	box-shadow: none;
	border: 1px solid var(--s24-border-strong);
	text-shadow: none;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s24-primary) 25%, transparent);
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
	background: transparent;
	color: var(--s24-text-soft);
	opacity: 0.45;
}

.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
	background: var(--s24-primary);
	background-image: none;
	color: var(--s24-text-on-dark-bright);
	border: none;
	text-shadow: none;
}

/*
 * FAQ лендинга (schema.org FAQPage): только .s24-landing-faq + .faq-row (без #id в селекторах).
 * У корневого блока в tpl должен быть class="s24-landing-faq" и itemtype FAQPage.
 */
.s24-landing-faq[itemscope][itemtype*="FAQPage"] {
	margin-top: 100px;
	text-align: center;
}

.s24-landing-faq[itemscope][itemtype*="FAQPage"] > p {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	line-height: 1.25;
	margin-bottom: 2.5rem;
	font-family: inherit;
	text-indent: 0;
	color: var(--s24-ink);
	font-weight: 600;
}

.s24-landing-faq[itemscope][itemtype*="FAQPage"] .faq-row {
	margin-bottom: 25px;
	display: block;
}

.s24-landing-faq[itemscope][itemtype*="FAQPage"] .faq-row > span,
.s24-landing-faq[itemscope][itemtype*="FAQPage"] .faq-row > h2,
.s24-landing-faq[itemscope][itemtype*="FAQPage"] .faq-row > h3,
.s24-landing-faq[itemscope][itemtype*="FAQPage"] .faq-row > h4 {
	font-size: 1.0625rem;
	color: var(--s24-primary);
	line-height: 1.25;
	margin: 0;
	cursor: pointer;
}

.s24-landing-faq[itemscope][itemtype*="FAQPage"] .faq-row > span:hover,
.s24-landing-faq[itemscope][itemtype*="FAQPage"] .faq-row > h2:hover,
.s24-landing-faq[itemscope][itemtype*="FAQPage"] .faq-row > h3:hover,
.s24-landing-faq[itemscope][itemtype*="FAQPage"] .faq-row > h4:hover {
	color: var(--s24-primary-hover);
}

.s24-landing-faq[itemscope][itemtype*="FAQPage"] .faq-row > p {
	margin: 45px 10px 15px;
	font-size: 0.8125rem;
	line-height: 1.5;
	text-indent: 0;
	max-width: 600px;
	display: none;
	padding: var(--s24-space-2);
	box-sizing: border-box;
	color: var(--s24-text);
}

@media (max-width: 480px) {
	.s24-landing-faq[itemscope][itemtype*="FAQPage"] > p {
		font-size: 1.25rem;
		line-height: 1.2;
	}

	.s24-landing-faq[itemscope][itemtype*="FAQPage"] .faq-row > span,
	.s24-landing-faq[itemscope][itemtype*="FAQPage"] .faq-row > h2,
	.s24-landing-faq[itemscope][itemtype*="FAQPage"] .faq-row > h3,
	.s24-landing-faq[itemscope][itemtype*="FAQPage"] .faq-row > h4 {
		display: block;
		font-size: 0.9375rem;
		text-align: left;
	}

	.s24-landing-faq[itemscope][itemtype*="FAQPage"] .faq-row > p {
		margin-left: 0;
	}
}

/* Шторка «Добавить / редактировать предложение»: см. .s24-dialog-drawer--form
   и .s24-add-offer-drawer-form в s24-projects.css (@scope .s24-prj-page). */

@media (max-width: 480px) {
	.addofferformtext {
		display: none;
	}

	#offershowmemorelink {
		display: none;
	}
}

/* ========== Auth-формы (login, passrecover) ========== */

.s24-auth-form {
	max-width: 440px;
	margin-bottom: 0;
}

.s24-auth-form .s24-form__header h1 {
	font-size: var(--s24-heading-md);
	margin: 0;
}

.s24-auth-form .s24-form__footer {
	border-top: none;
	padding-top: var(--s24-space-4);
}

.s24-auth-form__fields {
	display: flex;
	flex-direction: column;
	gap: var(--s24-space-4);
}

.s24-auth-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--s24-space-1);
}

.s24-auth-form__alt-link {
	text-align: center;
	margin: var(--s24-space-4) auto 0;
	max-width: 440px;
	font-size: var(--s24-caption);
}

.s24-auth-form__steps {
	margin: 0 0 var(--s24-space-4);
	padding-left: 1.25em;
	font-size: 0.9375rem;
	color: var(--s24-text-secondary);
	line-height: 1.6;
}

.s24-auth-form .error {
	color: var(--s24-danger);
	background-color: color-mix(in srgb, var(--s24-danger) 8%, var(--s24-surface));
	border: 1px solid color-mix(in srgb, var(--s24-danger) 20%, transparent);
	border-radius: var(--s24-radius-sm);
	padding: var(--s24-space-3) var(--s24-space-4) var(--s24-space-3) 52px;
	margin-bottom: var(--s24-space-4);
	font-size: 0.9375rem;
}

.s24-auth-form .error.transparent {
	opacity: 0;
	transition: opacity 3.5s;
}

.s24-auth-form .help {
	color: var(--s24-text-secondary);
	background-color: color-mix(in srgb, var(--s24-primary) 6%, var(--s24-surface));
	border: 1px solid color-mix(in srgb, var(--s24-primary) 15%, transparent);
	border-radius: var(--s24-radius-sm);
	padding: var(--s24-space-3) var(--s24-space-4);
	margin-bottom: var(--s24-space-4);
	font-size: 0.9375rem;
}

.s24-auth-form--wide {
	max-width: 560px;
}

.s24-auth-form__hint {
	font-size: var(--s24-label);
	color: var(--s24-text-muted);
	margin-left: var(--s24-space-2);
}

.s24-auth-form__agreement {
	margin: var(--s24-space-5) 0 0;
	text-align: left;
}

/* Выше специфичности, чем глобальный label:has(input) в s24-components.css */
.s24-auth-form__agreement label:has(input[type="checkbox"]) {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: var(--s24-space-2);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--s24-text-secondary);
	cursor: pointer;
	max-width: 100%;
}

.s24-auth-form__agreement .s24-auth-form__agreement-text {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	line-height: 1.5;
}

.s24-auth-form__agreement a {
	font-weight: 600;
}

.s24-auth-form__agreement input[type="checkbox"] {
	width: 18px;
	height: 18px;
	min-width: 18px;
	accent-color: var(--s24-primary);
	cursor: pointer;
	vertical-align: top;
	margin: 0.15em 0 0;
	flex-shrink: 0;
}