/* Vejle Algerens: clear steps, contextual drawing help and one shared recap. */
.progress{gap:6px;padding:0 0 26px}
.progress .step{flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 2px 11px;border:0;border-bottom:3px solid #e6edf1;border-radius:6px 6px 0 0;background:transparent;min-height:57px;font-size:11px;line-height:1.3;text-align:center;color:var(--muted);transition:background .15s,border-color .15s}
.progress .step::after{display:none}
.progress .step .num{width:auto;height:auto;min-height:12px;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:10px;line-height:1;color:#718593}
.progress .step.active{background:#f0f9fe;border-bottom-color:var(--blue);color:#0976a8}
.progress .step.active .num{color:var(--blue);background:transparent;border:0;box-shadow:none}
.progress .step.complete{color:var(--ink);border-bottom-color:#b5d8e8}
.progress .step.complete .num{color:#087fab;background:transparent;border:0}
.progress .step:disabled{opacity:1;color:#8495a0}
.progress .step:not(:disabled):hover{background:#f0f9fe}
.progress .step:focus-visible{outline-offset:2px;border-radius:5px}

.measure-guide{padding:16px;border:1px solid #c3e3f1;border-left:3px solid var(--service-color);background:#f5fbfe;border-radius:10px;margin-top:18px}
.measure-guide .guide-heading h3{font-size:15px}
.measure-guide .map-tools{margin-top:13px;gap:12px;flex-direction:row;align-items:center}
.map-panel .map-status{left:16px;top:16px;right:56px;max-width:360px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:9px;background:white;padding:11px 13px;box-shadow:0 3px 12px #152b3b18}
.map-panel .drawing .map-status{border:1px solid var(--line);border-left:4px solid var(--service-color);background:white}
.map-panel .map-status strong{font-size:13px;margin-bottom:3px;line-height:1.4}
.map-panel .map-status>span{font-size:11px;line-height:1.5}
.map-draw-tools{background:white;padding:12px 14px}
.map-draw-tools .primary{background:var(--service-color,var(--blue));box-shadow:none;gap:8px}

.quote-recap{border:1px solid var(--line);border-radius:14px;padding:18px;background:white;overflow:hidden}
.recap-service{border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:16px 0}
.recap-service:first-child{padding-top:0}
.recap-service:last-child{border-bottom:0;padding-bottom:0}
.recap-service-heading{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center}
.recap-service-heading .recap-icon{display:grid;place-items:center;width:36px;height:36px;margin:0;border-radius:8px;background:var(--pale);color:#087fab}
.recap-icon svg{width:25px;height:25px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.recap-icon .brand-gutter-icon{width:28px;height:23px;margin:0;color:#087fab}
.recap-service-heading h2{font-size:14px;line-height:1.4;display:block;overflow-wrap:anywhere}
.recap-service-title{min-width:0}
.recap-service-title>span{font-size:11px;line-height:1.5;margin:3px 0 0}
.recap-service-actions{gap:2px;min-width:0}
.recap-service-actions>strong{font-size:13px}
.recap-service-actions .text-button{font-size:10px}
.recap-lines{margin:10px 0 0 46px;font-size:11px}
.recap-lines>div{padding:4px 0;gap:10px}
.recap-agreement{margin:10px 0 0 46px;padding:9px 11px;background:#f5f8fa}
.recap-total{background:transparent;border:0;border-top:2px solid var(--line);border-radius:0;margin:18px 0 0;padding:17px 0 0;flex-wrap:wrap}
.recap-total>span{font-size:14px}
.recap-total>strong{font-size:31px;color:#16804a;letter-spacing:-1px}
.recap-total small{font-size:10px;max-width:210px}
.quote-recap .tax-section,.quote-recap .tax-summary{margin:12px 0 0;padding:12px;border:0;border-radius:9px;background:#f2f8f4}
.quote-recap .tax-heading h2{font-size:12px}
.quote-recap .tax-saving strong{font-size:17px;letter-spacing:-.3px;color:var(--dark)}
.quote-recap .tax-saving p{font-size:12px;color:#16804a}
.quote-recap .tax-saving small{font-size:9px;line-height:1.6}
.recap-payment-note{font-size:10px}

@media(max-width:1023px){
 .progress{gap:4px;padding-bottom:23px}
 .progress .step{font-size:10px;padding:7px 0 10px;min-height:54px}
 .measure-guide{padding:13px}
 .measure-guide .map-tools{gap:8px}
 .measure-guide .primary{font-size:12px;padding:12px 14px}
 .map-panel .map-status{left:10px;top:10px;right:48px;padding:9px 10px}
 .map-panel .map-status strong{font-size:12px}
 .map-panel .map-status>span{font-size:10px}
 .quote-recap{padding:14px;border-radius:11px}
 .recap-service-heading{grid-template-columns:30px minmax(0,1fr) auto;gap:8px}
 .recap-service-heading .recap-icon{width:30px;height:32px;border-radius:6px}
 .recap-service-heading h2{font-size:13px}
 .recap-icon svg{width:22px;height:22px}
 .recap-service-actions>strong{font-size:12px}
 .recap-lines,.recap-agreement{margin-left:0}
 .recap-total>strong{font-size:28px}
}
@media(max-width:359px){
 .progress .step{font-size:9px}
 .progress{gap:3px}
 .recap-service-heading{grid-template-columns:30px minmax(0,1fr)}
 .recap-service-actions{grid-column:2;align-items:flex-start;flex-direction:row;gap:12px}
 .recap-total{gap:8px}
 .quote-recap .tax-saving>div{flex-wrap:wrap;gap:4px}
}

/* Inline wall height and pricing. */
.wall-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;align-items:end;margin-top:8px}
.wall-fields label{font-size:11px;font-weight:600;margin:0}
.wall-fields input,.wall-fields select{width:100%;min-width:0;margin-top:4px;padding:8px 9px;min-height:38px;border:1px solid #cad9e2;border-radius:7px;background:white;font-size:12px}
.wall-length{align-self:center;display:flex;flex-direction:column;gap:5px}.wall-length small{color:var(--muted);font-size:11px}.wall-length strong{font-size:13px}
.wall-measurement .wall-rate{margin:8px 0 0;font-size:11px}.wall-tools>[data-wall-manual]{flex-basis:100%;width:fit-content;text-align:left}
.wall-quote-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.wall-quote-row span{min-width:0}.wall-quote-row small{display:block;font-size:11px;margin-top:4px;color:var(--muted)}.wall-quote-row>strong{white-space:nowrap;font-size:13px}
#stone-other-field[hidden]{display:none}
.tutorial-trigger{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:5px 0;font-size:12px;color:#087fab;font-weight:600;text-align:left}
.tutorial-trigger span{font-size:19px;line-height:1}
.guide-multiple{font-size:12px;line-height:1.5;color:var(--muted);margin-top:10px}
.wall-tools .wall-tutorial{flex-basis:100%;text-align:left}
.tutorial-dialog{width:min(680px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:24px}
.tutorial-dialog .dialog-top{gap:15px;margin-bottom:16px}.tutorial-dialog h2{font-size:23px;line-height:1.3}.tutorial-dialog .icon-button{flex-shrink:0}
.tutorial-variants{display:flex;gap:6px;padding:5px;background:#edf5f9;border-radius:10px;margin-bottom:14px}.tutorial-variants[hidden]{display:none}.tutorial-variants button{flex:1;border:1px solid transparent;border-radius:7px;background:transparent;padding:10px 8px;color:var(--muted);font-size:12px;font-weight:600}.tutorial-variants button[aria-pressed="true"]{background:white;color:#087fab;border-color:#c3e3f1;box-shadow:0 2px 5px #233a4909}
.tutorial-dialog video{display:block;width:100%;height:auto;max-height:55dvh;object-fit:contain;background:#f4fafd;border-radius:12px}
.tutorial-dialog #tutorial-play{margin-top:12px}.tutorial-dialog #tutorial-play[hidden]{display:none}
.tutorial-note{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.6}
.tutorial-dialog details{margin-top:12px;font-size:12px;line-height:1.65}.tutorial-dialog summary{cursor:pointer;color:#087fab;font-weight:600;padding:7px 0}.tutorial-dialog ol{padding-left:20px;margin:8px 0}.tutorial-dialog li+li{margin-top:7px}
.tutorial-dialog #tutorial-done{margin-top:16px}.tutorial-dialog .error{margin-top:12px}
@media(max-width:600px){.tutorial-dialog{padding:17px}.tutorial-dialog h2{font-size:20px}.tutorial-dialog .eyebrow{font-size:9px}.tutorial-dialog .dialog-top{margin-bottom:12px}.tutorial-dialog video{border-radius:8px}.tutorial-note{font-size:12px}}
@media(max-width:390px){.wall-fields{grid-template-columns:1fr 1fr}.wall-fields>label:first-child:nth-last-child(3){grid-column:1/-1}.wall-measurement .measurement-header{flex-wrap:wrap}.wall-measurement .measurement-header>strong{min-width:110px}}
