/*─────────────────────────────*
 * LPSEstimate CMA and Calculator Stylesheet
 *─────────────────────────────*/
:root {
  --primary-bg: #fff;
  --disclaimer-bg: #000;
  --accent-gold: #D4AF36;
  --dark-input: #1C2526;
  --grey-input: #4A4A4A;
  --text-white: #fff;
  --text-black: #000;
  --text-light: #FFD700;
  --border-gray: #333;
  --blue-rental: #007BFF;
  --green-active: #28A745;
  --red-sold: #DC3545;
  --spacing: 1rem;
  --radius: 0.75rem;
  --max-width: 1600px;
  --color-primary: var(--accent-gold);
}

/* === Layout === */
.comps-wrap {
  background: var(--primary-bg);
  color: var(--text-black);
  padding: var(--spacing);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  max-width: var(--max-width);
  margin: auto;
  font-family: Arial, sans-serif;
  transition: all 0.3s ease;
}

.centered-container {
  text-align: center;
}

/* === Spinner === */
.lps-spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #f3f3f3;
  border-top-color: var(--accent-gold);
  border-radius: 50%;
  animation: spin 1s ease-in-out infinite;
  margin: 2rem auto;
  display: none;
}

@keyframes spin { 100% { transform: rotate(360deg); } }

/* === Logo & Estimate Boxes === */
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing);
  margin-bottom: 2rem;
}

.main-logo {
  max-width: 300px;
  width: 100%;
  height: auto;
}

.small-estimate-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing);
  width: 100%;
}

.small-estimate-box {
  background: var(--dark-input);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius);
  padding: var(--spacing);
  text-align: center;
}

.small-estimate-title {
  font-size: 1.1rem;
  color: var(--accent-gold);
  margin-bottom: 0.5rem;
}

.small-estimate-value {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--text-white);
}

/* === Section Titles === */
.section-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--text-light);
  background: var(--disclaimer-bg);
  padding: 0.75rem;
  border-radius: var(--radius);
  margin: 2rem 0 1rem;
  text-align: center;
}

/* === Valuation Summary === */
#valuation-summary {
  padding: var(--spacing);
  border-radius: var(--radius);
  background: var(--primary-bg);
}

.loading-message {
  text-align: center;
  color: var(--border-gray);
}

.valuation-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing);
  list-style: none;
  padding: 0;
  margin: var(--spacing) 0;
}

.valuation-list li {
  background: var(--dark-input);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius);
  padding: 0.75rem;
  color: var(--accent-gold);
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
  align-items: center;
}

.valuation-list li::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: var(--accent-gold);
  margin-right: 0.5rem;
  content: '';
}

.val-mlsid::before { content: '\f0c5'; }
.val-date-listed::before { content: '\f073'; }
.val-dom::before { content: '\f017'; }
.val-type::before { content: '\f1ad'; }
.val-subtype::before { content: '\f0c9'; }
.val-bedrooms::before { content: '\f236'; }
.val-bathrooms::before { content: '\f2cd'; }
.val-living::before { content: '\f015'; }
.val-lot::before { content: '\f0b2'; }
.val-year::before { content: '\f073'; }
.val-waterfront::before { content: '\f773'; }
.val-pool::before { content: '\f5c4'; }
.val-price::before { content: '\f0d6'; }
.val-estimate::before { content: '\f0e4'; }
.val-attribution::before { content: '\f2b9'; }
.val-advertise::before { content: '\f0a1'; }

.valuation-list li strong {
  color: var(--accent-gold);
  font-weight: bold;
}

.valuation-list li .sub-item {
  font-size: 0.9rem;
  margin-left: 0;
}

.valuation-list li .share-button {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: var(--accent-gold);
  color: var(--dark-input);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.8rem;
  text-decoration: none;
}

.valuation-list li .share-button.disabled {
  background: var(--border-gray);
  cursor: not-allowed;
  opacity: 0.6;
}

.valuation-list li .share-button:hover:not(.disabled) {
  background: var(--text-light);
}

.info-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  background: var(--accent-gold);
  color: var(--dark-input);
  font-size: 0.8rem;
  cursor: help;
  margin-left: 0.5rem;
  position: relative;
}

