/* ==========================================================================
   NHV-17 — Wishlist and compare toasts
   ==========================================================================
   The light counterpart to the cart modal (NHV-16). Same panel language, but it
   announces and leaves rather than asking to be dismissed — adding to a wishlist
   is a repeated action and a dialog each time would be worse than the alert it
   replaces. */

/* Bottom right, not top right. Anchored to the top it covered the search field
   and the quick links — a toast that hides an interactive control is worse than
   the alert it replaced, and offsetting it by the header's height would only
   hold until the header changed. */
.nhv-toasts {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1060;
  display: flex;
  /* column-reverse, so a new toast appears ABOVE the ones already there. The
     stack is anchored to the bottom, so with a normal column a new toast would
     grow the container downward against that anchor and shove every existing
     toast up — moving the one someone is mid-way through reading. */
  flex-direction: column-reverse;
  gap: 10px;
  width: 340px;
  max-width: calc(100vw - 32px);
  /* The region is always in the DOM so screen readers keep watching it, but it
     must never sit over the page catching clicks when it is empty. */
  pointer-events: none;
}

.nhv-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  background-color: var(--nhv-navy-panel);
  background-image: linear-gradient(130deg, var(--nhv-navy-panel) 0%, var(--nhv-navy) 100%);
  border: 1px solid var(--nhv-navy-border);
  border-left: 3px solid var(--nhv-copper);
  border-radius: var(--nhv-radius-sm);
  box-shadow: 0 12px 30px rgba(2, 19, 27, 0.4);
  font-family: var(--nhv-font-body);
  font-size: var(--nhv-fs-small);
  line-height: 1.45;
  color: var(--nhv-cream);
  animation: nhv-toast-in 0.18s ease-out;
}

/* The left edge says which list it went to without needing different wording. */
.nhv-toast--wishlist { border-left-color: var(--nhv-sale-red); }
.nhv-toast--compare  { border-left-color: var(--nhv-gold); }

.nhv-toast.is-leaving {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

@keyframes nhv-toast-in {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nhv-toast { animation: none; }
  .nhv-toast.is-leaving { transition: none; }
}

.nhv-toast-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  color: var(--nhv-cream-bright);
  background: rgba(251, 243, 209, 0.12);
  border-radius: 50%;
}

.nhv-toast-body { flex: 1 1 auto; min-width: 0; }

/* Core's message carries its own links — "sign in", "view your wish list". They
   have to stay legible on the panel, not inherit the default blue. */
.nhv-toast-body a {
  color: var(--nhv-gold);
  text-decoration: underline;
}
.nhv-toast-body a:hover,
.nhv-toast-body a:focus { color: var(--nhv-cream-bright); }
.nhv-toast-body a:focus-visible { outline: 2px solid var(--nhv-copper); outline-offset: 2px; }

.nhv-toast-close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--nhv-taupe);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nhv-toast-close:hover { color: var(--nhv-cream-bright); }
.nhv-toast-close:focus-visible { outline: 2px solid var(--nhv-copper); outline-offset: 2px; }

@media (max-width: 479px) {
  .nhv-toasts { bottom: 10px; right: 10px; left: 10px; width: auto; }
}