/* ============================================================
   BidEstate — Premium Real Estate Auction Platform
   Design: Clean White & Vibrant Orange  |  2024
   Fonts: Plus Jakarta Sans (Display) + DM Sans (Body)
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,600&family=DM+Sans:wght@300;400;500;600&family=Syne:wght@700;800&display=swap');

/* ── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Orange palette */
  --orange:        #052C5B;
  --orange-light:  #2F80D6;
  --orange-bright: #4DA3F5;
  --orange-muted:  #031D3D;
  --orange-pale:   #E8EEF5;
  --orange-glow:   rgba(47,128,214,0.14);
  --orange-border: rgba(47,128,214,0.3);

  /* White/Light palette */
  --bg:          #FFFFFF;
  --bg-2:        #F8F7F5;
  --bg-3:        #F2F0ED;
  --bg-4:        #EAE8E4;
  --bg-card:     #FFFFFF;
  --border:      rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.14);

  /* Dark tones */
  --dark:        #1A1714;
  --dark-2:      #2D2926;
  --dark-3:      #3E3A36;

  /* Text */
  --text-primary:   #1A1714;
  --text-secondary: #4A4540;
  --text-muted:     #8A8480;
  --text-light:     #BAB8B5;

  /* Status */
  --success: #16A34A;
  --danger:  #DC2626;
  --warning: #D97706;
  --info:    #2563EB;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-accent:  'Syne', system-ui, sans-serif;

  /* Effects */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow:     0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.14);
  --shadow-orange: 0 8px 28px rgba(5,44,91,0.3);
  --transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  --transition-fast: all 0.15s ease;

  /* Gold compat aliases */
  --gold:        var(--orange);
  --gold-light:  var(--orange-light);
  --gold-bright: var(--orange-bright);
  --gold-muted:  var(--orange-muted);
  --gold-pale:   var(--orange-pale);
  --gold-glow:   var(--orange-glow);
  --border-gold: var(--orange-border);
  --shadow-gold: var(--shadow-orange);

  /* Pre-orange palette names still referenced across the PHP views.
     Undefined custom properties resolve to nothing, which is why e.g.
     "Total Bids" in the bid box rendered as white-on-white and bid
     amounts lost their colour. Aliased rather than rewriting ~30 files. */
  --gold-dark:  var(--orange-muted);
  --gray:       var(--text-muted);
  --gray-light: var(--text-light);
  --ivory:      var(--bg-2);
  --ivory-2:    var(--bg-3);
  --text:       var(--text-primary);
}

/* ── RESET & BASE ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--orange); text-decoration: none; transition: var(--transition-fast); }
a:hover { color: var(--orange-muted); }
img { max-width: 100%; display: block; }
ul { list-style: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── SCROLLBAR ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--orange-light); border-radius: 3px; }

/* ── TOPBAR ────────────────────────────────────────────── */
.topbar {
  background: var(--dark);
  padding: 9px 0;
  font-size: 12px;
  font-family: var(--font-display);
  letter-spacing: 0.3px;
}
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar-left { display: flex; gap: 24px; }
.topbar-left span { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.6); }
.topbar-left i { color: var(--orange-light); font-size: 11px; }
.topbar-right { display: flex; align-items: center; gap: 16px; }

.btn-login-sm {
  background: var(--orange);
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-family: var(--font-display);
  transition: var(--transition);
}
.btn-login-sm:hover { background: var(--orange-muted); color: #fff; transform: translateY(-1px); }

/* User dropdown */
.notif-bell { position: relative; color: rgba(255,255,255,0.6); font-size: 16px; }
.notif-bell .badge {
  position: absolute; top: -5px; right: -5px;
  background: var(--danger); color: #fff;
  font-size: 9px; width: 15px; height: 15px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.user-menu-drop { position: relative; }
.user-btn {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px; padding: 4px 12px 4px 4px;
  cursor: pointer; color: #fff; font-size: 12px;
  font-family: var(--font-display); transition: var(--transition-fast);
}
.user-btn:hover { border-color: var(--orange-light); }
.user-btn img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.user-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 10px);
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); min-width: 210px; z-index: 999;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.user-menu-drop:hover .user-dropdown, .user-menu-drop.open .user-dropdown { display: block; }
.user-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; color: var(--text-primary); font-size: 13px;
  border-bottom: 1px solid var(--border); transition: var(--transition-fast);
}
.user-dropdown a:last-child { border-bottom: none; }
.user-dropdown a:hover { background: var(--orange-pale); color: var(--orange); }
.user-dropdown a i { width: 16px; color: var(--orange); font-size: 12px; }

/* ── HEADER / NAVBAR ───────────────────────────────────── */
.main-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.main-header.scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  border-bottom-color: var(--orange-border);
}

.navbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 24px; }
/* The CTA and the hamburger are one unit — as a plain block this wrapped the
   menu button onto its own line as soon as the header got narrow. */
.nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* Logo */
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-icon {
  width: 42px; height: 42px;
  background: var(--orange);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
  box-shadow: 0 4px 14px rgba(5,44,91,0.3);
}
.logo-text {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; letter-spacing: -0.5px;
  color: var(--dark); line-height: 1;
}
.logo-text strong { color: var(--orange); font-weight: 800; }

/* Nav links */
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  display: block; padding: 8px 16px;
  font-size: 14px; font-weight: 500;
  color: var(--text-secondary); border-radius: var(--radius-sm);
  font-family: var(--font-display); transition: var(--transition-fast);
  position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: 4px; left: 50%; right: 50%;
  height: 2px; background: var(--orange); border-radius: 1px;
  transition: all 0.25s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--dark); }
.nav-links a:hover::after, .nav-links a.active::after { left: 16px; right: 16px; }
.nav-links .has-dropdown { position: relative; }
.nav-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); left: 0;
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); min-width: 210px;
  box-shadow: var(--shadow-lg); z-index: 300; overflow: hidden;
}
.has-dropdown:hover .nav-dropdown, .has-dropdown.open .nav-dropdown { display: block; }
.nav-dropdown a { padding: 11px 18px; font-size: 13px; border-radius: 0; border-bottom: 1px solid var(--border); }
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover { background: var(--orange-pale); }
.nav-dropdown a .fa-circle { font-size: 8px; color: var(--success); }

/* CTA button */
.btn-primary-sm {
  background: var(--orange);
  color: #fff; padding: 10px 22px;
  border-radius: 20px; font-weight: 700; font-size: 13px;
  letter-spacing: 0.3px;
  font-family: var(--font-display);
  display: flex; align-items: center; gap: 7px;
  transition: var(--transition); white-space: nowrap;
  box-shadow: 0 4px 14px rgba(5,44,91,0.25);
}
.btn-primary-sm:hover { background: var(--orange-muted); transform: translateY(-2px); box-shadow: var(--shadow-orange); color: #fff; }

.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--dark); margin: 5px 0; border-radius: 1px; transition: var(--transition); }

/* ── LIVE TICKER ───────────────────────────────────────── */
.live-ticker {
  background: var(--orange);
  padding: 10px 0; overflow: hidden;
}
.ticker-inner { display: flex; align-items: center; }
.ticker-label {
  white-space: nowrap;
  background: rgba(0,0,0,0.2);
  color: #fff;
  padding: 5px 18px; margin-right: 28px;
  font-family: var(--font-display); font-size: 10px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; border-radius: 3px;
  flex-shrink: 0;
}
.ticker-track { overflow: hidden; flex: 1; }
.ticker-items { display: flex; gap: 60px; animation: ticker 40s linear infinite; white-space: nowrap; }
.ticker-item { font-size: 12px; font-family: var(--font-display); display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.85); }
.ticker-item a { color: #fff; font-weight: 600; }
.ticker-item a:hover { color: rgba(255,255,255,0.7); }
.ticker-item span { color: rgba(255,255,255,0.75); font-weight: 500; }
.ticker-sep { color: rgba(255,255,255,0.4); font-size: 8px; }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ══════════════════════════════════════════════════════════
   HERO — Completely Redesigned
══════════════════════════════════════════════════════════ */
.hero-section {
  background: var(--bg);
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* Split hero layout */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 88vh;
}

/* Left text side */
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 60px 80px 0;
  position: relative;
  z-index: 2;
}

