/* ===========================================================
   OTP Login — Blue UI refresh inspired by a modern portal layout
   =========================================================== */

@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:#2563eb;
  --op-blue-dark:#1d4ed8;
  --op-blue-dark-2:#123da8;
  --op-blue-light:#eff6ff;
  --op-blue-lighter:#f7fbff;
  --op-blue-ring:rgba(37,99,235,.18);
  --op-white:#ffffff;
  --op-bg:#edf4ff;
  --op-card-bg:#ffffff;
  --op-form-bg:#ffffff;
  --op-field-bg:#ffffff;
  --op-side-start:#0f4cdd;
  --op-side-end:#3b82f6;
  --op-bg-soft:#f8fbff;
  --op-border:#d9e6fb;
  --op-text:#0f172a;
  --op-muted:#5b6b84;
  --op-muted-2:#8ba0be;
  --op-error:#dc2626;
  --op-error-bg:#fff1f2;
  --op-radius-xl:32px;
  --op-radius-lg:22px;
  --op-radius-md:16px;
  --op-radius-sm:12px;
  font-family:Vazirmatn,ui-sans-serif,system-ui,Tahoma,sans-serif;
  color:var(--op-text);
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.18), transparent 22%),
    radial-gradient(circle at bottom right, rgba(37,99,235,.14), transparent 18%),
    linear-gradient(180deg,#f7fbff 0%, var(--op-bg) 100%);
  min-height:100vh;
  position:relative;
}
.otp-login-wrap *,
.otp-login-wrap *::before,
.otp-login-wrap *::after{box-sizing:border-box}

/* ---------- Layout ---------- */
.otp-login-wrap .otp-main{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px 22px;
}
.otp-card{
  width:100%;
  max-width:1220px;
  display:flex;
  flex-direction:row-reverse;
  align-items:stretch;
  background:var(--op-card-bg)!important;
  border:1px solid rgba(219,234,254,.95)!important;
  border-radius:var(--op-radius-xl);
  box-shadow:0 30px 80px -42px rgba(15,23,42,.34),0 20px 32px -26px rgba(37,99,235,.24);
  overflow:hidden;
  padding:0;
  animation:op-card-enter .45s cubic-bezier(.22,1,.36,1) both;
}
@media (max-width:1040px){
  .otp-card{max-width:980px}
}
@media (max-width:900px){
  .otp-card{flex-direction:column;max-width:560px}
}

