/* Account forms (registration, login, password reset): a centred card with labelled fields,
   hint and error text, consent checkbox and a visually hidden honeypot field. Works without JS. */

.formular { max-width: 420px; margin: var(--s-8) auto; padding: var(--s-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); }
.formular .btn { width: 100%; min-height: 44px; }

.pole { display: block; margin-bottom: var(--s-4); }
.pole label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.pole-suhlas label { flex: 1; margin-bottom: 0; font-weight: 400; }
.pole input:not([type="checkbox"]), .pole textarea {
  display: block; width: 100%; min-height: 44px; padding: 10px var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); color: var(--text); font: inherit;
}
.pole input:not([type="checkbox"]):focus, .pole textarea:focus { outline: 2px solid var(--accent); border-color: transparent; background: var(--surface); }
.pole-napoveda { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.pole input[aria-invalid="true"], .pole textarea[aria-invalid="true"] { border-color: var(--err-line); }
.pole-chyba { margin: 6px 0 0; font-size: 13px; color: var(--err-line); } /* error message under the field */

.pole-suhlas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-bottom: var(--s-4); font-size: 14px; }
.pole-suhlas input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--accent); min-height: 0; padding: 0; }
.pole-suhlas .pole-chyba, .pole-suhlas div[id$="_error"] { flex-basis: 100%; }

/* bot trap: hidden from sight like .sr-only, the template also sets aria-hidden="true" */
.honeypot { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.formular h1 { margin: 0 0 var(--s-3); font-size: 24px; }
.formular-pod { margin: var(--s-4) 0 0; font-size: 14px; color: var(--muted); text-align: center; }
