/* Clarke's Care - contact form states
 *
 * The form engine's script adds the sf-* pieces below to the contact form: the
 * message under a field that needs fixing, the banner shown when a message
 * could not be sent, and the thank-you panel. The engine's own stylesheet
 * (/sentryform/assets/css/sentryform-core.css) gives them generic colors and
 * Verdana. These rules bring each one to this site's Design System
 * (DESIGN-SYSTEM.md, section 7). Existing colors and type only.
 *
 * Load order on contact.html: css/styles.css, sentryform-core.css, this file.
 */

.sentryform.contact-form--live {
  --sf-brand: #54356f;                 /* --purple */
  --sf-error: #8b4e67;                 /* --accent: the palette has no red */
}

/* A field that needs fixing, and the words under it */
.sentryform .sf-field-invalid { border-color: var(--accent) !important; }
.sentryform .contact-form :is(input, textarea, select).sf-field-invalid:focus {
  border-color: var(--purple) !important;
  outline: 3px solid var(--purple);
  outline-offset: 1px;
  box-shadow: none;
}
.sentryform .sf-field-error {
  color: var(--accent);
  font-size: .77rem;
  font-weight: 600;
  line-height: 1.7;
  margin-top: 8px;
}

/* The message could not be sent */
.sentryform .sf-error-banner {
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  background: var(--accent-soft);
  color: var(--ink);
  padding: 15px 20px;
  margin: 0 0 20px;
  font-size: .9rem;
  line-height: 1.6;
}
.sentryform .sf-error-icon { color: var(--accent); }

/* The thank-you panel */
.sentryform .sf-success-container {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-tint);
  padding: 22px;
}
.sentryform .sf-success-title {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--purple-dark);
}
.sentryform .sf-success-message,
.sentryform .sf-success-steps li {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: .91rem;
  color: var(--muted);
}
.sentryform .sf-success-details strong {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: .91rem;
  color: var(--purple-dark);
}
/* No "Send another message" link under the thank-you panel (Rob, 10-12-2026): the panel is
   the end of the visit. The engine's script draws the link, so it is removed here, at the
   site's own layer, and the engine file stays as the product ships it. */
.contact-form--no-send-another .sf-success-again { display: none !important; }