/* ==========================================================================
   Order wizard — focused, full-bleed chrome (no sidebar).
   Built on top of wb.css tokens and utilities; only wizard-specific layout
   lives here.
   ========================================================================== */

.wz-body { display: flex; flex-direction: column; min-height: 100vh; }

/* ---- top bar --------------------------------------------------------- */
.wz-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--wb-bar-h);
  padding: 0 22px;
  background: var(--wb-surface);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--wb-border);
}

.wz-bar__logo { flex-shrink: 0; display: flex; }
.wz-bar__logo img { height: 24px; width: auto; }
:root[data-theme="dark"] .wz-bar__logo img { filter: invert(1) brightness(1.9); }

.wz-progress {
  flex: 1;
  height: 6px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-surface-sunk);
  overflow: hidden;
}

.wz-progress span {
  display: block;
  height: 100%;
  width: 11.11%; /* step 1 of 9 */
  border-radius: var(--wb-r-pill);
  background: var(--wb-brand-grad);
  transition: width .4s var(--wb-ease);
}

/* ---- steps -------------------------------------------------------------- */
.wz-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.wz-step {
  display: none;
  width: 100%;
  max-width: 980px;
  text-align: center;
  animation: wz-in .35s var(--wb-ease);
}

.wz-step.is-active { display: block; }

@keyframes wz-in {
  from { opacity: 0; transform: translateY(10px); }
}

.wz-step h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 10px; }

.wz-sub {
  max-width: 60ch;
  margin: 0 auto 30px;
  color: var(--wb-muted);
  font-size: .98rem;
  line-height: 1.6;
}

/* Step 5's heading/subtitle double as a live preview of the chosen palette
   and font — background, text colour and typography are all set inline by
   wizard.js once the client picks something, so the choice is not abstract. */
.wz-style-preview {
  border-radius: var(--wb-r);
  padding: 28px 24px;
  margin-bottom: 30px;
  transition: background .3s var(--wb-ease), color .3s var(--wb-ease);
}
.wz-style-preview h1,
.wz-style-preview .wz-sub { transition: color .3s var(--wb-ease), font-family .3s var(--wb-ease); }
.wz-style-preview .wz-sub { margin-bottom: 0; }

.wz-narrow { max-width: 560px; margin: 0 auto; text-align: left; }
.wz-left { text-align: left; }

.wz-input-lg { padding: 16px 18px; font-size: 1.05rem; text-align: center; border-radius: var(--wb-r); }

/* ---- domain step ---------------------------------------------------------- */
.wz-domain-search { display: flex; gap: 10px; }
.wz-domain-search .wb-input { flex: 1; }

.wz-domain-results { margin-top: 16px; }

.wz-domain-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-r-sm);
  margin-bottom: 8px;
  font-weight: 600;
  font-size: .92rem;
}

.wz-domain-row .wb-btn { padding: 7px 16px; font-size: .82rem; }
.wz-domain-row.is-taken { opacity: .55; }

.wz-domain-loading {
  padding: 16px;
  text-align: center;
  color: var(--wb-muted);
  font-size: .9rem;
}

/* ---- style step ------------------------------------------------------------ */
.wz-style-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  text-align: left;
  max-width: 760px;
  margin: 0 auto;
}

.wz-swatch-grid, .wz-font-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}

.wz-swatch {
  border: 2px solid var(--wb-border);
  border-radius: var(--wb-r-sm);
  padding: 8px;
  cursor: pointer;
  background: var(--wb-surface-solid);
  transition: all .18s var(--wb-ease);
}

.wz-swatch:hover { border-color: var(--wb-border-strong); }
.wz-swatch.is-on { border-color: var(--wb-brand-1); box-shadow: 0 0 0 3px rgba(142,45,226,.16); }

.wz-swatch__strip { display: flex; height: 30px; border-radius: 6px; overflow: hidden; margin-bottom: 6px; }
.wz-swatch__strip span { flex: 1; }
.wz-swatch__label { font-size: .72rem; font-weight: 600; color: var(--wb-text-soft); }

.wz-font-card {
  border: 2px solid var(--wb-border);
  border-radius: var(--wb-r-sm);
  padding: 12px 10px;
  cursor: pointer;
  background: var(--wb-surface-solid);
  text-align: center;
  transition: all .18s var(--wb-ease);
}

.wz-font-card:hover { border-color: var(--wb-border-strong); }
.wz-font-card.is-on { border-color: var(--wb-brand-1); box-shadow: 0 0 0 3px rgba(142,45,226,.16); }
.wz-font-card__sample { font-size: 1.1rem; font-weight: 700; margin-bottom: 3px; }
.wz-font-card__label { font-size: .68rem; color: var(--wb-muted); }

/* ---- wireframe builder (step 6) --------------------------------------------- */

/* page chips above the editor card */
.wz-pages-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.wz-page-chip {
  padding: 8px 16px;
  border-radius: var(--wb-r-pill);
  border: 1px solid var(--wb-border);
  background: var(--wb-surface-solid);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s var(--wb-ease);
}

