/**
 * PowerX Standard Search Modal Styles
 *
 * TABLE OF CONTENTS:
 * -----------------------------------------------------------------------------
 * 1.0 Search Trigger Button
 * 2.0 Full Screen Modal Backdrop & Close Trigger
 * 3.0 Search Input Form & Keyframe Animations
 * 4.0 AJAX Live Results Container & Item Cards
 * 5.0 Loading Spinner Animation
 * 6.0 Inline Capsule Search Bar Layout
 * 7.0 Inline Live Results Dropdown
 * -----------------------------------------------------------------------------
 *
 * @package PowerX_Core
 */

/* =============================================================================
   1.0 SEARCH TRIGGER BUTTON
   ============================================================================= */
.px-search-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.px-search-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--powerx-neutral-700, #4a4a6a);
	cursor: pointer;
	transition: color 0.2s ease, transform 0.2s ease;
	padding: var(--px-search-trigger-pad, 10px);
	border-radius: var(--px-search-trigger-radius, var(--powerx-radius-md, 4px));
}

.px-search-trigger:hover {
	color: var(--powerx-primary-500, #4945ff);
}

.px-search-trigger svg {
	width: var(--px-search-trigger-size, 24px);
	height: var(--px-search-trigger-size, 24px);
	fill: currentColor;
}

/* =============================================================================
   2.0 FULL SCREEN MODAL BACKDROP & CLOSE TRIGGER
   ============================================================================= */
/* Modal Backdrop - This is teleported to body */
.px-search-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: var(--px-search-modal-h, 100vh);
	background: var(--powerx-search-overlay-bg, rgba(16, 22, 27, 0.89));
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: var(--powerx-z-modal, 999999);
	display: none;
	align-items: center;
	justify-content: center;
}

.px-search-modal-backdrop.is-active {
	display: flex;
	animation: pxSearchFadeIn 0.3s ease forwards;
}

