/* =========================================================
   Lifostep Auth — final CSS (centered box + tight animated rings)
   ========================================================= */

/* ------- Knobs (تُنظیمات سریع) ------- */
:root{
  --auth-max:   600px;  /* حداکثر عرض باکس لاگین */
  --ring-gap:     10px; /* فاصله رینگ تا کادر (کم/زیادش کن) */
  --ring-scaleY: 0.75;  /* ارتفاع رینگ: 1 = دایره / کمتر = بیضی کم‌ارتفاع */
}

/* محافظت از اسکرول افقی */
html, body { overflow-x: hidden; }

/* مرکزکننده‌ی کل باکس + حلقه‌ها */
.lsa-auth-center{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: clamp(45px, 0vh, 72px) 16px; /* فاصله از بالا/پایین صفحه */
}

/* رپر حلقه + فرم: اندازه‌اش به اندازه فرم است */
.lsa-auth-ringwrap{
  position: relative;
  display: inline-grid;
  place-items: center;
  max-width: var(--auth-max);
  width: min(92vw, var(--auth-max));
}

/* خود فرم بالای حلقه‌ها */
.lsa-auth{ position: relative; z-index: 2; }




.lsa-ring i:nth-child(2){
  animation: lsa-blob-b 6s linear infinite .6s;
  border-radius: 41% 44% 56% 59% / 38% 62% 63% 37%;
}
.lsa-ring i:nth-child(3){
  animation: lsa-blob-c 12s linear infinite .2s;
  border-radius: 41% 44% 56% 59% / 38% 62% 63% 37%;
}

/* هاور لطیف */
.lsa-auth-ringwrap:hover .lsa-ring i{
  border-width: 4px;
  border-color: var(--clr, rgba(17,17,17,.22));
  filter: drop-shadow(0 0 16px var(--clr, #ff6600));
}

/* انیمیشن‌های حلقه */
@keyframes lsa-blob-a{ 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(1.03)} 100%{transform:rotate(360deg) scale(1)} }
@keyframes lsa-blob-b{ 0%{transform:rotate(360deg) scale(1)} 50%{transform:rotate(180deg) scale(1.04)} 100%{transform:rotate(0) scale(1)} }
@keyframes lsa-blob-c{ 0%{transform:rotate(0) scale(1.02)} 100%{transform:rotate(-360deg) scale(1.02)} }

/* موبایل: رینگ کمی فشرده‌تر */
@media (max-width: 640px){
  :root{ --ring-gap: 8px; --ring-scaleY: 0.68; }
}

/* =========================================================
   Auth form styles (ساده و تمیز)
   ========================================================= */
.lsa-auth{
  width: 100%;
  max-width: var(--auth-max);
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 18px 48px rgba(0,0,0,.08);
  padding: clamp(20px, 4vw, 28px);
}

.lsa-panel{ display: none; }
.lsa-panel.is-active{ display: block; }

.lsa-title{
  margin: 0 0 8px;
  font: 800 clamp(1.4rem, 3.2vw, 1.8rem)/1.1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#111;
}
.lsa-sub{ margin: 0 0 16px; color:#555; }

.lsa-form{ display: grid; gap: 12px; }
.lsa-form label{ font-weight: 400; font-size:11px; color:#111; }
.lsa-form input{
  width: 100%;
  padding: 12px 14px;
  border:1px solid #e5e7eb;  outline: none;
  font: 500 1rem/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#111; background:#fff;
}
.lsa-form input:focus{ border-color:#111; box-shadow: 0 0 0 3px rgba(17,17,17,.06); }

.lsa-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 640px){ .lsa-grid{ grid-template-columns:1fr; } }

.lsa-passwrap{ position: relative; }
.lsa-eye{
  position: absolute; right:10px; top:50%; transform: translateY(-50%);
  width:26px; height:26px; border-radius:8px; border:0; background:#f3f4f6; cursor:pointer;
}
.lsa-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* ساختار کلی پلک‌ها */
.lsa-eye::before {
 content: '';
    position: absolute;
    width: 22px;
    height: 19px;
    border: 2px solid #333;
    border-radius: 76% 23%;
    transform: rotate(36deg);
    transition: all 0.3s ease;
}

/* مردمک و عنبیه */
.lsa-eye::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  /* ایجاد افکت عمق برای مردمک */
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #333; 
  transition: all 0.3s ease;
}

/* افکت هاور حرفه‌ای */
.lsa-eye:hover::before {
  border-color: #007cba; /* تغییر رنگ پلک */
  transform: rotate(45deg) scale(1.05);
}

.lsa-eye:hover::after {
  background: #007cba; /* تغییر رنگ مردمک */
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #007cba;
  transform: scale(1.1);
}

/* افکت کلیک (وقتی کاربر نگه می‌دارد) */
.lsa-eye:active {
  transform: translateY(-50%) scale(0.9);
}

.lsa-row{ display:flex; gap:12px; align-items:center; flex-wrap: wrap; }
.lsa-btn{
  background:#111; color:#fff; padding:12px 18px;
  font-weight:800; border:0; cursor:pointer; transition:.15s;
}
.lsa-btn:hover{ background:#000; transform: translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.12); }
.lsa-link{ background:none; border:0; color:#111; font-weight:700; cursor:pointer; text-decoration:underline; text-underline-offset:3px;margin-top: 16px; }

.lsa-error{ outline:2px solid #ff7272; outline-offset:1px; }

.lsa-toast{
  position: fixed;         /* ← به کل صفحه وصل میشه */
  top: 70px;               /* فاصله از بالای صفحه (زیر هدر) */
  left: 50%;               /* وسط افقی */
  transform: translateX(-50%);  
  max-width: min(92vw, 420px);
  background: rgba(20,20,22,.94);
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(0,0,0,.3);
  opacity: 0;
  transition: .25s ease;
  z-index: 9999;           /* بالا باشه */
}

.lsa-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0); 
}
.lsa-toast.show{ opacity:1; translate:0 0; }
.lsa-toast[data-type="ok"]{ background: rgba(18,140,126,.95); }
.lsa-toast[data-type="warn"]{ background: rgba(240,151,45,.95); color:#111; }
.lsa-toast[data-type="error"]{ background: rgba(208,49,49,.95); }

/* موبایل: دکمه‌ها وسط‌چین */
@media (max-width: 640px){
  .lsa-row{ justify-content:left; }
  .lsa-link{ text-align:center; }
}


/* --- Door icon animation (applies to SVG in lsa_account_icon) --- */

/* انیمیشن لنگه در */
.lsa-icon-door .door-leaf {
  transform-box: fill-box;              /* ضروری برای SVG */
  transform-origin: left center;        /* در از سمت چپ بچرخه */
  animation: swing-door 2s ease-in-out infinite;
}

/* افکت هاور: باز شدن بیشتر */
.icon-btn.icon-login:hover .door-leaf {
  transform: perspective(120px) rotateY(28deg);
  transition: transform .35s ease;
}

/* keyframes */
@keyframes swing-door {
  0%, 100% { transform: perspective(120px) rotateY(0deg); }
  50%      { transform: perspective(120px) rotateY(22deg); }
}