/* Vendor demo stepper — neutral chrome that sits above both the store and OrderShield pages. */
.demo-bar { background: #111A21; color: #E9EEF1; font-size: 13px; line-height: 1.4; position: relative; z-index: 30; }
.demo-bar .db-inner { max-width: 1200px; margin: 0 auto; padding: 10px 16px 12px; }
.db-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 20px; }
.db-tag { justify-self: start; font-weight: 600; font-size: 12px; color: #111A21; background: #C9D7A9; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.db-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.db-step { display: flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; border-radius: 999px; color: rgba(233,238,241,0.72); white-space: nowrap; }
.db-num { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 1.5px solid rgba(233,238,241,0.45); flex-shrink: 0; }
.db-step.is-done .db-num { background: rgba(233,238,241,0.16); border-color: transparent; }
.db-step.is-current { background: #FFFFFF; color: #111A21; font-weight: 600; }
.db-step.is-current .db-num { background: #111A21; color: #FFFFFF; border-color: #111A21; }
.db-restart { color: #E9EEF1; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.db-restart:hover { color: #FFFFFF; }
.db-note { margin: 8px 0 0; color: #D5DDE2; font-size: 13px; }
.demo-bar a:focus-visible { outline: 2px solid #C9D7A9; outline-offset: 2px; border-radius: 4px; }

@media (max-width: 760px) {
  .db-top { grid-template-columns: 1fr auto; }
  .db-steps { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .db-step { flex-direction: column; gap: 4px; padding: 6px 2px; border-radius: 10px; white-space: normal; text-align: center; font-size: 11.5px; line-height: 1.2; }
  .db-note { font-size: 12.5px; }
}

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}