/* =====================================================================
   ImportPanel, portal klienta E: widok zamówienia 09 + 10 (29.09.2026)
   Kevin 29.09: "wariant 10 i 9 najlepsze są, jakoś bym je połączył".
   Lewa kolumna: długa strona z numerowanymi sekcjami (09) i poziomym
   spisem przyklejonym nad nią. Prawa kolumna przyklejona (10): bilet,
   pieniądze, następny krok, opiekun. Telefon: zwarty pasek biletu
   i chipy spisu przewijane w poziomie.
   Wzorce: assets/mockups/portal-redesign/warianty/09-dluga-strona.html,
   10-dwie-kolumny.html, e-baza-zamowienie.css.
   ===================================================================== */

.e-ord .e-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--e-ink-3); margin: 0 0 16px; min-width: 0; }
.e-ord .e-crumbs a { text-decoration: none; color: var(--e-sea-2); flex: none; }
.e-ord .e-crumbs a:hover { text-decoration: underline; }
.e-ord .e-crumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.e-ord-l { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: start; }
.e-ord-main { min-width: 0; }

/* spis sekcji: poziomy, przyklejony nad lewą kolumną */
.e-toc { position: sticky; top: 76px; z-index: 20; margin: 0 0 16px; background: rgba(245,242,237,.92); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-radius: 999px; padding: 5px; box-shadow: inset 0 0 0 1px var(--e-line); overflow-x: auto; scrollbar-width: none; }
.e-toc::-webkit-scrollbar { display: none; }
body.portal-preview .e-toc { top: 116px; }
.e-toc ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.e-toc li[hidden] { display: none; }
.e-toc a { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; padding: 7px 12px; border-radius: 999px; text-decoration: none; color: var(--e-ink-2); font-weight: 800; font-size: 13.5px; transition: background .15s, color .15s; }
.e-toc .no { font: 700 13px/1 var(--e-disp); color: var(--e-ink-3); }
.e-toc a:hover { background: var(--e-surface-2); color: var(--e-ink); }
.e-toc a[aria-current="true"] { background: var(--e-surface); box-shadow: var(--e-shadow); color: var(--e-ink); }
.e-toc a[aria-current="true"] .no { color: var(--e-sun); }

/* okładka: jedna scena, wysokość jak w 09 i 10 */
.e .e-ord-cover { height: 260px; margin: 0; }
.e-ord-cover::after { background: linear-gradient(180deg, rgba(8,20,28,.25) 0%, rgba(8,20,28,0) 35%, rgba(8,20,28,.82) 100%); }
.e-ord-cover .cap { left: 28px; right: 28px; bottom: 24px; }
.e .e-ord-cover .cap h1 { font-size: 42px; margin: 6px 0 6px; }
.e-ord-cover .cap p { font-size: 16px; max-width: 620px; }

