/* PropertyHub.my — Shared Public CSS (main.css) */
/* SLV Group © 2025                               */

:root {
  --g:         #00b14f;
  --g-dark:    #008f3f;
  --g-deeper:  #005c30;
  --g-light:   #e8f8ef;
  --g-pale:    #f4fbf7;
  --white:     #ffffff;
  --bg:        #f5f6f8;
  --text:      #111827;
  --text2:     #4b5563;
  --muted:     #9ca3af;
  --border:    #e5e7eb;
  --border-l:  #f3f4f6;
  --red:       #ef4444;
  --amber:     #f59e0b;
  --sky:       #0ea5e9;
  --shadow-s:  0 1px 4px rgba(0,0,0,.07);
  --shadow-m:  0 4px 20px rgba(0,0,0,.09);
  --shadow-l:  0 8px 40px rgba(0,0,0,.13);
  --shadow-g:  0 4px 24px rgba(0,177,79,.22);
  --r:         10px;
  --r-l:       16px;
  --r-pill:    100px;
  --max:       1280px;
  --nav-h:     64px;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:'Plus Jakarta Sans',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
button, input, select, textarea { font-family:inherit; }

/* ── CONTAINER ── */
.container { max-width:var(--max); margin:0 auto; padding:0 32px; }
@media(max-width:600px) { .container { padding:0 16px; } }

/* ── NAVBAR ── */
.navbar {
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .2s;
}
.navbar.scrolled { box-shadow:var(--shadow-m); }
.nav-inner {
  display:flex; align-items:center; height:var(--nav-h); gap:20px;
}
.nav-logo {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.18rem; font-weight:800; color:var(--text);
  display:flex; align-items:center; gap:8px; flex-shrink:0;
  letter-spacing:-.3px;
}
.nav-logo sup { font-size:.48rem; color:var(--g); letter-spacing:.05em; vertical-align:super; }
.nav-dot {
  width:10px; height:10px; background:var(--g); border-radius:50%;
  box-shadow:0 0 8px rgba(0,177,79,.5);
  animation:pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.6; transform:scale(1.3); }
}
.nav-search { flex:1; max-width:440px; }
.nav-search-box {
  display:flex; align-items:center; gap:9px;
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:var(--r-pill); padding:8px 8px 8px 16px;
  transition:all .15s;
}
.nav-search-box:focus-within {
  border-color:var(--g); background:#fff;
  box-shadow:0 0 0 3px rgba(0,177,79,.08);
}
.nav-search-box i { color:var(--muted); font-size:.9rem; flex-shrink:0; }
.nav-search-box input {
  flex:1; border:none; outline:none; background:transparent;
  font-size:.88rem; color:var(--text);
}
.nav-search-box input::placeholder { color:var(--muted); }
.nav-search-box button {
  background:var(--g); border:none; border-radius:var(--r-pill);
  padding:6px 16px; font-size:.78rem; font-weight:700; color:#fff;
  cursor:pointer; white-space:nowrap; transition:background .13s;
}
.nav-search-box button:hover { background:var(--g-dark); }
.nav-links { display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav-link {
  font-size:.83rem; font-weight:600; color:var(--text2);
  padding:7px 14px; border-radius:var(--r-pill); transition:all .13s;
}
.nav-link:hover, .nav-link.active { color:var(--g); background:var(--g-light); }
.btn-partner {
  background:var(--g); color:#fff; border-radius:var(--r-pill);
  padding:8px 18px; font-size:.83rem; font-weight:700;
  display:inline-flex; align-items:center; gap:6px;
  transition:all .15s; box-shadow:var(--shadow-g);
  white-space:nowrap; flex-shrink:0; text-decoration:none;
}
.btn-partner:hover { background:var(--g-dark); transform:translateY(-1px); }
.btn-partner.btn-outline {
  background:transparent; color:var(--g);
  border:1.5px solid var(--g); box-shadow:none;
}
.btn-partner.btn-outline:hover { background:var(--g-light); }
.hamburger {
  display:none; background:none; border:none;
  font-size:1.5rem; cursor:pointer; color:var(--text);
  padding:4px; margin-left:auto;
}
@media(max-width:900px) {
  .nav-links { display:none; }
  .nav-search { display:none; }
  .hamburger  { display:block; }
}

/* ── MOBILE NAV DRAWER ── */
.mobile-nav {
  position:fixed; top:var(--nav-h); left:0; bottom:0;
  width:280px; background:#fff; z-index:200;
  transform:translateX(-100%); transition:transform .25s ease;
  padding:16px; box-shadow:var(--shadow-l);
  display:flex; flex-direction:column; gap:4px;
}
.mobile-nav.open { transform:translateX(0); }
.mnav-link {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:var(--r);
  font-size:.9rem; font-weight:600; color:var(--text2);
  transition:all .13s;
}
.mnav-link:hover, .mnav-link.active { background:var(--g-light); color:var(--g); }
.mnav-divider { height:1px; background:var(--border); margin:8px 0; }
.mobile-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.4); z-index:199;
}
.mobile-overlay.open { display:block; }

