/* ============================================================
   MOBILE STYLESHEET — RentHouse
   Loaded with media="screen and (max-width: 768px)"
   Matches approved mockup exactly
   ============================================================ */

/* ===== GLOBAL ===== */
* { -webkit-tap-highlight-color: transparent; }
html { overscroll-behavior-y: contain; }
html, body { overflow-x: hidden; max-width: 100vw; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
body { padding-bottom: 64px; background: #f8fafc; }
.container, .container-xl, .container-lg { padding-left: 16px; padding-right: 16px; }

/* ===== HIDE DESKTOP NAVBAR ===== */
#main-navbar { display: none; }

/* ===== HERO SECTION — White, app-style ===== */
.hero-section {
    background: #ffffff !important;
    background-image: none !important;
    min-height: unset !important;
    height: auto !important;
    padding: 20px 16px 16px !important;
}
.hero-section::before, .hero-section::after { display: none !important; }
.hero-section .hero-bg-pattern { display: none !important; }
.hero-section .container { max-width: 100% !important; padding: 0 !important; position: static !important; }
.hero-section .text-center { text-align: left !important; }

/* Logo — top-left, large */
.mobile-hero-logo {
    display: block !important;
    position: static !important;
    height: 42px !important;
    width: auto !important;
    filter: none !important;
    margin: 0 !important;
}

/* Hero text */
.hero-section h1 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: left !important;
    margin: 0 0 6px !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
    animation: none !important;
}
.hero-section h1 .hero-accent { color: #1564E3 !important; font-style: normal !important; }
.hero-section .hero-subtitle {
    color: #64748b !important;
    font-size: 13px !important;
    text-align: left !important;
    margin-bottom: 14px !important;
    line-height: 1.4 !important;
    animation: none !important;
    opacity: 1 !important;
}

/* Hide trust text */
.hero-section .animate-fadeInUp.animate-delay-3 { display: none !important; }

/* Hide desktop search */
.hero-section .d-none.d-md-block { display: none !important; }

/* ===== SEARCH TABS (For Rent / For Sale → Rent/Buy/PG/Commercial) ===== */
.hero-search-tabs {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}
.hero-search-tab {
    flex: 1 !important;
    padding: 9px 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #fff !important;
    color: #64748b !important;
}
.hero-search-tab.active {
    background: #1564E3 !important;
    color: #fff !important;
    border-color: #1564E3 !important;
}

/* ===== CITY SELECTOR — Compact pill ===== */
#hero-city-btn-m {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    padding: 7px 12px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    width: auto !important;
}
#hero-city-btn-m i.fa-map-marker-alt { color: #1564E3 !important; font-size: 12px !important; }
#hero-city-label-m { font-size: 13px !important; font-weight: 600 !important; color: #1e293b !important; flex: unset !important; }
#hero-city-btn-m i.fa-chevron-down { color: #94a3b8 !important; font-size: 9px !important; }

/* ===== MOBILE SEARCH FORM ===== */
.hero-section .d-block.d-md-none > div {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
#hero-search-input-m {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 8px 50px 8px 38px !important;
    height: 42px !important;
    font-size: 13px !important;
}
/* Search button — circular icon */
#hero-search-btn-m {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 0 !important;
    box-shadow: 0 2px 8px rgba(21, 100, 227, 0.3) !important;
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
#hero-search-btn-m i { font-size: 15px !important; margin: 0 !important; color: #fff !important; }
/* Make search input parent relative */
.hero-section .d-block.d-md-none > div > div:has(#hero-search-input-m) {
    position: relative !important;
}

/* Reorder: City above tabs */
.hero-section .d-block.d-md-none > div > #hero-city-btn-m { order: -2 !important; }
.hero-section .d-block.d-md-none > div > .hero-search-tabs { display: none !important; }
.hero-search-wrapper > .hero-search-tabs { display: flex !important; }

/* ===== SEARCH WRAPPER ===== */
.hero-search-wrapper { margin-top: 0 !important; max-width: 100% !important; animation: none !important; }

/* ===== SECTION HEADERS ===== */
.oak-section-header, .oak-listings-header { text-align: left !important; }
.oak-section-title { font-size: 17px !important; font-weight: 800 !important; text-align: left !important; }
.oak-section-label, .oak-section-subtitle { display: none !important; }

/* ===== POPULAR CITIES — Circular scroll ===== */
.oak-neighborhoods-grid {
    display: flex !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    padding: 12px 16px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
}
.oak-neighborhoods-grid::-webkit-scrollbar { display: none !important; }
.oak-neighborhood-card {
    flex-shrink: 0 !important;
    width: 68px !important;
    height: auto !important;
    border-radius: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    background: transparent !important;
}
.oak-neighborhood-card img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2.5px solid #e2e8f0 !important;
}
.oak-neighborhood-card .overlay { display: none !important; }
.oak-neighborhood-card .info {
    position: static !important;
    text-align: center !important;
    padding: 0 !important;
    background: none !important;
}
.oak-neighborhood-card .info h4 {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    margin: 0 !important;
    text-shadow: none !important;
}
.oak-neighborhood-card .info .badge {
    font-size: 9px !important;
    color: #94a3b8 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* ===== RECENT PROPERTIES — Status-style vertical cards ===== */
#recent-property-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    gap: 10px !important;
    padding: 0 16px 12px !important;
}
#recent-property-grid::-webkit-scrollbar { display: none !important; }
#recent-property-grid .b-card {
    flex-shrink: 0 !important;
    width: 130px !important;
    height: 200px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    position: relative !important;
    scroll-snap-align: start !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
