/* Hide the native hero search bar by default on the homepage only */
.lp-sp-page .lp-search-bar {
	display: none;
}

/* ==========================================================================
   Fix: unclickable category boxes on the "classic" banner view
   ========================================================================== */
/*
 * The theme's header.php adds a "new-banner-view-category-st" modifier class
 * to .home-categories-area whenever the Redux "main text" option is empty --
 * regardless of which banner style is active. Its own CSS (main.css) only
 * compensates for that modifier when it's paired with the plain
 * ".new-banner-view-category" ancestor class (the "view4"/"search inside"
 * banner styles). The "classic" banner style (.banner-view-classic) never
 * gets that pairing, so the rest of the theme's CSS never gives this
 * specific combination its own z-index the way the other banner views get.
 * .lp-home-categoires keeps its intended position: absolute (the overlap
 * over the banner's bottom edge is by design, not a bug) but with no
 * z-index, so the next section -- later in the DOM, same default stacking
 * level -- paints over it. The boxes stay visually in place but every
 * click is swallowed by that section instead of reaching the links
 * underneath. Only the stacking order needs fixing, not the position.
 */
.home-categories-area .lp-home-categoires,
.home-categories-area .lp-home-categoires li,
.home-categories-area .lp-home-categoires li a {
	z-index: 99990 !important;
	pointer-events: auto !important;
}

/* ==========================================================================
   Fix: "Where" location dropdown unusable inside the modal
   ========================================================================== */
/*
 * The theme styles its dropdown widgets at z-index: 1010 (.chosen-drop,
 * assets/lib/chosen/chosen.css) and z-index: 1051 (.select2-dropdown,
 * assets/css/select2.css). Our modal (#lp-sp-modal) sits at z-index: 99999,
 * so once the relocated search bar's location field is opened inside the
 * modal, its options panel renders *underneath* the modal instead of on
 * top of it -- invisible, but still occupying that screen space and still
 * catching clicks meant for whatever the modal shows there instead
 * (a second attempt to open/change it, or the Search button right below
 * it). Forcing these above the modal's own z-index fixes both: the panel
 * becomes visible again, and it stops swallowing clicks meant for
 * neighboring controls once it's supposed to be closed.
 */
.chosen-drop,
.chosen-container.chosen-with-drop .chosen-drop,
.select2-dropdown,
.select2-container--open .select2-dropdown,
#lp-sp-form-target .ui-autocomplete,
#lp-sp-form-target #input-dropdown {
	z-index: 1000000 !important;
}

/* ==========================================================================
   Overlay + modal shell
   ========================================================================== */

.lp-sp-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(15, 20, 30, 0.6);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	z-index: 99998;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.lp-sp-modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -47%) scale(0.97);
	z-index: 99999;
	background: #fff;
	border-radius: 18px;
	padding: 46px 46px 40px;
	width: 92%;
	max-width: 640px;
	/* overflow intentionally left visible: the Chosen/autocomplete dropdowns
	   are position:absolute and would get clipped by a scrolling ancestor
	   even with a high z-index, so clipping is only enabled as a fallback
	   on short viewports below, where it's unavoidable. */
	overflow: visible;
	box-shadow: 0 25px 70px rgba(15, 20, 30, 0.4);
	opacity: 0;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

@media (max-height: 700px) {
	.lp-sp-modal {
		max-height: 92vh;
		overflow-y: auto;
	}
}

.lp-sp-overlay.lp-sp-open {
	display: block;
	opacity: 1;
}

.lp-sp-modal.lp-sp-open {
	display: block;
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.lp-sp-modal-header {
	margin: 0 0 26px;
	padding-right: 28px;
}

.lp-sp-modal-header h3 {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.2px;
	color: #14171f;
}

.lp-sp-modal-header p {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: #767e8c;
}

.lp-sp-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f2f5;
	border: none;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: #5b6270;
	padding: 0;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.lp-sp-close:hover {
	background: #e7e9ee;
	color: #14171f;
	transform: rotate(90deg);
}

/* ==========================================================================
   Search form, rebuilt independently of the theme's hero-scoped CSS.
   The native styling for .lp-search-bar only applies inside its original
   hero wrapper, so everything here is deliberately self-contained and does
   not depend on any theme-provided layout, including the native field
   labels/icons, which are hidden below and replaced with our own.
   ========================================================================== */

#lp-sp-form-target .lp-search-bar {
	display: block !important;
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border: none;
	width: 100%;
}