.info-icon:hover::after {
  content: attr(data-title);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark-input);
  color: var(--text-white);
  padding: 0.5rem;
  border-radius: var(--radius);
  white-space: normal;
  width: 200px;
  z-index: 1000;
  font-size: 0.9rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.val-advertise.advertise-yes { color: var(--green-active); }
.val-advertise.advertise-no { color: var(--red-sold); }
.val-advertise.advertise-approval { color: var(--text-white); }

/* === Property Grid === */
.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: calc(var(--spacing) * 1.5);
  margin-bottom: 2rem;
  width: 100%;
  box-sizing: border-box;
}

.property-box {
  background: var(--dark-input);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius);
  padding: var(--spacing);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  min-height: 450px;
  min-width: unset;
  box-sizing: border-box;
  overflow: hidden;
}

.property-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.4);
  margin-bottom: 5px;
}

.property-box img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}

.pin-label {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: bold;
  color: var(--text-white) !important;
  background: var(--dark-input);
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.pin-label.active { background: var(--green-active); }
.pin-label.sold { background: var(--red-sold); }
.pin-label.rental {
  background: var(--blue-rental, #007BFF) !important;
  border: 2px solid #004085;
}

.property-info {
  color: var(--text-white);
  font-size: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.property-info .price {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--accent-gold);
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.property-info .sub-item {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.property-info .address {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.property-info .details {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
  text-align: left;
  flex: 1;
  justify-content: flex-start;
}

.property-info .details span::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: var(--accent-gold);
  margin-right: 0.5rem;
}

.property-info .living-area::before { content: '\f015'; }
.property-info .lot-size::before { content: '\f0b2'; }

.property-info .comp-link {
  margin-top: var(--spacing);
  text-align: center;
}

.property-info .comp-link a {
  color: var(--text-light);
  text-decoration: none;
  font-weight: bold;
  display: block;
  background: #0e76a8;
  padding: 0.5rem 1rem;
  border-top: 1px solid #ddd;
  border-radius: var(--radius);
}

.property-info .comp-link a:hover {
  color: #FFFACD;
  background: #095c88;
  text-decoration: underline;
}

.property-info .date-listed::before,
.property-info .close-date::before,
.property-info .dom::before,
.property-info .attribution::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: var(--accent-gold);
  margin-right: 0.5rem;
}

.property-info .date-listed::before { content: '\f073'; }
.property-info .close-date::before { content: '\f073'; }
.property-info .dom::before { content: '\f017'; }
.property-info .attribution::before { content: '\f2b9'; }

/* === Map === */
#map {
  width: 100%;
  height: 400px;
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius);
  margin-top: 2rem;
}

.leaflet-container { background: var(--primary-bg); }

.leaflet-popup-content-wrapper {
  background: var(--dark-input);
  color: var(--text-white);
  border-radius: 8px;
}

.leaflet-popup-tip { background: var(--dark-input); }

.numbered {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  font-size: 1rem;
  font-weight: bold;
  color: var(--text-white) !important;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.numbered.active { background: var(--green-active); }
.numbered.sold { background: var(--red-sold); }
.numbered.rental {
  background: var(--blue-rental, #007BFF) !important;
  border: 2px solid #004085;
}
.numbered.profitable {
  background: var(--green-active) !important;
  border: 2px solid #1a5c2e;
}

/* === Calculator === */
.calc-container,
.commercial-noi-grid {
  background: var(--grey-input);
  color: var(--accent-gold);
  padding: 1.5rem;
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius);
  margin-top: 2rem;
}

.calc-grid,
.commercial-noi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing);
}

.calc-input,
.commercial-noi-input {
  background: var(--dark-input);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius);
  padding: 0.75rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: box-shadow 0.3s ease;
}

.calc-input:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.calc-input label {
  font-weight: bold;
  color: var(--accent-gold);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.calc-input label i {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900;
  color: var(--accent-gold);
}

.calc-input input[type="range"],
.calc-input input[type="number"] {
  width: 100%;
  max-width: 150px;
  box-sizing: border-box;
  padding: 0.5rem;
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius);
  background: var(--dark-input);
  color: var(--text-white);
  font-size: 1rem;
}

.calc-input input[type="range"] {
  accent-color: var(--accent-gold);
}

.calc-input input[type="number"]:focus {
  outline: none;
  border-color: var(--text-light);
  box-shadow: 0 0 5px var(--accent-gold);
}

