@import "../../frontend/node_modules/flatpickr/dist/flatpickr.min.css";
.faq {
  margin-top: 156px;
}
.faq-sidebar ul {
  -webkit-box-shadow: 0px 87px 24px 0px rgba(117, 75, 16, 0), 0px 56px 22px 0px rgba(117, 75, 16, 0), 0px 31px 19px 0px rgba(117, 75, 16, 0.01), 0px 14px 14px 0px rgba(117, 75, 16, 0.02), 0px 3px 8px 0px rgba(117, 75, 16, 0.02);
          box-shadow: 0px 87px 24px 0px rgba(117, 75, 16, 0), 0px 56px 22px 0px rgba(117, 75, 16, 0), 0px 31px 19px 0px rgba(117, 75, 16, 0.01), 0px 14px 14px 0px rgba(117, 75, 16, 0.02), 0px 3px 8px 0px rgba(117, 75, 16, 0.02);
}
.faq-sidebar ul li {
  margin-bottom: 5px;
}
.faq-sidebar ul li a {
  font-size: 14px;
  background: url("../images/icons/chevron_right.svg") no-repeat right 10px center #fff;
  border-radius: 12px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
}
.faq-sidebar ul li a:hover, .faq-sidebar ul li a.active {
  background: url("../images/icons/chevron_right.svg") no-repeat right 10px center #ed8910;
  color: #fff;
}
.faq-sidebar ul li a:hover a, .faq-sidebar ul li a.active a {
  color: #fff;
}

/* General Accordion Styling */
.accordion-item {
  margin-bottom: 8px;
  border-radius: var(--radius-2xl, 16px);
  background: var(--uiBg-screen-00, #fff);
  -webkit-box-shadow: 0px 87px 24px 0px rgba(117, 75, 16, 0), 0px 56px 22px 0px rgba(117, 75, 16, 0), 0px 31px 19px 0px rgba(117, 75, 16, 0.01), 0px 14px 14px 0px rgba(117, 75, 16, 0.02), 0px 3px 8px 0px rgba(117, 75, 16, 0.02);
          box-shadow: 0px 87px 24px 0px rgba(117, 75, 16, 0), 0px 56px 22px 0px rgba(117, 75, 16, 0), 0px 31px 19px 0px rgba(117, 75, 16, 0.01), 0px 14px 14px 0px rgba(117, 75, 16, 0.02), 0px 3px 8px 0px rgba(117, 75, 16, 0.02);
}

.accordion-item:last-child {
  border-bottom: none;
}

/* Trigger (Button) Styling */
.accordion-trigger {
  width: 100%;
  border-radius: 16px;
  background-color: #fff;
  text-align: left;
  padding: 20px 40px 20px 20px;
  border: none;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: var(--uiInk-tone-04, #334155);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  position: relative;
}
.accordion-trigger::after {
  content: "";
  width: 30px;
  height: 30px;
  background: url("../images/icons/arrow_down.svg") no-repeat;
  background-size: cover;
  position: absolute;
  right: 20px;
  top: 30%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.accordion-trigger[aria-expanded=true]::after {
  rotate: 180deg;
}

.accordion-trigger:hover {
  background-color: #fff9f2;
}

/* Content Styling */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: #fdfdfd;
  color: #64748b;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  border-radius: 0 0 16px 16px;
}
.accordion-content_wrapper {
  border-top: 1px dashed #e2e8f0;
  padding: 20px 10px;
  gap: 24px;
  color: var(--uiInk-tone-03, #64748b);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

.accordion-content.open {
  max-height: -webkit-max-content !important;
  max-height: -moz-max-content !important;
  max-height: max-content !important;
  padding: 16px;
}

/* Utility classes */
.accordion-content p {
  margin: 0;
}

.pregnancy-rate {
  margin-top: 20px;
  border-radius: var(--radius-xl, 12px);
  background: var(--uiInk-brand-orange-01, #ed8910);
  padding: 20px;
}
.pregnancy-rate h3 {
  color: var(--uiInk-tone-00, #fff);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
}

.section-question {
  border-radius: var(--radius-2xl, 16px);
  background: var(--uiBg-brand-orange-01, #ffe8cc);
}
.section-question_wrapper {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 42px;
}

/* FAQ Search Result Counter Styling */
.faq-search-counter {
  color: var(--uiInk-tone-03, #334155);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}