/* ==========================================================================
   FAQ Section Styles
   ========================================================================== */

.faq-section {
  width: 100%;
  background: var(--dark-gray-bg);
  padding: var(--container-py) 0;
  position: relative;
}

.faq-section .container {
  max-width: var(--container-width);
  width: 100%;
  margin: 0 auto;
}

.faq-section .faq-content {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.faq-section .faq-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 20px;
}

/* ==========================================================================
   Accordion Styles
   ========================================================================== */

.accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.accordion-item {
  width: 100%;
  background: var(--dark-gray-bg);
  border-bottom: 1px solid var(--color-light);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  color: var(--text-secondary);
  background: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: var(--font-weight-medium);
  font-size: var(--text-2xl);
  line-height: 140%;
  text-align: left;
  gap: 100px;
  font-family: "Roboto", sans-serif;
}

.accordion-content {
  display: none; /* Hidden by default */
}

/* --- Active State --- */
/* Show content when the item is active */
.accordion-item.active .accordion-content {
  display: block;
}

/* Optional: remove bottom border from header when active if content has its own styling */
.accordion-item.active .accordion-header {
  /* border-bottom: 1px solid var(--color-light); */
  margin: 0;
}

/* ==========================================================================
   Icon Visibility Control (NEW) ✨
   ========================================================================== */

/* By default, hide the minus icon and show the plus icon */
.accordion-item .bi-dash-circle {
  display: none;
}

.accordion-item .bi-plus-circle {
  display: block;
}

/* When the item is active, show the minus icon and hide the plus one */
.accordion-item.active .bi-dash-circle {
  display: block;
}

.accordion-item.active .bi-plus-circle {
  display: none;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media (max-width: 1158px) {
  .faq-section {
    padding: var(--container-py) var(--container-px);
  }
}

@media (max-width: 1024px) {
  .faq-section .faq-header {
    max-width: 600px;
    text-align: left;
  }
}

@media (max-width: 768px) {

  .accordion-content {
    padding: 0 var(--space-md) var(--space-md) var(--space-md);
  }
}

@media (max-width: 586px) {
  .accordion-header {
		font-size: var(--text-base);
		gap: 10px;
  }

  .accordion-content {
    padding: 0 var(--space-md) var(--space-md) var(--space-md);
  }
}