/*
 * form.css — Seção de contato, card do formulário,
 *            inputs, validação e feedbacks de envio
 */

/* ═══════════════════════════════════════════════════════
   SEÇÃO DE CONTATO
═══════════════════════════════════════════════════════ */
#contato {
  padding:    112px 0;
  background: var(--bg-main);
}

.contato-grid {
  display:               grid;
  grid-template-columns: 1fr 1.45fr;
  gap:                   72px;
  align-items:           start;
}

/* ── Coluna de informações ──────────────────────────── */
.contato-info .section-lead { margin-bottom: 36px; }

/* Itens de detalhe (e-mail, telefone, etc.) */
.contact-item {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       15px 18px;
  background:    var(--bg-white);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  border:        1px solid var(--gray-200);
  transition:    border-color var(--t), transform var(--t);
}
.contact-item:hover {
  border-color: var(--amber);
  transform:    translateX(3px);
}

.contact-icon {
  width:           38px;
  height:          38px;
  border-radius:   10px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.contact-icon.amber { background: var(--amber-pale); color: var(--amber-dark); }
.contact-icon.green { background: var(--green-pale);  color: var(--green-dark); }

.contact-text span {
  display:        block;
  font-size:      11px;
  font-weight:    600;
  color:          var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom:  2px;
}
.contact-text p {
  font-size:   15px;
  font-weight: 600;
  color:       var(--charcoal);
}

/* ── Card do formulário ─────────────────────────────── */
.form-card {
  background:    var(--bg-white);
  border-radius: var(--r-lg);
  padding:       44px;
  box-shadow:    var(--sh-lg);
  border:        1px solid var(--gray-200);
}

.form-title {
  font-family:   var(--f-display);
  font-size:     20px;
  font-weight:   700;
  color:         var(--charcoal);
  margin-bottom: 6px;
}

.form-subtitle {
  font-size:     14px;
  color:         var(--gray-400);
  margin-bottom: 28px;
}
.form-subtitle .req { color: var(--amber-dark); }

/* ── Grid de campos ─────────────────────────────────── */
.form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}

.form-group { margin-bottom: 16px; }

.form-group label {
  display:        block;
  font-family:    var(--f-display);
  font-size:      11px;
  font-weight:    700;
  color:          var(--charcoal);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom:  7px;
}
.form-group label .req { color: var(--amber-dark); }

/* ── Inputs e textarea ──────────────────────────────── */
.form-control {
  width:          100%;
  padding:        12px 15px;
  background:     var(--bg-main);
  border:         1.5px solid var(--gray-300);
  border-radius:  var(--r-sm);
  font-family:    var(--f-body);
  font-size:      15px;
  color:          var(--text-main);
  outline:        none;
  appearance:     none;
  transition:
    border-color var(--t),
    background   var(--t),
    box-shadow   var(--t);
}
.form-control:focus {
  border-color: var(--amber);
  background:   var(--bg-white);
  box-shadow:   0 0 0 3px rgba(245, 185, 66, .12);
}
.form-control.error { border-color: #e53e3e; }

textarea.form-control {
  resize:      vertical;
  min-height:  118px;
  line-height: 1.62;
}

/* ── Seleção PF / PJ ────────────────────────────────── */
.radio-group {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
}

.radio-option { position: relative; }

/* Esconde o input nativo mas mantém acessibilidade */
.radio-option input[type="radio"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.radio-label {
  display:       flex;
  align-items:   center;
  gap:           9px;
  padding:       11px 14px;
  background:    var(--bg-main);
  border:        1.5px solid var(--gray-300);
  border-radius: var(--r-sm);
  cursor:        pointer;
  font-family:   var(--f-body);
  font-size:     14px;
  font-weight:   500;
  color:         var(--gray-600);
  user-select:   none;
  transition:
    border-color var(--t),
    background   var(--t),
    color        var(--t);
}
.radio-option input:checked + .radio-label {
  border-color: var(--amber);
  background:   var(--amber-pale);
  color:        var(--amber-dark);
  font-weight:  700;
}

/* Bolinha do radio customizado */
.radio-dot {
  width:      15px;
  height:     15px;
  border:     2px solid var(--gray-300);
  border-radius: 50%;
  flex-shrink:0;
  transition:
    border-color var(--t),
    background   var(--t),
    box-shadow   var(--t);
}
.radio-option input:checked + .radio-label .radio-dot {
  border-color: var(--amber-dark);
  background:   var(--amber-dark);
  box-shadow:   inset 0 0 0 3px #fff;
}

/* Foco via teclado */
.radio-option input:focus-visible + .radio-label {
  outline:        2px solid var(--amber);
  outline-offset: 2px;
}

/* ── Mensagens de erro de campo ─────────────────────── */
.field-error {
  font-size:    12px;
  color:        #e53e3e;
  margin-top:   5px;
  display:      none;
  font-weight:  500;
}
.field-error.visible { display: block; }

/* ── Botão de submit ────────────────────────────────── */
.btn-submit {
  width:           100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             9px;
  background:      var(--charcoal);
  color:           #fff;
  font-family:     var(--f-display);
  font-size:       15px;
  font-weight:     700;
  letter-spacing:  .04em;
  padding:         15px 28px;
  border-radius:   var(--r-sm);
  margin-top:      6px;
  border:          none;
  cursor:          pointer;
  transition:
    background  var(--t),
    color       var(--t),
    transform   var(--t),
    box-shadow  var(--t);
}
.btn-submit:hover {
  background: var(--amber);
  color:      var(--charcoal);
  transform:  translateY(-2px);
  box-shadow: var(--sh-amber);
}
.btn-submit:disabled {
  opacity:    .6;
  cursor:     not-allowed;
  transform:  none !important;
  box-shadow: none !important;
}

/* ── Feedbacks de envio ─────────────────────────────── */
.form-feedback {
  display:       none;
  padding:       18px 22px;
  border-radius: var(--r-md);
  margin-top:    16px;
  align-items:   center;
  gap:           12px;
}
.form-feedback.success {
  display:    flex;
  background: rgba(76, 175, 80, .08);
  border:     1px solid rgba(76, 175, 80, .22);
}
.form-feedback.fail {
  display:    flex;
  background: rgba(239, 68, 68, .07);
  border:     1px solid rgba(239, 68, 68, .22);
}
.form-feedback.success svg { color: var(--success); }
.form-feedback.fail    svg { color: var(--error);   }

.form-feedback p {
  font-size:   14px;
  font-weight: 500;
  line-height: 1.5;
}
.form-feedback.success p { color: #1b5e20; }
.form-feedback.fail    p { color: #7f1d1d; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVO — CONTATO
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .contato-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .form-card { padding: 32px 22px; }
  .form-row  { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .radio-group { grid-template-columns: 1fr; }
}