/* Suwak kwoty (2.0.68) — web/assets/js/suwak-wartosci.js: Propozycja zamówienia i kalkulator bonusu.
   Natywny <input type="range"> ostylowany: gruba ścieżka wypełniona od lewej do uchwytu (--p 0..1 ustawiane z JS),
   duży okrągły uchwyt ze strzałkami ⟷ (SVG w data: — CSP img-src dopuszcza data:), kursor grab/grabbing,
   znaczniki pod skalą (klikalne), dymek z kwotą nad uchwytem podczas przeciągania. Ekran dotykowy: uchwyt 44 px.
   Środek uchwytu na skali: calc(var(--th) / 2 + var(--p) * (100% - var(--th))) — ta sama formuła w ścieżce, dymku
   i znacznikach (custom property z % liczymy w miejscu użycia, nie dziedziczymy gotowej). */
.sw {
  --th: 34px;                       /* średnica uchwytu */
  --tr: 10px;                       /* grubość ścieżki */
  --sw-kolor: var(--blue-600, #005BC4);
  --sw-kolor-c: var(--blue-700, #004493);
  --sw-tlo: #D5DCE6;
  --sw-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12h17M7.5 8l-4 4 4 4M16.5 8l4 4-4 4'/%3E%3C/svg%3E");
  position: relative; flex: 1 1 100%; min-width: 0;
}
.sw-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-size: 12.5px; color: var(--muted, #5B6472); }
.sw-hint svg { color: var(--sw-kolor); flex: none; }
/* wiersz wyrównany do ścieżki (znaczniki pod skalą nie przesuwają przycisków): każdy element bocznej części
   dostaje margines = (wysokość suwaka − własna wysokość) / 2 */
.sw-row { --sw-h: calc(var(--th) + 8px); display: flex; align-items: flex-start; gap: 8px; }
.sw-row > .sw-btn { margin-top: calc((var(--sw-h) - 36px) / 2); }
.sw-row > .sw-end { height: var(--sw-h); }
.sw-row > .sw-pole { height: var(--sw-h); }
.sw-btn {
  flex: none; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  display: inline-grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border-2, #D1D5DB); background: var(--bg, #fff); color: var(--sw-kolor-c);
  transition: background var(--t-fast, 150ms), border-color var(--t-fast, 150ms);
}
.sw-btn:hover { background: var(--blue-50, #EFF6FF); border-color: var(--blue-300, #66AAF9); }
.sw-btn:active { background: var(--blue-100, #DBEAFE); }
.sw-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.sw-end { flex: none; display: inline-grid; place-items: center; color: var(--sw-kolor-c); opacity: .75; }
.sw-skala { position: relative; flex: 1 1 auto; min-width: 120px; }

/* ---- ścieżka i uchwyt (WebKit/Blink) ---- */
.sw-range {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; margin: 0; padding: 0;
  height: calc(var(--th) + 8px); background: transparent; cursor: pointer; touch-action: pan-y;
}
.sw-range:focus { outline: none; }
.sw-range::-webkit-slider-runnable-track {
  height: var(--tr); border-radius: 999px;
  background: linear-gradient(to right, var(--sw-kolor) 0, var(--sw-kolor) calc(var(--th) / 2 + var(--p, 0) * (100% - var(--th))),
    var(--sw-tlo) calc(var(--th) / 2 + var(--p, 0) * (100% - var(--th))), var(--sw-tlo) 100%);
  box-shadow: inset 0 1px 2px rgb(0 23 49 / .15);
}
.sw-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
  width: var(--th); height: var(--th); margin-top: calc((var(--tr) - var(--th)) / 2); border-radius: 50%;
  border: 3px solid #fff; background: var(--sw-kolor) var(--sw-ikona) center / 62% no-repeat;
  box-shadow: 0 2px 6px rgb(0 23 49 / .35), 0 0 0 1px rgb(0 68 147 / .3);
  cursor: grab; transition: transform var(--t-fast, 150ms) var(--ease, ease), box-shadow var(--t-fast, 150ms);
}
.sw-range:hover::-webkit-slider-thumb { transform: scale(1.08); box-shadow: 0 3px 10px rgb(0 23 49 / .4), 0 0 0 6px rgb(0 91 196 / .14); }
.sw-range:active::-webkit-slider-thumb, .sw.sw-ciagnie .sw-range::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.12); background-color: var(--sw-kolor-c); }
.sw-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 2px 6px rgb(0 23 49 / .35), var(--ring, 0 0 0 4px rgb(102 170 249 / .55)); }

/* ---- Firefox ---- */
.sw-range::-moz-range-track { height: var(--tr); border-radius: 999px; background: var(--sw-tlo); box-shadow: inset 0 1px 2px rgb(0 23 49 / .15); }
.sw-range::-moz-range-progress { height: var(--tr); border-radius: 999px; background: var(--sw-kolor); }
.sw-range::-moz-range-thumb {
  box-sizing: border-box; width: var(--th); height: var(--th); border-radius: 50%;
  border: 3px solid #fff; background: var(--sw-kolor) var(--sw-ikona) center / 62% no-repeat;
  box-shadow: 0 2px 6px rgb(0 23 49 / .35), 0 0 0 1px rgb(0 68 147 / .3); cursor: grab;
}
.sw-range:hover::-moz-range-thumb { box-shadow: 0 3px 10px rgb(0 23 49 / .4), 0 0 0 6px rgb(0 91 196 / .14); }
.sw-range:active::-moz-range-thumb { cursor: grabbing; background-color: var(--sw-kolor-c); }
.sw-range:focus-visible::-moz-range-thumb { box-shadow: 0 2px 6px rgb(0 23 49 / .35), var(--ring, 0 0 0 4px rgb(102 170 249 / .55)); }

/* ---- dymek z kwotą nad uchwytem (przeciąganie, fokus z klawiatury) ---- */
.sw-dymek {
  position: absolute; top: 0; left: calc(var(--th) / 2 + var(--p, 0) * (100% - var(--th)));
  transform: translate(-50%, calc(-100% + 2px)); z-index: 3; pointer-events: none;
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
  background: var(--navy-title, #001731); color: #fff; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity var(--t-fast, 150ms);
}
.sw-dymek::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--navy-title, #001731); }
.sw.sw-ciagnie .sw-dymek, .sw-range:focus-visible ~ .sw-dymek, .sw-skala:has(.sw-range:focus-visible) .sw-dymek { opacity: 1; }

/* ---- znaczniki pod skalą (klikalne: ustawiają kwotę) ---- */
.sw-znaczniki { position: relative; height: 26px; margin-top: 1px; }
.sw.sw-dwa-rzedy .sw-znaczniki { height: 52px; }
.sw-mark {
  position: absolute; top: 0; left: calc(var(--th) / 2 + var(--p, 0) * (100% - var(--th)));
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px 0 6px; z-index: 1;
  border: 1px solid var(--border-2, #D1D5DB); border-radius: 999px; background: var(--bg, #fff);
  color: var(--text-2, #1F2937); font: inherit; font-size: 12px; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: border-color var(--t-fast, 150ms), background var(--t-fast, 150ms);
}
.sw-mark svg { color: var(--sw-kolor-c); flex: none; }
.sw-mark:hover { border-color: var(--blue-300, #66AAF9); background: var(--blue-50, #EFF6FF); }
.sw-mark:focus-visible { outline: none; box-shadow: var(--ring); }
.sw-mark-c { transform: translateX(-50%); }
.sw-mark-l { transform: translateX(calc(var(--th) / -2)); }
.sw-mark-r { transform: translateX(calc(-100% + var(--th) / 2)); }
/* kreska od znacznika do ścieżki */
.sw-mark::before { content: ""; position: absolute; bottom: 100%; width: 2px; height: 14px; border-radius: 1px; background: var(--sw-kolor-c); opacity: .55; }
.sw-mark-c::before { left: 50%; margin-left: -1px; }
.sw-mark-l::before { left: calc(var(--th) / 2 - 1px); }
.sw-mark-r::before { right: calc(var(--th) / 2 - 1px); }
.sw-mark.sw-rzad-1 { top: 27px; z-index: 0; }
.sw-mark.sw-rzad-1::before { height: 41px; }
/* brak miejsca na etykietę: sama kropka na ścieżce (kliknięcie w ścieżkę i tak ustawia to miejsce; opis w title);
   kropki pod uchwytem chowa JS (sw-pod-uchwytem), żeby nie zasłaniały strzałek */
.sw-mark.sw-bez-etykiety {
  top: calc((var(--th) + 8px + var(--tr)) / -2 - 1px); width: 10px; height: 10px; padding: 0; transform: translateX(-50%);
  border: 2px solid var(--sw-kolor-c); background: #fff; pointer-events: none;
}
.sw-mark.sw-bez-etykiety.sw-pod-uchwytem { visibility: hidden; }
.sw-mark.sw-bez-etykiety svg, .sw-mark.sw-bez-etykiety .sw-mark-t, .sw-mark.sw-bez-etykiety::before { display: none; }

/* ---- pole kwoty ---- */
.sw-pole { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.sw-pole .input { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- ekran dotykowy: uchwyt i przyciski min. 44 px ---- */
@media (pointer: coarse) {
  .sw { --th: 44px; --tr: 12px; }
  .sw-btn { width: 44px; height: 44px; }
  .sw-row > .sw-btn { margin-top: calc((var(--sw-h) - 44px) / 2); }
  .sw-mark { height: 30px; font-size: 12.5px; }
  .sw-znaczniki { height: 32px; }
  .sw.sw-dwa-rzedy .sw-znaczniki { height: 64px; }
  .sw-mark.sw-rzad-1 { top: 33px; }
  .sw-mark.sw-rzad-1::before { height: 47px; }
}
/* telefon: piktogramy końców chowamy (miejsce dla skali), pole kwoty w osobnym wierszu */
@media (max-width: 600px) {
  .sw-row { flex-wrap: wrap; gap: 6px; }
  .sw-end { display: none; }
  .sw-skala { flex: 1 1 0; }
  .sw-pole { flex: 1 1 100%; margin: 6px 0 0; }
  .sw-pole .input { width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-range::-webkit-slider-thumb, .sw-dymek, .sw-btn, .sw-mark { transition: none; }
}
@media print { .sw-btn, .sw-hint, .sw-dymek { display: none; } }