/* ============================================================================
   material.css — design tokens + the signature "surface" classes for the
   نِگاره panel (the Tailwind COMPONENT LAYER).

   Tailwind utilities drive all layout/spacing/typography in the markup; this
   file holds only the things utilities express poorly: the CSS custom-property
   palette, base resets, and the glass / gradient / focus-ring SURFACES. Every
   value is ported verbatim from the original template so the look is identical.

   Loaded right after tailwind.css.
   ============================================================================ */

/* ---- design tokens (single source of truth; mirrored in tailwind.config) ---- */
:root{
  --accent:#2BA6F0;        --accent-deep:#1689D6;
  --accent-soft:rgba(43,166,240,.15);  --accent-glow:rgba(43,166,240,.42);
  --warm:#D97757;          --warm-deep:#C2603F;
  --ink:#1f2433;           --ink-soft:#4b5267;  --ink-faint:#8a90a3;
  --glass:rgba(255,255,255,.62);  --glass-strong:rgba(255,255,255,.78);
  --glass-thin:rgba(255,255,255,.42);
  --glass-border:rgba(255,255,255,.65);  --glass-line:rgba(255,255,255,.35);
  --hairline:rgba(31,36,51,.08);  --surface:#ffffff;
  --shadow-win:0 24px 70px -18px rgba(20,24,45,.55), 0 4px 18px -6px rgba(20,24,45,.3);
  --shadow-soft:0 8px 30px -10px rgba(20,24,45,.35);
  --blur:22px;
  --radius-win:20px;  --radius-app:24px;  --radius-md:14px;  --radius-sm:10px;
  --topbar-h:48px;  --dock-h:74px;
}

/* ---- base reset (ported) ---- */
html,body{margin:0;height:100%;}
body{
  font-family:'Vazirmatn',system-ui,sans-serif;
  color:var(--ink); overflow:hidden; -webkit-font-smoothing:antialiased;
  background:#2b2c52;
}
button{font-family:inherit;cursor:pointer;}
input{font-family:inherit;}
::selection{background:var(--accent-glow);color:#fff;}
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-thumb{background:rgba(31,36,51,.18);border-radius:20px;border:2px solid transparent;background-clip:padding-box;}
*::-webkit-scrollbar-thumb:hover{background:rgba(31,36,51,.3);background-clip:padding-box;}
*::-webkit-scrollbar-track{background:transparent;}

/* ---- wallpaper ---- */
.wallpaper{position:fixed;inset:0;z-index:0;overflow:hidden;background:#2b2c52;}
.wp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.wp-vignette{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(12,14,34,.30), rgba(12,14,34,.22) 45%, rgba(12,14,34,.34)),
    radial-gradient(130% 120% at 50% 38%, transparent 52%, rgba(12,13,32,.5) 100%);
}

/* ---- shared glass ---- */
.glass{background:var(--glass);
  backdrop-filter:blur(var(--blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  border:1px solid var(--glass-border);}
.glass-strong{background:var(--glass-strong);
  backdrop-filter:blur(var(--blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  border:1px solid var(--glass-border);}

/* ============================================================================
   LOGIN surfaces — only the material/gradient/focus bits; layout is utilities.
   ============================================================================ */

/* frosted card (light default) */
.login-card{
  background:linear-gradient(165deg,rgba(255,255,255,.6),rgba(255,255,255,.44));
  border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(34px) saturate(168%);-webkit-backdrop-filter:blur(34px) saturate(168%);
  box-shadow:var(--shadow-win),inset 0 1px 0 rgba(255,255,255,.65);
  transition:.5s;
}
.login-card.logging{opacity:0;transform:scale(1.04);}
[data-theme="dark"] .login-card{
  background:rgba(17,19,36,.84);border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow-win);
}

/* warm logo tile */
.login-logo{
  background:linear-gradient(150deg,var(--warm),var(--warm-deep));
  box-shadow:0 12px 26px -8px rgba(217,119,87,.45);
  filter:drop-shadow(0 10px 22px rgba(217,119,87,.4));
  object-fit:contain;
}

/* text input surface + focus ring */
.field-input{
  border:1px solid var(--hairline);background:rgba(255,255,255,.7);
  color:var(--ink);transition:.15s;
}
.field-input::placeholder{color:var(--ink-faint);}
.field-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none;}
[data-theme="dark"] .field-input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;}
[data-theme="dark"] .field-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(43,166,240,.25);}
.field.has-err .field-input{border-color:#E2574C;box-shadow:0 0 0 3px rgba(226,87,76,.18);}

/* Bare `.field` + <span> label + <input> markup (account / profile forms) —
   ported from the original styles.css; the Nuxt layer otherwise only styles the
   class-based `.field-input`, leaving these dialog fields unstyled. */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field>span{font-size:12.5px;font-weight:600;color:var(--ink-soft);}
.field>input{height:44px;border-radius:13px;border:1px solid var(--hairline);background:rgba(255,255,255,.7);
  padding:0 14px;font-size:14px;color:var(--ink);outline:none;transition:.15s;width:100%;}
.field>input::placeholder{color:var(--ink-faint);}
.field>input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
[data-theme="dark"] .field>input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff;}
[data-theme="dark"] .field>input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(43,166,240,.25);}

