/* ==========================================================================
   Страница FAQ
   ========================================================================== */

/* ---------- Section 1 (Figma 2483:2505): hero, теги, чипсы, разделы ---------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--faq-section-gap);
  padding-top: var(--page-offset-top);
}

/* ---------- Верх FAQ (Figma 3086:7626, вариант А): заголовок, теги, поиск и контакты ---------- */
.faq-top {
  display: flex;
  flex-direction: column;
  gap: var(--faq-top-gap);
}

.faq-top__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-top__title {
  color: var(--color-faq-hero-title);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
}

.faq-top__subtitle {
  color: var(--color-blog-meta); /* #6a6e75 */
  font-size: var(--body-20-size);
  font-weight: var(--body-20-weight);
  line-height: var(--body-20-line-height);
  letter-spacing: var(--body-20-letter-spacing);
}

/* Теги слева, как в блоге (там gap 12) */
.faq-top .tag-list {
  justify-content: flex-start;
  gap: var(--blog-categories-gap);
}

/* Поиск слева, контакты справа; на узком экране (стопгэп) контакты переносятся под поиск */
.faq-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* min-width: 0 — иначе фиксированные 509px поля не дают строке сжаться на узком экране (стопгэп) */
.faq-toolbar .blog-search {
  min-width: 0;
  max-width: 100%;
}

.faq-contact {
  display: flex;
  align-items: center;
  gap: 16px;
}

.faq-contact__text {
  color: var(--color-blog-meta);
  font-size: var(--body-18-size);
  font-weight: var(--font-weight-medium);
  line-height: normal;
  white-space: nowrap;
}

/* Последний видимый вопрос карточки при поиске и фильтре «Популярное»: скрытые вопросы (.is-hidden) остаются в DOM,
   поэтому :last-child из components.css попадает на скрытый — у видимого оставался разделитель. То же, что у :last-child */
.faq-section__card > .accordion:not(.is-hidden):not(:has(~ .accordion:not(.is-hidden))) {
  padding-bottom: 0;
  border-bottom: 0;
}

.faq-section__card > .accordion:not(.is-hidden):not(:has(~ .accordion:not(.is-hidden))) .accordion__content {
  padding-bottom: var(--accordion-spacing);
}

/* «Напишите в Telegram» — строка-ссылка вместо кнопки только на мобильной 375 (3223:1533), см. @media ниже */
.faq-contact__link {
  display: none;
}

/* Область для скринридера: «Нашли N ответов» при поиске. Видимого счётчика нет (как в блоге) */
.search__count {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Подсветка совпадения в заголовке вопроса при поиске — состояния в Figma нет,
   цвет из уже существующего токена (активный фон тега) */
mark {
  background-color: var(--color-tag-bg-active);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

/* ---------- Чипсы категорий (Figma 2485:4714) ---------- */
.tag__icon--star { --icon: url("../../assets/icons/categories/star.svg"); }
.tag__icon--chat { --icon: url("../../assets/icons/categories/chat.svg"); }
.tag__icon--arrows-vertical { --icon: url("../../assets/icons/categories/arrows-vertical.svg"); }
.tag__icon--money-coins { --icon: url("../../assets/icons/categories/money-coins.svg"); }
.tag__icon--return { --icon: url("../../assets/icons/categories/return.svg"); }
.tag__icon--card-update { --icon: url("../../assets/icons/categories/card-update.svg"); }
.tag__icon--chargeback-loss { --icon: url("../../assets/icons/categories/chargeback-loss.svg"); }
.tag__icon--usdt { --icon: url("../../assets/icons/categories/usdt.svg"); }
.tag__icon--security { --icon: url("../../assets/icons/categories/security.svg"); }
.tag__icon--user { --icon: url("../../assets/icons/categories/user.svg"); }
.tag__icon--briefcase { --icon: url("../../assets/icons/categories/briefcase.svg"); }

/* ---------- «Ничего не найдено» (Figma 1920 3235:15033, 768 3235:15494, 375 3235:15947) ----------
   Три строки Body/18 (на 375 — 16) через 6, ниже «Например:» и теги-подсказки .tag--s через 8, отступ сверху 16.
   Подсказки в одном ряду с «Например:», при нехватке места переносятся (375). */
.faq-empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--color-tag-text); /* #44474b */
  font-size: var(--body-18-size);
  font-weight: var(--body-18-weight);
  line-height: var(--body-18-line-height);
}

