/*
 * Лаборатория Кошмарского — faq.css
 * Секция «Вопросы и ответы» на главной: поиск, чипы-категории, аккордеон,
 * оценка ответа и окно «Служба безопасности». Работает в паре с js/faq.js.
 */

/* ===== ПОИСК ===== */
.faq__search {
    position: relative;
    max-width: 640px;
    margin: 0 auto 14px;
}

.faq__search-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    margin-top: -8px;
    color: #6B716F;
    font-size: 15px;
    pointer-events: none;
}

.faq__search-input {
    width: 100%;
    height: 38px;
    padding: 0 38px 0 38px;
    border: 1px solid #8E948F;
    border-radius: 19px;
    background: linear-gradient(#FFFFFF, #F1F2F0);
    /* Вдавленное поле, как в поиске браузеров 2010 года */
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2), 0 1px 0 #ffffff;
    color: #2A2F2E;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
}

.faq__search-input:focus {
    outline: none;
    border-color: #6B1A1E;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2), 0 0 0 3px rgba(107, 26, 30, .18);
}

.faq__search-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #A9AEA9;
    color: #ffffff;
    font-size: 10px;
    line-height: 20px;
    cursor: pointer;
    display: none;
}

.faq__search-clear:hover {
    background: #6B1A1E;
}

.faq--searching .faq__search-clear {
    display: block;
}

/* ===== ЧИПЫ-КАТЕГОРИИ ===== */
.faq__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 26px;
}

