/**
 * File: assets/css/components/search-overlay.css
 * Description: Search overlay styles.
 *
 * MAGIDA GLOBAL UI PASS 4:
 * - Full-screen dark search overlay.
 */

.magida-search-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--magida-z-modal);
	display: grid;
	place-items: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--magida-transition),
		visibility var(--magida-transition);
}

.magida-search-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.magida-search-overlay__backdrop {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			circle at top,
			rgba(5, 223, 254, 0.08),
			transparent 26rem
		),
		rgba(0, 0, 0, 0.78);
	backdrop-filter: blur(14px);
}

.magida-search-overlay__dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 820px);
	padding: 42px;
	border: 1px solid rgba(5, 223, 254, 0.18);
	border-radius: var(--magida-radius-xl);
	background:
		linear-gradient(180deg, rgba(5, 223, 254, 0.045), transparent 38%),
		rgba(7, 9, 17, 0.94);
	box-shadow: 0 28px 90px rgba(0, 0, 0, 0.5);
	transform: translateY(16px) scale(0.98);
	transition: transform var(--magida-transition);
}

.magida-search-overlay.is-open .magida-search-overlay__dialog {
	transform: translateY(0) scale(1);
}

.magida-search-overlay__close {
	position: absolute;
	top: 18px;
	right: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: var(--magida-radius-full);
	background: transparent;
	color: var(--magida-text-soft);
}

.magida-search-overlay__close svg {
	width: 24px;
	height: 24px;
	transition: transform var(--magida-transition);
}

.magida-search-overlay__close:hover,
.magida-search-overlay__close:focus-visible {
	color: var(--magida-cyan);
	background: rgba(5, 223, 254, 0.08);
}

.magida-search-overlay__close:hover svg,
.magida-search-overlay__close:focus-visible svg {
	transform: rotate(90deg);
}

.magida-search-overlay__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 14px;
	margin-top: 24px;
}

.magida-search-overlay__input {
	width: 100%;
	min-height: 64px;
	padding: 0 20px;
	border: 1px solid rgba(190, 189, 229, 0.16);
	border-radius: var(--magida-radius-lg);
	background: rgba(255, 255, 255, 0.035);
	color: var(--magida-white);
	font-size: 1.2rem;
	outline: none;
}

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

.magida-search-overlay__input:focus {
	border-color: rgba(5, 223, 254, 0.62);
	box-shadow: var(--magida-glow-soft);
}

.magida-search-overlay__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 64px;
	padding: 0 24px;
	border: 1px solid rgba(5, 223, 254, 0.55);
	border-radius: var(--magida-radius-lg);
	background: linear-gradient(
		135deg,
		rgba(5, 223, 254, 0.16),
		rgba(124, 106, 251, 0.16)
	);
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-weight: 850;
}

.magida-search-overlay__submit svg {
	width: 18px;
	height: 18px;
}

.magida-search-overlay__submit:hover,
.magida-search-overlay__submit:focus-visible {
	color: var(--magida-white);
	box-shadow: var(--magida-glow-medium);
}

body.magida-search-open {
	overflow: hidden;
}

@media (max-width: 768px) {
	.magida-search-overlay__dialog {
		padding: 34px 20px 22px;
		border-radius: var(--magida-radius-lg);
	}

	.magida-search-overlay__form {
		grid-template-columns: 1fr;
	}

	.magida-search-overlay__input {
		min-height: 54px;
		font-size: 1rem;
	}

	.magida-search-overlay__submit {
		min-height: 52px;
	}
}