/* formularze.css - silnik formularzy (Receptomat i kolejne).
   Źródło wyglądu: design/wizualizacje/formularz_recepty.html (CSS przeniesiony 1:1)
   + FORMULARZE_DESIGN.md. Tokeny bazowe siedzą w theme.css; tutaj tokeny stanów
   i akcent W2. Ładowane WYŁĄCZNIE na stronach z formularzem (inc/formularze/engine.php). */

.fpage{
  --w2:#1B6E9E;
  --ok:#2FB673; --ok-deep:#1a7a4c; --err:#B3423A; --err-wash:#FBF0EE;
  padding:40px 0 88px;
}
.fpage .wrap{display:grid;grid-template-columns:1.6fr .9fr;gap:64px;align-items:start;max-width:var(--maxw)}
/* bezpiecznik: dzieci gridów nie wymuszają szerokości min-content (rozjazd na wąskich telefonach) */
.fpage .wrap>*,.fpage .fsubmit>*,.fpage .fcard>*,.fpage .frow>*,.fpage .frow-2>*,.fpage .frow-3>*,
.fpage .lek-row>*,.fpage .leki>*{min-width:0;max-width:100%}

/* ==== oś kroków: język .timeline z głównej ==== */
.fsteps{position:relative;padding-left:64px}
.fsteps::before{content:"";position:absolute;left:22px;top:22px;bottom:22px;width:2px;
  background:linear-gradient(180deg,var(--fala),var(--wash2))}
.fstep{position:relative;padding:0 0 44px}
.fstep:last-child{padding-bottom:0}
.fstep::before{content:"";position:absolute;left:-64px;top:0;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--fala),var(--ink));
  box-shadow:0 0 0 5px var(--paper),0 10px 24px rgba(51,42,95,.16)}
.fstep .n{position:absolute;left:-64px;top:0;width:44px;height:44px;display:flex;align-items:center;
  justify-content:center;font-family:Jost;font-weight:600;color:#fff;font-size:1.3rem;z-index:2;line-height:1}
.fstep>h2{font-size:1.35rem;color:var(--deep);padding-top:7px;margin-bottom:4px}
.fstep>.hint{color:var(--muted);font-size:.96rem;margin-bottom:20px;max-width:52ch}

/* ==== karta pól kroku ==== */
.fpage .fcard{background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);
  padding:28px 30px;display:grid;gap:20px}
.fpage .frow{display:grid;gap:8px;align-content:start}
.fpage .frow-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
/* trójka krótkich liczb w jednym wierszu: wiek / wzrost / waga */
.fpage .frow-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.fpage .flabel{font-family:Jost;font-weight:500;color:var(--deep);line-height:1.35;display:block}
.fpage .flabel small{display:block;font-family:"Source Sans 3";font-weight:400;color:var(--muted);
  font-size:.88rem;margin-top:2px}
