#year-filter-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 1000;
  min-width: 160px;
  max-height: min(360px, 70vh);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 0;
  border: 1px solid var(--color-border-gray);
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  scrollbar-color: var(--color-border-gray) transparent;
  scrollbar-width: thin;
}

#year-filter-dropdown.open {
  display: block;
}

#year-filter-dropdown::-webkit-scrollbar {
  width: 8px;
}

#year-filter-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

#year-filter-dropdown::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--color-border-gray);
}

#year-filter-dropdown [data-year-option] {
  display: block;
  padding: 10px 20px;
  color: var(--color-charcoal);
  cursor: pointer;
  font-family: "Ubuntu Mono", monospace;
  font-size: 16px;
  letter-spacing: 0.8px;
  transition: background 0.15s;
}

#year-filter-dropdown [data-year-option]:hover,
#year-filter-dropdown [data-year-option].active {
  color: var(--color-dark-green);
  background: var(--color-light-gray);
}

[data-year-trigger][aria-expanded="true"] .year-filter-arrow,
.year-filter-arrow.rotated {
  transform: rotate(180deg);
}

.year-filter-arrow {
  transition: transform 0.2s ease;
}

[data-search-input] {
  outline: none;
}

[data-search-input]:focus {
  border-color: var(--color-dark-green);
}

.bono-toggle:hover svg line,
.offer-toggle:hover svg line {
  stroke: var(--color-bright-green);
}

.bono-toggle:hover .bono-count,
.offer-toggle:hover .offer-count {
  color: var(--color-bright-green);
}

.btn-outline:hover span {
  color: var(--color-white);
}