/* 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 `.tl-form` or `:root`. */
.tl-form {
  --tl-font: inherit;
  --tl-fg: #1f2328;
  --tl-muted: #6b7280;
  --tl-bg: #ffffff;
  --tl-border: #d0d7de;
  --tl-radius: 8px;
  --tl-shadow: none;
  --tl-accent: #1f2328;
  --tl-accent-fg: #ffffff;
  --tl-success-bg: #ecfdf3;
  --tl-success-fg: #067647;
  --tl-error-bg: #fef3f2;
  --tl-error-fg: #b42318;
  --tl-gap: 12px;
  --tl-max-width: 520px;
  font-family: var(--tl-font);
  color: var(--tl-fg);
  background: var(--tl-bg);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius);
  box-shadow: var(--tl-shadow);
  max-width: var(--tl-max-width);
  padding: calc(var(--tl-gap) * 2);
  box-sizing: border-box;
}
.tl-form *, .tl-form *::before, .tl-form *::after { box-sizing: inherit; }
.tl-form__head { margin-bottom: var(--tl-gap); }
.tl-form__title { margin: 0 0 6px; font-size: 1.25em; line-height: 1.3; }
.tl-form__intro { margin: 0; color: var(--tl-muted); }
.tl-form__body { display: flex; flex-direction: column; gap: var(--tl-gap); }
.tl-form__label { font-size: 0.9em; font-weight: 600; }
.tl-form__input, .tl-form__select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius);
  background: var(--tl-bg);
  color: var(--tl-fg);
  font: inherit;
}
.tl-form__input:focus, .tl-form__select:focus { outline: 2px solid var(--tl-accent); outline-offset: 1px; }
.tl-form__captcha:empty { display: none; }
.tl-form__captcha { max-width: 100%; overflow: hidden; }
.tl-form__captcha iframe, .tl-form__captcha > div { max-width: 100% !important; }
.tl-form__button {
  padding: 12px 18px;
  border: 0;
  border-radius: var(--tl-radius);
  background: var(--tl-accent);
  color: var(--tl-accent-fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.tl-form__button[disabled] { opacity: 0.6; cursor: default; }
.tl-form__button--busy .tl-form__button-label::after { content: "\2026"; }
.tl-form__privacy { margin: 0; font-size: 0.8em; color: var(--tl-muted); }
.tl-form__message { margin-top: var(--tl-gap); padding: 10px 12px; border-radius: var(--tl-radius); }
.tl-form__message--success { background: var(--tl-success-bg); color: var(--tl-success-fg); }
.tl-form__message--info { background: var(--tl-info-bg, #eef2ff); color: var(--tl-info-fg, #3730a3); }
.tl-form--busy .tl-form__button { opacity: 0.75; cursor: progress; }
.tl-form__button--busy .tl-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: tl-spin 0.8s linear infinite; }
@keyframes tl-spin { to { transform: rotate(360deg); } }
.tl-form__message--error { background: var(--tl-error-bg); color: var(--tl-error-fg); }
.tl-form--done .tl-form__head { display: none; }
@media (max-width: 480px) { .tl-form { padding: var(--tl-gap); } }