/* ============================================================
   NEXO PRINT — Shared toast / notification styles
   ------------------------------------------------------------
   Single source of truth for site-wide toasts. Namespaced under
   `.nexo-toast*` so it never collides with the older per-page
   `.toast` blocks (cart.css, catalog.css, panel.css, studio.css,
   app.css) while pages are migrated over to window.nexoToast.

   Design follows the brand palette + the 4 semantic states from
   the toast lab (success / error / warning / info), RTL-first,
   Vazirmatn via --font-sans. Position: top-center.
   ============================================================ */

/* Stack: fixed, top-center, stacks downward. */
.nexo-toast-stack {
  position: fixed;
  inset-block-start: var(--space-6);
  inset-inline: 0;
  z-index: 1800;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  pointer-events: none;
}

/* One toast. */
.nexo-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  inline-size: 100%;
  max-inline-size: 400px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--nexo-toast-accent, var(--color-navy));
  border-radius: var(--radius-lg);
  background: var(--nexo-toast-bg, var(--color-surface));
  color: var(--nexo-toast-text, var(--color-text));
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
  animation: nexoToastIn var(--duration-normal) var(--ease-spring);
}
.nexo-toast.is-out {
  animation: nexoToastOut var(--duration-normal) var(--ease-out) forwards;
}

.nexo-toast__icon {
  flex: none;
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 1px;
  color: var(--nexo-toast-accent, var(--color-navy));
}
.nexo-toast__icon svg { inline-size: 100%; block-size: 100%; display: block; }

.nexo-toast__body { flex: 1; min-inline-size: 0; }
.nexo-toast__title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--nexo-toast-text, var(--color-text));
}
.nexo-toast__msg {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--nexo-toast-text, var(--color-text-muted));
  opacity: 0.9;
  margin-block-start: 2px;
  overflow-wrap: anywhere;
}

.nexo-toast__action {
  flex: none;
  align-self: center;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--nexo-toast-accent, var(--color-navy));
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid currentColor;
  border-radius: var(--radius-md);
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out);
}
.nexo-toast__action:hover { background: rgba(255, 255, 255, 0.85); }

.nexo-toast__close {
  flex: none;
  align-self: flex-start;
  inline-size: 22px;
  block-size: 22px;
  display: grid;
  place-items: center;
  color: currentColor;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.nexo-toast__close:hover { opacity: 1; }
.nexo-toast__close svg { inline-size: 15px; block-size: 15px; }

/* ── Semantic states (brand-correct palette from the toast lab) ── */
.nexo-toast--success { --nexo-toast-bg:#DCFCE7; --nexo-toast-text:#14532D; --nexo-toast-accent:#16A34A; }
.nexo-toast--error   { --nexo-toast-bg:#FEE2E2; --nexo-toast-text:#7F1D1D; --nexo-toast-accent:#DC2626; }
.nexo-toast--warning { --nexo-toast-bg:#FFEDD5; --nexo-toast-text:#7C2D12; --nexo-toast-accent:#EA580C; }
.nexo-toast--info    { --nexo-toast-bg:#CDE6F5; --nexo-toast-text:#1B3A6B; --nexo-toast-accent:#2683C5; }

@keyframes nexoToastIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes nexoToastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-12px) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
  .nexo-toast, .nexo-toast.is-out { animation: none; }
}

@media (max-width: 560px) {
  .nexo-toast-stack { inset-block-start: var(--space-4); }
  .nexo-toast { max-inline-size: none; }
}