/* ===========================================================
   OTP Login — سفید و آبی، مینیمال
   این فایل کاملاً دستی نوشته شده و به Tailwind وابسته نیست.
   =========================================================== */

@font-face{font-family:Vazirmatn;font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/vazirmatn-arabic-400-normal-DMZFCm7K.woff2) format("woff2"),url(../fonts/vazirmatn-arabic-400-normal-C4W5XURk.woff) format("woff")}
@font-face{font-family:Vazirmatn;font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/vazirmatn-arabic-500-normal-C_lbnnKa.woff2) format("woff2"),url(../fonts/vazirmatn-arabic-500-normal-Dqq3-xo3.woff) format("woff")}
@font-face{font-family:Vazirmatn;font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/vazirmatn-arabic-600-normal-CPKvAnd1.woff2) format("woff2"),url(../fonts/vazirmatn-arabic-600-normal-CWYTfCgi.woff) format("woff")}
@font-face{font-family:Vazirmatn;font-style:normal;font-display:swap;font-weight:700;src:url(../fonts/vazirmatn-arabic-700-normal-Dge_DOjm.woff2) format("woff2"),url(../fonts/vazirmatn-arabic-700-normal-B5nPuCFv.woff) format("woff")}

.otp-login-wrap{
  --op-blue:#1976ff;
  --op-blue-dark:#0b5ed7;
  --op-blue-light:#eef5ff;
  --op-blue-ring:rgba(25,118,255,.18);
  --op-white:#ffffff;
  --op-bg:#ffffff;
  --op-border:#e2e8f0;
  --op-text:#0f172a;
  --op-muted:#64748b;
  --op-muted-2:#94a3b8;
  --op-error:#dc2626;
  --op-error-bg:#fef2f2;
  --op-radius-lg:18px;
  --op-radius-md:12px;
  --op-radius-sm:9px;

  font-family:Vazirmatn,ui-sans-serif,system-ui,Tahoma,sans-serif;
  color:var(--op-text);
  background:var(--op-bg);
  min-height:100vh;
  position:relative;
}
.otp-login-wrap *,
.otp-login-wrap *::before,
.otp-login-wrap *::after{ box-sizing:border-box; }

/* ---------- چیدمان ---------- */
.otp-login-wrap .otp-main{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}
.otp-card{
  width:100%;
  max-width:860px;
  display:flex;
  align-items:stretch;
  background:var(--op-white) !important;
  border:1px solid var(--op-border) !important;
  border-radius:var(--op-radius-lg);
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 24px 60px -24px rgba(15,23,42,.22);
  overflow:hidden;
  padding:0;
  animation:op-card-enter .45s cubic-bezier(.22,1,.36,1) both;
}
@media (max-width:760px){
  .otp-card{ flex-direction:column;max-width:440px; }
}

