/*
 * Minimal shims replacing Elementor's JS-driven behavior with CSS.
 * Visual values come from design/css/ — nothing here overrides those.
 */

/* Elementor Pro "sticky: top" on the nav container (element 5ca1260).
   Live site does this with JS + fixed positioning; position:sticky is
   visually identical (sticky.min.css only contributes z-index:99). */
.js-sticky-header {
    position: sticky;
    top: 0;
    z-index: 99;
}

/* Desktop dropdown ("Our Projects" > "Mara Court"). Elementor Pro uses
   SmartMenus JS; pure CSS hover reproduces the same open/close behavior. */
.elementor-nav-menu--main .menu-item-has-children {
    position: relative;
}
.elementor-nav-menu--main ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    z-index: 100;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
}
.elementor-nav-menu--main .menu-item-has-children:hover > ul.sub-menu,
.elementor-nav-menu--main .menu-item-has-children:focus-within > ul.sub-menu {
    display: block;
}

/* The hidden dropdown clone of the nav menu (used by Elementor for the
   collapsed burger state) stays hidden — the mobile popup replaces it. */
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    display: none;
}

/* Mobile nav popup overlay (Elementor popup 166 on the live site). The
   live design (post-166.css: #elementor-popup-modal-166 background
   rgba(0,0,0,.8), .dialog-message width 300px on mobile, .dialog-widget-
   content background #FFFFFF) is a dark backdrop with a solid white
   drawer docked to the right — our simplified markup never gave the
   drawer its own background, so the dark backdrop's 20% see-through was
   the ONLY thing between the menu text and the page underneath, which
   read as "translucent" instead of a solid panel. */
.site-mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .8);
    display: flex;
    justify-content: flex-end;
}
.site-mobile-menu-overlay[hidden] {
    display: none;
}
/* Elementor's own popup.min.css sets every [data-elementor-type="popup"]
   element to display:none by default — Elementor Pro's JS un-hides it when
   a popup is triggered, but that JS isn't part of this rebuild (we toggle
   our own .site-mobile-menu-overlay wrapper's [hidden] attribute instead).
   Without this override the wrapper opens correctly but its content
   (logo, nav links, "Add a Property", login) stays invisible, leaving only
   the dark backdrop on screen — which is what looked like a broken
   dropdown, but was actually the entire mobile menu never rendering. */
.site-mobile-menu-overlay [data-elementor-type="popup"] {
    display: block !important;
    position: relative;
    background: #fff;
    width: min(300px, 85vw);
    height: 100%;
    overflow-y: auto;
    box-shadow: -2px 0 12px rgba(0, 0, 0, .25);
}
.site-mobile-menu-close {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 10000;
    background: none;
    border: 0;
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}
body.site-mobile-menu-open {
    overflow: hidden;
}

/* Hero background slideshow (Elementor "slideshow" background on the
   homepage hero). Live site runs a Swiper fade; two crossfading layers
   reproduce it: 5s per slide, 500ms fade. */
.site-bg-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.site-bg-slideshow__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    transition: opacity .5s;
}
.site-bg-slideshow__slide.is-active {
    opacity: 1;
}
.site-bg-slideshow__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 44, 58, 0.55), rgba(0, 44, 58, 0.75));
}
.elementor-element-62e8327 > .e-con-inner {
    position: relative;
    z-index: 1;
}

/* Auth popup: validation error / status notes (server round-trip replaces
   Estatik's inline AJAX messages). */
.es-auth__error {
    color: #b30000;
    background: #ffe5e5;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 14px;
    border-radius: 3px;
}
.es-auth__status {
    color: #2f532e;
    background: #d4e9d6;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 14px;
    border-radius: 3px;
}

/* Save/Compare active state (logged-in toggle) — no live logged-in
   reference, so a restrained fill using the site's accent. */
