/**
 * SoftWin Toast Message - frontend styles
 */

@keyframes softwin-toast-enter-top {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(calc(-100% - var(--softwin-toast-offset, 24px) - 24px));
	}

	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

@keyframes softwin-toast-enter-bottom {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(calc(100% + var(--softwin-toast-offset, 24px) + 24px));
	}

	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

@keyframes softwin-toast-enter-center {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(calc(-50% - 100vh));
	}

	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(-50%);
	}
}

@keyframes softwin-toast-exit-top {
	0% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}

	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(calc(-100% - var(--softwin-toast-offset, 24px) - 24px));
	}
}

@keyframes softwin-toast-exit-bottom {
	0% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}

	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(calc(100% + var(--softwin-toast-offset, 24px) + 24px));
	}
}

@keyframes softwin-toast-exit-center {
	0% {
		opacity: 1;
		transform: translateX(-50%) translateY(-50%);
	}

	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(calc(-50% - 100vh));
	}
}

@keyframes softwin-toast-confetti-pop {
	0% {
		opacity: 1;
		transform: translate3d(-50%, 0, 0) rotate(0deg);
	}

	100% {
		opacity: 0;
		transform: translate3d(calc(-50% + var(--softwin-confetti-x)), var(--softwin-confetti-y), 0) rotate(var(--softwin-confetti-rotate));
	}
}

.softwin-toast {
	--softwin-toast-bg-rgb: 18, 18, 18;
	--softwin-toast-radius: 999px;
	--softwin-toast-icon-radius: 12px;
	--softwin-toast-title-size: 15px;
	--softwin-toast-message-size: 13px;
	--softwin-toast-title: #ffffff;
	--softwin-toast-message: #b0b0b0;
	--softwin-toast-btn-bg: #2a2a2a;
	--softwin-toast-btn-hover: #3a3a3a;
	--softwin-toast-focus: rgba(255, 255, 255, 0.45);
	--softwin-toast-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
	--softwin-toast-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--softwin-toast-enter-duration: 0.46s;
	--softwin-toast-exit-duration: 0.42s;

	position: fixed;
	left: 50%;
	z-index: 9999999;
	max-width: min(520px, calc(100vw - 32px));
	width: 100%;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	font-family: var(--softwin-toast-font);
}

.softwin-toast-confetti {
	position: fixed;
	inset: 0;
	z-index: 9999998;
	pointer-events: none;
	overflow: hidden;
}

.softwin-toast-confetti__piece {
	position: absolute;
	top: var(--softwin-confetti-top);
	left: var(--softwin-confetti-left);
	width: 8px;
	height: 12px;
	border-radius: 2px;
	background: var(--softwin-confetti-color);
	animation: softwin-toast-confetti-pop 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: var(--softwin-confetti-delay);
	will-change: transform, opacity;
}

.softwin-toast--theme-dark {
	--softwin-toast-bg-rgb: 18, 18, 18;
	--softwin-toast-title: #ffffff;
	--softwin-toast-message: #b0b0b0;
	--softwin-toast-btn-bg: rgba(255, 255, 255, 0.08);
	--softwin-toast-btn-hover: rgba(255, 255, 255, 0.14);
	--softwin-toast-focus: rgba(255, 255, 255, 0.45);
	--softwin-toast-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
}

.softwin-toast--theme-light {
	--softwin-toast-bg-rgb: 255, 255, 255;
	--softwin-toast-title: #171717;
	--softwin-toast-message: #525252;
	--softwin-toast-btn-bg: rgba(23, 23, 23, 0.08);
	--softwin-toast-btn-hover: rgba(23, 23, 23, 0.14);
	--softwin-toast-focus: rgba(23, 23, 23, 0.35);
	--softwin-toast-shadow: 0 8px 32px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.12);
}

.softwin-toast--top {
	top: var(--softwin-toast-offset, 24px);
	transform: translateX(-50%) translateY(calc(-100% - var(--softwin-toast-offset, 24px) - 24px));
}

.softwin-toast--bottom {
	bottom: var(--softwin-toast-offset, 24px);
	top: auto;
	transform: translateX(-50%) translateY(calc(100% + var(--softwin-toast-offset, 24px) + 24px));
}

