/* checkout.css — overrides para los componentes de checkout (combobox, OTP, etc.)
 * que se montan vía JS y por tanto no pueden estilizarse directamente desde
 * las clases de Tailwind. Mantiene coherencia con `text-hielo` /
 * `placeholder:text-niebla` aplicados al resto de los inputs.
 */

/* Combobox input (accessible-autocomplete) — color y fondo consistentes con
 * el resto del formulario sobre basalto. */
.autocomplete__input {
  background-color: #0B0E11;
  border: 2px solid rgba(232, 238, 242, 0.15);
  color: #E8EEF2;
  border-radius: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  height: auto;
  padding: 10px 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
  -webkit-appearance: none;
}

.autocomplete__input::placeholder {
  color: rgba(139, 152, 165, 0.7);
}

.autocomplete__input:hover:not(:focus):not(:disabled) {
  border-color: rgba(232, 238, 242, 0.30);
}

.autocomplete__input:focus,
.autocomplete__input--focused {
  border-color: #E4A04A;
  outline: none;
  box-shadow: 0 0 0 1px #E4A04A;
  background-color: #0B0E11;
}

.autocomplete__hint,
.autocomplete__option,
.autocomplete__option--focused,
.autocomplete__option--no-results,
.autocomplete__option--hint {
  background-color: #1A2229;
  color: #E8EEF2;
  border-color: rgba(232, 238, 242, 0.08);
}

.autocomplete__option--focused {
  background-color: rgba(228, 160, 74, 0.15);
  color: #E8EEF2;
  border-color: rgba(228, 160, 74, 0.3);
}

.autocomplete__menu {
  background-color: #1A2229;
  border: 1px solid rgba(232, 238, 242, 0.15);
  border-radius: 0;
}

/* OTP input — código de 6 dígitos */
#otp-input {
  background-color: #0B0E11;
  color: #E8EEF2;
  caret-color: #E4A04A;
}

/* Honeypot */
input[name="website"] { display: none !important; }