.wz-page-chip.is-on {
  color: #fff;
  background: var(--wb-brand-grad);
  border-color: transparent;
  box-shadow: 0 8px 20px -8px var(--wb-brand-2);
}

.wz-page-chip--add {
  background: none;
  border-style: dashed;
  color: var(--wb-muted);
}

.wz-page-chip--add:hover { color: var(--wb-brand-1); border-color: var(--wb-border-strong); }

/* section rows: draggable, with up/down as the reliable reorder method
   (native HTML5 drag has no touch support, so it's a bonus, not the only way) */
.wz-section-list { display: flex; flex-direction: column; gap: 8px; min-height: 12px; }

.wz-section-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-r-sm);
  background: var(--wb-surface-solid);
  transition: opacity .15s var(--wb-ease), transform .15s var(--wb-ease);
}

.wz-section-row.is-dragging { opacity: .4; }

.wz-section-row__handle {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--wb-muted);
  cursor: grab;
  display: grid;
  place-items: center;
}
.wz-section-row__handle:active { cursor: grabbing; }

.wz-section-row__ico { font-size: 1.15rem; flex-shrink: 0; }
.wz-section-row__body { flex: 1; min-width: 0; }
.wz-section-row__body strong { display: block; font-size: .88rem; }
.wz-section-row__body span { font-size: .76rem; color: var(--wb-muted); }

.wz-section-row__moves { display: flex; gap: 2px; flex-shrink: 0; }

.wz-row-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--wb-border);
  border-radius: 7px;
  background: none;
  color: var(--wb-muted);
  cursor: pointer;
  transition: all .15s var(--wb-ease);
}
.wz-row-btn svg { width: 13px; height: 13px; }
.wz-row-btn:hover:not(:disabled) { color: var(--wb-brand-1); border-color: var(--wb-border-strong); }
.wz-row-btn:disabled { opacity: .3; cursor: not-allowed; }
.wz-row-btn.is-del:hover { color: var(--wb-bad); border-color: var(--wb-bad); }

/* empty state inside the section list */
.wz-section-empty {
  padding: 22px;
  text-align: center;
  color: var(--wb-muted);
  font-size: .85rem;
  border: 1.5px dashed var(--wb-border);
  border-radius: var(--wb-r-sm);
}

/* the "+ Dodaj sekcję" category picker, a lightweight inline dropdown */
.wz-section-picker {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  padding: 14px;
  background: var(--wb-surface-solid);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-r);
  box-shadow: var(--wb-shadow-lg);
}

.wz-picker-cat { margin-bottom: 12px; }
.wz-picker-cat:last-child { margin-bottom: 0; }

.wz-picker-cat__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--wb-muted);
  margin-bottom: 8px;
}

.wz-picker-grid { display: flex; flex-wrap: wrap; gap: 6px; }

.wz-picker-item {
  padding: 7px 13px;
  border-radius: var(--wb-r-pill);
  border: 1px solid var(--wb-border);
  background: var(--wb-surface-sunk);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--wb-ease);
}
.wz-picker-item:hover { border-color: var(--wb-brand-1); color: var(--wb-brand-1); }

/* ---- plan cards (step 9) --------------------------------------------------- */
.wz-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.wz-plan-card {
  position: relative;
  padding: 26px 22px;
  text-align: left;
  background: var(--wb-surface-solid);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-r-lg);
  box-shadow: var(--wb-shadow-sm);
}

.wz-plan-card--hi { border-color: var(--wb-brand-1); box-shadow: var(--wb-glow); }
.wz-plan-card--soon { opacity: .68; }

.wz-plan-badge {
  position: absolute;
  top: -12px;
  left: 22px;
  padding: 4px 12px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-brand-grad);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.wz-plan-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.wz-plan-price { font-size: 2.1rem; font-weight: 800; margin: 0 0 16px; }
.wz-plan-price span { font-size: .85rem; font-weight: 600; color: var(--wb-muted); }

.wz-plan-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wz-plan-list li {
  font-size: .85rem;
  color: var(--wb-text-soft);
  padding-left: 22px;
  position: relative;
}
.wz-plan-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 5px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--wb-ok-bg);
}
.wz-plan-list li::after {
  content: '';
  position: absolute;
  left: 4px; top: 8px;
  width: 6px; height: 3px;
  border-left: 2px solid var(--wb-ok);
  border-bottom: 2px solid var(--wb-ok);
  transform: rotate(-45deg);
}

/* ---- footer nav ------------------------------------------------------------- */
.wz-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  background: var(--wb-surface);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid var(--wb-border);
}

.wz-foot #wz-back { visibility: hidden; }
.wz-foot #wz-back.is-visible { visibility: visible; }
.wz-foot #wz-next.wb-hide { display: none; }

@media (max-width: 720px) {
  .wz-style-layout { grid-template-columns: 1fr; }
  .wz-main { padding: 32px 16px; }
  .wz-bar { padding: 0 14px; gap: 12px; }
}