.calc-input.rental-income {
  border-color: var(--blue-rental);
  background: #1a2a44;
}

.calc-input.rental-income input {
  border-color: var(--blue-rental);
}

.calc-input.rental-income label {
  color: var(--blue-rental);
}

.calc-input .value-display {
  font-size: 0.9rem;
  color: var(--text-white);
  margin-top: 0.25rem;
  display: block;
}

.calc-buttons {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.calc-container button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.calc-container #calc-reset {
  background: var(--accent-gold);
  color: var(--primary-bg);
}

.calc-container #calc-submit {
  background: var(--blue-rental);
  color: var(--text-white);
}

.calc-container #print-pdf {
  background: var(--grey-input);
  color: var(--text-white);
}

.calc-container button:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

.calc-container button:focus {
  outline: none;
  box-shadow: 0 0 5px var(--accent-gold);
}

#calc-results {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.5rem;
  color: var(--text-white);
}

.calc-container #calc-results p {
  font-size: 1rem;
  margin: 0.5rem 0;
}

.calc-container #calc-results p::before {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900;
  color: var(--accent-gold);
  margin-right: 0.5rem;
}

.calc-container #calc-results p:nth-child(1)::before { content: '\f0d6'; }
.calc-container #calc-results p:nth-child(2)::before { content: '\f1ad'; }
.calc-container #calc-results p:nth-child(3)::before { content: '\f295'; }
.calc-container #calc-results p:nth-child(4)::before { content: '\f3d1'; }
.calc-container #calc-results p:nth-child(5)::before { content: '\f0ce'; }
.calc-container #calc-results p:nth-child(6)::before { content: '\f4c4'; }
.calc-container #calc-results p:nth-child(7)::before { content: '\f236'; }
.calc-container #calc-results p:nth-child(8)::before { content: '\f06a'; }
.calc-container #calc-results p:nth-child(9)::before { content: '\f073'; }

#amortization-toggle {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 1rem;
}

#amortization-toggle button {
  padding: 0.75rem 1.5rem;
  background: var(--accent-gold);
  color: var(--primary-bg);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#amortization-toggle button:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

#amortization-schedule {
  grid-column: 1 / -1;
  margin-top: 2rem;
}

#amortization-schedule h4 {
  color: var(--text-light);
  font-size: 1.2rem;
  margin-bottom: 1rem;
  text-align: center;
}

#amortization-schedule table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text-white);
}

#amortization-schedule th,
#amortization-schedule td {
  border: 1px solid var(--border-gray);
  padding: 0.5rem;
  text-align: right;
}

#amortization-schedule th {
  background: var(--dark-input);
  color: var(--accent-gold);
}

#amortization-schedule tbody tr:hover {
  background: #333;
}

#amortization-schedule tbody tr.breakeven-row {
  background: var(--green-active);
  color: var(--text-white);
}

#amortization-schedule tbody tr.breakeven-row td {
  color: var(--text-white);
}

#investor-calc,
#calc-results,
#amortization-schedule {
  margin-top: 2rem;
  background: var(--dark-input);
  color: var(--text-white);
  padding: var(--spacing);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius);
}

#investor-calc input[type="number"],
#investor-calc select {
  background: var(--grey-input);
  color: var(--text-white);
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid #666;
  margin-bottom: 1rem;
  width: 100%;
}

#investor-calc label {
  font-weight: bold;
  margin-top: 1rem;
  display: block;
  color: var(--accent-gold);
}

#calc-results strong,
#amortization-schedule strong {
  color: var(--accent-gold);
}

/* === Disclaimer === */
.disclaimer {
  background: var(--disclaimer-bg);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius);
  padding: var(--spacing);
  text-align: center;
  color: var(--accent-gold);
  font-size: 0.9rem;
  margin-top: 2rem;
}

.disclaimer a {
  color: var(--text-light);
  text-decoration: none;
}

.disclaimer a:hover {
  color: #FFFACD;
  text-decoration: underline;
}

