/* login page styles — V7 (migrated from the view inline <style> block).
   Loaded for BOTH themes; Nova themes it via the token shim + pages.css. */

/* View-scoped (login): inline error alerts, dev-code chip, ink-band brand
     tweaks, links row (v4 tokens only — no app.css edit). Step visibility uses
     the [hidden] attribute (v4 app.css has no `.hidden` utility class). */
  .mx-alert { margin-top: 8px; font-size: .78rem; padding: 9px 12px; }
  .auth-side .brand-title { color: #fff; }
  .auth-side .brand small { color: rgba(244, 242, 234, .55); }
   .auth-side .tick-box { background: rgba(237, 169, 34, .28); color: #fff1bd; }
  .auth-side .tick-title { color: #fff; }
  .auth-side .tick-desc { color: rgba(244, 242, 234, .62); }
  .mx-dev-code { background: var(--sunken); border: 1px dashed var(--line-strong); border-radius: 12px; padding: .6rem .9rem; margin-top: .9rem; }
  .mx-dev-code-value { font-weight: 800; font-size: 1.1rem; letter-spacing: .3em; color: var(--gold-ink); margin-top: 2px; }
  /* links row — ثبت‌نام activates the SMS-OTP tab (registering IS the first
     OTP login; no /auth/register route exists), فروشگاه → /store. */
  .mx-auth-links { justify-content: center; gap: 12px; margin-top: 1.15rem; font-size: .84rem; font-weight: 800; }
  .mx-auth-links a { color: var(--gold-ink); }
  .mx-auth-links a:hover { text-decoration: underline; }
  .mx-goto-tab { background: none; border: 0; padding: 0; font: inherit; color: var(--gold-ink); cursor: pointer; }
  .mx-goto-tab:hover { text-decoration: underline; }
  .mx-goto-tab:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 4px; }
  .mx-links-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--t3); opacity: .55; }

/* =====================================================================
   NOVA — the split auth layout (ink brand band) is unstyled under Nova
   (app.css is not loaded in the Nova theme), so the aside rendered as a
   transparent panel with white-on-white feature titles. These rules make
   the aside a proper dark ink band using Nova tokens; the generic Nova
   .tick-row (light surface card) is reset inside the band.
   ===================================================================== */
  html[data-ui-theme="nova"] .auth-shell { min-height: 100dvh; grid-template-columns: 1fr; }
  @media (min-width: 1024px) { html[data-ui-theme="nova"] .auth-shell { grid-template-columns: minmax(340px, 44%) 1fr; } }
  html[data-ui-theme="nova"] .auth-side {
    display: none; position: relative; overflow: hidden;
    flex-direction: column; justify-content: space-between; gap: 30px;
    padding: clamp(28px, 4vw, 46px);
    background: linear-gradient(150deg, #1a1e33 0%, #14162b 55%, #101221 100%);
    color: #f4f2ea;
  }
  @media (min-width: 1024px) { html[data-ui-theme="nova"] .auth-side { display: flex; } }
  html[data-ui-theme="nova"] .auth-side .brand { display: flex; align-items: center; gap: 12px; }
  html[data-ui-theme="nova"] .auth-side .brand-title { color: #fff; font-size: 1.06rem; font-weight: 900; }
  html[data-ui-theme="nova"] .auth-side .brand small { color: rgba(244, 242, 234, .55); }
  html[data-ui-theme="nova"] .auth-side h2 { color: #f4f2ea; margin: 0; }
  html[data-ui-theme="nova"] .auth-side p { color: rgba(244, 242, 234, .7); }
  html[data-ui-theme="nova"] .auth-side .tick-row,
  html[data-ui-theme="nova"] .auth-side .tick-row:hover {
    display: flex; align-items: flex-start; gap: 12px;
    border: 0; background: transparent; padding: 0; color: inherit;
    transition: none;
  }
  html[data-ui-theme="nova"] .auth-side .tick-row + .tick-row { margin-top: 18px; }
  html[data-ui-theme="nova"] .auth-side .tick-title { color: #fff; font-size: .9rem; font-weight: 800; }
  html[data-ui-theme="nova"] .auth-side .tick-desc { color: rgba(244, 242, 234, .62); font-size: .8rem; line-height: 1.85; margin-top: 2px; }
  html[data-ui-theme="nova"] .auth-side .tick-box {
    width: 38px; height: 38px; flex: none; margin-top: 2px;
    display: inline-grid; place-items: center; border-radius: 12px;
    background: rgba(237, 169, 34, .28); color: #fff1bd;
  }
  html[data-ui-theme="nova"] .auth-side .tick-box svg { width: 17px; height: 17px; }
  html[data-ui-theme="nova"] .auth-side .omr-strip i {
    width: 6px; height: 6px; border-radius: 50%;
    border: 1.5px solid rgba(237, 169, 34, .55); background: transparent;
  }
  html[data-ui-theme="nova"] .auth-side .omr-strip i.on { background: #eda922; border-color: #eda922; }