/* ===============================================
   app.css — اسکین تمیز و پایدار (کامنت فارسی)
   هدف‌ها:
   - ثبات سنتر در هوم‌پیج هنگام تغییر زبان (بدون پرش)
   - عدم هم‌پوشانی لوگو و فرم در موبایل هنگام تایپ
   - حفظ کلاس‌ها/ساختار فعلی HTML (بدون تغییر مارک‌آپ)
   =============================================== */

/* ---------- متغیرهای تم و پایه ---------- */
:root{
  --bg:#0b1033;            /* پس‌زمینهٔ سرمه‌ای تیره */
  --fg:#e9edf7;            /* متن روشن */
  --muted:#a6b0cf;         /* متن کم‌رنگ/راهنما */
  --accent:#f59e0b;        /* نارنجی برند (دکمه/کپسول لوگو) */
  --a20:rgba(245,158,11,.25); /* نسخه کم‌شفافیت accent برای outline/shadow */
  --headerH:84px;          /* ارتفاع تقریبی هدر لوگو روی دسکتاپ */
  --containerW:620px;      /* پهنای منطقی باکس‌های احراز هویت */
}

/* ---------- ریست‌ها و تایپوگرافی ---------- */
*{box-sizing:border-box}
html,body{height:100%}

/* جلوگیری از پرش افقی هنگام ظاهر/غیبت اسکرول عمودی */
html{scrollbar-gutter:stable both-edges}

