/* The demo request form, shared by the home page (#demo) and /demo; its
   script is js/demo-form.js. Its own colours, so it looks the same on a page
   whose sheet defines fewer of them. */
.form {
  --primary: #7f63f5;
  --primary-ink: #6147e3;
  --buy-ink: #157f3b;
  --sell: #f2545b;
  --sell-ink: #c9323a;
  --ink: #171717;
  --ink-2: #4f5765;
  --ink-3: #646d7c;
  --surface: #ffffff;
  --stroke: #eff0f4;
  --stroke-2: #e3e5ec;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Fields and the button take the page's type, not the browser's own: on a
   page without a global reset the placeholders fell back to a system font
   (/demo, 2026-10-29). The mobile field keeps its numeral face below. */
.form :where(input, button, textarea, select) { font-family: inherit; }
.form {
  position: relative;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 26px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  box-shadow: 0 24px 50px -32px rgb(46 32 128 / 0.45);
}
.fields { display: grid; gap: 16px; }
@media (min-width: 560px) { .fields { grid-template-columns: 1fr 1fr; } }
.field label { display: block; margin-bottom: 6px; font-size: 0.9375rem; font-weight: 700; color: var(--ink); }
.field label .opt { color: var(--ink-3); font-weight: 400; font-size: 0.8125rem; }
.field label .star { color: var(--sell-ink); }
.field input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1.5px solid var(--stroke-2);
  background: #fcfcfd;
  color: var(--ink);
  font-size: 1rem;
  outline: none;
  transition: border-color 200ms, box-shadow 200ms, background-color 200ms;
}
.field input::placeholder { color: #9aa1ad; }
.field input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgb(127 99 245 / 0.16); }
.field input[aria-invalid="true"] { border-color: var(--sell); box-shadow: 0 0 0 4px rgb(242 84 91 / 0.12); }
.field input[dir="ltr"] { text-align: right; font-family: "DanaFaNum", "Koochak", sans-serif; }
.field input[dir="ltr"]::placeholder { text-align: right; }
.field .err { min-height: 0; margin-top: 6px; color: var(--sell-ink); font-size: 0.8125rem; font-weight: 700; }
.field .err:empty { display: none; }
.hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin-top: 14px; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.9; }
/* «قوانین» in the brand purple, «حریم خصوصی» in green. */
.form-note a { font-weight: 700; text-underline-offset: 4px; }
.form-note a.lk-terms { color: var(--primary-ink); }
.form-note a.lk-privacy { color: var(--buy-ink); }
.form .btn { width: 100%; margin-top: 20px; }
.form .btn[aria-busy="true"] { pointer-events: none; opacity: 0.85; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgb(255 255 255 / 0.4); border-top-color: #fff; animation: spin 0.8s linear infinite; display: none; }
.form .btn[aria-busy="true"] .spinner { display: block; }
.form .btn[aria-busy="true"] .go-ic { display: none; }
.form-error {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgb(242 84 91 / 0.1);
  color: var(--sell-ink);
  font-size: 0.9375rem;
  font-weight: 700;
}
.form-error:empty { display: none; }

/* ArCaptcha's «من ربات نیستم», in a centred row of its own above the
   button. The row holds the widget's height while it loads, so nothing
   jumps under a thumb, and on a phone too narrow for the box the box is
   scaled down (see fitCaptcha) instead of spilling past the card. */
.captcha { margin-top: 18px; display: flex; justify-content: center; min-height: 78px; }
.captcha[hidden] { display: none; }
.captcha-box { transform-origin: top center; }
/* Invisible: nothing to show, but the widget still needs a place in the
   page to open its question from. */
.captcha.is-invisible { margin-top: 0; min-height: 0; height: 0; }

.done-panel { display: none; text-align: center; padding: clamp(12px, 3vw, 28px) 8px; }
.form.is-done .form-body { display: none; }
.form.is-done .done-panel { display: block; animation: answer 500ms var(--ease); }
.done-panel svg.big { width: 86px; height: 86px; margin: 0 auto 12px; }
.done-panel circle { fill: rgb(105 223 130 / 0.18); }
.done-panel path { fill: none; stroke: var(--buy-ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; animation: draw-check 700ms 200ms var(--ease) both; }
.done-panel h3 { font-size: 1.35rem; font-weight: 700; }
.done-panel p { margin-top: 8px; color: var(--ink-2); line-height: 2; }

/* With scripts off the form posts itself and comes back to #demo-sent
   or #demo-failed; the stylesheet shows which. */
.nojs-result { display: none; margin-bottom: 16px; padding: 12px 16px; border-radius: 16px; font-weight: 700; }
.nojs-result:target { display: block; }
#demo-sent { background: rgb(105 223 130 / 0.2); color: var(--buy-ink); }
#demo-failed { background: rgb(242 84 91 / 0.1); color: var(--sell-ink); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes answer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes draw-check { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }