/* ============== WebMiz — Login (FULLY SCOPED) ============== */
@font-face{
  font-family:'IRANSans';
  src:url('/assets/fonts/IRANSans.woff2') format('woff2'),
      url('/assets/fonts/IRANSans.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}

[data-scope="wmz-login"]{
  --pink:#ee2a7b; --vio:#7a3bdc;
  --grad:linear-gradient(135deg,var(--pink),var(--vio));
  --brand:#7a3bdc; --brand-700:#5e2bd1; --accent:#ee2a7b;
  --bg:#ffffff; --surface:#ffffff; --muted:#f6f7fb; --border:#ececf4;
  --text:#1f2544; --text-2:#7b8197;
  font-family: Vazirmatn, IRANSans, Tahoma, Arial, sans-serif;
}

/* Wrapper */
.wmz-login{
  background:var(--muted);
  min-height:100vh;
  padding: 90px 16px 28px;
  box-sizing:border-box;
}

/* Card container */
[data-scope="wmz-login"] .wl-card{
  max-width:1100px; margin:0 auto; background:var(--surface);
  border:1px solid var(--border); border-radius:20px;
  box-shadow:0 12px 32px rgba(0,0,0,.08);
  padding:18px;
}

/* Top ribbon (brand gradient) */
[data-scope="wmz-login"] .wl-ribbon{
  height:88px; border-radius:16px; background:var(--grad); opacity:.18; margin-bottom:16px;
}

/* Grid */
[data-scope="wmz-login"] .wl-grid{
  display:grid; gap:18px; grid-template-columns:1fr; align-items:stretch;
}
@media (min-width: 980px){
  [data-scope="wmz-login"] .wl-grid{ grid-template-columns: 1fr 1fr; }
}

/* Illustration */
[data-scope="wmz-login"] .wl-illus{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:14px; box-shadow:0 8px 22px rgba(0,0,0,.05); }
[data-scope="wmz-login"] .wl-figure{ position:relative; border-radius:16px; overflow:hidden; margin:0; background:linear-gradient(135deg,#faf7ff,#fff); min-height:320px; display:grid; place-items:center; }
[data-scope="wmz-login"] .wl-figure img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Dark overlay on image (auto) */
@media (prefers-color-scheme: dark){
  [data-scope="wmz-login"] .wl-illus{ background:#0f1626; border-color:#263449; }
  [data-scope="wmz-login"] .wl-figure{ background:linear-gradient(135deg,#17172a,#0f0f1a); }
  [data-scope="wmz-login"] .wl-figure::after{
    content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); /* مات کافی */
    pointer-events:none;
  }
}

/* Form box */
[data-scope="wmz-login"] .wl-formbox{
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:16px; box-shadow:0 8px 22px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark){
  [data-scope="wmz-login"] .wl-formbox{ background:#0f1626; border-color:#263449; }
}

/* Title */
[data-scope="wmz-login"] .wl-title{
  text-align:center; margin:0 0 14px; font-size:22px; font-weight:900;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* Alerts */
[data-scope="wmz-login"] .wl-alert{ padding:10px 12px; border-radius:12px; font-size:14px; margin-bottom:14px }
[data-scope="wmz-login"] .wl-alert--error{ background:#ffe8ef; border:1px solid #f5b5c2; color:#c9184a }
[data-scope="wmz-login"] .wl-alert--ok{ background:#e8fff3; border:1px solid #a6e8c4; color:#136f3b }

/* Fields */
[data-scope="wmz-login"] .wl-field{ margin:10px 0 }
[data-scope="wmz-login"] .wl-label{ display:block; font-size:13px; color:var(--text-2); margin:0 2px 6px }
[data-scope="wmz-login"] .wl-help{ font-size:12px; color:#9aa0b4; margin-top:6px; display:block }

[data-scope="wmz-login"] .wl-inputwrap{ position:relative; display:flex; align-items:center }
[data-scope="wmz-login"] .wl-inputwrap > i{
  position:absolute; inset-inline-start:10px; color:#8d92a8; font-size:14px; pointer-events:none
}
[data-scope="wmz-login"] .wl-input{
  width:100%; padding:10px 12px; padding-inline-start:36px;
  border:1px solid var(--border); border-radius:12px; font-size:14px;
  background:var(--muted); color:var(--text); outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
[data-scope="wmz-login"] .wl-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(122,59,220,.14);
  background:#fff;
}
@media (prefers-color-scheme: dark){
  [data-scope="wmz-login"] .wl-input{ background:#0f1626; border-color:#263449; color:#e8edf5 }
  [data-scope="wmz-login"] .wl-input:focus{ background:#0f1626; box-shadow:0 0 0 3px rgba(138,92,255,.18) }
}

/* Eye button — always visible */
[data-scope="wmz-login"] .wl-eye{
  position:absolute; inset-inline-end:6px; width:36px; height:36px;
  border-radius:10px; border:1px solid var(--border);
  display:grid; place-items:center; cursor:pointer; background:#fff;
  color:#5b5f76;
  transition: box-shadow .2s, background .2s, color .2s;
}
[data-scope="wmz-login"] .wl-eye:hover{ box-shadow:0 0 0 3px rgba(122,59,220,.12) }
@media (prefers-color-scheme: dark){
  [data-scope="wmz-login"] .wl-eye{ background:#0f1626; border-color:#2a3754; color:#c7d2fe }
}

/* Buttons (scoped, conflict-proof) */
[data-scope="wmz-login"] .wl-btn{ all:unset; display:block; width:100%; text-align:center; cursor:pointer; border-radius:14px; padding:12px 16px; font-weight:800; font-size:15px; font-family: Vazirmatn, IRANSans, Tahoma, sans-serif; }
[data-scope="wmz-login"] .wl-btn--primary{
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%) !important;
  color:#fff !important;
  box-shadow:0 10px 26px rgba(122,59,220,.28);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  max-width: -webkit-fill-available;
}
[data-scope="wmz-login"] .wl-btn--primary:hover{
  filter:brightness(.98);
  transform: translateY(-1px);
  box-shadow:0 14px 32px rgba(122,59,220,.36);
}
[data-scope="wmz-login"] .wl-btn--primary:active{
  transform: translateY(1px);
  box-shadow:0 8px 18px rgba(122,59,220,.22);
}

/* Footer link */
[data-scope="wmz-login"] .wl-foot{ text-align:center; margin-top:12px }
[data-scope="wmz-login"] .wl-link{ color:var(--accent); text-decoration:none; font-size:14px }
[data-scope="wmz-login"] .wl-link:hover{ text-decoration:underline }

/* Dark mode container */
@media (prefers-color-scheme: dark){
  [data-scope="wmz-login"] .wmz-login{ background:#0e1117 }
  [data-scope="wmz-login"] .wl-card{ background:#101424; border-color:#1f2238; box-shadow:0 18px 40px rgba(0,0,0,.45) }
  [data-scope="wmz-login"] .wl-title{ -webkit-text-fill-color:transparent }
}
[data-scope="wmz-login"] .wl-eye i {
    font-size: 16px;
    color: inherit;
    display: inline-block;
    line-height: 1;
}
/* ===== Fix #1: چشمِ نمایش رمز (زِد-ایندکس، فاصله، رنگ مناسب) ===== */
[data-scope="wmz-login"] .wl-inputwrap{ position:relative; display:flex; align-items:center; }

/* فاصله‌ی سمت دکمه چشم در RTL */
[data-scope="wmz-login"] .wl-input{
  padding-inline-end: 44px; /* جا برای دکمه چشم */
}

/* خود دکمه چشم */
[data-scope="wmz-login"] .wl-eye{
  position:absolute;
  inset-inline-end: 6px;           /* راست در RTL */
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  z-index: 2;                       /* جلوتر از input */
  border-radius: 10px;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  cursor: pointer;
  background: var(--surface);
  color: #5e2bd1;                   /* بنفش خوانا */
  transition: box-shadow .2s, background .2s, color .2s;
}
[data-scope="wmz-login"] .wl-eye i{
  font-size: 16px; line-height: 1; display: inline-block; color: inherit;
}
[data-scope="wmz-login"] .wl-eye:hover{
  box-shadow: 0 0 0 3px rgba(122,59,220,.12);
}

/* دارک‌مود برای چشم */
@media (prefers-color-scheme: dark){
  [data-scope="wmz-login"] .wl-eye{
    background: #0f1626;
    border-color: #2a3754;
    color: #c7d2fe;                 /* روشن و خوانا */
  }
}

/* ===== Fix #2: پس‌زمینه‌ی کلی در دارک‌مود ===== */
/* خود المنتی که data-scope دارد را هدف بگیر، نه فرزندش */
@media (prefers-color-scheme: dark){
  [data-scope="wmz-login"]{
    background: #0e1117 !important; /* پس‌زمینه‌ی کلی تیره */
  }
  [data-scope="wmz-login"] .wl-card{
    background:#101424; border-color:#1f2238;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
  }
  [data-scope="wmz-login"] .wl-formbox{
    background:#0f1626; border-color:#263449;
  }
  [data-scope="wmz-login"] .wl-illus{
    background:#0f1626; border-color:#263449;
  }
  [data-scope="wmz-login"] .wl-figure::after{
    content:""; position:absolute; inset:0; background:rgba(0,0,0,.35);
    pointer-events:none;
  }
}