/* moc_alert.css -- isolated MOC IMBALANCE popup (NEW FEATURE = NEW STACK).
   Prefix mocal- / #mocAlertRoot to avoid any collision with existing styles. */

#mocAlertRoot{
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: center;
  pointer-events: none; z-index: 2147483600;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Arabic",sans-serif;
}
#mocAlertRoot .mocal-card{
  pointer-events: auto; margin-top: 14px; width: min(460px,94vw);
  position: relative; border-radius: 20px; overflow: hidden; cursor: pointer;
  color: #eaf2f5;
  background: linear-gradient(165deg, rgba(15,24,36,.97), rgba(8,13,20,.98));
  border: 1px solid rgba(45,212,191,.26);
  box-shadow: 0 22px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.03), 0 0 44px rgba(45,212,191,.14);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  transform: translateY(-140%); opacity: 0;
  transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
#mocAlertRoot.mocal-show .mocal-card{ transform: translateY(0); opacity: 1; }
#mocAlertRoot.mocal-hide .mocal-card{ transform: translateY(-140%); opacity: 0; }

#mocAlertRoot .mocal-accent{ height: 4px; width: 100%; background: linear-gradient(90deg,#2dd4bf,#38bdf8); }
#mocAlertRoot .mocal-accent.pos{ background: linear-gradient(90deg,#16c784,#0bd17a); }
#mocAlertRoot .mocal-accent.neg{ background: linear-gradient(90deg,#f6465d,#ff7a8a); }
#mocAlertRoot .mocal-accent.flat{ background: linear-gradient(90deg,#7d8da1,#9fb0c4); }

#mocAlertRoot .mocal-head{ display: flex; align-items: center; gap: 12px; padding: 16px 16px 6px; }
#mocAlertRoot .mocal-bell{
  font-size: 22px; line-height: 1; width: 42px; height: 42px; flex: 0 0 42px;
  display: flex; align-items: center; justify-content: center; border-radius: 12px;
  background: rgba(45,212,191,.12); border: 1px solid rgba(45,212,191,.25);
  animation: mocalPulse 1.6s ease-in-out infinite;
}
#mocAlertRoot .mocal-bell.pos{ background: rgba(22,199,132,.14); border-color: rgba(22,199,132,.3); }
#mocAlertRoot .mocal-bell.neg{ background: rgba(246,70,93,.14); border-color: rgba(246,70,93,.3); }
@keyframes mocalPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.12); } }

#mocAlertRoot .mocal-title{ flex: 1 1 auto; min-width: 0; }
#mocAlertRoot .mocal-title .en{ font-size: 16px; font-weight: 800; letter-spacing: .4px; }
#mocAlertRoot .mocal-title .ar{ font-size: 13px; font-weight: 600; color: #9fb6c9; margin-top: 1px; }

#mocAlertRoot .mocal-close{
  flex: 0 0 auto; background: rgba(255,255,255,.06); color: #cdd9e3; border: none;
  width: 28px; height: 28px; border-radius: 8px; font-size: 18px; line-height: 1; cursor: pointer;
  transition: background .15s;
}
#mocAlertRoot .mocal-close:hover{ background: rgba(255,255,255,.14); }

#mocAlertRoot .mocal-time{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 0 16px 12px; font-size: 11.5px; color: #8aa0b3;
}
#mocAlertRoot .mocal-time .dot{ opacity: .5; }
#mocAlertRoot .mocal-time .clk{ color: #aebfce; font-variant-numeric: tabular-nums; }

#mocAlertRoot .mocal-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 14px 12px;
}
#mocAlertRoot .mocal-cell{
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06);
  border-radius: 13px; padding: 10px 12px;
}
#mocAlertRoot .mocal-cell-label{ display: flex; flex-direction: column; gap: 1px; margin-bottom: 5px; }
#mocAlertRoot .mocal-cell-label .en{ font-size: 11px; font-weight: 700; color: #b8c6d4; letter-spacing: .3px; }
#mocAlertRoot .mocal-cell-label .ar{ font-size: 10.5px; color: #7f95a8; }
#mocAlertRoot .mocal-cell-val{
  font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 5px;
}
#mocAlertRoot .mocal-arrow{ font-size: 12px; }
#mocAlertRoot .mocal-cell-val.pos, #mocAlertRoot .mocal-cell-tag.pos{ color: #16c784; }
#mocAlertRoot .mocal-cell-val.neg, #mocAlertRoot .mocal-cell-tag.neg{ color: #f6465d; }
#mocAlertRoot .mocal-cell-val.flat, #mocAlertRoot .mocal-cell-tag.flat{ color: #93a4b5; }
#mocAlertRoot .mocal-cell-tag{ font-size: 10px; font-weight: 700; margin-top: 3px; letter-spacing: .4px; opacity: .92; }

#mocAlertRoot .mocal-foot{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 12px; border-top: 1px solid rgba(255,255,255,.05);
}
#mocAlertRoot .mocal-foot .brand{
  font-size: 12px; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(90deg,#2dd4bf,#38bdf8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#mocAlertRoot .mocal-foot .hint{ font-size: 10.5px; color: #7f95a8; }

#mocAlertRoot .mocal-bar{ height: 3px; width: 100%; background: rgba(255,255,255,.05); }
#mocAlertRoot .mocal-bar-fill{ height: 100%; width: 100%; background: linear-gradient(90deg,#2dd4bf,#38bdf8); }
#mocAlertRoot .mocal-bar-fill.pos{ background: linear-gradient(90deg,#16c784,#0bd17a); }
#mocAlertRoot .mocal-bar-fill.neg{ background: linear-gradient(90deg,#f6465d,#ff7a8a); }
#mocAlertRoot .mocal-bar-fill.flat{ background: linear-gradient(90deg,#7d8da1,#9fb0c4); }

@media (max-width: 380px){
  #mocAlertRoot .mocal-cell-val{ font-size: 15px; }
}
@media (prefers-reduced-motion: reduce){
  #mocAlertRoot .mocal-card{ transition: opacity .3s ease; transform: none; }
  #mocAlertRoot.mocal-show .mocal-card,
  #mocAlertRoot.mocal-hide .mocal-card{ transform: none; }
  #mocAlertRoot .mocal-bell{ animation: none; }
}