/*
Theme Name: Elhamza Realty
Theme URI: https://elhamza.ma
Description: Minimal Elhamza child theme for licensed dRealEstate with native-demo presentation and Elhamza identity.
Author: Elhamza
Version: 2.2.1
Template: drealestate
Text Domain: elhamza-realty
*/

/*
 * Several elements are intentionally positioned off-canvas or oversized-
 * then-clipped (the slide-in mobile menu at `left:-560px`, the cropped
 * header logo image) by the parent theme/JS. Their ancestors clip them
 * visually, but nothing stops them from expanding the *document's*
 * scrollable width, which produced a persistent few-pixels-wide
 * horizontal scrollbar on phones. Clipping at the document boundary is
 * the standard fix and does not change any spacing, color, or layout a
 * visitor can see.
 */
html,
body {
	overflow-x: hidden;
}

/* Compact native header; the hero retains the site's primary search. */
.theme-header-menu-area {
	padding-block: 15px !important;
}

.theme-header-logo-wrap,
.theme-header-logo-inner,
.theme-header-logo-brand {
	height: 50px !important;
}

.theme-header-logo-wrap {
	width: 166px !important;
}

.theme-header-logo-inner {
	width: 146px !important;
	margin-right: 20px !important;
}

.theme-header-logo-brand {
	position: relative !important;
	display: block !important;
	width: 146px !important;
	margin: 0 !important;
	overflow: hidden !important;
}

/* Breathing room between the logo and the first nav link - logical
   property so it lands on the correct side automatically in RTL. */
.theme-menu-container {
	margin-inline-start: 28px;
}

.theme-header-logo-brand img {
	position: absolute !important;
	display: block !important;
	top: 50% !important;
	left: 50% !important;
	width: 250px !important;
	max-width: none !important;
	height: auto !important;
	transform: translate(-50%, -50%) !important;
}

/* Slightly stronger visual weight for popular categories below the hero. */
.directorist-listing-category-top .directorist-icon-mask {
	width: 24px !important;
	height: 24px !important;
}

@media (max-width: 991px) {
	.theme-header-menu-area {
		padding-block: 10px !important;
	}

	.theme-header-logo-wrap,
	.theme-header-logo-inner,
	.theme-header-logo-brand {
		height: 50px !important;
	}

}

@media (max-width: 575px) {
	.theme-header-logo-wrap,
	.theme-header-logo-inner {
		width: 126px !important;
	}

	.theme-header-logo-inner {
		margin-right: 0 !important;
	}

	.theme-header-logo-brand {
		width: 110px !important;
		margin-right: 16px !important;
	}

	.theme-header-logo-brand img {
		width: 214px !important;
	}

	.directorist-search-top__title {
		margin-bottom: 12px !important;
	}
}

/*
 * Hero search card: a light, translucent panel instead of solid white so
 * the hero photo behind it stays visible through and around the card
 * (Directorist ships this as opaque white by default). A subtle blur keeps
 * the fields readable over busy parts of the photo. Applied at every width;
 * the mobile one-line layout below relies on the same rule.
 */
