@charset "UTF-8";

/* ══ SITE POPUP — Professional Modal ════════════════════════════════════════ */
#spOverlay{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  min-height:100vh;
  z-index:99900;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  box-sizing:border-box;
  background:rgba(0,0,0,0);
  transition:background .4s ease;
  pointer-events:none;
}
#spOverlay.sp-show{
  background:rgba(4,5,10,.82);
  pointer-events:auto;
}

#spCard{
  position:relative;
  width:100%;max-width:480px;
  background:#12141e;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 24px 60px rgba(0,0,0,.7),
    0 8px 24px rgba(0,0,0,.4);
  overflow:hidden;
  max-height:88dvh;
  display:flex;flex-direction:column;
  transform:scale(.94) translateY(16px);opacity:0;
  transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s ease;
}
#spOverlay.sp-show #spCard{transform:scale(1) translateY(0);opacity:1}

/* top accent line */
#spAccent{
  height:3px;
  background:linear-gradient(90deg,#e52222 0%,#ff6b6b 50%,#e52222 100%);
  background-size:200% 100%;
  animation:spAccentMove 3s linear infinite;
  flex-shrink:0;
}
@keyframes spAccentMove{0%{background-position:0%}100%{background-position:200%}}

/* identity row */
#spIdentity{
  display:flex;align-items:center;gap:11px;
  padding:18px 22px 0;
  flex-shrink:0;
}
#spAvatar{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:#1e2130;
  border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#spAvatar img{width:100%;height:100%;object-fit:contain;border-radius:9px}
#spAvatarInitial{font-size:15px;font-weight:900;color:rgba(255,255,255,.7)}
#spBrand{font-size:11.5px;font-weight:800;color:rgba(255,255,255,.35);letter-spacing:.4px}
#spXBtn{
  margin-right:auto;
  width:26px;height:26px;border-radius:7px;border:none;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.35);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.16s;
  line-height:1;font-size:12px;
}
[dir="rtl"] #spXBtn{margin-right:auto;margin-left:0}
[dir="ltr"] #spXBtn{margin-left:auto;margin-right:0}
#spXBtn:hover{background:rgba(255,255,255,.12);color:rgba(255,255,255,.8)}

/* content */
#spContent{padding:16px 22px 22px;overflow-y:auto;flex:1}
#spTitle{
  font-size:18px;font-weight:900;color:#fff;
  line-height:1.35;margin-bottom:12px;
  letter-spacing:-.2px;
}
#spDivider{height:1px;background:rgba(255,255,255,.06);margin-bottom:14px}
#spBody{
  font-size:13.5px;
  color:rgba(255,255,255,.58);
  line-height:1.9;
  white-space:pre-line;
  margin-bottom:22px;
}
/* action buttons */
#spActions{display:flex;gap:9px;align-items:center}
#spOkBtn{
  flex:1;
  height:42px;
  border-radius:11px;border:none;
  background:#e52222;
  color:#fff;
  font-family:'Cairo',sans-serif;font-size:13.5px;font-weight:900;
  cursor:pointer;
  letter-spacing:.3px;
  transition:background .18s,box-shadow .18s,transform .12s;
  box-shadow:0 4px 16px rgba(229,34,34,.3);
}
#spOkBtn:hover{background:#c91d1d;box-shadow:0 6px 22px rgba(229,34,34,.45);transform:translateY(-1px)}
#spOkBtn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(229,34,34,.3)}
#spDismissBtn{
  height:42px;padding:0 16px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.08);
  background:transparent;
  color:rgba(255,255,255,.3);
  font-family:'Cairo',sans-serif;font-size:12.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;
  transition:border-color .16s,color .16s,background .16s;
}
#spDismissBtn:hover{border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.6);background:rgba(255,255,255,.04)}