/* Configurator funnel styles. Consumes shared tokens.css. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--pr-font);
  color: var(--pr-ink);
  /* Warm cream + a faint, seamless paper grain so the page feels organic, not clinical-white. */
  background-color: var(--pr-cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  line-height: 1.5;
}

/* Warm slab-serif headings give the outdoors/field-guide feel; body stays a clean sans. */
.pr-q-title, .pr-result-hd h2, .pr-tiers-hd h3, .pr-lead h3, .pr-faraway h3,
.pr-modal-title, .pr-brand, .pr-band, .pr-success .big { font-family: var(--pr-font-head); }

.pr-app {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem);
  min-height: 100vh;
}

/* Header / progress */
.pr-header { display: flex; align-items: center; justify-content: space-between; gap: var(--pr-gap); margin-bottom: var(--pr-gap); }
.pr-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--pr-forest); }
.pr-brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--pr-pine); box-shadow: 0 0 0 4px rgba(46,125,91,0.18); }
.pr-progress { flex: 1; height: 8px; background: var(--pr-line); border-radius: 99px; overflow: hidden; max-width: 360px; }
.pr-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--pr-pine), var(--pr-forest)); width: 0%; transition: width 0.4s var(--pr-ease); }
.pr-step-count { font-size: var(--pr-small); color: var(--pr-slate); white-space: nowrap; }

/* Two-column layout */
.pr-stage { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--pr-gap-lg); align-items: stretch; }
/* Mobile: question card FIRST — ad traffic must land on the question, not the sketch
   (QA 2026-06-10: order:-1 buried the first question half below the fold on a 390px phone). */
@media (max-width: 820px) { .pr-stage { grid-template-columns: 1fr; } }

