/* ==========================================================================
   FAQ page — Figma: よくある質問 / FAQ (17454-3698)
   Content column 1284px = list 904px + gap 40px + support card 340px
   ========================================================================== */

.page-faq {
  background: #f7f7f7;
}

.faq-page {
  position: relative;
  overflow: hidden;
  padding: 72px 0 112px;
}

/* Figma "Background Wave" behind the intro + filters */
.faq-page__bg {
  position: absolute;
  left: 0;
  top: 34px;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}

.faq-page__inner {
  position: relative;
  z-index: 1;
  width: min(100%, var(--page-w, 1440px));
  margin-inline: auto;
  padding-inline: var(--page-gutter, 78px);
}

.faq-page__intro {
  max-width: 1284px;
  color: var(--color-heading, #074e6a);
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 2.3;
  letter-spacing: 0.04em;
}

/* ── Category filters ── */
.faq-page__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 72px;
}

.faq-filter {
  display: inline-flex;
  align-items: center;
  /* Was a flat 39px, under the 44px minimum tap target. Keeping the visual
     height for wide screens and growing it on touch would split the design,
     so it simply grows to 44 everywhere. */
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #e9ebed;
  color: #667085;
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease;
}

.faq-filter:hover {
  background: #dfe3e6;
}

.faq-filter.is-active {
  background: #21aed9;
  color: #fff;
}

.faq-filter:focus-visible {
  outline: 2px solid #21aed9;
  outline-offset: 2px;
}

/* ── Layout ── */
.faq-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 904fr) 340fr;
  align-items: start;
  gap: 40px;
  margin-top: 48px;
}

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

.faq-page__empty {
  padding: 32px 0;
  color: #667e87;
  text-align: center;
}

/* ── Accordion item ── */
.faq-item {
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.faq-item__q {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 61px;
  padding: 17px 56px 17px 24px;
  position: relative;
  color: var(--color-heading, #074e6a);
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none;
  transition: color 0.22s ease;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__q:hover,
.faq-item[open] .faq-item__q {
  color: #21aed9;
}

.faq-item__q:focus-visible {
  outline: 2px solid #21aed9;
  outline-offset: -2px;
}

.faq-item__mark {
  flex: none;
}

/* Chevron drawn in CSS so no extra asset is needed */
.faq-item__icon {
  position: absolute;
  right: 24px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid #21aed9;
  border-bottom: 2px solid #21aed9;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s ease;
}

.faq-item[open] .faq-item__icon {
  transform: translateY(-30%) rotate(-135deg);
}

.faq-item__a {
  padding: 0 56px 24px 24px;
}

.faq-item__a p {
  margin: 0;
  color: #667e87;
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__icon {
    transition: none;
  }
}

/* ── Support card ── */
.faq-support {
  position: sticky;
  top: 110px;
  padding: 30px 28px 28px;
  border-radius: 8px;
  background: var(--color-heading, #074e6a);
  color: #fff;
}

.faq-support__eyebrow {
  margin: 0;
  color: #1da2ca;
  font-family: var(--ff-jost, "Jost", sans-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.6;
}

.faq-support__title {
  margin: 14px 0 0;
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.faq-support__body {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.03em;
}

.faq-support__divider {
  height: 1px;
  margin: 28px 0 15px;
  background: rgba(255, 255, 255, 0.25);
}

.faq-support__tel-label {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-size: 15px;
  line-height: 1.6;
}

.faq-support__tel {
  display: inline-block;
  margin-top: 12px;
  color: #fff;
  font-family: var(--ff-jost, "Jost", sans-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  transition: color 0.22s ease;
}

.faq-support__tel:hover,
.faq-support__tel:focus-visible {
  color: #7fd6ef;
}

.faq-support__hours {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-size: 14px;
  line-height: 1.7;
}

.faq-support__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  margin-top: 26px;
  border-radius: 999px;
  background: #4abddf;
  color: #fff;
  font-family: var(--ff-jp, "Noto Sans JP", sans-serif);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.22s ease, transform 0.22s ease;
}

.faq-support__cta:hover,
.faq-support__cta:focus-visible {
  background: #21aed9;
  transform: translateY(-2px);
}

/* .cta mang sẵn margin-top 90px cho các trang khác; ở đây Figma chỉ có 112px
   khoảng trống do .faq-page padding-bottom tạo ra. */
.page-faq .cta {
  margin-top: 0;
}

/* ── Responsive ── */
@media (max-width: 80rem) {
  .faq-page__inner {
    padding-inline: 32px;
  }
}

@media (max-width: 64rem) {
  .faq-page {
    padding: 48px 0 80px;
  }

  .faq-page__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .faq-support {
    position: static;
  }

  .faq-page__filters {
    margin-top: 40px;
  }
}

@media (max-width: 48rem) {
  .faq-page__inner {
    padding-inline: 20px;
  }

  .faq-page__intro {
    font-size: 15px;
    line-height: 2;
  }

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

  .faq-item__icon {
    right: 16px;
  }

  .faq-item__a {
    padding: 0 16px 20px;
  }
}