/**
 * Full-screen overlay dialogs (search and future modals).
 */

.site-overlay {
	--overlay-z: 100001;

	position: fixed;
	inset: 0;
	z-index: var(--overlay-z);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gutter);
}

.site-overlay[hidden] {
	display: none;
}

.site-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: var(--overlay-backdrop-bg);
	backdrop-filter: blur(var(--overlay-backdrop-blur));
	-webkit-backdrop-filter: blur(var(--overlay-backdrop-blur));
}

.site-overlay__stage {
	position: relative;
	z-index: 1;
	width: 100%;
}

.site-overlay__title {
	margin: 0;
}

body.is-overlay-open {
	overflow: hidden;
}

/* Search overlay */
.site-overlay--search .site-overlay__stage {
	max-width: 714px;
	margin-top: 12vh;
}

.search-overlay {
	position: relative;
	width: 100%;
}

.search-overlay__close {
	position: absolute;
	top: -32px;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--color-pink);
}

.search-overlay__close svg {
	width: 20px;
	height: 20px;
}

.search-overlay__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 6px 6px 6px 20px;
	border-radius: var(--radius-pill);
	background: var(--color-white);
}

.search-overlay__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--color-gray-text);
}

.search-overlay__icon svg {
	width: 22px;
	height: 22px;
}

.search-overlay__input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	font: inherit;
	font-size: 18px;
	line-height: 1.2;
	color: var(--color-black);
	background: transparent;
}

.search-overlay__input::placeholder {
	color: var(--color-gray-text);
}

.search-overlay__submit {
	display: none;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 28px;
	border-radius: var(--radius-pill);
	background: var(--color-pink);
	color: var(--color-white);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-medium);
	line-height: 1;
	white-space: nowrap;
}

.search-overlay__form.is-ready .search-overlay__submit {
	display: inline-flex;
}

@media (min-width: 1200px) {
	.site-overlay--search .site-overlay__stage {
		margin-top: 0;
	}
}

@media (max-width: 767px) {
	.search-overlay__bar {
		min-height: 52px;
		padding-left: 16px;
		gap: 10px;
	}

	.search-overlay__input {
		font-size: 16px;
	}

	.search-overlay__submit {
		min-height: 40px;
		padding: 8px 20px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* Backdrop (dark + blur) and the popup content fade in together. The fade is
	 * on the backdrop itself — not the parent — because backdrop-filter is
	 * disabled while any ancestor has opacity < 1. */
	.site-overlay:not([hidden]) .site-overlay__backdrop {
		animation: site-overlay-backdrop-in 0.24s ease;
	}

	.site-overlay:not([hidden]) .site-overlay__stage {
		animation: site-overlay-fade-in 0.24s ease;
	}

	.search-overlay__submit {
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	.search-overlay__form:not(.is-ready) .search-overlay__submit {
		opacity: 0;
		transform: scale(0.96);
	}
}

@keyframes site-overlay-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes site-overlay-backdrop-in {
	from {
		opacity: 0;
		backdrop-filter: blur(0);
		-webkit-backdrop-filter: blur(0);
	}

	to {
		opacity: 1;
		backdrop-filter: blur(var(--overlay-backdrop-blur));
		-webkit-backdrop-filter: blur(var(--overlay-backdrop-blur));
	}
}

/* Loading overlay (AJAX in flight) */
.site-loader {
	position: fixed;
	inset: 0;
	z-index: 100010;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--overlay-backdrop-bg);
	backdrop-filter: blur(var(--overlay-backdrop-blur));
	-webkit-backdrop-filter: blur(var(--overlay-backdrop-blur));
}

.site-loader[hidden] {
	display: none;
}

.site-loader__spinner {
	width: 56px;
	height: 56px;
	border: 4px solid rgba(255, 0, 110, 0.2);
	border-top-color: var(--color-pink);
	border-radius: 50%;
	animation: site-loader-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.site-loader__spinner {
		animation-duration: 1.6s;
	}
}