/**
 * Modern Search Popup — front-end stylesheet
 *
 * Design tokens
 * -------------
 * Color   #0B0B0E overlay wash · #16161B glass surface (dark) · #FFFFFF surface (light)
 *         #6366F1 accent (configurable via --msp-accent) · #E4E4E7 text (dark) · #18181B text (light)
 *         Every color below has a matching "-override" custom property, filled in from the
 *         admin settings by MSP_Assets::print_dynamic_colors(). When a site owner hasn't set
 *         an override, the built-in design token is used untouched.
 * Type    -apple-system / "Inter" for UI text (configurable via --msp-font-ui), ui-monospace
 *         for keyboard-shortcut chips
 * Layout  Command-palette pattern: modal anchored ~12vh from the top, centered, max-width 640px.
 *         Fluid down to 4 breakpoints (tablet, mobile, small mobile, short/landscape viewports)
 *         so the popup stays comfortable to use on any device.
 * Signature: animated gradient focus ring on the input + monospace kbd chips (⌘K / ↑↓ / ↵ / Esc)
 *
 * @package ModernSearchPopup
 */

:root {
	--msp-accent: #6366f1;
	--msp-accent-soft: color-mix(in srgb, var(--msp-accent) 18%, transparent);

	/* Corner radius, width, spacing and overlay treatment. All overridden
	   inline by MSP_Assets::print_dynamic_colors() from the admin screen —
	   the values below are just the design's built-in defaults. */
	--msp-radius-lg: 18px;
	--msp-radius-md: 12px;
	--msp-radius-sm: 8px;
	--msp-modal-max-width: 640px;
	--msp-item-padding: 12px 14px;
	--msp-item-gap: 14px;
	--msp-thumb-size: 56px;
	--msp-overlay-wash: rgba(6, 6, 9, 0.6);
	--msp-overlay-blur: blur(6px);

	--msp-font-ui: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--msp-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

	/* Duration is overridden inline (via --msp-duration-*) by the
	   "animation speed" setting; the easing curve itself stays fixed. */
	--msp-duration-fast: 150ms;
	--msp-duration-medium: 260ms;
	--msp-transition-fast: var(--msp-duration-fast) cubic-bezier(0.4, 0, 0.2, 1);
	--msp-transition-medium: var(--msp-duration-medium) cubic-bezier(0.16, 1, 0.3, 1);

	/* Theme-independent overrides, injected inline. Empty by default. */
	--msp-text-override: initial;
	--msp-header-bg-override: initial;
	--msp-modal-bg-override: initial;
}

