/* Inner Circle Huniverse — atoms/inputs.css
   Biztonsági/hozzáférhetőségi minimum: minden mezőnek van id+name+label[for]+autocomplete,
   l. .devin/rules/security.md "Form security" szakasz. */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-md)}
.field label{font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.field input,.field textarea,.field select{
  background:var(--glass-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;color:var(--text);font-family:var(--font);font-size:var(--fs-base);
  transition:border-color .12s,box-shadow .12s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--primary-2);box-shadow:0 0 0 3px rgba(255,182,39,.18)}
/* <option> elemek: a böngésző alapértelmezett (fehér) háttere olvashatatlanná teszi a
   sötét témában. Kikényszerítjük a dark háttéret + világos szöveget. A `color-scheme:dark`
   meta tag (header.php) is segít, de egyes böngészők (Android Edge) ignorálják a select-nél. */
.field select{color-scheme:dark}
.field select option{background:var(--bg);color:var(--text)}
.field textarea{min-height:140px;resize:vertical}
.field small{color:var(--muted);font-size:var(--fs-xs)}
.field.required label::after{content:" *";color:var(--primary)}

/* --- Form validation: red flash effect on invalid fields ---
   A .field.has-error osztályt a szerver (PHP) és a kliens (JS) is állíthatja.
   A .flash osztály a piros pulzáló animációt indítja el, amit a JS ad hozzá
   a beküldés pillanatában, majd 1.2s után automatikusan levesz. */
.field.has-error input,
.field.has-error textarea,
.field.has-error select{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(239,68,68,.18)
}
.field.has-error input:focus,
.field.has-error textarea:focus,
.field.has-error select:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(239,68,68,.28)
}
.field-error{
  color:var(--red);font-size:var(--fs-xs);font-weight:600;
  margin-top:2px;display:none;animation:fieldErrorIn .18s ease-out
}
.field.has-error .field-error{display:block}
.field.has-error.flash input,
.field.has-error.flash textarea,
.field.has-error.flash select{animation:fieldFlash .6s ease-out}

@keyframes fieldFlash{
  0%   {box-shadow:0 0 0 0 rgba(239,68,68,.55);background:rgba(239,68,68,.10)}
  50%  {box-shadow:0 0 0 6px rgba(239,68,68,.22);background:rgba(239,68,68,.04)}
  100% {box-shadow:0 0 0 3px rgba(239,68,68,.18);background:transparent}
}
@keyframes fieldErrorIn{
  from{opacity:0;transform:translateY(-2px)}
  to  {opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .field.has-error.flash input,
  .field.has-error.flash textarea,
  .field.has-error.flash select{animation:none}
  .field-error{animation:none}
}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:var(--sp-md)}
.checkbox-row input[type="checkbox"]{width:18px;height:18px;margin-top:2px;accent-color:var(--primary)}
.checkbox-row label{font-size:var(--fs-sm);color:var(--muted)}