.softwin-toast--center {
	top: 50%;
	bottom: auto;
	transform: translateX(-50%) translateY(-50%);
}

.softwin-toast.is-visible {
	visibility: visible;
	pointer-events: auto;
}

.softwin-toast--top.is-visible {
	animation: softwin-toast-enter-top var(--softwin-toast-enter-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.softwin-toast--bottom.is-visible {
	animation: softwin-toast-enter-bottom var(--softwin-toast-enter-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.softwin-toast--center.is-visible {
	animation: softwin-toast-enter-center var(--softwin-toast-enter-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.softwin-toast.is-hiding {
	opacity: 1;
	visibility: visible;
	pointer-events: none;
}

.softwin-toast--top.is-hiding {
	animation: softwin-toast-exit-top var(--softwin-toast-exit-duration) cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

.softwin-toast--bottom.is-hiding {
	animation: softwin-toast-exit-bottom var(--softwin-toast-exit-duration) cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

.softwin-toast--center.is-hiding {
	animation: softwin-toast-exit-center var(--softwin-toast-exit-duration) cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

.softwin-toast__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px 12px 12px;
	background: rgb(var(--softwin-toast-bg-rgb));
	border-radius: var(--softwin-toast-radius);
	box-shadow: var(--softwin-toast-shadow);
	border: 1px solid transparent;
	overflow: hidden;
}

.softwin-toast__icon-wrap {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: var(--softwin-toast-icon-radius);
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.softwin-toast__icon-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.softwin-toast__icon-default {
	width: 100%;
	height: 100%;
	color: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
}

.softwin-toast__icon-default svg {
	width: 100%;
	height: 100%;
	display: block;
}

.softwin-toast__content {
	flex: 1;
	min-width: 0;
	padding-right: 4px;
}

.softwin-toast__title {
	margin: 0 0 2px;
	font-size: 15px;
	font-size: var(--softwin-toast-title-size);
	font-weight: 700;
	line-height: 1.3;
	color: var(--softwin-toast-title);
}

.softwin-toast__message {
	margin: 0;
	font-size: 13px;
	font-size: var(--softwin-toast-message-size);
	font-weight: 400;
	line-height: 1.4;
	color: var(--softwin-toast-message);
}

.softwin-toast__btn {
	flex-shrink: 0;
	margin: 0;
	padding: 10px 18px;
	border: none;
	border-radius: 999px;
	background: var(--softwin-toast-btn-bg);
	color: var(--softwin-toast-title);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
	white-space: nowrap;
}

.softwin-toast__btn:hover,
.softwin-toast__btn:focus {
	background: var(--softwin-toast-btn-hover);
	outline: 2px solid var(--softwin-toast-focus);
	outline-offset: 2px;
}

.softwin-toast__btn:focus:not(:focus-visible) {
	outline: none;
}

.softwin-toast__btn:focus-visible {
	outline: 2px solid var(--softwin-toast-focus);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.softwin-toast {
		--softwin-toast-enter-duration: 0.15s;
	}

	.softwin-toast--top.is-visible,
	.softwin-toast--bottom.is-visible,
	.softwin-toast--center.is-visible {
		animation: none;
		opacity: 1;
	}

	.softwin-toast--top.is-visible,
	.softwin-toast--bottom.is-visible {
		transform: translateX(-50%);
	}

	.softwin-toast--center.is-visible {
		transform: translateX(-50%) translateY(-50%);
	}

	.softwin-toast.is-hiding {
		animation: none;
		opacity: 0;
	}

	.softwin-toast--top.is-hiding,
	.softwin-toast--bottom.is-hiding {
		transform: translateX(-50%);
	}

	.softwin-toast--center.is-hiding {
		transform: translateX(-50%) translateY(-50%);
	}
}

@media (max-width: 767px) {
	.softwin-toast {
		max-width: calc(100vw - 24px);
	}

	.softwin-toast__inner {
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
		padding: 14px;
	}

	.softwin-toast__icon-wrap {
		flex: 0 0 48px;
	}

	.softwin-toast__content {
		flex: 1 1 calc(100% - 60px);
		min-width: 0;
		padding-right: 0;
	}

	.softwin-toast__btn {
		flex: 1 0 100%;
		width: 100%;
	}
}