/* KONZEPT Brief – interakcje 1.21. Działa tylko gdy JS doda .kbf-x do formularza. */
.kbf-shell.kbf-x{--x-ink:#0b0b0b;--x-paper:#f3f0eb;--x-line:rgba(11,11,11,.18);--x-out:cubic-bezier(.16,1,.3,1);--x-io:cubic-bezier(.76,0,.24,1)}

/* ---------- stepper zamiast cienkiej kreski ---------- */
.kbf-shell.kbf-x .kbf-progress{display:none!important}
.kbf-shell.kbf-x .kbf-x-steps{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:6px;margin:0 0 clamp(28px,4vw,56px)}
.kbf-shell.kbf-x .kbf-x-steps button{all:unset;cursor:default;display:flex;flex-direction:column;gap:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(11,11,11,.38);transition:color .4s ease}
.kbf-shell.kbf-x .kbf-x-steps button i{display:block;height:2px;background:var(--x-line);position:relative;overflow:hidden}
.kbf-shell.kbf-x .kbf-x-steps button i::after{content:"";position:absolute;inset:0;background:var(--x-ink);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--x-out)}
.kbf-shell.kbf-x .kbf-x-steps button.is-done,.kbf-shell.kbf-x .kbf-x-steps button.is-now{color:var(--x-ink)}
.kbf-shell.kbf-x .kbf-x-steps button.is-done i::after,.kbf-shell.kbf-x .kbf-x-steps button.is-now i::after{transform:scaleX(1)}
.kbf-shell.kbf-x .kbf-x-steps button.is-done{cursor:pointer}
.kbf-shell.kbf-x .kbf-x-steps button.is-done:hover span{text-decoration:underline;text-underline-offset:4px}
.kbf-shell.kbf-x .kbf-x-steps b{font-weight:500}

/* ---------- nagłówek kroku: maska słów ---------- */
.kbf-shell.kbf-x .kbf-x-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.kbf-shell.kbf-x .kbf-x-w>span{display:inline-block;will-change:transform}

/* ---------- kafle wyboru ---------- */
.kbf-shell.kbf-x .kbf-choice{position:relative!important;overflow:hidden!important;isolation:isolate!important;box-shadow:none!important;transform:none!important;
  transition:border-color .3s ease,opacity .45s ease,color .45s var(--x-out)!important}
.kbf-shell.kbf-x .kbf-choice::after{display:none!important}
/* warstwa wypełnienia: hover = podgląd od dołu 6 px, wybór = pełna */
.kbf-shell.kbf-x .kbf-choice::before{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;height:100%!important;background:var(--x-ink)!important;z-index:-1!important;
  transform:scaleY(0)!important;transform-origin:bottom!important;transition:transform .6s var(--x-io)!important}
