/*
 * Moat front-end styles.
 * Copyright Solvagio. All rights reserved.
 */

/* Honeypot: visually removed but not display:none (bots skip display:none). */
.moat-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.moat-field {
  margin: 1em 0;
}

/* Centre the widget's "Protected by Moat" mark within the form and give it room
   above the submit button. The mark lives in a shadow-DOM box that fills the
   host width and left-aligns its own content, so text-align/justify-content
   can't move it — instead we shrink the host to its content width and centre it
   with auto margins. !important because several form plugins/themes zero the
   margins of child elements with higher-specificity rules. Applies to every
   integration (native, contact form, CF7, WPForms, Elementor). */
.moat {
  display: block !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0.4em auto 0.95em !important;
  padding: 0 !important;
  text-align: center;
}

/* Verify-box theming (Widget → Theme). The Moat widget reads these CSS custom
   properties across its shadow boundary; "light" is the built-in default, so
   only dark / auto set overrides. Kept close to the Solvagio slate palette. */
.moat--theme-dark {
  --moat-surface: #12233d;
  --moat-fg: #ece6d8;
  --moat-fg-muted: #aeb6c6;
  --moat-border: #2a3f60;
}
@media (prefers-color-scheme: dark) {
  .moat--theme-auto {
    --moat-surface: #12233d;
    --moat-fg: #ece6d8;
    --moat-fg-muted: #aeb6c6;
    --moat-border: #2a3f60;
  }
}

.moat-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  margin: 0 0 1em;
}

.moat-form__row label {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  font-weight: 600;
}

.moat-form__row input,
.moat-form__row textarea {
  width: 100%;
  box-sizing: border-box;
}

.moat-form__actions {
  margin: 1em 0 0;
}

.moat-notice {
  padding: 0.75em 1em;
  border-radius: 6px;
  margin: 0 0 1em;
}

.moat-notice--ok {
  background: #e8f5ec;
  color: #14532d;
}

.moat-notice--error {
  background: #fdecec;
  color: #7f1d1d;
}