/* ─── eKhaya Mobile-First Override Sheet ─────────────────────────
   Loaded after style.css. All rules here either:
   1. Apply unconditionally (base defaults tuned for mobile)
   2. Are scoped to max-width breakpoints
   ─────────────────────────────────────────────────────────────── */

/* ── Root & Typography ──────────────────────────────────────── */
:root {
  --ek-navy: #102661;
  --ek-red:  #cc1119;
  --ek-dark: #0d1e4a;
}

html { font-size: 16px; } /* Prevent iOS auto-zoom on inputs */

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

/* ── Inputs — prevent iOS zoom (font-size must be ≥16px) ───── */
input, select, textarea {
  font-size: 16px !important;
  -webkit-appearance: none;
  border-radius: 0;
}

/* ── Tap target minimum ─────────────────────────────────────── */
a, button, [role="button"],
.tf-btn, .nav-link, .box-agent a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ── Header ─────────────────────────────────────────────────── */
#header {
  position: sticky !important;
  top: 0;
  z-index: 999;
  background: #fff;
  box-shadow: 0 2px 12px rgba(21,45,110,.08);
}

.header-lower {
  padding: 0 16px;
}

.inner-container {
  min-height: 60px;
}

/* Compact logo on mobile */
@media (max-width: 767px) {
  .logo img { max-height: 36px !important; }
  .inner-container { min-height: 56px; }

  /* Hide desktop nav on mobile */
  .nav-outer { display: none !important; }

  /* Compact header account buttons */
  .header-account .flat-bt-top { display: none; }

  /* Show mobile hamburger clearly */
  .mobile-nav-toggler { display: flex !important; align-items: center; }
  .mobile-nav-toggler .ti { font-size: 1.5rem; color: var(--ek-navy); }

  /* Full-width mobile menu */
  .menu-box { width: 88vw !important; max-width: 340px; }
}

