:root {
  --spacing-sm: 5px;
  --spacing-md: 10px;
  --spacing-lg: 20px;
  --color-primary: #007BFF;
  --color-text-light: #fff;
  --color-header: green;
  --max-container-width: 1600px;
}
body {
  font-family: Arial, sans-serif;
  background: #f3f6fa;
  margin: 0;
  padding: var(--spacing-lg);
}
.centered-container {
  position: relative;
  max-width: var(--max-container-width);
  margin: 0 auto;
  padding: 0 16px;
}
.lps-spinner {
  position: absolute; top:50%; left:50%;
  width:48px; height:48px; margin:-24px 0 0 -24px;
  border:4px solid rgba(255,255,255,0.6);
  border-top-color:#0073aa;
  border-radius:50%; animation:spin 1s linear infinite;
  z-index:1000; display:none;
}
@keyframes spin { to{ transform: rotate(360deg);} }
.logo-container {
  text-align:center; margin-bottom:var(--spacing-lg);
}
.logo-container img {
  max-width:500px; width:100%; height:auto; display:block; margin:0 auto;
}
.small-estimate-container {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--spacing-md); margin-top:var(--spacing-md);
}
.small-estimate-box {
  flex:1; max-width:400px;
  background:#000; color:#D4AF36;
  border-radius:8px; padding:6px 10px;
  display:flex; flex-direction:column; align-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.small-estimate-box.rent-box {
  display: flex;
}
.small-estimate-title { font-size:20px; font-weight:bold; margin-bottom:4px; }
.small-estimate-value { font-size:20px; font-weight:bold; }
#valuation-summary {
  background:#fff; padding:var(--spacing-lg);
  border-radius:var(--spacing-md);
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  margin:var(--spacing-lg) 0;
}
.valuation-list { display:flex; flex-wrap:wrap; gap:var(--spacing-md); padding:0; margin:0; list-style:none; }
.valuation-list li {
  position:relative; padding-left:28px;
  width:calc(50% - var(--spacing-md)); margin-bottom:var(--spacing-sm);
  font-size:16px; line-height:1.4;
}
.valuation-list li::before {
  content:"📌"; position:absolute; left:0; top:2px;
  font-size:18px; color:var(--color-primary);
}
.val-mlsid::before       { content:"🆔"; }
.val-dom::before         { content:"⏳"; }
.val-type::before        { content:"🏠"; }
.val-bedrooms::before    { content:"🛏️"; }
.val-bathrooms::before   { content:"🛁"; }
.val-living::before      { content:"📐"; }
.val-lot::before         { content:"🌳"; }
.val-year::before        { content:"📅"; }
.val-waterfront::before  { content:"🌊"; }
.val-pool::before        { content:"🏊"; }
.val-price::before       { content:"💲"; }
.val-ppsf::before        { content:"📏"; }
.val-estimate::before    { content:"📊"; }
.val-estppsf::before     { content:"💵"; }
.val-rent::before        { content:"🏡"; }
.val-attribution::before { content:"🤝"; }
.val-source::before      { content:"📈"; }
.valuation-list li strong { flex-shrink:0; width:150px; font-weight:bold; color:#333; }
.valuation-list li span   { padding-left:6px; flex-grow:1; }
.section-title {
  margin:var(--spacing-lg) 0 var(--spacing-md);
  font-size:14px; font-weight:bold; color:var(--color-header);
}
.property-grid {
  display:flex; flex-wrap:wrap; gap:var(--spacing-lg); margin-bottom:var(--spacing-lg);
}
.property-box {
  background:#fff; border-radius:var(--spacing-md);
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
  flex:1 1 calc(33.333% - var(--spacing-lg));
  display:flex; flex-direction:column; position:relative;
  overflow:hidden;
}
.pin-label {
  position:absolute; top:8px; left:8px;
  width:32px; height:32px; border-radius:50%;
  background:green; color:#fff; display:flex;
  align-items:center; justify-content:center;
  font-weight:bold; font-size:16px; z-index:5;
}
.pin-label.sold   { background:red; }
.pin-label.rental { background:blue; }
.property-box img {
  width:100%; object-fit:cover; min-height:200px; max-height:300px;
}
.property-info {
  padding:var(--spacing-md) 12px; flex-grow:1;
}
.price { font-size:18px; font-weight:bold; margin:var(--spacing-sm) 0; }
.features, .address, .attribution, .date-listed, .dom {
  font-size:13px; color:#555; margin:4px 0;
}
#map { width:100%; height:400px; border-radius:var(--spacing-md); }
.error-message, .loading-message { text-align:center; color:#555; font-size:16px; }
.disclaimer { text-align:center; margin-top:var(--spacing-lg); font-size:14px; }
.hidden { display: none; }
@media(max-width:768px){
  .property-box { flex:1 1 100%; }
  .small-estimate-box { max-width:100%; }
}