/* ================================
   CONTATOS.CSS - ESTILOS DA PÁGINA DE CONTATO
   Complementa o global.css; contém apenas o que é exclusivo de contato.html.
   ================================ */

/* Cores por canal: só o VALOR recebe a cor; o rótulo permanece neutro
   para preservar a hierarquia rótulo (menor) → valor (principal). */
body[data-page="contato"] .contact-row-value {
  transition: color var(--duration-fast) ease;
}

body[data-page="contato"] .contact-row:nth-child(1) .contact-row-value {
  color: #25d366 !important;
  -webkit-text-fill-color: #25d366 !important;
}

body[data-page="contato"] .contact-row:nth-child(1):hover .contact-row-value {
  color: #1ebe5d !important;
  -webkit-text-fill-color: #1ebe5d !important;
}

body[data-page="contato"] .contact-row:nth-child(2) .contact-row-value {
  color: #00b0ff !important;
  -webkit-text-fill-color: #00b0ff !important;
}

body[data-page="contato"] .contact-row:nth-child(2):hover .contact-row-value {
  color: #39c2ff !important;
  -webkit-text-fill-color: #39c2ff !important;
}

body[data-page="contato"] .contact-row:nth-child(3) .contact-row-value {
  color: #de7f56 !important;
  -webkit-text-fill-color: #de7f56 !important;
}

body[data-page="contato"] .contact-row:nth-child(3):hover .contact-row-value {
  color: #f29a6e !important;
  -webkit-text-fill-color: #f29a6e !important;
}

/* Labels em branco apenas para página de contato */
body[data-page="contato"] .label {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Feedback visual de campo inválido (ex.: telefone com dígitos insuficientes),
   aplicado por script.js no blur/input do campo */
body[data-page="contato"] .input--invalid {
  border-color: var(--error) !important;
  box-shadow: 0 0 0 2px rgba(255, 61, 0, 0.18);
}

/* Textarea com redimensionamento controlado */
body[data-page="contato"] textarea {
  min-height: 140px;
  max-height: 100%;
  height: 140px;
  resize: none;
  overflow-y: auto;
  display: block;
}

/* Wrapper para controlar o tamanho máximo do textarea */
.field.textarea-wrapper {
  max-height: 400px;
  display: flex;
  flex-direction: column;
}

.field.textarea-wrapper textarea {
  flex: 1;
  min-height: 140px;
}

/* Agrupamento visual do formulário: o bloco de segmento/consentimento
   se separa dos campos de identificação, criando ritmo interno. */
#contatoForm .field:has(.contact-chips) {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
}

#contatoForm .contact-submit {
  margin-top: 1.5rem;
}

/* Botões: mantém a identidade global (.btn/.btn-primary) e adiciona
   apenas alvo de toque e estados de envio. */
.btn {
  min-height: 48px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.btn-loading {
  display: none;
}

.btn.loading .btn-text {
  display: none;
}

.btn.loading .btn-loading {
  display: block;
}

.btn.full {
  width: 100%;
}

/* Responsividade do formulário */
@media (max-width: 560px) {
  .input,
  textarea {
    padding: 12px;
  }

  .btn {
    padding: 14px;
  }
}