/* ======== SEÇÃO GERAL ======== */
body {
  background-color: #000;
  color: #fff;
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
}

section#form-revendedora {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 80px 20px; /* margem top e bottom */
}

/* ======== CARD DO FORM ======== */
.card-form-ouroart {
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 50px 60px;
  max-width: 750px;
  width: 100%;
  box-shadow: 0 0 25px rgba(182, 134, 60, 0.15); /* dourado suave */
  color: #2b2a2a;
  font-weight: 500;
}

/* ======== TÍTULOS ======== */
.card-form-ouroart h3 {
  text-align: center;
  font-size: 28px;
  color: #b6863c;
  margin-bottom: 10px;
}

.card-form-ouroart p {
  text-align: center;
  color: #ccc;
  margin-bottom: 35px;
}

/* ======== INPUTS ======== */
.input-group-ouroart {
  position: relative;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrapper i {
  position: absolute;
  left: 15px;
  color: #b6863c;
  font-size: 18px;
  pointer-events: none;
}

.input-wrapper .input-ouroart {
  width: 100%;
  background: #ffffff;
  border: 1px solid #cacaca;
  border-radius: 8px;
  padding: 8px 12px 8px 38px; /* espaço pro ícone */
  color: #fff;
  font-size: 15px;
  transition: 0.3s;
}

.input-group-ouroart i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%); /* centraliza verticalmente */
  color: #b6863c;
  font-size: 18px;
  pointer-events: none; /* não interfere no clique */
}

.input-group-ouroart .input-label {
  display: block;
  margin-bottom: 6px;
  color: #2b2a2a;
  font-weight: 500;
  font-size: 13px;
}

.input-ouroart {
  width: 100%;
  background: #ececec;
  border: 1px solid #bebebe;
  border-radius: 8px;
  padding: 12px 15px 12px 45px; /* espaço pro ícone */
  color: #000000;
  font-size: 14px !important;
  transition: 0.3s;
  line-height: normal;
}

.input-wrapper select.input-ouroart {
  color: #000 !important; /* texto preto */
  -webkit-text-fill-color: #000 !important; /* para Chrome/Safari */
  background-color: #fff; /* fundo branco */
  height: 45px; /* altura igual aos inputs */
  line-height: 45px;
  border-radius: 5px;
  font-size: 15px;
  padding-left: 45px; /* espaço pro ícone */
  padding-right: 35px; /* espaço pra seta dourada */
}

.input-wrapper select.input-ouroart {
  line-height: normal;
  padding-top: 10px;
  padding-bottom: 10px;
}

.input-ouroart:focus {
  border-color: #b6863c;
  outline: none;
}

.msg-info-input{
  text-align: left !important;
  color: rgb(75, 75, 75) !important;
  font-size: 11px;
  margin-bottom: 0 !important;
}

/* Estado válido (campo preenchido corretamente) */
.input-ouroart.valid {
  border-color: #00461d; /* verde */
}

/* Estado inválido (campo deixado vazio após interação) */
.input-ouroart.invalid {
  border-color: #c90d1c; /* vermelho */
}

/* Cor padrão (antes de selecionar a data) */
input[type="date"] {
  color: #818181;
  -webkit-text-fill-color: #818181;
}

/* Quando o usuário escolhe uma data */
input[type="date"]:valid {
  color: #000;
  -webkit-text-fill-color: #000;
}

/* Corrige cor do texto quando o valor é inserido automaticamente (ex: via JS ou autocomplete) */
input,
input:-webkit-autofill {
  -webkit-text-fill-color: #5c5c5c !important; /* texto preto */
  color: #5c5c5c !important; /* fallback */
  transition: background-color 5000s ease-in-out 0s; /* evita fundo amarelo no autofill */
}

/* ======== BOTÕES DE GÊNERO ======== */
.gender-buttons {
  display: flex;
  gap: 10px;
}

/* Esconde completamente os radios padrão */
.gender-buttons input[type="radio"] {
  display: none;
}

.gender-btn {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  border: 2px solid #b6863c;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
  background-color: #ffffff;
  color: #b6863c;
  font-weight: 500;
  user-select: none;
}

.gender-btn:hover {
  border-color: #b6863c;
}

.gender-buttons input[type="radio"]:checked + .gender-btn {
  background-color: #b6863c;
  border-color: #b6863c;
  color: #fff;
  font-weight: 600;
}

/* ======== ERROS ======== */
.error-message {
  display: none;
  color: #c90d1c;
  font-size: 13px;
  margin-top: 6px;
}

.error-message.visible {
  display: block;
  color: #c90d1c;
  font-size: 13px;
  margin-top: 6px;
  animation: fadeIn 0.3s ease;
}

/* ======== BOTÕES ======== */
.btn-ouroart {
  background-color: #b6863c;
  border: none;
  border-radius: 10px;
  color: #000;
  font-weight: 600;
  padding: 12px 35px;
  transition: 0.3s ease;
}

.btn-ouroart:hover {
  background-color: #d4a24f;
  transform: scale(1.02);
}

/* ======== INDICADOR DE ETAPA ======== */
.step-indicator {
  text-align: center;
  color: #b6863c;
  font-weight: 600;
  margin-bottom: 20px;
  font-size: 16px;
}

#prevBtn {
  background: transparent;
  color: #b6863c;
  border: 2px solid #b6863c;
}

#prevBtn.visible {
  display: inline-block; /* aparece nas próximas etapas */
}

#nextBtn {
  background: #b6863c;
  color: #ffffff;
  font-weight: 600;
}

.steps-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
}

/* ======== ANIMAÇÃO DE ERRO ======== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.special-offer {
    background: linear-gradient(135deg, #ffeecc 0%, #fff9e6 100%);
    box-shadow: 0 0 8px rgba(182, 134, 60, 0.18);
    border-left: 4px solid #b6863c;
    padding: 10px;
    border-radius: 6px;
    margin: 25px 0 20px;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}