/* ============================================================
   MISESSO — GLOBAL MOBILE RESPONSIVE OVERRIDES
   Breakpoints: 1024px / 768px / 575px / 480px
   ============================================================ */

/* ----------------------------------------------------------
   EMPTY LISTINGS STATE (all breakpoints)
   ---------------------------------------------------------- */
.empty-listings-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 80px 24px;
    margin: 20px 0;
    background: #fafafa;
    border: 1px solid #efefef;
    border-radius: 12px;
}
.empty-listings-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #f0f4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
.empty-listings-icon i {
    font-size: 40px;
    color: #4a6cf7;
}
.empty-listings-title {
    font-size: 20px;
    font-weight: 400;
    color: #444;
    margin-bottom: 12px;
}
.empty-listings-body {
    font-size: 15px;
    font-weight: 400;
    color: #888;
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 28px;
}
.empty-listings-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.empty-listings-link {
    font-size: 14px;
    font-weight: 400;
    color: #4a6cf7;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
}
.empty-listings-link:hover { border-bottom-color: #4a6cf7; color: #4a6cf7; }
.empty-listings-link-muted {
    font-size: 14px;
    font-weight: 400;
    color: #aaa;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s, color 0.15s;
}
.empty-listings-link-muted:hover { color: #888; border-bottom-color: #aaa; }

/* ----------------------------------------------------------
   0. HERO — Fix iOS Safari background-attachment:fixed bug
      (fixed attachment renders blank on iOS; force scroll)
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
    .parallax-searchs.home15,
    .parallax-searchs.home15.thome-6,
    .parallax-searchs.thome-1,
    .parallax-searchs.thome-10 {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* ----------------------------------------------------------
   1. GLOBAL RESETS
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; height: auto; }

@media (max-width: 768px) {
    .container-fluid, .container { padding-left: 15px !important; padding-right: 15px !important; }
}

/* ----------------------------------------------------------
   2. NAVIGATION — Both layouts
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    #navigation, nav#navigation { display: none; }
    .mmenu-trigger { display: block !important; }
    #logo img { max-height: 56px; }
    .right-side { display: none !important; }

    /* Logo left, hamburger right */
    #header {
        padding: 12px 0 12px 0 !important;
    }
    #header .container-header {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap;
        padding: 0 15px;
    }
    #header .left-side {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        width: 100% !important;
        float: none !important;
        flex-wrap: nowrap;
    }
    /* Override the absolute-centered logo from menu.css @1024px */
    #header #logo {
        position: static !important;
        width: auto !important;
        text-align: left !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
        float: none !important;
    }
    #header #logo { display: none !important; }
    #header .mmenu-trigger { float: none !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; align-self: center; flex-shrink: 0; }

    /* Hide only the header widget — keep the translation bar so the X close button stays visible */
    #google_translate_element { display: none !important; }

    /* Admin navbar collapse */
    .navbar-collapse { background: #fff; border-top: 1px solid #eee; padding: 10px 0; }
    .navbar-collapse .navbar-nav .nav-link { padding: 10px 16px !important; }

    /* Hide sponsor/feature images from hero — shown as top banner instead */
    .sponsors-wrapper { display: none !important; }
}

/* ----------------------------------------------------------
   3. HOMEPAGE — Hero, sections, carousels
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    /* Hero search — simplified: keyword input + search button only */
    .home-hero-search .rld-banner-tab { display: none !important; }
    .home-hero-search .explore__form-checkbox-list.full-filter { display: none !important; }

    /* Hide property type, city, and advanced search cols */
    .home-hero-search .listing-search-form .row > div:has(> .rld-single-select),
    .home-hero-search .listing-search-form .row > div:has(> .dropdown-filter) {
        display: none !important;
    }

    /* Keyword input + button side by side */
    .home-hero-search .listing-search-form .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px;
        align-items: center;
    }
    .home-hero-search .listing-search-form .row > div:has(> .rld-single-input) {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
    }
    .home-hero-search .listing-search-form .row > div:has(> .btn-yellow) {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
    }

    /* Compact icon-only search button on mobile */
    .home-hero-search .btn.btn-yellow {
        width: auto !important;
        min-width: 48px;
        padding: 12px 14px !important;
        font-size: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    .home-hero-search .btn.btn-yellow::before {
        content: "\f002";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 1rem;
    }

    .banner-search-wrap { padding: 20px 15px; }
    .rld-main-search { height: auto !important; }
    .rld-main-search .row { margin: 0; }
    .rld-main-search [class*="col-"] { padding: 4px 5px !important; }

    /* Partners logos */
    .partners .style2 .owl-item { height: 80px; padding: 10px 15px; }
    .partners .style2 img { width: 130px; height: 60px; }

    /* Testimonials */
    .testimonials { padding: 1.5rem 0 !important; }
    .job_clientSlide .singleJobClinet { padding: 14px 16px !important; }

    /* Section titles */
    .sec-title h2 { font-size: 1.4rem; }

    /* Homepage sponsors */
    .sponsors-wrapper { margin-top: 20px !important; }
    .sponsor-img { height: 120px; }
}