/* Right image side */
.hero-right {
  position: relative;
  overflow: hidden;
}
.hero-right-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-right-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.15) 0%, transparent 40%);
}

/* Orange accent shape */
.hero-orange-strip {
  position: absolute;
  top: 0; bottom: 0; left: -30px;
  width: 70px;
  background: var(--orange);
  transform: skewX(-3deg);
  z-index: 3;
}

/* Floating stats card */
.hero-float-card {
  position: absolute;
  bottom: 40px; left: -20px;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 22px 28px;
  box-shadow: var(--shadow-lg);
  z-index: 4;
  min-width: 220px;
  border-left: 4px solid var(--orange);
}
.hero-float-card-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: 8px;
  font-family: var(--font-display);
}
.hero-float-card-val {
  font-size: 30px; font-weight: 800; color: var(--orange);
  line-height: 1; font-family: var(--font-display);
}
.hero-float-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Floating live badge */
.hero-float-live {
  position: absolute;
  top: 36px; left: 40px;
  background: var(--dark);
  color: #fff;
  border-radius: 30px;
  padding: 10px 20px;
  display: flex; align-items: center; gap: 9px;
  z-index: 4;
  box-shadow: var(--shadow);
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange-pale);
  border: 1px solid var(--orange-border);
  padding: 7px 18px; border-radius: 30px;
  margin-bottom: 28px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--orange);
}
.hero-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100%{ box-shadow: 0 0 0 0 rgba(22,163,74,0.6); }
  50%    { box-shadow: 0 0 0 6px rgba(22,163,74,0); }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 800; line-height: 1.08;
  color: var(--dark); margin-bottom: 22px;
  letter-spacing: -1.5px;
}
.hero-title .accent {
  color: var(--orange);
  display: block;
}

.hero-sub {
  color: var(--text-secondary); font-size: 16px;
  max-width: 460px; margin-bottom: 40px; line-height: 1.75;
}

/* Search box */
.hero-search-box {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 6px;
  display: flex; flex-wrap: wrap; gap: 4px;
  box-shadow: var(--shadow);
  max-width: 580px;
}
.hero-search-box select,
.hero-search-box input {
  border: none; outline: none;
  padding: 12px 16px;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body); font-size: 14px;
  flex: 1; min-width: 120px;
}
.hero-search-box select { cursor: pointer; border-right: 1px solid var(--border); }
.hero-search-box select option { background: #fff; color: var(--text-primary); }
.hero-search-box input::placeholder { color: var(--text-muted); }
.hero-search-btn {
  background: var(--orange);
  color: #fff; border: none; padding: 12px 24px;
  border-radius: var(--radius-lg); font-weight: 700; cursor: pointer;
  font-size: 14px; font-family: var(--font-display); letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 8px;
  transition: var(--transition); white-space: nowrap;
}
.hero-search-btn:hover { background: var(--orange-muted); transform: translateY(-1px); }

/* Stats row */
.hero-stats { display: flex; gap: 32px; margin-top: 44px; flex-wrap: wrap; }
.hero-stat { position: relative; }
.hero-stat::after {
  content: '';
  position: absolute; right: -16px; top: 10%; bottom: 10%;
  width: 1px; background: var(--border);
}
.hero-stat:last-child::after { display: none; }
.hero-stat-num {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 800; line-height: 1;
  color: var(--orange); letter-spacing: -1px;
}
.hero-stat-lbl {
  color: var(--text-muted); font-size: 12px; font-weight: 500;
  margin-top: 4px; font-family: var(--font-display);
}

/* ── SECTIONS ──────────────────────────────────────────── */
.section { padding: 96px 0; }
.section-light { background: var(--bg-2); }
.section-dark  { background: var(--dark); color: #fff; }
.section-mid   { background: var(--bg-3); }
.section-orange { background: var(--orange); color: #fff; }

.section-header { text-align: center; margin-bottom: 56px; }
.section-tag {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--orange-border);
  background: var(--orange-glow);
  color: var(--orange);
  padding: 6px 18px; border-radius: 30px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 16px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800; letter-spacing: -0.5px; line-height: 1.15;
  color: var(--dark); margin-bottom: 14px;
}
.section-title em { font-style: normal; color: var(--orange); }
.section-sub { color: var(--text-secondary); font-size: 16px; max-width: 520px; margin: 0 auto; line-height: 1.7; }

/* ── PROPERTY CARD ─────────────────────────────────────── */
.properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; }

.property-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: var(--transition);
  position: relative;
}
.property-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--orange-border); }

.property-card-img { position: relative; height: 230px; overflow: hidden; }
.property-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.property-card:hover .property-card-img img { transform: scale(1.08); }
.property-card-img::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 100%);
}

.card-badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.badge-status {
  padding: 4px 11px; border-radius: 20px;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.badge-live {
  background: rgba(22,163,74,0.15); border: 1px solid rgba(22,163,74,0.4);
  color: #16a34a; display: flex; align-items: center; gap: 5px;
}
.badge-live::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: #16a34a;
  animation: pulse-dot 1.5s infinite;
}
.badge-upcoming { background: rgba(37,99,235,0.15); border: 1px solid rgba(37,99,235,0.4); color: #2563eb; }
.badge-ended    { background: rgba(100,100,100,0.12); border: 1px solid rgba(100,100,100,0.3); color: #888; }
.badge-featured { background: rgba(5,44,91,0.15); border: 1px solid var(--orange-border); color: var(--orange); }
.badge-round    { background: rgba(124,58,237,0.13); border: 1px solid rgba(124,58,237,0.4); color: #7c3aed; display: flex; align-items: center; gap: 5px; }

.card-save-btn {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  backdrop-filter: blur(8px); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-muted); transition: var(--transition-fast);
}
.card-save-btn:hover { border-color: var(--danger); color: var(--danger); }
.card-save-btn.saved { color: var(--danger); border-color: var(--danger); background: rgba(220,38,38,0.08); }

.card-countdown {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 10px 14px; display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: #fff; font-family: var(--font-display);
}
.card-countdown i { color: var(--orange-light); }

.property-card-body { padding: 20px; }

.card-type {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--orange); margin-bottom: 8px;
}
.card-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--dark); margin-bottom: 8px; line-height: 1.3;
}
.card-title a { color: inherit; }
.card-title a:hover { color: var(--orange); }

.card-location { display: flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 12px; margin-bottom: 16px; }
.card-location i { color: var(--orange); font-size: 11px; }

.card-specs {
  display: flex; gap: 0; margin-bottom: 18px; padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.card-spec {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-muted);
  padding-right: 14px; margin-right: 14px;
  border-right: 1px solid var(--border);
}
.card-spec:last-child { border-right: none; }
.card-spec i { color: var(--orange); font-size: 11px; }

.card-footer { display: flex; justify-content: space-between; align-items: flex-end; }
.card-price-label { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.card-price { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--orange); line-height: 1; }

.card-bid-btn {
  background: var(--orange);
  color: #fff; border: none; padding: 9px 20px;
  border-radius: 20px; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: var(--transition);
  font-family: var(--font-display); letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 6px;
}
.card-bid-btn:hover { background: var(--orange-muted); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-orange); }

