/* ── SNL REAL ESTATE — SHARED BASE ─────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

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

:root {
  /* Brand */
  --black:    #080808;
  --dark:     #1C1C1C;
  --mid:      #555;
  --muted:    #999;
  --border:   #E2DED9;
  --cream:    #F8F5F1;
  --white:    #FFF;
  --gold:     #6F6F6F;
  --gold-lt:  #E6E6E6;
  /* Typography */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', system-ui, sans-serif;
  /* Layout */
  --max: 1200px;
  /* Status colours */
  --hot:     #B03020;
  --warm:    #C07020;
  --nurture: #2060A0;
  --success: #207050;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── STATUS BADGES ────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--sans); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.2rem 0.6rem; border-radius: 2px;
}
.badge-hot     { background: rgba(176,48,32,0.08);  color: var(--hot);     border: 1px solid rgba(176,48,32,0.2); }
.badge-warm    { background: rgba(192,112,32,0.08); color: var(--warm);    border: 1px solid rgba(192,112,32,0.2); }
.badge-nurture { background: rgba(32,96,160,0.08);  color: var(--nurture); border: 1px solid rgba(32,96,160,0.2); }
.badge-active  { background: rgba(32,112,80,0.08);  color: var(--success); border: 1px solid rgba(32,112,80,0.2); }
.badge-new     { background: rgba(32,112,80,0.08);  color: var(--success); border: 1px solid rgba(32,112,80,0.2); }
.badge-scheduled  { background: rgba(32,96,160,0.08);  color: var(--nurture); border: 1px solid rgba(32,96,160,0.2); }
.badge-completed  { background: rgba(32,112,80,0.08);  color: var(--success); border: 1px solid rgba(32,112,80,0.2); }
.badge-pending    { background: rgba(192,112,32,0.08); color: var(--warm);    border: 1px solid rgba(192,112,32,0.2); }
.badge-cancelled  { background: rgba(176,48,32,0.08);  color: var(--hot);     border: 1px solid rgba(176,48,32,0.2); }

/* ── SHARED BUTTONS ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.75rem 1.75rem; text-decoration: none;
  border: none; cursor: pointer; transition: all 0.25s ease;
  position: relative; overflow: hidden;
}

.btn:active {
  transform: scale(0.97);
}

/* Ripple effect */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transform: scale(0);
  animation: btnRipple 0.55s linear;
  pointer-events: none;
}

@keyframes btnRipple {
  to { transform: scale(4); opacity: 0; }
}
.btn-dark   { background: var(--black); color: var(--white); }
.btn-dark:hover   { background: #2A2A2A; }
.btn-gold   {
  background: var(--white);
  color: var(--black);
  border: 1px solid rgba(0,0,0,0.12);
}
.btn-gold:hover   {
  background: #EFEFEF;
  border-color: rgba(0,0,0,0.18);
}
.btn-outline { background: transparent; color: var(--dark); border: 1px solid var(--border); }
.btn-outline:hover { border-color: var(--dark); }
.btn-danger  { background: transparent; color: var(--hot); border: 1px solid rgba(176,48,32,0.3); }
.btn-danger:hover  { background: rgba(176,48,32,0.05); }
.btn-sm { padding: 0.45rem 1rem;  font-size: 0.6rem; }
.btn-xs { padding: 0.3rem  0.7rem; font-size: 0.58rem; }

/* ── LOADING SPINNER ──────────────────────────────────────── */
.spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid var(--border); border-top-color: var(--gold);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── UTILITY ──────────────────────────────────────────────── */
.text-muted  { color: var(--muted); }
.text-gold   { color: var(--black);  }
.text-center { text-align: center;  }