#lp-sp-form-target form.form-inline {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

#lp-sp-form-target .form-group {
	display: block !important;
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Hide the theme's native "What"/"Where" label chips entirely -- their
   styling only looks right inside the original hero markup, and fighting
   that cascade field-by-field is fragile. We draw our own labels instead. */
#lp-sp-form-target .input-group-addon {
	display: none !important;
}

#lp-sp-form-target .pos-relative,
#lp-sp-form-target .what-placeholder,
#lp-sp-form-target .ui-widget {
	width: 100%;
}

.lp-sp-field-label {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #9199a8;
}

#lp-sp-form-target input.lp-search-input,
#lp-sp-form-target select#searchlocation {
	width: 100% !important;
	height: 56px;
	box-sizing: border-box;
	border: 1.5px solid #e7e9ee;
	border-radius: 12px;
	background: #f7f8fa;
	padding: 0 46px 0 46px;
	font-size: 16px;
	color: #14171f;
	transition: border-color 0.15s ease, background 0.15s ease;
}

#lp-sp-form-target input.lp-search-input::placeholder {
	color: #a7adb8;
}

#lp-sp-form-target input.lp-search-input:focus,
#lp-sp-form-target select#searchlocation:focus {
	outline: none;
	border-color: #2196f3;
	background: #fff;
}

/* Decorative leading icon inside the "What" field */
.lp-sp-field {
	position: relative;
}

.lp-sp-field::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 16px;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	z-index: 5;
	pointer-events: none;
	opacity: 0.55;
}

.lp-sp-field--what::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}

.lp-sp-field--where::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
}

#lp-sp-form-target .cross-search-q {
	right: 16px;
	left: auto;
	top: 50%;
	transform: translateY(-50%);
}

#lp-sp-form-target .lp-location-search .ui-widget.border-dropdown > i {
	left: auto;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}

#lp-sp-form-target .lp-location-search select#searchlocation {
	padding-right: 44px;
}

/* Chosen / select2 render their own widget in place of the <select>; make
   sure it takes the full width and matches the custom field styling. */
#lp-sp-form-target .chosen-container,
#lp-sp-form-target .select2-container {
	width: 100% !important;
}

#lp-sp-form-target .chosen-container .chosen-single {
	height: 56px;
	line-height: 56px;
	border: 1.5px solid #e7e9ee;
	border-radius: 12px;
	background: #f7f8fa;
	box-shadow: none;
	padding: 0 46px 0 46px;
}

#lp-sp-form-target .chosen-container.chosen-with-drop .chosen-single,
#lp-sp-form-target .chosen-container .chosen-single:hover {
	border-color: #2196f3;
	background: #fff;
}

#lp-sp-form-target .chosen-container .chosen-single span {
	font-size: 15px;
	color: #14171f;
}

#lp-sp-form-target .chosen-container .chosen-drop {
	border-radius: 12px;
	overflow: hidden;
	border-color: #e7e9ee;
	box-shadow: 0 12px 30px rgba(15, 20, 30, 0.15);
	margin-top: 6px;
}

/* Autocomplete suggestion dropdown for the "What" field */
#lp-sp-form-target #input-dropdown {
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(15, 20, 30, 0.15);
	border: 1px solid #eef0f3;
	margin-top: 6px;
}

#lp-sp-form-target .form-group.pull-right {
	padding-top: 2px;
}

#lp-sp-form-target .lp-search-bar-right {
	position: relative;
	width: 100%;
}

#lp-sp-form-target .lp-search-btn {
	width: 100%;
	height: 56px;
	border: none;
	border-radius: 12px;
	background: #41a6df;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.2px;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(65, 166, 223, 0.4);
	transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

#lp-sp-form-target .lp-search-btn:hover {
	filter: brightness(0.94);
	box-shadow: 0 12px 28px rgba(65, 166, 223, 0.5);
}

#lp-sp-form-target .lp-search-btn:active {
	transform: translateY(1px);
}

/* The theme renders its own magnifier icon as a separate sibling meant to
   overlay the button; it's simpler and more reliable to hide it and draw
   our own icon via the button background instead. */
#lp-sp-form-target .lp-search-icon {
	display: none;
}

#lp-sp-form-target .lp-search-btn {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 20px center;
	background-size: 18px 18px;
	padding-left: 30px;
}

@media (max-width: 600px) {
	.lp-sp-modal {
		padding: 28px 20px 24px;
		width: 94%;
		border-radius: 14px;
	}
}