/* ════════════════════════════════════════════════════════════════════════════
   quick-search.css
   ─────────────────────────────────────────────────────────────────────────
   Стили только для страниц /quick-search/ и /quick-search/thank-you/.
   Подключается conditional-енкью в functions.php → narxtop_enqueue_assets().

   Принцип: НЕ изобретаем новые цвета/шрифты/тени.
   Все цвета берутся из CSS-переменных темы (var(--color-B100), var(--color-D06),
   var(--color-D10), var(--color-D100) и т.д., объявлены в critical.css).

   Файл содержит только то, что не выражается существующими утилитами темы:
     • двухколоночная hero-сетка
     • карточка формы (.qs-form-card)
     • степпер 1-2-3-4 (.qs-steps)
     • сетка преимуществ 3×2 (.qs-adv__grid)
     • сетка отзывов 2×2 (.qs-reviews__grid)
     • видео-плейсхолдер (.qs-video__player)
     • аккордеон FAQ (.qs-faq__item)
     • position:fixed sticky-bar и toast
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Общие отступы секций (как у остальной темы — section--block-1) ───────── */
.qs-section {
    padding: 3rem 0;
}

.qs-section + .qs-section {
    border-top: .0625rem solid var(--color-D10);
}

/* ── HERO ─────────────────────────────────────────────────────────────────── */

/* Подзаголовок hero — ограничиваем ширину, чтобы строка не уезжала к
   правому краю контейнера и текст оставался читаемым. */
.qs-hero__sub {
    max-width: 44rem;
}

/* Статистика в hero — 4 плитки в ряд */
.qs-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.qs-stat {
    padding: 1rem;
    background: var(--color-D06);
    border-radius: .75rem;
}

/* Карточка формы — на всю ширину контейнера, под чипами выбора типа. */
.qs-form-card {
    background: #fff;
    border: .0625rem solid var(--color-D10);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 .25rem 1.5rem rgba(0, 0, 0, .04);
}

/* Базовая .form-apply-grid в add.css — 2 колонки (для модалки modal-apply,
   которая узкая). На полной ширине quick-search-формы переключаем на 3 колонки —
   чтобы поля заполняли пространство и форма выглядела сбалансированно. */
.qs-form-card .form-apply-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 1.25rem;
}

/* Поле «Есть действующие кредиты» в 3-колоночной сетке занимает 2 ячейки —
   убирает пустую клетку в третьем ряду. На 2-колоночной сетке (планшет)
   ячейка тоже растягивается на 2 — занимает всю ширину строки. */
.qs-form-card .form-apply-grid .qs-field--span2 {
    grid-column: span 2;
}

/* На планшете возвращаемся к 2 колонкам, на мобильном — 1 (база из add.css
   уже даёт 1 колонку при max-width:560px). */
@media (max-width: 1024px) {
    .qs-stats { grid-template-columns: repeat(2, 1fr); }
    .qs-form-card .form-apply-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .qs-stats { grid-template-columns: repeat(2, 1fr); }
    .qs-form-card { padding: 1rem; }
}

/* ── HOW IT WORKS ────────────────────────────────────────────────────────── */

.qs-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.qs-step__num {
    line-height: 1;
    margin-bottom: .75rem;
}

@media (max-width: 1024px) {
    .qs-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .qs-steps { grid-template-columns: 1fr; gap: 1rem; }
}

/* ── ADVANTAGES ──────────────────────────────────────────────────────────── */

.qs-adv__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.qs-adv__item {
    padding: 1.25rem;
    background: var(--color-D06);
    border-radius: .75rem;
}

@media (max-width: 1024px) {
    .qs-adv__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .qs-adv__grid { grid-template-columns: 1fr; }
}

/* ── REVIEWS ─────────────────────────────────────────────────────────────── */

.qs-reviews__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.qs-review {
    padding: 1.25rem;
    background: #fff;
    border: .0625rem solid var(--color-D10);
    border-radius: 1rem;
}

.qs-review__head {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.qs-review__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-B100);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .qs-reviews__grid { grid-template-columns: 1fr; }
}

/* ── VIDEO ───────────────────────────────────────────────────────────────── */

.qs-video__player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: .0625rem solid var(--color-D10);
    border-radius: 1rem;
    background: var(--color-D06) center/cover no-repeat;
    cursor: pointer;
    position: relative;
    padding: 0;
}

.qs-video__player[data-placeholder="1"] {
    cursor: default;
}

.qs-video__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    color: var(--color-D100);
}

.qs-video__icon {
    color: var(--color-B100);
    width: 4rem;
    height: 4rem;
    display: inline-flex;
}

.qs-video__icon svg {
    width: 100%;
    height: 100%;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.qs-faq__list {
    max-width: 50rem;
}

.qs-faq__item {
    border-bottom: .0625rem solid var(--color-D10);
}

.qs-faq__item[open] .qs-faq__chev {
    transform: rotate(45deg);
}

.qs-faq__q {
    list-style: none;
    cursor: pointer;
    padding: 1rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.qs-faq__q::-webkit-details-marker { display: none; }

.qs-faq__chev {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--color-B100);
    position: relative;
    transition: transform .2s ease;
}

.qs-faq__chev::before,
.qs-faq__chev::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    border-radius: .0625rem;
}

