/*
 * B2B i dowóz (zadanie E1): pasek sesji firmowej, ceny dla firm (karta produktu, podsumowanie), wybór odbiór/dowóz z wyceną,
 * strona „Dla firm i gastronomii”. Ładowany tylko tam, gdzie te elementy są (link w treści strony). Kolory z tokenów styl.css
 * (noc: scena ciemna, karty i arkusze formularzy kremowe). Bez JS: pola dowozu chowa :has(); przeglądarka bez :has pokazuje wszystko.
 */

/* ---------- pasek sesji firmowej (nad nagłówkiem) ---------- */
.pasek-firmy { position: relative; z-index: 22; background: var(--sliwka-50); color: var(--sliwka-900); border-bottom: 1px solid var(--zloto-700); }
.pasek-firmy__wnetrze { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; min-height: var(--cel); }
.pasek-firmy__tekst { margin: 0; padding-block: 6px; font-size: var(--fs-14); line-height: 1.4; }
.pasek-firmy__nazwa { font-weight: 700; overflow-wrap: anywhere; }
.pasek-firmy__dopisek { color: var(--tekst-600); }
.pasek-firmy__wyjdz { margin: 0; }
.pasek-firmy__urlop { font-weight: 700; white-space: nowrap; }
.pasek-firmy__przycisk { min-height: var(--cel); padding-inline: 12px; font-weight: 700; color: var(--sliwka-700); }
@media (max-width: 767px) { .pasek-firmy__dopisek { display: none; } }

/* ---------- ceny dla firm ---------- */
.cena-firmy__dopisek { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--promien-pelny); background: var(--ok-tlo); color: var(--ok-tekst); font-family: var(--czcionka-ui); font-size: var(--fs-13); font-weight: 700; line-height: 1.5; vertical-align: middle; white-space: nowrap; }
.cena-firmy__detaliczna { margin-left: 6px; color: inherit; font-family: var(--czcionka-ui); font-size: var(--fs-14); font-weight: 500; white-space: nowrap; }
.wybor .cena-firmy__dopisek { margin-left: 4px; padding: 0 6px; font-size: var(--fs-13); }
.wybor input:checked + span .cena-firmy__dopisek { background: var(--biel); }
.pozycja__cena--b2b { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pozycja__cena--b2b .cena-firmy__dopisek, .pozycja__cena--b2b .cena-firmy__detaliczna { margin-left: 0; }
.produkt__cena--b2b { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }

/* ---------- karta „Razem”: dowóz i rabat dla firm ---------- */
.razem__lista li.razem__dowoz span:last-child { color: var(--sliwka-900); }
.razem__lista li.razem__b2b { color: var(--tekst-600); font-size: var(--fs-15); }
.razem__lista li.razem__b2b span:last-child { color: var(--ok-tekst); font-weight: 600; }
.razem__dopisek { margin-top: 6px; font-size: var(--fs-14); line-height: 1.45; color: var(--tekst-600); }
.razem__dopisek--b2b { margin-top: 12px; padding: 10px 12px; border-radius: var(--promien-s); background: var(--krem-100); }

/* ---------- podsumowanie: odbiór czy dowóz (SPEC-NOWE A3-A4: tylko firmy, tylko adres z ustaleń) ---------- */
.dowoz { display: grid; gap: 12px; padding-block: 22px; border-top: 1px solid var(--zloto-linia); }
.dowoz__wybor { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.dowoz__opcja { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: start; min-height: 44px; padding: 14px 16px; border-radius: var(--promien-m); border: 1px solid var(--krem-200); background: var(--biel); color: var(--tekst-900); cursor: pointer; }
.dowoz__opcja:has(input:checked) { border-color: var(--sliwka-700); box-shadow: 0 0 0 2px var(--sliwka-100); }
.dowoz__opcja input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--sliwka-700); }
.dowoz__opcja strong { display: block; color: var(--sliwka-900); overflow-wrap: anywhere; }
.dowoz__opis { display: block; margin-top: 2px; font-size: var(--fs-14); color: var(--tekst-600); line-height: 1.45; overflow-wrap: anywhere; }
.dowoz__okna { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; border: 0; }
.dowoz__okna legend { width: 100%; margin-bottom: 6px; }
.dowoz__okno { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.dowoz__okno input { width: 20px; height: 20px; accent-color: var(--sliwka-700); }
.dowoz__minimum { display: grid; gap: 6px; font-size: var(--fs-15); color: var(--tekst-600); }
.dowoz__minimum p { margin: 0; }
.dowoz__minimum strong { color: var(--sliwka-900); }
.dowoz__postep { width: 100%; height: 6px; border: 0; border-radius: 3px; background: var(--krem-200); overflow: hidden; accent-color: var(--sliwka-700); }
.dowoz__postep::-webkit-progress-bar { background: var(--krem-200); border-radius: 3px; }
.dowoz__postep::-webkit-progress-value { background: var(--sliwka-700); border-radius: 3px; }
.dowoz__postep::-moz-progress-bar { background: var(--sliwka-700); border-radius: 3px; }
.dowoz__akcje { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.dowoz__inny { margin: 0; }
.dowoz__inny a, .dowoz__zapytaj a { font-weight: 700; color: var(--sliwka-900); }
.dowoz__zdania { margin: 0; line-height: 1.5; }
.dowoz--zapytaj { border-top: 0; padding-top: 0; }
.dowoz__zapytaj { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--promien-m); border: 1px dashed var(--obrys, var(--krem-200)); background: var(--krem-50); font-size: var(--fs-15); line-height: 1.5; color: var(--tekst-900); }
.dowoz__zapytaj p { margin: 0; }
.dowoz__zapytaj .ikona { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--sliwka-700); }
.odbior__tylko { margin: 6px 0 0; }
/* poniżej minimum z dowozem przycisk zamówienia jest przygaszony (serwer i tak odmawia: 422 z kwotą, której brakuje) */
@supports selector(:has(*)) {
  .podsumowanie__formularz:has(.dowoz__opcja--ponizej input:checked) [data-zamow] { opacity: .5; pointer-events: none; }
}

