/* Strona kierowcy STRUMET: duże przyciski i tekst do obsługi telefonu jedną ręką, kolory marki strumet.pl. */
@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lato-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lato-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/lato-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/lato-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--navy:#091b35;--blue:#1b4e9b;--blue-dark:#00499a;--sky:#4c8ef0;--accent:#cc3366;--text:#1f2124;--muted:#69727d;--bg:#f6f6f6;--soft:#ebf1fa;--ok:#1e7a46;--ok-bg:#e5f4ea;--wait:#8b581c;--wait-bg:#fbf0dc;--bad:#b0263f;--bad-bg:#fbe6ea}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.45 Lato,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;padding-bottom:env(safe-area-inset-bottom)}
button,input{font:inherit;color:inherit}
.i{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:#fff;border-bottom:1px solid #dfe5ee}
.top img{height:34px;width:auto}
.top-title{font-weight:700;font-size:15px;color:var(--navy);letter-spacing:.01em}
.net{margin-left:auto;font-size:13px;font-weight:700;border-radius:999px}
.net.off{background:var(--wait-bg);color:var(--wait);padding:4px 10px}

main{max-width:560px;margin:0 auto;padding:14px 14px 40px}
.card{background:#fff;border:1px solid #e1e6ee;border-radius:14px;padding:18px 16px;margin:0 0 14px;box-shadow:0 1px 2px rgba(9,27,53,.04)}
h1{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:24px;line-height:1.2;color:var(--navy)}
h2{margin:0;font-size:20px;color:var(--navy)}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.lead{margin:0 0 16px;font-size:18px}
.muted{margin:0;color:var(--muted);font-size:16px}
.hint{margin:14px 0 0;color:var(--muted);font-size:15px}
.step{margin:20px 4px 10px;font-weight:700;color:var(--navy);font-size:17px}
.foot{text-align:center;margin-top:26px}

.label{display:block;font-weight:700;font-size:15px;margin:14px 0 6px;color:#3d4756}
.code{display:block;width:100%;font-size:40px;letter-spacing:.32em;text-align:center;font-variant-numeric:tabular-nums;padding:14px 8px 14px calc(8px + .32em);border:2px solid #c9d4e4;border-radius:12px;background:var(--soft);color:var(--navy);font-weight:700}
.code:focus,.text:focus{outline:3px solid var(--sky);outline-offset:1px;border-color:var(--blue)}
.text{display:block;width:100%;font-size:19px;padding:14px;border:2px solid #c9d4e4;border-radius:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 20px;border-radius:12px;border:2px solid transparent;font-weight:700;font-size:18px;cursor:pointer;text-decoration:none;user-select:none;-webkit-tap-highlight-color:transparent;flex:1 1 auto}
.btn.big{width:100%;min-height:64px;font-size:20px;margin-top:16px}
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:active{background:var(--blue-dark)}
.btn.success{background:var(--ok);color:#fff}
.btn.ghost{background:#fff;border-color:#c9d4e4;color:var(--navy)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,.link:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.actions .btn{flex:1 1 140px;padding:12px 14px;gap:8px}
.actions .btn.big{flex-basis:100%;margin-top:0}
.btn{white-space:nowrap}
/* Przy dokumencie: aparat na całą szerokość, galeria pod spodem (wąskie telefony). */
.doc .actions .btn.primary{flex-basis:100%;min-height:60px}
.doc .actions .btn.ghost{flex-basis:100%;min-height:48px;font-size:16px}
.final .btn.big{margin-top:0}
.link{background:none;border:0;padding:8px 4px;color:var(--blue);font-weight:700;font-size:16px;text-decoration:underline;display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.link.danger{color:var(--bad)}
.link .i{width:18px;height:18px}

.pill{font-size:14px;font-weight:700;background:var(--ok-bg);color:var(--ok);padding:5px 12px;border-radius:999px}
.pill.off{background:var(--wait-bg);color:var(--wait)}
.count{font-size:15px;color:var(--muted)}
.msg{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:12px 14px;border-radius:10px;font-size:16px;font-weight:700}
.msg.ok{background:var(--ok-bg);color:var(--ok)}
.msg.bad{background:var(--bad-bg);color:var(--bad)}
.msg.warn{background:var(--wait-bg);color:var(--wait)}
.msg .i{width:20px;height:20px;margin-top:1px}

/* Dowód dostawy: najważniejsza pozycja, wyróżniona ramką; po pierwszym zdjęciu ramka zielona. */
.doc.proof{border:2px solid var(--blue);box-shadow:0 2px 8px rgba(27,78,155,.12)}
.doc.proof .count{font-weight:700;color:var(--bad)}
.doc.proof.has{border-color:var(--ok)}
.doc.proof.has .count{color:var(--ok)}
.doc h2{display:flex;align-items:center;gap:8px}
.tag{margin:4px 0 0;color:var(--muted);font-size:15px}
.tips{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--soft);color:#2c3e5c;font-size:15px}
.tips .i{width:20px;height:20px;color:var(--blue)}
.warn{display:flex;gap:4px;align-items:flex-start;color:var(--wait);font-size:14px;font-weight:700}
.warn .i{width:16px;height:16px}

.thumbs{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.thumbs li{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.thumbs img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;border:1px solid #dfe5ee;background:var(--soft)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:700;padding:4px 10px;border-radius:999px}
.badge .i{width:17px;height:17px}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.wait,.badge.busy{background:var(--wait-bg);color:var(--wait)}
.badge.bad{background:var(--bad-bg);color:var(--bad)}
.err{color:var(--bad);font-size:14px}

.pad{display:block;width:100%;height:260px;border:2px dashed #9fb3cf;border-radius:12px;background:#fff;touch-action:none;margin-top:12px}

.done{text-align:center}
.done h1{justify-content:center}
.big-icon{width:84px;height:84px;border-radius:50%;margin:6px auto 14px;display:grid;place-items:center}
.big-icon .i{width:48px;height:48px;stroke-width:2.4}
.big-icon.ok{background:var(--ok-bg);color:var(--ok)}
.big-icon.wait{background:var(--wait-bg);color:var(--wait)}
.summary{list-style:none;padding:0;margin:0 0 6px;font-size:17px;color:#3d4756}

@media (max-width:380px){
  body{font-size:17px}
  .code{font-size:34px;letter-spacing:.24em}
  .thumbs{grid-template-columns:repeat(2,1fr)}
}