.es-control__form {
    margin: 0;
    display: inline;
}
.es-btn--active,
.es-btn--active:hover {
    background: #004d65;
    border-color: #004d65;
    color: #fff;
}
.es-btn--active .es-icon,
.es-btn--active .es-btn__label {
    color: #fff;
}

/* Account page (logged-in /profile) — layout only; typography/colors come
   from the design CSS via the shared es-* classes. */
.es-account {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}
.es-account__section {
    margin-top: 40px;
}
.es-account__section > h3 {
    margin-bottom: 20px;
}
.es-account__empty {
    color: #706f6f;
}
.es-account__searches {
    list-style: none;
    padding: 0;
    margin: 0;
}
.es-account__searches li {
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
}
.es-account__searches-date {
    color: #9da5ae;
    font-size: 13px;
    margin-left: 8px;
}

/* ---- Account dashboards (buyer / agent) ---- */

/* Full-width teal banner below the site header */
.es-account-banner {
    width: 100%;
    background: #004d65;
    color: #fff;
}
.es-account-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 26px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.es-account-banner__left {
    display: flex;
    align-items: center;
    gap: 18px;
}
.es-account-banner__id {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.es-account-banner__name {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}
.es-account-banner__role {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 10px;
}
.es-account-banner__logout {
    margin: 0;
}
/* Solid white button, teal text — high contrast on the teal banner and
   consistent with the initials avatar. High specificity + !important to
   beat Estatik's broad content-color and button rules. */
.es-account-banner .es-account-banner__logout button.es-btn {
    background: #ffffff !important;
    color: #004d65 !important;
    border: 1px solid #ffffff !important;
    font-weight: 600;
}
.es-account-banner .es-account-banner__logout button.es-btn:hover {
    background: #eaf1f3 !important;
    border-color: #eaf1f3 !important;
    color: #00394b !important;
}
.es-account-banner .es-account-banner__logout button.es-btn .es-icon {
    color: #004d65 !important;
}

/* Circular avatar (photo or brand-color initials) */
.es-avatar {
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Beat the theme/Elementor img resets that flatten border-radius. */
img.es-avatar--photo {
    border-radius: 50%;
    object-fit: cover;
}
.es-avatar--initials {
    background: #fff;
    color: #004d65;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
}
/* On light surfaces (e.g. agent profile form) flip the initials colors. */
.es-account__photo .es-avatar--initials {
    background: #004d65;
    color: #fff;
}

/* Stats strip */
.es-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 28px 0 8px;
}
.es-stat {
    background: #f6f7f8;
    border: 1px solid #e6e8ea;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
}
.es-stat__num {
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 34px;
    line-height: 1;
    color: #004d65;
    font-weight: 600;
}
.es-stat__label {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: #706f6f;
}

/* Tab nav */
.es-account__tabs {
    margin-top: 28px;
}
.es-account__tabnav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid #e6e8ea;
    margin-bottom: 28px;
}
.es-account__tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 12px 18px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 15px;
    color: #706f6f;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.es-account__tab:hover {
    color: #004d65;
}
.es-account__tab.is-active {
    color: #004d65;
    border-bottom-color: #004d65;
    font-weight: 600;
}
.es-account__panel {
    display: none;
}
.es-account__panel.is-active {
    display: block;
}

/* Data tables */
.es-account__table {
    width: 100%;
    border-collapse: collapse;
}
.es-account__table th,
.es-account__table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid #e6e8ea;
    vertical-align: top;
    font-size: 14px;
}
.es-account__table thead th {
    font-family: 'Josefin Sans', sans-serif;
    color: #263238;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.es-account__msg {
    max-width: 320px;
    color: #555;
}
.es-account__thumb-img,
.es-compare-col__img {
    display: block;
    background-size: cover;
    background-position: center;
    background-color: #e9ecef;
    border-radius: 3px;
}
.es-account__thumb-img {
    width: 60px;
    height: 44px;
}
.es-account__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.es-account__actions form {
    margin: 0;
}
.es-account__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.es-account__panel-header h2 {
    margin: 0;
}
.es-account__hint {
    margin-top: 12px;
    font-size: 13px;
    color: #9da5ae;
}
.es-muted {
    color: #9da5ae;
}

