/* WoodGrand Smart Search Widget CSS */
/* Подключить в header.php: <link rel="stylesheet" href="/assets/css/smart-search.css?v=3"> */

/* ===== Совместимость с шапкой сайта woodgrand.ru ===== */
:root {
    --wg-font: Roboto, Arial, sans-serif;
    --wg-orange: #f97100;
    --wg-orange-h: #ff911a;
    --wg-border: #d1d1d1;
    --wg-r: 0px;
    --wg-text: #1C1C1C;
    --wg-muted: #777;
    --wg-bg: #F5F3EF;
    --wg-strip-bg: #FFFBF7;
    --wg-strip-border: #FFE0C0;
}

/* Убираем старый поиск Битрикса */
.nav-contacts__item--search .search-form { display: none !important; }

/* Мобильная навигация */
.bottom-nav { z-index: 99999 !important; }

/* ===== ОБЁРТКА ===== */
.wg-smart-search {
    position: relative;
    width: 100%;
    min-width: 0;
    font-family: var(--wg-font);
}

/* ===== ВИДИМАЯ ЗАГЛУШКА В ШАПКЕ ===== */
.wg-ss-stub {
    display: flex;
    align-items: center;
    height: 42px;
    border: 1.5px solid var(--wg-border);
    border-radius: var(--wg-r);
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s;
}
.wg-ss-stub:hover { border-color: var(--wg-orange); }
.wg-ss-stub__text {
    flex: 1;
    padding: 0 12px;
    font-size: 14px;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wg-ss-stub__btn {
    width: 46px;
    height: 100%;
    background: var(--wg-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wg-ss-stub__btn svg { width: 18px; height: 18px; }
/* Скрываем заглушку когда попап открыт */
.wg-ss--open .wg-ss-stub { visibility: hidden; }

/* ===== ОВЕРЛЕЙ ЗАТЕМНЕНИЯ ===== */
.wg-ss-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 9998;
}
.wg-ss--open .wg-ss-backdrop { display: block; }

/* ===== БЕЛАЯ ПЛАШКА ПОВЕРХ ШАПКИ ===== */
.wg-ss-popup {
    position: fixed;
    top: 120px;
    left: 50%;
    width: 760px;
    max-width: 94vw;
    z-index: 2147483000; /* максимально возможный z-index — выше АБСОЛЮТНО любых сторонних попапов сайта (Envybox, промо-попапы и т.п.) */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.22);
    padding: 14px 16px 16px;
    max-height: calc(100vh - 140px); /* было 92vh — с отступом top:120px блок вылезал за экран, низ (статьи) был недостижим */
    overflow-y: auto;
    /* Плавное появление вместо мгновенного display:block — чистый CSS,
       без доп. загрузки и влияния на скорость сайта */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -8px) scale(.98);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.wg-ss--open .wg-ss-popup {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}

/* Размытие фона позади попапа поиска (пример-референс: чуть слабее, чем
   в присланном образце — 3px вместо более сильного) */
#searchBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, 0.22);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 2147482999; /* сразу под попапом поиска, тоже выше сторонних попапов */
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
#searchBackdrop.wg-backdrop--open {
    opacity: 1;
    pointer-events: auto;
}

/* ===== СТРОКА ПОИСКА В ПЛАШКЕ ===== */
.wg-ss__bar {
    display: flex;
    align-items: center;
    height: 46px;
    border: 2px solid var(--wg-orange);
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(249,113,0,0.1);
}
.wg-ss__bar--focused { border-color: var(--wg-orange); }
.wg-ss__input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 12px;
    font-family: var(--wg-font);
    font-size: 14px;
    color: var(--wg-text);
    background: transparent;
    min-width: 0;
}
.wg-ss__btn {
    width: 48px;
    height: 100%;
    background: var(--wg-orange);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.wg-ss__btn:hover { background: var(--wg-orange-h); }
.wg-ss__btn svg { width: 18px; height: 18px; }

/* Декоративное поле поиска в шапке (нативный элемент темы, не наш класс) —
   добавляем отступы и серый плейсхолдер, чтобы выглядело так же аккуратно,
   как поле в открытом попапе (.wg-ss__input) */
#searchStub {
    padding-left: 40px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
    background-size: 17px 17px !important;
}
#searchStub::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}
/* Серый цвет для анимации "печатающегося" текста — через класс, а не
   ::placeholder, т.к. searchStub может быть div (::placeholder на div не действует).
   Класс снимается в JS, как только пользователь вводит реальный запрос. */
