/* Salmod toasts (assets/js/toast.js). Tokens only. Bottom centre, above the mobile bottom bar. */

/* WooCommerce's printed notices: hidden from the first paint (the toast shows them). Visually hidden, not
   display:none, so WooCommerce can still scroll to them. Off again if the toast script never runs. */
html.sm-toast-on :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup, .sc-notices, .pp-notices, .sl-notices) > :is(.woocommerce-error, .woocommerce-message, .woocommerce-info, .woocommerce-notice):not(.cart-empty),
.sm-toasted {
	position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important;
	overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important;
}

.sm-toasts {
	--sm-ease: cubic-bezier(0.23, 1, 0.32, 1);
	position: fixed; z-index: 100005; inset-inline: 0;
	bottom: calc(var(--sb-h, 0px) + 12px);
	display: flex; justify-content: center; padding: 0 12px;
	pointer-events: none;
	font-family: "Vazirmatn", Tahoma, sans-serif;
}
@media (min-width: 1025px) { .sm-toasts { bottom: 24px; } }
.sm-toasts__list { display: flex; flex-direction: column; width: min(420px, 100%); margin: 0; padding: 0; list-style: none; }

/* Each row: a grid that can close to 0 height when its toast leaves (the others slide into place). */
.sm-toast {
	display: grid; grid-template-rows: 1fr; margin: 0; padding: 0;
	transition: grid-template-rows .26s var(--sm-ease, ease);
}
.sm-toast__in { min-height: 0; overflow: visible; }
.sm-toast.is-closing { grid-template-rows: 0fr; }
.sm-toast.is-closing .sm-toast__in { overflow: hidden; }
.sm-toast__card {
	position: relative; display: flex; align-items: flex-start; gap: 10px;
	margin-top: 8px; padding: 12px 12px 12px 10px;
	border-radius: 16px; background: var(--salmod-surface); color: var(--salmod-primary);
	box-shadow: inset 0 0 0 1px var(--salmod-line-soft), 0 10px 30px -8px color-mix(in srgb, var(--salmod-primary) 28%, transparent), 0 2px 6px color-mix(in srgb, var(--salmod-primary) 8%, transparent);
	pointer-events: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
	/* Enter: from below, slightly smaller. */
	opacity: 0; transform: translate3d(0, 110%, 0) scale(.94);
	transition: transform .42s var(--sm-ease, ease), opacity .3s var(--sm-ease, ease);
}
.sm-toast.is-in .sm-toast__card { opacity: 1; transform: translate3d(var(--sm-dx, 0px), 0, 0); }
.sm-toast[data-drag] .sm-toast__card { transition: none; cursor: grabbing; opacity: var(--sm-op, 1); }
/* Leave: down + fade (timer / close button) or off to the side it was swiped to. */
.sm-toast.is-leaving .sm-toast__card { opacity: 0; transform: translate3d(0, 30%, 0) scale(.96); transition-duration: .22s; transition-timing-function: ease-in; pointer-events: none; }
.sm-toast.is-leaving.is-swiped .sm-toast__card { transform: translate3d(var(--sm-out, 110%), 0, 0); transition-duration: .24s; transition-timing-function: var(--sm-ease, ease); }
.sm-toast.is-bump .sm-toast__card { animation: sm-toast-bump .4s var(--sm-ease, ease); }
@keyframes sm-toast-bump { 30% { transform: scale(1.035); } 100% { transform: none; } }

.sm-toast__ico {
	flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
	background: var(--salmod-brand-soft); color: var(--salmod-brand-ink);
}
.sm-toast__ico svg { width: 18px; height: 18px; }
.sm-toast--success .sm-toast__ico { background: color-mix(in srgb, var(--salmod-success) 14%, transparent); color: var(--salmod-success); }
.sm-toast--error .sm-toast__ico { background: color-mix(in srgb, var(--salmod-danger) 12%, transparent); color: var(--salmod-danger); }
.sm-toast--error .sm-toast__card { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--salmod-danger) 30%, transparent), 0 10px 30px -8px color-mix(in srgb, var(--salmod-danger) 30%, transparent), 0 2px 6px color-mix(in srgb, var(--salmod-primary) 8%, transparent); }
.sm-toast.is-in .sm-toast__ico svg { animation: sm-toast-ico .5s .12s var(--sm-ease, ease) both; }
@keyframes sm-toast-ico { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }

.sm-toast__body { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-top: 3px; }
.sm-toast__text { flex: 1 1 180px; margin: 0; font-size: 14px; font-weight: 700; line-height: 1.75; text-wrap: pretty; }
.sm-toast__act {
	flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px;
	background: var(--salmod-brand-soft); color: var(--salmod-brand-ink) !important; font: inherit; font-size: 13px; font-weight: 800;
	text-decoration: none !important; cursor: pointer; transition: transform .16s var(--sm-ease, ease);
}
.sm-toast__act:active { transform: scale(.97); }
.sm-toast__x {
	flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: 0; padding: 0 !important; border: 0; border-radius: 10px;
	background: transparent; color: var(--salmod-muted-fg); cursor: pointer; transition: transform .16s var(--sm-ease, ease);
}
.sm-toast__x svg { width: 16px; height: 16px; }
.sm-toast__x:active { transform: scale(.9); }
@media (hover: hover) and (pointer: fine) {
	.sm-toast__x:hover { background: var(--salmod-field, var(--salmod-brand-soft)); color: var(--salmod-primary); }
	.sm-toast__act:hover { filter: brightness(.96); }
}
.sm-toast :focus-visible { outline: 2px solid var(--salmod-ring); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.sm-toast, .sm-toast__card { transition: opacity .2s linear !important; }
	.sm-toast__card, .sm-toast.is-leaving .sm-toast__card, .sm-toast.is-leaving.is-swiped .sm-toast__card { transform: none; }
	.sm-toast[data-drag] .sm-toast__card { transform: translate3d(var(--sm-dx, 0px), 0, 0); }
	.sm-toast.is-in .sm-toast__ico svg, .sm-toast.is-bump .sm-toast__card { animation: none; }
}

/* Notice boxes that only held converted notices: no empty gap left behind. */
html.sm-toast-on :is(.pp-notices, .sl-notices, .sc-notices) { padding: 0; margin: 0; }