/* ============================================
   LienLot — Premium Property Auction Platform v2
   Light default + Dark toggle
   Playfair Display + Outfit
   ============================================ */

:root {
    --bg: #f4f3f0;
    --bg-card: rgba(255,255,255,0.85);
    --bg-card-solid: #ffffff;
    --bg-raised: #ffffff;
    --bg-hover: rgba(0,0,0,0.03);
    --bg-input: #ffffff;
    --border: rgba(0,0,0,0.08);
    --border-light: rgba(0,0,0,0.05);
    --border-gold: rgba(160,120,20,0.20);
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
    --shadow-gold: 0 4px 20px rgba(160,120,20,0.06);
    --text: #1a1d24;
    --text-secondary: #555d6e;
    --text-muted: #8d95a5;
    --gold: #a07814;
    --gold-light: #c49a2a;
    --gold-soft: rgba(160,120,20,0.08);
    --gold-glow: rgba(160,120,20,0.12);
    --green: #16a34a;
    --green-soft: rgba(22,163,74,0.08);
    --red: #dc2626;
    --red-soft: rgba(220,38,38,0.06);
    --blue: #2563eb;
    --blue-soft: rgba(37,99,235,0.06);
    --purple: #7c3aed;
    --purple-soft: rgba(124,58,237,0.06);
    --orange: #ea580c;
    --orange-soft: rgba(234,88,12,0.06);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --radius-full: 100px;
    --header-height: 68px;
    --max-width: 1200px;
}

[data-theme="dark"] {
    --bg: #0f1114;
    --bg-card: rgba(255,255,255,0.04);
    --bg-card-solid: #171a1f;
    --bg-raised: #1c2027;
    --bg-hover: rgba(255,255,255,0.07);
    --bg-input: rgba(255,255,255,0.06);
    --border: rgba(255,255,255,0.08);
    --border-light: rgba(255,255,255,0.05);
    --border-gold: rgba(212,175,55,0.25);
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
    --shadow-gold: 0 4px 20px rgba(212,175,55,0.08);
    --text: #eaedf3;
    --text-secondary: #9ba3b5;
    --text-muted: #5c6478;
    --gold: #d4af37;
    --gold-light: #e8cc6e;
    --gold-soft: rgba(212,175,55,0.10);
    --gold-glow: rgba(212,175,55,0.18);
    --green: #3ecf8e;
    --green-soft: rgba(62,207,142,0.10);
    --red: #ef6461;
    --red-soft: rgba(239,100,97,0.10);
    --blue: #60a5fa;
    --blue-soft: rgba(96,165,250,0.10);
    --purple: #a78bfa;
    --purple-soft: rgba(167,139,250,0.10);
    --orange: #fb923c;
    --orange-soft: rgba(251,146,60,0.10);
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--bg); color:var(--text);
    font-size:15px; line-height:1.6;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    transition:background .4s, color .3s;
}
body::before {
    content:''; position:fixed; inset:0; opacity:0.012;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events:none; z-index:0;
}

/* ======== HEADER ======== */
.site-header {
    position:sticky; top:0; z-index:100;
    background:rgba(244,243,240,0.92);
    backdrop-filter:blur(20px) saturate(1.5);
    -webkit-backdrop-filter:blur(20px) saturate(1.5);
    border-bottom:1px solid var(--border);
    height:var(--header-height);
}
[data-theme="dark"] .site-header { background:rgba(15,17,20,0.88); }

.header-inner {
    max-width:var(--max-width); margin:0 auto;
    padding:0 28px; height:100%;
    display:flex; align-items:center; justify-content:space-between;
}

