/* =====================================================================
 * Masculine Volt Search — Search Articles widget
 * ===================================================================== */

.mvs-search-widget {
	position: relative;
	width: 100%;
	max-width: 100%;
}

/* Elementor wraps every widget's output in its own .elementor-widget-container
   div and gives every widget a generic Border control on its built-in
   Advanced tab (separate from this plugin's own Style tab controls above),
   plus the site's global Kit/Theme defaults can also apply a border there.
   That's the "container border" this widget had no control of its own
   for — it was never part of this plugin's CSS or controls. Forced off
   here instead, scoped to only this widget type
   (.elementor-widget-mvs-search, the class Elementor automatically adds
   based on this widget's get_name()) so no other widget on the site is
   affected. */
.elementor-widget-mvs-search > .elementor-widget-container {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.mvs-search-form {
	/* Defaults here only apply before Elementor's own generated CSS
	   (from the matching style controls) overrides them for this
	   specific widget instance — nothing below is a competing hardcoded
	   value fighting those controls. */
	--mvs-icon-size: 18px;
	--mvs-icon-offset: 18px;
	--mvs-icon-gap: 10px;
	--mvs-text-side-padding: 18px;

	position: relative;
	display: flex;
	align-items: center;
	background: #ffffff;
	box-sizing: border-box;
}

.mvs-search-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--mvs-icon-size);
	height: var(--mvs-icon-size);
	color: #94a3b8;
	pointer-events: none;
	flex-shrink: 0;
}

.mvs-search-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	border: 0;
	background: transparent;
	outline: none;
	font-size: 15px;
	color: #0f172a;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

/* Icon on the left: icon sits --mvs-icon-offset from the left edge, and
   the input's left padding is calculated so text always starts exactly
   --mvs-icon-gap after the icon — regardless of what icon size/offset/gap
   values are chosen, they can never overlap. The opposite (right) side
   uses the independent "Text Padding (Side With No Icon)" control. */
.mvs-icon-left .mvs-search-icon {
	left: var(--mvs-icon-offset);
}

.mvs-icon-left .mvs-search-input {
	padding-left: calc(var(--mvs-icon-offset) + var(--mvs-icon-size) + var(--mvs-icon-gap));
	padding-right: var(--mvs-text-side-padding);
}

/* Icon on the right: mirror of the above. */
.mvs-icon-right .mvs-search-icon {
	right: var(--mvs-icon-offset);
}

.mvs-icon-right .mvs-search-input {
	padding-right: calc(var(--mvs-icon-offset) + var(--mvs-icon-size) + var(--mvs-icon-gap));
	padding-left: var(--mvs-text-side-padding);
}

/* No icon: both sides just use the same independent padding control. */
.mvs-icon-none .mvs-search-input {
	padding-left: var(--mvs-text-side-padding);
	padding-right: var(--mvs-text-side-padding);
}

.mvs-search-input::placeholder {
	color: #94a3b8;
}

.mvs-search-form:focus-within {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ---------------------------------------------------------------------
 * Live results dropdown
 * ------------------------------------------------------------------- */

.mvs-live-results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	width: 100%;
	max-width: 100%;
	max-height: 70vh;
	overflow-y: auto;
	background: #ffffff;
	box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18);
	box-sizing: border-box;
	z-index: 999;
}

.mvs-live-results[hidden] {
	display: none;
}

.mvs-live-results-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mvs-live-result {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s ease;
}

.mvs-live-result:hover,
.mvs-live-result.mvs-active {
	background-color: #f1f5f9;
}

.mvs-live-result-title {
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mvs-live-result-category {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #2563eb;
}

.mvs-live-prompt,
.mvs-live-loading,
.mvs-live-error {
	padding: 14px 12px;
	font-size: 13px;
	color: #64748b;
	text-align: center;
}

.mvs-live-error {
	color: #b91c1c;
}

/* ---------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------- */

@media (max-width: 480px) {
	.mvs-search-input {
		font-size: 14px;
	}

	.mvs-live-results {
		left: 0;
		right: 0;
		width: auto;
		max-width: calc(100vw - 32px);
	}
}