/* ── BUTTONS ── */
.btn-primary {
  background:var(--g); color:#fff; border:none;
  border-radius:var(--r-pill); padding:12px 24px;
  font-size:.9rem; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px;
  transition:all .15s; box-shadow:var(--shadow-g);
}
.btn-primary:hover { background:var(--g-dark); transform:translateY(-1px); }
.btn-outline {
  border:1.5px solid var(--border); background:#fff;
  border-radius:var(--r-pill); padding:11px 22px;
  font-size:.9rem; font-weight:700; color:var(--text);
  cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  transition:all .15s;
}
.btn-outline:hover { border-color:var(--g); color:var(--g); }

/* ── STATUS PILLS ── */
.pill { display:inline-flex; align-items:center; border-radius:var(--r-pill); padding:3px 10px; font-size:.68rem; font-weight:700; }
.pill-green    { background:#dcfce7; color:#16a34a; }
.pill-amber    { background:#fef9c3; color:#a16207; }
.pill-grey     { background:#f3f4f6; color:#6b7280; }
.pill-red      { background:#fee2e2; color:#dc2626; }
.pill-blue     { background:#dbeafe; color:#1d4ed8; }
.pill-sky      { background:#e0f2fe; color:#0369a1; }
.pill-g-light  { background:var(--g-light); color:var(--g); }

/* ── VERIFIED BADGE ── */
.verified {
  background:var(--g-light); color:var(--g);
  font-size:.62rem; font-weight:700; border-radius:4px;
  padding:2px 6px; display:inline-flex; align-items:center; gap:3px;
}

/* ── FLASH MESSAGES ── */
.flash-msg {
  position:fixed; top:80px; right:24px; z-index:500;
  padding:14px 20px; border-radius:var(--r-l);
  font-size:.88rem; font-weight:600; max-width:360px;
  box-shadow:var(--shadow-l); transition:opacity .5s;
  display:flex; align-items:center; gap:10px;
}
.flash-success { background:#dcfce7; color:#16a34a; border:1px solid #bbf7d0; }
.flash-error   { background:#fee2e2; color:#dc2626; border:1px solid #fecaca; }
.flash-info    { background:#dbeafe; color:#1d4ed8; border:1px solid #bfdbfe; }

/* ── FOOTER ── */
.site-footer { background:#111827; padding:52px 0 0; margin-top:64px; }
.footer-top {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px; padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
@media(max-width:900px) { .footer-top { grid-template-columns:1fr 1fr; gap:28px; } }
@media(max-width:500px) { .footer-top { grid-template-columns:1fr; } }
.footer-logo {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.18rem; font-weight:800; color:#fff; margin-bottom:10px;
}
.footer-logo sup { font-size:.48rem; color:var(--g); vertical-align:super; letter-spacing:.05em; }
.footer-brand p { font-size:.81rem; color:rgba(255,255,255,.45); line-height:1.7; margin-bottom:16px; }
.footer-socials { display:flex; gap:10px; }
.footer-socials a {
  width:34px; height:34px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.55); font-size:.95rem; transition:all .15s;
}
.footer-socials a:hover { background:var(--g); color:#fff; border-color:var(--g); }
.footer-col-title {
  font-size:.7rem; font-weight:800; color:rgba(255,255,255,.3);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px;
}
.footer-col a {
  display:block; font-size:.81rem; color:rgba(255,255,255,.45);
  margin-bottom:9px; transition:color .13s;
}
.footer-col a:hover { color:var(--g); }
.footer-bottom {
  padding:18px 0; display:flex; justify-content:space-between;
  font-size:.75rem; color:rgba(255,255,255,.28);
  flex-wrap:wrap; gap:8px;
}
.footer-bottom a { color:rgba(255,255,255,.35); margin:0 4px; transition:color .13s; }
.footer-bottom a:hover { color:var(--g); }

/* ── UTILS ── */
.text-g     { color:var(--g); }
.text-muted { color:var(--muted); }
.fw-800     { font-weight:800; }
.gap-sm     { height:16px; }
.gap-md     { height:28px; }
.gap-lg     { height:48px; }