/* English comment: Global theme tokens for the admin panel */
:root{
  --rouhi-red:#d61f2c;
  --rouhi-red2:#b91520;
  --rouhi-bg:#fff7f8;
  --rouhi-text:#1a1a1a;
  --rouhi-muted:#6b6b6b;

  /* English comment: "A bit less rounded" (still premium) */
  --rouhi-radius:18px;
  --rouhi-radius2:16px;

  --rouhi-shadow:0 22px 60px rgba(0,0,0,.10);
}

/* Full-page loading screen */
 .page-loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(17,24,39,.10), transparent 60%),
    radial-gradient(900px 420px at 100% 100%, rgba(17,24,39,.14), transparent 55%),
    linear-gradient(145deg, rgba(255,247,248,.95), rgba(255,255,255,.98));
  backdrop-filter: blur(10px);
  transition: opacity .45s ease, visibility .45s ease;
}
.page-loader-card{
  position: relative;
  width: min(420px, 100%);
  text-align: center;
  padding: 26px 24px;
  border-radius: 24px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(17,24,39,.16);
  box-shadow: 0 28px 70px rgba(15,23,42,.14);
  overflow: hidden;
}
.page-loader-card::before{
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(17,24,39,.75), rgba(17,24,39,.55));
}
.page-loader-glow{
  position: absolute;
  inset: -40px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(17,24,39,.16), transparent 68%);
  filter: blur(18px);
  z-index: -1;
}
.page-loader-logo{
  width: 72px;
  height: 72px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.16);
  box-shadow: 0 10px 30px rgba(17,24,39,.12);
}
.page-loader-title{ margin-top: 14px; font-size: 18px; font-weight: 900; color: #111827; }
.page-loader-text{ margin-top: 6px; font-size: 13px; line-height: 1.85; color: #6b7280; }
.page-loader-bar{
  margin-top: 18px;
  width: 100%;
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(17,24,39,.08);
  border: 1px solid rgba(17,24,39,.12);
}
.page-loader-bar span{
  display: block;
  height: 100%;
  width: 48%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(17,24,39,.88), rgba(17,24,39,.56));
  animation: loaderFlow 1.45s cubic-bezier(.4,0,.2,1) infinite;
  box-shadow: 0 0 14px rgba(17,24,39,.25);
}
body.is-loaded .page-loader{ opacity: 0; visibility: hidden; pointer-events: none; }

/* English comment: Helper font class */
.font-vazir{
  font-family:"Vazirmatn",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* English comment: Tailwind-friendly CSS variable colors via utility-like classes */
.text-rouhiText{ color: var(--rouhi-text); }
.text-rouhiMuted{ color: var(--rouhi-muted); }
.text-rouhiRed{ color: var(--rouhi-red); }
.border-rouhiRed\/15{ border-color: rgba(214,31,44,.15); }

/* English comment: Background */
.bg-rouhi{
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(214,31,44,.18), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(214,31,44,.12), transparent 55%),
    linear-gradient(180deg, #fff, var(--rouhi-bg));
}

/* English comment: Aura blobs */
.aura{
  position:fixed;
  inset:0;
  pointer-events:none;
  filter: blur(18px);
  opacity:.65;
  z-index:0;
}
.aura::before,
.aura::after{
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(214,31,44,.55), rgba(214,31,44,.08) 55%, transparent 70%);
}
.aura::before{ top:-90px; right:-80px; transform: rotate(12deg); }
.aura::after{ bottom:-110px; left:-70px; transform: rotate(-8deg); }

/* English comment: Shared rounding/shadow */
.rounded-rouhi{ border-radius: var(--rouhi-radius); }
.rounded-rouhi2{ border-radius: var(--rouhi-radius2); }
.shadow-rouhi{ box-shadow: var(--rouhi-shadow); }

/* English comment: Brand gradient panel */
.rouhi-brand{
  background: linear-gradient(135deg, rgba(214,31,44,.95), rgba(185,21,32,.98));
  position:relative;
}
.brand-orb{
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  top:-240px;
  left:-190px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.28), rgba(255,255,255,.08) 55%, transparent 70%);
  pointer-events:none;
}

/* English comment: Glass block inside brand */
.rouhi-glass{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
}

/* English comment: Logo badge - keeps red logo visible */
.logo-badge{
  width:54px;
  height:54px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.55);
  display:grid;
  place-items:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

