/* ==========================================================================
   SELECT CUSTOM — substituto acessível do <select>
   Prefixo: csel-
   Tokens usados: --fg --fg-2 --fg-muted --rule-2 --accent --dark-2 --sans --ease
   ========================================================================== */

/* ---- wrapper mínimo ----
   Só para o componente andar sozinho fora de um formulário. Dentro de um
   formulário, use o wrapper de campo do próprio formulário e apague este
   bloco: o widget não depende dele. */
.csel-field{border-bottom:1px solid var(--rule-2);padding:16px 0 12px;transition:border-color .25s}
.csel-field:focus-within{border-color:var(--accent)}
.csel-field label{
  display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);margin-bottom:8px;
}

/* ---- o widget ---- */
.csel{position:relative}

/* Herda fonte e cor do campo: assim ele se parece com um <input> do mesmo
   formulário sem precisar repetir a tipografia. */
.csel-btn{
  width:100%;background:none;border:none;outline:none;
  font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.4;
  color:var(--fg);padding:0;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
/* Placeholder e valor escolhido são o mesmo elemento — muda só a cor. */
.csel-val{color:var(--fg-muted)}
.csel-val.is-set{color:var(--fg)}

.csel-arrow{flex-shrink:0;color:var(--fg-muted);transition:transform .25s}
.csel.is-open .csel-arrow{transform:rotate(180deg)}

.csel-list{
  position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:20;margin:0;
  background:var(--dark-2);border:1px solid var(--rule-2);border-radius:10px;padding:6px;
  max-height:270px;overflow-y:auto;
}
.csel-list[hidden]{display:none}

.csel-opt{
  padding:12px 14px;border-radius:6px;font-size:14px;line-height:1.4;
  color:var(--fg-2);cursor:pointer;outline:none;
}
.csel-opt:hover,
.csel-opt.is-active{background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--fg)}
.csel-opt[aria-selected="true"]{color:var(--accent)}

/* Erro de validação: o campo treme uma vez. Não é decoração — é o único
   retorno visual de "faltou isto" num campo que não tem :invalid nativo. */
@keyframes cselShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-4px)}
  40%{transform:translateX(4px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}
.csel.has-error{animation:cselShake .4s ease}
@media(prefers-reduced-motion:reduce){
  .csel.has-error{animation:none;outline:1px solid var(--accent);outline-offset:6px}
}