.faq-empty[hidden] {
  display: none;
}

.faq-empty__hints {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
}

/* ==========================================================================
   Планшет и мобильная (до 1279): общая структура. Значения — токены в @media в css/tokens.css
   (подмена внутри .faq + --tablet-faq-page-* / --mobile-faq-page-*). Десктоп не затрагивается.
   ========================================================================== */
@media (max-width: 1279px) {
  /* Теги: Teg M (3221:796) — 8 / 16, текст и счётчик Body/16 1.6, иконка 16 (--tag-icon-size в .faq) */
  .faq-top .tag--l {
    padding: var(--tag-padding-s);
    font-size: var(--body-16-medium-size);
    font-weight: var(--body-16-medium-weight);
    line-height: var(--body-16-medium-line-height);
    letter-spacing: var(--body-16-medium-letter-spacing);
  }

  .faq-top .tag__count {
    font-size: var(--body-16-medium-size);
    line-height: var(--body-16-medium-line-height);
    letter-spacing: var(--body-16-medium-letter-spacing);
  }

  /* Строка поиска во всю ширину, «Не нашли ответ?» — под ней */
  .faq-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--tablet-faq-page-toolbar-gap);
  }

  /* Ответ: Body/18 (FAQ Tablet / Mobile — 18 / 1.6) */
  .faq .accordion__content,
  .faq .faq-note {
    font-size: var(--body-18-size);
    line-height: var(--body-18-line-height);
    letter-spacing: var(--body-18-letter-spacing);
  }

  /* Последний (видимый) вопрос карточки: в Figma (3233:14784, 3233:15567) отступ под ним такой же, как у остальных,
     только без разделителя — и у свёрнутого, и у раскрытого */
  .faq-section__card > .accordion:not(.is-hidden):not(:has(~ .accordion:not(.is-hidden))) {
    padding-bottom: var(--accordion-spacing);
  }

  .faq-section__card > .accordion:not(.is-hidden):not(:has(~ .accordion:not(.is-hidden))) .accordion__content {
    padding-bottom: 0;
  }

  /* Таблицы с подложкой: колонки равной ширины (768 — две по 264 через 48, 375 — одна под другой, 3233:14892 /
     3233:15675). Значение по содержимому, прижато вправо; название переносится («Перевод другому человеку» на 768 —
     2 строки). Длинные значения из актуальных текстов («1,5% + комиссия сети») тоже переносятся — в Figma их нет */
  .faq-tables {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--faq-tables-gap);
  }

  .faq-tables--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-tables > .faq-table {
    width: 100%;
  }

  .faq-table--values {
    table-layout: auto;
  }

  .faq-table--values th {
    white-space: normal;
  }

  .faq-table--values td {
    width: 1%;
    white-space: normal;
  }

  /* «Не нашли ответ?»: кнопки по содержимому, в ряд */
  .faq-cta__subtitle {
    font-size: var(--body-18-size);
    line-height: var(--body-18-line-height);
    letter-spacing: var(--body-18-letter-spacing);
  }
}

/* ==========================================================================
   Планшет 768 (Figma 3221:767): поля 40, контент 688.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
  .faq .container {
    padding-inline: var(--tablet-page-margin);
  }

  .faq-top__head {
    gap: var(--tablet-faq-page-head-gap);
  }

  .faq-top__title {
    font-size: var(--tablet-hero-title-size);
    line-height: var(--tablet-faq-page-title-line-height);
  }

  .faq-top__subtitle {
    font-size: var(--body-18-size);
    line-height: var(--body-18-line-height);
    letter-spacing: var(--body-18-letter-spacing);
  }

  /* Heading 3, Size = Tablet: 30 / 1.17, подпись 18 / 1.6 */
  .faq-section__title {
    font-size: var(--tablet-faq-page-heading-size);
    line-height: var(--tablet-faq-page-heading-line-height);
  }

  .faq-section__subtitle {
    font-size: var(--body-18-size);
    line-height: var(--body-18-line-height);
    letter-spacing: var(--body-18-letter-spacing);
  }

  /* FAQ, Size = Tablet: вопрос 22 / 1.17 */
  .faq .accordion__button {
    font-size: var(--tablet-faq-page-question-size);
    line-height: var(--tablet-faq-page-question-line-height);
  }

  /* «Не нашли ответ?» (3221:1555): заголовок 32 / 1.17 */
  .faq-cta__title {
    font-size: var(--h2-size);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
  }

}

