/* MUART.PL — toasty: wspólne dla sklepu (muart.css) i panelu (admin.css); znacznik w partials/toasts.php, logika w js/toast.js.
   Używa zmiennych strony: --ink, --muted (+ --pad na telefonie, w panelu domyślnie 1rem). */

/* ---------- toasty [data-toasts]: komunikaty po akcji (koszyk, formularze, panel) ----------
   Jasna karta na jasnej stronie — głębię daje warstwowy cień. Akcent: rozsypany puder (img/toast-puder.webp, źródło
   zrodla/materialy/toast-puder.png) wysypuje się poza lewą krawędź; przy błędzie przybarwiony na róż-czerwień.
   Przy pojawieniu puder „rozciera się” od lewej. Kolor tylko wspiera treść — rodzaj komunikatu niesie tekst (role alert/status). */
.toasts {
  position: fixed; z-index: 90; top: calc(0.75rem + env(safe-area-inset-top)); left: var(--pad, 1rem); right: var(--pad, 1rem);
  display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none;
}
@media (min-width: 64em) { .toasts { left: auto; width: 23rem; } }
/* w panelu koszyka (modalny <dialog> zasłania resztę strony): pod nagłówkiem panelu */
.toasts--panel { position: absolute; top: 4.25rem; left: 1.25rem; right: 1.25rem; width: auto; }
.toast {
  position: relative; display: flex; align-items: center; gap: 0.5rem; min-height: 3.5rem;
  padding: 0.625rem 0.25rem 0.625rem 4.875rem;
  background: #fff; color: var(--ink); border: 1px solid rgb(49 53 55 / 0.07);
  box-shadow: 0 1px 2px rgb(49 53 55 / 0.05), 0 8px 16px -8px rgb(49 53 55 / 0.12), 0 24px 48px -20px rgb(49 53 55 / 0.3);
  pointer-events: auto;
}
.toast__swatch {
  position: absolute; left: -0.75rem; top: 50%; width: 5.25rem; aspect-ratio: 168 / 124; translate: 0 -50%;
  background: url("../img/toast-puder.webp") center / contain no-repeat;
}
.toast--error .toast__swatch { filter: hue-rotate(-28deg) saturate(2.6) brightness(0.84); }
.toast__text { flex: 1; padding-block: 0.25rem; font-size: 0.9375rem; line-height: 1.4; }
.toast__close { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: none; color: var(--muted); opacity: 0.7; cursor: pointer; transition: opacity 180ms ease; }
.toast__close .icon { width: 0.875rem; height: 0.875rem; }
.toast__close:hover, .toast__close:focus-visible { opacity: 1; }
html:not(.js) .toast__close { display: none; }  /* bez JS toast zostaje na ekranie i nie ma czym go zamknąć */
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in 280ms cubic-bezier(0.16, 1, 0.3, 1); }
  .toast__swatch { animation: swatch 700ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; }
  .toast.is-leaving { animation: toast-out 200ms ease forwards; }
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-0.5rem); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-0.25rem); } }
@keyframes swatch { from { clip-path: inset(0 100% 0 0); } }

/* przycisk akcji w toaście (np. „Przedłuż” sesję — js/session.js) */
.toast__action { flex: none; margin-left: 0.25rem; padding: 0.4rem 0.75rem; border: 0; border-radius: 4px; background: var(--ink, #313537); color: #fff;
  font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.toast__action:hover { opacity: 0.88; }