/* assets/css/binders/alerts.css */
/* Make #zbd-alerts an overlay fixed at bottom center, so it doesn't push layout. */

#zbd-alerts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: min(600px, calc(100% - 2rem));
  z-index: 1080;               /* above content, below modals if you use 1050/1100 scale */
  pointer-events: none;        /* clicks pass through except on alerts themselves */
}

#zbd-alerts .alert {
  pointer-events: auto;        /* allow close button */
  margin-bottom: 8px;
  box-shadow:
    0 8px 16px rgba(0,0,0,.3),
    0 0 0 1px rgba(255,255,255,.05) inset;
}

@media (max-width: 480px) {
  #zbd-alerts { bottom: 16px; }
}