.disclaimer img {
  display: block;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.disclaimer.small {
  font-size: 0.9rem;
  color: var(--accent-gold);
  background: transparent;
  border: none;
  margin: 0.5rem 0 0 0;
  padding: 0;
}

/* === Commercial NOI Section === */
#commercial-noi-section {
  background: var(--dark-input);
  color: var(--text-white);
  padding: var(--spacing);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius);
  margin-top: 2rem;
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.commercial-noi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing);
  margin-bottom: 1.5rem;
}

.commercial-noi-input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--grey-input);
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius);
  padding: 1rem;
}

.commercial-noi-input label {
  font-weight: bold;
  color: var(--accent-gold);
}

.commercial-noi-input input[type="number"] {
  width: 100%;
  max-width: 180px;
  border-radius: var(--radius);
  border: 1px solid var(--accent-gold);
  background: var(--dark-input);
  color: var(--text-white);
  padding: 0.5rem;
}

.commercial-noi-results {
  background: var(--grey-input);
  color: var(--accent-gold);
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 1rem;
  font-size: 1.1rem;
  border: 1px solid var(--accent-gold);
}

.commercial-noi-results strong {
  color: var(--text-light);
}

.commercial-noi-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.commercial-noi-buttons button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.commercial-noi-buttons #commercial-noi-reset {
  background: var(--accent-gold);
  color: var(--primary-bg);
}

.commercial-noi-buttons #commercial-noi-submit {
  background: var(--blue-rental);
  color: var(--text-white);
}

.commercial-noi-buttons button:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* === Media Queries === */
@media (max-width: 992px) {
  .small-estimate-container { grid-template-columns: repeat(2, 1fr); }
  .property-grid { grid-template-columns: repeat(2, 1fr); }
  .calc-grid { grid-template-columns: repeat(2, 1fr); }
  .valuation-list { grid-template-columns: repeat(2, 1fr); }
  .commercial-noi-grid { grid-template-columns: 1fr; }
  .property-box { min-height: 400px; }
  .property-box img { max-height: 180px; }
}

@media (max-width: 600px) {
  .comps-wrap { padding: 1rem; }
  .main-logo { max-width: 200px; }
  .small-estimate-container { grid-template-columns: 1fr; }
  .property-grid { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .property-box { min-height: 380px; }
  .property-box img { max-height: 160px; }
  .valuation-list { grid-template-columns: 1fr; }
  #map { height: 300px; }
}

@media (max-width: 480px) {
  .section-title {
    font-size: 1.2rem;
    background: var(--disclaimer-bg) !important;
    color: var(--text-light) !important;
  }
  .property-box { padding: 0.75rem; min-height: 360px; }
  .property-info .price { font-size: 1.1rem; }
  .property-info .address { font-size: 1rem; }
  .property-box img { max-height: 140px; }
  .calc-container input[type="number"],
  .calc-container input[type="range"],
  .calc-container button {
    font-size: 0.9rem;
    padding: 0.5rem;
  }
}

/* === Dark Mode === */
@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #eee;
  }
  .comps-wrap,
  .small-estimate-box,
  #valuation-summary,
  #active-properties,
  #sold-properties,
  #rental-properties {
    background: #1e1e1e;
    color: #eee;
  }
  .property-box {
    background: #222;
    border-color: #333;
  }
  .property-info .comp-link a {
    background: #1e90ff;
    color: white;
  }
  .property-info .comp-link a:hover {
    background: #187bcd;
  }
  .section-title,
  .disclaimer,
  .valuation-list li strong {
    color: #ccc;
  }
  .property-info .price {
    color: #8ac;
  }
  .pin-label.rental,
  .numbered.rental {
    background: var(--blue-rental, #007BFF) !important;
    border: 2px solid #004085;
  }
  .numbered.profitable {
    background: var(--green-active) !important;
    border: 2px solid #1a5c2e;
  }
  #investor-calc,
  #calc-results,
  #amortization-schedule {
    background: #1a1a1a;
    color: #eee;
  }
  #investor-calc input[type="number"],
  #investor-calc select {
    background: #2c2c2c;
    color: #eee;
    border: 1px solid #666;
  }
  #amortization-schedule h4 {
    color: #ccc;
  }
  #amortization-schedule th {
    background: #444;
  }
  #commercial-noi-section {
    background: #1a1a1a;
  }
  .commercial-noi-grid {
    background: #2c2c2c;
  }
  .commercial-noi-results {
    background: #2c2c2c;
    color: #ccc;
  }
}