/* Shared themed listbox for native <select> (home finder, catalog filters, future UI). */

.mv-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

.mv-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}

.mv-select__native[hidden] {
  display: none !important;
}

.mv-select__trigger {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 20px 0 0;
  border: 0;
  text-align: left;
  font-family: var(--mv-font-sans, "DM Sans", Arial, sans-serif);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mv-select-trigger-color, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: transparent;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mv-select-chevron, #fff) 50%),
    linear-gradient(135deg, var(--mv-select-chevron, #fff) 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 5px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.mv-select__trigger:focus-visible {
  outline: 2px solid var(--mv-select-focus-ring, rgba(255, 255, 255, .55));
  outline-offset: 2px;
}

.mv-select__list {
  position: fixed;
  z-index: 1200;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  min-width: 0;
  max-height: none;
  overflow: visible;
  background: var(--mv-select-list-bg, rgba(27, 28, 29, .98));
  border: 1px solid var(--mv-select-list-border, rgba(255, 255, 255, .16));
  box-shadow: var(--mv-select-list-shadow, 0 18px 50px rgba(0, 0, 0, .28));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.mv-select__list[hidden] {
  display: none;
}

.mv-select__option {
  padding: 11px 16px;
  color: var(--mv-select-option-color, #fff);
  font-family: var(--mv-font-sans, "DM Sans", Arial, sans-serif);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
}

.mv-select__option:hover,
.mv-select__option.is-active {
  background: var(--mv-select-option-hover-bg, rgba(255, 255, 255, .1));
}

.mv-select__option[aria-selected="true"] {
  color: var(--mv-select-option-selected-color, #fff);
  background: var(--mv-select-option-selected-bg, rgba(220, 43, 37, .22));
}

.mv-select.is-open {
  z-index: 26;
}

/* Dark (homepage hero finder). */
.mv-select--tone-dark {
  --mv-select-trigger-color: #fff;
  --mv-select-chevron: #fff;
  --mv-select-focus-ring: rgba(255, 255, 255, .55);
  --mv-select-list-bg: rgba(27, 28, 29, .98);
  --mv-select-list-border: rgba(255, 255, 255, .16);
  --mv-select-list-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  --mv-select-option-color: #fff;
  --mv-select-option-hover-bg: rgba(255, 255, 255, .1);
  --mv-select-option-selected-bg: rgba(220, 43, 37, .22);
}

/* Catalog primary row (dark). */
.mv-select--tone-catalog-dark {
  --mv-select-trigger-color: #fff;
  --mv-select-chevron: #fff;
  --mv-select-focus-ring: rgba(255, 255, 255, .55);
  --mv-select-list-bg: rgba(32, 34, 33, .98);
  --mv-select-list-border: rgba(255, 255, 255, .22);
  --mv-select-list-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  --mv-select-option-color: #fff;
  --mv-select-option-hover-bg: rgba(255, 255, 255, .1);
  --mv-select-option-selected-bg: rgba(220, 43, 37, .28);
}

/* Portaled lists carry the tone class directly (not under .mv-select). */
.mv-select__list.mv-select--tone-dark,
.mv-select__list.mv-select--tone-catalog-dark,
.mv-select__list.mv-select--tone-catalog-light {
  color: var(--mv-select-option-color, #fff);
}

/* Catalog advanced row (light). */
.mv-select--tone-catalog-light {
  --mv-select-trigger-color: #1c1e1d;
  --mv-select-chevron: #363634;
  --mv-select-focus-ring: rgba(28, 30, 29, .35);
  --mv-select-list-bg: #fff;
  --mv-select-list-border: #d8d1c6;
  --mv-select-list-shadow: 0 18px 38px rgba(25, 24, 22, .14);
  --mv-select-option-color: #1c1e1d;
  --mv-select-option-hover-bg: rgba(28, 30, 29, .06);
  --mv-select-option-selected-bg: rgba(220, 43, 37, .12);
  --mv-select-option-selected-color: #1c1e1d;
}

@media (prefers-reduced-motion: reduce) {
  .mv-select__option {
    transition: none;
  }
}