/**
 * KS Toast — transient notification styles (see ks-toast.js).
 *
 * Every value is a --kst-* custom property so the look can be retuned live from
 * the Customizer's Additional CSS without touching this file. Accent colours
 * fall back to the Elementor/Botiga globals the rest of the UI uses.
 */

:root {
	--kst-bg: #ffffff;
	--kst-text: #1a1a1a;
	--kst-muted: #6a6a6a;
	--kst-border: #ececec;
	--kst-radius: 12px;
	--kst-shadow: 0 10px 30px -8px rgba(20, 20, 20, 0.28);
	--kst-z: 100002;                                   /* above popup (100001) + side cart (99999) */
	--kst-gap: 12px;
	--kst-max-width: 380px;
	--kst-transition: 0.26s cubic-bezier(0.22, 1, 0.36, 1);

	--kst-success: #1f9d55;
	--kst-info: var(--bt-color-primary, #d35400);
	--kst-warning: #c77700;
	--kst-error: #e04434;
}

/* Live-region stacks. Polite (success/info) and assertive (warning/error) are
   separate DOM nodes for a11y but visually share the top-right column. */
.ks-toast-region {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: var(--kst-z);
	display: flex;
	flex-direction: column;
	gap: var(--kst-gap);
	width: min(var(--kst-max-width), calc(100vw - 32px));
	pointer-events: none; /* only the toasts themselves are interactive */
	margin: 0;
	padding: 0;
}

.ks-toast-region--assertive {
	/* Errors sit slightly higher so they read first when both stacks show. */
	top: 20px;
}

.ks-toast {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--kst-bg);
	color: var(--kst-text);
	border: 1px solid var(--kst-border);
	border-left: 4px solid var(--kst-success);
	border-radius: var(--kst-radius);
	box-shadow: var(--kst-shadow);
	padding: 13px 14px;
	opacity: 0;
	transform: translateX(24px);
	transition: opacity var(--kst-transition), transform var(--kst-transition), margin var(--kst-transition);
}

.ks-toast--in {
	opacity: 1;
	transform: translateX(0);
}

.ks-toast--leaving {
	opacity: 0;
	transform: translateX(24px);
	/* Collapse the gap it leaves as it animates out. */
	margin-top: calc((var(--kst-gap) + 100%) * -1);
	pointer-events: none;
}

.ks-toast--success { border-left-color: var(--kst-success); }
.ks-toast--info    { border-left-color: var(--kst-info); }
.ks-toast--warning { border-left-color: var(--kst-warning); }
.ks-toast--error   { border-left-color: var(--kst-error); }

.ks-toast__icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
}

.ks-toast__icon svg { width: 22px; height: 22px; display: block; }
.ks-toast--success .ks-toast__icon { color: var(--kst-success); }
.ks-toast--info .ks-toast__icon    { color: var(--kst-info); }
.ks-toast--warning .ks-toast__icon { color: var(--kst-warning); }
.ks-toast--error .ks-toast__icon   { color: var(--kst-error); }

.ks-toast__body {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.94rem;
	line-height: 1.4;
}

.ks-toast__title {
	font-weight: 600;
	margin-bottom: 2px;
}

.ks-toast__msg {
	color: var(--kst-text);
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.ks-toast__close {
	flex: 0 0 auto;
	appearance: none;
	background: transparent;
	border: 0;
	padding: 2px;
	margin: -2px -2px 0 0;
	cursor: pointer;
	color: var(--kst-muted);
	line-height: 0;
	border-radius: 6px;
	transition: color 0.15s ease, background 0.15s ease;
}

.ks-toast__close svg { width: 16px; height: 16px; display: block; }
.ks-toast__close:hover,
.ks-toast__close:focus-visible { color: var(--kst-text); background: rgba(0, 0, 0, 0.05); }

/* Bottom-center on phones: closer to the thumb, out of the header's way. */
@media (max-width: 600px) {
	.ks-toast-region {
		top: auto;
		bottom: 16px;
		right: 50%;
		transform: translateX(50%);
		width: calc(100vw - 24px);
		align-items: stretch;
	}
	.ks-toast,
	.ks-toast--leaving { transform: translateY(24px); }
	.ks-toast--in { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.ks-toast { transition: opacity 0.12s linear; transform: none; }
	.ks-toast--in { transform: none; }
	.ks-toast--leaving { transform: none; margin-top: 0; }
}