/* The instant quote: find the yard, draw the fence, pick a design. */

body.quote .step { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
body.quote .step h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; }
body.quote .step h2 span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-fill); color: var(--white); font-size: 14px; flex: none; }
body.quote .hint { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; }
body.quote .hint.small { font-size: 13px; }
body.quote .alert p { margin: 2px 0; }

body.quote input[type=text], body.quote input[type=email], body.quote input[type=tel], body.quote input[type=number],
body.quote select, body.quote textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--grey); border-radius: var(--r);
  font: 400 16px/1.3 var(--body); color: var(--black); background: var(--white);
}
body.quote textarea { min-height: 80px; }
body.quote .button { min-height: 46px; padding: 0 16px; border: 0; border-radius: var(--r); background: var(--blue-fill); color: var(--white); font: 700 15px/1 var(--body); cursor: pointer; white-space: nowrap; }
body.quote .button:disabled { opacity: .6; }
body.quote .address-row { display: flex; gap: 8px; margin-top: 12px; }
body.quote .address-row input { flex: 1; min-width: 0; }

/* the map */
body.quote .map-wrap { position: relative; margin: 12px -16px 0; }
body.quote .map { height: 62vh; min-height: 360px; max-height: 620px; background: #2B3138; }
@media (min-width: 800px) { body.quote .map-wrap { margin: 12px 0 0; } body.quote .map { border-radius: var(--r); } }
body.quote .map-total { position: absolute; left: 10px; bottom: 10px; z-index: 500; padding: 6px 12px; border-radius: 20px; background: rgba(22,23,23,.82); color: var(--white); font-size: 14px; pointer-events: none; }
body.quote .map-total strong { color: var(--white); }
body.quote .tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body.quote .chip { min-height: 40px; padding: 0 14px; border: 1.5px solid var(--blue); border-radius: 20px; background: var(--white); color: var(--blue-ink); font: 600 14px/1 var(--body); cursor: pointer; }
body.quote .chip:disabled { border-color: var(--line); color: var(--grey); cursor: default; }

body.quote .corner-icon { border: 3px solid var(--white); border-radius: 50%; background: var(--blue); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
body.quote .mid-icon { display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--blue-ink); font-weight: 700; font-size: 15px; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
body.quote .gate-icon { display: grid; place-items: center; border: 2px solid var(--white); border-radius: 6px; background: #FFD23F; color: var(--black); font-weight: 700; font-size: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
body.quote .seg-label { padding: 1px 6px; border: 0; border-radius: 10px; background: rgba(22,23,23,.78); color: var(--white); font: 600 12px/1.4 var(--body); box-shadow: none; }
body.quote .seg-label::before { display: none; }

body.quote .survey { margin-top: 16px; padding: 12px 14px; border-radius: var(--r); background: var(--paper); }
body.quote .survey summary { font-weight: 600; color: var(--blue-ink); }
body.quote .survey input[type=file] { margin-top: 10px; max-width: 100%; }
body.quote .calibrate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
body.quote .calibrate input { width: 110px; display: inline-block; }

/* designs */
body.quote .designs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; margin: 12px 0 0; padding: 0; border: 0; }
@media (min-width: 640px) { body.quote .designs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.quote .design-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1.5px solid var(--line); border-radius: var(--r); cursor: pointer; background: var(--white); }
body.quote .design-card input { position: absolute; opacity: 0; }
body.quote .design-card:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue); background: var(--blue-wash); }
body.quote .design-card:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
body.quote .design-card img, body.quote .no-picture { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 4px; background: var(--white); }
body.quote .no-picture { display: grid; place-items: center; border: 1px dashed var(--grey); color: var(--muted); font-size: 12px; font-style: italic; }
body.quote .design-name { font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--black); }
body.quote .design-blurb { font-size: 12.5px; line-height: 1.4; color: var(--muted); }

body.quote .pills { margin: 18px 0 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
body.quote .pills legend { margin-bottom: 8px; font-weight: 700; color: var(--black); font-size: 15px; }
body.quote .pills label { position: relative; }
body.quote .pills input { position: absolute; opacity: 0; }
body.quote .pills span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1.5px solid var(--grey); border-radius: 21px; font-weight: 600; font-size: 14.5px; cursor: pointer; }
body.quote .pills input:checked + span { border-color: var(--blue-fill); background: var(--blue-fill); color: var(--white); }
body.quote .pills input:disabled + span { opacity: .35; cursor: default; text-decoration: line-through; }
body.quote .pills input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }

body.quote .fields { display: grid; gap: 12px; margin-top: 12px; }
body.quote .fields label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; color: var(--black); }
body.quote .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
body.quote .accept-button { margin-top: 16px; display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* the result */
body.quote .quote-words { margin-top: 18px; font-size: 15.5px; }
body.quote .quote-words p { margin: 10px 0; }
body.quote .next-link { margin-top: 22px; padding: 16px; border-radius: 10px; background: var(--blue-wash); }
body.quote .next-link p { margin: 0; font-size: 14.5px; }
body.quote .fields label.consent { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 13px; color: var(--ink); }
body.quote .fields label.consent input { margin-top: 3px; width: 20px; height: 20px; flex: none; }