/* ==========================================================================
   SC FIELDS — СТАНДАРТ ТРИГГЕРОВ ПОИСКА (город / даты / гости)
   t_046cab9e, 18.09.2026

   ЗАЧЕМ ЭТОТ ФАЙЛ
   sc-calendar.css стилизует только ВНУТРЕННОСТИ попапов (календарь, счётчик
   гостей, список городов). Сами поля-триггеры (.sc-field) до сих пор каждая
   страница рисовала сама, и правила расползлись по четырём местам:
     .hf-sheet .sc-field        — hotels-list-v2.css (шторка поиска, список)
     .hf-header-search .sc-field— header_1.php, инлайновый <style> (шапка)
     .sc-widget .sc-field       — catalog/main/section.php (главная/раздел)
     .sc-widget-detail .sc-field— catalog.element/main2/template.php (детальная)
   Одинаковые по смыслу поля выглядели по-разному, а любая правка означала
   четыре правки. Здесь — один источник правды.

   КАК ПОДКЛЮЧАТЬ
     <link rel="stylesheet" href="/js/sc-calendar.css?v=...">
     <link rel="stylesheet" href="/js/sc-fields.css?v=...">
   Разметка:
     <div class="sc-fields sc-fields--list-desktop">
       <div class="sc-field sc-field--location" id="...">
         <svg class="sc-field__icon">…</svg>
         <div class="sc-field__label">Куда</div>
         <input class="sc-field__value" …>        <!-- или div для дат/гостей -->
       </div>
       …
     </div>
   Пресет выбирается классом контейнера, разметка внутри — одна и та же:
     sc-fields--list-desktop    строка полей с разделителями (список, шапка)
     sc-fields--list-mobile     стопка полей-карточек (шторка поиска)
     sc-fields--detail-desktop  вертикальный блок бронирования на карточке отеля
     sc-fields--detail-mobile   то же, крупнее, под палец

   ВАЖНО: ВСЕ правила ниже живут под .sc-fields. Файл можно подключать на
   страницу, где разметка ещё старая, — на существующие .sc-field вне
   контейнера .sc-fields он не влияет, ничего не ломает и ничего не требует
   переделывать «прямо сейчас». Перевод страниц на стандарт — по одной.
   ========================================================================== */

