/* ==========================================================================
   mamkod.pl: własne formularze krok po kroku (zamiast Zite)
   Używane tylko przez index-formularz.html, obsługa w assets/js/forms.js
   ========================================================================== */

.mk-form { padding: 22px 18px 18px; color: var(--ink); }
@media (min-width: 760px) { .mk-form { padding: 14px 10px 6px; } }

.mk-progress { height: 6px; border-radius: 6px; background: var(--paper-dim); overflow: hidden; }
.mk-progress span { display: block; height: 100%; width: 0; background: var(--orange); border-radius: inherit; transition: width .35s var(--ease); }
.mk-count { font-size: 0.85rem; color: var(--ink-soft); margin: 10px 0 18px; }
.mk-count b { font-weight: 600; }

.mk-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.mk-step[hidden], .mk-done[hidden], .mk-form [hidden] { display: none !important; }

.mk-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  line-height: 1.2;
  margin-bottom: 18px;
  padding: 0;
}
.mk-q:focus { outline: none; }
.mk-help { font-size: 0.95rem; color: var(--ink-soft); margin: -8px 0 16px; }

/* Kafelki odpowiedzi */
.mk-tiles { display: grid; gap: 10px; }
@media (min-width: 520px) { .mk-tiles--2 { grid-template-columns: 1fr 1fr; } }
.mk-tile { position: relative; display: block; cursor: pointer; }
.mk-tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mk-tile span {
  display: flex; align-items: center; min-height: 56px;
  padding: 14px 18px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-md);
  background: var(--paper);
  font-weight: 500;
  transition: background .15s, box-shadow .15s, transform .15s;
}
.mk-tile:hover span { background: var(--yellow-soft); }
.mk-tile input:checked + span { background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.mk-tile input:focus-visible + span { outline: 3px solid var(--orange-dark); outline-offset: 3px; }

/* Pola tekstowe */
.mk-field { display: grid; gap: 6px; margin-bottom: 14px; font-size: 0.95rem; font-weight: 500; }
.mk-field i { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.mk-field input, .mk-field textarea {
  font: inherit; font-weight: 400; color: var(--ink);
  width: 100%;
  padding: 13px 16px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.mk-field textarea { resize: vertical; min-height: 96px; }
.mk-field input:focus-visible, .mk-field textarea:focus-visible { outline: 3px solid var(--orange-dark); outline-offset: 2px; }
.mk-field [aria-invalid="true"], .mk-check [aria-invalid="true"] { border-color: var(--orange-dark); }
.mk-tiles + .mk-field { margin-top: 18px; }

.mk-check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; margin-top: 4px; cursor: pointer; }
.mk-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--orange-dark); flex: none; }
.mk-check a, .mk-legal a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }

/* Pliki */
.mk-drop {
  position: relative; display: grid; justify-items: center; gap: 4px; text-align: center;
  padding: 26px 16px;
  border: 2px dashed var(--ink);
  border-radius: var(--radius-md);
  background: var(--yellow-soft);
  cursor: pointer;
}
.mk-drop.is-over { background: var(--yellow); }
.mk-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mk-drop:focus-within { outline: 3px solid var(--orange-dark); outline-offset: 3px; }
.mk-drop-title { font-weight: 700; }
.mk-drop-hint { font-size: 0.85rem; color: var(--ink-soft); }
.mk-files { margin: 10px 0 0; display: grid; gap: 6px; font-size: 0.9rem; }
.mk-files li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--paper-dim); border-radius: var(--radius-sm); word-break: break-all; }
.mk-files button { flex: none; border: 0; background: none; font: inherit; font-weight: 700; color: var(--orange-dark); cursor: pointer; }
.mk-or { text-align: center; font-size: 0.9rem; color: var(--ink-soft); margin: 14px 0; }

/* Nawigacja i komunikaty */
.mk-error { min-height: 1.4em; margin: 12px 0 4px; font-size: 0.92rem; font-weight: 600; color: var(--orange-dark); }
.mk-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mk-nav .btn { margin-left: auto; }
.mk-back { border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); padding: 10px 4px; cursor: pointer; }
.mk-back:hover { text-decoration: underline; }
.mk-nav .btn[disabled] { opacity: .6; cursor: progress; }
.mk-legal { margin-top: 18px; }

.mk-done { padding: 12px 0; }
.mk-done .mk-q { margin-bottom: 10px; }
.mk-done:focus { outline: none; }

/* pułapka na boty */
.mk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }