details > summary {
  display: list-item;
  cursor: pointer;
  list-style-type: none;
  position: relative;
}

details > summary::after {
  /* content: '▶'; */
  content: '';
  width: 8px;
  height: 8px;
  color: var(--variables_med_gray);
  position: relative;
  margin-right: 8px;
  display: inline-block;
  transition: transform 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' viewBox='0 0 8 7' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.89443 6.23287C4.5259 6.96992 3.4741 6.96992 3.10557 6.23287L0.723607 1.46894C0.391156 0.80404 0.874652 0.0217285 1.61803 0.0217285H6.38197C7.12535 0.0217285 7.60884 0.804041 7.27639 1.46894L4.89443 6.23287Z' fill='%23515151'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

summary[aria-expanded="false"]::after {
  transform: rotate(-90deg);
}

.info-tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  margin-left: 5px;
}

.info-tooltip i {
  color: #6c757d;
  font-size: 16px;
  line-height: 1;
  position: relative;
  top: 1px;
}

.tooltip-content {
  visibility: hidden;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: #333;
  color: white;
  border-radius: 4px;
  font-size: 13px;
  white-space: nowrap;
  z-index: 1000;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  min-width: max-content;
}

.tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.info-tooltip:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
  bottom: 135%;
}