.sc-fields {
    --scf-ink: var(--sc-ink, #12213B);
    --scf-muted: var(--sc-muted, var(--muted,#6B7280));
    --scf-placeholder: var(--muted-2,#9AA1AD);
    --scf-line: var(--sc-border, #E1E6F2);
    --scf-surface: var(--sc-surface, #fff);
    --scf-accent: var(--sc-primary, var(--blue,#1E4FA3));
    --scf-radius: 10px;
    --scf-tap: 44px; /* минимальная зона нажатия, mobile-first */

    display: flex;
    box-sizing: border-box;
    font-family: inherit;
}

.sc-fields *,
.sc-fields *::before,
.sc-fields *::after {
    box-sizing: border-box;
}

/* --- Поле ---------------------------------------------------------------- */
.sc-fields .sc-field {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--scf-tap);
    padding: 8px 12px;
    background: transparent;
    border-radius: var(--scf-radius);
    cursor: pointer;
    user-select: none;
}

.sc-fields .sc-field--location {
    cursor: text;
}

.sc-fields .sc-field__icon {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    color: var(--scf-muted);
    pointer-events: none;
}

/* Класс можно вешать и на сам <svg>, и на обёртку <span> вокруг него —
   в существующей вёрстке встречаются оба варианта. */
.sc-fields .sc-field__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Подпись — служебная, поэтому мелкая и приглушённая: главное в поле это
   значение, а не слово «Даты» (требование канона о видимой иерархии). */
.sc-fields .sc-field__label {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--scf-muted);
    pointer-events: none;
}

.sc-fields .sc-field__value {
    display: block;
    width: 100%;
    padding: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--scf-ink);
    background: transparent;
    border: none;
    outline: none;
}

/* Незаполненное поле отличается от заполненного весом и цветом — иначе
   «Заезд — Выезд» читается как уже выбранные даты. */
.sc-fields .sc-field__value.placeholder,
.sc-fields .sc-field__value::placeholder {
    color: var(--scf-placeholder);
    font-weight: 500;
}

.sc-fields .sc-field:hover {
    background: #F7F8FB;
}

/* Открытый попап этого поля: подсветка держится, пока попап открыт
   (класс вешает сам sc-calendar.js через opts.activeClass). */
.sc-fields .sc-field--active {
    background: #F2F5FD;
    box-shadow: inset 0 0 0 1.5px var(--scf-accent);
}

/* Иконка есть — уводим текст вправо, нет — поле остаётся плотным. */
.sc-fields .sc-field:has(.sc-field__icon) .sc-field__label,
.sc-fields .sc-field:has(.sc-field__icon) .sc-field__value {
    padding-left: 28px;
}

/* --- Кнопка поиска ------------------------------------------------------- */
.sc-fields .sc-field-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: var(--scf-tap);
    min-height: var(--scf-tap);
    padding: 0 18px;
    font: inherit;
    font-weight: 700;
    color: #fff;
    background: var(--scf-accent);
    border: none;
    border-radius: var(--scf-radius);
    cursor: pointer;
}

.sc-fields .sc-field-submit:hover {
    filter: brightness(1.06);
}

/* ==========================================================================
   ПРЕСЕТ 1: СПИСОК, ДЕСКТОП — одна строка, поля разделены линиями
   ========================================================================== */
.sc-fields--list-desktop {
    align-items: center;
    gap: 0;
    padding: 4px;
    background: var(--scf-surface);
    border: 1px solid var(--scf-line);
    border-radius: 999px;
}

.sc-fields--list-desktop .sc-field {
    flex: 1 1 auto;
    min-width: 128px;
    border-radius: 999px;
}

.sc-fields--list-desktop .sc-field + .sc-field {
    box-shadow: inset 1px 0 0 var(--scf-line);
}

.sc-fields--list-desktop .sc-field--active + .sc-field,
.sc-fields--list-desktop .sc-field--active {
    box-shadow: inset 0 0 0 1.5px var(--scf-accent);
}

.sc-fields--list-desktop .sc-field--dates { min-width: 210px; }
.sc-fields--list-desktop .sc-field--location { min-width: 160px; }
.sc-fields--list-desktop .sc-field-submit { border-radius: 999px; margin-left: 4px; }

/* Компактный вариант строки — для шапки сайта, где высота ограничена самим
   хедером и полноразмерные 44px-поля его раздувают. Это НЕ пятый пресет:
   раскладка та же, меняются только плотность и кегль. */
.sc-fields--compact {
    --scf-tap: 34px;
    --scf-radius: 6px;
    padding: 2px;
    border-radius: 8px;
}

.sc-fields--compact .sc-field {
    padding: 4px 12px;
    min-width: 104px;
    border-radius: var(--scf-radius); /* не «пилюля» — в компактной строке она выглядит грубо */
}

.sc-fields--compact .sc-field__value {
    font-size: 13px;
    white-space: nowrap;
}

.sc-fields--compact .sc-field--location { min-width: 150px; }
.sc-fields--compact .sc-field--dates { min-width: 220px; }

.sc-fields--compact .sc-field + .sc-field {
    box-shadow: inset 1px 0 0 var(--scf-line);
}

/* ==========================================================================
   ПРЕСЕТ 2: СПИСОК, МОБИЛКА — стопка полей-карточек в шторке поиска
   ========================================================================== */
.sc-fields--list-mobile {
    flex-direction: column;
    gap: 10px;
}

.sc-fields--list-mobile .sc-field {
    border: 1px solid var(--scf-line);
    border-radius: var(--scf-radius);
    padding: 10px 14px;
    background: var(--scf-surface);
}

.sc-fields--list-mobile .sc-field__value {
    font-size: 16px; /* 16px — иначе iOS зумит страницу при фокусе в input */
}

.sc-fields--list-mobile .sc-field-submit {
    width: 100%;
    margin-top: 2px;
}

/* Прямоугольный вариант строки: вместо «пилюли» — обычные скругления по --scf-radius.
   Так выглядит виджет поиска на посадочных (раздел каталога), и при переводе его на
   стандарт форма не должна поменяться. Комбинируется с любым пресетом. */
.sc-fields--squared,
.sc-fields--squared .sc-field,
.sc-fields--squared .sc-field-submit {
    border-radius: var(--scf-radius);
}

/* Мягкий вариант: поля не в рамке, а заливкой. Так уже выглядит мобильная шторка
   поиска на списке отелей, и при переводе её на стандарт вид не должен поменяться.
   Комбинируется с любым пресетом. */
.sc-fields--soft .sc-field {
    background: #F4F6FB;
    border: 1px solid transparent;
    border-radius: 14px;
}

.sc-fields--soft .sc-field:hover {
    background: #EEF1F8;
}

.sc-fields--soft .sc-field--active {
    background: #F2F5FD;
    border-color: var(--scf-accent);
    box-shadow: none;
}

/* ==========================================================================
   ПРЕСЕТ 3: ДЕТАЛЬНАЯ, ДЕСКТОП — блок бронирования в карточке отеля
   ========================================================================== */
.sc-fields--detail-desktop {
    flex-direction: column;
    gap: 0;
    background: var(--scf-surface);
    border: 1px solid var(--scf-line);
    border-radius: 14px;
    padding: 6px;
}

.sc-fields--detail-desktop .sc-field + .sc-field {
    box-shadow: inset 0 1px 0 var(--scf-line);
}

.sc-fields--detail-desktop .sc-field-submit {
    width: 100%;
    margin-top: 6px;
}

/* ==========================================================================
   ПРЕСЕТ 4: ДЕТАЛЬНАЯ, МОБИЛКА — то же, но крупнее и без лишней рамки
   ========================================================================== */
.sc-fields--detail-mobile {
    flex-direction: column;
    gap: 8px;
}

.sc-fields--detail-mobile .sc-field {
    border: 1px solid var(--scf-line);
    border-radius: var(--scf-radius);
    padding: 12px 14px;
}

.sc-fields--detail-mobile .sc-field__value {
    font-size: 16px;
}

.sc-fields--detail-mobile .sc-field-submit {
    width: 100%;
    min-height: 48px;
}

/* ==========================================================================
   ПАРА ПРЕСЕТОВ: ДЕСКТОП ПОВЕРХ МОБИЛЫ (≥861px)
   Когда на контейнере стоят оба класса (--list-desktop + --list-mobile), базовые
   правила мобильного пресета объявлены ниже десктопных и при равной специфичности
   выигрывают — строка полей разваливалась в столбик даже на широком экране.
   Поэтому выше мобильного брейкпоинта десктопная раскладка возвращается явно.
   ========================================================================== */
@media (min-width: 861px) {
    .sc-fields--list-desktop.sc-fields--list-mobile {
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    .sc-fields--list-desktop.sc-fields--list-mobile .sc-field {
        flex: 1 1 auto;
        min-width: 128px;
        border: none;
        background: transparent;
    }

    .sc-fields--list-desktop.sc-fields--list-mobile .sc-field + .sc-field {
        box-shadow: inset 1px 0 0 var(--scf-line);
    }

    .sc-fields--list-desktop.sc-fields--list-mobile .sc-field-submit {
        width: auto;
        margin-top: 0;
    }

    .sc-fields--detail-desktop.sc-fields--detail-mobile .sc-field {
        border: none;
    }

    /* В строке места мало: значение не переносим, а обрезаем многоточием —
       иначе «2 взрослых, без детей» распирает строку на две и она прыгает по высоте.
       На мобильной раскладке перенос, наоборот, нужен, поэтому правило живёт в медиа. */
    .sc-fields--list-desktop .sc-field__value {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ==========================================================================
   АВТОПОДМЕНА ПРЕСЕТА ПО ШИРИНЕ
   Страница может поставить парный класс (--list-desktop + --list-mobile);
   ниже 860px (тот же брейкпоинт, по которому sc-calendar.js переключает
   календарь в мобильный режим) десктопная раскладка выключается.
   ========================================================================== */
@media (max-width: 860px) {
    .sc-fields--list-desktop.sc-fields--list-mobile,
    .sc-fields--detail-desktop.sc-fields--detail-mobile {
        flex-direction: column;
        border-radius: 14px;
        gap: 10px;
        padding: 0;
        border: none;
        background: transparent;
    }

    .sc-fields--list-desktop.sc-fields--list-mobile .sc-field,
    .sc-fields--detail-desktop.sc-fields--detail-mobile .sc-field {
        border: 1px solid var(--scf-line);
        border-radius: var(--scf-radius);
        box-shadow: none;
        background: var(--scf-surface);
    }

    .sc-fields--list-desktop.sc-fields--list-mobile .sc-field__value,
    .sc-fields--detail-desktop.sc-fields--detail-mobile .sc-field__value {
        font-size: 16px;
    }

    .sc-fields--list-desktop.sc-fields--list-mobile .sc-field-submit,
    .sc-fields--detail-desktop.sc-fields--detail-mobile .sc-field-submit {
        width: 100%;
        border-radius: var(--scf-radius);
        margin-left: 0;
    }
}