/* ==========================================================================
   FAQ SECTION
   COMPACT DESIGN
========================================================================== */

.custom-faq-section {
  width: 100%;

  max-width: 1200px;

  margin: 80px auto;

  padding: 0 20px;

  box-sizing: border-box;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}

/* ==========================================================================
   CONTENT
========================================================================== */

.custom-faq-content-col {
  width: 100%;
}

/* ==========================================================================
   ACCORDION
========================================================================== */

.faq-accordion {
  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 8px;
}

/* ==========================================================================
   FAQ ROW
========================================================================== */

.faq-item {
  width: 100%;

  overflow: hidden;

  background: #eef5f8;

  border: 1px solid transparent;

  border-radius: 7px;

  box-sizing: border-box;

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

/* Hover */

.faq-item:hover {
  background: #e9f2f6;
}

/* Active/Open */

.faq-item.is-open {
  background: #f5f9fb;

  border-color: #3478f6;
}

/* ==========================================================================
   QUESTION BUTTON
========================================================================== */

.faq-toggle {
  width: 100%;

  min-height: 46px;

  margin: 0;

  padding: 11px 14px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  border: 0;

  border-radius: 0;

  outline: none;

  background: transparent;

  color: #111111;

  text-align: left;

  cursor: pointer;

  font: inherit;

  box-shadow: none;

  appearance: none;
}

/* Keyboard focus */

.faq-toggle:focus-visible {
  outline: 2px solid #3478f6;

  outline-offset: -2px;
}

/* ==========================================================================
   QUESTION
========================================================================== */

.faq-question {
  display: block;

  color: #111111;

  font-size: 14px;

  font-weight: 500;

  line-height: 1.4;
}

/* ==========================================================================
   PLUS / MINUS
========================================================================== */

.faq-icon {
  position: relative;

  width: 14px;
  height: 14px;

  flex: 0 0 14px;

  margin-left: auto;
}

/* Horizontal */

.faq-icon::before {
  content: "";

  position: absolute;

  top: 6px;
  left: 1px;

  width: 12px;
  height: 1.5px;

  background: #495057;

  border-radius: 2px;

  transition: transform 0.25s ease;
}

/* Vertical */

.faq-icon::after {
  content: "";

  position: absolute;

  top: 1px;
  left: 6px;

  width: 1.5px;
  height: 12px;

  background: #495057;

  border-radius: 2px;

  transition:
    transform 0.25s ease,
    opacity 0.2s ease;
}

/* Open = minus */

.faq-toggle[aria-expanded="true"] .faq-icon::after {
  transform: rotate(90deg);

  opacity: 0;
}

/* ==========================================================================
   ANSWER PANEL
========================================================================== */

.faq-panel {
  max-height: 0;

  overflow: hidden;

  visibility: hidden;

  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.35s ease;
}

.faq-item.is-open .faq-panel {
  visibility: visible;
}

/* ==========================================================================
   ANSWER CONTENT
========================================================================== */

.faq-panel-inner {
  padding: 0 42px 18px 14px;

  color: #4d555a;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.65;
}

.faq-panel-inner p {
  margin: 0;
}

/* ==========================================================================
   TABLET
========================================================================== */

@media (max-width: 992px) {
  .custom-faq-section {
    margin: 60px auto;

    padding: 0 20px;
  }
}

/* ==========================================================================
   MOBILE
========================================================================== */

@media (max-width: 768px) {
  .custom-faq-section {
    margin: 50px auto;

    padding: 0 16px;
  }

  .faq-accordion {
    gap: 7px;
  }

  .faq-toggle {
    min-height: 44px;

    padding: 10px 12px;
  }

  .faq-question {
    font-size: 13px;
  }

  .faq-panel-inner {
    padding: 0 38px 16px 12px;

    font-size: 13px;
  }
}

/* ==========================================================================
   SMALL MOBILE
========================================================================== */

@media (max-width: 480px) {
  .custom-faq-section {
    padding: 0 12px;
  }

  .faq-toggle {
    padding: 10px 11px;

    gap: 12px;
  }

  .faq-question {
    font-size: 12.5px;
  }

  .faq-panel-inner {
    padding: 0 34px 15px 11px;

    font-size: 12.5px;
  }
}