/* ============================================================
   flash.css — site-wide flash messages (Django messages framework)
   rendered as bottom-centre toasts in the cellar palette.

   Replaces the old behaviour where messages queued on public pages
   (catalogue / auction / etc.) were never rendered by base_landing.html
   and leaked onto the next page that did — typically the account page.

   Class names are contracted with the inline JS in
   templates/site/partials/_flash_messages.html — keep them stable.
   Visual language matches the catalogue add-to-cellar toast (.toast).
   ============================================================ */

.flash-stack {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  flex-direction: column-reverse; /* newest sits closest to the cursor/bottom */
  align-items: stretch;
  gap: 10px;
  width: max-content;
  max-width: min(460px, calc(100vw - 32px));
  pointer-events: none;
}

.flash-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--cream, #EFE8D8);
  background: var(--forest-2, #27362C);
  border: 1px solid var(--line-forest, rgba(239, 232, 216, .16));
  border-left: 3px solid var(--cream-dim, #C2B9A2);
  padding: 12px 14px 12px 16px;
  border-radius: var(--radius-sm, 8px);
  box-shadow: 0 18px 50px rgba(20, 28, 23, .4);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .35s ease, transform .35s ease;
}
.flash-toast.is-visible { opacity: 1; transform: translateY(0); }
.flash-toast.is-leaving { opacity: 0; transform: translateY(8px); }

.flash-toast__body { flex: 1 1 auto; min-width: 0; }
.flash-toast__body a { color: var(--cream, #EFE8D8); text-decoration: underline; }
.flash-toast__body p { margin: 0; }
.flash-toast__body p + p { margin-top: 4px; }

.flash-toast__close {
  pointer-events: auto;
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--cream-dim, #C2B9A2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  margin: -2px -2px 0 0;
  transition: color .2s ease;
}
.flash-toast__close:hover { color: var(--cream, #EFE8D8); }

/* Severity accents — a coloured left edge, palette-faithful. */
.flash-toast--success { border-left-color: #7BAE8E; }
.flash-toast--error   { border-left-color: var(--oxblood, #6E2233); }
.flash-toast--warning { border-left-color: #C9A86A; }
.flash-toast--info,
.flash-toast--debug   { border-left-color: var(--cream-dim, #C2B9A2); }

@media (prefers-reduced-motion: reduce) {
  .flash-toast { transition: opacity .2s ease; transform: none; }
  .flash-toast.is-visible { transform: none; }
}