/* =====================================================================
   ImportPanel, portal klienta: kierunek E "Podróż" (wybór Kevina 29.09.2026)
   Źródło wyglądu: assets/mockups/portal-redesign/E-podroz.html.
   Plik ładowany PO css/portal-cloud.css:
     1. tokeny E (morze, słońce, papier) i czcionki Bricolage + Manrope,
     2. przemapowanie tokenów --cl-* na E, żeby starsze moduły (profil,
        pomoc, szczegół zamówienia, reset hasła) wyglądały spójnie,
     3. powłoka (górny pasek, pasek zakładek na telefonie, arkusze),
     4. komponenty E z prefiksem e- (bez kolizji ze starymi klasami).
   ===================================================================== */

:root {
    --e-bg: #F5F2ED; --e-surface: #FFFFFF; --e-surface-2: #EFEAE3; --e-line: #E4DDD3; --e-line-2: #D6CEC2;
    --e-ink: #15191C; --e-ink-2: #434A50; --e-ink-3: #5F656B;
    --e-sea: #0F3B53; --e-sea-2: #185170; --e-sea-tint: #E4ECF0; --e-sea-ink: #0B2E41;
    --e-sun: #9A4F16; --e-sun-tint: #F6E9DC;
    --e-late: #A12A1E; --e-late-tint: #F8E2DD;
    /* wspólna skala statusów (29.09): zapłacone i zakończone zielone, do zapłaty i czeka pomarańczowe,
       zaplanowane neutralne, informacyjne i dokumentowe granat, po terminie czerwone */
    --e-ok: #2E6A4C; --e-ok-tint: #E2EEE6;
    --e-radius: 22px; --e-radius-s: 14px;
    --e-shadow: 0 1px 2px rgba(21,25,28,.05), 0 8px 28px rgba(21,25,28,.07);
    --e-shadow-l: 0 2px 4px rgba(21,25,28,.06), 0 24px 60px rgba(21,25,28,.14);
    --e-disp: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
    --e-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --e-tabbar: 0px;

    /* 2. tokeny starej palety przemapowane na E */
    --cl-bg: var(--e-bg);
    --cl-bg2: var(--e-surface);
    --cl-ink: var(--e-ink);
    --cl-ink2: var(--e-ink-2);
    --cl-ink3: var(--e-ink-3);
    --cl-ink4: #7C8186;
    --cl-line: var(--e-line);
    --cl-line2: #EDE7DE;
    --cl-green: var(--e-sea-2);
    --cl-green2: var(--e-sea-2);
    --cl-emerald: var(--e-sea);
    --cl-deep: var(--e-sea-ink);
    --cl-mint: var(--e-sea-tint);
    --cl-grad: linear-gradient(135deg, #DCE9F0 0%, #C4DAE6 100%);
    --cl-gradText: linear-gradient(90deg, var(--e-sea), var(--e-sea-2));
    --cl-r: var(--e-radius);
    --cl-r2: var(--e-radius-s);
    --cl-shadow: var(--e-shadow);
    --font-display: var(--e-disp);
    --font-body: var(--e-body);
    --primary: var(--e-sea);
}

html body { background: var(--e-bg); color: var(--e-ink); font: 500 15px/1.5 var(--e-body); font-feature-settings: "tnum" 1, "lnum" 1; }
body::before { display: none; }
::selection { background: var(--e-sea-tint); color: var(--e-ink); }
:focus-visible { outline: 3px solid var(--e-sea-2); outline-offset: 3px; }

/* stare przyciski i pigułki w barwach E */
.cl-btn-p, .portal-btn-primary { background: var(--e-sea); color: #fff; box-shadow: none; }
.cl-btn-p:hover:not(:disabled), .portal-btn-primary:hover:not(:disabled) { background: var(--e-sea-2); box-shadow: none; transform: none; }
.cl-btn-g { border-color: var(--e-line-2); }
.cl-btn:focus-visible { outline: 3px solid var(--e-sea-2); }
.cl-pill.o { color: var(--e-sea-ink); background: var(--e-sea-tint); }
.cl-pill.w { color: var(--e-sun); background: var(--e-sun-tint); }
.cl-pill.n { color: var(--e-sea-2); background: var(--e-sea-tint); }
.cl-eyebrow { letter-spacing: .01em; text-transform: none; font-size: 13px; color: var(--e-ink-3); }
.cl-eyebrow::before, .cl-eyebrow::after { display: none; }
.cl-h1 { font-weight: 700; }
.cl-h1 em, .cl-gradtext { background: none; color: var(--e-sea-2); -webkit-text-fill-color: currentColor; }
.cl-card { border-color: transparent; }
.portal-input:focus, .cl-input:focus { border-color: var(--e-sea-2) !important; box-shadow: 0 0 0 3px rgba(24,81,112,.18) !important; }
.cl-ghost { display: none; }

/* ---------------------------------------------------------------------
   3. POWŁOKA
   --------------------------------------------------------------------- */
body .portal-container.portal-main-inner { max-width: 1200px; padding: 28px 32px 96px; }
#portal-content { animation: none; }

.e-top { position: sticky; top: 0; z-index: 30; background: rgba(245,242,237,.88); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.e-top.scrolled { border-bottom-color: var(--e-line); }
body.portal-preview .e-top { top: 40px; }
.e-top-in { max-width: 1200px; margin: 0 auto; height: 68px; padding: 0 32px; display: flex; align-items: center; gap: 32px; }
.e-logo { font: 700 20px/1 var(--e-disp); letter-spacing: -.02em; text-decoration: none; color: var(--e-ink); flex: none; }
.e-logo i { font-style: normal; color: var(--e-sea-2); }
.e-nav { display: flex; gap: 4px; }
#portal-nav.e-nav a { text-decoration: none; padding: 9px 16px; border-radius: 999px; color: var(--e-ink-2); font-weight: 600; font-size: 14.5px; min-height: 0; height: auto; }
#portal-nav.e-nav a:hover { background: var(--e-surface-2); color: var(--e-ink); }
#portal-nav.e-nav a.active { background: var(--e-ink); color: #fff; }
.e-top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.e-care { display: flex; align-items: center; gap: 10px; background: none; border: 1px solid var(--e-line-2); border-radius: 999px; padding: 5px 14px 5px 5px; cursor: pointer; font: 600 13.5px var(--e-body); color: var(--e-ink); white-space: nowrap; }
.e-care:hover { background: var(--e-surface); }
.e-care .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--e-sun); }
.e-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--e-body); background: var(--e-sea); color: #fff; flex: none; font-style: normal; }
.e-av.lg { width: 52px; height: 52px; font-size: 17px; }
.e-me { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--e-ink-2); text-decoration: none; border-radius: 999px; padding: 4px 10px 4px 4px; }
.e-me:hover { background: var(--e-surface-2); }
.e-me .e-av { background: var(--e-ink); }
.e-me span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-icbtn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; cursor: pointer; color: var(--e-ink-2); position: relative; }
.e-icbtn:hover { background: var(--e-surface-2); color: var(--e-ink); }
.e-icbtn svg { width: 19px; height: 19px; }
#portal-header .portal-notif-badge { background: var(--e-sun); }
#portal-menu-toggle { display: none !important; }

