/* =====================================================================
   Блок «Где вы о нас узнали?» и согласия во всех формах (26.10.2026; 27.10.2026 — свой список и единые согласия).
   Разметку вставляет assets/js/zvk-forms.js. Вид полей подстраивается под форму:
   скрипт берёт радиус, рамку, фон, шрифт и отступы с её же поля ввода
   (CSS-переменные --zvk-in-*), поэтому блок одинаково смотрится в светлых
   модалках, тёмных карточках экспертов и форме аренды.
   Список — свой (.zvk-sel, как #arFormat на /arenda); нативный select[name=heard_from]
   скрыт визуально и остаётся источником значения.
   Условные поля переключаются классом .is-on с !important — атрибут hidden
   проиграл бы классам страниц с display (правило 7).
   Фокус (27.10.2026, просьба владельца): без колец и свечения — только чуть темнее рамка;
   кольцо — лишь при переходе с клавиатуры (:focus-visible) у кнопок и чекбоксов.
   ===================================================================== */

.zvk-ff {
    position: relative;
    display: block; box-sizing: border-box; width: 100%;
    margin: 0 0 var(--zvk-in-mb, 12px); padding: 0; border: 0;
    font-family: var(--zvk-in-font, inherit); text-align: left;
}

/* нативный список — только источник значения (видим для экранных дикторов через свою кнопку) */
.zvk-ff .zvk-ff__native {
    position: absolute !important; left: 0; top: 0;
    width: 1px !important; height: 1px !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; pointer-events: none;
}

