/* The Estates Residences — overrides on top of the official stylesheets (assets/css/sodic-*.css):
   operator disclosure bar, header/drawer, map embed, slider runtime without Swiper JS, form extras, footer, lightbox, Arabic type. */
html { scroll-behavior: smooth; }
html.est-lock { overflow: hidden; }
body { background: #fff; }
main, .est-footer { overflow-x: clip; }
[id] { scroll-margin-top: 9rem; }

/* disclosure bar (legal pages only; the landing carries the operator disclosure in its footer) */
.est-disclosure { position: relative; z-index: 40; background: #0b0b0b; color: rgba(255,255,255,.82); font-size: 1.25rem; line-height: 1.55;
  text-align: center; padding: .8rem 1.6rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.est-ar .est-disclosure { font-size: 1.35rem; }

/* header: absolute over the hero like the official one */
.est-header { top: var(--est-bar, 0px); transition: opacity .4s ease; }
.est-header-off { opacity: 0; pointer-events: none; }
.est-header .menu ul a { color: #fff; }
.est-header .est-cta { color: #000; }
.est-header .est-cta:hover { color: #fff; }
.est-lang { color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: .6rem; padding: .7rem 1.2rem; line-height: 1; }
.est-lang:hover { background: #fff; color: #000 !important; }
.est-cta { white-space: nowrap; }
.est-burger { width: 4.4rem; height: 4.4rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
  background: transparent; border: 0; cursor: pointer; }
.est-burger span { display: block; width: 2.6rem; height: 2px; background: #fff; }
@media (min-width: 1280px) { .est-burger { display: none; } }
.est-drawer { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.94); backdrop-filter: blur(1.6rem); color: #fff;
  display: flex; flex-direction: column; justify-content: center; padding: 6rem 3.2rem; overflow-y: auto; }
.est-drawer[hidden] { display: none; }
.est-drawer ul { list-style: none; margin: 0; padding: 0; }
.est-drawer li a { display: block; padding: 1.6rem 0; font-size: 2.2rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid rgba(255,255,255,.12); }
.est-drawer .est-lang { align-self: flex-start; margin-top: 3rem; font-size: 1.8rem; }
.est-drawer-x { position: absolute; top: 2rem; inset-inline-end: 2rem; width: 4.8rem; height: 4.8rem; font-size: 3.6rem; line-height: 1;
  color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; cursor: pointer; }

/* sticky project bar: hidden under the hero, fixed to the top once the hero has scrolled away */
[data-est-sticky] { transform: translateY(100%); transition: transform .5s ease, opacity .5s ease; }
[data-est-sticky].est-bar-on { position: fixed !important; top: 0; bottom: auto !important; opacity: 1 !important; transform: none; z-index: 35; }
/* mobile UX 2026-10-22: fixed, the bar spans the viewport edge to edge instead of 100vw, which runs under a desktop scrollbar (off-screen in RTL) */
[data-est-sticky].est-bar-on { left: 0; right: 0; width: auto !important; }
/* section menu opened from the list button */
.side-block { transition: opacity .4s ease; }
.side-block.est-side-on { opacity: 1 !important; pointer-events: auto !important; }
.side-block a.active { border: none; background: #0055b8; color: #fff; padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

/* sliders without Swiper JS: the official markup keeps its classes; the wrapper moves with a transform */
.swiper { position: relative; overflow: hidden; touch-action: pan-y; }
.swiper-wrapper { display: flex; box-sizing: content-box; transition: transform .6s cubic-bezier(.25,.8,.25,1); will-change: transform; }
.swiper-slide { flex-shrink: 0; }
.mySwiper2 .swiper-slide { width: 100% !important; }
.mySwiper .swiper-slide { cursor: pointer; opacity: .55; transition: opacity .4s; }
.mySwiper .swiper-slide.swiper-slide-thumb-active { opacity: 1; border-color: #fff; }
#construction .swiper-slide { width: 100% !important; transform: none !important; }
#construction .swiper-wrapper { height: auto !important; }
.swiper-button-disabled { opacity: .3; pointer-events: none; }
[dir="rtl"] .swiper-slide[style*="margin-right"] { margin-right: 0 !important; }
[dir="rtl"] #amenities .swiper-slide { margin-left: 30px; }
[dir="rtl"] #landmarks .swiper-slide, [dir="rtl"] #developments .swiper-slide { margin-left: 40px; }
[dir="rtl"] .mySwiper .swiper-slide { margin-left: 10px; }
img { -webkit-user-drag: none; }

/* map: Google embed in the official map frame */
.est-map { background: #111; }
.est-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
.est-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); pointer-events: none; display: flex; flex-direction: column; align-items: center; }
.est-pin span { width: 7rem; height: 7rem; border-radius: 50%; background: #000; color: #fff; font-size: .6rem; letter-spacing: .12em; display: flex;
  align-items: center; justify-content: center; text-align: center; line-height: 1.4; font-weight: 500; }
.est-pin::after { content: ""; width: 1px; height: 4.2rem; background: #000; box-shadow: 0 4.2rem 0 0 transparent; }
.est-pin::before { content: ""; position: absolute; bottom: -.4rem; width: .8rem; height: .8rem; border-radius: 50%; background: #1a73e8; border: 2px solid #fff; }
.est-mapbtn { position: absolute; top: 3rem; inset-inline-end: 4.4rem; background: #fff; color: #000; padding: 1.3rem 1.6rem; font-size: 1.3rem;
  text-transform: uppercase; letter-spacing: .04em; font-weight: 500; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.est-mapbtn:hover { background: #000; color: #fff; }

/* form extras */
/* bp-phone (intl-tel-input) in the floating-label field: the input is no longer the label's sibling, so the label stays floated;
   the flag button sits on the text line and the arrow is white on the dark form. Fleet audit 2026-10-24 (D-UX-3): the text line
   alone measured 22px, so the flag button keeps a 24px minimum (WCAG 2.5.8), growing downwards inside the field */
.est-phone .iti { flex: 1 1 auto; min-width: 0; }
.est-phone .iti__country-container { top: 3rem; bottom: 1.25rem; min-height: 24px; }
.est-phone .iti__selected-country { --iti-icon-color: #fff; min-height: 24px; }
/* "Ask for prices" text links (desktop, 17-22px tall): 4px vertical padding lifts the hit area to 24px+ without moving the line
   (fleet audit 2026-10-24, D-UX-3) */
a.underline-offset-4 { padding-block: 4px; }
.est-phone .iti input.iti__tel-input, [dir="rtl"] .est-phone .iti input.iti__tel-input { text-align: left; }
input[name="phone"] { text-align: start; }
[dir="rtl"] input[name="phone"] { text-align: right; }
.form-group.error input { border-color: #e5484d !important; }
.est-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[data-form-status][data-kind="error"] { color: #ff8a8a; }
[data-form-status][data-kind="ok"] { color: #7ee2a8; }
[data-form-status]:empty { display: none; }
form[data-lead-form] button[disabled] { opacity: .6; cursor: progress; }
.est-actions { align-items: stretch; }
.est-actions .est-submit { flex: 1 1 100%; justify-content: center; }
.est-or { width: 100%; text-align: center; color: rgba(255,255,255,.6); font-size: 1.4rem; margin: -.4rem 0; }

/* WhatsApp: big green buttons (owner request 2026-10-20) */
.est-wa-big { display: flex; align-items: center; justify-content: center; gap: 1.6rem; width: 100%; min-height: 8.4rem; padding: 1.4rem 2.4rem;
  background: #038845; color: #fff; border-radius: 1.2rem; box-shadow: 0 .8rem 2.4rem rgba(0,192,99,.35); text-align: start;
  transition: background .25s ease, transform .25s ease; }
.est-wa-big:hover { background: #027a3e; transform: translateY(-2px); }
.est-wa-big img { width: 4.4rem; height: 4.4rem; flex: 0 0 auto; filter: brightness(0) invert(1); }
.est-wa-big span { display: flex; flex-direction: column; gap: .3rem; }
.est-wa-big strong { font-size: 2.4rem; line-height: 1.15; font-weight: 700; }
.est-wa-big small { font-size: 1.4rem; opacity: 1; }
.est-wa-strip { background: #0d0d0d; color: #fff; padding: 5.6rem 2.4rem; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
@media (min-width: 768px) { .est-wa-strip { padding-inline: 10rem; } }
.est-wa-strip-in { max-width: 120rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 4rem; }
.est-wa-strip h2 { font-size: 3.2rem; line-height: 1.2; font-weight: 600; }
.est-wa-strip p { margin-top: 1rem; font-size: 1.7rem; color: rgba(255,255,255,.72); max-width: 60rem; }
.est-wa-strip .est-wa-big { width: auto; min-width: 42rem; }
.est-wa-footer { margin-top: 0; max-width: 46rem; }
.est-drawer-wa { color: #00C063 !important; font-weight: 700; }
.est-wa-fab { position: fixed; z-index: 45; bottom: 2.4rem; inset-inline-start: 2.4rem; display: flex; align-items: center; gap: 1.2rem;
  background: #038845; color: #fff; border-radius: 99rem; padding: 1.6rem 3.2rem 1.6rem 2.2rem; font-size: 2.2rem; font-weight: 700;
  white-space: nowrap; box-shadow: 0 1rem 3rem rgba(0,0,0,.35), 0 0 0 .6rem rgba(0,192,99,.22); transition: background .25s ease, transform .25s ease; }
.est-wa-fab:hover { background: #027a3e; transform: scale(1.03); }
.est-wa-fab img { width: 4.8rem; height: 4.8rem; filter: brightness(0) invert(1); }

/* hero lead form */
.est-hero-form { position: relative; z-index: 9; color: #fff; background: rgba(0,0,0,.62); backdrop-filter: blur(1.4rem); -webkit-backdrop-filter: blur(1.4rem);
  border: 1px solid rgba(255,255,255,.16); border-radius: 1.6rem; padding: 3.2rem 3.2rem 2.4rem; }
.est-hero-eyebrow { font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: .8rem; }
.est-ar .est-hero-eyebrow { text-transform: none; font-size: 1.4rem; }
.est-hero-h { font-size: 3rem; line-height: 1.2; font-weight: 600; }
.est-hero-sub { margin: .8rem 0 2.4rem; font-size: 1.5rem; color: rgba(255,255,255,.75); }
.est-hero-form .captcha-text { font-size: 1.15rem !important; }
@media (min-width: 1024px) {
  .page-banner.est-has-form .est-hero-form { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 6rem; width: 48rem; max-height: calc(100svh - 14rem); overflow-y: auto; }
  .page-banner.est-has-form > .logo { inset-inline-end: 54rem; }
}
.captcha-text a { text-decoration: underline; }

/* floating buttons sit above the sticky bar */
.est-float { z-index: 32; }

/* footer */
.est-footer a:hover { color: #fff; text-decoration: underline; }

/* lightbox */
.est-lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: 4rem; }
.est-lightbox[hidden] { display: none; }
.est-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.est-lightbox button { position: absolute; top: 2rem; inset-inline-end: 2rem; width: 4.8rem; height: 4.8rem; font-size: 3.6rem; color: #fff;
  background: transparent; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; cursor: pointer; line-height: 1; }

/* Arabic: Noto Sans Arabic everywhere, no forced letter spacing / uppercase artifacts */
.est-ar, .est-ar * { font-family: var(--font-noto, "Noto Sans Arabic"), system-ui, sans-serif; letter-spacing: 0 !important; }
.est-ar .tracking-wider, .est-ar .tracking-widest { letter-spacing: 0 !important; }

/* legal pages */
.est-legal { max-width: 110rem; margin: 0 auto; color: #fff; font-size: 1.7rem; line-height: 1.8; }
.est-legal h1 { font-size: 4rem; }
.est-legal h2 { font-size: 2.2rem; }

@media (max-width: 1023px) {
  .page-banner.est-has-form { height: auto; min-height: 100svh; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 11.2rem 1.6rem 3.2rem; }
  .page-banner.est-has-form > .logo { position: absolute; inset: auto; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .page-banner.est-has-form .goto { display: none; }
  .est-hero-form { padding: 2.4rem 1.8rem 1.8rem; }
  .est-wa-strip-in { flex-direction: column; align-items: stretch; text-align: center; }
  .est-wa-strip p { margin-inline: auto; }
  .est-wa-strip .est-wa-big { min-width: 0; width: 100%; }
}
@media (max-width: 767px) {
  .est-disclosure { font-size: 1.15rem; padding: .7rem 1.2rem; }
  body { padding-bottom: 8.4rem; }
  .est-float { display: none !important; }
  .est-wa-fab { inset-inline: 0; bottom: var(--bp-kb, 0px); border-radius: 0; /* mobile UX 2026-10-22: the bottom WhatsApp bar stays while typing and rides on the keyboard (bp-mobile-kb in estates.js) */ justify-content: center; padding: 1.4rem 1.6rem calc(1.4rem + env(safe-area-inset-bottom)); font-size: 2.2rem;
    box-shadow: 0 -.6rem 2rem rgba(0,0,0,.3); }
  .est-wa-fab img { width: 4rem; height: 4rem; }
  .est-hero-h { font-size: 2.4rem; }
  .est-wa-big strong { font-size: 2.1rem; }
  .est-wa-strip { padding: 4.4rem 1.6rem; }
  .est-wa-strip h2 { font-size: 2.6rem; }
  .est-phone { flex-direction: column; gap: 1rem; }
  #developments .swiper-slide { width: calc(100vw - 6.7rem) !important; }
  .est-mapbtn { font-size: 1.15rem; padding: 1.1rem 1.4rem; top: 1.6rem; inset-inline-end: 1.6rem; }
}

/* BP-R9: footer legal links tap size */
.est-footer a[href$="/privacy/"], .est-footer a[href$="/terms/"], footer a[href$="/privacy/"], footer a[href$="/terms/"] { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 8px; }

/* mobile UX 2026-10-22: from 768px the WhatsApp pill floats at the bottom corner; the page ends with room for it, so it never sits on the
   operator line or the Privacy / Terms links. Below 1024px the side rail duplicates the pill and the hero form and overlapped the WhatsApp CTA. */
@media (min-width: 768px) { .est-footer::after { content: ""; display: block; height: 12rem; } }
@media (max-width: 1023px) { .est-float { display: none !important; } }

/* visual QA 2026-10-22 (narrow phones): the form's submit label wraps into balanced lines with tighter tracking (no single word alone),
   and the big WhatsApp button fits its title in at most two balanced lines. */
.est-actions .est-submit, .est-actions .est-submit span, .est-wa-big strong { text-wrap: balance; }
@media (max-width: 400px) {
  .est-actions .est-submit { letter-spacing: .06em; }
  .est-wa-big { gap: 1.2rem; padding: 1.2rem 1.6rem; }
  .est-wa-big strong { font-size: 2rem; }
}

/* Call CTA (owner approval 2026-10-25): the page's own /<page>/go/call (call-go, tel: of the project's FIXED contact), under the
   WhatsApp button of both forms and, on phones, at the inline-end of the bottom bar (the WhatsApp bar keeps the rest of the width);
   from 768px a pill at the bottom inline-end corner, opposite the WhatsApp pill. Tap targets >= 44px everywhere. */
.est-call-big { display: flex; align-items: center; justify-content: center; gap: 1.4rem; width: 100%; min-height: 6.4rem; padding: 1.2rem 2.4rem;
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.75); border-radius: 1.2rem; text-align: start; transition: background .25s ease, border-color .25s ease; }
.est-call-big:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.est-call-big:focus-visible, .est-call-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.est-call-big svg { width: 3.2rem; height: 3.2rem; flex: 0 0 auto; }
.est-call-big span { display: flex; flex-direction: column; gap: .2rem; }
.est-call-big strong { font-size: 2rem; line-height: 1.15; font-weight: 700; }
.est-call-big small { font-size: 1.3rem; color: rgba(255,255,255,.8); }
.est-call-fab { position: fixed; z-index: 45; bottom: 2.4rem; inset-inline-end: 2.4rem; display: flex; align-items: center; gap: 1rem; min-height: 44px;
  background: #111; color: #fff; border-radius: 99rem; padding: 1.6rem 2.6rem 1.6rem 2rem; font-size: 2rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.35), 0 0 0 .4rem rgba(255,255,255,.35); transition: background .25s ease, transform .25s ease; }
.est-call-fab:hover { background: #000; transform: scale(1.03); }
.est-call-fab svg { width: 3.2rem; height: 3.2rem; flex: 0 0 auto; }
@media (max-width: 767px) {
  .est-call-fab { inset-inline-end: 0; bottom: var(--bp-kb, 0px); width: 9.6rem; border-radius: 0; flex-direction: column; justify-content: center; gap: .4rem;
    min-height: calc(6.8rem + env(safe-area-inset-bottom)); padding: .8rem .6rem calc(.8rem + env(safe-area-inset-bottom)); font-size: 1.3rem; line-height: 1.1;
    white-space: normal; text-align: center; box-shadow: 0 -.6rem 2rem rgba(0,0,0,.3); border-inline-start: 1px solid rgba(255,255,255,.25); }
  .est-call-fab:hover { transform: none; }
  .est-call-fab svg { width: 2.6rem; height: 2.6rem; }
  .est-call-fab + .est-wa-fab { inset-inline-end: 9.6rem; min-height: calc(6.8rem + env(safe-area-inset-bottom)); padding-inline: 1.2rem; font-size: 2rem; gap: 1rem; }
  .est-call-big strong { font-size: 1.9rem; }
}
@media (max-width: 359px) { .est-call-fab + .est-wa-fab { font-size: 1.7rem; gap: .8rem; } .est-call-fab + .est-wa-fab img { width: 3.4rem; height: 3.4rem; } }