/* ---------- A3 (pytanie o dowóz) i A6 (zgoda na zmianę dowozu na odbiór osobisty) ---------- */
.zmiana { max-width: 760px; margin: 0 auto; padding-block: 16px 56px; }
.zmiana__opis, .zmiana__decyzja { min-width: 0; }
.zmiana__nad { margin: 0; font-size: var(--fs-13); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-600); }
.zmiana h1 { margin-top: 6px; }
.zmiana__lead { max-width: 38em; margin-top: 10px; font-size: var(--fs-17, 17px); line-height: 1.5; }
.zmiana-porownanie { display: grid; gap: 10px; margin: 16px 0; }
.zmiana-porownanie__karta { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: var(--promien-m); border: 1px solid var(--krem-200); background: var(--biel); color: var(--tekst-900); min-width: 0; font-size: var(--fs-15); }
.zmiana-porownanie__karta--nowe { border-color: var(--sliwka-700); box-shadow: 0 0 0 2px var(--sliwka-100); }
.zmiana-porownanie__karta h2 { margin: 0; font-size: var(--fs-13); font-family: var(--czcionka-ui); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-600); }
.zmiana-porownanie__karta p { margin: 0; overflow-wrap: anywhere; }
.zmiana-porownanie__karta s { color: var(--tekst-600); }
.zmiana-porownanie__karta .pole { margin-top: 4px; }
.zmiana-porownanie__strz { display: grid; place-items: center; color: var(--sliwka-700); font-weight: 700; }
.zmiana__akcje { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 4px; }
.zmiana__drobne { margin-top: 12px; font-size: var(--fs-14); color: var(--tekst-600); line-height: 1.5; }
/* od 440 px „Było” i „Będzie” obok siebie (przycisk decyzji mieści się w pierwszym ekranie Duo złożonego) */
@media (min-width: 440px) { .zmiana-porownanie { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; } }
/* 768-1023 px (Duo rozłożony): opis w lewej połówce, decyzja w prawej, pas zgięcia w rynnie */
@media (min-width: 768px) and (max-width: 1023px) {
  .zmiana { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--rynna); align-items: start; }
  .zmiana-porownanie { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .zmiana-porownanie__strz { display: none; }
}
@media (min-width: 1024px) { .zmiana__lead { font-size: var(--fs-18, 18px); } }