/* primary / ghost / social buttons */
/* Shared base geometry — ported from the original styles.css so buttons keep
   their rounded pill shape everywhere, even where the markup adds no Tailwind
   sizing utilities (modal actions, onboarding ways, checkout footer, …). */
.btn-primary,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;border-radius:13px;
  font-size:14.5px;font-weight:700;white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(150deg,var(--accent),var(--accent-deep));color:#fff;
  box-shadow:0 10px 24px -8px var(--accent-glow);transition:.15s;
}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px);}
.btn-primary:disabled{opacity:.7;cursor:default;transform:none;filter:none;}
.btn-ghost{border:1px solid var(--hairline);background:rgba(255,255,255,.5);color:var(--ink);transition:.15s;}
.btn-ghost:hover{background:rgba(255,255,255,.8);}
[data-theme="dark"] .btn-ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;}
[data-theme="dark"] .btn-ghost:hover{background:rgba(255,255,255,.15);}
.social-btn{color:var(--ink);background:rgba(255,255,255,.6);border:1px solid var(--hairline);transition:.15s;}
.social-btn:hover{background:rgba(255,255,255,.9);transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(20,24,45,.4);}
[data-theme="dark"] .social-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;}
[data-theme="dark"] .social-btn:hover{background:rgba(255,255,255,.15);}
.social-tg-ic{
  background:linear-gradient(150deg,#37AEE2,#1E96C8);
  box-shadow:0 3px 8px -3px rgba(30,150,200,.6);
}

/* divider with hairlines */
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--hairline);}
[data-theme="dark"] .login-divider::before,[data-theme="dark"] .login-divider::after{background:rgba(255,255,255,.14);}

/* theme toggle on login — flat surface matching the form fields/buttons
   (no glass blur, no drop shadow); see theme.css for the themed overrides */
.login-theme{
  color:var(--ink);background:rgba(255,255,255,.5);
  border:1px solid var(--hairline);transition:.16s;
}
.login-theme:hover{background:rgba(255,255,255,.85);transform:translateY(-1px);}
[data-theme="dark"] .login-theme{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.14);}
[data-theme="dark"] .login-theme:hover{background:rgba(255,255,255,.15);}

/* inline validation error */
.reg-err{display:flex;align-items:center;gap:7px;color:#E2574C;font-size:12.5px;font-weight:600;margin:-4px 0 12px;}
.shake{animation:shake .4s;}
@keyframes shake{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(2px);}30%,50%,70%{transform:translateX(-4px);}40%,60%{transform:translateX(4px);}}

.fade-in{animation:fadeIn .5s ease both;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}