.directorist-search-form__box {
	background-color: rgba(255, 255, 255, .82) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/*
 * Directorist stacks Title/City/Type/button into a tall single column below
 * 767px (its own default), which used to push the card's height to most of
 * the hero section and hide the background photo behind it almost entirely.
 * Keeping the search on one compact row instead - like the desktop layout,
 * scaled down - both matches the requested one-line mobile search bar and,
 * combined with the translucent background above, leaves the hero photo
 * visible on narrow phones.
 */
@media (max-width: 767px) {
	.directorist-search-form__box {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 6px !important;
		padding: 10px !important;
	}

	.directorist-search-form-top,
	.directorist-search-form__top {
		width: auto !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	.directorist-search-form-top .directorist-search-adv-filter,
	.directorist-search-form__top .directorist-search-adv-filter {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 6px !important;
		width: 100% !important;
	}

	.directorist-search-form-top .directorist-search-field,
	.directorist-search-form__top .directorist-search-field {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 4px !important;
		border-inline-end: 1px solid var(--directorist-color-border, #e6e8ed) !important;
	}

	.directorist-search-form-top .directorist-search-field:last-child,
	.directorist-search-form__top .directorist-search-field:last-child {
		border-inline-end: 0 !important;
	}

	.directorist-search-form-top .directorist-search-field__label,
	.directorist-search-form__top .directorist-search-field__label {
		font-size: 9px !important;
		margin: 0 0 2px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	.directorist-search-form-top .directorist-search-field .directorist-form-element,
	.directorist-search-form-top .directorist-search-field .directorist-select,
	.directorist-search-form__top .directorist-search-field .directorist-form-element,
	.directorist-search-form__top .directorist-search-field .directorist-select {
		font-size: 12px !important;
		padding: 0 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	.directorist-search-form-top .directorist-search-field .directorist-search-field__btn,
	.directorist-search-form__top .directorist-search-field .directorist-search-field__btn {
		display: none !important;
	}

	.directorist-search-form-action {
		width: auto !important;
		flex: 0 0 auto !important;
		display: flex !important;
		align-items: center !important;
		gap: 4px !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.directorist-search-form-action__filter .directorist-filter-btn {
		padding: 8px !important;
	}

	.directorist-search-form-action__submit .directorist-btn-search {
		padding: 8px 10px !important;
		font-size: 0 !important;
	}

	.directorist-search-form-action__submit .directorist-btn-search i {
		font-size: 16px !important;
	}

	/*
	 * Select2 sizes/positions its dropdown in JS from the field's *original*
	 * (pre-compact-CSS) width, so plain CSS can't reliably keep it inside
	 * the viewport here - see the `eh-select2-mobile-fix` script enqueued
	 * in functions.php, which clamps it after Select2 opens it. This part
	 * (the internal scroll for 11 categories' worth of options) is a plain
	 * CSS concern and stays here.
	 */
	.select2-container--open .select2-results > .select2-results__options {
		max-height: 55vh !important;
		overflow-y: auto !important;
	}
}

/*
 * Defensive-only rule, not a design change: the parent's Bootstrap-based
 * grid uses standard negative-margin row gutters, which bleed a small,
 * harmless amount past the viewport edge on narrow phones. Clipping that
 * bleed at the document boundary is the standard fix and does not alter
 * any spacing, color, or layout a visitor can see.
 */

/*
 * RTL foundation: phone numbers are numerals that must read left-to-right
 * even inside Arabic (RTL) text, per standard bidi practice. Without this,
 * the browser's bidi algorithm treats the leading "+" and the space-
 * separated digit groups as independent runs and visually reorders them
 * inside an RTL ancestor - e.g. "+212 520 00 00 00" was rendering as
 * "00 00 00 520 212+" on Arabic listing cards and the single-listing
 * contact box. Isolating every tel: link (and Directorist's own phone
 * list item, for the icon+link wrapper) as its own LTR run fixes the
 * digit order without touching the surrounding RTL layout. Theme-
 * independent - not the parent's design.
 */
.directorist-listing-card-phone,
.directorist-listing-card-phone a,
a[href^="tel:"] {
	direction: ltr;
	unicode-bidi: isolate;
}

/* Minimal supporting pages; native dRealEstate/Directorist styles remain primary. */
.eh-simple-page {
	max-width: 1120px;
	margin: 0 auto;
	padding: 56px 20px 72px;
}

.eh-page-intro {
	max-width: 760px;
}

.eh-page-intro h2,
.eh-contact-layout h2 {
	margin-bottom: 14px;
}

.eh-page-intro p,
.eh-contact-copy p {
	color: #5f6675;
	font-size: 16px;
	line-height: 1.75;
}

.eh-contact-layout {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: 48px;
	align-items: start;
}

.eh-contact-details {
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.eh-contact-details li {
	margin-bottom: 16px;
}

.eh-contact-details strong,
.eh-contact-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.eh-contact-form-wrap {
	padding: 28px;
	background: #fff;
	border: 1px solid #e6e8ed;
	border-radius: 6px;
}

.eh-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.eh-contact-form p {
	margin: 0 0 18px;
}

.eh-contact-form input,
.eh-contact-form textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid #d7dae1;
	border-radius: 4px;
	background: #fff;
}

.eh-contact-form input:focus,
.eh-contact-form textarea:focus {
	border-color: #475467;
	outline: 2px solid rgba(71, 84, 103, .14);
	outline-offset: 1px;
}

/**
 * Standard "visually-hidden" honeypot technique - clipped to nothing in
 * place rather than pushed thousands of pixels off-canvas. The previous
 * `left: -10000px` version caused a severe RTL bug: absolutely-positioned
 * elements with a large negative physical offset expand
 * `document.documentElement.scrollWidth` in a `dir="rtl"` document (a known
 * Chromium/RTL overflow quirk - confirmed directly: it inflated the Arabic
 * Holiday Rentals page to 11366px wide, exactly viewport + 10000). Clipping
 * to a 1x1px box at its normal position hides it just as effectively for
 * real users and bots without moving it anywhere, so it can't blow out
 * scroll width in either direction.
 */
.eh-contact-honeypot {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.eh-form-notice {
	margin-bottom: 20px;
	padding: 12px 14px;
	border-radius: 4px;
}

.eh-form-notice--success {
	background: #eef8f1;
	color: #246b3c;
}

.eh-form-notice--error {
	background: #fff1f1;
	color: #9b2c2c;
}

/* Contact page: native dRealEstate demo proportions with real Elhamza data. */
.eh-demo-contact-page {
	background: #f7f8fa;
	padding: 104px 20px 110px;
}

.eh-demo-contact-page__inner {
	max-width: 1000px;
	margin: 0 auto;
}

.eh-demo-contact-page__title {
	margin: 0 0 34px;
	color: #171b2e;
	font-size: 32px;
	font-weight: 600;
	text-align: center;
}

.eh-demo-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.eh-demo-contact-page .theme-card,
.eh-demo-contact-form-card {
	margin: 0;
	background: #fff;
	border: 1px solid #f0f1f4;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(39, 43, 65, .04);
}

.eh-demo-contact-page .theme-card-header {
	padding: 20px 25px;
	border-bottom: 1px solid #eff1f6;
}

.eh-demo-contact-page .theme-card-header h2,
.eh-demo-contact-form-card h2 {
	margin: 0;
	font-size: 20px;
}

.eh-demo-contact-page .theme-card-body,
.eh-demo-contact-form-card {
	padding: 25px;
}

.eh-demo-contact-page .theme-contact-info__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eh-demo-contact-page .theme-contact-info__list li + li {
	margin-top: 18px;
}

.eh-demo-contact-page .theme-contact-info__list .theme-contact-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.eh-demo-contact-page .theme-contact-info__icon svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: #8b8fa8;
}

.eh-demo-contact-page .theme-contact-info__content {
	margin: 0;
}

.eh-demo-contact-form-card h2 {
	margin-bottom: 14px;
}

.eh-demo-contact-form p {
	margin: 0 0 18px;
}

.eh-demo-contact-form input,
.eh-demo-contact-form textarea {
	display: block;
	width: 100%;
	padding: 12px 16px;
	color: #272b41;
	background: #fff;
	border: 1px solid #ccd0dc;
	border-radius: 6px;
}

.eh-demo-contact-form textarea {
	min-height: 160px;
	resize: vertical;
}

.eh-demo-contact-form input:focus,
.eh-demo-contact-form textarea:focus {
	border-color: #ff385c;
	box-shadow: 0 0 0 2px rgba(255, 56, 92, .12);
	outline: 0;
}

.eh-demo-contact-form .directorist-btn {
	min-height: 42px;
	padding: 0 20px;
}

@media (max-width: 767px) {
	.eh-demo-contact-page {
		padding: 64px 16px 72px;
	}

	.eh-demo-contact-grid {
		grid-template-columns: 1fr;
	}

	.eh-demo-contact-page__title {
		font-size: 28px;
	}

	.eh-simple-page {
		padding: 38px 16px 52px;
	}

	.eh-contact-layout,
	.eh-form-grid {
		grid-template-columns: 1fr;
	}

	.eh-contact-layout {
		gap: 28px;
	}

	.eh-contact-form-wrap {
		padding: 20px;
	}
}

/*
 * Student Accommodation + Holiday Rentals landing pages. Colors are read
 * from the live theme's own custom properties (`--color-primary` etc., set
 * by dRealEstate/Customizer) rather than a hardcoded palette, so these
 * sections always match whatever the site's actual brand color is instead
 * of drifting from it - the same reasoning as the `.directorist-btn`
 * classes reused elsewhere in this file. `--eh-tint`/`--eh-ink` are a
 * light/dark pairing derived from that same color for card backgrounds and
 * body copy, matching the rest of the site's soft-card visual language
 * (`.eh-demo-contact-page .theme-card`, etc.).
 */
.eh-student-housing,
.eh-holiday-rentals {
	--eh-primary: var(--color-primary, #ff385c);
	--eh-primary-hover: var(--color-menu-hover, #e12f4e);
	--eh-tint: #fff1f3;
	--eh-ink: #171b2e;
	--eh-muted: #5f6675;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px 90px;
	color: var(--eh-ink);
}

.eh-student-hero,
.eh-holiday-hero {
	margin: 0 -20px 56px;
	padding: 88px 20px;
	background: linear-gradient(135deg, var(--eh-primary) 0%, var(--eh-primary-hover) 100%);
	color: #fff;
	text-align: center;
}

.eh-student-hero__inner,
.eh-holiday-hero__inner {
	max-width: 760px;
	margin: 0 auto;
}

.eh-student-hero__eyebrow,
.eh-holiday-hero__eyebrow {
	display: inline-block;
	margin-bottom: 18px;
	padding: 6px 16px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
}

.eh-student-hero__title,
.eh-holiday-hero__title {
	margin: 0 0 18px;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.2;
}

.eh-student-hero__subtitle,
.eh-holiday-hero__subtitle {
	margin: 0;
	font-size: 18px;
	line-height: 1.7;
	opacity: .95;
}

.eh-holiday-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 32px;
}

.eh-holiday-hero__ctas .directorist-btn-outline {
	color: #fff;
	border-color: rgba(255, 255, 255, .7);
	background: transparent;
}

.eh-holiday-hero__ctas .directorist-btn-outline:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
}

.eh-holiday-owner-teaser {
	display: inline-block;
	margin-top: 22px;
	color: #fff;
	opacity: .85;
	font-size: 14px;
	text-decoration: underline;
}

.eh-holiday-owner-teaser:hover {
	opacity: 1;
	color: #fff;
}

/* Owner section: follows the traveller/listings content directly, so a
   top rule + spacing marks it as a new, distinct part of the page. */
.eh-holiday-owner-section {
	padding-top: 8px;
	border-top: 1px solid #eceef2;
}

.eh-holiday-city-reset {
	display: inline-block;
	margin-top: 20px;
	color: var(--eh-primary-hover);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
}

.eh-holiday-empty-state {
	padding: 40px 24px;
	text-align: center;
	background: var(--eh-tint);
	border-radius: 12px;
}

.eh-holiday-empty-state__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
}

.eh-holiday-empty-state__text {
	margin: 0 0 20px;
	color: var(--eh-muted);
	font-size: 15px;
}

/* Student: feature row (icon cards + intro copy) */
.eh-student-features-row {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 40px;
	align-items: center;
	margin-bottom: 72px;
}

.eh-student-features-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.eh-student-feature-card {
	padding: 26px 22px;
	background: #fff;
	border: 1px solid #f0f1f4;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(23, 27, 46, .05);
}

.eh-student-feature-card__icon {
	display: block;
	width: 30px;
	height: 30px;
	margin-bottom: 14px;
	background-color: var(--eh-primary);
}

.eh-student-feature-card h3 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
}

.eh-student-feature-card p {
	margin: 0;
	color: var(--eh-muted);
	font-size: 14px;
	line-height: 1.6;
}

.eh-student-intro h2,
.eh-student-section h2,
.eh-holiday-section h2 {
	margin: 0 0 16px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
}

.eh-student-intro p {
	margin: 0 0 14px;
	color: var(--eh-muted);
	font-size: 16px;
	line-height: 1.75;
}

.eh-student-intro .directorist-btn {
	margin-top: 10px;
}

.eh-student-section {
	margin-bottom: 64px;
}

.eh-student-section__intro,
.eh-holiday-section__intro {
	max-width: 720px;
	margin: 0 0 32px;
	color: var(--eh-muted);
	font-size: 16px;
	line-height: 1.75;
}

.eh-student-info-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* University list: grows over time (client batch 2026-08-15 adds 4 more to
   the original 1), so this uses an auto-fill wrap instead of a fixed column
   count - stays a clean, evenly-wrapped grid at 5 today and however many
   more are added later, with no CSS change needed each time. */
.eh-student-info-grid--universities {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.eh-student-info-card {
	padding: 24px;
	background: var(--eh-tint);
	border-radius: 12px;
}

/* City cards: photo + name, used on both the Student Accommodation
   "city-centre options" section and the Holiday Rentals city selector. */
.eh-city-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
}

.eh-city-card {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	background: var(--eh-tint);
	box-shadow: 0 6px 18px rgba(23, 27, 46, .06);
}

.eh-city-card__img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	object-position: center 65%;
}

.eh-city-card__caption {
	padding: 16px 18px 20px;
}

.eh-city-card__caption h3 {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--eh-primary-hover);
}

.eh-city-card__caption p {
	margin: 0;
	color: var(--eh-muted);
	font-size: 14px;
	line-height: 1.6;
}

.eh-city-card--link {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform .15s ease, box-shadow .15s ease;
}

.eh-city-card--link:hover,
.eh-city-card--link:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(23, 27, 46, .12);
}

.eh-city-card--current {
	outline: 3px solid var(--eh-primary);
	outline-offset: 2px;
}

.eh-student-info-card h3 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--eh-primary-hover);
}

