/*
   LuckyBet777 — Toast Notifications
   Stacked, auto-dismissing toasts with a draining duration bar.
   Theme-aware via the global CSS variables (variables.css).
   Paired with assets/js/core/toast.js.
*/

.toast-container {
	position: fixed;
	top: 5.25rem;
	right: 1rem;
	z-index: 1400;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: min(24rem, calc(100vw - 2rem));
	pointer-events: none;
}

/* Desktop: clear the taller fixed header */
@media (min-width: 48rem) {
	.toast-container {
		top: 8.25rem;
		right: 1.5rem;
		width: 24rem;
	}
}

/* Wrapper collapses height + margin on exit so the stack slides up smoothly */
.toast-wrap {
	max-width: 100%;
	margin-bottom: 0.75rem;
	max-height: 12rem;
	pointer-events: auto;
	transition:
		max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
		margin-bottom 0.42s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.35s ease;
}
.toast-wrap.is-leaving { overflow: hidden; max-height: 0; margin-bottom: 0; opacity: 0; }

.toast {
	--toast-accent: var(--gold);
	--toast-accent-rgb: var(--gold-rgb);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 0.875rem;
	min-width: 15rem;
	max-width: 100%;
	padding: 0.875rem 1rem;
	border-radius: 0.75rem;
	background:
		linear-gradient(0deg, rgba(var(--toast-accent-rgb), 0.10), rgba(var(--toast-accent-rgb), 0.10)),
		var(--bg-card);
	border: 0.0625rem solid rgba(var(--toast-accent-rgb), 0.30);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	transform: translateX(1.75rem);
	transition: opacity 0.38s ease, transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.toast.is-in { opacity: 1; transform: translateX(0); }
.toast-wrap.is-leaving .toast { opacity: 0; transform: translateX(1.75rem); }

.toast__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--toast-accent);
	font-size: 1.75rem;
	line-height: 1;
}

.toast__body { flex: 1; min-width: 0; }

/* Title: single line, ellipsis if it can't fit */
.toast__title {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Text: break long words, wrap up to 3 lines, then ellipsis — keeps height bounded */
.toast__desc {
	margin-top: 0.125rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--text-secondary);
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.toast__close {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border: 0;
	border-radius: 0.375rem;
	background: transparent;
	color: var(--text-secondary);
	font-size: 1.125rem;
	cursor: pointer;
}
.toast__close:hover { color: var(--text-primary); background: rgba(127, 127, 127, 0.12); }

/* Duration timer — faint track + accent fill that drains left; clipped to the rounded corners */
.toast__timer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0.1875rem;
	background: rgba(var(--toast-accent-rgb), 0.16);
}
.toast__timer-fill {
	position: absolute;
	inset: 0;
	background: var(--toast-accent);
	transform: scaleX(1);
	transform-origin: left center;
}

/* Drain animation is set inline (duration per toast) by core/toast.js.
   Pausing it on hover also pauses the auto-dismiss, which fires on animationend. */
@keyframes toast-drain {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/* Type accents */
.toast--success { --toast-accent: #22c55e; --toast-accent-rgb: 34, 197, 94; }
.toast--warning { --toast-accent: #f59e0b; --toast-accent-rgb: 245, 158, 11; }
.toast--error   { --toast-accent: #ef4444; --toast-accent-rgb: 239, 68, 68; }
.toast--info    { --toast-accent: #3b82f6; --toast-accent-rgb: 59, 130, 246; }
.toast--custom  { --toast-accent: #a855f7; --toast-accent-rgb: 168, 85, 247; }

/* Light theme — darker accents for contrast on the light card */
[data-theme="light"] .toast--success { --toast-accent: #15803d; --toast-accent-rgb: 21, 128, 61; }
[data-theme="light"] .toast--warning { --toast-accent: #b45309; --toast-accent-rgb: 180, 83, 9; }
[data-theme="light"] .toast--error   { --toast-accent: #b91c1c; --toast-accent-rgb: 185, 28, 28; }
[data-theme="light"] .toast--info    { --toast-accent: #1d4ed8; --toast-accent-rgb: 29, 78, 216; }
[data-theme="light"] .toast--custom  { --toast-accent: #7e22ce; --toast-accent-rgb: 126, 34, 206; }