/* ============================================================
   components/form-state.css — AJAX form result states + .hidden
   (redesign · extracted P5 from home.css so every page reuses it)
   ------------------------------------------------------------
   The branded inline success / error panels toggled by the public-form
   submitters (contact_form_a.js, mix_master_intake.js, marketing signup),
   plus the generic .hidden show/hide used by those + carousel JS
   contracts. Lives in the component layer (loaded globally before page
   CSS) so the home page (P4) and the four service pages (P5) all get it
   with no per-page duplication. Token-only.
   ============================================================ */

/* Generic show/hide used by the AJAX form + carousel + booking JS contracts. */
.hidden {
  display: none !important;
}

/* ---- success / error states (toggled via .hidden by the form JS) ---- */
.form-state {
  width: 100%;
  max-width: 44rem;
  margin: var(--space-6) auto 0;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.form-state__icon {
  display: inline-flex;
}
.form-state__icon .dd-icon {
  width: 2.2em;
  height: 2.2em;
}
.form-state h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text);
}
.form-state p {
  color: var(--text-muted);
  line-height: var(--lh-body);
}

.form-success {
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
}
.form-success .form-state__icon,
.form-success h3 {
  color: var(--success);
}

.form-error {
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent);
}
.form-error .form-state__icon {
  color: var(--danger);
}

.error-contacts {
  display: flex;
  gap: var(--space-5);
  justify-content: center;
  margin-top: var(--space-3);
}
.error-contacts a {
  color: var(--link);
  font-weight: 600;
}
.error-contacts a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .form-state {
    padding: var(--space-7);
  }
}

@media (max-width: 480px) {
  .error-contacts {
    flex-direction: column;
    gap: var(--space-2);
  }
}