/* Status pills */
.es-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    text-transform: capitalize;
}
.es-status--new { background: #fff3cd; color: #7a5900; }
.es-status--read { background: #e2e8f0; color: #33475b; }
.es-status--replied { background: #d4e9d6; color: #2f532e; }
.es-status--published { background: #d4e9d6; color: #2f532e; }
.es-status--draft { background: #e2e8f0; color: #33475b; }
.es-status--pending { background: #fff3cd; color: #7a5900; }
.es-status--confirmed { background: #d4e9d6; color: #2f532e; }
.es-status--cancelled { background: #f8d7da; color: #842029; }
.es-inquiry-row--new td { background: #fffdf5; }

/* Inline "payment details" reveal under a confirmed booking row */
.es-booking-row__pay td {
    padding-top: 0;
    border-top: none;
}
.es-booking-row__details summary {
    cursor: pointer;
    color: #004d65;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 0;
}
.es-booking-row__bank {
    list-style: none;
    padding: 12px 14px;
    margin: 8px 0 4px;
    background: #f6f7f8;
    border-radius: 4px;
    font-size: 14px;
}
.es-booking-row__bank li {
    padding: 3px 0;
}

/* Standalone booking detail page (/bookings/{booking}) */
.es-booking-detail {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}
.es-booking-detail__back {
    display: inline-block;
    margin-bottom: 18px;
    color: #706f6f;
    font-size: 14px;
}
.es-booking-detail > h1 {
    margin: 0 0 6px;
    font-size: 28px;
}
.es-booking-detail__property {
    margin: 0 0 14px;
    color: #555;
}
.es-booking-detail__status {
    display: inline-block;
    margin-bottom: 20px;
}
.es-booking-detail__note {
    margin-top: 24px;
}
.es-booking-detail__pay {
    margin-top: 32px;
}
.es-booking-detail__pay h2 {
    font-size: 20px;
    margin-bottom: 8px;
}
.es-booking-detail__banknote {
    color: #706f6f;
    font-size: 13px;
    margin-top: 10px;
}

/* Saved searches */
.es-account__search-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #e6e8ea;
}
.es-account__search-name {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 15px;
}
.es-account__search-actions {
    display: flex;
    gap: 6px;
}
.es-account__search-actions form {
    margin: 0;
}

/* Compare table */
.es-compare-table__rowhead {
    background: #f6f7f8;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 13px;
    color: #263238;
    width: 140px;
    white-space: nowrap;
}
.es-compare-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 160px;
}
.es-compare-col__img {
    width: 100%;
    height: 100px;
}
.es-compare-col__title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    line-height: 1.25;
}
.es-compare-table td {
    font-size: 13px;
}

/* Stacked forms */
.es-form--stacked .es-field {
    display: block;
    margin-bottom: 16px;
}
.es-form--stacked .es-field__label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #263238;
}
.es-form--stacked .es-field__input {
    width: 100%;
}
.es-field__error {
    display: block;
    color: #b30000;
    font-size: 13px;
    margin-top: 4px;
}
.es-account__forms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 900px;
}
.es-account__form-block h4 {
    margin: 0 0 18px;
}
.es-account__profile-form {
    max-width: 720px;
}
.es-account__photo {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
.es-account__photo-img,
.es-account__photo-placeholder {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    background: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #adb5bd;
    flex: 0 0 auto;
}

.es-save-search {
    margin: 0 0 20px;
}
.es-save-search form {
    margin: 0;
}

@media (max-width: 767px) {
    .es-stats { grid-template-columns: repeat(2, 1fr); }
    .es-account__forms { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- Shortlets archive (booking experience) ---- */
.es-shortlets__intro {
    max-width: 720px;
    color: #555;
    margin-bottom: 28px;
}

/* Hero */
.es-sl-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.es-sl-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 44, 58, 0.55), rgba(0, 44, 58, 0.72));
}
.es-sl-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    padding: 60px 20px 80px;
}
.es-sl-hero__title {
    color: #fff;
    font-size: 44px;
    line-height: 1.1;
    margin: 0 0 14px;
}
.es-sl-hero__sub {
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}

/* Search bar — raised white bar overlapping the hero */
.es-sl-searchbar-wrap {
    max-width: 1040px;
    margin: -44px auto 0;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}
.es-sl-searchbar {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(0, 44, 58, 0.16);
    padding: 16px 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}
.es-sl-searchbar__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 160px;
}
.es-sl-searchbar__field--guests {
    flex: 0 1 110px;
}
.es-sl-searchbar__field label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #706f6f;
}
.es-sl-searchbar__field input {
    border: 1px solid #d7dbdf;
    border-radius: 5px;
    padding: 11px 12px;
    font-size: 15px;
    width: 100%;
    color: #263238;
}
.es-sl-searchbar__submit {
    flex: 0 0 auto;
    white-space: nowrap;
}
.es-sl-searchbar__reset {
    align-self: center;
    color: #706f6f;
    font-size: 14px;
    text-decoration: underline;
}

/* Trust strip */
.es-sl-trust {
    max-width: 1040px;
    margin: 26px auto 0;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.es-sl-trust__item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.es-sl-trust__item svg {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
}
.es-sl-trust__item b {
    display: block;
    font-size: 15px;
    color: #263238;
}
.es-sl-trust__item span {
    display: block;
    font-size: 13px;
    color: #706f6f;
}

/* Results */
.es-sl-results {
    max-width: 1180px;
    margin: 44px auto 0;
    padding: 0 20px;
}
.es-sl-results__count {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    color: #263238;
    margin: 0 0 20px;
}
.es-sl-empty {
    background: #f6f7f8;
    border: 1px dashed #d7dbdf;
    border-radius: 8px;
    padding: 44px 20px;
    text-align: center;
    color: #706f6f;
}

/* Grid — constrained so small result counts don't stretch wide */
.es-sl-grid {
    display: grid;
    gap: 26px;
    margin: 0 auto;
}
.es-sl-grid--1up { grid-template-columns: minmax(0, 380px); max-width: 380px; }
.es-sl-grid--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 800px; }
.es-sl-grid--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Shortlet card */
.es-slcard {
    background: #fff;
    border: 1px solid #e6e8ea;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .18s, transform .18s;
}
.es-slcard:hover {
    box-shadow: 0 10px 26px rgba(0, 44, 58, 0.12);
    transform: translateY(-2px);
}
.es-slcard__media {
    position: relative;
    display: block;
    height: 210px;
    background-size: cover;
    background-position: center;
    background-color: #e9ecef;
}
.es-slcard__price {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #004d65;
    color: #fff;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.es-slcard__per {
    font-weight: 400;
    font-size: 12px;
    opacity: 0.85;
    margin-left: 2px;
}
.es-slcard__body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.es-slcard__title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    line-height: 1.25;
    margin: 0 0 6px;
}
.es-slcard__title a { color: #263238; }
.es-slcard__loc {
    color: #706f6f;
    font-size: 14px;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.es-slcard__facts {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.es-slcard__facts li {
    background: #f1f4f5;
    color: #33475b;
    font-size: 12px;
    padding: 4px 9px;
    border-radius: 4px;
}
.es-slcard__cta {
    margin-top: auto;
    text-align: center;
}

/* How shortlet booking works */
.es-sl-how {
    max-width: 1180px;
    margin: 64px auto 20px;
    padding: 44px 20px;
    text-align: center;
}
.es-sl-how > h2 {
    font-size: 30px;
    margin: 0 0 6px;
    color: #263238;
}
.es-sl-how .elementor-divider {
    max-width: 60px;
    margin: 0 auto 34px;
}
.es-sl-how__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}
.es-sl-step {
    text-align: center;
    padding: 0 8px;
}
.es-sl-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #004d65;
    color: #fff;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
}
.es-sl-step h3 {
    font-size: 18px;
    margin: 0 0 8px;
    color: #263238;
}
.es-sl-step p {
    color: #706f6f;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 900px) {
    .es-sl-trust { grid-template-columns: 1fr; gap: 14px; }
    .es-sl-how__steps { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .es-sl-grid--2up, .es-sl-grid--3up { grid-template-columns: 1fr; max-width: 420px; }
}
@media (max-width: 560px) {
    .es-sl-hero__title { font-size: 32px; }
    .es-sl-searchbar { padding: 14px; }
    .es-sl-how__steps { grid-template-columns: 1fr; }
}

/* Shortlet booking widget (single property page) */
.es-booking {
    border: 1px solid #e6e8ea;
    border-radius: 6px;
    padding: 22px 24px;
    background: #fff;
}
.es-booking__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.es-booking__price .es-price {
    font-size: 26px;
}
.es-booking__per {
    color: #706f6f;
}
.es-booking__facts {
    list-style: none;
    padding: 0;
    margin: 10px 0 18px;
    color: #555;
    font-size: 14px;
}
.es-booking__facts li {
    padding: 2px 0;
}
.es-booking__sep {
    border: none;
    border-top: 1px solid #e6e8ea;
    margin: 18px 0;
}
.es-booking__estimate {
    margin-top: 16px;
    padding: 14px 16px;
    background: #f6f7f8;
    border-radius: 4px;
    font-size: 14px;
}
.es-booking__estimate-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
}
.es-booking__estimate-total {
    border-top: 1px solid #e0e0e0;
    margin-top: 6px;
    padding-top: 8px;
    font-weight: 700;
}
.es-booking__submit {
    width: 100%;
    margin-top: 6px;
}
.es-booking__note {
    text-align: center;
    color: #9da5ae;
    font-size: 12px;
    margin-top: 8px;
}
.es-booking__login-note {
    text-align: center;
    color: #555;
    font-size: 13px;
    margin: 0 0 12px;
}
.es-booking__success {
    background: #d4e9d6;
    color: #2f532e;
    padding: 14px 16px;
    border-radius: 4px;
    margin-bottom: 18px;
    font-size: 14px;
}
.es-booking__success p {
    margin: 6px 0 0;
}

/* ---- Lifestyle module ---- */

/* Archive hero (same treatment as /shortlets) */
.es-lifestyle-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.es-lifestyle-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 44, 58, 0.55), rgba(0, 44, 58, 0.78));
}
.es-lifestyle-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    padding: 50px 20px;
}
.es-lifestyle-hero__title {
    color: #fff;
    font-size: 42px;
    line-height: 1.1;
    margin: 0 0 14px;
}
.es-lifestyle-hero__sub {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 26px;
}
.es-lifestyle-hero__cats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0;
    margin: 0;
}
.es-lifestyle-hero__cats a {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.es-lifestyle-hero__cats a:hover {
    background: rgba(255, 255, 255, 0.15);
}
.es-lifestyle-hero__cats a.is-active {
    background: #fff;
    color: #004d65;
    border-color: #fff;
}

.es-lifestyle-results {
    max-width: 1180px;
    margin: 44px auto 60px;
    padding: 0 20px;
}

/* Single post — breadcrumb bar + large image banner with overlaid title */
.es-lifestyle-post__crumb-bar {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 20px 0;
}
.es-lifestyle-post__banner {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 440px;
    display: flex;
    align-items: flex-end;
    margin-top: 14px;
}
.es-lifestyle-post__banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 44, 58, 0.05) 30%, rgba(0, 20, 26, 0.82));
}
.es-lifestyle-post__banner-inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    padding: 40px 20px;
    width: 100%;
}
.es-lifestyle-post__cat {
    display: inline-block;
    background: #FC6304;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 5px 13px;
    border-radius: 12px;
    text-decoration: none;
    margin-bottom: 14px;
}
.es-lifestyle-post__title {
    color: #fff;
    font-size: 34px;
    line-height: 1.2;
    margin: 0 0 18px;
    max-width: 700px;
}
.es-lifestyle-post__byline {
    display: flex;
    align-items: center;
    gap: 12px;
}
.es-lifestyle-post__byline span {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}
.es-lifestyle-post__byline b {
    color: #fff;
    font-size: 14px;
}

