/* ==========================================================================
   Home Value Estimator: styles
   Dark, understated theme meant to sit quietly inside askcharles.realtor.
   Colors are set as CSS variables up top. Safe to retune without touching
   anything below.
   ========================================================================== */

:root {
  --hve-bg: #000000;
  --hve-bg-card: #17181b;
  --hve-bg-raised: #1e2023;
  --hve-border: #2a2c30;
  --hve-text: #f2efe9;
  --hve-text-muted: #a6a49d;
  --hve-accent: #b19a55;
  --hve-accent-text: #16140d;
  --hve-danger: #c97b6a;
  --hve-radius: 4px;
  --hve-font-serif: 'Fraunces', Georgia, serif;
  --hve-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hve-max-width: 560px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--hve-bg);
  color: var(--hve-text);
  font-family: var(--hve-font-sans);
  -webkit-font-smoothing: antialiased;
}

.hve-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 36px 20px 16px;
}

.hve-progress {
  width: 100%;
  max-width: var(--hve-max-width);
  height: 2px;
  background: var(--hve-border);
  margin-bottom: 28px;
  border-radius: 2px;
  overflow: hidden;
}

.hve-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--hve-accent);
  transition: width 0.35s ease;
}

.hve-layout {
  width: 100%;
  max-width: var(--hve-max-width);
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
}

.hve-card {
  width: 100%;
  max-width: var(--hve-max-width);
  background: var(--hve-bg-card);
  border: 1px solid var(--hve-border);
  border-radius: var(--hve-radius);
  padding: 40px 36px;
  position: relative;
  min-height: 360px;
}

/* Photo panel: hidden by default (mobile), shown to the right of the
   card once there's enough width. Swaps to match whichever neighborhood
   is selected. If no image loads (e.g. placeholder path with no real
   file yet), it just stays hidden instead of showing a broken icon. */
.hve-photo-panel {
  display: none;
}

.hve-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--hve-radius);
  border: 1px solid var(--hve-border);
}

.hve-step {
  display: none;
  animation: hveFade 0.3s ease;
}

.hve-step.is-active {
  display: block;
}

@keyframes hveFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.hve-eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hve-text-muted);
  margin: 0 0 14px;
}

.hve-title {
  font-family: var(--hve-font-serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 16px;
}

.hve-question {
  font-family: var(--hve-font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  margin: 0 0 20px;
}

.hve-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--hve-text-muted);
  margin: 0 0 28px;
}

.hve-hint {
  font-size: 13px;
  color: var(--hve-text-muted);
  margin: -12px 0 20px;
}

.hve-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.hve-option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--hve-bg-raised);
  border: 1px solid var(--hve-border);
  color: var(--hve-text);
  border-radius: var(--hve-radius);
  padding: 14px 16px;
  font-family: var(--hve-font-sans);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.hve-option:hover {
  border-color: var(--hve-accent);
}

.hve-option.is-selected {
  border-color: var(--hve-accent);
  background: rgba(185, 154, 91, 0.12);
}

.hve-option-sub {
  display: block;
  font-size: 12px;
  color: var(--hve-text-muted);
  margin-top: 2px;
}

.hve-field-group {
  margin-bottom: 18px;
}

.hve-label {
  display: block;
  font-size: 13px;
  color: var(--hve-text-muted);
  margin-bottom: 8px;
}

.hve-select,
.hve-input {
  width: 100%;
  background: var(--hve-bg-raised);
  border: 1px solid var(--hve-border);
  color: var(--hve-text);
  border-radius: var(--hve-radius);
  padding: 13px 14px;
  font-family: var(--hve-font-sans);
  font-size: 15px;
  appearance: none;
}

.hve-select:focus,
.hve-input:focus {
  outline: none;
  border-color: var(--hve-accent);
}

.hve-fineprint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--hve-text-muted);
  margin: 4px 0 24px;
}

.hve-fineprint a {
  color: var(--hve-accent);
}

.hve-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 4px 0 16px;
}

.hve-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.hve-checkbox-label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--hve-accent);
}

.hve-checkbox-label span {
  font-size: 12px;
  line-height: 1.5;
  color: var(--hve-text-muted);
}

.hve-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.hve-nav-single {
  justify-content: flex-start;
}

.hve-btn {
  font-family: var(--hve-font-sans);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--hve-radius);
  padding: 13px 24px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.hve-btn-primary {
  background: var(--hve-accent);
  color: var(--hve-accent-text);
}

.hve-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.hve-btn-primary:not(:disabled):hover {
  opacity: 0.9;
}

.hve-btn-ghost {
  background: transparent;
  color: var(--hve-text-muted);
  border-color: var(--hve-border);
}

.hve-btn-ghost:hover {
  color: var(--hve-text);
  border-color: var(--hve-text-muted);
}

.hve-error {
  color: var(--hve-danger);
  font-size: 13px;
  margin: -10px 0 16px;
  display: none;
}

.hve-error.is-visible {
  display: block;
}

.hve-range {
  font-family: var(--hve-font-serif);
  font-size: 34px;
  font-weight: 500;
  color: var(--hve-accent);
  margin: 0 0 20px;
}

.hve-footer {
  max-width: var(--hve-max-width);
  width: 100%;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--hve-text-muted);
  margin-top: 20px;
  padding: 0 8px;
}

/* Once there's room for a card plus a photo without either feeling
   cramped, show the photo to the right of the card. */
@media (min-width: 900px) {
  .hve-layout {
    max-width: 980px;
  }
  .hve-photo-panel.has-photo {
    display: block;
    flex: 1 1 380px;
    max-width: 400px;
  }
}

@media (max-width: 480px) {
  .hve-card {
    padding: 28px 22px;
    min-height: 0;
  }
  .hve-title {
    font-size: 24px;
  }
  .hve-question {
    font-size: 20px;
  }
  .hve-range {
    font-size: 28px;
  }
}