/* Asystent doboru filtra VODARO: widżet czatu w stylu strony (ciemny, Inter + Instrument Serif + JetBrains Mono) */
.vz{--vz-noc:#07090C;--vz-noc2:#0C0F14;--vz-noc3:#131820;--vz-linia:rgba(255,255,255,.09);--vz-linia2:rgba(255,255,255,.16);
  --vz-biel:#F4F7FA;--vz-szary:#8B95A3;--vz-szary2:#5D6672;--vz-woda:#3FB8FF;--vz-woda2:#1F7BFF;--vz-lod:#BDEBFF;--vz-pom:#F6A623;
  --vz-sans:"Inter",system-ui,sans-serif;--vz-serif:"Instrument Serif",Georgia,serif;--vz-mono:"JetBrains Mono",ui-monospace,monospace;--vz-ease:cubic-bezier(.22,1,.36,1);
  font-family:var(--vz-sans);color:var(--vz-biel);-webkit-font-smoothing:antialiased}
.vz *,.vz *::before,.vz *::after{box-sizing:border-box;margin:0;padding:0}
.vz button{font:inherit;color:inherit;cursor:pointer}

/* przycisk otwierający */
.vz-start{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:90;display:flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 8px;
  border-radius:999px;border:1px solid rgba(63,184,255,.38);background:rgba(12,15,20,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font:600 14px var(--vz-sans);color:var(--vz-biel);box-shadow:0 12px 34px rgba(0,0,0,.5);transition:transform .3s var(--vz-ease),opacity .25s,border-color .25s}
.vz-start:hover{border-color:var(--vz-woda);transform:translateY(-2px)}
.vz-start:active{transform:scale(.97)}
.vz-start .vz-kropla{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#7fd2ff,var(--vz-woda) 45%,var(--vz-woda2));box-shadow:0 0 0 0 rgba(63,184,255,.45);animation:vz-puls 2.8s infinite}
.vz-start .vz-kropla svg{width:20px;height:20px;color:#04121c}
.vz-start .vz-kropla::after{content:"";position:absolute;top:1px;right:1px;width:10px;height:10px;border-radius:50%;background:var(--vz-pom);border:2px solid var(--vz-noc2)}
.vz-start small{display:block;font:500 10px var(--vz-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--vz-szary);margin-top:1px}
.vz-start[hidden]{display:none}
@keyframes vz-puls{0%{box-shadow:0 0 0 0 rgba(63,184,255,.45)}70%{box-shadow:0 0 0 14px rgba(63,184,255,0)}100%{box-shadow:0 0 0 0 rgba(63,184,255,0)}}

/* zachęta nad przyciskiem */
.vz-zacheta{position:fixed;right:20px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:90;max-width:260px;padding:12px 34px 12px 14px;border-radius:16px 16px 6px 16px;
  background:var(--vz-noc3);border:1px solid var(--vz-linia2);font-size:13.5px;line-height:1.45;color:#dfe6ee;box-shadow:0 12px 34px rgba(0,0,0,.45);cursor:pointer;
  animation:vz-wjazd .45s var(--vz-ease)}
.vz-zacheta b{color:var(--vz-lod);font-weight:600}
.vz-zacheta .vz-x{position:absolute;top:6px;right:6px;width:24px;height:24px;border:0;background:none;color:var(--vz-szary);font-size:16px;line-height:1;border-radius:50%}
.vz-zacheta .vz-x:hover{color:var(--vz-biel)}
@keyframes vz-wjazd{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* okno czatu */
.vz-okno{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:95;width:410px;height:min(680px,calc(100dvh - 40px));display:flex;flex-direction:column;overflow:hidden;
  background:var(--vz-noc2);border:1px solid var(--vz-linia2);border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.65),0 0 0 1px rgba(63,184,255,.06);
  transform-origin:100% 100%;transition:opacity .28s,transform .4s var(--vz-ease),visibility 0s}
.vz-okno[hidden]{display:flex;opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);pointer-events:none;transition:opacity .2s,transform .3s var(--vz-ease),visibility 0s .3s}

.vz-gora{display:flex;align-items:center;gap:12px;padding:16px 14px 14px 18px;border-bottom:1px solid var(--vz-linia);
  background:radial-gradient(120% 160% at 0% 0%,rgba(63,184,255,.17),transparent 58%),var(--vz-noc2)}
.vz-gora .vz-kropla{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#7fd2ff,var(--vz-woda) 45%,var(--vz-woda2))}
.vz-gora .vz-kropla svg{width:19px;height:19px;color:#04121c}
.vz-gora-txt{flex:1;min-width:0}
.vz-etykieta{display:flex;align-items:center;gap:7px;font:500 10.5px var(--vz-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--vz-szary)}
.vz-etykieta i{width:6px;height:6px;border-radius:50%;background:#46d38a;box-shadow:0 0 8px #46d38a}
.vz-tytul{font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.2;margin-top:3px}
.vz-tytul em{font-family:var(--vz-serif);font-style:italic;font-weight:400;color:var(--vz-lod);font-size:1.12em}
.vz-atrapa{display:inline-block;white-space:nowrap;margin-left:6px;padding:1px 6px;border-radius:6px;border:1px dashed rgba(246,166,35,.6);color:#f6c66e;font:500 9.5px var(--vz-mono);letter-spacing:.06em;text-transform:none;vertical-align:1px}
.vz-zamknij{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--vz-linia2);background:transparent;display:grid;place-items:center;color:var(--vz-szary);transition:color .2s,border-color .2s}
.vz-zamknij:hover{color:var(--vz-biel);border-color:var(--vz-biel)}
.vz-zamknij svg{width:16px;height:16px}

.vz-lista{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 8px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:var(--vz-linia2) transparent}
.vz-lista>*{flex-shrink:0}
.vz-dym{max-width:88%;padding:11px 14px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;animation:vz-wjazd .35s var(--vz-ease)}
.vz-dym b{font-weight:600;color:#fff}
.vz-dym.bot{align-self:flex-start;background:var(--vz-noc3);border:1px solid rgba(255,255,255,.06);border-radius:16px 16px 16px 6px;color:#e3e9f0}
.vz-dym.ty{align-self:flex-end;background:var(--vz-woda);color:#03121d;border-radius:16px 16px 6px 16px;font-weight:500}
.vz-pisze{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;border-radius:16px 16px 16px 6px;background:var(--vz-noc3)}
.vz-pisze i{width:7px;height:7px;border-radius:50%;background:var(--vz-woda);animation:vz-kr 1.1s infinite}
.vz-pisze i:nth-child(2){animation-delay:.15s}.vz-pisze i:nth-child(3){animation-delay:.3s}
@keyframes vz-kr{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.vz-szybkie{display:flex;flex-wrap:wrap;gap:7px;animation:vz-wjazd .35s var(--vz-ease)}
.vz-szybkie button{border:1px solid rgba(63,184,255,.34);background:rgba(63,184,255,.06);color:var(--vz-lod);border-radius:999px;padding:8px 13px;font:500 13px var(--vz-sans);text-align:left;transition:background .2s,border-color .2s}
.vz-szybkie button:hover{background:rgba(63,184,255,.15);border-color:var(--vz-woda)}

/* karta systemu */
.vz-karta{align-self:stretch;border-radius:20px;border:1px solid rgba(63,184,255,.3);background:linear-gradient(180deg,#0f151d,var(--vz-noc));overflow:hidden;animation:vz-wjazd .45s var(--vz-ease)}
.vz-karta-foto{height:176px;margin:10px 10px 0;border-radius:14px;background:linear-gradient(180deg,#ffffff,#e8edf2);display:grid;place-items:center;overflow:hidden}
.vz-karta-foto img{height:172px;width:auto;max-width:92%;object-fit:contain;mix-blend-mode:multiply}
.vz-karta-tresc{padding:14px 16px 16px}
.vz-mono{font:500 10.5px var(--vz-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--vz-szary)}
.vz-karta h4{font-size:22px;font-weight:500;letter-spacing:-.02em;margin:4px 0 2px}
.vz-karta h4 em{font-style:normal;font-weight:600;color:var(--vz-lod);letter-spacing:-.01em}
.vz-karta .vz-nazwa{font-size:13.5px;color:#c9d1db}
.vz-komplet{font:500 11.5px var(--vz-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--vz-pom);margin:10px 0 8px}
.vz-przeplyw{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.vz-przeplyw code{font:500 11.5px var(--vz-mono);padding:3px 7px;border-radius:6px;background:rgba(63,184,255,.12);color:var(--vz-lod);border:1px solid rgba(63,184,255,.25)}
.vz-przeplyw i{font-style:normal;color:var(--vz-szary2);font-size:12px}
.vz-ceny{margin:14px 0 4px;border-top:1px solid var(--vz-linia)}
.vz-ceny div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--vz-linia);font-size:13px}
.vz-ceny dt{color:var(--vz-szary)}
.vz-ceny dd{font:500 13px var(--vz-mono);color:var(--vz-biel);text-align:right;white-space:nowrap}
.vz-ceny dd.vz-pot{color:#f6c66e;white-space:normal;font-size:12px}
.vz-ceny dd small{display:block;color:var(--vz-szary);font-size:11px}
.vz-uwaga{font-size:12px;line-height:1.45;color:var(--vz-szary);margin-top:8px}
.vz-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:48px;margin-top:14px;border:0;border-radius:999px;background:var(--vz-pom);color:#1a1205;font:600 14.5px var(--vz-sans);transition:background .2s,transform .2s var(--vz-ease)}
.vz-btn:hover{background:#ffb83f}
.vz-btn:active{transform:scale(.98)}
.vz-btn svg{width:17px;height:17px}
.vz-btn.vz-jasny{background:transparent;color:var(--vz-biel);border:1px solid var(--vz-linia2)}
.vz-btn.vz-jasny:hover{border-color:var(--vz-biel)}
.vz-btn[disabled]{opacity:.6;pointer-events:none}
.vz-ulotka{display:block;margin-top:10px;text-align:center;font:500 11px var(--vz-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--vz-szary);text-decoration:none}
.vz-ulotka:hover{color:var(--vz-lod)}

/* formularz zapytania */
.vz-form{align-self:stretch;border-radius:20px;border:1px solid rgba(246,166,35,.4);background:var(--vz-noc);padding:16px;display:grid;gap:10px;animation:vz-wjazd .45s var(--vz-ease)}
.vz-form h5{font-size:16px;font-weight:600;letter-spacing:-.01em}
.vz-form h5 code{font:500 13px var(--vz-mono);color:var(--vz-lod)}
.vz-form label{display:grid;gap:5px;font:500 10.5px var(--vz-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--vz-szary)}
.vz-form input,.vz-form textarea{width:100%;font:400 14.5px var(--vz-sans);color:var(--vz-biel);background:var(--vz-noc2);border:1px solid var(--vz-linia2);border-radius:12px;padding:11px 12px;outline:none;transition:border-color .2s}
.vz-form textarea{resize:vertical;min-height:64px}
.vz-form input:focus,.vz-form textarea:focus{border-color:var(--vz-woda)}
.vz-form .vz-dwa{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vz-form .vz-info{font-size:11.5px;line-height:1.45;color:var(--vz-szary)}
.vz-form .vz-blad{font-size:12.5px;color:#ff9b8a}
.vz-form .vz-btn{margin-top:2px}
.vz-wyslane{align-self:stretch;border-radius:18px;border:1px solid rgba(70,211,138,.4);background:rgba(70,211,138,.07);padding:14px 16px;font-size:14px;line-height:1.5;color:#c8f2da;animation:vz-wjazd .45s var(--vz-ease)}
.vz-wyslane a{color:var(--vz-lod)}
.vz-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* pole pisania */
.vz-dol{display:flex;align-items:flex-end;gap:8px;padding:10px 12px 8px;border-top:1px solid var(--vz-linia);background:var(--vz-noc2)}
.vz-dol textarea{flex:1;min-width:0;resize:none;height:48px;max-height:130px;overflow-y:hidden;font:400 15px/1.4 var(--vz-sans);color:var(--vz-biel);background:var(--vz-noc);border:1px solid var(--vz-linia2);border-radius:14px;padding:12px 14px;outline:none;transition:border-color .2s}
.vz-dol textarea:focus{border-color:var(--vz-woda)}
.vz-dol textarea::placeholder{color:var(--vz-szary2)}
.vz-wyslij{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--vz-pom);color:#1a1205;display:grid;place-items:center;transition:background .2s,opacity .2s}
.vz-wyslij:hover{background:#ffb83f}
.vz-wyslij[disabled]{opacity:.45;pointer-events:none}
.vz-wyslij svg{width:19px;height:19px}
.vz-stopka{padding:0 14px calc(10px + env(safe-area-inset-bottom));background:var(--vz-noc2);font:500 10px var(--vz-mono);letter-spacing:.05em;color:var(--vz-szary2);text-align:center}

/* przycisk w sekcji „Masz wynik badania wody?” */
.vz-cta-ai svg{width:18px;height:18px}

/* linki pod kartą systemu */
.vz-linki{display:flex;justify-content:center;gap:16px;margin-top:10px}
.vz-linki a{font:500 11px var(--vz-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--vz-szary);text-decoration:none}
.vz-linki a:hover{color:var(--vz-lod)}

/* karty produktów z katalogu (tryb demo) */
.vz-produkty{align-self:stretch;display:grid;gap:8px;animation:vz-wjazd .45s var(--vz-ease)}
.vz-prod{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:start;padding:10px;border-radius:16px;border:1px solid var(--vz-linia2);background:var(--vz-noc)}
.vz-prod-foto{display:grid;place-items:center;width:76px;height:76px;border-radius:12px;background:linear-gradient(180deg,#fff,#e8edf2);overflow:hidden}
.vz-prod-foto img{max-width:92%;max-height:92%;object-fit:contain;mix-blend-mode:multiply}
.vz-prod-txt{min-width:0;display:grid;gap:4px}
.vz-prod-txt .vz-mono{font-size:9.5px;letter-spacing:.1em}
.vz-prod-txt b{font-size:13.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vz-prod-cechy{display:flex;flex-wrap:wrap;gap:4px}
.vz-prod-cechy span{font:500 10.5px var(--vz-mono);padding:2px 6px;border-radius:6px;background:rgba(63,184,255,.1);color:var(--vz-lod)}
.vz-prod-akcje{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-top:2px}
.vz-prod-akcje a{font:600 12.5px var(--vz-sans);color:var(--vz-woda);text-decoration:none}
.vz-prod-akcje a:hover{text-decoration:underline}
.vz-prod-akcje button{border:0;background:none;padding:0;font:500 12px var(--vz-sans);color:var(--vz-szary);text-decoration:underline;text-underline-offset:2px}
.vz-prod-akcje button:hover{color:var(--vz-biel)}

/* jasna wersja strony VODARO (html.jasny): czat w tych samych kolorach co strona */
html.jasny .vz{--vz-noc:#F3F8FC;--vz-noc2:#FFFFFF;--vz-noc3:#EAF3FB;--vz-linia:rgba(12,52,94,.10);--vz-linia2:rgba(12,52,94,.18);--vz-biel:#0B2540;--vz-szary:#566B82;--vz-szary2:#8698AC;--vz-woda:#1A8FE3;--vz-woda2:#1F6BFF;--vz-lod:#1A6FD1}
html.jasny .vz-start{background:rgba(255,255,255,.95);border-color:rgba(26,143,227,.35);box-shadow:0 12px 30px rgba(12,52,94,.18)}
html.jasny .vz-okno{box-shadow:0 30px 80px rgba(12,52,94,.25),0 0 0 1px rgba(26,143,227,.08)}
html.jasny .vz-gora{background:radial-gradient(120% 160% at 0% 0%,rgba(26,143,227,.12),transparent 58%),#fff}
html.jasny .vz-dym.bot{background:#EEF5FB;border-color:rgba(12,52,94,.06);color:#0B2540}
html.jasny .vz-dym.bot b{color:#08203D}
html.jasny .vz-dym.ty{background:linear-gradient(135deg,#1F6BFF,#1A8FE3);color:#fff}
html.jasny .vz-btn,html.jasny .vz-wyslij{background:linear-gradient(135deg,#1F6BFF,#1A8FE3);color:#fff}
html.jasny .vz-btn:hover,html.jasny .vz-wyslij:hover{background:linear-gradient(135deg,#1A5FE6,#1580CC)}
html.jasny .vz-btn.vz-jasny{background:#fff;color:#0B2540;border-color:rgba(12,52,94,.2)}
html.jasny .vz-komplet{color:#C2410C}
html.jasny .vz-ceny dd.vz-pot{color:#B45309}
html.jasny .vz-karta{background:#fff;border-color:rgba(26,143,227,.3)}
html.jasny .vz-form{border-color:rgba(26,143,227,.35);background:#F7FBFE}
html.jasny .vz-form .vz-blad{color:#C2410C}
html.jasny .vz-wyslane{color:#166534;background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.3)}
html.jasny .vz-atrapa{border-color:rgba(194,65,12,.45);color:#C2410C}
html.jasny .vz-zacheta{background:#fff;color:#0B2540;box-shadow:0 12px 30px rgba(12,52,94,.18)}
html.jasny .vz-pisze{background:#EEF5FB}
html.jasny .vz-prod{background:#fff}

/* telefon: czat na cały ekran */
@media (max-width:640px){
  .vz-start{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));height:58px;width:58px;padding:0;justify-content:center}
  .vz-start .vz-start-txt{display:none}
  .vz-start .vz-kropla{width:46px;height:46px}
  .vz-zacheta{display:none}
  .vz-okno{inset:0;right:0;bottom:0;width:100%;height:100%;height:100dvh;border-radius:0;border:0}
  .vz-gora{padding-top:calc(14px + env(safe-area-inset-top))}
  .vz-dym{font-size:15px;max-width:90%}
  .vz-form input,.vz-form textarea,.vz-dol textarea{font-size:16px}
  .vz-form .vz-dwa{grid-template-columns:1fr}
  html.vz-otwarty,html.vz-otwarty body{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  .vz-start .vz-kropla{animation:none}
  .vz-okno,.vz-okno[hidden],.vz-dym,.vz-karta,.vz-form,.vz-szybkie,.vz-zacheta{transition:none;animation:none}
}