:root{
  /* Palette derived from static/PetPartments.jpg */
  --primary:#9175c0; /* muted purple from logo */
  --accent:#d6bfed;  /* light lavender */
  --warm:#fdf6e3;    /* warm cream */
  --bg:#fefcfd;      /* near-white background */
  --card:#ffffff;
  --muted:#666;
  --radius:10px;
}
*{box-sizing:border-box}
body{font-family:Inter, 'Segoe UI', Roboto, system-ui, Arial; background:var(--bg); color:#222; margin:0}
.site-header{background:linear-gradient(90deg,var(--card),#fff); box-shadow:0 6px 20px rgba(16,24,40,0.06); position:sticky; top:0; z-index:40}
.nav-container{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-weight:800;color:var(--primary);font-size:1.15rem;display:flex;align-items:center;gap:8px}
.brand{color:var(--primary);text-decoration:none;font-weight:800}
.brand-name{font-weight:700;margin-left:4px}
.site-logo{height:44px;width:auto;border-radius:8px;display:block;object-fit:cover}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-links{display:flex;gap:14px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px;position:relative}
.nav-links a:hover{color:var(--primary)}
.nav-link.active{color:var(--primary)}
.nav-link.active::after{content:'';position:absolute;left:12px;right:12px;bottom:-6px;height:3px;background:linear-gradient(90deg,var(--primary),rgba(44,90,160,0.6));border-radius:6px}
.btn{display:inline-block;padding:8px 14px;border-radius:999px;text-decoration:none;font-weight:600}
.btn-primary{background:var(--primary);color:#fff}
.user-actions{display:flex;gap:10px;align-items:center}
.nav-toggle{background:transparent;border:1px solid rgba(0,0,0,0.04);padding:8px;border-radius:8px}
.nav-toggle svg{display:block}

/* Sign in link style */
.nav-signin{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:8px;border:1px solid rgba(16,24,40,0.06);background:transparent;color:var(--muted);text-decoration:none}
.nav-signin svg{opacity:0.9}
.nav-signin:hover{color:var(--primary);border-color:rgba(44,90,160,0.12);background:rgba(44,90,160,0.03)}
.nav-signin:focus{outline:2px solid rgba(44,90,160,0.14);outline-offset:3px}
.signin-text{font-weight:600}
.hero{padding:72px 20px;text-align:center;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border-bottom-left-radius:18px;border-bottom-right-radius:18px}
.hero h1{font-size:2.4rem;margin-bottom:6px}
.search-box{max-width:760px;margin:18px auto;background:#fff;padding:10px;border-radius:999px;display:flex;gap:8px;align-items:center;box-shadow:0 12px 40px rgba(16,24,40,0.08)}
.location-input{flex:1;border:0;padding:12px 18px;font-size:1rem;border-radius:999px;outline:none}
.search-btn{background:var(--primary);color:#fff;border:0;padding:10px 18px;border-radius:999px;cursor:pointer}
.hero .muted{opacity:0.92;color:#eef3ff;margin-bottom:12px}
.hero-stats{display:flex;gap:28px;justify-content:center;margin-top:18px;color:#eef3ff}
.muted-small{color:rgba(255,255,255,0.8);font-size:0.85rem}

/* Search results layout */
.search-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.results-layout{display:grid;grid-template-columns:280px 1fr 420px;gap:20px;margin-top:18px}
.filters{width:100%}
.filter-card{background:var(--card);padding:12px;border-radius:8px;margin-bottom:12px}
.filters label{display:block;font-weight:700;margin-bottom:8px}
.filters select{width:100%;padding:8px;border-radius:6px;border:1px solid #eef3fb}
.results .listings{display:flex;flex-direction:column;gap:12px}
.listing-row{display:flex;gap:12px;align-items:center}
.map-panel{background:transparent;min-height:420px}
/* Leaflet map container height explicit */
#map{width:100%;height:100%;min-height:420px;border-radius:8px}
.listing-media{width:140px}
.media-placeholder{background:linear-gradient(135deg,#667eea,#764ba2);height:80px;border-radius:8px;color:white;display:flex;align-items:center;justify-content:center;font-weight:700}
.listing-body{flex:1}
.listing-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}

@media (max-width:900px){.results-layout{grid-template-columns:1fr;}.listing-media{display:none}.nav-links.open{position:static}.map-panel{min-height:300px}}

.container{max-width:1200px;margin:0 auto;padding:28px 20px}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.feature-card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 10px 30px rgba(16,24,40,0.04);text-align:left}
.feature-card .feature-icon{font-size:28px;margin-bottom:8px}
.feature-card h3{margin:0 0 6px 0}
.feature-card p{margin:0;color:var(--muted)}

/* Landlord page tweaks */
.container .card{background:var(--card);border-radius:12px;padding:16px;box-shadow:0 10px 30px rgba(16,24,40,0.04)}
.listing .actions button{margin-left:8px}
.footer{background:#1f2a44;color:#d2dff0;padding:32px 20px;margin-top:30px}
.footer a{color:#cbd8f2;text-decoration:none}

/* CTA card */
.cta.card{background:linear-gradient(90deg,rgba(44,90,160,0.08),rgba(30,61,111,0.04));}

/* Utility muted text */
.muted{color:rgba(34,34,34,0.6)}


/* Listing cards and search results */
.listing-card{background:var(--card);padding:16px;border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,0.04);margin-bottom:12px}
.listing-title{font-weight:700;color:#111;margin-bottom:6px}
.listing-price{color:var(--primary);font-weight:800}
.listing-address{color:var(--muted);font-size:0.95rem}

.dashboard .listing{display:flex;justify-content:space-between;align-items:center;background:var(--card);padding:12px;border-radius:8px;border:1px solid #eef3fb;margin-bottom:10px}

@media (max-width:768px){.hero h1{font-size:1.6rem}.nav-links{display:none}.nav-container{padding:10px}}

/* Mobile nav open state */
.nav-links.open{display:flex;flex-direction:column;position:absolute;top:64px;left:12px;right:12px;background:var(--card);padding:12px;border-radius:10px;border:1px solid rgba(20,40,80,0.04);box-shadow:0 12px 30px rgba(16,24,40,0.08);transform-origin:top;animation:nav-open .22s cubic-bezier(.2,.9,.2,1)}
.nav-toggle{display:inline-block}

@keyframes nav-open{from{opacity:0;transform:scaleY(.96) translateY(-6px)}to{opacity:1;transform:scaleY(1) translateY(0)}}

/* Smooth hover/focus for links */
.nav-links a{transition:all .18s ease}
.nav-link:focus{outline:2px solid rgba(44,90,160,0.16);outline-offset:3px}