/**
 * Mobile Push Notifications - Styles for in-app notification banners
 * Works with Capacitor Push Notifications plugin
 */

/* Slide down animation for notification appearing from top */
@keyframes slideDown {
  from {
    transform: translateY(-100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Slide up animation for notification disappearing to top */
@keyframes slideUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100px);
    opacity: 0;
  }
}

/* Notification banner (appears when app is in foreground) */
.mobile-notification {
  animation: slideDown 0.3s ease;
}

/* Toast messages (success/error/info) */
.mobile-toast {
  animation: slideUp 0.3s ease;
}

/* Prevent notification from overlapping with header on mobile */
@media (max-width: 768px) {
  .mobile-notification {
    top: 70px !important; /* Below mobile header */
  }
}