/* Wepster Pay (/pay/): 12. Часті питання. Токени, основа й телефон — style/pay.css. */

/* =====================================================================
   12. ПИТАННЯ — смуга на кожне питання
   ===================================================================== */

.py-faq {
  padding: 0;
}

.py-faq-head {
  display: flex;
  align-items: flex-end;
  min-height: 36svh;
  box-sizing: border-box;
  padding: 72px 0 48px !important;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-size: var(--py-fs-1) !important;
  line-height: .98;
}

.py-qa {
  padding: 56px 0;
  background: var(--c-panel);
}

.py-qa:nth-of-type(even) {
  background: var(--c-bg);
}

.py-qa .py-wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px clamp(40px, 5vw, 96px);
}

.py-qa h3 {
  font-size: var(--py-fs-3);
  line-height: 1.2;
}

.py-qa p {
  max-width: 36em;
  font-size: var(--py-fs-4);
  line-height: 1.55;
}

/* ---------- Акордеон (js/pay-faq.js ставить .is-acc; без скрипта всі відповіді видно) ---------- */

.py-faq.is-acc {
  --qa-pad: clamp(28px, 3vw, 42px);
}

.py-faq.is-acc .py-qa {
  --qa-bg: var(--c-panel);

  padding: 0;
  background-color: var(--qa-bg);
  cursor: pointer;
  transition: background-color .45s ease;
}

.py-faq.is-acc .py-qa:nth-of-type(even) {
  --qa-bg: var(--c-bg);
}

@media (hover: hover) {
  .py-faq.is-acc .py-qa:hover {
    background-color: color-mix(in srgb, var(--qa-bg) 94%, var(--c-ink));
  }
}

.py-faq.is-acc .py-qa .py-wrap {
  position: relative;
  padding-top: var(--qa-pad);
  padding-bottom: var(--qa-pad);
  row-gap: 0;
}

.py-q-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 64px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}

/* кнопка не дає позиціонування (значок лежить у смузі) і не міняє колір на наведенні (main.css) */
.py-faq .py-q-btn {
  position: static;
}

.py-faq .py-q-btn:hover,
.py-faq .py-q-btn:focus,
.py-faq .py-q-btn:active {
  color: inherit !important;
}

/* глобальна жовта пляма main.css на button:hover::before */
.py-q-btn::before,
.py-q-btn::after {
  content: none !important;
}

.py-q-btn:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 6px;
}

/* «+» повертається в «×» */
.py-q-ic {
  position: absolute;
  top: calc(var(--qa-pad) + (1.2 * var(--py-fs-3) - 44px) / 2);
  right: var(--py-x);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--c-line);
  transition: transform .6s var(--py-ease), background-color .4s ease, box-shadow .4s ease;
}

.py-q-ic::before,
.py-q-ic::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  border-radius: 2px;
  background: var(--c-ink);
  transition: background-color .4s ease;
}

.py-q-ic::after {
  transform: rotate(90deg);
}

.py-qa.is-open .py-q-ic {
  background: var(--c-accent);
  box-shadow: inset 0 0 0 1.5px var(--c-accent);
  transform: rotate(135deg);
}

.py-qa.is-open .py-q-ic::before,
.py-qa.is-open .py-q-ic::after {
  background: var(--c-accent-ink);
}

/* Відповідь: висота 0fr -> 1fr, поля на внутрішній обгортці, щоб згортання було повним */
.py-a {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  grid-template-rows: 0fr;
  visibility: hidden;
  cursor: auto;
  transition: grid-template-rows .3s ease, visibility 0s .3s;
}

.py-qa.is-open .py-a {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .55s var(--py-ease), visibility 0s;
}

.py-a-clip {
  min-height: 0;
  overflow: hidden;
}

.py-a-in {
  padding: 4px 0 2px;
}

.py-a-in p {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .2s ease, transform .3s ease;
}

.py-a-in p + p {
  margin-top: 14px;
}

.py-qa.is-open .py-a-in p {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease .14s, transform .7s var(--py-ease) .14s;
}

.py-qa.is-open .py-a-in p:nth-child(2) {
  transition-delay: .22s;
}

.py-qa.is-open .py-a-in p:nth-child(3) {
  transition-delay: .3s;
}

/* Поява смуг каскадом при прокрутці (клас ставить js/pay-faq.js) */
.py-faq.is-armed .py-qa {
  opacity: 0;
  transform: translateY(22px);
}

.py-faq.is-armed.is-run .py-qa {
  opacity: 1;
  transform: none;
  transition:
    opacity .7s ease calc(var(--i, 0) * 80ms),
    transform .9s var(--py-ease) calc(var(--i, 0) * 80ms),
    background-color .45s ease;
}

/* ---------- Адаптив ---------- */

@media (max-width: 992px) {
  .py-qa .py-wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .py-a {
    grid-column: 1;
    grid-row: 2;
  }

  .py-a-in {
    padding-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .py-faq.is-acc .py-qa,
  .py-q-ic,
  .py-q-ic::before,
  .py-a,
  .py-a-in p {
    transition: none !important;
  }

  .py-faq.is-armed .py-qa {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 767px) {
  .py-faq-head {
    min-height: 26svh;
    font-size: clamp(44px, 13vw, 64px) !important;
  }

  /* без скрипта (немає .is-acc) смуги з відповідями лишаються вужчими, ніж на широкому екрані */
  .py-faq:not(.is-acc) .py-qa {
    padding: 36px 0;
  }

  /* акордеон: відкрите одне (js/pay-faq.js); рядок питання не нижчий за 56px, значок по центру рядка,
     праворуч місце під значок, щоб питання не переносилось без потреби */
  .py-faq.is-acc {
    --qa-pad: 10px;
  }

  .py-q-btn {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding-right: 60px;
    -webkit-tap-highlight-color: transparent;
  }

  .py-q-ic {
    top: calc(var(--qa-pad) + 6px);
  }

  .py-a-in {
    padding-top: 6px;
    padding-bottom: 14px;
  }
}