/* Content column */
.es-lifestyle-post__content-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 36px 20px 10px;
}
.es-lifestyle-post__share {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e6e8ea;
}
.es-lifestyle-post__share span {
    font-size: 13px;
    color: #9da5ae;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: 4px;
}
.es-lifestyle-post__share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #d7dbdf;
    transition: border-color .15s, background .15s;
}
.es-lifestyle-post__share a:hover {
    background: #f1f4f5;
    border-color: #004d65;
}
.es-lifestyle-post__share svg {
    width: 16px;
    height: 16px;
}

.es-lifestyle-post__body {
    font-size: 17px;
    line-height: 1.75;
    color: #3d4852;
}
.es-lifestyle-post__body h2 {
    color: #263238;
    font-size: 24px;
    margin: 1.6em 0 .6em;
}
.es-lifestyle-post__body h3 {
    color: #263238;
    font-size: 20px;
    margin: 1.4em 0 .5em;
}
.es-lifestyle-post__body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.6em 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.es-lifestyle-post__body p {
    margin: 0 0 1.3em;
}
/* Lead-in paragraph: the opening line of any post, styled larger/lighter
   so the reading column has an entry point instead of starting flat at
   body size — a standard editorial pattern, applies automatically to
   whatever the first paragraph is, no admin action needed. */
