/* ===================================================
   HOUSE HUNTING PLATFORM
   MODERN RESPONSIVE UI
=================================================== */

:root {
    --primary: #123458;
    --primary-dark: #0d2743;
    --primary-light: #2d5f8f;
    --secondary: #10b981;
    --secondary-dark: #059669;
    --accent: #06b6d4;

    --ink: #0f1b2b;
    --bg: #f4f7fb;
    --sky: #eaf2fb;
    --surface: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;

    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;

    --border: #e5e7eb;

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
    --shadow-lg: 0 15px 35px rgba(0,0,0,0.12);

    --radius: 14px;
    --transition: all 0.3s ease;

    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* ====================================
   HEADER
==================================== */

.main-header{
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    padding: 16px 5%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:100;
    transition:box-shadow 0.25s ease;
}

.main-header.scrolled{
    box-shadow:var(--shadow-md);
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo img{
    height:60px;
    width:auto;
}

.logo h2{
    margin:0;
    font-size:2rem;
    font-weight:700;
    color:#1f3556;
}

.top-nav{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.nav-btn{
    border:none;
    cursor:pointer;
    background:#eef3f8;
    color:var(--primary);
    padding:10px 18px;
    border-radius:10px;
    font-weight:600;
    transition:var(--transition);
}

.nav-btn:hover{
    background:var(--primary);
    color:#fff;
}

.nav-icon-btn{
    padding:10px 14px;
    position:relative;
}

.nav-badge{
    position:absolute;
    top:2px;
    right:2px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:999px;
    background:#e11d48;
    color:#fff;
    font-size:10px;
    font-weight:700;
    line-height:16px;
    text-align:center;
}

/* ---- Hamburger toggle (hidden on desktop; shown at mobile breakpoint) ---- */
.nav-hamburger-btn{
    display:none;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border:none;
    border-radius:10px;
    background:#eef3f8;
    color:var(--primary);
    font-size:17px;
    cursor:pointer;
    transition:var(--transition);
}

.nav-hamburger-btn:hover{
    background:var(--primary);
    color:#fff;
}

/* ---- Nav groups: exactly one is visible at a time, swapped via
   body[data-view]. display:contents means the group adds no extra
   box — its buttons behave as direct children of .top-nav, so the
   existing .top-nav/.nav-btn/hamburger CSS needs no changes. ---- */
.nav-group{
    display:none;
}

.nav-group-global{
    display:contents;
}

body[data-view="tenant"] .nav-group-global,
body[data-view="saved"] .nav-group-global,
body[data-view="tenantDashboard"] .nav-group-global,
body[data-view="tenantSavedHouses"] .nav-group-global,
body[data-view="tenantMyViewings"] .nav-group-global,
body[data-view="tenantProfile"] .nav-group-global,
body[data-view="tenantSettings"] .nav-group-global,
body[data-view="tenantManageAccount"] .nav-group-global,
body[data-view="tenantNotifications"] .nav-group-global,
body[data-view="tenantPlaceholder"] .nav-group-global,
body[data-view="landlord"] .nav-group-global,
body[data-view="landlordProfile"] .nav-group-global,
body[data-view="landlordManageAccount"] .nav-group-global,
body[data-view="landlordNotifications"] .nav-group-global{
    display:none;
}

body[data-view="tenant"] .nav-group-tenant,
body[data-view="saved"] .nav-group-tenant,
body[data-view="tenantDashboard"] .nav-group-tenant,
body[data-view="tenantSavedHouses"] .nav-group-tenant,
body[data-view="tenantMyViewings"] .nav-group-tenant,
body[data-view="tenantProfile"] .nav-group-tenant,
body[data-view="tenantSettings"] .nav-group-tenant,
body[data-view="tenantManageAccount"] .nav-group-tenant,
body[data-view="tenantNotifications"] .nav-group-tenant,
body[data-view="tenantPlaceholder"] .nav-group-tenant{
    display:contents;
}

body[data-view="landlord"] .nav-group-landlord,
body[data-view="landlordProfile"] .nav-group-landlord,
body[data-view="landlordManageAccount"] .nav-group-landlord,
body[data-view="landlordNotifications"] .nav-group-landlord{
    display:contents;
}

/* The Landlord nav group already has its own Logout action, so the
   standalone account-menu button (top-right) is hidden only while
   inside the Landlord Portal to avoid a duplicate Logout. It remains
   fully visible/functional on Home and the login/signup screens.
   The Tenant Portal nav group has its own Logout action too, so the
   same rule applies there once a tenant is actually logged in
   (body.tenant-logged-in, toggled in showView()) — logged-out
   visitors browsing Find Houses/Saved keep the account-menu, since
   that's their only way to also log in as a landlord from there. */
body[data-view="landlord"] .account-menu,
body[data-view="landlordProfile"] .account-menu,
body[data-view="landlordManageAccount"] .account-menu,
body[data-view="landlordNotifications"] .account-menu,
body[data-view="tenantDashboard"] .account-menu,
body[data-view="tenantSavedHouses"] .account-menu,
body[data-view="tenantMyViewings"] .account-menu,
body[data-view="tenantProfile"] .account-menu,
body[data-view="tenantSettings"] .account-menu,
body[data-view="tenantManageAccount"] .account-menu,
body[data-view="tenantNotifications"] .account-menu,
body[data-view="tenantPlaceholder"] .account-menu,
body[data-view="tenant"].tenant-logged-in .account-menu,
body[data-view="saved"].tenant-logged-in .account-menu{
    display:none;
}

/* ====================================
   PORTAL ACCOUNT DROPDOWN (Tenant & Landlord)
   Sits inside each nav-group (flattened into
   #topNav by that group's own display:contents
   rule above), pushed to the far right via
   margin-left:auto. Landlord nav-group views are
   always logged-in-gated already, so the landlord
   widget just follows the same view list as the
   rest of nav-group-landlord. The tenant widget
   additionally needs body.tenant-logged-in on the
   dual-purpose "tenant"/"saved" views, since those
   are also reachable while logged out (where the
   original global .account-menu should show instead).
==================================== */

.portal-account-menu{
    display:none;
    position:relative;
    margin-left:auto;
}

body[data-view="tenantDashboard"] #tenantPortalAccountMenu,
body[data-view="tenantSavedHouses"] #tenantPortalAccountMenu,
body[data-view="tenantMyViewings"] #tenantPortalAccountMenu,
body[data-view="tenantProfile"] #tenantPortalAccountMenu,
body[data-view="tenantSettings"] #tenantPortalAccountMenu,
body[data-view="tenantManageAccount"] #tenantPortalAccountMenu,
body[data-view="tenantNotifications"] #tenantPortalAccountMenu,
body[data-view="tenant"].tenant-logged-in #tenantPortalAccountMenu,
body[data-view="saved"].tenant-logged-in #tenantPortalAccountMenu{
    display:flex;
    align-items:center;
}

body[data-view="landlord"] #landlordPortalAccountMenu,
body[data-view="landlordProfile"] #landlordPortalAccountMenu,
body[data-view="landlordManageAccount"] #landlordPortalAccountMenu,
body[data-view="landlordNotifications"] #landlordPortalAccountMenu{
    display:flex;
    align-items:center;
}

.portal-account-btn{
    display:flex;
    align-items:center;
    gap:10px;
    border:none;
    cursor:pointer;
    background:#eef3f8;
    padding:6px 14px 6px 6px;
    border-radius:999px;
    font-weight:600;
    color:var(--primary);
    transition:var(--transition);
}

.portal-account-btn:hover{
    background:#e2e9f2;
}

.portal-account-avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13.5px;
    font-weight:700;
    overflow:hidden;
    flex-shrink:0;
}

.portal-account-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.portal-account-name{
    font-size:14px;
    max-width:140px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.portal-account-chevron{
    font-size:11px;
    transition:var(--transition);
}

.portal-account-btn[aria-expanded="true"] .portal-account-chevron{
    transform:rotate(180deg);
}

.portal-account-dropdown{
    display:none;
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    background:#fff;
    border-radius:12px;
    box-shadow:var(--shadow-lg);
    min-width:220px;
    max-width:calc(100vw - 40px);
    overflow:hidden;
    z-index:200;
}

.portal-account-dropdown.show{
    display:block;
}

.portal-account-dropdown button{
    width:100%;
    text-align:left;
    border:none;
    background:none;
    cursor:pointer;
    padding:13px 18px;
    font-size:14.5px;
    font-weight:600;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:10px;
    transition:var(--transition);
}

.portal-account-dropdown button:hover{
    background:#f3f4f6;
    color:var(--primary);
}

.portal-account-dropdown-divider{
    border:none;
    border-top:1px solid var(--border);
    margin:0;
}

.portal-account-logout:hover{
    color:#e11d48;
}

@media (max-width:900px){

    .portal-account-name{
        display:none;
    }

    .portal-account-btn{
        padding:6px;
    }

    .portal-account-dropdown{
        right:-10px;
    }
}

/* ====================================
   MAIN
==================================== */

main{
    flex:1;
    padding:30px 5%;
}

.view{
    display:none;
}

.active-view{
    display:block;
}

/* ====================================
   HERO SECTION
==================================== */

.hero-section{
    position:relative;
    min-height:640px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:-30px -5% 0 -5%;
    padding:0 5%;
    background:
        linear-gradient(180deg, rgba(9,26,46,0.55) 0%, rgba(9,26,46,0.78) 100%),
        url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1800&q=80");
    background-size:cover;
    background-position:center;
}

.hero-overlay{
    display:none;
}

.hero-inner{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:820px;
    padding:120px 0 90px;
}

.hero-eyebrow{
    display:inline-block;
    color:#eaf2fb;
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.35);
    padding:6px 16px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.04em;
    margin-bottom:22px;
}

.hero-inner h1{
    font-family:var(--font-display);
    font-weight:600;
    font-size:3.4rem;
    line-height:1.15;
    color:#ffffff;
    margin-bottom:20px;
}

.hero-subtitle{
    color:#dce6f2;
    font-size:1.1rem;
    line-height:1.6;
    max-width:600px;
    margin:0 auto 40px;
}

.hero-search-bar{
    background:#ffffff;
    border-radius:18px;
    box-shadow:var(--shadow-lg);
    padding:14px;
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    transform:translateY(46px);
}

.hero-search-field{
    flex:1;
    min-width:150px;
    text-align:left;
    padding:6px 14px;
}

.hero-search-field label{
    display:block;
    font-size:11.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--muted);
    margin-bottom:4px;
}

.hero-search-field input,
.hero-search-field select{
    border:none;
    outline:none;
    width:100%;
    font-size:14.5px;
    font-family:inherit;
    color:var(--text);
    background:transparent;
}

.hero-search-divider{
    width:1px;
    align-self:stretch;
    background:var(--border);
    margin:4px 0;
}

.hero-search-btn{
    border:none;
    cursor:pointer;
    background:var(--primary);
    color:#fff;
    font-weight:700;
    font-size:15px;
    padding:16px 30px;
    border-radius:12px;
    white-space:nowrap;
    transition:var(--transition);
}

.hero-search-btn:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}

/* ====================================
   SECTION LAYOUT SYSTEM
==================================== */

.section-wrap{
    max-width:1200px;
    margin:0 auto;
    padding:100px 0 20px;
}

.section-wrap + .section-wrap{
    padding-top:80px;
}

.section-tinted{
    background:var(--sky);
    max-width:none;
    margin:80px calc(-5%) 0;
    padding:80px 5%;
}

.section-heading{
    text-align:center;
    max-width:640px;
    margin:0 auto 46px;
}

.section-eyebrow{
    display:block;
    color:var(--primary);
    font-weight:700;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    margin-bottom:10px;
}

.section-heading h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:2.1rem;
    color:var(--ink);
    margin-bottom:10px;
}

.section-heading p{
    color:var(--muted);
    font-size:15.5px;
}

/* ====================================
   CATEGORY ROW
==================================== */

.category-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:16px;
}

.category-card{
    background:var(--surface);
    border:1px solid var(--border);
    padding:22px 28px;
    border-radius:18px;
    text-align:center;
    cursor:pointer;
    transition:var(--transition);
    min-width:132px;
}

.category-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
    border-color:transparent;
}

.category-card:hover .category-icon{
    background:var(--primary);
    color:#fff;
    transform:scale(1.08);
}

.category-icon{
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 12px auto;
    border-radius:50%;
    background:var(--sky);
    color:var(--primary);
    font-size:1.35rem;
    transition:var(--transition);
}

.category-card h4{
    color:var(--primary);
    font-size:14px;
    font-weight:600;
}

/* ====================================
   FEATURED PROPERTIES
==================================== */

.featured-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:28px;
}

.featured-card{
    background:var(--surface);
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow-md);
    transition:transform 0.35s ease, box-shadow 0.35s ease;
    cursor:pointer;
    border:1px solid transparent;
}

.featured-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
    border-color:var(--border);
}

.featured-image-wrap{
    position:relative;
    overflow:hidden;
}

.featured-image{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
    transition:transform 0.5s ease;
}

.featured-card:hover .featured-image{
    transform:scale(1.06);
}

.featured-image-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);
    opacity:0;
    transition:opacity 0.35s ease;
    pointer-events:none;
}

.featured-card:hover .featured-image-wrap::after{
    opacity:1;
}

.featured-quickview-btn{
    position:absolute;
    left:14px;
    bottom:14px;
    display:flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,0.95);
    color:var(--primary);
    border:none;
    padding:8px 14px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:700;
    cursor:pointer;
    opacity:0;
    transform:translateY(6px);
    transition:opacity 0.3s ease, transform 0.3s ease;
    box-shadow:var(--shadow-sm);
}

.featured-card:hover .featured-quickview-btn{
    opacity:1;
    transform:translateY(0);
}

.featured-heart{
    position:absolute;
    top:14px;
    right:14px;
    width:38px;
    height:38px;
    border-radius:50%;
    border:none;
    cursor:pointer;
    background:rgba(255,255,255,0.9);
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
}

.featured-heart:hover{
    transform:scale(1.12);
}

.featured-heart.saved{
    background:#fee2e2;
    color:#ef4444;
}

.featured-heart i{
    color:var(--muted);
    transition:var(--transition);
}

.featured-heart.saved i{
    color:#ef4444;
}

.featured-badge{
    position:absolute;
    top:14px;
    left:14px;
}

.featured-content{
    padding:20px;
}

.featured-title-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
    margin-bottom:6px;
}

.featured-title-row h4{
    color:var(--ink);
    font-size:16.5px;
}

.featured-price{
    color:var(--primary);
    font-weight:700;
    font-size:15px;
    white-space:nowrap;
}

.featured-location{
    color:var(--muted);
    font-size:13.5px;
    margin-bottom:14px;
}

.featured-meta-row{
    display:flex;
    gap:14px;
    color:var(--muted);
    font-size:13px;
    margin-bottom:18px;
    padding-bottom:16px;
    border-bottom:1px solid var(--border);
}

.featured-meta-row span{
    display:flex;
    align-items:center;
    gap:6px;
}

.featured-meta-row i{
    color:var(--primary-light);
}

.view-details-btn{
    display:block;
    width:100%;
    text-align:center;
    border:none;
    cursor:pointer;
    background:#eef3f8;
    color:var(--primary);
    font-weight:700;
    padding:12px;
    border-radius:10px;
    transition:var(--transition);
}

.view-details-btn:hover{
    background:var(--primary);
    color:#fff;
    box-shadow:var(--shadow-sm);
}

.featured-empty{
    grid-column:1 / -1;
    text-align:center;
    color:var(--muted);
    padding:40px;
}

/* ====================================
   GENERIC EMPTY STATE
==================================== */

.empty-state{
    grid-column:1 / -1;
    text-align:center;
    padding:60px 20px;
    color:var(--muted);
}

.empty-state::before{
    content:"\f015";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    display:block;
    font-size:2.2rem;
    color:var(--border);
    margin-bottom:14px;
}

.empty-state h3{
    color:var(--ink);
    margin-bottom:6px;
    font-size:18px;
}

.empty-state p{
    font-size:14px;
}

/* ====================================
   WHY CHOOSE US
==================================== */

.why-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:24px;
}

.why-card{
    background:var(--surface);
    padding:32px 26px;
    border-radius:16px;
    text-align:center;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}

.why-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
}

.why-icon{
    width:46px;
    height:46px;
    line-height:46px;
    border-radius:50%;
    background:#eaf2fb;
    color:var(--primary);
    font-weight:700;
    margin:0 auto 16px;
}

.why-card h4{
    color:var(--ink);
    margin-bottom:8px;
    font-size:16px;
}

.why-card p{
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
}

/* ====================================
   STATS
==================================== */

.stats-row{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:24px;
    background:var(--primary);
    border-radius:22px;
    padding:50px 30px;
}

.stat-card{
    text-align:center;
    color:#fff;
}

.stat-number{
    font-family:var(--font-display);
    font-size:2.6rem;
    font-weight:600;
}

.stat-label{
    color:#c9dcf0;
    font-size:14px;
    margin-top:6px;
}

/* ====================================
   TESTIMONIALS
==================================== */

.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
}

.testimonial-card{
    background:var(--surface);
    padding:30px;
    border-radius:16px;
    box-shadow:var(--shadow-sm);
    position:relative;
}

.testimonial-quote{
    font-family:var(--font-display);
    font-size:2.8rem;
    color:var(--primary);
    opacity:0.25;
    line-height:1;
    margin-bottom:6px;
}

.testimonial-card p{
    color:var(--text);
    font-size:14.5px;
    line-height:1.65;
    margin-bottom:20px;
}

.testimonial-author strong{
    display:block;
    color:var(--ink);
    font-size:14.5px;
}

.testimonial-author span{
    color:var(--muted);
    font-size:13px;
}

/* ====================================
   CTA
==================================== */

.cta-section{
    background:linear-gradient(120deg, var(--primary) 0%, var(--primary-light) 100%);
    margin:90px calc(-5%) 0;
    padding:70px 5%;
    text-align:center;
}

.cta-inner{
    max-width:560px;
    margin:0 auto;
}

.cta-inner h2{
    font-family:var(--font-display);
    font-weight:600;
    font-size:2rem;
    color:#fff;
    margin-bottom:12px;
}

.cta-inner p{
    color:#dce6f2;
    margin-bottom:28px;
    font-size:15.5px;
}

.cta-btn{
    border:none;
    cursor:pointer;
    background:#fff;
    color:var(--primary);
    font-weight:700;
    font-size:15.5px;
    padding:16px 36px;
    border-radius:12px;
    transition:var(--transition);
}

.cta-btn:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-lg);
}

/* ====================================
   BUTTONS
==================================== */

.primary-btn,
.secondary-btn{
    border:1px solid var(--border);
    cursor:pointer;
    padding:12px 22px;
    border-radius:10px;
    font-size:15px;
    font-weight:600;
    transition:var(--transition);
    background:#fff;
    color:var(--primary);
}

.primary-btn{
    background:var(--secondary);
    color:#fff;
    border:none;
}

.primary-btn:hover{
    background:var(--secondary-dark);
    transform:translateY(-2px);
}

.secondary-btn:hover{
    background:var(--sky);
    border-color:var(--primary);
    transform:translateY(-2px);
}

/* ====================================
   PAGE HEADERS
==================================== */

.page-header{
    margin-bottom:25px;
}

.page-header h2{
    color:var(--primary);
    margin-bottom:8px;
}

.page-header p{
    color:var(--muted);
}

/* ====================================
   SEARCH CARD
==================================== */

.search-card{
    background:var(--surface);
    padding:16px 18px;
    border-radius:var(--radius);
    box-shadow:var(--shadow-md);
    margin-bottom:30px;
}

.search-tabs{
    display:flex;
    gap:10px;
    margin-bottom:14px;
}

.tab-btn{
    border:none;
    cursor:pointer;
    background:#e9eef5;
    color:var(--text);
    padding:10px 18px;
    border-radius:10px;
    font-weight:600;
}

.active-tab{
    background:var(--secondary);
    color:#fff;
}

.tab-content{
    display:none;
}

.active-tab-content{
    display:block;
}

/* ====================================
   FORMS
==================================== */

.form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    margin-bottom:8px;
    font-size:14px;
    font-weight:600;
}

.form-group input,
.form-group select{
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px;
    font-size:15px;
    outline:none;
    transition:var(--transition);
}

.form-group input:focus,
.form-group select:focus{
    border-color:var(--accent);
}

.full-width{
    grid-column:1 / -1;
}

.password-field-wrapper{
    position:relative;
    display:flex;
}

.password-field-wrapper input{
    flex:1;
    width:100%;
    padding-right:42px !important;
}

.password-toggle-btn{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:var(--muted);
    cursor:pointer;
    padding:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
}

.password-toggle-btn:hover{
    color:var(--ink);
}

form button{
    margin-top:20px;
}

.search-actions-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:20px;
}

.search-actions-row .primary-btn,
.search-actions-row .secondary-btn{
    margin-top:0;
}

.search-live-note{
    color:var(--muted);
    font-size:12.5px;
    margin-top:10px;
}

/* ====================================
   LOCATION BOX
==================================== */

.location-box{
    margin-top:20px;
    background:#eefaf8;
    border-left:5px solid var(--secondary);
    padding:18px;
    border-radius:10px;
}

.location-box h4{
    margin-bottom:10px;
}

/* ====================================
   TENANT PORTAL — COMPACT SEARCH BAR
   Adapts the Home page's hero-search-bar
   visual language (compact white card,
   inline fields, integrated search button)
   for the Tenant Portal's Manual Search tab.
   Fields beyond Location/Type/Budget live in
   a collapsible "More Filters" panel that
   reuses the existing .form-grid/.form-group
   styling used elsewhere in the app.
==================================== */

.compact-search-form{
    display:flex;
    flex-direction:column;
}

.compact-search-row{
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    padding:8px;
    display:flex;
    align-items:center;
    gap:4px;
    flex-wrap:wrap;
}

.compact-search-field{
    flex:1;
    min-width:150px;
    text-align:left;
    padding:6px 12px;
}

.compact-search-field label{
    display:block;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--muted);
    margin-bottom:3px;
}

.compact-search-field input,
.compact-search-field select{
    border:none;
    outline:none;
    width:100%;
    font-size:14px;
    font-family:inherit;
    color:var(--text);
    background:transparent;
}

.compact-budget-inputs{
    display:flex;
    align-items:center;
    gap:6px;
}

.compact-budget-inputs input{
    border:none;
    outline:none;
    width:100%;
    min-width:0;
    font-size:14px;
    font-family:inherit;
    color:var(--text);
    background:transparent;
}