.e-ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.e-tabbar { display: none; }
.portal-foot { margin-top: auto; border-top: 1px solid var(--e-line); }
.portal-foot-in { max-width: 1200px; padding: 22px 32px 28px; font-size: 13px; color: var(--e-ink-3); }

/* ---------------------------------------------------------------------
   4. KOMPONENTY
   --------------------------------------------------------------------- */
.e-page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 8px 0 22px; }
.e-page-h h1, .e h1 { font: 700 40px/1.05 var(--e-disp); letter-spacing: -.025em; margin: 0; color: var(--e-ink); }
.e-page-h h1:focus { outline: none; }
.e-eyebrow { font-size: 13px; font-weight: 700; color: var(--e-ink-3); letter-spacing: .01em; }
.e h2 { font: 600 22px/1.2 var(--e-disp); letter-spacing: -.025em; margin: 0; }
.e h3 { font: 600 17px/1.25 var(--e-disp); letter-spacing: -.015em; margin: 0; }
.e-muted { color: var(--e-ink-3); }
.e-sec { margin-top: 44px; }
.e-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.e-sec-h a { font-size: 14px; font-weight: 700; color: var(--e-sea-2); text-decoration: none; }
.e-sec-h a:hover { text-decoration: underline; }
.e-sec-h .e-cnt { font-size: 13.5px; font-weight: 700; color: var(--e-ink-3); }

