/*!
 * Duty Calculator BD — Contact form fields
 * The contact page now uses the shared static-page layout (about.css),
 * so this file only styles the form that lives inside `.static-content`.
 * Uses base.css tokens; theme- and glass-aware via about.css surfaces.
 */

/* Intro spacing inside the content block. */
.contact-form-intro {
  font-size: .95rem;
  color: var(--bd-text-muted);
  line-height: 1.7;
  margin: 0 0 var(--space-4);
  max-width: 72ch;
}

/* ── Form groups ──────────────────────────────────────────────────── */
.cf-form { margin: 0; }
.cf-group { margin-bottom: var(--space-4); }
.cf-group:last-of-type { margin-bottom: var(--space-3); }

.cf-label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--bd-text-muted);
  margin-bottom: .4rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cf-label .req { color: var(--bd-error); margin-left: .15rem; }

.cf-input, .cf-select, .cf-textarea {
  width: 100%;
  background: var(--bd-bg);
  border: 1.5px solid var(--bd-border);
  border-radius: var(--r-lg);
  padding: .6rem .85rem;
  font-size: .9rem;
  color: var(--bd-text);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  font-family: inherit;
  min-height: 46px;
}
.cf-input::placeholder, .cf-textarea::placeholder { color: var(--bd-text-faint); }
.cf-input:hover, .cf-select:hover, .cf-textarea:hover { border-color: var(--bd-primary-mid); }
.cf-input:focus, .cf-select:focus, .cf-textarea:focus {
  border-color: var(--bd-primary);
  background: var(--bd-surface);
  box-shadow: var(--ring-focus);
}
.cf-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.cf-input.is-invalid, .cf-textarea.is-invalid {
  border-color: var(--bd-error);
  box-shadow: 0 0 0 3px rgba(190, 24, 93, .12);
}

.cf-hint {
  font-size: var(--fs-small);
  color: var(--bd-text-faint);
  margin-top: .4rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.cf-hint.error-text { color: var(--bd-error); justify-content: flex-start; }

/* ── Submit — gradient CTA matching the calculator button ─────────── */
.cf-submit {
  width: 100%;
  min-height: var(--tap-h);
  padding: .7rem 1.2rem;
  background: linear-gradient(180deg, var(--bd-primary) 0%, var(--bd-primary-active) 100%);
  color: #fff;
  border: 1.5px solid var(--bd-primary);
  border-radius: var(--r-lg);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-fast);
  box-shadow: 0 2px 10px -2px rgba(1, 105, 111, .4);
  margin-top: var(--space-2);
}
.cf-submit:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, var(--bd-primary-hover) 0%, var(--bd-primary) 100%);
  box-shadow: 0 6px 18px -3px rgba(1, 105, 111, .45);
}
.cf-submit:active { transform: translateY(0); }
.cf-submit:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.cf-submit:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }

/* ── Feedback banners ─────────────────────────────────────────────── */
.cf-feedback {
  padding: .85rem 1.05rem;
  border-radius: var(--r-lg);
  font-size: var(--fs-body);
  font-weight: 600;
  margin-bottom: var(--space-4);
  display: none;
  align-items: center;
  gap: .55rem;
  border: 1px solid transparent;
}
.cf-feedback.success {
  background: var(--bd-accent-light);
  color: var(--bd-accent);
  border-color: rgba(45, 122, 58, .25);
  display: flex;
}
.cf-feedback.error {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
  display: flex;
}
[data-theme="dark"] .cf-feedback.success { background: #1a3020; color: #6daa45; border-color: #3a5a2a; }
[data-theme="dark"] .cf-feedback.error   { background: #3b1a2a; color: #f87171; border-color: #831843; }