/* «قالب جدید» — the sign-in, registration and password-reset pages.
   Loaded on those three pages for everyone, and inert until auth-look.js puts
   `auth-dp` on <html> (a device marked by the panel's new look): every rule
   below is scoped to it, so the classic pages are not touched.

   Always light, no light/dark switch, no logo, no side pane.

   The page is in two halves. The top is a navy band — a picture of our own
   (auth-band.jpg: a soft light in the middle, a fine isometric mesh) that ends
   in a gold line; the site's name sits on it. The rest is a pale sky tint.
   The white card with the form lies across the line between the two. The
   same on a phone and on a desktop; only the sizes change.

   Colours: navy ink, a warm gold for the accents, green for the one action. */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
html.auth-dp{
  color-scheme:light;
  --surface:#FFFFFF;--surface-2:#F6F9FE;--surface-3:#EAF0FA;
  --line:rgba(23,37,90,.12);--line-soft:rgba(23,37,90,.06);--line-strong:rgba(23,37,90,.24);
  --ink:#17255A;--ink-soft:#3C4770;--muted:#5B6478;--faint:#9AA3BA;--on-accent:#FFFFFF;
  --primary:#0B8A57;--primary-hover:#097548;--primary-active:#097548;--primary-ink:#097548;
  --primary-soft:#E9F7F0;--primary-tint:rgba(11,138,87,.20);--primary-ring:rgba(11,138,87,.20);
  --adp-navy:#17255A;--adp-gold:#F2B01E;--adp-green:#0B8A57;--adp-green-hover:#097548;
  --adp-field:#F6F9FE;--adp-ground:#F4F8FF;
  background-color:#111B45!important;
}
html.auth-dp body{color:var(--ink);background:var(--adp-ground)}
html.auth-dp .app-frame,html.auth-dp .main-content,html.auth-dp .page-content{background:transparent}