/* Dark theme tokens (default). Falls back to the -override custom property when set. */
.msp-overlay,
.msp-overlay.msp-theme-dark {
	--msp-text: var(--msp-text-override, #f4f4f5);
	--msp-text-secondary: var(--msp-text-override, rgba(228, 228, 231, 0.55));
	--msp-modal-bg: var(--msp-modal-bg-override, rgba(24, 24, 29, 0.78));
	--msp-header-bg: var(--msp-header-bg-override, transparent);
	--msp-border: rgba(255, 255, 255, 0.09);
	--msp-surface-soft: rgba(255, 255, 255, 0.06);
}

.msp-theme-light {
	--msp-text: var(--msp-text-override, #18181b);
	--msp-text-secondary: var(--msp-text-override, rgba(24, 24, 27, 0.55));
	--msp-modal-bg: var(--msp-modal-bg-override, rgba(255, 255, 255, 0.86));
	--msp-header-bg: var(--msp-header-bg-override, transparent);
	--msp-border: rgba(15, 15, 20, 0.08);
	--msp-surface-soft: rgba(15, 15, 20, 0.05);
}

@media (prefers-color-scheme: light) {
	.msp-overlay:not(.msp-theme-dark):not(.msp-theme-light) {
		--msp-text: var(--msp-text-override, #18181b);
		--msp-text-secondary: var(--msp-text-override, rgba(24, 24, 27, 0.55));
		--msp-modal-bg: var(--msp-modal-bg-override, rgba(255, 255, 255, 0.86));
		--msp-header-bg: var(--msp-header-bg-override, transparent);
		--msp-border: rgba(15, 15, 20, 0.08);
		--msp-surface-soft: rgba(15, 15, 20, 0.05);
	}
}

/* -------------------------------------------------------------------- */
/* Overlay + entrance / exit animation                                  */
/* -------------------------------------------------------------------- */

.msp-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 12vh 20px 40px;
	background: var(--msp-overlay-wash);
	backdrop-filter: var(--msp-overlay-blur) saturate(140%);
	-webkit-backdrop-filter: var(--msp-overlay-blur) saturate(140%);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--msp-transition-medium), visibility var(--msp-transition-medium);
	font-family: var(--msp-font-ui);
	box-sizing: border-box;
}

.msp-overlay *,
.msp-overlay *::before,
.msp-overlay *::after {
	box-sizing: border-box;
}

.msp-overlay[data-msp-state="open"] {
	opacity: 1;
	visibility: visible;
}

.msp-overlay[data-msp-state="open"] .msp-modal {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* -------------------------------------------------------------------- */
/* Modal shell — glassmorphism                                          */
/* -------------------------------------------------------------------- */

.msp-modal {
	width: 100%;
	max-width: var(--msp-modal-max-width);
	max-height: 72vh;
	display: flex;
	flex-direction: column;
	background: var(--msp-modal-bg);
	border: 1px solid var(--msp-border);
	border-radius: var(--msp-radius-lg);
	box-shadow:
		0 24px 70px rgba(0, 0, 0, 0.45),
		0 4px 16px rgba(0, 0, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	overflow: hidden;
	transform: translateY(-14px) scale(0.98);
	opacity: 0;
	transition: transform var(--msp-transition-medium), opacity var(--msp-transition-medium);
}

.msp-theme-light .msp-modal {
	box-shadow:
		0 24px 70px rgba(15, 15, 20, 0.16),
		0 4px 16px rgba(15, 15, 20, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

@media (prefers-color-scheme: light) {
	.msp-overlay:not(.msp-theme-dark):not(.msp-theme-light) .msp-modal {
		box-shadow:
			0 24px 70px rgba(15, 15, 20, 0.16),
			0 4px 16px rgba(15, 15, 20, 0.08),
			inset 0 1px 0 rgba(255, 255, 255, 0.6);
	}
}

/* -------------------------------------------------------------------- */
/* Input row — the signature gradient focus ring lives here             */
/* -------------------------------------------------------------------- */

.msp-input-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	background: var(--msp-header-bg);
	border-bottom: 1px solid var(--msp-border);
}

.msp-input-row::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--msp-radius-lg) var(--msp-radius-lg) 0 0;
	padding: 1px;
	background: linear-gradient(120deg, var(--msp-accent), transparent 40%, transparent 60%, var(--msp-accent));
	background-size: 200% 200%;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity var(--msp-transition-fast);
	pointer-events: none;
}

.msp-input-row:focus-within::after {
	opacity: 0.9;
	animation: msp-gradient-flow 3.2s ease infinite;
}

@keyframes msp-gradient-flow {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.msp-input-icon {
	flex-shrink: 0;
	color: var(--msp-text-secondary);
}

.msp-input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	font-family: inherit;
	font-size: 18px;
	font-weight: 450;
	color: var(--msp-text);
	caret-color: var(--msp-accent);
}

.msp-input::placeholder {
	color: var(--msp-text-secondary);
	opacity: 0.8;
}

.msp-close-btn {
	flex-shrink: 0;
	background: var(--msp-surface-soft);
	border: 1px solid var(--msp-border);
	border-radius: var(--msp-radius-sm);
	padding: 6px 10px;
	min-height: 32px;
	cursor: pointer;
	transition: background var(--msp-transition-fast);
}

.msp-close-btn:hover,
.msp-close-btn:focus-visible {
	background: var(--msp-accent-soft);
}

.msp-close-btn kbd {
	font-family: var(--msp-font-mono);
	font-size: 12px;
	color: var(--msp-text-secondary);
}

/* -------------------------------------------------------------------- */
/* Spinner                                                              */
/* -------------------------------------------------------------------- */

.msp-spinner {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--msp-border);
	border-top-color: var(--msp-accent);
	opacity: 0;
	animation: msp-spin 0.7s linear infinite;
	transition: opacity var(--msp-transition-fast);
}

.msp-spinner[data-msp-visible="true"] {
	opacity: 1;
}

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

/* -------------------------------------------------------------------- */
/* Results list                                                         */
/* -------------------------------------------------------------------- */

.msp-results {
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding: 10px;
	flex: 1;
	scrollbar-width: thin;
}

.msp-results::-webkit-scrollbar {
	width: 8px;
}

.msp-results::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
}

.msp-section-label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 10px 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--msp-text-secondary);
}

