/* Brand theme 2026-08-22 (Michael): black / yellow / white — matches the internal quote builder. */
:root {
  --brand-black: #0b0b0c;
  --brand-yellow: #f5c400;
  --brand-white: #ffffff;
  --bg: #f6f6f4;
  --panel: #ffffff;
  --border: #e3e3e0;
  --text: #111111;
  --muted: #6b6b70;
  --accent: #f5c400;        /* yellow — fills / buttons (always with black text on it) */
  --accent-dark: #b38f00;   /* dark gold — accent TEXT on white (pure yellow text is unreadable) */
  --accent-light: #ffd21f;  /* lighter yellow — borders / gradients / focus */
  --accent-hover: #dcae00;  /* yellow button hover */
  --accent-tint: #fff8d6;   /* light yellow — hover / selected rows */
  --focus-ring: rgba(245, 196, 0, 0.30);
  --on-dark-text: #ffffff;  /* text on the black topbar / price bar */
  --on-dark-muted: #b9b9bf;
  --on-dark-border: rgba(255, 255, 255, 0.14);
  --danger: #b3413a;        /* semantic error red — kept off-brand on purpose */
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 10px 28px -14px rgba(0, 0, 0, 0.18);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Page frame is black with a yellow glow at the top, fading to the light
   surface colour — same gradient the internal quote builder uses, so the
   two tools read as one family. */
html { background: var(--brand-black); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  padding-bottom: 110px; /* leave room for the fixed price bar */
  background:
    radial-gradient(1300px 700px at 12% 0%, rgba(245, 196, 0, 0.22), transparent 60%),
    radial-gradient(1100px 800px at 100% -5%, rgba(255, 210, 31, 0.14), transparent 55%),
    linear-gradient(200deg, #0b0b0c 0%, #151517 22%, #3a3a3e 42%, #dededa 62%, #f6f6f4 78%, #f6f6f4 100%);
  background-attachment: fixed;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: var(--brand-black);
  color: var(--on-dark-text);
  border-bottom: 1px solid var(--on-dark-border);
}
.brand-logo { height: 44px; width: 44px; object-fit: contain; border-radius: 8px; background: var(--brand-white); padding: 4px; box-shadow: var(--shadow-sm); }
.topbar h1 {
  margin: 0;
  font-size: 1.4rem;
  color: var(--on-dark-text);
  background: linear-gradient(135deg, var(--brand-white), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.subtitle { margin: 2px 0 0; color: var(--on-dark-muted); font-size: 0.9rem; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 24px; }

.hidden { display: none !important; }

.job-basics {
  display: grid;
  /* min(180px, 100%): a track can never be wider than the panel, so a phone
     (390px) gets one column instead of a sideways scroll. */
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
  background: var(--panel);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-md);
  margin-bottom: 20px;
}
/* min-width: 0 on the field and max-width on its control: a <select> is as
   wide as its longest option by default ("Citroën Dispatch / Expert / Proace /
   Vivaro Mk3 (2016+ body)"), which pushed the page sideways on a phone. */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
select, input[type="text"], input[type="tel"], input[type="email"] {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem; /* 16px: below this iOS Safari zooms the page on focus */
  background: var(--brand-white);
  color: var(--text);
  max-width: 100%;
  min-width: 0;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
select:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus {
  outline: none;
  border-color: var(--accent-light);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Status messages sit on the page gradient (black at the top, light at the
   bottom), so they get their own white panel to stay readable wherever
   they land. Errors stay semantic red, not brand yellow. */
.status-msg {
  text-align: center;
  color: var(--text);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 30px 10px;
  font-size: 0.95rem;
}
.status-msg.error { color: var(--danger); }
.status-msg.error a { color: inherit; font-weight: 600; text-decoration: underline; }
.status-msg.hidden { display: none; }

.categories { display: flex; flex-direction: column; gap: 14px; }

.category {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.cat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.cat-header::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.9) 55%, rgba(255,255,255,0.75) 100%);
}
.cat-header.no-photo { background: var(--bg); }
.cat-header-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.cat-name { font-weight: 700; font-size: 1.02rem; color: var(--text); }
.cat-count { font-size: 0.8rem; color: var(--muted); }

.cat-body { padding: 6px 18px 16px; }

.item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}
.item-row:first-child { border-top: none; }
.item-row:hover { background: var(--accent-tint); }
.item-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.item-thumb { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: var(--bg); border: 1px solid var(--border); }
.item-name { flex: 1; min-width: 0; font-size: 0.95rem; overflow-wrap: anywhere; }
.item-qty { color: var(--muted); font-size: 0.85rem; }

.named-config-row { gap: 6px; }
.named-config-inputs { display: flex; align-items: center; gap: 10px; }
.named-config-inputs select { flex: 1; width: auto; }
.option-preview { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; border: 1px solid var(--border); background-color: var(--bg); }

.roof-config {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px;
  padding: 6px 0 14px;
}
.roof-note { grid-column: 1 / -1; font-size: 0.82rem; color: var(--muted); margin-top: -6px; }
.roof-addons { padding-bottom: 10px; }
.roof-addons-title { font-weight: 600; font-size: 0.85rem; color: var(--muted); margin: 4px 0 6px; }

/* Black price bar with a yellow top stripe and the total in brand yellow —
   mirrors the internal builder's summary bar. */
.price-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--brand-black);
  color: var(--on-dark-text);
  border-top: 1px solid var(--on-dark-border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
  z-index: 30;
  flex-wrap: wrap;
}
.price-bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
}
.price-label { font-size: 0.8rem; color: var(--on-dark-muted); }
.price-sub { font-weight: 400; color: var(--on-dark-muted); }
.price-amount { font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--accent); }
.price-note { font-size: 0.72rem; color: var(--on-dark-muted); max-width: 420px; margin-top: 2px; }
.price-info.updating .price-amount { opacity: 0.5; }

