/* ==========================================================
   WK Boardbag Finder  –  výběr obalu podle rozměru plováku
   Vložit do hlavičky:  <link rel="stylesheet" href="/user/documents/upload/wind_redesign/wk-bagfinder.css?v=1">
   ========================================================== */
.wkbf{
  --wkbf-ink:#13222e;
  --wkbf-muted:#5b6d7a;
  --wkbf-surface:#eef4f7;
  --wkbf-line:#c9d7df;
  --wkbf-accent:#e2571e;
  --wkbf-accent-ink:#fff;
  --wkbf-board:#13222e;
  --wkbf-bag:#e2571e;
  --wkbf-pad:#2c4050;
  --wkbf-strap:#e2571e;
  --wkbf-btn:#13222e;
  --wkbf-btn-hover:#24394a;
  font-family:'Barlow Condensed',Arial Narrow,Arial,sans-serif;
  color:var(--wkbf-ink)!important;
  background:var(--wkbf-surface)!important;
  border-radius:10px;
  padding:22px 24px 20px;
  margin:0 0 24px;
  box-sizing:border-box;
}
.wkbf *,.wkbf *::before,.wkbf *::after{box-sizing:border-box}
.wkbf-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.wkbf-title{font-size:26px!important;line-height:1.1!important;font-weight:700!important;margin:0!important;color:var(--wkbf-ink)!important;letter-spacing:.2px}
.wkbf-sub{font-family:Arial,sans-serif;font-size:14px;line-height:1.5;color:var(--wkbf-muted);margin:0 0 14px;max-width:60ch}

/* silueta boardu – hlavní vizuální prvek */
.wkbf-stage{width:100%;max-width:520px;height:auto;display:block;margin:0 auto 14px}
.wkbf-stage .wkbf-boardshape{fill:var(--wkbf-board);transition:d .25s ease}
.wkbf-stage .wkbf-pad{fill:var(--wkbf-pad)}
.wkbf-stage .wkbf-track{fill:#6b8294}
.wkbf-stage .wkbf-strap{fill:var(--wkbf-strap)}
.wkbf-stage .wkbf-bagshape{fill:none;stroke:var(--wkbf-bag);stroke-width:2.5;stroke-dasharray:7 5;opacity:0;transition:opacity .25s ease}
.wkbf-stage .wkbf-bagshape.is-on{opacity:1}
.wkbf-stage text{font-family:'Barlow Condensed',Arial,sans-serif;font-size:15px;fill:var(--wkbf-muted)}
.wkbf-stage .wkbf-dimline{stroke:var(--wkbf-line);stroke-width:1.5}

.wkbf-fields{display:grid;grid-template-columns:1fr 1fr auto;gap:18px 22px;align-items:end}
.wkbf-field label{display:flex;justify-content:space-between;font-size:17px;font-weight:600;margin:0 0 6px;color:var(--wkbf-ink)}
.wkbf-field label span{color:var(--wkbf-muted);font-weight:500}
.wkbf-row{display:flex;align-items:center;gap:10px}
.wkbf-row input[type=range]{flex:1;accent-color:var(--wkbf-accent);min-width:0;height:28px}
.wkbf-num{display:flex;align-items:center;background:#fff;border:1px solid var(--wkbf-line);border-radius:6px;padding:0 8px 0 0}
.wkbf-num input{width:62px;border:0!important;background:transparent!important;font:600 20px 'Barlow Condensed',Arial,sans-serif;color:var(--wkbf-ink);padding:6px 4px 6px 10px!important;text-align:right;-moz-appearance:textfield;box-shadow:none!important;height:auto!important}
.wkbf-num input::-webkit-outer-spin-button,.wkbf-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wkbf-num small{font-size:15px;color:var(--wkbf-muted)}
.wkbf-btn{appearance:none;border:0;border-radius:6px;background:var(--wkbf-btn)!important;color:#fff!important;font:600 19px 'Barlow Condensed',Arial,sans-serif;letter-spacing:.3px;padding:10px 24px;cursor:pointer;white-space:nowrap;min-height:44px;border-bottom:3px solid var(--wkbf-accent)!important}
.wkbf-btn:hover{background:var(--wkbf-btn-hover)!important}
.wkbf-btn:focus-visible,.wkbf input:focus-visible,.wkbf-link:focus-visible{outline:3px solid var(--wkbf-ink);outline-offset:2px}

.wkbf-out{font-family:Arial,sans-serif;font-size:14px;line-height:1.55;margin-top:14px;min-height:1px}
.wkbf-out:empty{margin-top:0}
.wkbf-sizes{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.wkbf-sizes li{background:#fff;border:1px solid var(--wkbf-line);border-radius:4px;padding:3px 9px;font:600 15px 'Barlow Condensed',Arial,sans-serif;color:var(--wkbf-ink)}
.wkbf-sizes li.is-best{border-color:var(--wkbf-accent);color:var(--wkbf-accent)}
.wkbf-empty{color:var(--wkbf-ink)}
.wkbf-link{color:var(--wkbf-accent)!important;text-decoration:underline!important;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.wkbf-active{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.wkbf-active strong{font-family:'Barlow Condensed',Arial,sans-serif;font-size:18px}
.wkbf-note{font-family:Arial,sans-serif;font-size:14px;line-height:1.55;margin-top:14px;padding-top:14px;border-top:1px solid var(--wkbf-line)}
.wkbf-note[hidden]{display:none}
.wkbf-out p,.wkbf-note p{font-family:Arial,sans-serif!important;font-size:14px!important;line-height:1.55!important;text-align:left!important;margin:0!important;color:var(--wkbf-ink)!important}
.wkbf-note p.wkbf-hint{margin:8px 0 0!important;font-size:13px!important;color:var(--wkbf-muted)!important}
.wkbf p.wkbf-sub{font-family:Arial,sans-serif!important;font-size:14px!important;line-height:1.5!important;text-align:left!important;color:var(--wkbf-muted)!important;margin:0 0 14px!important}
.wkbf-btn:disabled{opacity:.7;cursor:wait}

@media (max-width:767px){
  .wkbf{padding:18px 14px 16px;border-radius:8px}
  .wkbf-title{font-size:23px!important}
  .wkbf-fields{grid-template-columns:1fr;gap:14px}
  .wkbf-btn{width:100%;font-size:19px;min-height:46px}
  .wkbf-num input{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .wkbf-stage .wkbf-boardshape,.wkbf-stage .wkbf-bagshape{transition:none}
}