.msp-result-item {
	display: flex;
	align-items: center;
	gap: var(--msp-item-gap);
	padding: var(--msp-item-padding);
	border-radius: var(--msp-radius-md);
	text-decoration: none;
	color: inherit;
	transition: background var(--msp-transition-fast), transform var(--msp-transition-fast);
	outline: none;
}

.msp-result-item:hover,
.msp-result-item.msp-active,
.msp-result-item:focus-visible {
	background: var(--msp-accent-soft);
}

.msp-result-item:focus-visible {
	box-shadow: 0 0 0 2px var(--msp-accent);
}

.msp-result-thumb {
	flex-shrink: 0;
	width: var(--msp-thumb-size);
	height: var(--msp-thumb-size);
	border-radius: var(--msp-radius-sm);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--msp-surface-soft);
}

.msp-result-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.msp-result-icon {
	color: var(--msp-text-secondary);
	font-size: 22px;
}

.msp-result-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.msp-result-title {
	font-size: 14.5px;
	font-weight: 550;
	color: var(--msp-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.msp-result-excerpt {
	font-size: 13px;
	color: var(--msp-text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.msp-result-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 2px;
	gap: 8px;
	font-size: 12px;
	color: var(--msp-text-secondary);
}

.msp-result-meta > span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.msp-result-meta > span:not(:last-child)::after {
	content: "•";
	margin-left: 8px;
	opacity: 0.5;
}

.msp-result-type .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.msp-result-views {
	color: var(--msp-text-secondary);
}

.msp-result-views .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.msp-result-arrow {
	flex-shrink: 0;
	opacity: 0;
	transform: translateX(-4px);
	color: var(--msp-accent);
	transition: opacity var(--msp-transition-fast), transform var(--msp-transition-fast);
}

.msp-result-item:hover .msp-result-arrow,
.msp-result-item.msp-active .msp-result-arrow {
	opacity: 1;
	transform: translateX(0);
}

/* -------------------------------------------------------------------- */
/* Empty / no-results states                                            */
/* -------------------------------------------------------------------- */

.msp-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 56px 20px;
	color: var(--msp-text-secondary);
}

.msp-empty-state svg {
	margin-bottom: 16px;
	opacity: 0.6;
}

.msp-empty-state-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--msp-text);
	margin-bottom: 4px;
}

.msp-empty-state-hint {
	font-size: 13px;
	max-width: 320px;
}

.msp-recent-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 6px 10px 14px;
}

.msp-recent-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	min-height: 30px;
	border-radius: 999px;
	background: var(--msp-surface-soft);
	border: 1px solid var(--msp-border);
	font-size: 13px;
	color: var(--msp-text-secondary);
	cursor: pointer;
	transition: background var(--msp-transition-fast);
}

.msp-recent-chip:hover {
	background: var(--msp-accent-soft);
}

/* -------------------------------------------------------------------- */
/* Footer hints                                                         */
/* -------------------------------------------------------------------- */

.msp-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 18px;
	border-top: 1px solid var(--msp-border);
	font-size: 12px;
	color: var(--msp-text-secondary);
}