.eh-student-info-card p {
	margin: 0;
	color: var(--eh-muted);
	font-size: 14px;
	line-height: 1.6;
}

@media (max-width: 991px) {
	.eh-student-features-row {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media (max-width: 767px) {
	.eh-student-hero,
	.eh-holiday-hero {
		padding: 56px 16px;
	}

	.eh-student-hero__title,
	.eh-holiday-hero__title {
		font-size: 30px;
	}

	.eh-student-hero__subtitle,
	.eh-holiday-hero__subtitle {
		font-size: 16px;
	}

	.eh-student-features-grid,
	.eh-student-info-grid,
	.eh-city-card-grid {
		grid-template-columns: 1fr;
	}

	.eh-student-section {
		margin-bottom: 44px;
	}
}

/* Holiday Rentals: benefit cards, how-it-works steps, responsibility split */
.eh-holiday-section {
	margin-bottom: 64px;
}

.eh-holiday-benefits-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.eh-holiday-benefit-card {
	padding: 26px;
	background: #fff;
	border: 1px solid #f0f1f4;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(23, 27, 46, .05);
}

.eh-holiday-benefit-card h3 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--eh-primary-hover);
}

.eh-holiday-benefit-card p {
	margin: 0;
	color: var(--eh-muted);
	font-size: 14px;
	line-height: 1.65;
}

.eh-holiday-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.eh-holiday-step {
	position: relative;
	padding: 26px 22px;
	background: var(--eh-tint);
	border-radius: 12px;
}

.eh-holiday-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-bottom: 14px;
	background: var(--eh-primary);
	color: #fff;
	border-radius: 50%;
	font-weight: 700;
	font-size: 14px;
}

.eh-holiday-step h3 {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
}

.eh-holiday-step p {
	margin: 0;
	color: var(--eh-muted);
	font-size: 13px;
	line-height: 1.6;
}

.eh-holiday-roles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.eh-holiday-role-card {
	padding: 28px;
	border-radius: 12px;
	border: 1px solid #f0f1f4;
}

.eh-holiday-role-card--elhamza {
	background: var(--eh-tint);
	border-color: transparent;
}

.eh-holiday-role-card--owner {
	background: #f7f8fa;
}

.eh-holiday-role-card h3 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
}

.eh-holiday-role-card ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eh-holiday-role-card li {
	position: relative;
	margin-bottom: 12px;
	padding-inline-start: 24px;
	color: var(--eh-ink);
	font-size: 14px;
	line-height: 1.6;
}

.eh-holiday-role-card li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--eh-primary);
}

.eh-holiday-disclaimer {
	margin: 40px 0 0;
	padding: 18px 22px;
	background: #f7f8fa;
	border-inline-start: 4px solid var(--eh-primary);
	border-radius: 6px;
	color: var(--eh-muted);
	font-size: 13.5px;
	line-height: 1.7;
}

