/**
 * Site Toolkit — модуль FAQ
 * Frontend styles
 *
 * Design tokens (з CONTEXT.md):
 *   #1F65E9 — Blue-500 (primary)
 *   #AFC5EB — Blue-100 (blue-soft)
 *   #1E1E1E — Neutral-900 (accent)
 *   #415170 — Neutral-600 (text)
 *
 * Figma:
 *   • секція 920/728/350
 *   • gap 40 між категоріями
 *   • gap 12 між вопросами
 *   • padding картки 8 8 8 16, radius 20, border 1px #AFC5EB
 *   • toggle 56×56, radius 16, border 1px #1F65E9
 *   • question 20/600 (desktop+tablet), 16/600 (mobile)
 *   • active state: фон радіальний градієнт (плавно з fade)
 *   • іконка «+» → «×» (два SVG, CSS перемикає display)
 */

.loco-faq-section {
  padding: 30px 0 0;
  color: #1E1E1E !important;
}

.loco-faq-section .loco-faq-section__title {
  font-size: 44px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  margin: 0 0 40px;
  padding: 0 !important;
  color: #1E1E1E !important;
  font-family: inherit !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-wrap: balance;
}

/* Основний контейнер */
.loco-faq {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.loco-faq__group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.loco-faq__cat-title {
  font-size: 16px!important;
  font-weight: 400!important;
  line-height: 1.2!important;
  color: #415170!important;
  text-transform: uppercase!important;
  letter-spacing: 0.02em!important;
  margin: 0;
}

.loco-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================================
   Картка (з <details>) — CSS-only аккордеон
   ============================================================ */
.loco-faq__item {
  position: relative;
  border: 1px solid #AFC5EB;
  border-radius: 20px;
  background: #ffffff;
  overflow: hidden;
  isolation: isolate;
}

/* Плавний градієнтний фон через окремий шар з opacity-transition */
.loco-faq__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 80% 60% at 50% 60%, #FEFDFF 0%, #E8F2FD 100%);
  opacity: 0;
  transition: opacity .35s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.loco-faq__item[open]::before {
  opacity: 1;
}

/* ============================================================
   Summary — клікабельний ряд
   ============================================================ */
.loco-faq__summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.loco-faq__summary::-webkit-details-marker { display: none; }
.loco-faq__summary::marker { content: ""; display: none; }

.loco-faq__item[open] .loco-faq__summary {
  align-items: flex-start; /* коли відкрито — кнопка залипає зверху */
}

.loco-faq__summary:focus-visible {
  outline: 3px solid rgba(31,101,233,.35);
  outline-offset: 2px;
  border-radius: 20px;
}

/* Текстовий контейнер: вопрос + (при open) відповідь */
.loco-faq__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.loco-faq .loco-faq__question {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #1E1E1E !important;
  font-family: inherit !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-wrap: pretty;
}

/* Відповідь всередині __text — прихована коли details закритий */
.loco-faq .loco-faq__answer {
  color: #415170 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  font-family: inherit !important;
  text-transform: none !important;
  display: none;
}
.loco-faq .loco-faq__answer p,
.loco-faq .loco-faq__answer span,
.loco-faq .loco-faq__answer li {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
}
.loco-faq__item[open] .loco-faq__answer {
  display: block;
  animation: loco-faq-slide .28s cubic-bezier(.4,0,.2,1);
}
.loco-faq__answer p { margin: 0; }
.loco-faq__answer p + p,
.loco-faq__answer ul + p,
.loco-faq__answer ol + p { margin-top: 10px; }
.loco-faq__answer ul,
.loco-faq__answer ol { margin: 8px 0 8px 20px; padding: 0; }
.loco-faq__answer li + li { margin-top: 4px; }
.loco-faq__answer a {
  color: #1F65E9 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.loco-faq__answer a:hover { color: #1E56C3; }
.loco-faq__answer strong { color: #1E1E1E; font-weight: 600; }

@keyframes loco-faq-slide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ============================================================
   Toggle 56×56 з двома SVG (+ та ×)
   ============================================================ */
.loco-faq__toggle {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1F65E9;
  border-radius: 16px;
  background: transparent;
  color: #1F65E9 !important;
  transition: background-color .2s ease;
}
.loco-faq__toggle svg {
  width: 32px;
  height: 32px;
  display: block;
}
.loco-faq__toggle .icon-close { display: none; }
.loco-faq__item[open] .loco-faq__toggle .icon-plus  { display: none; }
.loco-faq__item[open] .loco-faq__toggle .icon-close { display: block; }

.loco-faq__summary:hover .loco-faq__toggle {
  background: rgba(31,101,233,.06);
}

/* ============================================================
   Responsive (breakpoints по CONTEXT.md)
   ============================================================ */
@media (max-width: 1024px) {

  .loco-faq-section .loco-faq-section__title { font-size: 36px !important; margin-bottom: 32px; }
  .loco-faq-section__inner { max-width: 728px; }
}

@media (max-width: 767px) {

  .loco-faq-section__inner { max-width: 100%; }
  .loco-faq-section .loco-faq-section__title {
    font-size: 28px !important;
    margin-bottom: 28px;
  }
  .loco-faq { gap: 32px; }
  .loco-faq .loco-faq__question { font-size: 16px !important; line-height: 1.3 !important; }
  .loco-faq .loco-faq__answer   { font-size: 15px !important; }
  .loco-faq__toggle {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .loco-faq__toggle svg { width: 28px; height: 28px; }
  .loco-faq__summary { gap: 12px; padding: 6px 6px 6px 14px; }
}