/* Accordion Container */
.accordion {
  margin: 0;
}

/* Accordion Item */
.accordion-item {
  background-color: #fff;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

/* Hide the native checkbox */
.accordion-item input[type="checkbox"] {
  display: none;
}

/* Accordion Title */
.accordion-title {
  display: block;
  padding: 1rem 1.25rem;
  background-color: #eee;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.25s;
}

/* Hover effect on the title */
.accordion-title:hover {
  background-color: #ddd;
}

/* Accordion Content */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out, padding 0.25s;
  padding: 0 1.25rem;
}

/* Show content when checkbox is checked */
.accordion-item input[type="checkbox"]:checked ~ .accordion-content {
  padding: 1rem 1.25rem;
  max-height: 2000px; /* adjust if needed, or remove for auto-height trick */
}