/* components/form-fields.css — بخشی از سیستم سبک سایت عمومی پلاس */
.cform{margin-block-start:clamp(24px,3vw,34px);padding:clamp(18px,2.4vw,26px);
  border:1px solid var(--line);border-radius:var(--card-radius);background:var(--surface)}
.cform h3{font-family:var(--font-display);font-size:17px;font-weight:900;color:var(--fg)}
.cform textarea{inline-size:100%;font-family:var(--font-body);font-size:14px;line-height:2;
  color:var(--fg);padding:14px 16px;border-radius:14px;resize:vertical;
  border:1px solid var(--line-strong);background:var(--bg)}
.cform textarea:focus-visible{border-color:var(--teal-600)}
.cf-left{font-size:11.5px;color:var(--fg-muted)}
.cf-note{margin-block-start:20px;padding:14px 16px;border-radius:14px;font-size:12px;line-height:2;
  color:var(--fg-muted);background:var(--paper-200);border:1px solid var(--line)}
.cform{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3vw,34px);
  border-radius:var(--card-radius);border:1px solid var(--line);background:var(--paper-200)}
.fld{display:flex;flex-direction:column;gap:7px}
.fld[hidden]{display:none}
.fld > span{font-size:11.5px;color:var(--fg-muted)}
.fld > span i{font-style:normal;opacity:.65}
.fld input,.fld textarea{font-family:var(--font-body);font-size:13.5px;color:var(--fg);
  padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);
  inline-size:100%;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.fld textarea{resize:vertical;line-height:2;min-block-size:130px}
.fld input::placeholder,.fld textarea::placeholder{color:var(--fg-muted);opacity:.75}
.fld input:focus-visible,.fld textarea:focus-visible{outline:0;border-color:var(--teal-600);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--teal-600) 16%,transparent)}
.fld.bad input,.fld.bad textarea{border-color:var(--gold-600)}
.cf-left{font-size:11.5px;color:var(--fg-muted)}
.cf-done[hidden]{display:none}
.cf-done{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:16px;
  border:1px solid color-mix(in oklab,var(--teal-600) 34%,var(--line));
  background:color-mix(in oklab,var(--teal-600) 8%,transparent)}
.cf-done b{font-family:var(--font-display);font-size:15px;font-weight:900;color:var(--fg)}
.cf-done span{font-size:12.5px;line-height:2.1;color:var(--fg-muted)}
.cf-done i{font-style:normal;font-family:var(--font-display);font-weight:800;color:var(--teal-600)}
.cf-done .linkbtn{align-self:flex-start}
.cform.sent > *:not(.cf-done){display:none}
.au-form{display:flex;flex-direction:column;gap:14px;margin-block-start:clamp(18px,2.4vw,26px)}
.au-f{display:flex;flex-direction:column;gap:7px}
.au-f > span{font-size:11.5px;color:var(--fg-muted)}
.au-f > span i{font-style:normal;opacity:.65}
.au-f input,.au-f select,.au-f textarea{font-family:var(--font-body);font-size:14px;color:var(--fg);
  padding:15px 16px;border-radius:14px;border:1px solid var(--line);background:var(--paper-200);
  inline-size:100%;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.au-f input[dir="ltr"]{letter-spacing:.6px}
.au-f input::placeholder{color:var(--fg-muted);opacity:.7}
.au-f input:focus-visible,.au-f select:focus-visible{outline:0;border-color:var(--teal-600);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--teal-600) 16%,transparent)}
.au-f.bad input{border-color:var(--gold-600)}
.au-err{font-size:11.5px;line-height:1.9;color:var(--gold-600);font-style:normal}
.au-hint{font-size:11.5px;line-height:1.9;color:var(--fg-muted)}
.au-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.au-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.au-small{font-size:12px;color:var(--teal-600);text-decoration:underline;text-underline-offset:4px}
.au-go{align-self:stretch;justify-content:center;margin-block-start:4px}
.au-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.au-check input{inline-size:17px;block-size:17px;margin-block-start:3px;flex:none;accent-color:var(--teal-600)}
.au-check span{font-size:12px;line-height:2;color:var(--fg-muted)}
.au-check a,.au-legal a,.au-note a{color:var(--teal-600);text-decoration:underline;text-underline-offset:3px}
.au-pw{position:relative;display:block}
.au-pw input{padding-inline-end:48px}
.au-eye{position:absolute;inset-block-start:50%;right:12px;left:auto;transform:translateY(-50%);
  inline-size:30px;block-size:30px;border:0;border-radius:9px;cursor:pointer;
  display:grid;place-items:center;color:var(--fg-muted);background:transparent}
.au-eye:hover{color:var(--teal-600);background:var(--paper-200)}
.au-eye svg{inline-size:19px;block-size:19px}
.au-eye[aria-pressed="true"]{color:var(--teal-600)}
.au-meter{display:block;block-size:4px;border-radius:99px;background:var(--line);overflow:hidden}
.au-meter i{display:block;block-size:100%;inline-size:0;border-radius:99px;background:var(--gold-600);
  transition:inline-size .3s var(--ease-soft),background-color .3s}
.au-meter.s2 i{inline-size:45%;background:var(--gold-600)}
.au-meter.s3 i{inline-size:72%;background:var(--teal-600)}
.au-meter.s4 i{inline-size:100%;background:var(--teal-600)}
.au-meter.s1 i{inline-size:22%}
.au-mtext{font-size:11px;color:var(--fg-muted)}
.au-rules{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px}
.au-rules li{position:relative;padding-inline-start:20px;font-size:11.5px;line-height:1.9;
  color:var(--fg-muted)}
.au-rules li::before{content:"";position:absolute;inset-block-start:5px;inset-inline-start:2px;
  inline-size:9px;block-size:9px;border-radius:50%;border:1.5px solid var(--line-strong)}
.au-rules li.ok{color:var(--teal-600)}
.au-rules li.ok::before{border-color:var(--teal-600);background:var(--teal-600)}
.au-state{display:flex;flex-direction:column;gap:8px;margin-block-start:22px;padding:20px;
  border-radius:16px;border:1px solid var(--line)}
.au-state.ok{border-color:color-mix(in oklab,var(--teal-600) 34%,var(--line));
  background:color-mix(in oklab,var(--teal-600) 8%,transparent)}
.au-state.bad{border-color:color-mix(in oklab,var(--gold-600) 38%,var(--line));
  background:color-mix(in oklab,var(--gold-600) 8%,transparent)}
.au-state-i{inline-size:40px;block-size:40px;border-radius:12px;display:grid;place-items:center;
  color:var(--teal-600);background:color-mix(in oklab,var(--teal-600) 14%,transparent)}
.au-state-i svg{inline-size:22px;block-size:22px}
.au-state b{font-family:var(--font-display);font-size:15px;font-weight:900;color:var(--fg)}
.au-state span{font-size:12.5px;line-height:2.05;color:var(--fg-muted)}
@media (max-width:620px){
.au-2{grid-template-columns:1fr}
}
/* تله اسپم فرم‌ها: ربات‌ها پرش می‌کنند، آدم‌ها نمی‌بینند.
   عمدا display:none نیست؛ بعضی ربات‌ها فیلدهای پنهان‌شده با display را
   رد می‌کنند و تله بی‌اثر می‌شود. */
.hp-field{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
