@import "../../frontend/node_modules/flatpickr/dist/flatpickr.min.css";
.product-single {
  margin-top: 156px;
}

/* 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: var(--radius-2xl, 16px);
  background-color: #fff;
  text-align: left;
  padding: 20px;
  border: none;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: var(--uiInk-tone-04, #334155);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  position: relative;
}
@media screen and (max-width: 989px) {
  .accordion-trigger {
    font-size: 16px;
    line-height: 22px;
    padding: 20px 30px 20px 20px;
  }
}
.accordion-trigger span {
  width: 24px;
  color: #bb8401;
  font-size: 14px;
  height: 24px;
  text-align: center;
  border-radius: var(--rounded-lg, 8px);
  border: var(--border-width-0, 1px) solid var(--uiStroke-warning-01, #ca8a04);
  background: var(--uiBg-brand-yellow-00, #fdfbf6);
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 10px;
}
.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;
  padding: 0 20px;
  background-color: #fdfdfd;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  border-radius: 0 0 16px 16px;
}
.accordion-content img {
  width: 200px;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 16px;
}
@media screen and (max-width: 989px) {
  .accordion-content img {
    width: 100px;
    height: 100px;
  }
}
.accordion-content_wrapper {
  padding-top: 20px;
  padding-bottom: 20px;
  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: 200px;
  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% */
}
@media screen and (max-width: 989px) {
  .pregnancy-rate svg {
    width: 100%;
    margin-bottom: 15px;
  }
}

.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;
}
@media screen and (max-width: 989px) {
  .section-question_wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignleft {
  float: left;
  margin: 0.5em 1em 0.5em 0;
}

.alignright {
  float: right;
  margin: 0.5em 0 0.5em 1em;
}