.fpage .flabel.ukryty{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fpage .opt{font-family:Jost;font-weight:400;color:var(--muted);font-size:.85em}

.fpage input[type=text],.fpage input[type=email],.fpage input[type=tel],
.fpage input[type=number],.fpage select,.fpage textarea{
  width:100%;font:inherit;color:var(--ink);background:#fff;
  padding:.75em 1em;border:1.5px solid var(--line);border-radius:12px;
  transition:border-color .15s ease, box-shadow .15s ease}
.fpage input::placeholder,.fpage textarea::placeholder{color:#9A96B5}
.fpage input:focus,.fpage select:focus,.fpage textarea:focus{
  outline:none;border-color:var(--fala);box-shadow:0 0 0 3px var(--wash2)}
.fpage select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23332A5F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.fpage .frow.waskie input{max-width:260px}
.fpage .fhint{font-size:.88rem;color:var(--muted);margin:0}

/* [hidden] musi wygrywać z display:flex/grid ustawionym niżej (inaczej ikony błędów
   i panele blokady widać od pierwszego wejścia na stronę) */
.fpage [hidden]{display:none !important}

/* honeypot: poza ekranem, nigdy display:none (boty czytają styl) */
.fhp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ==== odpowiedzi krótkie: pigułki ==== */
.fpage .pills{display:flex;flex-wrap:wrap;gap:10px}
.fpage .pills label{position:relative;cursor:pointer}
.fpage .pills input{position:absolute;opacity:0;pointer-events:none}
.fpage .pills .pill{display:inline-block;background:#fff;border:1.5px solid var(--line);border-radius:999px;
  padding:.5em 1.15em;font-family:Jost;font-weight:500;font-size:.95rem;color:var(--ink);transition:all .15s ease}
.fpage .pills label:hover .pill{border-color:var(--w2)}
.fpage .pills input:checked+.pill{background:var(--w2);border-color:var(--w2);color:#fff}
.fpage .pills input:focus-visible+.pill{outline:3px solid var(--fala);outline-offset:3px}

/* ==== skala ankiety: pięć odpowiedzi w JEDNYM rzędzie ====
   Zawijana lista (flex-wrap) rozbijała pytanie na dwa poziomy i skala przestawała się
   czytać jako skala. Równe kolumny trzymają porządek „od tak do nie" wzrokowo. */
.fpage .pills-skala{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.fpage .pills-skala label{display:block}
.fpage .pills-skala .pill{display:flex;align-items:center;justify-content:center;text-align:center;
  height:100%;padding:.55em .6em;font-size:.88rem;line-height:1.2}
/* na węższych ekranach kolumny schodzą stopniowo, ale skala nigdy nie miesza kolejności */
@media(max-width:1180px){.fpage .pills-skala .pill{font-size:.82rem;padding:.55em .4em}}
@media(max-width:900px){.fpage .pills-skala{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fpage .pills-skala .pill{font-size:.88rem;padding:.55em .7em}}
@media(max-width:520px){.fpage .pills-skala{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ==== info-box medyczny ==== */
.fpage .fnote{background:var(--wash);border-left:3px solid var(--fala);border-radius:0 12px 12px 0;
  padding:14px 18px;font-size:.93rem;color:var(--ink)}
.fpage .fnote b{color:var(--deep)}
.fpage .fnote.warn{background:#FCF6EA;border-left-color:var(--gold)}

/* ==== lista leków: nazwa / dawka / opakowania OSOBNO ==== */
.fpage .leki{display:grid;gap:12px}
.fpage .lek-head{display:grid;grid-template-columns:1.3fr .8fr .7fr 40px;gap:12px;padding:0 14px;
  font-family:Jost;font-weight:500;font-size:.85rem;color:var(--muted)}
.fpage .lek-row{display:grid;grid-template-columns:1.3fr .8fr .7fr 40px;gap:12px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.fpage .lek-row input{background:#fff}
.fpage .lek-del{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  color:var(--muted);font-size:1.15rem;line-height:1;cursor:pointer;transition:all .15s ease}
.fpage .lek-del:hover{border-color:var(--err);color:var(--err)}
.fpage .lek-add{justify-self:start;font-size:.95rem;padding:.6em 1.2em}

/* ==== zgody ==== */
.fpage .consent{display:flex;gap:14px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;padding:16px 20px;cursor:pointer;
  transition:border-color .15s ease;position:relative}
.fpage .consent:hover{border-color:var(--fala)}
.fpage .consent input{position:absolute;opacity:0;pointer-events:none}
.fpage .consent .box{flex:0 0 22px;width:22px;height:22px;border-radius:7px;border:2px solid var(--line);
  background:#fff;position:relative;margin-top:3px;transition:all .15s ease}
.fpage .consent input:checked~.box{background:var(--fala);border-color:var(--fala)}
.fpage .consent input:checked~.box::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;
  border-right:2.5px solid var(--deep);border-bottom:2.5px solid var(--deep);transform:rotate(45deg)}
.fpage .consent input:focus-visible~.box{outline:3px solid var(--fala);outline-offset:3px}
.fpage .consent .txt{font-size:.92rem;color:var(--muted);line-height:1.5}
.fpage .consent .txt b{color:var(--deep);font-family:Jost;font-weight:500;display:block;
  font-size:.98rem;margin-bottom:2px}
.fpage .consent.err{border-color:var(--err);box-shadow:0 0 0 3px var(--err-wash)}
/* klauzula informacyjna pod kartą zgody (drobniejsza, z linkiem do RODO) */
.fpage .fklauzula{margin:-8px 0 0;padding:0 20px;font-size:.83rem;color:var(--muted);line-height:1.5}
.fpage .fklauzula a{color:var(--w2);text-decoration:underline}

/* ==== finał: Turnstile (widoczny, managed) + przycisk ==== */
/* krok końcowy z własną kartą pól (zgody kwestionariusza) */
.fpage .fstep-koniec .fcard{margin-bottom:26px}
.fpage .fsubmit{display:grid;gap:18px;justify-items:start}
.fpage .fsubmit .btn-ink{font-size:1.1rem;padding:1em 2.2em}
.fpage .fsubmit .btn-ink[disabled]{opacity:.45;transform:none;cursor:not-allowed;box-shadow:none}
.fpage .fsubmit .fine{font-size:.85rem;color:var(--muted);max-width:44ch}
/* widgetu nie stylujemy (renderuje Cloudflare) - tylko bezpiecznik szerokości na telefonach */
.fpage .cf-turnstile{width:100%;max-width:300px;min-height:65px}
.fpage .cf-turnstile iframe{max-width:100%}

/* ==== BLOKADA MEDYCZNA: odpowiedź poza normą = wizyta zamiast recepty ==== */
.fpage .fblock{border:1.5px solid var(--gold);background:#FCF6EA;border-radius:14px;padding:20px 22px;
  display:grid;gap:10px;justify-items:start}
.fpage .fblock[hidden]{display:none}
.fpage .fblock h3{font-size:1.08rem;color:var(--deep)}
.fpage .fblock p{font-size:.94rem;color:var(--ink);max-width:52ch}
.fpage .fblock .btn{font-size:.95rem;padding:.7em 1.3em}
.fpage .fpowod{color:var(--deep);font-weight:600}

/* ==== aside: jak to działa + kontakt ==== */
.faside{position:sticky;top:104px;display:flex;flex-direction:column;gap:22px}
.faside .kontakt{background:var(--wash);border-radius:var(--r);padding:26px 28px}
.faside .kontakt h3{font-size:1.12rem;color:var(--deep);margin-bottom:8px}
.faside .kontakt p{font-size:.94rem;color:var(--muted);margin-bottom:14px}
.faside .kontakt .btn{font-size:.95rem;padding:.7em 1.3em}
.faside .jak{background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:28px 30px}
.faside .jak h3{font-size:1.15rem;color:var(--deep);margin-bottom:18px}
.faside .jak ol{list-style:none;display:grid;gap:16px;margin:0;padding:0}
.faside .jak li{display:flex;gap:14px;align-items:flex-start;font-size:.95rem;color:var(--muted)}
.faside .jak .jn{flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--fala),var(--ink));color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:Jost;font-weight:600;font-size:.95rem}
.faside .jak li b{color:var(--deep);display:block;font-family:Jost;font-weight:500}
.faside .jak .fine{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--muted)}

/* ==== stany ==== */
.fpage .frow.err input,.fpage .frow.err select,.fpage .frow.err textarea{
  border-color:var(--err);box-shadow:0 0 0 3px var(--err-wash)}
.fpage .ferr{display:flex;gap:8px;align-items:flex-start;font-size:.88rem;color:var(--err);
  font-weight:600;margin:0}
.fpage .ferr::before{content:"!";flex:0 0 18px;width:18px;height:18px;border-radius:50%;
  background:var(--err);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-family:Jost;margin-top:2px}
.fpage .fsummary{background:var(--err-wash);border:1.5px solid var(--err);border-radius:14px;
  padding:18px 22px;margin-bottom:32px}
.fpage .fsummary:focus{outline:3px solid var(--fala);outline-offset:3px}
.fpage .fsummary h3{color:var(--err);font-size:1.05rem;margin-bottom:8px}
.fpage .fsummary ul{margin:0 0 0 18px;font-size:.93rem;color:var(--ink)}
.fpage .fsummary a{color:var(--err)}
.fpage>.wrap>.fsteps>.fblock{margin-bottom:32px}

/* potwierdzenie po PRG */
.fpage .fdone{background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 8px);
  padding:48px 40px;text-align:center;color:var(--ink);display:grid;justify-items:center;gap:14px}
.fpage .fdone .ok-ring{width:84px;height:84px;border-radius:50%;
  background:linear-gradient(135deg,var(--fala),var(--ink));display:flex;align-items:center;
  justify-content:center;box-shadow:0 14px 34px rgba(51,42,95,.22)}
.fpage .fdone .ok-ring svg{width:40px;height:40px}
.fpage .fdone .ok-ring path{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:no-preference){
  .fpage .fdone .ok-ring path{stroke-dasharray:40;stroke-dashoffset:40;animation:bmfOkDraw .7s .2s ease forwards}
  @keyframes bmfOkDraw{to{stroke-dashoffset:0}}
}
.fpage .fdone h2{color:var(--deep);font-size:1.6rem}
.fpage .fdone p{color:var(--muted);max-width:44ch}
.fpage .fdone .dokad{background:var(--wash);border-radius:12px;padding:12px 20px;font-family:Jost;
  font-weight:500;color:var(--deep)}
.fpage .fdone .btn{margin-top:6px}

/* =====================================================================
   SZKOŁA RODZENIA (tryb B): różowa szata + karty terminów.
   Źródło: design/wizualizacje/formularz_sr.html. Scope .p-szkola-rodzenia
   zastępuje błękitne akcenty; poza tą stroną nic z tego nie działa.
   ===================================================================== */
.p-szkola-rodzenia .fpage{
  --sr:#cd88ba; --sr-deep:#8C4E7B; --sr-wash:#F9EFF6; --sr-wash2:#F2DFEC;
}
/* formularz krótki: jedna kolumna, bez aside */
.fpage-waski .wrap{grid-template-columns:1fr;max-width:820px}

/* Zapisy SR trzymają szerokość tekstu strony (uwaga Michała 28.07: siatka terminów
   stała wcięta, z pustymi pasami po bokach). Siatka terminów i karta danych idą na
   pełną szerokość - dzięki temu imię, telefon i e-mail mieszczą się w jednym rzędzie.
   W kolumnie do czytania zostają tylko nagłówki sekcji i ekran potwierdzenia. */
.p-szkola-rodzenia .fpage-waski .wrap{max-width:var(--maxw)}
.p-szkola-rodzenia .fpage .fsek,
.p-szkola-rodzenia .fpage .fdone{max-width:860px}
/* w szerokiej karcie same pola zostają szerokie, ale tekst pomocniczy i treść zgody
   łamiemy w rozsądnej mierze - zdanie ciągnące się przez 1130 px czyta się źle */
.p-szkola-rodzenia .fpage .consent .txt,
.p-szkola-rodzenia .fpage .fcard .fhint{max-width:80ch}

/* akcenty scope: focus, checked, zgody */
.p-szkola-rodzenia .fpage input:focus,
.p-szkola-rodzenia .fpage textarea:focus,
.p-szkola-rodzenia .fpage select:focus{border-color:var(--sr);box-shadow:0 0 0 3px var(--sr-wash2)}
.p-szkola-rodzenia .fpage .consent:hover{border-color:var(--sr)}
.p-szkola-rodzenia .fpage .consent input:checked~.box{background:var(--sr);border-color:var(--sr)}
.p-szkola-rodzenia .fpage .consent input:checked~.box::after{border-right-color:#fff;border-bottom-color:#fff}
.p-szkola-rodzenia .fpage .consent input:focus-visible~.box{outline-color:var(--sr)}
.p-szkola-rodzenia .fpage a:focus-visible,
.p-szkola-rodzenia .fpage input:focus-visible,
.p-szkola-rodzenia .fpage button:focus-visible,
.p-szkola-rodzenia .fpage textarea:focus-visible{outline-color:var(--sr)}

/* układ prosty: bez osi, bez wcięcia po lewej */
.fpage .fprosty{display:block}
.fpage .fprosty .fsubmit{margin-top:26px}

/* nagłówki sekcji (układ prosty, bez osi kroków) */
.fpage .fsek{margin:34px 0 14px}
.fpage .fsek:first-child{margin-top:0}
.fpage .fsek h2{font-size:1.3rem;color:var(--deep)}
.fpage .fsek p{color:var(--muted);font-size:.95rem;margin-top:4px}
.fpage textarea{min-height:96px;resize:vertical}

/* karty terminów zamiast selecta */
.fpage .mies{font-family:Jost;font-weight:600;font-size:1.05rem;color:var(--sr-deep,var(--w2));
  letter-spacing:.06em;text-transform:uppercase;margin:26px 0 12px}
.fpage .terminy{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fpage .termin{position:relative;cursor:pointer;display:block}
.fpage .termin input{position:absolute;opacity:0;pointer-events:none}
.fpage .termin .tk{display:grid;gap:6px;background:#fff;border:1.5px solid var(--line);
  border-radius:var(--r);padding:18px 20px;transition:all .15s ease;height:100%}
.fpage .termin:hover .tk{border-color:var(--sr,var(--fala));box-shadow:0 14px 30px rgba(140,78,123,.10)}
.fpage .termin input:checked+.tk{border-color:var(--sr,var(--fala));background:var(--sr-wash,var(--wash));
  box-shadow:0 14px 30px rgba(140,78,123,.14)}
.fpage .termin input:focus-visible+.tk{outline:3px solid var(--sr,var(--fala));outline-offset:3px}
.fpage .tk .data{font-family:Jost;font-weight:600;font-size:1.12rem;color:var(--deep)}
/* godzina niesie teraz całą drugą linię karty (nazwisko prowadzącej zeszło), więc czyta
   się jak informacja, nie jak przypis: większy stopień i kolor tekstu, nie szarość */
.fpage .tk .meta{font-family:Jost;font-weight:500;font-size:1.02rem;color:var(--ink)}
.fpage .tk .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.fpage .tk .chip{font-family:Jost;font-weight:500;font-size:.76rem;letter-spacing:.05em;
  border-radius:999px;padding:.3em .9em}
.fpage .chip-wolne{background:var(--sr-wash2,var(--wash2));color:var(--sr-deep,var(--w2))}
.fpage .chip-ostatnie{background:var(--gold);color:var(--deep)}
.fpage .chip-typ{background:var(--paper);border:1px solid var(--line);color:var(--muted)}
.fpage .chip-brak{background:var(--line);color:var(--muted)}
/* termin pełny: widoczny (dowód, że kurs żyje), ale nie do wybrania */
.fpage .termin.pelny{cursor:not-allowed}
.fpage .termin.pelny .tk{background:var(--paper);border-style:dashed;opacity:.65}
.fpage .termin.pelny:hover .tk{border-color:var(--line);box-shadow:none}
.fpage .tk .pick{position:absolute;right:14px;top:14px;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--line);background:#fff;transition:all .15s ease}
.fpage .termin input:checked+.tk .pick{background:var(--sr,var(--fala));border-color:var(--sr,var(--fala))}
/* Ptaszek siada środkiem w kółku. Kształt to prostokąt z dwiema krawędziami, więc jego
   „tusz" leży w prawym dolnym rogu pudełka; po obrocie o 45° wypada 2,3 px poniżej środka
   i dokładnie na osi pionowej. Stąd czyste wyśrodkowanie plus ta jedna poprawka w górę. */
.fpage .termin input:checked+.tk .pick::after{content:"";position:absolute;left:50%;top:50%;
  width:6px;height:10px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;
  transform:translate(-50%,calc(-50% - 2.3px)) rotate(45deg)}
/* przy błędzie NIE czerwienimy wszystkich kart terminów (9 czerwonych ramek to szum),
   wystarczy komunikat pod listą i podsumowanie nad formularzem */
.fpage .frow.err .ferr{margin-top:6px}

@media(max-width:900px){.fpage .terminy{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.fpage .terminy{grid-template-columns:1fr}}

@media(max-width:960px){
  .fpage .wrap{grid-template-columns:1fr;gap:40px}
  .faside{position:static;order:2}
  .fsteps{padding-left:52px}
  .fstep::before,.fstep .n{left:-52px;width:38px;height:38px}
  .fstep .n{font-size:1.15rem}
  .fsteps::before{left:19px}
  .fpage .frow-2,.fpage .frow-3{grid-template-columns:1fr}
  .fpage .fcard{padding:22px 20px}
  .fpage .lek-head{display:none}
  .fpage .lek-row{grid-template-columns:1fr 1fr 40px;gap:8px 10px}
  .fpage .lek-row input:first-child{grid-column:1 / -1}
  .fpage .lek-del{align-self:center}
  .fpage .fdone{padding:36px 22px}
}
/* Widget Turnstile ma sztywne 300 px (rozmiar normal). Na telefonach kolumna formularza
   jest węższa, więc widget wypychał stronę w bok (scrollWidth 368 przy 360 px).
   Skalujemy go proporcjonalnie zamiast zmieniać rozmiar na „compact" - wygląd zostaje. */
@media(max-width:460px){
  .fpage .cf-turnstile{overflow:hidden;min-height:58px}
  .fpage .cf-turnstile>div{transform:scale(.85);transform-origin:left top}
}
@media(max-width:400px){
  .fsteps{padding-left:44px}
  .fstep::before,.fstep .n{left:-44px;width:34px;height:34px}
  .fstep .n{font-size:1.05rem}
  .fsteps::before{left:17px}
  .fpage .fcard{padding:18px 16px}
  .fpage .lek-row{padding:10px 10px}
  .fpage .fsubmit .btn-ink{padding:.9em 1.4em;font-size:1rem}
}

/* ==== ankieta po wizycie (T054): gwiazdki i sekcja o Mapach ====
   Wiążący opis wyglądu: opinie_sms/wdrozenie/spec_ekranu_oceny.md §2 i §4.
   Twarda zasada: JEDEN kolor dla wszystkich pięciu ocen. Czerwień przy jedynce
   albo zieleń przy piątce to podpowiadanie odpowiedzi, a ankieta ma mierzyć
   jakość obsługi, nie produkować piątki. */
.fpage .pills-gwiazdki{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:start}
.fpage .pills-gwiazdki label{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.fpage .pills-gwiazdki .pill{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;width:100%;padding:.55em .3em;line-height:1.15}
.fpage .pills-gwiazdki .gw-ikona{font-size:1.45rem;color:var(--line);transition:color .12s}
.fpage .pills-gwiazdki .gw-liczba{font-family:Jost,system-ui,sans-serif;font-weight:600;font-size:1rem}
/* Podpis poza pigułką: może być dłuższy niż owal i nie rozpycha go od środka. */
.fpage .pills-gwiazdki .gw-podpis{font-size:.82rem;color:var(--muted);text-align:center;
  line-height:1.25;hyphens:auto}
.fpage .pills-gwiazdki input:checked+.pill .gw-ikona{color:var(--gold)}
.fpage .pills-gwiazdki input:checked~.gw-podpis{color:var(--ink);font-weight:600}
@media(max-width:520px){
  .fpage .pills-gwiazdki{gap:5px}
  .fpage .pills-gwiazdki .pill{padding:.5em .2em}
  .fpage .pills-gwiazdki .gw-ikona{font-size:1.2rem}
  .fpage .pills-gwiazdki .gw-podpis{font-size:.72rem}
}

/* Sekcja o Mapach: oddzielona linią, bez ramki przyciągającej wzrok, bez ikony.
   Ma wyglądać jak informacja, nie jak wezwanie do działania. */
.opinia-google{border-top:1px solid var(--line);padding-top:28px;margin-top:8px;max-width:64ch}
.opinia-google h2{font-size:1.25rem;margin-bottom:8px}
.opinia-google p{color:var(--muted);margin-bottom:18px}
.opinia-google-link{display:inline-block;text-decoration:underline;font-weight:500;
  padding:2px 0;color:var(--ink)}
.opinia-google-link:hover{text-decoration-thickness:2px}
.opinia-stopka{margin-top:22px;max-width:64ch}
.opinia-stopka a{text-decoration:underline}