/*
 * Shims replacing Elementor's JS-driven behavior with CSS, plus (below,
 * in the "Visual polish" section) a deliberate refinement pass on top of
 * design/css/ — same layout/structure/brand colors, softer edges, richer
 * depth, smoother interaction. Everything else in this file still leaves
 * design/css/ values alone.
 */

/* ============================================================
   VISUAL POLISH — redesign pass, same structure/colors as before.
   Tokens first, then the shared elements they apply to (cards,
   buttons, images). Brand colors unchanged: teal #004d65, orange
   #FC6304 — this section only touches radius/shadow/motion/type.
   ============================================================ */
:root {
    --es-radius-sm: 6px;
    --es-radius-md: 10px;
    --es-radius-lg: 16px;
    --es-shadow-sm: 0 1px 3px rgba(8, 8, 56, 0.08), 0 1px 2px rgba(8, 8, 56, 0.06);
    --es-shadow-md: 0 6px 20px rgba(8, 8, 56, 0.10), 0 2px 6px rgba(8, 8, 56, 0.06);
    --es-shadow-lg: 0 16px 40px rgba(8, 8, 56, 0.14), 0 4px 12px rgba(8, 8, 56, 0.08);
    --es-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Property/lifestyle cards: soften corners, add real depth with a
   hover-lift, and let the image round with the card instead of
   stopping abruptly at a sharp edge. */
.es-listing {
    border-radius: var(--es-radius-md);
    overflow: hidden;
    box-shadow: var(--es-shadow-sm);
    transition: box-shadow .25s var(--es-ease), transform .25s var(--es-ease);
}
.es-listing:hover {
    box-shadow: var(--es-shadow-md);
    transform: translateY(-3px);
}
.es-listing__image__background {
    transition: transform .4s var(--es-ease);
}
.es-listing:hover .es-listing__image__background {
    transform: scale(1.04);
}
.es-listing__title {
    font-size: 18px !important;
    line-height: 1.35 !important;
}
.es-listing__title a {
    transition: color .15s var(--es-ease);
}

/* Buttons: consistent rounding + a smooth hover instead of an instant
   color swap, on every button variant the site actually uses. */
.es-btn {
    border-radius: var(--es-radius-sm) !important;
    transition: background-color .2s var(--es-ease), border-color .2s var(--es-ease),
        color .2s var(--es-ease), box-shadow .2s var(--es-ease), transform .15s var(--es-ease);
}
.es-btn--primary {
    box-shadow: 0 2px 8px rgba(252, 99, 4, 0.25);
}
.es-btn--primary:hover {
    box-shadow: 0 4px 14px rgba(252, 99, 4, 0.35);
    transform: translateY(-1px);
}
.elementor-button {
    border-radius: var(--es-radius-sm) !important;
    transition: background-color .2s var(--es-ease), box-shadow .2s var(--es-ease), transform .15s var(--es-ease);
}
.elementor-button:hover {
    transform: translateY(-1px);
}

/* Section headings: a touch more breathing room under the divider,
   consistent everywhere a heading + divider pair introduces a section. */
.elementor-divider-separator {
    transition: width .3s var(--es-ease);
}

/* Any plain content image (about-us, lifestyle body, static pages)
   gets the same soft rounding as cards — a small thing that reads as
   "designed" rather than "default" once it's consistent everywhere. */
.elementor-widget-image img,
.es-lifestyle-post__body img {
    border-radius: var(--es-radius-md);
    box-shadow: var(--es-shadow-sm);
}

/* ---- Homepage polish ---- */

/* Hero headline: push the existing 40px/700 headline further (52px) and
   add a soft text-shadow so it stays crisp against a bright hero photo
   even where the new darker overlay is thinnest. Eyebrow line above it
   gets a little letter-spacing for a more deliberate, premium feel —
   still the same words, same white color, same position. */
.elementor-element-31ab62e .elementor-heading-title {
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 16px !important;
}
.elementor-element-ded56bd .elementor-heading-title {
    font-size: 52px !important;
    line-height: 1.15 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
@media (max-width: 767px) {
    .elementor-element-ded56bd .elementor-heading-title {
        font-size: 32px !important;
    }
}

/* Property card price: was the same weight/size as everything else on
   the card, easy to miss. Bigger and in the brand orange so the number
   that actually matters is the first thing that catches the eye. */
.es-price {
    display: block;
    font-size: 21px !important;
    line-height: 1.3 !important;
    color: #FC6304 !important;
    margin: 2px 0 4px !important;
}

/* Hero search: currently a flat gray input floating directly on the
   hero photo with no visual boundary. Give the whole form a raised
   white card so it reads as a deliberate "search box," not a stray
   form field — same elevated-search-bar idea already used on
   /shortlets, brought to the homepage hero for consistency.
   /listings uses the same background-slideshow hero + es-search
   widget markup (just a different #id), so it gets the same card. */
#es-search--home,
#es-search--listings {
    background: #fff;
    border-radius: var(--es-radius-lg);
    box-shadow: var(--es-shadow-lg);
    padding: 8px;
}
#es-search--home .es-field__address,
#es-search--listings .es-field__address {
    display: flex;
    align-items: center;
}
#es-search--home .js-es-address,
#es-search--listings .js-es-address {
    background: transparent !important;
    padding: 14px 16px !important;
}
#es-search--home .es-btn--icon,
#es-search--listings .es-btn--icon {
    border-radius: var(--es-radius-md) !important;
    margin: 4px;
}