.es-lifestyle-post__body > p:first-of-type {
    font-size: 20px;
    line-height: 1.6;
    color: #263238;
    font-weight: 500;
}
.es-lifestyle-post__body ul,
.es-lifestyle-post__body ol {
    margin: 0 0 1.3em;
    padding-left: 1.3em;
}
.es-lifestyle-post__body li {
    margin-bottom: .4em;
}
.es-lifestyle-post__body blockquote {
    border-left: 3px solid #FC6304;
    background: #f6f7f8;
    margin: 1.8em 0;
    padding: 1em 1.4em;
    border-radius: 0 6px 6px 0;
    color: #263238;
    font-size: 19px;
    font-style: italic;
}
.es-lifestyle-post__body hr {
    border: none;
    border-top: 1px solid #e2e6e8;
    margin: 2.4em 0;
}
.es-lifestyle-post__body a {
    color: #004d65;
    text-decoration: underline;
}

/* Location map — optional, only rendered when a post has a location set. */
.es-lifestyle-post__map {
    margin-top: 2.4em;
    padding-top: 1.8em;
    border-top: 1px solid #e2e6e8;
}
.es-lifestyle-post__map h2 {
    margin: 0 0 .2em;
    font-size: 22px;
    color: #263238;
}
.es-lifestyle-post__map-label {
    margin: 0 0 14px;
    color: #6b7b80;
    font-size: 14px;
}
.es-lifestyle-post__map-embed {
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}
.es-lifestyle-post__map-embed iframe {
    width: 100%;
    height: 320px;
    border: 0;
    display: block;
}
@media (max-width: 767px) {
    .es-lifestyle-post__map-embed iframe {
        height: 240px;
    }
}

