/* =========================================================
   valuation-quiz.css — Multi-step property valuation quiz
   Prefix: vq-
   ========================================================= */

/* ── Overlay ─────────────────────────────────────────────── */
.vq-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 22, 16, 0.58);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              visibility 300ms step-end;
  overscroll-behavior: contain;
}
.vq-overlay.vq--open {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0ms;
}

/* ── Dialog ──────────────────────────────────────────────── */
.vq-dialog {
  position: relative;
  width: 100%;
  max-width: 740px;
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(8, 22, 16, 0.26), 0 8px 24px rgba(8, 22, 16, 0.12);
  transform: scale(0.93) translateY(14px);
  transition: transform 340ms cubic-bezier(0.34, 1.32, 0.64, 1);
  outline: none;
  overflow: hidden;
}
.vq-overlay.vq--open .vq-dialog { transform: scale(1) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .vq-overlay, .vq-overlay.vq--open,
  .vq-dialog, .vq-overlay.vq--open .vq-dialog { transition: none; }
}

/* ── Header ──────────────────────────────────────────────── */
.vq-header {
  flex-shrink: 0;
  background: linear-gradient(135deg, #155945 0%, #1a7259 60%, #0f3d2c 100%);
  padding: 1.75rem 1.75rem 0;
  position: relative;
  overflow: hidden;
}
.vq-header::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 55%; height: 200%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.vq-header__top {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.vq-header__text { flex: 1; min-width: 0; }
.vq-header__eyebrow {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.5rem;
}
.vq-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.vq-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

/* ── Close button ────────────────────────────────────────── */
.vq-close {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.8);
  transition: background 0.18s, border-color 0.18s;
  padding: 0;
  position: relative; z-index: 1;
}
.vq-close:hover, .vq-close:focus-visible {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.55);
  outline: none;
}

/* ── Progress bar ────────────────────────────────────────── */
.vq-progress {
  position: relative; z-index: 1;
  padding: 1rem 0 0;
  display: flex; align-items: center; gap: 0.75rem;
}
.vq-progress__track {
  flex: 1; height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px; overflow: hidden;
}
.vq-progress__fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #c5a46a, #e0c07a);
  border-radius: 2px;
  transition: width 400ms cubic-bezier(0.34, 1.32, 0.64, 1);
}
.vq-progress__label {
  font-size: 0.7rem; font-weight: 600;
  color: rgba(255,255,255,0.5);
  white-space: nowrap; letter-spacing: 0.04em;
}
.vq-header-gap { height: 1.25rem; }

/* ── Content / Step ──────────────────────────────────────── */
.vq-content {
  flex: 1;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #e0e0e0 transparent;
}
.vq-step {
  padding: 1.875rem 1.875rem 0.5rem;
  min-height: 260px;
  transition: transform 260ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 220ms ease;
}
.vq-step__q {
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 800; color: #0f2e23;
  margin: 0 0 0.375rem;
  letter-spacing: -0.02em; line-height: 1.3;
}
.vq-step__hint {
  font-size: 0.8125rem; color: #787878;
  margin: 0 0 1.25rem;
}