/* Icon boxes ("Why choose us", "How to Book"): bare icon + text with no
   visual container. A soft circular badge behind each icon gives them
   a finished, "designed" feel instead of looking like unstyled defaults. */
.elementor-icon-box-icon {
    background: rgba(252, 99, 4, 0.08);
    border-radius: 50%;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .25s var(--es-ease), transform .25s var(--es-ease);
}
.elementor-icon-box-icon svg {
    width: 34px;
    height: 34px;
}
.elementor-icon-box-wrapper:hover .elementor-icon-box-icon {
    background: rgba(252, 99, 4, 0.16);
    transform: scale(1.06);
}

/* 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;
    /* Deeper + darker than the original polish pass — closer to the
       design's own intended navy overlay (#080838, never applied because
       it targeted Elementor's native slideshow markup, which our custom
       .site-bg-slideshow replaced) while keeping the brand teal tone.
       Stronger contrast makes the headline pop instead of blending into
       a bright hero photo. */
    background: linear-gradient(180deg, rgba(0, 15, 30, 0.62), rgba(0, 30, 45, 0.82));
}
.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;
    /* Matches the strengthened hero overlay used elsewhere (homepage,
       lifestyle, Mara Court) for consistency. */
    background: linear-gradient(180deg, rgba(0, 15, 30, 0.62), rgba(0, 30, 45, 0.82));
}
.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 — same radius/shadow/hover-lift tokens as .es-listing
   so shortlets and regular listings read as one card system. */
.es-slcard {
    background: #fff;
    border: 1px solid #e6e8ea;
    border-radius: var(--es-radius-md);
    box-shadow: var(--es-shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s var(--es-ease), transform .25s var(--es-ease);
}
.es-slcard:hover {
    box-shadow: var(--es-shadow-lg);
    transform: translateY(-4px);
}
.es-slcard__media {
    position: relative;
    display: block;
    height: 210px;
    background-size: cover;
    background-position: center;
    background-color: #e9ecef;
    transition: transform .35s var(--es-ease);
}
.es-slcard:hover .es-slcard__media {
    transform: scale(1.04);
}
.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: var(--es-radius-md);
    box-shadow: var(--es-shadow-sm);
    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;
    /* Matches the strengthened homepage hero overlay for consistency. */
    background: linear-gradient(180deg, rgba(0, 15, 30, 0.62), rgba(0, 30, 45, 0.82));
}
.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;
    /* !important: Estatik's own [class^="es-"] a:not(.es-btn)... reset
       (border:0) has higher specificity than this selector and was
       silently stripping the pill outline — confirmed via computed
       styles, not a hypothetical. */
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s var(--es-ease), color .15s var(--es-ease), border-color .15s var(--es-ease);
}
.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 !important;
}