/* ── HOW IT WORKS ──────────────────────────────────────── */
.hiw-step {
  display: flex; gap: 20px; align-items: flex-start; padding: 24px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); transition: var(--transition);
}
.hiw-step:hover { border-color: var(--orange-border); transform: translateX(6px); box-shadow: var(--shadow-sm); }
.hiw-num {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
  background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 20px; font-weight: 800; color: #fff;
}
.hiw-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin-bottom: 6px; color: var(--dark); }
.hiw-desc { font-size: 13px; color: var(--text-muted); line-height: 1.65; }

/* ── SEARCH FILTERS ────────────────────────────────────── */
.search-filter-bar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 22px 24px; margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
}
.filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filter-group { flex: 1; min-width: 140px; }
.filter-group label {
  display: block; font-family: var(--font-display);
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 7px;
}
.filter-group select, .filter-group input {
  width: 100%; padding: 10px 14px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-primary);
  font-family: var(--font-body); font-size: 13px;
  transition: var(--transition-fast); outline: none;
}
.filter-group select:focus, .filter-group input:focus { border-color: var(--orange); background: #fff; box-shadow: 0 0 0 3px var(--orange-glow); }
.filter-group select option { background: #fff; }
.filter-group input::placeholder { color: var(--text-muted); }
.btn-filter {
  background: var(--orange);
  color: #fff; border: none; padding: 10px 24px;
  border-radius: var(--radius); font-weight: 700; cursor: pointer;
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.3px;
  transition: var(--transition); display: flex; align-items: center; gap: 8px;
}
.btn-filter:hover { background: var(--orange-muted); transform: translateY(-1px); }
.btn-reset {
  background: var(--bg-2); color: var(--text-muted);
  border: 1px solid var(--border); padding: 10px 16px;
  border-radius: var(--radius); cursor: pointer; font-size: 13px;
  transition: var(--transition-fast);
}
.btn-reset:hover { border-color: var(--orange-border); color: var(--orange); }

/* ── PROPERTY DETAIL ───────────────────────────────────── */
.detail-gallery { border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 28px; }
.detail-gallery-main { height: 500px; overflow: hidden; position: relative; }
.detail-gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.detail-gallery-main:hover img { transform: scale(1.02); }

.gallery-thumbs { display: flex; gap: 8px; padding: 8px 0; overflow-x: auto; }
.gallery-thumb {
  width: 88px; height: 64px; border-radius: var(--radius); overflow: hidden;
  cursor: pointer; opacity: 0.55; border: 2px solid transparent; transition: var(--transition-fast); flex-shrink: 0;
}
.gallery-thumb:hover { opacity: 0.85; }
.gallery-thumb.active { opacity: 1; border-color: var(--orange); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Bid box */
.bid-box {
  background: #fff;
  border: 2px solid var(--orange-border);
  border-radius: var(--radius-xl); padding: 28px; margin-bottom: 18px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow);
}
.bid-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--orange);
}
.current-bid-label {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted);
}
.current-bid-price {
  font-family: var(--font-display); font-size: 36px; font-weight: 800;
  color: var(--orange); line-height: 1.1; letter-spacing: -1px;
}
.bid-box-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.bid-countdown-label { font-family: var(--font-display); font-size: 10px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; text-align: right; }
.countdown-boxes { display: flex; gap: 5px; justify-content: flex-end; }
.countdown-box {
  background: var(--bg-2); border: 1px solid var(--orange-border);
  border-radius: var(--radius-sm); padding: 6px 10px; text-align: center; min-width: 46px;
}
.countdown-box span { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--orange); line-height: 1.1; }
.countdown-box small { font-family: var(--font-display); font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

.bid-input {
  width: 100%; background: var(--bg-2); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 13px 16px;
  color: var(--text-primary); font-family: var(--font-display); font-size: 20px; font-weight: 700;
  outline: none; transition: var(--transition-fast);
}
.bid-input:focus { border-color: var(--orange); background: #fff; box-shadow: 0 0 0 3px var(--orange-glow); }
.bid-input-wrap { margin: 16px 0; }
.bid-input-wrap label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 7px; }
.bid-increments { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.bid-inc-btn {
  background: var(--orange-pale); border: 1px solid var(--orange-border);
  border-radius: 20px; padding: 5px 12px; color: var(--orange);
  font-size: 11px; font-family: var(--font-display); font-weight: 700; cursor: pointer;
  transition: var(--transition-fast);
}
.bid-inc-btn:hover { background: var(--orange); color: #fff; }

.btn-bid-now {
  width: 100%; background: var(--orange);
  color: #fff; border: none; padding: 15px;
  border-radius: var(--radius-lg); font-weight: 800; font-size: 15px; cursor: pointer;
  transition: var(--transition); font-family: var(--font-display); letter-spacing: 0.3px;
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px;
}
.btn-bid-now:hover { background: var(--orange-muted); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-orange); }
.btn-bid-now:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Detail tabs */
.tab-btns { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 28px; overflow-x: auto; }
.tab-btn {
  background: none; border: none; padding: 12px 22px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; transition: var(--transition-fast);
}
.tab-btn.active { color: var(--orange); border-bottom-color: var(--orange); }
.tab-btn:hover { color: var(--dark); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

.detail-specs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 12px; }
.spec-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.spec-item i { color: var(--orange); font-size: 15px; margin-top: 2px; width: 18px; text-align: center; }
.spec-label { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.spec-value { font-size: 14px; font-weight: 600; color: var(--dark); }

.amenities-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.amenity-tag {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 20px; padding: 6px 14px; font-size: 12px; color: var(--text-secondary);
  font-family: var(--font-display); transition: var(--transition-fast);
}
.amenity-tag:hover { border-color: var(--orange-border); color: var(--orange); }
.amenity-tag i { color: var(--orange); font-size: 11px; }

.bid-history-table { width: 100%; border-collapse: collapse; }
.bid-history-table th {
  background: var(--bg-2); padding: 10px 14px;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); text-align: left;
}
.bid-history-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.bid-history-table tr:hover td { background: var(--bg-2); }

/* ── CUSTOMER SIDEBAR ──────────────────────────────────── */
.customer-layout { display: grid; grid-template-columns: 255px 1fr; gap: 28px; min-height: 80vh; }
.customer-sidebar {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 24px;
  height: fit-content; position: sticky; top: 90px;
}
.sidebar-profile { text-align: center; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.sidebar-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; border: 3px solid var(--orange); }
.sidebar-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--dark); }
.sidebar-phone { font-size: 12px; color: var(--text-muted); font-family: var(--font-display); margin-top: 4px; }

.sidebar-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px; border-radius: var(--radius);
  color: var(--text-secondary); font-size: 13px; font-weight: 500;
  margin-bottom: 3px; transition: var(--transition-fast); border-left: 3px solid transparent;
}
.sidebar-nav a i { width: 16px; text-align: center; font-size: 13px; color: var(--text-muted); }
.sidebar-nav a:hover { background: var(--bg-2); color: var(--dark); }
.sidebar-nav a.active { background: var(--orange-pale); color: var(--orange); border-left-color: var(--orange); }
.sidebar-nav a.active i { color: var(--orange); }

.customer-main {}
.page-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 28px; margin-bottom: 22px;
}
.page-card-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.page-card-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--dark); }

/* ── ADMIN LAYOUT ──────────────────────────────────────── */
.admin-body { background: var(--bg-2); }
.admin-layout { display: flex; min-height: 100vh; }

.admin-sidebar {
  width: 240px; background: var(--dark);
  position: fixed; top: 0; left: 0; bottom: 0;
  overflow-y: auto; z-index: 200;
}
.admin-logo {
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; gap: 10px;
}
.admin-logo span { font-family: var(--font-display); font-size: 20px; color: #fff; }
.admin-logo strong { color: var(--orange-light); }

.admin-menu { padding: 12px 0; }
.admin-menu-section {
  padding: 10px 20px 5px;
  font-family: var(--font-display); font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.35);
}
.admin-menu a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 20px; color: rgba(255,255,255,0.6); font-size: 13px; font-weight: 500;
  transition: var(--transition-fast); border-left: 3px solid transparent;
}
.admin-menu a i { width: 16px; text-align: center; font-size: 12px; }
.admin-menu a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin-menu a.active { background: rgba(47,128,214,0.15); color: var(--orange-light); border-left-color: var(--orange); }

