/* =============================================================================
   Toast Notifications
   Usawa Theme

   The #usawa-toast-container and .usawa-toast elements are created
   dynamically by toast.js — no HTML needs to be added to templates.

   Toast types:
     .usawa-toast--success  — teal left border (matches --accent-teal).
     .usawa-toast--error    — red left border.
     .usawa-toast--warning  — orange left border.

   Visibility states managed by JS:
     (no modifier)              — rendered but invisible (opacity: 0).
     .usawa-toast--visible      — fully visible (opacity: 1, translated in).
     .usawa-toast--hiding       — fading out before removal.
   ============================================================================= */

/* ---- Container ---- */
/* Fixed to the bottom-right corner; toasts stack upwards. */
#usawa-toast-container {
	position: fixed;
	bottom: 1.5rem;
	right:  1.5rem;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	pointer-events: none; /* Container itself does not intercept clicks… */
	max-width: 22rem;
	width: calc( 100% - 3rem );
}

/* ---- Individual toast ---- */
.usawa-toast {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 0.8125rem 0.875rem;
	background-color: #ffffff;
	border-left: 3px solid transparent;
	box-shadow:
		0 4px 16px rgba( 0, 0, 0, 0.10 ),
		0 1px  4px rgba( 0, 0, 0, 0.06 );
	pointer-events: auto; /* …but individual toasts do intercept clicks. */

	/* Start hidden and slightly offset downward. */
	opacity: 0;
	transform: translateY( 0.625rem );
	transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Enter state */
.usawa-toast--visible {
	opacity: 1;
	transform: translateY( 0 );
}

/* Exit state */
.usawa-toast--hiding {
	opacity: 0;
	transform: translateY( 0.375rem );
}

/* ---- Type accent colours ---- */
.usawa-toast--success { border-left-color: #01a3a3; }
.usawa-toast--error   { border-left-color: #c0392b; }
.usawa-toast--warning { border-left-color: #e67e22; }

/* ---- Icon ---- */
.usawa-toast__icon {
	flex-shrink: 0;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.6;
}

.usawa-toast--success .usawa-toast__icon { color: #01a3a3; }
.usawa-toast--error   .usawa-toast__icon { color: #c0392b; }
.usawa-toast--warning .usawa-toast__icon { color: #e67e22; }

/* ---- Message text ---- */
.usawa-toast__message {
	flex: 1;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #2c3e50;
	word-break: break-word;
}

/* ---- Close (×) button ---- */
.usawa-toast__close {
	flex-shrink: 0;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1.4;
	color: #8a9bb0;
	transition: color 0.15s ease;
}

.usawa-toast__close:hover,
.usawa-toast__close:focus {
	color: #2c3e50;
	outline: none;
}

/* ---- Responsive: tighten margins on very small screens ---- */
@media ( max-width: 480px ) {
	#usawa-toast-container {
		bottom: 0.75rem;
		right:  0.75rem;
		width: calc( 100% - 1.5rem );
	}
}