/**
 * === Quick Action Handler CSS - Toast notification ===
 *
 * Mô tả: Style cho toast container top-right + 3 loại variant
 *        (success/error/info).
 */

/* === Toast Container === */
.bvyhct-toast-container {
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	gap: 8px;
	pointer-events: none;
}

.bvyhct-toast {
	min-width: 260px;
	max-width: 380px;
	padding: 12px 16px;
	border-radius: 6px;
	color: #fff;
	font-size: var(--text-nav);
	font-weight: var(--weight-medium);
	line-height: 1.4;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.18 );
	opacity: 0;
	transform: translateX( 20px );
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: auto;
}

.bvyhct-toast.is-visible {
	opacity: 1;
	transform: translateX( 0 );
}

.bvyhct-toast--success {
	background: linear-gradient( 135deg, var(--color-brand-primary), var(--color-brand-secondary) );
}

.bvyhct-toast--error {
	background: linear-gradient( 135deg, var(--color-error), #e74c3c );
}

.bvyhct-toast--info {
	background: linear-gradient( 135deg, #1d2327, #2271b1 );
}

@media (max-width: 640px) {
	.bvyhct-toast-container {
		top: 12px;
		right: 12px;
		left: 12px;
	}

	.bvyhct-toast {
		min-width: 0;
		max-width: none;
	}
}