/* Miejsce na pasek przewijania zarezerwowane od początku – przy wczytywaniu pasek pojawiał się z opóźnieniem
   i wyśrodkowana treść przeskakiwała w bok (na telefonie bez znaczenia – tam pasek nie zajmuje miejsca) */
html { scrollbar-gutter: stable; }

/* ---------- Kolory marki ----------
   róża (logo)      #a8414f   pudrowy róż  #fdf5f6 / linie #f3dde1
   zgaszony błękit  #386f94   (główny kolor przycisków i linków zamiast niebieskiego Bootstrapa) */
:root {
    --bs-primary: #386f94;
    --bs-primary-rgb: 56, 111, 148;
    --bs-primary-text-emphasis: #1f3f55;
    --bs-primary-bg-subtle: #eaf1f6;
    --bs-primary-border-subtle: #c3d6e4;
    --bs-link-color: #386f94;
    --bs-link-color-rgb: 56, 111, 148;
    --bs-link-hover-color: #2e5d7d;
    --bs-link-hover-color-rgb: 46, 93, 125;
    --bs-focus-ring-color: rgba(56, 111, 148, .25);
}
.btn-primary {
    --bs-btn-bg: #386f94; --bs-btn-border-color: #386f94;
    --bs-btn-hover-bg: #2e5d7d; --bs-btn-hover-border-color: #2e5d7d;
    --bs-btn-active-bg: #284f6a; --bs-btn-active-border-color: #284f6a;
    --bs-btn-disabled-bg: #386f94; --bs-btn-disabled-border-color: #386f94;
    --bs-btn-focus-shadow-rgb: 56, 111, 148;
}
.btn-outline-primary {
    --bs-btn-color: #386f94; --bs-btn-border-color: #386f94;
    --bs-btn-hover-bg: #386f94; --bs-btn-hover-border-color: #386f94;
    --bs-btn-active-bg: #386f94; --bs-btn-active-border-color: #386f94;
    --bs-btn-disabled-color: #386f94; --bs-btn-disabled-border-color: #386f94;
    --bs-btn-focus-shadow-rgb: 56, 111, 148;
}
.dropdown-menu { --bs-dropdown-link-active-bg: #386f94; --bs-dropdown-link-hover-bg: #eaf1f6; }   /* najechanie: delikatny błękit jak .btn-miekki */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #9bb7ca; box-shadow: 0 0 0 .25rem rgba(56, 111, 148, .25);
}
.form-check-input:checked { background-color: #386f94; border-color: #386f94; }
/* Okienko „Zmień dostęp” (panel admina) szersze: data · „Testowy | Premium” · „Cofnij zmiany” w jednej linii;
   pole daty nie węższe niż 158 px (inaczej ucina datę), na telefonie wiersz się łamie */
.okno-dostepu { --bs-modal-width: 560px; }
/* Nagłówek okienka na pudrowym różu z różową linią – jak nagłówek formularzy (.naglowek-formularza) */
.naglowek-okna { background: #fdf5f6; border-bottom-color: #f3dde1; }
.wiersz-dostepu input[type="date"] { flex: 1 1 158px; min-width: 158px; }
/* Przełączniki (nocleg, dieta…) jaśniejsze – ciemny błękit za bardzo rzucał się w oczy */
.form-switch .form-check-input:checked { background-color: #9dbfd8; border-color: #9dbfd8; }
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239bb7ca'/%3e%3c/svg%3e");
}

/* Logo – plik public/logo.svg (Playfair Display z brylancikiem nad „i”) */
.logo { padding: 5px 0; }
.logo img { height: 26px; display: block; }
/* Nagłówek: pudrowy róż, cienki jasnoróżowy pasek na górze */
.naglowek { background-color: #fdf5f6; border-top: 2px solid #d9a3ad; border-bottom: 1px solid #f3dde1; }
/* Otwarte menu ☰ (telefon): mocniejsza linia i delikatny cień – menu nie zlewa się z różowym blokiem tytułu pod nim */
.naglowek:has(#menu.show, #menu.collapsing) { position: relative; z-index: 10; border-bottom-color: #e8c6cd; box-shadow: 0 4px 12px rgba(168, 65, 79, .1); }
/* Kółko z inicjałami (menu konta na komputerze): w kolorze logo z białymi literami – białe na pudrowym różu nagłówka znikało */
.inicjaly { width: 38px; height: 38px; background-color: #a8414f; color: #fff; font-size: .95rem; letter-spacing: .02em; }
.nav-link:hover .inicjaly, .nav-link.show .inicjaly { background-color: #8f3643; }
/* Aktywna pigułka filtra – w kolorze swojego znacznika z legendy (status, priorytet, żółta kropka),
   filtry bez koloru (nocleg, transport, dieta, dzieci) ciemnoszare. Napis i znaczniki zawsze białe. */
.pigulka-aktywna { --tlo-aktywnej: #5c636a; --tekst-aktywnej: #fff;
                   background-color: var(--tlo-aktywnej) !important; border-color: var(--tlo-aktywnej) !important; color: var(--tekst-aktywnej) !important; }
.pigulka-aktywna[class*="status-"]    { --tlo-aktywnej: var(--kolor-statusu); }
.pigulka-aktywna[class*="priorytet-"] { --tlo-aktywnej: var(--kolor-priorytetu); }
.pigulka-aktywna.niepewne-dane        { --tlo-aktywnej: #8f7db5; }
.pigulka-aktywna.przyjda              { --tlo-aktywnej: #48a585; }   /* odpowiedź osób – kolory kopert „Potwierdzone” / „Odmowa” */
.pigulka-aktywna.nie-przyjda          { --tlo-aktywnej: #9aa1a9; }

/* Drugorzędny przycisk: po najechaniu tylko jasne tło zamiast pełnego wypełnienia */
.btn-miekki { --bs-btn-hover-bg: #eaf1f6; --bs-btn-hover-color: #386f94; --bs-btn-hover-border-color: #386f94;
              --bs-btn-active-bg: #d5e3ed; --bs-btn-active-color: #386f94; --bs-btn-active-border-color: #386f94; }

/* „×” w rogu aktywnej pigułki filtra (zdjęcie filtra) – nałożony na pigułkę, więc nie zmienia jej szerokości */
.pigulka-aktywna { position: relative; }
.zdejmij-filtr { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #495057; border: 1px solid #ced4da;
                 display: flex; align-items: center; justify-content: center; font-size: .8rem; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,.15); }

/* „Usuń zaproszenie” – kolor logo zamiast jaskrawej czerwieni Bootstrapa (btn-outline-danger); po najechaniu wypełniony */
.btn-usun { --bs-btn-color: #a8414f; --bs-btn-border-color: #a8414f;
            --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a8414f; --bs-btn-hover-border-color: #a8414f;
            --bs-btn-active-color: #fff; --bs-btn-active-bg: #8f3643; --bs-btn-active-border-color: #8f3643;
            --bs-btn-focus-shadow-rgb: 168, 65, 79; }
/* „Anuluj” obok kosza i „Zapisz” na wąskim telefonie: 12 px od krawędzi (8 px za ciasno, 16 px nie mieściło się przy 320 px) */
.przycisk-anuluj { --bs-btn-padding-x: .75rem; }
/* Na telefonie sam okrągły kosz w linii z „Zapisz / Anuluj” – wysokość jak one (zwykły padding przycisku),
   szerokość tym samym wzorem co wysokość przycisku w Bootstrapie (aspect-ratio w linii flex nie działa) */
@media (max-width: 767.98px) {
    .przycisk-usun { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
                     width: calc(var(--bs-btn-font-size) * var(--bs-btn-line-height) + 2 * var(--bs-btn-padding-y) + 2 * var(--bs-btn-border-width));
                     padding-left: 0; padding-right: 0; border-radius: 50% !important; }
}

/* Kosz (okrągły przycisk usuwania) – bez tła, po najechaniu pudrowy róż i ciemnoczerwona ramka */
.btn-kosz { --bs-btn-bg: transparent; --bs-btn-hover-bg: #fdf5f6; --bs-btn-hover-border-color: #a8414f;
            --bs-btn-active-bg: #f3dde1; --bs-btn-active-border-color: #a8414f; }
/* klasa .border z Bootstrapa wymusza szarą ramkę – nadpisujemy ją przy najechaniu */
.btn-kosz:hover { border-color: #a8414f !important; }

/* Ramka osoby: „Osoba towarzysząca | Dziecko” w miejscu nagłówka – jak przełącznik „Koperty | Lista”, niższy (32 px jak kosz) */
.przelacznik-widoku.przelacznik-maly { height: 32px; }
.przelacznik-widoku.przelacznik-maly a,
.przelacznik-widoku.przelacznik-maly button,
.przelacznik-widoku.przelacznik-maly span.aktywny { height: 26px; padding: 0 .65rem; font-size: .8125rem; }
/* Ramka osoby w układzie zwartym: przełączniki (nocleg…) w osobnej linii pod polami, od xl w linii pigułki */
.przelaczniki-osoby { width: 100%; }
@media (min-width: 1200px) { .przelaczniki-osoby { width: auto; } }
/* Pływające etykiety w ramce osoby i w polach .pole-plywajace (nazwa, uwagi) – niższe niż w Bootstrapie (50 zamiast 58 px) */
:is(.ramka-osoby .form-floating, .pole-plywajace) > .form-control { height: 50px; min-height: 50px; line-height: 1.25; }
:is(.ramka-osoby .form-floating, .pole-plywajace) > label { padding: .8rem .75rem; }
:is(.ramka-osoby .form-floating, .pole-plywajace) > .form-control:focus,
:is(.ramka-osoby .form-floating, .pole-plywajace) > .form-control:not(:placeholder-shown) { padding-top: 1.35rem; padding-bottom: .3rem; }
:is(.ramka-osoby .form-floating, .pole-plywajace) > .form-control:focus ~ label,
:is(.ramka-osoby .form-floating, .pole-plywajace) > .form-control:not(:placeholder-shown) ~ label { transform: scale(.8) translateY(-.6rem) translateX(.15rem); }
/* Puste pole: etykieta jasnoszara – od razu widać, że nic nie wpisano (wypełnione i aktywne w zwykłym kolorze) */
:is(.ramka-osoby .form-floating, .pole-plywajace) > .form-control:placeholder-shown:not(:focus) ~ label { color: #b8bec5; }
:is(.ramka-osoby .form-floating, .pole-plywajace) > .form-control:focus ~ label::after,
:is(.ramka-osoby .form-floating, .pole-plywajace) > .form-control:not(:placeholder-shown) ~ label::after { background: transparent; }
/* Uwagi: pole na dwie linie; przykład (placeholder) widać po kliknięciu w puste pole, gdy etykieta jest już u góry */
.form-floating.pole-plywajace > textarea.form-control { height: 76px; min-height: 76px; }
.form-floating.pole-plywajace > .form-control:focus::placeholder { color: #b8bec5; }
/* Podpowiedź „i” w tekście (przy „Pewnych danych” – ramka osoby, okienko „Zmień zaznaczone”), z większym polem do stuknięcia */
.podpowiedz-tekst { all: unset; cursor: pointer; color: #a8414f; padding: .35rem; margin: -.35rem -.35rem -.35rem 0; line-height: 1; }
.podpowiedz-tekst:focus-visible { outline: 2px solid #a8414f; border-radius: 50%; }
/* Sam nagłówek ramki (gość główny, obsługa) – pigułka jak aktywna w przełączniku, bez reakcji na najechanie */
.przelacznik-widoku span.aktywny { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
                                   background: #cf7c88; color: #fff; }
.typ-osoby-przelacznik .napis-krotki { display: none; }
/* Z koszem obok nie mieści się w ramce: poniżej 400 px bez ikonek, poniżej 360 px „Towarzysząca” */
@media (max-width: 399.98px) {
    .typ-osoby-przelacznik .bi { display: none; }
}
@media (max-width: 359.98px) {
    .typ-osoby-przelacznik .napis-dlugi { display: none; }
    .typ-osoby-przelacznik .napis-krotki { display: inline; }
}

/* Karta zaproszenia – „koperta”: prawie ostre rogi, pasek po lewej = status, pigułka w prawym górnym rogu = priorytet */
.koperta { border-radius: 4px; overflow: hidden; }
/* Pasek statusu jako prosty prostokąt (nie ramka – ramka przy zaokrąglonych rogach ma „wygięte” końce) */
.koperta[class*="status-"]::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--kolor-statusu);
}
/* Priorytet = pigułka ze słowem w prawym dolnym rogu (_karta): VIP wypełniona w kolorze logo, Rezerwa biała z różową obwódką,
   Pozostali (najczęstsi) bez oznaczenia. Trójkąt w rogu odrzucony – nieczytelny bez legendy; na górze w linii nazwy też odrzucona. „+N” stoi przed nią (.rog-karty) */
.pigulka-priorytetu { flex-shrink: 0; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
                      line-height: 1.4; padding: .1rem .5rem; }
/* VIP jak „Rezerwa” (obwódka), ale z bardzo jasnym różem i napisem w kolorze logo – wypełniona różem #cf7c88 przy wielu
   VIP-ach za bardzo „pigułkowała” koperty */
.pigulka-priorytetu.priorytet-1 { background: #fdf5f6; color: #a8414f; border: 1px solid #e8c6cd; }
.pigulka-priorytetu.priorytet-3 { background: #fff; color: #b0646f; border: 1px solid #e8c6cd; }
/* Odmowa: karta przygaszona, bez pigułki priorytetu (_karta) */
.koperta.status-odmowa { opacity: .65; background-color: #f1f2f4; filter: grayscale(1); }   /* wszystko w karcie szare, przygaszone */
/* Osoba, która nie przyjdzie (reszta zaproszenia przyjdzie): przekreślona i szara, ikonki bledsze, bez kropki „niepewne dane” */
.osoba-nie-przyjdzie { color: #adb5bd; }
.osoba-nie-przyjdzie > span:not(.osoba-kropka) { text-decoration: line-through; }
.osoba-nie-przyjdzie .bi, .osoba-nie-przyjdzie .text-muted { color: #ced4da !important; }
.osoba-nie-przyjdzie .kropka-niezweryfikowane { display: none; }
/* Karta odmowy (nikt nie przyjdzie) jest już cała przygaszona – tylko przekreślenie, bez dodatkowego jasnoszarego */
.koperta.status-odmowa .osoba-nie-przyjdzie { color: inherit; }
.koperta.status-odmowa .osoba-nie-przyjdzie :is(.bi, .text-muted) { color: inherit !important; }

/* Kolory statusów i priorytetów – używane przez karty i legendę w filtrach */
.status-do_wyslania  { --kolor-statusu: #d4895a; }   /* przygaszony pomarańcz (#f08c3a był za jaskrawy) = czeka na działanie (nie żółty – ten jest dla „Niepewnych danych”) */
.status-wyslane      { --kolor-statusu: #6f9cc3; }   /* jasny błękit – wyraźnie inny niż zieleń „Potwierdzone” */
.status-potwierdzone { --kolor-statusu: #48a585; }
.status-odmowa       { --kolor-statusu: #9aa1a9; }   /* szary = wygaszone */
.priorytet-1 { --kolor-priorytetu: #a8414f; }   /* VIP – kolor logo (odcienie w aktywnych pigułkach filtrów) */
.priorytet-2 { --kolor-priorytetu: #c46775; }   /* Pozostali – jaśniejszy odcień logo */
.priorytet-3 { --kolor-priorytetu: #d9909b; }   /* Rezerwa – najjaśniejszy odcień */

/* Legenda w pigułkach filtrów: kreska = status (priorytet bez znacznika – na karcie jest słowem) */
.legenda-status { display: inline-block; width: 4px; height: 14px; border-radius: 2px; background: var(--kolor-statusu); }
.min-w-0 { min-width: 0; }

/* Niepewne dane: lawendowy znak zapytania (bi-question-circle) przed imieniem – jak pozostałe cechy osoby ikonką; dawna kropka
   nic nie mówiła bez legendy, wykrzyknik kojarzył się z błędem. Rozmiar jak ikonki osób (.small), kolor tekstu lawendy */
.kropka-niezweryfikowane { color: #6f5f99; font-size: .8em; line-height: 1; flex-shrink: 0; }

/* Nazwa zaproszenia na karcie = link do edycji; mały ołówek w kolorze logo za nazwą podpowiada, że jest klikalna */
.olowek-karty { flex-shrink: 0; color: #a8414f; font-size: .8rem; font-weight: 400; }
.telefon-osoby { color: #a8414f; }   /* słuchawka w kolorze logo – link „zadzwoń” (jak ołówek i dymek uwag) */
.tytul-karty:hover .text-truncate { text-decoration: underline; text-decoration-color: #e8c6cd; text-underline-offset: 3px; }

/* Osoby na karcie: zawsze dokładnie 2 linie (równe koperty); nadmiar chowa skrypt i pokazuje „+N” */
.osoby-karty { height: calc(2 * 1.5rem + .25rem); overflow: hidden; align-content: flex-start; position: relative; }
/* Prawy dolny róg: „+N” i pigułka priorytetu obok siebie; osoby, które by na nie nachodziły, chowa skrypt (goscie/index) */
.rog-karty { position: absolute; right: 0; bottom: 3px; display: flex; align-items: center; gap: 6px; }
.osoby-wiecej { font-size: .8rem; line-height: 1.4; color: #a8414f; text-decoration: none; padding: 0 .4rem;
                border: 1px solid #f3dde1; border-radius: 50rem; background: #fdf5f6; }
.osoby-wiecej:hover { color: #a8414f; background: #f3dde1; }
/* Niewidoczny element łamiący linię – skrypt dzieli nim osoby na dwie linie */
.osoby-karty .lamanie { flex-basis: 100%; height: .25rem; }
.osoby-karty.podzielone { row-gap: 0 !important; } /* odstęp między liniami daje wtedy sam element .lamanie */

/* W aktywnej pigułce znaczniki legendy w kolorze napisu – w kolorze tła by zniknęły */
.pigulka-aktywna .legenda-status { --kolor-statusu: var(--tekst-aktywnej); }
.pigulka-aktywna .kropka-niezweryfikowane { color: var(--tekst-aktywnej); }
/* Filtry „Przyjdą” / „Nie przyjdą”: ✓ ciemniejsza zieleń, ✗ szary – jak kolumna „Przyjdzie” w „Liście” */
.znacznik-tak { color: #337a62; }
.znacznik-nie { color: #6c757d; }
.pigulka-aktywna .znacznik-odpowiedzi { color: var(--tekst-aktywnej); }

/* Kółka podsumowania (goscie/_kolo): 128 px, na telefonie mniejsze, 3 w rzędzie i bez pigułek (ukryte w widoku) */
.kolo { width: 128px; height: 128px; }
.kolo-liczba { font-size: 2.25rem; font-weight: 500 !important; }   /* sama liczba, bez „/ X” */
.kolo-jednostka { font-size: .75rem; line-height: 1; margin-top: .15rem; }   /* np. „dni” pod liczbą w kółku terminu wysyłki */
/* Gruby pasek postępu jedzie po cienkim bladym torze (oba na tym samym promieniu) */
.kolo-tor { stroke-width: 2; }
.kolo-postep { stroke-width: 10; animation: kolo-wypelnij .8s ease-out; }
/* Przy wczytaniu pasek wypełnia się od zera (326.73 = obwód kółka o promieniu 52 z goscie/_kolo) */
@keyframes kolo-wypelnij { from { stroke-dashoffset: 326.73; } }
@media (prefers-reduced-motion: reduce) { .kolo-postep { animation: none; } }
/* Grot na końcu łuku (minutnik „Do wysyłki”) pojawia się po animacji wypełniania – inaczej stałby przed łukiem */
.kolo-grot { animation: kolo-grot .8s linear; }
@keyframes kolo-grot { 0%, 90% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kolo-grot { animation: none; } }
/* Telefon: dymek po stuknięciu w kółko (zamiast pigułki pod kółkiem) */
@media (max-width: 767.98px) { .kolo[data-dymek] { cursor: pointer; -webkit-tap-highlight-color: transparent; } }
.dymek-kola { --bs-popover-font-size: .8rem; --bs-popover-body-padding-x: .75rem; --bs-popover-body-padding-y: .4rem; --bs-popover-body-color: #fff; }   /* napis biały, tło w kolorze kółka ustawia skrypt w goscie/_podsumowanie */
/* Uwagi na karcie: ikonka jako przycisk z większym polem do stuknięcia (ujemny margines – karta się nie zmienia), treść w dymku z zachowaniem nowych linii */
.ikona-uwag { padding: .35rem !important; margin: -.35rem; line-height: 1; font-size: inherit; color: #a8414f !important; }   /* rozmiar jak linijka informacji, kolor logo (jak ołówek edycji) */
.dymek-uwag { --bs-popover-font-size: .875rem; --bs-popover-bg: #fdf5f6; --bs-popover-border-color: #f3dde1; white-space: pre-line; }   /* pudrowy róż jak nagłówek strony */
@media (max-width: 767.98px) {
    /* Kółka blisko siebie – blok max 340 px, wyśrodkowany (kolumna ok. 113 px – „ZAJĘTE MIEJSCA” mieści się też w czcionkach telefonów, szerszych niż Segoe) */
    .podsumowanie { --bs-gutter-x: 0; --bs-gutter-y: .25rem; max-width: 340px; margin-left: auto !important; margin-right: auto !important; }
    .podsumowanie .kolo { width: 80px; height: 80px; }
    .podsumowanie > .col > div { padding: .25rem 0 !important; }   /* kolumna bez bocznych odstępów – kółko równo nad podpisem */
    .podsumowanie .kolo-liczba { font-size: 1.4rem; }
    .podsumowanie .kolo-jednostka { font-size: .6rem; margin-top: .1rem; }
    .podsumowanie .text-uppercase { font-size: .75rem; margin: .4rem 0 0 !important; }
    .podsumowanie .kolo-tor { stroke-width: 1.5; }   /* 1 px na ekranie */
    .podsumowanie .kolo-postep { stroke-width: 10; }   /* na małym kółku cieńszy pasek ginie */
    .podsumowanie .podpis-kola { color: var(--kolor-podpisu) !important; }   /* podpis w kolorze kółka (na komputerze szary) */
}
@media (max-width: 359.98px) {
    .podsumowanie .podpis-kola { letter-spacing: 0 !important; }   /* 320 px: „ZAJĘTE MIEJSCA” mieści się w jednej linii */
}
/* Nagłówki sekcji (Goście, Obsługa): napis w kolorze logo (bez tła), pigułka aktywnego filtra, pod nimi różowa linia i liczba osób */
.etykieta-sekcji { color: #a8414f; font-size: 1.15rem; line-height: 1.5rem; font-weight: 400; white-space: nowrap; position: relative; }   /* wysokość jak pigułka filtra (24 px) – pogrubienie trafia w linię z pigułką i bez niej */
/* Pogrubienie linii pod samym napisem (trochę dłuższe niż napis): 3 px na cienkiej linii pod nagłówkiem,
   wyśrodkowane na niej – linia zaczyna się .4rem (row-gap nagłówka) pod napisem */
.etykieta-sekcji::after { content: ""; position: absolute; left: 0; width: calc(100% + 6px); top: calc(100% + .4rem - 1px); height: 3px; border-radius: 2px; background: #a8414f; }
/* Pigułka aktywnego filtra w wierszu licznika – prosta, biała, obwódka w kolorze znacznika filtra (legenda),
   znacznik w środku w swoim kolorze, „×” zdejmuje filtr. Filtry bez koloru (nocleg, dieta…) – ciemnoszara jak ich aktywne pigułki */
.pigulka-sekcji { --obrys-filtra: #5c636a; height: 26px; padding: 0 .6rem; gap: .4rem; font-size: .8rem; line-height: 1;
                  background: #fff; color: #495057; border: 1.5px solid var(--obrys-filtra); }
.pigulka-sekcji[class*="status-"]    { --obrys-filtra: var(--kolor-statusu); }
.pigulka-sekcji[class*="priorytet-"] { --obrys-filtra: var(--kolor-priorytetu); }
.pigulka-sekcji.niepewne-dane        { --obrys-filtra: #8f7db5; }
.pigulka-sekcji.przyjda              { --obrys-filtra: #48a585; }
.pigulka-sekcji.nie-przyjda          { --obrys-filtra: #9aa1a9; }
.pigulka-sekcji:hover { background: #f8f9fa; color: #495057; }
.pigulka-sekcji .bi-x-lg { font-size: .6rem; color: #868e96; }
.linia-sekcji { color: #e8c6cd; opacity: 1; }   /* różowa jak linie filtrów */
/* Nagłówek sekcji: sam napis, pod nim linia na całą szerokość (zawijanie + kolejność); pod linią osobny wiersz
   z licznikiem, filtrem i przełącznikiem widoku (goscie/_wiersz-sekcji) */
.naglowek-sekcji { flex-wrap: wrap; row-gap: .4rem !important; }
.naglowek-sekcji .linia-sekcji { order: 1; flex-basis: 100%; margin-left: 0 !important; }
.licznik-sekcji { color: #a8414f; }   /* liczba zaproszeń i osób w kolorze logo */

/* Telefon: pływający „+” w prawym dolnym rogu, po stuknięciu menu „Dodaj gości / obsługę” */
/* Przyklejony do dołu ekranu – na końcu strony nachodzi na stopkę (podnoszenie nad stopkę odrzucone: zasłaniało ostatnie wiersze listy) */
.przycisk-plywajacy { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030; }
.przycisk-plywajacy > .btn { width: 48px; height: 48px; padding: 0; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; }   /* bez obwódki – biała i półprzezroczysta na winie stopki odrzucone */
.przycisk-plywajacy .dropdown-item { padding: .6rem 1.25rem; }
/* Komputer: „+” ukryty, dopóki widać przyciski obok nagłówka – pojawia się po przewinięciu (klasa .widoczny, skrypt w goscie/index) */
@media (min-width: 768px) {
    .przycisk-plywajacy { right: 2rem; bottom: 2rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; }   /* dalej od krawędzi niż na telefonie (1.25rem) */
    .przycisk-plywajacy.widoczny { opacity: 1; visibility: visible; transform: none; }
}
/* Telefon: toast „Zapisano” u góry na środku – w prawym dolnym rogu zasłaniałby „+” */
@media (max-width: 767.98px) {
    .toast-miejsce { top: 0; bottom: auto !important; left: 50%; right: auto !important; transform: translateX(-50%); }
}


/* Pas filtrów: równy, przygaszony różowo-szary na całą szerokość ekranu (border-image rozciąga tło poza kontener
   bez przewijania w bok), cienkie linie u góry i na dole. Gradient biel → róż i nagłówki grup odrzucone –
   za wysokie i za jasne (w nocy przy jasnym ekranie białe pigułki zlewały się z tłem) */
.pasek-filtrow {
    padding: .9rem 0;
    border-image: linear-gradient(#f4eef0 0 0) fill 0 / / 0 100vmax;
    border-top: 1px solid #e9dbdf; border-bottom: 1px solid #e9dbdf;
}

/* Góra listy gości (nagłówek + kółka): białe tło na całą szerokość, od samego paska nagłówka */
.pasek-bialy {
    display: flow-root;            /* marginesy dzieci nie „wypadają” poza białe tło */
    margin-top: -1.5rem; padding-top: 1.5rem;   /* zakrywa odstęp pt-4 z <main> */
    border-image: linear-gradient(#fff 0 0) fill 0 / / 0 100vmax;
}

/* Odliczanie dni do ślubu przy tytule */
.pigulka-dni { padding-left: 12px; padding-right: 12px; background-color: #fdf5f6; border: 1px solid #f3dde1; color: #a8414f; }
.pigulka-dni .bi-heart-fill { font-size: .65em; margin-right: 2px; }   /* pełne serce mniejsze od napisu, z odstępem od tekstu */

/* Telefon: blok tytułu na pudrowym różu na całą szerokość – przedłużenie nagłówka z logo,
   na dole cienka różowa linia (w gradiencie, bo border-image zastępuje zwykłą ramkę) */
@media (max-width: 767.98px) {
    .naglowek-strony {
        margin-top: -1.5rem; padding: 1.75rem 0;   /* od samego paska nagłówka (zakrywa padding-top .pasek-bialy) */
        border-image: linear-gradient(to top, #f3dde1 1px, #fdf5f6 1px) fill 0 / / 0 100vmax;
    }
    .naglowek-strony .pigulka-dni { background-color: #fff; }
    .naglowek-strony .para-i-data { flex-basis: 100%; }   /* licznik dni zawsze w nowej linii pod imionami i datą */
}

/* Tytuł strony i nagłówki sekcji (Goście, Obsługa) w kolorze logo; szare dopiski z liczbami mają własne text-muted */
.tytul-strony { color: #a8414f; }

/* Stopka: ciemne wino (strona zaczyna się i kończy w barwach logo), jasne napisy, bez paska na dole */
.stopka { background-color: #3d4247; color: #dee2e6; }   /* ciemny szary (wcześniej ciemne wino #7d2f3a) */
.stopka a { color: #f1f3f5; }
.stopka a:hover { color: #fff; }
/* Telefon (teksty w dwóch liniach): pionowy pasek przed nimi, trochę jaśniejszy niż stopka */
@media (max-width: 767.98px) {
    .stopka:not(.stopka-pelna) .container { position: relative; padding-left: calc(.75rem + 3px + .75rem); }
    .stopka:not(.stopka-pelna) .container::before { content: ""; position: absolute; left: .75rem; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: #5a6067; }
}
/* Pełna stopka (strony dla wszystkich): białe logo, opis, kolumny linków, na dole linijka z danymi firmy */
.stopka-pelna { padding: 3.5rem 0 1.5rem; font-size: .9rem; }
.stopka-logo { height: 28px; width: auto; filter: brightness(0) invert(1); opacity: .9; margin-bottom: 1rem; }
.stopka-opis { color: #adb5bd; max-width: 340px; margin: 0; }
.stopka-email { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; text-decoration: none; }
.stopka-tytul { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #adb5bd; margin-bottom: .9rem; }
.stopka-linki { list-style: none; padding: 0; margin: 0; }
.stopka-linki li + li { margin-top: .5rem; }
.stopka-linki a { text-decoration: none; }
.stopka-dol { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #50565c; color: #adb5bd; font-size: .8rem; }

/* Przycisk menu ☰ na telefonie: bez ramki, cienkie kreski w kolorze logo, bez grubej obwódki po kliknięciu */
.navbar-toggler { border: 0; padding: .25rem; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
    width: 1.35em; height: 1.35em;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23a8414f' stroke-linecap='round' stroke-width='1.5' d='M5 8h20M5 15h20M5 22h20'/%3e%3c/svg%3e");
}

/* E-mail w menu telefonu jako biała pigułka – żeby nie wyglądał jak pozycja menu */
.menu-email { display: inline-block; font-size: .85rem; color: #495057; background: #fff; min-width: 0;
               border: 1px solid #f3dde1; border-radius: 50rem; padding: .25rem .75rem; }
.menu-email .bi { color: #a8414f; }
/* Komputer: e-mail na górze menu konta = link do /konto, zębatka po prawej w kolorze logo */
/* Długi e-mail skracany kropeczkami zamiast poszerzać menu (text-truncate w elemencie flex potrzebuje min-width: 0) */
.dropdown-menu:has(.menu-konto) { max-width: 260px; }
.menu-konto > span { min-width: 0; }
@media (max-width: 767.98px) {
    .naglowek > .container { padding-left: 1.25rem; padding-right: 1.25rem; }   /* logo i ☰ dalej od krawędzi */
}

/* Filtry jednym ciągiem (bez nagłówków „Zaproszenia” / „Osoby”). Komputer: zaproszenia w pierwszym rzędzie,
   osoby w drugim (wszystkie w jednym nie mieszczą się – ok. 1410 px); padding-top – miejsce na „×” aktywnej pigułki */
.filtry-rzad { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; padding-top: 6px; }
.kreska-filtrow { flex-basis: 100%; height: 0; }   /* komputer: łamanie rzędu między grupami */
/* Pigułka: wyraźna szara obwódka i ciemny napis (czytelne w nocy), licznik zwykłą liczbą bez kółka */
.pigulka-filtra { height: 36px; padding: 0 .9rem; gap: .45rem; font-size: .9375rem; color: #343a40; border-color: #cfd4da !important;
                  user-select: none; -webkit-tap-highlight-color: transparent; }
.pigulka-filtra:hover { border-color: #adb5bd !important; }
.licznik-filtra { font-weight: 600; font-size: .8rem; color: #6c757d; }
.pigulka-aktywna .licznik-filtra { color: #fff; opacity: .85; }
/* Pusty filtr (licznik 0): całkiem nieaktywny – dotknięcie na telefonie nie zaznacza tekstu ani nie proponuje wyszukiwania */
.pigulka-pusta { pointer-events: none; filter: grayscale(1); }   /* także znaczniki legendy szare – wygląda na wygaszone, nie na zepsute */
/* Telefon: jeden rząd przesuwany palcem, od krawędzi do krawędzi ekranu, grupy oddzielone pionową kreską;
   zanikanie tylko przy krawędzi, za którą są jeszcze pigułki (klasy ustawia skrypt w goscie/index) */
@media (max-width: 767.98px) {
    .pasek-filtrow { padding: .6rem 0; }
    .filtry-rzad {
        flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
        margin: 0 calc(-.5 * var(--bs-gutter-x, 1.5rem)); padding: 6px calc(.5 * var(--bs-gutter-x, 1.5rem)) 2px;
        --zanik-lewy: 0px; --zanik-prawy: 0px;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--zanik-lewy), #000 calc(100% - var(--zanik-prawy)), transparent);
                mask-image: linear-gradient(to right, transparent, #000 var(--zanik-lewy), #000 calc(100% - var(--zanik-prawy)), transparent);
    }
    .filtry-rzad::-webkit-scrollbar { display: none; }
    .filtry-rzad .tylko-komputer { display: none !important; }   /* filtry z zerem tylko na komputerze (!important – pigułki mają d-flex) */
    .filtry-rzad.wiecej-z-lewej { --zanik-lewy: 32px; }
    .filtry-rzad.wiecej-z-prawej { --zanik-prawy: 32px; }
    .kreska-filtrow { flex-basis: auto; width: 1px; height: 24px; background: #cdbfc3; margin: 0 .35rem; flex-shrink: 0; }
    .pigulka-filtra { padding: 0 .8rem; font-size: .875rem; flex-shrink: 0; }
}
/* Wyszukiwarka nad pigułkami filtrów: pigułka 36 px jak filtry, lupa po lewej, „×” po prawej (wbudowany „×” przeglądarki ukryty);
   na komputerze wyśrodkowana, 340 px, na telefonie na całą szerokość */
.szukaj-gosci { position: relative; max-width: 340px; margin: 0 auto .5rem; }
.szukaj-gosci .form-control { height: 36px; padding: 0 2.25rem; font-size: .9375rem; border-color: #cfd4da; }
.szukaj-gosci .form-control::placeholder { color: #9aa1a9; }
.szukaj-gosci .form-control::-webkit-search-cancel-button { display: none; }
.szukaj-lupa { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); font-size: .85rem; color: #868e96; pointer-events: none; }
.szukaj-wyczysc { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%;
                  background: transparent; color: #6c757d; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.szukaj-wyczysc:hover { background: #eef0f2; color: #343a40; }
/* Komputer: wyszukiwarka w rzędzie zaproszeń (po lewej), osoby pod spodem – dwa rzędy podobnej szerokości zamiast
   „piramidy” (wyszukiwarka, zaproszenia, osoby – każdy rząd szerszy). #filtry i .filtry-rzad bez własnego pudełka
   (display: contents), więc pole i pigułki to jeden ciąg; kreska między grupami dalej łamie rząd */
@media (min-width: 768px) {
    .pasek-filtrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; padding-top: calc(.9rem + 6px); }
    #filtry, .pasek-filtrow .filtry-rzad { display: contents; }
    .szukaj-gosci { flex: 0 0 300px; max-width: none; margin: 0 .5rem 0 0; }   /* szerokość dociąga skrypt w goscie/index */
}
@media (max-width: 767.98px) {
    .szukaj-gosci { max-width: none; margin-bottom: .35rem; }
    .szukaj-gosci .form-control { font-size: 1rem; }   /* 16 px – iPhone nie powiększa strony po stuknięciu w pole */
}

/* Menu modułów („Lista gości”, później budżet i plan dnia): szary napis, aktywny w kolorze logo;
   na komputerze obok logo, aktywny z kreską 2 px pod napisem */
.menu-glowne .nav-link { color: #7a6468; }   /* ciepły szary z nutą różu – chłodny grafit #495057 gryzł się z pudrowym różem nagłówka */
.menu-glowne .nav-link:hover { color: #a8414f; }
.menu-glowne .nav-link.active { color: #a8414f; }
/* Telefon: linia nad modułami jak między grupami menu – bez niej „Lista gości” pod logo wyglądała jak podpis
   (:has(li) – bez pozycji, np. u admina, nie ma pustej linii) */
@media (max-width: 991.98px) {
    .menu-glowne:has(li) { border-top: 1px solid #f3dde1; margin-top: .5rem; padding-top: .5rem; }
}
@media (min-width: 992px) {
    .menu-glowne { margin-left: 1.5rem; }
    .menu-glowne .nav-link { position: relative; padding-left: .75rem; padding-right: .75rem; }
    .menu-glowne .nav-link.active::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: 0; height: 2px; border-radius: 1px; background: #a8414f; }
}

/* Kopie listy gości: wiersze oddzielone cienką linią, rodzaj kopii jako jasna pigułka
   (automatyczna szara, ręczna w różu logo, „przed przywróceniem” lawendowa) */
.lista-kopii li + li { border-top: 1px solid #eef0f2; }
.pigulka-kopii { font-size: .75rem; padding: .3em .7em; }
.pigulka-kopii.rodzaj-automatyczna { background: #f1f3f5; color: #495057; }
.pigulka-kopii.rodzaj-reczna { background: #fdf5f6; color: #a8414f; border: 1px solid #f3dde1; }
.pigulka-kopii.rodzaj-przed_przywroceniem { background: #f2eff6; color: #6f5f99; }

/* Linie w menu telefonu: delikatny róż, odrobinę mocniejszy niż tło menu */
.menu-linia { border-color: #f3dde1 !important; }

/* Ustawienia importu (status, priorytet, grupa, strona dla całej listy): pudrowy róż z cienką różową ramką jak nagłówki kart
   (mocny róż #f9e6ea z ramką w kolorze logo odrzucony – za bardzo krzyczał) */
.blok-zaproszenia { background-color: #fdf5f6; }
.blok-zaproszenia.border { border-color: #f3dde1 !important; }   /* tylko ramka bloku – nie pola w środku */
/* Nagłówek formularza zaproszenia / obsługi: tytuł + nazwa, status, priorytet… na pudrowym różu na całą szerokość
   karty (od krawędzi do krawędzi – ujemny margines = padding .card-body p-4), bez ramki, cienka linia na dole –
   inaczej niż ramki osób pod spodem */
.naglowek-formularza {
    margin: -1.5rem -1.5rem 1.5rem; padding: 1.5rem;
    background: #fdf5f6; border-bottom: 1px solid #f3dde1;
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}
/* Części jednej karty pod różowym nagłówkiem (np. „Dostęp i płatności”): cienka linia od krawędzi do krawędzi między
   częściami, mały szary tytuł wersalikami (jak podpisy kółek) – kilka kart z różowymi nagłówkami było za różowe */
.czesc-karty + .czesc-karty { margin: 1.5rem -1.5rem 0; padding: 1.5rem 1.5rem 0; border-top: 1px solid #f3dde1; }
/* „Ustawienia konta” od lg: części w dwóch kolumnach z linią przed prawą (.prawa; jedna kolumna była za wąska i za długa),
   .cala-szerokosc (newsletter, „Zakończ wspólne planowanie”) przez obie; przyciski na dole wiersza, równo w obu kolumnach */
@media (min-width: 992px) {
    .ustawienia-siatka { display: grid; grid-template-columns: 1fr 1fr; margin: -1.5rem -1.5rem -1.5rem; }
    .ustawienia-siatka > .czesc-karty { display: flex; flex-direction: column; margin: 0; padding: 1.5rem; border-top: 1px solid #f3dde1; }
    .ustawienia-siatka > .czesc-karty:nth-child(-n+2) { border-top: 0; }
    .ustawienia-siatka > .prawa { border-left: 1px solid #f3dde1; }
    .ustawienia-siatka > .cala-szerokosc { grid-column: 1 / -1; }
    .ustawienia-siatka > .czesc-karty > form { flex-grow: 1; display: flex; flex-direction: column; }
    .ustawienia-siatka > .czesc-karty > form > :last-child { margin-top: auto; }
    .ustawienia-siatka > .czesc-karty > div:last-child { margin-top: auto; }   /* przycisk „Usuń konto” bez formularza */
    .ustawienia-siatka > .czesc-karty > form > button:last-child { align-self: flex-end; }   /* sam przycisk (newsletter, partner) – nie na całą szerokość */
}
/* Regulamin i polityka prywatności: numerowane punkty z odstępami */
.dokument ol { padding-left: 1.25rem; margin-bottom: 0; }
.dokument li + li { margin-top: .5rem; }
.tytul-czesci { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #6c757d; margin-bottom: .75rem; }
/* Pulpit admina: pasek przy liczbie (śluby w miesiącach) – szerokość w stylu elementu, względem największej liczby */
.pasek-statystyki { height: .5rem; min-width: 2px; border-radius: 1rem; background: #d9909b; }
/* „Dostęp i płatności”: pakiety Premium obok siebie – pudrowy róż z linią jak .blok-zaproszenia */
.pakiet { height: 100%; padding: 1rem; text-align: center; background: #fdf5f6; border: 1px solid #f3dde1; border-radius: .5rem; }
.pakiet-okres { color: #6c757d; }
.pakiet-cena { font-size: 1.75rem; font-weight: 300; color: #a8414f; line-height: 1.2; }
/* Promocja: przekreślona cena regularna obok promocyjnej, pigułka nazwy w kolorze logo, najniższa cena (Omnibus) */
.pakiet-cena-stara { font-size: 1rem; color: #868e96; margin-right: .25rem; }
.pakiet-najnizsza { font-size: .75rem; color: #868e96; margin-top: .25rem; }
.pigulka-promocji { background: #a8414f; color: #fff; white-space: normal; line-height: 1.3; }
/* Dane ślubu: wąskie pole z liczbą dni (3 cyfry), opis „dni przed ślubem” zajmuje resztę */
.input-group > .pole-dni { flex: 0 0 5.5rem; }

/* ---------- Lista gości: widok „Lista” (goscie/_lista) ---------- */
/* Przełącznik widoku „Koperty | Lista” */
.przelacznik-widoku { padding: 3px; height: 38px; align-items: center; }   /* 38 px jak „Eksportuj listę” obok */
.przelacznik-widoku a,
.przelacznik-widoku button { display: inline-flex; align-items: center; gap: .4rem; height: 30px; padding: 0 .8rem; font-size: .875rem; color: #6c757d;
                             border: 0; background: none; white-space: nowrap; }
.przelacznik-widoku a:hover,
.przelacznik-widoku button:hover { color: #a8414f; }
/* Aktywna pigułka: róż między „Rezerwą” a „Pozostałymi” z białym napisem – wyraźniejsza niż jasny róż, jaśniejsza niż logo */
.przelacznik-widoku a.aktywny,
.przelacznik-widoku button.aktywny,
.przelacznik-widoku a.aktywny:hover,
.przelacznik-widoku button.aktywny:hover { background: #cf7c88; color: #fff; }

/* Lista osób: jedna „kartka”, wiersze oddzielone cienką linią, pasek statusu po lewej jak na kopercie */
.lista-osob { border-radius: 4px; overflow: hidden; }
.wiersz-osoby {
    position: relative; display: grid; align-items: center; column-gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nazwa telefon" "zaproszenie telefon";
    padding: .6rem 1rem .6rem 1.25rem; border-bottom: 1px solid #f1f2f4;
}
.wiersz-osoby:last-child { border-bottom: 0; }
/* Co drugi wiersz minimalnie szary – łatwiej prowadzić wzrok; pierwsze dziecko listy to nagłówek, więc nieparzyste od 3.
   Przed regułą najechania (i zaznaczenia niżej) – te wygrywają; odmowy zostają na swoim tle */
.wiersz-osoby:where(:not(.naglowek-listy, .status-odmowa)):nth-child(odd) { background: #f7f8fa; }   /* :where – słabszy od najechania i zaznaczenia */
.wiersz-osoby:not(.naglowek-listy):hover { background: #fdf5f6; }
.wiersz-osoby[class*="status-"]::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kolor-statusu); }
.osoba-nazwa { grid-area: nazwa; }
.osoba-nazwa .nazwisko { font-weight: 500; }
/* Nazwisko wzięte z zaproszenia (osoba go nie ma): kursywa, żółte jak kropka niepewnych danych */
.osoba-nazwa .nazwisko-pozyczone { font-style: italic; color: #6f5f99; }   /* ciemniejsza lawenda (jak „Niepewne dane”; miód odrzucony) – tekst na białym musi być czytelny */
.osoba-zaproszenie { grid-area: zaproszenie; font-size: .8rem; color: #6c757d; }
.osoba-zaproszenie a { color: inherit; }
.osoba-zaproszenie a:hover { color: #a8414f; text-decoration: underline !important; text-decoration-color: #e8c6cd !important; text-underline-offset: 3px; }
/* Nazwisko = link do edycji zaproszenia (przewija do ramki osoby); kolor tekstu, po najechaniu jak nazwa zaproszenia */
.link-osoby { color: inherit; }
.link-osoby:hover { color: #a8414f; text-decoration: underline !important; text-decoration-color: #e8c6cd !important; text-underline-offset: 3px; }
.osoba-grupa { grid-area: grupa; font-size: .875rem; color: #6c757d; }
.osoba-strona { grid-area: strona; font-size: .875rem; color: #6c757d; }
.osoba-priorytet { grid-area: priorytet; font-size: .875rem; color: #6c757d; }
/* Kolumna „Przyjdzie”: ✓ (ciemniejsza zieleń jak „Przyjdą”), ✗ (szary), — czekamy (jasnoszare); na telefonie ✓ / ✗ przy ikonkach */
.osoba-odpowiedz { grid-area: odpowiedz; font-size: .875rem; color: #6c757d; }
.odpowiedz-tak { color: #337a62 !important; font-weight: 500; }
.odpowiedz-czekamy { color: #ced4da; }
.osoba-telefon { grid-area: telefon; }
.ikonki-osoby i { color: #6c757d; font-size: .8rem; margin-left: .4rem; }
.ikonki-osoby i:first-child { margin-left: .25rem; }
/* Telefon i tablet: słuchawka z większym polem do stuknięcia */
.osoba-telefon .telefon-osoby { display: inline-block; padding: .5rem; margin: -.5rem; }
.wiersz-osoby.status-odmowa { background: #f1f2f4; opacity: .65; filter: grayscale(1); }

.naglowek-listy { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: #495057; }
/* Nagłówki kolumn = przyciski sortowania; aktywny z daszkiem kierunku */
.sortuj { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; opacity: .8; }
.sortuj:hover, .sortuj.aktywny { opacity: 1; }
.sortuj:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }
.sortuj .bi { font-size: .65rem; }
/* „Sortuj” w linii z „Koperty | Lista” – ta sama wysokość (38 px) i napis */
.pigulka-sortowania { display: inline-flex; align-items: center; gap: .4rem; height: 38px; padding: 0 .9rem; font-size: .875rem; color: #495057; }
/* Poniżej 360 px „Sortuj” i „Koperty | Lista” z napisami nie mieszczą się w jednej linii – przełącznik same ikonki */
@media (max-width: 359.98px) { .wiersz-sekcji .napis-widoku { display: none; } }

/* Komputer (od lg): tabela – na tablecie siedem kolumn się nie mieści (ucinało nazwiska), więc tam dwie linie jak na telefonie */
@media (min-width: 992px) {
    .wiersz-osoby { column-gap: .6rem; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr) minmax(0, .55fr) minmax(0, .55fr) minmax(0, .55fr) 5rem 5.5rem 8.5rem;
                    grid-template-areas: "nazwa zaproszenie grupa strona priorytet odpowiedz ikonki telefon"; }
    .osoba-zaproszenie { font-size: .875rem; }
    .ikonki-osoby { grid-area: ikonki; }
    .ikonki-osoby i { font-size: .875rem; margin-left: 0; margin-right: .6rem; }
    .osoba-telefon .telefon-osoby { padding: 0; margin: 0; font-size: .875rem; }
}

/* Zaznaczanie osób do zmiany wielu naraz: pole wyboru w pierwszej kolumnie (telefon – na obie linie) */
.lista-osob.z-wyborem .wiersz-osoby { grid-template-columns: auto minmax(0, 1fr) auto;
                                      grid-template-areas: "wybor nazwa telefon" "wybor zaproszenie telefon"; }
.wybor-osoby { grid-area: wybor; display: flex; align-items: center; padding: .5rem; margin: -.5rem 0 -.5rem -.5rem; cursor: pointer; }
.wybor-osoby .form-check-input { margin: 0; cursor: pointer; }
.naglowek-listy .wybor-osoby .form-check-input { font-size: 1rem; border-color: #fff; }   /* jak w wierszach – inaczej mała czcionka nagłówka zmniejsza pole */
.wiersz-osoby:has(.zaznacz-osobe:checked), .wiersz-osoby:has(.zaznacz-osobe:checked):hover { background: #fbecef; }
/* Kliknięcie w wiersz zaznacza osobę (skrypt w goscie/index) – rączka nad całym wierszem, tekst zaznacza się dalej normalnie */
.wiersz-osoby:has(.zaznacz-osobe) { cursor: pointer; }
@media (min-width: 992px) {
    .lista-osob.z-wyborem .wiersz-osoby { grid-template-columns: 1rem minmax(0, 1.1fr) minmax(0, 1.9fr) minmax(0, .55fr) minmax(0, .55fr) minmax(0, .55fr) 5rem 5.5rem 8.5rem;
                                          grid-template-areas: "wybor nazwa zaproszenie grupa strona priorytet odpowiedz ikonki telefon"; }
}
/* Pasek na dole ekranu, gdy coś jest zaznaczone: liczba, „Zmień zaznaczone”, „×” odznacza (zamiast pływającego „+”) */
.pasek-zaznaczenia { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1030;
                     width: max-content; max-width: calc(100% - 2rem); display: flex; align-items: center; gap: .4rem;   /* przyciski blisko siebie, licznik dalej (margines niżej) */
                     padding: .4rem .4rem .4rem 1.25rem; background: #fff; border: 1px solid #dee2e6; border-radius: 50rem;
                     box-shadow: 0 .5rem 1.5rem rgba(33, 37, 41, .15); font-size: .875rem; }   /* szara obwódka i cień – różowe nie pasowały do szarych przycisków */
.pasek-zaznaczenia .liczba-zaznaczonych { color: #6c757d; white-space: nowrap; line-height: 1.25; padding-right: .5rem; }   /* na telefonie dwie linie */
.pasek-zaznaczenia .liczba-zaznaczonych strong { color: #212529; font-weight: 600; }
.pasek-zaznaczenia .btn { flex-shrink: 0; height: 38px; display: inline-flex; align-items: center; font-size: .875rem; white-space: nowrap; }
/* Okrągłe przyciski paska („zaznacz wszystkie”, „×”) – odrobinę ciemniejsze niż btn-light, za jasne na białym pasku */
.pasek-zaznaczenia .przycisk-paska { width: 38px; flex-shrink: 0; justify-content: center; padding: 0;
                                     --bs-btn-bg: #eef0f2; --bs-btn-color: #495057;
                                     /* najechanie i wciśnięcie bez zmiany koloru – na telefonie mignięcie szarym i ciemniejszy „najechany” wyglądały jak animacja */
                                     --bs-btn-hover-bg: #eef0f2; --bs-btn-hover-color: #495057; --bs-btn-hover-border-color: #ced4da;
                                     --bs-btn-active-bg: #eef0f2; --bs-btn-active-color: #495057; --bs-btn-active-border-color: #ced4da;
                                     border-color: #ced4da !important; transition: none; }   /* bez płynnego przejścia koloru Bootstrapa – zmiana od razu */
/* „Zaznacz wszystkie” wyłączony: bardzo jasny błękit z ikonką w błękicie strony – dwa szare przyciski („×” obok) się nie zgrywały */
.pasek-zaznaczenia .zaznacz-wszystkie-pasek { --bs-btn-bg: #eaf1f6; --bs-btn-color: #386f94; --bs-btn-hover-bg: #eaf1f6; --bs-btn-hover-color: #386f94;
                                              --bs-btn-active-bg: #eaf1f6; --bs-btn-active-color: #386f94; border-color: #c5d9e8 !important; }
/* „Zaznacz wszystkie” włączony (wszystko zaznaczone) – jasny błękit jak włączone przełączniki (działa jak przełącznik; róż obok kosza wyglądał jak drugi czerwony przycisk, grafit za ciężki); kliknięcie odznacza */
.pasek-zaznaczenia .zaznacz-wszystkie-pasek.aktywny { --bs-btn-bg: #9dbfd8; --bs-btn-color: #fff; --bs-btn-hover-bg: #9dbfd8; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #9dbfd8; --bs-btn-active-color: #fff; border-color: #9dbfd8 !important; color: #fff; }   /* !important – obwódka z klasy .border */
/* Kosz w pasku („Usuń zaznaczone”): jasny róż, jasna obwódka, ikonka w kolorze logo – ten sam układ co błękitny „zaznacz wszystkie”; wypełnienie po najechaniu
   tylko myszą (na telefonie zmiana koloru po dotknięciu wyglądała jak animacja) */
.pasek-zaznaczenia .usun-zaznaczone { --bs-btn-bg: #fbecef; --bs-btn-color: #a8414f; --bs-btn-hover-bg: #fbecef; --bs-btn-hover-color: #a8414f;
                                      --bs-btn-active-bg: #fbecef; --bs-btn-active-color: #a8414f; border-color: #e8c6cd !important; }
@media (hover: hover) {
    .pasek-zaznaczenia .usun-zaznaczone:hover { --bs-btn-hover-bg: #a8414f; --bs-btn-hover-color: #fff; border-color: #a8414f !important; }
}
body.jest-zaznaczenie .przycisk-plywajacy { display: none; }
/* Okienko „Zmień zaznaczone” i nagłówek formularza zaproszenia (status, priorytet, grupa, strona): pola z pływającą
   etykietą, 50 px jak w ramce osoby; w okienku „— bez zmian —” jasnoszare –
   od razu widać, które pola się zmienia */
.okno-zbiorczo .form-floating > .form-select, :is(.naglowek-formularza, .blok-zaproszenia, .ramka-osoby) .form-floating > .form-select { height: 50px; min-height: 50px; line-height: 1.25; padding-top: 1.35rem; padding-bottom: .3rem; }
.okno-zbiorczo .form-floating > label, :is(.naglowek-formularza, .blok-zaproszenia, .ramka-osoby) .form-floating > .form-select ~ label { padding: .8rem .75rem; transform: scale(.8) translateY(-.6rem) translateX(.15rem); }
.okno-zbiorczo .form-floating > label::after, :is(.naglowek-formularza, .blok-zaproszenia, .ramka-osoby) .form-floating > .form-select ~ label::after { background: transparent !important; }
.okno-zbiorczo .form-select:has(option[value=""]:checked) { color: #b8bec5; }
/* Odpowiedź w ramce osoby: „— czekamy —” jasnoszare (jak puste pole); „Przyjdzie” / „Nie przyjdzie” zwykłym tekstem – kolorowe wartości
   nie pasowały do reszty formularzy, a szare „Nie przyjdzie” wyglądało jak nieustawione */
.odpowiedz-osoby:has(option[value=""]:checked) { color: #b8bec5; }
.odpowiedz-osoby option { color: #212529; }
.okno-zbiorczo .form-select option { color: #212529; }
/* „Tak | — | Nie”: aktywna pigułka w kolorze wyboru – „—” (bez zmian) jasnoszara, „Tak” zieleń morska jak „Potwierdzone”,
   „Nie” różowa jak w pozostałych przełącznikach (czerwień tylko dla ostrzeżeń) */
.wybor-trzy button[data-wartosc=""].aktywny, .wybor-trzy button[data-wartosc=""].aktywny:hover { background: #e9ecef; color: #6c757d; }
.wybor-trzy button[data-wartosc="1"].aktywny, .wybor-trzy button[data-wartosc="1"].aktywny:hover { background: #48a585; color: #fff; }
@media (max-width: 575.98px) { .pasek-zaznaczenia { width: calc(100% - 2rem); padding-left: 1rem; } }
/* Bardzo wąski telefon (poniżej 375 px): z koszem „Zmień” się nie mieści – sam okrągły ołówek 38 px jak pozostałe przyciski paska */
@media (max-width: 374.98px) {
    .pasek-zaznaczenia .zmien-zaznaczone { width: 38px; padding: 0 !important; justify-content: center; border-radius: 50% !important; }
    .pasek-zaznaczenia .zmien-zaznaczone span { display: none !important; }
    .pasek-zaznaczenia .zmien-zaznaczone .bi { margin: 0 !important; }
}

/* ---------- Import listy (goscie/import) ---------- */
/* Zasady importu w punktach nad przykładem – mały odstęp między punktami, żeby dało się je przeczytać osobno */
.zasady-importu li + li { margin-top: .3rem; }
/* Przykład w tabelce jak wycinek arkusza: równe kolumny (puste komórki nie są ściśnięte), siatka #d0d5da,
   litery kolumn i numery wierszy szare na #eef0f2 */
.przyklad-importu { --bs-border-color: #d0d5da; }
.przyklad-importu td { width: 33.3%; height: 1.9rem; white-space: nowrap; color: #343a40; background: #fff; }
.przyklad-importu th { --bs-table-bg: #eef0f2; color: #6c757d; font-weight: 400; font-size: .75rem; text-align: center; vertical-align: middle; }
.przyklad-importu tr > th:first-child { width: 2rem; }
.przyklad-importu .arkusz-kolumny th { height: 1.5rem; padding-top: 0; padding-bottom: 0; }
/* Podgląd: numer zaproszenia i osoby w ciągu (nazwisko pogrubione – .osoba-nazwa .nazwisko) */
.wiersz-importu + .wiersz-importu { border-top: 1px solid #f1f2f4; }
.nr-importu { min-width: 1.5rem; }

/* Funkcja tylko w pełnej wersji (np. „Pobierz Excel” w testowej): szara pigułka z kłódką, prowadzi do „Dostęp i płatności” */
.przycisk-zablokowany { --bs-btn-color: #868e96; --bs-btn-border-color: #ced4da; --bs-btn-hover-bg: #f8f9fa; --bs-btn-hover-color: #495057; --bs-btn-hover-border-color: #adb5bd; }
/* „Pobierz Excel” obok przełącznika „Koperty | Lista” – ta sama wysokość co przełącznik (30 px + 2 × 3 px + ramka) */
/* „Dodaj gości / obsługę / Importuj listę” – ta sama wielkość co przyciski nad listą (38 px, napis .875rem) */
.przycisk-dodaj { display: inline-flex; align-items: center; height: 38px; font-size: .875rem; }
/* „Dodaj gości | ▾” – przycisk dzielony jako jedna pigułka: napis z zaokrągloną lewą stroną, strzałka z prawą,
   między nimi cienka jasna linia */
/* Selektory mocniejsze niż Bootstrapa (.btn-group > .btn:not(:last-child):not(.dropdown-toggle) zeruje prawe zaokrąglenie
   strzałki – za nią stoi jeszcze menu, więc nie jest ostatnia) */
.btn-group.przycisk-dzielony > .btn:first-child { border-radius: 50rem 0 0 50rem; padding-left: 1rem; padding-right: .6rem; }
.btn-group.przycisk-dzielony > .btn + .btn {
    border-radius: 0 50rem 50rem 0; padding-left: .55rem; padding-right: .75rem;
}
/* Wypełniony (Dodaj gości): jasna linia między napisem a strzałką; obrysowany (Dodaj dziecko) ma linię z obwódki */
.btn-group.przycisk-dzielony > .btn-primary + .btn-primary { border-left: 1px solid rgba(255, 255, 255, .35); }
/* Menu „Eksportuj listę ▾”: szerokość wg treści (dłuższa nazwa filtra łamie się w wiersze) */
.menu-eksportu { width: max-content; min-width: 100%; max-width: 14rem; }   /* szerokość wg treści, nie węższe niż przycisk */
.menu-eksportu .dropdown-item { white-space: normal; }
.menu-eksportu .eksport-bez-filtra { font-size: .8125rem; }   /* wyszarzona pozycja mniejsza – nie konkuruje z „Cała lista” */
/* Menu „+”: pod „Eksportuj listę” link „↳ Filtr: Nazwa filtra” – eksport tylko widocznej części; zwykłe odstępy (ujemny margines
   – tła po najechaniu nachodziły na siebie), strzałka w kolumnie ikonek, napis równo z napisem pozycji nad nim */
.przycisk-plywajacy .eksport-podpozycja { font-size: .8125rem; color: #386f94; }
.przycisk-plywajacy .eksport-podpozycja.disabled { color: var(--bs-dropdown-link-disabled-color); }   /* bez filtra – szare jak na komputerze */
.eksport-podpozycja .bi-arrow-return-right { display: inline-block; width: 1rem; margin-right: .5rem; color: #6c757d; }
/* Kreska między grupami przycisków (dodawanie | Excel) */
.kreska-przyciskow { background: #ced4da; opacity: 1; }

/* Edycja otwarta kliknięciem w nazwisko na liście (#osoba-ID): ramka tej osoby na chwilę podświetlona różem */
.ramka-osoby { scroll-margin-top: 1.5rem; }
.ramka-osoby:target { animation: podswietl-osobe 2.4s ease-out; }
@keyframes podswietl-osobe { 0%, 40% { box-shadow: 0 0 0 3px #e8c6cd; } 100% { box-shadow: 0 0 0 3px transparent; } }

/* Koperty z filtrem osób (nocleg, transport, dieta, dzieci): pasująca osoba w błękicie strony (różowe tło jak zakreślacz
   i kolor logo odrzucone – logo kojarzyło się z problemem), ikonka filtra przy niej też – widać, dlaczego pasuje;
   niepasujące przygaszone (opacity-50) */
.osoba-pasuje { color: #386f94; font-weight: 500; }   /* +100 względem zwykłego tekstu – wyróżnienie nie tylko kolorem */
.ikona-pasuje { color: #386f94; }
/* „Nie przyjdą” – w kolorze logo */
.osoba-pasuje.osoba-pasuje-logo { color: #a8414f; }
/* „Niepewne dane” mają swój kolor (lawendowa pigułka i kropka; miód odrzucony – nie pasował do palety) – nazwa w ciemniejszej lawendzie */
.osoba-pasuje.osoba-pasuje-lawenda { color: #6f5f99; }
/* „Przyjdą” – ciemniejsza zieleń morska (jak napis kółka „Odpowiedzi”); kolor logo kojarzył się z problemem.
   „Nie przyjdą” zostaje w kolorze logo */
.osoba-pasuje.osoba-pasuje-zielen { color: #337a62; }

/* Okienko „Zmień zaznaczone”: dopisek po prawej w linii nagłówka „Zaproszenie” – mały, szary, dwie linie */
/* Pozycja absolutna – wyższy (dwie linie) podnosiłby nagłówek i rozdzielał grubą kreskę pod napisem od linii sekcji;
   dół równo z dołem napisu (nad linią: odstęp .4rem + 1 px linii) */
.naglowek-sekcji:has(.dopisek-naglowka) { position: relative; }
.dopisek-naglowka { position: absolute; right: 0; bottom: calc(.4rem + 1px); font-size: .75rem; line-height: 1.25; font-weight: 400; color: #6c757d; text-align: right; white-space: pre-line; }
/* Telefon: niższy nagłówek i stopka okienka – całość mieści się bez przewijania nawet na 375×667 */
@media (max-width: 575.98px) { .okno-zbiorczo .modal-header, .okno-zbiorczo .modal-footer { padding-top: .6rem; padding-bottom: .6rem; } }

/* Większa ikona w przycisku (np. „Zapisz kopię”) – zwykła wielkość napisu była za mała i nieczytelna */
.ikona-przycisku { font-size: 1.2em; line-height: 0; vertical-align: -.05em; }   /* line-height 0 – przycisk nie rośnie */

/* ---------- Strona główna (welcome) – biała, prosta; zdjęcia urządzeń (mockupy na jasnoszarym tle, public/img/strona)
   jako zaokrąglone kafle. Rysowane w CSS laptop i telefon odrzucone – za mało realistyczne ---------- */
.sg-wstep { text-align: center; padding: 1.5rem 0 0; }
.sg-tytul { font-weight: 300; color: #a8414f; font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); line-height: 1.15; margin: 0 auto .9rem; max-width: 760px; }
.sg-opis { color: #6c757d; font-size: 1.15rem; max-width: 560px; margin: 0 auto 1.75rem; }
.sg-przyciski .btn { padding: .6rem 1.6rem; }
.sg-drobne { font-size: .85rem; color: #868e96; margin-top: .9rem; }
.sg-zdjecie { display: block; width: 100%; height: auto; border-radius: 1.25rem; background: #e8e8e9; }
.sg-glowne { max-width: 1140px; margin: 3rem auto 0; }
.sg-sekcja { padding: 5rem 0; }
.sg-funkcja + .sg-funkcja { margin-top: 4.5rem; }
.sg-funkcja h2 { font-weight: 300; color: #a8414f; font-size: 1.6rem; margin-bottom: 1rem; }
/* Krótka kreska pod nagłówkiem funkcji – jak pod nagłówkami sekcji w aplikacji („Goście”) */
.sg-funkcja h2::after { content: ''; display: block; width: 48px; height: 2px; margin-top: .6rem; border-radius: 1px; background: #cf7c88; }
.sg-funkcja p { color: #6c757d; font-size: 1.05rem; }
.sg-lista { list-style: none; padding: 0; margin: 1rem 0 0; color: #495057; }
.sg-lista li { display: flex; gap: .6rem; align-items: baseline; padding: .25rem 0; }
.sg-lista .bi { color: #a8414f; }
/* Jak to działa: trzy kroki – numer w kółku z obwódką w kolorze logo, tytuł, jedno zdanie; od lg kroki obok siebie,
   połączone cienką różową linią (od kółka do kółka), na telefonie jeden pod drugim, bez linii */
/* Pod krokami mniej niż pełna sekcja (funkcje mają własny odstęp u góry), ale więcej niż nad nimi – przy równych odstępach
   kroki wyglądały na przyklejone do funkcji (duży tytuł ma „powietrze” w samej czcionce) */
.sg-jak { padding-bottom: 2.5rem; }
.sg-krok { position: relative; text-align: center; }
.sg-krok h3 { font-size: 1.1rem; font-weight: 600; color: #343a40; margin: 1rem 0 .4rem; }
.sg-krok p { color: #6c757d; margin: 0 auto; max-width: 300px; }
.sg-krok-numer { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
                 border-radius: 50%; background: #fff; border: 1.5px solid #cf7c88; color: #a8414f; font-size: 1.25rem; font-weight: 300; }
@media (min-width: 992px) {
    .sg-krok:not(:last-child)::after { content: ''; position: absolute; top: 24px; left: calc(50% + 36px); right: calc(-50% + 36px);
                                       border-top: 1px dashed #e8c6cd; }
}
/* Siatka funkcji pod zdjęciami: białe kafle z cienką ramką, ikonka w kolorze logo, tytuł i jedno zdanie */
.sg-siatka { margin-top: 6rem; }
.sg-kafel { height: 100%; padding: 1.5rem; background: #fff; border: 1px solid #eceef0; border-radius: .75rem; }
.sg-kafel .bi { font-size: 1.5rem; color: #a8414f; }
.sg-kafel h3 { font-size: 1rem; font-weight: 600; color: #343a40; margin: .75rem 0 .4rem; }
.sg-kafel p { color: #6c757d; font-size: .95rem; margin: 0; }
@media (max-width: 575.98px) { .sg-siatka { margin-top: 4rem; } }
/* Zaufanie: cztery obietnice (dane w Polsce, kopie, płatność, prywatność) – ikonka w białym kółku, tytuł, jedno zdanie;
   w cenniku pod pakietami, na pudrowym różu (zaraz pod siatką funkcji zlewało się z nią, a osobno pod cennikiem wisiało luzem) */
.sg-zaufanie { margin-top: 3.5rem; }
.sg-obietnica h3 { font-size: 1rem; font-weight: 600; color: #343a40; margin: .9rem 0 .4rem; }
.sg-obietnica p { color: #6c757d; font-size: .95rem; margin: 0; }
.sg-obietnica-ikona { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
                      background: #fff; border: 1px solid #f3dde1; color: #a8414f; font-size: 1.3rem; }
/* Cennik na pudrowym różu od krawędzi do krawędzi (border-image jak pasy listy gości), z cienką linią u góry i na dole */
.sg-cennik { border-image: linear-gradient(#f3dde1 1px, #fdf5f6 1px, #fdf5f6 calc(100% - 1px), #f3dde1 calc(100% - 1px)) fill 0 / / 0 100vmax; }
/* Zachęta na końcu strony: pudrowy róż od krawędzi do krawędzi z linią u góry, dosunięty do stopki (stopka ma mt-5) */
.sg-zacheta { text-align: center; border-image: linear-gradient(#f3dde1 1px, #fdf5f6 1px) fill 0 / / 0 100vmax; margin-bottom: -3rem; }
.sg-zacheta h2 { font-weight: 300; color: #a8414f; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); margin-bottom: .75rem; }
.sg-zacheta p { color: #6c757d; font-size: 1.05rem; max-width: 520px; margin: 0 auto 1.75rem; }
/* Pytania i odpowiedzi: wąska kolumna, cienkie linie tylko między wierszami, „+” w kolorze logo obraca się w „×” po rozwinięciu */
/* Linie tylko między pytaniami – bez górnej i dolnej (ostatnia kreska pod listą była zbędna) */
.sg-pytania { max-width: 760px; margin: 0 auto; }
.sg-pytanie + .sg-pytanie { border-top: 1px solid #f3dde1; }
/* Bez zewnętrznych linii pierwszy i ostatni wiersz nie potrzebują „powietrza” na zewnątrz */
.sg-pytanie:first-child summary { padding-top: 0; }
.sg-pytanie:last-child:not([open]) summary { padding-bottom: 0; }
.sg-pytanie:last-child p { margin-bottom: 0; }
.sg-pytanie summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0;
                      list-style: none; cursor: pointer; font-weight: 600; color: #343a40; }
.sg-pytanie summary::-webkit-details-marker { display: none; }
.sg-pytanie summary::after { content: '+'; flex-shrink: 0; font-size: 1.5rem; font-weight: 300; line-height: 1; color: #a8414f; transition: transform .2s; }
.sg-pytanie[open] summary::after { transform: rotate(45deg); }
@media (hover: hover) { .sg-pytanie summary:hover { color: #a8414f; } }   /* na telefonie kolor zostawał po dotknięciu */
.sg-pytanie p { color: #6c757d; margin: -.25rem 0 1.25rem; max-width: 680px; }
.sg-naglowek { text-align: center; margin-bottom: 3rem; }
.sg-naglowek h2 { font-weight: 300; color: #a8414f; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.sg-pakiet { background: #fff; border: 1px solid #f3dde1; border-radius: .75rem; padding: 2rem 1.5rem; text-align: center; height: 100%; display: flex; flex-direction: column; }
.sg-pakiet .pakiet-cena { font-size: 2.4rem; }
.sg-pakiet .btn { margin-top: auto; }
.sg-pakiet > :nth-last-child(2) { margin-bottom: 1.5rem; }
/* Bez promocji: pigułka „Najkorzystniej” wypełniona kolorem logo jak pigułka promocji (biała z obwódką była słabo widoczna)
   i cena za miesiąc pod ceną, w miejscu najniższej ceny z 30 dni */
.pigulka-najkorzystniej { background: #a8414f; color: #fff; line-height: 1.3; }
/* Miejsce na pigułkę (promocja / „Najkorzystniej”) w każdej karcie – tytuły i ceny trzech kart w jednej linii */
.sg-pakiet-pigulka .badge { margin-bottom: 0 !important; }
.sg-pakiet-pigulka:has(.badge) { margin-bottom: .5rem; }
/* Od md karty stoją obok siebie – miejsce na pigułkę w każdej; na telefonie (jedna pod drugą) zostawiało pustą górę */
@media (min-width: 768px) { .sg-pakiet-pigulka, .sg-pakiet-pigulka:has(.badge) { min-height: 2rem; margin-bottom: 0; } }
.sg-miesiecznie { font-size: .9rem; color: #868e96; margin-top: .25rem; }
.sg-pakiet-okres { text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; color: #868e96; margin-bottom: .5rem; }
@media (max-width: 575.98px) {
    .sg-zdjecie { border-radius: .75rem; }
    .sg-sekcja { padding: 3.5rem 0; }
    /* Telefon: odstępy między blokami wyrównane do ok. 56 px (było 80–96 px – zdjęcia i karty jedne pod drugimi) */
    .sg-jak { padding-bottom: 0; }
    .sg-funkcja + .sg-funkcja { margin-top: 2rem; }
    /* Obietnice na telefonie: jedna biała karta jak pakiety, w niej wiersze – ikonka po lewej, tytuł i zdanie obok,
       cienkie linie między wierszami (cztery ikonki nad tekstem jedna pod drugą wyglądały biednie i zajmowały dużo miejsca) */
    .sg-zaufanie { --bs-gutter-x: 0; --bs-gutter-y: 0; margin: 2rem 0 0; padding: .5rem 1.25rem;
                   background: #fff; border: 1px solid #f3dde1; border-radius: .75rem; }
    .sg-zaufanie > div + div { border-top: 1px solid #f3dde1; }
    .sg-obietnica { display: grid; grid-template-columns: 40px 1fr; column-gap: .9rem; align-items: start; padding: 1rem 0; }
    .sg-obietnica-ikona { grid-row: span 2; width: 40px; height: 40px; font-size: 1.1rem; background: #fdf5f6; }
    .sg-obietnica h3 { margin: .1rem 0 .2rem; }
    .sg-obietnica p { font-size: .9rem; }
    /* Stopka na telefonie zwarta (424 px wysokości, odstępy po 40 px wyglądały na puste) */
    .stopka-pelna { padding: 1.75rem 0 1.25rem; }
    .stopka-logo { margin-bottom: .6rem; }
    .stopka-email { margin-top: .75rem; }
    .stopka-linki li + li { margin-top: .35rem; }
    .stopka-dol { margin-top: 1.5rem; padding-top: 1rem; }
    .sg-naglowek { margin-bottom: 2rem; }
    /* Początek strony lżejszy na telefonie (duży tytuł, opis 18 px i wysokie przyciski przytłaczały) */
    .sg-wstep { padding-top: .5rem; }
    .sg-tytul { font-size: 1.75rem; margin-bottom: .75rem; text-wrap: balance; }
    .sg-opis { font-size: 1rem; margin-bottom: 1.25rem; }
    .sg-przyciski .btn { padding: .4rem 1.1rem; font-size: .95rem; }
    .sg-glowne { margin-top: 2rem; }
    /* Długi nagłówek zachęty dochodził do krawędzi (15 px) – na telefonie dwie wyrównane linie */
    .sg-zacheta h2 { max-width: 300px; margin-inline: auto; text-wrap: balance; }
}

/* Pułapka na boty w rejestracji – pole poza ekranem (nie display:none – część botów pomija ukryte pola) */
.pulapka {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}