/* Brand / Logo */
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-logo {
    width:44px; height:44px;
    background:linear-gradient(135deg, #b8860b, #d4af37, #c49a2a);
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(160,120,20,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
    position:relative;
    overflow:hidden;
}
.brand-logo::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
    border-radius:10px;
}
.brand-logo-text {
    font-family:'Playfair Display',serif;
    font-size:20px; font-weight:700;
    color:#fff; letter-spacing:-1px;
    text-shadow:0 1px 2px rgba(0,0,0,0.2);
    position:relative; z-index:1;
}
.brand-text { display:flex; flex-direction:column; }
.brand h1 {
    font-family:'Playfair Display','Georgia',serif;
    font-size:24px; font-weight:700;
    letter-spacing:-0.5px; color:var(--text);
    line-height:1.1;
}
.brand h1 span { color:var(--gold); }
.brand-tag {
    font-size:10px; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:2px;
    font-weight:600; margin-top:1px;
}

.header-nav { display:flex; align-items:center; gap:8px; }
.nav-link {
    color:var(--text-secondary); text-decoration:none;
    font-size:13px; font-weight:500;
    padding:8px 14px; border-radius:var(--radius-full);
    transition:all .2s;
}
.nav-link:hover { color:var(--text); background:var(--bg-hover); }
.nav-link i { margin-right:5px; font-size:11px; }

.theme-toggle {
    width:38px; height:38px; border-radius:50%;
    border:1px solid var(--border); background:transparent;
    color:var(--text-muted);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:14px; transition:all .2s;
}
.theme-toggle:hover { color:var(--gold); border-color:var(--gold); background:var(--gold-soft); }
.theme-toggle .fa-moon { display:block; }
.theme-toggle .fa-sun { display:none; }
[data-theme="dark"] .theme-toggle .fa-moon { display:none; }
[data-theme="dark"] .theme-toggle .fa-sun { display:block; }

/* ======== HERO ======== */
.hero { max-width:var(--max-width); margin:0 auto; padding:48px 28px 0; text-align:center; }
.hero-title {
    font-family:'Playfair Display','Georgia',serif;
    font-size:clamp(30px,4.5vw,46px);
    font-weight:700; letter-spacing:-1px; line-height:1.15;
    animation:fadeUp .6s ease both;
    margin:0 auto;
}
.hero-title .gold { color:var(--gold); }
.hero-sub {
    font-size:17px; color:var(--text-secondary);
    margin:14px auto 0; max-width:550px;
    animation:fadeUp .6s ease .1s both;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.stats-row {
    display:flex; gap:32px; margin-top:36px;
    padding-bottom:32px; border-bottom:1px solid var(--border);
    animation:fadeUp .6s ease .2s both;
    flex-wrap:wrap; justify-content:center;
}
.stat-number { font-family:'Playfair Display',serif; font-size:32px; font-weight:700; color:var(--gold); line-height:1; }
.stat-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1.2px; margin-top:4px; font-weight:500; }

.data-freshness { max-width:var(--max-width); margin:0 auto; padding:10px 28px 0; font-size:11.5px; color:var(--text-muted); text-align:center; }

/* ======== FILTERS ======== */
.filters-section { max-width:var(--max-width); margin:0 auto; padding:24px 28px 0; animation:fadeUp .6s ease .3s both; }
.filters-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; }
.search-filter { position:relative; flex:1; min-width:240px; max-width:440px; }
.search-filter input {
    width:100%; padding:12px 16px 12px 42px;
    background:var(--bg-input); border:1px solid var(--border);
    border-radius:var(--radius-full); color:var(--text);
    font-family:'Outfit',sans-serif; font-size:14px; outline:none;
    transition:all .25s; box-shadow:var(--shadow-sm);
}
.search-filter input:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow); background:var(--bg-raised); }
.search-filter input::placeholder { color:var(--text-muted); }
.search-filter i { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:13px; }

.filter-select {
    padding:12px 36px 12px 16px;
    background:var(--bg-input); border:1px solid var(--border);
    border-radius:var(--radius-full); color:var(--text);
    font-family:'Outfit',sans-serif; font-size:13px; outline:none;
    cursor:pointer; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%238d95a5' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center;
    transition:all .25s; box-shadow:var(--shadow-sm);
}
.filter-select:focus { border-color:var(--gold); }

