/* The live delivery strip under the data bundles (js/delivery-speed.js),
   on the main site's data bundles page and on every reseller's shop. It
   takes the shop's own colour where a shop sets --brand. */
.dspd {
  --dspd-accent: var(--brand, #0164ce);
  margin: 6px 0 18px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e3e9f2;
  box-shadow: 0 14px 30px -24px rgba(8, 30, 70, .45);
  color: #0f172a;
  font-size: 14px;
}
.dspd__top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.dspd__top strong { font-size: 15.5px; }
.dspd__dot { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); animation: dspd-ping 2s ease-out infinite; }
.dspd--steady .dspd__dot { background: #0284c7; animation-name: dspd-ping-blue; }
.dspd--busy .dspd__dot { background: #d97706; animation-name: dspd-ping-amber; }
.dspd--quiet .dspd__dot { background: #94a3b8; animation: none; }
@keyframes dspd-ping { 80%, 100% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); } }
@keyframes dspd-ping-blue { 0% { box-shadow: 0 0 0 0 rgba(2, 132, 199, .5); } 80%, 100% { box-shadow: 0 0 0 8px rgba(2, 132, 199, 0); } }
@keyframes dspd-ping-amber { 0% { box-shadow: 0 0 0 0 rgba(217, 119, 6, .5); } 80%, 100% { box-shadow: 0 0 0 8px rgba(217, 119, 6, 0); } }
.dspd__sub { color: #64748b; }
.dspd__wait { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #e8f7ee; color: #15803d; font-weight: 700; font-size: 13px; white-space: nowrap; }
.dspd--steady .dspd__wait { background: #e6f3fb; color: #0369a1; }
.dspd--busy .dspd__wait { background: #fff4e5; color: #b45309; }
.dspd__wait svg { width: 15px; height: 15px; }
.dspd__line { margin: 8px 0 12px; color: #475569; line-height: 1.5; }
.dspd__why { padding: 0; border: 0; background: none; color: var(--dspd-accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.dspd__row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "what ref" "times times";
  gap: 4px 10px;
  align-items: center;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f8fb;
  border: 1px solid #edf1f6;
}
.dspd__row.is-first { background: #f0faf4; border-color: #d3efdd; }
.dspd__what { grid-area: what; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dspd__what svg { width: 17px; height: 17px; color: #94a3b8; flex: 0 0 auto; }
.dspd__row.is-first .dspd__what svg, .dspd__row.is-first .dspd__what b { color: #15803d; }
.dspd__what em { font-style: normal; color: #64748b; }
.dspd__times { grid-area: times; font-size: 12.5px; color: #64748b; font-variant-numeric: tabular-nums; }
.dspd__times i { font-style: normal; color: #94a3b8; }
.dspd__ref { grid-area: ref; padding: 2px 8px; border-radius: 6px; background: #fff; border: 1px solid #e3e9f2; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: #334155; }
@media (min-width: 760px) {
  .dspd__row { grid-template-columns: auto 1fr auto; grid-template-areas: "what times ref"; }
  .dspd__times { text-align: right; }
}

.dspd-why { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 20, 45, .5); opacity: 0; transition: opacity 200ms ease; }
.dspd-why.is-in { opacity: 1; }
.dspd-why__card { position: relative; width: 100%; max-width: 480px; max-height: calc(100dvh - 32px); overflow: auto; padding: 24px 22px 20px; border-radius: 20px; background: #fff; color: #0f172a; box-shadow: 0 30px 70px -24px rgba(8, 20, 45, .6); transform: translateY(10px) scale(.98); transition: transform 220ms cubic-bezier(.22, .61, .36, 1); }
.dspd-why.is-in .dspd-why__card { transform: none; }
.dspd-why__card h2 { margin: 0 34px 8px 0; font-size: 19px; }
.dspd-why__lead { margin: 0 0 14px; color: #475569; line-height: 1.55; }
.dspd-why__card ol { margin: 0 0 14px; padding-left: 20px; }
.dspd-why__card li { margin-bottom: 10px; line-height: 1.5; }
.dspd-why__card li strong { display: block; }
.dspd-why__card li span { color: #475569; font-size: 14px; }
.dspd-why__safe { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: #e8f7ee; color: #166534; font-size: 14px; line-height: 1.5; }
.dspd-why__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1f5f9; color: #334155; font-size: 22px; line-height: 1; cursor: pointer; }
.dspd-why__ok { display: block; margin-left: auto; min-height: 44px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--brand, #0164ce); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
/* A phone: one line a delivery. The wait pill says the wait, so the line
   beside the name goes, and each row keeps its size, time taken and how
   long ago; the exact clock times are for the wider screen. */
@media (max-width: 759px) {
  .dspd { padding: 14px; }
  .dspd__sub { display: none; }
  .dspd__line { font-size: 13.5px; }
  .dspd__why { font-size: 13.5px !important; }
  .dspd__row { grid-template-columns: 1fr auto; grid-template-areas: "what times"; padding: 9px 10px; }
  .dspd__full, .dspd__ref { display: none; }
  .dspd__what { font-size: 13.5px; }
  .dspd__times { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .dspd__dot { animation: none; }
  .dspd-why, .dspd-why__card { transition: none; }
}