/*
 * bav-toast.css — BAV Toast Notification + Modal Overlay (Story 9.4)
 *
 * Globally loaded. Covers:
 *   - .bav-toast — ephemeral snackbar notification
 *   - .bav-modal-backdrop / .bav-modal — confirmation / registration modals
 *
 * Design tokens from bav-components.css (must be loaded first).
 */

/* ============================================================
   Toast / Snackbar
   ============================================================ */

.bav-toast {
	position: fixed;
	top: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(-120%);
	background: var(--bav-primary);
	color: var(--bav-text-inverse);
	font-family: var(--bav-font-family);
	font-size: var(--bav-font-size-sm);
	font-weight: var(--bav-font-weight-medium);
	padding: var(--bav-space-lg) var(--bav-space-lg) calc(var(--bav-space-lg) + 3px);
	display: none; /* hidden by default; JS adds bav-toast--visible */
	align-items: center;
	gap: var(--bav-space-md);
	box-shadow: var(--bav-shadow-lg);
	z-index: 9999;
	max-width: 600px;
	width: calc(100% - 48px);
}

.bav-toast--visible {
	display: flex;
	animation: toastIn 0.35s ease forwards;
}

.bav-toast--out {
	animation: toastOut 0.3s ease forwards;
}

/* Variant modifiers */
.bav-toast--success .bav-toast__icon {
	color: var(--bav-success);
}

.bav-toast--error .bav-toast__icon {
	color: var(--bav-error);
}

.bav-toast--error .bav-toast__progress {
	background: var(--bav-error);
}

/* .bav-toast--favorites uses default gold icon — no override needed */

/* Child elements */
.bav-toast__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--bav-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bav-toast__text {
	flex: 1;
	line-height: var(--bav-line-height-normal);
	min-width: 0;
}

.bav-toast__text strong {
	color: var(--bav-accent);
}

.bav-toast__action {
	background: var(--bav-accent);
	border: none;
	color: var(--bav-primary);
	font-family: var(--bav-font-family);
	font-size: var(--bav-font-size-xs);
	font-weight: var(--bav-font-weight-semibold);
	padding: 8px 16px;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	transition: all var(--bav-transition-fast);
	min-height: 36px;
	display: none; /* shown by JS when action provided */
	align-items: center;
}

.bav-toast__action:hover {
	background: var(--bav-accent-hover);
	color: var(--bav-primary);
}

.bav-toast__action:focus-visible {
	outline: none;
	box-shadow: var(--bav-focus-ring);
}

.bav-toast__action--visible {
	display: inline-flex;
}

.bav-toast__dismiss {
	align-self: flex-start;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.5);
	font-size: 18px;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
	transition: color var(--bav-transition-fast);
	flex-shrink: 0;
}

.bav-toast__dismiss:hover {
	color: var(--bav-text-inverse);
}

.bav-toast__dismiss:focus-visible {
	outline: none;
	box-shadow: var(--bav-focus-ring);
}

.bav-toast__progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	background: var(--bav-accent);
	animation: toastProgress 5s linear forwards;
}

/* Animations */
@keyframes toastIn {
	from {
		transform: translateX(-50%) translateY(-120%);
		opacity: 0;
	}
	to {
		transform: translateX(-50%) translateY(0);
		opacity: 1;
	}
}

@keyframes toastOut {
	from {
		transform: translateX(-50%) translateY(0);
		opacity: 1;
	}
	to {
		transform: translateX(-50%) translateY(-120%);
		opacity: 0;
	}
}

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

/* Mobile — side margins matching top spacing */
@media (max-width: 768px) {
	.bav-toast {
		max-width: none !important;
		width: calc(100% - 48px) !important;
		left: 24px !important;
		transform: translateX(0) translateY(-120%) !important;
		flex-wrap: wrap;
		padding: var(--bav-space-md) var(--bav-space-md) calc(var(--bav-space-md) + 3px);
	}

	.bav-toast--visible {
		transform: translateX(0) translateY(0) !important;
	}

	.bav-toast__text {
		min-width: 0;
	}

	.bav-toast__action {
		order: 1;
		width: 100%;
		text-align: center;
		margin-top: var(--bav-space-xs);
		justify-content: center;
	}

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

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

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bav-toast,
	.bav-toast--visible,
	.bav-toast--out {
		animation-duration: 0.01ms !important;
	}

	.bav-toast__progress {
		animation-duration: 0.01ms !important;
	}
}


