/* کامپوننت‌های فارسیِ فرم (js/fa-inputs.js، ۱۴ آبان ۱۴۰۵؛ برگردان از وایب‌فارسی، MIT).
   رنگ‌ها از توکن‌های همان برنامه: سایت (--card، --border، --yellow-500…) و خاموت (Bootstrap: --bs-*)؛ هر کدام نبود، پیش‌فرض.
   همین فایل در خاموت هم هست. */
:root {
  --fi-bg: var(--card, var(--bs-body-bg, #fff));
  --fi-fg: var(--fg, var(--bs-body-color, #1c1917));
  --fi-muted: var(--fg-muted, var(--bs-secondary-color, #78716c));
  --fi-line: var(--border-strong, var(--bs-border-color, #d6d3d1));
  --fi-soft: var(--muted, var(--bs-tertiary-bg, #f5f5f4));
  --fi-accent: var(--yellow-500, #eab308);
  --fi-ring: color-mix(in srgb, var(--fi-accent) 30%, transparent);
  --fi-ok: var(--fall, var(--bs-success, #15803d));
  --fi-bad: var(--rise, var(--bs-danger, #b91c1c));
  --fi-r: var(--r-md, 12px);
}

/* ۱. کدِ پیامکی */
.fa-otp { position: relative; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 8px; inline-size: 100%; max-inline-size: calc(var(--n, 6) * 58px); margin-inline: auto; }
.fa-otp-cell { display: grid; place-items: center; block-size: 56px; border: 1.5px solid var(--fi-line); border-radius: var(--fi-r); background: var(--fi-bg); color: var(--fi-fg); font-family: inherit; font-weight: 800; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; }
.fa-otp-cell.is-filled { border-color: color-mix(in srgb, var(--fi-fg) 35%, var(--fi-line)); }
.fa-otp-cell.is-active { border-color: var(--fi-accent); box-shadow: 0 0 0 4px var(--fi-ring); }
.fa-otp-cell.is-active:not(.is-filled)::after { content: ""; inline-size: 2px; block-size: 26px; background: var(--fi-fg); animation: fa-caret 1s steps(1) infinite; }
.fa-otp > input.fa-otp-input { position: absolute !important; inset: 0; inline-size: 100% !important; block-size: 100% !important; margin: 0; padding: 0; opacity: 0 !important; font-size: 16px !important; letter-spacing: 0 !important; caret-color: transparent; color: transparent; border: 0; z-index: 1; cursor: text; }
@keyframes fa-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fa-otp-cell.is-active::after { animation: none; } }
@media (max-width: 380px) { .fa-otp { gap: 6px; } .fa-otp-cell { block-size: 48px; font-size: 22px; } }

/* ۲. پلاکِ ایرانی: شکلِ خودِ پلاک (نوارِ آبی، رقم‌ها، قابِ «ایران») */
/* خانه‌های داخلِ پلاک با !important: سبکِ عمومیِ فرم‌ها (.field input:not(…) در سایت، .form-control در خاموت) عرضِ ۱۰۰٪ و قاب می‌دهد */
.fa-plate { display: inline-flex; align-items: stretch; justify-self: start; align-self: start; inline-size: max-content; max-inline-size: 100%; block-size: 46px; border: 2px solid #1c1917; border-radius: 8px; background: #fff; color: #111; overflow: hidden; font-variant-numeric: tabular-nums; }
.fa-plate:focus-within { box-shadow: 0 0 0 4px var(--fi-ring); border-color: #000; }
.fa-plate.is-complete { border-color: #000; }
.fa-plate-flag { display: flex; flex-direction: column; justify-content: space-between; align-items: center; inline-size: 26px; padding: 4px 0 3px; background: #1d4ed8; color: #fff; flex: none; }
.fa-plate-flag i { inline-size: 14px; block-size: 10px; background: linear-gradient(#16a34a 0 33%, #fff 33% 66%, #dc2626 66%); border-radius: 1px; }
.fa-plate-flag b { font: 700 6.5px/1.1 system-ui, sans-serif; text-align: center; inline-size: 20px; }
.fa-plate input, .fa-plate select { block-size: 100% !important; min-block-size: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: inherit !important; font-family: inherit; font-weight: 800; font-size: 20px !important; line-height: 1; text-align: center !important; padding: 0 2px !important; margin: 0 !important; outline: none; box-shadow: none !important; min-inline-size: 0; flex: none; }
.fa-plate .fa-plate-d { inline-size: calc(var(--w, 2) * 15px + 14px) !important; }
.fa-plate .fa-plate-d::placeholder { color: #a8a29e; }
.fa-plate select.fa-plate-l { inline-size: 54px !important; padding-inline: 4px !important; background-image: none !important; appearance: none; -webkit-appearance: none; cursor: pointer; text-align-last: center; }
.fa-plate select.fa-plate-l:invalid, .fa-plate select.fa-plate-l option[value=""] { color: #a8a29e; }
.fa-plate input:focus, .fa-plate select:focus { background: #fef9c3 !important; }
.fa-plate-reg { display: flex; flex-direction: column; align-items: center; justify-content: center; border-inline-start: 2px solid #1c1917; padding: 1px 2px 0; flex: none; }
.fa-plate-reg small { font-family: inherit; font-weight: 700; font-size: 9px; line-height: 1; color: #111; }
.fa-plate-reg input { block-size: auto !important; flex: 1; font-size: 17px !important; }
:root[data-theme="dark"] .fa-plate, .dark .fa-plate { border-color: #e7e5e4; }

/* ۳ و ۴. مبلغ با حروف و راهنمای شبا */
.fa-words, .fa-hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.8; color: var(--fi-muted); }
.fa-words:empty, .fa-hint:empty { display: none; }
.fa-hint.is-ok { color: var(--fi-ok); }
.fa-hint.is-bad { color: var(--fi-bad); }

/* ۵. تقویمِ شمسی */
.fa-cal { position: fixed; z-index: 2000; inline-size: 288px; padding: 12px; border: 1px solid var(--fi-line); border-radius: var(--r-lg, 16px); background: var(--fi-bg); color: var(--fi-fg); box-shadow: 0 18px 44px -18px rgb(0 0 0 / .35); font-size: 14px; }
.fa-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.fa-cal-head b { font-weight: 800; }
.fa-cal button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.fa-cal-nav { inline-size: 34px; block-size: 34px; border-radius: 10px; font-size: 20px !important; line-height: 1; }
.fa-cal-nav:hover, .fa-cal-foot button:hover { background: var(--fi-soft); }
.fa-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.fa-cal-wd { text-align: center; font-size: 12px; color: var(--fi-muted); padding: 4px 0; }
.fa-cal-day { block-size: 36px; border-radius: 10px; font-variant-numeric: tabular-nums; font-weight: 600; }
.fa-cal-day:hover { background: var(--fi-soft); }
.fa-cal-day.is-fri, .fa-cal-wd.is-fri { color: var(--fi-bad); }
.fa-cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--fi-accent); }
.fa-cal-day.is-focus { background: var(--fi-soft); }
.fa-cal-day.is-sel { background: var(--fi-accent); color: #1c1917; font-weight: 800; }
.fa-cal-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--fi-line); }
.fa-cal-foot button { padding: 6px 12px; border-radius: 10px; font-weight: 700; font-size: 13px; }