/* Structure only. Every colour, font, radius and shadow is a custom property so
 * a skin stylesheet (uploads/, never overwritten by plugin updates) makes two
 * installs look unrelated. Override on `.ssq-form` or `:root`. */
.ssq-form {
  --ssq-font: inherit;
  --ssq-fg: #1f2328;
  --ssq-muted: #6b7280;
  --ssq-bg: #ffffff;
  --ssq-border: #d0d7de;
  --ssq-radius: 8px;
  --ssq-shadow: none;
  --ssq-accent: #1f2328;
  --ssq-accent-fg: #ffffff;
  --ssq-success-bg: #ecfdf3;
  --ssq-success-fg: #067647;
  --ssq-error-bg: #fef3f2;
  --ssq-error-fg: #b42318;
  --ssq-gap: 12px;
  --ssq-max-width: 520px;
  font-family: var(--ssq-font);
  color: var(--ssq-fg);
  background: var(--ssq-bg);
  border: 1px solid var(--ssq-border);
  border-radius: var(--ssq-radius);
  box-shadow: var(--ssq-shadow);
  max-width: var(--ssq-max-width);
  padding: calc(var(--ssq-gap) * 2);
  box-sizing: border-box;
}
.ssq-form *, .ssq-form *::before, .ssq-form *::after { box-sizing: inherit; }
.ssq-form__head { margin-bottom: var(--ssq-gap); }
.ssq-form__title { margin: 0 0 6px; font-size: 1.25em; line-height: 1.3; }
.ssq-form__intro { margin: 0; color: var(--ssq-muted); }
.ssq-form__body { display: flex; flex-direction: column; gap: var(--ssq-gap); }
.ssq-form__label { font-size: 0.9em; font-weight: 600; }
.ssq-form__input, .ssq-form__select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ssq-border);
  border-radius: var(--ssq-radius);
  background: var(--ssq-bg);
  color: var(--ssq-fg);
  font: inherit;
}
.ssq-form__input:focus, .ssq-form__select:focus { outline: 2px solid var(--ssq-accent); outline-offset: 1px; }
.ssq-form__captcha:empty { display: none; }
.ssq-form__captcha { max-width: 100%; overflow: hidden; }
.ssq-form__captcha iframe, .ssq-form__captcha > div { max-width: 100% !important; }
.ssq-form__button {
  padding: 12px 18px;
  border: 0;
  border-radius: var(--ssq-radius);
  background: var(--ssq-accent);
  color: var(--ssq-accent-fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ssq-form__button[disabled] { opacity: 0.6; cursor: default; }
.ssq-form__button--busy .ssq-form__button-label::after { content: "\2026"; }
.ssq-form__privacy { margin: 0; font-size: 0.8em; color: var(--ssq-muted); }
.ssq-form__message { margin-top: var(--ssq-gap); padding: 10px 12px; border-radius: var(--ssq-radius); }
.ssq-form__message--success { background: var(--ssq-success-bg); color: var(--ssq-success-fg); }
.ssq-form__message--info { background: var(--ssq-info-bg, #eef2ff); color: var(--ssq-info-fg, #3730a3); }
.ssq-form--busy .ssq-form__button { opacity: 0.75; cursor: progress; }
.ssq-form__button--busy .ssq-form__button-label::before { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.5em; vertical-align: -0.1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ssq-spin 0.8s linear infinite; }
@keyframes ssq-spin { to { transform: rotate(360deg); } }
.ssq-form__message--error { background: var(--ssq-error-bg); color: var(--ssq-error-fg); }
.ssq-form--done .ssq-form__head { display: none; }
@media (max-width: 480px) { .ssq-form { padding: var(--ssq-gap); } }
