/* B: podsumowanie procesu jako karta pokładowa (biała, z perforacją i odcinkiem). */
.bilet{background:#fff;color:var(--atrament);border-radius:14px;box-shadow:0 24px 50px -28px rgba(16,32,74,.45),0 0 0 1px var(--linia);overflow:hidden}
.bilet__glowa{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:var(--kobalt);color:#fff}
.bilet__marka{font:800 18px/1 var(--nagl);font-stretch:125%}
.bilet__typ{font:500 11px/1 var(--dane);letter-spacing:.12em;text-transform:uppercase}
.bilet__pola{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding:18px 20px}
.bilet__pole--duze{grid-column:1/-1;padding-bottom:12px;border-bottom:1px solid var(--linia)}
.bilet__pole--duze dd{font:800 28px/1.05 var(--nagl);font-stretch:125%}
.bilet__pole dd{font-size:16px}
.bilet__pole--kod dd{font:600 18px/1 var(--dane);letter-spacing:.08em;color:var(--kobalt)}
.bilet__odcinek{position:relative;display:grid;gap:4px;padding:18px 20px 20px;background:var(--papier);border-top:2px dashed var(--linia)}
.bilet__odcinek::before,.bilet__odcinek::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--biel)}
.bilet__odcinek::before{left:-11px}.bilet__odcinek::after{right:-11px}
.bilet__etykieta{font:500 11px/1 var(--dane);letter-spacing:.12em;text-transform:uppercase;color:var(--szary)}
.bilet__cena{font:800 34px/1.1 var(--nagl);font-stretch:125%}
.bilet__kod-kreskowy{display:block;height:30px;margin-top:10px;background:repeating-linear-gradient(90deg,var(--atrament) 0 2px,transparent 2px 4px,var(--atrament) 4px 5px,transparent 5px 8px,var(--atrament) 8px 11px,transparent 11px 12px);opacity:.75}
.bilet--oplacony .bilet__glowa{background:var(--atrament)}
.bilet--oplacony .bilet__odcinek{animation:oderwij 1.1s cubic-bezier(.5,0,.2,1) .4s forwards;transform-origin:0 0}
@keyframes oderwij{to{transform:translate(30px,40px) rotate(6deg);opacity:0}}
.bilet .nowe{animation:podkresl .9s ease}
.kroki-pasek li{border-radius:8px}
.wariant{border-radius:10px}
.wariant__czas{font-stretch:125%}
.potwierdzenie h2{font-stretch:125%}
@media (prefers-reduced-motion:reduce){.bilet--oplacony .bilet__odcinek{animation:none}}