/* Popup zapisu na powiadomienia ImportPanel (konto klienta E2a, CAP-8, 27.09.2026) i ten sam formularz osadzony w stronie.
   Skrypt: assets/wspolne/zapis-popup.js. Klasy z prefiksem .zp, bez wplywu na strone.
   Desktop: okno dialogowe na srodku. Telefon: pasek od dolu, po rozwinieciu arkusz (nie pelne okno). */
.zp, .zp *{box-sizing:border-box}
.zp{--zp-papier:#fffdf6;--zp-tusz:#141b18;--zp-tusz2:#444e48;--zp-szary:#626a64;--zp-linia:#e2ddd2;
  --zp-marka:#0d6b4e;--zp-marka2:#0f8a63;--zp-blad:#9b2c1f;--zp-dol:0px;
  font-family:var(--body,"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);
  color:var(--zp-tusz);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.zp h2{font-family:var(--head,"Bricolage Grotesque",system-ui,sans-serif);font-weight:800;font-size:22px;line-height:1.2;letter-spacing:-.01em;margin:0 0 6px;color:var(--zp-tusz)}
.zp p{margin:0}
.zp a{color:var(--zp-marka)}
.zp button{font:inherit;cursor:pointer}
.zp :focus-visible{outline:3px solid #f5b400;outline-offset:2px}

/* ---- desktop: okno na srodku ---- */
.zp-tlo{position:fixed;inset:0;background:rgba(14,22,19,.45);z-index:2147482990;opacity:0;transition:opacity .2s ease}
.zp-okno{position:fixed;left:50%;top:50%;transform:translate(-50%,-48%);z-index:2147483000;width:min(720px,calc(100vw - 32px));
  max-height:calc(100vh - 40px);overflow:auto;background:var(--zp-papier);border:1px solid var(--zp-linia);border-radius:16px;
  box-shadow:0 24px 70px rgba(10,20,16,.28);padding:0 26px 22px;opacity:0;transition:opacity .2s ease,transform .2s ease}
.zp.zp-widoczny .zp-tlo{opacity:1}
.zp.zp-widoczny .zp-okno{opacity:1;transform:translate(-50%,-50%)}
.zp-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--zp-linia);background:#fff;color:var(--zp-tusz2);font-size:20px;line-height:1}
.zp-x:hover{background:#f3efe6}
.zp-lead{color:var(--zp-tusz2);margin:0 0 14px!important;padding-right:30px}

/* ---- ilustracje (27.09.2026): naglowek i ikony tematow w stylu miniatur ze strony glownej ---- */
.zp-hero{margin:0 -26px 16px;height:150px;background:#f1e9de;border-bottom:1px solid var(--zp-linia);overflow:hidden;border-radius:16px 16px 0 0}
.zp-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.zp-okno .zp-x{background:rgba(255,255,255,.92);z-index:2}
.zp-ik{flex:0 0 auto;width:52px;height:52px;border-radius:12px;overflow:hidden;background:#f1e9de}
.zp-ik img{display:block;width:100%;height:100%;object-fit:cover}
.zp-tx{flex:1 1 auto;min-width:0}
.zp-ok-ik{display:block;width:72px;height:72px;border-radius:16px;overflow:hidden;background:#f1e9de;margin:4px 0 12px}
.zp-ok-ik img{display:block;width:100%;height:100%;object-fit:cover}

/* ---- formularz ---- */
.zp-form fieldset{border:0;margin:0 0 12px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.zp-form fieldset legend{grid-column:1/-1}
.zp-form legend{font-size:13px;font-weight:700;color:var(--zp-szary);text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px}
.zp-temat{display:flex;gap:11px;align-items:center;padding:9px 11px;border:1px solid var(--zp-linia);border-radius:12px;margin:0;background:#fff;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.zp-temat:last-child{grid-column:1/-1}
.zp-temat:hover{border-color:#c9c0ae}
.zp-temat input{margin:0;width:20px;height:20px;flex:0 0 auto;align-self:flex-start;accent-color:var(--zp-marka)}
.zp-temat strong{display:block;font-size:15px;font-weight:700;color:var(--zp-tusz)}
.zp-temat small{display:block;font-size:13px;color:var(--zp-szary);line-height:1.4}
.zp-temat:has(input:checked){border-color:var(--zp-marka);background:#f1f8f4}
.zp-pole{display:block;font-size:13px;font-weight:700;color:var(--zp-tusz2);margin:4px 0 10px}
.zp-okno .zp-pole{margin-top:6px}
.zp-pole input{display:block;width:100%;margin-top:5px;font:inherit;font-size:16px;padding:11px 12px;border:1px solid #8f8878;border-radius:10px;background:#fff;color:var(--zp-tusz)}
.zp-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.zp-zgoda{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--zp-szary);margin:2px 0 12px}
.zp-zgoda input{margin:2px 0 0;width:18px;height:18px;flex:0 0 auto;accent-color:var(--zp-marka)}
.zp-blad{color:var(--zp-blad);font-weight:600;font-size:14px;margin:0 0 10px!important}
.zp-akcje{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.zp-zapisz{min-height:46px;padding:0 24px;border-radius:999px;border:1px solid var(--zp-marka);background:var(--zp-marka);color:#fff;font-weight:700;font-size:15px}
.zp-zapisz:hover{background:var(--zp-marka2)}
.zp-zapisz[disabled]{opacity:.65;cursor:wait}
.zp-nie{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--zp-tusz2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.zp-info{font-size:12.5px;color:var(--zp-szary);margin:10px 0 0!important}
.zp-ok h2{margin-bottom:8px}
.zp-ok p{color:var(--zp-tusz2);margin:0 0 14px!important}

/* ---- telefon: pasek od dolu + arkusz ---- */
.zp-pasek{position:fixed;left:8px;right:8px;bottom:calc(8px + var(--zp-dol));z-index:2147483000;display:flex;align-items:center;gap:8px;
  background:var(--zp-papier);border:1px solid var(--zp-linia);border-radius:14px;box-shadow:0 10px 30px rgba(10,20,16,.22);
  padding:10px 10px 10px 14px;transform:translateY(140%);transition:transform .25s ease}
.zp.zp-widoczny .zp-pasek{transform:none}
.zp-pasek p{flex:1 1 auto;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--zp-tusz)}
.zp-rozwin{flex:0 0 auto;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--zp-marka);background:var(--zp-marka);color:#fff;font-weight:700;font-size:14px}
.zp-pasek .zp-x{position:static;flex:0 0 auto;width:36px;height:36px}
.zp-arkusz{position:fixed;left:0;right:0;bottom:var(--zp-dol);z-index:2147483001;max-height:min(80vh,calc(100vh - 60px - var(--zp-dol)));overflow:auto;
  background:var(--zp-papier);border-top:1px solid var(--zp-linia);border-radius:16px 16px 0 0;box-shadow:0 -12px 40px rgba(10,20,16,.25);
  padding:18px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.zp-arkusz[hidden]{display:none}
.zp-arkusz .zp-x{top:10px;right:10px}
.zp-arkusz h2{font-size:19px;padding-right:40px}
.zp-arkusz{padding-top:0}
.zp-arkusz .zp-hero{margin:0 -16px 14px;height:118px}
.zp-arkusz .zp-x{background:rgba(255,255,255,.92);z-index:2}
.zp-arkusz fieldset{grid-template-columns:1fr}
.zp-arkusz .zp-ik{width:44px;height:44px;border-radius:10px}
.zp-pasek .zp-ik{width:40px;height:40px;border-radius:10px}
@media (max-width:640px){.zp-form fieldset{grid-template-columns:1fr}}

/* ---- tryb osadzony (27.09.2026, spec-powiadomienia-tematy CAP-2): ten sam formularz w sekcji strony,
   bez tla i okna, na jasnym papierze strony. Kafle tematow: jedna kolumna w waskim pudelku, dwie w szerokim. ---- */
.zp-osadzony{position:relative;max-width:760px}
.zp-osadzony .zp-lead{padding-right:0}
.zp-osadzony .zp-form fieldset{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.zp-osadzony .zp-form legend{margin-bottom:6px}
.zp-osadzony .zp-temat{padding:8px 10px;gap:10px}
.zp-osadzony .zp-ik{width:46px;height:46px;border-radius:10px}
.zp-osadzony .zp-temat strong{font-size:14.5px;line-height:1.3}
.zp-osadzony .zp-temat small{font-size:12.5px}
.zp-osadzony .zp-pole{margin-top:10px}
.zp-osadzony .zp-zapisz{width:100%;max-width:340px}
.zp-osadzony .zp-ok{padding:6px 0}
.zp-osadzony .zp-ok:focus{outline:none}
.zp-produkt{display:block;margin-top:4px;font-size:12.5px;color:var(--zp-marka)}
.zp-produkt b{font-weight:700}
.zp-ok-produkt{font-weight:600;color:var(--zp-marka)!important}
@media (max-width:640px){.zp-osadzony .zp-zapisz{max-width:none}}

@media (prefers-reduced-motion:reduce){.zp-tlo,.zp-okno,.zp-pasek{transition:none}}
@media print{.zp{display:none!important}}