/* fc27-transze-porzadki: sekcja #transze, pasek "Od FIFA 14", baner promocji na mobile (tylko widz z przelacznika fc27_transze_v2).
   Animacja paska: Motion Prompt #145 · MIT License (c) 2026 Shohei Ohtaki · https://showheyohtaki.github.io/motion-prompt/#145 */
.fc27t, .fc27t-historia, .fc27p-bar { box-sizing: border-box; font-family: 'Barlow', 'Barlow Fallback', 'Helvetica Neue', Arial, sans-serif; color: #1a2230; }
.fc27t *, .fc27t *::before, .fc27t *::after, .fc27t-historia *, .fc27p-bar * { box-sizing: border-box; }
.fc27t p, .fc27t h2, .fc27t h3, .fc27t-historia p { margin: 0; }
.fc27t-nw { white-space: nowrap; }

/* ---- sekcja: tylko dwa tla poza bialym: granat kafli (#1a2230) i krem podpowiedzi (#fff8e6) ---- */
.fc27t {
  display: flex; flex-direction: column; gap: 16px;
  background: #fff; border: 1px solid #e6e9ef; border-radius: 18px; box-shadow: 0 6px 18px rgba(13, 16, 23, 0.05);
  padding: 20px 16px 18px; scroll-margin-top: 90px; margin: 0 0 16px;
}
.fc27t-kol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fc27t-tytul { font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 800; font-size: 28px; line-height: 1.1; color: #111a24; }
.fc27t-naglowek { font-size: 17px; line-height: 1.35; font-weight: 600; color: #1a2230; }
.fc27t-zakres { font-weight: 800; color: #111a24; }
.fc27t-przyklad { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.fc27t-podpis { font-size: 14px; font-weight: 700; color: #4a5568; }

/* pasek transz: segmenty proporcjonalne do ilosci, szerokosci z widoku (style="width:%") */
.fc27t-pasek { display: flex; width: 100%; height: 46px; border-radius: 10px; overflow: hidden; background: #fff8e6; border: 1px solid #f0cf75; }
.fc27t-seg { position: relative; display: block; height: 100%; min-width: 0; overflow: hidden; }
.fc27t-fill { position: absolute; inset: 0; background: #1a2230; transform-origin: left center; will-change: transform; }
.fc27t-seg--okno .fc27t-fill { background: none; inset: auto 6px; top: 50%; height: 0; border-top: 2px dashed #b9892a; }
.fc27t-lab {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 800; font-size: 20px; line-height: 1; white-space: nowrap; color: #fff;
}
.fc27t-seg--okno .fc27t-lab { color: #5f4600; font-size: 17px; }
.fc27t-seg--okno .fc27t-lab span { background: #fff8e6; padding: 0 4px; }
/* animacja #145 (poziomo): bez JS i bez .fc27t-js wszystko od razu widoczne */
.fc27t-js:not(.fc27t-gotowe) .fc27t-fill { transform: scaleX(0); }
.fc27t-js:not(.fc27t-gotowe) .fc27t-lab { opacity: 0; transform: translateX(16px); }

.fc27t-toggle {
  display: none; align-items: center; justify-content: center; gap: 6px; align-self: flex-start;
  min-height: 44px; padding: 8px 14px; border: 1px solid #d3d9e3; border-radius: 10px; background: #fff;
  font: inherit; font-size: 15px; font-weight: 700; color: #1a2230; cursor: pointer;
}
.fc27t-toggle svg { transition: transform 0.2s; }
.fc27t-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.fc27t-toggle:focus-visible { outline: 2px solid #f5a623; outline-offset: 2px; }

.fc27t-miedzy { font-size: 16px; line-height: 1.5; color: #2d3748; }
.fc27t-podpowiedz {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  background: #fff8e6; border: 1px solid #f0cf75; font-size: 15px; line-height: 1.35; font-weight: 600; color: #4a3500;
}
.fc27t-podpowiedz svg { flex: 0 0 auto; }

.fc27t-limit { font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 800; font-size: 22px; line-height: 1.15; color: #111a24; }
/* dwa kafle o identycznym stylu i wysokosci (grid 1fr) */
.fc27t-kafle { display: grid; grid-auto-rows: 1fr; gap: 14px; padding-top: 10px; }
.fc27t-kafel {
  position: relative; display: flex; align-items: center; gap: 14px; min-width: 0;
  background: #1a2230; border: 2px solid #3a4558; border-radius: 14px; padding: 18px 16px; color: #fff;
}
.fc27t-kafel--1 { border-color: #f5a623; }
.fc27t-etykieta {
  position: absolute; top: -11px; left: 14px; padding: 1px 10px; border-radius: 999px; background: #fff; border: 1px solid #f5a623;
  font-size: 12px; line-height: 18px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: #7a4d00; white-space: nowrap;
}
.fc27t-ikona { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #3a4558; }
.fc27t-ikona--ok { border-color: #34d399; }
.fc27t-ikona--zl { border-color: #f5a623; }
.fc27t-kafel-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fc27t-kafel-tytul { font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 800; font-size: 21px; line-height: 1.15; color: #fff; overflow-wrap: break-word; hyphens: manual; }
.fc27t-kafel-opis { font-size: 15px; line-height: 1.45; color: #d6dce6; overflow-wrap: break-word; hyphens: manual; }
.fc27t-przypis { font-size: 13.5px; line-height: 1.4; color: #5b6676; }

/* ---- mobile / tablet (< 1024): zwiniete szczegoly (punkty 3, 4, 6) ---- */
@media (max-width: 1023px) {
  .fc27t-js .fc27t-toggle { display: inline-flex; }
  .fc27t-js.fc27t-zwin .fc27t-sz { display: none; }
  .fc27t-lewa > .fc27t-sz { display: flex; flex-direction: column; gap: 12px; }
}

/* ---- desktop: dwie kolumny, lewa punkty 1-4, prawa punkt 5, przypis pod spodem ---- */
@media (min-width: 1024px) {
  .fc27t { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; row-gap: 14px; padding: 26px 26px 20px; align-items: stretch; }
  .fc27t-lewa { grid-column: 1; grid-row: 1; }
  .fc27t-prawa { grid-column: 2; grid-row: 1; }
  .fc27t-prawa .fc27t-kafle { flex: 1; }
  .fc27t-przypis { grid-column: 1 / -1; grid-row: 2; }
  .fc27t-lewa > .fc27t-sz { display: flex; flex-direction: column; gap: 12px; }
  .fc27t-tytul { font-size: 32px; }
  .fc27t-naglowek { font-size: 19px; }
  .fc27t-pasek { height: 52px; }
}

/* ---- pasek "Od FIFA 14": maks. 72 px na desktopie, maks. 2 linie na 390 ---- */
.fc27t-historia {
  display: flex; align-items: center; gap: 12px; background: #111a24; border-radius: 14px; padding: 12px 16px; margin: 0 0 16px; color: #fff;
}
.fc27t-historia svg { flex: 0 0 auto; }
.fc27t-historia p { font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 800; font-size: 19px; line-height: 1.2; color: #fff; overflow-wrap: break-word; }
@media (min-width: 1024px) {
  .fc27t-historia { min-height: 56px; max-height: 72px; padding: 14px 24px; justify-content: center; }
  .fc27t-historia p { font-size: 24px; line-height: 1.2; }
}

/* ---- karty platform: podpis czasu dostawy (czas_karta, np. "szacowany czas") - mniejszy, szary, jedna linia, pod "~45 minut" (nie rozpycha karty) ---- */
.pv2-plat-czas { position: relative; }
.pv2-plat-czas:has(.pv2-plat-czas-dop) { padding-bottom: 15px; }
.pv2-plat-czas-dop {
  position: absolute; bottom: 0; right: 0;
  font-size: 11px; line-height: 1.2; font-weight: 500; color: #7a8494; white-space: nowrap;
}
.pv2-plat.is-on .pv2-plat-czas-dop { color: #9aa3b2; }
/* waska karta (390 px: dwie karty obok siebie, ok. 158 px): cena nad czasem, zeby cena nie zakrywala ikony i "~45 minut" */
@media (max-width: 560px) {
  .pv2-plat-meta { flex-direction: column !important; align-items: flex-start !important; gap: 3px !important; }
  .pv2-plat-czas-dop { left: 0; right: auto; }
}

/* ---- baner promocji HALL OF FUT na mobile: niski pasek z kodem i kopiowaniem, szczegoly po rozwinieciu ---- */
.fc27p-bar { display: none; }
@media (max-width: 680px) {
  .pv2-promo--v2.fc27p-js.fc27p-aktywny .fc27p-bar {
    display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 8px 6px 14px; margin: 0 0 12px;
    background: #2b060c; border: 1px solid #ecb755; border-radius: 14px; color: #fff;
  }
  .fc27p-tytul { flex: 1 1 auto; min-width: 0; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 800; font-size: 16px; line-height: 1.1; color: #ecb755; overflow-wrap: anywhere; }
  .fc27p-kopiuj, .fc27p-rozwin {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  }
  .fc27p-kopiuj { padding: 6px 12px; background: #fcc715; border: 0; color: #0d1017; white-space: nowrap; }
  .fc27p-kod { text-transform: uppercase; letter-spacing: 0.3px; }
  .fc27p-rozwin { width: 40px; padding: 0; background: transparent; border: 1px solid rgba(236, 183, 85, 0.6); color: #ecb755; }
  .fc27p-rozwin svg { transition: transform 0.2s; }
  .fc27p-rozwin[aria-expanded="true"] svg { transform: rotate(180deg); }
  .fc27p-kopiuj:focus-visible, .fc27p-rozwin:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .pv2-promo--v2.fc27p-js.fc27p-aktywny.fc27p-zwin #sc-promo-future { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fc27t-js .fc27t-fill, .fc27t-js .fc27t-lab { transition: none; }
  .fc27t-toggle svg, .fc27p-rozwin svg { transition: none; }
}

/* fc27-transze-porzadki P 3.2: boks sprzedawcy na waskim ekranie (tylko widz v2) - jedna linia z ellipsis, dopisek ukryty */
@media (max-width: 599px) {
  .pv2-sprzedawca.pv2-sprzedawca--v2 { align-items: center; padding-top: 8px; }
  .pv2-sprzedawca.pv2-sprzedawca--v2 > span:last-child { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; flex: 1 1 auto; }
  .pv2-sprzedawca.pv2-sprzedawca--v2 .si.si-value { display: flex; flex: 1 1 0; min-width: 0; align-items: baseline; gap: 0 4px; flex-wrap: nowrap; }
  .pv2-sprzedawca.pv2-sprzedawca--v2 .pv2-firma { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pv2-sprzedawca.pv2-sprzedawca--v2 .pv2-firma-dopisek { display: none; }
  .pv2-sprzedawca.pv2-sprzedawca--v2 .si-details { display: block; flex: 0 0 auto; white-space: nowrap; }
  .pv2-sprzedawca.pv2-sprzedawca--v2 .si-details[open] { white-space: normal; }
  .pv2-sprzedawca.pv2-sprzedawca--v2 .si.si-value:has(.si-details[open]) { flex-wrap: wrap; flex-basis: 100%; }
  .pv2-sprzedawca.pv2-sprzedawca--v2 .si-details[open] { flex: 1 1 100%; }
  .pv2-sprzedawca.pv2-sprzedawca--v2 > span:last-child:has(.si-details[open]) { flex-basis: 100%; }
}