/* ----------------------------------------------------------
   4. LISTING PAGES — For Sale, For Rent, Daily
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    /* Fix the 60px horizontal padding we added */
    .properties-right .container-fluid[style*="padding-left: 60px"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Cards stack to single column */
    .item.col-lg-6.col-md-6 { width: 100% !important; }

    /* Sort / filter bar */
    .pro-wrapper { flex-direction: column; gap: 10px; }
    .cod-pad { flex-direction: column; align-items: flex-start !important; }
    .input-group.border.rounded { width: 100% !important; }
    .sorting-options { margin-top: 8px; }

    /* Aside sidebar goes full width below cards */
    .col-lg-8.blog-pots, aside.col-lg-4.car { width: 100%; max-width: 100%; flex: 0 0 100%; }
}

@media (max-width: 575px) {
    .homes-content h3 a { font-size: 0.95rem; }
    .homes-list li.the-icons span { font-size: 0.8rem; }
    .listing-card-price { font-size: 1rem; }
    .img-card { height: 180px !important; }
}

/* ----------------------------------------------------------
   5. PROPERTY DETAIL PAGE
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .single-property-section .container { padding: 0 12px; }
    .smail-listing .list-inline-item a img { width: 80px !important; height: 55px !important; }
    .property-main-content { padding: 15px; }
    .neaty-maps #map, .single-property #map { height: 250px !important; }
    /* Tabs scroll on mobile */
    .nav.nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .nav.nav-tabs .nav-item { white-space: nowrap; }
}

@media (max-width: 575px) {
    .property-meta span { font-size: 0.78rem; }
    .homes-list.no-ul-list { columns: 1 !important; }
}

/* ----------------------------------------------------------
   6. MAP LIST PAGE
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .map-listing-container { flex-direction: column; }
    #mapid, .leaflet-container { height: 300px !important; }
}

/* ----------------------------------------------------------
   7. ADMIN LAYOUT — Sidebar + Content
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    /* Sidebar full width on tablet/mobile */
    .col-lg-3.user-dash { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0 !important; }
    .col-lg-9.user-dash2 { width: 100%; max-width: 100%; flex: 0 0 100%; margin-left: 0 !important; }
    /* Remove the -40px negative margin on AddProperty content */
    [class*="user-dash2"] { margin-left: 0 !important; }
    .user-page.section-padding { padding: 20px 0; }
    .user-profile-box { margin-bottom: 20px; }
}

@media (max-width: 768px) {
    /* Admin page-title bar */
    .page-titles { font-size: 1.2rem !important; }
    .dash-content-wrap { overflow-x: hidden; }
    /* Admin header logo */
    .db-top-header #logo img { max-height: 32px; }
}

/* ----------------------------------------------------------
   8. ADMIN DATA TABLES
   ---------------------------------------------------------- */
/* Wrap all admin tables in a scroll container */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {
    /* If table is not already wrapped, force scroll */
    .user-page table,
    .dashboard-section table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Tighten table cells */
    .user-page table th,
    .user-page table td { padding: 8px 10px !important; font-size: 0.82rem; }

    /* Table images */
    .user-page table img { width: 50px !important; height: 40px !important; object-fit: cover; }

    /* Action buttons stack better */
    .action-btns, .table-action { display: flex; flex-wrap: wrap; gap: 4px; }
    .action-btns a, .table-action a { padding: 4px 8px; font-size: 0.78rem; }
}

/* ----------------------------------------------------------
   9. ADMIN — ADD PROPERTY / EDIT LISTINGS
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    #map { height: 250px !important; }
    .royal-add-property-area { padding: 15px !important; }
    /* Multi-step tabs */
    .tab-box-container { overflow-x: auto; }
    .step-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .step-tabs .step { white-space: nowrap; min-width: 90px; font-size: 0.8rem; }
    /* Image upload area */
    .add-listings-box { padding: 15px !important; }
    .dropzone { min-height: 100px !important; }
    /* Form inputs full width */
    .add-listings-box .form-group { margin-bottom: 12px; }
    .add-listings-box input, .add-listings-box select, .add-listings-box textarea {
        font-size: 0.9rem;
    }
    /* Opening hours grid collapses */
    .opening-hours .col-md-6 { width: 100%; }
}

/* ----------------------------------------------------------
   10. ADMIN — MY LISTINGS / ALL LISTINGS
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    /* Toggle switch */
    .switch { width: 40px !important; height: 20px !important; }
    .switch .slider:before { width: 14px !important; height: 14px !important; }
}

/* ----------------------------------------------------------
   11. ADMIN — INVOICE
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .invoice-wrap { padding: 15px !important; }
    .invoice-wrap .col-md-6 { width: 100%; }
    .invoice-table { overflow-x: auto; }
    .invoice-table table { white-space: nowrap; }
}

/* ----------------------------------------------------------
   12. ADMIN — USER PROFILE
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    .profile-img { width: 60px !important; height: 60px !important; }
    .edit-profile-photo { flex-direction: column; gap: 10px; }
    .user-profile-box .header { text-align: center; }
}

/* ----------------------------------------------------------
   13. ADMIN — SPONSORS / SPONSORS DETAIL
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .sponsors-table { overflow-x: auto; }
    .sponsors-table table { white-space: nowrap; }
    .sponsor-form-overlay { width: 95vw !important; left: 2.5vw !important; }
}

/* ----------------------------------------------------------
   14. AUTH PAGES — LOGIN / REGISTER
   ---------------------------------------------------------- */
@media (max-width: 600px) {
    .auth-form-card { padding: 0 4px; }
    .auth-fields-grid { grid-template-columns: 1fr !important; }
    .auth-input-group input, .auth-input-group select { font-size: 16px; /* Prevent iOS zoom */ }
    /* Country dropdown panel full width */
    .country-panel { width: 92vw !important; left: 0 !important; }
}

@media (max-width: 480px) {
    .auth-wrap { padding: 24px 12px !important; }
    .auth-form-card .form-header h1 { font-size: 1.3rem; }
}

/* ----------------------------------------------------------
   15. FORGOT / RESET / VERIFY OTP PAGES
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    .lost-password-section, .otp-section { padding: 30px 15px; }
    .lost-password-section .form-group input { font-size: 16px; }
}

/* ----------------------------------------------------------
   16. CONTACT / ABOUT / PRIVACY PAGES
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .contact-info .col-md-4 { margin-bottom: 20px; }
    .headings { height: auto !important; min-height: 120px; padding: 30px 0; }
    .headings h1 { font-size: 1.5rem !important; }
    .headings h2 { font-size: 0.9rem !important; }
    .about-section .col-md-6 { margin-bottom: 20px; }
}

/* ----------------------------------------------------------
   17. TOUCH TARGETS — Minimum 44×44px for tap areas
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .btn, button, a.btn, input[type="submit"], input[type="button"] {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .nav-link { min-height: 44px; display: flex !important; align-items: center; }
    .go-up { width: 44px !important; height: 44px !important; }
}

/* ----------------------------------------------------------
   18. FOOTER
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .second-footer .container { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
    .second-footer .netsocials { justify-content: center; }
    .first-footer .top-footer { padding: 3rem 0 !important; }
    .first-footer .col-lg-3, .first-footer .col-md-6 { margin-bottom: 24px; }
}

/* ----------------------------------------------------------
   19. UTILITY — General small screen cleanup
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.1rem !important; }
    .section-padding { padding: 30px 0 !important; }
    .pt-5 { padding-top: 20px !important; }
    .pb-55, .pb-5 { padding-bottom: 20px !important; }
    /* Prevent long words overflowing */
    p, td, th, li, span { word-break: break-word; }
    /* Make select/input readable without iOS zoom (needs 16px) */
    select, input[type="text"], input[type="email"],
    input[type="password"], input[type="number"], textarea {
        font-size: 16px !important;
    }
}

/* ----------------------------------------------------------
   20. LISTING PAGES — Fix 60px desktop padding on mobile
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .listing-container-pad {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* ----------------------------------------------------------
   21. PROPERTY DETAIL — Thumbnail images & map
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    /* Thumbnail strip: let images fill their cells */
    .smail-listing .list-inline-item a img,
    .property-gallery-small img {
        width: 100% !important;
        height: auto !important;
        max-height: 70px;
        object-fit: cover;
    }
    /* Contact/location map image */
    .contact-map img,
    #map-contact img {
        width: 100% !important;
        height: 220px !important;
        object-fit: cover;
    }
    /* Property main image */
    .property-main-img img { width: 100%; height: auto; }
}

/* ----------------------------------------------------------
   22. HERO — Mobile-specific fill adjustments
   ---------------------------------------------------------- */
/* Ensure hero fills viewport on iOS (dynamic viewport units) */
@supports (height: 100dvh) {
    .parallax-searchs.home15,
    .parallax-searchs.home15.thome-6,
    .parallax-searchs.thome-1 {
        height: 100dvh !important;
    }
}

@media (max-width: 575px) {
    /* Sponsor strip: reduce thumbnail height on phones */
    .hero-sponsor-thumb img { height: 56px; }
    .hero-sponsor-label { font-size: 9px; margin-bottom: 8px; }
}

