/* ============================================================================
   NOTIFICATIONS - Toast & Loading Indicator Styles
   ============================================================================

   Centralised styles for all notification toasts and loading indicators.
   Replaces inline styles previously scattered across JS files:
     - 01-init_map.js        (default-location notification)
     - 05-long_press_route.js (route toast)
     - 12-amenity_loading_indicator.js (loading indicator)
     - inline-init.js        (critical-error banner)

   Uses design tokens from 01-tokens/variables.css.
   Keyframe animations live in 05-utilities/animations.css.
   ============================================================================ */


/* ==========================================================================
   1. BASE TOAST - Shared foundation for all toasts
   ========================================================================== */

.notification-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cdp-color-black, #000);
  color: var(--cdp-color-white, #fff);
  padding: 10px 20px;
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm, 0.875rem);
  max-width: 90%;
  text-align: center;
  backdrop-filter: blur(var(--panel-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--panel-backdrop-blur));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 1;
  transition: opacity var(--transition-slow, 500ms) var(--easing-ease, ease);
  pointer-events: none;
}

.notification-toast--hidden {
  opacity: 0;
}


/* ==========================================================================
   2. TOAST POSITIONS - Top / Bottom variants
   ========================================================================== */

.notification-toast--top {
  top: 20px;
  z-index: var(--z-notification, 1300);
}

.notification-toast--bottom {
  bottom: 80px;
  z-index: var(--z-toast, 9000);
}


/* ==========================================================================
   3. TOAST VARIANTS - Contextual colours
   ========================================================================== */

/* Default / info (dark translucent) */
.notification-toast--info {
  background: rgba(0, 0, 0, 0.7);
}

/* Route toast (solid dark) */
.notification-toast--route {
  padding: 12px 24px;
}

/* Critical error (red) */
.notification-toast--error {
  background: var(--color-error, #dc3545);
  pointer-events: auto;
}


/* ==========================================================================
   4. CRITICAL ERROR BANNER
   ========================================================================== */

.critical-error-banner {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--color-error, #dc3545);
  color: var(--cdp-color-white, #fff);
  padding: 1rem;
  border-radius: var(--radius-md, 8px);
  z-index: var(--z-critical, 10000);
  max-width: 300px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.critical-error-banner h4 {
  margin: 0 0 0.5rem 0;
}

.critical-error-banner p {
  margin: 0;
  font-size: var(--font-size-sm, 0.9rem);
}

.critical-error-banner__refresh {
  margin-top: 0.5rem;
  background: var(--cdp-color-white, #fff);
  color: var(--color-error, #dc3545);
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}


/* ==========================================================================
   5. LOADING INDICATOR (centred overlay)
   ========================================================================== */

.loading-indicator-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: var(--cdp-color-white, #fff);
  padding: 12px 24px;
  border-radius: var(--radius-md, 8px);
  z-index: var(--z-navigation, 2000);
  display: flex;
  align-items: center;
  gap: 10px;
}

.loading-indicator-overlay__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--primary-color, #3dcc89);
  border-top-color: transparent;
  border-radius: var(--radius-circle, 50%);
  animation: rotate 1s linear infinite;
}


/* ==========================================================================
   6. TOAST ANIMATIONS
   ========================================================================== */

@keyframes toastFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes toastFadeOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
}

.notification-toast--animate-in {
  animation: toastFadeIn 0.3s var(--easing-ease, ease);
}

.notification-toast--animate-out {
  animation: toastFadeOut 0.3s var(--easing-ease, ease) forwards;
}


/* ==========================================================================
   7. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .notification-toast,
  .notification-toast--animate-in,
  .notification-toast--animate-out,
  .loading-indicator-overlay__spinner {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}