.qs-faq__chev::before {
    width: 1rem;
    height: .125rem;
    transform: translate(-50%, -50%);
}

.qs-faq__chev::after {
    width: .125rem;
    height: 1rem;
    transform: translate(-50%, -50%);
}

.qs-faq__a {
    padding: 0 0 1rem 0;
}

/* ── PRIVACY ─────────────────────────────────────────────────────────────── */

.qs-privacy__inner {
    background: var(--color-D06);
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: 50rem;
}

/* ── STICKY BAR ──────────────────────────────────────────────────────────── */

.qs-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: .0625rem solid var(--color-D10);
    box-shadow: 0 -.25rem 1.5rem rgba(0, 0, 0, .06);
    z-index: 90;
    padding: .75rem 0;
}

.qs-sticky__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 600px) {
    .qs-sticky__inner > div:first-child { display: none; }
}

/* ── TOAST ───────────────────────────────────────────────────────────────── */

.qs-toast {
    position: fixed;
    left: 1rem;
    bottom: 5rem;
    background: #fff;
    border: .0625rem solid var(--color-D10);
    border-radius: .75rem;
    padding: .75rem 1rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    gap: .75rem;
    z-index: 80;
    max-width: 18rem;
    transform: translateY(120%);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
}

.qs-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.qs-toast__avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-B100);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .875rem;
    flex-shrink: 0;
}

.qs-toast__text {
    line-height: 1.3;
}

@media (max-width: 600px) {
    .qs-toast {
        left: .5rem;
        right: .5rem;
        bottom: 4.5rem;
        max-width: none;
    }
}

/* ── THANK-YOU PAGE ──────────────────────────────────────────────────────── */

.qs-thanks {
    padding: 4rem 0;
}

.qs-thanks__inner {
    max-width: 36rem;
    margin: 0 auto;
    text-align: center;
}

.qs-thanks__icon {
    color: var(--color-B100);
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
}

.qs-thanks__icon svg {
    width: 100%;
    height: 100%;
}

.qs-thanks__cta {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── SlimSelect: высота поп-апа на 10 опций ──────────────────────────────
   SlimSelect (внешняя библиотека, см. main.js) рендерит поп-ап .ss-content
   в document.body для всех <select> сайта. По умолчанию у него
   --ss-content-height = 18.75rem (≈ 10 опций), но в текущем окружении
   что-то его сжимает до одной опции (прокрутка для остальных).

   Переопределяем переменную И на :root (где она объявлена), И на самом
   .ss-content — чтобы перебить независимо от того, в каком месте каскада
   её читают. Плюс жёсткий max-height с !important на финальное свойство.
   ~22rem ≈ 10 опций (~2.2rem каждая с паддингами SlimSelect). */
:root {
    --ss-content-height: 22rem;
}

.ss-content,
body > .ss-content {
    --ss-content-height: 22rem !important;
    max-height: 22rem !important;
}

/* .ss-list — внутренний контейнер опций. flex:1 1 auto позволяет ему
   занять всю высоту .ss-content, но на всякий случай дублируем max-height
   и сюда — иначе если у .ss-content окажется ещё какое-то ограничение,
   список схлопнется. */
.ss-content .ss-list {
    max-height: 22rem !important;
}

/* ── Плитки выбора типа продукта (стиль BLOCK-1.2 главной) ──────────────── */
/* Контейнер .qs-types — 6-колоночная сетка, все плитки одного размера.
   Внутри — стандартные .grid-product__item / .grid-product-pic из критикала
   темы (фон/радиус/паддинги/min-height описаны там). Здесь только сетка,
   reset для <button> и единая высота иконки (равная .grid-product-five
   из BLOCK-1.2 — самый типичный кейс). */

.qs-types {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .5rem;
}

/* Reset для <button> — убираем браузерные стили, наследуем шрифт темы.
   У <button> в браузерах есть внутренний UA-стиль, который центрирует
   контент по обеим осям (display:block этого не отменяет). Чтобы подпись
   легла именно в верхний-левый угол — задаём явный flex column с прижатием
   к началу обеих осей. .grid-product-pic с position:absolute из flex-потока
   выпадает и остаётся в нижнем-правом углу, как в BLOCK-1.2. */
.qs-types .grid-product__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    text-align: left;
    width: 100%;
}

/* Единая высота иконки для всех плиток (повторяет .grid-product-five
   из критикала темы — кейс «Кредит» в BLOCK-1.2). */
.qs-types .grid-product-pic {
    height: 4.3125rem;
}

@media (min-width: 768px) {
    .qs-types .grid-product-pic {
        height: 6.125rem;
    }
}

/* Адаптив сетки: на средних — 3 в ряд, на узких — 2 в ряд. */
@media (max-width: 1024px) {
    .qs-types { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .qs-types { grid-template-columns: repeat(2, 1fr); }
}