.e-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--e-sea); color: #fff; font: 700 14.5px var(--e-body); text-decoration: none; cursor: pointer; transition: background .15s, transform .1s; white-space: nowrap; }
.e-btn:hover { background: var(--e-sea-2); }
.e-btn:active { transform: scale(.98); }
.e-btn.ghost { background: transparent; color: var(--e-ink); box-shadow: inset 0 0 0 1.5px var(--e-line-2); }
.e-btn.ghost:hover { background: var(--e-surface-2); }
.e-btn.light { background: #fff; color: var(--e-ink); }
.e-btn.light:hover { background: #F1EEE9; }
.e-btn.outline-w { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.e-btn.outline-w:hover { background: rgba(255,255,255,.12); }
.e-btn.sm { min-height: 38px; padding: 0 15px; font-size: 13.5px; }
.e-btn[disabled] { background: #9AA7AE; cursor: not-allowed; }
.e-btn .e-ic { width: 18px; height: 18px; }

.e-card { background: var(--e-surface); border-radius: var(--e-radius); box-shadow: var(--e-shadow); }
.e-pad { padding: 22px 24px; }
.e-glass { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: rgba(12,24,32,.46); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; font-weight: 700; color: #fff; }
.e-glass .live { width: 7px; height: 7px; border-radius: 50%; background: #F5B77A; box-shadow: 0 0 0 4px rgba(245,183,122,.25); }
.e-glass.sun { background: rgba(255,255,255,.92); color: var(--e-ink); }
.e-st { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--e-bg); color: var(--e-ink-2); white-space: nowrap; }
.e-st.due { background: var(--e-sun-tint); color: var(--e-sun); }
.e-st.ok { background: var(--e-ok-tint); color: var(--e-ok); }
.e-st.info { background: var(--e-sea-tint); color: var(--e-sea-ink); }
.e-st.late { background: var(--e-late-tint); color: var(--e-late); }
.e-bar { display: block; height: 8px; border-radius: 8px; background: var(--e-surface-2); overflow: hidden; }
.e-bar i { display: block; height: 100%; background: var(--e-sea); border-radius: 8px; }
.e-empty { padding: 40px 24px; text-align: center; color: var(--e-ink-3); }
.e-empty b { display: block; font: 600 19px var(--e-disp); color: var(--e-ink); margin-bottom: 6px; }
.e-skel { background: linear-gradient(90deg, var(--e-surface-2), #F7F4EF, var(--e-surface-2)); background-size: 200% 100%; animation: eSk 1.2s linear infinite; border-radius: var(--e-radius); }
@keyframes eSk { to { background-position: -200% 0; } }

/* karta głównej podróży */
.e-trip { background: var(--e-surface); border-radius: 28px; box-shadow: var(--e-shadow-l); overflow: hidden; }
.e-trip-img { position: relative; height: 420px; display: block; color: #fff; text-decoration: none; }
.e-trip-img img, .e-cover img, .e-duecard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.e-trip-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,28,.35) 0%, rgba(8,20,28,0) 28%, rgba(8,20,28,0) 45%, rgba(8,20,28,.78) 100%); }
.e-trip-top { position: absolute; z-index: 1; top: 22px; left: 26px; right: 26px; display: flex; justify-content: space-between; gap: 10px; }
.e-trip-cap { position: absolute; z-index: 1; left: 30px; right: 30px; bottom: 28px; }
.e-trip-cap .no { font-size: 13.5px; font-weight: 700; opacity: .9; letter-spacing: .02em; }
.e .e-trip-cap h2 { font: 700 46px/1.02 var(--e-disp); letter-spacing: -.035em; margin: 6px 0 10px; color: #fff; }
.e-trip-cap p { margin: 0; font-size: 18px; line-height: 1.4; max-width: 640px; font-weight: 600; color: rgba(255,255,255,.94); }

/* bilet podróży */
.e-pass { padding: 26px 30px 24px; }
.e-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; }
.e-route .pt .code { display: block; font: 700 44px/1 var(--e-disp); letter-spacing: -.03em; }
.e-route .pt .city { display: block; font-weight: 700; font-size: 14.5px; margin-top: 6px; }
.e-route .pt .when { display: block; font-size: 13.5px; color: var(--e-ink-3); margin-top: 2px; }
.e-route .pt.end { text-align: right; }
.e-route .track { position: relative; padding-top: 6px; min-width: 0; }
.e-route .line { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--e-line-2) 0 6px, transparent 6px 11px); margin: 0 6px; }
.e-route .line .done { position: absolute; left: 0; top: 0; bottom: 0; background: var(--e-sea); }
.e-route .line::before, .e-route .line::after { content: ""; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--e-sea); }
.e-route .line::before { left: -6px; }
.e-route .line::after { right: -6px; background: var(--e-surface); box-shadow: inset 0 0 0 2px var(--e-line-2); }
.e-route .ship { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--e-sea); display: grid; place-items: center; box-shadow: 0 0 0 6px #fff; }
.e-route .ship .e-ic { width: 18px; height: 18px; stroke: #fff; }
.e-route .remain { display: flex; justify-content: center; gap: 10px; align-items: baseline; margin-top: 22px; flex-wrap: wrap; text-align: center; }
.e-route .remain b { font: 700 22px/1 var(--e-disp); letter-spacing: -.02em; color: var(--e-sun); }
.e-route .remain span { font-size: 13.5px; color: var(--e-ink-3); }
.e-pass .perf { position: relative; height: 1px; margin: 24px -30px 22px; border-top: 1.5px dashed var(--e-line-2); }
.e-pass .perf::before, .e-pass .perf::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--e-bg); }
.e-pass .perf::before { left: -11px; } .e-pass .perf::after { right: -11px; }
.e-card .e-pass .perf::before, .e-card .e-pass .perf::after { background: var(--e-bg); }
.e-meta { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)) auto; gap: 18px 26px; align-items: end; margin: 0; }
.e-meta > div { min-width: 0; }
.e-meta dt { font-size: 12.5px; font-weight: 700; color: var(--e-ink-3); margin-bottom: 4px; }
.e-meta dd { margin: 0; font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.e-meta dd small { display: block; font-weight: 500; color: var(--e-ink-3); font-size: 13px; }
.e-meta .act { display: flex; gap: 10px; }
.e-paybar { margin-top: 20px; }
.e-paybar-t { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.5px; color: var(--e-ink-3); margin-bottom: 8px; }
.e-paybar-t b { color: var(--e-ink); }
.e-paybar.mini { padding-top: 18px; border-top: 1px solid var(--e-line); }

/* czeka na Ciebie */
.e-wait { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.e-wcard { background: var(--e-surface); border-radius: var(--e-radius); padding: 20px 20px 18px; box-shadow: var(--e-shadow); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.e-wcard .when { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--e-sun); }
.e-wcard .when .pill { background: var(--e-sun-tint); padding: 3px 9px; border-radius: 999px; }
.e-wcard .when.calm { color: var(--e-sea-2); }
.e-wcard .when.calm .pill { background: var(--e-sea-tint); }
.e .e-wcard h3 { font-size: 18px; }
.e-wcard p { margin: 0; color: var(--e-ink-2); font-size: 14px; }
.e-wcard .amt { font: 700 24px/1.1 var(--e-disp); letter-spacing: -.02em; }
.e-wcard .amt small { font: 600 13px var(--e-body); color: var(--e-ink-3); letter-spacing: 0; }
.e-wcard .foot { margin-top: auto; padding-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }

/* siatka zamówień */
.e-trips { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.e-tcard { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 12px; min-width: 0; border-radius: var(--e-radius); }
.e-tcard .ph { position: relative; aspect-ratio: 4/3; border-radius: var(--e-radius); overflow: hidden; background: var(--e-surface-2); }
.e-tcard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.e-tcard:hover .ph img { transform: scale(1.04); }
.e-tcard .ph .e-glass { position: absolute; left: 14px; top: 14px; }
.e-tcard .row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.e-tcard .row span { font-size: 13px; color: var(--e-ink-3); font-weight: 700; white-space: nowrap; }
.e-tcard p { margin: -6px 0 0; color: var(--e-ink-2); font-size: 14px; }
.e-tcard .mini { font-size: 13px; color: var(--e-ink-3); margin-top: -4px; }
.e-tcard .mini b { color: var(--e-ink); font-weight: 700; }
.e-past { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.e-prow { display: flex; gap: 16px; align-items: center; background: var(--e-surface); border-radius: var(--e-radius); padding: 12px; box-shadow: var(--e-shadow); text-decoration: none; color: inherit; min-width: 0; }
.e-prow img { width: 96px; height: 72px; border-radius: 14px; object-fit: cover; flex: none; }
.e-prow > div { min-width: 0; }
.e-prow p { margin: 2px 0 0; font-size: 13.5px; color: var(--e-ink-3); }
.e-arch { margin-top: 18px; }
.e-arch summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--e-ink-2); padding: 6px 0; }
.e-arch .e-past { margin-top: 12px; }
.e-strip { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; padding: 18px 0 0; border-top: 1px solid var(--e-line); font-size: 13.5px; color: var(--e-ink-3); }
.e-strip b { color: var(--e-ink); }
.e-strip .who { display: flex; align-items: center; gap: 12px; }
.e-strip a { color: var(--e-sea-2); font-weight: 700; }

/* okładka szczegółu */
.e-cover { position: relative; height: 360px; border-radius: 28px; overflow: hidden; color: #fff; }
.e-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,28,.42) 0%, rgba(8,20,28,0) 30%, rgba(8,20,28,0) 42%, rgba(8,20,28,.8) 100%); }
.e-cover .back { position: absolute; z-index: 2; left: 20px; top: 20px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--e-ink); text-decoration: none; }
.e-cover .back:hover { background: #fff; }
.e-cover .cap { position: absolute; z-index: 1; left: 30px; right: 30px; bottom: 26px; }
.e-cover .cap .e-eyebrow { color: rgba(255,255,255,.88); }
.e-cover .cap h1 { color: #fff; font: 700 44px/1.05 var(--e-disp); letter-spacing: -.035em; margin: 6px 0 8px; }
.e-cover .cap h1:focus { outline: none; }
.e-cover .cap p { margin: 0; font-size: 17px; font-weight: 600; max-width: 680px; color: rgba(255,255,255,.94); }
.e-cover .tr { position: absolute; z-index: 2; right: 20px; top: 22px; display: flex; gap: 8px; align-items: center; }
.e-cover .tr button { border: 0; cursor: pointer; font: inherit; }
.e-cols { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 36px; margin-top: 30px; align-items: start; }
.e-stack { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; min-width: 0; }

/* etapy zamówienia */
.e-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.e-steps li { flex: 1; min-width: 0; }
.e-steps .bar { display: block; height: 4px; border-radius: 4px; background: var(--e-line); }
.e-steps-cap { display: none; font-size: 13.5px; font-weight: 700; margin-bottom: 10px; }
.e-steps-cap span { color: var(--e-sun); }
.e-steps li.done .bar { background: var(--e-sea); }
.e-steps li.cur .bar { background: var(--e-sun); }
.e-steps .lb { display: block; font-size: 12.5px; font-weight: 700; color: var(--e-ink-3); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-steps li.cur .lb { color: var(--e-sun); }
.e-steps li.done .lb { color: var(--e-ink-2); }
.e-steps .dt { display: block; font-size: 12px; color: var(--e-ink-3); }

/* karta oferty / kosztu */
.e-offer .hd { padding: 22px 24px 18px; border-bottom: 1px solid var(--e-line); }
.e-offer .big { font: 700 34px/1.05 var(--e-disp); letter-spacing: -.03em; margin-top: 8px; }
.e-offer .big small { font: 600 14px/1 var(--e-body); color: var(--e-ink-3); letter-spacing: 0; margin-left: 4px; }
.e-lines { margin: 0; padding: 16px 24px 6px; }
.e-lines > div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 14px; }
.e-lines dt { color: var(--e-ink-2); }
.e-lines dt small { display: block; color: var(--e-ink-3); font-size: 12.5px; }
.e-lines dd { margin: 0; font-weight: 700; text-align: right; white-space: nowrap; }
.e-lines .tot { border-top: 1px solid var(--e-line); margin-top: 8px; padding-top: 14px; font-size: 16px; }
.e-lines .tot dt { color: var(--e-ink); font-weight: 800; }
.e-plan { margin: 6px 24px 0; padding: 12px 16px; background: var(--e-bg); border-radius: 14px; font-size: 13.5px; }
.e-plan > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; flex-wrap: wrap; }
.e-plan b { white-space: nowrap; }
.e-accept { padding: 18px 24px 24px; }
.e-accept .e-btn { width: 100%; }
.e-accept .e-btn + .e-btn { margin-top: 10px; }
.e-accept .note { font-size: 12.5px; color: var(--e-ink-3); text-align: center; margin: 10px 0 0; }
.e-done-box { margin: 18px 24px 24px; padding: 16px; border-radius: 16px; background: var(--e-sea-tint); color: var(--e-sea-ink); font-size: 14px; }
.e-done-box b { display: block; font-size: 15px; margin-bottom: 4px; }
.e-done-box.warn { background: var(--e-sun-tint); color: var(--e-sun); }
.e-done-box .e-btn { margin-top: 12px; }
.e-kv { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 0; }
.e-kv div { background: var(--e-bg); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.e-kv dt { font-size: 12.5px; font-weight: 700; color: var(--e-ink-3); }
.e-kv dd { margin: 2px 0 0; font: 700 19px/1.2 var(--e-disp); letter-spacing: -.02em; }

/* plan podróży */
.e-itin { list-style: none; margin: 0; padding: 0; }
.e-stop { display: grid; grid-template-columns: 92px 24px minmax(0,1fr); gap: 0 16px; position: relative; }
.e-stop .d { padding-top: 4px; text-align: right; font-weight: 800; font-size: 14px; }
.e-stop .d small { display: block; font-weight: 600; color: var(--e-ink-3); font-size: 12.5px; }
.e-stop .rail { position: relative; display: flex; justify-content: center; }
.e-stop .rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--e-line-2); }
.e-stop.done .rail::before { background: var(--e-sea); }
.e-stop:first-child .rail::before { top: 10px; }
.e-stop:last-child .rail::before { bottom: calc(100% - 12px); }
.e-stop .rail i { position: relative; margin-top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--e-surface); box-shadow: inset 0 0 0 2px var(--e-line-2); }
.e-stop.done .rail i { background: var(--e-sea); box-shadow: none; }
.e-stop.cur .rail i { width: 20px; height: 20px; margin-top: 4px; background: var(--e-sun); box-shadow: 0 0 0 6px var(--e-sun-tint); }
.e-stop .body { padding-bottom: 26px; display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.e-stop .body img { width: 112px; height: 76px; border-radius: 14px; object-fit: cover; flex: none; }
.e-stop .body > div { min-width: 0; }
.e-stop .body p { margin: 3px 0 0; font-size: 14px; color: var(--e-ink-2); }
.e-stop.fut h3 { color: var(--e-ink-2); }
.e-stop.fut .body img { filter: saturate(.35); opacity: .8; }
.e-stop.cur .body { flex-direction: column; }
.e-stop.cur .body img { width: 100%; height: 190px; }
.e-facts { margin: 0; }
.e-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--e-line); font-size: 14px; }
.e-facts > div:first-child { border-top: 0; }
.e-facts dt { color: var(--e-ink-3); }
.e-facts dd { margin: 0; font-weight: 700; text-align: right; display: flex; gap: 6px; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.e-copy { border: 0; background: none; padding: 4px; border-radius: 8px; cursor: pointer; color: var(--e-ink-3); display: inline-grid; place-items: center; vertical-align: middle; }
.e-copy:hover { background: var(--e-surface-2); color: var(--e-ink); }
.e-copy .e-ic { width: 16px; height: 16px; }

/* moduł śledzenia (makieta A / E2) */
.e-trk { padding: 24px 26px; }
.e-trk-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.e-trk-head p { margin: 4px 0 0; font-size: 13.5px; }
.e-eta { text-align: right; flex: none; }
.e-eta span { display: block; font-size: 12.5px; font-weight: 700; color: var(--e-ink-3); }
.e-eta b { display: block; font: 700 48px/1 var(--e-disp); letter-spacing: -.04em; margin: 4px 0 2px; }
.e-eta em { font-style: normal; font-weight: 800; color: var(--e-sun); font-size: 14px; }
.e-facts4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; margin: 20px 0 0; border: 1px solid var(--e-line); border-radius: 16px; overflow: hidden; }
.e-facts4 > div { padding: 12px 14px; border-left: 1px solid var(--e-line); min-width: 0; }
.e-facts4 > div:first-child { border-left: 0; }
.e-facts4 dt { font-size: 12px; font-weight: 700; color: var(--e-ink-3); }
.e-facts4 dd { margin: 3px 0 0; font-weight: 800; font-size: 14.5px; overflow-wrap: anywhere; }
.e-axis { list-style: none; margin: 24px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.e-axis li { position: relative; padding-top: 22px; min-width: 0; }
.e-axis li::before { content: ""; position: absolute; top: 7px; left: 0; right: -10px; height: 2px; background: var(--e-line-2); }
.e-axis li:last-child::before { right: 0; }
.e-axis li.done::before { background: var(--e-sea); }
.e-axis .dot { position: absolute; top: 1px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--e-surface); box-shadow: inset 0 0 0 2px var(--e-line-2); }
.e-axis li.done .dot { background: var(--e-sea); box-shadow: none; }
.e-axis li.cur .dot { background: var(--e-sun); box-shadow: 0 0 0 5px var(--e-sun-tint); }
.e-axis .nm { display: block; font-weight: 800; font-size: 13.5px; }
.e-axis li.cur .nm { color: var(--e-sun); }
.e-axis li.fut .nm { color: var(--e-ink-2); }
.e-axis .dt { display: block; font-size: 12.5px; color: var(--e-ink-3); font-weight: 700; margin-top: 2px; }
.e-axis .nt { display: block; font-size: 12.5px; color: var(--e-ink-2); margin-top: 4px; line-height: 1.4; }
.e-map-wrap { margin-top: 18px; }
.e-map { position: relative; aspect-ratio: 1005/640; background: #F1ECE4; border-radius: 18px; overflow: hidden; }
.e-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.e-map .land { fill: #D5CCBE; }
.e-map polyline.rest { fill: none; stroke: #8A9097; stroke-width: 2; stroke-dasharray: 5 6; stroke-linecap: round; stroke-linejoin: round; }
.e-map polyline.done { fill: none; stroke: var(--e-sea); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.e-map .pt { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--e-sea); box-shadow: 0 0 0 3px #fff; }
.e-map .tag { position: absolute; font-size: 12px; font-weight: 800; color: var(--e-ink); background: rgba(255,255,255,.9); padding: 3px 8px; border-radius: 8px; white-space: nowrap; line-height: 1.25; }
.e-map .tag small { display: block; font-weight: 600; color: var(--e-ink-3); font-size: 11px; }
.e-map .shipdot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--e-sun); box-shadow: 0 0 0 6px rgba(154,79,22,.22); }
.e-map .callout { position: absolute; transform: translate(14px, -120%); background: var(--e-ink); color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 10px; white-space: nowrap; }
.e-map .callout b { display: block; font-size: 12.5px; }
.e-map-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 12px; font-size: 12.5px; color: var(--e-ink-3); font-weight: 600; }
.e-map-foot .key { display: inline-flex; align-items: center; gap: 8px; }
.e-map-foot .key i { width: 22px; height: 3px; border-radius: 2px; background: var(--e-sea); display: inline-block; }
.e-map-foot .key i.dash { background: repeating-linear-gradient(90deg, #8A9097 0 5px, transparent 5px 9px); }
.e-map-foot .prog { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 220px; }
.e-map-foot .prog .e-bar { flex: 1; height: 6px; min-width: 80px; }
.e-map-note { margin: 8px 0 0; font-size: 12.5px; color: var(--e-ink-3); }

/* dokumenty */
.e-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.e-search { position: relative; flex: 1 1 280px; max-width: 420px; }
.e-search input { width: 100%; height: 46px; border-radius: 999px; border: 1.5px solid var(--e-line-2); background: var(--e-surface); padding: 0 16px 0 44px; font: 600 14.5px var(--e-body); color: var(--e-ink); }
.e-search input:focus { outline: none; border-color: var(--e-sea-2); box-shadow: 0 0 0 3px rgba(24,81,112,.18); }
.e-search .e-ic { position: absolute; left: 15px; top: 13px; color: var(--e-ink-3); }
.e-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.e-chip { border: 0; background: var(--e-surface); box-shadow: inset 0 0 0 1.5px var(--e-line); border-radius: 999px; padding: 0 14px; height: 38px; font: 700 13.5px var(--e-body); cursor: pointer; color: var(--e-ink-2); white-space: nowrap; }
.e-chip:hover { color: var(--e-ink); }
.e-chip[aria-pressed="true"] { background: var(--e-ink); color: #fff; box-shadow: none; }
.e-chip i { font-style: normal; opacity: .6; margin-left: 4px; }
.e-dgroup { margin-bottom: 30px; }
.e-dgh { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; text-decoration: none; color: inherit; }
.e-dgh img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex: none; }
.e-dgh p { margin: 0; font-size: 13px; color: var(--e-ink-3); }
.e-dlist { list-style: none; margin: 0; padding: 0; background: var(--e-surface); border-radius: var(--e-radius); box-shadow: var(--e-shadow); overflow: hidden; }
.e-doc { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--e-line); }
.e-dlist li:first-child .e-doc { border-top: 0; }
.e-doc:hover { background: #FBFAF8; }
.e-doc .fi { width: 42px; height: 42px; border-radius: 12px; background: var(--e-bg); display: grid; place-items: center; color: var(--e-ink-2); }
.e-doc .fi.money { background: var(--e-sun-tint); color: var(--e-sun); }
.e-doc .fi.ok { background: var(--e-sea-tint); color: var(--e-sea-ink); }
.e-doc .nm { display: block; font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font-family: inherit; color: inherit; }
.e-doc .nm:hover { color: var(--e-sea-2); text-decoration: underline; }
.e-doc .sub { display: block; font-size: 13px; color: var(--e-ink-3); margin-top: 1px; }
.e-doc .acts { display: flex; gap: 6px; }

/* płatności */
.e-paytop { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 22px; }
.e-duecard { position: relative; border-radius: 28px; overflow: hidden; color: #fff; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; }
.e-duecard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,24,34,.9) 0%, rgba(8,24,34,.72) 55%, rgba(8,24,34,.3) 100%); }
.e-duecard > :not(img) { position: relative; z-index: 1; }
.e-duecard .lbl { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.88); }
.e-duecard .amt { font: 700 54px/1 var(--e-disp); letter-spacing: -.04em; margin: 10px 0 8px; }
.e-duecard p { margin: 0 0 18px; color: rgba(255,255,255,.9); font-size: 15px; max-width: 480px; }
.e-duecard .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.e-stats { display: grid; grid-template-rows: 1fr 1fr; gap: 22px; }
.e-stat { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; }
.e-stat .v { font: 700 32px/1.1 var(--e-disp); letter-spacing: -.03em; margin-top: 6px; }
.e-stat p { margin: 4px 0 0; font-size: 13.5px; color: var(--e-ink-3); }
.e-sched { list-style: none; margin: 0; padding: 0; }
.e-srow { display: grid; grid-template-columns: 70px 64px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 16px 22px; border-top: 1px solid var(--e-line); }
.e-srow:first-child { border-top: 0; }
.e-srow .dd { font: 700 17px/1.1 var(--e-disp); letter-spacing: -.02em; }
.e-srow .dd small { display: block; font: 600 12px/1.35 var(--e-body); color: var(--e-ink-3); letter-spacing: 0; margin-top: 3px; }
.e-srow img { width: 64px; height: 48px; border-radius: 10px; object-fit: cover; }
.e-srow .t { font-weight: 700; font-size: 14.5px; min-width: 0; }
.e-srow .t a { color: inherit; }
.e-srow .t small { display: block; font-weight: 500; font-size: 13px; color: var(--e-ink-3); overflow-wrap: anywhere; }
.e-srow .a { text-align: right; font-weight: 800; white-space: nowrap; }
.e-srow .a small { display: block; font-weight: 600; font-size: 12.5px; color: var(--e-ink-3); }
.e-srow .a .e-st { margin-top: 4px; }
.e-srow.paid .dd, .e-srow.paid .a { color: var(--e-ink-2); }
.e-tripbars { display: grid; gap: 22px; }
.e-tb .top2 { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 8px; }
.e-tb .top2 a { color: inherit; text-decoration: none; }
.e-tb .top2 a:hover { text-decoration: underline; }
.e-tb .top2 b { font-weight: 800; }
.e-tb p { margin: 6px 0 0; font-size: 13px; color: var(--e-ink-3); }
.e-two { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 22px; align-items: start; }
.e-fine { font-size: 12.5px; color: var(--e-ink-3); margin: 12px 0 0; }

