/* Contact page. Needs /assets/css/modern-tool-cards.css for the --tc-* tokens.
   Keeps every selector contact.js references: #website, .alert, .alert-danger, .animate-in. */
.ct { --accent: #6366f1; --accent-rgb: 99, 102, 241;}
.ct, .ct *, .ct *::before, .ct *::after { box-sizing: border-box; }

.ct-intro { max-width: 40rem; margin: 0 0 1.5rem; font-size: .95rem; line-height: 1.65; color: var(--tc-muted); }

.ct-panel {
  max-width: 42rem;
  padding: 1.5rem; background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 20px;
  box-shadow: var(--tc-shadow); margin:0 auto;
}

/* Honeypot field — invisible to real visitors, left as-is functionally. */
#website { opacity: 0; position: absolute; top: 0; left: 0; height: 0; width: 0; z-index: -1; }

.ct .form-group { margin-bottom: 0; }
.ct label { display: block; margin-bottom: .4rem; font-size: .82rem; font-weight: 600; color: var(--tc-text); }
.ct .form-control,
.ct .form-select {
  width: 100%; height: 2.7rem; padding: 0 .9rem; font: inherit; font-size: .92rem;
  color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px;
}
.ct textarea.form-control { height: auto; padding: .75rem .9rem; resize: vertical; min-height: 8rem; }
.ct .form-control:focus-visible,
.ct .form-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.ct .btn-send {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 2.7rem; padding: 0 1.5rem; font-weight: 700; font-size: .9rem;
  color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 12px;
  cursor: pointer;
}
.ct .btn-send:hover { filter: brightness(1.08); }

/* Status messages, referenced directly by contact.js. */
.alert { padding: .9rem 1.1rem; margin-bottom: 1.1rem; border: 1px solid transparent; border-radius: 12px; font-size: .88rem; }
.alert-danger { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.alert-success { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeInUp .6s ease-out forwards; }