/* =====================================================================
   Bieg Piastów — warstwa wizualna
   Paleta i układ odwzorowane z panelu 50. BP: żółty pasek, ciemna belka
   powitalna, białe karty z okrągłą ikoną, licznik kroków z kółkami.
   ===================================================================== */

:root{
  --bp-zolty:      #ffd500;
  --bp-zolty-ciem: #d4ac00;
  --bp-zolty-jasn: #fdf6dc;
  --bp-ciemny:     #1c1f23;
  --bp-ciemny-2:   #2b2f26;
  --bp-tekst:      #21252a;
  --bp-tekst-mgl:  #6c757d;
  --bp-tlo:        #f5f6f8;
  --bp-obrys:      #e4e7ea;
  --bp-cien:       0 4px 16px rgba(15,18,22,.06);
  --bp-cien-mocny: 0 12px 32px rgba(15,18,22,.12);
}

body{
  background: var(--bp-tlo);
  color: var(--bp-tekst);
  font-family: 'Lato', 'Segoe UI', Tahoma, sans-serif;
}

/* --------------------------- pasek górny --------------------------- */
.pasek{ background: var(--bp-zolty); padding:.55rem 0; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.pasek-marka{ display:flex; align-items:center; gap:.9rem; text-decoration:none; color:var(--bp-ciemny); min-width:0; }
.pasek-marka img{ height:44px; width:auto; flex:none; }
.pasek-marka span{ font-weight:900; text-transform:uppercase; font-size:1.05rem; line-height:1.15; }
.pasek-akcje{ display:flex; align-items:center; gap:.4rem; flex:none; }

.pasek-jezyk{
  border:1.5px solid rgba(28,31,35,.55); background:transparent; color:var(--bp-ciemny);
  font-weight:700; font-size:.8rem; padding:.15rem .5rem; border-radius:5px;
  text-decoration:none; line-height:1.6;
}
.pasek-jezyk:hover{ background:rgba(28,31,35,.1); color:var(--bp-ciemny); }
.pasek-jezyk.wybrany{ background:var(--bp-ciemny); border-color:var(--bp-ciemny); color:var(--bp-zolty); }

/* wejście do panelu organizatora */
.pasek-panel{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--bp-ciemny); color:var(--bp-zolty);
  font-weight:700; font-size:.8rem; text-transform:uppercase;
  padding:.3rem .75rem; border-radius:5px; text-decoration:none; margin-right:.35rem;
}
.pasek-panel:hover{ background:#000; color:var(--bp-zolty); }

/* ---------------------- belka powitalna (hero) --------------------- */
.powitanie{
  background:linear-gradient(115deg, var(--bp-ciemny) 0%, var(--bp-ciemny-2) 100%);
  color:#fff; padding:2.75rem 0;
}
.powitanie h1{ font-weight:300; font-size:clamp(2rem,4.5vw,3.25rem); color:var(--bp-zolty); margin:0 0 .35rem; }
.powitanie p{ color:rgba(255,255,255,.82); margin-bottom:1rem; }
.powitanie-miejsce{ font-size:.95rem; color:rgba(255,255,255,.6) !important; }

.znacznik{ display:inline-block; font-size:.78rem; font-weight:700; padding:.3rem .7rem; border-radius:5px; margin-right:.4rem; }
.znacznik-zolty{ background:var(--bp-zolty); color:var(--bp-ciemny); }
.znacznik-obrys{ border:1px solid rgba(255,255,255,.45); color:#fff; }

/* --------------------------- kafle menu ---------------------------- */
.kafel{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; text-align:center; text-decoration:none;
  background:#fff; border-radius:14px; padding:2.25rem 1.5rem;
  color:var(--bp-tekst); box-shadow:var(--bp-cien);
  border-bottom:4px solid transparent; transition:transform .2s, box-shadow .2s, border-color .2s;
}
.kafel:hover{ transform:translateY(-4px); box-shadow:var(--bp-cien-mocny); border-bottom-color:var(--bp-zolty); color:var(--bp-tekst); }
.kafel-ikona{
  width:68px; height:68px; border-radius:50%;
  background:var(--bp-zolty-jasn); color:var(--bp-zolty-ciem);
  display:grid; place-items:center; font-size:1.6rem; margin-bottom:1.4rem;
  transition:background .2s, color .2s;
}
.kafel:hover .kafel-ikona{ background:var(--bp-zolty); color:var(--bp-ciemny); }
.kafel-tytul{ font-weight:800; text-transform:uppercase; font-size:1.05rem; margin-bottom:.4rem; }
.kafel-opis{ font-size:.88rem; color:var(--bp-zolty-ciem); }

/* ------------------------------ karty ------------------------------ */
.karta{ background:#fff; border:none; border-radius:14px; box-shadow:var(--bp-cien); overflow:hidden; }
.karta + .karta{ margin-top:1.25rem; }
.karta-naglowek{ background:var(--bp-ciemny); color:#fff; padding:1.1rem 1.75rem; font-size:1.2rem; font-weight:400; }

/* --------------------------- licznik kroków ------------------------ */
.kroki{ list-style:none; display:flex; align-items:flex-start; padding:0; margin:0 auto 2rem; max-width:60rem; }
.kroki li{ flex:1; position:relative; text-align:center; }
.kroki li:not(:last-child)::after{
  content:''; position:absolute; top:19px; left:calc(50% + 22px); right:calc(-50% + 22px);
  height:2px; background:var(--bp-obrys);
}
.kroki li.zrobiony:not(:last-child)::after{ background:var(--bp-zolty-ciem); }
.kroki .kropka{
  width:40px; height:40px; border-radius:50%; margin:0 auto;
  display:grid; place-items:center; font-weight:700; font-size:.95rem;
  background:#6c757d; color:#fff; position:relative; z-index:1;
}
.kroki .aktywny .kropka{ background:var(--bp-zolty-ciem); color:#fff; }
.kroki .zrobiony .kropka{ background:var(--bp-ciemny); color:var(--bp-zolty); }
.kroki .etykieta{ display:block; margin-top:.5rem; font-size:.78rem; color:var(--bp-tekst-mgl); }
.kroki .aktywny .etykieta{ color:var(--bp-tekst); font-weight:700; }
@media (max-width:575.98px){ .kroki .etykieta{ display:none; } }

/* ------------------------------ wybory ----------------------------- */
.wybor{
  display:block; height:100%; cursor:pointer;
  background:#fff; border:2px solid var(--bp-obrys); border-radius:12px;
  padding:1.1rem 1.35rem; transition:border-color .15s, box-shadow .15s;
}
.wybor:hover{ border-color:#c4c9cf; }
.wybor.zaznaczony{ border-color:var(--bp-zolty); box-shadow:0 0 0 3px rgba(255,213,0,.28); }
.wybor.niedostepny{ opacity:.55; cursor:not-allowed; background:#fafbfc; }
.wybor .cena{ font-size:1.2rem; font-weight:800; }

/* ------------------------------ przyciski -------------------------- */
.btn-bp{ background:var(--bp-zolty); color:var(--bp-ciemny); font-weight:800; border:none; border-radius:7px; padding:.6rem 1.5rem; }
.btn-bp:hover{ background:#f0c800; color:var(--bp-ciemny); }
.btn-bp:disabled{ background:#d9dde1; color:#8b9199; }
.btn-outline-dark{ border-radius:7px; font-weight:700; }

/* --------------------------- ramka z podpowiedzią ------------------ */
.ramka-info{ background:var(--bp-zolty-jasn); border:1px solid #f0dda0; border-radius:10px; padding:1.1rem 1.25rem; }

.suma{ font-size:1.75rem; font-weight:800; }
.rabat{ color:#1a7f37; }
.tabela-podsumowania td{ vertical-align:middle; }

/* --------------------- gadżety i usługi ---------------------------- */
/* jeden gadżet = jedna ramka; na telefonie czytelniejsze niż tabela */
.karta-dodatek{
  background:#fff; border:1px solid var(--bp-obrys); border-radius:12px; padding:.9rem;
}
/* wyróżniamy gadżet, który zawodnik ma już w zamówieniu */
.karta-dodatek.ma-pozycje{
  border-color:var(--bp-zolty); box-shadow:0 0 0 3px rgba(255,213,0,.2);
}
/* Pakiet cyklu (Szlem) to nie koszulka — kosztuje kilkaset złotych i zmienia
   plany na cały rok, więc karta ma odstawać od listy gadżetów. Samo
   wyróżnienie, bez treści: bez tego arkusza karta działa dalej. */
.karta-dodatek.karta-cykl{
  border-color:var(--bp-zolty-ciem); border-width:2px;
  background:linear-gradient(180deg,#fffdf2 0,#fff 60%);
}
/* Pakiet, którego nie da się wziąć, bo wybrany jest inny z tej samej grupy.
   Zostaje czytelny — tylko przestaje wyglądać na ofertę. */
.karta-dodatek.karta-cykl.niedostepny{
  border-color:var(--bp-obrys); border-width:1px; background:#fcfcfd;
}
.wybor-tak-nie .wybor{ padding:.8rem 1rem; text-align:center; }
.wybor-ubezp{ text-align:left; }

/* zgłoszenie zapisane, ale nieopłacone — to musi kłuć w oczy */
.ramka-pilne{ border-left:4px solid var(--bp-zolty-ciem); }

/* rachunek rozbity na grupy: starty, zniżki, gadżety, ubezpieczenie */
.grupa-pozycji + .grupa-pozycji{ border-top:1px dashed var(--bp-obrys); padding-top:.75rem; }
.grupa-pozycji .table td{ border-color:transparent; }

/* ---------------- zgłoszenia dzieci przez opiekuna ----------------- */
/* Kto jest zapisywany — pasek musi być widoczny na każdym kroku, żeby
   rodzic nie wpisał danych dziecka w swoim formularzu i odwrotnie. */
.pasek-osoby{
  display:flex; align-items:center; gap:.85rem;
  background:#fff; border:1px solid var(--bp-obrys); border-left:4px solid var(--bp-zolty);
  border-radius:12px; padding:.7rem .9rem;
}
.awatar{
  flex:0 0 auto; width:2.6rem; height:2.6rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bp-zolty-jasn); color:var(--bp-ciemny);
}
.awatar-dziecko{ background:#e7f1ff; color:#0b5ed7; }
.awatar-dodaj{ background:#eef0f2; color:var(--bp-tekst-mgl); }

/* karta osoby na ekranie wyboru — klikalna w całości, wygodna na telefonie */
.wybor-osoba{
  border-width:1px; padding:.85rem 1rem;
  background:#fff; color:inherit; text-align:left;
}
.wybor-osoba:hover{ border-color:var(--bp-zolty); }
.wybor-plec{ padding:.7rem .5rem; }

/* zastrzeżenie pod mockupem gadżetu — ma być czytelne, ale nie krzyczeć */
.poglad{ font-size:.72rem; line-height:1.25; color:var(--bp-tekst-mgl); }

/* ---------------------------- stopka ------------------------------- */
.stopka{ background:#fff; border-top:1px solid var(--bp-obrys); }

/* --------------------- panel organizatora -------------------------- */
.admin-bok{ background:var(--bp-ciemny); min-height:100vh; }
.admin-bok a{ color:#c7cbd1; text-decoration:none; display:block; padding:.55rem .9rem; border-radius:8px; font-size:.94rem; }
.admin-bok a:hover,.admin-bok a.aktywny{ background:rgba(255,213,0,.15); color:var(--bp-zolty); }

/* --------------------------- proste słupki ------------------------- */
.slupek{ display:grid; grid-template-columns:9rem 1fr 3rem; align-items:center;
  gap:.75rem; margin-bottom:.5rem; font-size:.9rem; }
.slupek-etykieta{ color:var(--bp-tekst-mgl); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.slupek-pasek{ background:var(--bp-obrys); border-radius:4px; height:12px; overflow:hidden; }
.slupek-pasek i{ display:block; height:100%; background:var(--bp-zolty); border-radius:4px; }
.slupek-liczba{ text-align:right; font-weight:700; }
@media (max-width:575.98px){ .slupek{ grid-template-columns:6.5rem 1fr 2.5rem; } }

/* =====================================================================
   Telefon na pierwszym miejscu — z formularza korzysta głównie mobile
   ===================================================================== */

/* iOS przybliża stronę przy polach mniejszych niż 16px */
.form-control, .form-select{
  font-size:16px; min-height:2.9rem; border-radius:9px;
}
.form-control:focus, .form-select:focus{
  border-color:var(--bp-zolty-ciem); box-shadow:0 0 0 .2rem rgba(255,213,0,.25);
}
.form-label{ font-weight:600; font-size:.92rem; margin-bottom:.3rem; }

/* wygodniejsze cele dotyku */
.form-check-input{ width:1.25rem; height:1.25rem; margin-top:.15rem; }
.form-check-label{ padding-left:.15rem; }
.form-check-input:checked{ background-color:var(--bp-ciemny); border-color:var(--bp-ciemny); }

/* pasek akcji kroku: na telefonie przyklejony na dole, pełna szerokość */
.akcje-kroku{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
@media (max-width:767.98px){
  .akcje-kroku{
    position:sticky; bottom:0; z-index:20;
    background:rgba(245,246,248,.97); backdrop-filter:blur(6px);
    margin:1rem -12px 0; padding:.75rem 12px calc(.75rem + env(safe-area-inset-bottom));
    border-top:1px solid var(--bp-obrys);
  }
  .akcje-kroku .btn{ flex:1; }
  .akcje-kroku .btn-lg{ padding:.7rem 1rem; font-size:1rem; }

  main.container{ padding-left:12px; padding-right:12px; }
  .karta{ border-radius:12px; }
  .karta-naglowek{ padding:.85rem 1rem; font-size:1.05rem; }
  .wybor{ padding:.9rem 1rem; }
  .powitanie{ padding:1.75rem 0; }
  .powitanie h1{ font-size:1.75rem; }
  .kafel{ padding:1.5rem 1rem; }
  .kafel-ikona{ width:54px; height:54px; font-size:1.25rem; margin-bottom:.9rem; }
  .suma{ font-size:1.4rem; }
  .pasek-marka img{ height:34px; }
  .pasek-marka span{ font-size:.8rem; }
  .pasek-panel span{ display:none; }
}

/* tabele w kartach nie mogą rozpychać strony na telefonie */
@media (max-width:575.98px){
  .table{ font-size:.88rem; }
  .table td, .table th{ padding:.5rem .4rem; }
}

/* --------------------- edytor tłumaczeń ---------------------------- */
.brak-tlumaczenia{ background:#fff8e1; border-color:#f0dda0; }
.pasek-zapisu{
  position:sticky; bottom:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:rgba(255,255,255,.97); backdrop-filter:blur(6px);
  border:1px solid var(--bp-obrys); border-radius:12px;
  padding:.75rem 1rem; box-shadow:0 -4px 16px rgba(15,18,22,.08);
}

/* --------------------- edytor tekstu (Trix) ------------------------- */
/* Załączników nie obsługujemy - patrz public/assets/js/edytor.js */
trix-toolbar .trix-button-group--file-tools{ display:none; }

trix-editor.edytor{
  min-height:9rem; max-height:26rem; overflow-y:auto;
  border:1px solid #ced4da; border-radius:.375rem;
  padding:.5rem .75rem; background:#fff;
  font-size:.95rem; line-height:1.5;
}
trix-editor.edytor:focus{
  border-color:#86b7fe; box-shadow:0 0 0 .25rem rgba(13,110,253,.25);
}
trix-editor.edytor h1{ font-size:1.05rem; font-weight:700; margin:.4rem 0; }
trix-editor.edytor ul, trix-editor.edytor ol{ padding-left:1.2rem; }
trix-toolbar{ margin-bottom:.35rem; }

/* opis gadżetu po stronie zawodnika - te same znaczniki, mniejsza skala */
.opis-gadzetu{ font-size:.85rem; line-height:1.45; }
.opis-gadzetu > *:last-child{ margin-bottom:0; }
.opis-gadzetu p, .opis-gadzetu div, .opis-gadzetu ul, .opis-gadzetu ol{ margin-bottom:.35rem; }
.opis-gadzetu ul, .opis-gadzetu ol{ padding-left:1.1rem; }
.opis-gadzetu h1, .opis-gadzetu h2, .opis-gadzetu h3{
  font-size:.95rem; font-weight:700; margin:.35rem 0;
}
.opis-gadzetu blockquote{
  margin:.35rem 0; padding-left:.6rem; border-left:3px solid var(--bp-obrys);
}
.opis-gadzetu pre{ white-space:pre-wrap; font-size:.8rem; margin-bottom:.35rem; }

/* ---------- opis gadżetu: zwijanie długich tekstów ------------------ */
/* Pełny opis koszulki potrafi zepchnąć przycisk zakupu poza ekran
   telefonu, więc domyślnie pokazujemy zapowiedź uciętą po 250 znakach.
   W kodzie strony są obie wersje, a przełącza je atrybut „hidden". */
/* Przycisk jest zwykłym <button> - te reguly to tylko wyglad.
   O tym, co widac, decyduje atrybut „hidden" przelaczany skryptem,
   wiec opis dziala poprawnie takze wtedy, gdy ten arkusz sie nie zaladuje. */
.opis-wiecej{
  display:inline-block; margin-top:.2rem; padding:0; cursor:pointer;
  background:none; border:0;
  font-size:.82rem; font-weight:700; color:#0d4b8f; text-decoration:underline;
}
.opis-wiecej:hover{ color:#09325f; }

/* ---------- co zawodnik ma już dołożone do zamówienia --------------- */
.w-zamowieniu{
  background:#f6f8fa; border:1px solid var(--bp-obrys); border-radius:10px;
  padding:.5rem .65rem;
}
.pozycja-gadzetu{
  display:flex; align-items:center; gap:.4rem;
  font-size:.88rem; padding:.3rem 0;
}
.pozycja-gadzetu .nazwa-pozycji{ flex:1 1 auto; min-width:0; }
.pozycja-gadzetu + .pozycja-gadzetu{ border-top:1px dashed var(--bp-obrys); }
.pozycja-gadzetu form{ line-height:1; }

/* przycisk „Dodaj do zamówienia" na telefonie pełną szerokością, pod polami */
.dodaj-gadzet{ margin-top:.25rem; }

/* Na telefonie kolumna ze zdjęciem zabiera jedną trzecią szerokości,
   więc nazwa wariantu i cena nie mieszczą się w jednym wierszu.
   Rozbijamy je na dwa: nazwa, pod nią kwota i „Usuń". */
@media (max-width:575.98px){
  .pozycja-gadzetu{ flex-wrap:wrap; }
  .pozycja-gadzetu .nazwa-pozycji{ flex:1 1 100%; }
  .pozycja-gadzetu > .fw-bold{ margin-right:auto; }
}

/* tłumaczenia opisu w panelu — zwinięte, żeby formularz nie urósł czterokrotnie */
.tlumaczenia-opisu > summary{
  cursor:pointer; font-weight:700; font-size:.9rem;
  padding:.4rem .6rem; background:#f6f8fa;
  border:1px solid var(--bp-obrys); border-radius:8px;
}
.tlumaczenia-opisu[open] > summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; }

/* zdjęcie gadżetu otwiera podgląd - sama nakładka stylowana jest w app.js,
   żeby działała także wtedy, gdy ten arkusz nie dojedzie */
.podglad-zdjecia{ display:inline-block; cursor:zoom-in; }
.podglad-zdjecia img{ transition:opacity .15s; }
.podglad-zdjecia:hover img{ opacity:.85; }