/* KL_App — pelnoekranowy ekran konfiguratora + tryb kreatora (krok-po-kroku).
   Ladowane tylko na /konfigurator/{typ}. */

/* ===== Czysty ekran aplikacji ===== */
body.kl-app { margin: 0; background: #f4f6f2; }
.kl-app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.kl-app-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 52px; padding: .5rem 1rem;
  background: #14301c; color: #fff;
}
.kl-app-home { display: inline-flex; align-items: center; color: #fff; text-decoration: none; font-weight: 800; font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
.kl-app-home img { height: 34px; width: auto; display: block; }
.kl-app-back { color: #cfe3d5; text-decoration: none; font-size: .9rem; font-weight: 600; font-family: "Plus Jakarta Sans", system-ui, sans-serif; white-space: nowrap; }
.kl-app-back:hover { color: #fff; }
.kl-app-main { flex: 1; }

/* ===== Hub /konfigurator/ (wybor typu maszyny) ===== */
.kl-hub { max-width: 900px; margin: 0 auto; padding: 2.5rem 16px 4rem; font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
.kl-hub-h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; color: #14301c; margin: 0 0 .4rem; letter-spacing: -.02em; }
.kl-hub-sub { font-size: 1rem; color: #5a625a; margin: 0 0 2rem; }
.kl-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.kl-hub-card { display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem; min-height: 120px; padding: 1.3rem 1.4rem; background: #fff; border: 1.5px solid #e2e6dd; border-radius: 16px; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: border-color .15s, box-shadow .15s, transform .15s; }
.kl-hub-card:hover { border-color: #1e6b30; box-shadow: 0 8px 24px rgba(30,107,48,.12); transform: translateY(-2px); }
.kl-hub-card-title { font-size: 1.15rem; font-weight: 800; color: #14301c; letter-spacing: -.01em; }
.kl-hub-card-go { font-size: .9rem; font-weight: 700; color: #1e6b30; }

/* ===== Kreator ===== */
body.kl-wiz-on .kl-sticky-price { display: none !important; }      /* zastapiony dolnym paskiem akcji */
body.kl-wiz-on .kl-calc { max-width: 820px; margin: 0 auto; padding: 0 16px 148px; } /* miejsce na 2-rzedowy pasek nav */
body.kl-wiz-on .kl-calc .layout { display: block !important; }
/* Kroki: przyczepy/zurawie/zestaw = .step ; zabudowy = .zone (strefa = krok). */
body.kl-wiz-on .step,
body.kl-wiz-on .kl-zones .zone { display: none; }
body.kl-wiz-on .step.kl-step-active,
body.kl-wiz-on .kl-zones .zone.kl-step-active { display: block; animation: klWizIn .18s ease; }
@keyframes klWizIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Zabudowy: opcje strefy zawsze widoczne w kreatorze (bez akordeonu). */
body.kl-wiz-on .kl-zones .zone.kl-step-active .zone-body { display: block !important; }
/* Sidebar/summary (wspolna klasa .sidebar dla wszystkich kalkulatorow). */
body.kl-wiz-on .sidebar { display: none; }
body.kl-wiz-on .kl-presets,
body.kl-wiz-on .zestaw-divider { display: none !important; } /* zestaw: presety/separatory poza kreatorem */
/* Zestaw: EKRAN STARTOWY (intro) - gotowe zestawy przed kreatorem. Pokazujemy
   presety, chowamy kroki, dolny pasek i licznik krokow (intro to nie "krok"). */
body.kl-wiz-intro .kl-presets { display: block !important; }
body.kl-wiz-intro .step,
body.kl-wiz-intro .zestaw-divider,
body.kl-wiz-intro .kl-wiz-nav,
body.kl-wiz-intro .kl-loadid { display: none !important; }
body.kl-wiz-intro .kl-wiz-count,
body.kl-wiz-intro .kl-wiz-bar,
body.kl-wiz-intro .kl-wiz-summlink,
body.kl-wiz-intro .kl-wiz-reset { display: none; }
/* "Konfiguruje sam od podstaw" - wtorny przycisk pod gotowymi zestawami. */
.kl-preset-manual { display: block; width: 100%; margin-top: .85rem; padding: .85rem 1rem; background: #fff; border: 1.5px solid #d4dcd5; border-radius: 12px; color: #3d443b; font-family: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; transition: border-color .15s, color .15s; }
.kl-preset-manual:hover { border-color: #1e6b30; color: #1e6b30; }
.kl-preset-manual:focus-visible { outline: 2px solid #1e6b30; outline-offset: 2px; }
/* "Masz ID swojej konfiguracji?" tylko na 1. kroku (poza nim rozprasza). */
body.kl-wiz-on:not(.kl-wiz-first) .kl-loadid { display: none !important; }

/* Podsumowania CALOSCI (total) w kreatorze NIE pokazujemy w ogole - cene z rabatem
   klient dostaje w PDF po zostawieniu kontaktu. Chowamy dolny pasek z cena oraz
   rozpiske w sidebarze. Ceny przy pojedynczych opcjach (.oprice) zostaja -
   pozwalaja policzyc samemu. */
body.kl-wiz-on .kl-wiz-price,
body.kl-wiz-on .srow,
body.kl-wiz-on .srow-section,   /* zestaw: naglowki sekcji (Przyczepa/Zuraw) w rozpisce */
body.kl-wiz-on .pr,
body.kl-wiz-on .drow,
body.kl-wiz-on .dv,
body.kl-wiz-on .disc,           /* zabudowy: sekcja "Upusty" (wybor rabatow + wartosci) */
body.kl-wiz-on .pdiv { display: none !important; } /* zabudowy: kreski w rozpisce */
body.kl-wiz-on .kl-show-summary .kl-content,
body.kl-wiz-on .kl-show-summary .kl-zones { display: none; }
body.kl-wiz-on .kl-show-summary .sidebar { display: block; }
/* Krok "Podsumowanie": komfortowa kolumna zamiast rozciagania na cala szerokosc
   (inaczej napisy/przyciski kleja sie do krawedzi ekranu). */
body.kl-wiz-on .kl-show-summary .sidebar { max-width: 640px; margin-left: auto; margin-right: auto; }
@media (prefers-reduced-motion: reduce) {
  body.kl-wiz-on .step.kl-step-active,
  body.kl-wiz-on .kl-zones .zone.kl-step-active { animation: none; }
}

/* W trybie kreatora chowamy markowy pasek (× w gornym pasku pelni "wyjscie")
   oraz numer/ikone kroku (tytul kroku zostaje). */
body.kl-wiz-on .kl-app-top { display: none; }
body.kl-wiz-on .step-hdr .num,
body.kl-wiz-on .step-hdr .step-num,
body.kl-wiz-on .step-hdr > img { display: none; }
body.kl-wiz-on .step-hdr { gap: 0; }

/* Gorny slim pasek: ×  |  Krok X z Y  |  Podsumowanie  + jeden cienki progres */
.kl-wiz-progress {
  position: sticky; top: 0; z-index: 900;
  background: #fff; border-bottom: 1px solid #e9ece5;
  margin: 0 -16px 16px;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.kl-wiz-topbar { display: flex; align-items: center; gap: 12px; padding: 11px 14px 9px; }
.kl-wiz-x {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  background: #f0f2ee; color: #3d443b; font-size: 19px; line-height: 1;
}
.kl-wiz-count { flex: 1; text-align: center; font-weight: 700; color: #3d443b; font-size: .92rem; }
.kl-wiz-summlink { flex: none; appearance: none; border: 0; background: transparent; color: #1e6b30; font-weight: 700; font-size: .92rem; cursor: pointer; }
/* "Zacznij od nowa" - okragly przycisk chrome (jak ×), czysci konfiguracje. */
.kl-wiz-reset { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 0; background: #f0f2ee; color: #3d443b; font-size: 17px; line-height: 1; cursor: pointer; }
.kl-wiz-reset:hover { background: #e2e6dd; color: #1e6b30; }
.kl-wiz-reset:focus-visible { outline: 2px solid #1e6b30; outline-offset: 2px; }
.kl-wiz-bar { height: 6px; background: #e6ece3; overflow: hidden; }
.kl-wiz-bar span { display: block; height: 100%; background: #1e6b30; transition: width .3s ease; }

/* Dolny pasek: [Brutto z VAT + kwota] [Podglad] , pod spodem [Wstecz] [Dalej] */
.kl-wiz-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid #e2e6dd; box-shadow: 0 -6px 20px rgba(0,0,0,.08);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.kl-wiz-price { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.kl-wiz-vat { display: block; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: #8a918a; font-weight: 700; }
.kl-wiz-total { display: block; font-family: "JetBrains Mono", monospace; font-weight: 800; font-size: 1.25rem; color: #1e6b30; }
.kl-wiz-preview { flex: none; appearance: none; border: 1px solid #d4dcd5; background: #fff; color: #3d443b; font-weight: 700; font-size: .85rem; padding: .5rem .9rem; border-radius: 10px; cursor: pointer; }
.kl-wiz-btns { display: flex; gap: 10px; }
.kl-wiz-btn { appearance: none; -webkit-appearance: none; border: 0; border-radius: 12px; font: inherit; font-weight: 800; padding: .95rem 1rem; cursor: pointer; }
.kl-wiz-btn.back { background: #eef1ea; color: #3d443b; flex: 0 0 38%; }
.kl-wiz-btn.primary { background: #1e6b30; color: #fff; flex: 1; }
.kl-wiz-btn:disabled { opacity: .45; cursor: default; }
.kl-wiz-btn:focus-visible, .kl-wiz-preview:focus-visible, .kl-wiz-summlink:focus-visible { outline: 2px solid #1e6b30; outline-offset: 2px; }

/* Podsumowanie: lista z "Zmień" */
.kl-wiz-summary { margin-bottom: 1rem; }
.kl-wiz-summary h4 { margin: 0 0 .6rem; }
.kl-wiz-srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ecefe8; }
.kl-wiz-srow:last-child { border-bottom: 0; }
.kl-wiz-scol { min-width: 0; }
.kl-wiz-slabel { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #6f766e; font-weight: 700; }
.kl-wiz-sval { font-weight: 600; color: #1a201b; }
.kl-wiz-change { appearance: none; border: 1px solid #cdd8cf; background: #fff; color: #1e6b30; font-weight: 700; font-size: .82rem; padding: .42rem .8rem; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.kl-wiz-change:hover { background: #1e6b30; color: #fff; border-color: #1e6b30; }

/* Zacheta do wyceny w sidebarze (zamiast rozpiski cen w kreatorze). */
.kl-cta-note { color: #5a625a; font-size: .85rem; line-height: 1.45; margin: .1rem 0 .9rem; }

/* ===== Desktop: krok po lewej + STALE podsumowanie (sidebar) po prawej ===== */
@media (min-width: 900px) {
  body.kl-wiz-on .kl-calc { max-width: 1120px; }
  /* UWAGA: selektor musi miec >= specyficznosc co regula mobilna
     `body.kl-wiz-on .kl-calc .layout { display:block !important }` (linia ~22),
     inaczej `block !important` wygrywa i sidebar laduje POD krokami, nie obok. */
  body.kl-wiz-on .kl-calc .layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 2rem; align-items: start;
  }
  /* Sidebar (rozpiska cen + "Sprawdz rabat") widoczny na stale, przyklejony. */
  body.kl-wiz-on .sidebar { display: block; position: sticky; top: 70px; width: auto; min-width: 0; margin: 0; }
  /* Krok "Podsumowanie": pelna szerokosc na przeglad z "Zmien". */
  body.kl-wiz-on .kl-show-summary .layout { grid-template-columns: 1fr; }
  body.kl-wiz-on .kl-show-summary .sidebar { position: static; }
  body.kl-wiz-on .kl-show-summary .kl-content { display: none; }
  /* Dolny pasek: cena i CTA sa juz w sidebarze -> zostaje tylko Wstecz/Dalej. */
  .kl-wiz-price { display: none; }
  .kl-wiz-btns { max-width: 720px; margin: 0 auto; justify-content: center; }
  .kl-wiz-btn.back { flex: 0 0 200px; }
  .kl-wiz-btn.primary { flex: 0 0 340px; }
}