/* ---------- پنل کناری رنگی ---------- */
.otp-side-panel{
  width:42%;
  flex-shrink:0;
  background:linear-gradient(160deg,var(--op-blue),var(--op-blue-dark)) !important;
  color:#fff !important;
  padding:2.5rem 2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.otp-side-panel::before,
.otp-side-panel::after{ content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.08); }
.otp-side-panel::before{ width:220px;height:220px;top:-90px;inset-inline-end:-70px; }
.otp-side-panel::after{ width:170px;height:170px;bottom:-70px;inset-inline-start:-60px; }
.otp-side-title{ font-size:1.5rem;font-weight:800;margin:0 0 .75rem;position:relative;z-index:1;color:#fff !important; }
.otp-side-subtitle{ font-size:.875rem;line-height:1.85;margin:0 0 1.75rem;position:relative;z-index:1;color:rgba(255,255,255,.88) !important; }
.otp-side-btn{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  padding:.7rem 1.85rem;
  border:1.5px solid rgba(255,255,255,.75) !important;
  border-radius:999px;
  background:transparent !important;
  color:#fff !important;
  font-family:inherit;font-size:.85rem;font-weight:700;
  cursor:pointer;transition:background-color .2s ease,color .2s ease;
}
.otp-side-btn:hover,
.otp-side-btn:focus{
  background:#fff !important;
  color:var(--op-blue-dark) !important;
  border-color:#fff !important;
  outline:none !important;
}
@media (max-width:760px){
  .otp-side-panel{ width:100%;padding:2rem 1.5rem; }
}

/* ---------- پنل سفید فرم ---------- */
.otp-form-panel{
  flex:1;
  min-width:0;
  padding:2.25rem 2rem;
}
@media (max-width:480px){
  .otp-form-panel{ padding:1.75rem 1.25rem; }
}

/* ---------- آیکن دایره‌ای بالای کارت (لهجه‌ی رنگی آبی روشن) ---------- */
.otp-icon-circle{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.25rem;
  border-radius:50%;
  background:var(--op-blue-light);
  border:1px solid #dbeafe;
}
.otp-icon-circle svg{ width:24px;height:24px;color:var(--op-blue); }
.otp-logo{ display:block;max-width:120px;max-height:64px;margin:0 auto 1.25rem;object-fit:contain; }

/* ---------- تب‌ها ---------- */
.otp-tabs{
  display:flex;gap:.375rem;
  background:var(--op-white) !important;
  border:1px solid var(--op-border) !important;
  border-radius:var(--op-radius-md);
  padding:.25rem;
  margin-bottom:1.5rem;
}
.otp-tab{
  flex:1;border:0 !important;background:transparent !important;cursor:pointer;
  font-family:inherit;font-size:.8125rem;font-weight:600;
  color:var(--op-muted) !important;
  padding:.5rem .4rem;border-radius:calc(var(--op-radius-md) - 4px);
  transition:background-color .15s ease,color .15s ease;
  outline:none !important;
}
.otp-tab:hover,
.otp-tab:focus{ color:var(--op-text) !important;background:transparent !important; }
.otp-tab.is-active,
.otp-tab.is-active:hover,
.otp-tab.is-active:focus{ background:var(--op-blue) !important;color:var(--op-white) !important; }

/* ---------- عناوین ---------- */
.otp-header{ text-align:center;margin-bottom:1.75rem; }
.otp-title{ font-size:1.375rem;font-weight:700;color:var(--op-text);margin:0 0 .375rem; }
.otp-subtitle{ font-size:.875rem;color:var(--op-muted);line-height:1.6;margin:0; }
.otp-mobile-display{ font-size:.75rem;color:var(--op-muted-2);margin-top:.5rem; }

/* ---------- فیلدهای متنی (موبایل / رمز عبور) ---------- */
.otp-text-input{
  display:block;width:100%;height:50px;
  background:var(--op-white) !important;
  border:1.5px solid var(--op-border) !important;
  border-radius:var(--op-radius-md);
  color:var(--op-text) !important;
  font-family:inherit;font-size:.95rem;
  padding:0 1rem;margin-bottom:1rem;
  outline:none;transition:border-color .15s ease,box-shadow .15s ease;
}
.otp-text-input::placeholder{ color:var(--op-muted-2); }
.otp-text-input:hover{ border-color:var(--op-border) !important; }
.otp-text-input:focus{
  border-color:var(--op-blue) !important;
  box-shadow:0 0 0 4px var(--op-blue-ring);
}
.otp-text-input.error{
  border-color:var(--op-error) !important;
  box-shadow:0 0 0 4px rgba(220,38,38,.12);
}

/* ---------- خانه‌های کد تایید ---------- */
.otp-inputs-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:.5rem;margin-bottom:1.5rem;
}
@media (min-width:640px){ .otp-inputs-row{ gap:.65rem; } }
.otp-input{
  height:54px;width:100%;
  text-align:center;font-size:1.375rem;font-weight:700;
  color:var(--op-text) !important;
  background:var(--op-white) !important;
  border:1.5px solid var(--op-border) !important;
  border-radius:var(--op-radius-md);
  caret-color:var(--op-blue);
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.otp-input:hover{ border-color:var(--op-border) !important; }
.otp-input:focus{
  border-color:var(--op-blue) !important;
  background:var(--op-white) !important;
  box-shadow:0 0 0 4px var(--op-blue-ring);
}
.otp-input.filled{ background:var(--op-blue-light) !important;border-color:#bfdbfe !important; }
.otp-input.error{ border-color:var(--op-error) !important;box-shadow:0 0 0 4px rgba(220,38,38,.12); }

/* ---------- پیام خطا ---------- */
.otp-error-text{
  text-align:center;font-size:.8125rem;color:var(--op-error);
  margin-bottom:1rem;min-height:1rem;transition:opacity .15s ease;
}
.otp-error-text.opacity-100{ opacity:1; }

/* ---------- دکمه‌ها ---------- */
.otp-btn{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;padding:.85rem 1rem;
  border:0 !important;border-radius:var(--op-radius-md);
  font-family:inherit;font-size:.95rem;font-weight:600;
  cursor:pointer;transition:background-color .15s ease,transform .1s ease,box-shadow .15s ease;
  text-decoration:none !important;
  outline:none !important;
}
.otp-btn,
.otp-btn:link,
.otp-btn:visited{ border-color:transparent !important; }
.otp-btn-primary{
  background:var(--op-blue) !important;
  color:var(--op-white) !important;
  box-shadow:0 8px 20px -8px rgba(25,118,255,.45);
}
.otp-btn-primary:hover:not(:disabled),
.otp-btn-primary:focus:not(:disabled),
.otp-btn-primary:active:not(:disabled){
  background:var(--op-blue-dark) !important;
  color:var(--op-white) !important;
  border-color:transparent !important;
  outline:none !important;
}
.otp-btn-primary:active:not(:disabled){ transform:translateY(1px); }
.otp-btn-primary:disabled{ opacity:.6;cursor:not-allowed;box-shadow:none; }

.otp-link-btn{
  display:inline-block;background:none !important;border:0 !important;padding:0;
  font-family:inherit;font-size:.8125rem;color:var(--op-blue) !important;
  cursor:pointer;text-decoration:underline;text-decoration-color:var(--op-blue) !important;
  transition:color .15s ease;outline:none !important;
}
.otp-link-btn:link,
.otp-link-btn:visited{ color:var(--op-blue) !important; }
.otp-link-btn:hover,
.otp-link-btn:focus,
.otp-link-btn:active{
  color:var(--op-blue-dark) !important;
  text-decoration-color:var(--op-blue-dark) !important;
  background:none !important;
  border-color:transparent !important;
  outline:none !important;
}
.otp-link-btn:disabled,
.otp-link-btn.is-disabled,
.otp-link-btn.is-disabled:hover{ color:var(--op-muted-2) !important;text-decoration-color:var(--op-muted-2) !important;cursor:not-allowed;text-decoration:none; }

/* ---------- اسپینر ساده ---------- */
.otp-spinner{
  width:18px;height:18px;
  border:2.5px solid rgba(255,255,255,.4);
  border-top-color:var(--op-white);
  border-radius:50%;
  animation:op-spin .7s linear infinite;
  display:inline-block;
}

/* ---------- پانوشت / تایمر ---------- */
.otp-footer{ margin-top:1.5rem;text-align:center; }
.otp-footer p{ font-size:.8125rem;color:var(--op-muted);margin:0 0 .25rem; }
.otp-timer{ font-size:.75rem;color:var(--op-muted-2); }
.otp-timer strong{ color:var(--op-blue);font-weight:700; }
.otp-back-link{ margin-top:1rem; }

/* ---------- مرحله‌ی موفقیت ---------- */
.otp-success-icon-wrap{
  width:76px;height:76px;margin:0 auto 1.5rem;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.otp-success-ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--op-blue-ring);
  animation:op-success-ring .6s ease-out forwards;
}
.otp-success-circle{
  width:64px;height:64px;border-radius:50%;
  background:var(--op-blue-light);
  border:2px solid var(--op-blue);
  display:flex;align-items:center;justify-content:center;
  animation:op-success-pop .45s cubic-bezier(.22,1,.36,1) both;
}
.otp-success-icon{ width:32px;height:32px; }
.otp-success-path{
  fill:none;stroke:var(--op-blue);stroke-width:3px;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:22;
  animation:op-draw .4s .3s forwards;
}
.otp-success-title{ font-size:1.375rem;font-weight:700;color:var(--op-text);margin:0 0 .375rem; }
.otp-success-subtitle{ font-size:.875rem;color:var(--op-muted);margin:0 0 1.75rem; }

/* ---------- حالت «قبلاً وارد شده‌اید» ---------- */
.otp-already-in{
  max-width:26rem;margin:2rem auto;padding:1.75rem;text-align:center;
  border-radius:var(--op-radius-lg);border:1px solid var(--op-border);
  background:var(--op-white);color:var(--op-text);
  font-family:Vazirmatn,inherit;
}
.otp-already-in p{ font-size:.9rem;color:var(--op-muted);margin:0; }
.otp-already-in .otp-btn{ width:auto;display:inline-flex;margin-top:1rem;padding:.6rem 1.5rem;text-decoration:none; }

/* ---------- یادآوری پیش‌نمایش برای مدیر سایت ---------- */
.otp-admin-preview-notice{
  max-width:860px;margin:0 auto 1rem;padding:.85rem 1.1rem;
  background:#fffbeb;border:1px solid #fde68a;border-radius:12px;
  color:#92400e;font-family:Vazirmatn,inherit;font-size:.8125rem;line-height:1.9;
  text-align:center;
}
.otp-admin-preview-notice a{ color:#1976ff !important;font-weight:700;text-decoration:underline;margin-inline-start:.4rem; }

/* ---------- ابزارهای عمومی ---------- */
.hidden{ display:none !important; }
.opacity-0{ opacity:0; }
.opacity-100{ opacity:1; }
.inline-flex{ display:inline-flex !important; }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.tabular-nums{ font-variant-numeric:tabular-nums; }
.animate-shake{ animation:op-shake .5s cubic-bezier(.36,.07,.19,.97) both; }

/* ---------- انیمیشن‌ها ---------- */
@keyframes op-spin{ to{ transform:rotate(360deg); } }
@keyframes op-card-enter{ 0%{opacity:0;transform:translateY(16px);} 100%{opacity:1;transform:translateY(0);} }
@keyframes op-shake{
  0%,100%{ transform:translateX(0); }
  15%{ transform:translateX(-8px); }
  30%{ transform:translateX(8px); }
  45%{ transform:translateX(-6px); }
  60%{ transform:translateX(6px); }
  75%{ transform:translateX(-3px); }
  90%{ transform:translateX(3px); }
}
@keyframes op-success-pop{ 0%{opacity:0;transform:scale(.6);} 70%{transform:scale(1.06);} 100%{opacity:1;transform:scale(1);} }
@keyframes op-success-ring{ 0%{opacity:0;transform:scale(.8);} 100%{opacity:0;transform:scale(1.2);} }
@keyframes op-draw{ to{ stroke-dashoffset:0; } }