/*
 * Kill horizontal scroll site-wide.
 * Offenders: Elementor custom CSS (es-search form width:1920px),
 * stretched sections using 100vw, and --width:1920px containers.
 */
html {
	overflow-x: hidden !important;
	max-width: 100% !important;
}

body.hnsafal-no-x-scroll,
body {
	overflow-x: hidden !important;
	max-width: 100% !important;
	position: relative !important;
}

.site,
#page,
#content,
.elementor,
.elementor-location-header,
.elementor-location-footer {
	max-width: 100% !important;
	overflow-x: hidden !important;
	box-sizing: border-box !important;
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

/* Elementor custom CSS forces 1920px search form — always clamp */
.es-search--simple form,
.widget .es-search--simple form,
.es-search-nav-wrap,
.es-search__wrapper,
form.es-search,
.es-search {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Home page containers set to --width:1920px in post-20.css */
.elementor-20 .elementor-element-dd9bf09,
.elementor-20 .elementor-element-4425bcb {
	--width: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* 100vw includes scrollbar gutter and causes X-scroll */
.elementor-section.elementor-section-stretched,
.e-con.e-con-full.e-parent {
	max-width: 100% !important;
}

.hnsafal-hide-construction {
	display: none !important;
}

/*
 * Theme CSS floats span.es-btn__label { position:absolute; top:13vh }.
 * Neutralize float only — do not restyle every Estatik button globally
 * (that broke the header popup menu search).
 */
body .es-search .es-btn__label,
body .es-search button .es-btn__label {
	position: static !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	bottom: auto !important;
	inset: auto !important;
	transform: none !important;
}

/* --------------------------------------------------------------------------
   HOME hero: hide until Mondeal One is active (stops Riviera→Mondeal flash)
   -------------------------------------------------------------------------- */
body.home .e-n-carousel .swiper,
body.home .elementor-widget-n-carousel .swiper,
body.home .elementor-slides-wrapper .swiper,
body.home .elementor-main-swiper {
	opacity: 0;
}
body.home .e-n-carousel .swiper.hnsafal-hero-ready,
body.home .elementor-widget-n-carousel .swiper.hnsafal-hero-ready,
body.home .elementor-slides-wrapper .swiper.hnsafal-hero-ready,
body.home .elementor-main-swiper.hnsafal-hero-ready,
body.home.hnsafal-hero-fallback .e-n-carousel .swiper,
body.home.hnsafal-hero-fallback .elementor-widget-n-carousel .swiper,
body.home.hnsafal-hero-fallback .elementor-slides-wrapper .swiper,
body.home.hnsafal-hero-fallback .elementor-main-swiper {
	opacity: 1;
	transition: opacity 0.15s ease;
}

/* --------------------------------------------------------------------------
   HOME "Search Projects": Location | Type | Status row, Search BELOW.
   Button is first in DOM — flex order puts filters first.
   table-layout for equal columns (no flex on UL — keeps Estatik dropdowns).
   -------------------------------------------------------------------------- */
.es-search--simple.es-search--collapsed .es-search-nav > li > a,
.widget .es-search--simple.es-search--collapsed .es-search-nav > li > a {
	display: block !important;
	color: #ffffff !important;
	font-size: 18px !important;
}

.es-search--simple .es-search-nav > li:not(.active) > .es-search-nav__content,
.es-search--simple.es-search--collapsed .es-search-nav > li:not(.active) > .es-search-nav__content,
.widget .es-search--simple .es-search-nav > li:not(.active) > .es-search-nav__content {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.es-search--simple .es-search-nav > li.active > .es-search-nav__content,
.widget .es-search--simple .es-search-nav > li.active > .es-search-nav__content {
	display: block !important;
	visibility: visible !important;
	pointer-events: auto !important;
	position: absolute !important;
	z-index: 30 !important;
	background: #ffffff !important;
	color: #222222 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.es-search--simple .es-search-nav > li.active > .es-search-nav__content .es-field__label,
.es-search--simple .es-search-nav > li.active > .es-search-nav__content label {
	color: #222222 !important;
}

.es-search--simple > form,
.es-search.es-search--address-disabled.es-search--simple > form,
.widget .es-search--simple form {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: 900px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
	text-align: left !important;
}

.es-search--simple .es-search__collapse-link {
	display: none !important;
}

.es-search--simple .es-search-nav-wrap {
	order: 1 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	overflow: visible !important;
	box-sizing: border-box !important;
}

.es-search--simple .es-search-nav.es-search-nav--dropdowns,
.widget .es-search--simple .es-search-nav.es-search-nav--dropdowns {
	display: table !important;
	width: 100% !important;
	max-width: 100% !important;
	table-layout: fixed !important;
	border-collapse: collapse !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

@media (min-width: 720px) {
	.es-search--simple .es-search-nav.es-search-nav--dropdowns > li,
	.widget .es-search--simple .es-search-nav.es-search-nav--dropdowns > li {
		display: table-cell !important;
		float: none !important;
		width: 33.333% !important;
		vertical-align: middle !important;
		position: relative !important;
		box-sizing: border-box !important;
	}

	.es-search--simple .es-search-nav.es-search-nav--dropdowns > li > a,
	.widget .es-search--simple .es-search-nav.es-search-nav--dropdowns > li > a {
		display: block !important;
		color: #ffffff !important;
		font-size: 18px !important;
		overflow: hidden !important;
	}

	.es-search--simple .js-es-search-nav__label,
	.es-search--simple .es-search-nav__label {
		color: #ffffff !important;
		opacity: 1 !important;
		visibility: visible !important;
		float: left !important;
	}

	.es-search--simple span.es-icon.es-icon_chevron-bottom.js-es-search-nav__open,
	.widget .es-search--simple span.es-icon.es-icon_chevron-bottom.js-es-search-nav__open {
		padding-left: 0 !important;
		float: right !important;
		color: #ffffff !important;
	}
}

.es-search--simple button.es-btn--search,
.es-search--simple button.es-btn.es-btn--primary.es-btn--search {
	order: 2 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	position: static !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	margin: 1.25rem auto 0 !important;
	width: auto !important;
	min-width: 8rem !important;
	height: 44px !important;
	padding: 0 1.75rem !important;
	background: #fff !important;
	color: #35363d !important;
	border-radius: 999px !important;
	border: none !important;
	box-shadow: none !important;
	overflow: hidden !important;
	flex: 0 0 auto !important;
}

.es-search--simple button.es-btn--search .es-btn__label,
.es-search--simple button.es-btn--search > .es-btn__label {
	display: none !important;
}

.es-search--simple button.es-btn--search .es-icon.es-icon_search {
	display: inline-block !important;
	margin: 0 !important;
}

/* --------------------------------------------------------------------------
   PROJECTS page main address search: input + black Search pill in one row
   (do NOT apply to popup .es-search--advanced / --vertical)
   -------------------------------------------------------------------------- */
.es-search--main .es-search__address,
.es-search.es-search--desktop:not(.es-search--simple):not(.es-search--advanced):not(.es-search--vertical) .es-search__address {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 10px !important;
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box !important;
	position: relative !important;
}

.es-search--main .es-search__address .es-field__address,
.es-search--main .es-search__address input.js-es-address,
.es-search--main .es-search__address input[name="address"] {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.es-search--main .es-search__address button.es-btn.es-btn--primary,
.es-search.es-search--desktop:not(.es-search--simple):not(.es-search--advanced):not(.es-search--vertical) .es-search__address button.es-btn--primary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	position: relative !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	overflow: visible !important;
}

.es-search--main .es-search__address button.es-btn .es-icon.es-icon_search {
	display: none !important;
}

.es-search--main .es-search__address .es-btn__label {
	display: inline-flex !important;
	position: static !important;
}

/* --------------------------------------------------------------------------
   Header MENU POPUP search: one input, one Search — no duplicate pills
   -------------------------------------------------------------------------- */
.elementor-popup-modal .es-search__address {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px !important;
	width: 100% !important;
	max-width: 100% !important;
}

.elementor-popup-modal .es-search__address button.es-btn--icon,
.elementor-popup-modal .es-search__address button.es-btn.es-btn--primary.es-btn--icon {
	display: none !important; /* use the explicit Search in .es-search__buttons */
}

.elementor-popup-modal .es-search__address .es-btn__label {
	display: none !important;
}

.elementor-popup-modal .es-search__buttons {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin-top: 12px !important;
}

html body .elementor-popup-modal .es-search__buttons button.es-btn.es-btn--primary,
html body .elementor-popup-modal .es-search__buttons button.es-btn--primary[type="submit"],
html body .elementor-popup-modal .es-search button.es-btn.es-btn--primary:not(.es-btn--icon) {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	position: relative !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	background: #111111 !important;
	background-color: #111111 !important;
	background-image: none !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 10px 22px !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 8rem !important;
	height: auto !important;
	min-height: 44px !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	opacity: 1 !important;
}

/*
 * Theme CSS: .es-icon_search:before { content:"Search" }
 * + button text "Search" = "Search SEARCH". Kill the icon on text buttons.
 */
.es-search .es-btn.es-btn--primary:not(.es-btn--icon) > .es-icon.es-icon_search,
.es-search .es-btn.es-btn--primary:not(.es-btn--icon) > .es-icon,
body .elementor-popup-modal .es-search__buttons .es-btn--primary .es-icon,
body .elementor-popup-modal .es-search__buttons .es-btn--primary .es-icon_search {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	overflow: hidden !important;
}

.es-search .es-btn.es-btn--primary:not(.es-btn--icon) .es-icon_search::before,
.es-search .es-btn.es-btn--primary:not(.es-btn--icon) .es-icon_search:before,
body .elementor-popup-modal .es-search__buttons .es-btn--primary .es-icon_search::before,
body .elementor-popup-modal .es-search__buttons .es-btn--primary .es-icon_search:before {
	content: none !important;
	display: none !important;
}

body .elementor-popup-modal .es-search__buttons .es-btn--primary .es-btn__label {
	display: none !important; /* button already has text "Search" */
}

body .elementor-popup-modal .es-search__buttons .js-es-save-search,
body .elementor-popup-modal .es-search__buttons button[type="reset"] {
	display: none !important;
}

/* Popup open: lock page scroll — only ONE scrollport inside the popup */
html.hnsafal-popup-open,
body.hnsafal-popup-open {
	overflow: hidden !important;
	overscroll-behavior: none !important;
}

/* Outer shell clips; inner message scrolls → one bar, not two */
.elementor-popup-modal .dialog-lightbox-widget-content {
	overflow: hidden !important;
	max-height: calc(100vh - 40px) !important;
}

.elementor-popup-modal .dialog-lightbox-message,
.elementor-popup-modal .dialog-message {
	overflow-x: hidden !important;
	overflow-y: auto !important;
	max-height: calc(100vh - 40px) !important;
	-webkit-overflow-scrolling: touch;
	scrollbar-gutter: auto;
}

/* Commercial category tile: force Mondeal One (not Mondeal Square) */
#uc_hover_text_reveal_content_box_elementor_2089def .uc_image_box,
.elementor-element-2089def .uc_image_box {
	background-image: url("https://www.hnsafal.com/wp-content/uploads/2025/11/mondeal-one-2024-scaled.webp") !important;
}

/* ==========================================================================
   MOBILE-ONLY FIXES (desktop stretch untouched)
   ========================================================================== */
@media (max-width: 1024px) {
	/* Hero opening photos — kill Elementor 70% mobile max-width */
	.swiper-slide .swiper-slide-image,
	.swiper-slide img.swiper-slide-image,
	.elementor-slides .swiper-slide-image,
	.e-n-carousel .swiper-slide img,
	.elementor-widget-image-carousel .swiper-slide img {
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		object-fit: cover;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.swiper-slide-inner,
	.swiper-slide figure {
		width: 100% !important;
		max-width: 100% !important;
	}

	/*
	 * Address search only (/projects/): Estatik icon button + crushed label.
	 * Do NOT restyle home .es-search--simple (white CTA + filters).
	 */
	.es-search:not(.es-search--simple):not(.es-search--address-disabled),
	form.es-search:not(.es-search--simple):not(.es-search--address-disabled),
	.es-search__wrapper {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		gap: 8px !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.es-search:not(.es-search--simple) .es-search__address,
	.es-search:not(.es-search--simple) .es-field__address {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.es-search:not(.es-search--simple):not(.es-search--address-disabled) .es-btn.es-btn--search,
	.es-search:not(.es-search--simple):not(.es-search--address-disabled) .es-btn--search,
	.es-search:not(.es-search--simple):not(.es-search--address-disabled) button.es-btn--search,
	.es-search:not(.es-search--simple):not(.es-search--address-disabled) .es-btn--primary {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px !important;
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 7.5rem !important;
		max-width: 100% !important;
		height: 40px !important;
		padding: 0 1.25rem !important;
		line-height: 1.2 !important;
		text-align: center !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
		white-space: nowrap !important;
		position: relative !important;
	}

	.es-search:not(.es-search--simple):not(.es-search--address-disabled) .es-btn--primary .es-icon,
	.es-search:not(.es-search--simple):not(.es-search--address-disabled) .es-btn--primary .es-btn__label,
	.es-search:not(.es-search--simple):not(.es-search--address-disabled) .es-btn--search .es-icon,
	.es-search:not(.es-search--simple):not(.es-search--address-disabled) .es-btn--search .es-btn__label,
	.es-search:not(.es-search--simple):not(.es-search--address-disabled) .es-btn span {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		line-height: 1 !important;
		margin: 0 !important;
		position: static !important;
		left: auto !important;
		transform: none !important;
		vertical-align: middle !important;
	}

	.es-search:not(.es-search--simple):not(.es-search--address-disabled) .es-btn__label {
		font-size: 14px !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* Estatik full-width negative margins break mobile */
	.es-properties,
	.es-properties--hfm--full-width,
	.es-properties__list,
	.elementor-widget-es-listings-widget .elementor-widget-container {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		left: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	/* Projects listing cards bleed left (~-15px / wider than viewport) */
	.elementor-widget-es-listings-widget,
	.elementor-widget-es-listings-widget .elementor-widget-container,
	.es-listings,
	.es-listings__wrap,
	.es-listings__wrap-inner,
	.es-entities__wrap,
	.es-search {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	.js-es-listing.es-listing,
	.es-listing,
	.es-listing--grid,
	.es-property,
	article.es-listing,
	.properties.type-properties,
	.es-listings > .properties,
	.es-listings > .js-es-listing,
	.es-listings--grid-1 > * {
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: 0 !important;
		right: auto !important;
		transform: none !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		position: relative !important;
	}

	/* Address search only: stack address + button (no "Addr..." crush).
	   Do not column-stack home .es-search--simple filters. */
	.es-search:not(.es-search--simple):not(.es-search--address-disabled) form,
	form.es-search:not(.es-search--simple):not(.es-search--address-disabled),
	.es-search:not(.es-search--simple).js-es-search form {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
		width: 100% !important;
	}

	.es-search:not(.es-search--simple) .es-search__address {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
		width: 100% !important;
		max-width: 100% !important;
		position: relative !important;
	}

	.es-search:not(.es-search--simple) .es-search__address .es-field__address,
	.es-search:not(.es-search--simple) .es-field__address {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.es-search:not(.es-search--simple) .es-search__address input.js-es-address,
	.es-search:not(.es-search--simple) input[name="address"] {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		padding-left: 2.5rem !important;
	}

	.es-search:not(.es-search--simple) .es-search__address .es-btn,
	.es-search:not(.es-search--simple) .es-btn--search,
	.es-search:not(.es-search--simple) button.es-btn--search,
	.es-search:not(.es-search--simple) button.es-btn--primary,
	.es-search:not(.es-search--simple) button[type="submit"],
	.es-search:not(.es-search--simple) .es-search__address button[type="submit"] {
		position: static !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	.es-listing__image,
	.es-listing__image__background,
	.es-listings__image__link {
		left: 0 !important;
		margin-left: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		background-size: cover !important;
		background-position: center !important;
	}

	.es-listing__content,
	.es-listing__content__inner,
	.es-listing__content__left,
	.es-listing__body,
	.es-listing h3,
	.es-listing__title,
	.es-listing__location,
	.es-listing .es-property-field {
		max-width: 100% !important;
		width: auto !important;
		overflow-wrap: anywhere;
		word-break: break-word;
		text-align: left !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		margin-left: 0 !important;
		left: 0 !important;
		box-sizing: border-box !important;
	}

	.es-listing img,
	.es-listing__image img {
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
	}

	/* Footer columns stack */
	.elementor-location-footer .e-con.e-flex > .e-con,
	.elementor-location-footer .elementor-container > .elementor-column {
		width: 100% !important;
		max-width: 100% !important;
	}
}

@media (max-width: 767px) {
	.elementor-hidden-desktop .swiper,
	.elementor-hidden-desktop .e-n-carousel,
	.elementor-hidden-laptop .swiper {
		max-height: 70vh;
	}

	/* Property pages (Mondeal One etc.): heading size + gap under hero image */
	body.single-properties .elementor-widget-image,
	body.single-properties .elementor-widget-theme-post-featured-image,
	body.single-properties .elementor-widget-image .elementor-widget-container,
	body.post-type-archive-properties .elementor-widget-image {
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}

	body.single-properties .elementor-widget-image img {
		margin-bottom: 0 !important;
		display: block;
	}

	body.single-properties .elementor-heading-title,
	body.single-properties h1.elementor-heading-title,
	body.single-properties .entry-title {
		font-size: clamp(1.4rem, 6vw, 1.9rem) !important;
		line-height: 1.25 !important;
		margin-top: 0.5rem !important;
	}
}