/* WP SF Trial Form — Frontend Styles
   Layout only: inputs, labels and the submit button are left to the theme,
   so the form looks like every other form on the site (e.g. Contact Form 7).
   All selectors are prefixed with .sf- to avoid conflicts.

   Sizes use em, not rem: many themes set html { font-size: 62.5% }, which
   would shrink every rem-based value to ~10px units. */

.sf-trial-form-wrap {
  container-type: inline-size;
}

.sf-trial-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 2em 30px;
}

/* Two columns like the site's contact form, once there is room for them. */
@container (min-width: 36em) {
  .sf-trial-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sf-field--textarea,
.sf-field--checkbox,
.sf-form-actions,
.sf-form-message {
  grid-column: 1 / -1;
}

/* ── Field wrapper ─────────────────────────────────────────────────────── */
.sf-field-wrap {
  display: flex;
  flex-direction: column;
}

.sf-required {
  color: #dc3232;
  margin-left: 2px;
}

/* Honeypot — kept off-screen rather than display:none, which some bots skip. */
.sf-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Inputs ────────────────────────────────────────────────────────────── */
.sf-field-input {
  width: 100%;
  box-sizing: border-box;
}

/* ── Checkbox ──────────────────────────────────────────────────────────── */
.sf-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.sf-checkbox-wrap .sf-field-input {
  width: auto;
  margin: 0;
}

.sf-checkbox-label {
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}

/* ── Validation errors ─────────────────────────────────────────────────── */
/* Same as Contact Form 7's .wpcf7-not-valid-tip. */
.sf-field-error {
  color: #dc3232;
  font-weight: normal;
}

/* ── Submit button ─────────────────────────────────────────────────────── */
.sf-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75em;
  margin-top: -1em;
}

.sf-submit-btn:disabled {
  cursor: not-allowed;
}

/* ── Spinner ───────────────────────────────────────────────────────────── */
/* Same as Contact Form 7's .wpcf7-spinner: a dark disc with an orbiting dot. */
.sf-submit-spinner[hidden] {
  display: none;
}

.sf-submit-spinner {
  display: inline-block;
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  background-color: #23282d;
  border-radius: 100%;
  opacity: 0.75;
}

.sf-submit-spinner::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  background-color: #fbfbfc;
  border-radius: 100%;
  transform-origin: 8px 8px;
  animation: sf-spin 1s linear infinite;
}

@keyframes sf-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes sf-blink {
  from { opacity: 0; }
  50%  { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Form-level messages ───────────────────────────────────────────────── */
/* Same as Contact Form 7's .wpcf7-response-output and its state colours.
   The grid gap stands in for its 2em top margin. */
.sf-form-message {
  margin: 0 0.5em 1em;
  padding: 0.2em 1em;
  border: 2px solid #00a0d2;
}

.sf-form-message--success {
  border-color: #46b450;
}

.sf-form-message--invalid {
  border-color: #ffb900;
}

.sf-form-message--failed {
  border-color: #dc3232;
}

/* ── Admin notice inside editor ────────────────────────────────────────── */
.sf-trial-notice {
  background: #fff8e1;
  border-left: 4px solid #f6c026;
  padding: 0.75em 1em;
  margin: 1em 0;
}

@media (prefers-reduced-motion: reduce) {
  .sf-submit-spinner::before { animation: sf-blink 2s linear infinite; }
}