#recent-property-grid .b-card__img {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
}
#recent-property-grid .b-card__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
#recent-property-grid .b-card__overlay {
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    padding: 40px 10px 10px !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
}
#recent-property-grid .b-card__body { display: none !important; }
#recent-property-grid .b-card__price { font-size: 14px !important; font-weight: 800 !important; color: #fff !important; }
#recent-property-grid .b-card__price span { font-size: 10px !important; opacity: 0.85 !important; }
#recent-property-grid .b-card__deposit-overlay { font-size: 9px !important; color: rgba(255,255,255,0.8) !important; }
#recent-property-grid .b-card__badge { top: 8px !important; left: 8px !important; padding: 3px 7px !important; font-size: 8px !important; border-radius: 5px !important; }
#recent-property-grid .b-card__heart { display: none !important; }

/* ===== FEATURED PROPERTIES — List card style ===== */
#featured-property-grid .col-12 { padding: 0 !important; }
#featured-property-grid .lc-card {
    flex-direction: row !important;
    border-radius: 14px !important;
    max-height: 130px !important;
    overflow: hidden !important;
}
#featured-property-grid .lc-card__image {
    width: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
    max-height: 130px !important;
}
#featured-property-grid .lc-card__content {
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
}

/* ===== QUICK ACTIONS (Services grid) ===== */
#mobile-quick-actions-section { padding: 12px 0 !important; }
.mobile-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 0 16px;
}
.mobile-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
}
.mobile-quick-action:active { transform: scale(0.92); }
.mobile-quick-action__icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.mobile-quick-action__icon--blue { background: #eff6ff; color: #1564E3; }
.mobile-quick-action__icon--green { background: #ecfdf5; color: #059669; }
.mobile-quick-action__icon--purple { background: #f5f3ff; color: #7c3aed; }
.mobile-quick-action__icon--orange { background: #fff7ed; color: #ea580c; }
.mobile-quick-action__title { font-size: 10px; font-weight: 600; color: #475569; text-align: center; line-height: 1.2; }
.mobile-quick-action__desc { display: none; }

/* ===== RECENTLY VIEWED ===== */
#home-recently-viewed-section .recently-viewed-scroll {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding: 0 16px 16px !important;
    scrollbar-width: none !important;
}
#home-recently-viewed-section .recently-viewed-scroll::-webkit-scrollbar { display: none !important; }

/* ===== BOTTOM TAB BAR ===== */
.mobile-bottom-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #ffffff;
    height: 58px;
    border-top: none;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-bottom-tabs a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #9ca3af;
    font-size: 9.5px;
    font-weight: 600;
    gap: 3px;
    padding: 6px 0;
    flex: 1;
    position: relative;
}
.mobile-bottom-tabs a i { font-size: 19px; }
.mobile-bottom-tabs a.active { color: #1564E3; }
.mobile-bottom-tabs a.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: #1564E3;
    border-radius: 0 0 3px 3px;
}

/* ===== HIDE DESKTOP-ONLY SECTIONS ===== */
.oak-section:has(.oak-hiw-grid) { display: none !important; }
.oak-about-split { display: none !important; }
.oak-section:has(.oak-about-split) { display: none !important; }

/* ===== SECTIONS PADDING ===== */
.oak-section { padding: 16px 0; }

/* ===== FOOTER ===== */
footer { padding: 24px 16px 80px; }

/* ===== SAFE AREA ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .mobile-bottom-tabs { padding-bottom: env(safe-area-inset-bottom); }
}

/* ============================================================
   PROPERTIES PAGE — MOBILE STYLES
   ============================================================ */

/* ===== PROPERTIES PAGE — Hide duplicate header elements ===== */
.props-header-row2,
.view-toggle-btns,
.props-header-actions {
    display: none !important;
}
.near-me-btn {
    display: none !important;
}

/* Properties page title - compact */
.props-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 0 !important;
}

/* Mobile search bar in properties page */


.mobile-props-search .search-wrap {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
    padding: 10px 14px !important;
}
.mobile-props-search .search-wrap input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-size: 14px !important;
    width: 100% !important;
    color: #374151 !important;
}
.mobile-props-search .search-wrap i {
    color: #9ca3af !important;
    font-size: 14px !important;
}
.mobile-props-search .filter-toggle-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #374151 !important;
    font-size: 16px !important;
    cursor: pointer !important;
}

