/* PDR dent map - additive, scoped to .dentmap. No global selectors.
   Palette matches the house style: near-black canvas, single gold accent. */
.dentmap{
  --dm-ink:#0f0f0f; --dm-panel:#1b1b1b; --dm-panel-hover:#242424;
  --dm-gold:#d4af37; --dm-gold-soft:#f2d97a; --dm-line:rgba(212,175,55,.35);
  --dm-text:#b9b3a5; --dm-text-on:#f2d97a; --dm-muted:#8d887c;
  background:var(--dm-ink); color:var(--dm-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.dentmap *, .dentmap *::before, .dentmap *::after{box-sizing:border-box}

/* ---- vehicle type pills (native radios, styled) -- works without JS ---- */
.dentmap-type{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.dentmap-type input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.dentmap-type label{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:88px;padding:.5rem 1rem;cursor:pointer;
  border:1px solid var(--dm-line);border-radius:999px;
  color:var(--dm-text);background:transparent;
  font-size:.9rem;letter-spacing:.04em;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.dentmap-type label:hover{border-color:rgba(212,175,55,.65);color:#e9e4d6}
.dentmap-type input:checked + label{
  background:rgba(212,175,55,.16);border-color:var(--dm-gold);color:var(--dm-gold-soft);
}
.dentmap-type input:focus-visible + label{outline:2px solid var(--dm-gold-soft);outline-offset:2px}

/* ---- the map ---- */
.dentmap-map{margin:0 auto;max-width:420px}
.dentmap-map[hidden]{display:none}
.dentmap-svg{
  display:block;width:100%;height:auto;
  /* viewBox + meet => the drawing never distorts at any container width */
}
.dentmap-body{fill:#121212;stroke:rgba(255,255,255,.10);stroke-width:1.5}
.dentmap-wheel{fill:#1a1a1a;stroke:rgba(255,255,255,.08);stroke-width:1}
.dentmap-glass{fill:rgba(212,175,55,.06);stroke:rgba(212,175,55,.18);stroke-width:1}
.dentmap-deck{fill:#141414;stroke:rgba(212,175,55,.14);stroke-width:1;stroke-dasharray:4 4}
.dentmap-divider{fill:none;stroke:rgba(212,175,55,.22);stroke-width:1;stroke-dasharray:5 5}

.dentmap-panel{
  fill:var(--dm-panel);stroke:var(--dm-line);stroke-width:1.5;
  stroke-linejoin:round;cursor:pointer;
  transition:fill .18s ease,stroke .18s ease;
  touch-action:manipulation;
}
.dentmap-panel:hover{fill:var(--dm-panel-hover);stroke:rgba(212,175,55,.65)}
.dentmap-panel[aria-pressed="true"]{
  fill:rgba(212,175,55,.22);stroke:var(--dm-gold);stroke-width:2.5;
}
.dentmap-panel:focus{outline:none}
.dentmap-panel:focus-visible{
  stroke:var(--dm-gold-soft);stroke-width:3;stroke-dasharray:none;
}
.dentmap-label{
  fill:var(--dm-text);font-family:inherit;font-weight:600;letter-spacing:.06em;
  transition:fill .18s ease;
}
.dentmap-panel[aria-pressed="true"] + .dentmap-label{fill:var(--dm-text-on)}

/* ---- selected chips: feedback + a second way to clear a panel ---- */
.dentmap-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 0;padding:0;list-style:none}
.dentmap-legend{margin:.6rem 0 0;font-size:.75rem;letter-spacing:.04em;color:var(--dm-muted)}
.dentmap-chips:empty::before{
  content:"No panels selected yet. Tap the panels that are damaged.";
  color:var(--dm-muted);font-size:.85rem;
}
.dentmap-chip{
  display:inline-flex;align-items:center;gap:.4rem;min-height:36px;
  padding:.3rem .6rem .3rem .7rem;border-radius:999px;
  background:rgba(212,175,55,.14);border:1px solid rgba(212,175,55,.5);
  color:var(--dm-gold-soft);font-size:.82rem;
}
.dentmap-chip button{
  background:none;border:0;color:inherit;font-size:1rem;line-height:1;
  padding:.25rem .2rem;cursor:pointer;
}
.dentmap-chip button:focus-visible{outline:2px solid var(--dm-gold-soft);outline-offset:1px}

/* ---- no-JS fallback: real checkboxes, same field name and values ---- */
.dentmap-fallback{border:0;padding:0;margin:0}
.dentmap-fallback legend{padding:0;font-size:.85rem;color:var(--dm-muted);margin-bottom:.5rem}
.dm-group{border:0;padding:0;margin:0 0 .75rem}
.dm-group legend{padding:0;font-weight:600;font-size:.85rem;color:#e9e4d6;margin-bottom:.35rem}
.dm-group[hidden], .dentmap-fallback [hidden]{display:none !important}
.dentmap-fallback ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:.25rem}
@media (min-width:560px){ .dentmap-fallback ul{grid-template-columns:1fr 1fr} }
.dentmap-fallback li{display:flex}
.dentmap-fallback label{
  display:flex;align-items:center;gap:.55rem;min-height:44px;width:100%;
  padding:.4rem .5rem;border-radius:10px;cursor:pointer;
}
.dentmap-fallback label:hover{background:rgba(212,175,55,.08)}
.dentmap-fallback input{width:20px;height:20px;accent-color:var(--dm-gold);flex:0 0 auto}

/* progressive enhancement switches */
html:not(.dentmap-ready) .dentmap-map{display:none}
html.dentmap-ready .dentmap-fallback{display:none}
html:not(.dentmap-ready) .dentmap-chips{display:none}
html:not(.dentmap-ready) .dentmap-legend{display:none}

.dentmap-status{margin:.75rem 0 0;font-size:.82rem;color:var(--dm-muted);min-height:1.2em}

@media (prefers-reduced-motion:reduce){
  .dentmap-panel,.dentmap-type label,.dentmap-label{transition:none}
}


/* ============================================================
   PDR quote form integration — additive, scoped to .quote-form
   (dent map + photo upload + sticky submit on mobile)
   ============================================================ */
.quote-form fieldset.dentmap{border:0;padding:0;margin:0 0 1.9rem}
.quote-form fieldset.dentmap > legend{
  padding:0;margin:0 0 .85rem;font-family:'Inter',sans-serif;
  font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#d4af37;
}
.dentmap-hint{margin:0 0 .9rem;font-size:.82rem;color:var(--dm-muted);line-height:1.6}
.dentmap-hint strong{color:#cfccc5;font-weight:600}

/* "not sure" escape hatch — same 44px tap target as everything else */
.dm-not-sure{margin:1rem 0 0}
.dm-not-sure label{
  display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.4rem .5rem;
  border-radius:10px;cursor:pointer;font-size:.88rem;color:#cfccc5;
}
.dm-not-sure label:hover{background:rgba(212,175,55,.08)}
.dm-not-sure input{width:20px;height:20px;accent-color:var(--dm-gold);flex:0 0 auto}
.dm-not-sure.is-on label{color:var(--dm-gold-soft)}

/* focus parity with the rest of the form */
.dentmap-panel:focus-visible{stroke:var(--dm-gold-soft);stroke-width:3}

/* ---- photo upload ---- */
.ph-dropzone{
  border:1px dashed rgba(212,175,55,.4);border-radius:12px;padding:1.1rem;
  text-align:center;transition:border-color .18s ease,background .18s ease;
}
.ph-dropzone.is-over{border-color:var(--dm-gold);background:rgba(212,175,55,.07)}
.ph-dropzone p{margin:0 0 .35rem;font-size:.88rem;color:#cfccc5}
.ph-dropzone .ph-sub{margin:0;font-size:.78rem;color:var(--dm-muted)}
.ph-pick{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  margin-bottom:.7rem;padding:0 1.1rem;border-radius:999px;cursor:pointer;
  border:1px solid rgba(212,175,55,.5);color:var(--dm-gold-soft);font-size:.86rem;
}
.ph-pick:hover{background:rgba(212,175,55,.12)}
/* input stays in the DOM and stays submit-able without JS: clip, never display:none */
.ph-input{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.ph-input:focus-visible + .ph-pick{outline:2px solid var(--dm-gold-soft);outline-offset:2px}

.ph-alert{margin:.8rem 0 0;padding:.6rem .8rem;border:1px solid rgba(255,120,100,.45);
  border-radius:10px;background:rgba(255,120,100,.08);color:#ffb4a8;font-size:.82rem;line-height:1.6}
.ph-alert[hidden]{display:none}
.ph-alert ul{margin:0;padding-left:1.1rem}
.ph-thumbs{list-style:none;margin:.9rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.6rem}
.ph-thumb{position:relative;margin:0;background:#151515;border:1px solid rgba(212,175,55,.25);border-radius:8px;overflow:hidden}
.ph-thumb img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.ph-thumb figcaption{padding:.3rem .35rem;font-size:.62rem;color:var(--dm-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-remove{
  position:absolute;top:0;right:0;width:44px;height:44px;display:grid;place-items:center;
  background:rgba(6,6,7,.72);color:var(--dm-gold-soft);border:0;border-radius:0 0 0 8px;
  font-size:1rem;line-height:1;cursor:pointer;
}
.ph-remove:focus-visible{outline:2px solid var(--dm-gold-soft);outline-offset:-2px}
.ph-total{margin:.7rem 0 0;font-size:.8rem;color:var(--dm-muted)}

/* ---- submit row: sticky on phones so the action is always one tap away ---- */
.quote-actions{margin-top:1.6rem;text-align:center}
.quote-actions .btn-gold{min-height:48px}
.quote-call{margin:.7rem 0 0;font-size:.82rem;color:#8d887c}
@media (max-width:640px){
  /* the map must keep every panel >=44px: it bleeds to the viewport edge
     instead of being narrowed by the card padding (spec §4.8: never shrink the map) */
  .dentmap-map{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .quote-actions{
    position:sticky;bottom:0;z-index:20;margin:1.2rem -1rem 0;padding:.7rem 1rem .9rem;
    background:linear-gradient(to top,rgba(15,15,15,.98),rgba(15,15,15,.92));
    border-top:1px solid rgba(212,175,55,.28);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }
  .quote-actions .btn-gold{width:100%;min-height:48px}
}
@media (prefers-reduced-motion:reduce){
  .ph-dropzone{transition:none}
}

/* Photo upload helper text (CEO 2026-11-09) */
.ph-note{font-size:.75rem;line-height:1.5;color:#8f8f8f;margin-top:.5rem}


/* Four-door legibility across all models (CEO 2026-11-09) */
.dentmap-seam{stroke:rgba(212,175,55,.7);stroke-width:1.5;stroke-linecap:round}
.dentmap-door-mark{fill:#d4af37;opacity:.9}

/* Safety: nothing inside the panel map may paint outside its own box */
.dentmap-map{overflow:hidden}
.dentmap-map svg{display:block;max-width:100%;height:auto}