.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;
}
/* Posts with "visit this place" details get a wider two-column layout —
   article on the left, contact/directions card on the right — instead of
   the single narrow reading column plain articles use. */
.es-lifestyle-post__content-wrap--venue {
    max-width: 1140px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: 44px;
}
.es-lifestyle-post__main {
    min-width: 0;
}
@media (max-width: 900px) {
    .es-lifestyle-post__content-wrap--venue {
        grid-template-columns: 1fr;
        gap: 0;
    }
}
.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;
}

/* Soft tinted backdrop behind the reading column so the white body card
   (below) has something to sit on instead of floating on flat white. */
.es-lifestyle-post__main {
    background: linear-gradient(180deg, #FFF7ED 0%, #FFF7ED 220px, transparent 220px);
}
.es-lifestyle-post__body {
    font-size: 17px;
    line-height: 1.75;
    color: #3d4852;
    background: #fff;
    border-radius: var(--es-radius-md);
    box-shadow: var(--es-shadow-sm);
    padding: 36px 40px;
}
.es-lifestyle-post__body h2 {
    color: #080838;
    font-size: 24px;
    margin: 1.6em 0 .6em;
    padding-left: 16px;
    border-left: 4px solid #FC6304;
}
.es-lifestyle-post__body h2:first-child {
    margin-top: 0;
}
.es-lifestyle-post__body h3 {
    color: #080838;
    font-size: 20px;
    margin: 1.4em 0 .5em;
}
.es-lifestyle-post__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--es-radius-md);
    margin: 1.6em 0;
    box-shadow: var(--es-shadow-md);
}
.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: 0;
}
.es-lifestyle-post__body li {
    margin-bottom: .6em;
}
/* Bulleted lists get a small orange check icon instead of a plain dot —
   list-style is dropped in favor of a positioned ::before icon so the
   check can be full color regardless of text color / browser defaults. */
.es-lifestyle-post__body ul {
    list-style: none;
}
.es-lifestyle-post__body ul li {
    position: relative;
    padding-left: 30px;
}
.es-lifestyle-post__body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .15em;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23FC6304'/%3E%3Cpath d='M7 12.3l3.2 3.2L17 8.8' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
/* Numbered lists keep real numbers (::marker) but in brand orange, bold. */
.es-lifestyle-post__body ol {
    padding-left: 1.4em;
}
.es-lifestyle-post__body ol li::marker {
    color: #FC6304;
    font-weight: 700;
}
.es-lifestyle-post__body blockquote {
    border-left: 3px solid #FC6304;
    background: #FFF7ED;
    margin: 1.8em 0;
    padding: 1em 1.4em;
    border-radius: 0 var(--es-radius-sm) var(--es-radius-sm) 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;
}

/* "Visit this place" venue card — contact/directions info for
   restaurant/attraction-style lifestyle posts, sits alongside the
   article (see .es-lifestyle-post__content-wrap--venue above). */
.es-lifestyle-venue {
    background: #FFF7ED;
    border-radius: var(--es-radius-md);
    box-shadow: var(--es-shadow-sm);
    overflow: hidden;
    padding: 24px;
    position: sticky;
    top: 20px;
}
.es-lifestyle-venue__title {
    margin: 0 0 16px;
    font-size: 20px;
    color: #080838;
}
.es-lifestyle-venue__facts {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.es-lifestyle-venue__fact {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #3d4852;
}
.es-lifestyle-venue__fact a {
    color: #004d65;
    text-decoration: none;
}
.es-lifestyle-venue__fact a:hover {
    text-decoration: underline;
}
.es-lifestyle-venue__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -1px;
}
.es-lifestyle-venue__icon svg {
    width: 20px;
    height: 20px;
}
.es-lifestyle-venue__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.es-lifestyle-venue__actions .es-btn {
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
}
.es-lifestyle-venue__map {
    line-height: 0;
    margin: 0 -24px -24px;
    border-top: 1px solid rgba(8, 8, 56, 0.08);
}
.es-lifestyle-venue__map iframe {
    width: 100%;
    height: 220px;
    border: 0;
    display: block;
}
@media (max-width: 900px) {
    .es-lifestyle-venue {
        position: static;
        margin-top: 32px;
    }
}

