/* =========================================================
   FAQ PAGE — Smooth Grid Accordion (No Height Animation)
   ========================================================= */

.faq-page {
  padding: 10px 0 32px;
  margin-bottom: 32px;
}

.faq-page__head {
  margin-top: 10px;
  margin-bottom: 18px;
}

.faq-page__intro {
  max-width: 920px;
  color: rgba(255, 255, 255, .72);
  font-size: 16px;
  line-height: 1.55;
}

/* =========================
   Accordion Layout
========================= */

.faq__list {
  display: grid;
  gap: 14px;
}

/* Card */
.faq-item {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .22);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  transform: translateY(0);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

@media (hover:hover) {
  .faq-item:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .075);
  }
}

/* Button */
.faq-item__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: rgba(255, 255, 255, .92);
  font: inherit;
  line-height: 1.25;
}

.faq-item__q {
  font-size: 22px;
  font-weight: 800;
}

.faq-item__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .10);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.faq-item__chev {
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}

.faq-item.is-open .faq-item__chev {
  transform: rotate(90deg);
}

.faq-item__btn:focus-visible {
  outline: 2px solid rgba(74, 206, 255, .95);
  outline-offset: 3px;
  border-radius: 14px;
}

/* =========================
   Smooth Panel (GRID trick)
========================= */

.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms cubic-bezier(.2,.9,.2,1);
}

.faq-item__panel > div {
  overflow: hidden;
}

.faq-item.is-open .faq-item__panel {
  grid-template-rows: 1fr;
}

/* Content animation */
.faq-item__content {
  padding: 0 18px 18px;
  color: rgba(255, 255, 255, .72);
  font-size: 16px !important;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.faq-item.is-open .faq-item__content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 80ms;
}

/* WYSIWYG */
.faq-item__content p { margin: 0 0 12px; }
.faq-item__content p:last-child { margin-bottom: 0; }

.faq-item__content a {
  color: rgba(74, 206, 255, .95);
  text-decoration: none;
}


/* ===== Compact FAQ cards ===== */

/* меньше расстояние между карточками */
.faq__list{
  gap: 10px;
}

/* меньше скругление и “толщина” */
.faq-item{
  border-radius: 16px;
}

/* уменьшаем высоту за счёт паддингов и line-height */
.faq-item__btn{
  padding: 14px 16px;      /* было 18px */
  gap: 12px;
  line-height: 1.2;
}



/* правая кнопка компактнее */
.faq-item__icon{
  width: 40px;             /* было 44px */
  height: 40px;
  border-radius: 12px;
}

/* панель: убираем лишний низ, чтобы не “раздувало” */
.faq-item__content{
  padding: 0 16px 14px;    /* было 0 18 18 */
  font-size: 15px;
  line-height: 1.55;
}


@media (hover:hover) {
  .faq-item__content a:hover {
    color: var(--color-primary);
  }
}

/* =========================
   Responsive
========================= */

@media (max-width: 1024px) {
  .faq-item__btn { padding: 16px; }
  .faq-item__content { padding: 0 16px 16px; }
  .faq-item__q { font-size: 17px; }
}

@media (max-width: 560px) {
  .faq-item__btn { padding: 14px; }
  .faq-item__content { padding: 0 14px 14px; }
  .faq-item__q { font-size: 16px; }
  .faq-item__icon { width: 40px; height: 40px; }
}

/* =========================
   Light Theme
========================= */

html[data-theme="light"] .faq-page__intro {
  color: #62748E;
}

html[data-theme="light"] .faq-item {
  background: rgba(var(--white), 0.92);
  border: 1px solid rgba(var(--black), 0.08);
  box-shadow: 0 14px 36px rgba(var(--black), 0.10);
}

html[data-theme="light"] .faq-item__btn {
  color: var(--color-text);
}

html[data-theme="light"] .faq-item__icon {
  background: rgba(var(--black), 0.04);
  border: 1px solid rgba(var(--black), 0.08);
}

html[data-theme="light"] .faq-item__content {
  color: #62748E;
}


@media (max-width: 560px){
  .faq__list{ gap: 8px; }

  .faq-item{ border-radius: 14px; }

  .faq-item__btn{
    padding: 12px 12px;
    gap: 10px;
  }

  .faq-item__q{ font-size: 15px; }

  .faq-item__icon{
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .faq-item__content{
    padding: 0 12px 12px;
    font-size: 14.5px;
  }
}