/* min-width:0 is what lets this flex item shrink below the intrinsic
   width of its widest child. Without it the admin tables force the whole
   page to ~1100px and a phone shrink-to-fits the entire admin panel to
   unreadable size instead of scrolling the table inside its own wrapper. */
.admin-content { margin-left: 240px; flex: 1; min-width: 0; min-height: 100vh; }
.admin-topbar {
  background: #fff; border-bottom: 1px solid var(--border);
  padding: 14px 28px; display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm);
}
.admin-page-body { padding: 28px; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 28px; }
/* Grid and flex tracks default to min-width:auto, so a stat card whose
   number and label can't wrap (₹22.00 L / "Past 7-Day Deadline") would
   hold its track open and push the page wider than the phone. */
.stat-cards > * { min-width: 0; }
.stat-card > * { min-width: 0; }
.stat-num { overflow-wrap: anywhere; }
.stat-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px;
  display: flex; gap: 16px; align-items: center;
  transition: var(--transition-fast);
}
.stat-card:hover { border-color: var(--orange-border); box-shadow: var(--shadow-sm); }
.stat-icon {
  width: 50px; height: 50px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.stat-icon.gold   { background: var(--orange-glow); color: var(--orange); }
.stat-icon.green  { background: rgba(22,163,74,0.1); color: #16a34a; }
.stat-icon.blue   { background: rgba(37,99,235,0.1); color: #2563eb; }
.stat-icon.red    { background: rgba(220,38,38,0.1); color: #dc2626; }
.stat-num { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--dark); line-height: 1; }
.stat-label { font-family: var(--font-display); font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.admin-table-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px;
}
.admin-table-header {
  padding: 16px 22px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap;
}
.admin-table-title { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--dark); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  background: var(--bg-2); padding: 10px 18px;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); text-align: left;
}
.admin-table td {
  padding: 13px 18px; border-bottom: 1px solid var(--border);
  font-size: 13px; vertical-align: middle; color: var(--text-secondary);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--bg-2); color: var(--dark); }

/* ── FORMS ─────────────────────────────────────────────── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block; font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--text-muted); margin-bottom: 7px;
}
.form-control {
  width: 100%; padding: 11px 15px;
  background: var(--bg-2); border: 1.5px solid var(--border);
  border-radius: var(--radius); color: var(--text-primary);
  font-family: var(--font-body); font-size: 14px;
  transition: var(--transition-fast); outline: none;
}
.form-control:focus { border-color: var(--orange); background: #fff; box-shadow: 0 0 0 3px var(--orange-glow); }
.form-control::placeholder { color: var(--text-muted); }
textarea.form-control { resize: vertical; min-height: 100px; }
.field-error { color: var(--danger); font-size: 11px; margin-top: 5px; font-family: var(--font-display); }

/* ── BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--radius); font-weight: 600; font-size: 13px;
  cursor: pointer; border: none; transition: var(--transition); font-family: var(--font-display);
}
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-muted); transform: translateY(-1px); box-shadow: var(--shadow-orange); color: #fff; }
.btn-dark { background: var(--dark); border: none; color: #fff; }
.btn-dark:hover { background: var(--dark-2); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { opacity: 0.9; }
.btn-success { background: var(--success); color: #fff; }
.btn-outline { background: transparent; border: 2px solid var(--orange); color: var(--orange); }
.btn-outline:hover { background: var(--orange); color: #fff; }
.btn-outline-dark { background: transparent; border: 2px solid var(--dark); color: var(--dark); }
.btn-outline-dark:hover { background: var(--dark); color: #fff; }
.btn-sm { padding: 7px 14px; font-size: 11px; border-radius: var(--radius-sm); }
.btn-full { width: 100%; justify-content: center; }

/* ── PILLS & BADGES ────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.pill-success { background: rgba(22,163,74,0.10);  color: #16a34a; }
.pill-danger  { background: rgba(220,38,38,0.10);  color: #dc2626; }
.pill-warning { background: rgba(217,119,6,0.10);  color: #d97706; }
.pill-info    { background: rgba(37,99,235,0.10);  color: #2563eb; }
.pill-gold    { background: var(--orange-glow);    color: var(--orange); }

/* ── ALERTS ────────────────────────────────────────────── */
.alert { padding: 13px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 13px; display: flex; align-items: center; gap: 9px; }
.alert-success { background: rgba(22,163,74,0.07);  border: 1px solid rgba(22,163,74,0.25); color: #15803d; }
.alert-danger  { background: rgba(220,38,38,0.07);  border: 1px solid rgba(220,38,38,0.25); color: #dc2626; }
.alert-warning { background: rgba(217,119,6,0.07);  border: 1px solid rgba(217,119,6,0.25); color: #b45309; }
.alert-info    { background: rgba(37,99,235,0.07);  border: 1px solid rgba(37,99,235,0.25); color: #1d4ed8; }

/* ── LOGIN MODAL ───────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  /* A centred flex item taller than the viewport gets clipped at BOTH ends
     and can't be scrolled to — which is exactly what the signup form (KYC +
     bank details) is on a phone. Scroll the overlay, and centre short
     dialogs with auto margins instead of align-items. */
  overflow-y: auto; overflow-x: hidden;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-xl); width: 100%; max-width: 420px; padding: 38px;
  margin: auto; flex-shrink: 0;
  position: relative; box-shadow: var(--shadow-lg);
  transform: translateY(24px) scale(0.97); transition: transform 0.3s, opacity 0.3s;
}
.modal-overlay.open .modal-box { transform: none; }
.modal-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--orange); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-close {
  position: absolute; top: 18px; right: 18px;
  background: var(--bg-2); border: 1px solid var(--border); width: 30px; height: 30px;
  border-radius: 50%; font-size: 16px; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; transition: var(--transition-fast);
}
.modal-close:hover { color: var(--dark); border-color: var(--orange); }
.modal-header { text-align: center; margin-bottom: 30px; }
.modal-header h3 { font-family: var(--font-display); font-size: 26px; font-weight: 800; margin-bottom: 7px; color: var(--dark); }
.modal-header p { color: var(--text-muted); font-size: 13px; }

.phone-input-wrap {
  display: flex; background: var(--bg-2); border: 1.5px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: var(--transition-fast);
}
.phone-input-wrap:focus-within { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-glow); }
.flag-code {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-3); padding: 0 14px;
  font-weight: 700; font-size: 13px; color: var(--dark);
  border-right: 1px solid var(--border); white-space: nowrap; flex-shrink: 0;
  font-family: var(--font-display);
}
.phone-input-wrap input { border: none; outline: none; padding: 12px 14px; flex: 1; font-size: 15px; background: transparent; color: var(--dark); }
.phone-input-wrap input::placeholder { color: var(--text-muted); }

.otp-inputs { display: flex; gap: 10px; justify-content: center; }
.otp-box {
  width: 60px; height: 62px; text-align: center;
  background: var(--bg-2); border: 1.5px solid var(--border);
  border-radius: var(--radius); font-family: var(--font-display);
  font-size: 26px; font-weight: 700; color: var(--dark); outline: none; transition: var(--transition-fast);
}
.otp-box:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-glow); background: #fff; }

.otp-sent-msg { font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 20px; }
.otp-sent-msg strong { color: var(--dark); }
.otp-sent-msg a { color: var(--orange); }
.resend-otp { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 14px; font-family: var(--font-display); }
.modal-footer-note { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 22px; line-height: 1.6; font-family: var(--font-display); }

