/* Strona klienta ProTrener Studio EMS — papierowe tło, ciemny pasek z logo, czerwone przyciski (wygląd jak strona poleceń). */
:root {
  --red: #cf2232;
  --red-d: #a81a28;
  --paper: #f6f2e9;
  --paper-d: #eee8dc;
  --surface: #fffdf8;
  --ink: #1b1916;
  --muted: #6f685d;
  --line: #e3dccd;
  --dark: #0d0c0b;
  --blad: #b3261e;
  --serif: "Cormorant Garamond", Georgia, serif;
  --oswald: Oswald, "Arial Narrow", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.55; }
a { color: var(--red); }
.gorny-pasek { background: var(--dark); color: #fff; font-size: 11px; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 9px 44px; border-bottom: 1px solid #2a2725; }
.gorny-pasek b { color: var(--red); }
.gorny-pasek s { color: #777; }
header.firma { background: var(--dark); display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 14px 44px; position: sticky; top: 0; z-index: 20; }
header.firma a { text-decoration: none; }
header.firma .marka img { display: block; height: 32px; width: auto; }
header.firma .koszyk-link { border: 1px solid #4a4542; color: #fff; border-radius: 30px; padding: 7px 16px; font-size: 13px; white-space: nowrap; }
header.firma .koszyk-link:hover { border-color: var(--red); }
main { max-width: 800px; margin: 0 auto; padding: 1.2rem 1rem 2rem; }
footer { background: var(--dark); text-align: center; padding: 1.6rem 1rem; font-size: .85rem; color: #b8b0a4; }
footer p { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; }
h2.kategoria, .sekcja-tytul { font-weight: 700; color: #0d0c0b; -webkit-text-stroke: .7px #0d0c0b; }
h2 { margin: 1rem 0 .5rem; font-size: 2rem; }
h2.kategoria { font-size: 2.4rem; margin: 2.2rem 0 .3rem; scroll-margin-top: 80px; }
h3 { margin: 1.2rem 0 .3rem; font-size: 1.35rem; }
@media (max-width: 700px) {
  .gorny-pasek { padding: 8px 18px; font-size: 10.5px; }
  .gorny-pasek .kontakt { display: none; }
  header.firma { padding: 12px 18px; }
  header.firma .marka img { height: 26px; }
}

.przycisk, button.przycisk, .btn-red { display: inline-flex; align-items: center; justify-content: center; background: var(--red); color: #fff; border: 0; border-radius: 8px; padding: 11px 20px; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: 0 6px 14px -6px #cf223299; }
.przycisk.glowny { padding: 13px 26px; }
.przycisk:hover, .btn-red:hover { background: var(--red-d); }
button.link { background: none; border: 0; color: var(--red); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

body.szeroka main { max-width: none; padding: 0; margin: 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 44px; }
.chip { display: inline-flex; gap: 8px; align-items: center; border: 1px solid #cf223280; background: #cf22321f; border-radius: 30px; padding: 6px 14px; font-size: 12px; color: #fff; }
.studio-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; background: var(--surface); color: var(--ink); border-radius: 8px; padding: 10px 14px; font-weight: 600; font-size: 13px; border: 1px solid var(--line); text-decoration: none; }
.studio-btn:hover { border-color: var(--red); }
.studio-btn.on { background: var(--red); color: #fff; border-color: var(--red); }

/* hero z panelem „Zarezerwuj w 3 krokach” */
.hero { position: relative; background: var(--dark) url(/klient/img/hero.webp) center top 18% / 62% auto no-repeat; color: #fff; padding: 56px 44px; display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 40px; align-items: center; min-height: 560px; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0d0c0b 22%, #0d0c0b99 42%, #0d0c0b55 58%, #0d0c0bf2 78%), linear-gradient(0deg, #0d0c0b, transparent 25%); }
.hero > * { position: relative; }
.hero-tekst, .panel-rez { max-width: 100%; }
.hero h1 { font-size: 58px; font-weight: 500; line-height: 1.02; margin: 18px 0 12px; }
.zalety { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13px; color: #e9e3d8; }
.zalety li::before { content: "✓"; color: var(--red); font-weight: 700; margin-right: 7px; }
.panel-rez { background: var(--surface); color: var(--ink); border-radius: 16px; padding: 26px; box-shadow: 0 30px 50px -20px #000a; }
.panel-tytul { font-family: var(--serif); font-size: 30px; font-weight: 600; text-align: center; margin-bottom: 16px; line-height: 1.1; }
.krok-nazwa { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.przyciski { display: grid; gap: 8px; margin-bottom: 14px; }
.przyciski-studia { grid-template-columns: repeat(3, 1fr); }
.przyciski-studia .studio-btn { line-height: 1.25; hyphens: auto; overflow-wrap: anywhere; }
.przyciski-kat { grid-template-columns: 1fr 1fr; margin-bottom: 18px; }
.panel-rez .studio-btn { padding: 10px 8px; line-height: 1.25; }
.btn-red.szeroki { width: 100%; padding: 14px; }
.panel-uwaga { font-size: 11px; color: var(--muted); text-align: center; margin-top: 10px; }

/* cennik */
.cennik-sekcja { padding: 36px 0 10px; scroll-margin-top: 70px; }
.sekcja-nag { margin-bottom: 14px; }
.sekcja-tytul { font-family: var(--serif); font-size: 2.6rem; font-weight: 700; color: #0d0c0b; line-height: 1.05; }
.pod { color: var(--muted); font-size: 14px; }
.zakladki { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 8px; }
.zakladki a { white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 30px; padding: 9px 18px; font-size: 13px; font-weight: 600; text-decoration: none; }
.zakladki a:first-child { background: var(--ink); color: #fff; border-color: var(--ink); }
.zakladki a:hover { border-color: var(--red); }
.siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.karta { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 9px; position: relative; }
.karta.wyr { border: 2px solid var(--red); box-shadow: 0 18px 30px -18px #cf223266; }
.znaczek { position: absolute; top: -11px; left: 18px; background: var(--red); color: #fff; font-size: 10px; padding: 4px 10px; border-radius: 20px; font-family: var(--oswald); letter-spacing: .12em; }
.karta h3 { margin: 0; font-family: Poppins, sans-serif; font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.karta .opis { font-size: 12.5px; color: var(--muted); line-height: 1.55; white-space: pre-line; }
.usluga-glowna { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); }
.usluga-glowna form { margin: 0; }
.usluga-cena { font-size: 25px; font-weight: 700; line-height: 1.1; }
.usluga-czas { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.cena-stara { color: #a29a8d; font-weight: 400; font-size: .8em; margin-right: 6px; }
.cena-aktualna { font-weight: 700; }
.cena-usluga { font-size: 1.2rem; margin: .2rem 0 .6rem; }
.preferowany { background: var(--surface); border-left: 3px solid var(--red); border-radius: 6px; padding: .6rem .8rem; margin: .6rem 0; font-size: .92rem; }
.dwie-karty { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 30px 0 40px; }
.o-nas, .adresy { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0 22px 22px; margin: 0; }
.o-nas p { margin: .4rem 0; }
@media (max-width: 960px) {
  .siatka { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr; padding: 28px 18px 0; min-height: 0; background-size: 100% auto; background-position: center top; gap: 18px; }
  .hero::before { background: linear-gradient(0deg, #0d0c0b 12%, #0d0c0b66 60%, #0d0c0b33); }
  .hero-tekst { padding-top: 130px; }
  .hero h1 { font-size: 36px; margin: 10px 0 8px; }
  .zalety { display: none; }
  .panel-rez { margin: 0 -4px -50px; padding: 18px; }
  .panel-tytul { font-size: 22px; margin-bottom: 10px; }
  .panel-rez .studio-btn { font-size: 12.5px; }
  .wrap { padding: 0 18px; }
  .cennik-sekcja { padding-top: 76px; }
  .dwie-karty { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .przyciski-studia { grid-template-columns: 1fr; }
  .siatka { grid-template-columns: 1fr; gap: 16px; }
  .sekcja-tytul { font-size: 2rem; }
  .karta { padding: 16px; }
  .usluga-cena { font-size: 21px; }
  .zakladki { flex-wrap: nowrap; overflow-x: auto; margin-right: -18px; padding-right: 18px; scrollbar-width: none; }
  h2.kategoria { font-size: 2rem; }
}

.adres { color: var(--muted); font-size: .9rem; }
.wybor-studia { list-style: none; padding: 0; }
.wybor-studia li { margin: .7rem 0; display: flex; flex-direction: column; gap: .2rem; }
.wybor-daty { display: flex; gap: .6rem; align-items: end; margin: .8rem 0; flex-wrap: wrap; }
.wybor-daty input { font: inherit; padding: .4rem; border: 1px solid var(--line); border-radius: 6px; }

/* wybór terminu (A1) */
.okruszki { font-size: 12px; color: var(--muted); padding: 22px 0 0; }
.okruszki a { color: var(--muted); text-decoration: none; }
.okruszki a:hover { color: var(--red); }
.okruszki b { color: var(--ink); }
.termin-uklad { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 30px; padding: 20px 0 60px; align-items: start; }
.podsum { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.kicker { font-family: var(--oswald); letter-spacing: .14em; text-transform: uppercase; font-size: 10px; color: var(--red); }
.podsum-nazwa { margin: 2px 0 8px; font-size: 30px; font-weight: 600; line-height: 1.05; }
.podsum .wiersz { display: flex; gap: 10px; font-size: 13px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.podsum .wiersz > span { color: var(--muted); width: 56px; flex: none; }
.podsum .cena-usluga { font-size: 15px; margin: 0; }
.mapa { display: block; width: 100%; height: 190px; border: 0; border-radius: 12px; margin-top: 12px; background: var(--paper-d); }
.studio-blok { background: #cf22320f; border: 1px solid #cf223255; border-left: 4px solid var(--red); border-radius: 10px; padding: 12px 14px; margin: 8px 0 12px; }
.studio-blok small { display: block; font-family: var(--oswald); letter-spacing: .14em; text-transform: uppercase; font-size: 10px; color: var(--red); }
.studio-nazwa { display: block; font-size: 19px; font-weight: 700; line-height: 1.25; }
.studio-blok .adres { font-size: 14px; font-weight: 600; color: var(--ink); }
.zmien-studio { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 12px; color: var(--muted); }
.zmien-studio a { border: 1px solid var(--red); color: var(--red); background: var(--surface); border-radius: 30px; padding: 5px 12px; font-weight: 600; text-decoration: none; }
.zmien-studio a:hover { background: var(--red); color: #fff; }
.wskazowki { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; white-space: pre-line; }
.podsum-linki { font-size: 12px; margin-top: 10px; color: var(--muted); }
.podsum-linki a { color: var(--red); font-weight: 600; text-decoration: none; }
.podsum-linki a.zmien { color: var(--muted); font-weight: 400; }
.termin-glowna, .podsum { min-width: 0; }
.sekcja-h { font-size: 2.6rem; margin: 0 0 4px; font-weight: 600; }
.termin-glowna .preferowany { background: none; border: 0; padding: 0; margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.pora, .czesc-nazwa { font-family: var(--oswald); letter-spacing: .14em; text-transform: uppercase; font-size: 11px; color: var(--muted); }
.pora { margin: 16px 0 8px; }
.pasek-dni { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; }
.dzien-chip, .pasek-dni .chip-wiecej { flex: none; min-width: 64px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-align: center; padding: 9px 0; color: var(--ink); text-decoration: none; display: block; }
.dzien-chip small { display: block; font-size: 10px; color: var(--muted); font-family: var(--oswald); letter-spacing: .1em; }
.dzien-chip b { font-size: 20px; }
.dzien-chip:hover { border-color: var(--red); }
.dzien-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.dzien-chip.on small { color: #bbb; }
.pasek-dni .chip-wiecej { align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--red); white-space: nowrap; }
.dzien h3 { font-size: 1.4rem; margin: 1.2rem 0 .2rem; border-left: 4px solid var(--red); padding-left: .6rem; }
.czesc { margin: 14px 0 0; }
.czesc-nazwa { display: block; margin-bottom: 8px; }
.godziny { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
a.slot { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-align: center; padding: 11px 0; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; }
a.slot:hover, a.slot:focus { border-color: var(--red); }
a.slot.wybrany { background: var(--red); border-color: var(--red); color: #fff; }
/* z JS: jeden dzień naraz */
.js .dzien { display: none; }
.js .dzien.aktywny { display: block; }
.js .dzien h3 { display: none; }
.js .dzien .czesc:first-of-type { margin-top: 4px; }
.pasek-dol { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line); padding: 14px 44px; display: flex; justify-content: space-between; align-items: center; gap: 12px; box-shadow: 0 -10px 30px -20px #0006; }
.pasek-dol[hidden] { display: none; }
.pasek-dol small { display: block; color: var(--muted); font-size: 12px; }
.pasek-akcje { display: flex; gap: 12px; align-items: center; }
.pasek-akcje .wstecz { font-size: 13px; color: var(--muted); text-decoration: none; }
body.ma-pasek main { padding-bottom: 90px; }
@media (max-width: 960px) {
  .termin-uklad { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .podsum { background: var(--dark); color: #fff; border-color: var(--dark); padding: 16px 18px; }
  .podsum .wiersz { border-color: #ffffff26; }
  .podsum .wiersz > span, .podsum .adres, .wskazowki, .podsum-linki, .podsum-linki a.zmien { color: #b8b0a4; }
  .podsum-nazwa { font-size: 26px; }
  .studio-blok { background: #ffffff12; border-color: #cf2232aa; }
  .studio-blok .adres, .studio-nazwa { color: #fff; }
  .zmien-studio { color: #b8b0a4; }
  .zmien-studio a { background: transparent; color: #fff; border-color: #ffffff66; }
  .mapa { height: 170px; }
  .sekcja-h { font-size: 2rem; }
  .pasek-dol { padding: 12px 18px 22px; }
}
@media (max-width: 620px) {
  .godziny { grid-template-columns: repeat(3, 1fr); }
  .pasek-dni { margin-right: -18px; padding-right: 18px; }
  .dl-d { display: none; }
  .pasek-dol b { font-size: 15px; }
}
.brak { padding: 1rem; background: var(--surface); border-radius: 8px; text-align: center; color: var(--muted); }

.podsumowanie { background: var(--surface); border-left: 4px solid var(--red); border-radius: 6px; padding: .8rem 1rem; margin: .8rem 0; }
.formularz label { display: block; margin: .8rem 0; font-weight: 600; }
.formularz input[type=text], .formularz input[type=email], .formularz input[type=tel], .formularz textarea { display: block; width: 100%; font: inherit; padding: .55rem; margin-top: .25rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.formularz label.zgoda { display: flex; gap: .6rem; font-weight: 400; align-items: flex-start; font-size: .9rem; }
.formularz label.zgoda input { margin-top: .3rem; flex: none; }
.blad { color: var(--blad); font-size: .88rem; display: block; font-weight: 400; }
.ramka { border: 1px solid var(--blad); border-radius: 6px; padding: .6rem .8rem; background: #fff3f2; }
.male { font-size: .82rem; color: var(--muted); }

ul.pozycje { list-style: none; margin: 0; padding: 0; }
ul.pozycje li { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: start; padding: .7rem 0; border-bottom: 1px solid var(--line); }
ul.pozycje form { margin: 0; }
.cena { font-weight: 600; white-space: nowrap; }
.suma { text-align: right; font-size: 1.15rem; }
.licznik { background: var(--dark); color: #fff; border-radius: 6px; padding: .5rem .8rem; }
.akcje { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-top: 1.2rem; }
.akcje form.inline { margin: 0; }
section.zasady { background: var(--surface); border-radius: 8px; padding: .2rem 1rem 1rem; margin-top: 1rem; }

/* pozostałe widoki: ten sam szkielet (karty, nagłówki szeryfowe, czerwone akcenty) */
body:not(.szeroka) main { padding-top: 1.6rem; }
body:not(.szeroka) main > h2:first-child { margin-top: 0; }
.podsumowanie { border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: 12px; }
.formularz input[type=text]:focus, .formularz input[type=email]:focus, .formularz input[type=tel]:focus, .formularz textarea:focus, .wybor-daty input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.formularz input[type=checkbox] { accent-color: var(--red); }
ul.pozycje { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 1rem; }
ul.pozycje li:last-child { border-bottom: 0; }
.wybor-studia li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; }
section.zasady { border: 1px solid var(--line); border-radius: 12px; }