/* ── The two halves ─────────────────────────────────────────────────────── */
html.auth-dp .auth-shell{
  --a-1:var(--adp-green);--a-2:var(--adp-green);
  --a-ground:transparent;--a-pane:var(--surface);--a-edge:var(--line);--a-sheen:transparent;
  --a-grid:transparent;--a-shadow:rgba(23,37,90,.3);--a-field:var(--adp-field);
  --a-wait:var(--adp-gold);--a-wait-2:#9A6B00;--a-r:22px;
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:20px;
  min-height:100vh;min-height:100dvh;
  padding:calc(env(safe-area-inset-top,0px) + 34px) 16px calc(env(safe-area-inset-bottom,0px) + 32px);
  background:var(--adp-ground);
}
/* The band. */
html.auth-dp .auth-shell::before{
  content:"";position:absolute;inset:0 0 auto 0;z-index:-1;height:250px;
  background:var(--adp-navy) url("/static/auth-band.jpg") center/cover no-repeat;
  border-bottom:3px solid var(--adp-gold);border-radius:0 0 32px 32px;
}
/* The site's name, on the band. */
html.auth-dp .auth-brand{
  display:flex;flex-direction:column;align-items:center;flex:0 0 auto;
  padding:0;background:none;border:0;overflow:visible;color:#FFFFFF;
}
html.auth-dp .auth-brand::before,html.auth-dp .auth-brand-body,html.auth-dp .auth-brand-foot,
html.auth-dp .auth-brand-top .brand-mark{display:none!important}
html.auth-dp .auth-brand-top{flex-direction:column;align-items:center;gap:2px;text-align:center}
html.auth-dp .auth-brand-top strong{font-size:22px;font-weight:800;line-height:1.6;letter-spacing:-.01em;color:#FFFFFF}
html.auth-dp .auth-brand-top small{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;text-align:center;color:rgba(255,255,255,.6);
}
html.auth-dp .auth-theme{display:none}
html.auth-dp .auth-mark:not(.reg-pending-icon){display:none}

html.auth-dp .auth-main{display:block;flex:0 0 auto;width:100%;max-width:440px;margin:0;padding:0}
html.auth-dp .auth-shell:has(.auth-card-register) .auth-main{max-width:580px}
html.auth-dp .auth-main::before,html.auth-dp .auth-main::after{display:none}

/* ── The card ───────────────────────────────────────────────────────────── */
html.auth-dp .auth-card{
  margin:0;max-width:none;gap:16px;padding:26px 20px 22px;
  background:var(--surface);border:0;border-radius:22px;
  box-shadow:0 22px 48px -24px rgba(23,37,90,.42),0 0 0 1px rgba(23,37,90,.06);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
html.auth-dp .auth-card-register{max-width:none}
html.auth-dp .auth-card-head,html.auth-dp .reg-pending .auth-card-head{gap:6px;padding-inline-end:0}
html.auth-dp .auth-card-head h1{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.5;color:var(--ink)}
html.auth-dp .auth-card-head h1::after{
  content:"";display:block;width:34px;height:3px;margin-top:8px;border-radius:3px;background:var(--adp-gold);
}
html.auth-dp .auth-card-head p{font-size:13px;line-height:1.9;color:var(--muted)}
html.auth-dp .auth-mark.reg-pending-icon{
  width:46px;height:46px;border-radius:14px;margin-bottom:8px;color:var(--adp-navy);background:var(--adp-gold);box-shadow:none;
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
html.auth-dp .auth-card .form{gap:14px}
html.auth-dp .auth-card .form-grid{gap:14px}
html.auth-dp .auth-card .field{gap:6px}
html.auth-dp .auth-card .field>span,html.auth-dp .auth-card .field>label{font-size:13px;font-weight:600;color:var(--ink-soft)}
html.auth-dp .auth-card .input-icon>input,
html.auth-dp .auth-card input[type=text],html.auth-dp .auth-card input[type=password],
html.auth-dp .auth-card input[type=tel],html.auth-dp .auth-card input[type=email],
html.auth-dp .auth-card input[type=number],html.auth-dp .auth-card select{
  min-height:50px;font-size:16px;border-radius:14px;
  color:var(--ink);background:var(--adp-field);border:1px solid var(--line);
}
html.auth-dp .auth-card .input-icon>input:hover,html.auth-dp .auth-card input:hover{border-color:var(--line-strong)}
html.auth-dp .auth-card .input-icon>input:focus,html.auth-dp .auth-card input:focus{
  background:var(--surface);border-color:var(--adp-green);box-shadow:0 0 0 3px var(--primary-tint);
}
html.auth-dp .auth-card .input-icon>svg{color:var(--faint);transition:color .15s,transform .2s}
html.auth-dp .auth-card .input-icon:focus-within>svg{color:var(--adp-green);transform:scale(1.12)}
html.auth-dp .auth-card input:-webkit-autofill,
html.auth-dp .auth-card input:-webkit-autofill:hover,
html.auth-dp .auth-card input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px var(--adp-field) inset;box-shadow:0 0 0 1000px var(--adp-field) inset;
}
html.auth-dp .auth-card .field-error input{border-color:var(--danger)}
html.auth-dp .password-toggle{border-radius:9px;color:var(--faint)}
html.auth-dp .password-toggle:hover,html.auth-dp .password-toggle:focus-visible{background:var(--surface-3);color:var(--ink)}
html.auth-dp .password-meter-track{background:var(--surface-3)}
html.auth-dp .auth-card .hint{color:var(--muted);line-height:1.8}
html.auth-dp .rule-tip::after{background:var(--surface);border-color:var(--line);color:var(--ink-soft)}

/* ── Buttons ────────────────────────────────────────────────────────────── */
html.auth-dp .auth-card .btn-lg{height:52px;min-height:52px;margin-top:4px;font-size:15px;font-weight:800}
html.auth-dp .auth-card .btn-primary,
html.auth-dp .auth-card a.btn-primary,html.auth-dp .auth-card a.btn-primary:visited{
  color:#FFFFFF;border-color:transparent;border-radius:14px;
  background:var(--adp-green);box-shadow:0 12px 22px -12px rgba(11,138,87,.8);filter:none;transform:none;
  transition:background .15s,transform .12s;
}
html.auth-dp .auth-card .btn-primary svg{color:#FFFFFF;transition:transform .2s}
html.auth-dp .auth-card .btn-primary:hover,html.auth-dp .auth-card a.btn-primary:hover{
  color:#FFFFFF;background:var(--adp-green-hover);border-color:transparent;filter:none;transform:none;
}
html.auth-dp .auth-card .btn-primary:hover svg{transform:translateX(-4px)}
html.auth-dp .auth-card .btn-primary:active{transform:scale(.985)}
html.auth-dp .auth-card .btn-outline,html.auth-dp .auth-card .btn:not(.btn-primary){
  color:var(--ink);background:var(--surface);border-color:var(--line-strong);border-radius:14px;
}
html.auth-dp .auth-card .btn-outline:hover,html.auth-dp .auth-card .btn:not(.btn-primary):hover{
  background:var(--surface-2);border-color:var(--adp-navy);color:var(--ink);
}
html.auth-dp .auth-card .otp-row-inline>.btn{
  min-height:50px;font-weight:700;color:var(--adp-navy);border-radius:14px;
  background:#FFF6DF;border-color:rgba(242,176,30,.65);
}
html.auth-dp .auth-card .otp-row-inline>.btn:hover:not(:disabled){
  color:var(--adp-navy);background:#FFEDC2;border-color:var(--adp-gold);
}
html.auth-dp .auth-card input[data-otp-code]:disabled{
  background:var(--surface-3);border-color:var(--line-soft);color:var(--muted);
}
html.auth-dp .auth-card [data-otp-code-group] .input-icon>svg{color:var(--faint)}
html.auth-dp .auth-card .otp-status{color:var(--muted)}
html.auth-dp .auth-card .otp-status.is-ok{color:var(--adp-green)}

/* ── The rest of the card ───────────────────────────────────────────────── */
html.auth-dp .auth-card .cap-slot cap-widget{
  --cap-background:var(--adp-field);--cap-border-color:var(--line);--cap-border-radius:14px;
  --cap-widget-height:50px;--cap-color:var(--ink);--cap-checkbox-background:var(--surface);
  --cap-checkbox-border:1px solid var(--line-strong);--cap-checkbox-border-radius:6px;
  --cap-spinner-color:var(--adp-green);--cap-spinner-background-color:var(--primary-tint);
}
html.auth-dp .auth-card .alert,html.auth-dp .reg-username{border-radius:14px}
html.auth-dp .auth-inline-link{margin:-4px 0 0;font-size:13px}
html.auth-dp .auth-inline-link a{color:var(--adp-green);font-weight:600}
html.auth-dp .auth-inline-link a:hover{text-decoration:underline;text-underline-offset:4px}
html.auth-dp .auth-alt{padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);line-height:2}
html.auth-dp .auth-alt a{color:var(--adp-green);font-weight:700}
html.auth-dp .auth-alt a:hover{text-decoration:underline;text-underline-offset:4px}
/* «صفحه اصلی» is not offered on the sign-in and registration cards. */
html.auth-dp .auth-card:has(form[action="/login"]) .auth-alt a[href="/"],
html.auth-dp .auth-card:has(form[action="/login"]) .auth-alt span[aria-hidden],
html.auth-dp .auth-card:has(form[action="/register"]) .auth-alt a[href="/"],
html.auth-dp .auth-card:has(form[action="/register"]) .auth-alt span[aria-hidden]{display:none}
html.auth-dp .reg-username{background:var(--surface-2);border-color:var(--line)}
html.auth-dp .reg-username b{color:var(--ink)}

/* ── Above phones: a taller band, a roomier card ────────────────────────── */
@media (min-width:641px){
  html.auth-dp .auth-shell{gap:24px;padding:clamp(40px,13vh,130px) 24px 56px}
  html.auth-dp .auth-shell::before{height:clamp(300px,48vh,520px);border-radius:0 0 44px 44px}
  html.auth-dp .auth-shell:has(.auth-card-register),
  html.auth-dp .auth-shell:has(form[action="/forgot-password"]){padding-top:clamp(32px,7vh,72px)}
  html.auth-dp .auth-brand-top strong{font-size:26px}
  html.auth-dp .auth-brand-top small{font-size:11px}
  html.auth-dp .auth-card{padding:36px 40px 28px;border-radius:26px}
  html.auth-dp .auth-card-head h1{font-size:23px}
}
/* No descriptive copy on desktop. The reset page keeps its one line of
   instruction (what to type), and a pending registration what to do next. */
@media (min-width:1024px){
  html.auth-dp .auth-card:not(:has(form[action="/forgot-password"]))>.auth-card-head p{display:none}
}
/* ── Desktop, with the character: one wide panel, as two halves ───────────────
   OFF for now — kept ready. To show it, add the class `auth-art` to <html>
   (auth-look.js: html.classList.add('auth-art')). The drawing is auth-trader.svg. */
@media (min-width:1024px){
  html.auth-dp.auth-art .auth-shell{
    display:grid;grid-template-columns:minmax(0,440px) minmax(0,500px);
    grid-template-rows:auto auto;justify-content:center;align-content:start;align-items:stretch;
    column-gap:0;row-gap:26px;
  }
  html.auth-dp.auth-art .auth-shell:has(.auth-card-register){grid-template-columns:minmax(0,580px) minmax(0,400px)}
  html.auth-dp.auth-art .auth-brand{grid-area:1/1/2/3;justify-self:center}
  html.auth-dp.auth-art .auth-main,html.auth-dp.auth-art .auth-shell:has(.auth-card-register) .auth-main{
    grid-area:2/1/3/2;display:flex;align-items:stretch;max-width:none;
  }
  html.auth-dp.auth-art .auth-card{
    flex:1 1 auto;justify-content:center;padding:44px 44px 34px;
    border-start-start-radius:28px;border-end-start-radius:28px;
    border-start-end-radius:0;border-end-end-radius:0;
  }
  html.auth-dp.auth-art .auth-shell::after{
    content:"";grid-area:2/2/3/3;min-height:540px;
    background-color:#EEF4FF;background-image:url("/static/auth-trader.svg");
    background-repeat:no-repeat;background-position:center;background-size:min(100%,460px) auto;
    border-start-end-radius:28px;border-end-end-radius:28px;
    border-start-start-radius:0;border-end-start-radius:0;
    box-shadow:0 22px 48px -24px rgba(23,37,90,.42),0 0 0 1px rgba(23,37,90,.06);
    animation:adp-rise .55s cubic-bezier(.2,.7,.2,1) .1s backwards,adp-float 6s ease-in-out 1s infinite alternate;
  }
}
@keyframes adp-float{from{background-position:center calc(50% - 5px)}to{background-position:center calc(50% + 5px)}}
@media (prefers-reduced-motion:reduce){
  html.auth-dp.auth-art .auth-shell::after{animation:none}
}
@media (max-width:430px){
  html.auth-dp .auth-card .form-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:360px){
  html.auth-dp .auth-shell{padding-inline:12px}
  html.auth-dp .auth-card{padding-inline:16px}
}

/* ── Motion: simple, once, on arrival ───────────────────────────────────── */
@keyframes adp-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes adp-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes adp-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html.auth-dp .auth-brand-top{animation:adp-drop .5s cubic-bezier(.2,.7,.2,1) backwards}
html.auth-dp .auth-card{animation:adp-rise .55s cubic-bezier(.2,.7,.2,1) .05s backwards}
html.auth-dp .auth-card-head h1::after{transform-origin:100% 50%;animation:adp-bar .5s cubic-bezier(.2,.7,.2,1) .45s backwards}
html.auth-dp .auth-card .form>*{animation:adp-rise .45s cubic-bezier(.2,.7,.2,1) backwards}
html.auth-dp .auth-card .form>*:nth-child(1),html.auth-dp .auth-card .form>*:nth-child(2){animation-delay:.16s}
html.auth-dp .auth-card .form>*:nth-child(3){animation-delay:.22s}
html.auth-dp .auth-card .form>*:nth-child(4){animation-delay:.28s}
html.auth-dp .auth-card .form>*:nth-child(5){animation-delay:.34s}
html.auth-dp .auth-card .form>*:nth-child(n+6){animation-delay:.4s}
html.auth-dp .auth-card .auth-alt{animation:adp-rise .45s cubic-bezier(.2,.7,.2,1) .46s backwards}