/* =========================================================
   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(32px, 8vh, 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{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
  /* ارتفاع ظاهری رینگ را کنترل کن (بیضوی کردن) */
  transform: scaleY(var(--ring-scaleY));
  transform-origin: center;
}

/* سه حلقه‌ی متحرک چسبیده به باکس */
.lsa-ring i{
  position: absolute;
  inset: 50%;
  translate: -50% -50%;
  width: calc(100% + var(--ring-gap)*2);
  aspect-ratio: 1/1;
  border: 2px solid rgba(17,17,17,.12);
  border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
  transition: border-color .35s ease, filter .35s ease, border-width .35s ease;
}
.lsa-ring i:nth-child(1){ animation: lsa-blob-a 8s linear infinite; }
.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;
  border-radius: 16px;
  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: 700; font-size: .92rem; color:#111; }
.lsa-form input{
  width: 100%;
  padding: 12px 14px;
  border:1px solid #e5e7eb; border-radius: 12px; 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::before{ content:'👁'; font-size:16px; line-height:26px; display:block; }

.lsa-row{ display:flex; gap:12px; align-items:center; flex-wrap: wrap; }
.lsa-btn{
  background:#111; color:#fff; padding:12px 18px; border-radius:12px;
  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; }

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

.lsa-toast{
  position: fixed;         /* ← به کل صفحه وصل میشه */
  top: 120px;               /* فاصله از بالای صفحه (زیر هدر) */
  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); }
}