/**
 * Notification Components
 * Toast notifications, alerts, and user feedback elements
 * Extracted from components.css for better organization
 */

/* ============================================================================
   UNIFIED NOTIFICATION STYLES
   ============================================================================ */

/**
 * Unified Notification System
 * Consolidated notification system for consistent user feedback
 */
.unified-notification {
  position: fixed;
  left: 20px;
  max-width: 350px;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  transition: all 0.3s ease;
  z-index: 9999;
}

.unified-notification.success {
  background: #10b981;
  color: white;
}

.unified-notification.error {
  background: #ef4444;
  color: white;
}

.unified-notification.warning {
  background: #f59e0b;
  color: white;
}

.unified-notification.info {
  background: #3b82f6;
  color: white;
}

/* ============================================================================
   NOTIFICATION ANIMATIONS
   ============================================================================ */

/**
 * Notification Slide Animations
 * Smooth slide-in and slide-out effects for notifications from the left
 */
.notification-slide-in {
  animation: slide-in-from-left 0.3s ease-out;
}

.notification-slide-out {
  animation: slide-out-to-left 0.3s ease-out;
}

@keyframes slide-in-from-left {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-out-to-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

/* ============================================================================
   DRAFT INDICATOR COMPONENTS
   ============================================================================ */

/**
 * Draft Indicator Animations and Styling
 * Visual feedback for draft state management
 */
@keyframes slide-in-down {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes slide-out-up {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  to {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}

/* Draft Indicator Styling */
.draft-indicator {
  pointer-events: auto;
}

.draft-indicator .bg-blue-50 {
  backdrop-filter: blur(10px);
}

/* Responsive adjustments for mobile */
@media (width <= 768px) {
  .draft-indicator {
    top: 90px !important;
    width: 95% !important;
    max-width: none !important;
  }
}

/* ============================================================================
   ENHANCED TOAST NOTIFICATIONS FROM CUSTOM.CSS
   ============================================================================ */

/* Enhanced toast notifications from custom.css */
.toast {
  background: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-gray-200);
  padding: 1rem 1.5rem;
  margin-bottom: 0.5rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  animation: slideInFromRight 0.3s ease-out;
}

.toast::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
}

/* Toast variant styles */
.toast.success::before {
  background: var(--color-success-green);
}

.toast.error::before {
  background: var(--color-error-red);
}

.toast.warning::before {
  background: var(--color-warning-yellow);
}

.toast.info::before {
  background: var(--color-info-cyan);
}

/* Dark mode toast styling */
html.dark .toast {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
  color: var(--color-dark-text);
}

/* ============================================================================
   TOAST ANIMATIONS
   ============================================================================ */

/* Slide in from right animation for toasts */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Additional animation utility classes */
.animate-slide-in-right {
  animation: slideInFromRight 0.3s ease-out;
}

/* ============================================================================
   TERMS NOTICE COMPONENT
   ============================================================================ */

/* Terms notice styles from listspot-unified.css */
.terms-notice {
  text-align: center;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border-radius: 0.5rem;
}

.terms-content {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.terms-link {
  color: var(--primary-color);
  text-decoration: underline;
  font-weight: 500;
}

.terms-link:hover {
  color: var(--primary-color);
}

/* Responsive terms notice */
@media (width <= 768px) {
  .terms-notice {
    order: -1;
    margin-bottom: 0.5rem;
  }
}

@media (width >= 769px) {
  .terms-notice {
    text-align: right;
    margin-bottom: 0.5rem;
  }
}