/* ── LOGIN PAGE ────────────────────────────────────────── */
.login-page { min-height: 100vh; display: flex; }
.login-left {
  flex: 1; background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  padding: 60px; position: relative; overflow: hidden;
}
.login-right {
  width: 500px; padding: 60px 52px;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: #fff; border-left: 1px solid var(--border);
}
.login-right-inner { width: 100%; max-width: 380px; }

/* ── FOOTER ────────────────────────────────────────────── */
.site-footer { background: var(--dark); color: rgba(255,255,255,0.7); border-top: none; margin-top: 0; }
.footer-top { padding: 64px 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px; }
.footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; text-decoration: none; }
.footer-logo i { color: var(--orange-light); font-size: 22px; }
.footer-logo span { font-family: var(--font-display); font-size: 22px; color: #fff; }
.footer-logo strong { color: var(--orange-light); }
.footer-col p { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.8; margin-bottom: 22px; }
.social-links { display: flex; gap: 10px; }
.social-links a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.55);
  display: flex; align-items: center; justify-content: center; font-size: 13px; transition: var(--transition-fast);
}
.social-links a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.footer-col h4 { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--orange-light); margin-bottom: 20px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a { color: rgba(255,255,255,0.5); font-size: 13px; transition: var(--transition-fast); }
.footer-col ul a:hover { color: #fff; padding-left: 5px; }
.contact-info div { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; font-size: 13px; color: rgba(255,255,255,0.5); }
.contact-info i { color: var(--orange-light); width: 16px; margin-top: 2px; flex-shrink: 0; }
.newsletter h5 { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 10px; margin-top: 20px; }
.newsletter-form { display: flex; gap: 6px; }
.newsletter-form input { flex: 1; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-sm); padding: 9px 12px; color: #fff; font-size: 12px; outline: none; }
.newsletter-form input:focus { border-color: var(--orange); }
.newsletter-form button { background: var(--orange); color: #fff; border: none; width: 36px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; transition: var(--transition-fast); }
.newsletter-form button:hover { background: var(--orange-muted); }
.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 0; }
.footer-bottom { padding: 18px 0; }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-size: 11px; color: rgba(255,255,255,0.35); }
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: rgba(255,255,255,0.35); }
.footer-links a:hover { color: var(--orange-light); }

/* ── BREADCRUMB ────────────────────────────────────────── */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 11px; color: var(--text-muted); padding: 12px 0; flex-wrap: wrap; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb i { font-size: 8px; }

/* ── PAGINATION ────────────────────────────────────────── */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 44px; }
.pagination a, .pagination span {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); background: #fff; color: var(--text-muted); transition: var(--transition-fast);
}
.pagination a:hover { border-color: var(--orange); color: var(--orange); }
.pagination .current { background: var(--orange); border-color: transparent; color: #fff; }

/* ── EMPTY STATE ───────────────────────────────────────── */
.empty-state { text-align: center; padding: 64px 20px; }
.empty-state i { font-size: 44px; color: var(--text-muted); margin-bottom: 18px; display: block; opacity: 0.4; }
.empty-state h4 { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.empty-state p { color: var(--text-muted); font-size: 14px; }

/* ── BACK TO TOP ───────────────────────────────────────── */
.back-to-top {
  position: fixed; bottom: 28px; right: 28px; z-index: 200;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--orange); color: #fff;
  border: none; cursor: pointer; font-size: 14px;
  box-shadow: var(--shadow-orange); transition: var(--transition);
  opacity: 0; pointer-events: none;
}
.back-to-top.show { opacity: 1; pointer-events: all; }
.back-to-top:hover { transform: translateY(-3px); background: var(--orange-muted); }

/* ── SECTION DIVIDER ───────────────────────────────────── */
.gold-divider {
  height: 3px; width: 60px; margin: 0 auto 20px;
  background: var(--orange); border-radius: 2px;
}

/* ── PAGE HERO ─────────────────────────────────────────── */
.page-hero {
  padding: 72px 0 56px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  text-align: center;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--orange);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(28px,5vw,48px);
  font-weight: 800; letter-spacing: -0.5px;
  color: var(--dark); margin-bottom: 12px;
}
.page-hero p { color: var(--text-muted); font-size: 15px; }

/* Compact variant -- used on properties.php / auction-properties.php so
   the breadcrumb + title don't eat most of the screen before any
   listings show. Added alongside .page-hero (not replacing it) so every
   other page keeping the tall centered hero is untouched. */
.page-hero-compact { padding: 20px 0; text-align: left; }
.page-hero-compact .breadcrumb { justify-content: flex-start; padding: 0 0 6px; margin-bottom: 0 !important; }
.page-hero-compact h1 { font-size: clamp(19px,2.6vw,26px); margin-bottom: 2px; }
.page-hero-compact p { font-size: 12.5px; }

/* ── LISTING LAYOUT: filters sidebar + results grid ─────── */
.listing-layout { display: flex; gap: 28px; align-items: flex-start; }
.filters-sidebar { width: 268px; flex-shrink: 0; position: sticky; top: 20px; }
.filters-sidebar .search-filter-bar { margin-bottom: 0; }
.filters-sidebar .filter-row { flex-direction: column; align-items: stretch; gap: 16px; }
.filters-sidebar .filter-group { min-width: 0; }
.filters-sidebar .btn-filter, .filters-sidebar .btn-reset { width: 100%; justify-content: center; }
.listing-results { flex: 1; min-width: 0; }
.listing-results-count { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
@media (max-width: 900px) {
  .listing-layout { flex-direction: column; }
  .filters-sidebar { width: 100%; position: static; }
}

/* ── PROPERTY PAGE LAYOUT ──────────────────────────────── */
.property-detail-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
  padding: 36px 0 64px;
}
@media(max-width:960px) {
  .property-detail-layout { grid-template-columns: 1fr; }
  .register-layout { grid-template-columns: 1fr !important; }
}

.detail-sidebar { position: sticky; top: 90px; }

/* ── IVORY SECTION COMPAT ──────────────────────────────── */
.section-ivory { background: var(--bg-2); }
.section-ivory .section-title { color: var(--dark); }
.section-ivory .section-sub   { color: var(--text-secondary); }
.section-ivory .section-tag   { background: var(--orange-glow); border-color: var(--orange-border); color: var(--orange); }

/* ── REGISTER AUCTION ──────────────────────────────────── */
.step-badge {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--orange);
  color: #fff; font-family: var(--font-display);
  font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── TABLE IMPROVEMENTS ────────────────────────────────── */
.data-table { width:100%; border-collapse:collapse; }
.data-table th {
  background: var(--bg-2); padding: 10px 16px;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); text-align: left;
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text-secondary); vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }

/* ── FEATURE STRIP ─────────────────────────────────────── */
.feature-strip {
  background: var(--orange);
  padding: 22px 0;
}
.feature-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.feature-strip-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 28px;
  border-right: 1px solid rgba(255,255,255,0.2);
  color: #fff;
}
.feature-strip-item:last-child { border-right: none; }
.feature-strip-item i { font-size: 22px; opacity: 0.9; }
.feature-strip-item-title { font-weight: 700; font-size: 14px; font-family: var(--font-display); }
.feature-strip-item-sub { font-size: 12px; opacity: 0.75; }

/* ── WHY CARDS ─────────────────────────────────────────── */
.why-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 30px;
  transition: var(--transition); position: relative; overflow: hidden;
}
.why-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.why-card:hover::after { transform: scaleX(1); }
.why-card-icon {
  width: 54px; height: 54px; border-radius: 14px;
  background: var(--orange-pale); border: 1px solid var(--orange-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--orange); margin-bottom: 18px;
}
.why-card h4 { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--dark); }
.why-card p { font-size: 13px; color: var(--text-muted); line-height: 1.7; }

