/* ==========================================================================
   LIZY REALTY — MOBILE NAVIGATION, PROPERTY FILTERS, VIEW MORE, BANNER FIT
   One consolidated stylesheet — each selector is defined exactly once to
   avoid the conflicting overrides that come from patching this file in
   multiple separate passes. Loaded after every other stylesheet.
   ========================================================================== */

/* ---- Hamburger toggle (mobile only) ---- */
.lizyNavToggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 72, 63, .14);
  border-radius: 50%;
  background: #fff;
  color: #00483f;
  font-size: 20px;
  cursor: pointer;
  flex: 0 0 auto;
}

/* ---- Shared backdrop for the drawer and the filter panel ---- */
.lizyMobileOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(9, 20, 17, .45);
  z-index: 1200;
  opacity: 0;
  transition: opacity .25s ease;
}
.lizyMobileOverlay.is-open { display: block; opacity: 1; }

/* ---- Off-canvas drawer (top sheet with the main nav links) ---- */
.lizyMobileDrawer {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  bottom: auto;
  max-height: 88vh;
  background: #fff;
  z-index: 1205;
  transform: translateY(-105%);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
  overflow-y: auto;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
.lizyMobileDrawer.is-open { transform: translateY(0); }

.lizyMobileDrawerHead {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: #00483f;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}
.lizyMobileDrawerClose {
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lizyMobileDrawerNav { display: flex; flex-direction: column; }
.lizyMobileDrawerNav a {
  display: block;
  padding: 16px 20px;
  color: #1d2430;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.lizyMobileDrawerNav a.active { color: #00483f; background: #f3f8f6; }

body.lizy-no-scroll { overflow: hidden; }

/* ---- Property nav row (category pills + arrows + Filters button) ----
   Hidden/inert building blocks that only take shape on mobile below. */
.lizyQuickFilterBtn { display: none !important; }
.lizyPropertyNavArrow, .lizyPropertyFiltersBtn { display: none; }
.lizyPropertyMoreRow { display: none; }

/* ==========================================================================
   MOBILE ONLY (≤767px)
   ========================================================================== */
@media (max-width: 767px) {

  /* --- Top bar: logo left, hamburger right, everything else hidden --- */
  .lizyNavToggle { display: flex; }
  .lizyStoreNav { display: none !important; }
  .lizyStoreTop {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    position: relative !important;
  }
  .lizyStoreLogo { flex: 0 0 auto; }
  .lizyStoreLogo img { max-width: 145px; height: auto; }
  .lizyStoreSearch { display: none !important; }
  .lizyStoreActions { display: none !important; }

  /* --- Property nav row: category pills + prev/next + Filters button,
     all in a single row (matches the reference layout) --- */
  .lizyMobilePropertyNav {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 0 14px !important;
  }
  .lizyMobilePropertyNav .prop-type-pills {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 3px 0 !important;
    scroll-behavior: smooth;
  }
  .lizyMobilePropertyNav .prop-type-pills::-webkit-scrollbar { display: none; }
  .lizyMobilePropertyNav .prop-type-pill {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 14px !important;
    font-size: 0.78rem !important;
    gap: 5px !important;
  }

  /* Arrows removed: the pills scroll by touch/swipe on their own, which
     is cleaner than cluttering the row with prev/next buttons. */
  .lizyPropertyNavArrow { display: none !important; }
  /* Clear "Filter" text button (icon + label) - replaces the old
     three-dot icon button. */
  .lizyPropertyFiltersBtn {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    height: 40px;
    padding: 0 18px;
    gap: 8px;
    border: 1.5px solid #00483f;
    border-radius: 999px;
    background: #fff;
    color: #00483f;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    cursor: pointer;
  }
  .lizyPropertyFiltersBtn i { font-size: 15px; line-height: 1; }
  .lizyPropertyFiltersBtn[aria-expanded="true"] {
    background: #00483f;
    color: #fff;
    border-color: #00483f;
  }

  /* The Filter button sits on its own row directly under the category
     pills, at the right edge, separate from the pills row above it. */
  .lizyPropertyMoreRow {
    display: flex !important;
    justify-content: flex-end;
    width: 100%;
    margin: 0 0 14px !important;
  }

  /* --- Filter panel: expands inline, directly under the nav row. It is
     never a fixed overlay - so it can't fight with the floating call/
     WhatsApp buttons or cover the page. --- */
  .prop-filter-bar {
    display: none !important;
    position: relative !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 0 18px !important;
    padding: 18px 16px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid rgba(0, 72, 63, .1) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1) !important;
    z-index: 1 !important;
  }
  .prop-filter-bar.is-open {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .prop-filter-bar > .prop-filter-field,
  .prop-filter-bar > .prop-filter-budget,
  .prop-filter-bar > .prop-filter-reset {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Crisper, higher-contrast fields - the site-wide filter styling uses a
     near-invisible border (8% opacity) that reads as "blurry" on a small
     screen; give mobile fields a solid, clearly visible outline instead. */
  .prop-filter-bar.is-open .prop-filter-field label {
    color: #16241f !important;
    font-weight: 700 !important;
  }
  .prop-filter-bar.is-open .prop-filter-field input,
  .prop-filter-bar.is-open .prop-filter-field select {
    border: 1.5px solid #c7d1cd !important;
    background: #fff !important;
    color: #16241f !important;
  }
  .prop-filter-bar.is-open .prop-filter-field input:focus,
  .prop-filter-bar.is-open .prop-filter-field select:focus {
    border-color: #00483f !important;
  }
  /* Keep the floating call/WhatsApp/back-to-top buttons out of the way
     while the drawer or filter panel is open (they're normally visible
     otherwise - see the reference-matched styling further down). */
  body.lizy-no-scroll .float,
  body.lizy-no-scroll .float-2,
  body.lizy-no-scroll .back-to-top {
    display: none !important;
  }

  /* Banner carousel: no nav arrows on mobile (unrelated request kept). */
  .lizyHomeShowcaseCarousel .owl-nav { display: none !important; }

  /* Call / WhatsApp: kept as the original floating circular buttons,
     stacked bottom-left (call above WhatsApp), matching the reference. */
  .float, .float-2 {
    width: 54px !important;
    height: 54px !important;
    font-size: 26px !important;
  }
  .float { bottom: 96px !important; left: 16px !important; }
  .float-2 { bottom: 32px !important; left: 16px !important; }
  .my-float { margin-top: 13px !important; }
}

/* ==========================================================================
   PROPERTY LIST - "View More" control
   Sits centred directly under the property cards (created by
   js/properties.js). On the Home page it is a link to the Properties page;
   on the Properties / category pages it is a button that reveals more cards.
   ========================================================================== */
.prop-view-more-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 34px 0 6px;
}
.prop-view-more-wrap[hidden] { display: none !important; }
.prop-view-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 200px;
  padding: 14px 34px;
  border: 0;
  border-radius: 999px;
  background: #00483f;
  color: #fff !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(0, 72, 63, .22);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.prop-view-more-btn:hover,
.prop-view-more-btn:focus-visible {
  background: #d6ad2c;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(214, 173, 44, .32);
}
@media (max-width: 767px) {
  .prop-view-more-wrap { margin: 24px 0 4px; }
  .prop-view-more-btn { width: 100%; min-width: 0; }
}

/* ==========================================================================
   PROPERTY LIST - numbered pagination (Properties page only)
   Same wrapper slot as "View More" above, swapped for a
   Previous / 1 2 3 / Next control - 10 properties per page.
   ========================================================================== */
.prop-pagination-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 34px 0 6px;
}
.prop-pagination-wrap[hidden] { display: none !important; }
.prop-pagination-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.prop-page-item { display: flex; }
.prop-page-item.ellipsis {
  align-items: center;
  padding: 0 6px;
  color: #6c757d;
  font-weight: 700;
}
.prop-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #e2ddce;
  border-radius: 999px;
  background: #fff;
  color: #00483f;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.prop-page-link:hover:not(:disabled),
.prop-page-link:focus-visible:not(:disabled) {
  background: #d6ad2c;
  border-color: #d6ad2c;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(214, 173, 44, .28);
}
.prop-page-item.active .prop-page-link {
  background: #00483f;
  border-color: #00483f;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 72, 63, .22);
}
.prop-page-item.disabled .prop-page-link {
  opacity: .4;
  cursor: default;
  transform: none;
  box-shadow: none;
}
@media (max-width: 480px) {
  .prop-page-link { min-width: 38px; height: 38px; padding: 0 10px; font-size: 13px; }
  .prop-pagination-list { gap: 6px; }
}

/* ==========================================================================
   HOME - quick category tiles: highlight the one that is currently
   filtering the property list below (Land / Apartment / House / All).
   ========================================================================== */
.lizyQuickCategory.is-active .lizyQuickImage {
  border-color: #d6ad2c !important;
  box-shadow: 0 0 0 4px rgba(214, 173, 44, .20), 0 6px 16px rgba(0, 72, 63, .14) !important;
}
.lizyQuickCategory.is-active strong { color: #00483f !important; }

/* ==========================================================================
   HOME BANNER - premium vertical poster cards
   Each banner is shown as its own promotional poster inside a clean white
   frame: thin elegant border, soft shadow, rounded corners. The full banner
   image sits centred inside with object-fit: contain, so it is never
   cropped, stretched, or squashed - the complete original image and its
   aspect ratio are always preserved. No blurred duplicate background - the
   image itself is the entire design.

   The card uses a fixed PORTRAIT aspect-ratio (rather than the old fixed
   landscape height) because these banners are portrait/square marketing
   posters - that's what keeps every card equal-sized (a uniform grid) while
   actually suiting the shape of the content, instead of forcing a tall
   image into a wide box. index.html groups 3 cards per slide on desktop, 2
   on tablet, 1 on mobile (see currentGroupSize()); this flexbox layout
   splits the row evenly for whatever count is actually in each group, so no
   separate width rule is needed per breakpoint.
   ========================================================================== */
/* HOME BANNER SIZE - matches the approved sample (2026-09-23):
   wide 2:1 landscape cards, 3 per slide on desktop / 2 tablet / 1 mobile,
   the image fills the whole card edge to edge (centre-cropped, never
   stretched). Banners are still 100% dynamic from Lizy Admin. */
.lizy-home .lizyHomeShowcase .lizyHomeShowcaseCarousel .lizyHomeBannerGroup {
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 16px !important;
  box-sizing: border-box !important;
}

.lizy-home .lizyHomeShowcase .lizyHomeShowcaseCarousel .lizyHomeImageCard {
  flex: 1 1 0 !important;
  width: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 2 / 1 !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  background: #e8eeeb !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(16, 30, 26, .10) !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
}

.lizy-home .lizyHomeShowcase .lizyHomeShowcaseCarousel .lizyHomeImageCard:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 32px rgba(16, 30, 26, .16) !important;
}

.lizy-home .lizyHomeShowcase .lizyHomeShowcaseCarousel .lizyHomeImageCard img {
  position: static !important;
  inset: auto !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  transition: transform .45s ease !important;
}

.lizy-home .lizyHomeShowcase .lizyHomeShowcaseCarousel .lizyHomeImageCard:hover img {
  transform: scale(1.04) !important;
  filter: none !important;
}

.lizy-home .lizyHomeShowcase .lizyHomeShowcaseCarousel .lizyHomeImageArrow {
  z-index: 3 !important;
}

@media (max-width: 767px) {
  .lizy-home .lizyHomeShowcase .lizyHomeShowcaseCarousel .lizyHomeBannerGroup {
    gap: 0 !important;
  }

  .lizy-home .lizyHomeShowcase .lizyHomeShowcaseCarousel .lizyHomeImageCard {
    border-radius: 12px !important;
  }
}

/* ==========================================================================
   HOME BANNER - "no banner images yet" placeholder card.
   ========================================================================== */
.lizy-home .lizyHomeShowcase .lizyHomeShowcaseCarousel .lizyHomeImageCard--empty {
  background: #f8f7f3 !important;
}

.lizy-home .lizyHomeShowcase .lizyHomeShowcaseCarousel .lizyHomeImageCard--empty img {
  opacity: .8;

}

/* ==========================================================================
   PROPERTY GRID - tablet width
   style-3.css switches the card grid to a single column at max-width 768px,
   which makes iPad-portrait (exactly 768px) show one very wide column.
   Keep 2 columns from 768px up to 991px; phones (<=767px) stay 1 column.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
  .prop-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   HOME BANNER - "no banner images yet" placeholder card.
   Shown only when Lizy Admin has no Banner Image uploaded in any category
   (or can't be reached) - see index.html. Same box/fit rules as a real
   banner card apply automatically; this just mutes it slightly so it
   reads as "nothing uploaded yet" rather than a broken photo.
   ========================================================================== */
.lizy-home .lizyHomeShowcase .lizyHomeShowcaseCarousel .lizyHomeImageCard--empty {
  background: #f8f7f3 !important;
}
.lizy-home .lizyHomeShowcase .lizyHomeShowcaseCarousel .lizyHomeImageCard--empty img {
  opacity: .8;
  
}