/*
 * Формы на сайте ({crm_form}): только раскладка и состояния, без цветов
 * темы. Поля в строке, «половина ширины», ошибка у поля, ловушка для роботов.
 * Оформление (рамки, кнопка, шрифты) — в шаблоне и стилях темы; всё здесь
 * через :where(), чтобы любое правило темы его перебивало.
 */
:where([data-crm-form]) { position: relative; }
:where([data-crm-form] [hidden]) { display: none !important; }
/* «Спасибо» получает фокус после отправки, чтобы его прочёл экранный диктор;
   рамка фокуса вокруг сообщения ни к чему — его не нажимают */
:where([data-crm-success]:focus) { outline: none; }

:where([data-crm-grid]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}
:where([data-crm-grid] > *) { grid-column: 1 / -1; min-width: 0; }
:where([data-crm-grid] > [data-width="half"]) { grid-column: span 1; }

/*
 * Запасной вид полей: тема, у которой своего оформления формы нет (шаблон
 * взят из стандартной темы), получает аккуратные поля, а не голые браузерные.
 * Цвет акцента тема может задать переменной --crm-form-accent.
 */
:where([data-crm-field] input:not([type="checkbox"], [type="radio"]), [data-crm-field] textarea, [data-crm-field] select) {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #cfd4dc;
    border-radius: 8px;
    background: #fff;
    color: inherit;
    font: inherit;
}
:where([data-crm-field] input:focus, [data-crm-field] textarea:focus, [data-crm-field] select:focus) {
    outline: none;
    border-color: var(--crm-form-accent, #4f46e5);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--crm-form-accent, #4f46e5) 18%, transparent);
}
:where([data-crm-field] textarea) { resize: vertical; min-height: 110px; }
:where([data-crm-field] label) { display: block; margin-bottom: 6px; font-weight: 600; font-size: .925em; }
:where([data-crm-field] [data-crm-choice]) { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; font-weight: 400; cursor: pointer; }
:where([data-crm-field] [data-crm-choice] input) { margin-top: .2em; accent-color: var(--crm-form-accent, #4f46e5); }
:where([data-crm-submit]) {
    min-height: 44px;
    padding: 10px 22px;
    border: 0;
    border-radius: 8px;
    background: var(--crm-form-accent, #4f46e5);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

:where([data-crm-error]) { display: block; margin-top: 5px; color: #c62828; font-size: .875em; line-height: 1.35; }
:where([data-crm-field].is-invalid input, [data-crm-field].is-invalid textarea, [data-crm-field].is-invalid select) { border-color: #c62828; }
:where([data-crm-message]) { padding: 10px 12px; border-radius: 8px; color: #b71c1c; background: #fdecea; font-size: .925em; line-height: 1.4; }
:where([data-crm-success]) { padding: 14px 16px; border-radius: 10px; color: #1b5e20; background: #e8f5e9; line-height: 1.45; }

:where([data-crm-form].is-sending [data-crm-submit]) { opacity: .7; cursor: progress; }

/* Ловушка для роботов: человеку не видна и не достаётся табуляцией */
.crm-form__trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

@media (max-width: 560px) {
    :where([data-crm-grid] > [data-width="half"]) { grid-column: 1 / -1; }
}