/* Body shop pages (/body-shop/): estimate form, shop card, steps.
   Uses the tokens from atlas-design.css. */

.bs-form fieldset { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.bs-form legend { font-size: 14px; font-weight: 500; color: var(--atlas-ink, #1d1d1f); margin-bottom: 8px; padding: 0; }
.bs-form .bs-hint { font-size: 13px; color: var(--atlas-muted, #626268); margin: -4px 0 8px; }

.bs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-chips label {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 14px; border: 1px solid #b9b9c0; border-radius: 999px;
  background: #fff; font-size: 14px; font-weight: 500; cursor: pointer; margin: 0;
}
.bs-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bs-chips label:has(input:checked) { border-color: var(--atlas-green, #006d33); background: var(--atlas-tint, #edf5ef); color: var(--atlas-green, #006d33); }
.bs-chips label:has(input:focus-visible) { outline: 3px solid var(--atlas-focus, #0071e3); outline-offset: 2px; }

.bs-photo-pick {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px; border: 1px dashed #9a9aa2; border-radius: 12px;
  background: var(--atlas-canvas, #f5f5f7); font-size: 15px; font-weight: 500; cursor: pointer;
}
.bs-photo-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bs-photo-pick:has(input:focus-visible) { outline: 3px solid var(--atlas-focus, #0071e3); outline-offset: 2px; }
.bs-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 8px; }
.bs-photo { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #e8e8ed; }
.bs-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-photo-remove {
  position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: rgba(29,29,31,.72); color: #fff; font-size: 18px; line-height: 28px; cursor: pointer; padding: 0;
}
.bs-photo-note { font-size: 13px; color: var(--atlas-muted, #626268); margin-top: 6px; min-height: 1em; }

.bs-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.bs-row .form-group { margin-bottom: 14px; }
@media (max-width: 480px) { .bs-row { grid-template-columns: 1fr 1fr; } .bs-row .form-group:first-child { grid-column: 1 / -1; } }

.bs-status { font-size: 14px; margin: 10px 0 0; min-height: 1em; }
.bs-status-error { color: #b3261e; }
.bs-done { text-align: center; padding: 32px 8px; }
.bs-done h3 { font-size: 22px; margin-bottom: 8px; color: var(--atlas-green, #006d33); }
.bs-done p { color: var(--atlas-muted, #626268); margin-bottom: 10px; }
.bs-done .bs-ref { font-size: 13px; }
.bs-done:focus { outline: none; }

.bs-shop-card { border: 1px solid #e3e3e8; border-radius: var(--atlas-radius, 20px); background: #fff; padding: 24px; margin: 24px 0; }
.bs-shop-card h3 { font-size: 20px; margin: 0 0 8px; }
.bs-shop-card p { margin: 0 0 8px; }
.bs-shop-card iframe { width: 100%; height: 260px; border: 0; border-radius: 12px; margin-top: 12px; }
.bs-shops { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .bs-shops { grid-template-columns: 1fr; } }
.bs-shops .bs-shop-card { margin: 0; }

.bs-steps { counter-reset: bs; list-style: none; padding: 0; margin: 0 0 16px; }
.bs-steps li { counter-increment: bs; position: relative; padding-left: 44px; margin-bottom: 14px; }
.bs-steps li::before {
  content: counter(bs); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--atlas-tint, #edf5ef); color: var(--atlas-green, #006d33); font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}

.content-main p a, .content-main li a, .bs-shop-card a, .bs-done a { color: var(--atlas-green, #006d33); text-decoration: underline; }

/* On a phone the estimate form comes straight after the hero: ad visitors
   arrive to send photos, and the service copy follows below it. */
@media (max-width: 768px) { .two-col > #estimate { order: -1; } }