.compact-budget-inputs span{
    color:var(--muted);
    font-size:13px;
}

.compact-search-divider{
    width:1px;
    align-self:stretch;
    background:var(--border);
    margin:4px 0;
}

.compact-search-row .compact-search-btn{
    border:none;
    cursor:pointer;
    background:var(--primary);
    color:#fff;
    font-weight:700;
    font-size:14px;
    padding:12px 22px;
    border-radius:10px;
    white-space:nowrap;
    transition:var(--transition);
    margin-top:0;
}

.compact-search-row .compact-search-btn:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}

.compact-search-toolbar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    margin-top:10px;
}

.compact-search-toolbar button{
    margin-top:0;
}

.more-filters-toggle i{
    transition:var(--transition);
}

.more-filters-toggle.active i{
    transform:rotate(180deg);
}

.compact-clear-link{
    color:var(--muted);
}

.more-filters-panel{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--border);
}

@media (max-width:768px){

    .compact-search-row{
        flex-direction:column;
        align-items:stretch;
        padding:12px;
    }

    .compact-search-divider{
        display:none;
    }

    .compact-search-field{
        padding:8px 6px;
    }

    .compact-search-row .compact-search-btn{
        width:100%;
        text-align:center;
        justify-content:center;
    }

    .compact-search-toolbar{
        justify-content:space-between;
    }
}

/* ====================================
   SECTION TITLES
==================================== */

.section-title{
    margin-bottom:20px;
}

.section-title h3{
    color:var(--primary);
}

/* ====================================
   LISTINGS GRID
==================================== */

.listing-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:25px;
}

.house-card{
    background:var(--surface);
    border-radius:16px;
    overflow:hidden;
    box-shadow:var(--shadow-md);
    transition:transform 0.35s ease, box-shadow 0.35s ease;
    cursor:pointer;
    border:1px solid transparent;
    display:flex;
    flex-direction:column;
}

.house-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
    border-color:var(--border);
}

.house-image-wrap{
    position:relative;
    overflow:hidden;
}

.house-image{
    width:100%;
    height:220px;
    display:block;
    object-fit:cover;
    background:#eef2f7;
    transition:transform 0.5s ease;
}

.house-card:hover .house-image{
    transform:scale(1.06);
}

.house-favorite-btn{
    position:absolute;
    top:14px;
    right:14px;
    width:38px;
    height:38px;
    border-radius:50%;
    border:none;
    cursor:pointer;
    background:rgba(255,255,255,0.92);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
    box-shadow:var(--shadow-sm);
}

.house-favorite-btn:hover{
    transform:scale(1.12);
}

.house-favorite-btn i{
    color:var(--muted);
    transition:var(--transition);
}

.house-favorite-btn.saved i{
    color:#ef4444;
}

.house-quickview-btn{
    position:absolute;
    left:14px;
    bottom:14px;
    display:flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,0.95);
    color:var(--primary);
    border:none;
    padding:8px 14px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:700;
    cursor:pointer;
    opacity:0;
    transform:translateY(6px);
    transition:opacity 0.3s ease, transform 0.3s ease;
    box-shadow:var(--shadow-sm);
}

.house-card:hover .house-quickview-btn{
    opacity:1;
    transform:translateY(0);
}

.house-content{
    padding:18px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.house-type{
    color:var(--primary);
    font-weight:700;
    margin-bottom:10px;
}

.house-price{
    color:var(--secondary-dark);
    font-size:1.2rem;
    font-weight:700;
    margin-bottom:10px;
}

.house-location{
    color:var(--muted);
    margin-bottom:12px;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
}

.house-location i{
    color:var(--primary-light);
}

.house-meta-row{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:13.5px;
    margin-bottom:14px;
}

.house-meta-row i{
    color:var(--primary-light);
}

.house-status{
    display:inline-block;
    padding:6px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

.house-status-overlay{
    position:absolute;
    top:14px;
    left:14px;
}

.status-available{
    background:#dcfce7;
    color:#15803d;
}

.status-occupied{
    background:#fee2e2;
    color:#b91c1c;
}

/* ====================================
   LANDLORD WELCOME BAR
==================================== */

.landlord-welcome-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color:#fff;
    padding:24px 28px;
    border-radius:var(--radius);
    margin-bottom:24px;
    box-shadow:var(--shadow-md);
}

.landlord-welcome-info{
    display:flex;
    align-items:center;
    gap:16px;
}

.landlord-welcome-avatar{
    width:56px;
    height:56px;
    border-radius:50%;
    background:rgba(255,255,255,0.18);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    flex-shrink:0;
}

.landlord-welcome-info h3{
    font-size:1.2rem;
    margin-bottom:4px;
}

.landlord-welcome-info p{
    color:rgba(255,255,255,0.85);
    font-size:13.5px;
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.landlord-welcome-info p span{
    display:flex;
    align-items:center;
    gap:6px;
}

.landlord-welcome-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.landlord-welcome-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,0.18);
    padding:8px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

.landlord-welcome-badge.pending{
    background:rgba(255,255,255,0.25);
}

.landlord-welcome-actions .secondary-btn{
    background:#fff;
    border-color:transparent;
}

/* ====================================
   DASHBOARD
==================================== */

.dashboard-section{
    margin-bottom:30px;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:18px;
}

.dashboard-card{
    background:var(--surface);
    padding:22px 18px;
    border-radius:var(--radius);
    text-align:center;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}

.dashboard-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
}

.dashboard-card-icon{
    width:44px;
    height:44px;
    margin:0 auto 10px auto;
    border-radius:50%;
    background:var(--sky);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
}

.dashboard-card:nth-child(1) .dashboard-card-icon{ background:#e6f0ff; color:#2563eb; }
.dashboard-card:nth-child(2) .dashboard-card-icon{ background:#e6faf0; color:#0f9d58; }
.dashboard-card:nth-child(3) .dashboard-card-icon{ background:#fff1e6; color:#d97706; }
.dashboard-card:nth-child(4) .dashboard-card-icon{ background:#f1e6ff; color:#7c3aed; }
.dashboard-card:nth-child(5) .dashboard-card-icon{ background:#ffe6ec; color:#e11d48; }
.dashboard-card:nth-child(6) .dashboard-card-icon{ background:#e6fff8; color:#0d9488; }
.dashboard-card:nth-child(7) .dashboard-card-icon{ background:#e6fbe9; color:#16a34a; }

.dashboard-card h3{
    margin-bottom:10px;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.4px;
}

.dashboard-card span{
    font-size:1.7rem;
    font-weight:700;
    color:var(--ink);
}

/* ====================================
   FORM SECTION / ADD PROPERTY MODAL
==================================== */

.form-section{
    background:var(--surface);
    padding:0;
    border-radius:var(--radius);
    box-shadow:none;
    margin-bottom:0;
}

.add-property-modal-content{
    max-width:760px;
    padding:30px;
}

/* ====================================
   ADD PROPERTY WIZARD
==================================== */

.wizard-progress{
    display:flex;
    align-items:flex-start;
    margin:22px 0 30px;
}

.wizard-progress-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    min-width:56px;
}

.wizard-progress-circle{
    width:34px;
    height:34px;
    border-radius:50%;
    background:#eef2f7;
    color:var(--muted);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:13.5px;
    transition:var(--transition);
    border:2px solid #eef2f7;
}

.wizard-progress-label{
    font-size:11.5px;
    color:var(--muted);
    font-weight:600;
    text-align:center;
    white-space:nowrap;
}

.wizard-progress-line{
    flex:1;
    height:2px;
    background:#eef2f7;
    margin-top:17px;
    transition:var(--transition);
}

.wizard-progress-step.active .wizard-progress-circle{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
    transform:scale(1.08);
}

.wizard-progress-step.active .wizard-progress-label{
    color:var(--primary);
}

.wizard-progress-step.completed .wizard-progress-circle{
    background:var(--success);
    border-color:var(--success);
    color:#fff;
}

.wizard-progress-line.completed{
    background:var(--success);
}

.wizard-step{
    display:none;
}

.wizard-step.active{
    display:block;
    animation:wizardStepIn 0.35s ease;
}

@keyframes wizardStepIn{
    from{ opacity:0; transform:translateX(14px); }
    to{ opacity:1; transform:translateX(0); }
}

.wizard-step-heading{
    color:var(--primary);
    margin-bottom:16px;
}

.wizard-step-subtext{
    color:var(--muted);
    font-size:13.5px;
    margin:-10px 0 16px;
}

.wizard-nav-buttons{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:26px;
    gap:12px;
}

.wizard-nav-buttons .primary-btn,
.wizard-nav-buttons .secondary-btn{
    margin-top:0;
}

.map-pin-placeholder{
    margin-top:18px;
    border:2px dashed var(--border);
    border-radius:14px;
    padding:30px 20px;
    text-align:center;
    color:var(--muted);
    background:#f8fafc;
}

.map-pin-placeholder i{
    font-size:1.8rem;
    color:var(--primary-light);
    margin-bottom:10px;
    display:block;
}

.map-pin-placeholder p{
    font-weight:700;
    color:var(--ink);
    margin-bottom:4px;
}

.map-pin-placeholder span{
    font-size:12.5px;
}

.drag-drop-zone{
    border:2px dashed var(--border);
    border-radius:14px;
    padding:36px 20px;
    text-align:center;
    color:var(--muted);
    cursor:pointer;
    transition:var(--transition);
    background:#f8fafc;
}

.drag-drop-zone:hover,
.drag-drop-zone.dragover{
    border-color:var(--primary);
    background:var(--sky);
}

.drag-drop-zone i{
    font-size:2rem;
    color:var(--primary-light);
    margin-bottom:10px;
    display:block;
}

.drag-drop-zone p{
    color:var(--ink);
    margin-bottom:4px;
    font-size:14.5px;
}

.drag-drop-zone span{
    font-size:12.5px;
}

.wizard-preview-heading{
    margin-top:26px;
}

.wizard-preview-card{
    display:flex;
    gap:14px;
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px;
    align-items:center;
}

.wizard-preview-card img{
    width:96px;
    height:96px;
    object-fit:cover;
    border-radius:10px;
    flex-shrink:0;
    background:#eef2f7;
}

.wizard-preview-empty{
    color:var(--muted);
    font-size:13.5px;
}

.wizard-preview-info h4{
    color:var(--primary);
    margin-bottom:4px;
    font-size:15px;
}

.wizard-preview-info p{
    color:var(--muted);
    font-size:13px;
    margin-bottom:2px;
}

/* ====================================
   PROPERTY ANALYTICS MODAL
==================================== */

.analytics-modal-content{
    max-width:480px;
    padding:30px;
    animation:modalPopIn 0.35s ease;
}

.analytics-header{
    margin-bottom:6px;
    padding-right:30px;
}

.analytics-header h3{
    color:var(--primary);
    margin-bottom:4px;
}

.analytics-header p{
    color:var(--muted);
    font-size:13.5px;
}

.analytics-stat-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:20px;
}

.analytics-stat-card{
    background:#f8fafc;
    border-radius:14px;
    padding:18px;
    text-align:center;
}

.analytics-stat-card i{
    font-size:1.3rem;
    color:var(--primary);
    margin-bottom:8px;
    display:block;
}

.analytics-stat-card .analytics-stat-value{
    font-size:1.6rem;
    font-weight:700;
    color:var(--ink);
    display:block;
}

.analytics-stat-card .analytics-stat-label{
    color:var(--muted);
    font-size:12.5px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.4px;
}

.status-group{
    margin-top:20px;
}

.radio-group{
    display:flex;
    gap:20px;
    margin-top:10px;
}

.radio-option{
    display:flex;
    align-items:center;
    gap:8px;
}

/* ====================================
   FLOATING ADD PROPERTY BUTTON
==================================== */

.fab-add-property{
    position:fixed;
    right:28px;
    bottom:28px;
    z-index:200;
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--primary);
    color:#fff;
    border:none;
    padding:16px 22px;
    border-radius:999px;
    font-weight:700;
    font-size:15px;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(18,52,88,0.35);
    transition:var(--transition);
}

.fab-add-property:hover{
    background:var(--primary-dark);
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(18,52,88,0.4);
}

.fab-add-property i{
    font-size:1rem;
}

@media (max-width:640px){
    .fab-add-property .fab-label{
        display:none;
    }

    .fab-add-property{
        padding:16px;
        right:18px;
        bottom:18px;
    }
}

/* ====================================
   MANAGE LISTINGS / MY PROPERTIES
==================================== */

.manage-section{
    background:var(--surface);
    padding:25px;
    border-radius:var(--radius);
    box-shadow:var(--shadow-md);
}

.landlord-listings-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:22px;
}

.landlord-card{
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    transition:var(--transition);
    background:var(--surface);
}

.landlord-card:hover{
    box-shadow:var(--shadow-md);
    transform:translateY(-3px);
}

.landlord-card-image-wrap{
    position:relative;
}

.landlord-card-image{
    width:100%;
    height:170px;
    object-fit:cover;
    display:block;
}

.landlord-card-status{
    position:absolute;
    top:12px;
    left:12px;
}

.landlord-card-body{
    padding:16px 18px;
}

.landlord-card-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap;
}

.landlord-card h4{
    color:var(--primary);
}

.landlord-card-header p{
    color:var(--muted);
    font-size:13.5px;
    margin-top:4px;
}

.landlord-card-stats{
    display:flex;
    gap:16px;
    margin:14px 0;
    padding:12px 0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.landlord-card-stats span{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:var(--muted);
}

.landlord-card-stats i{
    color:var(--primary-light);
}

.card-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.toggle-btn{
    border:none;
    cursor:pointer;
    padding:9px 14px;
    border-radius:8px;
    font-weight:600;
    font-size:13px;
    color:#fff;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:var(--transition);
}

.toggle-btn:hover{
    opacity:0.9;
}

.toggle-available{
    background:var(--success);
}

.toggle-occupied{
    background:var(--danger);
}

.card-icon-btn{
    border:none;
    cursor:pointer;
    width:36px;
    height:36px;
    border-radius:8px;
    background:#eef3f8;
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
}

.card-icon-btn:hover{
    background:var(--primary);
    color:#fff;
}

.card-icon-btn.delete-icon-btn:hover{
    background:#ef4444;
    color:#fff;
}

/* ====================================
   MODAL
==================================== */

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,27,43,0.65);
    z-index:999;
    padding:20px;
    overflow:auto;
    backdrop-filter:blur(2px);
}

.modal-content{
    background:#fff;
    max-width:1080px;
    margin:40px auto;
    border-radius:22px;
    padding:0;
    position:relative;
    animation:modalPopIn 0.35s ease;
    overflow:hidden;
    max-height:90vh;
    display:flex;
    flex-direction:column;
}

/* Wraps the dynamically-rendered .modal-grid; passes available
   height down the chain so the grid (and its columns) can be
   bounded and scroll internally instead of being clipped. */
#modalBody{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

@keyframes modalPopIn{
    from{ opacity:0; transform:translateY(18px) scale(0.98); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}

.close-modal{
    position:absolute;
    right:16px;
    top:16px;
    border:none;
    background:rgba(255,255,255,0.9);
    width:38px;
    height:38px;
    border-radius:50%;
    font-size:1.4rem;
    line-height:1;
    cursor:pointer;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}

.close-modal:hover{
    background:#fff;
    transform:rotate(90deg);
}

.modal-grid{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
}

.modal-gallery-col{
    background:#0f1b2b;
    padding:0;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    min-height:0;
}

.modal-info-col{
    padding:28px 30px;
    overflow-y:auto;
    min-height:0;
}

.modal-image{
    width:100%;
    height:420px;
    display:block;
    object-fit:cover;
    background:#eef2f7;
    border-radius:0;
    margin-bottom:0;
}

.modal-details{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:15px;
}

.detail-box{
    background:#f8fafc;
    padding:15px;
    border-radius:12px;
}

.detail-box strong{
    display:block;
    margin-bottom:5px;
    color:var(--primary);
}

/* ====================================
   PHOTO GALLERY (MODAL)
==================================== */

.gallery-main{
    position:relative;
}

.gallery-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.5);
    color:#fff;
    border:none;
    width:40px;
    height:40px;
    border-radius:50%;
    cursor:pointer;
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
}

