/* Элементы форм в едином стиле (образец — form-controls.html): подписи, поле с суффиксом, выпадающий список,
   чекбокс, радиокнопка. Поле .ui-input, счётчик и переключатель .ui-switch-row — в ui-form.css, переменные --ui-* в ui-modal.css.
   Выпадающий список: <select class="js-select"> заменяется скриптом template/js/ui-controls.js (исходный select остаётся
   скрытым в форме, значение и событие change сохраняются). */
:root {
    --ui-field-border-hover: #d3d3d3;
    --ui-accent-ring: rgba(232, 65, 47, .14);
    --ui-radius: 12px;
}

/* ---------- подписи и подсказки ---------- */
.ui-label { font-size: 13.5px; font-weight: 600; margin: 0; }
.ui-help { margin-top: 6px; font-size: 12.5px; color: var(--ui-muted); line-height: 1.4; }
.ui-field.invalid .ui-help { display: none; }

/* ---------- поле с суффиксом ---------- */
.ui-input:disabled { background: #f1f1f1; color: #a09c99; cursor: not-allowed; }
.ui-input-wrap { position: relative; display: flex; align-items: center; }
.ui-input-wrap .ui-suffix { position: absolute; right: 14px; font-size: 13px; color: var(--ui-muted); pointer-events: none; }
.ui-input-wrap.has-suffix .ui-input { padding-right: 46px; }

/* ---------- выпадающий список ---------- */
.ui-select { position: relative; }
.ui-select-btn {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 14px;
    font: inherit; font-size: 15px; color: var(--ui-text); text-align: left;
    background: var(--ui-field-bg); border: 1.5px solid var(--ui-field-border); border-radius: var(--ui-radius);
    cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.ui-select-btn:hover { border-color: var(--ui-field-border-hover); }
.ui-select-btn:focus, .ui-select.open .ui-select-btn {
    outline: none; background: #fff; border-color: var(--ui-accent); box-shadow: 0 0 0 4px var(--ui-accent-ring);
}
.ui-select-btn:disabled { background: #f1f1f1; color: #a09c99; cursor: not-allowed; box-shadow: none; }
.ui-select-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select-val.placeholder { color: #a9a5a2; }
.ui-select .o-icon { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin-right: 8px; }
.ui-select-opt .o-icon { flex: none; margin-right: 0; }
.ui-select-chev { flex: none; color: var(--ui-muted); transition: transform .2s; }
.ui-select.open .ui-select-chev { transform: rotate(180deg); color: var(--ui-accent); }
.ui-field.invalid .ui-select-btn { border-color: var(--ui-danger); box-shadow: 0 0 0 4px rgba(217, 47, 34, .1); background: #fff; }

.ui-select-pop {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
    margin: 0; padding: 6px; list-style: none; max-height: 260px; overflow-y: auto;
    background: #fff; border-radius: 14px; box-shadow: 0 12px 36px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .04);
    opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top; visibility: hidden;
    transition: opacity .15s, transform .15s, visibility .15s;
}
.ui-select.open .ui-select-pop { opacity: 1; transform: none; visibility: visible; }
.ui-select.up .ui-select-pop { top: auto; bottom: calc(100% + 6px); transform-origin: bottom; }
.ui-select-opt {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px;
    font-size: 14.5px; cursor: pointer; transition: background-color .1s;
}
.ui-select-opt .o-text { flex: 1; min-width: 0; }
.ui-select-opt small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ui-muted); }
.ui-select-opt .o-check { flex: none; width: 16px; height: 16px; color: var(--ui-accent); opacity: 0; }
.ui-select-opt.active { background: var(--ui-field-bg); }
.ui-select-opt[aria-selected="true"] { font-weight: 600; background: var(--ui-accent-soft); }
.ui-select-opt[aria-selected="true"] .o-check { opacity: 1; }
.ui-select-opt[aria-disabled="true"] { color: #b5b1ae; cursor: not-allowed; }

/* ---------- чекбокс и радиокнопка ---------- */
.ui-check, .ui-radio {
    display: flex; align-items: flex-start; gap: 12px; position: relative; margin: 0; cursor: pointer;
    font-size: 14.5px; line-height: 1.4; user-select: none;
}
.ui-check input, .ui-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-check .ui-box, .ui-radio .ui-dot {
    flex: none; width: 22px; height: 22px; margin-top: -1px; display: grid; place-items: center;
    background: #fff; border: 1.5px solid #cdcac8;
    transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.ui-check .ui-box { border-radius: 7px; }
.ui-radio .ui-dot { border-radius: 50%; }
.ui-check:hover .ui-box, .ui-radio:hover .ui-dot { border-color: #a9a5a2; }
.ui-check:active .ui-box, .ui-radio:active .ui-dot { transform: scale(.92); }
.ui-check .ui-box svg { width: 14px; height: 14px; color: #fff; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .2s ease .03s; }
.ui-check input:checked + .ui-box { background: var(--ui-accent); border-color: var(--ui-accent); }
.ui-check input:checked + .ui-box svg { stroke-dashoffset: 0; }
.ui-radio .ui-dot::after {
    content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ui-accent);
    transform: scale(0); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1);
}
.ui-radio input:checked + .ui-dot { border-color: var(--ui-accent); }
.ui-radio input:checked + .ui-dot::after { transform: scale(1); }
.ui-check input:focus-visible + .ui-box, .ui-radio input:focus-visible + .ui-dot {
    box-shadow: 0 0 0 4px var(--ui-accent-ring); border-color: var(--ui-accent);
}
.ui-check input:disabled + .ui-box, .ui-radio input:disabled + .ui-dot { background: #f1f1f1; border-color: #e3e3e3; }
.ui-check input:disabled ~ .ui-txt, .ui-radio input:disabled ~ .ui-txt { color: #b0acaa; }
.ui-check:has(input:disabled), .ui-radio:has(input:disabled) { cursor: not-allowed; }
.ui-txt small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ui-muted); }

@media (prefers-reduced-motion: reduce) {
    .ui-select-pop, .ui-select-chev, .ui-check .ui-box, .ui-check .ui-box svg, .ui-radio .ui-dot::after { transition: none; }
}

/* Суффикс длиннее двух-трёх символов (расширение файла «.jpeg», «.webp»): шире отступ справа */
.ui-input-wrap.ui-suffix-wide.has-suffix .ui-input { padding-right: 72px; }