/* Related posts — distinct band, separated from the reading column */
.es-lifestyle-related {
    background: #f6f7f8;
    margin-top: 40px;
    padding: 50px 20px 60px;
}
.es-lifestyle-related__inner {
    max-width: 1180px;
    margin: 0 auto;
}
.es-lifestyle-related__inner > h2 {
    font-size: 26px;
    margin: 0 0 6px;
    color: #263238;
}
.es-lifestyle-related .elementor-divider {
    max-width: 60px;
    margin: 0 0 30px;
}

@media (max-width: 767px) {
    .es-lifestyle-hero__title { font-size: 30px; }
    .es-lifestyle-post__banner { min-height: 320px; }
    .es-lifestyle-post__title { font-size: 26px; }
}

/* ---- Nav dropdown caret (About us, Our Projects) ---- */
.elementor-nav-menu__caret {
    width: 9px;
    height: 9px;
    margin-left: 5px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    fill: currentColor;
    transition: transform .2s;
}

/* Separate tap target for the caret (sibling to the label link, not
   nested inside it) — hover/focus-within still opens the submenu for
   mouse users; this button is what makes it reachable by tap, since a
   touchscreen has no hover state and would otherwise just follow the
   label's href. */
.js-nav-submenu-toggle {
    background: none;
    border: none;
    padding: 8px;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: inherit;
    line-height: 0;
}
.menu-item-has-children.is-open > ul.sub-menu {
    display: block;
}
.js-nav-submenu-toggle[aria-expanded="true"] .elementor-nav-menu__caret {
    transform: rotate(180deg);
}

