/* Bezstanowe trasy demo i ich wieloetapowy przepływ zakupowy. */

.demo-page {
  display: grid;
  min-height: 55vh;
  padding-block: var(--space-5) var(--space-8);
  gap: var(--space-6);
}

.demo-breadcrumbs {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.demo-page__header { display: grid; max-width: 48rem; gap: var(--space-3); }
.demo-page__header > * { margin-block: 0; }
.demo-page__header > p:last-child { color: var(--color-text-muted); font-size: var(--font-size-lg); }
.demo-page__error { margin-block: var(--space-6); }
.demo-page__error .empty-state__title { font-size: clamp(2rem, 9vw, 3.5rem); }
.demo-notice { max-width: 56rem; }

.demo-listing { display: grid; gap: var(--space-5); }
.demo-listing h2 { font-size: clamp(1.65rem, 7vw, 2.5rem); }

.demo-step { display: grid; width: min(100%, 46rem); margin-inline: auto; gap: var(--space-5); }
.demo-step > * { margin-block: 0; }
.demo-order-item { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr; }
.demo-order-item img { width: 100%; height: 100%; min-height: 10rem; background: var(--color-surface-muted); object-fit: cover; }
.demo-order-item .card__body { align-content: center; }
.demo-order-item p { margin: 0; color: var(--color-text-muted); }
.demo-step__actions { display: grid; gap: var(--space-3); }
.demo-checkout { display: grid; gap: var(--space-5); }
.demo-confirmation { justify-items: start; text-align: left; }

@media (min-width: 45rem) {
  .demo-step__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}