/* numerowane sekcje (09) */
.e-s9 { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 0 18px; padding-top: 48px; scroll-margin-top: 140px; }
.e-s9[hidden] { display: none; }
.e-s9 .num { font: 700 46px/1 var(--e-disp); color: var(--e-line-2); letter-spacing: -.05em; }
.e-s9 .bd { min-width: 0; }
.e .e-s9 h2 { font-size: 28px; letter-spacing: -.03em; }
.e .e-s9 h2:focus { outline: none; }
.e-s9 .lead { margin: 6px 0 18px; color: var(--e-ink-2); max-width: 640px; }
.e-s9-body { display: grid; gap: 18px; min-width: 0; }
.e-s9-body > div:empty { display: none; }
.e-s9 .cl-card.qd-card { border-radius: var(--e-radius); box-shadow: var(--e-shadow); border: 0; margin: 0 !important; }
.e-s9 .qd-sec { margin-top: 0 !important; margin-bottom: 0 !important; }
.e-s9 .e-m-none h3 { margin: 0; }
.e-s9 .e-doc .acts .e-btn { min-height: 36px; }
.e-s9 .e-doc .nm { cursor: default; }
.e-s9 .e-doc .nm:hover { color: inherit; text-decoration: none; }
.e-ord-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.e-ord-photos a { display: grid; gap: 6px; background: var(--e-surface); border-radius: 16px; padding: 14px; text-decoration: none; color: inherit; box-shadow: var(--e-shadow); min-width: 0; }
.e-ord-photos a > span { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #F1EDE7; color: var(--e-ink-2); }
.e-ord-photos b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-ord-photos small { color: var(--e-ink-3); font-size: 12.5px; }

/* prawa kolumna (10): bilet, pieniądze, następny krok, opiekun */
.e-rail { position: sticky; top: 88px; display: grid; gap: 16px; max-height: calc(100vh - 100px); overflow: auto; scrollbar-width: none; padding: 2px 2px 14px; margin: -2px; min-width: 0; }
.e-rail::-webkit-scrollbar { display: none; }
body.portal-preview .e-rail { top: 128px; max-height: calc(100vh - 140px); }
.e-rail .tk-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 22px 0; }
.e-rail .tk-h .e-eyebrow { font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-rail .e-pass { padding: 16px 22px 20px; }
.e-rail .e-route { gap: 14px; }
.e-rail .e-route .pt .code { font-size: 34px; }
.e-rail .e-route .remain { margin-top: 16px; flex-direction: column; align-items: center; gap: 2px; }
.e-rail .e-route .remain b { font-size: 18px; white-space: nowrap; }
.e-rail .e-pass .perf { margin: 18px -22px 16px; }
.e-rail .e-meta { grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.e-rail .e-meta dd { font-size: 14px; }
.e-rail .tk-f { padding: 0 22px 20px; margin-top: -4px; }
.e-rail .tk-f .e-btn { width: 100%; }
.e-rail-mon { padding: 18px 22px 20px; }
.e-rail-mon[hidden] { display: none; }
.e-rail-mon .top10 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.e-rail-mon .pc { font-weight: 800; font-size: 13.5px; color: var(--e-ink-3); }
.e-rail-mon .v { font: 700 26px/1.1 var(--e-disp); letter-spacing: -.025em; }
.e-rail-mon .v small { font: 600 13.5px var(--e-body); color: var(--e-ink-3); letter-spacing: 0; }
.e-rail-mon .e-pbar { margin-top: 10px; }
.e-rail-mon .nx { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; background: var(--e-bg); border-radius: 14px; font-size: 13.5px; }
.e-rail-mon .nx b { display: block; font-size: 15px; }
.e-rail-mon .wide { width: 100%; margin-top: 10px; }
.e-next { background: var(--e-sun-tint); border-radius: var(--e-radius); padding: 18px 20px; }
.e-next.calm { background: var(--e-sea-tint); }
.e-next .when { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; color: var(--e-sun); }
.e-next.calm .when { color: var(--e-sea-2); }
.e .e-next h3 { font-size: 16px; margin: 10px 0 6px; }
.e-next p { margin: 0 0 12px; font-size: 13.5px; color: var(--e-ink-2); }
.e-next.calm p { margin-bottom: 0; }
.e-next .row { display: flex; gap: 8px; flex-wrap: wrap; }
.e-next .e-btn.ghost { box-shadow: inset 0 0 0 1.5px rgba(154,79,22,.35); }
.e-rail-care { padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
.e-rail-care .who { flex: 1; min-width: 0; font-size: 13px; color: var(--e-ink-3); }
.e-rail-care .who b { display: block; font-size: 14.5px; color: var(--e-ink); }
.e-rail-care .who a { color: var(--e-sea-2); font-weight: 700; overflow-wrap: anywhere; }
.e-rail-care .e-btn .e-ic { width: 16px; height: 16px; }
.e-rail-next-m { display: none; }
.e-ordbar { display: none; }

@media (max-width: 1080px) {
    .e-ord-l { grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; }
    .e-s9 { grid-template-columns: 54px minmax(0, 1fr); gap: 0 12px; }
    .e-s9 .num { font-size: 36px; }
}
@media (max-width: 760px) {
    .e-ord .e-crumbs { display: none; }
    .e-ord-l { grid-template-columns: minmax(0, 1fr); }
    .e-rail { display: none; }
    .e-rail-next-m { display: block; margin-top: 14px; }
    .e-ordbar:not([hidden]) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--e-surface); border-radius: 18px; box-shadow: var(--e-shadow); padding: 12px 14px; margin: 0 0 10px; }
    .e-ordbar .c { font: 700 22px/1 var(--e-disp); letter-spacing: -.03em; }
    .e-ordbar .mid { min-width: 0; display: grid; gap: 6px; }
    .e-ordbar .ln { position: relative; height: 3px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--e-line-2) 0 5px, transparent 5px 9px); overflow: hidden; }
    .e-ordbar .ln i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--e-sea); }
    .e-ordbar .tx { font-size: 12.5px; color: var(--e-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
    .e-ordbar .tx b { color: var(--e-sun); }
    .e-toc { top: 56px; border-radius: 0; margin: 0 -16px 12px; padding: 8px 16px; box-shadow: none; border-bottom: 1px solid var(--e-line); }
    body.portal-preview .e-toc { top: 96px; }
    .e-toc ol { gap: 6px; }
    .e-toc a { padding: 7px 12px; background: var(--e-surface-2); }
    .e .e-ord-cover { height: auto; aspect-ratio: 4 / 3; border-radius: 22px; margin: 0; }
    .e-ord-cover .cap { left: 18px; right: 18px; bottom: 18px; }
    .e .e-ord-cover .cap h1 { font-size: 28px; }
    .e-ord-cover .cap p { font-size: 14.5px; }
    .e-s9 { grid-template-columns: minmax(0, 1fr); padding-top: 34px; scroll-margin-top: 120px; }
    .e-s9 .num { font-size: 24px; margin-bottom: 4px; color: var(--e-sun); }
    .e .e-s9 h2 { font-size: 24px; }
    .e-s9 .e-doc { grid-template-columns: 42px minmax(0, 1fr); }
    .e-s9 .e-doc .acts { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .e-toc a { transition: none; }
}
.e-s9 .qd-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
@media (max-width: 760px) { .e-s9 .qd-kpis { grid-template-columns: 1fr 1fr; } }
.e-next.late { background: var(--e-late-tint); }
.e-next.late .when { color: var(--e-late); }
.e-next .e-vat { margin: -4px 0 6px; }
/* 390: kalkulator (#qd-calc) i inne karty w sekcji nie mogą rozpychać strony w poziomie */
.e-s9-body { grid-template-columns: minmax(0, 1fr); }
.e-s9-body > * { min-width: 0; max-width: 100%; }
/* spis sekcji przyklejony pod nagłówkiem: pełne tło do nagłówka (bez szczeliny z treścią),
   kotwice sekcji z odstępem na nagłówek i spis */
.e-toc { box-shadow: inset 0 0 0 1px var(--e-line), 0 -12px 0 6px var(--e-bg); }
.e-s9, [id^="sek-"] { scroll-margin-top: 140px; }
body.portal-preview .e-s9, body.portal-preview [id^="sek-"] { scroll-margin-top: 180px; }
.e-rail { scrollbar-width: thin; }

/* Okładka zamówienia, czytelność (Kevin 30.09: „to też w ogóle nieczytelne”).
   Komputer: tekst leży na ciemnym gradiencie od lewej, gdzie nowe sceny pano są spokojne.
   Telefon: obraz to pas u góry, tytuł i opis stoją pod nim na tle karty (bez tekstu na detalach).
   Przyciski na obrazie: ciemne półprzezroczyste kółka z rozmyciem. */
.e-ord-cover::after { background: linear-gradient(90deg, rgba(8,20,28,.8) 0%, rgba(8,20,28,.55) 45%, rgba(8,20,28,0) 72%), linear-gradient(180deg, rgba(8,20,28,.3) 0%, rgba(8,20,28,0) 30%, rgba(8,20,28,.55) 100%); }
.e-ord-cover .cap { right: 42%; }
.e-ord-cover .cap h1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.e-ord-cover .back, .e-ord-cover .tr .e-glass { background: rgba(10,20,28,.62); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.e-ord-cover .back:hover { background: rgba(10,20,28,.78); }
@media (max-width: 760px) {
    .e .e-ord-cover { aspect-ratio: auto; display: flex; flex-direction: column; background: var(--e-surface); color: var(--e-ink); box-shadow: var(--e-shadow); }
    .e-ord-cover img { position: relative; inset: auto; height: auto; aspect-ratio: 2 / 1; flex: none; }
    .e-ord-cover::after { inset: 0 0 auto 0; aspect-ratio: 2 / 1; height: auto; background: linear-gradient(180deg, rgba(8,20,28,.4) 0%, rgba(8,20,28,0) 45%); }
    .e-ord-cover .cap { position: static; padding: 14px 18px 18px; }
    .e-ord-cover .cap .e-eyebrow { color: var(--e-ink-3); }
    .e .e-ord-cover .cap h1 { color: var(--e-ink); font-size: 24px; line-height: 1.12; }
    .e-ord-cover .cap p { color: var(--e-ink-2); }
}

/* Kafle liczb zamówienia (30.09, Kevin: „te kwoty jakoś dziwnie wyglądają”).
   Reguła liczb w całym portalu: kwoty zawsze z groszami (5 433,89 USD, 628 799,12 zł), stawki na sztukę też
   (99,81 zł/szt.), ilości w pełnych sztukach, objętość z dwoma miejscami (160,85 m³); spacje twarde między
   tysiącami i przed jednostką; waluta i jednostka tym samym małym szarym stylem. */
.e-s9 .qd-kpis { grid-template-columns: 1fr 1fr; gap: 14px; }
.e-s9 .qd-kpis .cl-kpi { display: flex; flex-direction: column; gap: 0; padding: 18px 20px; border-radius: 20px; background: var(--e-surface); border: 1px solid var(--e-line); box-shadow: none; min-width: 0; position: relative; text-align: left; }
.e-s9 .qd-kpis .cl-kpi small { display: flex; align-items: center; gap: 6px; font: 700 13px/1.3 var(--e-body); letter-spacing: 0; text-transform: none; color: var(--e-ink-3); margin: 0 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-s9 .qd-kpis .cl-kpi b { font: 700 26px/1.1 var(--e-disp); letter-spacing: -.02em; color: var(--e-ink); white-space: nowrap; }
.e-s9 .qd-kpis .cl-kpi b i { font: 700 13px var(--e-body); color: var(--e-ink-3); margin-left: .3em; letter-spacing: 0; font-style: normal; }
.e-s9 .qd-kpis .cl-kpi p { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--e-ink-3); }
.e-s9 .qd-kpi-btn { cursor: pointer; font: inherit; width: 100%; }
.e-s9 .qd-kpi-btn:hover, .e-s9 .qd-kpi-btn[aria-expanded="true"] { border-color: var(--e-sea-2); }
.e-s9 .qd-kpi-btn b { color: var(--e-ink); }
.qd-kpi-i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; font: italic 700 10px/1 Georgia, serif; flex: none; }
.qd-kpi-tip { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px); z-index: 5; padding: 10px 12px; border-radius: 12px; background: var(--e-ink); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.4; opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none; }
.qd-kpi-btn:hover .qd-kpi-tip, .qd-kpi-btn:focus-visible .qd-kpi-tip { opacity: 1; visibility: visible; }
@media (max-width: 1080px) { .e-s9 .qd-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
    .e-s9 .qd-kpis { gap: 10px; }
    .e-s9 .qd-kpis .cl-kpi { padding: 14px 16px; }
    .e-s9 .qd-kpis .cl-kpi b { font-size: 20px; }
    .qd-kpi-tip { display: none; }
}

/* P23 (30.09): okładka rośnie z treścią, nadtytuł 24 px pod przyciskiem Wstecz, tytuł 8 px pod nadtytułem */
@media (min-width: 761px) {
    .e .e-ord-cover { height: auto; min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end; }
    .e-ord-cover .cap { position: relative; left: auto; right: auto; bottom: auto; z-index: 1; padding: 88px 42% 24px 28px; }
    .e .e-ord-cover .cap h1 { margin: 8px 0 6px; }
}
.e-ord-cover .tr .e-glass { height: var(--e-btn-m); display: inline-flex; align-items: center; }
/* P24: telefon: spis sekcji nie zasłania dołu paska biletu, prawa krawędź spisu z gradientem (sygnał przewijania) */
@media (max-width: 760px) {
    .e-toc { box-shadow: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
    .e-ordbar:not([hidden]) { border-radius: 16px; margin-bottom: 12px; }
}
/* P51: telefon: pasek biletu ma miejsce od pierwszej klatki (pusta karta 52 px do czasu danych), bez skoku treści */
@media (max-width: 760px) {
    .e-ordbar, .e-ordbar[hidden] { display: grid; height: 52px; box-sizing: border-box; margin: 0 0 12px; border-radius: 16px; background: var(--e-surface); box-shadow: var(--e-shadow); }
    .e-ordbar[hidden] > * { visibility: hidden; }
}
/* P51: karta opiekuna w prawej kolumnie pokazuje się dopiero, gdy nad nią stanie „Następny krok” (bez przeskoku) */
#qd-rail-next:empty ~ .e-rail-care { visibility: hidden; }
@media (max-width: 760px) {
    /* telefon: sekcje zamówienia stają się widoczne razem z kartą „Następny krok” nad nimi (bez przeskoku treści) */
    #qd-next-m:empty ~ * { visibility: hidden; }
}