.zvk-ff .zvk-sel__btn,
.zvk-ff .zvk-ff__input {
    display: block; box-sizing: border-box; width: 100%; max-width: 100%; margin: 0 !important;
    padding: var(--zvk-in-pad-y, 14px) var(--zvk-in-pad-x, 16px);
    border: var(--zvk-in-border, 1px solid #e8ecf2); border-radius: var(--zvk-in-radius, 12px);
    background-color: var(--zvk-in-bg, #fff); color: var(--zvk-in-color, #0a0a0a);
    font-family: inherit; font-size: var(--zvk-in-size, 15px); line-height: 1.3; font-weight: var(--zvk-in-weight, 400);
    outline: none; box-shadow: none;
    transition: border-color .2s ease;
}
.zvk-ff .zvk-ff__input::placeholder { color: #8a96a3; opacity: 1; }

/* ---------- свой выпадающий список ---------- */
.zvk-sel { position: relative; }
.zvk-ff .zvk-sel__btn {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none;
    -webkit-tap-highlight-color: transparent;
}
.zvk-sel__val { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.zvk-sel__val.is-empty { color: #8a96a3; }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .zvk-sel__val.is-empty { color: color-mix(in srgb, var(--zvk-in-color, #0a0a0a) 52%, transparent); }
}
.zvk-sel__chev { flex: none; color: #8a96a3; transition: transform .25s cubic-bezier(.2, .8, .2, 1), color .2s ease; }
.zvk-sel.is-open .zvk-sel__chev { transform: rotate(180deg); color: #00B884; }

.zvk-sel__list {
    position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px);
    display: none; box-sizing: border-box; margin: 0; padding: 6px; list-style: none;
    max-height: none; overflow: visible;
    background: #fff; border: 1px solid #e8ecf2; border-radius: 16px;
    box-shadow: 0 24px 48px -18px rgba(10, 10, 10, .22), 0 2px 6px rgba(10, 10, 10, .04);
    font-family: var(--zvk-in-font, inherit); text-align: left;
    transform-origin: top center;
}
/* открытый список живёт в <body> (position: fixed по кнопке) — не обрезается модалкой и не прокручивается:
   все варианты видны целиком; мало места снизу — раскрывается вверх (класс .is-up ставит zvk-forms.js) */
.zvk-sel__list.is-float {
    display: block; position: fixed; z-index: 2147483000; right: auto; bottom: auto;
    animation: zvk-sel-in .18s cubic-bezier(.2, .8, .2, 1);
}
.zvk-sel__list.is-float.is-up { transform-origin: bottom center; animation-name: zvk-sel-in-up; }
.zvk-sel__opt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0; padding: 11px 12px; border-radius: 10px; cursor: pointer;
    color: #3b4552; font-size: 15px; line-height: 1.3; font-weight: 400;
    transition: background-color .12s ease, color .12s ease;
}
.zvk-sel__opt::before { content: none !important; }
.zvk-sel__opt.is-active { background: rgba(0, 229, 164, .12); color: #0a0a0a; }
.zvk-sel__opt[aria-selected="true"] { font-weight: 600; color: #0a0a0a; }
.zvk-sel__opt[aria-selected="true"]::after {
    content: ''; flex: none; width: 12px; height: 6px; margin-bottom: 3px;
    border-left: 2.5px solid #00B884; border-bottom: 2.5px solid #00B884; transform: rotate(-45deg);
}
@keyframes zvk-sel-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes zvk-sel-in-up { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }

/* фокус и наведение — только чуть темнее рамка */
.zvk-ff .zvk-sel__btn:hover, .zvk-ff .zvk-ff__input:hover { border-color: #c9d2dc; }
.zvk-ff .zvk-sel__btn:focus, .zvk-ff .zvk-ff__input:focus,
.zvk-sel.is-open .zvk-sel__btn { border-color: #b4bec9; outline: none; box-shadow: none; }
.zvk-ff .zvk-sel__btn:focus-visible { border-color: #00B884; }

.zvk-ff .zvk-ff__cond { display: none !important; margin: var(--zvk-in-gap, 12px) 0 0; }
.zvk-ff .zvk-ff__cond.is-on { display: block !important; animation: zvk-ff-in .24s cubic-bezier(.2, .8, .2, 1); }
.zvk-ff .zvk-ff__label {
    display: block; margin: 0 0 6px; padding: 0;
    font-size: 13px; font-weight: 500; line-height: 1.3; color: inherit; opacity: .78; text-align: left;
}
@keyframes zvk-ff-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ---------- согласия: один вид во всех формах ---------- */
form .zvk-ff__check {
    display: flex !important; align-items: flex-start !important; gap: 10px !important;
    cursor: pointer; text-align: left !important;
    font-size: 12.5px !important; line-height: 1.5 !important; font-weight: 400 !important; color: #5a6a7a !important;
}
form .zvk-ff__check:not(.zvk-ff__check-row) { margin-top: 14px; }
form .zvk-ff__check + .zvk-ff__check, form .zvk-ff__check-row { margin-top: 10px !important; }
form .zvk-ff__check > span { flex: 1 1 auto; min-width: 0; }
form .zvk-ff__check a {
    color: #00805c !important; font-weight: 500 !important; text-decoration: underline !important;
    text-decoration-color: rgba(0, 184, 132, .45) !important; text-decoration-thickness: 1px !important; text-underline-offset: 2px;
    border: 0 !important; background: none !important;
}
form .zvk-ff__check a:hover { color: #0a0a0a !important; text-decoration-color: #00E5A4 !important; }
/* политика обработки ПД — ссылкой под кнопкой, отдельно от согласия (28.10.2026, аудит) */
form .zvk-ff__policy { margin: 10px 0 0 !important; padding: 0 !important; font-size: 12.5px !important; line-height: 1.5 !important;
    text-align: center !important; color: #5a6a7a !important; }
form .zvk-ff__policy a { color: inherit !important; font-weight: 500; text-decoration: underline !important;
    text-decoration-color: rgba(90, 106, 122, .4) !important; text-underline-offset: 2px;
    display: inline-block; padding: 9px 0; margin: -9px 0; } /* 36 px под палец, раскладка прежняя */
form .zvk-ff__policy a:hover { color: #0a0a0a !important; text-decoration-color: #00E5A4 !important; }
form[data-zvk-theme="dark"] .zvk-ff__policy { color: rgba(255, 255, 255, .62) !important; }
form[data-zvk-theme="dark"] .zvk-ff__policy a { text-decoration-color: rgba(255, 255, 255, .3) !important; }
form[data-zvk-theme="dark"] .zvk-ff__policy a:hover { color: #fff !important; text-decoration-color: #00E5A4 !important; }
form .zvk-ff__check input[type=checkbox]{
    -webkit-appearance: none !important; appearance: none !important; flex: none !important;
    display: grid !important; place-items: center;
    width: 18px !important; height: 18px !important; min-width: 18px; margin: 1px 0 0 !important; padding: 0 !important;
    border: 1.5px solid #c9d2dc !important; border-radius: 6px !important; background: #fff !important;
    box-shadow: none !important; outline: none; cursor: pointer; accent-color: auto;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
form .zvk-ff__check input[type=checkbox]::after{
    content: ""; width: 11px; height: 11px; opacity: 0; transform: scale(.6);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: opacity .15s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}
form .zvk-ff__check input[type=checkbox]:hover{ border-color: #00B884 !important; }
form .zvk-ff__check input[type=checkbox]:checked{ background: #00E5A4 !important; border-color: #00E5A4 !important; }
form .zvk-ff__check input[type=checkbox]:checked::after{ opacity: 1; transform: none; }
form .zvk-ff__check input[type=checkbox]:focus{ outline: none !important; }
form .zvk-ff__check input[type=checkbox]:focus-visible{ box-shadow: 0 0 0 3px rgba(0, 229, 164, .35) !important; }

.zvk-ff__err {
    display: block; margin: 6px 0 0 !important; padding: 0;
    color: #e5484d; font-size: 13px; font-weight: 500; line-height: 1.4; text-align: left;
}
form .zvk-ff--invalid input[type=checkbox] { border-color: #e5484d !important; box-shadow: 0 0 0 3px rgba(229, 72, 77, .14) !important; }

/* ---------- тёмные формы (data-zvk-theme="dark" — ставит страница или сам скрипт по цвету полей) ---------- */
form[data-zvk-theme="dark"] .zvk-ff__input::placeholder { color: rgba(255, 255, 255, .42); }
form[data-zvk-theme="dark"] .zvk-sel__val.is-empty { color: rgba(255, 255, 255, .5); }
form[data-zvk-theme="dark"] .zvk-sel__chev { color: rgba(255, 255, 255, .5); }
form[data-zvk-theme="dark"] .zvk-sel.is-open .zvk-sel__chev { color: #00E5A4; }
form[data-zvk-theme="dark"] .zvk-ff .zvk-sel__btn:hover,
form[data-zvk-theme="dark"] .zvk-ff .zvk-ff__input:hover { border-color: rgba(255, 255, 255, .22); }
form[data-zvk-theme="dark"] .zvk-ff .zvk-sel__btn:focus,
form[data-zvk-theme="dark"] .zvk-ff .zvk-ff__input:focus,
form[data-zvk-theme="dark"] .zvk-sel.is-open .zvk-sel__btn { border-color: rgba(255, 255, 255, .3); }
form[data-zvk-theme="dark"] .zvk-ff .zvk-sel__btn:focus-visible { border-color: #00E5A4; }
.zvk-sel__list.is-dark {
    background: #151515; border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .7);
}
.zvk-sel__list.is-dark .zvk-sel__opt { color: rgba(255, 255, 255, .78); }
.zvk-sel__list.is-dark .zvk-sel__opt.is-active { background: rgba(0, 229, 164, .14); color: #fff; }
.zvk-sel__list.is-dark .zvk-sel__opt[aria-selected="true"] { color: #fff; }
.zvk-sel__list.is-dark .zvk-sel__opt[aria-selected="true"]::after { border-color: #00E5A4; }
form[data-zvk-theme="dark"] .zvk-ff__check { color: rgba(255, 255, 255, .6) !important; }
form[data-zvk-theme="dark"] .zvk-ff__check a { color: #00E5A4 !important; text-decoration-color: rgba(0, 229, 164, .45) !important; }
form[data-zvk-theme="dark"] .zvk-ff__check a:hover { color: #fff !important; }
form[data-zvk-theme="dark"] .zvk-ff__check input[type=checkbox]{ background: rgba(255, 255, 255, .04) !important; border-color: rgba(255, 255, 255, .3) !important; }
form[data-zvk-theme="dark"] .zvk-ff__check input[type=checkbox]:hover{ border-color: #00E5A4 !important; }
form[data-zvk-theme="dark"] .zvk-ff__check input[type=checkbox]:checked{ background: #00E5A4 !important; border-color: #00E5A4 !important; }
form[data-zvk-theme="dark"] .zvk-ff__err { color: #ff8a95; }

/* ---------- фокус полей во всех формах: без колец и свечения (просьба владельца 27.10.2026) ---------- */
form[data-zvk-form] :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), textarea):focus {
    outline: none !important; box-shadow: none !important;
}
form[data-zvk-form] :is(button, [type=submit]):focus:not(:focus-visible) { outline: none !important; }
/* поля вне data-zvk-form (поиск, калькуляторы и т. п.) — тоже без контура браузера при фокусе */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select):focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
    .zvk-ff .zvk-ff__cond.is-on, .zvk-sel__list.is-float { animation: none; }
    .zvk-sel__chev, form .zvk-ff__check input[type=checkbox]::after { transition: none; }
}