/* logowanie */
.e-login { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(420px,1fr); background: var(--e-bg); }
.e-login .img { position: relative; overflow: hidden; background: #20333F; margin: 0; }
.e-login .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.e-login .img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,28,.25), rgba(8,20,28,0) 30%, rgba(8,20,28,0) 60%, rgba(8,20,28,.7)); }
.e-login .img .e-logo { position: absolute; z-index: 1; left: 40px; top: 36px; color: #fff; }
.e-login .img .e-logo i { color: #9CC7DD; }
.e-login .img figcaption { position: absolute; z-index: 1; left: 40px; bottom: 36px; right: 40px; color: #fff; }
.e-login .img figcaption b { display: block; font: 600 28px/1.15 var(--e-disp); letter-spacing: -.025em; max-width: 520px; }
.e-login .img figcaption span { display: block; margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.86); }
.e-login .form { display: flex; align-items: center; justify-content: center; padding: 40px; }
.e-login .cla-box { width: 100%; max-width: 400px; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.e-login .cla-box .cl-h1 { font: 700 36px/1.05 var(--e-disp); letter-spacing: -.025em; margin: 6px 0 8px; }
.e-login .cla-box .cl-lead { font-size: 15px; }
.e-login .cla-box .cl-label { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 700; color: var(--e-ink); }
.e-login .cla-box .cl-input { height: 52px; border-radius: 14px; border: 1.5px solid var(--e-line-2); background: var(--e-surface); font: 600 15.5px var(--e-body); }
.e-login .cla-box .cl-btn-p { width: 100%; height: 52px; font-size: 15.5px; }
.e-login .cla-box .cla-link, .e-login .cla-box a { color: var(--e-sea-2); font-weight: 700; }
.e-login .help { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--e-line); font-size: 13.5px; color: var(--e-ink-3); }
.e-login .help b { color: var(--e-ink); }

/* arkusze, toast */
.e-dlg { margin: auto; border: 0; padding: 0; background: var(--e-surface); color: var(--e-ink); border-radius: 26px; box-shadow: var(--e-shadow-l); width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.e-dlg::backdrop { background: rgba(12,20,26,.44); backdrop-filter: blur(2px); }
.e-sh { position: relative; padding: 26px 26px 24px; font-family: var(--e-body); }
.e-sh-x { position: absolute; right: 16px; top: 16px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--e-bg); cursor: pointer; display: grid; place-items: center; color: var(--e-ink); }
.e-sh h2 { font: 600 22px/1.2 var(--e-disp); letter-spacing: -.025em; margin: 0; padding-right: 44px; }
.e-sh p { color: var(--e-ink-2); }
.e-sh .acts { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.e-sh .acts .e-btn { flex: 1; }
.e-bank { margin: 14px 0 0; }
.e-bank > div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--e-line); font-size: 14px; }
.e-bank dt { color: var(--e-ink-3); }
.e-bank dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.e-threads { list-style: none; margin: 14px 0 0; padding: 0; }
.e-threads a { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--e-line); text-decoration: none; color: inherit; font-size: 14px; }
.e-threads a:hover b { color: var(--e-sea-2); }
.e-threads .n { background: var(--e-sun); color: #fff; border-radius: 999px; font-size: 11.5px; font-weight: 800; padding: 2px 8px; }
#portal-toast-container { bottom: calc(24px + var(--e-tabbar)); }
.portal-toast { font-family: var(--e-body); border-radius: 999px; }

.e-rise > * { animation: eUp .6s cubic-bezier(.2,.7,.2,1) both; }
.e-rise > *:nth-child(2) { animation-delay: .06s; } .e-rise > *:nth-child(3) { animation-delay: .12s; } .e-rise > *:nth-child(4) { animation-delay: .18s; } .e-rise > *:nth-child(5) { animation-delay: .24s; }
@keyframes eUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .e-rise > *, .e-skel { animation: none !important; } .e-tcard .ph img { transition: none; } }

