/* Zamowienie roweru przez www (05.10.2026). Uklad za demem rog.net.pl/rent, kolory i krok 1
   jak w aplikacji (DarkModeTheme w flutter_flow_theme.dart, ekran select_bike). */
:root{--zielony:#19DB8A;--zielony-ciemny:#0c2a1d;--tlo:#1D2429;--panel:#14181B;--ramka:#2B323B;--przygaszony:#95A1AC;--promo:#C0392B;--promo-cena:#E04A32;--blad:#ff6b6b;--ostrzezenie:#ffc861}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tlo);color:#f5f8f8;font:16px/1.5 Montserrat,Arial,Helvetica,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--zielony)}
:focus-visible{outline:2px solid var(--zielony);outline-offset:3px}
header{min-height:84px;border-bottom:1px solid var(--ramka);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 5vw;flex-wrap:wrap}
.logo{font-size:30px;font-weight:900;letter-spacing:-1.5px;color:#fff;text-decoration:none;white-space:nowrap}
.logo span{color:var(--zielony);font-weight:400;font-size:17px;letter-spacing:0}
.logo i{font-size:12px;vertical-align:top}
.naglowek-prawy{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.naglowek-prawy select{background:var(--panel);border:1px solid var(--ramka);border-radius:8px;padding:7px 10px}
.znacznik-test{border:1px solid var(--ostrzezenie);color:var(--ostrzezenie);padding:4px 10px;border-radius:20px;font-size:12px;letter-spacing:1px;font-weight:bold}
main{max-width:1240px;margin:auto;padding:30px 24px 60px}
nav#kroki{display:flex;margin-bottom:36px;border-bottom:1px solid var(--ramka);padding-bottom:20px;overflow-x:auto;gap:4px}
nav#kroki button{flex:1;min-width:110px;text-align:left;background:none;color:var(--przygaszony);border:0;font-size:14px;display:flex;align-items:center;gap:9px;padding:4px}
nav#kroki button span{border:1px solid var(--ramka);border-radius:50%;width:28px;height:28px;flex:none;display:grid;place-items:center}
nav#kroki button.aktywny{color:#fff}
nav#kroki button.aktywny span,nav#kroki button.zrobiony span{background:var(--zielony);color:var(--zielony-ciemny);border-color:var(--zielony)}
nav#kroki button:disabled{cursor:default}
.nad{color:var(--zielony);letter-spacing:2px;font-weight:bold;font-size:12px;text-transform:uppercase}
h1{font-size:clamp(28px,5vw,46px);line-height:1.1;margin:8px 0 10px;text-wrap:balance}
h2{font-size:22px;margin:0 0 6px}
h3{font-size:17px;margin:0 0 10px}
.wstep{color:var(--przygaszony);font-size:18px;margin:0 0 28px;max-width:62ch}
.uklad{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}
@media(max-width:900px){.uklad{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--ramka);border-radius:14px;padding:22px}
.podsumowanie{position:sticky;top:20px}
.podsumowanie img{width:100%;max-height:200px;object-fit:contain;margin:12px 0}
.wiersz{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-variant-numeric:tabular-nums}
.wiersz span{color:var(--przygaszony)}
.wiersz.razem{font-size:19px}
.wiersz.razem span{color:#fff}
.linia{border-top:1px solid var(--ramka);margin:12px 0}
.male{font-size:13px;color:var(--przygaszony)}
.tytul-ekranu{font-size:clamp(24px,4vw,34px);font-weight:500}
.karuzela{position:relative}
.rowery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 0 8px}
.rowery::-webkit-scrollbar{display:none}
.rower{flex:0 0 min(90%,420px);scroll-snap-align:start;display:flex;flex-direction:column;gap:9px;background:none;border:0;padding:0}
.rower h2{text-align:center;font-size:25px;font-weight:300;margin:5px 0 0}
.zdjecie{position:relative;height:200px;background:var(--tlo);display:grid;place-items:center;overflow:hidden}
.zdjecie img{width:100%;height:100%;object-fit:cover}
.plakietka{position:absolute;top:12px;left:12px;background:var(--promo);color:#fff;border-radius:10px;padding:8px 16px;font-weight:700;font-size:28px;line-height:1.1;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.pola-ceny{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.pole-ceny{height:100px;border:1px solid var(--zielony);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:14px;padding:6px;font-variant-numeric:tabular-nums}
.pole-ceny strong{font-size:16px;font-weight:500}
.pole-ceny s{font-size:13px;color:var(--przygaszony)}
.pole-ceny strong.promo{color:var(--promo-cena)}
button.wybierz{align-self:center;width:200px;height:60px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--zielony);color:#fff;border:0;border-radius:8px;font-size:18px;font-weight:500;box-shadow:0 3px 6px rgba(0,0,0,.35)}
button.wybierz svg{width:25px;height:25px;fill:currentColor}
.szczegoly{height:42px;display:grid;place-items:center;background:var(--tlo);font-size:22px;font-weight:600}
.cechy{padding:0 25px 10px}
.cecha{display:grid;grid-template-columns:24px auto 1fr;align-items:center;gap:10px;padding:5px 0}
.cecha svg{width:24px;height:24px;fill:#fff}
.cecha strong{color:var(--zielony)}
.cecha span{text-align:right;white-space:nowrap}
.strzalka{position:absolute;top:150px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:rgba(29,36,41,.85);color:#fff;font-size:30px;line-height:1;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.strzalka.lewa{left:0}.strzalka.prawa{right:0}
.znacznik{display:inline-block;background:var(--zielony);color:var(--zielony-ciemny);border-radius:20px;padding:2px 10px;font-size:12px;font-weight:bold}
.blok{margin:24px 0}
.wybory{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.wybor{background:var(--panel);border:1px solid var(--ramka);border-radius:12px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:2px}
.wybor small{color:var(--przygaszony)}
.wybor.wybrany{border-color:var(--zielony);box-shadow:inset 0 0 0 1px var(--zielony)}
.ilosc{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--ramka);padding:16px 0}
.ilosc .opis{flex:1;min-width:0}
/* Baterie i ladowarki to czarne produkty na przezroczystym tle — na ciemnej stronie
   zniknelyby, wiec stoja na jasnej plytce (zaokraglenie 8 px jak w aplikacji). */
.miniatura{display:block;object-fit:contain;border-radius:8px;padding:6px;background:radial-gradient(circle at 50% 40%,#fff 0,#e4e9eb 100%)}
.miniatura.kafel{width:100%;height:84px;margin-bottom:8px}
.miniatura.wiersz{width:min(34%,140px);height:76px;flex:none}
@media(max-width:420px){.miniatura.wiersz{width:96px;height:64px}}
.licznik{display:flex;align-items:center;gap:14px}
.licznik button{width:38px;height:38px;border-radius:50%;border:1px solid var(--ramka);background:var(--panel);font-size:20px}
.licznik button:disabled{opacity:.35;cursor:default}
.licznik strong{min-width:20px;text-align:center;font-size:18px}
button.glowny{width:100%;margin-top:18px;background:var(--zielony);color:var(--zielony-ciemny);border:0;border-radius:10px;padding:14px 18px;font-weight:bold;font-size:16px}
button.glowny:disabled{opacity:.5;cursor:progress}
button.drugi{background:none;border:1px solid var(--ramka);border-radius:10px;padding:12px 16px;width:100%;margin-top:10px}
button.wstecz{background:none;border:0;color:var(--przygaszony);padding:0;margin-bottom:18px}
.uwaga{border-left:3px solid var(--zielony);background:rgba(11,211,139,.07);padding:12px 14px;border-radius:6px;margin:18px 0;font-size:14px}
.uwaga.blad{border-color:var(--blad);background:rgba(255,107,107,.08)}
.uwaga.ostrzezenie{border-color:var(--ostrzezenie);background:rgba(255,200,97,.08)}
.pola{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.pola{grid-template-columns:1fr}}
.pola .cale{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--przygaszony)}
input,select,textarea{background:var(--tlo);border:1px solid var(--ramka);border-radius:8px;padding:11px 12px;color:#fff;width:100%}
input:focus,select:focus{border-color:var(--zielony)}
.telefon{display:flex;gap:8px}
.telefon select{width:110px;flex:none}
label.zgoda{flex-direction:row;align-items:flex-start;gap:10px;color:#f5f8f8;font-size:14px}
label.zgoda input{width:auto;margin-top:3px}
.zakladki{display:flex;gap:8px;margin-bottom:16px}
.zakladki button{flex:1;background:none;border:1px solid var(--ramka);border-radius:10px;padding:10px}
.zakladki button.wybrany{border-color:var(--zielony);color:var(--zielony)}
/* Przycisk „Kontynuuj przez Google" wg wytycznych Google Identity — wariant DARK
   (tlo #131314, ramka #8E918F, tekst #E3E3E3, Roboto Medium 14 px, 40 px, pigulka). */
.google{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:40px;padding:0 12px;
  background:#131314;color:#E3E3E3;border:1px solid #8E918F;border-radius:20px;font:500 14px/20px Roboto,Arial,sans-serif;letter-spacing:.25px;
  overflow:hidden;transition:background-color .218s,box-shadow .218s}
.google svg{width:20px;height:20px;flex:none}
.google::after{content:"";position:absolute;inset:0;background:#E3E3E3;opacity:0;transition:opacity .218s}
.google:hover{box-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15)}
.google:hover::after{opacity:.08}
.google:active::after,.google:focus-visible::after{opacity:.12}
.google:disabled{background:rgba(19,19,20,.38);border-color:rgba(142,145,143,.38);color:rgba(227,227,227,.38)}
.lub{display:flex;align-items:center;gap:12px;color:var(--przygaszony);font-size:13px;margin:16px 0}
.lub::before,.lub::after{content:"";flex:1;border-top:1px solid var(--ramka)}
#karta{background:#fff;border-radius:10px;padding:14px;min-height:56px}
.podpis{display:grid;gap:8px;margin:14px 0}
.podpis canvas{background:#fff;border-radius:10px;touch-action:none;width:100%;height:200px;display:block}
.status{min-height:22px;font-size:14px;margin-top:10px;color:var(--przygaszony)}
.status.blad{color:var(--blad)}
.potwierdzenie{max-width:760px;margin:auto;text-align:center}
.znaczek{width:70px;height:70px;border-radius:50%;background:var(--zielony);color:var(--zielony-ciemny);display:grid;place-items:center;font-size:36px;margin:0 auto 14px}
.potwierdzenie .panel{text-align:left;margin:22px 0}
.sklepy{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:10px}
.sklep{background:var(--panel);border:1px solid var(--ramka);border-radius:14px;padding:18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.sklep .qr{background:#fff;border-radius:10px;padding:10px;width:170px;height:170px}
.sklep .qr svg{width:100%;height:100%}
.sklep a{font-weight:bold}
footer{border-top:1px solid var(--ramka);padding:22px 5vw;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--przygaszony);font-size:13px}
.ladowanie{color:var(--przygaszony);padding:40px 0;text-align:center}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}