/* ==========================================================================
   Подредбата на поръчката: глава с прогрес, тяло, лепкав ред с бутоните на
   телефон. Само layout - визията е в tokens.css и components.css.
   ========================================================================== */
.site-head { padding: var(--space-3) 0; }
.site-head .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.brand { font-weight: 900; letter-spacing: 0.02em; text-decoration: none; color: var(--color-ink); font-size: var(--text-l); }

.wizard { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-4) calc(var(--space-7) + 72px); }
.wizard__head { position: sticky; top: 0; z-index: 10; background: var(--color-bg); padding: var(--space-3) 0 var(--space-3); }
.wizard__title { margin: var(--space-3) 0 0; font-size: var(--text-2xl); }
.wizard__notice { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--color-accent-soft); }
.wizard__body { padding-top: var(--space-4); min-height: 40vh; }
.wizard__body.is-loading { opacity: 0.5; pointer-events: none; }

.wizard__foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--color-surface); border-top: 1px solid var(--color-line); box-shadow: 0 -4px 16px rgba(31, 29, 36, 0.06);
}
.wizard__foot .btn { flex: 1; }
.wizard__foot .btn--ghost { flex: 0 0 auto; }
@media (min-width: 700px) {
  .wizard__foot { position: sticky; margin-top: var(--space-5); border-radius: var(--radius-l); border: 1px solid var(--color-line); }
  .wizard { padding-bottom: var(--space-7); }
}
.wizard[data-step="checkout"] .wizard__foot, .wizard[data-step="occasion"] .wizard__foot, .wizard[data-step="done"] .wizard__foot { display: none; }

.checkout { display: block; }

/* --- начална страница --------------------------------------------------------- */
.hero { padding: var(--space-6) 0 var(--space-5); }
.hero h1 { font-size: var(--text-3xl); margin: 0 0 var(--space-3); }
.hero .lead { max-width: 36rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0; }
.price-line { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); font-weight: 700; }
.price-line span { color: var(--color-muted); font-weight: 400; }
.how { display: grid; gap: var(--space-3); margin: var(--space-5) 0; }
@media (min-width: 700px) { .how { grid-template-columns: repeat(5, 1fr); } }
.how__step { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-m); background: var(--color-surface); }
.how__step b { display: block; color: var(--color-primary-deep); margin-bottom: var(--space-1); }
.site-foot { padding: var(--space-6) 0; color: var(--color-muted); font-size: var(--text-s); }