/* ---------- szczegół zamówienia: starsze sekcje w układzie E ---------- */
.qd.e { max-width: none; }
.qd .qd-sec, .e-stack .qd-sec { margin-top: 0 !important; margin-bottom: 0 !important; }
.e-stack > div:empty { display: none; }
.e-stack > #portal-quote-chat-section, .e-stack > #pq-shipments-section { min-width: 0; }
.e-cover .tr .e-glass svg { width: 15px; height: 15px; }
.e-lines dd .e-st { margin-top: 4px; }
.e-offer .e-accept .e-btn svg { width: 17px; height: 17px; }
.e-cols .cl-card.qd-card { border-radius: var(--e-radius); box-shadow: var(--e-shadow); border: 0; }
.e-actionbar { display: none; }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
    .e-cols { grid-template-columns: minmax(0,1fr) 340px; gap: 24px; }
    .e-meta { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .e-meta .act { grid-column: 1 / -1; }
    .e-trips { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .e-top-in { gap: 18px; }
    .e-care .t { display: none; }
    .e-me span { display: none; }
}
@media (max-width: 900px) {
    .e-cols { grid-template-columns: minmax(0,1fr); }
    /* szczegół zamówienia: etapy, oferta i płatności przed listą produktów */
    .qd .e-cols > .e-stack { display: contents; }
    .qd .e-cols > .e-stack > * { order: 5; min-width: 0; }
    .qd #qd-e-steps { order: 1; }
    .qd #portal-quote-offer-section { order: 2; }
    .qd #portal-quote-payment-section { order: 3; }
    .qd #pq-shipments-section { order: 4; }
    .e-axis { grid-template-columns: minmax(0,1fr); gap: 0; }
    .e-axis li { padding: 0 0 16px 28px; }
    .e-axis li::before { top: 8px; bottom: -8px; left: 6px; right: auto; width: 2px; height: auto; }
    .e-axis li:last-child::before { display: none; }
    .e-axis .dot { top: 2px; }
}

/* ---------- telefon: aplikacja ---------- */
@media (max-width: 760px) {
    :root { --e-tabbar: calc(64px + env(safe-area-inset-bottom)); }
    body .portal-container.portal-main-inner { padding: 12px 16px calc(var(--e-tabbar) + 36px); }
    .e-top-in { height: 56px; padding: 0 16px; gap: 10px; }
    .e-nav { display: none !important; }
    .e-care { display: none; }
    .e-me { padding: 0; }
    .portal-foot { display: none; }
    body.portal-authed:not(.portal-auth-full) .e-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--e-tabbar); padding-bottom: env(safe-area-inset-bottom); background: rgba(250,248,245,.94); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-top: 1px solid var(--e-line); }
    .e-tabbar a, .e-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; font: 700 11px var(--e-body); color: var(--e-ink-3); border: 0; background: none; cursor: pointer; position: relative; }
    .e-tabbar .e-ic { width: 24px; height: 24px; }
    .e-tabbar .active { color: var(--e-sea); }
    .e-tabbar .badge[hidden] { display: none; }
    .e-tabbar .badge { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 17px; height: 17px; border-radius: 9px; background: var(--e-sun); color: #fff; font-size: 10.5px; display: grid; place-items: center; padding: 0 4px; }
    body.e-detail .e-tabbar { display: none !important; }
    body.e-detail .portal-container.portal-main-inner { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    body.e-detail .e-actionbar:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--e-line); }
    .e-actionbar .t { font-size: 12.5px; color: var(--e-ink-3); font-weight: 600; min-width: 0; }
    .e-actionbar .t b { display: block; font: 700 18px/1.15 var(--e-disp); color: var(--e-ink); letter-spacing: -.02em; }
    .e-actionbar .e-btn { flex: none; }

    .e-page-h { margin: 10px 0 18px; }
    .e-page-h h1, .e h1 { font-size: 32px; }
    .e-sec { margin-top: 34px; }
    .e-trip { border-radius: 24px; }
    .e-trip-img { height: auto; aspect-ratio: 1 / 1.02; }
    .e-trip-top { top: 16px; left: 16px; right: 16px; }
    .e-trip-cap { left: 20px; right: 20px; bottom: 20px; }
    .e .e-trip-cap h2 { font-size: 32px; }
    .e-trip-cap p { font-size: 16px; }
    .e-pass { padding: 20px 18px 18px; }
    .e-route { gap: 12px; }
    .e-route .pt .code { font-size: 30px; }
    .e-route .pt .city { font-size: 12.5px; }
    .e-route .pt .when { font-size: 12px; }
    .e-route .remain { flex-direction: column; align-items: center; gap: 2px; margin-top: 18px; }
    .e-route .remain b { font-size: 18px; }
    .e-pass .perf { margin: 20px -18px 18px; }
    .e-meta { grid-template-columns: 1fr 1fr; gap: 14px; }
    .e-meta .act .e-btn { flex: 1; }
    .e-wait { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 4px 16px 12px; scrollbar-width: none; }
    .e-wait::-webkit-scrollbar { display: none; }
    .e-wcard { flex: 0 0 82%; scroll-snap-align: start; }
    .e-wait.one .e-wcard { flex-basis: 100%; }
    .e-trips { grid-template-columns: minmax(0,1fr); gap: 26px; }
    .e-past { grid-template-columns: minmax(0,1fr); }
    .e-strip { flex-direction: column; align-items: flex-start; }

    .e-cover { height: auto; aspect-ratio: 1 / 1; border-radius: 0; margin: -12px -16px 0; }
    .e-cover .cap { left: 20px; right: 20px; bottom: 22px; }
    .e-cover .cap h1 { font-size: 28px; }
    .e-cover .cap p { font-size: 15px; }
    .e-cover .back { top: 14px; left: 14px; }
    .e-cover .tr { top: 18px; right: 14px; }
    .e-cols { gap: 18px; margin-top: 18px; }
    .e-pad { padding: 18px; }
    .e-steps .lb, .e-steps .dt { display: none; }
    .e-steps-cap { display: block; }
    .e-kv { grid-template-columns: 1fr 1fr; gap: 10px; }
    .e-stop { grid-template-columns: 58px 20px minmax(0,1fr); gap: 0 10px; }
    .e-stop .d { font-size: 13px; }
    .e-stop .body { flex-direction: column; gap: 10px; }
    .e-stop .body img { width: 100%; height: 120px; }
    .e-stop.cur .body img { height: 170px; }
    .e-trk { padding: 18px; }
    .e-trk-head { flex-direction: column; gap: 10px; }
    .e-eta { text-align: left; }
    .e-eta b { font-size: 40px; }
    .e-facts4 { grid-template-columns: 1fr 1fr; }
    .e-facts4 > div:nth-child(3) { border-left: 0; }
    .e-facts4 > div:nth-child(n+3) { border-top: 1px solid var(--e-line); }
    .e-map { margin: 0 -18px; border-radius: 0; }
    .e-map .tag { font-size: 10.5px; padding: 2px 6px; }
    .e-map .tag small { font-size: 10px; }
    .e-map .callout { display: none; }
    .e-map-foot .prog { margin-left: 0; width: 100%; }
    .e-tools { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
    .e-tools > * { min-width: 0; }
    .e-search { max-width: none; flex: auto; }
    .e-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
    .e-chip { flex: none; }
    .e-doc { grid-template-columns: 40px minmax(0,1fr); gap: 12px; padding: 13px 14px; }
    .e-doc .acts { grid-column: 2; }
    .e-doc .fi { width: 40px; height: 40px; }
    .e-paytop, .e-two { grid-template-columns: minmax(0,1fr); gap: 16px; }
    .e-duecard { min-height: 0; padding: 22px; border-radius: 24px; }
    .e-duecard .amt { font-size: 40px; }
    .e-duecard .acts .e-btn { flex: 1 1 auto; padding: 0 14px; }
    .e-duecard::after { background: linear-gradient(180deg, rgba(8,24,34,.55) 0%, rgba(8,24,34,.86) 45%, rgba(8,24,34,.92) 100%); }
    .e-stats { grid-template-rows: none; grid-template-columns: 1fr 1fr; gap: 12px; }
    .e-stat { padding: 16px; }
    .e-stat .v { font-size: 20px; }
    .e-srow { grid-template-columns: 58px minmax(0,1fr) auto; gap: 12px; padding: 14px 16px; }
    .e-srow img { display: none; }
    .e-srow .dd { font-size: 15px; }

    .e-login { display: block; }
    .e-login .img { height: 42vh; min-height: 280px; }
    .e-login .img .e-logo { left: 20px; top: 20px; }
    .e-login .img figcaption { display: none; }
    .e-login .form { position: relative; margin-top: -26px; background: var(--e-bg); border-radius: 26px 26px 0 0; padding: 28px 20px 40px; display: block; }
    .e-login .cla-box .cl-h1 { font-size: 30px; }
    .e-dlg { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 26px 26px 0 0; max-height: 88vh; }
    .e-dlg[open] { animation: eSheet .3s cubic-bezier(.2,.7,.2,1); }
    .e-sh { padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); }
    .e-sh::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--e-line-2); margin: -8px auto 16px; }
}
@keyframes eSheet { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 761px) { body.portal-authed #portal-nav.e-nav { display: flex !important; } }
.e-doc .fi.img { overflow: hidden; background: var(--e-surface-2); }
.e-doc .fi.img img { width: 100%; height: 100%; object-fit: cover; }
.e-shban { display: block; width: calc(100% + 52px); max-width: none; height: 170px; object-fit: cover; margin: -26px -26px 18px; border-radius: 26px 26px 0 0; }
@media (max-width: 760px) { .e-shban { width: calc(100% + 40px); margin: -14px -20px 16px; border-radius: 0; height: 150px; } }
/* E2: pasek płatności w dwóch kolorach, trasa w module śledzenia, plakietki z ikoną */
.e-bar.two { display: flex; }
.e-bar.two i { border-radius: 0; }
.e-bar.two i:first-child { border-radius: 8px 0 0 8px; }
.e-bar i.d { background: repeating-linear-gradient(135deg, var(--e-sun) 0 5px, #B8703A 5px 10px); }
/* Wspólna skala statusów (pulpit, zamówienie, wysyłka, płatności, dokumenty):
   zapłacone/zakończone zielone (--e-ok), do zapłaty pomarańczowe (--e-sun),
   po terminie czerwone (--e-late), informacyjne granat (--e-sea), zaplanowane neutralne. */
.e-paybar .e-bar i { background: var(--e-ok); }
.e-paybar .e-bar i.d { background: repeating-linear-gradient(135deg, var(--e-sun) 0 5px, #B8703A 5px 10px); }
.e-paybar-t b.ok { color: var(--e-ok); }
.e-paybar-k { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--e-sun); }
.e-paybar-k .k { width: 10px; height: 10px; border-radius: 3px; background: repeating-linear-gradient(135deg, var(--e-sun) 0 3px, #B8703A 3px 6px); }
.e-tcard .e-paybar { margin-top: 0; }
.e-st .e-ic { width: 13px; height: 13px; stroke-width: 2.4; vertical-align: -2px; margin-right: 3px; }
.e-trk-route { margin: 22px 0 4px; padding: 20px 0 4px; border-top: 1.5px dashed var(--e-line-2); }
.e-trk .e-trk-route .ship { box-shadow: 0 0 0 6px var(--e-surface); }
@media (max-width: 760px) { .e-trk-route { margin-top: 16px; } }
.pf-avatar i, .cl-avatar i, .clh-avatar i, .clh-steps li i { color: var(--e-sea-ink) !important; box-shadow: none !important; }
.cl-prog .bar i, .cl-prog .bar2 i { background: var(--e-sea); }

/* ---------- biblioteka grafik E (29.09 wieczór): stany, baner sekcji, ikony nawigacji ---------- */
.e-ic { stroke-width: 1.5; }
#portal-nav.e-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px 9px 13px; }
#portal-nav.e-nav a .e-ic { width: 18px; height: 18px; }
.e-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; color: var(--e-ink-2); padding: 30px 20px; }
.e-state img.e-stan-img { width: 240px; max-width: 72%; aspect-ratio: 4/3; object-fit: cover; border-radius: 20px; margin: 0 auto 10px; }
.e-state h3 { font: 600 19px/1.25 var(--e-disp); color: var(--e-ink); margin: 0; }
.e-state p { margin: 0; max-width: 460px; font-size: 14.5px; }
.e-state .acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.e-state.big { padding: 48px 20px 40px; background: none; box-shadow: none; }
.e-state.big img.e-stan-img { width: 420px; border-radius: 26px; }
.e-state.big h1 { font: 700 34px/1.1 var(--e-disp); letter-spacing: -.025em; margin: 4px 0 6px; color: var(--e-ink); }
.e-state.big h1:focus { outline: none; }
.e-pban { position: relative; height: 210px; border-radius: 26px; overflow: hidden; color: #fff; margin: 0 0 22px; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 28px; }
.e-pban img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.e-pban::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,24,34,.86) 0%, rgba(8,24,34,.62) 45%, rgba(8,24,34,.08) 100%); }
.e-pban > :not(img) { position: relative; z-index: 1; }
.e-pban b { font: 700 26px/1.15 var(--e-disp); letter-spacing: -.025em; max-width: 520px; }
.e-pban span { margin-top: 6px; font-size: 14.5px; max-width: 520px; color: rgba(255,255,255,.92); }
.e-docprev { display: block; width: 120px; height: 120px; border-radius: 18px; object-fit: cover; margin: 0 0 14px; }
.e-shill { display: block; width: 220px; max-width: 70%; aspect-ratio: 4/3; object-fit: cover; border-radius: 20px; margin: 6px auto 14px; }
.e-doc .fi img, .e-srow img.dk { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }
.e-doc .fi { overflow: hidden; }
.e-srow img.dk { width: 48px; height: 48px; }
.e-srow { grid-template-columns: 70px 48px minmax(0,1fr) auto; }
.qd-chat-empty-e { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 8px; color: var(--e-ink-2); font-size: 14px; }
.qd-chat-empty-e img { width: 180px; max-width: 60%; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; margin-bottom: 8px; }
@media (max-width: 760px) {
    .e-pban { height: 170px; padding: 18px 20px; border-radius: 22px; }
    .e-pban b { font-size: 21px; }
    .e-pban span { font-size: 13.5px; }
    .e-state.big { padding: 24px 4px 30px; }
    .e-state.big img.e-stan-img { width: 100%; max-width: 360px; }
    .e-state.big h1 { font-size: 28px; }
    .e-srow { grid-template-columns: 54px minmax(0,1fr) auto; }
    .e-srow img.dk { display: none; }
}

/* ---------- starsze moduły (profil, pomoc, powiadomienia) w barwach E2, 29.09 ----------
   Etykiety bez wersalików, jasne kafle zamiast granatowej karty, przełączniki
   w kolorze morza, skala statusów jak w pulpicie i płatnościach. */
.cl-label { font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--e-ink-3); margin-bottom: 6px; }
.cl-input { border-color: var(--e-line-2); border-radius: 12px; }
.cl-input.ro, .cl-input[readonly], .cl-input:disabled { background: var(--e-bg); border-color: var(--e-line); }
.cl-stat { border: 0; border-radius: var(--e-radius); box-shadow: var(--e-shadow); }
.cl-stat small { font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--e-ink-3); margin-bottom: 8px; }
.cl-stat b { font-weight: 700; }
.cl-stat.wide, .pf-stats .cl-stat.wide { background: var(--e-surface); color: var(--e-ink); }
.cl-stat.wide small { color: var(--e-ink-3); }
.cl-stat.wide b { color: var(--e-ink); }
.cl-stat.wide p, .pf-stats .cl-stat.wide p { color: var(--e-ink-2); }
.cl-stat.wide .bar .t, .pf-bar-t { color: var(--e-ink-2) !important; }
.cl-stat.wide .bar .b, .pf-bar-b { background: var(--e-surface-2) !important; }
.cl-switch { background: var(--e-sea); box-shadow: none; }
.cl-switch.off { background: var(--e-line-2); }
.cl-switch:focus-visible, .pf-toggle-in:focus-visible + .cl-switch { outline: 3px solid var(--e-sea-2); outline-offset: 2px; }
.cl-toggle { font-size: 14.5px; font-weight: 700; }
.cl-toggle small { font-weight: 500; font-size: 13px; color: var(--e-ink-3); }
.cl-h1 em, .cl-gradtext { color: inherit; font-style: normal; }
h1.cl-h1:focus { outline: none; }
.e-wcard.late .when { color: var(--e-late); }
.e-wcard.late .when .pill { background: var(--e-late-tint); }
.e-wcard.late { box-shadow: var(--e-shadow), inset 0 3px 0 var(--e-late); }
.cl-kpi { border: 0; border-radius: var(--e-radius-s); box-shadow: var(--e-shadow); }
.cl-kpi small { font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--e-ink-3); margin-bottom: 6px; }
.cl-kpi b { font-weight: 700; }
.cl-kpi p { margin: 6px 0 0; font: 600 12.5px/1.3 var(--e-body); letter-spacing: 0; color: var(--e-ink-3); }
@media (max-width: 760px) { img[style*="--pm"] { object-position: var(--pm) !important; } }