.contact-btn {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: var(--brand-black);
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px -4px rgba(245, 196, 0, 0.45);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.contact-btn:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  box-shadow: 0 6px 16px -4px rgba(245, 196, 0, 0.55);
  transform: translateY(-1px);
}
.contact-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring), 0 4px 12px -4px rgba(245, 196, 0, 0.45); }

/* "Send me this quote" (20 Oct 2026): the panel at the foot of the page the
   price bar's button scrolls to. scroll-margin keeps its heading clear of the
   top when it is scrolled into view. */
.send-quote {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 18px;
  margin-top: 20px;
  scroll-margin-top: 12px;
}
.send-quote h2 { margin: 0 0 4px; font-size: 1.15rem; color: var(--text); }
.send-quote-intro { margin: 0 0 14px; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.field-wide { grid-column: 1 / -1; }
.form-hint { margin: 12px 0 0; color: var(--muted); font-size: 0.8rem; }
.form-error { margin: 8px 0 0; color: var(--danger); font-size: 0.88rem; font-weight: 600; }
.send-btn { margin-top: 14px; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.send-btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.send-quote-done { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 2px; font-size: 1rem; outline: none; }
.send-quote-done span { color: var(--muted); font-size: 0.9rem; }
/* The honeypot: off screen for people, still in the form for bots. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* A phone (390px and down to 320px): the price bar becomes two short rows -
   the figure and the button side by side, the note under them - instead of
   a stacked column that covered a third of the screen. */
@media (max-width: 560px) {
  body { padding-bottom: 130px; }
  .topbar { padding: 14px 16px; }
  .topbar h1 { font-size: 1.2rem; }
  .cat-body { padding: 6px 14px 14px; }
  .price-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label btn" "amount btn" "note note";
    align-items: center;
    gap: 2px 12px;
    padding: 10px 16px 12px;
  }
  .price-info { display: contents; }
  .price-label { grid-area: label; }
  .price-amount { grid-area: amount; font-size: 1.4rem; }
  .price-note { grid-area: note; max-width: none; margin-top: 4px; font-size: 0.68rem; }
  .price-bar .contact-btn { grid-area: btn; padding: 11px 16px; font-size: 0.92rem; text-align: center; }
  .send-btn { width: 100%; }
}

/* ===================================================================
   VW Transporter hero photo
   Real photos of an Innercity Campers VW T6 conversion (Kier's van),
   swapped with a crossfade as the shopper focuses or picks options in
   a given category — see CATEGORY_PHOTOS / setHeroPhoto() in app.js.
   Two stacked <img> layers (a/b) crossfade via .is-visible; whichever
   is on top loads the next image while the current one stays put, so
   there's never a blank/broken flash mid-transition.
   =================================================================== */

.van-preview {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 10px;
  box-shadow: var(--shadow-md);
  margin-bottom: 20px;
}
.van-photo-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
.van-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.van-photo.is-visible { opacity: 1; }
.van-photo-caption {
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 8px 4px 2px;
}

/* Electrical systems on the customer view (Michael, 6 Sept 2026: "update the
   customer van builder with the same product system"). The eight systems as
   one pick, in plain language and with no component list — a customer is
   choosing how they want to camp, not a strip fuse. No prices anywhere: the
   running total at the bottom is the only figure they see. */
.electrics-block { display: flex; flex-direction: column; gap: 14px; }
.electrics-hint { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.electrics-sub {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent-dark); margin-bottom: 6px;
}
.system-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.system-card {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  padding: 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); cursor: pointer; font: inherit; color: var(--text);
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.system-card:hover { border-color: var(--accent-light); background: var(--accent-tint); }
.system-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.system-card.selected { border-color: var(--accent); background: var(--accent-tint); box-shadow: var(--shadow-sm); }
.system-card-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-black); color: var(--brand-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700;
}
.system-card.selected .system-card-num { background: var(--accent); color: var(--brand-black); }
.system-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.system-card-title { font-weight: 600; line-height: 1.3; }
.system-card-blurb { color: var(--muted); font-size: 0.85rem; line-height: 1.4; }
.electrics-parts, .electrics-extras {
  border-top: 1px solid var(--border); padding-top: 12px;
}