, i NIE utrzymuje własnych klas na komórkach ani atrybutu
data-sezon (walidator rdzenia je kasuje). Dlatego to, co w makiecie
robiły klasy .cena i .uwaga oraz data-sezon, tutaj robią selektory
strukturalne i treść generowana. Wygląd zostaje ten sam.
======================================================================== */
.ch-cennik{ margin:0; display:flex; flex-direction:column; overflow-x:auto; }
.ch-cennik table{ width:100%; border-collapse:collapse; font-size:var(--t-small); min-width:32rem; }
.ch-cennik figcaption,.ch-cennik .wp-element-caption{
order:-1; position:sticky; left:0;
text-align:left; color:var(--muted); font-size:var(--t-small);
margin:0; padding-bottom:var(--s2);
}
.ch-cennik th,.ch-cennik td{
text-align:left; padding:.95rem var(--s2) .95rem 0;
border:0; border-bottom:1px solid var(--line);
vertical-align:baseline;
}
.ch-cennik thead th{
font:600 var(--t-micro)/1.5 var(--font-ui); letter-spacing:.12em; text-transform:uppercase;
color:var(--muted);
border-bottom:1px solid var(--line-strong);
}
.ch-cennik tbody th{ font-weight:600; color:var(--text); }
.ch-cennik--glowny tbody td,.ch-cennik--dodatki tbody td:nth-of-type(1){
font-family:"Manrope",sans-serif; font-size:var(--t-h3); font-weight:500; color:var(--amber);
white-space:nowrap;
}
.ch-cennik--dodatki tbody td:nth-of-type(2){
color:var(--muted); font-size:var(--t-small); white-space:normal;
font-family:"Manrope",-apple-system,"Segoe UI",sans-serif; font-weight:400;
}
.ch-cennik--dodatki tbody td:nth-of-type(2) strong{ color:var(--text); }
/* Cennik, „Opcjonalne dodatki” (gospodarz 23.09): tabela na 2/3, zdjęcie strefy SPA z podpisem na 1/3,
w tej samej siatce co karty w trzech kolumnach; poniżej 900 px jedno pod drugim, tabela pierwsza. */
.ch-dodatki-uklad{ display:grid; gap:var(--s3); align-items:start; }
.ch-dodatki-uklad > *{ min-width:0; }
@media (min-width:900px){
/* Obie części kończą się na tej samej wysokości (zasada gospodarza 23.09): wiersze tabeli
rozciągają się do wysokości karty, a gdy to tabela jest wyższa, zdjęcie w karcie rośnie. */
.ch-dodatki-uklad{ grid-template-columns:calc((100% - 2 * var(--s3)) / 3 * 2 + var(--s3)) 1fr; align-items:stretch; }
.ch-dodatki-uklad > .ch-cennik table{ height:100%; }
.ch-dodatki-uklad > .ch-card .ch-figura{ flex:1 1 auto; aspect-ratio:3/2; }
.ch-dodatki-uklad > .ch-card .ch-figura figure{ position:absolute; inset:0; }
.ch-dodatki-uklad > .ch-card .ch-figura img{ height:100%; aspect-ratio:auto; }
.ch-dodatki-uklad > .ch-card .ch-body{ flex:none; }
}
.ch-cennik tbody tr:hover{ background:color-mix(in srgb,var(--copper) 7%, transparent); }
.ch-cennik tbody tr:last-child th,.ch-cennik tbody tr:last-child td{ border-bottom:0; }
.ch-cennik-panel{
background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
box-shadow:var(--shadow); padding:var(--s3) var(--s4) var(--s4);
}
.ch-cennik--glowny table{ font-size:var(--t-body); min-width:44rem; }
.ch-cennik--glowny tbody th{ font-size:var(--t-body); white-space:nowrap; padding-right:var(--s3); }
.ch-cennik--glowny tbody td{ font-size:var(--t-h2); }
.ch-cennik--glowny thead th span{
display:block; margin-top:.45rem;
font-size:var(--t-small); font-weight:400; letter-spacing:.02em; text-transform:none;
color:var(--muted); text-wrap:balance; /* 23.09: daty w rozmiarze drobnym łamią się, gdy kolumna jest za wąska (iPad) */
}
/* Poniżej 780 px macierz 5 na 5 przestaje się mieścić, a przewijanie w bok
gubi nagłówek kolumny. Każdy próg długości pobytu robi się wtedy kartą,
a nazwa sezonu wraca jako treść generowana. Znacznik zostaje tabelą,
nagłówek kolumn zostaje w drzewie dostępności. */
@media (max-width:780px){
.ch-cennik--glowny table{ min-width:0; }
.ch-cennik--glowny figcaption{ padding-bottom:var(--s3); }
.ch-cennik--glowny thead{
position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.ch-cennik--glowny tbody tr{
display:block; padding:var(--s2) var(--s3) var(--s2) var(--s2);
border:1px solid var(--line); border-left:3px solid var(--copper);
border-radius:var(--r); margin-bottom:var(--s2);
}
.ch-cennik--glowny tbody tr:hover{ background:transparent; }
.ch-cennik--glowny tbody th{
display:block; border:0; padding:0 0 .7rem; white-space:normal;
}
.ch-cennik--glowny tbody td{
display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2);
padding:.55rem 0; border-bottom:1px solid var(--line);
}
.ch-cennik--glowny tbody tr td:last-child{ border-bottom:0; }
.ch-cennik--glowny tbody td::before{
font:600 var(--t-micro)/1.5 var(--font-ui); letter-spacing:.12em; text-transform:uppercase;
color:var(--muted);
}
.ch-cennik--glowny tbody td:nth-of-type(1)::before{ content:"Wiosna"; }
.ch-cennik--glowny tbody td:nth-of-type(2)::before{ content:"Sezon letni"; }
.ch-cennik--glowny tbody td:nth-of-type(3)::before{ content:"Jesień"; }
.ch-cennik--glowny tbody td:nth-of-type(4)::before{ content:"Sezon zimowy"; }
.ch-cennik--dodatki tbody tr{
display:block; padding:var(--s2) 0;
border-bottom:1px solid var(--line);
}
.ch-cennik--dodatki tbody td{ display:block; border:0; padding:.25rem 0; }
.ch-cennik--dodatki thead{
position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.ch-cennik--dodatki table{ min-width:0; }
}
/* ===========================================================================
14. SIATKA GALERII
======================================================================== */
.ch-galeria{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
.ch-galeria--pary{ grid-template-columns:repeat(2,1fr); }
.ch-kadr{
margin:0; background:var(--surface);
border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
box-shadow:var(--shadow);
transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.ch-kadr:hover{ border-color:color-mix(in srgb,var(--copper) 55%, var(--line)); transform:translateY(-2px); }
.ch-kadr .wp-block-image{ margin:0; line-height:0; }
.ch-kadr img{
display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
filter:saturate(.95); transition:filter .5s var(--ease);
}
.ch-kadr:hover img{ filter:saturate(1.02) contrast(1.04); }
.ch-kadr figcaption,.ch-kadr .ch-podpis{
margin:0;
padding:.85rem var(--s2); font-size:var(--t-small); line-height:1.5;
color:var(--muted); border-top:1px solid var(--line);
}
/* ===========================================================================
15. PYTANIA I ODPOWIEDZI (core/details)
======================================================================== */
.ch-pytania{ max-width:72ch; border-top:1px solid var(--line); }
.ch-pyt{ border-bottom:1px solid var(--line); }
.ch-pyt summary{
list-style:none; cursor:pointer; position:relative;
padding:1.35rem 3rem 1.35rem 0;
font-family:"Manrope",sans-serif; font-size:var(--t-h3); line-height:1.4; letter-spacing:-.015em;
color:var(--text); transition:color .35s var(--ease);
}
.ch-pyt summary::-webkit-details-marker{ display:none; }
.ch-pyt summary::marker{ content:""; }
.ch-pyt summary:hover{ color:var(--amber); }
.ch-pyt summary:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; border-radius:2px; }
.ch-pyt summary::before,.ch-pyt summary::after{
content:""; position:absolute; right:.4rem; top:1.35rem; margin-top:.55em;
width:14px; height:2px; background:var(--copper);
transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.ch-pyt summary::after{ transform:rotate(90deg); }
.ch-pyt[open] summary{ color:var(--amber); }
.ch-pyt[open] summary::after{ transform:rotate(0deg); opacity:0; }
.ch-pyt > p{ margin:0 0 var(--s2); color:var(--muted); font-size:var(--t-body); padding:0 3rem var(--s2) 0; }
.ch-pyt > p:last-child{ padding-bottom:var(--s3); margin-bottom:0; }
/* ===========================================================================
16. REGULAMIN
======================================================================== */
.ch-spis-tresci{
margin-top:var(--s4);
border:1px solid var(--line); border-left:3px solid var(--copper);
border-radius:var(--r); background:var(--surface); padding:var(--s3); box-shadow:var(--shadow);
}
.ch-wrap.is-layout-flow > .ch-spis-tresci{ margin-block-start:var(--s4); } /* reset flow zerował odstęp od wstępu */
.ch-spis-tresci ol{ margin:0; padding:0; list-style:none; display:grid; gap:.15rem; }
.ch-spis-tresci li{ border-bottom:1px solid var(--line); }
.ch-spis-tresci li:last-child{ border-bottom:0; }
/* Na szerokim ekranie spis w dwóch kolumnach, żeby na całej szerokości nie było pustych wierszy.
ponytail: 7 paragrafów = 4 wiersze na sztywno; przy innej liczbie zmienić repeat() i nth-child. */
@media (min-width:900px){
.ch-spis-tresci ol{ grid-template-columns:1fr 1fr; grid-template-rows:repeat(4,auto); grid-auto-flow:column; column-gap:var(--s5); }
.ch-spis-tresci li:nth-child(4){ border-bottom:0; }
}
.ch-spis-tresci a{
display:block; padding:.7rem 0;
text-decoration:none; color:var(--text); font-size:var(--t-body);
transition:color .35s var(--ease);
}
.ch-spis-tresci a:hover{ color:var(--amber); }
.ch-spis-tresci a:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; border-radius:2px; }
.ch-par{ padding-top:var(--s5); } /* 23.09: Regulamin na całą szerokość (gospodarz) */
.ch-par h2{ font-size:var(--t-h2); }
/* Rytm wewnątrz paragrafu Regulaminu: reset flow zerował wszystkie odstępy między blokami. */
.ch-par.is-layout-flow > * + *{ margin-block-start:var(--s2); }
.ch-par.is-layout-flow > h2 + *{ margin-block-start:var(--s3); }
.ch-par ol{ margin:var(--s3) 0 0; padding-left:1.5rem; }
.ch-par ol li{ margin-bottom:var(--s2); padding-left:.35rem; }
.ch-par ol li::marker{ color:var(--copper); font-weight:700; }
.ch-par p{ margin:var(--s2) 0 0; }
.ch-par dl{ margin:var(--s3) 0 0; }
.ch-par dt,.ch-par .ch-dt{ font-weight:700; color:var(--text); margin-top:var(--s2); }
.ch-par dd,.ch-par .ch-dd{ margin:.25rem 0 0; color:var(--muted); }
.ch-par .ch-wyroz{
margin-top:var(--s3); padding:var(--s3);
border:1px solid var(--line); border-left:3px solid var(--copper);
border-radius:var(--r); background:var(--surface);
}
.ch-par .ch-wyroz p{ margin:0; }
.ch-par .ch-wyroz p + p{ margin-top:var(--s2); }
.ch-konto{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.ch-data-akt{ margin-top:var(--s5); color:var(--muted); font-size:var(--t-small); }
/* ===========================================================================
17. KONTAKT
======================================================================== */
.ch-kontakt-siatka{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s3); }
.ch-kkarta{
background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
box-shadow:var(--shadow); padding:var(--s3);
transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.ch-kkarta:hover{ border-color:color-mix(in srgb,var(--copper) 55%, var(--line)); transform:translateY(-2px); }
.ch-kkarta .ch-etykieta{
display:block; font:600 var(--t-micro)/1 var(--font-ui); letter-spacing:var(--tracking-wide); text-transform:uppercase;
color:var(--muted); margin:0 0 var(--s2);
}
.ch-kkarta .ch-duze,.ch-kkarta .ch-duze a{
font-family:"Manrope",sans-serif; font-size:var(--t-h2); line-height:1.25; letter-spacing:-.015em;
color:var(--link); text-decoration:none; /* 25.09: było --amber, w jasnym motywie kontrast 2,4∶1 (token --link z 23.09) */
border-bottom:1px solid color-mix(in srgb,var(--link) 45%, transparent);
transition:color .35s var(--ease), border-color .35s var(--ease);
}
.ch-kkarta .ch-duze{ margin:0; border-bottom:0; }
.ch-kkarta .ch-duze a:hover{ color:var(--copper-hi); border-bottom-color:var(--copper); }
.ch-kkarta .ch-duze a:focus-visible{ outline:2px solid var(--copper); outline-offset:4px; }
.ch-kkarta .ch-adres{
font-style:normal; font-family:"Manrope",sans-serif; font-size:var(--t-h3); line-height:1.4; letter-spacing:-.015em; color:var(--text);
margin:0;
}
.ch-kkarta p{ margin:var(--s2) 0 0; color:var(--muted); font-size:var(--t-body); }
.ch-kkarta .wp-block-buttons{ margin-top:var(--s3); }
/* Sekcja 01 Kontaktu (19.09): formularz na 2/3, z prawej telefon+mail i pod nim FAQ.
Do 900px jedna kolumna, formularz PIERWSZY (gospodarz 19.09). */
.ch-kontakt-siatka:has(.ch-formularz){ grid-template-columns:repeat(3,1fr); }
.ch-formularz{ grid-column:1 / 3; grid-row:1 / 3; display:flex; flex-direction:column; gap:var(--s3); margin:0; }
.ch-formularz .ch-etykieta{ margin:0; }
.ch-formularz:hover{ transform:none; }
.ch-formularz-wiersz{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.ch-formularz-stopka{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.ch-formularz-stopka p{ margin:0; flex:1 1 16rem; }
.ch-pulapka{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.ch-formularz-komunikat{ margin:0; padding:var(--s2) var(--s3); border-radius:var(--r); font-size:var(--t-small); border:1px solid; }
.ch-formularz-komunikat--ok{ color:var(--text); border-color:color-mix(in srgb,#7FB795 60%, transparent); background:color-mix(in srgb,#7FB795 12%, transparent); }
.ch-formularz-komunikat--blad{ color:var(--text); border-color:color-mix(in srgb,var(--copper) 60%, transparent); background:color-mix(in srgb,var(--copper) 12%, transparent); }
#formularz{ scroll-margin-top:var(--s5); }
/* Po wysłaniu: zamiast pól duże potwierdzenie — gość ma nie mieć wątpliwości, że poszło. */
.ch-formularz--wyslano{ align-items:flex-start; justify-content:center; gap:var(--s2); min-height:22rem; }
.ch-wyslano-znak{ width:3.4rem; height:3.4rem; border-radius:50%; display:grid; place-items:center;
background:color-mix(in srgb,#7FB795 18%, transparent); color:#7FB795; border:1px solid color-mix(in srgb,#7FB795 55%, transparent); }
.ch-wyslano-znak svg{ width:55%; height:55%; }
.ch-formularz--wyslano h3{ margin:var(--s2) 0 0; font-size:var(--t-h2); }
.ch-formularz--wyslano p{ margin:0; color:var(--muted); max-width:42ch; }
.ch-formularz--wyslano a{ color:var(--amber); }
/* Sekcja 02: mapa Google 2/3 + adres 1/3, ta sama siatka co formularz. */
.ch-mapa-siatka{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-bottom:var(--s4); }
.ch-mapa{ grid-column:1 / 3; grid-row:1 / 3; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--surface); }
.ch-mapa-siatka > *{ margin:0 !important; } /* flow WordPressa dodawał margines nad kartą adresu: karta była niższa od mapy */
/* Mapa z własnymi znacznikami (19.09). Pozycje --x/--y to ułamki obrazka z design/mapa-statyczna.py.
--a = proporcja ramki, --ai = proporcja obrazka. Obrazek przycinany przez cover do ramki;
wzór przelicza pozycję znacznika na przyciętą ramkę, więc znaczniki trafiają w punkt przy każdej proporcji. */
.ch-mapa{ position:relative; --ai:1.2; --a:1.2; aspect-ratio:var(--a); } /* --ai: proporcja obrazka 1800×1500 */
.ch-mapa-link{ position:absolute; inset:0; display:block; }
.ch-mapa-link img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.8); transition:filter .5s var(--ease); }
.ch-mapa-link:hover img{ filter:saturate(1); }
.ch-mapa-pin,.ch-mapa-pkt{ position:absolute; pointer-events:none;
left:calc((var(--x) * var(--ai) - (var(--ai) - var(--a)) * .5) / var(--a) * 100%); top:calc(var(--y) * 100%); }
.ch-mapa-pin{ transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; z-index:2; }
.ch-mapa-pin svg{ width:38px; height:50px; filter:drop-shadow(0 4px 6px rgb(0 0 0 / .4)); order:2; }
.ch-mapa-pin path{ fill:#EF3A2C; } /* czerwień przycisku „Sprawdź” (gospodarz 19.09: znacznik czerwony) */
.ch-mapa-pin circle{ fill:#fff; }
.ch-mapa-pin b{ order:1; margin-bottom:6px; padding:.4rem .85rem; border-radius:999px; font:700 var(--t-small)/1.2 "Manrope",sans-serif; letter-spacing:.02em;
color:#16211D; background:#fff; box-shadow:0 2px 6px rgb(0 0 0 / .25); white-space:nowrap; }
/* Punkty pomocnicze: kropka + podpis z boku. */
.ch-mapa-pkt i{ position:absolute; left:0; top:0; width:12px; height:12px; transform:translate(-50%,-50%); border-radius:50%;
background:#16211D; border:2.5px solid #fff; box-shadow:0 1px 4px rgb(0 0 0 / .4); }
.ch-mapa-pkt b{ position:absolute; top:0; transform:translateY(-50%); white-space:nowrap; padding:.18rem .5rem; border-radius:999px;
font:700 11px/1.2 "Manrope",sans-serif; color:#16211D; background:rgb(255 255 255 / .92); box-shadow:0 1px 4px rgb(0 0 0 / .25); }
.ch-mapa-pkt--prawo b{ left:12px; }
.ch-mapa-pkt--lewo b{ right:12px; }
.ch-mapa-otworz{ position:absolute; right:var(--s2); bottom:var(--s2); padding:.55rem .9rem; border-radius:var(--r);
font:700 var(--t-small)/1 "Manrope",sans-serif; color:#16211D; background:rgb(255 255 255 / .92); box-shadow:0 2px 8px rgb(0 0 0 / .25); }
.ch-mapa-link:hover .ch-mapa-otworz{ background:#fff; }
.ch-mapa-link:focus-visible{ outline:2px solid var(--copper); outline-offset:-4px; }
/* Flaga Polski w adresie (goście z zagranicy): SVG, bo emoji flag nie działa w Windows. */
.ch-flaga{ width:1.15em; height:.72em; vertical-align:-.05em; margin-left:.3em; border-radius:1px; box-shadow:0 0 0 1px rgb(0 0 0 / .25); }
.ch-kkarta .ch-wspolrzedne{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:var(--t-small); letter-spacing:.02em; }
/* iPad w pionie i wąskie okna: karty rosną (tekst się zawija) i mapa była od nich niższa.
Mapa idzie wtedy na całą szerokość jako szeroki kadr, karty stają obok siebie pod nią.
Pinezka jest w środku obrazka, więc przycięcie w pionie jej nie rusza. */
@media (max-width:1100px) and (min-width:701px){
.ch-mapa-siatka{ grid-template-columns:1fr 1fr; }
.ch-mapa{ grid-column:1 / -1; grid-row:auto; --a:2; }
}
@media (max-width:700px){
.ch-mapa{ --a:1; }
.ch-mapa-otworz{ font-size:var(--t-micro); padding:.45rem .7rem; top:var(--s2); bottom:auto; } /* na dole zasłaniał podpis licencji */
.ch-mapa-pkt--centrum b{ left:auto; right:12px; } /* przy prawej krawędzi wąskiej mapy */
}
.ch-mapa-osm{ position:absolute; left:.4rem; bottom:.3rem; font-size:11px; color:#333; background:rgb(255 255 255 / .75); padding:.05rem .35rem; border-radius:3px; }
.ch-mapa-osm a{ color:inherit; text-decoration:none; }
/* Numer telefonu i „FAQ”: pogrubione, większe, z odstępem od opisu (gospodarz 19.09). */
.ch-kkarta .ch-duze a{ font-weight:700; } /* telefon i FAQ */
.ch-kkarta .ch-duze + p{ margin-top:var(--s3); }
.ch-dojazd{ margin-top:var(--s4); max-width:68ch; }
.ch-dojazd p{ margin:0 0 var(--s2); color:var(--muted); }
.ch-dojazd p:last-child{ margin-bottom:0; }
.ch-dojazd b,.ch-dojazd strong{ color:var(--text); font-weight:600; }
.ch-kontakt-dane{
display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:var(--s3); margin-top:var(--s4);
}
.ch-kontakt-dane .ch-poz .ch-etykieta{
display:block;
font:600 var(--t-micro)/1.5 var(--font-ui); letter-spacing:var(--tracking-wide); text-transform:uppercase;
color:var(--muted); margin:0 0 .35rem;
}
.ch-kontakt-dane .ch-poz .ch-wartosc{ font-size:var(--t-body); color:var(--text); margin:0; font-style:normal; }
.ch-kontakt-dane .ch-poz .ch-wartosc a{
color:var(--amber); text-decoration:underline;
text-decoration-thickness:1px; text-underline-offset:3px;
}
/* ===========================================================================
18. OPINIE (strona główna)
======================================================================== */
.ch-opinie-uklad{
display:grid; grid-template-columns:minmax(15rem,.8fr) 1.6fr; gap:var(--s4);
align-items:stretch; /* 24.09: obie strony kończą się równo */
}
.ch-ocena-duza .ch-wart{
display:block;
font-family:"Manrope",sans-serif; font-weight:700;
font-size:var(--t-tytul); line-height:1;
color:var(--text); letter-spacing:-.03em; margin:0;
}
.ch-ocena-duza .ch-z-ilu{
display:block; margin:var(--s2) 0 0;
font:600 var(--t-micro)/1.5 var(--font-ui); letter-spacing:var(--tracking-wide); text-transform:uppercase;
color:var(--muted);
}
.ch-ocena-duza p:not(.ch-wart):not(.ch-z-ilu){ margin:var(--s3) 0 0; color:var(--muted); font-size:var(--t-small); }
.ch-opinie{ display:grid; gap:var(--s3); grid-auto-rows:1fr; }
.ch-opinia{ margin:0; }
.ch-opinia p{
margin:0; font-family:"Manrope",sans-serif; font-weight:700;
font-size:var(--t-h3); line-height:1.5;
color:var(--text);
}
.ch-opinia cite,.ch-opinia figcaption{
display:block; margin-top:var(--s2); font-style:normal;
font:600 var(--t-micro)/1.5 var(--font-ui); letter-spacing:var(--tracking-wide); text-transform:uppercase;
color:var(--muted);
}
.ch-opinia cite b,.ch-opinia cite strong,.ch-opinia figcaption b{ color:var(--amber); font-weight:600; }
/* 24.09: strona główna wg makiety — intro, gwiazdki, paski opinii, powody, odnośniki */
/* 25.09: tekst „Dlaczego warto wybrać Chatynki?” (gospodarz) — dwie kolumny jak w gazecie, które
same wyrównują się do tej samej wysokości (zasada: części panelu kończą się równo). */
.ch-dlaczego h3{ font-size:var(--t-h3); margin:var(--s3) 0 var(--s1); break-after:avoid; }
.ch-dlaczego h3:first-child{ margin-top:0; }
.ch-dlaczego p{ margin:0 0 var(--s2); orphans:1; widows:1; } /* dowolne łamanie akapitów = kolumny równe co do linijki */
@media (min-width:900px){ .ch-dlaczego{ column-count:2; column-gap:var(--s5); } }
.ch-intro > div > p:first-child{ color:var(--text); max-width:none; }
.ch-liczby--intro{ margin:var(--s3) 0; padding:var(--s3) 0; grid-template-columns:repeat(auto-fit,minmax(7rem,1fr)); gap:var(--s2); }
.ch-gwiazdki{ display:block; color:#F5C451; letter-spacing:.12em; font-size:var(--t-small); line-height:1; margin-bottom:.6rem; }
.ch-gwiazdki::before{ content:"★★★★★"; }
.ch-opinia p{ font-weight:500; font-size:var(--t-body); } /* paski: tekst bazowy, nie tytuł karty */
.ch-opinie > :nth-child(n+3){ display:none; } /* widoczne dwa paski; reszta to baza do rotacji (JS w functions.php) */
.ch-opinie--rotacja .ch-slot{ display:grid; } /* stos opinii: wysokość = najdłuższa, strona nie skacze */
/* 24.09 (gospodarz): zmiana ma być widoczna — nowa opinia wjeżdża od dołu, stara odjeżdża w górę. */
.ch-opinie--rotacja .ch-slot > *{ grid-area:1 / 1; opacity:0; transform:translateY(16px); transition:opacity 1.5s var(--ease), transform 1.5s var(--ease); pointer-events:none; }
.ch-opinie--rotacja .ch-slot > .is-on{ opacity:1; transform:none; pointer-events:auto; }
.ch-opinie--rotacja .ch-slot > .is-off{ transform:translateY(-16px); }
.ch-tagi{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:var(--s2) 0 0; }
.ch-tagi li{ font-size:var(--t-small); padding:.3rem .75rem; border:1px solid var(--line-strong); border-radius:999px; }
.ch-powody{ display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:var(--s3); }
.ch-powody > div{ display:flex; gap:.8rem; align-items:flex-start; }
.ch-powody svg{ flex:none; width:26px; height:26px; color:var(--copper); margin-top:.15rem; }
.ch-powody p{ margin:0; }
.ch-powody .ch-opis{ color:var(--muted); font-size:var(--t-small); }
.ch-odnosnik{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); margin:var(--s4) 0 0; }
/* ===========================================================================
19. ZAPIS NA LISTĘ (strona główna)
======================================================================== */
.ch-zapis{
display:grid; grid-template-columns:1fr 1fr; gap:0;
border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
background:var(--surface); box-shadow:var(--shadow);
}
.ch-zapis .wp-block-image{ margin:0; height:100%; }
.ch-zapis img{ display:block; width:100%; height:100%; min-height:260px; object-fit:cover; filter:saturate(.95); }
.ch-zapis .ch-srodek{ padding:var(--s4); }
.ch-zapis h3{ font-size:var(--t-h2); }
.ch-zapis p{ color:var(--muted); font-size:var(--t-small); margin:var(--s2) 0 var(--s3); max-width:46ch; }
.ch-zapis form{ display:grid; grid-template-columns:1fr auto; gap:var(--s2); align-items:end; }
.ch-zapis .ch-fine{ grid-column:1 / -1; margin:.25rem 0 0; font-size:var(--t-small); color:var(--muted); max-width:none; }
.ch-kanaly{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); }
.ch-kanal{ padding:var(--s3); }
.ch-kanal h3{ font-size:var(--t-h3); }
.ch-kanal p{ color:var(--muted); font-size:var(--t-small); margin:.5rem 0 var(--s3); }
.ch-kanal .ch-cena-tam{
font:600 var(--t-micro)/1.5 var(--font-ui); letter-spacing:var(--tracking-wide); text-transform:uppercase;
color:var(--muted); display:block; margin:0 0 var(--s2);
}
.ch-kanal .wp-block-buttons{ position:relative; z-index:1; }
/* ===========================================================================
20. PASY ZACHĘTY
======================================================================== */
.ch-cta-pas,.ch-cta{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
gap:var(--s3);
margin-top:var(--s6);
background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--copper);
border-radius:var(--r); padding:var(--s4); box-shadow:var(--shadow);
position:relative; overflow:hidden;
}
.ch-cta{ margin-top:var(--s5); }
.ch-cta-pas::after{
content:""; position:absolute; right:-40px; bottom:-60px; width:220px; height:220px;
border-radius:50%; pointer-events:none;
background:radial-gradient(circle, var(--glow), transparent 68%);
filter:blur(26px);
animation:oddech 9s var(--ease) infinite;
}
.ch-cta-pas > div,.ch-cta > div{ position:relative; z-index:1; max-width:52ch; }
.ch-cta-pas h2,.ch-cta h2{ font-size:var(--t-h2); margin-bottom:.5rem; }
.ch-cta-pas p,.ch-cta p{ margin:0; color:var(--muted); font-size:var(--t-small); }
.ch-cta p{ margin:.6rem 0 0; max-width:46ch; font-size:var(--t-body); }
.ch-cta-pas .wp-block-buttons,.ch-cta .wp-block-buttons{ position:relative; z-index:1; }
/* PAS WEZWANIA ZE ZDJĘCIEM (Kontakt 19.09; wg ustaleń: jeden komponent, inne zdjęcie na każdej stronie).
Zdjęcie powoli się oddala w trakcie przewijania: animacja sterowana przewijaniem, czysty CSS.
Bez background-attachment:fixed (iOS go ignoruje). Przeglądarka bez obsługi: nieruchome zdjęcie. */
.ch-pas-wezwania{ position:relative; overflow:hidden; isolation:isolate; margin-top:var(--s5) !important; /* flow WordPressa nadpisywał odstęp */
border-radius:var(--r); min-height:clamp(320px,44vh,440px); display:flex; align-items:flex-end; } /* 20.09: gospodarz — nie wyżej niż ok. 440 px */
.ch-pw-tlo{ position:absolute; inset:0; z-index:-1; }
.ch-pw-tlo img{ width:100%; height:100%; object-fit:cover; object-position:var(--pw-x,50%) var(--pw-y,50%); transform-origin:var(--pw-x,50%) var(--pw-y,50%); display:block; transform:scale(1.06); } /* 20.09: bez filtra (gospodarz: nie psuć zdjęcia). Punkt kadru i oddalania ustawia strona przez style="--pw-x;--pw-y" na ![]()
(Kontakt: słońce 70% 0) */
.ch-pas-wezwania::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(to top, rgb(6 10 9 / .62) 0%, rgb(6 10 9 / .28) 30%, transparent 58%); } /* 20.09: tylko dół pod tekstem, niebo i słońce bez nakładki */
@supports (animation-timeline: view()){
.ch-pw-tlo img{ animation:pw-oddal linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
}
@keyframes pw-oddal{ from{ transform:scale(1.22); } to{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .ch-pw-tlo img{ animation:none; transform:none; } }
.ch-pw-tresc{ padding:var(--s4); max-width:40rem; }
.ch-pw-tresc .ch-nadpis{ color:rgb(240 233 222 / .78); }
.ch-pw-tresc h2{ color:#F0E9DE; font-size:var(--t-h2); margin:0 0 .5rem; text-shadow:0 2px 20px rgb(0 0 0 / .5); }
.ch-pw-tresc p{ color:#DED6CA; margin:0 0 var(--s3); text-shadow:0 1px 10px rgb(0 0 0 / .6); }
.ch-pw-tresc .wp-block-buttons{ margin:0; }
/* ===========================================================================
21. STOPKA — jedna, kanoniczna, wg start.html plus szczera linijka
o Booking.com i Airbnb z kontakt.html
======================================================================== */
/* 24.09 (gospodarz): stopka ZAWSZE ciemna, w kontrze do strony — głęboka neutralna szarość
(bez niebieskiego), w obu motywach. Własne tokeny, żeby jasny motyw jej nie rozjaśniał. */
.ch-stopka{
--bg:#17181B; --surface:#1F2024; --text:#E8E9EC; --muted:#9DA1A8; --line:#2E3036; --line-strong:#3E4147;
--amber:#B9D3EA; --copper:#8FB6D9; --link:#B9D3EA;
margin-top:var(--s6);
background:var(--bg);
border-top:1px solid var(--line);
padding:var(--s5) 0 var(--s4);
color:var(--muted); font-size:var(--t-small);
}
:root[data-theme="light"] .ch-stopka .ch-logo-chip .ch-logo--na-ciemnym{ display:block; } /* w stopce zawsze logo na ciemne tło */
:root[data-theme="light"] .ch-stopka .ch-logo-chip .ch-logo--na-jasnym{ display:none; }
.ch-stopka-siatka{
display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--s4);
align-items:start;
}
.ch-stopka h2{
font:700 calc(var(--t-micro) * 1.1)/1.5 var(--font-ui); /* Kuba 27.09: lekko pogrubione i ciut większe */ letter-spacing:var(--tracking-wide); text-transform:uppercase;
color:var(--muted); margin:0 0 var(--s2);
}
.ch-stopka ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.ch-stopka li{ font-size:var(--t-small); }
.ch-stopka a{
color:var(--text); text-decoration:none;
transition:color .35s var(--ease);
}
.ch-stopka a:hover{ color:var(--amber); }
.ch-stopka a:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; border-radius:2px; }
.ch-stopka .ch-adres{ font-style:normal; margin:var(--s2) 0 0; }
.ch-stopka .ch-adres b,.ch-stopka .ch-adres strong{ color:var(--text); font-weight:600; }
/* Kuba 30.09: region, kraj z flagą (gość z zagranicy od razu wie, gdzie to) i współrzędne do nawigacji, link do Map Google. */
.ch-stopka .ch-kraj{ display:inline-flex; align-items:center; gap:.45rem; }
.ch-stopka .ch-flaga{ width:1.15em; height:auto; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.ch-stopka a.ch-gps{ font-variant-numeric:tabular-nums; }
.ch-stopka .ch-logo-chip{ margin-bottom:var(--s2); padding-inline:0; } /* Kuba 27.09: logo równo z tekstem pod nim */
/* Kuba 27.09: „Znajdź nas na” i ikony Booking.com i Airbnb (kafelki w barwach serwisów), odstęp od telefonu. */
.ch-stopka .ch-znajdz{ display:flex; align-items:center; gap:.6rem; margin:var(--s3) 0 0; }
.ch-stopka .ch-znajdz p{ margin:0 .25rem 0 0; }
.ch-stopka .ch-znajdz-ikona{ display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius:7px; transition:transform .3s var(--ease); }
.ch-stopka .ch-znajdz-ikona:hover{ transform:translateY(-2px); }
/* Kuba 27.09: kreska dalej od ostatniej pozycji menu. Swoistość jak reset bloków w stopce (rozdz. 0, „.is-layout-flow > *”)
plus jedna klasa, bo ten reset zerował margines i kreska przylegała do „Ustawień plików cookies”. */
.ch-stopka .ch-wrap.is-layout-flow > .ch-drobne{ margin-top:var(--s5); }
.ch-stopka-siatka > div.is-layout-flow > .ch-znajdz{ margin-top:var(--s3); } /* Kuba 27.09: wolne miejsce pod telefonem */
/* Kuba 30.09: profile społecznościowe na górze trzeciej kolumny; znaki to SVG z pełnym tłem, rogi daje kafelek. */
.ch-stopka .ch-znajdz-ikona svg{ display:block; width:100%; height:100%; }
/* Kuba 07.10: social media jednym wierszem pod kolumnami, wyśrodkowane (nagłówek jak „Na stronie”, obok ikony; na wąskim ekranie ikony pod nim). */
.ch-stopka .ch-wrap.is-layout-flow > .ch-social-pas{ margin-top:var(--s4); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.75rem var(--s3); }
.ch-stopka .ch-social-pas h2{ margin:0; }
.ch-stopka .ch-social-pas .ch-znajdz{ margin:0; }
.ch-stopka .ch-wrap.is-layout-flow > .ch-social-pas + .ch-drobne{ margin-top:var(--s4); }
/* Na dotyku linki stopki mają 44 px wysokości (rozdz. „cele dotyku”); kafelki zostają 32 px, obie tej samej wielkości. */
.ch-stopka .ch-znajdz a.ch-znajdz-ikona{ display:inline-grid; min-height:0; }
/* Kuba 29.09: obie ikony z jego plików 128 px, pełne tło, rogi zaokrągla strona. */
.ch-stopka .ch-znajdz-ikona{ overflow:hidden; }
.ch-stopka .ch-znajdz-ikona img{ display:block; width:100%; height:100%; }
/* Kuba 27.09: linki w „Na stronie” z kropką, żeby było widać, że to linki. */
.ch-stopka nav ul{ list-style:disc; padding-left:1.1em; }
.ch-stopka nav li::marker{ color:var(--copper); }
/* Kuba 27.09: „Krótko o obiekcie” z ikonami. */
.ch-stopka .ch-o-obiekcie li{ display:flex; align-items:center; gap:.6rem; }
.ch-stopka .ch-o-obiekcie svg{ flex:none; width:18px; height:18px; color:var(--copper); }
.ch-stopka .ch-drobne{
padding-top:var(--s3);
border-top:1px solid var(--line);
font-size:var(--t-small);
}
/* ===========================================================================
22. 404 I WYSZUKIWANIE
======================================================================== */
.ch-prosta-strona{ padding:var(--s5) 0 0; }
.ch-prosta-strona h1{ font-size:var(--t-tytul); }
.ch-prosta-strona h1.ch-tytul-bledu{ font-size:var(--t-h2); } /* Kuba 28.09: na stronie błędu napis był „monstrualnie wielki” */
.ch-prosta-strona p{ color:var(--muted); margin:var(--s3) 0 0; max-width:var(--measure); }
.wp-block-search .wp-block-search__input{
font:500 var(--t-body)/1.2 "Manrope",sans-serif; color:var(--text); background:var(--surface);
border:1px solid var(--line-strong); border-radius:var(--r); padding:.95rem 1rem;
}
.wp-block-search .wp-block-search__input:focus{
outline:none; border-color:var(--copper);
box-shadow:0 0 0 3px color-mix(in srgb,var(--copper) 26%, transparent);
}
.wp-block-post-title a{ color:var(--text); text-decoration:none; }
.wp-block-post-title a:hover{ color:var(--amber); }
/* ===========================================================================
ŁAMANIA
======================================================================== */
/* Belka na dwa rzędy: logo|prawa obok siebie, menu pod spodem na całą
szerokość, wyśrodkowane. Zastępuje dawny flex-wrap (14.09) — przy nim
przełącznik motywu i telefon rozjeżdżały się na osobne rzędy, gdy
menu też łamało się do własnego wiersza; teraz logo i prawa panel
trzymają się razem w jednym rzędzie na każdej szerokości. */
/* Próg był 1080px (przy kolumnach 1fr×3 menu się nie mieściło). Od 15.09
środek belki = szerokość menu, więc jeden rząd mieści się do ~900px;
układ pośredni (logo+telefon, PL/EN pod spodem, menu w trzecim rzędzie)
wychodził na iPadzie w pionie (1024px) mimo miejsca. Teraz ≤900px =
od razu wariant A (blok niżej), powyżej jeden rząd. */
@media (max-width:900px){
.ch-brandbar{
grid-template-columns:1fr 1fr;
grid-template-areas:"logo prawa" "nav nav";
}
.ch-nav{ justify-self:stretch; }
/* Menu schodzi do własnego rzędu, wspólna linia bazowa z logo znika. */
.ch-brandbar .ch-logo-chip{ transform:none; }
/* Audyt 14.09: było gap:1.25rem na sztywno, mrożąc płynną skalę --s3
poniżej tego progu. Zostaje tylko odstęp pod spodem menu. */
.ch-nav ul,.ch-nav .wp-block-navigation__container{ padding-bottom:.15rem; }
}
@media (max-width:900px){
/* Wariant A z makiety „Nagłówek na telefon" (gospodarz 15.09). Rząd 1:
logo z lewej, słuchawka + PL/EN + przełącznik z prawej, jeden rząd.
Rząd 2: menu na całą szerokość, cztery pozycje rozłożone, bez
przewijania w bok. Wcześniej: prawy panel w trzech piętrach, menu
ucięte z wygaszeniem krawędzi, ok. 200px nagłówka. */
.ch-brandbar{ padding:var(--s2); gap:var(--s2); grid-template-columns:auto minmax(0,1fr); }
.ch-brandbar .ch-logo-chip{ justify-self:start; padding-inline:0; }
.ch-prawa{ justify-self:end; flex-direction:row; gap:.25rem; }
.ch-prawa-gorny{ display:contents; }
.ch-prawa .ch-tel{ order:1; justify-content:center; min-width:2.75rem; min-height:2.75rem; }
/* bez bocznego wypełnienia: na 360px logo i słuchawkę dzieliły 3px */
.ch-prawa .ch-toggle{ order:3; min-height:2.75rem; padding-inline:0; }
/* Numer zostaje w linku tel: i dla czytnika ekranu; na ekranie sama słuchawka. */
.ch-tel-numer{
position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.ch-nav{ border-top:1px solid var(--surface); }
/* ⚠️ WordPress sam nadaje kontenerowi menu flex-wrap:wrap — nowrap jawnie.
Stały odstęp i środek, nie space-between (15.09, gospodarz: pozycje
„od siebie oddalone" w wąskim oknie). `safe center`: gdyby menu się
nie zmieściło, wyrówna do lewej zamiast ucinać oba końce. */
.ch-nav .wp-block-navigation__container,.ch-nav ul{
flex-wrap:nowrap; justify-content:safe center;
}
.ch-hero-copy{ padding:var(--s3) var(--s2) var(--s2); }
.ch-sec-head{ flex-wrap:wrap; }
.ch-sec-head .ch-note{ margin-left:0; flex-basis:100%; }
.ch-cards--para,.ch-cards--pary{ grid-template-columns:1fr; }
.ch-domki,.ch-card.ch-card--szeroka{ grid-template-columns:1fr; }
.ch-kontakt-siatka:has(.ch-formularz){ grid-template-columns:1fr; }
.ch-formularz{ grid-column:auto; grid-row:auto; }
.ch-mapa-siatka{ grid-template-columns:1fr; }
.ch-mapa{ grid-column:auto; grid-row:auto; }
.ch-formularz-wiersz{ grid-template-columns:1fr; }
.ch-tekst-2kol{ columns:1; }
.ch-card--prawa .ch-figura{ order:0; }
.ch-zasady{ grid-template-columns:1fr; }
.ch-opinie-uklad{ grid-template-columns:1fr; gap:var(--s3); }
.ch-zapis{ grid-template-columns:1fr; }
.ch-zapis .ch-obraz{ order:-1; }
.ch-zapis .ch-srodek{ padding:var(--s3); }
.ch-kanaly{ grid-template-columns:1fr; }
.ch-uklad{ grid-template-columns:1fr; gap:var(--s3); }
.ch-uklad--odwrocony .ch-uklad-media,.ch-uklad--instrukcja .ch-uklad-media{ order:0; }
.ch-galeria,.ch-galeria--pary{ grid-template-columns:1fr; }
.ch-cennik-panel{ padding:var(--s3) var(--s2) var(--s3); }
.ch-cta-pas,.ch-cta{ padding:var(--s3); }
.ch-pyt > p{ padding-right:0; }
.ch-konto{ white-space:normal; }
.ch-stopka-siatka{ grid-template-columns:1fr; gap:var(--s3); }
.ch-stopka nav ul{ grid-template-columns:1fr 1fr; } /* 24.09: siedem linków w dwóch kolumnach, cele dotyku 44 px zostają */
}
@media (max-width:640px){
.ch-zapis form{ grid-template-columns:1fr; }
.ch-zapis form .ch-btn{ width:100%; }
}
/* ===========================================================================
23. DROBIAZGI UKŁADU — klasy pomocnicze, którymi bloki odtwarzają style
pisane w makietach atrybutem style="" na konkretnym elemencie
======================================================================== */
.ch-tresc-strony{ display:block; }
.ch-widelki{ display:block; }
.ch-naglowek-zasad{ font-size:var(--t-h3); }
.ch-pod-tabela{
color:var(--muted); font-size:var(--t-small); line-height:1.6;
margin:var(--s3) 0 0; max-width:74ch;
}
.ch-pod-tabela b,.ch-pod-tabela strong{ color:var(--text); }
.ch-liczby--bez-gory{ border-top:0; padding-top:0; }
.ch-definicje{ margin:var(--s3) 0 0; }
.ch-definicje .ch-dt{ font-weight:700; color:var(--text); margin:var(--s2) 0 0; }
.ch-definicje .ch-dd{ margin:.25rem 0 0; color:var(--muted); }
/* ===========================================================================
CELE DOTYKU (na końcu arkusza celowo: musi wygrywać
z regułami szerokości, które stoją wyżej i też ruszają wypełnienia)
Warunek na URZĄDZENIE, nie na szerokość: palec jest gruby tak samo na
telefonie 360 px, jak na tablecie 1024 px, a mysz jest precyzyjna na
obu. `pointer: coarse` pyta wprost o to, czym gość klika.
44 px to próg, poniżej którego trafianie robi się loterią.
⚠️ Linki w środku zdania są z tej reguły WYŁĄCZONE (WCAG 2.5.8): nie da
się ich powiększyć bez rozpychania wierszy tekstu.
======================================================================== */
@media (pointer: coarse){
.ch-nav a,
.ch-nav .wp-block-navigation-item__content{ padding-block:1rem; }
.ch-toggle{ min-height:2.75rem; }
.ch-tel{ min-height:2.75rem; }
.ch-btn,.wp-block-button__link,.ch-szukaj,.ch-rezerwuje{ min-height:2.75rem; }
.ch-stopka a:not(.ch-inline),
.ch-kanal a:not(.ch-inline){ display:inline-flex; align-items:center; min-height:2.75rem; }
/* Kuba 30.09 (iPad): 44 px na każdy link w „Na stronie” rozstrzeliło kolumnę. 32 px z odstępem mieści się w WCAG 2.5.8
(24 px) i trzyma rytm kolumny obok. */
.ch-stopka nav a:not(.ch-inline){ min-height:2rem; }
.ch-stopka a.ch-gps{ min-height:2rem; } /* jak linki w „Na stronie”: adres nie rozjeżdża się na dotyku */
.ch-stopka nav ul{ gap:.3rem; }
/* Logo też jest linkiem do strony głównej, więc też celem dotyku. */
.ch-logo a{ display:flex; align-items:center; min-height:2.75rem; }
/* Cele urosły, więc nagłówek oddaje to, co może: własne wypełnienie
i pusty zapas wokół przycisku. Bez tego pasek zjada ćwierć ekranu. */
.ch-brandbar{ padding:.55rem var(--s2); gap:.55rem var(--s2); }
.ch-brandbar .wp-block-buttons{ margin-block:0; }
.ch-brandbar .wp-block-button{ margin:0; }
}
/* Mail w regulaminie (wymóg prawny) zapisany tak, żeby w kodzie strony nie było ciągu
„chatynki@gmail.com” dla zbieraczy adresów; człowiek widzi i kopiuje normalny adres. */
.ch-bez-botow{ display:none; }
.ch-mail-reczny{ white-space:nowrap; }
/* ATRAKCJE (20.09): strona zbiorcza + trzy podstrony (/atrakcje/w-krynicy/ itd.).
Przełącznik części = .ch-kotwice z linkami między stronami; karty 4∶3 (gospodarz 14.09);
dziewięć kart ze zdjęciem na stronę (gospodarz 20.09: wszystkie atrakcje równe);
film z produkcji (mp4 na serwerze) ładuje się dopiero po kliknięciu (preload="none"). */
.ch-kotwice a.ch-tu{ border-color:var(--copper); color:var(--amber); background:color-mix(in srgb,var(--copper) 14%, transparent); }
.ch-grupa-kart .ch-card img{ aspect-ratio:4/3; }
.ch-card .ch-body > .wp-block-buttons{ margin-top:auto; padding-top:var(--s2); }
.ch-film--atrakcje{ display:block; }
.ch-film video{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#000; }
.ch-film figcaption{ padding:var(--s2) var(--s3); color:var(--muted); font-size:var(--t-small); line-height:1.5; }
/* Przełącznik części: linki siedzą w (blok akapitu), więc to on musi zawijać jak siatka,
inaczej na telefonie trzeci przycisk nachodzi na tekst pod spodem (zauważone 20.09). */
.ch-kotwice > p{ display:flex; flex-wrap:wrap; gap:var(--s2); margin:0; }
/* Wstęp pod paskiem przycisków (Atrakcje): większy odstęp — gospodarz 20.09. !important, bo flow
WordPressa nadpisuje margines górny dziecka .ch-wrap (tak samo jak przy pasie wezwania). */
.ch-kotwice + .ch-wstep,.ch-blok + .ch-wstep{ margin-top:var(--s5) !important; }
/* 22.09, Domki (gospodarz): obok wstępu trzy skróty do sekcji 01–03; na komputerze po prawej,
na telefonie pod tekstem. Numerki w tym samym chipie co tytuły sekcji, do których prowadzą. */
.ch-wstep--skoki{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s4) var(--s5); align-items:center; }
.ch-wstep--skoki > .ch-tresc{ max-width:68ch; }
.ch-wstep--skoki > .ch-skoki{ order:-1; } /* na komputerze skróty po lewej (gospodarz 22.09), w HTML tekst jest pierwszy */
.ch-skoki{ display:flex; flex-direction:column; min-width:min(100%, 300px); }
.ch-skoki .ch-ikona-skoku{ width:24px; height:24px; stroke:var(--amber); }
.ch-skoki a{
display:grid; grid-template-columns:auto 1fr auto; gap:var(--s2); align-items:center;
padding:.85rem 0; border-top:1px solid var(--line); color:var(--text); text-decoration:none;
font:600 var(--t-body)/1.4 var(--font-ui); transition:color .3s var(--ease); /* 22.09: większy i grubszy font, żeby skróty nie ginęły obok treści */
}
.ch-skoki a:last-child{ border-bottom:1px solid var(--line); }
.ch-skoki a:hover,.ch-skoki a:focus-visible{ color:var(--amber); }
.ch-skoki svg{ width:18px; height:18px; fill:none; stroke:var(--amber); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease); }
.ch-skoki a:hover svg,.ch-skoki a:focus-visible svg{ transform:translateX(4px); }
@media (max-width:900px){ .ch-wstep--skoki{ grid-template-columns:1fr; } .ch-wstep--skoki > .ch-skoki{ order:0; } } /* na telefonie skróty pod tekstem */
/* 22.09, gospodarz (zrzut z iPada, Kontakt): odstęp pod nagłówkiem strony był nieproporcjonalnie
większy niż reszta. Ma być taki jak odstęp tekstu tytułu sekcji od linii pod nim (--s3). */
.ch-hero + .ch-blok,.ch-hero + .ch-blok--zwarty{ padding-top:var(--s4); } /* zmierzone: --s3 dawało 11 px, --s4 daje ~27 px jak tytuł od linii */
.ch-hero + .ch-wstep{ margin-top:var(--s4) !important; }
/* Blok dwóch kolumn użyty bezpośrednio w .ch-wrap (Atrakcje): ma trzymać szerokość treści,
nie pełną (jego grid-column:1/-1 jest dla siatki .ch-domki na stronie głównej). */
.ch-wrap > .ch-tekst-2kol{ grid-column:tresc; }
/* Atrakcje, blok pod filmem: każdy akapit w swojej kolumnie (nie łamanie gazetowe, w którym
nie widać, gdzie zaczyna się drugi akapit — gospodarz 20.09); nazwy własne pogrubione. */
.ch-wrap > .ch-tekst-2kol{ columns:auto; display:grid; grid-template-columns:1fr 1fr; gap:var(--s2) var(--s4); align-items:start; }
.ch-wrap > .ch-tekst-2kol h3{ grid-column:1 / -1; }
.ch-wrap > .ch-tekst-2kol p{ margin:0; }
.ch-wrap > .ch-tekst-2kol strong{ color:var(--text); font-weight:600; }
@media (max-width:700px){ .ch-wrap > .ch-tekst-2kol{ grid-template-columns:1fr; } .ch-wrap > .ch-tekst-2kol h3{ grid-column:auto; } }
/* Nagłówek bez przyciemniania (Cennik 20.09, Domki 22.09 — gospodarz: „wolałbym, żeby nie było
przyciemniane”). Bez filtra i bez żadnej nakładki na zdjęciu; czytelność daje cień na samych literach. */
.ch-hero--bez-cienia .ch-hero-frame img{ filter:none; }
.ch-hero--bez-cienia .ch-hero-frame::after{ display:none; }
.ch-hero--bez-cienia .ch-hero-copy{ text-shadow:0 1px 2px rgb(0 0 0 / .55), 0 2px 24px rgb(0 0 0 / .4); }
/* Cennik: przycisk rezerwacji w panelu z tabelą (gospodarz 21.09). */
.ch-cennik-panel .wp-block-buttons{ margin-top:var(--s3); }
/* Cennik, panel z tabelą (gospodarz 21.09): nazwy sezonów pogrubione; tekst „To ceny przykładowe”
i przycisk „Zarezerwuj pobyt” obok siebie na jednej wysokości (na telefonie pod sobą);
większy oddech między ostatnim wierszem tabeli a tym tekstem. */
.ch-cennik--glowny thead th{ font-weight:700; }
.ch-cennik--glowny thead th span{ font-weight:400; }
.ch-cennik-stopka{ display:flex; align-items:center; gap:var(--s4); margin-top:var(--s4) !important; } /* !important: flow WordPressa nadpisuje margines dziecka panelu. Tekst na całą szerokość, przycisk przy prawej krawędzi (wariant „środek prawej połowy” odrzucony 21.09: za dużo pustki) */
.ch-cennik-stopka .ch-pod-tabela{ flex:1; margin:0; }
.ch-cennik-stopka .wp-block-buttons{ flex:none; margin:0; }
@media (max-width:700px){ .ch-cennik-stopka{ flex-direction:column; align-items:flex-start; gap:var(--s3); } }
/* Cennik: zastrzeżenie prawne jako ostatnie zdanie pod tabelą, drobniej (gospodarz 21.09). */
.ch-prawne{ display:block; margin-top:.6rem; font-size:var(--t-small); color:var(--muted); opacity:.85; }
/* Cennik, „Wyposażenie oraz zaplecze” (gospodarz 21.09): jedno zdjęcie 3∶2 + pięć grup w siatce trzech kolumn. */
.ch-wyposazenie .ch-uklad-media img{ aspect-ratio:3/2; }
.ch-wyposazenie h3{ font-size:var(--t-h3); margin:0 0 .5rem; }
@media (min-width:900px){ .ch-wyposazenie{ grid-template-columns:repeat(3,1fr); } } /* na szerokim ekranie auto-fit dawał 4+2 komórki */
/* FAQ (21.09, wersja 3): karty bez rozwijania — 15 pytań + 3 zdjęcia = 18 kart w trzech kolumnach.
Gospodarz: rozwijanie w siatce skacze, karty z widoczną odpowiedzią są czytelniejsze. */
.ch-faq-karty .ch-etykieta,.ch-ikona-karty .ch-etykieta{ font:600 var(--t-micro)/1.4 var(--font-ui); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--amber); margin:0 0 .5rem; }
.ch-faq-karty .ch-card h3,.ch-ikona-karty .ch-card h3{ font-size:var(--t-h3); }
@media (min-width:900px){ .ch-faq-karty,.ch-ikona-karty{ grid-template-columns:repeat(3,1fr); } }
/* FAQ: ikonka cienką linią nad etykietą każdego pytania (gospodarz 21.09), SVG w kodzie, bez biblioteki. */
.ch-faq-ikona{ display:block; width:30px; height:30px; margin:0 0 .75rem; fill:none; stroke:var(--amber); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
/* Przycisk „na górę” (gospodarz 22.09). Ukryty do 600 px przewinięcia, klasa .is-widoczny ze skryptu. */
.ch-do-gory{
position:fixed; right:var(--s3); bottom:calc(var(--s3) + env(safe-area-inset-bottom, 0px)); z-index:40;
width:44px; height:44px; display:grid; place-items:center;
background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
color:var(--amber); opacity:0; transform:translateY(8px); pointer-events:none;
transition:opacity .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.ch-do-gory.is-widoczny{ opacity:1; transform:none; pointer-events:auto; }
.ch-do-gory:hover,.ch-do-gory:focus-visible{ border-color:color-mix(in srgb,var(--copper) 55%, var(--line)); }
.ch-do-gory svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
/* ===========================================================================
24. REZERWACJA: WTYCZKA chatynki-rezerwacja W NOWYM WYGLĄDZIE (25.09)
Wtyczka bez zmian (2.0.28, ta sama co na chatynki.pl): te same kroki, pola
i kolejność (Kuba 25.09: „przełóżmy tylko to, co jest obecnie, do nowego
wyglądu”). Motyw zmienia wyłącznie wygląd, na wzór bloków zastępczych
z głównej (.ch-odpowiedz, .ch-dane) i czerwieni „Sprawdź” z hero.
⚠️ Każdy selektor zaczyna się od :root: arkusz wtyczki celuje
w `#chatynki-rezerwacja-app .x`, więc jedna klasa więcej wygrywa niezależnie
od kolejności wczytania arkuszy.
⚠️ Wtyczka ma własne zmienne o nazwach motywu (--bg, --line, --shadow).
`inherit` oddaje im wartości strony, więc reszta jej reguł sama przechodzi
na kolory motywu, także po przełączeniu jasny/ciemny.
⚠️ !important wyłącznie tam, gdzie skrypt wtyczki wpisuje kolor wprost
w element (podpowiedź przy przerwie w wyborze, notka o psie, stara migawka).
======================================================================== */
.ch-rez-siatka{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--s3); align-items:start; }
/* Karty z prawej w naturalnej wysokości: formularz jest dwa razy wyższy od nich, a rozciągnięte
do niego (jak na Kontakcie) miały po 300 px pustki pod tekstem. */
.ch-rez-boczne{ display:flex; flex-direction:column; gap:var(--s3); }
.ch-rez-boczne .ch-lista{ margin-top:var(--s2); }
/* iPad w pionie: kalendarz w 2/3 szerokości miałby dni po 37 px, za małe pod palec. */
@media (max-width:1100px){
.ch-rez-siatka{ grid-template-columns:1fr; }
.ch-rez-boczne{ display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); }
}
:root #chatynki-rezerwacja-app{
--bg:inherit; --line:inherit; --shadow:inherit;
--card:var(--surface); --ink:var(--text); --ink-soft:var(--muted);
--select:var(--copper); --select-ink:var(--on-copper);
/* Czerwień „Sprawdź” o ton ciemniejsza niż w hero (#EF3A2C): biały napis ma na niej 4,8∶1 zamiast 3,95∶1.
Minimum Kuby dla tego przycisku to 4,5∶1 (decyzja 30.08, komentarz przy #showPriceBtn we wtyczce). */
--accent:#D9301F; --accent-dark:#C0281A;
--radius:10px;
/* Kolory znaczące, jak w dzisiejszym formularzu: zielony = wolne i rezerwacja,
żółty = zwróć uwagę, czerwony = coś nie tak. Ciemny motyw ma je przygaszone. */
--rez-ok-bg:rgba(76,175,143,.12); --rez-ok-tx:#4CAF8F; --rez-ok-linia:rgba(76,175,143,.38);
--rez-uwaga-bg:rgba(245,196,81,.10); --rez-uwaga-tx:#F5C451; --rez-uwaga-linia:rgba(245,196,81,.32);
--rez-blad-bg:rgba(239,58,44,.12); --rez-blad-tx:#FF8A80; --rez-blad-linia:rgba(239,58,44,.40);
/* Zieleń przycisku ciemniejsza niż --zielony: biały napis na #4CAF8F ma kontrast 2,7∶1, tu 5∶1. */
--rez-zielony:#2E7D62; --rez-zielony-hi:#276B54;
--rez-dzien:color-mix(in srgb,var(--text) 7%,var(--surface));
--rez-dzien-linia:var(--line-strong);
--rez-przeszly:color-mix(in srgb,var(--muted) 55%,transparent);
--free:var(--rez-ok-bg); --free-ink:var(--rez-ok-tx);
--busy-bg:var(--rez-blad-bg); --busy-ink:var(--rez-blad-tx);
background:transparent; color:var(--text); padding:0;
font-family:var(--font-ui); line-height:1.5;
}
:root[data-theme="light"] #chatynki-rezerwacja-app{
--rez-ok-bg:#E6F2EC; --rez-ok-tx:#2B7A5C; --rez-ok-linia:#BFDCCD;
--rez-uwaga-bg:#FBF6EC; --rez-uwaga-tx:#7A6528; --rez-uwaga-linia:#ECDFC4;
--rez-blad-bg:#F9E3E1; --rez-blad-tx:#A5261C; --rez-blad-linia:#EBC3BF;
--rez-dzien:#FFFFFF;
}
/* ---- karty kroków i pasek „od … zł” ---- */
:root #chatynki-rezerwacja-app .card{ padding:var(--s3); margin-bottom:var(--s3); }
:root #chatynki-rezerwacja-app .step-label{
font:600 var(--t-micro)/1.5 var(--font-ui); letter-spacing:.22em; text-transform:uppercase;
color:var(--copper); margin-bottom:var(--s2);
}
:root #chatynki-rezerwacja-app .step-label .mini{ font:400 var(--t-small)/1.4 var(--font-ui); letter-spacing:0; color:var(--muted); }
:root #chatynki-rezerwacja-app .cena-od{
background:var(--surface); box-shadow:none; border:1px solid var(--line); border-left:3px solid var(--copper);
border-radius:var(--radius); padding:var(--s2) var(--s3); margin-bottom:var(--s3); gap:var(--s2);
}
:root #chatynki-rezerwacja-app .cena-od-kwota{ font:400 var(--t-body)/1.3 var(--font-ui); color:var(--text); letter-spacing:0; }
:root #chatynki-rezerwacja-app .cena-od-kwota b{ font:800 var(--t-h3)/1 var(--font-display); color:var(--copper); }
:root #chatynki-rezerwacja-app .cena-od-drobne{ font-size:var(--t-small); color:var(--muted); margin-top:.3rem; }
:root #chatynki-rezerwacja-app .cena-od-drobne b{ color:var(--text); font-weight:600; }
/* ---- pola: jak wiersze danych z głównej (.ch-wiersz, .ch-pole-w) ---- */
:root #chatynki-rezerwacja-app label{ font:700 var(--t-small)/1.3 var(--font-ui); color:var(--text); }
:root #chatynki-rezerwacja-app :is(input,select,textarea){
/* 16 px to minimum: przy mniejszym iPhone przybliża stronę po dotknięciu pola. */
font:500 max(1rem,var(--t-body))/1.3 var(--font-ui);
color:var(--text); background:var(--bg); color-scheme:dark;
border:1px solid var(--line-strong); border-radius:8px; padding:.7rem .9rem; min-height:3rem;
transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
:root[data-theme="light"] #chatynki-rezerwacja-app :is(input,select,textarea){ color-scheme:light; }
/* Safari (zrzut Kuby 26.09): select rysował po swojemu, niższy od pól obok; autouzupełnianie malowało pola na żółto. */
:root #chatynki-rezerwacja-app select{
-webkit-appearance:none; appearance:none; padding-right:2.4rem;
background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238391A5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .9rem center;
}
:root #chatynki-rezerwacja-app input:-webkit-autofill{ box-shadow:inset 0 0 0 100px var(--bg); -webkit-text-fill-color:var(--text); caret-color:var(--text); }
:root #chatynki-rezerwacja-app :is(input,textarea)::placeholder{ color:var(--muted); opacity:.6; }
:root #chatynki-rezerwacja-app :is(input,select,textarea):focus{
outline:none; border-color:var(--copper);
box-shadow:0 0 0 3px color-mix(in srgb,var(--copper) 26%,transparent);
}
:root #chatynki-rezerwacja-app .pole-w-linii{ gap:var(--s2); }
:root #chatynki-rezerwacja-app .pole-w-linii.etykieta-stala{ margin-top:.75rem; }
/* Wspólna szerokość etykiet (decyzja Kuby 26.08: pola zaczynają się w jednej linii), płynna: 108 px na telefonie, 128 px na komputerze. */
:root #chatynki-rezerwacja-app .pole-w-linii.etykieta-stala label{ flex:0 0 clamp(6.75rem, 6rem + 2.2vw, 8.25rem); }
:root #chatynki-rezerwacja-app .pole-zaczepka{
min-height:3rem; padding:.7rem .9rem; border:1px dashed var(--line-strong); border-radius:8px;
background:transparent; color:var(--muted); font:500 var(--t-small)/1.4 var(--font-ui);
}
:root #chatynki-rezerwacja-app .pole-zaczepka:hover{ border-color:var(--copper); color:var(--text); background:transparent; }
:root #chatynki-rezerwacja-app .checkbox-row{ gap:.6rem; margin-top:var(--s2); }
:root #chatynki-rezerwacja-app .checkbox-row input{ min-height:0; width:1.1rem; height:1.1rem; padding:0; accent-color:var(--copper); margin-top:.2rem; }
:root #chatynki-rezerwacja-app .checkbox-row label{ font:400 var(--t-small)/1.5 var(--font-ui); color:var(--muted); }
/* ---- podpowiedzi i komunikaty ---- */
:root #chatynki-rezerwacja-app .cal-hint{
background:var(--rez-uwaga-bg); color:var(--rez-uwaga-tx); border:1px solid var(--rez-uwaga-linia);
border-radius:8px; font:500 var(--t-small)/1.45 var(--font-ui); padding:.6rem .9rem;
}
:root #chatynki-rezerwacja-app #calHint[style*="background"]{
background:var(--rez-blad-bg) !important; color:var(--rez-blad-tx) !important; border-color:var(--rez-blad-linia);
}
:root #chatynki-rezerwacja-app #calHint ~ .cal-hint,
:root #chatynki-rezerwacja-app #petNote{
background:var(--rez-uwaga-bg) !important; color:var(--rez-uwaga-tx) !important; border:1px solid var(--rez-uwaga-linia) !important;
}
:root #chatynki-rezerwacja-app #petNote{ margin-top:.75rem; }
:root #chatynki-rezerwacja-app #petNote[style*="232, 240, 230"]{
background:var(--rez-ok-bg) !important; color:var(--rez-ok-tx) !important; border-color:var(--rez-ok-linia) !important;
}
:root #chatynki-rezerwacja-app .err{ background:var(--rez-blad-bg); color:var(--rez-blad-tx); border:1px solid var(--rez-blad-linia); border-radius:8px; font-size:var(--t-small); }
:root #chatynki-rezerwacja-app .minstay{
background:var(--rez-blad-bg); color:var(--text); border:0; border-left:3px solid var(--accent);
border-radius:8px; font-size:var(--t-small);
}
:root #chatynki-rezerwacja-app .minstay strong{ color:var(--rez-blad-tx); }
:root #chatynki-rezerwacja-app .horyzont-info{
background:transparent; border:1px solid var(--line); border-left:3px solid var(--line-strong);
border-radius:8px; color:var(--muted); font-size:var(--t-small);
}
:root #chatynki-rezerwacja-app .horyzont-info strong{ color:var(--text); }
/* ---- kalendarz ---- */
:root #chatynki-rezerwacja-app .cal-head .mth{ font:700 var(--t-body)/1.3 var(--font-ui); }
:root #chatynki-rezerwacja-app .cal-head button{
width:2.5rem; height:2.5rem; border:1px solid var(--line-strong); border-radius:6px;
background:transparent; color:var(--text); font:400 1.25rem/1 var(--font-ui); cursor:pointer;
transition:border-color .3s var(--ease), color .3s var(--ease);
}
:root #chatynki-rezerwacja-app .cal-head button:hover{ border-color:var(--copper); color:var(--copper); }
:root #chatynki-rezerwacja-app .cal-month-title{ font:600 var(--t-micro)/1.3 var(--font-ui); letter-spacing:var(--tracking-wide); color:var(--muted); }
:root #chatynki-rezerwacja-app .dow{ font:600 var(--t-micro)/1.3 var(--font-ui); color:var(--muted); }
:root #chatynki-rezerwacja-app .cal-grid{ gap:4px; }
:root #chatynki-rezerwacja-app .day{ border-radius:6px; font:600 var(--t-small)/1 var(--font-ui); }
/* Doba do kliknięcia: jaśniejsza płytka z obrysem. Przeszła: sama cyfra, bez płytki,
żeby różnicę „wolno kliknąć / nie wolno” widać było bez czytania (lekcja z 25.08). */
:root #chatynki-rezerwacja-app .day.doba{
background:var(--rez-dzien); border:1px solid var(--rez-dzien-linia); box-shadow:none;
color:var(--text); font-weight:700;
}
:root #chatynki-rezerwacja-app .day.doba:hover{
background:color-mix(in srgb,var(--copper) 16%,var(--rez-dzien)); border-color:var(--copper); box-shadow:none;
}
:root #chatynki-rezerwacja-app .day.doba:active{ background:color-mix(in srgb,var(--copper) 28%,var(--rez-dzien)); box-shadow:none; }
:root #chatynki-rezerwacja-app .day.doba.selected{ border-color:var(--copper); box-shadow:none; }
:root #chatynki-rezerwacja-app .day.past{ background:transparent; border:1px solid transparent; color:var(--rez-przeszly); font-weight:500; }
:root #chatynki-rezerwacja-app .day.poza-horyzontem,
:root #chatynki-rezerwacja-app .day.poza-horyzontem:hover{
background:transparent; border:1px dashed var(--line); color:var(--rez-przeszly); font-weight:500;
}
:root #chatynki-rezerwacja-app .day.season-h::after{ bottom:5px; }
:root #chatynki-rezerwacja-app .legend{ font-size:var(--t-micro); color:var(--muted); gap:var(--s2); }
:root #chatynki-rezerwacja-app .dot{ border-radius:3px; }
:root #chatynki-rezerwacja-app .dates-display{ gap:var(--s2); }
:root #chatynki-rezerwacja-app .date-box{ border:1px dashed var(--line-strong); border-radius:8px; padding:.6rem .9rem; }
:root #chatynki-rezerwacja-app .date-box .lbl{ font:600 var(--t-micro)/1.4 var(--font-ui); letter-spacing:var(--tracking-wide); color:var(--muted); }
:root #chatynki-rezerwacja-app .date-box .val{ font:700 var(--t-body)/1.4 var(--font-ui); color:var(--text); }
:root #chatynki-rezerwacja-app .date-box.empty .val{ color:var(--muted); font-weight:400; }
:root #chatynki-rezerwacja-app .cal-loader{ background:transparent; border:1px dashed var(--line-strong); border-radius:var(--radius); }
:root #chatynki-rezerwacja-app .cal-loader-dots span{ background:var(--muted); animation-name:chRezFala; }
:root #chatynki-rezerwacja-app .cal-loader-txt{ font:700 var(--t-small)/1.4 var(--font-ui); color:var(--text); }
@keyframes chRezFala{ 0%,100%{ opacity:.3; transform:scale(.8); } 40%{ opacity:1; transform:scale(1.15); } }
@media (prefers-reduced-motion:reduce){ :root #chatynki-rezerwacja-app .cal-loader-dots span{ animation:none; opacity:.7; } }
/* ---- przyciski: „Sprawdź” czerwony jak w hero, „Rezerwuję” zielony jak na głównej ---- */
:root #chatynki-rezerwacja-app .cta{
font:800 var(--t-body)/1.2 var(--font-display); letter-spacing:.01em;
border-radius:6px; padding:.95rem 1.2rem; min-height:3.4rem; margin-top:var(--s3);
transition:background-color .3s var(--ease);
}
:root #chatynki-rezerwacja-app #showPriceBtn{ background:var(--accent); color:#fff; }
:root #chatynki-rezerwacja-app #showPriceBtn:hover{ background:var(--accent-dark); }
:root #chatynki-rezerwacja-app .cta-reserve{ margin-top:0; background:var(--rez-zielony); color:#fff; }
:root #chatynki-rezerwacja-app .cta-reserve:hover{ background:var(--rez-zielony-hi); }
:root #chatynki-rezerwacja-app .cta:disabled,
:root #chatynki-rezerwacja-app .cta:disabled:hover{ background:var(--disabled-bg); color:var(--disabled-tx); }
:root #chatynki-rezerwacja-app .cta-oslona::after{ background:var(--text); color:var(--bg); font:500 var(--t-micro)/1.4 var(--font-ui); }
:root #chatynki-rezerwacja-app .cta-oslona::before{ border-top-color:var(--text); }
:root #chatynki-rezerwacja-app .clear-btn{ font-size:var(--t-small); color:var(--muted); }
:root #chatynki-rezerwacja-app .clear-btn:hover{ color:var(--copper); }
/* ---- odpowiedź: termin zajęty, propozycje, cena (wzór: .ch-odpowiedz z głównej) ---- */
:root #chatynki-rezerwacja-app .wynik{ border-radius:var(--radius); font-size:var(--t-body); padding:var(--s2) var(--s3); }
:root #chatynki-rezerwacja-app .wynik-tak{ background:var(--rez-ok-bg); color:var(--rez-ok-tx); border-color:var(--rez-ok-linia); }
:root #chatynki-rezerwacja-app .wynik-czesc{ background:var(--rez-uwaga-bg); color:var(--rez-uwaga-tx); border-color:var(--rez-uwaga-linia); }
:root #chatynki-rezerwacja-app .wynik-nie{ background:var(--rez-blad-bg); color:var(--rez-blad-tx); border-color:var(--rez-blad-linia); }
:root #chatynki-rezerwacja-app .wynik-info{ background:transparent; color:var(--text); border-color:var(--line); }
:root #chatynki-rezerwacja-app .wynik-opcja{
background:var(--rez-zielony); border:0; border-radius:8px; box-shadow:none; color:#fff;
}
:root #chatynki-rezerwacja-app .wynik-opcja:hover{ background:var(--rez-zielony-hi); filter:none; box-shadow:none; }
:root #chatynki-rezerwacja-app .wynik-drobne{ border-top-color:var(--line); }
:root #chatynki-rezerwacja-app .price-out{ border:1px solid var(--line); border-radius:var(--radius); margin-top:var(--s3); }
:root #chatynki-rezerwacja-app .price-hero{ background:transparent; border:0; border-bottom:1px solid var(--line); color:var(--text); padding:var(--s3); }
:root #chatynki-rezerwacja-app .price-hero .lbl{ font:600 var(--t-micro)/1.3 var(--font-ui); letter-spacing:.12em; color:var(--muted); }
:root #chatynki-rezerwacja-app .price-hero .big{ font:700 var(--t-liczba)/1 var(--font-display); color:var(--text); margin-top:.3rem; }
:root #chatynki-rezerwacja-app .price-hero .per-sub{ font:400 var(--t-micro)/1.3 var(--font-ui); text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-top:.4rem; }
:root #chatynki-rezerwacja-app .price-hero .total-line{ font:400 var(--t-small)/1.4 var(--font-ui); color:var(--text); border-top-color:var(--line); }
:root #chatynki-rezerwacja-app .price-actions{ padding:var(--s3) var(--s3) 0; }
:root #chatynki-rezerwacja-app .success{ background:var(--rez-ok-bg); color:var(--rez-ok-tx); border:1px solid var(--rez-ok-linia); border-radius:var(--radius); font:700 var(--t-body)/1.45 var(--font-ui); margin:var(--s2) var(--s3); }
:root #chatynki-rezerwacja-app .cr-benefits{ border-top:0; margin:var(--s2) 0 0; padding:var(--s2) var(--s3); }
:root #chatynki-rezerwacja-app .cr-benefits .b-item{ font:500 var(--t-small)/1.45 var(--font-ui); color:var(--text); }
:root #chatynki-rezerwacja-app .cr-benefits .b-ico{ color:var(--rez-ok-tx); }
:root #chatynki-rezerwacja-app .cr-benefits .b-more span{ color:var(--muted); }
:root #chatynki-rezerwacja-app .disclaimer-soft{ font-size:var(--t-micro); color:var(--muted); }
:root #chatynki-rezerwacja-app .price-body{ padding:0 var(--s3) var(--s2); font-size:var(--t-small); }
:root #chatynki-rezerwacja-app .price-body .line{ padding:.6rem .2rem; border-bottom:1px solid var(--line); gap:var(--s2); }
:root #chatynki-rezerwacja-app .price-body .line .k{ color:var(--muted); }
:root #chatynki-rezerwacja-app .price-body .line .v{ color:var(--text); font-weight:700; text-align:right; }
:root #chatynki-rezerwacja-app .deposit{ background:var(--rez-uwaga-bg); color:var(--rez-uwaga-tx); border-top:1px solid var(--rez-uwaga-linia); font-size:var(--t-small); padding:var(--s2) var(--s3); }
:root #chatynki-rezerwacja-app .cr-footer-meta{ font-size:var(--t-micro); color:var(--muted); opacity:.8; }
/* ---- rezerwacja w dwóch krokach pod hero (26.09, Kuba: cena od razu, projekt z Canvy, potem dwa kroki) ----
Wskaźnik kroków (strzałki w prawo, nieklikalne), pod nim okno ze slajdami w jednym rzędzie, przesuwane w prawo:
1 terminy z ceną, 2 termin i cena w jednym wierszu, dane i „Zarezerwuj wstępnie”, 3 podziękowanie. Kuba 26.09: sekcja
nie rośnie w dół i na dużym monitorze nie skacze, więc od 768 px okno ma wysokość najwyższego slajdu (JS); na telefonie
aktywnego. */
.ch-rez-kroki{ padding-top:var(--s4); width:100%; max-width:60rem; justify-self:center; scroll-margin-top:var(--wys-naglowka, 5rem); }
.ch-rez-kroki[hidden]{ display:none; }
/* Kuba 26.09: „więcej miękkości przy lądowaniu”: sekcja wjeżdża łagodnie przy pierwszym „Sprawdź”, wiersze pojawiają się
po kolei (także przy każdym kolejnym „Sprawdź”, bo to nowe elementy), a krok 2 wsuwa się wolniej z przenikaniem. */
.ch-rez-okno{ overflow:hidden; overflow:clip; transition:height .6s var(--ease); } /* clip: przewinięcie do pola nie przesuwa kroków w oknie (27.09) */
.ch-rez-tor{ display:flex; align-items:flex-start; transition:transform .7s var(--ease); }
.ch-rez-krok{ flex:0 0 100%; min-width:0; padding:3px; transition:opacity .6s var(--ease); } /* 3 px: obrys i cień kart nie przycięte przez okno */
.ch-rez-krok[inert]{ opacity:0; }
@keyframes ch-rez-wejscie{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.ch-rez-kroki:not([hidden]){ animation:ch-rez-wejscie .7s var(--ease) both; }
.ch-rez-wyniki > *, .ch-rez-lista > *{ animation:ch-rez-wejscie .55s var(--ease) both; }
.ch-rez-lista > :nth-child(1){ animation-delay:.15s; }
.ch-rez-lista > :nth-child(2){ animation-delay:.23s; }
.ch-rez-lista > :nth-child(3){ animation-delay:.31s; }
.ch-rez-lista > :nth-child(4){ animation-delay:.39s; }
.ch-rez-lista > :nth-child(n+5){ animation-delay:.47s; }
@media (prefers-reduced-motion:reduce){
.ch-rez-okno,.ch-rez-tor,.ch-rez-krok{ transition:none; }
.ch-rez-kroki:not([hidden]),.ch-rez-wyniki > *,.ch-rez-lista > *{ animation:none; }
}
/* Wskaźnik: trzy strzałki w prawo zazębione o grot. Zrobione = ptaszek na jasnej zieleni, bieżący = pełna zieleń
przycisków (biały 5∶1), dalsze wyciszone. */
.ch-rez-etapy{ --grot:.9rem; display:flex; margin:0 3px var(--s3); padding:0; list-style:none; border-radius:8px; overflow:hidden; }
.ch-rez-etapy li{
flex:1 1 0; min-width:0; display:flex; margin:0;
background:var(--surface); color:var(--muted); font:700 var(--t-small)/1.2 var(--font-ui); white-space:nowrap;
clip-path:polygon(0 0, calc(100% - var(--grot)) 0, 100% 50%, calc(100% - var(--grot)) 100%, 0 100%, var(--grot) 50%);
}
.ch-rez-etapy li + li{ margin-left:calc(3px - var(--grot)); }
.ch-rez-etapy li:first-child{ clip-path:polygon(0 0, calc(100% - var(--grot)) 0, 100% 50%, calc(100% - var(--grot)) 100%, 0 100%); }
.ch-rez-etapy li:last-child{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--grot) 50%); }
.ch-rez-etap-nr{
flex:none; display:inline-grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:50%;
border:1.5px solid currentColor; font:800 var(--t-micro)/1 var(--font-ui);
}
.ch-rez-etap{
flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; gap:.55rem;
min-height:2.75rem; padding:.4rem calc(var(--grot) + .5rem); margin:0;
background:none; border:0; color:inherit; font:inherit; cursor:default;
}
/* Kuba 26.09: z kroku 2 wraca się do terminów kliknięciem w krok 1, bez osobnego przycisku „wróć”. */
button.ch-rez-etap:not(:disabled){ cursor:pointer; }
button.ch-rez-etap:not(:disabled):hover .ch-rez-etap-tekst{ text-decoration:underline; text-underline-offset:3px; }
button.ch-rez-etap:focus-visible{ outline:2px solid currentColor; outline-offset:-5px; }
.ch-rez-etap-tekst{ overflow:hidden; text-overflow:ellipsis; }
.ch-rez-etapy li[aria-current="step"]{ background:#2E7D62; color:#fff; }
.ch-rez-etapy li.ch-rez-etap--zrobiony{ background:color-mix(in srgb, #4CAF8F 16%, var(--surface)); color:#4CAF8F; }
:root[data-theme="light"] .ch-rez-etapy li:not([aria-current]){ background:color-mix(in srgb, var(--line) 55%, var(--surface)); }
:root[data-theme="light"] .ch-rez-etapy li.ch-rez-etap--zrobiony{ background:color-mix(in srgb, #4CAF8F 18%, var(--surface)); color:#2B7A5C; }
.ch-rez-etap--zrobiony .ch-rez-etap-nr{ background:#2E7D62; border-color:#2E7D62; color:#fff; }
@media (max-width:560px){
/* Telefon: nazwa tylko przy bieżącym kroku, przy pozostałych numer albo ptaszek. */
.ch-rez-etapy:has([aria-current]) li:not([aria-current]){ flex:0 0 4.25rem; }
.ch-rez-etapy li:not([aria-current]) .ch-rez-etap-tekst{ display:none; }
}
.ch-rez-komunikat{
margin:0 0 var(--s3); padding:var(--s2) var(--s3); border:1px solid var(--line); border-left:3px solid var(--line-strong);
border-radius:8px; background:var(--surface); color:var(--text); font-size:var(--t-small);
}
.ch-rez-komunikat a,.ch-rez-podtytul a{ color:var(--link); font-weight:700; }
.ch-rez-komunikat--blad{ border-left-color:#D9301F; }
.ch-rez-rezerwuj:disabled{ opacity:.7; cursor:progress; }
/* Krok 1: wyniki. Zielony = wolne (język dzisiejszego formularza), czerwony = zajęte. */
.ch-rez-naglowek{ display:flex; align-items:center; gap:.75rem; margin:0 0 var(--s3); font:700 var(--t-h3)/1.25 var(--font-display); }
.ch-rez-naglowek--wolne{ color:#4CAF8F; }
.ch-rez-naglowek--zajete{ color:#FF8A80; }
:root[data-theme="light"] .ch-rez-naglowek--wolne{ color:#2B7A5C; }
:root[data-theme="light"] .ch-rez-naglowek--zajete{ color:#A5261C; }
.ch-rez-podtytul{ margin:var(--s3) 0 var(--s2); color:var(--muted); font:600 var(--t-small)/1.45 var(--font-ui); }
/* Kuba 26.09: terminy jako wiersze, przycisk na końcu wiersza, nie kafelki; potem „niewielki odstęp, żeby było widać,
że to jest osobne”. */
.ch-rez-lista{ display:grid; gap:.4rem; }
.ch-rez-wiersz{
display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center;
gap:.5rem var(--s3); padding:.7rem var(--s3);
background:var(--surface); border:1px solid var(--line); border-radius:10px;
}
/* Termin specjalny (święta, długi weekend, ferie) wybity (Kuba 26.09, poprawki 27.09: „grubszy pionowy pasek, na nim
gwiazdka”, potem „coś beżowego czy żółtego zamiast granatu”): szeroki złoty pasek (złoto gwiazdek z opinii, #F5C451)
z granatową gwiazdką, tło lekko beżowe. */
.ch-rez-wiersz--specjalny{
position:relative; padding-left:calc(1.6rem + var(--s3));
background:color-mix(in srgb, #F5C451 4%, var(--surface)); /* w ciemnym więcej wychodziło szarobrązowo */
border-color:color-mix(in srgb, #F5C451 45%, var(--line));
box-shadow:inset 1.6rem 0 0 #F5C451;
}
:root[data-theme="light"] .ch-rez-wiersz--specjalny{ background:color-mix(in srgb, #F5C451 10%, var(--surface)); }
.ch-rez-wiersz--specjalny::before{
content:"★"; position:absolute; inset:0 auto 0 0; width:1.6rem; display:grid; place-items:center;
color:#1F2D3D; font-size:.95rem;
}
.ch-rez-wiersz--specjalny .ch-rez-opcja-napis{ color:var(--text); }
/* Kuba 27.09: wolny termin gościa w kroku 1 w inwersji, cały wiersz zielony zamiast napisu „Twój termin jest wolny”.
Po id, bo w kroku 2 ten sam wiersz zostaje jasny z zieloną kreską. */
#chRezWyniki .ch-rez-wiersz--glowny{ background:#2E7D62; border-color:#2E7D62; box-shadow:none; padding-block:1.25rem; } /* Kuba 27.09: „ciut grubszy”, jak termin specjalny */
#chRezWyniki .ch-rez-wiersz--glowny :is(strong, span){ color:#fff; }
#chRezWyniki .ch-rez-wiersz--glowny .ch-rez-wybierz{ background:#fff; color:#2E7D62; }
#chRezWyniki .ch-rez-wiersz--glowny .ch-rez-wybierz:hover{ background:#E3F1EB; }
.ch-rez-lista > .ch-rez-podtytul:first-child{ margin-top:0; }
/* Kuba 27.09: trzy argumenty za rezerwacją bezpośrednią pod hero (przed „Sprawdź”), nad „Gotowymi terminami”: bez ramki,
na tle strony, ikona i hasło, wchodzą po kolei z pauzą („bez pośredników, chwila odpoczynku, szybka odpowiedź…”). */
.ch-rez-powody{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s2) var(--s5); }
.ch-rez-powody > div{ display:flex; align-items:center; gap:.6rem; font:600 var(--t-body)/1.3 var(--font-ui); color:var(--text); }
.js-reveal .ch-rez-powody > .ch-reveal:nth-child(1){ transition-delay:.1s; }
.js-reveal .ch-rez-powody > .ch-reveal:nth-child(2){ transition-delay:.7s; }
.js-reveal .ch-rez-powody > .ch-reveal:nth-child(3){ transition-delay:1.3s; }
.ch-rez-powody svg{ flex:none; width:24px; height:24px; color:var(--copper); }
/* Kuba 27.09: „sekcja się rozciąga”; odstęp nad i pod hasłami jak od paska kroków do pierwszego terminu (--s3), przed
„Sprawdź” do następnej sekcji --s5 zamiast --s6. */
.ch-blok.ch-rez-powody-pas{ padding-top:var(--s3); }
.ch-rez-powody-pas + .ch-rez-kroki{ padding-top:var(--s3); }
.ch-rez-kroki[hidden] + .ch-blok{ padding-top:var(--s5); }
.ch-rez-wiersz--glowny{ box-shadow:inset 3px 0 0 #4CAF8F; }
.ch-rez-wiersz--glowny .ch-rez-opcja-napis{ color:#4CAF8F; }
:root[data-theme="light"] .ch-rez-wiersz--glowny .ch-rez-opcja-napis{ color:#2B7A5C; }
.ch-rez-wiersz-termin{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.ch-rez-wiersz-termin strong{ font:700 var(--t-body)/1.3 var(--font-display); color:var(--text); }
.ch-rez-wiersz-cena{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.ch-rez-wiersz-cena strong{ font:700 var(--t-h3)/1.2 var(--font-display); color:var(--text); }
.ch-rez-wiersz-cena span{ font:400 var(--t-micro)/1.35 var(--font-ui); color:var(--muted); }
.ch-rez-opcja-napis{ margin:0 0 .15rem; font:700 var(--t-micro)/1.3 var(--font-ui); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--copper); }
.ch-rez-opcja-dni{ margin:0; font:400 var(--t-small)/1.45 var(--font-ui); color:var(--muted); }
@media (max-width:560px){
.ch-rez-wiersz{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"termin termin" "cena przycisk"; }
.ch-rez-wiersz-termin{ grid-area:termin; }
.ch-rez-wiersz-cena{ grid-area:cena; align-items:flex-start; text-align:left; }
.ch-rez-wiersz .ch-rez-wybierz{ grid-area:przycisk; }
}
/* „Wybierz” i „Zarezerwuj wstępnie” zielone jak „Rezerwuję” w formularzu (biały napis 5∶1). */
.ch-rez-wybierz,.ch-rez-rezerwuj{
min-height:3rem; padding:.75rem 1.2rem; border:0; border-radius:6px; cursor:pointer;
background:#2E7D62; color:#fff; font:800 var(--t-body)/1.2 var(--font-display); letter-spacing:.01em;
transition:background-color .3s var(--ease);
}
.ch-rez-wybierz:hover,.ch-rez-rezerwuj:hover{ background:#276B54; }
.ch-rez-wybierz:focus-visible,.ch-rez-rezerwuj:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }
.ch-rez-wiersz .ch-rez-wybierz{ min-height:2.75rem; padding:.55rem 1.3rem; }
.ch-rez-rezerwuj{ min-height:3rem; padding-inline:2rem; }
/* Krok 2 (Kuba 26.09: „krótko data od do, ile nocy, cena na osobę, cena łącznie”): wiersz jak w kroku 1, bez przycisku,
cena za osobę za dobę na zielono; pod nim dane (pola wtyczki) i „Zarezerwuj wstępnie”. */
.ch-rez-wybor{ margin:0 0 var(--s3); }
.ch-rez-opcja-dni b{ color:var(--text); font-weight:700; }
.ch-rez-opcja-dni b.ch-rez-osobodoba{ color:#4CAF8F; }
:root[data-theme="light"] .ch-rez-opcja-dni b.ch-rez-osobodoba{ color:#2B7A5C; }
.ch-rez-krok > .cr-footer-meta{ margin:var(--s3) 0 0; text-align:center; font:400 var(--t-micro)/1.6 var(--font-ui); color:var(--muted); opacity:.8; }
.ch-rez-stopka{ display:flex; justify-content:center; margin-top:var(--s3); }
@media (max-width:560px){
.ch-rez-rezerwuj{ width:100%; }
}
/* Po „Zarezerwuj wstępnie”: mail i spam wyraźnie (Kuba 26.09). *//* Po „Potwierdzam”: mail i spam wyraźnie (Kuba 26.09). */
.ch-rez-komunikat--mail{ border-left-color:#4CAF8F; font-size:var(--t-body); }
.ch-rez-komunikat--mail p{ margin:0; }
.ch-rez-komunikat--mail p + p{ margin-top:.4rem; color:var(--muted); font-size:var(--t-small); }
.ch-rez-kroki #chatynki-rezerwacja-app > :not(.card:has(#rezForm)){ display:none; }
.ch-rez-kroki #chatynki-rezerwacja-app .card:has(#rezForm) > .step-label{ display:none; }
.ch-rez-kroki #rezForm > :is(.cta-oslona,#wynikBox,#priceOut,.clear-btn){ display:none !important; }
.ch-rez-kroki #chatynki-rezerwacja-app .card:has(#rezForm){ margin-bottom:var(--s3); }
.ch-rez-kroki #daneFields > .pole-w-linii:first-child{ margin-top:0; }
/* Kuba 27.09: kolejność Imię i nazwisko, Telefon, Email, potem Wiadomość i Zwierzęta; zgoda drobnym drukiem na środku nad
przyciskiem. Od 768 px dwie kolumny: dane kontaktowe po lewej, wiadomość i zwierzęta po prawej. Kolejność w HTML wtyczki
jest inna (imię, email, telefon, zwierzęta, wiadomość), więc przestawia ją CSS. */
/* !important: wtyczka chowa pola stylem w linii po sprawdzeniu danych; bez tego na telefonie krok 2 kurczył się przy wysyłce (Kuba 27.09: „strona skacze”). */
.ch-rez-kroki #chatynki-rezerwacja-app #daneFields{ display:flex !important; flex-direction:column; }
.ch-rez-kroki #daneFields > .pole-w-linii:has(#telefon){ order:1; }
.ch-rez-kroki #daneFields > .pole-w-linii:has(#email){ order:2; }
.ch-rez-kroki #daneFields > #wierszWiadomosc{ order:3; }
.ch-rez-kroki #daneFields > .pole-w-linii:has(#zwierzeta){ order:4; }
.ch-rez-kroki #daneFields > #petNote{ order:5; }
.ch-rez-kroki #chatynki-rezerwacja-app #daneFields > .checkbox-row{ order:6; justify-content:center; align-items:center; margin-top:var(--s3); }
.ch-rez-kroki #chatynki-rezerwacja-app #daneFields > .checkbox-row input{ margin-top:0; }
.ch-rez-kroki #chatynki-rezerwacja-app #daneFields > .checkbox-row label{ font-size:var(--t-micro); }
@media (min-width:768px){
/* !important: po zgłoszeniu wtyczka chowa pola stylem w linii, a wtedy krok 2 by zmalał i sekcja drgnęła na podziękowaniu. */
.ch-rez-kroki #chatynki-rezerwacja-app #daneFields{ display:grid !important; grid-template-columns:1fr 1fr; gap:.75rem var(--s4); align-items:center; }
.ch-rez-kroki #chatynki-rezerwacja-app #daneFields > *{ margin:0; }
.ch-rez-kroki #daneFields > .pole-w-linii:has(#imie){ grid-area:1 / 1; }
.ch-rez-kroki #daneFields > .pole-w-linii:has(#telefon){ grid-area:2 / 1; }
.ch-rez-kroki #daneFields > .pole-w-linii:has(#email){ grid-area:3 / 1; }
.ch-rez-kroki #daneFields > #wierszWiadomosc{ grid-area:1 / 2; }
.ch-rez-kroki #daneFields > .pole-w-linii:has(#zwierzeta){ grid-area:2 / 2; }
.ch-rez-kroki #chatynki-rezerwacja-app #daneFields > .cal-hint{ grid-column:1 / -1; grid-row:4; }
.ch-rez-kroki #chatynki-rezerwacja-app #daneFields > .checkbox-row{ grid-column:1 / -1; grid-row:5; margin-top:var(--s2); }
}
/* ===========================================================================
OKIENKO ZGODY NA COOKIES (27.09.2026, Kuba: „ładnie, dyskretnie”; tekst tylko „Strona używa plików cookies. Szczegóły”)
Od 08.10.2026 karta na środku ekranu (wcześniej w prawym górnym rogu pod nagłówkiem). Oba przyciski tej samej wielkości:
odmowa ma być tak samo łatwa jak zgoda.
======================================================================== */
/* 08.10.2026 (Kuba): karta na ŚRODKU ekranu, bez przyciemnienia. Obejrzał też lightbox (przyciemniona strona, nic nie da się
kliknąć) i wybrał ten wariant. Warstwa na cały ekran tylko centruje kartę: sama jest przezroczysta dla kliknięć,
więc stronę pod spodem dalej da się używać. */
.ch-zgoda{
position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:1rem; margin:0;
pointer-events:none;
}
.ch-zgoda-karta{
pointer-events:auto; display:block; width:22rem; max-width:100%; padding:1rem 1.1rem; border-radius:12px;
background:color-mix(in srgb, var(--surface) 80%, transparent); color:var(--text); border:1px solid var(--line);
-webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2); /* Kuba 27.09: lekka przezroczystość */
box-shadow:0 10px 32px rgba(0,0,0,.22);
font:400 var(--t-small)/1.5 var(--font-ui); text-align:left;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .ch-zgoda-karta{ background:var(--surface); } }
.ch-zgoda[hidden]{ display:none; }
.ch-zgoda p{ display:block; margin:0 0 .75rem; max-width:none; }
.ch-zgoda a{ color:var(--link); }
.ch-zgoda-przyciski{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.ch-zgoda-przyciski .ch-btn{ min-height:2.5rem; padding:.45rem .8rem; font-size:var(--t-small); justify-content:center; white-space:nowrap; }