/* ==========================================================================
   Strona zamówienia (/mikolaj/zamow/): ankieta "ściąga dla Mikołaja", 6 kroków.
   Korzysta z mikolaj.css (czcionka, baza, nagłówek) i dokłada style formularza.
   ========================================================================== */

body.zm-page { background: #f7f0e3; color: #1c2a20; }
.zm-page .mk { background: transparent; color: inherit; }
.zm-page .mk-header { background: #0f2a1c; }

.zm-main {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 48px) 20px 96px;
  color: #1c2a20;
}
.zm-main a { color: #b8352c; }
.zm-main a:hover { color: #8f241d; }
.zm-title {
  margin: 0 0 8px; font-weight: 800; font-size: clamp(32px, 6vw, 48px);
  line-height: 1.08; color: #0f2a1c; text-wrap: balance;
}
.zm-lead { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: #3f4b42; }
.zm-lead-sm { font-size: 15px; margin-bottom: 16px; }

/* --- Postęp --- */
.zm-progress { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 0 0 10px; }
.zm-progress i { display: block; height: 6px; border-radius: 3px; background: #e3d6bd; transition: background .3s; }
.zm-progress i.on { background: #d2443a; }
.zm-stepinfo { margin: 0 0 18px; font-size: 14px; font-weight: 700; color: #5a655d; }

/* --- Karta z krokami --- */
.zm-card {
  background: #fffaf2; border: 1px solid #eadcc6; border-radius: 28px;
  padding: clamp(20px, 4vw, 32px);
}
.zm-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.zm-step h2 {
  margin: 0 0 18px; font-weight: 800; font-size: clamp(24px, 4.6vw, 30px);
  line-height: 1.15; color: #0f2a1c; text-wrap: balance;
}
.zm-step h2:focus { outline: none; }
.js .zm-step { display: none; }
.js .zm-step.is-active { display: block; }
html:not(.js) .zm-step + .zm-step { margin-top: 36px; padding-top: 28px; border-top: 1px dashed #d8cdb6; }
html:not(.js) .zm-progress, html:not(.js) .zm-stepinfo,
html:not(.js) [data-zm-prev], html:not(.js) [data-zm-next] { display: none; }

/* --- Pola --- */
.zm-field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; font-size: 15px; font-weight: 700; color: #1c2a20; }
.zm-field input, .zm-field textarea {
  font: inherit; font-weight: 500; font-size: 17px; line-height: 1.45;
  padding: 15px 16px; border: 1.5px solid #d8cdb6; border-radius: 14px;
  background: #fff; color: #1f2a24; width: 100%;
}
.zm-field textarea { resize: vertical; min-height: 84px; }
.zm-field input::placeholder, .zm-field textarea::placeholder { color: #7a7f73; opacity: 1; }
.zm-field input:focus, .zm-field textarea:focus { outline: 3px solid #f0c66e; outline-offset: 1px; border-color: #0f2a1c; }
.zm-field [aria-invalid="true"] { border-color: #b8352c; }
.zm-field small, .zm-help { font-size: 13px; font-weight: 500; color: #5a655d; line-height: 1.45; }
.zm-help { margin: 8px 0 0; }

/* --- Wybór: wiek, płeć, tematy --- */
.zm-group { margin: 0 0 18px; }
.zm-groupname { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.zm-ages { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.zm-genders { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zm-chip { position: relative; display: block; cursor: pointer; }
.zm-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.zm-chip > span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; padding: 8px 10px; border-radius: 14px; border: 1.5px solid #d8cdb6;
  background: #fff; color: #0f2a1c; font-weight: 800; font-size: 18px; text-align: center;
  transition: background .15s, color .15s, border-color .15s;
}
.zm-chip-lg > span { min-height: 64px; font-size: 16px; }
.zm-chip-lg em { font-style: normal; font-weight: 500; font-size: 13px; opacity: .85; }
.zm-chip:hover > span { border-color: #0f2a1c; }
.zm-chip input:checked + span { background: #0f2a1c; border-color: #0f2a1c; color: #fff; }
.zm-chip input:focus-visible + span { outline: 3px solid #f0c66e; outline-offset: 2px; }
.zm-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.zm-topics .zm-chip > span { flex-direction: row; min-height: 44px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.zm-topics .zm-chip input:checked + span::before { content: '✓\00a0'; }

/* --- Podpowiedzi i notatki --- */
.zm-hint { margin: 0 0 18px; background: #f3e4c3; border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: #3b2c0b; }
.zm-note { margin: 0 0 4px; background: #16392a; color: #f7f0e3; border-radius: 14px; padding: 14px; font-size: 14px; line-height: 1.5; }

/* --- Podgląd powitania (krok 6) --- */
.zm-preview { background: #16392a; border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 12px; margin: 0 0 12px; }
.zm-bubble { display: flex; gap: 10px; align-items: flex-start; }
.zm-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #d2443a; color: #fff; display: grid; place-items: center; font-weight: 800; }
.zm-bubble p { margin: 0; background: #fbf8f3; color: #1f2a24; border-radius: 4px 16px 16px 16px; padding: 11px 14px; font-size: 15px; line-height: 1.5; }

/* --- Zgody --- */
.zm-check {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 10px; padding: 14px;
  background: #fff; border: 1px solid #e3dccd; border-radius: 14px; font-size: 14px; line-height: 1.5; cursor: pointer;
}
.zm-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: #0f2a1c; }

/* --- Przyciski i błędy --- */
.zm-nav { display: flex; gap: 10px; margin-top: 22px; }
.zm-btn { font: inherit; font-weight: 800; font-size: 17px; min-height: 56px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer; }
.zm-btn-primary { flex: 1; background: #d2443a; color: #fff; }
.zm-btn-primary:hover { background: #b8352c; }
.zm-btn-ghost { background: #fff; color: #0f2a1c; border: 1.5px solid #0f2a1c; }
.zm-btn-ghost:hover { background: #f3e4c3; }
.zm-btn[disabled] { opacity: .65; cursor: progress; }
.zm-error { margin: 14px 0 0; background: #fbeeea; color: #5c1a14; border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.45; }

/* --- Potwierdzenie --- */
.zm-done { background: #fffaf2; border: 1px solid #eadcc6; border-radius: 28px; padding: clamp(24px, 5vw, 40px); }
.zm-done:focus { outline: none; }
.zm-done-ico { width: 72px; height: 72px; margin-bottom: 16px; border-radius: 50%; background: #2f7a4f; color: #fff; display: grid; place-items: center; font-size: 36px; font-weight: 800; }
.zm-done h2 { margin: 0 0 12px; font-weight: 800; font-size: clamp(28px, 5vw, 38px); line-height: 1.1; color: #0f2a1c; }
.zm-done p { margin: 0 0 14px; font-size: 17px; line-height: 1.6; color: #3f4b42; }
.zm-order { display: inline-block; padding: 4px 12px; border-radius: 10px; background: #f3e4c3; color: #3b2c0b; }
.zm-done .zm-back { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; color: #fff; font-weight: 800; text-decoration: none; }
.zm-done .zm-back:hover { color: #fff; }

/* Wąskie ekrany: przyciski jeden pod drugim, główny (Dalej / Zamów) na górze */
@media (max-width: 480px) {
  .zm-nav { flex-direction: column-reverse; }
  .zm-btn { width: 100%; }
}