/* =========================================================
   Retal Urban Development — Home page
   Recreated from retal.com.sa (Elementor / Hello theme build)
   ========================================================= */

/* ---------- Fonts (same families as the live site) ----------
   WOFF2 first (about 60% smaller); the original TTF/OTF stay as fallback.
   The three text fonts are preloaded by app/(frontend)/[lang]/layout.tsx —
   keep those URLs in sync when renaming a file. */
@font-face { font-family: '29LTZaridDisplayVF'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/29LTZaridDisplayVF.woff2') format('woff2'), url('../fonts/29LTZaridDisplayVF.ttf') format('truetype'); }
@font-face { font-family: '29LTAzer-Light';     font-style: normal; font-weight: normal;  font-display: swap; src: url('../fonts/29LTAzer-Light-2.woff2') format('woff2'), url('../fonts/29LTAzer-Light-2.otf') format('opentype'); }
@font-face { font-family: 'Marcellus';          font-style: normal; font-weight: normal;  font-display: swap; src: url('../fonts/Marcellus-Regular.woff2') format('woff2'), url('../fonts/Marcellus-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Lucky Beauty';       font-style: normal; font-weight: normal;  font-display: swap; src: url('../fonts/Lucky-Beauty.woff2') format('woff2'), url('../fonts/Lucky-Beauty.ttf') format('truetype'); }
@font-face { font-family: 'Lucky Beauty new';   font-style: normal; font-weight: normal;  font-display: swap; src: url('../fonts/Lucky-Beauty-new.woff2') format('woff2'), url('../fonts/Lucky-Beauty.otf') format('opentype'); }

/* ---------- Global tokens (Elementor kit) ---------- */
:root {
	--e-global-color-primary: #6EC1E4;
	--e-global-color-secondary: #54595F;
	--e-global-color-text: #7A7A7A;
	--e-global-color-accent: #61CE70;
	--e-global-color-04271e7: #000000;
	--e-global-color-a2034fa: #85553A;  /* brown */
	--e-global-color-4883dfd: #2C2C2C;  /* dark  */
	--e-global-color-7c6a1cc: #020202;
	--e-global-color-2409831: #F5F5F5;
	--e-global-color-db227a9: #FFECD1;
	--brown: #85553A;
	--brown-2: #a86124;
	--dark: #2C2C2C;
	--grey: #A0A2A3;
	--beige: #F9F7F3;
	--news-bg: #F8F8F8;
	--font-head: "29LTZaridDisplayVF", sans-serif;
	--font-body: "29LTAzer-Light", sans-serif;
	--font-en: "Marcellus", sans-serif;
	--container: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--e-global-color-text);
	background-color: #fff;
	overflow-x: hidden !important;
	-webkit-font-smoothing: antialiased;
}
/* The live site swaps body bg while the hero is in view (JS toggles these) */
body.darkTheme  { background-color: #2C2C2C !important; transition: ease all 1s; }
body.lightTheme { background-color: #fff    !important; transition: ease all 1s; }

img { max-width: 100%; height: auto; display: block; border: 0; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, p { margin: 0; }
input:focus, select:focus, textarea:focus, button:focus, a:focus { outline: none !important; }
button { font-family: inherit; }

main { background-color: #FFFFFF; position: relative; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 10px; }
.text-center { text-align: center; }
.brown { color: #85553A !important; }

/* =========================================================
   HEADER
   ========================================================= */
.header-wrapper {
	position: fixed; top: 0; left: 0; width: 100%; z-index: 9999;
	min-height: 90px; margin-top: 0px;
	background-color: rgba(133, 85, 58, 0);
	transition: background .3s, transform .5s;
}
.header-wrapper.is-active { background-color: #85553A !important; margin-top: 0; }
.slide-out-top { transition: .5s all !important; transform: translateY(-130px); width: 100% !important; }
.slide-in-top  { transition: .5s all !important; transform: translateY(0); width: 100% !important; }

.header-inner {
	max-width: 1600px; margin: 0 auto; padding: 0 20px; min-height: 90px;
	display: flex; align-items: center; gap: 0;
}
.site-logo { z-index: 1; margin-left: 40px; display: block; }
.site-logo img { width: 55px; }

/* Jet mega menu look-alike */
.jet-menu-nav { flex: 1 1 auto; }
.jet-menu { display: flex; align-items: center; justify-content: flex-start; }
.jet-menu-item { position: relative; }
.jet-menu .top-level-link {
	display: flex; align-items: center;
	font-family: var(--font-body); font-size: 16px; line-height: 24px; color: #FFFFFF; /* retal.com.sa: 16px / 24px */
	border-bottom: 2px solid transparent; padding: 0 0 10px 0; margin: 10px 15px;
	transition: border-color .3s, color .3s; white-space: nowrap;
}
.jet-menu .jet-menu-item:hover > .top-level-link,
.jet-menu .jet-menu-item.jet-current-menu-item > .top-level-link { color: #fff; border-bottom-color: #FFFFFF; }
.jet-menu .jet-dropdown-arrow { margin: 0 8px; font-size: 14px; }
.jet-sub-menu {
	position: absolute; top: 100%; right: 0; min-width: 200px;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: all .3s; z-index: 10;
}
.jet-menu-item:hover > .jet-sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.jet-sub-menu .sub-level-link {
	display: block; background-color: #85553A; color: #fff;
	font-family: var(--font-body); font-size: 14px; padding: 15px 25px; white-space: nowrap;
	transition: background .3s, color .3s;
}
.jet-sub-menu li:hover > .sub-level-link { background-color: #FFFFFF; color: #2C2C2C; }

.header-tools { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.tool-link { color: #fff; font-size: 14px; padding: 12px 10px; display: inline-flex; align-items: center; justify-content: center; }
.tool-link svg { display: block; }
.lang-switch { font-family: var(--font-en); font-size: 15px; font-weight: 600; color: #fff; padding: 12px 10px; }
.menu_mobile { background: transparent; border: 0; padding: 12px 10px; cursor: pointer; display: none; }

/* Full-screen menu popup (mobile / burger) */
/* As retal.com.sa: the popup itself appears at once, and what is in it (menu, language, divider, social icons,
   links, copyright) slides in from the right together, Elementor's fadeInRight at its "fast" 0.75s. The class is
   added on every open (main.js), so the slide plays each time. */
.menu-popup {
	position: fixed; inset: 0; background: #fff; z-index: 10000;
	visibility: hidden; overflow-x: hidden; overflow-y: auto;
}
.menu-popup.open { visibility: visible; }
.menu-popup.open .menu-popup__body > * { animation: retal-menu-in .75s ease both; }
@keyframes retal-menu-in { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.menu-popup.open .menu-popup__body > * { animation: retal-menu-fade .2s ease both; }
	@keyframes retal-menu-fade { from { opacity: 0; } to { opacity: 1; } }
}
.menu-popup__close { position: absolute; top: 10px; left: 10px; background: #fff; border: 0; font-size: 22px; color: #000; cursor: pointer; padding: 8px; }
.menu-popup__body { min-height: 100vh; min-height: 100dvh; box-sizing: border-box; padding: 60px 20px 24px; display: flex; flex-direction: column; }
/* Sized from the screen height so the nine items + footer fit a phone without scrolling */
.vertical-nav > ul > li { display: flex; flex-wrap: wrap; align-items: center; }
.vertical-nav > ul > li > a { display: block; flex: 0 1 auto; font-family: var(--font-head); font-size: clamp(20px, 3.4vh, 34px); font-weight: 700; line-height: 1.2; color: #2C2C2C; padding: clamp(6px, 1.5vh, 16px) 0; }
.vertical-nav__toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-inline-start: 6px; padding: 0; border: 0; background: none; color: #2C2C2C; font-size: clamp(16px, 2.4vh, 22px); cursor: pointer; }
.vertical-nav__toggle i { transition: transform .25s ease; }
.vertical-nav__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.vertical-nav ul ul { flex: 0 0 100%; margin-right: 30px; }
/* sub-menus collapsed until their arrow is tapped (main.js) */
.vertical-nav li.has-sub > ul { display: none; }
.vertical-nav li.has-sub.is-open > ul { display: block; }
.vertical-nav ul ul a { display: block; font-family: var(--font-body); font-size: clamp(15px, 2.2vh, 19px); color: #7A7A7A; padding: clamp(3px, .8vh, 8px) 8px; }
/* language switch, social icons and copyright sit at the bottom of the screen */
.menu-popup__lang { font-family: var(--font-en); font-size: 20px; color: #2C2C2C; margin-top: auto; padding-top: 24px; }
.menu-popup__divider { border-top: 1px solid rgba(0, 0, 0, .19); margin: 25px 0 15px; }
.menu-popup__social { display: flex; gap: 10px; }
.menu-popup__social a { width: 34px; height: 34px; background: #2C2C2C; color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.menu-popup__links { font-family: var(--font-body); font-size: 16px; color: rgba(44, 44, 44, .43); margin-top: 20px; }
.menu-popup__copy  { font-family: var(--font-body); font-size: 16px; color: #2C2C2C; margin-top: 3px; }
body.body-menu-opened { overflow: hidden; }

/* =========================================================
   HERO — full screen slider + thumbs + pagination
   ========================================================= */
.hero-section { position: relative; min-height: 100vh; z-index: 1; overflow: hidden; }
.hero-section > .r-background-overlay { position: absolute; inset: 0; background-color: #09090978; opacity: .5; z-index: 1; pointer-events: none; }

.gallery-slider { width: 100%; height: 100vh; margin: 0; overflow: hidden; }
.gallery-slider .swiper-slide { width: 100% !important; height: 100vh; overflow: hidden; backface-visibility: hidden; position: relative; }
.slider_full .slide_bgimg { background-size: cover; background-position: center; background-repeat: no-repeat; }
.slider_full .slide_bgimg::after { content: ""; position: absolute; inset: 0; background: #0000007d; }
/* the slide photo as an <img> (src/lib/assetUrl.ts → optimizeHeroSlider), laid out like background-size: cover */
.slider_full .slide_bgimg > .slide_bgimg__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }

.gallery-slider-text {
	font-family: var(--font-body);
	position: absolute; top: 30%; left: 0; right: 0; margin: auto;
	height: calc(65% - 30px); width: 100%; max-width: 1600px;
	display: flex; flex-direction: column; z-index: 2; padding: 0 30px !important;
	transition: all .5s; color: #fff;
}
.gallery-slider-text.index_0 { top: 20%; }
.gallery-slider-text > div { max-width: 750px; height: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.slider_full .gallery-slider-text > div { justify-content: flex-end; }
.slider_full .gallery-slider-text.index_0 > div { justify-content: center; }
.gallery-slider-text.index_0 img { object-fit: inherit !important; margin: inherit !important; height: auto !important; }
.bigger-image { width: 70% !important; height: auto; }

.gallery-slider .swiper-slide img.logo {
	display: block !important; width: 150px !important; height: 150px !important;
	object-fit: contain !important; object-position: right; margin: 50px 0 !important;
	filter: brightness(0) invert(1);
}

.slider_full .flex-container { display: flex; flex-wrap: wrap; align-content: stretch; height: auto; overflow: hidden; color: #fff; }
.slider_full .flex-container .item { width: 250px; margin-top: 5px; font-size: 14px; font-family: var(--font-body); }
.flex-container .title { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid #ffffff4a; font-weight: 600; position: relative; }
.flex-container .title span { position: relative; }
.flex-container .title span::after { content: ""; height: 2px; width: 100%; position: absolute; left: 0; bottom: -12px; background: #fff; display: block; }

/* pagination bullets (bottom-left, with vertical line) */
.gallery-pagination {
	position: absolute; z-index: 3; max-width: 660px; width: 80%; height: 180px;
	bottom: 5% !important; left: 0 !important; right: initial !important;
	display: flex; padding-top: 10px; padding-right: 22px;
}
.gallery-pagination::before { content: ""; position: absolute; width: 1px; background: rgba(255, 255, 255, .4); right: -22px; top: 5px; bottom: 0; }
.gallery-pagination .swiper-pagination-bullet { width: 4px; height: 4px; background: #fff !important; opacity: 1; position: relative; margin: 10px; border-radius: 50%; }
.gallery-pagination .swiper-pagination-bullet::before { content: ""; width: 12px; height: 12px; border-radius: 100%; border: 1px solid transparent; position: absolute; top: -4px; left: -4px; transition: all .4s; }
.gallery-pagination .swiper-pagination-bullet-active::before { border-color: #fff; }

/* thumbs strip (bottom-left) */
.gallery-thumbs { height: auto; max-width: 660px; width: 80%; padding: 0; overflow: hidden; position: absolute; bottom: 5%; left: 0; right: unset !important; z-index: 3; }
.gallery-thumbs .swiper-slide { width: 230px; height: 140px; text-align: center; overflow: hidden; opacity: .7; transition: opacity .4s; }
.gallery-thumbs .swiper-slide-active { opacity: 1; }
.gallery-thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.gallery-thumbs .swiper-slide-thumb-active { opacity: 1; }

/* =========================================================
   Shared section pieces
   ========================================================= */
.section-label { display: flex; align-items: center; gap: 6px; line-height: 30px; margin-bottom: 20px; font-family: var(--font-body); font-size: 17px; color: #2C2C2C; text-transform: uppercase; }
.section-label i { font-size: 14px; color: #2C2C2C; margin-top: -10px; }
.section-title { font-family: var(--font-head); font-size: 30px; font-weight: 700; line-height: 45px; color: #2C2C2C; }

/* Scripts toggle elements with the `hidden` property ("Show more", "Clear",
   "No data was found", filtered cards). Any class that sets `display` beats the
   browser's own [hidden] rule, so state it once and win. */
[hidden] { display: none !important; }

.btn {
	display: inline-block; font-family: var(--font-head); font-size: 15px; font-weight: 700; line-height: 1;
	padding: 12px 24px; border-radius: 0; transition: all .3s; cursor: pointer; text-align: center;
}
.btn-brown { background-color: #85553A; color: #fff; border: 0; }
.btn-brown:hover, .btn-brown:focus { background-color: #2C2C2C; color: #fff; }
.btn-outline { background: transparent; color: #2C2C2C; border: 1px solid #2C2C2C; font-family: var(--font-body); font-size: 14px; font-weight: 400; padding: 12px 24px; }
.btn-outline:hover { background: #2C2C2C; color: #fff; }

/* in-viewport / off-viewport (data-inviewport on the live site) */
.off-viewport { transform: translate3d(0, 20px, 0) skew(10deg, 0deg); opacity: 0; transition: all 1.5s; }
.in-viewport  { transform: none; opacity: 1; transition: all 1.5s; }

/* Elementor entrance animations */
[data-anim] { opacity: 0; }
[data-anim].animated { opacity: 1; animation-duration: 1.25s; animation-fill-mode: both; }
.animated-fast[data-anim].animated, .animated-fast [data-anim].animated { animation-duration: .75s; }
.animated.fadeIn        { animation-name: fadeIn; }
.animated.fadeInRight   { animation-name: fadeInRight; }
.animated.fadeInDown    { animation-name: fadeInDown; }
.animated.slideInRight  { animation-name: slideInRight; }
@keyframes fadeIn       { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeInRight  { from { opacity: 0; transform: translate3d(100%, 0, 0) } to { opacity: 1; transform: none } }
@keyframes fadeInDown   { from { opacity: 0; transform: translate3d(0, -100%, 0) } to { opacity: 1; transform: none } }
@keyframes slideInRight { from { transform: translate3d(100%, 0, 0); visibility: visible } to { transform: none } }
.anim-wrap[data-anim] > * { opacity: 1; }

/* =========================================================
   ABOUT + COUNTERS
   ========================================================= */
.about-section { background-color: #FFFFFF; padding: 100px 0 0; overflow-x: hidden !important; }
.about-section .section-title { margin-top: -10px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 20px; }
.about-text p { font-family: var(--font-body); font-size: 17px; color: #2C2C2C; line-height: 1.6; text-align: start; }
.about-text .btn { margin-top: 30px; }

.counters-section { background-color: #FFFFFF; padding: 50px 0 100px; }
.about-section, .counters-section { position: relative; z-index: 2; }
.counters-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.counter-row { display: grid; grid-template-columns: 1fr 1fr; }
.counter-row + .counter-row { margin-top: 30px; }
body:not(.ar24-page) .r-counter-title { font-family: var(--font-body); font-size: 16px; line-height: 20px; color: #7A7A7A; text-align: right !important; }
body:not(.ar24-page) .r-counter-number-wrapper { display: flex; font-family: var(--font-body); font-size: 40px; font-weight: 500; line-height: 45px; color: #2C2C2C; direction: rtl; justify-content: flex-start; margin-bottom: 8px; }
body:not(.ar24-page) .r-counter-number-suffix { white-space: pre; }
body:not(.ar24-page) .r-counter { display: flex; flex-direction: column-reverse; width: max-content; }
.counters-image img { width: 100%; height: auto; }

/* =========================================================
   VERSE (interactive map iframe)
   ========================================================= */
.verse-section { width: 100vw; height: 100vh; overflow: hidden; background: #000; }
.verse-section iframe { width: 100vw; height: 100vh; border: 0; display: block; }

/* =========================================================
   NEW COMMUNITIES intro + projects slider
   ========================================================= */
.newcomm-section { background-color: #F9F7F3; padding: 100px 0 20px; overflow: hidden !important; }
.newcomm-section .section-label { font-size: 15px; }
.newcomm-text { width: 55%; max-width: 55%; font-family: var(--font-body); font-size: 17px; color: #2C2C2C; line-height: 1.6; margin-top: 15px; }

.projects-section { background-color: #F9F7F3; margin-top: -5px; padding: 50px 20px; overflow: hidden !important; }
.communities-wrapper .swiper-wrapper { padding-bottom: 50px; }
.communities-swiper { position: relative; padding-bottom: 30px; }
.communities-wrapper .slide-image { position: relative; height: 460px; background-size: cover !important; background-repeat: no-repeat; background-position: center center; }
.slide-image::before { content: ""; opacity: 0; visibility: hidden; position: absolute; inset: 0; transition: all 1.2s; background: rgba(0, 0, 0, .3); z-index: 2; }
.slide-content:hover .slide-image::before { visibility: visible; opacity: 1; }
.hover-clip { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: all .5s cubic-bezier(.67, 0, .285, 1); }
.slide-content:hover .hover-clip { clip-path: polygon(5% 10%, 95% 0, 95% 90%, 5% 95%); }
.communities-wrapper .community_text { margin-top: 10px; }
.community_title { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: #2C2C2C; margin: 0 0 4px; }
.community_sub_title { font-family: var(--font-body); font-size: 17px; font-weight: 400; color: #2C2C2C; display: block; }
.communities-wrapper .swiper-scrollbar { position: relative; border-radius: 10px; background: rgb(241 238 238); opacity: 1 !important; margin: 0 auto; left: 0 !important; right: 0 !important; height: 3px; width: 600px !important; }
.communities-wrapper .swiper-scrollbar-drag { background: #7a7a7a; border-radius: 10px; }

/* =========================================================
   WHY RETAL
   ========================================================= */
.why-section { padding: 100px 0; background: #fff; }
.why-section .section-title { margin-top: 15px; }
.why-title-mobile { display: none; }
.why-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; margin-top: 50px; }
.image-box { text-align: center; }
.image-box figure { margin: 0 auto; width: 17%; min-width: 34px; }
.image-box figure img { width: 100%; transition-duration: .3s; }
.image-box h3 { font-family: var(--font-body); font-size: 17px; font-weight: 400; color: #2C2C2C; line-height: 1.5; margin-top: 15px; }

/* =========================================================
   NEWS
   ========================================================= */
.news-section { background-color: #F8F8F8; padding: 100px 0 50px; overflow: hidden !important; }
.news-section .section-label { font-size: 15px; }
.news-title { font-size: 27px; margin-bottom: 15px; }
.newsslide { --swiper-slides-gap: 10px; margin-bottom: 20px; overflow: hidden; padding-top: 0; }
.newsslide .swiper-slide { height: auto; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: padding-top .5s; }
/* Before Swiper starts (or if it never does — CDN blocked, a dev hot reload
   re-rendering the markup), show the carousel's first view as a static row
   instead of one full-width slide: 1 / 2 / 3 cards, middle card offset. */
.newsslide:not(.swiper-initialized) .swiper-wrapper { display: grid; grid-template-columns: 1fr; gap: 10px; }
.newsslide:not(.swiper-initialized) .swiper-slide { width: auto; }
.newsslide:not(.swiper-initialized) .swiper-slide:nth-child(n+2) { display: none; }
@media (min-width: 768px) {
	.newsslide:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(2, 1fr); }
	.newsslide:not(.swiper-initialized) .swiper-slide:nth-child(2) { display: block; }
}
@media (min-width: 1200px) {
	.newsslide:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(3, 1fr); align-items: start; }
	.newsslide:not(.swiper-initialized) .swiper-slide:nth-child(3) { display: block; }
	.newsslide:not(.swiper-initialized) .swiper-slide:nth-child(2) { padding-top: 40px; }
}
body:not(.ar24-page) .r-cta { display: block; position: relative; min-height: 336px; overflow: hidden; }
body:not(.ar24-page) .r-cta__bg-wrapper { position: absolute; inset: 0; overflow: hidden; }
body:not(.ar24-page) .r-cta__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1500ms; }
body:not(.ar24-page) .r-cta:hover .r-cta__bg { transform: scale(1.2); }
body:not(.ar24-page) .r-cta__bg-overlay { position: absolute; inset: 0; transition-duration: 1500ms; background: linear-gradient(to bottom, rgba(11, 15, 1, 0) 54%, rgba(11, 15, 1, .2) 63%, rgba(22, 9, 5, 1) 100%); }
body:not(.ar24-page) .r-cta__content { position: relative; min-height: 336px; display: flex; flex-direction: column; justify-content: flex-end; text-align: start; padding: 20px; }
body:not(.ar24-page) .r-cta__title { font-family: var(--font-head); font-size: 17px; font-weight: 600; line-height: 25px; color: #fff; transition: transform 1000ms; }
body:not(.ar24-page) .r-cta:hover .r-cta__title { transform: scale(1.05); transform-origin: right bottom; }
.btn-news { font-family: var(--font-body); font-weight: bold; margin-top: 10px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: #fff; padding: 50px 0 0; }
.footer-top { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.site-footer h2 { font-family: var(--font-head); font-size: 19px; font-weight: 700; line-height: 45px; color: #2C2C2C; }
.footer-list { margin-top: 5px; }
.footer-list li { padding: 5px 0; }
.footer-list a { font-family: var(--font-body); font-size: 16px; line-height: 20px; color: #A0A2A3; transition: color .3s; display: inline-flex; align-items: center; gap: 10px; }
.footer-list a:hover { color: #85553A; }
.footer-social i { font-size: 18px; color: #2C2C2C; width: 18px; text-align: center; transition: color .3s; }
.footer-social a:hover i { color: #85553A; }
.footer-col .btn-outline { margin-top: 20px; }
.app-badges { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; }
.app-badges img { width: 135px; border-radius: 8px; }

.footer-locations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.loc-col p { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: #7A7A7A; line-height: 20px; margin: 5px 0 25px; }

.footer-bottom { border-top: 1px solid #d7d7d7; margin-top: 30px; padding: 30px 0 40px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; }
.footer-logos { display: flex; align-items: center; gap: 15px; }
.footer-logos .logo-color { width: 55px; }
.footer-logos .gptw { width: 40px; }
.footer-logos .iso  { width: 40px; }
.copyright { font-family: var(--font-body); font-size: 16px; color: rgb(44 44 44 / .43); text-align: center; }
.footer-legal { display: flex; justify-content: flex-end; gap: 10px; font-family: var(--font-body); font-size: 16px; color: rgb(44 44 44 / .43); }
.footer-legal li + li::before { content: "•"; margin-left: 10px; }
.footer-legal a { color: inherit; transition: color .3s; }
.footer-legal a:hover { color: #85553A; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1400px) {
	.communities-wrapper .slide-image { height: 430px; }
}
@media (max-width: 1200px) {
	.why-grid { grid-template-columns: repeat(4, 1fr); }
	.newcomm-section, .news-section { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 1024px) {
	.jet-menu-nav { display: none; }
	.menu_mobile { display: inline-flex; }
	.site-logo { margin-left: 0; }
	.header-tools { margin-right: auto; }
	/* interactive map stays on tablets/phones, as on the live site — full screen height */
	.verse-section, .verse-section iframe { width: 100%; height: 100vh; height: 100svh; }
	.about-grid, .counters-grid { grid-template-columns: 1fr; }
	.footer-top { grid-template-columns: repeat(3, 1fr); }
	.footer-bottom { grid-template-columns: 1fr; gap: 15px; text-align: center; }
	.footer-logos, .footer-legal { justify-content: center; }
}
@media (max-width: 991px) {
	.gallery-slider-text { height: calc(65% - 230px); }
	.gallery-pagination { height: 140px; width: 85% !important; }
	.gallery-thumbs { width: 85% !important; bottom: 55px; }
	.gallery-thumbs .swiper-slide { width: 200px; height: 110px; }
}
@media (max-width: 880px) {
	.why-title-desktop { display: none; }
	.why-title-mobile { display: block; }
	.newcomm-text { width: 100%; max-width: 100%; }
	.why-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
	/* the phone / WhatsApp icons are on every header — on a phone they replace the "Contact us" wording rather than crowd it */
	.header-tools .contact-link { display: none; }
	/* 20px side gutter on a phone, as on the live site */
	.container { padding: 0 20px; }
	.section-title { font-size: 20px; line-height: 32px; }
	.news-title { font-size: 20px; line-height: 32px; }
	.hero-section, .gallery-slider, .gallery-slider .swiper-slide { height: 100vh; }
	.gallery-slider .swiper-slide img.logo { width: 100px !important; height: 100px !important; }
	.gallery-slider-text:not(.index_0) { height: auto; top: 20%; }
	.slider_full .flex-container .item { width: 100% !important; font-size: 15px; }
	.gallery-slider-text { padding: 0 20px !important; }
	/* first slide: start the headline below the 90px fixed header instead of centring it up under the logo */
	.gallery-slider-text.index_0 { top: 120px; height: auto; }
	.slider_full .gallery-slider-text.index_0 > div { justify-content: flex-start; }
	/* bullets in one row along the bottom edge, under the thumbs (as on the live site) */
	.gallery-thumbs { bottom: 40px; }
	.gallery-pagination { bottom: 20px !important; height: 150px; padding-top: 0; align-items: flex-end; justify-content: center; }
	.gallery-pagination .swiper-pagination-bullet { margin: 7px; }
	.bigger-image { width: 90% !important; }
	.about-section { padding-top: 60px; }
	.counters-section { padding: 30px 0 60px; }
	/* two figures per row on a phone, as on the live home page */
	.counter-row { grid-template-columns: 1fr 1fr; gap: 25px 10px; }
	.counter-row + .counter-row { margin-top: 25px; }
	body:not(.ar24-page) .counters-section .r-counter { width: auto; }
	body:not(.ar24-page) .counters-section .r-counter-number-wrapper { font-size: 25px; line-height: 32px; margin-bottom: 6px; }
	body:not(.ar24-page) .counters-section .r-counter-title { font-size: 14px; line-height: 20px; }
	/* communities: no side padding on a phone — the text keeps the .container 20px gutter, the slider runs edge to edge */
	.newcomm-section { padding: 60px 0 20px; }
	.projects-section { padding: 30px 0; }
	.communities-wrapper .slide-image { height: 360px; }
	.communities-wrapper .swiper-scrollbar { width: 90% !important; }
	.why-section { padding: 60px 0; }
	/* three per row on a phone, as on the live home page */
	.why-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 10px; }
	.image-box h3 { font-size: 14px; line-height: 1.6; margin-top: 10px; }
	.news-section { padding: 30px 20px; }
	body:not(.ar24-page) .r-cta, body:not(.ar24-page) .r-cta__content { min-height: 280px; }
	body:not(.ar24-page) .r-cta__title { font-size: 20px; }
}

/* =========================================================
   ENGLISH (LTR) PAGE — typography + mirrored layout
   Live /en/ uses the Elementor kit fonts: Lucky Beauty for
   headings/menu/buttons and Marcellus for body text.
   ========================================================= */
.ltr { --font-head: "Lucky Beauty", serif; --font-body: "Marcellus", serif; }
.ltr .section-title { font-weight: 600; }
.ltr .section-label { text-transform: uppercase; font-size: 15px; }
.ltr .site-logo { margin-left: 0; margin-right: 40px; }
.ltr .jet-menu .top-level-link { font-family: var(--font-head); font-size: 16px; }
.ltr .jet-sub-menu { right: auto; left: 0; }
.ltr .jet-sub-menu .sub-level-link { font-family: var(--font-head); font-size: 15px; }
.ltr .header-tools { margin-right: 0; margin-left: auto; }
.ltr .lang-switch--ar { font-family: "29LTAzer-Light", sans-serif; font-size: 15px; }
.ltr .menu-popup__close { left: auto; right: 10px; }
.ltr .vertical-nav ul ul { margin-right: 0; margin-left: 30px; }
.ltr .menu-popup__lang { font-family: "29LTAzer-Light", sans-serif; }

/* hero mirrored: text on the left, thumbs + bullets on the right */
.ltr .gallery-slider .swiper-slide img.logo { object-position: left; }
.ltr .flex-container .title span::after { left: 0; }
.ltr .slider_full .flex-container .item { font-family: var(--font-body); }
.ltr .gallery-pagination { left: auto !important; right: 0 !important; padding-right: 0; padding-left: 22px; }
.ltr .gallery-pagination::before { right: auto; left: -22px; }
.ltr .gallery-thumbs { left: auto; right: 0 !important; }

/* about / counters */
.ltr .about-text p { font-family: var(--font-body); font-size: 17px; color: #7A7A7A; }
body.ltr:not(.ar24-page) .r-counter-title { text-align: left !important; font-family: var(--font-body); }
body.ltr:not(.ar24-page) .r-counter-number-wrapper { direction: ltr; justify-content: flex-start; font-family: var(--font-head); }
.ltr .newcomm-text { font-family: var(--font-body); color: #7A7A7A; }
.ltr .community_sub_title { font-family: var(--font-body); font-size: 15px; }
/* Why Retal? — the English home page differs from the Arabic one (centred, 29LTAzer-Light): items sit at the
   start of 7 gap-less columns, a 17%-wide icon over bold Marcellus 17px (retal.com.sa/en, Elementor image boxes). */
.ltr .why-grid { column-gap: 0; }
.ltr .image-box { text-align: start; }
.ltr .image-box figure { margin: 0; min-width: 0; }
.ltr .image-box h3 { font-family: 'Marcellus', serif; font-size: 17px; font-weight: 600; line-height: 25px; color: #2C2C2C; margin-top: 10px; padding-inline-end: 10px; }
@media (max-width: 1200px) {
	.ltr .image-box h3 { font-size: 13px; line-height: 20px; }
}
@media (max-width: 880px) {
	.ltr .image-box figure { width: 50px; }
}
@media (max-width: 767px) {
	.ltr .why-grid { gap: 30px 0; }
	.ltr .image-box { padding-inline-start: 20px; }
	.ltr .image-box figure { width: 50%; max-width: 50px; }
}
.ltr .btn-brown, .ltr .btn-news { font-family: var(--font-head); font-weight: 400; }
.ltr .btn-outline { font-family: var(--font-head); }
.ltr .footer-list a, .ltr .loc-col p, .ltr .copyright, .ltr .footer-legal { font-family: var(--font-body); }
.ltr .footer-legal li + li::before { margin-left: 0; margin-right: 10px; }
body.ltr:not(.ar24-page) .r-cta:hover .r-cta__title { transform-origin: left bottom; }

@keyframes fadeInLeft  { from { opacity: 0; transform: translate3d(-100%, 0, 0) } to { opacity: 1; transform: none } }
@keyframes slideInLeft { from { transform: translate3d(-100%, 0, 0); visibility: visible } to { transform: none } }
.animated.fadeInLeft  { animation-name: fadeInLeft; }
.animated.slideInLeft { animation-name: slideInLeft; }

/* =========================================================
   INNER PAGES (Communities) — header stays solid, no hero
   ========================================================= */
body.inner-page { background-color: #fff !important; padding-top: 90px; }
/* Inner pages, as retal.com.sa (e.g. /internship-opportunities/): at the top of the page a white bar with a dark
   menu and the colour logo (RetalBlocks::drawSiteHeader); once scrolled past 50px main.js adds .is-active and the
   bar turns brown, the menu white and the logo white, and it slides away on scroll down, back on scroll up.
   "Contact us" stands where a phone shows the phone and WhatsApp icons. Sub-menus stay brown. */
.header-wrapper--inner { background-color: #fff; }
.header-wrapper--inner.is-active { background-color: #85553A !important; }
.header-wrapper--inner:not(.is-active) .jet-menu .top-level-link,
.header-wrapper--inner:not(.is-active) .tool-link,
.header-wrapper--inner:not(.is-active) .lang-switch { color: #2C2C2C; }
.header-wrapper--inner:not(.is-active) .jet-menu .jet-menu-item:hover > .top-level-link,
.header-wrapper--inner:not(.is-active) .jet-menu .jet-menu-item.jet-current-menu-item > .top-level-link { color: #85553A; border-bottom-color: #85553A; }
.header-wrapper--inner:not(.is-active) .tool-link:hover,
.header-wrapper--inner:not(.is-active) .lang-switch:hover { color: #85553A; }
.header-wrapper--inner .tool-link, .header-wrapper--inner .lang-switch { transition: color .3s; }
.header-wrapper--inner .tool-link svg path { fill: currentColor; }
.header-wrapper--inner:not(.is-active) .menu_mobile svg { fill: #2C2C2C; }
.header-wrapper--inner .site-logo img { transition: filter .3s; }
.header-wrapper--inner.is-active .site-logo img { filter: brightness(0) invert(1); }
/* The logo fades in as the page opens (the live header's fadeIn, "fast"). */
.site-logo img { animation: retal-logo-in .75s ease both; }
@keyframes retal-logo-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .site-logo img { animation: none; } }
.header-wrapper--inner:has(.contact-link) :is(.phone-link, .whatsapp-link) { display: none; }
.contact-link { font-family: var(--font-head); font-size: 15px; white-space: nowrap; }
@media (max-width: 767px) {
	.header-wrapper--inner:has(.contact-link) :is(.phone-link, .whatsapp-link) { display: inline-flex; }
}

/* ---------------- Intro ---------------- */
.comm-intro { padding: 50px 0 0; }
.comm-intro .section-label { font-family: var(--font-body); font-size: 15px; color: #000; }
.comm-intro__title {
	max-width: 50%; margin-top: -10px;
	font-family: "Lucky Beauty new", "Lucky Beauty", serif;
	font-size: 30px; font-weight: 600; line-height: 45px; color: #2C2C2C;
}
.comm-intro__text { max-width: 70%; margin-top: 20px; font-family: var(--font-body); font-size: 17px; color: #2C2C2C; line-height: 1.5; }

/* ---------------- Filters ---------------- */
.comm-filters { padding: 30px 0 25px; }
.filters-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filters-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.jet-filter-items-dropdown { position: relative; width: 180px; max-width: 100%; }
.jet-filter-items-dropdown__label {
	width: 100%; text-align: left; cursor: pointer;
	font-family: var(--font-body); font-size: 15px; color: #333;
	background: #fff; border: 1px solid #EBECED; border-radius: 3px; padding: 10px 28px 10px 10px;
	position: relative;
}
.jet-filter-items-dropdown__label::after {
	content: ""; position: absolute; right: 10px; top: 50%; margin-top: -3px;
	border: 5px solid transparent; border-top-color: #333; transition: transform .25s;
}
.jet-filter-items-dropdown.open .jet-filter-items-dropdown__label::after { transform: rotate(180deg); margin-top: -8px; }
.jet-filter-items-dropdown.is-filtered .jet-filter-items-dropdown__label { color: var(--brown); border-color: var(--brown); }

.status-dropdown { width: 200px; }
.status-dropdown .jet-filter-items-dropdown__label {
	background-color: rgba(122, 122, 122, .09); border: 0; color: #2C2C2C; padding: 12px 15px 11px;
}
.status-dropdown .jet-filter-items-dropdown__label::after { display: none; }
.status-dropdown .jet-filter-items-dropdown__label i { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-size: 16px; }

.jet-filter-items-dropdown__body {
	position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: max-content; min-width: 100%;
	background: #fff; border: 1px solid #EBECED; border-radius: 3px; box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
	padding: 10px 10px 20px;
	opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .25s;
}
/* every choice on one line; only a long list (with its search box) scrolls */
.jet-filter-items-dropdown__body .jet-radio-list__label { white-space: nowrap; }
.jet-filter-items-dropdown.is-long .jet-filter-items-dropdown__body { max-height: 360px; overflow-y: auto; }
.jet-filter-items-dropdown.open .jet-filter-items-dropdown__body { opacity: 1; visibility: visible; transform: none; }

.jet-filter-search { position: relative; margin-bottom: 10px; }
.jet-filter-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #999; pointer-events: none; }
.jet-filter-search__input {
	width: 100%; font-family: var(--font-body); font-size: 14px; color: #333;
	background: #F7F7F7; border: 1px solid #EBECED; border-radius: 3px; padding: 8px 10px 8px 30px; outline: 0;
	-webkit-appearance: none; appearance: none;
}
.jet-filter-search__input:focus { border-color: var(--brown); background: #fff; }
.jet-filter-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.jet-filter-search__empty { display: block; font-family: var(--font-body); font-size: 14px; color: #999; padding: 8px 5px 0; }
.jet-filter-search__empty[hidden] { display: none; }
.jet-radio-list__item { display: block; cursor: pointer; }
.jet-radio-list__item[hidden] { display: none; }
.jet-radio-list__item + .jet-radio-list__item { margin-top: 10px; }
.jet-radio-list__input { position: absolute; opacity: 0; width: 0; height: 0; }
.jet-radio-list__button { display: flex; align-items: center; gap: 8px; padding: 5px; color: #333; transition: color .2s; }
.jet-radio-list__label { font-family: var(--font-body); font-size: 15px; }
.jet-radio-list__button:hover,
.jet-radio-list__input:checked ~ .jet-radio-list__button { color: var(--brown); }
.jet-filters-group .jet-radio-list__decorator {
	width: 16px; height: 16px; flex: 0 0 16px; border: 1px solid #c9c9c9; border-radius: 2px; position: relative;
}
.jet-filters-group .jet-radio-list__input:checked ~ .jet-radio-list__button .jet-radio-list__decorator {
	border-color: var(--brown); background: var(--brown);
}
.jet-filters-group .jet-radio-list__input:checked ~ .jet-radio-list__button .jet-radio-list__decorator::after {
	content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 10px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.jet-remove-all-filters__button {
	background: transparent; border: 0; cursor: pointer; padding: 12px 10px;
	font-family: var(--font-body); font-size: 15px; color: var(--brown); text-decoration: underline;
}
.btn-map {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-body); font-size: 15px; color: #2C2C2C;
	background: rgba(255, 255, 255, .35); border: 1px solid rgba(44, 44, 44, .35); padding: 12px 24px;
}
.btn-map:hover { background: #2C2C2C; color: #fff; border-color: #2C2C2C; }
.btn-map:hover svg path { fill: #fff; }
.btn-map svg { width: 10px; height: auto; }

/* ---------------- Property grid ---------------- */
.comm-grid-section { padding-bottom: 60px; }
.prop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.prop-card { position: relative; }
.prop-card[hidden] { display: none; }
.prop-card__link {
	display: flex; flex-direction: column; justify-content: flex-end;
	position: relative; min-height: 440px; padding: 15px; overflow: hidden;
	background-size: cover; background-position: center center; background-repeat: no-repeat;
	cursor: pointer;
}
.prop-card__link::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to bottom, rgba(11, 15, 1, 0) 54%, rgba(11, 15, 1, .2) 63%, rgba(22, 9, 5, 1) 100%);
}
.prop-card__link::after {
	content: ""; position: absolute; inset: 0; z-index: 2;
	background: #000; opacity: .27; transition: opacity .7s;
}
.prop-card__link:hover::after { opacity: .4; }
.prop-card__content { position: relative; z-index: 3; }
.prop-card__title { font-family: "Lucky Beauty", serif; font-size: 19px; font-weight: 600; line-height: 30px; color: #fff; margin: 0; }
.prop-card__meta { font-family: var(--font-body); font-size: 15px; color: #fff; display: flex; align-items: center; gap: 8px; }
.prop-card__meta .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; display: inline-block; }
.card-units { font-family: var(--font-body); font-size: 15px; color: #fff; margin-top: 4px; }
.card-badge {
	position: absolute; top: 20px; right: 20px; z-index: 4;
	background: #fff; color: #2C2C2C; font-family: var(--font-body); font-size: 13px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .2px; padding: 8px 16px;
}
/* sold-out cards are greyscale, with no dark gradient (as on the live site) */
.prop-card[data-status="sold-out"] .prop-card__link { filter: grayscale(100%); }
.prop-card[data-status="sold-out"] .prop-card__link::before { background: transparent; }

.no-results { font-family: var(--font-body); font-size: 17px; color: #2C2C2C; text-align: center; padding: 40px 0; }
.comm-grid-section .text-center { margin-top: 40px; }
#loadmore { cursor: pointer; border: 0; }
#loadmore[hidden] { display: none; }

@media (max-width: 1200px) {
	.comm-intro, .comm-filters, .comm-grid-section { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 1024px) {
	.comm-intro__title, .comm-intro__text { max-width: 100%; }
	.prop-grid { grid-template-columns: repeat(3, 1fr); }
	.filters-right { margin-left: 0; width: 100%; justify-content: flex-end; }
}
@media (max-width: 767px) {
	body.inner-page { padding-top: 70px; }
	.comm-intro { padding-top: 60px; } /* the 90px header covers 20px of the 70px body offset */
	.comm-intro__title { font-size: 20px; line-height: 32px; }
	.comm-intro__text { font-size: 15px; }
	.jet-filter-items-dropdown, .status-dropdown { width: 100%; }
	.prop-grid { grid-template-columns: 1fr; }
	.prop-card__link { min-height: 360px; }
}

/* =========================================================
   FOOTER — phone layout (SiteFooter .footer-mobile, live mobile-only
   Elementor section d90efb6): social row, accordion, badges, legal.
   ========================================================= */
.footer-mobile { display: none; margin: 0 -10px; }
.footer-mobile__social { display: flex; justify-content: center; gap: 5px; padding: 20px 0; }
.footer-mobile__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 20px; color: #2C2C2C; }
.footer-mobile__social li:first-child a { color: #000; }
.footer-acc { border-top: 1px solid rgba(122, 122, 122, .17); }
.footer-acc__item { background: #F8F8F8; border-bottom: 1px solid rgba(122, 122, 122, .17); }
.footer-acc__title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px; list-style: none; cursor: pointer; font-family: 'Lucky Beauty new', var(--font-en); font-size: 17px; font-weight: 600; line-height: 45px; color: #2C2C2C; }
.footer-acc__title::-webkit-details-marker { display: none; }
.footer-acc__title::after { content: "\f067"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 16px; }
.footer-acc__item[open] > .footer-acc__title { color: #85553A; border-bottom: 1px solid rgba(122, 122, 122, .17); }
.footer-acc__item[open] > .footer-acc__title::after { content: "\f068"; }
.footer-acc__body { padding: 20px; font-family: var(--font-body); font-size: 17px; line-height: 1.5; color: #A0A2A3; }
.footer-acc__body li + li { margin-top: 12px; }
.footer-acc__body a { color: #A0A2A3; }
.footer-acc__body a:hover { color: #85553A; }
/* Site Settings → Mobile footer lines: link / highlight (brown) / heading / text */
.footer-acc__line--heading { color: #2C2C2C; font-weight: 700; }
.footer-acc__line--heading:not(:first-child) { margin-top: 22px; }
.footer-acc__line--text { color: #A0A2A3; }
li.footer-acc__line--highlight a { color: #85553A; }
/* in an address section (one with headings — "Our Centers") the office links are dark, as on the live site */
.footer-acc__body:has(.footer-acc__line--heading) .footer-acc__line--link a { color: #2C2C2C; }
.footer-acc__office + .footer-acc__office { margin-top: 18px; }
.footer-acc__office strong { display: block; font-weight: 400; color: #2C2C2C; }
.footer-acc__office p { margin: 4px 0; }
.footer-acc__office a { color: #85553A; font-size: 14px; }
.footer-mobile__apps { display: flex; gap: 20px; padding: 20px 20px 0; }
.footer-mobile__apps a { flex: 1 1 0; }
.footer-mobile__apps img { display: block; width: 100%; height: auto; }
.footer-mobile__legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-family: var(--font-body); font-size: 14px; color: #7A7A7A; }
.footer-mobile__legal li + li::before { content: "-"; margin-inline-end: 8px; }
.footer-mobile__legal a { color: #7A7A7A; }
.footer-mobile__copy { margin: 16px 0 0; padding-bottom: 24px; text-align: center; font-family: var(--font-body); font-size: 14px; color: #2C2C2C; }
/* on a phone the accordion version replaces the desktop rows (kept after the base rule above so it wins) */
@media (max-width: 767px) {
	.site-footer { padding-top: 0; }
	.footer-top, .footer-locations, .footer-bottom { display: none; }
	.footer-mobile { display: block; }
}

/* =========================================================
   CUSTOMER SPACE — app-store popup (AppModal.tsx, opened by
   any #app link; main.js). Live Elementor popup 56415.
   ========================================================= */
.app-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .8); opacity: 0; transition: opacity .3s ease; }
.app-modal[hidden] { display: none; }
.app-modal.is-open { opacity: 1; }
body.app-modal-open { overflow: hidden; }
.app-modal__box { position: relative; width: 588px; max-width: 100%; padding: 50px; background: #fff; text-align: center; }
.app-modal__close { position: absolute; top: 18px; inset-inline-end: 20px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: #2C2C2C; font-size: 20px; cursor: pointer; }
.app-modal__title { margin: 12px 0 30px; font-family: 'Lucky Beauty', var(--font-en); font-size: 20px; font-weight: 600; line-height: 30px; color: #2C2C2C; }
.app-modal__stores { display: flex; justify-content: center; gap: 26px; }
.app-modal__stores a { display: block; flex: 0 1 212px; }
.app-modal__stores img { display: block; width: 100%; height: 55px; object-fit: contain; }
.rtl .app-modal__title { font-family: '29LTZaridDisplayVF', sans-serif; }
@media (max-width: 767px) {
	.app-modal__box { padding: 30px; }
	.app-modal__title { font-size: 20px; line-height: 27px; }
	.app-modal__stores { flex-direction: column; align-items: center; gap: 14px; }
	.app-modal__stores a { flex: none; width: 212px; max-width: 100%; } /* the 212px basis would be a height in a column */
}

/* =========================================================
   VIEW ON MAP MODAL (communities listing)
   ========================================================= */
.map-modal { position: fixed; inset: 0; z-index: 9999; background: #EFE9E1; opacity: 0; transition: opacity .35s ease; }
.map-modal[hidden] { display: none; }
.map-modal.is-open { opacity: 1; }
.map-modal__canvas { position: absolute; inset: 0; }
.map-modal__canvas .gm-style { font-family: var(--font-body); }
.map-modal__canvas > div { background: #EFE9E1; }

/* Map / Satellite is Google's own control now (map-modal.js); the old buttons stay out of sight
   where an imported section still carries them */
.map-modal__layers { display: none; }

/* --- Close (top-right): WordPress's brown square, 1% in --- */
.map-modal__close {
	position: absolute; top: 1%; right: 1%; z-index: 1000;
	width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;
	background: #85553A; border: 0; border-radius: 2px; color: #fff; font-size: 15px; cursor: pointer; transition: background .25s ease;
}
.map-modal__close:hover { background: #2C2C2C; }

/* --- Markers: city cluster badge + single project pin --- */
.map-pin { background: none; border: 0; }
.map-pin__badge {
	display: flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--brown); color: #fff; font-family: var(--font-en); font-size: 15px; line-height: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .35); cursor: pointer; transition: transform .2s ease, background .2s ease;
}
.map-pin__house { width: 28px; height: 28px; font-size: 12px; }
.map-pin:hover .map-pin__badge { transform: scale(1.12); background: #2C2C2C; }

/* --- Project card popup (Google InfoWindow, stripped of its own chrome) — WordPress's card:
   260px wide, 180px photo, the text framed in brown with rounded bottom corners, no shadow --- */
.map-modal__canvas .gm-style-iw-c { min-width: 260px !important; max-width: 260px !important; padding: 0 !important; border-radius: 10px; overflow: hidden; box-shadow: none; }
.map-modal__canvas .gm-style-iw-d { padding: 0; overflow: hidden !important; max-width: 260px !important; max-height: none !important; line-height: 1.4; }
.map-modal__canvas .gm-style-iw-ch { padding: 0; }
.map-modal__canvas .gm-style-iw-tc { display: none; }
/* the header strip only carries the close button — float it over the image */
/* Google styles the header as a flex row with the button at its end, so the placement needs !important */
.map-modal__canvas .gm-style-iw-chr { display: block !important; position: absolute !important; top: 0; left: 0; right: 0; height: 0; z-index: 2; }
.map-modal__canvas .gm-ui-hover-effect {
	position: absolute !important; top: 10px !important; left: 10px !important; right: auto !important; margin: 0 !important; padding: 0 !important;
	display: flex !important; align-items: center; justify-content: center;
	width: 24px !important; height: 24px !important; border-radius: 50%;
	background: rgba(0, 0, 0, .75) !important; opacity: 1 !important; transition: background .25s ease;
}
.map-modal__canvas .gm-ui-hover-effect > span { width: 12px !important; height: 12px !important; margin: 0 !important; background-color: #fff !important; }
.map-modal__canvas .gm-ui-hover-effect:hover { background: var(--brown) !important; }
.map-card { display: block; position: relative; width: 260px; color: #000; }
.map-card__img { display: block; width: 100%; height: 180px; background-size: cover; background-position: center; }
.map-card__body { display: block; padding: 13px 15px; border: 1px solid #85553A; border-top: 0; border-radius: 0 0 10px 10px; }
.map-card__title { display: block; font-family: 'Lucky Beauty', var(--font-en); font-size: 19px; font-weight: 600; line-height: 25px; color: #000; }
.map-card__meta, .map-card__units { display: block; font-family: var(--font-en); font-size: 15px; font-weight: 400; line-height: 25px; color: #000; }
.map-card__meta .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #85553A; margin: 0 7px; vertical-align: middle; }
.rtl .map-card__title { font-family: var(--font-head); font-weight: 500; }
.rtl .map-card__meta, .rtl .map-card__units { font-family: var(--font-body); }
.map-card__badge { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--brown); color: #fff; font-size: 12px; padding: 4px 10px; text-transform: capitalize; }

/* --- Show list (bottom center) — to the communities list; closes the map on that list --- */
.map-modal__listbtn {
	position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1000;
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-en); font-size: 15px; font-weight: 500; line-height: 1; color: #fff;
	background: #2C2C2C; border: 0; padding: 13px 30px; cursor: pointer; transition: background .25s ease;
}
.map-modal__listbtn:hover, .map-modal__listbtn:focus-visible { background: #85553A; color: #fff; }
.rtl .map-modal__listbtn { font-family: var(--font-body); }
body.body-map-opened { overflow: hidden; }

@media (max-width: 767px) {
	.map-modal__listbtn { bottom: 25px; }
}

/* =========================================================
   SINGLE PROPERTY TEMPLATE (en/property.html)
   ========================================================= */
body.property-page { background: #fff; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- breadcrumb trail (property and article pages) --- */
.crumbs { margin: 0 0 24px; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: #7A7A7A; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: '/'; margin: 0 8px; color: #A0A2A3; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { color: #2C2C2C; text-decoration: underline; }
.crumbs [aria-current] { color: #2C2C2C; overflow-wrap: anywhere; }
.crumbs--light, .crumbs--light [aria-current] { color: #fff; }
.crumbs--light a { color: #A0A2A3; }
.crumbs--light a:hover, .crumbs--light a:focus-visible { color: #fff; }
.crumbs--light li + li::before { color: #7A7A7A; }

/* --- label with short line (matches the live "— RIYADH" style) --- */
.prop-label { display: flex; align-items: center; gap: 10px; font-family: var(--font-en); font-size: 17px; text-transform: uppercase; color: #fff; margin-bottom: 20px; }
.prop-label .line { display: inline-block; width: 18px; height: 1px; background: currentColor; }
.prop-label--dark { color: #000; }

/* --- hero --- */
.prop-hero { position: relative; min-height: 100vh; display: flex; align-items: center; background-size: cover; background-position: center; background-repeat: no-repeat; }
.prop-hero__overlay { position: absolute; inset: 0; background: #000; opacity: .5; }
.prop-hero__content { position: relative; z-index: 1; padding-bottom: 220px; }
.prop-hero__city { display: flex; align-items: center; gap: 10px; font-family: var(--font-en); font-size: 16px; text-transform: uppercase; color: #fff; margin-bottom: 8px; }
.prop-hero__city .line { width: 18px; height: 1px; background: #fff; }
.prop-hero__title { font-family: 'Lucky Beauty new', var(--font-en); font-size: 55px; font-weight: 600; line-height: 65px; color: #fff; margin: 0; }

.prop-story {
	position: absolute; right: 0; bottom: 0; z-index: 2; width: 50%;
	display: flex; align-items: center; background: rgba(44, 44, 44, .92);
}
.prop-story__title { flex: 0 0 30%; padding: 25px; margin: 0; font-family: 'Lucky Beauty new', var(--font-en); font-size: 25px; font-weight: 600; line-height: 45px; color: #fff; }
.prop-story__text { flex: 0 0 40%; padding: 0 20px 0 0; margin: 0; font-family: var(--font-en); font-size: 17px; line-height: 1.45; color: #fff; }
.prop-story__video { position: relative; flex: 0 0 30%; min-height: 200px; align-self: stretch; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; }
.prop-story__video::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .25); transition: background .3s; }
.prop-story__video:hover::before { background: rgba(0, 0, 0, .45); }
.prop-story__play { position: relative; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; padding-left: 4px; transition: transform .3s; }
.prop-story__video:hover .prop-story__play { transform: scale(1.1); }
.prop-story__video--image { cursor: zoom-in; }
/* no story text: the picture / video takes the text's room too */
.prop-story__title + .prop-story__video, .rtl .prop-story__title + .prop-story__video { flex: 1 1 auto; }
.prop-story__video--image::before { content: none; }

/* --- about the community --- */
.prop-about { background: #2C2C2C; padding: 100px 0; }
.prop-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.prop-about__intro p { font-family: var(--font-en); font-size: 17px; line-height: 1.6; color: #fff; margin: -10px 50px 20px 0; }
.prop-counters { display: flex; flex-wrap: wrap; gap: 30px 0; }
/* `body` prefix: must outrank the generic `body:not(.ar24-page) .r-counter` (max-content, column-reverse) */
body .prop-counters .r-counter { width: 45%; flex-direction: column; }
.prop-counters .r-counter-title { font-family: var(--font-en); font-size: 17px; line-height: 20px; color: #7A7A7A; text-align: left !important; order: 2; }
body .prop-counters .r-counter-number-wrapper { font-family: var(--font-en); font-size: 40px; line-height: 45px; color: #fff; direction: ltr; margin-bottom: 4px; }
/* narrow columns (mobile, tablet): a gutter between the two counters, and six-digit
   figures ("155,312") scale down with the column instead of running into the next one */
.prop-counters { container-type: inline-size; }
body .prop-counters .r-counter { min-width: 0; padding-inline-end: 16px; }
body .prop-counters .r-counter-number-wrapper { font-size: clamp(26px, 9.5cqi, 40px); }
.prop-counters .counter-static { font-family: var(--font-en); }
.prop-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.prop-actions .btn { font-family: 'Lucky Beauty new', var(--font-en); font-weight: 500; font-size: 15px; padding: 14px 22px; }
.prop-actions .btn-brown:hover { background: #fff; color: #85553A; }

/* --- master plan (full-bleed embedded viewer) --- */
.prop-masterplan__frame { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.prop-masterplan__frame p { margin: 0; }
.prop-masterplan__frame iframe { display: block; width: 100% !important; max-width: 100%; height: 100vh !important; min-height: 560px; border: 0; }

/* embedded 360 viewers use the same inline 100vw sizing as the master plan */
.prop-360__frame p { margin: 0; }
.prop-360__frame iframe { display: block; width: 100% !important; max-width: 100%; height: 80vh !important; min-height: 480px; border: 0; }

@media (max-width: 767px) {
	.prop-masterplan__frame iframe { height: 80vh !important; min-height: 420px; }
	.prop-360__frame iframe { height: 60vh !important; min-height: 320px; }
}

/* --- gallery carousel --- */
.prop-gallery { padding: 20px 0 80px; }
.prop-gallery__swiper .swiper-slide { height: 360px; }
.prop-gallery__swiper .swiper-slide a { display: block; height: 100%; }
.prop-gallery__swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prop-gallery__nav { display: flex; justify-content: center; gap: 20px; margin-top: 20px; }
.prop-gallery__nav button { width: 50px; height: 50px; border: 1px solid #2C2C2C; background: transparent; color: #2C2C2C; font-size: 16px; cursor: pointer; transition: all .3s; }
.prop-gallery__nav button:hover { background: #2C2C2C; color: #fff; }

/* --- property types --- */
.prop-types { padding: 0 10px 50px; }
/* the gallery above brings its own bottom padding; without one (no gallery) keep the types off the dark about band */
section:not(.prop-gallery) + .prop-types { padding-top: 80px; }
.prop-types__title { font-family: 'Lucky Beauty new', var(--font-en); font-size: 30px; font-weight: 600; line-height: 45px; color: #000; margin: 0 0 30px; }
/* rows auto + 1fr: the gallery spans both rows, so its extra height goes under the specs, not between tabs and specs */
.prop-types__grid { display: grid; grid-template-columns: 49% 49%; grid-template-rows: auto 1fr; justify-content: space-between; column-gap: 20px; align-items: start; }
.type-tabs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 20px; grid-column: 1; }
.type-tab {
	font-family: 'Lucky Beauty new', var(--font-en); font-weight: 500; font-size: 15px; color: #2C2C2C;
	background: transparent; border: 1px solid #2C2C2C; border-radius: 0; padding: 12px 20px; cursor: pointer; transition: all .3s;
}
.type-tab:hover, .type-tab.is-active { background: #2C2C2C; color: #fff; }
.type-panels { display: contents; }
.type-panel { display: contents; }
.type-panel__data { grid-column: 1; min-width: 0; }
.type-panel__gallery { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.type-panel[hidden] { display: none; }
.type-specs { list-style: none; display: flex; flex-wrap: wrap; padding: 0; margin: 0 0 20px; }
.type-specs li { flex: 0 0 50%; max-width: 50%; margin: 10px 0; display: flex; flex-direction: column; }
.type-specs .value { font-family: var(--font-en); font-size: 17px; font-weight: 600; line-height: 20px; color: #000; margin-bottom: 4px; padding-right: 15px; }
.type-specs .name { font-family: 'Lucky Beauty new', var(--font-en); font-size: 14px; font-weight: 600; line-height: 17px; color: #707070; text-transform: uppercase; }
.btn-tour { font-family: 'Lucky Beauty new', var(--font-en); font-weight: 500; font-size: 15px; padding: 14px 28px; border: 1px solid #85553A; }
.type-gallery { width: 100%; height: 280px; }
.type-gallery .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.type-gallery .swiper-button-next, .type-gallery .swiper-button-prev { width: 36px; height: 36px; background: rgba(44, 44, 44, .7); color: #fff; }
.type-gallery .swiper-button-next::after, .type-gallery .swiper-button-prev::after { content: none; }
.type-gallery .swiper-button-next i, .type-gallery .swiper-button-prev i { font-size: 16px; }
.type-thumbs { height: 85px; margin-top: 10px; }
.type-thumbs .swiper-slide { width: 130px; opacity: .6; cursor: pointer; transition: opacity .3s; }
.type-thumbs .swiper-slide-thumb-active { opacity: 1; }
.type-thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- partners --- */
.prop-partners { background: #F9F7F3; padding: 100px 10px; }
.prop-partners__title { max-width: 900px; font-family: 'Lucky Beauty new', var(--font-en); font-size: 30px; font-weight: 600; line-height: 45px; color: #000; margin: 0 0 40px; }
.prop-partners__logos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; align-items: center; padding-top: 20px; }
.prop-partners__logos figure { margin: 0; display: flex; align-items: center; justify-content: center; width: 115px; height: 110px; padding: 15px; background: #fff; }
.prop-partners__logos img { max-width: 100%; max-height: 80px; width: auto; display: block; }

/* --- register your interest --- */
.prop-register { position: relative; padding: 130px 0; background-size: cover; background-position: center; background-attachment: fixed; }
.prop-register .container { display: flex; justify-content: flex-end; }
.prop-register__card { width: 100%; max-width: 460px; background: rgba(44, 44, 44, .96); padding: 40px 30px; }
.prop-register__title { font-family: 'Lucky Beauty new', var(--font-en); font-size: 34px; font-weight: 600; line-height: 44px; color: #fff; margin: 0 0 25px; }
.prop-register__text { font-family: var(--font-en); font-size: 16px; line-height: 1.45; color: #fff; margin: 0 0 30px; }
.prop-register__text a, .prop-register__note a { color: #85553A; text-decoration: none; }
.prop-register__text a:hover, .prop-register__note a:hover { text-decoration: underline; }
.prop-form { display: grid; gap: 16px; }
.prop-form__field { position: relative; }
.prop-form input {
	width: 100%; font-family: var(--font-en); font-size: 15px; color: #fff;
	background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .45); border-radius: 0; padding: 12px 15px; outline: 0;
	-webkit-appearance: none; appearance: none; transition: border-color .3s;
}
.prop-form input::placeholder { color: rgba(255, 255, 255, .75); }
.prop-form input:focus { border-bottom-color: #fff; }
/* intl-tel-input (country dropdown + dial code) on the dark card */
.prop-form__phone .iti { width: 100%; --iti-arrow-color: rgba(255, 255, 255, .7); --iti-border-color: transparent; --iti-hover-color: transparent; }
.prop-form__phone .iti__selected-dial-code { color: #fff; font-family: var(--font-en); font-size: 15px; }
.prop-form__phone .iti__country-container:hover button, .prop-form__phone .iti__selected-country-primary:hover { background: transparent; }
.prop-form__phone .iti__dropdown-content { --iti-border-color: #ddd; --iti-dialcode-color: #999; --iti-hover-color: #f3f0ec; --iti-text-color: #2C2C2C; background: #fff; color: #2C2C2C; border-radius: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.prop-form__phone .iti__search-input { font-family: var(--font-en); font-size: 14px; color: #2C2C2C; border-bottom: 1px solid #eee; }
.prop-form__phone .iti__country-name { font-family: var(--font-en); }
.prop-form__phone .iti__country.iti__highlight { background: #f3f0ec; }
.prop-form__error { display: block; font-family: var(--font-en); font-size: 13px; color: #e57373; margin-top: 6px; }
.prop-form__error[hidden] { display: none; }
.prop-form__actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.prop-form__actions .btn { font-family: 'Lucky Beauty new', var(--font-en); font-weight: 500; font-size: 16px; padding: 14px 32px; }
.prop-form__actions .btn:hover, .prop-form__actions .btn:focus { background: #fff; color: #85553A; }
.prop-form__msg { font-family: var(--font-en); font-size: 15px; color: #fff; margin: 0; }
.prop-form__msg[hidden] { display: none; }
.prop-form .is-invalid { border-bottom-color: #d9534f; }
.prop-register__note { font-family: var(--font-en); font-size: 14px; line-height: 1.5; color: #fff; margin: 110px 0 0; }

/* --- video / image lightbox --- */
.video-modal, .img-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; transition: opacity .3s; }
.video-modal[hidden], .img-modal[hidden] { display: none; }
.video-modal.is-open, .img-modal.is-open { opacity: 1; }
.video-modal__backdrop, .img-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .9); }
.video-modal__close, .img-modal__close { position: absolute; top: 20px; right: 20px; z-index: 2; width: 44px; height: 44px; background: transparent; border: 0; color: #fff; font-size: 26px; cursor: pointer; }
.video-modal__frame { position: relative; width: 100%; max-width: 1100px; aspect-ratio: 16 / 9; }
.video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.img-modal img { position: relative; max-width: 100%; max-height: 90vh; object-fit: contain; }
.img-modal__prev, .img-modal__next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 50px; height: 50px; background: rgba(255, 255, 255, .1); border: 0; color: #fff; font-size: 28px; cursor: pointer; transition: background .3s; }
.img-modal__prev:hover, .img-modal__next:hover { background: rgba(255, 255, 255, .25); }
.img-modal__prev { left: 20px; }
.img-modal__next { right: 20px; }
body.body-modal-opened { overflow: hidden; }

@media (max-width: 1024px) {
	.prop-story { width: 70%; }
	.prop-story__title { font-size: 20px; line-height: 30px; }
	.prop-story__text { font-size: 14px; }
}
@media (max-width: 767px) {
	.prop-hero { min-height: 75vh; flex-direction: column; justify-content: flex-end; padding-top: 140px; }
	.prop-hero__content { width: 100%; padding: 0 20px 40px; }
	.prop-hero__title { font-size: 35px; line-height: 45px; letter-spacing: 1px; }
	.prop-story { position: relative; width: 100%; flex-wrap: wrap; }
	.prop-story__title { flex-basis: 100%; padding: 20px 20px 0; line-height: 30px; }
	.prop-story__text { flex-basis: 100%; padding: 10px 20px 20px; font-size: 14px; }
	.prop-story__video { flex-basis: 100%; min-height: 200px; }
	.prop-about { padding: 50px 20px; }
	.prop-about__grid, .prop-types__grid { grid-template-columns: 1fr; grid-template-rows: none; gap: 30px; }
	.type-panel__gallery { grid-column: 1; grid-row: auto; }
	.prop-about__intro p { margin-right: 0; }
	.prop-counters .r-counter-title { font-size: 13px; }
	.prop-actions .btn { width: 100%; }
	.prop-gallery__swiper .swiper-slide { height: 200px; }
	.prop-types, .prop-partners { padding-left: 20px; padding-right: 20px; }
	.prop-partners { padding-top: 50px; padding-bottom: 50px; }
	.prop-partners__logos { justify-content: flex-start; }
	section:not(.prop-gallery) + .prop-types { padding-top: 50px; }
	.prop-types__title, .prop-partners__title { font-size: 20px; line-height: 30px; }
	.type-tab { padding: 10px 18px; font-size: 13px; }
	.prop-register { padding: 60px 20px; background-attachment: scroll; }
	.prop-register__card { max-width: none; padding: 30px 20px; }
	.prop-register__title { font-size: 28px; line-height: 36px; }
	.prop-register__note { margin-top: 40px; }
	.video-modal, .img-modal { padding: 20px; }
}

/* =========================================================
   RTL — communities listing / filters / map modal
   ========================================================= */
.rtl .comm-intro .section-label { font-family: var(--font-body); }
.rtl .jet-filter-items-dropdown__label { text-align: right; padding: 10px 10px 10px 28px; }
.rtl .jet-filter-items-dropdown__label::after { right: auto; left: 10px; }
.rtl .status-dropdown .jet-filter-items-dropdown__label { padding: 12px 15px 11px; }
.rtl .status-dropdown .jet-filter-items-dropdown__label i { right: auto; left: 7px; }
.rtl .jet-filter-items-dropdown__body { left: auto; right: 0; }
.rtl .jet-filter-search i { left: auto; right: 10px; }
.rtl .jet-filter-search__input { padding: 8px 30px 8px 10px; }
.rtl .btn-map svg { transform: scaleX(-1); }
/* Slider arrows: in RTL "previous" moves to the right and "next" to the left
   (Swiper's .swiper-rtl, the ESG sliders' own rule, the flex row under the
   property gallery), so the chevrons are mirrored to keep pointing outward. */
.swiper-rtl .swiper-button-prev i, .swiper-rtl .swiper-button-next i,
.rtl .esg-slides__nav i, .rtl .prop-gallery__nav i { transform: scaleX(-1); }
.rtl .prop-card__link { text-align: right; }
.rtl .card-badge { right: auto; left: 15px; }
.rtl .map-modal__close { right: auto; left: 1%; }
.rtl .map-card__body, .rtl .map-list__items a { text-align: right; }
.rtl .map-card__badge { right: auto; left: 10px; }

/* =========================================================
   RTL — single property template
   ========================================================= */
.rtl .prop-label, .rtl .prop-hero__city { font-family: var(--font-body); text-transform: none; }
.rtl .prop-hero__title, .rtl .prop-story__title, .rtl .prop-types__title, .rtl .prop-partners__title, .rtl .prop-register__title { font-family: var(--font-head); font-weight: 700; }
.rtl .prop-hero__title { font-size: 50px; line-height: 65px; }
.rtl .prop-story__text, .rtl .prop-about__intro p, .rtl .prop-register__text, .rtl .prop-register__note, .rtl .prop-form input, .rtl .prop-form__msg, .rtl .prop-form__error,
.rtl .prop-counters .r-counter-title, .rtl .type-specs .name { font-family: var(--font-body); }
.rtl .prop-actions .btn, .rtl .type-tab, .rtl .btn-tour, .rtl .prop-form__actions .btn { font-family: var(--font-head); font-weight: 700; }
.rtl .prop-story { right: auto; left: 0; }
.rtl .prop-story__text { padding: 0 0 0 20px; }
.rtl .prop-story__play { padding-left: 0; padding-right: 4px; }
.rtl .prop-about__intro p { margin: -10px 0 20px 50px; }
.rtl .prop-counters .r-counter-title { text-align: right !important; }
.rtl .prop-counters .r-counter-number-wrapper { justify-content: flex-end; }
.rtl .type-specs .value { padding-right: 0; padding-left: 15px; font-family: var(--font-en); }
.rtl .type-specs .name { font-size: 15px; }
/* keep the widget RTL (intl-tel-input positions the flag/dropdown from the html dir); only the number itself is LTR */
.rtl :is(.prop-form__phone, .contact-form__phone) .iti__country-container { left: 0 !important; right: auto !important; } /* Arabic: flag on the left (see property.js) */
.rtl :is(.prop-form__phone, .contact-form__phone) .iti__selected-country { direction: ltr; } /* flag, arrow, +966 */
.rtl :is(.prop-form__phone, .contact-form__phone) .iti__arrow { margin: 0 8px 0 6px; } /* room around the arrow, before +966 */
.rtl :is(.prop-form__phone, .contact-form__phone) .iti__dropdown-content { left: 0 !important; right: auto !important; } /* list opens under the field, not off the card */
.rtl .prop-form__phone input { direction: ltr; text-align: right; }
.rtl .iti__dial-code, .rtl .iti__selected-dial-code { direction: ltr; unicode-bidi: isolate; } /* "+93" not "93+" */
.rtl .prop-form__phone input::placeholder { text-align: right; }
.rtl .video-modal__close, .rtl .img-modal__close { right: auto; left: 20px; }
@media (max-width: 767px) {
	.rtl .prop-hero__title { font-size: 34px; line-height: 46px; }
	.rtl .prop-about__intro p { margin-left: 0; }
}

/* Background Vimeo videos (src/lib/vimeoPoster.ts): the thumbnail shows at once,
   the player fades in over it on its first frame (main.js). */
.vimeo-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
iframe[data-vimeo-bg] { opacity: 0; transition: opacity .8s ease; }
iframe[data-vimeo-bg].is-playing { opacity: 1; }

/* ---------------- Contact us popup (header "Contact us" + phone icon) ----------------
   As retal.com.sa's Elementor popup 3329 (ar 29775): a 350 x 400 white box on a rgba(0,0,0,.8) backdrop,
   a 200px photo with a dark overlay and "Contact us" in white, then a brown phone icon over "Call us at <number>". */
.contact-popup {
	position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center;
	padding: 16px; background: rgba(0, 0, 0, .8); opacity: 0; transition: opacity .3s;
}
.contact-popup[hidden] { display: none; }
.contact-popup.is-open { opacity: 1; }
body.contact-popup-opened { overflow: hidden; }
.contact-popup__box {
	position: relative; width: 350px; max-width: 100%; min-height: 400px; background: #fff;
	box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2); padding: 10px 10px 0;
}
.contact-popup__close {
	position: absolute; top: 8%; right: 6%; z-index: 2; display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; padding: 0; border: 0; background: none; color: #fff; font-size: 25px; cursor: pointer;
}
.rtl .contact-popup__close { right: auto; left: 6%; }
.contact-popup__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.contact-popup__hero { position: relative; min-height: 200px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; background: #2c2c2c; }
.contact-popup__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1500ms; }
.contact-popup__hero:hover .contact-popup__bg { transform: scale(1.2); }
.contact-popup__overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, .53); transition: background-color 1500ms; }
.contact-popup__hero:hover .contact-popup__overlay { background-color: transparent; }
.contact-popup__title { position: relative; margin: 0; padding: 0 20px; font-family: 'Lucky Beauty', 'Marcellus', serif; font-size: 30px; font-weight: 600; line-height: 45px; color: #fff; transition: transform 1000ms; }
.contact-popup__hero:hover .contact-popup__title { transform: scale(1.1); }
.rtl .contact-popup__title { font-family: var(--font-head); }
.contact-popup__call { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 30px 10px; text-align: center; color: #2c2c2c; text-decoration: none; }
.contact-popup__icon { display: inline-flex; font-size: 35px; line-height: 1; margin-bottom: 15px; }
.contact-popup__icon svg { width: auto; height: 35px; fill: #85553a; transition: fill .3s; }
.contact-popup__call:hover .contact-popup__icon svg, .contact-popup__call:focus-visible .contact-popup__icon svg { fill: #000; }
.contact-popup__text { font-family: 'Marcellus', serif; font-size: 16px; font-weight: 400; line-height: 23px; color: #2c2c2c; }
.rtl .contact-popup__text { font-family: var(--font-body); }
@media (max-width: 767px) {
	.contact-popup__title { font-size: 25px; }
	.contact-popup__text { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.contact-popup, .contact-popup__bg, .contact-popup__overlay, .contact-popup__title { transition: none; }
}