.wg-typing-demo-color {
    color: #999 !important;
}
/* Подсветка элемента при навигации стрелками ↑/↓ по чипам и карточкам */
.wg-kbd-active {
    outline: 2px solid var(--wg-orange) !important;
    outline-offset: -2px;
    background: rgba(249, 113, 0, 0.06) !important;
}

/* ===== ПАНЕЛЬ РЕЗУЛЬТАТОВ ===== */
.wg-ss__panel {
    display: none;
    margin-top: 10px;
    background: #fff;
    border: 1.5px solid var(--wg-orange);
    border-radius: 6px;
    overflow: hidden;
}
.wg-ss--open .wg-ss__panel { display: block; }

/* ===== ВКЛАДКИ ===== */
.wg-ss__tabs {
    display: flex;
    background: #F8F7F5;
    border-bottom: 1px solid #EBEBEB;
}
.wg-ss__tab {
    flex: 1;
    height: 44px;
    border: none;
    background: none;
    font-family: var(--wg-font);
    font-size: 14px;
    font-weight: 700;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-bottom: 3px solid transparent;
    transition: all .15s;
}
.wg-ss__tab--on, .wg-ss__tab:hover { color: var(--wg-orange); }
.wg-ss__tab--on { background: #fff; border-bottom-color: var(--wg-orange); }

/* ===== СОДЕРЖИМОЕ ВКЛАДОК ===== */
.wg-ss__tc { display: none; }
.wg-ss__tc--on { display: block; }

/* ===== ЧИПЫ ===== */
.wg-ss__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid #F0EEEA;
}
.wg-ss__chips-lbl {
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.wg-ss__chip {
    background: var(--wg-bg);
    border: 1px solid #DDD9D3;
    border-radius: 3px;
    padding: 5px 10px;
    font-family: var(--wg-font);
    font-size: 13px;
    color: #444;
    cursor: pointer;
    transition: all .12s;
    white-space: nowrap;
}
.wg-ss__chip:hover { background: var(--wg-orange); color: #fff; border-color: var(--wg-orange); }

/* ===== РЕЗУЛЬТАТЫ ===== */
.wg-ss__res-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px 4px;
}
.wg-ss__res-cnt { font-size: 13px; color: var(--wg-muted); }
.wg-ss__res-cnt b { color: var(--wg-text); }
.wg-ss__res-all { font-size: 13px; font-weight: 700; color: var(--wg-orange); cursor: pointer; }
.wg-ss__res-all:hover { text-decoration: underline; }

/* ===== СЕТКА КАРТОЧЕК ===== */
.wg-ss__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
}
.prod-card {
    background: #fff;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    border: 1px solid #F0EEEA;
    transition: all .15s;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent; /* убираем серую подсветку всей карточки при тапе по кнопке внутри неё */
}
.prod-card:hover {
    border-color: var(--wg-orange);
    box-shadow: 0 2px 12px rgba(249,113,0,.12);
    transform: translateY(-1px);
}
.prod-img {
    height: 90px;
    background: #F8F6F3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.prod-img img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    object-position: center;
    display: block;
}
.prod-info { padding: 8px 10px 10px; flex: 1; display: flex; flex-direction: column; }
.prod-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--wg-text);
    line-height: 1.35;
    margin-bottom: 6px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.prod-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--wg-text);
    margin-bottom: 6px;
    margin-top: auto;
}
.prod-calc-btn {
    height: 40px; /* было 28px — слишком маленькая тач-зона, палец промахивался на карточку */
    border: none;
    background: var(--wg-orange);
    color: #fff;
    font-family: var(--wg-font);
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    transition: background .15s;
    position: relative;
    z-index: 2;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1); /* лёгкая своя подсветка именно кнопки, а не всей карточки */
}
.prod-calc-btn:hover { background: var(--wg-orange-h); }

/* ===== ПУСТО ===== */
.wg-ss__empty { padding: 24px 16px; text-align: center; }
.wg-ss__empty p { font-size: 14px; color: var(--wg-muted); margin: 8px 0 10px; }