.faq__chip {
    padding: 5px 12px;
    border: 1px solid #8E948F;
    border-radius: 14px;
    background: linear-gradient(#FFFFFF, #E2E5E1 55%, #CDD1CC);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2), inset 0 1px 0 #ffffff;
    color: #2A2F2E;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 12px;
    text-shadow: 0 1px 0 #ffffff;
    cursor: pointer;
}

.faq__chip:hover {
    border-color: #6B1A1E;
}

.faq__chip-count {
    display: inline-block;
    min-width: 18px;
    margin-left: 3px;
    padding: 0 5px;
    border-radius: 9px;
    background: #9EA39E;
    color: #ffffff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    text-shadow: none;
}

.faq__chip--active {
    border-color: #3A0C0F;
    background: linear-gradient(#A3323A, #6B1A1E 55%, #4E1215);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35);
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .45);
}

.faq__chip--active .faq__chip-count {
    background: #ffffff;
    color: #6B1A1E;
}

/* ===== СЕТКА: СПИСОК + БОКОВАЯ ПАНЕЛЬ ===== */
.faq__layout {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.faq__main {
    flex: 1;
    min-width: 0;
}

.faq__status {
    margin-bottom: 8px;
    color: #4F5654;
    font-size: 12px;
}

/* ===== АККОРДЕОН ===== */
.faq__list {
    border: 1px solid #9EA39E;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    overflow: hidden;
}

.faq__item {
    border-top: 1px solid #D3D7D2;
}

/* Первый видимый пункт без верхней линии. :first-child тут не подходит —
   первый по разметке пункт может быть скрыт фильтром, поэтому класс ставит faq.js */
.faq__item--first {
    border-top: 0;
}

.faq__item--hidden {
    display: none;
}

.faq__q {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    background: linear-gradient(#FFFFFF, #EEF0ED);
    color: #2A2F2E;
    font-family: 'Trebuchet MS', Tahoma, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    text-shadow: 0 1px 0 #ffffff;
    cursor: pointer;
}

.faq__q:hover {
    background: linear-gradient(#FFFFFF, #E4E7E3);
    color: #6B1A1E;
}

.faq__q:focus {
    outline: 1px dotted #6B1A1E;
    outline-offset: -3px;
}

.faq__q .faq__hl {
    flex: 1;
}

.faq__arrow {
    flex: 0 0 auto;
    margin-left: 12px;
    color: #8E948F;
    font-size: 12px;
    /* Поворот стрелки при раскрытии плавный */
    transition: transform .3s;
}

.faq__item--open .faq__q {
    background: linear-gradient(#F6E9EA, #EBD3D5);
    color: #6B1A1E;
}

.faq__item--open .faq__arrow {
    color: #6B1A1E;
    transform: rotate(180deg);
}

/* Ответ свернут: высота 0. Раскрытую высоту выставляет faq.js (по scrollHeight) */
.faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.faq__a-inner {
    padding: 4px 16px 14px 16px;
    border-left: 3px solid #6B1A1E;
    margin-left: 16px;
    margin-top: 10px;
    margin-bottom: 4px;
}

.faq__a-inner p {
    margin: 0 0 10px;
    color: #2A2F2E;
    font-size: 13px;
    line-height: 1.5;
}

/* Подсветка найденного */
.faq mark {
    padding: 0 1px;
    border-radius: 2px;
    background: #FFE27A;
    color: #2A2F2E;
    box-shadow: 0 0 0 1px #D9B53C;
}

.faq__extra {
    margin-bottom: 10px;
}

.faq__link {
    color: #6B1A1E;
    font-size: 12px;
}

.faq__link i {
    margin-right: 4px;
}

.faq__pic {
    max-width: 360px;
    margin: 0 0 10px;
    padding: 4px;
    border: 1px solid #C9CDC8;
    background: #F1F2F0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

/* Общая тонировка «body img» из style.css сделала бы пол серо-зеленым,
   а весь смысл ответа в том, что он розовый. Класс сильнее «body img» — фильтр снимается */
.faq__pic img {
    filter: none;
    display: block;
    width: 100%;
    height: auto;
}

.faq__pic figcaption {
    padding-top: 4px;
    color: #6B716F;
    font-size: 11px;
}

/* Окошко «состояние сеанса» у вопроса про бабушку */
.faq__session {
    max-width: 320px;
    margin-bottom: 10px;
    padding: 6px 10px;
    border: 1px solid #C9CDC8;
    border-radius: 4px;
    background: #F7F8F6;
    font-size: 12px;
}

.faq__session-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}

.faq__session-row span {
    color: #6B716F;
}

.faq__timer {
    font-family: Consolas, 'Courier New', monospace;
    color: #6B1A1E;
}

.faq__ok {
    color: #3C7A2E;
}

/* ===== «БЫЛ ЛИ ОТВЕТ ПОЛЕЗЕН?» ===== */
.faq__rate {
    padding-top: 8px;
    border-top: 1px dashed #D3D7D2;
    color: #6B716F;
    font-size: 12px;
}

.faq__rate-btn {
    margin-left: 4px;
    padding: 2px 12px;
    border: 1px solid #8E948F;
    border-radius: 3px;
    background: linear-gradient(#FFFFFF, #E2E5E1 55%, #CDD1CC);
    color: #2A2F2E;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 11px;
    cursor: pointer;
}

.faq__rate-btn:hover {
    border-color: #6B1A1E;
    color: #6B1A1E;
}

.faq__rate--done {
    color: #3C7A2E;
}

/* Вопрос, закрытый после ответа «Нет»: открыть больше нельзя */
.faq__item--closed .faq__q {
    background: #EEEFED;
    color: #9EA39E;
    cursor: not-allowed;
    text-decoration: line-through;
}

.faq__item--closed .faq__arrow {
    display: none;
}

.faq__closed-mark {
    flex: 0 0 auto;
    margin-left: 12px;
    padding: 1px 6px;
    border: 1px solid #A3262C;
    border-radius: 3px;
    color: #A3262C;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    transform: rotate(-3deg);
}

/* ===== «НИЧЕГО НЕ НАЙДЕНО» ===== */
.faq__empty {
    display: flex;
    align-items: flex-start;
    padding: 18px 20px;
    border: 1px solid #9EA39E;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    color: #2A2F2E;
}

/* Атрибут hidden должен побеждать display: flex выше */
.faq__empty[hidden] {
    display: none;
}

.faq__empty-icon {
    margin-right: 12px;
    color: #2F6DB5;
    font-size: 22px;
}

.faq__empty-text {
    font-size: 14px;
}

.faq__empty-num {
    margin-top: 4px;
    color: #8A94A0;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 11px;
}

/* ===== БОКОВАЯ ПАНЕЛЬ ===== */
.faq__aside {
    flex: 0 0 250px;
    margin-top: 25px;
}

.faq__desk {
    padding: 16px;
    border: 1px solid #9EA39E;
    border-radius: 10px;
    background: linear-gradient(#FFFFFF, #E1E4E0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25), inset 0 1px 0 #ffffff;
    text-align: center;
}

/* Значок и щит в заголовке окна — свои рисунки, их тоже не тонируем (как логотип) */
.faq__desk img,
.faq__dialog-title img {
    filter: none;
}

.faq__desk img {
    display: block;
    margin: 0 auto 6px;
}

.faq__desk-title {
    margin-bottom: 10px;
    color: #6B1A1E;
    font-family: 'Trebuchet MS', Tahoma, Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    text-shadow: 0 1px 0 #ffffff;
}

.faq__stats {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    font-size: 12px;
    text-align: left;
}

.faq__stats li {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dotted #B9BEB8;
}

.faq__stats span {
    color: #4F5654;
}

.faq__stats b {
    color: #2A2F2E;
}

/* Счетчик сохраненных запросов коротко «мигает», когда растет */
.faq__saved--bump {
    animation: faq-bump .6s ease-out;
}

@keyframes faq-bump {
    from { color: #A3262C; transform: scale(1.4); }
    to   { color: #2A2F2E; transform: scale(1); }
}

.faq__saved {
    display: inline-block;
}

.faq__tags-title {
    margin-bottom: 6px;
    color: #4F5654;
    font-size: 12px;
    text-align: left;
}

.faq__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.faq__tag {
    padding: 2px 8px;
    border: 1px solid #B9BEB8;
    border-radius: 3px;
    background: #F4F5F3;
    color: #6B1A1E;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 11px;
    text-decoration: underline;
    cursor: pointer;
}

.faq__tag:hover {
    background: #ffffff;
    text-decoration: none;
}

.faq__desk-date {
    color: #8A8F8A;
    font-size: 11px;
}

/* ===== «НЕ НАШЛИ ОТВЕТ?» ===== */
.faq__ask {
    max-width: 640px;
    margin: 30px auto 0;
    padding: 16px 18px;
    border: 1px solid #9EA39E;
    border-radius: 10px;
    background: linear-gradient(#EEF0ED, #D6D9D5);
    box-shadow: inset 0 1px 0 #ffffff;
}

.faq__ask-label {
    display: block;
    margin-bottom: 8px;
    color: #2A2F2E;
    font-family: 'Trebuchet MS', Tahoma, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-shadow: 0 1px 0 #ffffff;
}

.faq__ask-row {
    display: flex;
}

.faq__ask-input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid #8E948F;
    border-right: 0;
    border-radius: 6px 0 0 6px;
    background: #ffffff;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2);
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 13px;
}

.faq__ask-input:focus {
    outline: none;
    border-color: #6B1A1E;
}

.faq .faq__ask-btn {
    border-radius: 0 6px 6px 0;
}

.faq__ask-note {
    min-height: 16px;
    margin-top: 6px;
    color: #6B1A1E;
    font-size: 12px;
}

/* ===== ОКНО «СЛУЖБА БЕЗОПАСНОСТИ» (как в karantin.css) ===== */
.faq__dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .45);
}

.faq__dialog[hidden] {
    display: none;
}

.faq__dialog-window {
    width: 100%;
    max-width: 420px;
    padding: 0 6px 6px;
    background: linear-gradient(#C9DAEE, #AFC6E0);
    border: 1px solid #4B6585;
    border-radius: 6px 6px 4px 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .7);
    color: #000000;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 13px;
    animation: faq-pop .18s ease-out;
}

@keyframes faq-pop {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1); }
}

.faq__dialog-title {
    display: flex;
    align-items: center;
    height: 30px;
    color: #1E1E1E;
    /* «Стеклянная» подпись Windows 7: белое свечение вокруг букв */
    text-shadow: 0 0 8px #ffffff, 0 0 3px #ffffff;
}

.faq__dialog-title img {
    margin: 0 8px 0 4px;
}

.faq__dialog-x {
    align-self: flex-start;
    width: 44px;
    height: 19px;
    margin-left: auto;
    padding: 0;
    border: 1px solid #7A2210;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(#E3A08F, #C7442B 50%, #B32E14);
    color: #ffffff;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.faq__dialog-x:hover {
    background: linear-gradient(#F0B4A3, #DA563B 50%, #C73A1E);
}

.faq__dialog-body {
    display: flex;
    padding: 18px 18px 14px;
    background: #ffffff;
    border: 1px solid #8DA2BD;
    border-bottom: 0;
}

.faq__dialog-icon {
    margin-right: 16px;
    color: #2F6DB5;
    font-size: 32px;
}

.faq__dialog-head {
    margin-bottom: 6px;
    color: #1E395B;
    font-size: 16px;
}

.faq__dialog-body p {
    margin: 0;
    line-height: 1.45;
}

.faq__dialog-foot {
    padding: 10px 12px;
    background: #F0F0F0;
    border: 1px solid #8DA2BD;
    border-top: 1px solid #DFDFDF;
    text-align: right;
}

/* Глянцевая кнопка Windows 7: резкий переход цвета на середине (50% → 51%) дает «блик» */
.faq__dialog-btn {
    min-width: 86px;
    padding: 4px 14px;
    border: 1px solid #707070;
    border-radius: 3px;
    background: linear-gradient(#F2F2F2, #EBEBEB 50%, #DDDDDD 51%, #CFCFCF);
    color: #000000;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 13px;
    cursor: pointer;
}

.faq__dialog-btn:hover,
.faq__dialog-btn:focus {
    border-color: #3C7FB1;
    background: linear-gradient(#EAF6FD, #D9F0FC 50%, #BEE6FD 51%, #A7D9F5);
    outline: none;
}

/* ===== АДАПТИВ ===== */
@media (max-width: 800px) {
    .faq__layout {
        display: block;
    }

    .faq__aside {
        margin-top: 20px;
    }
}

@media (max-width: 600px) {
    .faq__q {
        padding: 10px 12px;
        font-size: 14px;
    }

    .faq__a-inner {
        margin-left: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .faq__ask-row {
        display: block;
    }

    .faq__ask-input {
        width: 100%;
        border-right: 1px solid #8E948F;
        border-radius: 6px;
        box-sizing: border-box;
    }

    .faq .faq__ask-btn {
        width: 100%;
        margin-top: 8px;
        border-radius: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq__a,
    .faq__arrow {
        transition: none;
    }

    .faq__dialog-window,
    .faq__saved--bump {
        animation: none;
    }
}