/* ============================================================
   Modal Overlay — shared pattern (extracted from bav-account.css)
   Previously only loaded on account pages; now globally available
   so bav-registration-modal works on search pages (Story 9.4).
   ============================================================ */

.bav-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bav-bg-overlay);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* Fade out: opacity transitions, then visibility snaps hidden after */
	transition: opacity 0.25s ease, visibility 0s 0.25s;
}

.bav-modal-backdrop[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	/* Fade in: visibility snaps visible immediately, then opacity transitions */
	transition: opacity 0.25s ease, visibility 0s 0s;
}

.bav-modal {
	position: relative;
	background: var(--bav-bg);
	border: 1px solid var(--bav-border);
	padding: var(--bav-space-xl);
	max-width: 400px;
	width: calc(100% - var(--bav-space-2xl));
	opacity: 0;
	transform: translateY(28px) scale(0.95);
	transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bav-modal-backdrop[aria-hidden="false"] .bav-modal {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Close (X) button — top-right of every modal */
.bav-modal__close {
	position: absolute;
	top: var(--bav-space-sm);
	right: var(--bav-space-sm);
	background: none;
	border: none;
	color: var(--bav-text-secondary);
	font-size: 20px;
	line-height: 1;
	padding: 4px 6px;
	cursor: pointer;
	transition: color var(--bav-transition-fast);
}

.bav-modal__close:hover {
	color: var(--bav-primary);
}

.bav-modal__close:focus-visible {
	outline: none;
	box-shadow: var(--bav-focus-ring);
}

.bav-modal__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0 auto var(--bav-space-md);
	color: var(--bav-error);
}

.bav-modal__title {
	font-family: var(--bav-font-family);
	font-size: var(--bav-font-size-lg);
	font-weight: var(--bav-font-weight-bold);
	color: var(--bav-primary);
	margin: 0 0 var(--bav-space-sm);
	text-align: center;
}

.bav-modal__text {
	font-family: var(--bav-font-family);
	font-size: var(--bav-font-size-sm);
	color: var(--bav-text-secondary);
	text-align: center;
	line-height: var(--bav-line-height-normal);
	margin: 0 0 var(--bav-space-xl);
}

.bav-modal__actions {
	display: flex;
	gap: var(--bav-space-sm);
	justify-content: center;
}

/* Modal buttons use .bav-btn base + modifiers from bav-components.css */

/* Registration modal icon uses primary colour (not error red) */
.bav-modal--registration .bav-modal__icon {
	color: var(--bav-primary);
}

/* Registration modal: stacked CTA layout */
.bav-modal--registration .bav-modal__actions {
	flex-direction: column;
	gap: var(--bav-space-sm);
}

.bav-modal--registration .bav-modal__actions .bav-btn {
	width: 100%;
	justify-content: center;
}

.bav-modal--registration .bav-modal__dismiss-link {
	background: none;
	border: none;
	color: var(--bav-text-secondary);
	font-family: var(--bav-font-family);
	font-size: var(--bav-font-size-sm);
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
	text-align: center;
}

.bav-modal--registration .bav-modal__dismiss-link:hover {
	color: var(--bav-primary);
}

.bav-modal__list {
	margin: 0 0 var(--bav-space-lg);
	padding: 0;
	list-style: none;
}

.bav-modal__list li {
	font-family: var(--bav-font-family);
	font-size: var(--bav-font-size-sm);
	color: var(--bav-text-secondary);
	line-height: var(--bav-line-height-normal);
	padding: var(--bav-space-xs) 0;
	display: flex;
	align-items: flex-start;
	gap: var(--bav-space-sm);
}


/* Check icon span — used only in registration modal list ( check-solid from property-icons) */
.bav-modal__list-check {
	font-family: 'property-icons';
	font-style: normal;
	font-weight: normal;
	color: var(--bav-success);
	flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
	.bav-modal-backdrop,
	.bav-modal {
		transition: none;
	}
}