/* ===== AI-ПОЛОСКА ===== */
.wg-ss__ai-strip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    background: var(--wg-strip-bg);
    border-top: 1px solid var(--wg-strip-border);
}
.wg-ss__ai-ava {
    width: 36px; height: 36px; min-width: 36px;
    border-radius: 50%;
    background: #eee;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.wg-ss__ai-ava img {
    width: 36px !important; height: 36px !important;
    border-radius: 50%; object-fit: cover; object-position: top; display: block;
}
.wg-ss__ai-body { flex: 1; min-width: 0; }
.wg-ss__ai-lbl {
    font-size: 10px; font-weight: 700;
    color: #B05000;
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 4px;
}
.wg-ss__ai-txt { font-size: 13px; color: var(--wg-text); line-height: 1.55; min-height: 20px; }
.wg-ss__ai-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.wg-ss__ai-btn {
    height: 34px; padding: 0 14px;
    border-radius: 4px;
    border: 1.5px solid var(--wg-orange);
    background: #fff; color: var(--wg-orange);
    font-family: var(--wg-font); font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all .15s; white-space: nowrap;
}
.wg-ss__ai-btn:hover, .wg-ss__ai-btn--primary { background: var(--wg-orange); color: #fff; }
.wg-ss__ai-btn--primary:hover { background: var(--wg-orange-h); }

/* ===== ТОЧКИ ЗАГРУЗКИ ===== */
.wg-ss__dots { display: flex; gap: 4px; align-items: center; height: 20px; }
.wg-ss__dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--wg-orange); opacity: .4;
    animation: wgDot 1.1s infinite;
}
.wg-ss__dots span:nth-child(2) { animation-delay: .2s; }
.wg-ss__dots span:nth-child(3) { animation-delay: .4s; }
@keyframes wgDot { 0%,60%,100%{opacity:.4;transform:scale(1)} 30%{opacity:1;transform:scale(1.4)} }