.msp-footer-hints {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.msp-hint {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

kbd {
	font-family: var(--msp-font-mono);
	font-size: 11px;
	padding: 2px 5px;
	border-radius: 5px;
	background: var(--msp-surface-soft);
	border: 1px solid var(--msp-border);
	color: var(--msp-text-secondary);
}

.msp-kbd-combo {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

/* -------------------------------------------------------------------- */
/* Utility                                                              */
/* -------------------------------------------------------------------- */

.msp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------- */
/* Reduced motion                                                       */
/* -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.msp-overlay,
	.msp-modal,
	.msp-result-item,
	.msp-result-arrow,
	.msp-spinner,
	.msp-input-row::after {
		transition: none !important;
		animation: none !important;
	}
}

/* -------------------------------------------------------------------- */
/* Responsive                                                           */
/* Breakpoints: tablet (≤1024px) · mobile (≤640px) · small mobile       */
/* (≤480px) · very small phones (≤360px) · short / landscape viewports  */
/* -------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
 * Element visibility matrix by breakpoint (defaults — every cell and
 * every breakpoint width below "Tablet" is editable from the admin;
 * see the NOTE below).
 * ---------------------------------------------------------------------
 *                        Desktop   Tablet     Mobile     Small mobile  Tiny*
 *                        >1024px   641-1024   481-640    361-480       ≤360*
 * Thumbnail                Y         Y          Y          Y (44px)     N
 * Search icon (input)      Y         Y          Y          Y            N
 * Title                    Y         Y          Y          Y            Y
 * Excerpt                  Y         Y          Y          N            N
 * Type icon + label        Y         Y          Y          Y            Y
 * Category                 Y         Y          Y          Y            N
 * Date                     Y         Y          N          N            N
 * Views counter            Y         Y          Y          Y            N
 * Hover arrow               Y         Y          N          N            N
 * Footer (hints + ⌘K)      Y         Y          N          N            N
 *
 * * "Tiny" is the "tiny_mobile" tier: its width (default 360px, range
 *   280-400px) and every row's value in this column are configurable
 *   from Ajustes → Modern Search → Responsive, unlike the other tiers.
 * ------------------------------------------------------------------- */

/*
 * NOTE ON VISIBILITY: which of the rows above actually renders per
 * breakpoint is controlled by the site owner from Ajustes → Modern
 * Search → "Visibilidad responsiva", NOT hardcoded here. MSP_Assets
 * turns that matrix into `display:none` rules and appends them to
 * this stylesheet inline, scoped to the same 1024/640/480px breakpoints
 * used below. The rules in this file only ever handle pure layout
 * (spacing, sizing, sheet shape) — never what content shows or hides.
 */

/* Tablet: tighter spacing, slightly narrower modal. */
@media (max-width: 1024px) {
	.msp-overlay {
		padding: 10vh 24px 32px;
	}

	.msp-modal {
		max-width: min(var(--msp-modal-max-width), 560px);
	}
}

/* Mobile: near-full-width sheet, larger touch targets. */
@media (max-width: 640px) {
	.msp-overlay {
		padding: 6vh 12px 20px;
		align-items: flex-start;
	}

	.msp-modal {
		max-width: 100%;
		max-height: 86vh;
		border-radius: var(--msp-radius-md);
	}

	.msp-input-row {
		padding: 14px 16px;
		gap: 10px;
	}

	.msp-input {
		font-size: 16px; /* Prevents iOS Safari from auto-zooming on focus. */
	}

	.msp-close-btn {
		min-height: 36px;
		min-width: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.msp-result-item {
		padding: 12px 10px;
		gap: 12px;
	}
}

/* Small mobile: tighten spacing further and shrink thumbnails/type so a
   single-column layout stays legible. */
@media (max-width: 480px) {
	.msp-overlay {
		padding: 0;
	}

	.msp-modal {
		max-width: 100%;
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	.msp-input-row {
		padding: 12px 14px;
	}

	.msp-input {
		font-size: 15px;
	}

	.msp-result-thumb {
		width: 44px;
		height: 44px;
	}

	.msp-result-title {
		font-size: 14px;
	}

	.msp-result-meta {
		font-size: 11px;
		gap: 6px;
	}

	.msp-section-label {
		font-size: 11px;
		padding: 8px 8px 4px;
	}
}

/* Very small phones: NOTE this used to be a hardcoded, always-on rule that
   force-hid the thumbnail and input icon below 360px. It's now just the
   "tiny_mobile" row's *default* values in the responsive visibility matrix
   (see MSP_Settings::default_responsive_matrix()) — both the 360px trigger
   width and every element in this tier are configurable from Ajustes →
   Modern Search → Responsive. MSP_Assets::build_responsive_visibility_css()
   generates the actual @media block inline, so there is intentionally no
   fixed-width rule left in this file. The title keeps its ellipsis + flex
   min-width:0 above regardless, so nothing overflows even if a site owner
   turns the thumbnail back on at this size. */

/* Short or landscape viewports (e.g. phones rotated sideways): the modal
   would otherwise overflow vertically, so anchor it to the top and let
   the results list take whatever height remains. */
@media (max-height: 500px) and (orientation: landscape) {
	.msp-overlay {
		padding: 12px 16px;
		align-items: flex-start;
	}

	.msp-modal {
		max-height: 94vh;
	}

	.msp-footer {
		display: none;
	}
}

/* Fine (mouse) vs coarse (touch) pointers: give touch users larger hit
   areas without inflating the design on desktop. */
@media (pointer: coarse) {
	.msp-result-item {
		min-height: 44px;
	}

	.msp-recent-chip {
		min-height: 36px;
		padding: 8px 14px;
	}
}

/* -------------------------------------------------------------------- */
/* Hide the theme's original search icon target only visually replaced  */
/* by JS event interception — markup is left completely untouched.      */
/* -------------------------------------------------------------------- */

body.msp-popup-open {
	overflow: hidden;
}