/* ---------- Side visual panel ---------- */
.otp-side-panel{
  width:46%;
  min-width:360px;
  padding:34px 32px 30px;
  position:relative;
  overflow:hidden;
  color:#fff!important;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.18), transparent 18%),
    radial-gradient(circle at 92% 0%, rgba(255,255,255,.14), transparent 16%),
    linear-gradient(165deg, var(--op-side-start) 0%, var(--op-blue) 48%, var(--op-side-end) 100%)!important;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
}
.otp-side-panel::before,
.otp-side-panel::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  pointer-events:none;
}
.otp-side-panel::before{width:290px;height:290px;top:-112px;inset-inline-start:-110px}
.otp-side-panel::after{width:260px;height:260px;bottom:-116px;inset-inline-end:-80px}
.otp-side-art{position:relative;min-height:390px;display:flex;align-items:center;justify-content:center}
.otp-side-glow{position:absolute;border-radius:999px;filter:blur(8px);opacity:.42;background:rgba(255,255,255,.12)}
.otp-side-glow-1{width:180px;height:180px;top:34px;inset-inline-start:26px}
.otp-side-glow-2{width:150px;height:150px;bottom:28px;inset-inline-end:24px}
.otp-side-floating{
  position:absolute;
  z-index:3;
  padding:10px 16px;
  border-radius:999px;
  font-size:.86rem;
  font-weight:700;
  color:#fff;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
  box-shadow:0 16px 32px -26px rgba(15,23,42,.55);
}
.otp-side-floating-top{top:10px;inset-inline-start:10px}
.otp-side-floating-bottom{bottom:16px;inset-inline-end:12px}
.otp-side-hero-circle{
  width:min(100%, 420px);
  aspect-ratio:1/1;
  position:relative;
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #78b6ff 0%, #3b82f6 46%, #1d4ed8 100%);
  box-shadow:inset 0 20px 46px rgba(255,255,255,.18),0 24px 54px -34px rgba(15,23,42,.58);
  display:flex;
  align-items:center;
  justify-content:center;
}
.otp-side-hero-circle::before,
.otp-side-hero-circle::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.14);
}
.otp-side-hero-circle::before{width:86px;height:86px;top:38px;inset-inline-start:48px}
.otp-side-hero-circle::after{width:22px;height:22px;top:74px;inset-inline-end:76px}
.otp-side-card-bubble{
  position:absolute;
  inset-inline:56px;
  top:42px;
  z-index:4;
  background:rgba(255,255,255,.93);
  color:var(--op-blue-dark-2);
  border-radius:28px;
  padding:16px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow:0 28px 46px -34px rgba(15,23,42,.48);
}
.otp-side-card-bubble strong{font-size:1.22rem;line-height:1.5;font-weight:800}
.otp-side-card-bubble span:last-child{font-size:.95rem;line-height:1.9;color:#44618a}
.otp-side-card-badge{
  align-self:flex-start;
  background:var(--op-blue-light);
  color:var(--op-blue-dark);
  border-radius:999px;
  padding:7px 12px;
  font-size:.78rem;
  font-weight:800;
}
.otp-side-device{
  position:absolute;
  bottom:38px;
  inset-inline-start:50%;
  transform:translateX(-50%);
  width:212px;
  height:250px;
  border-radius:34px;
  background:rgba(255,255,255,.2);
  padding:18px;
  box-shadow:0 24px 50px -36px rgba(15,23,42,.48);
}
.otp-side-device::before{
  content:"";
  position:absolute;
  top:11px;
  left:50%;
  transform:translateX(-50%);
  width:68px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.42);
}
.otp-side-device-screen{
  width:100%;
  height:100%;
  border-radius:26px;
  background:linear-gradient(180deg,#f8fbff 0%, #dbeafe 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.otp-side-device-icon{width:70%;height:70%}
.otp-side-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px}
.otp-side-kicker{
  margin:0;
  font-size:.84rem;
  font-weight:700;
  opacity:.88;
  letter-spacing:.02em;
}
.otp-side-title{
  font-size:2rem;
  line-height:1.35;
  font-weight:800;
  margin:0;
  color:#fff!important;
}
.otp-side-subtitle{
  font-size:1rem;
  line-height:2;
  margin:0;
  color:rgba(255,255,255,.88)!important;
}
.otp-side-features{display:flex;flex-wrap:wrap;gap:10px 12px}
.otp-side-features span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:.86rem;
  font-weight:600;
}
.otp-side-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  min-height:54px;
  padding:0 28px;
  border:1.5px solid rgba(255,255,255,.75)!important;
  border-radius:18px;
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
  font-family:inherit;
  font-size:1rem;
  font-weight:800;
  cursor:pointer;
  transition:all .2s ease;
  box-shadow:0 16px 34px -30px rgba(15,23,42,.54);
}
.otp-side-btn:hover,
.otp-side-btn:focus{
  background:#fff!important;
  color:var(--op-blue-dark)!important;
  border-color:#fff!important;
  outline:none!important;
  transform:translateY(-1px);
}
@media (max-width:900px){
  .otp-side-panel{width:100%;min-width:0;padding:26px 22px 24px;order:2}
  .otp-side-art{min-height:320px}
  .otp-side-title{font-size:1.7rem}
  .otp-side-card-bubble{inset-inline:34px;top:28px}
  .otp-side-device{width:192px;height:224px;bottom:28px}
}
@media (max-width:520px){
  .otp-side-art{min-height:270px}
  .otp-side-card-bubble{inset-inline:20px;padding:14px 14px 16px}
  .otp-side-card-bubble strong{font-size:1.02rem}
  .otp-side-card-bubble span:last-child{font-size:.84rem}
  .otp-side-device{width:170px;height:198px}
  .otp-side-features{gap:8px}
  .otp-side-features span{font-size:.78rem;min-height:36px;padding:8px 12px}
}

