/* =========================================================
   App alert — SweetAlert jaisa custom popup (user side). JS: assets/js/app-alert.js
   Error / warning: user khud band kare. Success / info: OK ya ~2.5s baad khud.
   ========================================================= */
.app-alert-backdrop{
  position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(15,30,36,.45); opacity:0; transition:opacity .18s ease;
}
.app-alert-backdrop.is-open{ opacity:1; }

.app-alert{
  position:relative; width:100%; max-width:380px; background:#fff; border-radius:18px;
  padding:28px 24px 22px; text-align:center; box-shadow:0 24px 60px rgba(15,30,36,.25);
  transform:translateY(12px) scale(.96); transition:transform .2s ease; overflow:hidden;
}
.app-alert-backdrop.is-open .app-alert{ transform:none; }

.app-alert-close{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border:0; border-radius:50%;
  background:transparent; color:#9aa9ae; font-size:16px; cursor:pointer;
}
.app-alert-close:hover{ background:#f1f5f7; color:#4b5b61; }
.app-alert-close:focus{ outline:none; }

.app-alert-icon{
  width:68px; height:68px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:30px; animation:app-alert-pop .35s ease;
}
.app-alert.is-success .app-alert-icon{ background:#e6f7ee; color:#138a4a; }
.app-alert.is-error   .app-alert-icon{ background:#fdecec; color:#d64545; }
.app-alert.is-warning .app-alert-icon{ background:#fff4db; color:#c98a00; }
.app-alert.is-info    .app-alert-icon{ background:rgba(var(--c-primary-rgb),.12); color:var(--c-primary-dark); }

.app-alert-title{ font-size:19px; font-weight:800; color:#0f1e24; margin:0 0 6px; }
.app-alert-msg{ font-size:14.5px; color:#5a6b72; line-height:1.55; margin:0 0 20px; word-break:break-word; }

.app-alert-btn{
  min-width:120px; height:42px; padding:0 22px; border:0; border-radius:10px; font-weight:700; font-size:14.5px;
  cursor:pointer; color:#fff; background:var(--c-primary); transition:background .15s;
}
.app-alert-btn:hover{ background:var(--c-primary-dark); }
.app-alert-btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(var(--c-primary-rgb),.25); }
.app-alert.is-success .app-alert-btn{ background:#1fae62; }
.app-alert.is-success .app-alert-btn:hover{ background:#178f50; }
.app-alert.is-success .app-alert-btn:focus{ box-shadow:0 0 0 3px rgba(31,174,98,.25); }
.app-alert.is-error .app-alert-btn{ background:#e5484d; }
.app-alert.is-error .app-alert-btn:hover{ background:#cf3a3f; }
.app-alert.is-error .app-alert-btn:focus{ box-shadow:0 0 0 3px rgba(229,72,77,.25); }

/* success / info auto-close ki progress line */
.app-alert-timer{ position:absolute; left:0; bottom:0; height:3px; background:currentColor; width:100%; }
.app-alert.is-success .app-alert-timer{ color:#1fae62; }
.app-alert.is-info    .app-alert-timer{ color:var(--c-primary); }
.app-alert-timer.is-running{ transition:width linear; width:0; }

@keyframes app-alert-pop{ 0%{ transform:scale(.5); opacity:0; } 70%{ transform:scale(1.08); opacity:1; } 100%{ transform:scale(1); } }

@media (max-width:420px){
  .app-alert{ padding:24px 18px 18px; }
  .app-alert-btn{ width:100%; }
}