.gallery-nav:hover{
    background:rgba(0,0,0,0.75);
}

.gallery-prev{
    left:15px;
}

.gallery-next{
    right:15px;
}

.gallery-counter{
    position:absolute;
    bottom:15px;
    right:15px;
    background:rgba(0,0,0,0.6);
    color:#fff;
    padding:4px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

.gallery-thumbs{
    display:flex;
    gap:10px;
    margin-top:0;
    margin-bottom:0;
    overflow-x:auto;
    padding:14px;
}

.gallery-thumb{
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:8px;
    cursor:pointer;
    opacity:0.6;
    border:2px solid transparent;
    transition:var(--transition);
    flex-shrink:0;
}

.gallery-thumb:hover{
    opacity:0.9;
}

.gallery-thumb.active{
    opacity:1;
    border-color:var(--secondary);
}

/* ====================================
   PHOTO COUNT BADGE (LISTING CARDS)
==================================== */

.photo-count-badge{
    position:absolute;
    bottom:10px;
    right:10px;
    background:rgba(0,0,0,0.65);
    color:#fff;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:5px;
}

/* ====================================
   PHOTO UPLOAD PREVIEW (LANDLORD FORM)
==================================== */

.photo-preview-container{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
}

/* Safety net: constrains ANY img placed in this container, even one
   missing the .photo-preview-thumb class below, so an oversized
   original photo can never blow out the form/modal width again. */
.photo-preview-container img{
    max-width:80px;
    max-height:80px;
    object-fit:cover;
}

.photo-preview-thumb{
    width:80px;
    height:80px;
    object-fit:cover;
    border-radius:8px;
    border:1px solid var(--border);
}

/* Wraps each thumbnail so a small remove ("x") button can sit on
   top of it — lets a wrongly-uploaded photo be taken back out
   instead of being stuck in the form. */
.photo-preview-item{
    position:relative;
    width:80px;
    height:80px;
    flex-shrink:0;
}

.photo-preview-item .photo-preview-thumb{
    width:100%;
    height:100%;
}

.photo-preview-remove{
    position:absolute;
    top:-7px;
    right:-7px;
    width:20px;
    height:20px;
    border-radius:50%;
    border:2px solid #fff;
    background:#e33;
    color:#fff;
    font-size:11px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-sm);
    transition:var(--transition);
}

.photo-preview-remove:hover{
    background:#c22;
    transform:scale(1.08);
}

/* ====================================
   PROPERTY MODAL - INFO LAYOUT
==================================== */

.modal-title-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:10px;
    margin-top:0;
    padding-right:40px;
}

.modal-title-row h2{
    color:var(--primary);
}

.modal-report-link{
    background:none;
    border:none;
    color:var(--muted);
    font-size:13px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    transition:var(--transition);
    white-space:nowrap;
}

.modal-report-link:hover{
    color:var(--danger);
}

.modal-back-link{
    background:none;
    border:none;
    color:var(--primary);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    transition:var(--transition);
    margin-bottom:10px;
    padding:0;
}

.modal-back-link:hover{
    text-decoration:underline;
}

.modal-badge-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
}

.verified-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#e6f4ff;
    color:#0b6fb0;
    padding:6px 12px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:700;
}

.trust-score-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#eafaf1;
    color:#0f9d58;
    padding:6px 12px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:700;
}

.modal-meta-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:10px;
    flex-wrap:wrap;
}

.modal-rating{
    color:var(--warning);
    letter-spacing:2px;
    font-size:1.05rem;
}

.modal-price{
    color:var(--secondary-dark);
    font-size:1.4rem;
    font-weight:700;
    margin-top:14px;
}

.modal-location{
    color:var(--muted);
    margin-top:6px;
    display:flex;
    align-items:center;
    gap:6px;
}

.modal-location i{
    color:var(--primary-light);
}

.modal-divider{
    border:none;
    border-top:1px solid var(--border);
    margin:20px 0;
}

.modal-info-col h3{
    color:var(--primary);
    margin-bottom:14px;
    margin-top:18px;
}

.modal-info-col h3:first-of-type{
    margin-top:0;
}

.detail-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.detail-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 14px;
    background:#f8fafc;
    border-radius:10px;
    font-size:14.5px;
}

.detail-row span:first-child{
    color:var(--muted);
    font-weight:600;
}

.detail-row span:last-child{
    color:var(--text);
    font-weight:700;
}

.modal-description{
    color:var(--text);
    line-height:1.6;
    margin-bottom:16px;
}

.amenities-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:10px;
}

.amenity-item{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text);
    font-weight:600;
    font-size:14px;
}

.amenity-item .check{
    color:var(--success);
    font-weight:800;
}

/* ====================================
   LANDLORD PROFILE CARD (MODAL)
==================================== */

.landlord-mini-card{
    display:flex;
    align-items:center;
    gap:14px;
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:14px;
    padding:16px;
    margin-bottom:8px;
}

.landlord-avatar{
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    flex-shrink:0;
    overflow:hidden;
}

.landlord-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.landlord-mini-info{
    flex:1;
    min-width:0;
}

.landlord-mini-info .landlord-name{
    font-weight:700;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:6px;
    font-size:15px;
}

.landlord-mini-info .landlord-name i{
    color:#0b6fb0;
    font-size:13px;
}

.landlord-mini-info .landlord-sub{
    color:var(--muted);
    font-size:12.5px;
    margin-top:2px;
}

.contact-info{
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:15px;
}

.contact-info div{
    display:flex;
    align-items:center;
    gap:8px;
}

.contact-info i{
    color:var(--primary-light);
    width:16px;
}

.modal-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:22px;
}

.action-btn{
    flex:1;
    min-width:140px;
    text-align:center;
    border:none;
    cursor:pointer;
    padding:13px 18px;
    border-radius:10px;
    font-size:15px;
    font-weight:700;
    text-decoration:none;
    transition:var(--transition);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.action-btn:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-sm);
}

.whatsapp-btn{
    background:#25d366;
    color:#fff;
}

.whatsapp-btn:hover{
    background:#1eb85a;
}

.call-btn{
    background:var(--primary);
    color:#fff;
}

.call-btn:hover{
    background:var(--primary-dark);
}

.directions-btn{
    background:#4285f4;
    color:#fff;
}

.directions-btn:hover{
    background:#3367d6;
}

.save-btn{
    background:#f3f4f6;
    color:var(--text);
}

.save-btn:hover{
    background:#e5e7eb;
}

.save-btn.saved{
    background:#fee2e2;
    color:#b91c1c;
}

.report-btn{
    flex:0 0 auto;
    min-width:auto;
    width:46px;
    background:#f3f4f6;
    color:var(--muted);
}

.report-btn:hover{
    background:#fee2e2;
    color:#b91c1c;
}

/* ====================================
   AMENITIES CHECKBOX GROUP (FORM)
==================================== */

.amenities-checkbox-group{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:10px;
    margin-top:10px;
}

.amenity-checkbox{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:500;
    font-size:14.5px;
}

.amenity-checkbox i{
    color:var(--primary-light);
    width:16px;
    text-align:center;
}

/* ====================================
   FOOTER
==================================== */

.site-footer{
    background:var(--ink);
    color:#c9d3de;
    margin-top:60px;
}

.footer-inner{
    max-width:1200px;
    margin:0 auto;
    padding:60px 5% 40px;
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    gap:36px;
}

.footer-brand h3{
    font-family:var(--font-display);
    color:#fff;
    font-size:1.3rem;
    margin-bottom:14px;
}

.footer-brand p{
    font-size:13.5px;
    line-height:1.7;
    max-width:280px;
    margin-bottom:18px;
}

.footer-socials{
    display:flex;
    gap:10px;
}

.footer-socials a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    text-decoration:none;
    font-size:15px;
    transition:var(--transition);
}

.footer-socials a:hover{
    background:var(--primary-light);
}

.footer-col h4{
    color:#fff;
    font-size:14.5px;
    margin-bottom:16px;
}

.footer-col ul{
    list-style:none;
}

.footer-col li{
    margin-bottom:10px;
    font-size:13.5px;
}

.footer-col a{
    color:#c9d3de;
    text-decoration:none;
    transition:var(--transition);
}

.footer-col a:hover{
    color:#fff;
}

.footer-contact li{
    color:#c9d3de;
}

.footer-bottom{
    text-align:center;
    padding:20px 5%;
    border-top:1px solid rgba(255,255,255,0.1);
    font-size:13px;
}

/* ====================================
   ANIMATIONS
==================================== */

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(15px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ====================================
   RESPONSIVE
==================================== */

@media (max-width:768px){

    .hero-inner h1{
        font-size:2.4rem;
    }

    .hero-search-bar{
        flex-direction:column;
        align-items:stretch;
        transform:translateY(30px);
    }

    .hero-search-divider{
        display:none;
    }

    .main-header{
        flex-direction:column;
        gap:15px;
    }

    .landlord-card-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .search-tabs{
        flex-direction:column;
    }

    .modal-image{
        max-height:280px;
    }

    .modal-grid{
        grid-template-columns:1fr;
        max-height:none;
    }

    .modal-content{
        margin:16px auto;
        max-height:calc(100vh - 32px);
        overflow-y:auto;
    }

    .modal-image{
        height:260px;
    }

    .modal-gallery-col,
    .modal-info-col{
        overflow-y:visible;
    }

    .footer-inner{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width:500px){

    main{
        padding:20px;
    }

    .hero-section{
        margin:-20px -20px 0 -20px;
        min-height:auto;
    }

    .hero-inner{
        padding:70px 0 60px;
    }

    .hero-inner h1{
        font-size:1.9rem;
    }

    .hero-search-bar{
        transform:none;
        margin-top:24px;
    }

    .section-wrap{
        padding:60px 0 10px;
    }

    .section-tinted,
    .cta-section{
        margin-left:-20px;
        margin-right:-20px;
    }

    .stats-row{
        padding:34px 20px;
    }

    .dashboard-card span{
        font-size:1.6rem;
    }

    .footer-inner{
        grid-template-columns:1fr;
    }
}
.auth-container{
    max-width:500px;
    margin:50px auto;
    background:#fff;
    padding:30px;
    border-radius:16px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

/* ====================================
   ACCOUNT MENU / LOGIN DROPDOWN
==================================== */

.account-menu{
    position:relative;
}

.account-dropdown{
    display:none;
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    background:#fff;
    border-radius:12px;
    box-shadow:var(--shadow-lg);
    min-width:220px;
    overflow:hidden;
    z-index:200;
}

.account-dropdown.show{
    display:block;
}

.account-dropdown button{
    width:100%;
    text-align:left;
    border:none;
    background:none;
    cursor:pointer;
    padding:14px 18px;
    font-size:14.5px;
    font-weight:600;
    color:var(--text);
    transition:var(--transition);
}

.account-dropdown button:hover{
    background:#f3f4f6;
    color:var(--primary);
}

.account-dropdown button + button{
    border-top:1px solid var(--border);
}

/* ====================================
   TENANT ACCOUNT BAR
==================================== */

.tenant-header-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.tenant-account-bar{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.tenant-account-bar .account-greeting{
    font-weight:600;
    color:var(--primary);
}

.tenant-account-bar .nav-btn{
    padding:8px 14px;
    font-size:14px;
}

/* ====================================
   SOCIAL SIGN-IN
==================================== */

.social-auth{
    margin-top:8px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.social-btn{
    border:1px solid var(--border);
    cursor:pointer;
    padding:11px 18px;
    border-radius:10px;
    font-size:14.5px;
    font-weight:600;
    background:#fff;
    transition:var(--transition);
}

.social-btn:hover{
    background:#f8fafc;
}

.google-btn{
    color:#ea4335;
}

.google-btn-container{
    display:flex;
    justify-content:center;
    width:100%;
}

.google-btn-container > div{
    width:100% !important;
}

.google-btn-container iframe{
    width:100% !important;
}

.facebook-btn{
    color:#1877f2;
}

.social-auth-note{
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
    margin-top:4px;
}

.forgot-password-link{
    text-align:right;
    margin:8px 0 16px;
}

.forgot-password-link a{
    font-size:13px;
    color:var(--primary);
    text-decoration:none;
}

.forgot-password-link a:hover{
    text-decoration:underline;
}

.auth-divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin:22px 0 18px 0;
    color:var(--muted);
    font-size:13px;
}

.auth-divider::before,
.auth-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--border);
}

/* ====================================
   MODAL LOGIN PROMPT
==================================== */

.login-prompt-note{
    color:var(--muted);
    font-size:13.5px;
    margin-top:8px;
    text-align:center;
}

.auth-container h2{
    margin-bottom:25px;
    text-align:center;
}

.auth-back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:none;
    border:none;
    cursor:pointer;
    color:var(--muted);
    font-size:14px;
    font-weight:600;
    padding:0;
    margin-bottom:14px;
    transition:var(--transition);
}

.auth-back-link:hover{
    color:var(--primary);
}

.action-btn.locked-btn{
    background:#f3f4f6;
    color:var(--text);
    position:relative;
}

.action-btn.locked-btn:hover{
    background:#e5e7eb;
}

.action-btn.locked-btn i.fa-lock{
    font-size:12px;
    margin-right:2px;
}
/* ====================================
   SCROLL REVEAL ANIMATION (PHASE 1)
==================================== */

.reveal-on-scroll{
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.6s ease, transform 0.6s ease;
}

.reveal-on-scroll.revealed{
    opacity:1;
    transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
    .reveal-on-scroll{
        opacity:1;
        transform:none;
        transition:none;
    }
}

/* Fade-in for dynamically rendered cards */
@keyframes cardFadeIn{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
}

.featured-card,
.house-card,
.landlord-card{
    animation:cardFadeIn 0.5s ease both;
}

/* ====================================
   LANDLORD PROFILE VIEW (PHASE 6)
==================================== */

.back-link{
    background:none;
    border:none;
    color:var(--primary);
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.back-link:hover{
    text-decoration:underline;
}

.profile-header-card{
    background:var(--surface);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow-md);
    margin-bottom:24px;
}

.profile-cover{
    height:130px;
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 60%, var(--accent) 100%);
}

.profile-header-body{
    display:flex;
    align-items:flex-end;
    gap:20px;
    padding:0 26px 22px;
    flex-wrap:wrap;
}

.profile-avatar-wrap{
    margin-top:-45px;
}

.profile-avatar{
    width:96px;
    height:96px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-size:2.2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border:5px solid var(--surface);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
}

.profile-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-header-info{
    flex:1;
    min-width:200px;
    padding-top:12px;
}

.profile-header-info h2{
    color:var(--ink);
    font-size:1.3rem;
    margin-bottom:2px;
}

.profile-header-info p{
    color:var(--muted);
    font-size:13.5px;
    margin-bottom:8px;
}

.profile-header-badges{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.profile-header-actions{
    display:flex;
    gap:10px;
    padding-top:12px;
}

/* ====================================
   PROFILE COMPLETION
==================================== */

.profile-completion-card,
.verification-card,
.trust-score-card{
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:24px 26px;
    margin-bottom:24px;
}

.profile-completion-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}

.profile-completion-header h3,
.verification-card h3{
    color:var(--primary);
}

.profile-completion-percent{
    font-size:1.4rem;
    font-weight:800;
    color:var(--primary);
}

.profile-progress-track{
    width:100%;
    height:14px;
    border-radius:999px;
    background:#eef2f7;
    overflow:hidden;
}

.profile-progress-fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg, var(--warning) 0%, var(--success) 100%);
    transition:width 0.6s ease;
}

.profile-completion-note{
    color:var(--muted);
    font-size:13.5px;
    margin:12px 0 16px;
}

.profile-form-progress-track{
    margin-bottom:6px;
}

/* ====================================
   VERIFICATION STATUS
==================================== */

.verification-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:14px;
    margin-top:16px;
}

.verification-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:#f8fafc;
    border-radius:12px;
    padding:14px 16px;
}

.verification-item-info{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:600;
    color:var(--ink);
}

.verification-item-info i{
    color:var(--primary-light);
    width:18px;
}

.verification-item.verified .verification-item-info i{
    color:var(--success);
}

.verify-btn{
    border:none;
    background:var(--primary);
    color:#fff;
    padding:7px 14px;
    border-radius:8px;
    font-size:12.5px;
    font-weight:700;
    cursor:pointer;
    transition:var(--transition);
}

.verify-btn:hover{
    background:var(--primary-dark);
}

.verify-btn.verified-btn{
    background:var(--success);
    cursor:default;
}

.verify-status-label{
    font-size:12.5px;
    font-weight:700;
    padding:6px 12px;
    border-radius:999px;
    background:#fef3c7;
    color:#92400e;
}

.verify-status-label.complete{
    background:#dcfce7;
    color:#15803d;
}

/* ====================================
   TRUST SCORE CARD
==================================== */

.trust-score-card{
    display:flex;
    align-items:center;
    gap:20px;
}

.trust-score-ring{
    width:76px;
    height:76px;
    border-radius:50%;
    background:conic-gradient(var(--success) 0deg, var(--success) calc(var(--score-deg, 144deg)), #eef2f7 calc(var(--score-deg, 144deg)));
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.trust-score-ring span{
    width:60px;
    height:60px;
    border-radius:50%;
    background:var(--surface);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:1.15rem;
    color:var(--ink);
}

.trust-score-card h3{
    color:var(--primary);
    margin-bottom:4px;
}

.trust-score-card p{
    color:var(--muted);
    font-size:13.5px;
}

/* ====================================
   PROFILE STATS / ACTIVITY / ACHIEVEMENTS
==================================== */

.profile-section-heading{
    color:var(--primary);
    margin-bottom:16px;
}

.profile-columns{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:22px;
}

.profile-activity-card,
.profile-achievements-card{
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:22px 24px;
}

.activity-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.activity-list li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:13.5px;
    color:var(--text);
    padding-bottom:14px;
    border-bottom:1px solid var(--border);
}

.activity-list li:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.activity-list i{
    color:var(--primary-light);
    margin-top:2px;
}

.activity-list .activity-date{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-top:2px;
}

.achievements-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    gap:14px;
}

.achievement-badge{
    text-align:center;
    padding:14px 8px;
    border-radius:12px;
    background:#f8fafc;
    opacity:0.45;
    filter:grayscale(1);
    transition:var(--transition);
}

.achievement-badge.unlocked{
    opacity:1;
    filter:none;
    background:var(--sky);
}

.achievement-badge i{
    font-size:1.4rem;
    color:var(--primary);
    display:block;
    margin-bottom:6px;
}

.achievement-badge span{
    font-size:11px;
    font-weight:700;
    color:var(--ink);
}

/* ====================================
   PROFILE COMPLETION FORM MODAL
==================================== */

.profile-form-modal-content{
    max-width:820px;
    padding:30px;
    max-height:88vh;
    overflow-y:auto;
}

.document-upload-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:14px;
    margin-bottom:10px;
}

.document-upload-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
    border:2px dashed var(--border);
    border-radius:12px;
    padding:18px 10px;
    cursor:pointer;
    transition:var(--transition);
    background:#f8fafc;
}

.document-upload-item:hover{
    border-color:var(--primary);
    background:var(--sky);
}

.document-upload-item i{
    font-size:1.4rem;
    color:var(--primary-light);
}

.document-upload-item span{
    font-size:12.5px;
    font-weight:600;
    color:var(--ink);
}

.document-upload-item .document-status{
    font-size:11px;
    font-weight:700;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:0.3px;
}

.document-upload-item.uploaded{
    border-style:solid;
    border-color:var(--success);
    background:#f0fdf4;
}

.document-upload-item.uploaded .document-status{
    color:var(--success);
}

.document-upload-item.uploaded i{
    color:var(--success);
}

.document-upload-item.document-uploading{
    opacity:0.7;
    pointer-events:none;
}

.document-upload-item.document-uploading .document-status{
    color:var(--primary);
}

@media (max-width:768px){

    .profile-columns{
        grid-template-columns:1fr;
    }

    .profile-header-body{
        flex-direction:column;
        align-items:flex-start;
    }

    .profile-header-actions{
        width:100%;
    }
}


/* ===================================================================
   RESPONSIVE OVERHAUL (ADDITIVE — DESKTOP UNTOUCHED)
   Breakpoints:
     Desktop  : 1200px and up   (no changes — untouched above)
     Laptop   : 992px – 1199px
     Tablet   : 768px – 991px
     Mobile   : below 768px  (576px tier = small phones)
   Rules below are appended after all base styles so they win the
   cascade at matching widths without editing any desktop rule.
=================================================================== */

/* ====================================
   LAPTOP  (max-width: 1200px)
==================================== */
@media (max-width:1200px){

    main{
        padding:28px 4%;
    }

    .section-wrap{
        padding:80px 0 20px;
    }

    .section-wrap + .section-wrap{
        padding-top:64px;
    }

    .hero-inner h1{
        font-size:3rem;
    }

    .featured-grid,
    .listing-grid,
    .landlord-listings-grid{
        gap:22px;
    }

    .modal-content{
        max-width:94%;
    }
}

/* ====================================
   TABLET  (max-width: 992px)
==================================== */
@media (max-width:992px){

    /* ---- Header ---- */
    .main-header{
        padding:14px 4%;
        gap:12px;
    }

    .nav-btn{
        padding:9px 14px;
        font-size:13.5px;
    }

    /* ---- Hero ---- */
    .hero-section{
        min-height:560px;
    }

    .hero-inner{
        padding:90px 0 70px;
    }

    .hero-inner h1{
        font-size:2.6rem;
    }

    .hero-subtitle{
        font-size:1rem;
    }

    /* ---- Category row: 3 per row ---- */
    .category-row{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:14px;
    }

    .category-card{
        min-width:0;
        padding:18px 14px;
    }

    .category-icon{
        width:48px;
        height:48px;
        font-size:1.15rem;
        margin-bottom:10px;
    }

    /* ---- Property cards: 2 per row ---- */
    .featured-grid,
    .listing-grid,
    .landlord-listings-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .featured-image,
    .house-image{
        height:190px;
    }

    .landlord-card-image{
        height:150px;
    }

    /* ---- Dashboard / profile stats: 3 per row ---- */
    .dashboard-grid{
        grid-template-columns:repeat(3,1fr);
        gap:14px;
    }

    /* ---- Search card ---- */
    .search-card{
        padding:20px;
    }

    .form-grid{
        gap:14px;
    }

    /* ---- Property details modal ----
       Below this width the modal goes back to a single scrolling
       container (matches the existing/correct mobile behavior) —
       the desktop flex/scroll chain on #modalBody and .modal-grid
       is intentionally undone here. */
    #modalBody{
        flex:none;
        display:block;
        overflow:visible;
    }

    .modal-grid{
        grid-template-columns:1fr;
        max-height:none;
        flex:none;
        overflow:visible;
    }

    .modal-content{
        margin:20px auto;
        max-height:calc(100vh - 40px);
        overflow-y:auto;
    }

    .modal-image{
        height:280px;
    }

    .modal-gallery-col,
    .modal-info-col{
        overflow-y:visible;
    }

    .modal-info-col{
        padding:22px;
    }

    /* ---- Footer ---- */
    .footer-inner{
        grid-template-columns:1fr 1fr;
        gap:28px;
    }

    /* ---- Profile ---- */
    .profile-columns{
        grid-template-columns:1fr;
    }
}

/* ====================================
   MOBILE  (max-width: 768px)
==================================== */
@media (max-width:768px){

    /* ---- Header ---- */
    .main-header{
        flex-direction:row;
        flex-wrap:wrap;
        padding:10px 4%;
        gap:10px;
        row-gap:10px;
    }

    .logo{
        gap:8px;
        order:1;
    }

    .logo img{
        height:34px;
    }

    .logo h2{
        font-size:1.25rem;
    }

    .nav-hamburger-btn{
        display:flex;
        order:2;
    }

    .account-menu{
        order:3;
    }

    .top-nav{
        display:none;
        order:4;
        width:100%;
        gap:8px;
        flex-direction:column;
        align-items:stretch;
        background:#fff;
        border-radius:12px;
        padding:10px;
        box-shadow:var(--shadow-sm);
    }

    .top-nav.nav-open{
        display:flex;
    }

    .nav-btn{
        padding:10px 14px;
        font-size:13px;
        border-radius:8px;
        width:100%;
        justify-content:flex-start;
    }

    .nav-btn i{
        font-size:13px;
    }

    .account-menu .secondary-btn{
        padding:8px 14px;
        font-size:13.5px;
    }

    .portal-account-menu{
        margin-left:0;
        width:100%;
        order:99;
    }

    .portal-account-btn{
        width:100%;
        justify-content:space-between;
    }

    .portal-account-name{
        display:block;
        max-width:none;
        flex:1;
        text-align:left;
    }

    .portal-account-dropdown{
        left:0;
        right:0;
        min-width:0;
        max-width:none;
    }

    /* ---- Main / sections ---- */
    main{
        padding:16px 4%;
    }

    .section-wrap{
        padding:44px 0 10px;
    }

    .section-wrap + .section-wrap{
        padding-top:44px;
    }

    .section-tinted{
        margin:44px calc(-4%) 0;
        padding:44px 4%;
    }

    .section-heading{
        margin-bottom:28px;
    }

    .section-heading h2{
        font-size:1.6rem;
    }

    .section-heading p{
        font-size:14px;
    }

    /* ---- Hero: fit inside first screen ---- */
    .hero-section{
        min-height:auto;
        margin:-16px -4% 0 -4%;
        padding:0 4%;
    }

    .hero-inner{
        padding:52px 0 46px;
        max-width:100%;
    }

    .hero-eyebrow{
        padding:5px 12px;
        font-size:11.5px;
        margin-bottom:14px;
    }

    .hero-inner h1{
        font-size:2.1rem;
        line-height:1.2;
        margin-bottom:12px;
    }

    .hero-subtitle{
        font-size:14px;
        margin-bottom:26px;
    }

    .hero-search-bar{
        flex-direction:column;
        align-items:stretch;
        transform:translateY(22px);
        padding:10px;
        border-radius:14px;
        gap:2px;
    }

    .hero-search-field{
        padding:8px 10px;
    }

    .hero-search-divider{
        display:none;
    }

    .hero-search-btn{
        padding:13px 20px;
        font-size:14px;
        margin-top:4px;
    }

    /* ---- Category row: 2 per row ---- */
    .category-row{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .category-card{
        padding:14px 8px;
        border-radius:14px;
    }

    .category-icon{
        width:42px;
        height:42px;
        font-size:1rem;
        margin-bottom:8px;
    }

    .category-card h4{
        font-size:12.5px;
    }

    /* ---- Property cards: 1 per row, compact ---- */
    .featured-grid,
    .listing-grid,
    .landlord-listings-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .featured-image,
    .house-image{
        height:180px;
    }

    .featured-content,
    .house-content{
        padding:14px;
    }

    .featured-title-row,
    .house-type{
        margin-bottom:6px;
    }

    .featured-location,
    .house-location{
        margin-bottom:10px;
        font-size:13px;
    }

    .featured-meta-row,
    .house-meta-row{
        margin-bottom:12px;
        padding-bottom:12px;
    }

    .view-details-btn{
        padding:10px;
        font-size:14px;
    }

    .featured-heart,
    .house-favorite-btn{
        width:34px;
        height:34px;
    }

    .landlord-card-image{
        height:150px;
    }

    .landlord-card-body{
        padding:14px;
    }

    .landlord-card-stats{
        gap:12px;
        margin:10px 0;
        padding:10px 0;
    }

    /* ---- Why / testimonials / stats ---- */
    .why-card{
        padding:24px 18px;
    }

    .stats-row{
        padding:34px 18px;
        border-radius:18px;
        gap:18px;
    }

    .stat-number{
        font-size:2rem;
    }

    .testimonial-card{
        padding:22px;
    }

    .cta-section{
        margin:60px calc(-4%) 0;
        padding:50px 4%;
    }

    .cta-inner h2{
        font-size:1.6rem;
    }

    /* ---- Buttons ---- */
    .primary-btn,
    .secondary-btn{
        padding:11px 18px;
        font-size:14px;
    }

    .cta-btn{
        padding:13px 28px;
        font-size:14px;
    }

    /* ---- Page headers ---- */
    .page-header h2{
        font-size:1.35rem;
    }

    /* ---- Search card / forms ---- */
    .search-card{
        padding:16px;
        border-radius:12px;
    }

    .search-tabs{
        flex-direction:column;
        gap:8px;
    }

    .tab-btn{
        padding:9px 14px;
        width:100%;
    }

    .form-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .search-actions-row{
        flex-direction:column;
    }

    .search-actions-row .primary-btn,
    .search-actions-row .secondary-btn{
        width:100%;
    }

    /* ---- Landlord dashboard ---- */
    .landlord-welcome-bar{
        flex-direction:column;
        align-items:flex-start;
        padding:18px;
    }

    .landlord-welcome-avatar{
        width:46px;
        height:46px;
        font-size:1.15rem;
    }

    .landlord-welcome-actions{
        width:100%;
    }

    .landlord-welcome-actions .secondary-btn{
        flex:1;
    }

    .dashboard-grid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .dashboard-card{
        padding:16px 12px;
    }

    .dashboard-card span{
        font-size:1.4rem;
    }

    .manage-section{
        padding:16px;
    }

    .landlord-card-header{
        flex-direction:column;
        align-items:flex-start;
    }

    /* ---- Add Property modal / wizard ---- */
    .add-property-modal-content{
        padding:18px;
    }

    .wizard-progress-label{
        font-size:10px;
    }

    .wizard-nav-buttons{
        flex-wrap:wrap;
    }

    .wizard-nav-buttons .primary-btn,
    .wizard-nav-buttons .secondary-btn{
        flex:1;
        min-width:110px;
    }

    /* ---- Property details / analytics modal ---- */
    .modal{
        padding:10px;
    }

    .modal-content{
        margin:10px auto;
        border-radius:16px;
        max-height:calc(100vh - 20px);
    }

    .modal-image{
        height:220px;
    }

    .modal-info-col{
        padding:18px;
    }

    .modal-title-row{
        padding-right:34px;
    }

    .modal-price{
        font-size:1.2rem;
    }

    .detail-row{
        padding:9px 12px;
        font-size:13.5px;
    }

    .modal-actions{
        flex-direction:column;
    }

    .action-btn{
        width:100%;
        min-width:0;
    }

    .report-btn{
        width:100%;
    }

    .close-modal{
        width:34px;
        height:34px;
        font-size:1.2rem;
    }

    .gallery-thumb{
        width:56px;
        height:56px;
    }

    .analytics-modal-content{
        padding:20px;
    }

    .analytics-stat-grid{
        gap:10px;
    }

    /* ---- Profile page ---- */
    .profile-cover{
        height:90px;
    }

    .profile-avatar-wrap{
        margin-top:-34px;
    }

    .profile-avatar{
        width:74px;
        height:74px;
        font-size:1.6rem;
        border-width:4px;
    }

    .profile-header-body{
        flex-direction:column;
        align-items:flex-start;
        padding:0 18px 18px;
        gap:12px;
    }

    .profile-header-info{
        padding-top:6px;
    }

    .profile-header-info h2{
        font-size:1.15rem;
    }

    .profile-header-actions{
        width:100%;
        flex-direction:column;
    }

    .profile-header-actions .secondary-btn,
    .profile-header-actions .card-icon-btn{
        width:100%;
    }

    .profile-completion-card,
    .verification-card,
    .trust-score-card,
    .profile-activity-card,
    .profile-achievements-card{
        padding:18px;
    }

    .profile-progress-track{
        height:11px;
    }

    .trust-score-card{
        flex-direction:column;
        text-align:center;
    }

    /* ---- Footer: centered & stacked ---- */
    .footer-inner{
        grid-template-columns:1fr;
        text-align:center;
        gap:30px;
        padding:44px 6% 30px;
    }

    .footer-brand p{
        margin-left:auto;
        margin-right:auto;
    }

    .footer-socials{
        justify-content:center;
    }

    .footer-col h4{
        margin-bottom:12px;
    }
}

/* ====================================
   SMALL MOBILE  (max-width: 576px)
==================================== */
@media (max-width:576px){

    main{
        padding:14px 4%;
    }

    .hero-section{
        margin:-14px -4% 0 -4%;
    }

    /* ---- Header ---- */
    .logo img{
        height:30px;
    }

    .logo h2{
        font-size:1.1rem;
    }

    .nav-btn span,
    .nav-btn{
        font-size:11.5px;
        padding:6px 10px;
    }

    /* ---- Hero ---- */
    .hero-inner h1{
        font-size:1.75rem;
    }

    .hero-subtitle{
        font-size:13px;
    }

    .hero-search-bar{
        transform:none;
        margin-top:18px;
    }

    /* ---- Category ---- */
    .category-row{
        gap:8px;
    }

    .category-card{
        padding:12px 6px;
    }

    .category-icon{
        width:38px;
        height:38px;
        font-size:0.9rem;
    }

    .category-card h4{
        font-size:11.5px;
    }

    /* ---- Property cards ---- */
    .featured-image,
    .house-image{
        height:160px;
    }

    .featured-price,
    .house-price{
        font-size:1.05rem;
    }

    /* ---- Stats ---- */
    .stats-row{
        grid-template-columns:repeat(2,1fr);
        padding:26px 16px;
    }

    .stat-number{
        font-size:1.7rem;
    }

    /* ---- Dashboard ---- */
    .dashboard-card span{
        font-size:1.25rem;
    }

    .dashboard-card-icon{
        width:38px;
        height:38px;
        font-size:1rem;
    }

    /* ---- Wizard progress: avoid overflow ---- */
    .wizard-progress-step{
        min-width:40px;
    }

    .wizard-progress-circle{
        width:28px;
        height:28px;
        font-size:11.5px;
    }

    .wizard-progress-label{
        font-size:8.5px;
    }

    /* ---- Modal ---- */
    .modal-image{
        height:190px;
    }

    .gallery-nav{
        width:32px;
        height:32px;
        font-size:13px;
    }

    .amenities-list,
    .amenities-checkbox-group{
        grid-template-columns:repeat(2,1fr);
    }

    /* ---- Profile ---- */
    .profile-avatar{
        width:64px;
        height:64px;
        font-size:1.4rem;
    }

    .achievements-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .document-upload-grid{
        grid-template-columns:repeat(2,1fr);
    }

    /* ---- Buttons ---- */
    .primary-btn,
    .secondary-btn{
        padding:10px 16px;
        font-size:13.5px;
    }

    /* ---- Footer ---- */
    .footer-socials a{
        width:32px;
        height:32px;
        font-size:13px;
    }

    .footer-brand h3{
        font-size:1.15rem;
    }
}

/* ===================================================================
   LANDLORD PORTAL — SETTINGS + PROFILE COMPLETION (ADDITIVE)
   Reuses existing color variables, buttons, form-group, and
   verification-item styles for visual consistency.
=================================================================== */

/* ---- Profile completion: 100% completed state ---- */
.profile-completed-banner{
    display:none;
    align-items:center;
    gap:10px;
    background:#eafaf1;
    color:#0f9d58;
    border:1px solid #bfead0;
    border-radius:12px;
    padding:14px 16px;
    font-weight:700;
    font-size:15px;
    margin-bottom:2px;
}

.profile-completed-banner i{
    font-size:1.2rem;
}

/* ---- Settings modal shell ---- */
.settings-modal-content{
    max-width:640px;
    padding:30px;
    max-height:88vh;
    overflow-y:auto;
}

.settings-modal-content .section-title h3{
    display:flex;
    align-items:center;
    gap:10px;
}

.settings-section{
    margin-top:26px;
    padding-top:22px;
    border-top:1px solid var(--border);
}

.settings-section:first-of-type{
    margin-top:22px;
    padding-top:0;
    border-top:none;
}

.settings-section-heading{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--primary);
    font-size:15px;
    font-weight:700;
    margin-bottom:14px;
}

.settings-section-heading i{
    width:18px;
    text-align:center;
}

/* ---- Password field with show/hide toggle ---- */
.password-field-wrap{
    position:relative;
}

.password-field-wrap input{
    width:100%;
    padding-right:42px;
}

.password-toggle-btn{
    position:absolute;
    right:5px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:none;
    cursor:pointer;
    color:var(--muted);
    width:32px;
    height:32px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
}

.password-toggle-btn:hover{
    background:#f3f4f6;
    color:var(--primary);
}

/* ---- Account security: "coming soon" status pill ---- */
.verify-status-label.coming-soon{
    background:#eef2f7;
    color:var(--muted);
}

/* ---- Notification / preference toggle rows ---- */
.settings-toggle-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:12px 0;
    border-bottom:1px solid var(--border);
}

.settings-toggle-row:last-child{
    border-bottom:none;
}

.settings-toggle-row-label{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.settings-toggle-row-label strong{
    font-size:14px;
    color:var(--ink);
    font-weight:600;
}

.settings-toggle-row-label span{
    font-size:12.5px;
    color:var(--muted);
}

/* ---- Toggle switch component ---- */
.settings-switch{
    position:relative;
    display:inline-block;
    width:44px;
    height:24px;
    flex-shrink:0;
}

.settings-switch input{
    opacity:0;
    width:0;
    height:0;
}

.settings-switch-slider{
    position:absolute;
    cursor:pointer;
    inset:0;
    background:#dfe4ea;
    border-radius:999px;
    transition:var(--transition);
}

.settings-switch-slider::before{
    content:"";
    position:absolute;
    height:18px;
    width:18px;
    left:3px;
    top:3px;
    background:#fff;
    border-radius:50%;
    transition:var(--transition);
    box-shadow:var(--shadow-sm);
}

.settings-switch input:checked + .settings-switch-slider{
    background:var(--secondary);
}

.settings-switch input:checked + .settings-switch-slider::before{
    transform:translateX(20px);
}

.settings-switch input:focus-visible + .settings-switch-slider{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

/* ---- Account management (danger zone) buttons ---- */
.settings-danger-zone{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.settings-danger-btn{
    width:100%;
    text-align:left;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid var(--border);
    background:#fff;
    padding:12px 16px;
    border-radius:10px;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    transition:var(--transition);
    color:var(--text);
}

.settings-danger-btn:hover{
    background:#f8fafc;
    transform:translateY(-1px);
}

.settings-danger-btn.warning{
    color:var(--warning);
    border-color:#fde8c8;
}

.settings-danger-btn.warning:hover{
    background:#fff8ec;
}

.settings-danger-btn.danger{
    color:var(--danger);
    border-color:#fbd5d5;
}

.settings-danger-btn.danger:hover{
    background:#fef2f2;
}

/* ---- Mobile: settings modal ---- */
@media (max-width:768px){

    .settings-modal-content{
        padding:20px;
    }

    .settings-toggle-row{
        align-items:flex-start;
    }
}

/* ===================================================================
   PROPERTY → BLOCK → UNIT ARCHITECTURE (ADDITIVE)
   Reuses existing modal, form, button, and status-badge patterns.
=================================================================== */

.estate-modal-content{
    max-width:860px;
    overflow-y:hidden;
}

/* The close button is positioned absolute relative to .modal-content.
   Scrolling .modal-content itself (like other modals do) would carry
   the button away with the content once it's tall enough to scroll —
   so instead #estateModalBody scrolls internally, keeping the close
   button fixed in the top-right corner at all times. */
#estateModalBody{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
}

/* Same fix, same reason, for the Viewing Calendar and Viewing Requests
   modals — both can grow tall enough (many dates/slots, many requests)
   to scroll, which was carrying their close buttons out of view too. */
#viewingCalendarModal .modal-content{
    overflow-y:hidden;
}

#viewingCalendarModalBody{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
}

#viewingRequestsModal .modal-content{
    overflow-y:hidden;
}

#viewingRequestsModalBody{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
}

/* ---- 4-state unit status pills (extends existing 2-state colors) ---- */
.status-reserved{
    background:#fef3c7;
    color:#b45309;
}

.status-unavailable{
    background:#e5e7eb;
    color:#4b5563;
}

/* ---- Breadcrumb navigation inside the estate manager ---- */
.estate-breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    font-size:13px;
    color:var(--muted);
    margin-bottom:18px;
}

.estate-breadcrumb button{
    border:none;
    background:none;
    color:var(--primary);
    font-weight:600;
    cursor:pointer;
    padding:0;
    font-size:13px;
}