/* ── TESTIMONIAL CARD ──────────────────────────────────── */
.testimonial-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 28px;
  transition: var(--transition);
}
.testimonial-card:hover { border-color: var(--orange-border); box-shadow: var(--shadow); }
.testimonial-quote {
  font-size: 48px; color: var(--orange); line-height: 1;
  font-family: var(--font-display); font-weight: 800; margin-bottom: 12px;
  opacity: 0.3;
}
.testimonial-stars { color: var(--orange); margin-bottom: 14px; font-size: 13px; }
.testimonial-text { color: var(--text-secondary); font-size: 14px; line-height: 1.75; margin-bottom: 22px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.testimonial-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--orange); }
.testimonial-name { font-weight: 700; font-size: 14px; font-family: var(--font-display); color: var(--dark); }
.testimonial-role { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ── CITY CARD ─────────────────────────────────────────── */
.city-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  display: block; height: 160px; border: 1px solid var(--border);
  transition: var(--transition);
}
.city-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--orange-border); }
.city-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.city-card:hover img { transform: scale(1.08); }
.city-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
}
.city-card-info {
  position: absolute; bottom: 12px; left: 14px; right: 14px;
}
.city-card-name { color: #fff; font-weight: 700; font-size: 15px; font-family: var(--font-display); }
.city-card-count { color: rgba(255,255,255,0.65); font-size: 11px; margin-top: 2px; }
.city-card-badge {
  position: absolute; top: 10px; right: 10px;
  background: var(--orange); color: #fff;
  font-size: 10px; font-weight: 800; padding: 2px 8px;
  border-radius: 10px; font-family: var(--font-display);
}

/* ── RESPONSIVE ────────────────────────────────────────── */
/* Generic helpers used across many pages (property detail, register-auction,
   about/contact, and most admin list+form / dashboard layouts) that lay out
   a fixed-width two- or three-column grid via inline styles. Adding one of
   these classes alongside the inline grid-template-columns makes that same
   element collapse to a single column (or fewer columns) on smaller
   screens, instead of squeezing a fixed px-wide column into a phone. */
@media (max-width: 900px) {
  .two-col-collapse { grid-template-columns: 1fr !important; }
  .detail-sidebar { position: static !important; top: auto !important; }
}
@media (max-width: 640px) {
  .three-col-collapse { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 420px) {
  .three-col-collapse { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  /* Phone: give the content the screen rather than the gutters, and let
     the topbar wrap instead of forcing the page wider than the device. */
  .admin-page-body { padding: 16px 14px; }
  .admin-topbar { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .admin-topbar .admin-user-role { display: none; }
  .admin-table th, .admin-table td { padding: 10px 12px; }
  /* Every .admin-table sits inside an overflow-x:auto wrapper, so giving it
     a floor keeps the columns readable and lets the table scroll sideways
     instead of crushing "4 BHK Villa in Dwarka" into six stacked lines. */
  .admin-table { min-width: 760px; }
  .admin-table-header { padding: 14px 16px; }
  .stat-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .stat-card { padding: 16px; }
}

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  /* One column, rows sized to their content: without align-content:start a
     grid with min-height:80vh stretches its auto rows, which left a screen
     of blank space under the (now compact) dashboard nav. */
  .customer-layout { grid-template-columns: 1fr; min-height: 0; align-content: start; gap: 18px; }
  /* Phone/tablet: the dashboard nav becomes a compact header + a swipeable
     row of chips instead of a full-height menu card that pushes the actual
     page content a screen and a half down. */
  .customer-sidebar { position: static; padding: 0; overflow: hidden; }
  .sidebar-profile {
    display: flex; align-items: center; gap: 12px; text-align: left;
    padding: 14px 16px; margin-bottom: 0;
  }
  .sidebar-avatar { width: 44px; height: 44px; margin: 0; border-width: 2px; }
  .sidebar-name { font-size: 15px; }
  .sidebar-stats { display: none !important; }
  .sidebar-nav {
    display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar-nav > div { display: none; }            /* the desktop divider */
  .sidebar-nav a {
    white-space: nowrap; margin-bottom: 0; padding: 8px 14px;
    border-radius: 20px; border-left: none; background: var(--bg-2);
  }
  .sidebar-nav a.active { border-left: none; }
  .sidebar-nav a .pill { margin-left: 6px !important; }
  .admin-sidebar { transform: translateX(-100%); transition: var(--transition); }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-content { margin-left: 0; }
  .hero-split { grid-template-columns: 1fr; min-height: auto; }
  .hero-right { display: none; }
  .hero-left { padding: 60px 0; }
  .feature-strip-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  /* Mobile menu. It used to be position:fixed inset:0, but .main-header has
     a backdrop-filter, and a filtered element becomes the containing block
     for fixed descendants — so the "full screen" panel collapsed to the
     height of the header and only the first link was visible. Anchoring it
     under the header as an absolute panel sidesteps that entirely. */
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 20px 16px; z-index: 150;
    max-height: calc(100vh - 68px); overflow-y: auto;
    border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links > li + li { border-top: 1px solid var(--border); }
  .nav-links a { display: block; font-size: 16px; padding: 13px 2px; color: var(--dark); }
  /* A touch screen has no hover, so the Auctions submenu can never open as a
     dropdown — show its links inline instead of hiding them from phones. */
  .nav-links .nav-dropdown {
    display: block; position: static; min-width: 0;
    background: transparent; border: none; border-radius: 0;
    box-shadow: none; padding: 0 0 6px 14px; overflow: visible;
  }
  .nav-links .nav-dropdown a { font-size: 14px; padding: 9px 2px; color: var(--text-secondary); border-bottom: none; }
  .nav-links .has-dropdown > a { pointer-events: none; font-size: 12px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--text-muted); padding-bottom: 4px; }
  .nav-links .has-dropdown > a i { display: none; }
  .hamburger { display: block; z-index: 160; position: relative; }
  .hero-stats { gap: 20px; }
  .hero-search-box { flex-direction: column; }
  .hero-search-box select { border-right: none; border-bottom: 1px solid var(--border); }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .detail-gallery-main { height: 280px; }
  .login-left { display: none; }
  .login-right { width: 100%; padding: 40px 24px; }
  .topbar { display: none; }
  .footer-bottom-inner { flex-direction: column; gap: 10px; text-align: center; }
  .properties-grid { grid-template-columns: 1fr; }
  .feature-strip-grid { grid-template-columns: 1fr; }
  .hero-orange-strip { display: none; }
}
@media (max-width: 768px) {
  /* The "Est. 2024" badge deliberately hangs outside the photo on desktop;
     on a phone that overhang is off the edge of the screen, so tuck it in. */
  .about-hero-badge { position: static !important; margin-top: 14px; }
}



@media (max-width: 480px) {
  /* One per row: two 1fr tracks can't shrink below a card's min-content,
     which is what used to widen the whole page on a phone. */
  .stat-cards { grid-template-columns: minmax(0, 1fr); }
  /* Keep the logo, the CTA and the hamburger on one line. The logged-out
     button ("Start Bidding") is the widest case and used to wrap the menu
     onto a second row, or push the header past the edge of the screen. */
  .nav-actions { flex-wrap: nowrap; gap: 10px; }
  .btn-primary-sm { padding: 8px 13px; font-size: 11.5px; white-space: nowrap; }
  .btn-primary-sm i { display: none; }
  .logo-icon { width: 38px; height: 38px; font-size: 16px; }
  .logo-text { font-size: 21px; }
  .logo { gap: 9px; }
  .navbar { gap: 12px; }
  .modal-box { padding: 28px 22px; }
  .countdown-boxes { gap: 4px; }
}

@media (max-width: 380px) {
  /* Small phones (320-380px): the 24px gutters plus a full-size header
     button are more than the screen has, so tighten both rather than let
     the page scroll sideways. */
  .container { padding: 0 16px; }
  /* The logged-out header carries a wider CTA ("Start Bidding"), which
     together with the full-size logo is more than 320px can hold. */
  .btn-primary-sm { padding: 8px 12px; font-size: 11px; }
  .btn-primary-sm i { display: none; }
  .logo-icon { width: 34px; height: 34px; font-size: 15px; border-radius: 8px; }
  .logo-text { font-size: 19px; }
  .logo { gap: 8px; }
  .navbar { gap: 8px; }
  .nav-actions { gap: 8px; }
  .hamburger { padding: 4px 0; }
  .navbar-inner { gap: 10px; }
  .testimonial-card { padding: 22px 18px; }
  .page-card, .room-card { padding-left: 18px; padding-right: 18px; }
  .page-card-title { font-size: 19px; }
}

/* ════════════════════════════════════════════════════════════
   AUCTION TIMERS  —  "Start Auction In" / "Auction Ends In"
   Rendered by includes/auction-timers.php in three variants:
   .auction-timers-box (sidebar), .auction-timers-room (auction
   room hero) and .card-timers (property card image overlay).
════════════════════════════════════════════════════════════ */

.auction-timers { display: grid; gap: 14px; width: 100%; }

.auction-timer-label {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 7px; display: flex; align-items: center; gap: 6px;
}
.auction-timer-label i { color: var(--orange); font-size: 11px; }

.auction-timer-settled {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--text-secondary); display: flex; align-items: center; gap: 7px;
}
.auction-timer-settled i { color: var(--success); font-size: 12px; }
.auction-timer.is-done .auction-timer-label { opacity: 0.75; }

/* Legacy alias — property.php shipped with .countdown-label while the
   stylesheet only defined .bid-countdown-label, leaving the label in the
   default body font, left-aligned and oversized. */
.countdown-label,
.bid-countdown-label {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  color: var(--text-muted); letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 6px;
}

/* Digits must not reflow as they tick */
.countdown-box span,
.card-timer-value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.countdown-done {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--danger); letter-spacing: 0.4px;
}

/* ── Sidebar bid-box variant ─────────────────────────────── */
.auction-timers-box {
  grid-template-columns: 1fr; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px;
}
.auction-timers-box .countdown-boxes { justify-content: flex-start; }

/* ── Auction room variant (large, on the dark hero) ──────── */
/* Flex (not 1fr columns) so the two timers sit together under the
   title instead of being flung to opposite ends of a wide hero. */
.auction-timers-room { display: flex; flex-wrap: wrap; gap: 18px 56px; }
.auction-timers-room .auction-timer { min-width: 232px; }
.auction-timers-room .auction-timer-label { color: rgba(255,255,255,0.62); font-size: 11px; }
.auction-timers-room .auction-timer-label i { color: var(--orange-light); }
.auction-timers-room .auction-timer-settled { color: rgba(255,255,255,0.8); }
.auction-timers-room .countdown-boxes { justify-content: flex-start; gap: 8px; }
.auction-timers-room .countdown-box {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  min-width: 66px; padding: 10px 12px; backdrop-filter: blur(6px);
}
.auction-timers-room .countdown-box span { font-size: 28px; color: #fff; }
.auction-timers-room .countdown-box small { color: rgba(255,255,255,0.5); font-size: 9px; }

/* ── Property card variant ───────────────────────────────── */
.card-timers {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 16px 14px 11px; display: grid; gap: 4px;
  /* Strong enough that both rows stay readable over a bright photo. */
  background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.84) 62%, rgba(0,0,0,0.52) 86%, transparent 100%);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.card-timer { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-timer-label {
  font-family: var(--font-display); font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.7);
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.card-timer-label i { color: var(--orange-light); font-size: 10px; }
.card-timer-value {
  font-family: var(--font-display); font-size: 13px; font-weight: 800;
  color: #fff; letter-spacing: 0.2px; white-space: nowrap;
}
.card-timer.is-done .card-timer-value { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.72); }
.card-timer .countdown-done { font-size: 12px; color: #ff9b9b; }

/* ════════════════════════════════════════════════════════════
   LIVE AUCTION ROOM  (auction.php)
════════════════════════════════════════════════════════════ */

.room-hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 60%, #241f1a 100%);
  color: #fff; padding: 26px 0 30px; position: relative; overflow: hidden;
}
.room-hero::after {
  content: ''; position: absolute; top: -120px; right: -80px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(47,128,214,0.22) 0%, transparent 70%);
  pointer-events: none;
}
.room-hero .breadcrumb, .room-hero .breadcrumb a { color: rgba(255,255,255,0.55); }
.room-hero .breadcrumb a:hover { color: var(--orange-light); }
.room-hero-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px; flex-wrap: wrap; margin: 12px 0 20px;
}
.room-title {
  font-family: var(--font-display); font-size: clamp(21px, 2.8vw, 30px);
  font-weight: 800; line-height: 1.2; margin: 9px 0 7px; color: #fff;
}
.room-sub { color: rgba(255,255,255,0.6); font-size: 13px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.room-sub i { color: var(--orange-light); }

.room-status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 30px;
}
.room-status-live     { background: rgba(22,163,74,0.16);  border: 1px solid rgba(22,163,74,0.45);  color: #4ade80; }
.room-status-upcoming { background: rgba(37,99,235,0.16);  border: 1px solid rgba(37,99,235,0.45);  color: #93c5fd; }
.room-status-ended    { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.65); }
.room-status-round    { background: rgba(167,139,250,0.16); border: 1px solid rgba(167,139,250,0.45); color: #c4b5fd; }

.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
  animation: pulse-dot 1.5s infinite; flex-shrink: 0;
}

.room-grid {
  display: grid; grid-template-columns: 1fr 380px; gap: 26px;
  align-items: start; padding: 28px 0 60px;
}
/* Grid items default to min-width:auto, so the wide bid-feed table would
   stretch its column and push the whole page sideways on a phone instead
   of scrolling inside its own overflow container. */
.room-grid > * { min-width: 0; }

/* Same guard for the property detail page's two-column grid: without it
   the gallery, tab strip and spec grid stretch their column and the whole
   page scrolls sideways on a phone. (.tab-btns already scrolls on its own.) */
.two-col-collapse > * { min-width: 0; }

/* And for the customer dashboard: the refunds / payment-terms tables are
   wider than a phone screen, and without this the grid column stretches to
   fit them, dragging the sidebar and every card off the right edge instead
   of letting the table scroll inside its own container. */
.customer-layout > * { min-width: 0; }
.room-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 20px;
}
.room-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.room-card-head h3 {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--dark); display: flex; align-items: center; gap: 9px; margin: 0;
}
.room-card-head h3 i { color: var(--orange); font-size: 14px; }
.room-refresh-note {
  font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 600;
}
.room-card-body { padding: 20px; }