/* ===== FILTER CHIPS ROW ===== */
.mobile-filter-chips {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
}
.mobile-filter-chips::-webkit-scrollbar { display: none !important; }
.filter-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 11px !important;
    border-radius: 18px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
    background: #ffffff !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.2s !important;
}
.filter-chip--active {
    background: #1564E3 !important;
    color: #ffffff !important;
    border-color: #1564E3 !important;
    font-weight: 600 !important;
}
.filter-chip i {
    font-size: 9px !important;
}

/* ===== VIEW TOGGLE (mobile - in chips row) ===== */


/* ===== PROPERTY GRID — 2 Column ===== */
#property-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    overflow: hidden !important;
}
#property-grid > .col-12.boosted-divider-wrap {
    grid-column: 1 / -1 !important;
}
#property-grid > .property-card-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
}
#property-grid .grid-card-view {
    height: 100% !important;
    min-width: 0 !important;
}
#property-grid .grid-card-view .b-card {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
}

/* List view - single column */
#property-grid.list-view {
    grid-template-columns: 1fr !important;
}

/* ===== FILTER DRAWER — BOTTOM SHEET ===== */
.filter-drawer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.filter-drawer-overlay.show {
    display: block;
    opacity: 1;
}
.col-lg-3.mb-4:has(.filter-sidebar) {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-height: 85vh !important;
    z-index: 10000 !important;
    background: #fff !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 16px 16px !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
}
.col-lg-3.mb-4:has(.filter-sidebar).filter-drawer-open {
    transform: translateY(0) !important;
}