/* Owner submission form */
.eh-holiday-form-card {
	padding: 32px;
	background: #fff;
	border: 1px solid #f0f1f4;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(23, 27, 46, .05);
}

.eh-holiday-form-card h2 {
	margin: 0 0 8px;
}

.eh-holiday-form-card > p {
	margin: 0 0 28px;
	color: var(--eh-muted);
	font-size: 15px;
	line-height: 1.65;
}

.eh-holiday-form fieldset {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
}

.eh-holiday-form legend {
	margin: 0 0 16px;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--eh-primary-hover);
}

.eh-holiday-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 13.5px;
}

.eh-holiday-form .eh-required {
	color: var(--eh-primary);
}

.eh-holiday-form-grid,
.eh-holiday-form-grid--3 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.eh-holiday-form-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.eh-holiday-form p {
	margin: 0 0 18px;
}

.eh-holiday-form input:not([type=checkbox]),
.eh-holiday-form select,
.eh-holiday-form textarea {
	display: block;
	width: 100%;
	padding: 12px 14px;
	color: var(--eh-ink);
	background: #fff;
	border: 1px solid #ccd0dc;
	border-radius: 6px;
	font: inherit;
}

.eh-holiday-form textarea {
	min-height: 110px;
	resize: vertical;
}

.eh-holiday-form input:focus,
.eh-holiday-form select:focus,
.eh-holiday-form textarea:focus {
	border-color: var(--eh-primary);
	box-shadow: 0 0 0 2px rgba(255, 56, 92, .12);
	outline: 0;
}

