/* =====================================================
   SEJA UM PARCEIRO — Caixa Kennel
   Arquivo: /assets/css/seja-parceiro.css
   Escopo fechado: .rev-apply-*
   (não interfere no restante do site)
   ===================================================== */

:root{
  --rev-muted: rgba(0,0,0,.70);
  --rev-border: rgba(0,0,0,.12);
  --rev-field-bg: rgba(0,0,0,.02);
  --rev-field-bg-focus: rgba(0,0,0,.01);
  --rev-field-border: rgba(0,0,0,.22);
  --rev-field-border-hover: rgba(0,0,0,.35);
}

/* Força pesos normais nas páginas deste módulo (evita aparência "tudo em negrito") */
.rev-apply-page{
  font-family: var(--font-body);
  font-weight: 400;
}
.rev-apply-page p,
.rev-apply-page li,
.rev-apply-page input,
.rev-apply-page textarea{
  font-weight: 400;
}

.rev-apply-wrap{
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, var(--spacing-xl)) var(--spacing-md) var(--spacing-2xl);
}

.rev-apply-hero{
  background: #000;
  color: #fff;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.rev-apply-hero h1{
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.5;
  font-size: clamp(1.8rem, 5.2vw, 3rem);
  margin: 0 0 10px;
}

.rev-apply-impact{
  font-family: var(--font-impact);
  letter-spacing: 4px;
  word-spacing: -9px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.rev-apply-hero p{
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.75;
  max-width: 70ch;
}

@media (max-width: 768px){
  .rev-apply-impact{
    display:block;
    margin-top:6px;
  }
}

.rev-apply-card{
  margin-top: 14px;
  background: #fff;
  border: 1px solid var(--rev-border);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  padding: clamp(18px, 3vw, 28px);
}

.rev-apply-form{ margin-top: 6px; }

.rev-apply-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 860px){
  .rev-apply-grid{ grid-template-columns: 1fr; }
}

.rev-field{ display:flex; flex-direction:column; gap: 8px; }
.rev-field-full{ grid-column: 1 / -1; }

.rev-field label{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(0,0,0,.86);
}

.rev-field input,
.rev-field textarea,
.rev-address-grid input{
  width: 100%;
  border: 1px solid var(--rev-field-border);
  background: var(--rev-field-bg);
  color: #000;
  padding: 14px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  line-height: 1.2;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.rev-field input::placeholder,
.rev-field textarea::placeholder{
  color: rgba(0,0,0,.48);
}

.rev-field input:hover,
.rev-field textarea:hover{
  border-color: var(--rev-field-border-hover);
}

.rev-field textarea{ resize: vertical; min-height: 92px; }

.rev-field input:focus,
.rev-field textarea:focus{
  border-color: var(--color-primary);
  background: var(--rev-field-bg-focus);
  box-shadow: 0 0 0 3px rgba(196,0,0,.14);
}

/* estado de erro (nativo) — sem JS */
.rev-field input:invalid,
.rev-field textarea:invalid{
  box-shadow: none;
}

.rev-field input:focus:invalid,
.rev-field textarea:focus:invalid{
  border-color: rgba(239,68,68,.9);
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

.rev-field small{
  color: rgba(0,0,0,.62);
  line-height: 1.4;
  font-size: .85rem;
}

.rev-check{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
}

.rev-check input{ margin-top: 2px; }
.rev-check span{ color: rgba(0,0,0,.86); line-height: 1.55; }

.rev-apply-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.rev-apply-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid rgba(0,0,0,.16);
  background: #fff;
  color: #000;
  text-decoration: none;
  font-weight: 800;
  font-size: .98rem;
  min-height: 48px;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.rev-apply-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,.75);
  outline-offset: 3px;
}

.rev-apply-btn:hover{
  transform: translateY(-2px);
  border-color: #000;
}

.rev-apply-btn.is-primary{
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.rev-apply-btn.is-primary:hover{
  background:#25D366;
  border:none;
  transform: translateY(-2px);
  filter: brightness(.98);
}

@media (max-width: 520px){
  .rev-apply-actions{ flex-direction: column; }
  .rev-apply-btn{ width: 100%; }
}

.rev-apply-note{
  margin-top: 14px;
  color: rgba(0,0,0,.66);
  font-size: 12px;
  line-height: 1.6;
}

.rev-apply-note a{
  color: var(--color-primary);
  font-weight: 800;
  text-decoration: none;
}

.rev-apply-note a:hover{ text-decoration: underline; text-underline-offset: 4px; }

/* garantia do hidden (caso use em algum bloco) */
.rev-apply-page [hidden]{ display:none !important; }


/* ================================
   Endereço (layout profissional)
================================ */
.rev-address-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.rev-address-grid > *{ min-width:0; }

.rev-address-grid input[name="cep"]{ grid-column: span 4; }
.rev-address-grid input[name="logradouro"]{ grid-column: span 8; }
.rev-address-grid input[name="numero"]{ grid-column: span 4; }
.rev-address-grid input[name="complemento"]{ grid-column: span 8; }
.rev-address-grid input[name="bairro"]{ grid-column: span 6; }
.rev-address-grid input[name="cidade"]{ grid-column: span 4; }
.rev-address-grid input[name="estado"]{ grid-column: span 2; }

@media (max-width: 860px){
  .rev-address-grid{ grid-template-columns: 1fr 1fr; }
  /* IMPORTANTE:
     Os campos tinham grid-column: span N com seletor mais específico (input[name="..."]).
     Em telas menores isso criava colunas implícitas e “quadradinhos” vazios.
     Aqui zeramos as spans com mesma especificidade.
  */
  .rev-address-grid input[name="cep"],
  .rev-address-grid input[name="logradouro"],
  .rev-address-grid input[name="numero"],
  .rev-address-grid input[name="complemento"],
  .rev-address-grid input[name="bairro"],
  .rev-address-grid input[name="cidade"],
  .rev-address-grid input[name="estado"]{ grid-column: auto; }

  .rev-address-grid input[name="logradouro"],
  .rev-address-grid input[name="complemento"]{ grid-column: 1 / -1; }
}

@media (max-width: 520px){
  .rev-address-grid{ grid-template-columns: 1fr; }
  /* garante 1 coluna real (sem spans herdadas) */
  .rev-address-grid input[name="cep"],
  .rev-address-grid input[name="logradouro"],
  .rev-address-grid input[name="numero"],
  .rev-address-grid input[name="complemento"],
  .rev-address-grid input[name="bairro"],
  .rev-address-grid input[name="cidade"],
  .rev-address-grid input[name="estado"]{ grid-column: 1 / -1; }
}

/* ================================
   Checkboxes (revenda / representante)
================================ */
.rev-check-grid{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 10px;
}

.rev-check-pro{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 12px 12px;
  border: 1px solid var(--rev-border);
  background: rgba(0,0,0,.02);
}

.rev-check-pro input{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.rev-check-pro span{
  color: rgba(0,0,0,.80);
  line-height: 1.5;
}