.room-price-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px; padding: 22px 20px;
}
.room-stat-label {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px;
}
.room-stat-value {
  font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--dark); line-height: 1.15;
}
.room-stat-value.is-price { font-size: 32px; color: var(--orange); letter-spacing: -0.5px; }
.room-stat + .room-stat { border-left: 1px solid var(--border); padding-left: 18px; }

.room-feed-table { width: 100%; border-collapse: collapse; }
.room-feed-table th {
  text-align: left; padding: 10px 20px; background: var(--bg-2);
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.room-feed-table td { padding: 13px 20px; font-size: 13px; border-bottom: 1px solid var(--border); }
.room-feed-table tr:last-child td { border-bottom: none; }
.room-feed-table tr.is-top td { background: var(--orange-pale); }
.room-feed-amount { font-family: var(--font-display); font-weight: 800; color: var(--orange); font-size: 15px; white-space: nowrap; }
.room-feed-bidder { font-weight: 600; color: var(--dark); }
.room-feed-time { color: var(--text-muted); font-size: 12px; white-space: nowrap; }

.room-side { position: sticky; top: 90px; }
.room-gate {
  background: var(--orange-pale); border: 1px solid var(--orange-border);
  border-radius: var(--radius); padding: 18px; text-align: center;
}
.room-gate i.gate-icon { color: var(--orange); font-size: 22px; display: block; margin-bottom: 9px; }
.room-gate p { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.6; }

.room-mybid {
  margin-top: 14px; padding: 11px 14px; border-radius: var(--radius-sm);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.room-mybid.is-top    { background: rgba(22,163,74,0.10);  border: 1px solid rgba(22,163,74,0.28);  color: #15803d; }
.room-mybid.is-outbid { background: rgba(220,38,38,0.08);  border: 1px solid rgba(220,38,38,0.25);  color: var(--danger); }

.room-mini-prop { display: flex; gap: 13px; align-items: center; }
.room-mini-prop img { width: 74px; height: 62px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.room-mini-title { font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--dark); line-height: 1.35; }
.room-mini-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }

.room-link-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  background: var(--orange); color: #fff; border: none; cursor: pointer;
  padding: 12px 18px; border-radius: var(--radius); text-decoration: none;
  transition: var(--transition-fast); width: 100%;
}
.room-link-btn:hover { background: var(--orange-bright); color: #fff; box-shadow: var(--shadow-orange); }
.room-link-btn.is-ghost { background: transparent; color: var(--orange); border: 1.5px solid var(--orange-border); }
.room-link-btn.is-ghost:hover { background: var(--orange-pale); box-shadow: none; }

@media (max-width: 960px) {
  .room-grid { grid-template-columns: 1fr; gap: 20px; }
  .room-side { position: static; }
  /* Mobile only: flatten both columns into one flow so the Place Bid panel
     sits between the price strip and the Live Bid Activity feed. */
  .room-grid > div, .room-grid > .room-side { display: contents; }
  .room-o-price { order: 1; }
  .room-o-bid   { order: 2; margin-bottom: 0; }
  .room-o-feed  { order: 3; }
  .room-o-terms { order: 4; }
  .room-o-prop  { order: 5; }
  .room-grid .room-card { margin-bottom: 0; }
}
@media (max-width: 560px) {
  .auction-timers-room .countdown-box { min-width: 54px; padding: 8px 9px; }
  .auction-timers-room .countdown-box span { font-size: 22px; }
  .room-stat + .room-stat { border-left: none; padding-left: 0; }
  .room-feed-table th, .room-feed-table td { padding-left: 14px; padding-right: 14px; }
}

/* ════════════════════════════════════════════════════════════
   SEARCHABLE SELECT  (assets/js/main.js → enhanceSelect)
   The native <select> stays in the DOM and still submits the form;
   it is only hidden from view, so everything works without JS.
════════════════════════════════════════════════════════════ */

.ss-wrap { position: relative; width: 100%; }
.ss-native { position: absolute; opacity: 0; pointer-events: none; width: 100%; height: 0; }

.ss-button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 11px 14px; font-family: var(--font-body); font-size: 13.5px; color: var(--text-primary);
  cursor: pointer; text-align: left; transition: var(--transition-fast);
}
.ss-button:hover { border-color: var(--border-strong); }
.ss-button i { font-size: 10px; color: var(--text-muted); transition: transform 0.15s ease; flex-shrink: 0; }
.ss-wrap.is-open .ss-button { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-glow); }
.ss-wrap.is-open .ss-button i { transform: rotate(180deg); }
.ss-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-label.is-placeholder { color: var(--text-muted); }