.eh-holiday-amenities {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px 18px;
}

.eh-holiday-amenities label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 400;
	font-size: 14px;
}

.eh-holiday-amenities input[type=checkbox] {
	width: 16px;
	height: 16px;
	margin: 0;
}

.eh-holiday-form input[type=file] {
	padding: 10px;
	background: #fbfbfd;
}

.eh-holiday-form small {
	display: block;
	margin-top: 6px;
	color: var(--eh-muted);
	font-size: 12.5px;
}

/* Same technique/fix as .eh-contact-honeypot above - see its comment. */
.eh-holiday-honeypot {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Same technique/fix as .eh-contact-honeypot above - see its comment. */
.eh-newsletter-honeypot {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/*
 * Footer "Subscribe" box (item 8) - the widget's own `.theme-subscription-box`
 * layout (from the parent theme) is untouched; only the notice banner needs
 * a footer-appropriate size, since `.eh-form-notice` elsewhere is used on
 * full-width page sections, not a narrow footer widget column.
 */
.eh-newsletter-form .eh-form-notice {
	font-size: 13px;
	padding: 8px 10px;
	margin-bottom: 10px;
}

.eh-holiday-form .directorist-btn {
	min-height: 46px;
	padding: 0 28px;
}

@media (max-width: 991px) {
	.eh-holiday-steps,
	.eh-holiday-roles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.eh-holiday-benefits-grid,
	.eh-holiday-steps,
	.eh-holiday-roles,
	.eh-holiday-form-grid,
	.eh-holiday-form-grid--3,
	.eh-holiday-amenities {
		grid-template-columns: 1fr;
	}

	.eh-holiday-form-card {
		padding: 22px;
	}
}

/*
 * Directorist's "More Filters" advanced-search popup renders far off-
 * canvas to the left in Arabic (the reported "overflows" bug). Root cause,
 * confirmed by direct measurement: its inline style sets *both* `left`
 * and `right` to the same pixel value alongside an explicit `width`,
 * over-constraining the box - and per the CSS2.1 rule for exactly this
 * case ("if 'direction' is 'rtl', ignore 'left'"), the browser silently
 * drops `left` in RTL and centers off `right` instead, which combined
 * with the popup's own `translateX(-50%)` shifts it a full extra width
 * off-canvas. Forcing `right:auto` removes the over-constraint so `left`
 * (already correct) applies; re-asserting `left:50%` matches the modal's
 * own default centering rule (see `.directorist-search-modal__contents`
 * in Directorist's public-main.css). Neither override touches Directorist
 * core, and both are no-ops in LTR so fr/en cannot regress.
 */
html[dir="rtl"] .directorist-search-modal__contents {
	left: 50% !important;
	right: auto !important;
}

/*
 * Map View: the Leaflet map rendered entirely blank in Arabic (tiles were
 * confirmed loading successfully - `naturalWidth: 256` on every tile - the
 * map pane just never received the transform that pans it to Morocco/the
 * listing markers, staying at its untouched initial 0,0 position, which is
 * empty ocean off West Africa). Root cause: `.leaflet-container` inherited
 * `direction: rtl` from the page, and Leaflet's tile/pane positioning does
 * its internal pixel math in raw `left`/`transform` values that assume
 * LTR - a well-documented Leaflet limitation, its own docs recommend
 * exactly this override. Confirmed directly: French/English (same
 * container, `direction: ltr`) render correctly with the same data.
 * Scoping to `[dir="rtl"]` keeps this a no-op in fr/en; the map's own
 * *content* (popups, marker labels) is unaffected, only the container's
 * internal layout math. `!important` is required: Directorist's own
 * `main.rtl.css` sets `direction: rtl` on `#map.leaflet-container`
 * specifically (an ID selector - confirmed via computed-style inspection
 * that it otherwise wins over this rule on specificity alone), so this is
 * deliberately undoing something Directorist itself set, the same pattern
 * already used above for the search-modal fix.
 */
html[dir="rtl"] .leaflet-container {
	direction: ltr !important;
}

/*
 * Dashboard "My Listings" price column: the narrow PRIX cell wraps a plain
 * price string ("2,500,000 MAD") at arbitrary character positions - e.g.
 * "2,500,0" / "00" / "MAD" on three separate lines - instead of breaking
 * only at the natural space before the currency. Keeping the number and
 * currency each intact (breaking only between them) reads far better in a
 * narrow column and matches how every other price on the site displays.
 */
.directorist-table-price .directorist-listing-price {
	display: inline-block;
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: normal;
	min-width: 90px;
}

/*
 * Contact page phone/email links: the parent theme styles this card's own
 * hover state (`.theme-contact-info a:hover`) but never sets a matching
 * base color, so an <a> here would default to the browser's plain blue/
 * underlined link style instead of the card's body text color - jarring
 * next to the plain-text "Maroc" line above it.
 */
.eh-demo-contact-page .theme-contact-info__content a {
	color: inherit;
	text-decoration: none;
}

.eh-demo-contact-page .theme-contact-info__content a:hover {
	color: var(--color-primary, #ff385c);
	text-decoration: underline;
}