/* =========================================================
   AUTONEER ORDERS – FLASH MESSAGES + LOADING OVERLAY
   Bootstrap 5 alerts, positioned as floating toasts, plus
   the shared loading overlay used by loadingModal.hbs.
   ========================================================= */

.alert-container {
	position: fixed;
	top: var(--au-space-3);
	left: 50%;
	transform: translateX(-50%);
	z-index: 1080;
	width: min(480px, calc(100vw - 24px));
	display: flex;
	flex-direction: column;
	gap: var(--au-space-2);
	pointer-events: none;
}

.alert-container:empty {
	display: none;
}

.alert-container .alert {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: var(--au-space-2);
	margin: 0;
	border-radius: var(--au-radius);
	box-shadow: var(--au-shadow);
	font-size: var(--au-font-size);
}

.alert-container .alert i {
	font-size: var(--au-font-size-lg);
	flex-shrink: 0;
}

.alert-container .alert .alert-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
	text-align: left;
}

/* Mobile top bar clearance */
@media (max-width: 991.98px) {
	.alert-container {
		top: calc(var(--au-topbar-h) + var(--au-space-2));
	}
}

/* ============================================
   AU ALERT
   Inline info cards for order reply notices and
   errors: gold-bordered cream card with a bold
   title line and muted detail line. Clicking
   anywhere on the card dismisses it.
   ============================================ */

.au-alert {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--au-space-3);
	padding: var(--au-space-2) var(--au-space-3);
	background: #FFF8E5;
	border: 1px solid var(--au-gold);
	border-radius: var(--au-radius-sm);
	box-shadow: var(--au-shadow-sm);
	cursor: pointer;
}

.au-alert[hidden] {
	display: none;
}

.au-alert__content {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.au-alert__title {
	color: var(--au-gold);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.au-alert__message {
	/* background-color: goldenrod; */
	/* color: silver; */
	font-size: var(--au-font-size);
	overflow-wrap: anywhere;
}

.au-alert__close {
	flex-shrink: 0;
	align-self: flex-start;
	margin: calc(-1 * var(--au-space-1)) calc(-1 * var(--au-space-1)) 0 0;
	padding: var(--au-space-1);
	border: 0;
	background: transparent;
	line-height: 1;
	color: var(--au-gold);
	opacity: 0.7;
	cursor: pointer;
	border-radius: var(--au-radius-sm);
}

.au-alert__close:hover,
.au-alert__close:focus-visible {
	opacity: 1;
}

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

/* ============================================
   LIVE ORDER REFRESH BANNER
   ============================================ */

.order-refresh-banner {
	position: sticky;
	top: 0;
	z-index: 1020;
	margin: var(--au-space-3);
	cursor: default;
	background: Darkgoldenrod;
	border-color: black;
}

.order-refresh-banner .au-alert__title {
	color: white;
}

.order-refresh-banner__icon {
	flex-shrink: 0;
	color: white;
	font-size: var(--au-font-size-xl);
}

.order-refresh-banner__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--au-space-2);
	margin-left: auto;
}

@media (max-width: 767.98px) {
	.order-refresh-banner {
		top: var(--au-topbar-h);
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.order-refresh-banner__actions {
		width: 100%;
		margin-left: 0;
		justify-content: flex-start;
	}
}

/* ============================================
   LOADING OVERLAY
   Hidden by default; shown via
   window.showLoadingModal() in main.js.
   ============================================ */

.au-loading-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1090;
	background-color: rgba(0, 0, 0, 0.4);
	align-items: center;
	justify-content: center;
}

.au-loading-overlay.is-visible {
	display: flex;
}

.au-loading-box {
	background: var(--au-surface);
	border-radius: var(--au-radius);
	box-shadow: var(--au-shadow);
	padding: var(--au-space-5);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--au-space-3);
	max-width: 280px;
	width: calc(100vw - 48px);
}

.au-loading-box__text {
	color: var(--au-slate);
	font-size: var(--au-font-size-lg);
	margin: 0;
}

.au-spinner {
	width: 44px;
	height: 44px;
	border: 5px solid var(--au-slate-light);
	border-left-color: transparent;
	border-radius: 50%;
	animation: au-spin 0.6s linear infinite;
}

@keyframes au-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.au-spinner {
		animation-duration: 1.5s !important;
	}
}