/* Visual / live concept panel */
.pr-visual {
  background: linear-gradient(160deg, #eaf3ee, #dfeee6);
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-radius);
  padding: var(--pr-gap);
  display: flex; flex-direction: column; gap: var(--pr-gap-sm);
  box-shadow: var(--pr-shadow-sm);
  position: sticky; top: 1rem; align-self: start;
}
.pr-visual h3 { margin: 0; font-size: var(--pr-small); text-transform: uppercase; letter-spacing: 0.08em; color: var(--pr-slate); }
.pr-visual svg { width: 100%; height: auto; display: block; }
.pr-visual .exterior { background: #fff; border-radius: var(--pr-radius-sm); padding: 0.5rem; }
.pr-visual .floor { background: #fff; border-radius: var(--pr-radius-sm); padding: 0.5rem; }
.pr-visual .vlabel { font-size: var(--pr-small); color: var(--pr-slate); margin-top: -0.3rem; }
.pr-spec-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pr-chip { background: #fff; border: 1px solid var(--pr-line); color: var(--pr-forest-700); font-size: var(--pr-small); padding: 0.25rem 0.6rem; border-radius: 99px; }

/* Question card */
.pr-card { background: var(--pr-card); border: 1px solid var(--pr-line); border-radius: var(--pr-radius); padding: var(--pr-gap-lg); box-shadow: var(--pr-shadow); display: flex; flex-direction: column; }
.pr-q-title { font-size: var(--pr-h2); font-weight: 800; margin: 0 0 0.3rem; letter-spacing: -0.01em; }
.pr-q-sub { color: var(--pr-slate); margin: 0 0 var(--pr-gap); font-size: 0.95rem; }

/* Options */
.pr-options { display: grid; gap: var(--pr-gap-sm); }
.pr-options.cols-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .pr-options.cols-2 { grid-template-columns: 1fr; } }
.pr-option { text-align: left; background: var(--pr-cream); border: 2px solid var(--pr-line); border-radius: var(--pr-radius-sm); padding: 0.85rem 1rem; cursor: pointer; transition: border-color 0.15s var(--pr-ease), transform 0.05s, background 0.15s; display: flex; gap: 0.7rem; align-items: center; font: inherit; }
.pr-option:hover { border-color: var(--pr-pine); background: #fff; }
.pr-option:active { transform: translateY(1px); }
.pr-option.selected { border-color: var(--pr-forest); background: #eef6f1; }
.pr-option .ico { font-size: 1.4rem; line-height: 1; width: 1.8rem; text-align: center; }
.pr-option .ot { font-weight: 700; }
.pr-option .od { font-size: var(--pr-small); color: var(--pr-slate); }

/* Number stepper */
.pr-stepper { display: flex; align-items: center; gap: var(--pr-gap); justify-content: center; padding: var(--pr-gap) 0; }
.pr-stepper button { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--pr-line); background: #fff; font-size: 1.5rem; cursor: pointer; color: var(--pr-forest); }
.pr-stepper button:hover { border-color: var(--pr-pine); }
.pr-stepper .val { font-size: 2.4rem; font-weight: 800; min-width: 2.5ch; text-align: center; }

/* Text input */
.pr-input { width: 100%; padding: 0.85rem 1rem; border: 2px solid var(--pr-line); border-radius: var(--pr-radius-sm); font: inherit; }
.pr-input:focus { outline: none; border-color: var(--pr-pine); }
.pr-field { margin-bottom: var(--pr-gap-sm); }
.pr-field label { display: block; font-weight: 700; font-size: var(--pr-small); margin-bottom: 0.3rem; }

/* Footer / nav */
.pr-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--pr-gap-lg); gap: var(--pr-gap); }
.pr-btn { font: inherit; font-weight: 700; border-radius: 999px; padding: 0.85rem 1.7rem; cursor: pointer; border: 2px solid transparent; }
.pr-btn-primary { background: var(--pr-forest); color: #fff; }
.pr-btn-primary:hover { background: var(--pr-forest-700); }
.pr-btn-primary:disabled { background: #b9c6bf; cursor: not-allowed; }
.pr-btn-ghost { background: transparent; color: var(--pr-slate); border-color: transparent; }
.pr-btn-ghost:hover { color: var(--pr-forest); }
.pr-btn-link { background: none; border: none; color: var(--pr-slate); text-decoration: underline; cursor: pointer; font: inherit; font-size: var(--pr-small); }

/* Result screen */
.pr-result { background: var(--pr-card); border: 1px solid var(--pr-line); border-radius: var(--pr-radius); box-shadow: var(--pr-shadow); overflow: hidden; }
/* Photographic hero: a dark forest scrim over the curated --hero image (set inline per RV type).
   Falls back to a forest gradient when --hero is unset or the image fails to load, so the title
   stays legible on any photo and nothing breaks before the assets are added. */
.pr-result-hd {
  background-color: var(--pr-forest);
  background-image: linear-gradient(150deg, rgba(22,59,44,0.80), rgba(20,40,33,0.62)), var(--hero, none);
  background-size: cover; background-position: center;
  color: #fff; padding: var(--pr-gap-lg);
  min-height: clamp(170px, 30vw, 280px);
  display: flex; align-items: flex-end;
}
.pr-result-hd h2 { margin: 0; font-size: clamp(1.05rem, 4.6vw, 2.4rem); white-space: nowrap; text-shadow: 0 2px 14px rgba(0,0,0,0.40); }
.pr-result-body { padding: var(--pr-gap-lg); display: grid; gap: var(--pr-gap-lg); }
.pr-concept-info { display: flex; flex-direction: column; gap: var(--pr-gap-sm); }
.pr-band { font-size: 1.4rem; font-weight: 800; color: var(--pr-forest); }
.pr-band small { display: block; font-size: var(--pr-small); font-weight: 600; color: var(--pr-slate); text-transform: uppercase; letter-spacing: 0.06em; }
.pr-highlights { list-style: none; padding: 0; margin: var(--pr-gap-sm) 0 0; display: grid; gap: 0.4rem; }
.pr-highlights li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.95rem; }
.pr-highlights li::before { content: "✓"; color: var(--pr-pine); font-weight: 800; }

/* "We have one like this" block */
.pr-realunit { border: 1px solid var(--pr-line); border-radius: var(--pr-radius); overflow: hidden; }
.pr-realunit-tag { background: var(--pr-amber); color: #4a2e00; font-weight: 800; font-size: var(--pr-small); padding: 0.4rem 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.pr-realunit-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--pr-gap); padding: var(--pr-gap); }
@media (max-width: 640px) { .pr-realunit-body { grid-template-columns: 1fr; } }
.pr-gallery { display: grid; gap: 0.4rem; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 90px; }
.pr-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; background: #eee; }
.pr-gallery img:first-child { grid-row: span 2; grid-column: 1; height: 184px; }
.pr-locked { color: var(--pr-slate); font-size: var(--pr-small); display: inline-flex; align-items: center; gap: 0.3rem; }

/* Lead capture */
.pr-lead { background: #eef6f1; border: 1px solid var(--pr-line); border-radius: var(--pr-radius); padding: var(--pr-gap-lg); }
.pr-lead h3 { margin: 0 0 0.3rem; font-size: var(--pr-h2); }
.pr-lead p { margin: 0 0 var(--pr-gap); color: var(--pr-slate); }
.pr-lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pr-gap-sm); }
@media (max-width: 520px) { .pr-lead-grid { grid-template-columns: 1fr; } }
.pr-lead-grid .full { grid-column: 1 / -1; }
.pr-cta-row { display: flex; flex-wrap: wrap; gap: var(--pr-gap-sm); margin-top: var(--pr-gap); }
.pr-success { background: #eef6f1; border: 2px solid var(--pr-pine); border-radius: var(--pr-radius); padding: var(--pr-gap-lg); text-align: center; }
.pr-success .big { font-size: 2.5rem; }
.pr-error { color: var(--pr-danger); font-size: var(--pr-small); margin-top: 0.4rem; min-height: 1.1em; }
.pr-mock-flag { position: fixed; bottom: 10px; right: 10px; background: var(--pr-ink); color: #9be3bf; font-size: 11px; padding: 3px 8px; border-radius: 6px; font-family: monospace; opacity: 0.8; z-index: 50; }

/* RV-type tiles — light background, black line-art silhouettes, uppercase labels
   (the rvgraphics style in light mode). Scoped to .pr-tile so the live concept panel keeps its
   coloured illustrations. */
.pr-tilegrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pr-gap-sm); }
@media (min-width: 560px) { .pr-tilegrid { grid-template-columns: 1fr 1fr 1fr; } }
.pr-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.45rem; background: var(--pr-cream); border: 2px solid var(--pr-line); border-radius: var(--pr-radius-sm); padding: 0.8rem 0.6rem 0.7rem; cursor: pointer; font: inherit; color: var(--pr-ink); transition: border-color 0.15s var(--pr-ease), background 0.15s, transform 0.05s; }
.pr-tile:hover { border-color: var(--pr-pine); background: #fff; }
.pr-tile:active { transform: translateY(1px); }
.pr-tile.selected { border-color: var(--pr-forest); background: #eef6f1; }
.pr-tile svg { width: 100%; height: auto; max-height: 82px; }
/* Render the silhouette as uniform black outlines (overrides the SVG's inline colours). */
.pr-tile .exterior * { fill: none; stroke: var(--pr-ink); stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.pr-tile .tlabel { font-weight: 800; font-size: 0.82rem; text-align: center; color: var(--pr-forest-700); line-height: 1.15; text-transform: uppercase; letter-spacing: 0.04em; }
.pr-tile .chev { position: absolute; top: 6px; right: 9px; font-size: 1.3rem; font-weight: 800; color: var(--pr-pine); }
.pr-tile.plain { justify-content: center; min-height: 96px; }
.pr-tile.plain .qmark { font-size: 2rem; }
.pr-tile.back { justify-content: center; min-height: 96px; color: var(--pr-slate); }
.pr-tile.back .chev { position: static; }

/* Who tiles + counters */
.pr-option.whotile { justify-content: flex-start; }
.pr-counters { margin-top: var(--pr-gap); display: grid; gap: var(--pr-gap-sm); background: #eef6f1; border: 1px solid var(--pr-line); border-radius: var(--pr-radius-sm); padding: var(--pr-gap); }
.pr-counter { display: flex; align-items: center; justify-content: space-between; gap: var(--pr-gap-sm); }
.pr-counter > span:first-child { font-weight: 700; flex: 1; }
.pr-counter button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--pr-line); background: #fff; font-size: 1.2rem; cursor: pointer; color: var(--pr-forest); }
.pr-counter button:hover { border-color: var(--pr-pine); }
.pr-counter .cval { min-width: 2ch; text-align: center; font-size: 1.3rem; font-weight: 800; }

/* Monthly payment + disclaimer */
.pr-monthly { margin-top: 0.35rem; color: var(--pr-slate); font-size: 0.95rem; }
.pr-monthly b { color: var(--pr-pine); font-size: 1.05rem; }
.pr-disclaimer { font-size: 0.75rem; color: var(--pr-slate); margin: 0; line-height: 1.45; }

/* Length-tier result cards */
.pr-tiers-hd h3 { margin: 0 0 0.2rem; font-size: var(--pr-h2); }
.pr-tiers-hd p { margin: 0; color: var(--pr-slate); font-size: 0.92rem; }
.pr-tiers { display: grid; gap: var(--pr-gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pr-tier { border: 1px solid var(--pr-line); border-radius: var(--pr-radius); overflow: hidden; background: var(--pr-card); display: flex; flex-direction: column; box-shadow: var(--pr-shadow-sm); }
.pr-tier-imgwrap { position: relative; aspect-ratio: 16/10; background: #e7ece9; }
/* Neutral placeholder for units with no image, or whose link 404s (the img self-removes via
   onerror). Sits behind the image, so it only shows through once there's no img. */
.pr-tier-imgwrap::before { content: "🚐"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; opacity: 0.35; }
.pr-tier-img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-tier-avail { position: absolute; top: 8px; left: 8px; background: var(--pr-amber); color: #4a2e00; font-weight: 800; font-size: 0.72rem; padding: 0.25rem 0.55rem; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.03em; }
.pr-tier-info { padding: var(--pr-gap-sm); display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.pr-tier-len { font-weight: 800; font-size: 1.05rem; color: var(--pr-forest-700); }
.pr-tier-sub { font-size: var(--pr-small); color: var(--pr-slate); }
.pr-tier-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pr-tier-tag { background: var(--pr-mist, #eef3f0); color: var(--pr-forest-700); font-weight: 700; font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 99px; }
.pr-tier-cta { margin-top: auto; display: grid; gap: 0.4rem; padding-top: 0.4rem; }
.pr-tier-cta .pr-btn { padding: 0.6rem 0.8rem; font-size: 0.92rem; text-align: center; }

.pr-faraway { background: #eef6f1; border: 1px solid var(--pr-line); border-radius: var(--pr-radius); padding: var(--pr-gap-lg); text-align: center; }
.pr-faraway h3 { margin: 0 0 0.3rem; }
.pr-faraway p { margin: 0 0 var(--pr-gap); color: var(--pr-slate); }
.pr-faraway .pr-cta-row { justify-content: center; }

/* Lead popup modal */
#pr-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem; }
#pr-modal.open { display: flex; }
.pr-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 28, 24, 0.55); backdrop-filter: blur(2px); }
.pr-modal-card { position: relative; background: #fff; border-radius: var(--pr-radius); box-shadow: 0 20px 60px rgba(0,0,0,0.35); padding: var(--pr-gap-lg); width: min(480px, 100%); max-height: 92vh; overflow: auto; animation: pop 0.18s var(--pr-ease); }
@keyframes pop { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.pr-modal-x { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--pr-slate); }
.pr-modal-x:hover { color: var(--pr-ink); }
.pr-modal-title { margin: 0 1.5rem 0.2rem 0; font-size: var(--pr-h2); }
.pr-modal-sub { margin: 0 0 var(--pr-gap); color: var(--pr-slate); font-size: 0.92rem; }
.pr-modal-submit { width: 100%; margin-top: var(--pr-gap-sm); }
.pr-check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; color: var(--pr-ink); margin-top: 0.5rem; cursor: pointer; }
.pr-check input { margin-top: 0.2rem; width: 16px; height: 16px; accent-color: var(--pr-forest); flex: none; }

/* ── 2026-06-10 design pass: photo-led visuals, line-art icons, mobile chip strip ── */
.pr-ico { width: 26px; height: 26px; color: var(--pr-forest); display: block; }
.pr-option .ico { display: flex; align-items: center; flex-shrink: 0; }
.pr-tile .qmark .pr-ico { width: 34px; height: 34px; margin: 0 auto; color: var(--pr-slate); }
.pr-ico-big .pr-ico { width: 56px; height: 56px; margin: 0 auto; color: var(--pr-pine); }
.pr-tier-tag .pr-ico { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.pr-vphoto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--pr-radius-sm); display: block; }
.pr-vplaceholder { background: #fff; border-radius: var(--pr-radius-sm); padding: 2.2rem 1.4rem; text-align: center; color: var(--pr-slate); }
.pr-vplaceholder p { margin: 0; font-size: 0.95rem; }
.pr-chipstrip { display: none; }
@media (max-width: 820px) {
  /* mobile: question first; the build story lives in a slim chip strip under the header */
  .pr-visual { display: none; }
  .pr-chipstrip { display: flex; flex-wrap: wrap; gap: 6px; max-width: 760px; margin: 10px auto 0; padding: 0 2px; }
}