/**
 * 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 {
  max-width: 22rem;
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-inline-start-width: 3px;
  border-inline-start-style: solid;
  color: #334155;
  box-shadow: 0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.08);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.unified-notification.success {
  border-inline-start-color: #059669;
}

.unified-notification.error {
  border-inline-start-color: #e11d48;
}

.unified-notification.warning {
  border-inline-start-color: #d97706;
}

.unified-notification.info {
  border-inline-start-color: #2563eb;
}

.unified-notification .ss-callout-icon--success {
  color: #059669;
}

.unified-notification .ss-callout-icon--error {
  color: #e11d48;
}

.unified-notification .ss-callout-icon--warning {
  color: #d97706;
}

.unified-notification .ss-callout-icon--info {
  color: #2563eb;
}

html.dark .unified-notification,
body.dark .unified-notification,
.dark .unified-notification {
  background-color: rgb(17 24 39 / 0.92);
  border-color: #334155;
  color: #e2e8f0;
}

html.dark .unified-notification .ss-callout-icon--success,
body.dark .unified-notification .ss-callout-icon--success,
.dark .unified-notification .ss-callout-icon--success {
  color: #34d399;
}

html.dark .unified-notification .ss-callout-icon--error,
body.dark .unified-notification .ss-callout-icon--error,
.dark .unified-notification .ss-callout-icon--error {
  color: #fb7185;
}

html.dark .unified-notification .ss-callout-icon--warning,
body.dark .unified-notification .ss-callout-icon--warning,
.dark .unified-notification .ss-callout-icon--warning {
  color: #fbbf24;
}

html.dark .unified-notification .ss-callout-icon--info,
body.dark .unified-notification .ss-callout-icon--info,
.dark .unified-notification .ss-callout-icon--info {
  color: #93c5fd;
}

@media (max-width: 640px) {
  /* Discover flash / DiscoverUtils toasts — keep banner compact (was nearly full-bleed) */
  #notification-container {
    left: max(1.25rem, env(safe-area-inset-left, 0px)) !important;
    right: auto !important;
    width: auto !important;
    max-width: min(16.5rem, calc(100vw - 2.5rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))) !important;
  }

  .unified-notification {
    width: fit-content;
    max-width: 100%;
    padding: 0.75rem 0.875rem;
  }
}

/* Error/warning notification containers - above nav and modals */
#error-notification-container,
.error-notification-container,
.notification-toast {
  z-index: var(--z-toast, 9999) !important;
}

@media (max-width: 640px) {
  #error-notification-container,
  .error-notification-container {
    top: max(4.5rem, calc(env(safe-area-inset-top, 0px) + 0.75rem)) !important;
    left: max(1.25rem, env(safe-area-inset-left, 0px)) !important;
    right: max(1.25rem, env(safe-area-inset-right, 0px)) !important;
    width: auto !important;
    max-width: min(16.5rem, calc(100vw - 2.5rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  .checkout-error-toast {
    width: fit-content;
    max-width: 100%;
    padding: 0.65rem 0.75rem !important;
  }

  .checkout-error-toast h3 {
    font-size: 0.8125rem;
    line-height: 1.25;
  }

  .checkout-error-toast p {
    margin-top: 0.2rem !important;
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
  }

  .checkout-error-toast .mt-3 {
    margin-top: 0.5rem !important;
  }

  .checkout-error-toast .notification-action {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
  }
}

/* ============================================================================
   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 */

/* ============================================================================
   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: var(--border-radius-base, 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;
  }
}

/* Dark overlay/text contrast: themes/dark-mode.css */

/* ============================================================================
   MESSAGE BADGE FLASH ANIMATION
   ============================================================================ */

/**
 * Industry standard yellow flash animation for new message badges
 * Provides subtle visual feedback when new messages arrive
 */
.message-badge-flash {
  animation: badgeFlash 0.6s ease-in-out;
}

@keyframes badgeFlash {
  0% {
    background-color: inherit;
    transform: scale(1);
  }
  25% {
    background-color: #ffeb3b;
    transform: scale(1.1);
  }
  50% {
    background-color: #ffc107;
    transform: scale(1.15);
  }
  75% {
    background-color: #ffeb3b;
    transform: scale(1.1);
  }
  100% {
    background-color: inherit;
    transform: scale(1);
  }
}