/* ===== ЧАТ ===== */
.wg-ss__chat-msgs {
    max-height: 320px; overflow-y: auto;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 9px;
}
.wg-ss__msg { display: flex; gap: 8px; align-items: flex-start; }
.wg-ss__msg--user { flex-direction: row-reverse; }
.wg-ss__msg-ava {
    width: 36px; height: 36px; min-width: 36px; border-radius: 50%;
    background: #eee;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.wg-ss__msg-ava img {
    width: 36px !important; height: 36px !important;
    border-radius: 50%; object-fit: cover; object-position: top; display: block;
}
.wg-ss__msg-ava--user { background: #1C1C1C; }
.wg-ss__msg-bub {
    max-width: 78%; padding: 8px 12px;
    border-radius: 4px;
    font-family: var(--wg-font); font-size: 13px; line-height: 1.5;
    background: var(--wg-bg); color: var(--wg-text);
}
.wg-ss__msg--user .wg-ss__msg-bub { background: var(--wg-orange); color: #fff; }

/* ===== БЫСТРЫЕ ОТВЕТЫ ===== */
.wg-ss__qr-row { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 14px 8px; }
.wg-ss__qr {
    border: 1.5px solid var(--wg-orange);
    background: #fff; border-radius: 20px;
    padding: 5px 12px;
    font-family: var(--wg-font); font-size: 12px; font-weight: 700;
    color: var(--wg-orange); cursor: pointer; transition: all .13s;
    opacity: 0;
    transform: translateY(6px);
    animation: wgQrIn .25s ease forwards;
}
@keyframes wgQrIn {
    to { opacity: 1; transform: translateY(0); }
}
.wg-ss__qr:hover { background: var(--wg-orange); color: #fff; }

/* ===== ТЕЛЕФОН ===== */
.wg-ss__phone-block {
    border-top: 1px solid var(--wg-strip-border);
    padding: 12px 14px; background: #FFF8F2;
}
.wg-ss__phone-title { font-size: 13px; font-weight: 700; color: var(--wg-text); margin-bottom: 8px; }
.wg-ss__phone-row { display: flex; gap: 8px; }
.wg-ss__phone-inp {
    flex: 1; height: 38px;
    border: 1.5px solid var(--wg-border); border-radius: 4px;
    padding: 0 12px; font-family: var(--wg-font); font-size: 14px;
    outline: none; transition: border-color .15s;
}
.wg-ss__phone-inp:focus { border-color: var(--wg-orange); }
.wg-ss__phone-inp.err { border-color: #E24B4A; }
.wg-ss__phone-sub {
    height: 38px; padding: 0 16px;
    background: var(--wg-orange); color: #fff;
    border: none; border-radius: 4px;
    font-family: var(--wg-font); font-size: 13px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
}
.wg-ss__phone-sub:hover { background: var(--wg-orange-h); }
.wg-ss__phone-ok { font-size: 13px; font-weight: 700; color: #2B7A3E; padding-top: 6px; }

/* ===== ПОЛЕ ВВОДА ЧАТА ===== */
.wg-ss__chat-inp-row {
    display: flex; gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #EBEBEB;
    background: #FAFAFA;
}
.wg-ss__chat-inp {
    flex: 1; height: 38px;
    border: 1.5px solid var(--wg-border); border-radius: 4px;
    padding: 0 12px; font-family: var(--wg-font); font-size: 14px;
    outline: none; background: #fff; transition: border-color .15s;
}
.wg-ss__chat-inp:focus { border-color: var(--wg-orange); }
.wg-ss__chat-send {
    height: 38px; padding: 0 18px;
    background: var(--wg-orange); color: #fff;
    border: none; border-radius: 4px;
    font-family: var(--wg-font); font-size: 14px; font-weight: 700;
    cursor: pointer; transition: background .15s;
}
.wg-ss__chat-send:hover { background: var(--wg-orange-h); }

/* ===== МОБИЛЬНЫЙ ОВЕРЛЕЙ ===== */
@media (max-width: 991px) {
    .wg-smart-search { display: none !important; }

    /* Полноэкранный оверлей */
    .wg-ss-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: #fff;
        z-index: 2147483001; /* мобильный оверлей — ещё выше, чтобы форма заявки поверх него тоже была видна */
        flex-direction: column;
    }
    .wg-ss-overlay--open { display: flex; }

    /* Шапка оверлея */
    .wg-ss-overlay__header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: #fff;
        border-bottom: 1px solid #EBEBEB;
        flex-shrink: 0;
    }
    .wg-ss-overlay__bar {
        flex: 1;
        display: flex;
        align-items: center;
        height: 44px;
        border: 1.5px solid var(--wg-orange);
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
    }
    .wg-ss-overlay__inp {
        flex: 1;
        height: 100%;
        border: none;
        outline: none;
        padding: 0 12px;
        font-family: var(--wg-font);
        font-size: 16px; /* 16px — чтобы iOS не зумил */
        color: var(--wg-text);
        background: transparent;
        min-width: 0;
    }
    .wg-ss-overlay__search-btn {
        width: 48px;
        height: 100%;
        background: var(--wg-orange);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .wg-ss-overlay__search-btn svg { width: 18px; height: 18px; }
    .wg-ss-overlay__close {
        width: 40px; height: 40px;
        border: none; background: none;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        color: #555; flex-shrink: 0; font-size: 22px; line-height: 1;
    }

    /* Контент оверлея */
    .wg-ss-overlay__body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Вкладки */
    .wg-ss-overlay__tabs {
        display: flex;
        background: #F8F7F5;
        border-bottom: 1px solid #EBEBEB;
    }
    .wg-ss-overlay__tab {
        flex: 1;
        height: 46px;
        border: none;
        background: none;
        font-family: var(--wg-font);
        font-size: 14px;
        font-weight: 700;
        color: #999;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-bottom: 3px solid transparent;
    }
    .wg-ss-overlay__tab--on { color: var(--wg-orange); background: #fff; border-bottom-color: var(--wg-orange); }

    /* Сетка карточек — 2 колонки на мобиле */
    .wg-ss-overlay .wg-ss__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Чат на мобиле */
    .wg-ss-overlay .wg-ss__chat-msgs {
        max-height: none;
    }
}
/* ===== БАННЕР АКЦИИ ===== */
.wg-ss__promo {
    border-top: 1px solid #E8E8E8;
}
.wg-ss__promo-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #2D6A2D 0%, #3D8A3D 100%);
    text-decoration: none;
    transition: opacity .15s;
}
.wg-ss__promo-link:hover { opacity: .9; }
.wg-ss__promo-icon { font-size: 18px; flex-shrink: 0; }
.wg-ss__promo-text {
    flex: 1;
    font-family: var(--wg-font);
    font-size: 13px;
    color: #fff;
    line-height: 1.4;
}
.wg-ss__promo-text b { font-weight: 700; }
.wg-ss__promo-arrow {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
    opacity: .8;
}