/* ---------- Form panel ---------- */
.otp-form-panel{
  flex:1;
  min-width:0;
  background:linear-gradient(180deg,var(--op-form-bg) 0%, var(--op-form-bg) 100%);
  padding:38px 38px 34px;
}
.otp-form-panel-inner{max-width:520px;margin:0 auto}
@media (max-width:520px){
  .otp-form-panel{padding:24px 18px 22px}
}
.otp-form-branding{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:24px;
}
.otp-logo{
  display:block;
  width:66px;
  height:66px;
  max-width:66px;
  max-height:66px;
  object-fit:contain;
  border-radius:18px;
  background:#fff;
  border:1px solid #e6eefc;
  box-shadow:0 12px 24px -18px rgba(37,99,235,.35);
  padding:8px;
  margin:0;
}
.otp-logo-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.35rem;
  font-weight:800;
  color:var(--op-blue-dark);
  background:var(--op-blue-light);
}
.otp-brand-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.otp-brand-eyebrow{margin:0;color:var(--op-muted);font-size:.88rem;font-weight:600}
.otp-brand-title{font-size:1.16rem;font-weight:800;color:var(--op-text);line-height:1.5}

/* ---------- Tabs ---------- */
.otp-tabs{
  display:flex;
  gap:8px;
  background:var(--op-bg-soft)!important;
  border:1px solid var(--op-border)!important;
  border-radius:18px;
  padding:6px;
  margin-bottom:18px;
}
.otp-mode-tabs{margin-bottom:16px}
.otp-method-tabs{margin-bottom:24px}
.otp-tab{
  flex:1;
  border:0!important;
  background:transparent!important;
  cursor:pointer;
  font-family:inherit;
  font-size:.98rem;
  font-weight:700;
  color:var(--op-muted)!important;
  min-height:48px;
  padding:0 14px;
  border-radius:14px;
  transition:all .16s ease;
  outline:none!important;
  line-height:1.5;
}
.otp-tab:hover,
.otp-tab:focus{color:var(--op-text)!important;background:rgba(255,255,255,.6)!important}
.otp-tab.is-active,
.otp-tab.is-active:hover,
.otp-tab.is-active:focus{
  background:linear-gradient(180deg,var(--op-blue) 0%, var(--op-blue-dark) 100%)!important;
  color:var(--op-white)!important;
  box-shadow:0 16px 30px -22px rgba(37,99,235,.65);
}
@media (max-width:520px){
  .otp-tabs{gap:6px;padding:5px}
  .otp-tab{font-size:.86rem;min-height:44px;padding:0 10px}
}

/* ---------- Headers ---------- */
.otp-header{margin-bottom:24px}
.otp-form-header{text-align:right}
.otp-title{
  font-size:2rem;
  font-weight:800;
  color:var(--op-text);
  line-height:1.35;
  margin:0 0 10px;
}
.otp-subtitle{
  font-size:1rem;
  color:var(--op-muted);
  line-height:2;
  margin:0;
}
.otp-mobile-display{
  font-size:1rem;
  font-weight:700;
  color:var(--op-blue-dark);
  margin-top:8px;
}
@media (max-width:520px){
  .otp-title{font-size:1.62rem}
  .otp-subtitle{font-size:.95rem}
}