/* ==========================================================================
   Мобильная 375 (Figma 3223:1491): поля 16, контент 343.
   ========================================================================== */
@media (max-width: 767px) {
  .faq .container {
    padding-inline: var(--mobile-page-margin);
  }

  .faq-top__head {
    gap: var(--mobile-faq-page-head-gap);
  }

  .faq-top__title {
    font-size: var(--mobile-post-title-size);
    line-height: var(--h2-line-height); /* 32 × 1.17 = 37 */
  }

  .faq-top__subtitle {
    font-size: var(--body-16-medium-size);
    line-height: var(--body-16-medium-line-height);
    letter-spacing: var(--body-16-medium-letter-spacing);
  }

  /* Теги — один ряд со скроллом (.tag-list--scroll); ряд доходит до правого края экрана, как в блоге */
  #faq-categories {
    margin-right: calc(-1 * var(--mobile-page-margin));
  }

  /* Подпись «Я ищу..» над полем (3223:1530), как в блоге */
  .faq-toolbar {
    gap: 0;
  }

  .faq-toolbar .blog-search {
    flex-direction: column;
    align-items: stretch;
  }

  .faq-toolbar .blog-search .search {
    flex: none;
    width: 100%;
  }

  /* «Не нашли ответ? Напишите в Telegram» — одна строка-ссылка, кнопки нет (3223:1533) */
  .faq-contact {
    padding-top: 12px;
  }

  .faq-contact__text {
    font-size: var(--body-16-medium-size);
    line-height: var(--mobile-faq-page-contact-line-height);
    white-space: normal;
  }

  .faq-contact__link {
    display: inline;
    color: var(--color-link);
  }

  .faq-contact .button {
    display: none;
  }

  /* Heading 3, Size = Mobile: 26 / 1.17, подпись 16 / 1.6 */
  .faq-section__title {
    font-size: var(--mobile-hero-title-size);
    line-height: var(--mobile-faq-page-heading-line-height);
  }

  .faq-section__subtitle {
    font-size: var(--body-16-medium-size);
    line-height: var(--body-16-medium-line-height);
    letter-spacing: var(--body-16-medium-letter-spacing);
  }

  /* FAQ, Size = Mobile: вопрос 20 / 1.17 */
  .faq .accordion__button {
    font-size: var(--mobile-faq-page-question-size);
    line-height: var(--mobile-faq-page-question-line-height);
  }

  /* Комиссии (3233:15675): две таблицы друг под другом через 32 */
  .faq-tables {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--faq-tables-gap);
  }

  /* Карта USD (3233:15864): подложка 24 / 16 */
  .faq-tables--wide {
    padding: var(--faq-note-padding);
  }

  /* «Не нашли ответ?» (3223:2284): заголовок 26 / 1.17, подпись 16 / 1.6, кнопки во всю ширину колонкой */
  .faq-cta__title {
    font-size: var(--mobile-hero-title-size);
    line-height: var(--mobile-faq-page-heading-line-height);
  }

  .faq-cta__subtitle {
    font-size: var(--body-16-medium-size);
    line-height: var(--body-16-medium-line-height);
    letter-spacing: var(--body-16-medium-letter-spacing);
  }

  .faq-cta__actions {
    flex-direction: column;
    align-self: stretch;
  }

  .faq-empty {
    font-size: var(--body-16-medium-size);
    line-height: var(--body-16-medium-line-height);
  }

  .faq-cta__actions .button {
    justify-content: center;
  }
}

/* ---------- Утилита: скрыть при поиске ----------
   В конце файла, чтобы перебивать display у .faq-section/.accordion/.faq-popular и т.д. */
.is-hidden {
  display: none;
}