/* Toast region (a popover, so it renders above open dialogs). */
.toasts {
  position: fixed; inset: auto 0 24px 0; margin: 0 auto;
  width: fit-content; max-width: calc(100% - 32px);
  padding: 0; border: 0; background: transparent; overflow: visible;
  display: grid; gap: 10px; justify-items: center;
}
.toasts:not(:popover-open):empty { display: none; }
@media (max-width: 600px) {
  .toasts { bottom: calc(var(--tabbar-h) + 80px); } /* above the tab bar and the floating WhatsApp button */
}

.toast {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 12px; border-radius: var(--radius);
  background: var(--color-ink); color: #fff; box-shadow: var(--shadow-lg);
  font-size: 14px; animation: rise-in .25s var(--ease);
}
.toast b { font-weight: 700; }
.toast__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-success); flex: none; }
.toast__icon .icon { width: 16px; height: 16px; stroke-width: 2.5; }
.toast__action { margin-left: 6px; padding: 6px 10px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.toast__action:hover { background: rgba(255, 255, 255, .2); }
.toast.out { opacity: 0; transform: translateY(8px); transition: .25s; }