/* ============================================================
   Real Estate PP — Public Site CSS
   Theme colours come from SiteSettings via inline CSS vars in _Layout.
   ============================================================ */

:root {
    --re-primary: #2563EB;
    --re-accent: #F59E0B;
    --re-dark: #0F172A;
    --re-light: #F8FAFC;
    --re-border: #E2E8F0;
    --re-muted: #64748B;
}

html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Bengali", "Hind Siliguri", sans-serif;
    color: #1e293b;
    background: #fff;
    line-height: 1.6;
}

a { color: var(--re-primary); text-decoration: none; }
a:hover { color: var(--re-dark); }

.btn-primary { background: var(--re-primary); border-color: var(--re-primary); }
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.btn-outline-primary { color: var(--re-primary); border-color: var(--re-primary); }
.btn-outline-primary:hover { background: var(--re-primary); border-color: var(--re-primary); }
.btn-accent { background: var(--re-accent); border-color: var(--re-accent); color: #fff; }
.btn-accent:hover { background: #d97e07; border-color: #d97e07; color: #fff; }

.text-primary { color: var(--re-primary) !important; }
.text-accent  { color: var(--re-accent) !important; }
.bg-primary   { background: var(--re-primary) !important; }
.bg-accent    { background: var(--re-accent) !important; }
.bg-dark-re   { background: var(--re-dark) !important; color: #fff; }

/* ===== Top bar ===== */
.topbar { background: var(--re-dark); color: #cbd5e1; font-size: 13px; padding: 8px 0; }
.topbar a { color: #cbd5e1; }
.topbar a:hover { color: #fff; }

/* ===== Header ===== */
.site-header { background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.05); position: sticky; top: 0; z-index: 1020; }
.site-header .navbar-brand { font-weight: 800; color: var(--re-dark); font-size: 22px; }
.site-header .nav-link { color: #334155; font-weight: 500; padding: 12px 14px; }
.site-header .nav-link.active, .site-header .nav-link:hover { color: var(--re-primary); }

/* ===== Hero ===== */
.hero { position: relative; min-height: 560px; background: var(--re-dark); color: #fff; overflow: hidden; }
.hero .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .8s ease; }
.hero .hero-slide.active { opacity: 1; }
.hero .hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15,23,42,.75), rgba(15,23,42,.35)); }
.hero .hero-content { position: relative; z-index: 2; padding: 80px 0 140px; max-width: 720px; }
.hero h1 { font-size: 48px; font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
.hero p.lead { font-size: 18px; opacity: .9; margin-bottom: 24px; }

/* ===== Search bar =====
   Base: a plain raised card with no negative margin. The home page's hero overlap
   variant is the second rule (only applies when the search card immediately follows
   the hero section), so the same class is safe on /properties, /projects, /search. */
.search-card { background: #fff; color: #1e293b; border-radius: 12px; box-shadow: 0 16px 40px rgba(15,23,42,.18); padding: 16px; margin-top: 0; position: relative; z-index: 3; }
.hero + .container > .search-card { margin-top: -60px; }
.search-card .form-select, .search-card .form-control { border-color: var(--re-border); }

/* ===== Sections ===== */
.section { padding: 70px 0; }
.section.bg-light { background: var(--re-light); }
.section-title { text-align: center; margin-bottom: 40px; }
.section-title .eyebrow { color: var(--re-primary); font-size: 14px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.section-title h2 { font-size: 34px; font-weight: 800; color: var(--re-dark); margin-top: 8px; }
.section-title p { color: var(--re-muted); margin-top: 8px; }

/* ===== Property card ===== */
.property-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 18px rgba(15,23,42,.06); transition: transform .25s ease, box-shadow .25s ease; height: 100%; }
.property-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15,23,42,.12); }
.property-card .card-img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #e2e8f0; }
.property-card .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.property-card:hover .card-img img { transform: scale(1.05); }
.property-card .badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; }
.property-card .badge-purpose { background: var(--re-primary); color: #fff; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.property-card .badge-purpose.rent { background: var(--re-accent); }
.property-card .badge-featured { background: var(--re-dark); color: #fff; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.property-card .card-body { padding: 16px 18px 18px; }
.property-card .price { color: var(--re-accent); font-size: 20px; font-weight: 800; }
.property-card .title { color: var(--re-dark); font-size: 17px; font-weight: 700; margin: 6px 0; }
.property-card .location { color: var(--re-muted); font-size: 13px; margin-bottom: 12px; }
.property-card .meta { display: flex; gap: 14px; color: var(--re-muted); font-size: 13px; border-top: 1px solid var(--re-border); padding-top: 12px; }
.property-card .meta span i { color: var(--re-primary); margin-right: 4px; }

/* ===== Type / Service card ===== */
.type-card, .service-card { background: #fff; border-radius: 12px; padding: 28px 20px; text-align: center; border: 1px solid var(--re-border); transition: all .25s; height: 100%; }
.type-card:hover, .service-card:hover { border-color: var(--re-primary); box-shadow: 0 12px 24px rgba(37,99,235,.1); transform: translateY(-3px); }
.type-card .icon-wrap, .service-card .icon-wrap { width: 64px; height: 64px; border-radius: 50%; background: rgba(37,99,235,.1); color: var(--re-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 14px; }
.type-card h5, .service-card h5 { color: var(--re-dark); font-weight: 700; }

/* ===== Stats counter ===== */
.stat-card { text-align: center; color: #fff; padding: 30px 16px; }
.stat-card .stat-num { font-size: 48px; font-weight: 800; line-height: 1; }
.stat-card .stat-label { font-size: 14px; opacity: .85; margin-top: 8px; }

/* ===== Project card ===== */
.project-card { border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 6px 24px rgba(15,23,42,.08); height: 100%; }
.project-card .pc-img { aspect-ratio: 16/10; background: #cbd5e1; }
.project-card .pc-img img { width: 100%; height: 100%; object-fit: cover; }
.project-card .pc-body { padding: 16px 18px; background: #fff; }
.project-card .pc-status { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.project-card .pc-status.ongoing { background: rgba(245,158,11,.15); color: #b45309; }
.project-card .pc-status.upcoming { background: rgba(37,99,235,.15); color: var(--re-primary); }
.project-card .pc-status.completed { background: rgba(16,185,129,.15); color: #047857; }

/* ===== Testimonial ===== */
.testi-card { background: #fff; border-radius: 12px; padding: 26px; border: 1px solid var(--re-border); height: 100%; }
.testi-card .stars { color: var(--re-accent); margin-bottom: 10px; }
.testi-card .testi-msg { color: #334155; font-style: italic; }
.testi-card .testi-name { font-weight: 700; color: var(--re-dark); margin-top: 14px; }

/* ===== Agent card ===== */
.agent-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(15,23,42,.06); text-align: center; height: 100%; }
.agent-card .agent-photo { aspect-ratio: 1; background: #cbd5e1; }
.agent-card .agent-photo img { width: 100%; height: 100%; object-fit: cover; }
.agent-card .agent-body { padding: 18px; }
.agent-card .agent-name { font-weight: 700; color: var(--re-dark); }
.agent-card .agent-desig { color: var(--re-muted); font-size: 13px; }
.agent-card .agent-social a { color: var(--re-muted); margin: 0 5px; }
.agent-card .agent-social a:hover { color: var(--re-primary); }

/* ===== Partners ===== */
.partner-logo { padding: 10px; opacity: .7; transition: opacity .2s; }
.partner-logo:hover { opacity: 1; }
.partner-logo img { max-height: 60px; max-width: 140px; }

/* ===== Footer ===== */
.site-footer { background: var(--re-dark); color: #cbd5e1; padding: 60px 0 24px; margin-top: 60px; }
.site-footer h5 { color: #fff; font-weight: 700; margin-bottom: 18px; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; }
.site-footer a { color: #cbd5e1; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 40px; padding-top: 20px; font-size: 13px; }

/* ===== Floating WhatsApp + Call ===== */
.float-actions { position: fixed; right: 18px; bottom: 18px; z-index: 1030; display: flex; flex-direction: column; gap: 10px; }
.float-actions a { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.float-actions .fa-whatsapp { background: #25D366; }
.float-actions .fa-call { background: var(--re-primary); }

/* ===== Misc ===== */
.form-control:focus, .form-select:focus { border-color: var(--re-primary); box-shadow: 0 0 0 .2rem rgba(37,99,235,.15); }
.divider { height: 4px; width: 60px; background: var(--re-primary); border-radius: 2px; margin: 0 auto; }

/* ===== Favorites widget (in topbar) ===== */
.re-fav-widget .btn { padding: 2px 8px; font-size: 12px; line-height: 1.4; }
.re-fav-widget .btn .badge { font-size: 10px; padding: 2px 5px; }

/* ===== Lift floating actions above cookie banner when banner is visible ===== */
body:has(.re-cookie-banner[style*="display: block"]) .float-actions { bottom: 90px; }

/* ===== TABLET ===== */
@media (max-width: 991.98px) {
    .topbar .small { font-size: 12px; }
    .topbar .small span { display: inline-block; }
    .hero { min-height: 480px; }
    .hero h1 { font-size: 38px; }
    .property-card .meta { gap: 8px; font-size: 12px; }
    .site-header .navbar-brand { font-size: 18px; }
    .section-title h2 { font-size: 28px; }
}

/* ===== MOBILE ===== */
@media (max-width: 767.98px) {
    /* Topbar: keep only phone + lang/fav on small screens */
    .topbar { padding: 6px 0; font-size: 11px; }
    .topbar .small { font-size: 11px; flex: 1 1 auto; }
    .topbar a i { font-size: 14px; }
    /* Hide social icons in topbar on mobile (still in footer) */
    .topbar a.bi-facebook, .topbar a.bi-youtube, .topbar a.bi-instagram, .topbar a.bi-linkedin { display: none; }
    .re-fav-widget { gap: 4px !important; }
    .re-fav-widget .btn { padding: 1px 5px; font-size: 10px; }

    /* Hero */
    .hero { min-height: 420px; }
    .hero .hero-content { padding: 40px 0 90px; }
    .hero h1 { font-size: 26px; line-height: 1.25; }
    .hero p.lead { font-size: 15px; }
    .hero .btn-lg { padding: 10px 18px; font-size: 15px; }

    /* Search card stacks fully */
    .search-card { margin-top: -40px; padding: 12px; }
    .search-card .col-md-3 { margin-bottom: 6px; }

    /* Sections */
    .section { padding: 36px 0; }
    .section-title { margin-bottom: 28px; }
    .section-title h2 { font-size: 22px; }
    .section-title .eyebrow { font-size: 11px; }

    /* Property card */
    .property-card .card-body { padding: 12px 14px 14px; }
    .property-card .price { font-size: 17px; }
    .property-card .title { font-size: 15px; }
    .property-card .meta { gap: 10px; font-size: 11px; padding-top: 8px; }

    /* Type/Service card */
    .type-card, .service-card { padding: 20px 12px; }
    .type-card .icon-wrap, .service-card .icon-wrap { width: 48px; height: 48px; font-size: 22px; }
    .type-card h5, .service-card h5 { font-size: 14px; }

    /* Stats */
    .stat-card { padding: 18px 8px; }
    .stat-card .stat-num { font-size: 32px; }

    /* Project card */
    .project-card .pc-body { padding: 12px 14px; }
    .project-card .pc-body h5 { font-size: 16px; }

    /* Testimonial */
    .testi-card { padding: 18px; }

    /* Agent card */
    .agent-card .agent-body { padding: 12px; }
    .agent-card .agent-name { font-size: 14px; }
    .agent-card .agent-desig { font-size: 12px; }

    /* Footer */
    .site-footer { padding: 40px 0 20px; margin-top: 40px; }
    .site-footer h5 { font-size: 14px; margin-bottom: 12px; }

    /* Floating actions smaller on mobile */
    .float-actions { right: 12px; bottom: 12px; gap: 8px; }
    .float-actions a { width: 46px; height: 46px; font-size: 18px; }

    /* Cookie banner stacks */
    .re-cookie-banner .container { flex-direction: column; align-items: stretch !important; text-align: center; }
}

/* ===== EXTRA SMALL (phones) ===== */
@media (max-width: 480px) {
    .hero h1 { font-size: 22px; }
    .hero p.lead { font-size: 13px; }
    .section-title h2 { font-size: 19px; }
    .property-card .badges { top: 8px; left: 8px; gap: 4px; }
    .property-card .badge-purpose, .property-card .badge-featured { padding: 3px 7px; font-size: 10px; }
}

/* ============================================================
   Detail-page polish (Property/Project tabs, key-fact tiles)
   ============================================================ */

/* Bootstrap nav-tabs/pills become horizontally scrollable on mobile so the
   last tab doesn't get clipped on Property/Project detail pages. */
@media (max-width: 767.98px) {
    .nav-tabs, .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; padding: .5rem .75rem; font-size: 14px; }
    .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { height: 3px; }
    .nav-tabs::-webkit-scrollbar-thumb, .nav-pills::-webkit-scrollbar-thumb { background: var(--re-border); border-radius: 2px; }
}

/* "Key fact" tiles (bg-light rounded p-3 text-center) on Property & Project
   detail pages — shrink on phones so values like "Apartment" / "Jul 2027"
   don't get truncated. */
@media (max-width: 575.98px) {
    .bg-light.rounded.p-3.text-center { padding: .65rem !important; }
    .bg-light.rounded.p-3.text-center .fs-3 { font-size: 1.25rem !important; }
    .bg-light.rounded.p-3.text-center .fw-bold { font-size: .92rem; word-break: break-word; line-height: 1.2; margin-top: .25rem !important; }
    .bg-light.rounded.p-3.text-center .small { font-size: 10.5px; }

    /* Detail page large headings smaller on phones */
    .h2.fw-bold { font-size: 1.35rem; }
    .h3.fw-bold { font-size: 1.25rem; }
}

/* Modal mobile — full-width with margin */
@media (max-width: 575.98px) {
    .modal-dialog { margin: .5rem; }
    .modal-content { border-radius: 10px; }
    .modal-body { padding: 1rem; }
}

/* Newsletter footer form — input + button stack vertically on phones */
@media (max-width: 575.98px) {
    .site-footer .col-lg-3 form { flex-wrap: wrap; }
    .site-footer .col-lg-3 form .form-control { flex: 1 1 100%; }
    .site-footer .col-lg-3 form .btn { flex: 1 1 100%; }
    .site-footer .footer-bottom { text-align: center; flex-direction: column; gap: .5rem !important; }
    .site-footer .footer-bottom > div { width: 100%; }
    .site-footer .col-6 h5 { font-size: 13px; margin-bottom: 8px; }
}

/* Background placeholder color while images load */
.property-card .card-img img,
.project-card .pc-img img,
.agent-card .agent-photo img { background: #e2e8f0; }

/* ===== PRINT ===== */
@media print {
    .topbar, .site-header, .site-footer, .float-actions, .re-cookie-banner, .re-fav-widget { display: none !important; }
    .section { padding: 20px 0; }
}