.ss-panel {
  position: absolute; z-index: 60; top: calc(100% + 5px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.ss-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ss-search i { font-size: 12px; color: var(--text-muted); }
.ss-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: 13.5px; color: var(--text-primary);
}

.ss-list { max-height: 260px; overflow-y: auto; padding: 5px; }
.ss-option {
  padding: 9px 11px; border-radius: var(--radius-sm); font-size: 13px;
  color: var(--text-secondary); cursor: pointer; line-height: 1.45;
}
.ss-option:hover, .ss-option.is-active { background: var(--bg-2); color: var(--text-primary); }
.ss-option.is-selected { background: var(--orange-pale); color: var(--orange); font-weight: 600; }
.ss-empty { padding: 16px 12px; text-align: center; font-size: 12.5px; color: var(--text-muted); }

/* Filter bars lay their controls out with inline max-widths on the
   select; the wrapper has to inherit that or the control jumps to full
   width once it is enhanced. */
form .ss-wrap { flex: 0 1 auto; }

/* Property description (rich text from admin editor) */
.prop-description { color: var(--gray); line-height: 1.8; overflow-wrap: anywhere; }
.prop-description > *:first-child { margin-top: 0; }
.prop-description p { margin: 0 0 12px; }
.prop-description h2, .prop-description h3, .prop-description h4 { font-family: var(--font-display); color: var(--dark); margin: 18px 0 8px; line-height: 1.3; }
.prop-description h2 { font-size: 20px; } .prop-description h3 { font-size: 17px; } .prop-description h4 { font-size: 15px; }
.prop-description ul { list-style: disc; padding-left: 24px; margin: 0 0 12px; }
.prop-description ol { list-style: decimal; padding-left: 24px; margin: 0 0 12px; }
.prop-description li { margin-bottom: 4px; }
.prop-description a { color: var(--orange); text-decoration: underline; }
.prop-description blockquote { border-left: 4px solid var(--border); margin: 12px 0; padding: 4px 0 4px 16px; font-style: italic; }
.prop-description figure { margin: 0 0 14px; overflow-x: auto; }
.prop-description table { border-collapse: collapse; width: 100%; }
.prop-description th, .prop-description td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; vertical-align: top; }
.prop-description th { background: #f7f7f7; color: var(--dark); }

/* Detail tabs -> accordion on mobile */
.acc-head { display: none; }
@media (max-width: 768px) {
  .tab-btns { display: none; }
  .detail-tabs .tab-content { display: none; animation: none; }
  .detail-tabs .tab-content.active { display: none; }
  .detail-tabs .tab-content.open { display: block; padding: 4px 2px 16px; animation: fadeIn 0.25s ease; }
  .acc-head {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: var(--white, #fff); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 16px; margin-top: 10px;
    font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--dark);
    cursor: pointer; text-align: left;
  }
  .acc-head i { font-size: 12px; color: var(--text-muted); transition: transform 0.2s ease; }
  .acc-head.open { color: var(--orange); border-color: var(--orange); margin-bottom: 12px; }
  .acc-head.open i { transform: rotate(180deg); color: var(--orange); }
}

/* "View" pill on the property card thumbnail */
.card-img-view {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: 30px;
  background: rgba(255,255,255,0.95); color: var(--dark); text-decoration: none;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25); transition: background 0.2s, color 0.2s;
}
.card-img-view i { color: var(--orange); }
.card-img-view:hover { background: var(--orange); color: #fff; }
.card-img-view:hover i { color: #fff; }

/* Listing filters: collapsible on mobile */
.filter-toggle { display: none; }
@media (max-width: 900px) {
  .filter-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px;
    font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--dark); cursor: pointer;
  }
  .filter-toggle i.fa-sliders-h { color: var(--orange); margin-right: 6px; }
  .filter-toggle .filter-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
    margin-left: 6px; border-radius: 10px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700;
  }
  .filter-toggle .filter-count[hidden] { display: none; }
  .filter-chev { font-size: 12px; color: var(--text-muted); transition: transform 0.2s ease; }
  .filters-sidebar.filters-open .filter-chev { transform: rotate(180deg); }
  .filters-sidebar .search-filter-bar { display: none; margin-top: 10px; }
  .filters-sidebar.filters-open .search-filter-bar { display: block; }
}