/*----------------------------------------------------------
  FixGarage - contact page (contato.html)
  Page layout and palette come from legal.css (loaded before this file).
----------------------------------------------------------*/

:root {
   --ct-error: #ff8a8a;
}

.contact-required {
   color: var(--lg-accent);
}

.legal-doc .contact-required-note {
   font-size: 0.9rem;
   margin-bottom: 28px;
}

.contact-form {
   display: grid;
   gap: 20px;
}

.contact-row {
   display: grid;
   gap: 20px;
}

.contact-form label {
   display: block;
   margin-bottom: 8px;
   color: var(--lg-text);
   font-weight: 500;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
   width: 100%;
   padding: 12px 16px;
   font: inherit;
   color: var(--lg-text);
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid var(--lg-border);
   border-radius: 10px;
}

.contact-form input::placeholder {
   color: rgba(255, 255, 255, 0.4);
}

/* native dropdown list renders on its own surface: keep options readable */
.contact-form option {
   color: var(--lg-text);
   background: var(--lg-bg-1);
}

.contact-form textarea {
   resize: vertical;
}

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
   outline: 2px solid var(--lg-accent);
   outline-offset: 2px;
}

/* only after the user interacted with the field, not on page load */
.contact-form :user-invalid {
   border-color: var(--ct-error);
}

.legal-doc .contact-privacy {
   font-size: 0.9rem;
   margin: 0;
}

.contact-form button {
   border: 0;
}

.contact-form button:disabled {
   opacity: 0.6;
   cursor: wait;
}

.legal-doc .contact-status {
   margin: 0;
}

.legal-doc .contact-status.is-success {
   color: var(--lg-accent);
}

.legal-doc .contact-status.is-error {
   color: var(--ct-error);
}

@media (min-width: 768px) {
   .contact-row {
      grid-template-columns: 1fr 1fr;
   }
}