/* switcher container */
.theme-switcher {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px; /* remove extra padding */
  border-radius: 10px;
  backdrop-filter: blur(10px);
  transition: all 0.18s ease;
  user-select: none;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

/* adjust button to fit nicely */
.custom-select__button {
  display: flex;
  align-items: center; /* vertical center */
  justify-content: center;
  gap: 8px;
  min-width: 96px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  line-height: 1; /* remove extra line spacing */
  margin: 0; /* remove extra margin */
  height: auto; /* auto height to fit content exactly */
  cursor: pointer;
  transition: background 0.2s, border 0.2s;
}

/* small chevron */
.custom-select__button .chev {
  opacity: 0.9;
  transform: translateY(1px);
}

/* dropdown list (hidden by default) */
.custom-select__list {
  margin: 6px 0 0 0;
  padding: 6px;
  list-style: none;
  border-radius: 8px;
  max-height: 220px;
  overflow: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  display: none;
  min-width: 160px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
}

/* open state */
.custom-select__list.open { display: block; }

/* options */
.custom-select__option {
  padding: 10px 12px;
  border-radius: 6px;
  margin: 4px 0;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  transition: all 0.2s ease;
  color: var(--text-primary);
}

/* hover / highlight */
.custom-select__option.highlight,
.custom-select__option:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.05);
}

/* selected marker */
.custom-select__option.selected {
  font-weight: 600;
  background: linear-gradient(
    90deg,
    rgba(var(--main-color-rgb, 0,43,130), 0.2) 0%, 
    rgba(var(--accent-color-rgb, 45,110,160), 0.2) 100%
  );
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
  border-radius: 6px; /* match other options */
}

/* scrollbar inside list */
.custom-select__list::-webkit-scrollbar { width: 8px; }
.custom-select__list::-webkit-scrollbar-thumb { border-radius: 10px; background: var(--main-color); }

/* small responsive tweak */
@media (max-width:480px){
  .custom-select__list { right: 10px; left: 10px; min-width: auto; }
  .theme-switcher { right: 12px; top: 12px; }
}