/* بدنه: گرادیان تزئینی + فونت + اسکرول عمودی مجاز (برای موبایل لازم است) */
body{
  margin:0;
  color:var(--fg);
  background:
    radial-gradient(1200px 800px at 20% -10%, #121843, transparent 40%),
    radial-gradient(1000px 600px at 110% 20%, #0d133a, transparent 45%),
    var(--bg);
  font:500 16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  overflow-x:hidden;               /* هرگز اسکرول افقی ایجاد نشود */
  overflow-y:auto;                 /* اجازه اسکرول عمودی (مخصوص موبایل/کیبورد) */
}

/* ---------- کانواس پس‌زمینه (همیشه پشتِ UI) ---------- */
#bg-canvas{
  position:fixed; inset:0;
  z-index:0;           /* زیرِ همه‌چیز */
  pointer-events:none; /* قابل کلیک نباشد */
}

/* ---------- هدرِ لوگو ---------- */
header.brand{
  position:fixed; top:24px; left:0; right:0;
  display:grid; place-items:center;
  z-index:10; background:transparent;
}
header.brand .logo{
  display:inline-grid; place-items:center;
  background:var(--accent);
  border-radius:9999px; padding:8px 14px; line-height:0;
  box-shadow:0 10px 28px rgba(245,158,11,.40);
}
header.brand .logo img{
  display:block; height:56px; width:auto; object-fit:contain;
  /* کمی بالا تا دقیقاً وسط کپسول بیفتد (فقط دسکتاپ) */
  transform:translateY(-5px);
}

/* در موبایل: هدر sticky شود تا موقع اسکرول با صفحه برود بالا و روی فرم نیفتد */
@media (max-width:640px){
  header.brand{ position:sticky; top:0; padding-top:8px; }
  header.brand .logo{ padding:6px 12px; }
  header.brand .logo img{ height:48px; transform:none; }
}

/* ---------- سنتر عمومی صفحات احراز هویت ---------- */
/* نکتهٔ کلیدی: «روی دسکتاپ» سنتر عمودی/افقی داریم؛ «روی موبایل» سنتر
   را از fixed به flow (static) تغییر می‌دهیم تا با کیبورد قاطی نشود. */
.center{
  width:min(var(--containerW),92vw);   /* پهنای منطقی محتوا */
  margin-inline:auto;                  /* سنتر افقی پایدار در هر dir */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  min-height:calc(100svh - var(--headerH));  /* وسطِ عمودی با لحاظ هدر */
  padding:0 10px;
  position:relative; z-index:3; background:transparent;
}

/* فقط هوم‌پیج: ترتیب نمایش اجزاء ثابت بماند تا با تغییر زبان «نپرد» */
body.home .h1-row{ display:contents; }  /* ظرف حذف شود تا بچه‌ها مستقیم چیده شوند */
body.home .h1-row h1{ order:1; }
body.home .subtag{ order:2; }
body.home .lang-switch{ order:3; margin-bottom:8px; }
body.home .login-form{ order:4; margin-top:12px; }

/* در موبایل: اجازه بده صفحه اسکرول شود و center زیر header گیر نکند */
@media (max-width:640px){
  .center{
    position:static;           /* دیگر fixed نیست → با صفحه جابجا می‌شود */
    min-height:auto;           /* ارتفاع منعطف */
    padding-top:calc(var(--headerH) + 14px); /* جا برای لوگو */
    padding-bottom:24px;       /* جا برای دکمه‌های پایین */
    justify-content:flex-start;/* شروع از بالا (برای فرم‌های بلند) */
  }
}

/* ---------- تایپوگرافی بخش خوش‌آمد/زیرتیتر ---------- */
.h1-row{ display:flex; align-items:center; justify-content:center; gap:.75rem; }
.h1-row h1{
  margin:.25rem 0; text-transform:uppercase;
  letter-spacing:.06em; font-weight:800;
  color:var(--accent); font-size:clamp(22px,3.2vw,34px);
}
.subtag{
  color:var(--accent); opacity:.9; font-weight:600;
  letter-spacing:.08em; margin:2px 0 8px; text-align:center;
}

/* ---------- سوییچر زبان (پرچم‌ها) ---------- */
.lang-switch{ display:flex; gap:.5rem; direction:ltr; white-space:nowrap; }
.lang-switch .flag{
  width:40px; height:30px; display:grid; place-items:center;
  padding:0; border:1px solid var(--a20); border-radius:8px;
  background:rgba(255,255,255,.05); cursor:pointer;
}
.lang-switch .flag.active{ outline:2px solid var(--a20); outline-offset:1px; }
.lang-switch img{ width:22px; height:16px; display:block; border-radius:3px; }

/* ---------- فرم‌های احراز هویت ---------- */
.login-form{ width:100%; display:flex; flex-direction:column; gap:12px; }
.login-form label{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.login-form input{
  width:100%; height:44px; padding:0 12px;
  border-radius:10px; border:1px solid rgba(245,158,11,.6);
  background:rgba(255,255,255,.04); color:#f6f7fb; outline:none;
}
.login-form input:focus{ box-shadow:0 0 0 3px rgba(245,158,11,.25); }
.btn.primary{
  background:var(--accent); color:#1a1200; border:0; height:44px;
  border-radius:12px; padding:0 22px; margin-top:.3rem; cursor:pointer; font-weight:600;
}
.links{ display:flex; gap:16px; justify-content:center; margin-top:10px; }
.links a{ color:var(--accent); text-decoration:none; }
.links a:hover{ text-decoration:underline; }
.msg{ min-height:22px; text-align:center; margin-top:8px; }
.msg.ok{ color:#86efac; } .msg.err{ color:#ffb4a6; }

/* ---------- کارت شیشه‌ای مشترک ---------- */
.card{
  background: rgba(15,19,25,.38);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  border-radius:16px; padding:22px 24px;
  max-width:min(var(--containerW),92vw);
}

/* ---------- ریزتنظیم‌های RTL ---------- */
html[dir="rtl"] .login-form label{ text-align:right; }
html[dir="rtl"] input, html[dir="rtl"] button{ font-family:inherit; }

/* ---------- بهینه‌سازی فونت‌ها بر اساس زبان ---------- */
html[lang="en"] body{
  font-family: Inter,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;
}
html[lang="fa"] body{
  font-family: "Vazirmatn","IRANSansX",Tahoma,"Segoe UI",Arial,sans-serif;
  letter-spacing:0; /* در فارسی فاصلهٔ حروف اضافه نشود */
}
/* =========================================
   [FIX #1] کپسول لوگوی هدر — ابعاد و سنتر درست
   بدون تغییر HTML ؛ فقط با !important تثبیت می‌کنیم
   ========================================= */
header.brand {
  position: fixed !important;
  top: 24px !important;
  left: 0; right: 0;
  display: grid !important;
  place-items: center !important;
  z-index: 10 !important;
  background: transparent !important;
}
header.brand .logo{
  /* کپسول نارنجی شیک مثل قبل */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--accent) !important;
  border-radius: 9999px !important;
  padding: 10px 20px !important;         /* پهنا را محتوای لوگو + پدینگ تعیین می‌کند */
  line-height: 0 !important;
  box-shadow: 0 10px 28px rgba(245,158,11,.40) !important;
}
header.brand .logo > img{
  /* خودِ SVG/PNG داخل کپسول: قد ثابت، نسبت حفظ شود */
  display: block !important;
  height: 56px !important;
  width: auto !important;
  object-fit: contain !important;
  transform: none !important;            /* هر جابجایی قبلی حذف */
  margin: 0 !important;
}
@media (max-width: 420px){
  header.brand .logo{ padding: 8px 16px !important; }
  header.brand .logo > img{ height: 48px !important; }
}

/* =========================================
   [FIX #2] حذف موارد اضافه در مرکز هوم‌پیج
   - h1 «HiDizbad» اولیه
   - img .brand-logo (لوگوی مشکی وسط)
   ساختار HTML دست‌نخورده؛ فقط مخفی می‌کنیم
   ========================================= */
body.home .center h1:not([data-i18n]),
.home .center h1:not([data-i18n]),            /* اگر کلاس home روی body نبود */
body.home .center .brand-logo,
.home .center .brand-logo{
  display: none !important;
}

/* برای اینکه فرم با تغییر زبان هرگز نجه/کج نشه */
html, body{ overflow-x: hidden !important; }
body.home .center,
.home .center{
  position: fixed !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(520px, 92vw) !important;
  max-width: min(520px, 92vw) !important;
  margin: 0 !important; padding: 0 10px !important;
  text-align: center !important;
  background: transparent !important;
  z-index: 3 !important;
}
/* ترتیب پایدارِ اجزا در هوم */
body.home .h1-row, .home .h1-row{ display: contents !important; }
body.home .h1-row h1, .home .h1-row h1{ order:1 !important; }
body.home .subtag,   .home .subtag{     order:2 !important; }
body.home .lang-switch, .home .lang-switch{ order:3 !important; margin-bottom:8px !important; }
body.home .login-form,  .home .login-form{ order:4 !important; margin-top:12px !important; }

/* پرچم‌ها همیشه LTR تا با RTL جابجا نزنند */
.lang-switch{ direction: ltr !important; }