.jp-delivery-demo {
  margin: 28px auto 42px;
  padding: clamp(16px, 4vw, 30px);
  border: 1px solid #a27046;
  border-radius: 18px;
  background: #22181e;
  color: #fff4df;
}
.jp-delivery-demo[hidden],
.jp-delivery-demo button[hidden] { display: none; }
.jp-demo-label { color: #f3c471; font-weight: 800; letter-spacing: .09em; }
.jp-delivery-demo h2 { margin: 0 0 8px; }
.jp-demo-steps { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.jp-demo-steps li { border: 1px solid #775154; border-radius: 16px; padding: 6px 10px; color: #d9c8c6; }
.jp-demo-steps .is-reached { border-color: #f3c471; color: #fff4df; }
.jp-demo-steps [aria-current="step"] { background: #712329; }
.jp-demo-map {
  width: 100%;
  height: clamp(280px, 55vw, 470px);
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #a27046;
  border-radius: 14px;
  background: #281f25;
}
.jp-demo-map .maplibregl-ctrl-group button { min-width: 40px; min-height: 40px; }
.jp-demo-map-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; list-style: none; font-size: .9rem; }
.jp-demo-map-legend li { display: flex; align-items: center; gap: 7px; }
.jp-demo-key { width: 10px; height: 10px; border-radius: 50%; }
.jp-demo-key-store { background: #ffc86b; }
.jp-demo-key-driver {
  width: 17px;
  height: 20px;
  background: url('/assets/jp-delivery-car.svg') center / contain no-repeat;
  border-radius: 0;
}
.jp-demo-key-destination { background: #276bb4; }
.jp-demo-pin {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 2px solid white;
  border-radius: 50%;
  color: white;
  box-shadow: 0 2px 8px #0008;
  font: 800 14px/1 system-ui, sans-serif;
}
.jp-demo-pin.jp-demo-key-driver {
  width: 44px;
  height: 51px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 2px 4px #0008);
}
.jp-demo-pin.jp-demo-key-store { color: #422811; }
.jp-demo-map-message { color: #f3c471; }
.jp-demo-button { border: 1px solid #f3c471; border-radius: 10px; background: #8b2428; color: white; padding: 10px 14px; font-weight: 800; cursor: pointer; }
.jp-demo-link { display: inline-block; margin: 10px; color: #f3c471; }
#demoCheckoutMessage:empty { display: none; }

.jp-customer-link { display: inline-block; margin-block: 6px; text-decoration: none; }
body.jp-customer-demo-view > :not(.jp-slogan-banner):not(#deliveryTracking) { display: none !important; }
.jp-customer-demo-view #deliveryTracking {
  width: min(94%, 760px);
  box-sizing: border-box;
  margin: 24px auto;
}
.jp-customer-demo-view #advanceDeliveryDemo,
.jp-customer-demo-view #deliveryTracking > .jp-demo-link { display: none; }