/* ============================================================
   THE TOAST — ONE component, every surface.
   ------------------------------------------------------------
   Extracted from css/sspanel/panel-v2-core.css, where it was scoped
   body.pnv2 and therefore existed only inside the customer panel. The
   sign-in page and the order/checkout page are neither pnv2 nor dsv2, so
   the highest-value pages on the site had no toast at all and still put
   raw browser alert() modals in front of paying customers.

   Selectors carry NO body prefix on purpose: .pv2-toast* are unique
   component classnames, so the sheet is safe to load on any surface and
   the component cannot fork again. Every --pv2-* token carries a literal
   fallback for exactly that reason - a page with no panel token layer
   still renders the toast correctly.

   Behaviour + the alert() shim: js/sspanel/panel-v2-core.js
   Public API: window.pv2Toast(message, variant, { title, duration })
   ============================================================ */
/* ---------- toast system (append-only section — pv2Toast + alert() shim) ----------
   Bottom-center stack, dark raised chrome matching the ticket-submit toast
   (panel-v2-support.css): --pv2-raised, strong border, 10px radius, deep shadow.
   Variants carry a left accent edge + icon color. */
.pv2-toasts {
	position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	z-index: 2100; /* above modals (1050) + backdrops — a toast must never hide */
	width: max-content; max-width: min(560px, calc(100vw - 32px));
	pointer-events: none;
}
.pv2-toast {
	display: flex; align-items: flex-start; gap: 11px;
	background: var(--pv2-raised, #252526); border: 1px solid var(--pv2-border-strong, #3a3a3b);
	border-left-width: 3px; border-left-color: var(--pv2-info, #5bc0de);
	border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
	padding: 11px 12px 12px 15px; max-width: 100%;
	pointer-events: auto;
	opacity: 0; transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease;
}
.pv2-toast.in { opacity: 1; transform: none; }
.pv2-toast.out { opacity: 0; transform: translateY(6px); }
.pv2-toast-ico { font-size: 15px; margin-top: 2px; flex-shrink: 0; color: var(--pv2-info, #5bc0de); }
.pv2-toast.success { border-left-color: var(--pv2-ok, #64d977); }
.pv2-toast.success .pv2-toast-ico { color: var(--pv2-ok, #64d977); }
.pv2-toast.warn { border-left-color: var(--pv2-warn, #e0a33a); }
.pv2-toast.warn .pv2-toast-ico { color: var(--pv2-warn, #e0a33a); }
.pv2-toast.danger { border-left-color: var(--pv2-danger, #f25757); }
.pv2-toast.danger .pv2-toast-ico { color: var(--pv2-danger, #f25757); }
.pv2-toast-body { min-width: 0; }
.pv2-toast-title {
	font: 600 12px 'Open Sans', Arial, sans-serif; color: #fff;
	letter-spacing: .02em; margin-bottom: 2px;
}
.pv2-toast-msg {
	color: var(--pv2-text-soft, #c9c9ca); font-size: 13px; line-height: 1.5;
	white-space: pre-line; /* classic alert() strings carry \n formatting */
	overflow-wrap: break-word;
}
.pv2-toast-x {
	flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; margin-left: 2px; padding: 0;
	background: transparent; border: 0; border-radius: var(--pv2-radius, 4px);
	color: var(--pv2-text-dim, #8a8a8b); font-size: 12px; cursor: pointer;
	transition: color .12s, background-color .12s;
}
.pv2-toast-x:hover { color: #fff; background: var(--pv2-hover, #2f2f30); }
@media (max-width: 480px) {
	.pv2-toasts { bottom: 14px; max-width: calc(100vw - 20px); }
}