/* Inside the mobile popup's vertical menu, expand the submenu inline
   (indented, part of the normal flow) rather than as the desktop's
   absolute-positioned flyout, which would float disconnected from the
   vertical list. */
.elementor-nav-menu--layout-vertical .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
}
.elementor-nav-menu--layout-vertical .menu-item-has-children > a {
    flex: 1 1 auto;
}
.elementor-nav-menu--layout-vertical ul.sub-menu {
    position: static;
    box-shadow: none;
    background: transparent;
    min-width: 0;
    width: 100%;
    padding-left: 16px;
}

/* Nav now carries 6 top-level items (Shortlets + Lifestyle added since the
   original 5-item live design) — it starts wrapping to two lines around
   1150-1200px, well above Elementor's own mobile cutoff (767px) built into
   this widget. Rather than shrinking text to illegible sizes to squeeze it
   in, switch to the same hamburger overlay already used at mobile widths
   a bit earlier, so there's no in-between "squeezed" state at all. */
@media (max-width: 1200px) {
    .elementor-40 .elementor-element.elementor-element-83f26a4 {
        display: none !important;
    }
    .elementor-40 .elementor-element.elementor-element-6b06938 {
        display: block !important;
    }
}

/* ---- Property/lifestyle card grid on mobile ----
   Estatik's own CSS hard-codes .es-listings--grid-3 to 3 columns with no
   narrower breakpoint at all (confirmed: no max-width media query touches
   this class anywhere in the vendor CSS or the page-specific design CSS).
   On the live site Elementor's runtime JS/CSS handles this; since that
   doesn't run here, below 767px the grid was rendering 3 auto-sized
   columns (e.g. 74px/136px/88px) with card content overlapping instead of
   collapsing to one column. Fixes /listings, /lifestyle and every other
   page sharing this grid class. */
@media (max-width: 767px) {
    .es-listings--grid-3 {
        grid-template-columns: 1fr !important;
    }
}

/* Homepage "Featured Properties" additionally behaves as a one-card-at-
   a-time swipeable carousel on mobile (matching the live site) rather
   than the plain stacked list that's right for a search-results grid —
   scoped to this section only so /listings keeps its stacked layout. */
@media (max-width: 767px) {
    .elementor-element-43ea0ff .es-listings--grid-3 {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding-bottom: 4px;
    }
    .elementor-element-43ea0ff .es-listings--grid-3 > * {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }
}

/* ---- Static content pages (about-us, contact-us, terms, privacy,
   business-associates, our-projects, mara-court) ----
   These weren't built in any earlier phase; the nav/footer already linked
   to them so they 404'd. Simple long-form pages reuse the reading-column
   typography already built for Lifestyle posts (.es-lifestyle-post__body)
   rather than a new type scale. */