/* English comment: Contact icon badge */
.icon-badge{
  width:34px;
  height:34px;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  flex:0 0 auto;
}

.contact-link{
  display:block;
  color:#fff;
  text-decoration:none;
  direction:ltr;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.98;
}
.contact-link:hover{ text-decoration:underline; }

.pill{
  font-size:12px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.20);
  opacity:.95;
  color:#fff;
}

/* English comment: Glass card on the right */
.rouhi-card{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(255,255,255,.90);
  backdrop-filter: blur(14px);
}

/* English comment: Inputs & buttons */
.rouhi-input{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  outline:none;
  font-size:14px;
  transition: .15s ease;
}
.rouhi-input:focus{
  border-color: rgba(214,31,44,.55);
  box-shadow: 0 0 0 4px rgba(214,31,44,.12);
}

.rouhi-btn{
  margin-top:6px;
  border:none;
  border-radius: 14px;
  padding:12px 14px;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  color:#fff;
  background: linear-gradient(135deg, var(--rouhi-red), var(--rouhi-red2));
  box-shadow: 0 14px 30px rgba(214,31,44,.22);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.rouhi-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(214,31,44,.26);
  filter: saturate(1.05);
}
.rouhi-btn:active{ transform: translateY(0px); }

.rouhi-btn-secondary{
  border:none;
  background: transparent;
  color: var(--rouhi-red);
  font-weight: 800;
  font-size: 13px;
  cursor:pointer;
  padding:10px 12px;
  border-radius: 12px;
}
.rouhi-btn-secondary:hover{
  background: rgba(214,31,44,.08);
}

.rouhi-error{
  margin-top: 6px;
  font-size: 12px;
  color: #a3121b;
  background: rgba(214,31,44,.08);
  border: 1px solid rgba(214,31,44,.18);
  padding: 10px 12px;
  border-radius: 12px;
}

.rouhi-user-info{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.72);
}

.otp-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.otp-input{
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  padding: 12px 0;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.1);
  background: rgba(255,255,255,.9);
  transition: .15s ease;
}
.otp-input:focus{
  border-color: rgba(214,31,44,.55);
  box-shadow: 0 0 0 4px rgba(214,31,44,.12);
  outline: none;
}

/* English comment: Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  .rouhi-btn{ transition:none; }
  .rouhi-input{ transition:none; }
}
/* English comment: Slightly tighter spacing on small screens */
@media (max-width: 640px){
  .logo-badge{ width:50px; height:50px; border-radius: 13px; }
}

@keyframes loaderFlow{
  0%{ transform: translateX(-20%); opacity: .6; }
  50%{ transform: translateX(60%); opacity: 1; }
  100%{ transform: translateX(140%); opacity: .6; }
}

.password-field-wrap{
  position:relative;
  isolation:isolate;
}
.password-field-input{
  padding-inline-end:64px;
}
.password-toggle-btn{
  position:absolute;
  inset-inline-end:8px;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:none;
  border-radius:14px;
  background:rgba(214,31,44,.08);
  color:var(--rouhi-red2);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:.15s ease;
  z-index:3;
  pointer-events:auto;
  box-shadow:0 8px 20px rgba(214,31,44,.12);
}
.password-toggle-btn:hover,.password-toggle-btn:focus-visible{ background:rgba(214,31,44,.16); outline:none; box-shadow:0 0 0 4px rgba(214,31,44,.12), 0 10px 22px rgba(214,31,44,.16); }
.password-toggle-btn svg{ width:20px; height:20px; }
.rouhi-link-btn{
  border:none;
  background:rgba(214,31,44,.08);
  color:var(--rouhi-red2);
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  padding:8px 12px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.rouhi-link-btn:hover,.rouhi-link-btn:focus-visible{ text-decoration:none; background:rgba(214,31,44,.14); outline:none; }
.otp-phone-meta{
  border:1px solid rgba(214,31,44,.14);
  background:rgba(255,247,248,.82);
  border-radius:14px;
  padding:12px 14px;
}
.otp-phone-meta-label{
  font-size:11px;
  color:var(--rouhi-muted);
}
.otp-phone-meta-value{
  margin-top:4px;
  font-size:15px;
  font-weight:900;
  color:var(--rouhi-text);
  direction:ltr;
  text-align:left;
}
.otp-phone-meta-help{
  margin-top:6px;
  font-size:11px;
  color:var(--rouhi-muted);
}