/* Prawa kolumna stron logowania: zielony panel z animowanymi scenkami.
   Osobny plik, bo używa go zarówno układ klienta, jak i logowanie panelu obsługi
   (Filament ma własne style i nie chcemy mu wstrzykiwać całego klient.css). */

.ekran__prawa { position: sticky; top: 0; height: 100dvh; overflow: hidden; background: #111; }
.ekran__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ekran__prawa::after {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 50%;
    background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.ekran__napis { position: absolute; z-index: 1; inset: 0 0 auto 0; padding: 64px 64px; color: #f5f5f7; max-width: 38rem; }
.ekran__napis h2 { margin: 0 0 12px; font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -.028em; text-wrap: balance; }
.ekran__napis p { margin: 0; font-size: 19px; line-height: 1.42; color: rgba(245, 245, 247, .82); max-width: 34ch; }

/* === Prawa kolumna: zielony panel promo z animowanymi scenkami (logowanie/rejestracja) === */
.ekran__prawa--zielen{
    background:linear-gradient(155deg,#15ab30 0%,#0b7d23 56%,#06611a 100%);
    display:flex; align-items:center; justify-content:center; padding:56px;
}
.ekran__prawa--zielen::after{
    content:""; position:absolute; inset:0; height:100%; pointer-events:none;
    background:
        radial-gradient(1100px 520px at 84% -10%, rgba(255,255,255,.16), transparent 60%),
        radial-gradient(680px 480px at 6% 110%, rgba(0,0,0,.22), transparent 60%);
}
.promo{ position:relative; z-index:1; width:100%; max-width:452px; color:#fff; }
.promo__slajdy{ position:relative; min-height:512px; }
.promo__slajd{ position:absolute; inset:0; opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; pointer-events:none; }
.promo__slajd.is-aktywny{ opacity:1; transform:none; pointer-events:auto; }
.promo__txt{ margin-top:30px; }
.promo__eyebrow{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.9); background:rgba(255,255,255,.15); padding:6px 14px; border-radius:999px; margin-bottom:18px; }
.promo__txt h2{ margin:0 0 12px; font-size:31px; line-height:1.13; font-weight:700; letter-spacing:-.02em; color:#fff; text-wrap:balance; }
.promo__txt p{ margin:0; font-size:17px; line-height:1.5; color:rgba(255,255,255,.9); max-width:42ch; }
.promo__nawigacja{ display:flex; align-items:center; gap:16px; margin-top:26px; }
.promo__strzalka{ width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; transition:background .2s, border-color .2s; }
.promo__strzalka:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.7); }
.promo__strzalka svg{ width:20px; height:20px; }
.promo__kropki{ flex:1; display:flex; justify-content:center; gap:9px; }
.promo__kropka{ width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:width .25s ease, background .25s ease; }
.promo__kropka.is-aktywny{ width:26px; border-radius:999px; background:#fff; }

/* --- Obudowa scenki (biała karta panelu) --- */
.scena{ position:relative; height:250px; background:rgba(255,255,255,.97); border-radius:18px; box-shadow:0 30px 70px rgba(0,48,14,.34); overflow:hidden; color:#1d2b22; }
.scena__pasek{ display:flex; gap:6px; padding:12px 16px; background:#f3f6f4; border-bottom:1px solid #e8ede9; }
.scena__pasek i{ width:9px; height:9px; border-radius:50%; background:#d3dbd6; }
.scena__plotno{ position:relative; height:calc(250px - 42px); padding:20px; }
.kursor{ position:absolute; left:0; top:0; width:20px; height:20px; z-index:6; filter:drop-shadow(0 2px 3px rgba(0,0,0,.28)); pointer-events:none; }

/* --- Scenka 1: cena po zalogowaniu --- */
.s1-karta{ display:flex; align-items:center; gap:14px; }
.s1-foto{ flex:none; width:60px; height:60px; border-radius:12px; background:#eaf7ee; }
.s1-info{ flex:1; display:flex; flex-direction:column; gap:8px; }
.s1-info b{ display:block; height:9px; border-radius:5px; background:#e4e9e5; }
.s1-cena{ position:relative; margin-top:28px; height:46px; }
.s1-locked, .s1-open{ position:absolute; left:0; top:0; display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 18px; border-radius:12px; font-size:14px; font-weight:700; white-space:nowrap; }
.s1-locked{ color:#8a938c; background:#f0f2f0; border:1px solid #e6ece8; animation:s1-locked 5s ease-in-out infinite; }
.s1-locked svg{ width:16px; height:16px; }
.s1-open{ color:#0e9e27; background:#eaf7ee; border:1px solid #cde9d3; opacity:0; animation:s1-open 5s ease-in-out infinite; }
.s1-open em{ font-style:normal; }
.s1-kwota{ width:58px; height:14px; border-radius:5px; background:#0e9e27; opacity:.85; }
.s1-open svg{ width:18px; height:18px; }
.scena--cena .kursor{ animation:s1-kursor 5s ease-in-out infinite; }
@keyframes s1-kursor{ 0%{transform:translate(230px,205px);opacity:0} 12%{opacity:1} 40%{transform:translate(150px,170px);opacity:1} 46%{transform:translate(150px,170px) scale(.82)} 52%{transform:translate(150px,170px) scale(1)} 82%{transform:translate(150px,170px);opacity:1} 94%{transform:translate(230px,205px);opacity:0} 100%{opacity:0} }
@keyframes s1-locked{ 0%,42%{opacity:1;transform:translateY(0)} 50%,100%{opacity:0;transform:translateY(-6px)} }
@keyframes s1-open{ 0%,46%{opacity:0;transform:translateY(6px)} 54%,90%{opacity:1;transform:translateY(0)} 98%,100%{opacity:0} }

/* --- Scenka 2: zamów ponownie --- */
.s2-rzad{ display:flex; align-items:center; gap:13px; }
.s2-foto{ flex:none; width:46px; height:46px; border-radius:11px; background:#eaf7ee; }
.s2-info{ flex:1; display:flex; flex-direction:column; gap:7px; }
.s2-info b{ display:block; height:9px; border-radius:5px; background:#e4e9e5; }
.s2-btn{ flex:none; font-size:12.5px; font-weight:800; color:#fff; background:#0e9e27; border:0; border-radius:999px; padding:10px 15px; white-space:nowrap; box-shadow:0 6px 14px rgba(14,158,39,.3); animation:s2-btn 5s ease-in-out infinite; }
.s2-kosz{ position:absolute; left:20px; bottom:18px; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:#f3f6f4; color:#1d2b22; }
.s2-kosz svg{ width:24px; height:24px; }
.s2-badge{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center; border-radius:999px; background:#e0362f; color:#fff; font-size:12px; font-weight:800; opacity:0; transform:scale(0); animation:s2-badge 5s ease-in-out infinite; }
.s2-toast{ position:absolute; right:18px; bottom:24px; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#0e9e27; background:#eaf7ee; border:1px solid #cde9d3; border-radius:999px; padding:8px 14px; opacity:0; transform:translateY(8px); animation:s2-toast 5s ease-in-out infinite; }
.s2-toast svg{ width:16px; height:16px; }
.scena--zamow .kursor{ animation:s2-kursor 5s ease-in-out infinite; }
@keyframes s2-kursor{ 0%{transform:translate(240px,205px);opacity:0} 12%{opacity:1} 42%{transform:translate(352px,92px);opacity:1} 48%{transform:translate(352px,92px) scale(.82)} 54%{transform:translate(352px,92px) scale(1)} 86%{transform:translate(352px,92px);opacity:1} 96%{transform:translate(240px,205px);opacity:0} 100%{opacity:0} }
@keyframes s2-btn{ 0%,46%{transform:scale(1)} 51%{transform:scale(.92)} 57%,100%{transform:scale(1)} }
@keyframes s2-toast{ 0%,52%{opacity:0;transform:translateY(8px)} 62%,88%{opacity:1;transform:translateY(0)} 96%,100%{opacity:0} }
@keyframes s2-badge{ 0%,52%{opacity:0;transform:scale(0)} 60%{opacity:1;transform:scale(1.35)} 66%,94%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(0)} }

/* --- Scenka 3: panel z zakładkami --- */
.scena__plotno--panel{ padding:16px 18px; }
.s3-taby{ position:relative; display:flex; gap:22px; padding-bottom:10px; border-bottom:1px solid #eef1ee; }
.s3-tab{ font-size:13px; font-weight:700; color:#8a938c; }
.s3-podkr{ position:absolute; left:0; bottom:-1px; height:2.5px; border-radius:3px; background:#0e9e27; width:78px; animation:s3-podkr 7.8s ease-in-out infinite; }
.s3-body{ position:relative; margin-top:15px; height:120px; }
.s3-widok{ position:absolute; inset:0; display:flex; flex-direction:column; gap:12px; opacity:0; }
.s3-v1{ animation:s3-v1 7.8s ease-in-out infinite; }
.s3-v2{ animation:s3-v2 7.8s ease-in-out infinite; }
.s3-v3{ animation:s3-v3 7.8s ease-in-out infinite; }
.s3-rzad{ display:flex; align-items:center; gap:11px; }
.s3-i{ flex:none; width:30px; height:30px; border-radius:8px; background:#eaf7ee; }
.s3-i--pdf{ display:grid; place-items:center; font-size:9px; font-weight:800; color:#e0362f; background:#fdeceb; }
.s3-l{ flex:1; }
.s3-l b{ display:block; height:9px; border-radius:5px; background:#e4e9e5; }
.s3-pill{ flex:none; font-size:11px; font-weight:700; color:#0e9e27; background:#eaf7ee; border-radius:999px; padding:4px 10px; }
.s3-pill--ghost{ color:#8a938c; background:#eef1ee; }
.s3-chip{ flex:none; font-size:11px; font-weight:700; color:#0e9e27; background:#eaf7ee; border-radius:999px; padding:5px 12px; }
.s3-track{ padding:16px 6px 4px; }
.s3-track__linia{ position:relative; height:4px; border-radius:3px; background:#e6ece8; margin:0 10px 16px; }
.s3-track__fill{ position:absolute; left:0; top:0; height:100%; border-radius:3px; background:#0e9e27; width:0; animation:s3-fill 7.8s ease-in-out infinite; }
.s3-track__punkty{ display:flex; justify-content:space-between; }
.s3-krok{ display:flex; flex-direction:column; align-items:center; gap:8px; font-size:11px; font-weight:700; color:#8a938c; }
.s3-krok i{ width:14px; height:14px; border-radius:50%; background:#e6ece8; box-shadow:0 0 0 3px #fff; }
.s3-krok.is-done{ color:#0e9e27; }
.s3-krok.is-done i{ background:#0e9e27; }
.scena--panel .kursor{ animation:s3-kursor 7.8s ease-in-out infinite; }
@keyframes s3-kursor{ 0%{transform:translate(57px,58px);opacity:0} 6%{opacity:1} 28%{transform:translate(57px,58px)} 33%{transform:translate(146px,58px)} 35%{transform:translate(146px,58px) scale(.82)} 39%{transform:translate(146px,58px) scale(1)} 62%{transform:translate(146px,58px)} 67%{transform:translate(226px,58px)} 69%{transform:translate(226px,58px) scale(.82)} 73%{transform:translate(226px,58px) scale(1)} 94%{transform:translate(226px,58px);opacity:1} 100%{opacity:0} }
@keyframes s3-podkr{ 0%,30%{transform:translateX(0);width:78px} 38%,62%{transform:translateX(100px);width:52px} 70%,100%{transform:translateX(174px);width:66px} }
@keyframes s3-v1{ 0%,30%{opacity:1} 36%,100%{opacity:0} }
@keyframes s3-v2{ 0%,32%{opacity:0} 38%,62%{opacity:1} 68%,100%{opacity:0} }
@keyframes s3-v3{ 0%,64%{opacity:0} 70%,96%{opacity:1} 100%{opacity:0} }
@keyframes s3-fill{ 0%,68%{width:0} 84%{width:66%} 96%,100%{width:66%} }

@media (max-height: 780px){
    .ekran__prawa--zielen{ padding:36px; }
    .promo__slajdy{ min-height:500px; }
    .promo__txt h2{ font-size:27px; }
    .promo__txt p{ font-size:16px; }
}
@media (prefers-reduced-motion: reduce){
    .kursor,.s1-locked,.s1-open,.s2-btn,.s2-toast,.s2-badge,.s3-podkr,.s3-v1,.s3-v2,.s3-v3,.s3-track__fill{ animation:none !important; }
    .kursor{ opacity:0; }
    .s1-locked{ opacity:0; } .s1-open{ opacity:1; }
    .s2-toast{ opacity:1; transform:none; } .s2-badge{ opacity:1; transform:scale(1); }
    .s3-v1{ opacity:1; } .s3-track__fill{ width:66%; }
}

/* --- Scenka 4: odroczona płatność --- */
.s4-faktura{ display:flex; align-items:center; gap:12px; }
.s4-fv{ flex:none; width:36px; height:36px; border-radius:9px; display:grid; place-items:center; font-size:11px; font-weight:800; color:#e0362f; background:#fdeceb; }
.s4-info{ flex:1; display:flex; flex-direction:column; gap:7px; }
.s4-info b{ display:block; height:9px; border-radius:5px; background:#e4e9e5; }
.s4-statusy{ position:relative; flex:none; width:96px; height:26px; }
.s4-status{ position:absolute; right:0; top:0; font-size:11px; font-weight:800; border-radius:999px; padding:5px 11px; white-space:nowrap; }
.s4-status--czeka{ color:#b26a00; background:#fff3e0; animation:s4-czeka 5s ease-in-out infinite; }
.s4-status--odr{ color:#0e9e27; background:#eaf7ee; opacity:0; animation:s4-odr 5s ease-in-out infinite; }
.s4-opcje{ display:flex; gap:10px; margin-top:24px; }
.s4-opcja{ flex:1; text-align:center; font-size:12.5px; font-weight:700; color:#6e7d72; background:#f3f6f4; border:1.5px solid #e6ece8; border-radius:11px; padding:11px 8px; }
.s4-opcja--pozniej{ animation:s4-wybor 5s ease-in-out infinite; }
.s4-potw{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:12.5px; font-weight:700; color:#0e9e27; background:#eaf7ee; border:1px solid #cde9d3; border-radius:999px; padding:8px 14px; opacity:0; transform:translateY(6px); animation:s4-potw 5s ease-in-out infinite; }
.s4-potw svg{ width:15px; height:15px; }
.scena--odrocz .kursor{ animation:s4-kursor 5s ease-in-out infinite; }
@keyframes s4-czeka{ 0%,46%{opacity:1} 52%,100%{opacity:0} }
@keyframes s4-odr{ 0%,48%{opacity:0} 54%,100%{opacity:1} }
@keyframes s4-wybor{ 0%,46%{color:#6e7d72;background:#f3f6f4;border-color:#e6ece8} 54%,100%{color:#0e9e27;background:#eaf7ee;border-color:#0e9e27} }
@keyframes s4-potw{ 0%,52%{opacity:0;transform:translateY(6px)} 60%,94%{opacity:1;transform:translateY(0)} 100%{opacity:0} }
@keyframes s4-kursor{ 0%{transform:translate(250px,205px);opacity:0} 12%{opacity:1} 44%{transform:translate(331px,138px);opacity:1} 50%{transform:translate(331px,138px) scale(.82)} 56%{transform:translate(331px,138px) scale(1)} 86%{transform:translate(331px,138px);opacity:1} 96%{transform:translate(250px,205px);opacity:0} 100%{opacity:0} }

/* --- Scenka 5: śledzenie przesyłek --- */
.s5-header{ display:flex; align-items:center; gap:12px; }
.s5-kurier{ flex:none; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; color:#0e9e27; background:#eaf7ee; }
.s5-kurier svg{ width:22px; height:22px; }
.s5-info{ flex:1; display:flex; flex-direction:column; gap:7px; }
.s5-info b{ display:block; height:9px; border-radius:5px; background:#e4e9e5; }
.s5-tagi{ position:relative; flex:none; width:98px; height:24px; }
.s5-tag{ position:absolute; right:0; top:0; font-size:11px; font-weight:800; border-radius:999px; padding:5px 11px; white-space:nowrap; }
.s5-tag--drodze{ color:#0e9e27; background:#eaf7ee; animation:s5-tagd 5.5s ease-in-out infinite; }
.s5-tag--dor{ color:#fff; background:#0e9e27; opacity:0; animation:s5-tago 5.5s ease-in-out infinite; }
.s5-track{ margin-top:36px; padding:0 22px; }
.s5-line{ position:relative; height:5px; border-radius:3px; background:#e6ece8; }
.s5-fill{ position:absolute; left:0; top:0; height:100%; border-radius:3px; background:#0e9e27; width:0; animation:s5-fill 5.5s ease-in-out infinite; }
.s5-node{ position:absolute; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:#e6ece8; box-shadow:0 0 0 3px #fff; z-index:1; }
.s5-node--1{ left:0; animation:s5-node1 5.5s ease-in-out infinite; }
.s5-node--2{ left:50%; animation:s5-node2 5.5s ease-in-out infinite; }
.s5-node--3{ left:100%; animation:s5-node3 5.5s ease-in-out infinite; }
.s5-parcel{ position:absolute; top:50%; left:0; margin:-15px 0 0 -15px; width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:#fff; background:#0e9e27; box-shadow:0 7px 16px rgba(14,158,39,.42); z-index:2; animation:s5-parcel 5.5s ease-in-out infinite; }
.s5-parcel svg{ width:17px; height:17px; }
.s5-labels{ position:relative; height:16px; margin-top:15px; font-size:11px; font-weight:700; }
.s5-lab{ position:absolute; top:0; white-space:nowrap; color:#9aa39c; }
.s5-lab--1{ left:0; animation:s5-lab1 5.5s ease-in-out infinite; }
.s5-lab--2{ left:50%; transform:translateX(-50%); animation:s5-lab2 5.5s ease-in-out infinite; }
.s5-lab--3{ left:100%; transform:translateX(-100%); animation:s5-lab3 5.5s ease-in-out infinite; }
@keyframes s5-fill{ 0%,10%{width:0} 30%{width:50%} 46%{width:50%} 84%{width:100%} 100%{width:100%} }
@keyframes s5-parcel{ 0%,10%{left:0} 30%{left:50%} 46%{left:50%} 84%{left:100%} 100%{left:100%} }
@keyframes s5-node1{ 0%,8%{background:#e6ece8} 14%,100%{background:#0e9e27} }
@keyframes s5-node2{ 0%,42%{background:#e6ece8} 50%,100%{background:#0e9e27} }
@keyframes s5-node3{ 0%,84%{background:#e6ece8} 92%,100%{background:#0e9e27} }
@keyframes s5-lab1{ 0%,8%{color:#9aa39c} 14%,100%{color:#0e9e27} }
@keyframes s5-lab2{ 0%,42%{color:#9aa39c} 50%,100%{color:#0e9e27} }
@keyframes s5-lab3{ 0%,84%{color:#9aa39c} 92%,100%{color:#0e9e27} }
@keyframes s5-tagd{ 0%,84%{opacity:1} 90%,100%{opacity:0} }
@keyframes s5-tago{ 0%,84%{opacity:0} 90%,100%{opacity:1} }

@media (prefers-reduced-motion: reduce){
    .s4-czeka,.s4-status--czeka,.s4-status--odr,.s4-opcja--pozniej,.s4-potw,
    .s5-tag--drodze,.s5-tag--dor,.s5-fill,.s5-parcel,.s5-node,.s5-lab{ animation:none !important; }
    .s4-status--czeka{ opacity:0; } .s4-status--odr{ opacity:1; }
    .s4-opcja--pozniej{ color:#0e9e27; background:#eaf7ee; border-color:#0e9e27; }
    .s4-potw{ opacity:1; transform:none; }
    .s5-tag--drodze{ opacity:0; } .s5-tag--dor{ opacity:1; }
    .s5-fill{ width:100%; } .s5-parcel{ left:100%; } .s5-node{ background:#0e9e27; } .s5-lab{ color:#0e9e27; }
}

/* === Wejście do instancji pokazowej — ten sam układ po obu stronach logowania === */
.wejscie { width: 100%; max-width: 452px; }
.wejscie__etykieta {
    display: inline-block; margin: 0 0 16px; padding: 6px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.wejscie__tytul { margin: 0 0 12px; font-size: 31px; line-height: 1.13; font-weight: 700; letter-spacing: -.02em; }
.wejscie__opis { margin: 0 0 26px; font-size: 17px; line-height: 1.5; max-width: 42ch; }

.wejscie__karta { border-radius: 18px; padding: 22px; color: #1d2b22; background: #fff; }
.wejscie__pole { display: block; margin-bottom: 12px; }
.wejscie__pole span { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 700; color: #5c6159; }
.wejscie__pole input {
    width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #dfe5e0;
    border-radius: 11px; font: inherit; font-size: 15px; background: #fff; color: #1d2b22;
}
.wejscie__pole input:focus { outline: 2px solid #0e9e27; outline-offset: 1px; border-color: #0e9e27; }
.wejscie__blad { margin: 0 0 10px; font-size: 13.5px; color: #8d2b2b; }
.wejscie__przycisk {
    width: 100%; margin-top: 6px; padding: 13px 18px; border: 0; border-radius: 11px; cursor: pointer;
    background: #0e9e27; color: #fff; font: inherit; font-weight: 700; font-size: 15.5px;
    transition: background .15s ease;
}
.wejscie__przycisk:hover { background: #0b8a21; }
.wejscie__nota { margin: 18px 0 0; font-size: 13px; line-height: 1.5; }

/* Na zielonym panelu (prawa kolumna) */
.wejscie--zielony { color: #fff; }
.wejscie--zielony .wejscie__etykieta { color: rgba(255,255,255,.9); background: rgba(255,255,255,.15); }
.wejscie--zielony .wejscie__opis { color: rgba(255,255,255,.9); }
.wejscie--zielony .wejscie__karta { background: rgba(255,255,255,.97); box-shadow: 0 30px 70px rgba(0,48,14,.34); }
.wejscie--zielony .wejscie__nota { color: rgba(255,255,255,.82); }

/* Na białej kolumnie (lewa strona) */
.wejscie--jasny { color: #1d2b22; }
.wejscie--jasny .wejscie__etykieta { color: #0b7d23; background: #e7f6ea; }
.wejscie--jasny .wejscie__opis { color: #5c6159; }
.wejscie--jasny .wejscie__karta { border: 1px solid #e4eae5; box-shadow: 0 18px 44px rgba(20,60,30,.09); }
.wejscie--jasny .wejscie__nota { color: #7b817a; }

@media (max-width: 960px) {
    /* Na telefonie karuzela zabrałaby miejsce nad formularzem — chowamy ją.
       Drugie wejście (panel obsługi) to nie ozdoba, więc zostaje i ląduje pod formularzem. */
    .ekran__prawa:not(:has(.wejscie)) { display: none; }
    .ekran__prawa:has(.wejscie) { display: flex; position: static; height: auto; padding: 32px 16px 40px; }
}