/* ----------------------------------------------------------
   23. FOOTER — Responsive text wrapping
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    .second-footer .container-fluid.sd-f {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding: 12px 15px !important;
    }
    .second-footer .netsocials {
        justify-content: center;
        padding: 0;
        margin-top: 6px;
    }
    .second-footer p { margin: 0 !important; }
}

/* ----------------------------------------------------------
   24. ABOUT PAGE — Image responsive
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .w50 { width: 100% !important; max-width: 100% !important; }
    .about-section img { width: 100%; height: auto; }
}

/* ----------------------------------------------------------
   25. SINGLE PROPERTY — Carousel & form
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    /* Contact form sidebar goes full width */
    .single-property aside.col-lg-4 { width: 100%; flex: 0 0 100%; max-width: 100%; }
    /* Carousel slide images */
    .item.carousel-item img { height: 240px !important; object-fit: cover; }
    /* Video embed */
    .embed-responsive { width: 100% !important; }
}

/* ----------------------------------------------------------
   26. HERO — Content vertical positioning on small phones
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    /* Push hero content down enough so it clears the sticky header */
    .parallax-searchs.home15.thome-6 .hero-inner {
        padding-top: 100px !important;
        padding-bottom: 120px !important;
    }
    /* Tighten sponsor strip so it doesn't overlap search pill */
    .hero-sponsor-strip {
        padding-top: 18px !important;
    }
    /* Sponsor carousel: 2 visible at once on smallest screens */
    .hero-sponsor-thumb img {
        height: 56px !important;
    }
}

/* ----------------------------------------------------------
   27. HEADER — User avatar dropdown on mobile
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    /* Avatar dropdown: show on right side even on mobile */
    .header-user-menu.user-menu.add {
        display: flex !important;
        align-items: center;
        margin-left: auto;
        margin-right: 8px;
        float: none !important;
    }
    .header-user-menu .header-user-name {
        cursor: pointer;
    }
    /* Dropdown list stays on-screen */
    .header-user-menu ul {
        right: 0 !important;
        left: auto !important;
        min-width: 180px;
    }
}

/* ----------------------------------------------------------
   28. LISTING PAGES — Card grid single column on phone
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    /* Each card takes full row width */
    .col-lg-6.col-md-6.col-sm-6,
    .col-lg-6.col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    /* Card image consistent height */
    .homes-img img {
        height: 200px;
        object-fit: cover;
        width: 100%;
    }
    /* Price tag readable */
    .homes-price span {
        font-size: 14px !important;
    }
}

/* ----------------------------------------------------------
   29. MAP LIST — Sidebar + map stacked on mobile
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    /* Sidebar listing panel takes full width above map */
    .col-lg-4.blog-pots.map-side,
    .properties-right.map-listing-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        max-height: 50vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Map panel full width below sidebar */
    .col-lg-8.map-right-side,
    #mapid, .leaflet-container {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ----------------------------------------------------------
   30. PROPERTY DETAIL — Amenities list
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    .homes-list.no-ul-list.feat li {
        width: 50% !important;
        font-size: 0.82rem;
    }
    /* Agent contact card full width */
    .agent-contact-card,
    .widget.featured-property { margin-bottom: 20px; }
}

/* ----------------------------------------------------------
   31. ADMIN LOGIN / REGISTER — Full-width form on phone
   ---------------------------------------------------------- */
@media (max-width: 575px) {
    .login-page .col-lg-5,
    .login-page .col-md-7,
    .register-page .col-lg-6,
    .register-page .col-md-8 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 12px !important;
    }
    .login-box, .register-box {
        padding: 24px 16px !important;
        border-radius: 10px;
    }
}

/* ----------------------------------------------------------
   32. GLOBAL — Prevent horizontal overflow on all pages
   ---------------------------------------------------------- */
/* body: clips horizontal overflow without creating a new scroll container.
   Never set overflow on html alone — it would transfer scroll to html
   and kill page scrolling. */
body {
    overflow-x: hidden;
}

@media (max-width: 991px) {
    /* Bootstrap .row has -15px side margins that bleed 30px past the viewport.
       Zeroing them only inside containers is the targeted fix — avoids
       breaking any row that genuinely needs the negative-margin gutter. */
    .container > .row,
    .container-fluid > .row {
        margin-left: 0;
        margin-right: 0;
    }
    .container > .row > [class*="col-"],
    .container-fluid > .row > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Hard cap on all block-level containers */
    .container, .container-fluid {
        max-width: 100vw;
    }

    /* Media elements must never exceed their container */
    img, video, iframe {
        max-width: 100% !important;
        height: auto;
    }

    /* Tables get a scroll wrapper rather than overflowing */
    table {
        max-width: 100%;
    }

    /* Map divs — catch any remaining hardcoded-width map containers */
    .contact-map > div,
    #property-map > div,
    #map > div {
        width: 100% !important;
    }
}