/* ---------- Fields ---------- */
.otp-field{margin-bottom:16px}
.otp-field-label{
  display:block;
  margin-bottom:8px;
  color:var(--op-text);
  font-size:.95rem;
  font-weight:700;
  line-height:1.7;
}
.otp-text-input{
  display:block;
  width:100%;
  min-height:58px;
  background:var(--op-field-bg)!important;
  border:1.5px solid var(--op-border)!important;
  border-radius:18px;
  color:var(--op-text)!important;
  font-family:inherit;
  font-size:1rem;
  font-weight:500;
  padding:0 18px;
  margin:0;
  outline:none;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.otp-text-input::placeholder{color:#9aa9c1}
.otp-text-input:hover{border-color:#bfd4fa!important;background:var(--op-field-bg)!important}
.otp-text-input:focus{
  border-color:var(--op-blue)!important;
  box-shadow:0 0 0 5px var(--op-blue-ring);
}
.otp-text-input.error{
  border-color:var(--op-error)!important;
  box-shadow:0 0 0 5px rgba(220,38,38,.12);
}
select.otp-text-input{appearance:none;background-image:linear-gradient(45deg,transparent 50%, var(--op-blue) 50%),linear-gradient(135deg,var(--op-blue) 50%, transparent 50%);background-position:calc(18px) calc(50% - 3px), calc(12px) calc(50% - 3px);background-size:6px 6px, 6px 6px;background-repeat:no-repeat;padding-inline-start:34px}

/* ---------- OTP inputs ---------- */
.otp-code-fieldset{border:0;padding:0;margin:0;min-width:0}
.otp-inputs-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:18px;
}
@media (max-width:420px){
  .otp-inputs-row{gap:8px}
}
.otp-input{
  height:68px;
  width:100%;
  text-align:center;
  font-size:1.6rem;
  font-weight:800;
  color:var(--op-text)!important;
  background:var(--op-field-bg)!important;
  border:1.5px solid var(--op-border)!important;
  border-radius:20px;
  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:#bfd4fa!important}
.otp-input:focus{
  border-color:var(--op-blue)!important;
  background:var(--op-field-bg)!important;
  box-shadow:0 0 0 5px 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 5px rgba(220,38,38,.12)}

/* ---------- Error text ---------- */
.otp-error-text{
  text-align:right;
  font-size:.92rem;
  font-weight:600;
  color:var(--op-error);
  min-height:1.4rem;
  margin:10px 0 14px;
  transition:opacity .15s ease;
}
.otp-error-text.opacity-100{opacity:1}

/* ---------- Buttons ---------- */
.otp-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:58px;
  padding:0 16px;
  border:0!important;
  border-radius:18px;
  font-family:inherit;
  font-size:1rem;
  font-weight:800;
  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:linear-gradient(180deg,var(--op-blue) 0%, var(--op-blue-dark) 100%)!important;
  color:var(--op-white)!important;
  box-shadow:0 20px 34px -24px rgba(37,99,235,.68);
}
.otp-btn-primary:hover:not(:disabled),
.otp-btn-primary:focus:not(:disabled),
.otp-btn-primary:active:not(:disabled){
  background:linear-gradient(180deg,var(--op-blue-dark) 0%, var(--op-blue-dark-2) 100%)!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-flex;
  align-items:center;
  justify-content:center;
  background:none!important;
  border:0!important;
  padding:0;
  font-family:inherit;
  font-size:.94rem;
  font-weight:700;
  color:var(--op-blue)!important;
  cursor:pointer;
  text-decoration:none;
  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;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;cursor:not-allowed}

.otp-inline-actions{display:flex;justify-content:flex-start;align-items:center;margin-top:16px}
.otp-inline-actions-centered{justify-content:center}

/* ---------- Spinner ---------- */
.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;
}

/* ---------- Footer / timer ---------- */
.otp-footer{
  margin-top:18px;
  padding-top:18px;
  border-top:1px dashed #d7e4fa;
  text-align:center;
}
.otp-footer p{font-size:.95rem;color:var(--op-muted);margin:0 0 8px;line-height:1.9}
.otp-timer{font-size:.9rem;color:var(--op-muted-2)}
.otp-timer strong{color:var(--op-blue);font-weight:800}
.otp-back-link{margin-top:4px}

/* ---------- Success state ---------- */
#otp-step-success{text-align:center;padding-top:18px}
.otp-success-icon-wrap{
  width:88px;
  height:88px;
  margin:0 auto 22px;
  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:74px;
  height:74px;
  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:34px;height:34px}
.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.62rem;font-weight:800;color:var(--op-text);margin:0 0 10px}
.otp-success-subtitle{font-size:1rem;color:var(--op-muted);margin:0 0 22px;line-height:1.9}

/* ---------- Logged-in state ---------- */
.otp-already-in{
  max-width:31rem;
  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;
  box-shadow:0 16px 38px -26px rgba(15,23,42,.2);
}
.otp-already-in p{font-size:1rem;color:var(--op-muted);margin:0;line-height:1.9}
.otp-already-in .otp-btn{width:auto;display:inline-flex;margin-top:1rem;padding:0 1.5rem;min-height:48px;text-decoration:none}

/* ---------- Admin preview notice ---------- */
.otp-admin-preview-notice{
  max-width:860px;
  margin:0 auto 1rem;
  padding:.95rem 1.1rem;
  background:#fffbeb;
  border:1px solid #fde68a;
  border-radius:14px;
  color:#92400e;
  font-family:Vazirmatn,inherit;
  font-size:.86rem;
  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}

.otp-card.otp-no-side .otp-form-panel-inner{max-width:640px}
.otp-custom-html{font-size:.95rem;line-height:1.9}
.otp-custom-side-html{color:rgba(255,255,255,.94)}
.otp-custom-form-top{margin:0 0 20px}
.otp-custom-form-bottom{margin:20px 0 0}

/* ---------- Utilities ---------- */
.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}

/* ---------- Animations ---------- */
@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}}