/* ── Hero / Banner sections ─────────────────────────────────── */
@media (max-width: 767px) {
  /* Homepage hero */
  .flat-slider,
  [class*="hero"],
  section[style*="linear-gradient"] {
    padding: 48px 16px 40px !important;
  }

  .flat-slider h1,
  .flat-slider h2,
  section[style*="linear-gradient"] h1,
  section[style*="linear-gradient"] h2 {
    font-size: 1.65rem !important;
    line-height: 1.25 !important;
  }

  /* Search box full-width on mobile */
  .flat-search-box,
  .box-search-v1,
  [class*="search-box"] {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  .flat-search-box .form-group,
  .box-search-v1 .form-group {
    width: 100% !important;
  }

  .tf-search-btn, .btn-search {
    width: 100%;
    margin-top: 10px;
    justify-content: center;
  }
}

/* ── Property Cards ─────────────────────────────────────────── */
@media (max-width: 575px) {
  /* Full-width single-column on phone */
  .row-cols-1, .row-cols-sm-2, .row-cols-md-3 {
    --bs-columns: 1 !important;
  }

  .box-property, .property-item, .flat-property {
    border-radius: 14px !important;
    overflow: hidden;
  }

  /* Bigger tap area on card image */
  .box-img img {
    min-height: 200px;
    object-fit: cover;
    width: 100%;
  }

  /* Price badge visibility */
  .price-wrap, .box-price {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
  }
}

/* ── Filters bar ────────────────────────────────────────────── */
@media (max-width: 767px) {
  .flat-filter-property,
  .listing-filter,
  [class*="filter-wrap"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .flat-filter-property::-webkit-scrollbar { display: none; }

  .flat-filter-property .item,
  .listing-filter .item {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ── Forms (Login / Register / Property) ───────────────────── */
@media (max-width: 767px) {
  .flat-content-wrap,
  .account-content,
  [class*="form-wrap"] {
    padding: 0 16px 40px !important;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 13px 14px !important;
    border-radius: 10px !important;
  }

  /* Full-width submit buttons */
  [type="submit"], .btn-primary, .tf-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Listing detail page ────────────────────────────────────── */
@media (max-width: 767px) {
  /* Gallery: full-width */
  .gallery-slider, .flat-gallery {
    border-radius: 0 !important;
    margin: 0 -16px;
  }

  /* Sticky bottom CTA bar */
  .sticky-cta-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    padding: 12px 16px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.1);
    z-index: 998;
    display: flex;
    gap: 10px;
  }

  .sticky-cta-bar a {
    flex: 1;
    justify-content: center;
    border-radius: 10px;
    font-weight: 700;
    font-size: .95rem;
  }

  /* Push content above sticky bar */
  body.has-sticky-cta { padding-bottom: 80px; }

  /* Detail sidebar → below content on mobile */
  .sidebar-right, .col-lg-4.sidebar {
    margin-top: 24px;
  }
}

/* ── Footer ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  footer .row > [class*="col-"] {
    margin-bottom: 28px;
  }

  footer .widget-title {
    font-size: 1rem !important;
    margin-bottom: 12px !important;
  }

  footer {
    padding-bottom: 80px; /* space for WhatsApp FAB */
  }
}

/* ── WhatsApp Floating Button ───────────────────────────────── */
.ek-whatsapp-fab {
  position: fixed;
  bottom: 20px;
  right: 18px;
  z-index: 9997;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  text-decoration: none;
  transition: transform .2s;
  min-height: unset !important;
}

.ek-whatsapp-fab:hover { transform: scale(1.08); }
.ek-whatsapp-fab svg { width: 30px; height: 30px; fill: #fff; }

/* ── Breadcrumb ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .flat-title-page,
  [class*="breadcrumb-wrap"] {
    padding: 28px 16px !important;
  }

  .flat-title-page h1,
  .flat-title-page h2 {
    font-size: 1.4rem !important;
  }
}

/* ── Pagination ─────────────────────────────────────────────── */
@media (max-width: 575px) {
  .pagination { flex-wrap: wrap; gap: 4px; }
  .page-item .page-link { min-width: 40px; height: 40px; font-size: .9rem; }
}

/* ── Agent cards on mobile ──────────────────────────────────── */
@media (max-width: 575px) {
  .box-agent {
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
  }

  .box-agent .box-img {
    width: 110px !important;
    min-width: 110px !important;
    aspect-ratio: 1/1 !important;
  }
}

/* ── Pricing page ───────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Stack pricing cards */
  [style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Modal (payment / auth) ─────────────────────────────────── */
@media (max-width: 767px) {
  .modal-dialog {
    margin: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }

  .modal-content {
    border-radius: 18px !important;
  }

  .modal-body {
    padding: 20px 16px !important;
  }
}

/* ── Loading performance: lazy images ───────────────────────── */
img[loading="lazy"] {
  content-visibility: auto;
}

/* ── Utility: hide on mobile ────────────────────────────────── */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* ── Standard Mobile Spacing Scale ──────────────────────────────
   One consistent rhythm everywhere on phones:
   sections 40px, blocks 24px, cards 16px, gutters 16px.
   ─────────────────────────────────────────────────────────────── */
:root {
  --ek-space-section: 40px;  /* between page sections        */
  --ek-space-block:   24px;  /* between blocks in a section  */
  --ek-space-card:    16px;  /* inside cards / widget boxes  */
  --ek-gutter:        16px;  /* screen edge gutter           */
}

@media (max-width: 767px) {
  /* Consistent edge gutter */
  .container,
  .container-fluid {
    padding-left: var(--ek-gutter) !important;
    padding-right: var(--ek-gutter) !important;
  }

  /* All large section paddings collapse to the standard */
  .flat-section,
  .flat-section-v2,
  .flat-section-v3,
  .flat-section-v4,
  .flat-section-v5,
  .flat-section-v6,
  .flat-section-v7 {
    padding: var(--ek-space-section) 0 !important;
  }

  /* Page title / breadcrumb band — compact, no dead space */
  .flat-title-page,
  .flat-title-page.style-2 {
    padding: 20px 0 !important;
  }

  .flat-title-page .page-title {
    font-size: 1.5rem !important;
    margin-top: 4px !important;
  }

  .flat-title-page .breadcrumb {
    margin-bottom: 0 !important;
    font-size: .8rem;
  }

  /* Section heading blocks — uniform gap below */
  .box-title,
  .heading-section,
  .box-title-relatest {
    margin-bottom: var(--ek-space-block) !important;
  }

  .box-title .title,
  .heading-section .title {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
  }

  .box-title .text-subtitle,
  .heading-section .text-subtitle {
    font-size: .8rem !important;
  }

  /* Cards & widget boxes — uniform inner padding and stacking gap */
  .widget-box,
  .single-property-contact,
  .widget-box-single,
  .homeya-box .archive-bottom,
  .box-location,
  .box-benefit {
    padding: var(--ek-space-card) !important;
    margin-bottom: var(--ek-space-card) !important;
  }

  /* Grid/row vertical rhythm between stacked columns */
  .row > [class*="col-"]:not(:last-child) {
    margin-bottom: 0;
  }

  .flat-section .row > [class*="col-"],
  .flat-section-v3 .row > [class*="col-"],
  .flat-section-v6 .row > [class*="col-"] {
    margin-bottom: var(--ek-space-card);
  }

  .flat-section .row > [class*="col-"]:last-child,
  .flat-section-v3 .row > [class*="col-"]:last-child,
  .flat-section-v6 .row > [class*="col-"]:last-child {
    margin-bottom: 0;
  }

  /* Auth pages (login/register) — pull the card up, kill dead space */
  .mobile-signin-wrapper,
  .flat-account {
    padding: var(--ek-space-block) var(--ek-gutter) !important;
    margin-top: 0 !important;
    min-height: unset !important;
  }

  /* Forms — consistent field spacing */
  .form-group,
  .ip-group {
    margin-bottom: 14px !important;
  }

  fieldset {
    margin-bottom: 0 !important;
  }

  /* Buttons — consistent height */
  .tf-btn {
    padding: 13px 20px !important;
  }

  /* Kill oversized top/bottom margins commonly used inline */
  .mt-5 { margin-top: var(--ek-space-block) !important; }
  .mb-5 { margin-bottom: var(--ek-space-block) !important; }
  .py-5 { padding-top: var(--ek-space-block) !important; padding-bottom: var(--ek-space-block) !important; }
}

/* Small phones — slightly tighter */
@media (max-width: 390px) {
  :root {
    --ek-space-section: 32px;
    --ek-space-block: 20px;
  }
}