@keyframes pxSearchFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.px-search-close {
	position: absolute;
	top: 40px;
	right: 40px;
	background: transparent;
	border: none;
	color: var(--powerx-color-on-dark, #ffffff);
	cursor: pointer;
	padding: 10px;
	opacity: 0.7;
	transition: opacity 0.2s ease, transform 0.3s ease;
}

.px-search-close svg {
	width: 32px;
	height: 32px;
	fill: currentColor;
}

.px-search-close:hover {
	opacity: 1;
	transform: rotate(90deg);
}

.px-search-modal-inner {
	width: 100%;
	max-width: 800px;
	padding: 20px;
	transform: translateY(30px);
	animation: pxSearchSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation-delay: 0.1s;
	opacity: 0;
}

@keyframes pxSearchSlideUp {
	from { transform: translateY(30px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

/* =============================================================================
   3.0 SEARCH INPUT FORM & KEYFRAME ANIMATIONS
   ============================================================================= */
.px-search-modal-backdrop .px-search-form {
	display: flex;
	align-items: center;
	border-bottom: 2px solid rgba(255,255,255,0.2);
	padding-bottom: 15px;
	margin-bottom: 30px;
	position: relative;
	transition: border-color 0.3s ease;
}

.px-search-modal-backdrop .px-search-form:focus-within {
	border-color: var(--powerx-primary-500, #4945ff);
}

.px-search-modal-backdrop .px-search-input {
	flex-grow: 1;
	background: transparent;
	border: none;
	color: var(--powerx-color-on-dark, #ffffff);
	font-size: 32px;
	font-weight: 300;
	outline: none;
	padding: 0;
	box-shadow: none;
}

.px-search-modal-backdrop .px-search-input:focus {
	outline: none;
	box-shadow: none;
}

.px-search-modal-backdrop .px-search-input::placeholder {
	color: var(--powerx-overlay-light, rgba(255,255,255,0.4));
}

.px-search-modal-backdrop .px-search-btn {
	background: transparent;
	border: none;
	color: var(--powerx-color-on-dark, #ffffff);
	cursor: pointer;
	padding: var(--px-search-btn-pad, 0 0 0 15px);
}

.px-search-modal-backdrop .px-search-btn svg {
	width: 32px;
	height: var(--px-search-btn-icon-size, 32px);
	fill: currentColor;
}

/* =============================================================================
   4.0 AJAX LIVE RESULTS CONTAINER & ITEM CARDS
   ============================================================================= */
.px-search-modal-backdrop .px-search-results {
	box-shadow: none;
	border: none;
	display: none;
	max-height: var(--px-search-results-max-h, 50vh);
	overflow-y: auto;
}

.px-search-modal-backdrop .px-search-results.is-active {
	display: block;
	animation: pxSearchFadeIn 0.3s ease forwards;
}

.px-search-modal-backdrop .px-search-result-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: var(--px-search-item-pad, 15px 12px);
	border-bottom: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--powerx-radius-md, 4px);
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, padding 0.2s ease;
}

.px-search-modal-backdrop .px-search-result-item:hover {
	background: var(--powerx-overlay-light, rgba(255,255,255,0.08));
	padding-left: var(--px-search-item-pad-hover-l, 18px);
	padding-right: var(--px-search-item-pad-hover-r, 8px);
	border-color: transparent;
}

.px-search-result-img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	flex-shrink: 0;
	background: var(--powerx-overlay-light, rgba(255, 255, 255, 0.1));
	border-radius: var(--powerx-radius-sm, 4px);
}

.px-search-result-content {
	flex-grow: 1;
	overflow: hidden;
}

.px-search-modal-backdrop .px-search-result-title {
	color: var(--powerx-color-on-dark, #ffffff);
	font-size: 18px;
	font-weight: 500;
	margin: var(--px-search-title-margin, 0 0 4px 0);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.px-search-modal-backdrop .px-search-result-type {
	color: var(--powerx-overlay-light, rgba(255,255,255,0.6));
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.px-search-modal-backdrop .px-search-no-results {
	color: var(--powerx-overlay-light, rgba(255,255,255,0.7));
	text-align: left;
	font-size: 18px;
	padding: 20px 0;
}

/* =============================================================================
   5.0 LOADING SPINNER ANIMATION
   ============================================================================= */
.px-search-loader {
	padding: 24px;
	text-align: center;
}

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

.px-spinner {
	animation: rotate 2s linear infinite;
	width: 32px;
	height: 32px;
	color: var(--powerx-color-on-dark, #ffffff);
}

.px-spinner .path {
	stroke: currentColor;
	stroke-linecap: round;
	animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
	100% { transform: rotate(360deg); }
}

@keyframes dash {
	0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
	50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
	100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

/* =============================================================================
   6.0 INLINE CAPSULE SEARCH BAR LAYOUT (.px-layout-inline)
   ============================================================================= */
.elementor-widget-px-search:has(.px-layout-inline),
.elementor-widget-px-search.px-search-inline-widget {
	--container-widget-width: 100%;
	--container-widget-flex-grow: 1;
	width: 100%;
	flex-grow: 1;
}

.elementor-widget-px-search:has(.px-layout-inline) > .elementor-widget-container,
.elementor-widget-px-search.px-search-inline-widget > .elementor-widget-container {
	width: 100%;
	display: flex;
}

.px-search-wrapper.px-layout-inline {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	flex-grow: 1;
}

.px-search-wrapper.px-layout-inline .px-search-inline-box {
	display: flex;
	align-items: center;
	width: 100%;
	flex-grow: 1;
	min-height: var(--px-search-box-min-height, 44px);
	background: var(--powerx-neutral-100, #f1f5f9);
	border-width: var(--px-search-border-width, 1.5px);
	border-style: var(--px-search-border-style, solid);
	border-color: var(--px-search-border-color, transparent);
	border-radius: var(--px-search-box-radius, var(--powerx-radius-full, 9999px));
	padding: var(--px-search-box-padding, 6px 12px 6px 16px);
	box-sizing: border-box;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	cursor: text;
	position: relative;
}

.px-search-wrapper.px-layout-inline .px-search-inline-box:hover {
	background-color: var(--powerx-neutral-150, #e2e8f0);
	border-color: var(--powerx-neutral-200, #cbd5e1);
}

.px-search-wrapper.px-layout-inline .px-search-inline-box:focus-within {
	background-color: var(--powerx-neutral-0, #ffffff);
	border-color: var(--powerx-primary-500, #ffd400);
	box-shadow: 0 0 0 3px var(--powerx-color-alpha, rgba(255, 212, 0, 0.2)), 0 4px 12px var(--powerx-overlay-dark, rgba(0, 0, 0, 0.06));
}

.px-search-inline-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--powerx-neutral-500, #94a3b8);
	margin-right: 10px;
	flex-shrink: 0;
	transition: color 0.2s ease;
}

.px-search-inline-icon svg {
	width: var(--px-search-inline-icon-size, 18px);
	height: var(--px-search-inline-icon-size, 18px);
	fill: currentColor;
}

.px-search-wrapper.px-layout-inline .px-search-inline-box:focus-within .px-search-inline-icon {
	color: var(--powerx-primary-500, #ffd400);
}

.px-search-inline-input {
	flex: 1;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	font-size: 14px;
	font-weight: 500;
	color: var(--powerx-neutral-800, #1e293b);
	font-family: inherit;
	padding: 0 !important;
	box-shadow: none !important;
	min-width: 0;
}

.px-search-inline-input::placeholder {
	color: var(--powerx-neutral-400, #94a3b8);
	font-weight: 400;
	opacity: 1;
}

.px-search-shortcut-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	color: var(--powerx-neutral-500, #64748b);
	background: var(--powerx-overlay-dark, rgba(0, 0, 0, 0.05));
	border: 1px solid var(--powerx-overlay-dark, rgba(0, 0, 0, 0.08));
	padding: var(--px-search-badge-padding, 3px 8px);
	border-radius: var(--powerx-radius-sm, 6px);
	pointer-events: auto;
	cursor: pointer;
	letter-spacing: 0.5px;
	white-space: nowrap;
	flex-shrink: 0;
	margin-left: 8px;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	user-select: none;
}

.px-search-shortcut-badge:hover {
	background: var(--powerx-overlay-dark, rgba(0, 0, 0, 0.09));
	color: var(--powerx-neutral-700, #334155);
}

/* =============================================================================
   7.0 INLINE LIVE RESULTS DROPDOWN
   ============================================================================= */
.px-search-inline-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	width: 100%;
	min-width: 300px;
	background: var(--powerx-neutral-0, #ffffff);
	border-width: var(--px-dropdown-border-width, 1px);
	border-style: var(--px-dropdown-border-style, solid);
	border-color: var(--px-dropdown-border-color, var(--powerx-neutral-200, #e2e8f0));
	border-radius: var(--px-search-dropdown-radius, var(--powerx-radius-lg, 16px));
	box-shadow: 0 16px 36px -4px var(--powerx-overlay-dark, rgba(0, 0, 0, 0.15)), 0 6px 12px -2px var(--powerx-overlay-dark, rgba(0, 0, 0, 0.08));
	z-index: var(--powerx-z-modal, 10000);
	display: none;
	overflow: hidden;
	max-height: var(--px-search-dropdown-max-height, 420px);
	overflow-y: auto;
	box-sizing: border-box;
}

.px-search-inline-dropdown.is-active {
	display: block;
	animation: pxSearchInlineFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pxSearchInlineFadeIn {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.px-search-inline-dropdown .px-search-results-inner {
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.px-search-inline-dropdown .px-search-result-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: var(--px-search-inline-item-pad, 10px 12px);
	border-radius: var(--powerx-radius-md, 8px);
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
	border-bottom: none;
}

.px-search-inline-dropdown .px-search-result-item:hover {
	background: var(--powerx-neutral-100, #f1f5f9);
	transform: translateX(3px);
}

.px-search-inline-dropdown .px-search-result-img {
	width: 42px;
	height: 42px;
	border-radius: var(--powerx-radius-sm, 6px);
	object-fit: cover;
	flex-shrink: 0;
	background: var(--powerx-neutral-200, #e2e8f0);
}

.px-search-inline-dropdown .px-search-result-content {
	flex-grow: 1;
	overflow: hidden;
}

.px-search-inline-dropdown .px-search-result-title {
	color: var(--powerx-neutral-900, #0f172a);
	font-size: 14px;
	font-weight: 600;
	margin: var(--px-search-inline-title-margin, 0 0 2px 0);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.px-search-inline-dropdown .px-search-result-type {
	color: var(--powerx-neutral-500, #64748b);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.px-search-inline-dropdown .px-search-no-results {
	color: var(--powerx-neutral-500, #64748b);
	text-align: center;
	font-size: 14px;
	padding: 24px 16px;
}

.px-search-inline-dropdown .px-spinner {
	color: var(--powerx-primary-500, #ffd400);
}

@media (prefers-reduced-motion: reduce) {
	.px-search-modal-backdrop.is-active,
	.px-search-inline-dropdown.is-active {
		animation: none;
		opacity: 1;
	}
	.px-search-modal-inner {
		animation: none;
		transform: none;
		opacity: 1;
	}
	.px-search-close {
		transition: opacity 0.2s ease;
	}
	.px-search-close:hover {
		transform: none;
	}
	.px-spinner {
		animation: none;
	}
	.px-spinner .path {
		animation: none;
		stroke-dasharray: 90, 150;
	}
}

.px-search-inline-btn {
	display: none;
}