.accordion-title.icon-position-left{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
}

.accordion-title.icon-position-right{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.accordion-item.card-accordion .accordion-title.icon-position-right{
  margin-left: var(--gapX5);
}

.accordion-title.icon-position-right{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.accordion-container{
  display: flex;
  flex-direction: column;
}

.active .accordion-content{
  overflow: visible;
  box-sizing: border-box;
  padding-bottom: var(--gapX8);
}

.accordion-title{
  padding-top: var(--gapX5);
  padding-bottom: var(--gapX5);
}

.accordion-title-icon {
    flex-shrink: 0; 
    
    transition: transform 0.3s ease-in-out;

    transform: rotate(0deg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.accordion-item.card-accordion .accordion-title.icon-position-left .accordion-title-icon {
    margin-right: var(--gapX5);
    padding: 5px;
    border-radius: 50%;
    font-size: 30px;
    background: var(--white);

}
.accordion-item.card-accordion .accordion-title.icon-position-right .accordion-title-icon {
    margin-right: var(--gapX5);
    padding: 5px;
    border-radius: 50%;
    font-size: 30px;
    background: var(--white);
}

.accordion-item.card-accordion .accordion-title-icon:hover{
  background: var(--primary500) !important;
  color: var(--white);
}

.accordion-item .accordion-title-icon:hover{
  color: var(--accentColor);
}


.accordion-item.active .accordion-title-icon {

    transform: rotate(180deg);
}

.accordion-item.card-accordion.active .accordion-title-icon{
  transform: rotate(45deg);
}

.accordion-item.card-accordion{
  border: 1px solid var(--cardBgColor);
  border-radius: var(--roundedS);
  background: var(--cardBgColor);
}
/* Optional responsive settings inherit upwards; legacy instances keep their spacing. */
.accordion-responsive-spacing { --accordion-pad: var(--accordion-pad-xs, var(--gapX5)); }
.accordion-responsive-spacing > .accordion-item > .accordion-title { padding-top: var(--accordion-pad); padding-bottom: var(--accordion-pad); }
@media (min-width:768px) { .accordion-responsive-spacing { --accordion-pad: var(--accordion-pad-sm, var(--accordion-pad-xs, var(--gapX5))); } }
@media (min-width:992px) { .accordion-responsive-spacing { --accordion-pad: var(--accordion-pad-md, var(--accordion-pad-sm, var(--accordion-pad-xs, var(--gapX5)))); } }
@media (min-width:1200px) { .accordion-responsive-spacing { --accordion-pad: var(--accordion-pad-lg, var(--accordion-pad-md, var(--accordion-pad-sm, var(--accordion-pad-xs, var(--gapX5))))); } }
.accordion-item.underline-accordion { border-top: 1px solid var(--dividerDefault); }
.accordion-item.underline-accordion:last-child { border-bottom: 1px solid var(--dividerDefault); }
.underline-accordion > .accordion-title { gap: var(--gapX6); cursor: pointer; }
.underline-accordion .accordion-title-text { margin: 0; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.underline-accordion.active > .accordion-title { padding-bottom: var(--gapX6); }
.underline-accordion.active > .accordion-content { padding-bottom: calc(var(--accordion-pad, var(--gapX6)) + var(--gapX1)); }
.underline-accordion .accordion-content p { margin: 0; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.underline-accordion > .accordion-title:focus-visible { outline: 2px solid var(--linkDefaultColor, #0d6efd); outline-offset: -2px; }
.underline-accordion > .accordion-content { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
/* The component controller animates measured border-box height and padding together.
   Open panels use natural height; trimmed text may extend above the panel. */
.accordion-motion > .accordion-content {
  box-sizing: border-box;
  max-height: none;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: none;
}
.accordion-motion.active > .accordion-content {
  height: auto;
  overflow: visible;
  visibility: visible;
}
.accordion-motion.accordion-animating > .accordion-content {
  overflow: visible;
  visibility: visible;
  clip-path: inset(-1em 0 0);
}