/* ── Type cards (step 1) ─────────────────────────────────── */
.vq-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.875rem; margin-top: 1.25rem;
}
.vq-type-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  background: #f9fdf9;
  border: 2px solid #e8f0ec;
  border-radius: 18px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
  font-family: inherit; font-size: 0.9375rem; font-weight: 600;
  color: #0f2e23; text-align: center;
}
.vq-type-card:hover {
  border-color: rgba(21,89,69,0.4); background: #f0faf5;
  transform: translateY(-3px); box-shadow: 0 8px 24px rgba(21,89,69,0.1);
}
.vq-type-card--selected {
  border-color: #155945; background: #edf7f2;
  box-shadow: 0 0 0 1px #155945, 0 8px 28px rgba(21,89,69,0.15);
  color: #155945;
}
.vq-type-card__icon { color: #6b8577; transition: color 0.2s; line-height: 1; }
.vq-type-card--selected .vq-type-card__icon { color: #155945; }
.vq-type-card__label { font-size: 0.875rem; font-weight: 700; }

/* ── Form fields ─────────────────────────────────────────── */
.vq-fields { display: flex; flex-direction: column; gap: 1.125rem; margin-top: 1.25rem; }
.vq-row    { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.875rem; }
.vq-row--2 { grid-template-columns: repeat(2,1fr); }
.vq-field  { display: flex; flex-direction: column; gap: 0.375rem; }
.vq-label  { font-size: 0.75rem; font-weight: 600; color: #787878; letter-spacing: 0.04em; }

/* Base input */
.vq-input {
  width: 100%; padding: 0.75rem 1rem;
  font-size: 0.9375rem; font-family: inherit; color: #0f2e23;
  background: #f5fcf8; border: 1.5px solid #ddeee6;
  border-radius: 12px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  appearance: none; -webkit-appearance: none;
  box-sizing: border-box;
}
.vq-input:hover  { border-color: #b8d9c8; }
.vq-input:focus  { border-color: #155945; background: #fff; box-shadow: 0 0 0 3px rgba(21,89,69,0.12); }
.vq-input::placeholder { color: #aaa; }

/* Error state */
.vq-input--error { border-color: #e05252 !important; box-shadow: 0 0 0 3px rgba(224,82,82,0.12) !important; }

/* Hide the native select (replaced by custom UI) */
.vq-input--select { display: none !important; }

/* ── Custom number input ─────────────────────────────────── */
.vq-num {
  display: flex; align-items: stretch;
  border: 1.5px solid #ddeee6; border-radius: 12px;
  background: #f5fcf8; overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.vq-num:focus-within {
  border-color: #155945; background: #fff;
  box-shadow: 0 0 0 3px rgba(21,89,69,0.12);
}
.vq-num__btn {
  flex-shrink: 0; width: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 400; line-height: 1;
  color: #4a6659; background: transparent; border: none;
  cursor: pointer; padding: 0;
  transition: background 0.15s, color 0.15s;
  user-select: none; -webkit-user-select: none;
}
.vq-num__btn:hover { background: rgba(21,89,69,0.1); color: #155945; }
.vq-num__btn:active { background: rgba(21,89,69,0.18); }
.vq-num__dec { border-right: 1px solid #ddeee6; }
.vq-num__inc { border-left:  1px solid #ddeee6; }
.vq-num__input {
  flex: 1; min-width: 0;
  border: none; border-radius: 0;
  background: transparent;
  text-align: center;
  padding: 0.75rem 0.25rem;
  font-size: 0.9375rem; color: #0f2e23;
  -moz-appearance: textfield;
}
.vq-num__input:focus { box-shadow: none; outline: none; background: transparent; }
.vq-num__input::-webkit-outer-spin-button,
.vq-num__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Floor validation error */
.vq-floor-error {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 600; color: #c0392b;
  padding: 0.5rem 0.75rem;
  background: rgba(192,57,43,0.07); border-radius: 10px;
  border: 1px solid rgba(192,57,43,0.18);
}
.vq-floor-error svg { flex-shrink: 0; color: #c0392b; }

/* ── Custom select (district) ────────────────────────────── */
.vq-cs { position: relative; }

.vq-cs__trigger {
  display: flex; align-items: center;
  width: 100%; padding: 0.75rem 1rem;
  font-size: 0.9375rem; font-family: inherit; color: #0f2e23;
  background: #f5fcf8; border: 1.5px solid #ddeee6;
  border-radius: 12px; outline: none; cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, border-radius 0.15s;
}
.vq-cs__trigger:hover  { border-color: #b8d9c8; background: #eef8f3; }
.vq-cs--open .vq-cs__trigger {
  border-color: #155945; background: #fff;
  box-shadow: 0 0 0 3px rgba(21,89,69,0.12);
  border-radius: 12px 12px 0 0;
}
.vq-cs__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vq-cs__chevron {
  flex-shrink: 0; margin-left: 0.5rem; color: #6b8577;
  transition: transform 0.2s; display: flex; align-items: center;
}
.vq-cs--open .vq-cs__chevron { transform: rotate(180deg); }

.vq-cs__menu {
  /* Positioned via JS (position:fixed + top/left/width).
     Appended to <body> to escape overflow:auto clipping. */
  position: fixed;
  background: #fff; border: 1.5px solid #155945;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 28px rgba(21,89,69,0.14), 0 2px 8px rgba(21,89,69,0.07);
  max-height: 240px; overflow-y: auto;
  z-index: 9200;
  scrollbar-width: thin; scrollbar-color: #ddeee6 transparent;
  /* display controlled entirely by JS (style.display) */
}

.vq-cs__opt {
  display: block; width: 100%;
  padding: 0.6875rem 1rem;
  font-size: 0.9rem; font-family: inherit; font-weight: 500;
  color: #1f2937; background: transparent;
  border: none; text-align: left; cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.vq-cs__opt:hover         { background: #f0faf5; color: #155945; }
.vq-cs__opt--selected     { background: #edf7f2; color: #155945; font-weight: 700; }
.vq-cs__opt--placeholder  { color: #aaa; }
.vq-cs__opt + .vq-cs__opt { border-top: 1px solid #f0f5f2; }

/* ── Pills ───────────────────────────────────────────────── */
.vq-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vq-pill {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem; font-weight: 600; font-family: inherit;
  color: #4a6659; background: #f3faf6;
  border: 1.5px solid #d4e9dd; border-radius: 100px;
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.15s;
}
.vq-pill:hover        { border-color: #155945; background: #e8f5ee; transform: translateY(-1px); }
.vq-pill--selected    { background: #155945; border-color: #155945; color: #fff; box-shadow: 0 4px 12px rgba(21,89,69,0.25); }

/* ── Condition cards (step 4) ────────────────────────────── */
.vq-cond-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.75rem; margin-top: 1.25rem;
}
.vq-cond-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
  padding: 1.125rem 1.25rem;
  background: #f9fdf9; border: 2px solid #e0ece6; border-radius: 16px;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s;
}
.vq-cond-card:hover {
  border-color: rgba(21,89,69,0.4); background: #eef7f2;
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(21,89,69,0.1);
}
.vq-cond-card--selected {
  border-color: #155945; background: #edf7f2;
  box-shadow: 0 0 0 1px #155945, 0 6px 20px rgba(21,89,69,0.14);
}
.vq-cond-card__label { font-size: 0.9rem; font-weight: 700; color: #0f2e23; }
.vq-cond-card--selected .vq-cond-card__label { color: #155945; }
.vq-cond-card__desc  { font-size: 0.75rem; color: #8aab99; line-height: 1.4; }

/* ── Extras (step 5) ─────────────────────────────────────── */
.vq-extras { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.vq-extra {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.875rem;
  background: #f3faf6; border: 1.5px solid #d4e9dd;
  border-radius: 100px; cursor: pointer;
  font-size: 0.8125rem; font-weight: 600; color: #4a6659;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
  user-select: none;
}
.vq-extra:hover         { border-color: #155945; background: #e8f5ee; color: #155945; }
.vq-extra--checked      { background: #155945; border-color: #155945; color: #fff; }
.vq-extra__chk          { display: none; }
.vq-extra__label        { pointer-events: none; }

/* ── Footer nav ──────────────────────────────────────────── */
.vq-footer {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 1rem 1.875rem 1.5rem;
  border-top: 1px solid #eef4f1; background: #fff;
}
.vq-btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem; font-weight: 600; font-family: inherit;
  border-radius: 12px; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.18s, box-shadow 0.18s;
  border: none;
}
.vq-btn--back {
  background: #f3faf6; color: #4a6659;
  border: 1.5px solid #d4e9dd; visibility: hidden;
}
.vq-btn--back:hover { background: #e5f2ea; color: #155945; border-color: #a8d0bc; }
.vq-btn--next {
  margin-left: auto; background: #155945; color: #fff;
  box-shadow: 0 6px 20px rgba(21,89,69,0.3);
  padding: 0.875rem 2rem; font-size: 0.9375rem;
}
.vq-btn--next:hover:not(:disabled) {
  background: #0f3d2c; transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(21,89,69,0.38);
}
.vq-btn--next:disabled { background: #c8dcd4; box-shadow: none; cursor: not-allowed; color: #8aab99; }

/* ── Loading screen ──────────────────────────────────────── */
.vq-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3.5rem 2rem; gap: 1.5rem; min-height: 280px;
}
.vq-loading__ring { width: 64px; height: 64px; position: relative; }
.vq-loading__ring div {
  box-sizing: border-box; display: block; position: absolute;
  width: 52px; height: 52px; margin: 6px;
  border: 5px solid transparent; border-radius: 50%;
  animation: vq-spin 1.1s cubic-bezier(0.5,0,0.5,1) infinite;
}
.vq-loading__ring div:nth-child(1) { border-top-color: #155945;               animation-delay: -0.45s; }
.vq-loading__ring div:nth-child(2) { border-top-color: rgba(21,89,69,0.55);   animation-delay: -0.30s; }
.vq-loading__ring div:nth-child(3) { border-top-color: rgba(21,89,69,0.25);   animation-delay: -0.15s; }
.vq-loading__ring div:nth-child(4) { border-top-color: rgba(21,89,69,0.08); }
@keyframes vq-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.vq-loading__text { font-size: 0.9375rem; color: #6b8577; font-weight: 500; text-align: center; }

/* ── Result screen ───────────────────────────────────────── */
.vq-result {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 2.5rem 2rem 2rem;
}
.vq-result__badge {
  display: inline-block; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #155945;
  background: rgba(21,89,69,0.08); border: 1px solid rgba(21,89,69,0.18);
  border-radius: 100px; padding: 0.35rem 0.9rem; margin-bottom: 1rem;
}
.vq-result__value {
  font-size: clamp(2.25rem, 6vw, 3.5rem); font-weight: 900;
  color: #0f2e23; letter-spacing: -0.04em; line-height: 1;
  margin-bottom: 0.75rem; font-variant-numeric: tabular-nums;
}
.vq-result__range  { font-size: 0.875rem; color: #6b8577; margin-bottom: 1.625rem; line-height: 1.5; }
.vq-result__range strong { color: #155945; font-weight: 700; }
.vq-result__info {
  width: 100%; background: #f5fcf8; border: 1px solid #d4e9dd;
  border-radius: 14px; padding: 1rem 1.25rem; text-align: left; margin-bottom: 1.625rem;
}
.vq-result__info-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; font-weight: 700; color: #0f2e23; margin-bottom: 0.5rem;
}
.vq-result__info-title svg { color: #155945; flex-shrink: 0; }
.vq-result__info-text { font-size: 0.7875rem; color: #6b8577; line-height: 1.6; margin: 0; }
.vq-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  width: 100%; padding: 1.0625rem 2rem;
  background: #155945; color: #fff;
  font-size: 1rem; font-weight: 700; font-family: inherit;
  border: none; border-radius: 14px; cursor: pointer;
  box-shadow: 0 8px 28px rgba(21,89,69,0.3);
  margin-bottom: 0.75rem; letter-spacing: -0.01em;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.vq-cta-btn:hover { background: #0f3d2c; transform: translateY(-2px); box-shadow: 0 14px 36px rgba(21,89,69,0.38); }
.vq-cta-btn svg  { flex-shrink: 0; transition: transform 0.2s; }
.vq-cta-btn:hover svg { transform: translateX(3px); }
.vq-dismiss-btn {
  background: none; border: none; font-size: 0.8125rem; font-weight: 600;
  color: #8aab99; cursor: pointer; font-family: inherit;
  padding: 0.5rem 1rem; border-radius: 8px;
  transition: color 0.18s, background 0.18s;
}
.vq-dismiss-btn:hover { color: #155945; background: rgba(21,89,69,0.06); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .vq-overlay { padding: 0; align-items: flex-end; }
  .vq-dialog {
    max-width: 100%; max-height: 94dvh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .vq-overlay.vq--open .vq-dialog { transform: translateY(0); }

  /* drag handle */
  .vq-dialog::before {
    content: ''; display: block;
    width: 40px; height: 4px;
    background: rgba(0,0,0,0.15); border-radius: 2px;
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  }

  .vq-header        { padding: 1.5rem 1.125rem 0; }
  .vq-header::before { display: none; }
  .vq-title         { font-size: 1rem; }
  .vq-subtitle      { font-size: 0.75rem; }
  .vq-step          { padding: 1.25rem 1.125rem 0.5rem; min-height: 0; }
  .vq-step__q       { font-size: 1.0625rem; }

  .vq-cards         { gap: 0.5rem; }
  .vq-type-card     { padding: 1rem 0.625rem; gap: 0.5rem; }
  .vq-type-card__label { font-size: 0.8125rem; }

  .vq-cond-cards    { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .vq-cond-card     { padding: 0.875rem 0.875rem; }
  .vq-cond-card__desc { font-size: 0.7rem; }

  .vq-row           { grid-template-columns: repeat(3,1fr); gap: 0.5rem; }
  .vq-row--2        { grid-template-columns: 1fr 1fr; }

  /* iOS zoom prevention — inputs must be ≥16px */
  .vq-input, .vq-num__input, .vq-cs__trigger { font-size: 1rem; }

  .vq-footer {
    padding: 0.875rem 1.125rem calc(0.875rem + env(safe-area-inset-bottom, 0px));
    gap: 0.5rem;
  }
  .vq-btn--next { padding: 0.875rem 1.25rem; font-size: 0.9375rem; }
  .vq-btn--back { padding: 0.75rem 1rem; font-size: 0.875rem; }

  .vq-result        { padding: 1.625rem 1.125rem 1.25rem; }
  .vq-result__value { font-size: 2.25rem; }
  .vq-cta-btn       { font-size: 0.9375rem; padding: 1rem 1.5rem; }

  /* Custom select menu — full scroll inside modal */
  .vq-cs__menu      { max-height: 180px; }
}

@media (max-width: 380px) {
  .vq-cards         { grid-template-columns: 1fr 1fr; }
  .vq-cond-cards    { grid-template-columns: 1fr; }
  .vq-row           { grid-template-columns: 1fr 1fr; }
  .vq-type-card__label { font-size: 0.75rem; }
}