/* ==========================================================================
   Поиск по сайту iStudy
   Подключается после desktop/mobile style.css, использует токены --is-*.
   ========================================================================== */

/* ---------- Триггер в шапке (desktop) ---------- */

.blockForHeaderIcons {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
}

/* Поиск — слева от иконок; сами иконки остаются по центру колонки. */
.blockForHeaderIcons .header-search {
    justify-self: start;
}

.blockForHeaderIcons .footerMessengers {
    justify-self: center;
}

.header-search {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 250px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--is-line, rgba(8, 71, 100, .12));
    border-radius: var(--is-r-pill, 999px);
    background: #fff;
    color: var(--is-muted, #5c6b78);
    font-family: var(--is-font, 'Montserrat', sans-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--is-t, .22s), color var(--is-t, .22s),
                box-shadow var(--is-t, .22s), background-color var(--is-t, .22s);
}

.header-search:hover,
.header-search:focus-visible {
    border-color: var(--is-navy, #084764);
    color: var(--is-navy, #084764);
    background: var(--is-bg-soft, #f5f8fb);
    box-shadow: var(--is-sh-s, 0 4px 14px -6px rgba(8, 71, 100, .16));
}

.header-search__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: currentColor;
}

.header-search__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.header-search__kbd {
    flex: 0 0 auto;
    padding: 3px 5px;
    border: 1px solid var(--is-line, rgba(8, 71, 100, .12));
    border-radius: 6px;
    color: #8b98a5;
    font-family: var(--is-font, 'Montserrat', sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
}

@media (max-width: 1279px) {
    .header-search__label,
    .header-search__kbd {
        display: none;
    }

    .header-search {
        justify-content: center;
        width: 40px;
        padding: 0;
    }
}

/* ---------- Триггер в мобильной шапке ---------- */

.mobile-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #2b4963;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* В шапке есть легаси-правило `#topContact button { width:66%; background:#e54b42 }`
   (кнопка «обратный звонок» старого дизайна) — перебиваем его для иконки поиска. */
#topContact .mobile-search-btn,
#topContact2 .mobile-search-btn {
    width: 44px !important;
    min-width: 44px;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #2b4963 !important;
    box-shadow: none !important;
    font-size: 0;
    line-height: 0;
}

.mobile-search-btn svg {
    display: block;
    width: 21px;
    height: 21px;
}

.mobile-search-btn:active {
    background: rgba(43, 73, 99, .1);
}

.mobile-search-btn:focus-visible {
    outline: 2px solid #2b4963;
    outline-offset: 2px;
}

/* ---------- Мобильная шапка: мини-поиск по центру ---------- */

#head2 {
    align-items: center;
    gap: 4px;
}

#head2 #leftHead2,
#head2 #rightHead2 {
    width: auto;
    flex: 0 0 auto;
}

/* У зафиксированной шапки центр с «Обратным звонком» должен ужиматься,
   а правый блок — занимать столько, сколько нужно трём иконкам. */
#head {
    align-items: center;
    gap: 4px;
}

#head #leftHead,
#head #rightHead {
    width: auto;
    flex: 0 0 auto;
}

#head #rightHead {
    padding: 7px 8px;
}

#head .centerHead {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 4px;
    font-size: 12px;
    white-space: nowrap;
}

#head2 .head-search-center {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    padding: 0 4px;
}

#head2 .header-search {
    width: 100%;
    max-width: 280px;
    min-height: 34px;
    padding: 0 10px;
    gap: 7px;
    font-size: 12px;
}

/* В мобильной шапке подпись нужна всегда, даже на узких экранах. */
#head2 .header-search__label {
    display: inline;
}

#head2 .header-search__kbd {
    display: none;
}

@media (max-width: 389px) {
    #head2 .header-search__label {
        display: none;
    }
}

/* ---------- Блокировка прокрутки страницы ---------- */

html.site-search-locked {
    overflow: hidden;
}

/* Баннер cookie живёт с z-index 99999999999 — браузер упирает его в максимум,
   поэтому на всякий случай прячем его на время открытого поиска. */
html.site-search-locked #cookie-consent {
    display: none !important;
}

/* ---------- Модальное окно ---------- */

.site-search {
    position: fixed;
    inset: 0;
    /* Выше .main-nav (99), .main-nav-fixed (999), мобильного меню (1500),
       виджета чата Chaport и баннера cookie (99999999999) — модалка должна быть поверх всего. */
    z-index: 100000000000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(12px, 7vh, 84px) 16px 24px;
    font-family: var(--is-font, 'Montserrat', sans-serif);
}

.site-search[hidden] {
    display: none;
}

.site-search__scrim {
    position: absolute;
    inset: 0;
    background: rgba(5, 51, 74, .55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    animation: siteSearchFade .18s ease both;
}

.site-search__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(880px, 100%);
    max-height: min(80vh, 760px);
    border-radius: var(--is-r-l, 28px);
    background: #fff;
    box-shadow: var(--is-sh-l, 0 30px 70px -28px rgba(8, 71, 100, .30));
    overflow: hidden;
    animation: siteSearchRise .22s cubic-bezier(.22, .61, .36, 1) both;
}

.site-search__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Строка поиска ---------- */

.site-search__form {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 16px 22px;
    border-bottom: 1px solid var(--is-line, rgba(8, 71, 100, .12));
}

