/**
 * Moyo Toast — Global Notification System
 *
 * File: masterstudy-child/assets/css/moyo-toast.css
 * Depends on: moyo-brand.css (CSS variables)
 *
 * Fixed bottom-right stack. 4 variants: success, error, warning, info.
 * Slide-in/out animation, auto-dismiss progress bar, max 5 stacked.
 * BEM: .moyo-toast / .moyo-toast__item / __icon / __message / __close / __progress
 */

/* ====== CONTAINER ====== */
.moyo-toast {
	position: fixed;
	top: 90px;
	right: 24px;
	z-index: var(--moyo-toast-z, 100001);
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
	max-width: 420px;
	width: calc(100% - 48px);
}

/* ====== INDIVIDUAL TOAST ====== */
.moyo-toast__item {
	position: relative;
	display: flex !important;
	align-items: center !important;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--moyo-radius-lg, 8px);
	background: var(--moyo-card, #ffffff) !important;
	border: 1px solid var(--moyo-border, #e5e7eb) !important;
	box-shadow: var(--moyo-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.10));
	pointer-events: auto;
	overflow: hidden;
	will-change: transform, opacity;
	font-family: var(--moyo-font-body, 'Poppins', sans-serif);
}

/* ── Slide-in ── */
.moyo-toast__item--entering {
	animation: moyoToastSlideIn 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}

/* ── Slide-out ── */
.moyo-toast__item--exiting {
	animation: moyoToastSlideOut 0.28s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes moyoToastSlideIn {
	from { transform: translateX(120%); opacity: 0; }
	to   { transform: translateX(0);    opacity: 1; }
}

@keyframes moyoToastSlideOut {
	from { transform: translateX(0);    opacity: 1; }
	to   { transform: translateX(120%); opacity: 0; }
}

/* ====== VARIANT BORDERS (left accent) ====== */
.moyo-toast__item--success { border-left: 4px solid var(--moyo-success, #22c55e) !important; }
.moyo-toast__item--error   { border-left: 4px solid var(--moyo-error, #ef4444) !important; }
.moyo-toast__item--warning { border-left: 4px solid var(--moyo-warning-border, #fcd34d) !important; }
.moyo-toast__item--info    { border-left: 4px solid var(--moyo-primary, #2563eb) !important; }

/* ====== ICON ====== */
.moyo-toast__icon {
	flex-shrink: 0 !important;
	width: 22px !important;
	height: 22px !important;
	margin-top: 0 !important;
	display: block !important;
}

.moyo-toast__item--success .moyo-toast__icon { color: var(--moyo-success, #22c55e); }
.moyo-toast__item--error   .moyo-toast__icon { color: var(--moyo-error, #ef4444); }
.moyo-toast__item--warning .moyo-toast__icon { color: var(--moyo-warning-text, #92400e); }
.moyo-toast__item--info    .moyo-toast__icon { color: var(--moyo-primary, #2563eb); }

/* ====== MESSAGE ====== */
.moyo-toast__message {
	flex: 1;
	font-size: 14px;
	line-height: 1.5;
	color: var(--moyo-heading, #1e293b) !important;
	word-break: break-word;
}

/* ====== CLOSE BUTTON ====== */
.moyo-toast__close {
	flex-shrink: 0 !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	max-width: 28px !important;
	max-height: 28px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: var(--moyo-border-light, #f3f4f6) !important;
	color: var(--moyo-muted, #64748b) !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.2s ease, color 0.2s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	outline: none !important;
	box-shadow: none !important;
	line-height: 1 !important;
	font-size: 0 !important;
	overflow: visible !important;
}

.moyo-toast__close:hover {
	background: var(--moyo-border, #e5e7eb) !important;
	color: var(--moyo-heading, #0f172a) !important;
}

.moyo-toast__close svg {
	width: 14px !important;
	height: 14px !important;
	display: block !important;
	flex-shrink: 0 !important;
	pointer-events: none !important;
}

/* ====== PROGRESS BAR ====== */
.moyo-toast__progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	border-radius: 0 0 0 var(--moyo-radius-lg, 8px);
	transform-origin: left;
	animation: moyoToastProgress linear forwards;
}

.moyo-toast__item--success .moyo-toast__progress { background: var(--moyo-success, #22c55e); }
.moyo-toast__item--error   .moyo-toast__progress { background: var(--moyo-error, #ef4444); }
.moyo-toast__item--warning .moyo-toast__progress { background: var(--moyo-warning-border, #fcd34d); }
.moyo-toast__item--info    .moyo-toast__progress { background: var(--moyo-primary, #2563eb); }

@keyframes moyoToastProgress {
	from { width: 100%; }
	to   { width: 0%; }
}

/* ====== RESPONSIVE ====== */
@media (max-width: 640px) {
	.moyo-toast {
		top: 80px;
		right: 16px;
		left: 16px;
		max-width: none;
		width: auto;
	}
}