.kbf-shell.kbf-x .kbf-choice:hover::before{transform:scaleY(.035)!important}
.kbf-shell.kbf-x .kbf-choice:has(input:checked)::before{transform:scaleY(1)!important}
.kbf-shell.kbf-x .kbf-choice:has(input:checked){color:#fff!important}
.kbf-shell.kbf-x .kbf-choice-grid:has(input:checked) .kbf-choice:not(:has(input:checked)){opacity:.45}
.kbf-shell.kbf-x .kbf-choice-grid:has(input:checked) .kbf-choice:not(:has(input:checked)):hover{opacity:1}
.kbf-shell.kbf-x .kbf-choice-num{display:inline-block!important;transition:transform .5s var(--x-out),letter-spacing .5s var(--x-out)!important}
.kbf-shell.kbf-x .kbf-choice:hover .kbf-choice-num{transform:translateX(6px)}
.kbf-shell.kbf-x .kbf-choice strong{transition:transform .5s var(--x-out)!important}
.kbf-shell.kbf-x .kbf-choice:hover strong{transform:translateX(6px)}
.kbf-shell.kbf-x .kbf-choice small{transition:opacity .4s ease,transform .5s var(--x-out)!important}
/* znacznik w rogu: strzałka na hover, ptaszek po wyborze */
.kbf-shell.kbf-x .kbf-x-mark{position:absolute;right:16px;top:16px;width:34px;height:34px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;
  opacity:0;transform:translate(-6px,6px) scale(.8);transition:opacity .35s ease,transform .5s var(--x-out),background .3s ease,color .3s ease;pointer-events:none}
.kbf-shell.kbf-x .kbf-x-mark svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;position:absolute;transition:opacity .25s ease,transform .45s var(--x-out)}
.kbf-shell.kbf-x .kbf-x-mark .ok{opacity:0;transform:scale(.4)}
.kbf-shell.kbf-x .kbf-choice:hover .kbf-x-mark{opacity:1;transform:none}
.kbf-shell.kbf-x .kbf-choice:has(input:checked) .kbf-x-mark{opacity:1;transform:none;background:#fff;color:var(--x-ink);border-color:#fff}
.kbf-shell.kbf-x .kbf-choice:has(input:checked) .kbf-x-mark .go{opacity:0;transform:translate(4px,-4px)}
.kbf-shell.kbf-x .kbf-choice:has(input:checked) .kbf-x-mark .ok{opacity:1;transform:none}

/* ---------- pola: jedna linia, fokus rysuje się NA niej ---------- */
.kbf-shell.kbf-x .kbf-field input:not([type=file]),.kbf-shell.kbf-x .kbf-field textarea{
  transform:none!important;box-shadow:none!important;outline:0!important;border:0!important;border-bottom:1px solid var(--x-line)!important;border-radius:0!important;
  background:linear-gradient(var(--x-ink),var(--x-ink)) left bottom/0% 2px no-repeat!important;transition:background-size .55s var(--x-out),border-color .3s ease!important}
.kbf-shell.kbf-x .kbf-field select{transform:none!important;box-shadow:none!important;outline:0!important;border-radius:0!important;border-bottom-color:var(--x-line)!important;transition:border-color .3s ease!important}
.kbf-shell.kbf-x .kbf-field input:not([type=file]):hover,.kbf-shell.kbf-x .kbf-field select:hover,.kbf-shell.kbf-x .kbf-field textarea:hover,.kbf-shell.kbf-x .kbf-field select:focus{border-bottom-color:var(--x-ink)!important}
.kbf-shell.kbf-x .kbf-field input:not([type=file]):focus,.kbf-shell.kbf-x .kbf-field textarea:focus{background-size:100% 2px!important;border-bottom-color:var(--x-ink)!important}
.kbf-shell.kbf-x .kbf-field input[aria-invalid=true]{border-bottom-color:#9c2923!important;background-image:linear-gradient(#9c2923,#9c2923)!important;background-size:100% 2px!important}
.kbf-shell.kbf-x .kbf-field>span:first-child{transition:color .3s ease}
.kbf-shell.kbf-x .kbf-field:focus-within>span:first-child{color:var(--x-ink)}
.kbf-shell.kbf-x .kbf-focus-line{display:none!important}
/* telefon + e-mail obok siebie */
.kbf-shell.kbf-x .kbf-x-row{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;max-width:690px}
.kbf-shell.kbf-x .kbf-x-row .kbf-field{margin:22px 0!important;max-width:none}

/* ---------- zgoda: bez ramek, własny checkbox ---------- */
.kbf-shell.kbf-x .kbf-check,.kbf-shell.kbf-x .kbf-check.is-error{border:0!important;outline:0!important;padding:0!important;margin-top:26px!important;cursor:pointer;align-items:center!important;gap:12px!important}
.kbf-shell.kbf-x .kbf-check input{appearance:none!important;-webkit-appearance:none!important;flex:0 0 20px!important;width:20px!important;height:20px!important;margin:0!important;border:1px solid var(--x-ink)!important;border-radius:0!important;background:transparent!important;position:relative;cursor:pointer;transition:background .25s ease}
.kbf-shell.kbf-x .kbf-check input::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) scale(0);transition:transform .35s var(--x-out)}
.kbf-shell.kbf-x .kbf-check input:checked{background:var(--x-ink)!important}
.kbf-shell.kbf-x .kbf-check input:checked::after{transform:rotate(45deg) scale(1)}
.kbf-shell.kbf-x .kbf-check input:focus-visible{outline:2px solid var(--x-ink)!important;outline-offset:3px}
.kbf-shell.kbf-x .kbf-check input[aria-invalid=true]{border-color:#9c2923!important}
.kbf-shell.kbf-x .kbf-check span{font-size:14px!important}
.kbf-shell.kbf-x .kbf-short-group,.kbf-shell.kbf-x fieldset{border:0!important}

/* stare animacje CSS kroków dublowały GSAP */
.kbf-shell.kbf-x .kbf-step,.kbf-shell.kbf-x .kbf-step.is-active *{animation:none!important}

/* ---------- przyciski ---------- */
.kbf-shell.kbf-x .kbf-btn{isolation:isolate;transform:none!important;box-shadow:none!important;align-items:center;gap:14px}
.kbf-shell.kbf-x .kbf-btn:not([hidden]){display:inline-flex!important}
.kbf-shell.kbf-x [hidden],.kbf-shell.kbf-x .kbf-btn[hidden]{display:none!important}
.kbf-shell.kbf-x .kbf-btn::after{display:none!important}
.kbf-shell.kbf-x .kbf-btn::before{content:"";position:absolute;inset:0;background:var(--x-paper);z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform .55s var(--x-io)}
.kbf-shell.kbf-x .kbf-btn:not(.kbf-btn--ghost):hover{color:var(--x-ink)!important}
.kbf-shell.kbf-x .kbf-btn:not(.kbf-btn--ghost):hover::before{transform:scaleX(1);transform-origin:left}
.kbf-shell.kbf-x .kbf-x-arr{display:inline-block;width:16px;height:10px;position:relative;overflow:hidden;flex:none}
.kbf-shell.kbf-x .kbf-x-arr svg{position:absolute;inset:0;width:16px;height:10px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .5s var(--x-out)}
.kbf-shell.kbf-x .kbf-x-arr svg+svg{transform:translateX(-120%)}
.kbf-shell.kbf-x .kbf-btn:hover .kbf-x-arr svg:first-child{transform:translateX(120%)}
.kbf-shell.kbf-x .kbf-btn:hover .kbf-x-arr svg+svg{transform:none}
.kbf-shell.kbf-x .kbf-btn--ghost{background:transparent!important;border-color:transparent!important;color:var(--x-ink)!important;padding-left:0!important;padding-right:0!important}
.kbf-shell.kbf-x .kbf-btn--ghost::before{inset:auto 0 10px 0;height:1px;background:var(--x-ink);transform:scaleX(.3);transform-origin:left}
.kbf-shell.kbf-x .kbf-btn--ghost:hover::before{transform:scaleX(1)}
.kbf-shell.kbf-x .kbf-btn--ghost .kbf-x-arr{transform:scaleX(-1)}

/* ---------- sukces ---------- */
.kbf-shell.kbf-x .kbf-x-ok{width:56px;height:56px;margin-bottom:18px;display:block}
.kbf-shell.kbf-x .kbf-x-ok circle,.kbf-shell.kbf-x .kbf-x-ok path{fill:none;stroke:var(--x-ink);stroke-width:1.4}

/* ---------- mobile ---------- */
@media(max-width:767px){
  .kbf-shell.kbf-x .kbf-x-steps span{font-size:10px;letter-spacing:.08em}
  .kbf-shell.kbf-x .kbf-x-steps b{display:none}
  .kbf-shell.kbf-x .kbf-choice{min-height:0!important;padding:18px 64px 18px 18px!important}
  .kbf-shell.kbf-x .kbf-choice-num{margin-bottom:10px!important}
  .kbf-shell.kbf-x .kbf-choice small{display:none!important}
  .kbf-shell.kbf-x .kbf-x-mark{opacity:1;transform:none;top:50%;margin-top:-17px}
  .kbf-shell.kbf-x .kbf-choice:hover::before{transform:scaleY(0)!important}
  .kbf-shell.kbf-x .kbf-choice:has(input:checked)::before{transform:scaleY(1)!important}
  .kbf-shell.kbf-x .kbf-choice:hover .kbf-choice-num,.kbf-shell.kbf-x .kbf-choice:hover strong{transform:none}
  /* akcje przyklejone do dołu: „Dalej” zawsze pod kciukiem */
  .kbf-shell.kbf-x .kbf-actions{position:sticky;bottom:0;z-index:5;margin-left:calc(-1 * clamp(22px,5vw,64px));margin-right:calc(-1 * clamp(22px,5vw,64px));padding:12px clamp(22px,5vw,64px) calc(12px + env(safe-area-inset-bottom));background:var(--x-paper);border-top:1px solid var(--x-line);gap:10px!important}
  .kbf-shell.kbf-x .kbf-actions .kbf-btn{flex:1 1 auto;justify-content:space-between}
  .kbf-shell.kbf-x .kbf-actions .kbf-btn--ghost{flex:0 0 auto}
  .kbf-shell.kbf-x .kbf-x-row{grid-template-columns:1fr}
  .kbf-shell.kbf-x .kbf-x-row .kbf-field{margin:14px 0!important}
}
@media(prefers-reduced-motion:reduce){.kbf-shell.kbf-x *,.kbf-shell.kbf-x *::before,.kbf-shell.kbf-x *::after{transition-duration:.01ms!important;animation:none!important}}

/* ---------- 1.23.0: dodatkowe informacje + pliki ---------- */
.kbf-shell.kbf-x .kbf-x-more{max-width:690px;margin:6px 0 0}
.kbf-shell.kbf-x .kbf-x-notes{position:relative;margin:22px 0 0!important}
.kbf-shell.kbf-x .kbf-x-notes textarea{min-height:46px!important;height:46px;padding:12px 0 10px!important;resize:none!important;line-height:1.5!important;overflow:hidden;font:inherit;font-size:15px!important;color:var(--x-ink)}
.kbf-shell.kbf-x .kbf-x-notes textarea::placeholder{color:rgba(11,11,11,.38)}
.kbf-shell.kbf-x .kbf-x-count{position:absolute;right:0;top:0;font-size:10.5px;letter-spacing:.12em;color:rgba(11,11,11,.45);opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .45s var(--x-out)}
.kbf-shell.kbf-x .kbf-x-count.is-on{opacity:1;transform:none}

.kbf-shell.kbf-x .kbf-drop{position:relative;margin:26px 0 0}
.kbf-shell.kbf-x .kbf-drop-label{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#5f5a52;margin:0 0 10px}
.kbf-shell.kbf-x .kbf-drop-label small{font-size:.8em}
.kbf-shell.kbf-x .kbf-drop-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;pointer-events:none}
.kbf-shell.kbf-x .kbf-drop-zone{position:relative;display:flex;align-items:center;gap:16px;padding:16px 18px;background:rgba(11,11,11,.045);color:var(--x-ink);cursor:pointer;overflow:hidden;isolation:isolate;transition:color .45s var(--x-out)}
.kbf-shell.kbf-x .kbf-drop-zone::before{content:"";position:absolute;inset:0;background:var(--x-ink);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--x-io)}
.kbf-shell.kbf-x .kbf-drop-zone::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--x-ink);transform:scaleX(var(--kbf-progress,0));transform-origin:left;opacity:0;transition:transform .2s linear,opacity .3s ease}
.kbf-shell.kbf-x .kbf-drop.is-sending .kbf-drop-zone::after{opacity:1}
.kbf-shell.kbf-x .kbf-drop-zone:hover::before{transform:scaleY(.04)}
.kbf-shell.kbf-x .kbf-drop.is-over .kbf-drop-zone{color:#fff}
.kbf-shell.kbf-x .kbf-drop.is-over .kbf-drop-zone::before{transform:scaleY(1)}
.kbf-shell.kbf-x .kbf-drop-input:focus-visible+.kbf-drop-zone{outline:2px solid var(--x-ink);outline-offset:3px}
.kbf-shell.kbf-x .kbf-drop.is-error .kbf-drop-zone{box-shadow:inset 0 -2px 0 #9c2923}
.kbf-shell.kbf-x .kbf-drop-ico{flex:0 0 42px;width:42px;height:42px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;transition:background .3s ease,color .3s ease,border-color .3s ease}
.kbf-shell.kbf-x .kbf-drop-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .5s var(--x-out)}
.kbf-shell.kbf-x .kbf-drop-zone:hover .kbf-drop-ico{background:var(--x-ink);color:#fff;border-color:var(--x-ink)}
.kbf-shell.kbf-x .kbf-drop-zone:hover .kbf-drop-ico svg{transform:translateY(-2px)}
.kbf-shell.kbf-x .kbf-drop.is-over .kbf-drop-ico{background:#fff;color:var(--x-ink);border-color:#fff}
.kbf-shell.kbf-x .kbf-drop.is-over .kbf-drop-ico svg{animation:kbfXLift .9s var(--x-out) infinite}
@keyframes kbfXLift{0%{transform:translateY(5px);opacity:0}40%{opacity:1}100%{transform:translateY(-3px);opacity:1}}
.kbf-shell.kbf-x .kbf-drop-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.kbf-shell.kbf-x .kbf-drop-txt b{font-weight:500;font-size:15px;letter-spacing:-.01em;line-height:1.3}
.kbf-shell.kbf-x .kbf-drop-sub{font-size:12px;line-height:1.45;opacity:.62}
.kbf-shell.kbf-x .kbf-drop-list{list-style:none!important;margin:0!important;padding:0!important}
.kbf-shell.kbf-x .kbf-drop-item{display:grid;grid-template-columns:42px minmax(0,1fr) 34px;align-items:center;gap:14px;padding:10px 0!important;border:0!important;border-bottom:1px solid var(--x-line)!important;margin:0!important;background:none!important;transition:opacity .22s ease,transform .22s ease}
.kbf-shell.kbf-x .kbf-drop-item.is-new{animation:kbfXIn .5s var(--x-out)}
.kbf-shell.kbf-x .kbf-drop-item.is-out{opacity:0;transform:translateX(12px)}
@keyframes kbfXIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kbf-shell.kbf-x .kbf-drop-thumb{width:42px;height:42px;background:var(--x-ink);color:#fff;display:grid;place-items:center;font-size:10px;letter-spacing:.1em;overflow:hidden}
.kbf-shell.kbf-x .kbf-drop-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kbf-shell.kbf-x .kbf-drop-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.kbf-shell.kbf-x .kbf-drop-meta b{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kbf-shell.kbf-x .kbf-drop-meta small{font-size:10.5px;letter-spacing:.1em;color:#5f5a52}
.kbf-shell.kbf-x .kbf-drop-rm{all:unset;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--x-ink);transition:background .25s ease,color .25s ease}
.kbf-shell.kbf-x .kbf-drop-rm svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .4s var(--x-out)}
.kbf-shell.kbf-x .kbf-drop-rm:hover{background:var(--x-ink);color:#fff}
.kbf-shell.kbf-x .kbf-drop-rm:hover svg{transform:rotate(90deg)}
.kbf-shell.kbf-x .kbf-drop-rm:focus-visible{outline:2px solid var(--x-ink);outline-offset:2px}
.kbf-shell.kbf-x .kbf-drop.is-sending .kbf-drop-rm{opacity:.3;pointer-events:none}
.kbf-shell.kbf-x .kbf-drop .kbf-field-error{display:block;margin:8px 0 0}
@media(max-width:767px){
  .kbf-shell.kbf-x .kbf-drop-zone{padding:14px;gap:12px}
  .kbf-shell.kbf-x .kbf-drop-ico{flex-basis:38px;width:38px;height:38px}
  .kbf-shell.kbf-x .kbf-drop-txt b{font-size:14px}
}