/* ===============================================
   maintenance.css - ZHIWAR Website
   تایبەتە بە پەیجی چاکردن — جیاکراوەتەوە
   =============================================== */

#mnt-overlay {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: #020617; overflow: hidden;
  font-family: 'Noto Sans Arabic', sans-serif; direction: rtl;
}

/* Background */
.mnt-bg   { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mnt-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(56,189,248,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.04) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 20s linear infinite;
}
@keyframes gridMove { to { transform: translate(50px,50px); } }

.mnt-orb { position:absolute; border-radius:50%; filter:blur(80px); animation:orbFloat 8s ease-in-out infinite; }
.mnt-orb-1 { width:500px; height:500px; background:rgba(56,189,248,.09); top:-200px; right:-100px; }
.mnt-orb-2 { width:400px; height:400px; background:rgba(168,85,247,.07); bottom:-150px; left:-100px; animation-delay:-3s; }
.mnt-orb-3 { width:300px; height:300px; background:rgba(14,165,233,.07); top:40%; left:50%; animation-delay:-5s; }
@keyframes orbFloat { 0%,100%{transform:scale(1);} 50%{transform:scale(1.12) translate(15px,-15px);} }

.mnt-particle { position:absolute; border-radius:50%; background:rgba(56,189,248,.5); animation:particleUp linear infinite; }
@keyframes particleUp {
  0%   { transform:translateY(110vh) rotate(0);    opacity:0; }
  8%   { opacity:1; }
  92%  { opacity:1; }
  100% { transform:translateY(-80px) rotate(720deg); opacity:0; }
}

/* Content */
.mnt-content {
  position:relative; z-index:10; text-align:center;
  padding:2rem; max-width:700px; width:100%;
  display:flex; flex-direction:column; align-items:center; gap:2rem;
}

/* Icon */
.mnt-icon-wrap { position:relative; width:120px; height:120px; display:flex; align-items:center; justify-content:center; }
.mnt-ring { position:absolute; border-radius:50%; border:1px solid; animation:ringRotate linear infinite; }
.mnt-ring-1 { width:120px; height:120px; border-color:rgba(56,189,248,.3);  animation-duration:12s; }
.mnt-ring-2 { width:90px;  height:90px;  border-color:rgba(168,85,247,.25); animation-duration:8s; animation-direction:reverse; }
.mnt-ring-3 { width:60px;  height:60px;  border-color:rgba(56,189,248,.2);  animation-duration:5s; }
@keyframes ringRotate { to { transform:rotate(360deg); } }

.mnt-icon-svg { width:64px; height:64px; animation:iconPulse 3s ease-in-out infinite; }
@keyframes iconPulse {
  0%,100%{ filter:drop-shadow(0 0 10px rgba(56,189,248,.5)); }
  50%    { filter:drop-shadow(0 0 22px rgba(56,189,248,.9)); }
}

/* Badge + Title */
.mnt-badge {
  display:inline-block; background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.3);
  color:#38bdf8; padding:6px 20px; border-radius:999px; font-size:.9rem;
  margin-bottom:1rem; animation:badgeGlow 2s ease-in-out infinite;
}
@keyframes badgeGlow { 50%{ box-shadow:0 0 15px rgba(56,189,248,.35); } }

.mnt-title {
  font-size:clamp(1.8rem,5vw,2.8rem); font-weight:900;
  background:linear-gradient(135deg,#fff 0%,#38bdf8 50%,#a855f7 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; line-height:1.3; margin-bottom:.75rem;
  animation:fadeUp .8s cubic-bezier(.16,1,.3,1) both;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

.mnt-sub {
  color:#94a3b8; font-size:clamp(.95rem,2.5vw,1.1rem); line-height:1.7;
  max-width:500px; animation:fadeUp .8s .15s cubic-bezier(.16,1,.3,1) both;
}

/* Timer */
.mnt-timer-wrap  { animation:fadeUp .8s .3s cubic-bezier(.16,1,.3,1) both; }
.mnt-timer-label { color:#64748b; font-size:.9rem; margin-bottom:1rem; }
.mnt-timer { display:flex; gap:.5rem; align-items:center; justify-content:center; }
.mnt-time-box {
  background:rgba(255,255,255,.04); border:1px solid rgba(56,189,248,.15);
  border-radius:12px; padding:1rem 1.2rem; min-width:75px; transition:all .3s;
}
.mnt-time-box:hover { background:rgba(56,189,248,.08); border-color:rgba(56,189,248,.3); }
.mnt-num  { font-size:clamp(1.8rem,4vw,2.5rem); font-weight:900; color:#38bdf8; line-height:1; font-variant-numeric:tabular-nums; }
.mnt-lbl  { color:#64748b; font-size:.75rem; margin-top:.4rem; }
.mnt-sep  { font-size:2rem; color:rgba(56,189,248,.4); font-weight:900; margin-bottom:1.2rem; animation:blink 1s ease-in-out infinite; }
@keyframes blink { 50%{opacity:.15;} }

/* Contact */
.mnt-contact-wrap { animation:fadeUp .8s .4s cubic-bezier(.16,1,.3,1) both; }
.mnt-contact-lbl  { color:#64748b; font-size:.9rem; margin-bottom:1rem; }
.mnt-links { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.mnt-link {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.2rem; border-radius:10px; text-decoration:none;
  font-size:.9rem; font-weight:500; transition:all .3s; border:1px solid transparent;
}
.mnt-link .material-icons { font-size:1.1rem; }
.mnt-link:hover { transform:translateY(-3px); filter:brightness(1.2); box-shadow:0 8px 20px rgba(0,0,0,.3); }
.lk-email { background:rgba(56,189,248,.1);  color:#38bdf8; border-color:rgba(56,189,248,.2); }
.lk-yt    { background:rgba(239,68,68,.1);   color:#f87171; border-color:rgba(239,68,68,.2); }
.lk-fb    { background:rgba(59,130,246,.1);  color:#60a5fa; border-color:rgba(59,130,246,.2); }
.lk-sc    { background:rgba(250,204,21,.1);  color:#fde68a; border-color:rgba(250,204,21,.2); }

/* Progress bar */
.mnt-prog-wrap  { width:100%; max-width:400px; animation:fadeUp .8s .5s cubic-bezier(.16,1,.3,1) both; }
.mnt-prog-bar   { height:4px; background:rgba(255,255,255,.06); border-radius:999px; position:relative; margin-bottom:.75rem; overflow:visible; }
.mnt-prog-fill  { height:100%; background:linear-gradient(90deg,#38bdf8,#a855f7); border-radius:999px; animation:progAnim 4s ease-in-out infinite; }
.mnt-prog-glow  { position:absolute; top:-3px; left:0; height:10px; background:linear-gradient(90deg,#38bdf8,#a855f7); border-radius:999px; filter:blur(4px); opacity:.5; animation:progAnim 4s ease-in-out infinite; }
@keyframes progAnim { 0%,100%{width:15%} 50%{width:75%} }
.mnt-prog-text  { color:#475569; font-size:.8rem; }

/* Mobile */
@media(max-width:480px){
  .mnt-time-box { min-width:58px; padding:.7rem .8rem; }
  .mnt-link     { padding:.5rem .9rem; font-size:.82rem; }
  .mnt-links    { gap:.5rem; }
}