/* Custom select: substitui o popup nativo do <select> por um dropdown
   completamente estilizado. Mantém o <select> escondido pra preservar
   form value, eventos 'change' e acessibilidade básica.

   Uso: aplica class="haku-select" no <select>. O JS auto-enhanca em
   DOMContentLoaded. Após enhance, o <select> ganha aria-hidden e é
   coberto por um wrapper <div class="hs-wrap"> com botão + popup.

   Variáveis CSS esperadas (caem em fallback se ausentes):
   --bg-2, --line, --ink, --seal, --bg-3
*/

.hs-wrap {
  position: relative;
  width: 100%;
  font: inherit;
}
.hs-wrap > select {
  /* Native escondido visualmente, mas mantido pra a11y/forms */
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.hs-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: var(--bg-2, #1a1a1f);
  border: 1px solid var(--line, #2a2a32);
  border-radius: 6px;
  color: var(--ink, #e7e6e2);
  padding: 10px 36px 10px 12px;
  font: inherit;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.hs-btn:hover { border-color: #3a3a44; }
.hs-btn:focus-visible {
  outline: none;
  border-color: var(--seal, #e94560);
  box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.18);
}
.hs-btn[aria-expanded="true"] {
  border-color: var(--seal, #e94560);
  box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.12);
}
.hs-label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hs-chev {
  position: absolute;
  right: 12px; top: 50%;
  width: 12px; height: 8px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.55;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.hs-btn[aria-expanded="true"] .hs-chev {
  transform: translateY(-50%) rotate(180deg);
  opacity: 0.9;
}

/* Popup */
.hs-pop {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  z-index: 50;
  background: var(--bg-2, #1a1a1f);
  border: 1px solid var(--line, #2a2a32);
  border-radius: 8px;
  padding: 4px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s linear 0.12s;
}
.hs-wrap[data-open] .hs-pop {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
/* Quando o popup precisa abrir pra cima (perto da base da tela) */
.hs-wrap[data-flip] .hs-pop {
  top: auto; bottom: calc(100% + 6px);
}

.hs-opt {
  display: flex; align-items: center;
  padding: 9px 12px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--ink, #e7e6e2);
  font: inherit;
  user-select: none;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.hs-opt:hover, .hs-opt[data-active] { background: var(--bg-3, #25252e); }
.hs-opt[aria-selected="true"] {
  color: var(--seal, #e94560);
  font-weight: 600;
}
.hs-opt[aria-selected="true"]::after {
  content: '';
  width: 6px; height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--seal, #e94560);
}

/* Scrollbar discreta */
.hs-pop::-webkit-scrollbar { width: 8px; }
.hs-pop::-webkit-scrollbar-track { background: transparent; }
.hs-pop::-webkit-scrollbar-thumb {
  background: var(--line, #2a2a32);
  border-radius: 4px;
}
.hs-pop::-webkit-scrollbar-thumb:hover { background: #3a3a44; }