.sort-btn {
    padding:12px 18px; background:var(--bg-input);
    border:1px solid var(--border); border-radius:var(--radius-full);
    color:var(--text-muted); font-family:'Outfit',sans-serif;
    font-size:13px; cursor:pointer; transition:all .25s;
    display:flex; align-items:center; gap:6px; font-weight:500;
    box-shadow:var(--shadow-sm);
}
.sort-btn:hover { color:var(--text); border-color:var(--text-muted); }
.sort-btn.active { color:var(--gold); border-color:var(--gold); background:var(--gold-soft); }

.results-count { font-size:13px; color:var(--text-muted); max-width:var(--max-width); margin:0 auto; padding:16px 28px 0; font-weight:500; text-align:center; }

/* ======== LISTINGS GRID ======== */
.listings-grid {
    max-width:var(--max-width); margin:0 auto;
    padding:20px 28px 60px;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(380px, 1fr));
    gap:16px;
}

/* ======== SALE CARD ======== */
.sale-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden;
    transition:all .3s cubic-bezier(.2,.8,.4,1);
    cursor:pointer; position:relative;
    backdrop-filter:blur(8px);
    box-shadow:var(--shadow-sm);
}
.sale-card:hover { border-color:var(--border-gold); box-shadow:var(--shadow-gold),var(--shadow-md); transform:translateY(-3px); }
.sale-card:hover .sale-card-address { color:var(--gold); }
.sale-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--gold),transparent); opacity:0; transition:opacity .3s; }
.sale-card:hover::before { opacity:1; }