/* ---------- faktura w sesji firmowej ---------- */
.dokument--firma-b2b input[readonly] { background: var(--krem-100); color: var(--sliwka-900); cursor: default; }

/* ---------- strona /dla-firm ---------- */
.b2b-hero { padding-block: 24px 40px; }
.b2b-hero h1 { max-width: 16em; margin-top: 14px; text-wrap: balance; }
.b2b-hero__podtytul { max-width: 34em; margin-top: 14px; font-size: var(--fs-18, 18px); line-height: 1.5; }
.b2b-hero .okruszki { margin-bottom: 18px; }
@media (min-width: 768px) { .b2b-hero { padding-block: 32px 56px; } }

.b2b-korzysci { padding-top: 8px; }
.b2b-korzysci__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.b2b-korzysc { padding: 20px; border-radius: var(--promien-l); background: var(--biel); border: 1px solid var(--krem-200); box-shadow: var(--cien-maly); color: var(--tekst-900); }
.b2b-korzysc h3 { font-size: var(--fs-24); line-height: 1.15; color: var(--sliwka-900); }
.b2b-korzysc p { margin-top: 8px; color: var(--tekst-600); line-height: 1.5; }
@media (min-width: 768px) { .b2b-korzysci__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rynna); } }
/* Duo rozłożony (890 px): trzy kolumny dzielą się po 1/3, środkowa nie ma treści w pasie zgięcia dzięki odstępowi rynny */
@media (min-width: 768px) and (max-width: 960px) { .b2b-korzysci__lista { grid-template-columns: 1fr 1fr; } .b2b-korzysc:last-child { grid-column: 1 / -1; } }

.b2b-krok__tekst { font-size: var(--fs-18, 18px); line-height: 1.45; color: var(--tekst-900); }

.b2b-kod { margin-block: 40px; padding: 22px 18px; border-radius: var(--promien-l); background: var(--biel); border: 1px solid var(--zloto-700); box-shadow: var(--cien); color: var(--tekst-900); }
.b2b-kod h2 { font-size: var(--fs-28); line-height: 1.15; color: var(--sliwka-900); }
.b2b-kod p { margin-top: 8px; color: var(--tekst-600); }
.b2b-kod__formularz { display: grid; gap: 8px; margin-top: 14px; max-width: 30rem; }
.b2b-kod__akcje { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
@media (min-width: 768px) { .b2b-kod { padding: 28px 32px; } }


.b2b-produkty__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
.b2b-produkt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: var(--cel); padding: 14px 16px; border-radius: var(--promien-m); background: var(--biel); border: 1px solid var(--krem-200); color: var(--sliwka-900); text-decoration: none; }
.b2b-produkt:hover { border-color: var(--zloto-700); }
.b2b-produkt__nazwa { font-weight: 700; overflow-wrap: anywhere; }
.b2b-produkt__cena { white-space: nowrap; color: var(--tekst-600); }
@media (min-width: 768px) { .b2b-produkty__lista { grid-template-columns: 1fr 1fr; column-gap: var(--rynna); } }

.b2b-zapytanie__formularz { max-width: 48rem; margin-top: 16px; }

/* Duo rozłożony i tablet (768 px i więcej): treść w dwóch połówkach z rynną pośrodku, nic sterującego na zgięciu (x 421-469 przy 890 px) */
@media (min-width: 768px) {
  .b2b-hero h1, .b2b-hero__podtytul { max-width: var(--polowka); }
  .b2b-hero .hero__przyciski { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: var(--polowka); }
  .b2b-kod { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--rynna); align-items: start; }
  .b2b-kod h2, .b2b-kod > p { grid-column: 1; }
  .b2b-kod__formularz, .b2b-kod__akcje { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .b2b-kod__akcje { flex-direction: column; align-items: flex-start; }
  .b2b-zapytanie .kontener { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--rynna); align-items: start; }
  .b2b-zapytanie__formularz { margin-top: 0; }
  .b2b-zapytanie__formularz .kform__pola { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  .b2b-hero h1, .b2b-hero__podtytul, .b2b-hero .hero__przyciski { max-width: none; }
  .b2b-hero .hero__przyciski { flex-direction: row; }
}
/* cztery kroki „Jak to działa” w jednym rzędzie od 1024 px (na głównej są trzy) */
@media (min-width: 1024px) { .b2b-kroki { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }