/* ── Brand colours ─────────────────────────────────────────────── */
:root {
    --navy:  #1a3c5e;
    --gold:  #c9a84c;
    --light: #f8f9fa;
}

/* ── Utilities ──────────────────────────────────────────────────── */
.text-navy  { color: var(--navy) !important; }
.text-gold  { color: var(--gold) !important; }
.bg-navy    { background-color: var(--navy) !important; }
.bg-gold    { background-color: var(--gold) !important; }
.btn-navy   { background-color: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background-color: #14304e; color: #fff; }
.btn-outline-navy { border-color: var(--navy); color: var(--navy); }
.btn-outline-navy:hover { background-color: var(--navy); color: #fff; }
.btn-gold   { background-color: var(--gold); color: #fff; border-color: var(--gold); }
.btn-gold:hover { background-color: #b8943c; color: #fff; }

/* ── Navbar ─────────────────────────────────────────────────────── */
.navbar-dark.bg-navy .nav-link { color: rgba(255,255,255,.85); }
.navbar-dark.bg-navy .nav-link:hover { color: var(--gold); }
.lang-menu { max-height: 360px; overflow-y: auto; }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
    min-height: 520px;
    background: linear-gradient(135deg, rgba(26,60,94,.82) 0%, rgba(26,60,94,.6) 100%),
                url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=1600') center/cover no-repeat;
    padding: 80px 0;
}
@media (max-width: 575.98px) {
    .hero { min-height: 400px; padding: 50px 0; }
}

/* ── Section title ──────────────────────────────────────────────── */
.section-title {
    font-weight: 700;
    color: var(--navy);
    position: relative;
    padding-bottom: 10px;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 48px; height: 3px;
    background: var(--gold);
    border-radius: 2px;
}

/* ── Property cards ─────────────────────────────────────────────── */
.property-card { transition: transform .2s, box-shadow .2s; border-radius: 12px; overflow: hidden; }
.property-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.12) !important; }
.property-img-wrap { position: relative; overflow: hidden; }
.property-img { height: 200px; width: 100%; object-fit: cover; transition: transform .35s; }
.property-card:hover .property-img { transform: scale(1.04); }
.property-badge { position: absolute; top: 10px; left: 10px; background: var(--navy); color: #fff; font-size: .7rem; }

/* ── Favourite button ───────────────────────────────────────────── */
.fav-btn {
    position: absolute; top: 10px; right: 10px;
    width: 34px; height: 34px; padding: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    border: none;
    color: #ccc;
    display: flex; align-items: center; justify-content: center;
    transition: color .2s, background .2s;
}
.fav-btn:hover, .fav-btn.fav-active { color: #e74c3c; background: #fff; }

/* ── Why icons ──────────────────────────────────────────────────── */
.why-icon { font-size: 2.5rem; }

/* ── Footer ─────────────────────────────────────────────────────── */
.footer-link { color: rgba(255,255,255,.7); text-decoration: none; transition: color .2s; }
.footer-link:hover { color: var(--gold); }

/* ── Dashboard role badges ──────────────────────────────────────── */
.role-badge { font-size: .75rem; padding: .35em .65em; }
.role-warm   { background-color: #17a2b8 !important; }
.role-hot    { background-color: #fd7e14 !important; }
.role-buyer  { background-color: #28a745 !important; }
.role-admin  { background-color: var(--navy) !important; }

/* ── Status steps ───────────────────────────────────────────────── */
.status-step { color: #ccc; font-size: .9rem; }
.status-step.active { color: var(--navy); font-weight: 600; }

/* ── Admin layout ───────────────────────────────────────────────── */
.admin-body { background: #f4f6f9; min-height: 100vh; }

/* Sidebar: always full-height panel on desktop, offcanvas on mobile */
.admin-sidebar {
    width: 220px;
    min-width: 220px;
    background: var(--navy) !important;
    min-height: calc(100vh - 56px);
}
@media (max-width: 991.98px) {
    .admin-sidebar {
        width: 240px !important;
        min-width: 240px !important;
        min-height: 100vh;
    }
}

.admin-main { min-height: calc(100vh - 56px); }
.sidebar-link {
    color: rgba(255,255,255,.75) !important;
    border-radius: 8px;
    padding: .5rem .85rem;
    transition: background .15s, color .15s;
}
.sidebar-link:hover, .sidebar-link.active {
    background: rgba(255,255,255,.12);
    color: var(--gold) !important;
}

/* ── AI Chat widget ─────────────────────────────────────────────── */
.chat-fab {
    position: fixed; bottom: 28px; right: 28px;
    width: 56px; height: 56px;
    border-radius: 50%; z-index: 1050;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.chat-box {
    position: fixed; bottom: 100px; right: 28px;
    width: 340px; z-index: 1049;
    background: #fff; border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 36px rgba(0,0,0,.18);
}
@media (max-width: 575.98px) {
    .chat-box  { width: calc(100vw - 24px); right: 12px; left: 12px; bottom: 88px; }
    .chat-fab  { bottom: 16px; right: 16px; width: 48px; height: 48px; }
}
.chat-header { background: var(--navy); color: #fff; }
.chat-messages { height: 300px; }
.chat-msg {
    max-width: 85%;
    margin-bottom: .65rem;
    padding: .5rem .85rem;
    border-radius: 12px;
    font-size: .875rem;
    line-height: 1.45;
}
.chat-msg.user     { background: var(--navy); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.chat-msg.assistant{ background: #f0f2f5; color: #333; border-bottom-left-radius: 4px; }
.chat-msg.typing   { background: #f0f2f5; color: #999; font-style: italic; }

/* ── Misc ───────────────────────────────────────────────────────── */
.detail-main-img { max-height: 420px; object-fit: cover; }