.sale-card-top { padding:18px 20px 14px; }
.sale-card-badges { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.badge { font-size:10px; font-weight:600; padding:3px 10px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:0.6px; white-space:nowrap; }
.badge-countdown { background:var(--gold-soft); color:var(--gold); border:1px solid rgba(160,120,20,0.12); }
[data-theme="dark"] .badge-countdown { border-color:rgba(212,175,55,0.15); }
.badge-type-bank { background:var(--red-soft); color:var(--red); }
.badge-type-city,.badge-type-county { background:var(--green-soft); color:var(--green); }
.badge-type-hoa { background:var(--purple-soft); color:var(--purple); }
.badge-type-other { background:var(--bg-hover); color:var(--text-muted); }

.sale-card-address {
    font-family:'Playfair Display',serif;
    font-size:17px; font-weight:700; color:var(--text);
    letter-spacing:-0.3px; transition:color .2s; line-height:1.25;
}
.sale-card-city { font-size:12.5px; color:var(--text-muted); margin-top:3px; font-weight:500; letter-spacing:0.3px; }

.sale-card-details { padding:0 20px 16px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.detail-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; font-weight:600; }
.detail-value {
    font-size:13px; color:var(--text-secondary); font-weight:500; margin-top:1px;
    line-height:1.4; word-break:break-word;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.sale-card-footer {
    padding:10px 20px; border-top:1px solid var(--border);
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.card-link {
    font-size:11.5px; font-weight:500; color:var(--text-muted);
    text-decoration:none; padding:6px 12px;
    border-radius:var(--radius-full); border:1px solid var(--border);
    transition:all .2s;
    display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.card-link:hover { color:var(--gold); border-color:var(--gold); background:var(--gold-soft); }
.card-link i { font-size:10px; }

/* ======== MODAL ======== */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:200; justify-content:center; align-items:flex-start; padding:40px 20px; overflow-y:auto; backdrop-filter:blur(6px); }
[data-theme="dark"] .modal-overlay { background:rgba(0,0,0,0.7); }
.modal-overlay.open { display:flex; }
.modal { background:var(--bg-card-solid); border:1px solid var(--border); border-radius:16px; width:100%; max-width:860px; box-shadow:var(--shadow-lg); animation:modalIn .3s cubic-bezier(.2,.8,.4,1); margin-bottom:40px; overflow:hidden; }
@keyframes modalIn { from{opacity:0;transform:translateY(24px) scale(0.98)} to{opacity:1;transform:translateY(0) scale(1)} }
.modal-gold-bar { height:3px; background:linear-gradient(90deg,var(--gold),#c49a2a,transparent); }
.modal-header { padding:24px 28px 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.modal-header h2 { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; line-height:1.25; letter-spacing:-0.3px; }
.modal-subtitle { font-size:13px; color:var(--text-muted); margin-top:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.modal-subtitle .sep { opacity:0.3; }
.modal-close { width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0; }
.modal-close:hover { background:var(--red-soft); color:var(--red); border-color:rgba(220,38,38,0.2); }
.modal-body { padding:0 28px 28px; }
.modal-section { margin-bottom:28px; }
.modal-section:last-child { margin-bottom:0; }
.modal-section-title { font-size:10.5px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.modal-section-title i { color:var(--gold); font-size:12px; }
.modal-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 28px; }
.modal-field-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; font-weight:600; }
.modal-field-value { font-size:14px; color:var(--text); font-weight:500; margin-top:3px; word-break:break-word; }
.modal-field-value.mono { font-family:'JetBrains Mono',monospace; font-size:12.5px; background:var(--bg-hover); padding:4px 10px; border-radius:var(--radius-xs); display:inline-block; border:1px solid var(--border); }
.full-width { grid-column:1/-1; }
.modal-links { display:flex; flex-wrap:wrap; gap:8px; padding-top:8px; }
.modal-link { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--text-secondary); text-decoration:none; padding:8px 16px; border-radius:var(--radius-full); border:1px solid var(--border); transition:all .25s; }
.modal-link:hover { color:var(--gold); border-color:var(--gold); background:var(--gold-soft); }
.modal-link i { font-size:11px; }
.modal-link.primary { background:linear-gradient(135deg,var(--gold),#c49a2a); color:#fff; font-weight:600; border:none; box-shadow:var(--shadow-gold); }
[data-theme="light"] .modal-link.primary { color:#1a1a1a; }
.modal-link.primary:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(160,120,20,0.15); }

.enrich-loading { text-align:center; padding:28px; color:var(--text-muted); font-size:13px; }
.enrich-loading i { animation:spin 1s linear infinite; margin-right:6px; }
@keyframes spin { to{transform:rotate(360deg)} }
.ncc-data-card { background:var(--bg-hover); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; }
.ncc-data-card h4 { font-size:12px; font-weight:600; color:var(--gold); margin-bottom:12px; display:flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:0.6px; }
.ncc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.ncc-item-label { font-size:9.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.6px; font-weight:600; }
.ncc-item-value { font-size:13px; color:var(--text); font-weight:500; }

.analysis-box { background:var(--gold-soft); border:1px solid rgba(160,120,20,0.10); border-radius:var(--radius); padding:18px 20px; margin-top:16px; }
[data-theme="dark"] .analysis-box { border-color:rgba(212,175,55,0.12); }
.analysis-box h4 { font-size:13px; font-weight:600; color:var(--gold); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.analysis-box p { font-size:13px; color:var(--text-secondary); line-height:1.65; }
.analysis-box ul { list-style:none; padding:0; margin:10px 0 0; }
.analysis-box li { font-size:13px; color:var(--text-secondary); padding:4px 0 4px 20px; position:relative; line-height:1.5; }
.analysis-box li::before { content:'→'; position:absolute; left:0; color:var(--gold); font-weight:600; }

.modal-map-container { width:100%; height:220px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); margin-top:12px; }
.mini-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.mini-table th { text-align:left; padding:8px 12px; border-bottom:1px solid var(--border); font-weight:600; color:var(--text-muted); font-size:10px; text-transform:uppercase; letter-spacing:0.6px; }
.mini-table td { padding:7px 12px; border-bottom:1px solid var(--border-light); color:var(--text-secondary); }
.mini-table tr:last-child td { border-bottom:none; }

/* ======== FOOTER — Centered ======== */
.site-footer { border-top:1px solid var(--border); padding:36px 28px; }
.footer-inner { max-width:700px; margin:0 auto; text-align:center; }
.footer-disclaimer { font-size:12px; color:var(--text-muted); line-height:1.75; }
.footer-disclaimer a { color:var(--gold); text-decoration:none; }
.footer-disclaimer a:hover { text-decoration:underline; }
.footer-credits { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); font-size:12px; color:var(--text-muted); }
.footer-credits a { color:var(--gold); text-decoration:none; font-weight:600; }

/* ======== SEO ======== */
.seo-content { border-top:1px solid var(--border); padding:48px 28px; }
.seo-inner { max-width:700px; margin:0 auto; text-align:center; }
.seo-content h2 { font-family:'Playfair Display',serif; font-size:24px; margin-bottom:14px; letter-spacing:-0.3px; }
.seo-content h3 { font-size:16px; margin:24px 0 8px; font-weight:600; }
.seo-content p { font-size:14px; color:var(--text-secondary); line-height:1.75; margin-bottom:10px; text-align:left; }
.seo-content a { color:var(--gold); }

/* ======== STATES ======== */
.empty-state { text-align:center; padding:80px 20px; color:var(--text-muted); grid-column:1/-1; }
.empty-state i { font-size:48px; margin-bottom:16px; opacity:0.2; display:block; color:var(--gold); }
.empty-state h3 { font-size:18px; color:var(--text-secondary); margin-bottom:8px; font-family:'Playfair Display',serif; }
.empty-state p { font-size:14px; }
.empty-state a { color:var(--gold); }
.loading-pulse { animation:pulse 1.5s infinite; text-align:center; padding:80px 20px; color:var(--text-muted); }
.loading-pulse i { display:block; margin-bottom:16px; opacity:0.3; color:var(--gold); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

.scroll-top { position:fixed; bottom:28px; right:28px; width:44px; height:44px; border-radius:50%; background:var(--gold); color:#fff; border:none; cursor:pointer; display:none; align-items:center; justify-content:center; font-size:15px; font-weight:700; box-shadow:var(--shadow-gold); transition:all .25s; z-index:50; }
[data-theme="light"] .scroll-top { color:#1a1a1a; }
.scroll-top:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 8px 30px rgba(160,120,20,0.2); }
.scroll-top.visible { display:flex; }

/* ======== RESPONSIVE ======== */
@media(max-width:768px) {
    .header-inner { padding:0 16px; }
    .brand h1 { font-size:20px; }
    .brand-logo { width:38px; height:38px; }
    .brand-logo-text { font-size:17px; }
    .brand-tag { display:none; }
    .hide-mobile { display:none !important; }
    .hero { padding:28px 16px 0; }
    .hero-title { font-size:28px; }
    .hero-sub { font-size:15px; }
    .stats-row { gap:20px; justify-content:center; }
    .stat-number { font-size:26px; }
    .filters-section { padding:20px 16px 0; }
    .filters-bar { justify-content:stretch; }
    .search-filter { min-width:100%; max-width:100%; }
    .listings-grid { padding:16px 16px 40px; grid-template-columns:1fr; gap:12px; }
    .sale-card-details { grid-template-columns:1fr; gap:8px; }
    .modal-overlay { padding:16px 10px; }
    .modal-header { padding:20px 20px 16px; }
    .modal-header h2 { font-size:18px; }
    .modal-body { padding:0 20px 24px; }
    .modal-detail-grid { grid-template-columns:1fr; gap:12px; }
    .results-count { padding:10px 16px 0; }
    .data-freshness { padding:8px 16px 0; }
    .seo-content { padding:32px 16px; }
    .site-footer { padding:24px 16px; }
}
@media(max-width:480px) {
    .hero-title { font-size:24px; }
    .stats-row { gap:14px; }
    .stat-number { font-size:22px; }
    .brand-logo { width:34px; height:34px; border-radius:8px; }
    .brand-logo-text { font-size:15px; }
    .brand h1 { font-size:18px; }
    .sale-card-top { padding:14px 16px 10px; }
    .sale-card-details { padding:0 16px 14px; }
    .sale-card-footer { padding:8px 16px; }
    .card-link { font-size:11px; padding:5px 10px; }
}