/**
 * Solera Checkout - Global Toast Notification Styles
 *
 * Reusable toast component for displaying success, error, warning, and info
 * notifications across all checkout flows.
 *
 * Depends on: main.css (CSS custom properties).
 * Does NOT modify existing coupon notification styles.
 *
 * @package SoleraCheckout
 */

/* ==========================================================================
   Local colour tokens — one block per level.
   Ribbon = left accent strip; icon = SVG fill; text/bg/border = message area.
   ========================================================================== */
:root {
  /* Success */
  --toast-success-ribbon:  #15803d;
  --toast-success-icon:    #15803d;
  --toast-success-bg:      #f0fdf4;
  --toast-success-border:  #86efac;
  --toast-success-text:    #14532d;

  /* Error */
  --toast-error-ribbon:    #dc2626;
  --toast-error-icon:      #dc2626;
  --toast-error-bg:        #fef2f2;
  --toast-error-border:    #fca5a5;
  --toast-error-text:      #7f1d1d;

  /* Warning */
  --toast-warning-ribbon:  #d97706;
  --toast-warning-icon:    #d97706;
  --toast-warning-bg:      #fffbeb;
  --toast-warning-border:  #fcd34d;
  --toast-warning-text:    #78350f;

  /* Info */
  --toast-info-ribbon:     #2169D9;
  --toast-info-icon:       #2169D9;
  --toast-info-bg:         #EBF3FD;
  --toast-info-border:     #93c5fd;
  --toast-info-text:       #1e3a5f;
}

/* ==========================================================================
   Entry / exit keyframes
   ========================================================================== */
@keyframes solera-toast-in {
  from {
    opacity: 0;
    transform: translateX(calc(100% + var(--space-lg)));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes solera-toast-out {
  from {
    opacity: 1;
    transform: translateX(0);
    max-height: 12.5rem;
    margin-bottom: var(--space-sm);
  }
  to {
    opacity: 0;
    transform: translateX(calc(100% + var(--space-lg)));
    max-height: 0;
    margin-bottom: 0;
  }
}

/* ==========================================================================
   Container — fixed top-right, stacks toasts vertically.
   pointer-events: none so the region doesn't block underlying page clicks.
   z-index 10001 sits above the Adyen checkout modal (10000).
   ========================================================================== */
#solera-toast-container {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
  /* Limit width so toasts don't bleed on narrow viewports */
  max-width: calc(100vw - var(--space-lg) * 2);
}

/* ==========================================================================
   Level modifiers — set scoped properties once; shared rules consume them.
   ========================================================================== */
.solera-toast--success { --_ribbon: var(--toast-success-ribbon); --_icon: var(--toast-success-icon); --_text: var(--toast-success-text); --_bg: var(--toast-success-bg); --_border: var(--toast-success-border); }
.solera-toast--error   { --_ribbon: var(--toast-error-ribbon);   --_icon: var(--toast-error-icon);   --_text: var(--toast-error-text);   --_bg: var(--toast-error-bg);   --_border: var(--toast-error-border);   }
.solera-toast--warning { --_ribbon: var(--toast-warning-ribbon); --_icon: var(--toast-warning-icon); --_text: var(--toast-warning-text); --_bg: var(--toast-warning-bg); --_border: var(--toast-warning-border); }
.solera-toast--info    { --_ribbon: var(--toast-info-ribbon);    --_icon: var(--toast-info-icon);    --_text: var(--toast-info-text);    --_bg: var(--toast-info-bg);    --_border: var(--toast-info-border);    }

/* ==========================================================================
   Individual toast card
   ========================================================================== */
.solera-toast {
  display: flex;
  align-items: center;
  min-width: 35rem;
  max-width: 35.25rem;
  width: 100%;
  background-color: var(--_bg);
  border: 1px solid var(--_border);
  border-left: 4px solid var(--_ribbon);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: solera-toast-in 0.25s ease forwards;
  max-height: 12.5rem;
  gap: var(--space-sm);
}

.solera-toast.solera-toast--entered { animation: none; }
.solera-toast--dismissing           { animation: solera-toast-out 0.3s ease forwards !important; }

/* ==========================================================================
   Icon, message — consume scoped properties set by the modifier
   ========================================================================== */
.solera-toast__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 0 0 var(--space-sm);
  width: 3rem;
  color: var(--_icon);
}

.solera-toast__icon svg {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.solera-toast__message {
  flex: 1;
  margin: 0;
  padding: var(--space-sm) var(--space-xs) var(--space-sm) var(--space-sm);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
  word-break: break-word;
  color: var(--_text);
}

/* ==========================================================================
   Close button — compact square, subtle hover background
   ========================================================================== */
.solera-toast__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 var(--space-xs) 0 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  color: var(--solera-silver);
  font-size: 1.5rem;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.solera-toast__close:hover {
  background-color: rgba(0, 0, 0, 0.08);
  color: var(--solera-shark);
}

.solera-toast__close:focus-visible {
  outline: 0.125rem solid var(--solera-blue);
  outline-offset: 0.125rem;
}

/* ==========================================================================
   Responsive — collapse to full width on narrow viewports
   ========================================================================== */
@media (max-width: 480px) {
  #solera-toast-container {
    top: var(--space-sm);
    right: var(--space-sm);
    left: var(--space-sm);
    max-width: none;
  }

  .solera-toast {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}