.es-static-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 50px 20px 70px;
}
.es-static-page__title {
    font-size: 36px;
    margin: 0 0 24px;
}
.es-static-page__updated {
    color: #6b7b80;
    font-size: 14px;
    margin: -14px 0 30px;
}

/* Our Projects — tab toggle + photo grid. */
.es-projects-intro {
    max-width: 860px;
    margin: 0 auto;
    padding: 50px 20px 0;
}
.es-projects-intro h1 {
    font-size: 36px;
    margin: 0 0 10px;
}
.es-projects-intro__phases {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    color: #004d65;
    font-weight: 600;
    margin: 0 0 10px;
}
.es-projects-gallery {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px 70px;
}
.es-projects-gallery__tabs {
    display: flex;
    gap: 10px;
    margin: 0 0 24px;
    border-bottom: 1px solid #e2e6e8;
}
.es-projects-gallery__tab {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    color: #6b7b80;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
.es-projects-gallery__tab.is-active {
    color: #004d65;
    border-bottom-color: #FC6304;
}
.es-projects-gallery__panel {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.es-projects-gallery__panel.is-active {
    display: grid;
}
.es-projects-gallery__photo {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
}
@media (max-width: 767px) {
    .es-projects-gallery__panel {
        grid-template-columns: 1fr;
    }
}

/* Mara Court project landing page. */
.es-project-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.es-project-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 44, 58, 0.55), rgba(0, 44, 58, 0.75));
}
.es-project-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    padding: 60px 20px 80px;
}
.es-project-hero__title {
    color: #fff;
    font-size: 38px;
    line-height: 1.15;
    margin: 0;
}
.es-project-section {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 20px;
}
.es-project-section h2 {
    font-size: 26px;
    margin: 0 0 16px;
}
.es-project-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
}
.es-project-features li {
    padding-left: 22px;
    position: relative;
}
.es-project-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FC6304;
}
.es-project-phases {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}
.es-project-phase-card {
    background: #f6f7f8;
    border-radius: 10px;
    padding: 20px 24px;
}
.es-project-phase-card h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #004d65;
}
.es-project-phase-card ul {
    margin: 0;
    padding-left: 18px;
}
@media (max-width: 767px) {
    .es-project-features, .es-project-phases {
        grid-template-columns: 1fr;
    }
    .es-project-hero__title {
        font-size: 28px;
    }
}

/* ---- WhatsApp click-to-chat (Creame WhatsApp Me replacement) ---- */
.es-whatsapp {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9998;
}
.es-whatsapp__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
    transition: transform .15s;
}
.es-whatsapp__button:hover {
    transform: scale(1.06);
}
.es-whatsapp__bubble {
    display: none;
    position: absolute;
    right: 0;
    bottom: 68px;
    width: 260px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
    padding: 16px;
}
.es-whatsapp__bubble.is-visible {
    display: block;
}
.es-whatsapp__close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: #9da5ae;
    cursor: pointer;
}
.es-whatsapp__text {
    margin: 0 0 12px;
    font-size: 14px;
    color: #263238;
}
.es-whatsapp__open {
    display: block;
    text-align: center;
    background: #25d366;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 9px;
    border-radius: 6px;
}
@media (max-width: 480px) {
    .es-whatsapp__bubble {
        width: calc(100vw - 40px);
    }
}

/* ---- Cookie consent banner (WPConsent replacement) ---- */
.es-cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: #002c3a;
    box-shadow: 0 -3px 14px rgba(0, 0, 0, .25);
}
.es-cookie-consent[hidden] {
    display: none;
}
.es-cookie-consent__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.es-cookie-consent__text {
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    max-width: 720px;
}
.es-cookie-consent__text a {
    color: #fff;
    text-decoration: underline;
}
.es-cookie-consent__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .es-cookie-consent__inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .es-cookie-consent__actions {
        justify-content: center;
    }
}