.site-search__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--is-navy, #084764);
}

.site-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 6px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--is-text, #2f3a44);
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
}

.site-search__input::placeholder {
    color: #98a4b0;
    font-weight: 400;
}

.site-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.site-search__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--is-bg-soft, #f5f8fb);
    color: var(--is-muted, #5c6b78);
    cursor: pointer;
    transition: background-color var(--is-t, .22s), color var(--is-t, .22s);
}

.site-search__close:hover,
.site-search__close:focus-visible {
    background: #e7eef4;
    color: var(--is-navy, #084764);
}

.site-search__status {
    padding: 0 22px;
    color: #8b98a5;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-align: right;
    text-transform: none;
    min-height: 0;
}

.site-search__status:not(:empty) {
    padding: 8px 22px 2px;
}

/* ---------- Выдача ---------- */

.site-search__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-bottom: 8px;
}

.site-search__results {
    min-width: 0;
}

.site-search__group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    padding: 12px 22px 8px;
    color: var(--is-muted, #5c6b78);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.site-search__group-count {
    color: #9aa7b3;
    font-weight: 600;
    letter-spacing: 0;
}

.site-search__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 22px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .16s ease;
}

.site-search__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background-color .16s ease;
}

.site-search__item:hover,
.site-search__item[aria-selected="true"] {
    background: var(--is-bg-soft, #f5f8fb);
}

.site-search__item[aria-selected="true"]::before {
    background: var(--is-accent, #b83227);
}

.site-search__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eef3f8;
    color: var(--is-navy-mid, #2b4963);
    overflow: hidden;
}

.site-search__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-search__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.site-search__item-title,
.site-search__item-sub,
.site-search__item-text {
    overflow-wrap: anywhere;
}

.site-search__item-title {
    margin: 0;
    color: var(--is-navy, #084764);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.site-search__item-sub {
    margin: 2px 0 0;
    color: var(--is-muted, #5c6b78);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.site-search__item-text {
    margin: 4px 0 0;
    color: var(--is-text, #2f3a44);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.site-search__item mark,
.site-search__empty mark {
    padding: 0 2px;
    border-radius: 3px;
    background: rgba(200, 161, 90, .34);
    color: inherit;
}

/* ---------- Пустое состояние и подсказки ---------- */

.site-search__idle,
.site-search__empty {
    padding: 18px 22px 10px;
}

.site-search__idle-block + .site-search__idle-block {
    margin-top: 18px;
}

.site-search__idle-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.site-search__idle-title {
    display: block;
    margin: 0 0 10px;
    color: var(--is-muted, #5c6b78);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.site-search__idle-reset {
    padding: 0;
    border: 0;
    background: none;
    color: var(--is-accent, #b83227);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-search__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.site-search__chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid var(--is-line, rgba(8, 71, 100, .12));
    border-radius: var(--is-r-pill, 999px);
    background: #fff;
    color: var(--is-navy-mid, #2b4963);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--is-t, .22s), color var(--is-t, .22s),
                background-color var(--is-t, .22s);
}

.site-search__chip:hover,
.site-search__chip:focus-visible {
    border-color: var(--is-navy, #084764);
    background: var(--is-bg-soft, #f5f8fb);
    color: var(--is-navy, #084764);
}

.site-search__empty-title {
    margin: 6px 0 8px;
    color: var(--is-navy, #084764);
    font-size: 17px;
    font-weight: 700;
}

.site-search__empty-text {
    margin: 0 0 18px;
    max-width: 46ch;
    color: var(--is-muted, #5c6b78);
    font-size: 13.5px;
    line-height: 1.5;
}

.site-search__empty-suggest {
    margin-top: 4px;
}

/* ---------- Подвал с подсказками клавиш ---------- */

.site-search__footer {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 22px;
    border-top: 1px solid var(--is-line, rgba(8, 71, 100, .12));
    background: var(--is-bg-soft, #f5f8fb);
    color: var(--is-muted, #5c6b78);
    font-size: 11.5px;
    font-weight: 500;
}

.site-search__footer kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-right: 3px;
    padding: 0 5px;
    border: 1px solid var(--is-line-strong, rgba(8, 71, 100, .24));
    border-radius: 5px;
    background: #fff;
    color: var(--is-navy-mid, #2b4963);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
}

/* ---------- Анимации ---------- */

@keyframes siteSearchFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes siteSearchRise {
    from { opacity: 0; transform: translateY(-14px) scale(.995); }
    to { opacity: 1; transform: none; }
}

/* ---------- Мобильные ---------- */

@media (max-width: 720px) {
    .site-search {
        padding: 0;
    }

    .site-search__panel {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    .site-search__form {
        padding: 14px 14px 12px 16px;
        gap: 10px;
    }

    .site-search__input {
        font-size: 16px;
    }

    .site-search__group-title,
    .site-search__item {
        padding-left: 16px;
        padding-right: 16px;
    }

    .site-search__idle,
    .site-search__empty {
        padding-left: 16px;
        padding-right: 16px;
    }

    .site-search__status:not(:empty) {
        padding-left: 16px;
        padding-right: 16px;
    }

    .site-search__item {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .site-search__footer {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-search__scrim,
    .site-search__panel {
        animation: none;
    }

    .site-search__item,
    .site-search__chip,
    .header-search,
    .site-search__close {
        transition: none;
    }
}