/* ===== FAQ SECTION ===== */

.faqSection {
  padding: 128px 0;
}

/* ===== Layout ===== */
.faqWraper {
  display: flex;
  row-gap: 16px;
  column-gap: 20px;
  padding-top: 65px;
  align-items: self-start;
}

.faq-card,
.faqWraper .col-cstm {
  max-width: 578px;
  width: 100%;
}

.faqWraper .col-cstm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===== Hide number badge (not used in this design) ===== */
.faq-number-badge {
  display: none;
}

/* ===== Card ===== */
.faq-card {
  background: #fff;
  border: 1px solid #EBE8F4;
  border-radius: 20px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.faq-card:hover {
  border-color: #DADEF1;
  box-shadow: 0 4px 16px rgba(104, 90, 219, 0.08);
}

.faq-card.show {
  border-color: var(--color-primary);
  box-shadow: 0 4px 20px rgba(104, 90, 219, 0.12);
}

/* ===== Head ===== */
.faq-accord-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 25px 20px;
  cursor: pointer;
  background: #fff;
  transition: background 0.3s ease;
}

.faq-accord-card-head:hover {
  background: #FAFAFF;
}

.faq-card.show .faq-accord-card-head {
  background: #FAFAFF;
}

/* ===== Question text ===== */
.faq-accord-card-head h3 {
  flex: 1;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  color: #1F2A2E;
  margin: 0;
  text-align: left;
  transition: color 0.3s ease;
}

.faq-card.show .faq-accord-card-head h3 {
  color: var(--color-primary);
  font-weight: var(--fw-medium);
}

/* ===== Icon wrapper: + via CSS ===== */
.faq-icon-wrapper {
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 15C7.30575 15 7.11946 14.9228 6.9821 14.7855C6.84474 14.6481 6.76758 14.4618 6.76758 14.2676V0.732422C6.76758 0.538172 6.84474 0.351877 6.9821 0.214521C7.11946 0.0771657 7.30575 0 7.5 0C7.69425 0 7.88054 0.0771657 8.0179 0.214521C8.15526 0.351877 8.23242 0.538172 8.23242 0.732422V14.2676C8.23242 14.4618 8.15526 14.6481 8.0179 14.7855C7.88054 14.9228 7.69425 15 7.5 15Z' fill='%231F2A2E'/%3E%3Cpath d='M14.2676 8.23242H0.732422C0.538172 8.23242 0.351877 8.15526 0.214521 8.0179C0.0771657 7.88054 0 7.69425 0 7.5C0 7.30575 0.0771657 7.11946 0.214521 6.9821C0.351877 6.84474 0.538172 6.76758 0.732422 6.76758H14.2676C14.4618 6.76758 14.6481 6.84474 14.7855 6.9821C14.9228 7.11946 15 7.30575 15 7.5C15 7.69425 14.9228 7.88054 14.7855 8.0179C14.6481 8.15526 14.4618 8.23242 14.2676 8.23242Z' fill='%231F2A2E'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  flex-shrink: 0;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Hide the inline chevron SVG — icon is handled by CSS */
.faq-chevron {
  display: none;
}

/* Open: rotate + to × and change icon to primary color */
.faq-card.show .faq-icon-wrapper {
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 15C7.30575 15 7.11946 14.9228 6.9821 14.7855C6.84474 14.6481 6.76758 14.4618 6.76758 14.2676V0.732422C6.76758 0.538172 6.84474 0.351877 6.9821 0.214521C7.11946 0.0771657 7.30575 0 7.5 0C7.69425 0 7.88054 0.0771657 8.0179 0.214521C8.15526 0.351877 8.23242 0.538172 8.23242 0.732422V14.2676C8.23242 14.4618 8.15526 14.6481 8.0179 14.7855C7.88054 14.9228 7.69425 15 7.5 15Z' fill='%23685ADB'/%3E%3Cpath d='M14.2676 8.23242H0.732422C0.538172 8.23242 0.351877 8.15526 0.214521 8.0179C0.0771657 7.88054 0 7.69425 0 7.5C0 7.30575 0.0771657 7.11946 0.214521 6.9821C0.351877 6.84474 0.538172 6.76758 0.732422 6.76758H14.2676C14.4618 6.76758 14.6481 6.84474 14.7855 6.9821C14.9228 7.11946 15 7.30575 15 7.5C15 7.69425 14.9228 7.88054 14.7855 8.0179C14.6481 8.15526 14.4618 8.23242 14.2676 8.23242Z' fill='%23685ADB'/%3E%3C/svg%3E");
  transform: rotate(45deg);
}

/* ===== Body ===== */
.faq-accord-card-body {
  padding: 0 24px 22px 24px;
  display: none;
  background: #fff;
}

.answerInner,
.answerInner ul li,
.faq-accord-card-body p,
.faq-accord-card-body p span {
  font-family: var(--font-primary);
  font-style: normal;
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-text);
}

.answerInner {
  padding-top: 0;
  border-top: 1px solid #EAEDF2;
  padding-top: 18px;
}

.answerInner strong {
  font-weight: var(--fw-bold);
  color: var(--color-heading);
}

.answerInner a {
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.answerInner ul {
  padding-left: 24px;
  margin: 12px 0;
}

.answerInner ul li {
  margin-bottom: 10px;
}

.answerInner ul li::marker {
  color: var(--color-primary);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 991px) {
  .faqWraper {
    column-gap: 16px;
    padding-top: 50px;
  }

  .faq-card,
  .faqWraper .col-cstm {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .faqWraper {
    flex-direction: column;
    row-gap: 12px;
    padding-top: 40px;
  }

  .faqWraper .col-cstm {
    gap: 12px;
  }

  .faq-accord-card-head {
    padding: 20px 18px;
    gap: 14px;
  }

  .faq-accord-card-head h3 {
    font-size: 16px;
    line-height: 140%;
  }

  .faq-accord-card-body {
    padding: 0 18px 18px 18px;
  }
}

@media (max-width: 575px) {
  .faqSection {
    padding: 90px 0;
  }

  .faqWraper {
    row-gap: 10px;
    padding-top: 32px;
  }

  .faqWraper .col-cstm {
    gap: 10px;
  }

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

  .faq-accord-card-head {
    padding: 16px 14px;
    gap: 12px;
  }

  .faq-accord-card-head h3 {
    font-size: 15px;
  }

  .faq-icon-wrapper {
    width: 13px;
    height: 13px;
    background-size: 13px 13px;
  }

  .faq-accord-card-body {
    padding: 0 14px 16px 14px;
  }
}