/* DH Electrical, fuseboard photo quote modal.
   Hand-written, not generated. Scoped under body.dh-v3 like the rest of the design, and built from
   the same tokens and components (.modal, .fld, .btn, .ai-drop, .qform-foot). */

body.dh-v3 [hidden]{display:none !important}

body.dh-v3 .pq-card{max-width:560px}

/* step indicator in the blue header */
body.dh-v3 .pq-steps{display:flex;gap:8px;margin:18px 0 0;padding:0;list-style:none}
body.dh-v3 .pq-steps li{flex:1;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.78);font-family:'Archivo',sans-serif;font-size:.74rem;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1}
body.dh-v3 .pq-steps li span{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.2);color:#fff;font-size:.72rem}
body.dh-v3 .pq-steps li.on{background:#fff;color:var(--blue-d)}
body.dh-v3 .pq-steps li.on span{background:var(--blue);color:#fff}
body.dh-v3 .pq-steps li.done{background:rgba(255,255,255,.2);color:#fff}
body.dh-v3 .pq-steps li.done span{background:var(--green);color:#fff}

body.dh-v3 .pq-view{display:none}
body.dh-v3 .pq-view.on{display:block}

/* step 1 */
body.dh-v3 .pq-drop{display:block;margin-bottom:16px;text-align:center}
body.dh-v3 .pq-drop.drag{border-color:var(--blue);background:rgba(46,107,230,.06)}
body.dh-v3 .pq-drop:focus-visible{outline:3px solid rgba(46,107,230,.35);outline-offset:2px}
body.dh-v3 .pq-preview{position:relative;margin-bottom:16px;border-radius:var(--r-lg);overflow:hidden;
  background:#0B1028;border:1px solid var(--line)}
body.dh-v3 .pq-preview img{display:block;width:100%;max-height:320px;object-fit:contain}
body.dh-v3 .pq-change{position:absolute;right:12px;bottom:12px;border:0;cursor:pointer;background:#fff;color:var(--ink);
  font-family:'Archivo',sans-serif;font-size:.8rem;font-weight:700;padding:9px 14px;border-radius:100px;box-shadow:var(--sh-2)}
body.dh-v3 .pq-change:hover{color:var(--blue-d)}

/* step 2 */
body.dh-v3 .pq-thumb-row{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:18px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--paper);font-size:.88rem;line-height:1.4}
body.dh-v3 .pq-thumb-row img{width:54px;height:54px;flex:none;object-fit:cover;border-radius:var(--r-sm);background:var(--stone-2)}
body.dh-v3 .pq-thumb-row b{color:var(--ink)}
body.dh-v3 .pq-link{background:none;border:0;padding:0;cursor:pointer;color:var(--blue-d);font:inherit;font-weight:700;
  text-decoration:underline}
body.dh-v3 .pq-opt{font-weight:600;text-transform:none;letter-spacing:0;color:var(--soft);margin-left:4px}
body.dh-v3 .pq-hp{position:absolute !important;left:-10000px !important;top:auto;width:1px;height:1px;overflow:hidden}

body.dh-v3 .pq-error{background:#FDEEF2;border:1px solid #F2B8C7;color:#8A1F3D;border-radius:var(--r-sm);
  padding:12px 14px;font-size:.88rem;line-height:1.5;margin:4px 0 14px}

body.dh-v3 #pq-next:disabled,
body.dh-v3 #pq-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}

/* step 3 */
body.dh-v3 .pq-done{text-align:center;padding:8px 0 4px}
body.dh-v3 .pq-done > svg{width:60px;height:60px;color:var(--green);margin:0 auto 14px;display:block}
body.dh-v3 .pq-done h3{font-size:1.35rem;margin-bottom:8px}
body.dh-v3 .pq-done p{margin:0 auto 22px;max-width:40ch}
body.dh-v3 .pq-done .btn + .btn{margin-top:10px}

@media(max-width:620px){
  body.dh-v3 .pq-steps li{font-size:0;gap:0;justify-content:center}
  body.dh-v3 .pq-steps li span{font-size:.72rem}
}