/* 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;
    }
}

/* Estatik's vendor CSS sizes .es-properties__list for its desktop 2-column
   layout (listings + map side by side): width:100% plus margin:0 15px,
   which is correct there because a sibling column shares the flex row.
   On mobile that sibling isn't in the row, so width:100% claims the full
   flex container and the 15px margins push it past the edge — causing
   the page to scroll sideways (seen on the homepage's "View All
   Properties" button, which lives in this same flex item). Subtracting
   the margin from the width keeps it inset like everything else. */
@media (max-width: 767px) {
    .es-properties__list {
        width: calc(100% - 30px) !important;
    }
}

/* ---- 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 — real nested-tabs + Swiper image-carousel (matching the
   live site's actual widget), not a custom grid. Neither post-492.css
   nor widget-image-carousel.min.css sets an explicit slide-image height,
   so it's defined here — without it, images render at unpredictable
   natural size and Swiper's slide-width math never settles (see the
   observer:true comment in our-projects.blade.php for the JS half of
   this fix). */
.js-projects-carousel .swiper-slide-image {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: var(--es-radius-md);
    box-shadow: var(--es-shadow-sm);
}
@media (max-width: 767px) {
    .js-projects-carousel .swiper-slide-image {
        height: 220px;
    }
}
/* The tab panels carry Elementor's own e-flex/e-con container classes,
   which set display:flex with normal class specificity — that beats the
   browser's built-in [hidden]{display:none} UA rule (lowest priority by
   definition), so setting the hidden attribute in JS was doing nothing
   visually: both panels stayed flex and rendered stacked, "Uncompleted"
   just sitting first in DOM order and appearing to "win". Force it. */
.js-projects-tabs [role="tabpanel"][hidden] {
    display: none !important;
}
.e-n-tab-title {
    cursor: pointer;
}
@media (max-width: 767px) {
    .es-projects-gallery__panel {
        grid-template-columns: 1fr;
    }
}

/* Mara Court project landing page (real elementor-1011 markup, post-1011.css). */
.elementor-1011 .elementor-element.elementor-element-de333c5:not(.elementor-motion-effects-element-type-background) {
    /* post-1011.css points this at the old adefeyproperties.com upload path; point it at our local copy instead. */
    background-image: url('/images/home/mara-court.jpg');
}

/* Terms & Conditions / Privacy Policy hero (real elementor-412/418 markup, shared background photo). */
.elementor-412 .elementor-element.elementor-element-f281b13:not(.elementor-motion-effects-element-type-background),
.elementor-418 .elementor-element.elementor-element-8cebe56:not(.elementor-motion-effects-element-type-background) {
    background-image: url('/images/static/legal-hero.jpg');
}
/* Elementor Pro's own TOC widget JS sets --toc-body-max-height on open/close;
   without it the body has no explicit height to transition, so drive
   visibility with [hidden] instead (toggled in the page's own script). */
.elementor-widget-table-of-contents .elementor-toc__body[hidden] {
    display: none !important;
}

/* ---- 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;
    }
}

/* ---- Property single page polish ---- */
/* Gallery carousel: post-139.css already sets an explicit height
   (design's own custom CSS block) so sizing is fine as-is — this just
   adds rounded corners to match the radius used on cards/images
   elsewhere. !important needed: post-139's own "img{height:...}" rule
   is more specific than a plain class selector would be. */
.elementor-element-98100f7 .swiper-slide-image {
    border-radius: var(--es-radius-md) !important;
}

/* ---- AJAX listings refresh (sort/filter/pagination — site.js) ---- */
.js-es-listings__wrap-inner.is-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity .15s var(--es-ease);
}
/* Price heading in the property header — plain elementor-heading-title
   by default, same orange treatment as .es-price everywhere else. */
.elementor-element-aa5cb39 .elementor-heading-title {
    color: #FC6304;
}