/* Filter sidebar header inside drawer */
.filter-sidebar {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.filter-sidebar-header {
    position: sticky !important;
    top: 0 !important;
    background: #fff !important;
    z-index: 10 !important;
    padding: 16px 0 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.filter-close-btn {
    display: block !important;
    font-size: 24px !important;
    color: #64748b !important;
    cursor: pointer !important;
}

/* Filter body scrollable */
.col-lg-3.mb-4:has(.filter-sidebar) .filter-body {
    overflow-y: auto !important;
    max-height: calc(85vh - 130px) !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Filter apply button */
.filter-apply-btn {
    border-radius: 10px !important;
    padding: 14px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: #1564E3 !important;
    border: none !important;
    color: #fff !important;
    width: 100% !important;
}

/* Hide the Location/search section inside filter drawer */
#property-search-form > .filter-section:first-child {
    display: none !important;
}

/* ===== PROPERTIES PAGE — Remove top padding ===== */
.container-xl.py-4 {
    padding-top: 8px !important;
}

/* ===== QUICK FILTER CHIPS (desktop) — hide on mobile ===== */
.quick-filter-chips.d-none.d-md-flex {
    display: none !important;
}

/* ===== PROPERTIES COUNT ===== */
.props-count {
    display: none !important;
}

/* ===== B-CARD sizing for properties page grid ===== */
#property-grid .b-card {
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
#property-grid .b-card__img { aspect-ratio: 3/2; }
#property-grid .b-card__price { font-size: 16px; }
#property-grid .b-card__price span { font-size: 10px; }
#property-grid .b-card__title-row .b-card__title { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#property-grid .b-card__loc { font-size: 10px; }
#property-grid .b-card__chip { font-size: 9px; padding: 3px 7px; }
#property-grid .b-card__footer { padding-top: 6px; }
#property-grid .b-card__avatar, #property-grid .b-card__avatar-init { width: 20px; height: 20px; font-size: 8px; }
#property-grid .b-card__name { font-size: 9px; }
#property-grid .b-card__time { font-size: 8px; }

/* ===== PROPERTIES PAGE — Filter Button Styling ===== */
.filter-toggle-btn-inline {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #fff !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.filter-toggle-btn-inline i {
    font-size: 14px !important;
    color: #1564E3 !important;
}

/* ===== MOBILE CHIPS WRAPPER — Chips + View Toggle in same row ===== */
.mobile-chips-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
}
.mobile-chips-wrapper::-webkit-scrollbar { display: none !important; }

.filter-chips-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}
.filter-chips-row::-webkit-scrollbar { display: none !important; }

/* ===== FILTER CHIP — Proper styling (no button-inside-button) ===== */
.filter-chips-row .filter-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #374151 !important;
    background: #ffffff !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.2s !important;
}
.filter-chips-row .filter-chip:active {
    transform: scale(0.95) !important;
}
.filter-chips-row .filter-chip--active {
    background: #1564E3 !important;
    color: #ffffff !important;
    border-color: #1564E3 !important;
    font-weight: 600 !important;
}
.filter-chips-row .filter-chip i {
    font-size: 11px !important;
}


/* ===== VIEW TOGGLE — Inline with chips ===== */
.view-toggle-btns-mobile {
    display: inline-flex !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}
.view-toggle-btn-m {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #fff !important;
    color: #9ca3af !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    cursor: pointer !important;
}
.view-toggle-btn-m.active {
    background: #1564E3 !important;
    color: #fff !important;
    border-color: #1564E3 !important;
}

/* ===== MOBILE SEARCH + FILTER ROW ===== */
.mobile-props-search {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 0 !important;
}

/* ===== FIX: Nearby chip button — match other chips exactly ===== */
#nearby-chip-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #374151 !important;
    background: #ffffff !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-family: inherit !important;
    line-height: 1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
}
#nearby-chip-btn.filter-chip--active {
    background: #1564E3 !important;
    color: #ffffff !important;
    border-color: #1564E3 !important;
    font-weight: 600 !important;
}

/* ===== FIX: Reset the span styling inside mobile filter chips ===== */
.filter-chips-row .filter-chip span,
#nearby-chip-btn span {
    display: inline !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    transition: none !important;
    white-space: nowrap !important;
}