.estate-breadcrumb button:hover{
    text-decoration:underline;
}

.estate-breadcrumb span.current{
    color:var(--text);
    font-weight:600;
}

/* ---- Generic row-based list (estates / blocks / units / requests) ---- */
.estate-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:18px;
}

.estate-list-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    flex-wrap:wrap;
}

.estate-list-item-info h4{
    font-size:14.5px;
    color:var(--ink);
    margin-bottom:3px;
}

.estate-list-item-info p{
    font-size:12.5px;
    color:var(--muted);
    margin:0;
}

.estate-list-item-badges{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-top:6px;
}

.estate-list-item-badges .house-status{
    font-size:11px;
    padding:3px 9px;
}

.estate-list-item-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

/* ---- My Viewings — Incoming / Expired sections ---- */
.viewings-section-title{
    margin:22px 0 12px;
}

.viewings-section-title:first-child{
    margin-top:0;
}

.viewings-section-title h3{
    font-size:16px;
    color:var(--ink);
    margin-bottom:2px;
}

.viewings-section-title p{
    font-size:12.5px;
    color:var(--muted);
    margin:0;
}

.viewings-section-empty{
    font-size:13px;
    color:var(--muted);
    padding:14px 16px;
    border:1px dashed var(--border);
    border-radius:12px;
    margin-bottom:18px;
}

.viewing-countdown{
    display:inline-block;
    margin-left:8px;
    padding:2px 8px;
    border-radius:999px;
    background:#fef3c7;
    color:#b45309;
    font-size:11.5px;
    font-weight:600;
}

.viewing-countdown i{
    margin-right:3px;
}

.danger-btn{
    color:#b91c1c;
    border-color:#fecaca;
}

.danger-btn:hover{
    background:#fee2e2;
}

.estate-empty-note{
    font-size:13.5px;
    color:var(--muted);
    padding:18px 0;
    text-align:center;
}

/* Available Units list inside the Estate/Block modal — the row
   itself is clickable (selects that exact unit), on top of its own
   "View Unit" button. */
.estate-unit-select-item{
    cursor:pointer;
    transition:var(--transition);
}

.estate-unit-select-item:hover{
    border-color:var(--primary);
    transform:translateY(-2px);
}

/* ====================================
   TENANT PORTAL DASHBOARD (Phase 2)
   Reuses .dashboard-card / .dashboard-grid,
   .estate-list-item, .house-status and
   .estate-empty-note from elsewhere in this
   file for visual consistency.
==================================== */

.tenant-dash-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px;
    margin-top:10px;
}

.tenant-dash-col{
    display:flex;
    flex-direction:column;
}

.tenant-dash-panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:22px 0 12px 0;
}

.tenant-dash-panel-header:first-child{
    margin-top:0;
}

.tenant-dash-panel-header h3{
    font-size:15.5px;
    color:var(--ink);
}

.tenant-dash-panel-body .estate-list-item{
    cursor:default;
}

.tenant-dash-panel-body .estate-list-item.tenant-dash-item-clickable{
    cursor:pointer;
    transition:var(--transition);
}

.tenant-dash-panel-body .estate-list-item.tenant-dash-item-clickable:hover{
    border-color:var(--primary);
    transform:translateY(-2px);
}

.tenant-dash-empty{
    font-size:13.5px;
    color:var(--muted);
    text-align:center;
    padding:22px 16px;
    border:1px dashed var(--border);
    border-radius:12px;
}

.tenant-dash-empty p{
    margin-bottom:10px;
}

.tenant-dash-cta{
    display:flex;
    justify-content:center;
    margin:36px 0 10px 0;
}

.link-btn{
    background:none;
    border:none;
    cursor:pointer;
    color:var(--primary);
    font-size:13.5px;
    font-weight:600;
    padding:0;
}

.link-btn:hover{
    text-decoration:underline;
}

#featuredNearMeBtn{
    margin-top:6px;
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.photo-upload-status{
    font-size:13px;
    color:var(--primary);
    font-weight:600;
    margin:0 0 8px;
    display:flex;
    align-items:center;
    gap:6px;
}

.photo-upload-status::before{
    content:"";
    width:12px;
    height:12px;
    border:2px solid var(--primary);
    border-top-color:transparent;
    border-radius:50%;
    animation:hh-spin 0.8s linear infinite;
}

/* ---- Tenant portal placeholder (My Viewings / Profile / Settings) ---- */
.tenant-placeholder-box{
    text-align:center;
    padding:60px 20px;
    border:1px dashed var(--border);
    border-radius:var(--radius);
    color:var(--muted);
}

.tenant-placeholder-box i{
    font-size:2rem;
    color:var(--primary);
    margin-bottom:14px;
    display:block;
}

.tenant-placeholder-box p{
    max-width:420px;
    margin:0 auto 18px auto;
}

@media (max-width:900px){

    .tenant-dash-columns{
        grid-template-columns:1fr;
    }
}

/* ---- Unit status dropdown ---- */
.unit-status-select{
    border:1px solid var(--border);
    border-radius:8px;
    padding:8px 10px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    background:#fff;
    color:var(--ink);
}

/* ---- Section used for "add estate" / "add block" forms inside the modal ---- */
.estate-form-section{
    border-top:1px solid var(--border);
    padding-top:18px;
    margin-top:18px;
}

.estate-form-section .section-title h3{
    font-size:15px;
}

/* ---- Viewing calendar ---- */
.viewing-enable-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:12px 0;
    border-bottom:1px solid var(--border);
    margin-bottom:16px;
}

.viewing-date-block{
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px 16px;
    margin-bottom:12px;
}

.viewing-date-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
}

.viewing-date-header h4{
    font-size:14px;
    color:var(--ink);
}

.viewing-slot-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 0;
    border-top:1px solid var(--border);
    flex-wrap:wrap;
}

.viewing-slot-row:first-of-type{
    border-top:none;
}

.viewing-slot-time{
    font-weight:600;
    font-size:13.5px;
    color:var(--ink);
}

.viewing-slot-capacity{
    font-size:12px;
    color:var(--muted);
}

.viewing-slot-full{
    color:var(--danger);
    font-weight:700;
    font-size:12px;
}

.viewing-slot-actions{
    display:flex;
    gap:6px;
}

.add-date-form,
.add-slot-form{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:flex-end;
    margin-top:12px;
}

.add-date-form .form-group,
.add-slot-form .form-group{
    margin:0;
}

.add-date-form input,
.add-slot-form input{
    padding:10px;
}

/* ---- Mobile ---- */
@media (max-width:768px){

    .estate-modal-content{
        max-width:100%;
    }

    .estate-list-item{
        flex-direction:column;
        align-items:flex-start;
    }

    .estate-list-item-actions{
        width:100%;
    }

    .estate-list-item-actions button{
        flex:1;
    }

    .add-date-form,
    .add-slot-form{
        flex-direction:column;
        align-items:stretch;
    }
}

/* ===================================================================
   ADD PROPERTY — TYPE CHOICE (ADDITIVE)
   Reuses existing modal/section-title/color-variable patterns.
=================================================================== */

.add-property-choice-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:8px;
}

.add-property-choice-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    gap:8px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    padding:22px 20px;
    cursor:pointer;
    transition:var(--transition);
}

.add-property-choice-card:hover{
    border-color:var(--primary);
    box-shadow:var(--shadow-sm);
    transform:translateY(-2px);
}

.add-property-choice-card i{
    font-size:1.6rem;
    color:var(--primary);
}

.add-property-choice-card h4{
    font-size:15px;
    color:var(--ink);
}

.add-property-choice-card p{
    font-size:12.5px;
    color:var(--muted);
    margin:0;
}

@media (max-width:576px){

    .add-property-choice-grid{
        grid-template-columns:1fr;
    }
}

/* ====================================
   BLOCK-LEVEL VIEWING — initial vs final
   unit, and alternative units offered
   during a My Viewings appointment.
==================================== */

.viewing-unit-history{
    color:var(--muted);
    font-size:12.5px;
}

.viewing-alt-units{
    margin-top:8px;
    padding-top:8px;
    border-top:1px dashed var(--border);
    display:flex;
    flex-direction:column;
    gap:4px;
}

.viewing-alt-units-label{
    color:var(--muted);
    font-size:12.5px;
    margin-bottom:2px;
}

.viewing-alt-units .link-btn{
    text-align:left;
}

/* ====================================
   NOTIFICATIONS (Phase A)
==================================== */

.notification-item{
    cursor:pointer;
    transition:var(--transition);
}

.notification-item:hover{
    border-color:var(--primary);
}

.notification-unread{
    background:#eef3f8;
    border-color:var(--primary);
}

.notification-item h4{
    display:flex;
    align-items:center;
    gap:8px;
}

.notification-time{
    color:var(--muted);
    font-size:12px;
}

.notification-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--primary);
    flex-shrink:0;
}

/* ====================================
   NOTIFICATIONS (Phase B — actions,
   navigation & management)
==================================== */

.notification-header-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.notification-clear-btn:hover{
    border-color:#e33;
    color:#e33;
}

.notification-item{
    padding:0;
    overflow:visible;
    gap:0;
}

.notification-open{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex:1;
    min-width:0;
    padding:14px 16px;
    cursor:pointer;
}

.notification-menu{
    position:relative;
    flex-shrink:0;
    padding-right:8px;
}

.notification-menu-btn{
    border:none;
    background:none;
    cursor:pointer;
    color:var(--muted);
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
    font-size:15px;
}

.notification-menu-btn:hover,
.notification-menu-btn[aria-expanded="true"]{
    background:#eef3f8;
    color:var(--primary);
}

.notification-menu-dropdown{
    display:none;
    position:absolute;
    right:8px;
    top:calc(100% + 4px);
    background:#fff;
    border-radius:10px;
    box-shadow:var(--shadow-lg);
    min-width:170px;
    overflow:hidden;
    z-index:150;
}

.notification-menu-dropdown.show{
    display:block;
}

.notification-menu-dropdown button{
    width:100%;
    text-align:left;
    border:none;
    background:none;
    cursor:pointer;
    padding:12px 16px;
    font-size:13.5px;
    font-weight:600;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:8px;
    transition:var(--transition);
}

.notification-menu-dropdown button:hover{
    background:#f3f4f6;
    color:var(--primary);
}

.notification-menu-dropdown button + button{
    border-top:1px solid var(--border);
}

.notification-menu-dropdown button.notification-menu-delete:hover{
    background:#fdeceb;
    color:#e33;
}

.estate-list-item-highlighted{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(20,110,200,.15);
}

@media (max-width:768px){

    .notification-item{
        flex-direction:row;
        align-items:stretch;
    }

    .notification-open{
        flex-wrap:wrap;
        padding:12px;
    }

    .notification-menu-dropdown{
        right:4px;
        min-width:160px;
    }

    .notification-header-actions{
        width:100%;
    }

    .notification-header-actions button{
        flex:1;
    }
}

/* ---- Button loading spinner (fallback in case FontAwesome's own
   fa-spin animation isn't loaded — safe to keep either way) ---- */
@keyframes hh-spin{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
}

.fa-spin{
    animation:hh-spin 0.8s linear infinite;
}

button:disabled{
    opacity:0.75;
    cursor:not-allowed;
}

.listings-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin:28px 0;
}

.listings-pagination-status{
    font-size:14px;
    color:var(--muted);
    font-weight:600;
}