/*
 * STRONA OFERTY OBIEKTU ({slug}.arenabooking.pl, public/oferta.php) - strona dla GOSCIA, nie panel. Wyglad "strony pensjonatu"
 * (prosba Rafala 2026-09-24): przyklejony pasek z nazwa i przyciskiem terminu, duze zdjecie z nazwa obiektu, wyszukiwarka nachodzaca
 * na zdjecie, sekcje bez kart na jasnym tle, karty pokoi ze zdjeciem i cena po prawej, kafelki godzin, mapa obok adresu, kontakt
 * w stopce. Pola i przyciski - wspolne komponenty (arena-komponenty.css). Jedyny skrypt - kalendarz i goscie wyszukiwarki (oferta.js,
 * BLUEPRINT 1.181); bez niego wyszukiwarka to zwykle pola.
 *
 * PALETA STRONY: tlo JASNE - biale, szarosci antracytowe (chlodne, jak RAL 7016; 1.429, Rafal 2026-10-06 po makiecie
 * ~/projekty/makiety/2026-10-06-strona-oferty-jasna; wczesniej kremowe tlo i cieple szarosci), przyciski i odnosniki w INDYGO JAK PANEL
 * (1.430, Rafal po wzorze ~/projekty/mockupy-chatgpt/render-1.html: "daj przyciski jak w panelu, tlo jak jest teraz, a te mniejsze rzeczy
 * jak przyciski wyboru terminu zrob jak na tym renderze"; wczesniej zielen jak las). Przyciski drugorzedne biale z obwodka, udogodnienia
 * przy pokoju bez tla - jak na wzorze. Kroj naglowkow (Montserrat) bez zmian. Nadpisuje zmienne arena.css tylko na <body class="oferta">, wiec wspolne przyciski i pola biora ja same.
 * Tryb ciemny wg systemu goscia (strona nie ma przelacznika ani ciasteczek - dlatego tylko zapytanie o system).
 */
body.oferta {
    --marka: #4f46e5; --marka-ciemna: #4338ca; --marka-jasna: #eef2ff; --na-marce: #ffffff;
    --tlo: #ffffff; --papier: #ffffff; --pole: #ffffff; --tlo-delikatne: #f1f3f4; --tlo-najazd: #f8f9fa;
    --tekst: #161b1e; --tekst-drugi: #4a5358; --tekst-trzeci: #6b757a;
    --linia: #e2e6e8; --linia-pola: #cdd3d6;
    --cien: 0 1px 2px rgb(22 27 30 / .05), 0 8px 24px rgb(22 27 30 / .07);
    --przycisk-tlo: #eef1f2; --przycisk-najazd: #e0e5e7;
    --obrys-fokus: rgb(79 70 229 / .22);
    --oferta-pasek-tlo: rgb(255 255 255 / .9);
    --oferta-cien-wyszukiwarki: 0 18px 48px rgb(22 27 30 / .14);
    /* Zaslona podgladu zdjecia - ciemna w obu motywach (zdjecie ma stac w centrum uwagi). */
    --podglad-tlo: rgb(2 6 23 / .92); --podglad-tekst: #f8fafc; --podglad-przycisk: rgb(255 255 255 / .14);
    margin: 0; line-height: 1.6;
}
@media (prefers-color-scheme: dark) {
    body.oferta {
        --marka: #818cf8; --marka-ciemna: #6366f1; --marka-jasna: rgb(129 140 248 / .14); --na-marce: #0b1120;
        --tlo: #111518; --papier: #181d20; --pole: #111518; --tlo-delikatne: #22282c; --tlo-najazd: rgb(255 255 255 / .025);
        --tekst: #eef1f2; --tekst-drugi: #c5cdd1; --tekst-trzeci: #949ea3;
        --linia: rgb(255 255 255 / .09); --linia-pola: rgb(255 255 255 / .18);
        --cien: 0 1px 2px rgb(0 0 0 / .5), 0 8px 24px rgb(0 0 0 / .35);
        --przycisk-tlo: #252b2f; --przycisk-najazd: #30373b;
        --obrys-fokus: rgb(129 140 248 / .3);
        --oferta-pasek-tlo: rgb(17 21 24 / .88);
        --oferta-cien-wyszukiwarki: 0 18px 48px rgb(0 0 0 / .5);
    }
}
/* Przyciski drugorzedne (1.430, jak na wzorze - "Wybierz termin", "Zastosuj", mapa, kontakt): biale z obwodka zamiast szarego tla;
   glowne (.glowny) - pelne w kolorze strony. Tylko klasa .przycisk - przyciski kalendarza z oferta.js maja wlasne klasy. */
.oferta .przycisk:not(.glowny) { background: var(--papier); border-color: var(--linia-pola); color: var(--tekst); }
.oferta .przycisk:not(.glowny):hover { background: var(--tlo-najazd); border-color: var(--tekst-trzeci); }
/* STRONA SAMEJ REZERWACJI (1.435, /rezerwuj): bez duzego zdjecia - tytul "Zarezerwuj pobyt" z nazwa i adresem, wyszukiwarka nie nachodzi
   na zdjecie; pasek w szerokosci tresci (bez nawigacji po sekcjach), w nim "Strona obiektu" (telefon: "O obiekcie"). */
.tylko-rezerwacja .oferta-pasek .oferta-szerokosc { max-width: 1160px; }
.tylko-rezerwacja .oferta-pasek-akcje { margin-left: auto; }
.oferta-pasek .przycisk.oferta-powrot { min-height: 42px; padding: 9px 14px 7px; gap: 6px; font-size: 14.5px; }
.oferta-powrot .ikona-oferty { width: 17px; height: 17px; flex-basis: 17px; color: currentColor; }
.oferta-powrot .krotki { display: none; }
.oferta-tytul-rezerwacji { padding: 40px 0 20px; }
.oferta .oferta-tytul-rezerwacji h1 { margin: 0; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; color: var(--tekst); }
.oferta-tytul-rezerwacji p { margin: 8px 0 0; font-size: 16px; color: var(--tekst-drugi); }
.tylko-rezerwacja .oferta-termin { margin-top: 0; }
.tylko-rezerwacja .oferta-sekcja:first-child { padding-top: 44px; }
@media (max-width: 760px) {
    .oferta-tytul-rezerwacji { padding: 26px 0 14px; }
    .oferta-tytul-rezerwacji p { font-size: 14.5px; }
    .oferta-tytul-rezerwacji .kropka { display: none; }
    .oferta-tytul-rezerwacji .ulica { display: block; }
}
@media (max-width: 480px) {
    .oferta-powrot .dlugi, .oferta-powrot .ikona-oferty { display: none; }
    .oferta-powrot .krotki { display: inline; }
    .oferta-pasek .przycisk.oferta-powrot { padding: 9px 12px 7px; }
}
/* Odnosniki do sekcji przewijaja plynnie i nie chowaja naglowka sekcji pod przyklejonym paskiem. */
html:has(body.oferta) { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html:has(body.oferta) { scroll-behavior: auto; } }

.oferta-szerokosc { max-width: 1160px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.oferta a { color: var(--marka); }
/* Naglowki krojem Montserrat (juz na naszym serwerze - arena.css), tekst zwyklym krojem systemu. */
.oferta :is(h1, h2) { font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 800;
    letter-spacing: -.015em; color: var(--tekst); }
.oferta h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; margin: 0 0 20px; padding: 0; border: 0; }
.oferta h3 { font-size: 20px; line-height: 1.3; margin: 0; }
.oferta .ikona-oferty { width: 20px; height: 20px; flex: 0 0 20px; color: var(--marka); }

/* PASEK U GORY: przyklejony, polprzezroczysty. Nazwa (z logo), sekcje strony od 1180 px, telefon i "Sprawdz termin". */
.oferta-pasek { position: sticky; top: 0; z-index: 50; background: var(--oferta-pasek-tlo); border-bottom: 1px solid var(--linia);
    -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
/* Pasek szerszy niz tresc: nazwa, piec sekcji i dwa przyciski mieszcza sie obok siebie takze przy dlugiej nazwie obiektu (wiecej sekcji -
   cztery i "Wiecej", 1.442). */
.oferta-pasek .oferta-szerokosc { display: flex; align-items: center; gap: 16px; min-height: 66px; max-width: 1400px; }
.oferta a.oferta-pasek-nazwa { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--tekst); font-weight: 700; font-size: 16.5px; }
.oferta a.oferta-pasek-nazwa:hover { text-decoration: none; }
.oferta-pasek-nazwa span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Logo na bialym kafelku w obu motywach - logo obiektu bywa ciemne i na ciemnym pasku by zniknelo. Od 1.421 wieksze (46 px, bylo 38 px)
   - pasek tej samej wysokosci. */
.oferta-logo { height: 46px; width: auto; max-width: 160px; object-fit: contain; padding: 3px 6px; border-radius: 8px;
    background: var(--pasek-znak-tlo); border: 1px solid var(--linia); box-sizing: border-box; }
.oferta-nawigacja { display: flex; gap: 2px; margin-left: auto; }
.oferta .oferta-nawigacja a { color: var(--tekst-drugi); font-size: 14.5px; font-weight: 600; padding: 8px 11px; border-radius: 8px; white-space: nowrap; }
.oferta .oferta-nawigacja a:hover { background: var(--tlo-delikatne); color: var(--tekst); text-decoration: none; }
/* WIECEJ SEKCJI (1.442): ponad piec sekcji - pierwsze cztery w pasku, reszta w liscie pod "Wiecej" (<details>, bez skryptu; oferta.js
   zamyka ja po wyborze, kliknieciu obok i Esc). "Wiecej" wyglada jak sasiednie odnosniki, lista - jak okienka wyszukiwarki. */
.oferta-wiecej-sekcji { position: relative; }
.oferta-wiecej-sekcji > summary { display: flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; color: var(--tekst-drugi);
    font-size: 14.5px; font-weight: 600; line-height: inherit; padding: 8px 8px 8px 11px; border-radius: 8px; white-space: nowrap; }
.oferta-wiecej-sekcji > summary::-webkit-details-marker { display: none; }
.oferta-wiecej-sekcji > summary:hover, .oferta-wiecej-sekcji[open] > summary { background: var(--tlo-delikatne); color: var(--tekst); }
.oferta-wiecej-sekcji > summary:focus-visible { outline: 2px solid var(--obrys-fokus); outline-offset: 2px; }
.oferta-wiecej-sekcji > summary .ikona-oferty { width: 16px; height: 16px; flex-basis: 16px; transition: transform .15s ease; }
.oferta-wiecej-sekcji[open] > summary .ikona-oferty { transform: rotate(180deg); }
.oferta-wiecej-lista { position: absolute; top: calc(100% + 20px); right: 0; min-width: 200px; display: grid; gap: 2px; padding: 6px;
    background: var(--papier); border: 1px solid var(--linia); border-radius: 14px; box-shadow: var(--oferta-cien-wyszukiwarki); }
@media (prefers-reduced-motion: reduce) { .oferta-wiecej-sekcji > summary .ikona-oferty { transition: none; } }
.oferta-pasek-akcje { display: flex; align-items: center; gap: 14px; margin-left: 8px; flex: 0 0 auto; }
.oferta a.oferta-pasek-telefon { display: inline-flex; align-items: center; gap: 8px; color: var(--tekst); font-weight: 600; white-space: nowrap; }
.oferta-pasek-telefon .ikona-oferty { width: 18px; height: 18px; flex-basis: 18px; }
.oferta-pasek .przycisk.glowny { min-height: 42px; padding: 9px 16px 7px; gap: 8px; }
.oferta-pasek .przycisk.glowny .ikona-oferty { color: currentColor; width: 17px; height: 17px; flex-basis: 17px; }
@media (max-width: 1180px) { .oferta-nawigacja { display: none; } .oferta-pasek-akcje { margin-left: auto; } }
@media (max-width: 640px) {
    .oferta-pasek .oferta-szerokosc { min-height: 58px; gap: 10px; }
    .oferta-logo { height: 36px; max-width: 110px; }
    .oferta-pasek-akcje { gap: 8px; }
    /* Na telefonie telefon obiektu jako okragly przycisk z ikona (numer - w etykiecie dla czytnikow). */
    .oferta a.oferta-pasek-telefon { width: 42px; height: 42px; justify-content: center; border-radius: 999px; background: var(--przycisk-tlo); }
    .oferta-pasek-telefon span { display: none; }
    .oferta-pasek .przycisk.glowny { padding: 9px 13px 7px; font-size: 14.5px; }
}
/* Waski telefon z logo: w pasku samo logo - nazwa stoi i tak na duzym zdjeciu, a obcieta do "Willa ..." wygladala na blad. */
@media (max-width: 480px) { .oferta-pasek-nazwa img + span { display: none; } }
@media (max-width: 380px) { .oferta-pasek .przycisk.glowny .ikona-oferty { display: none; } }
/* MENU SEKCJI NA TELEFONIE I TABLECIE (1.443, menuSekcjiOferty; makieta ~/projekty/makiety/2026-10-07-menu-telefon, wariant A): ponizej
   1180 px zamiast sekcji w pasku przycisk z trzema kreskami (od 900 px z napisem "Menu") obok telefonu; lista wszystkich sekcji - tablet:
   karta pod przyciskiem, telefon: panel na cala szerokosc pod paskiem. <details> bez skryptu; oferta.js zamyka po wyborze sekcji i Esc. */
.oferta-menu-sekcji { display: none; }
@media (max-width: 1180px) {
    .oferta-menu-sekcji { display: block; position: relative; flex: none; margin-left: auto; }
    .oferta-menu-sekcji + .oferta-pasek-akcje { margin-left: 0; }
}
.oferta-menu-sekcji > summary { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 15px 7px 13px; box-sizing: border-box;
    border: 1px solid var(--linia-pola); border-radius: 9px; background: var(--papier); color: var(--tekst); font-size: 14.5px; font-weight: 600;
    line-height: 1.55; list-style: none; cursor: pointer; white-space: nowrap; }
.oferta-menu-sekcji > summary::-webkit-details-marker { display: none; }
.oferta-menu-sekcji > summary:hover, .oferta-menu-sekcji[open] > summary { background: var(--tlo-najazd); border-color: var(--tekst-trzeci); }
.oferta-menu-sekcji > summary:focus-visible { outline: 2px solid var(--obrys-fokus); outline-offset: 2px; }
.oferta-menu-sekcji .ikona-menu, .oferta-menu-sekcji[open] .ikona-zamknij { display: inline-flex; line-height: 0; }
.oferta-menu-sekcji .ikona-zamknij, .oferta-menu-sekcji[open] .ikona-menu { display: none; }
.oferta-menu-sekcji > summary .ikona-oferty { width: 18px; height: 18px; flex-basis: 18px; }
/* Zaslona pod otwartym menu - czesc przycisku (summary::before), wiec stukniecie w nia zamyka menu bez skryptu. Pasek ma backdrop-filter,
   wiec "fixed" liczy sie od paska: top 100% = tuz pod nim (przegladarka, ktora liczylaby od ekranu, zaslony nie pokaze - menu dziala tak samo). */
.oferta-menu-sekcji[open] > summary::before { content: ""; position: fixed; top: 100%; left: 0; right: 0; height: 100vh;
    background: rgb(0 0 0 / .32); cursor: default; }
.oferta-menu-lista { position: absolute; top: calc(100% + 13px); right: 0; z-index: 1; width: 260px; display: grid; padding: 6px;
    background: var(--papier); border: 1px solid var(--linia); border-radius: 14px; box-shadow: var(--oferta-cien-wyszukiwarki); }
.oferta .oferta-menu-lista a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px 9px;
    border-radius: 9px; color: var(--tekst); font-size: 15.5px; font-weight: 600; }
.oferta .oferta-menu-lista a:hover { background: var(--tlo-delikatne); text-decoration: none; }
.oferta-menu-lista .ikona-oferty { width: 16px; height: 16px; flex-basis: 16px; color: var(--tekst-trzeci); }
@media (max-width: 900px) {
    /* Waski tablet: sama ikona - napis "Menu" zabieralby miejsce nazwie obiektu. */
    .oferta-menu-sekcji > summary { width: 42px; padding: 0; justify-content: center; }
    .oferta-menu-sekcji .napis { display: none; }
}
@media (max-width: 640px) {
    /* Telefon: ikona w kolku jak telefon obiektu; lista - panel na cala szerokosc pod paskiem (liczony od przyklejonego paska). */
    .oferta-menu-sekcji { position: static; }
    .oferta-menu-sekcji > summary { height: 42px; border: 0; border-radius: 999px; background: var(--przycisk-tlo); }
    .oferta-menu-sekcji > summary:hover, .oferta-menu-sekcji[open] > summary { background: var(--przycisk-najazd); }
    .oferta-menu-lista { top: 100%; left: 0; right: 0; width: auto; padding: 6px 12px 14px; border-width: 0 0 1px; border-radius: 0 0 18px 18px; }
    .oferta .oferta-menu-lista a { padding: 14px 10px 12px; border-radius: 0; border-bottom: 1px solid var(--linia); font-size: 16.5px; }
    .oferta .oferta-menu-lista a:last-child { border-bottom: 0; }
}
/* Szerokie logo na waskim telefonie zmniejsza sie w swojej ramce (object-fit), zamiast wypychac przyciski poza ekran; najwezsze ekrany -
   mniejsze marginesy paska. */
@media (max-width: 480px) { .oferta-logo { min-width: 0; } }
@media (max-width: 340px) { .oferta-pasek .oferta-szerokosc { padding: 0 12px; gap: 8px; } }

/* DUZE ZDJECIE Z NAZWA. Zaslona od dolu (ciemniejsza przy napisie) - bialy napis czytelny na kazdym zdjeciu, takze jasnym.
   Bez zdjecia - stale ciemne tlo w barwie strony (w obu motywach, bo napis jest bialy). */
.oferta-bohater { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
    min-height: clamp(380px, 64vh, 660px); background: #1e293b; color: #ffffff; }
.oferta-bohater.bez-zdjecia { min-height: 300px; background: radial-gradient(900px 420px at 15% 0%, #4f46e5 0%, transparent 60%),
    linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); }
.oferta-bohater-zdjecie { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.oferta-bohater::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgb(12 10 9 / .28) 0%, rgb(12 10 9 / 0) 22%, rgb(12 10 9 / .08) 48%, rgb(12 10 9 / .7) 100%); }
.oferta-bohater-tresc { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
    padding-top: 48px; padding-bottom: 104px; }
.oferta .oferta-bohater h1 { color: #ffffff; margin: 0; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.04; text-shadow: 0 2px 28px rgb(0 0 0 / .35); }
.oferta-bohater .oferta-adres { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 17px; color: rgb(255 255 255 / .92);
    text-shadow: 0 1px 12px rgb(0 0 0 / .4); }
.oferta-bohater .oferta-adres .ikona-oferty { color: #ffffff; width: 18px; height: 18px; flex-basis: 18px; }
.oferta a.oferta-bohater-galeria { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; color: #ffffff;
    font-weight: 600; font-size: 14.5px; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .38);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.oferta a.oferta-bohater-galeria:hover { background: rgb(255 255 255 / .26); text-decoration: none; }
.oferta-bohater-galeria .ikona-oferty { color: #ffffff; width: 18px; height: 18px; flex-basis: 18px; }

/* WYSZUKIWARKA TERMINU: karta nachodzaca na dol zdjecia. Pola i przycisk w jednym rzedzie; na telefonie dwa na dwa. */
/* minmax(0, ...) i min-width:0: pole daty ma wlasna najmniejsza szerokosc i na telefonie wypychalo kolumne poza karte. */
.oferta-termin { position: relative; z-index: 2; margin: -68px 0 0; padding: 18px 22px 22px; background: var(--papier);
    border: 1px solid var(--linia); border-radius: 18px; box-shadow: var(--oferta-cien-wyszukiwarki); }
.oferta .oferta-termin h2 { font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--tekst-trzeci); margin: 0 0 12px; }
.oferta-formularz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 6.5rem 8.5rem auto; gap: 0 12px; align-items: end; }
.oferta-formularz input { margin-bottom: 0; min-width: 0; }
.oferta-formularz .przycisk { min-height: 44px; padding-left: 22px; padding-right: 22px; }
@media (max-width: 760px) {
    .oferta-termin { margin-top: -44px; padding: 16px 16px 18px; border-radius: 16px; }
    .oferta-formularz { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
    .oferta-formularz .przycisk { grid-column: 1 / -1; }
    .oferta-bohater-tresc { padding-bottom: 76px; }
}
.oferta-blad { margin: 12px 0 0; color: var(--zn-czerwony-tekst); font-weight: 600; }
/* KOD RABATOWY (1.296): pole zwiniete pod wyszukiwarka (cala szerokosc siatki), pasek z tym, co kod daje albo dlaczego nie dziala
   (dwa elementy: zdanie w <span> i "Usuń kod" - tekst zdania nie rozpada sie na kawalki flexa). */
.oferta-pole-kodu { grid-column: 1 / -1; margin-top: 10px; }
.oferta-pole-kodu summary { width: fit-content; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--marka); }
.oferta-rzad-kodu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.oferta-rzad-kodu input { flex: 0 1 14rem; min-width: 0; text-transform: uppercase; letter-spacing: .04em; }
.oferta-rzad-kodu .przycisk { min-height: 44px; }
.oferta-kod { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 12px 0 0; padding: 10px 14px 9px; border-radius: 12px;
    background: var(--zn-zielony-tlo); color: var(--zn-zielony-tekst); font-size: 14px; line-height: 1.5; }
.oferta-kod b { letter-spacing: .04em; }
.oferta-kod a { margin-left: auto; color: inherit; font-weight: 600; }
.oferta-kod.zly { background: var(--zn-czerwony-tlo); color: var(--zn-czerwony-tekst); }
.oferta-uwaga { color: var(--tekst-drugi); }

/* KALENDARZ I GOSCIE WYSZUKIWARKI (oferta.js, BLUEPRINT 1.181). Klase z-kalendarzem dostaje formularz od skryptu - bez niego zostaja
   zwykle pola wyzej. Pola-przyciski z napisem i wartoscia; okienka pod polem, na telefonie arkusz od dolu ekranu z zaslona.
   Ikony pol - maska z SVG (Lucide, ISC, jak IkonyOferty) w barwie strony, bez znacznikow w HTML-u. */
.oferta-formularz.z-kalendarzem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) auto; gap: 0 10px; }
.oferta-formularz.z-kalendarzem > .przycisk { min-height: 60px; }
.oferta .oferta-pole { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
    min-width: 0; min-height: 60px; margin: 0; padding: 8px 12px 8px 46px; text-align: left; line-height: 1.3; font-weight: 600;
    background: var(--pole); color: var(--tekst); border: 1px solid var(--linia-pola); border-radius: 12px; }
.oferta .oferta-pole:hover { background: var(--tlo-najazd); border-color: var(--marka); }
.oferta .oferta-pole.aktywne, .oferta .oferta-pole:focus-visible { outline: 3px solid var(--obrys-fokus); outline-offset: 0; border-color: var(--marka); }
.oferta-pole::before { content: ""; position: absolute; left: 15px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--marka);
    -webkit-mask: var(--ikona-pola) center / contain no-repeat; mask: var(--ikona-pola) center / contain no-repeat; }
.oferta-pole-data { --ikona-pola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
.oferta-pole-goscie { --ikona-pola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.oferta-pole-etykieta { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tekst-trzeci); }
.oferta-pole-wartosc { max-width: 100%; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oferta-pole.puste .oferta-pole-wartosc { color: var(--tekst-trzeci); font-weight: 500; }
@media (max-width: 760px) {
    .oferta-formularz.z-kalendarzem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
    .oferta-formularz.z-kalendarzem .oferta-pole-goscie { grid-column: 1 / -1; }
    .oferta .oferta-pole { padding-left: 40px; }
    .oferta-pole::before { left: 12px; width: 18px; height: 18px; margin-top: -9px; }
}

.oferta-okienko { position: absolute; z-index: 40; left: 0; top: 100%; box-sizing: border-box; padding: 16px 20px; color: var(--tekst);
    background: var(--papier); border: 1px solid var(--linia); border-radius: 18px; box-shadow: var(--oferta-cien-wyszukiwarki); }
.oferta-kalendarz { width: 700px; max-width: 100%; }
.oferta-goscie { width: 380px; max-width: 100%; }
.oferta-okienko-gora { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oferta-podpowiedz { margin: 0; font-weight: 700; font-size: 15.5px; }
.oferta-podpowiedz.uwaga { color: var(--marka); }
.oferta .oferta-zamknij, .oferta .oferta-strzalka { width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 999px; font-size: 24px;
    line-height: 1; font-weight: 400; background: transparent; color: var(--tekst-drugi); }
.oferta .oferta-zamknij:hover, .oferta .oferta-strzalka:hover:not(:disabled) { background: var(--tlo-delikatne); color: var(--tekst); }
.oferta-kalendarz-nawigacja { position: relative; height: 0; }
.oferta .oferta-strzalka { position: absolute; top: 8px; z-index: 1; border: 1px solid var(--linia); font-size: 26px; padding-bottom: 3px; }
.oferta-strzalka.wstecz { left: 0; }
.oferta-strzalka.dalej { right: 0; }
.oferta .oferta-strzalka:disabled { opacity: .3; cursor: default; }
.oferta-miesiace { display: flex; gap: 36px; margin: 8px 0 0; }
.oferta-miesiac { flex: 1 1 0; min-width: 0; }
.oferta-miesiac-tytul { margin: 0 0 6px; text-align: center; font-weight: 700; font-size: 16px; line-height: 38px; }
.oferta .oferta-dni { table-layout: fixed; font-size: 15px; }
.oferta .oferta-dni th { padding: 0 0 6px; border: 0; text-align: center; font-size: 12px; letter-spacing: .02em; text-transform: none; }
.oferta .oferta-dni td { padding: 1px 0; border: 0; text-align: center; }
.oferta .oferta-dni tbody tr:hover td { background: none; }
/* Dzien: przycisk bez tla - zakres to pas (tlo przycisku), wybrany dzien to kolo pod cyfra (::after); pas przy poczatku i koncu
   zakresu siega do polowy kola, wiec zakres jest ciagly. */
.oferta .oferta-dzien { position: relative; isolation: isolate; width: 100%; height: 44px; min-height: 0; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: transparent; color: var(--tekst); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.oferta-dzien::after { content: ""; position: absolute; z-index: -1; top: 1px; bottom: 1px; left: 50%; width: 42px; max-width: 100%;
    transform: translateX(-50%); border-radius: 999px; box-sizing: border-box; }
.oferta .oferta-dzien:hover { background: transparent; }
.oferta-dzien:not(.nieaktywny):hover::after { border: 1.5px solid var(--tekst); }
.oferta .oferta-dzien:focus-visible { outline: none; }
.oferta-dzien:focus-visible::after { border: 2px solid var(--marka); box-shadow: 0 0 0 3px var(--obrys-fokus); }
.oferta .oferta-dzien.w-zakresie { background: var(--marka-jasna); }
.oferta .oferta-dzien.od.z-zakresem { background: linear-gradient(to right, transparent 50%, var(--marka-jasna) 50%); }
.oferta .oferta-dzien.do { background: linear-gradient(to left, transparent 50%, var(--marka-jasna) 50%); }
.oferta .oferta-dzien.od, .oferta .oferta-dzien.do:not(.podglad) { color: var(--na-marce); }
.oferta-dzien.od::after, .oferta-dzien.do:not(.podglad)::after { background: var(--marka); }
.oferta-dzien.do.podglad::after { border: 2px solid var(--marka); }
.oferta-dzien.dzis:not(.od):not(.do)::before { content: ""; position: absolute; bottom: 6px; left: 50%; width: 4px; height: 4px; margin-left: -2px;
    border-radius: 50%; background: var(--marka); }
.oferta .oferta-dzien.nieaktywny { color: var(--tekst-trzeci); opacity: .45; cursor: default; font-weight: 500; }
.oferta .oferta-dzien.zajety { text-decoration: line-through; }
/* Przy wyborze wyjazdu: dzien, ktory wyjazdem byc nie moze (za daleko, przez zajeta noc), ale klikniety zaczyna nowy pobyt - przygaszony. */
.oferta .oferta-dzien.tylko-przyjazd { color: var(--tekst-trzeci); font-weight: 500; }
.oferta-legenda { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; color: var(--tekst-trzeci); }
.oferta-legenda-probka { font-weight: 600; text-decoration: line-through; opacity: .6; }
/* CENY W KALENDARZU (1.620): numer dnia i pod nim cena za noc "od" (albo "pakiet"); pole dnia wyzsze, tylko gdy kalendarz ma ceny. */
.oferta .oferta-kalendarz.z-cenami .oferta-dzien { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    height: 52px; line-height: 1.1; }
.oferta-dzien-cena { font-size: 10.5px; font-weight: 500; letter-spacing: -.01em; color: var(--tekst-trzeci); }
.oferta-dzien-cena.pakiet { color: var(--marka); font-weight: 600; }
.oferta-dzien.od .oferta-dzien-cena, .oferta-dzien.do:not(.podglad) .oferta-dzien-cena { color: inherit; opacity: .85; }
.oferta-dzien.nieaktywny .oferta-dzien-cena { visibility: hidden; }
.oferta-kalendarz.z-cenami .oferta-dzien.dzis:not(.od):not(.do)::before { bottom: 3px; }
.oferta-legenda-cen { margin: 6px 0 0; font-size: 12.5px; color: var(--tekst-trzeci); }
/* OGRANICZENIA REZERWACJI ONLINE (1.219): zdanie pod miesiacami - informacja szara, niespelnione w wybranym terminie w kolorze uwagi. */
.oferta-online { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--tekst-drugi); }
.oferta-online.uwaga { color: var(--zn-zolty-tekst); font-weight: 600; }
.oferta-okienko-dol { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 0; padding: 12px 0 0;
    border-top: 1px solid var(--linia); }
.oferta .oferta-wyczysc { min-height: 40px; padding: 6px 4px; background: transparent; color: var(--tekst); text-decoration: underline; text-underline-offset: 3px; }
.oferta .oferta-wyczysc:hover { background: transparent; color: var(--marka); }
.oferta .oferta-wyczysc:disabled { opacity: .35; cursor: default; text-decoration: none; }
.oferta-podsumowanie { flex: 1 1 auto; min-width: 0; text-align: center; font-weight: 600; font-size: 14.5px; color: var(--tekst-drugi); }
.oferta-okienko-dol .przycisk { min-width: 110px; }
.oferta-goscie .oferta-okienko-dol { justify-content: flex-end; }

.oferta-licznik { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linia); }
.oferta-licznik:first-child { padding-top: 2px; }
.oferta-licznik-opis { display: flex; flex-direction: column; line-height: 1.35; }
.oferta-licznik-nazwa { font-weight: 700; font-size: 16px; }
.oferta-licznik-dopisek { font-size: 13.5px; color: var(--tekst-trzeci); }
.oferta-licznik-przyciski { display: flex; align-items: center; gap: 12px; }
.oferta .oferta-krok { width: 40px; height: 40px; min-height: 40px; padding: 0 0 2px; border-radius: 999px; font-size: 22px; font-weight: 500; line-height: 1;
    background: transparent; border: 1px solid var(--linia-pola); color: var(--marka); }
.oferta .oferta-krok:hover:not(:disabled) { background: var(--marka-jasna); border-color: var(--marka); }
.oferta .oferta-krok:disabled { opacity: .3; cursor: default; }
.oferta-licznik-ile { min-width: 24px; text-align: center; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.oferta-wiek-dzieci { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; margin: 14px 0 0; }
.oferta-wiek-dzieci:empty { display: none; }
.oferta .oferta-wiek { margin: 0; font-size: 13px; }
.oferta-wiek span { display: block; margin: 0 0 4px; }
.oferta .oferta-wiek select { margin: 0; }
.oferta .oferta-wiek select.brak { border-color: var(--zn-czerwony-tekst); }
.oferta-goscie-uwaga { margin: 10px 0 0; font-size: 13px; color: var(--tekst-trzeci); }
.oferta-goscie-blad { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--zn-czerwony-tekst); }

.oferta-zaslona { display: none; }
/* TELEFON: okienko to arkusz od dolu ekranu (jeden miesiac), pod nim zaslona; strona pod spodem sie nie przewija. Sekcja wyszukiwarki
   idzie wtedy nad przyklejony pasek - inaczej pasek stalby nad zaslona. */
@media (max-width: 760px) {
    .oferta-okienko { position: fixed; z-index: 70; top: auto; right: 0; bottom: 0; left: 0; width: auto; max-width: none; max-height: 88vh;
        max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0; border-bottom: 0; }
    .oferta-zaslona:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 65; background: rgb(12 10 9 / .5); }
    html.oferta-okienko-otwarte { overflow: hidden; }
    html.oferta-okienko-otwarte .oferta-termin { z-index: 60; }
    .oferta-miesiace { gap: 0; }
}
@media (max-width: 360px) { .oferta .oferta-dzien { height: 40px; } }

/* SEKCJE: bez kart - oddech i duze naglowki na cieplym tle; karty maja tylko rzeczy do porownania (pokoje, godziny). */
.oferta-sekcja { padding: 64px 0 0; }
@media (max-width: 760px) { .oferta-sekcja { padding-top: 48px; } }

/* O OBIEKCIE: opis i udogodnienia obok mozaiki zdjec; na telefonie jedno pod drugim. */
.oferta-o-obiekcie { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.oferta-o-obiekcie.bez-zdjec { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 880px) { .oferta-o-obiekcie { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.oferta-opis { font-size: 16.5px; line-height: 1.75; color: var(--tekst); max-width: 68ch; }
/* OPISY Z FORMATOWANIEM (1.288, Http\TekstSformatowany): akapity, listy, pogrubienie, kursywa i linki - opis obiektu, zasady, opisy grup
   i pokoi, opis pakietu (karta i okno). */
.oferta-opis p, .oferta-opis-koszyka div p, .arena-oferta-opis p { margin: 0 0 .65em; }
.oferta-opis ul, .oferta-opis ol, .oferta-opis-koszyka div ul, .oferta-opis-koszyka div ol, .arena-oferta-opis ul, .arena-oferta-opis ol {
    margin: 0 0 .65em; padding-left: 1.3em; }
.oferta-opis li + li, .oferta-opis-koszyka li + li, .arena-oferta-opis li + li { margin-top: .2em; }
.oferta-opis a, .oferta-opis-koszyka div a, .arena-oferta-opis a { color: var(--marka); text-decoration: underline; text-underline-offset: 2px; }
.oferta-opis > :last-child, .oferta-opis-koszyka div > :last-child, .arena-oferta-opis > :last-child { margin-bottom: 0; }
.oferta-udogodnienia { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 20px; }
.oferta-udogodnienia li { display: flex; align-items: center; gap: 12px; }
@media (max-width: 600px) { .oferta-udogodnienia:not(.male) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; font-size: 14.5px; } }
.oferta-udogodnienia:not(.male) .ikona-oferty { box-sizing: content-box; padding: 9px; border-radius: 12px; background: var(--marka-jasna); }
.oferta-mozaika { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oferta-mozaika .zdjecie { position: relative; display: block; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 3; background: var(--tlo-delikatne); }
.oferta-mozaika.ile-1 .zdjecie, .oferta-mozaika.ile-3 .zdjecie:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.oferta-mozaika img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.oferta-mozaika .zdjecie:hover img { transform: scale(1.03); }
.oferta-wiecej { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgb(12 10 9 / .5);
    color: #ffffff; font-size: 26px; font-weight: 800; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* OFERTY SPECJALNE (migracja 060, 1.265; Rafal 2026-09-29: "te oferty musza sie fajnie wyswietlac"): karty wypelniaja wiersz (jedna - szeroka,
   zdjecie obok tresci), zdjecie z wyroznikiem i lekkim powiekszeniem po najechaniu, karta bez zdjecia - baner w barwie strony z terminem,
   termin z ikona, cena "od" obok przycisku. Znaczniki z Http\KartyOfertSpecjalnych (te same w skrypcie na strone www - tam wlasne style). */
.oferta-oferty-specjalne h2 { margin: 0 0 24px; }
.arena-oferty { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.arena-oferta { position: relative; display: flex; flex-direction: column; background: var(--papier); border: 1px solid var(--linia);
    border-radius: 20px; overflow: hidden; box-shadow: var(--cien); transition: transform .25s ease, box-shadow .25s ease; }
.arena-oferta:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(28 25 23 / .06), 0 18px 40px rgb(28 25 23 / .13); }
.arena-oferta-zdjecie { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tlo-delikatne); }
/* Zdjecie WYPELNIA ramke i jest przycinane (object-fit), a ramka ma wlasny ksztalt - pionowe zdjecie nie rozpycha karty
   (Rafal 2026-09-29: "za duze to zdjecie" - jedna oferta ze zdjeciem 1067 x 1600 miala 900 px wysokosci). */
.arena-oferta-zdjecie img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.arena-oferta:hover .arena-oferta-zdjecie img { transform: scale(1.04); }
/* Wyroznik ("-15%"): pigulka na zdjeciu; tekst 1 px wyzej (korekta optyczna jak w przyciskach). */
.arena-oferta-wyroznik { position: absolute; left: 14px; top: 14px; display: inline-block; padding: 6px 12px 5px; border-radius: 999px;
    background: var(--marka); color: var(--na-marce); font-size: 14px; font-weight: 800; line-height: 1.3; box-shadow: 0 4px 14px rgb(0 0 0 / .18); }
/* Karta bez zdjecia: baner w barwie strony z terminem (i wyroznikiem w odwroconych barwach). */
/* Proporcje jak zdjecia (16:10) - karty w wierszu maja rowne gorne czesci. */
.arena-oferta-baner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; aspect-ratio: 16 / 10; min-height: 170px;
    padding: 60px 24px 22px; overflow: hidden; background: linear-gradient(135deg, var(--marka), var(--marka-ciemna)); color: var(--na-marce);
    text-decoration: none; }
/* Baner jest odnosnikiem - kolor z klasa ORAZ znacznikiem, inaczej regula odnosnikow strony (.oferta a) daje napis w barwie tla. */
.arena-oferty a.arena-oferta-baner, .arena-oferty a.arena-oferta-baner:hover { color: var(--na-marce); text-decoration: none; }
.arena-oferta-baner::after { content: ""; position: absolute; right: -50px; top: -60px; width: 200px; height: 200px; border-radius: 50%;
    background: rgb(255 255 255 / .09); }
.arena-oferta-baner .arena-oferta-wyroznik { background: var(--na-marce); color: var(--marka); box-shadow: none; }
.arena-oferta-baner-daty { font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 26px; font-weight: 800;
    line-height: 1.15; letter-spacing: -.01em; }
.arena-oferta-baner-noce { font-size: 14.5px; opacity: .85; }
.arena-oferta-tresc { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.arena-oferta-tytul { margin: 0 0 6px; font-size: 22px; line-height: 1.25; }
.arena-oferta-termin { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14.5px; font-weight: 600; color: var(--marka); }
.arena-oferta-termin svg { flex: none; }
/* WYGLAD 1.423 (makieta karty-v2, "b z 1"): nazwa i termin stoja na zdjeciu (baner bez zdjecia ma termin) - w tresci zostaja tylko dla czytnikow
   ekranu i wyszukiwarek (odnosnik ze zdjeciem jest aria-hidden). Karta bez zdjecia pokazuje nazwe w tresci jak dotad. */
.arena-oferta > .arena-oferta-tresc > .arena-oferta-termin, .arena-oferta:not(.bez-zdjecia) > .arena-oferta-tresc > .arena-oferta-tytul {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.arena-oferta-na-zdjeciu { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 52px 20px 16px;
    background: linear-gradient(to top, rgb(0 0 0 / .74), rgb(0 0 0 / 0)); color: #ffffff; pointer-events: none; }
.arena-oferta-nazwa-na-zdjeciu { font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 22px; font-weight: 800;
    line-height: 1.2; text-shadow: 0 1px 10px rgb(0 0 0 / .35); }
.arena-oferta-termin-na-zdjeciu { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; opacity: .95; }
.arena-oferta-termin-na-zdjeciu svg { flex: none; }
/* Wprowadzenie (albo poczatek opisu) - ciemnym tekstem, najwyzej 3 linie; caly opis jest w oknie szczegolow. */
.arena-oferta-wprowadzenie { margin: 0 0 14px; font-size: 15.5px; line-height: 1.55; color: var(--tekst);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.arena-oferta-opis { margin: 0 0 20px; font-size: 15.5px; line-height: 1.65; color: var(--tekst-drugi); }
/* WYROZNIKI POD TYTULEM (1.284) - pigulki w jasnej barwie strony; tekst 1 px wyzej (korekta optyczna). "W PAKIECIE" - lista z ptaszkiem
   (obrys w barwie strony, bez znaku w tresci), dluzsza konczy sie "i jeszcze N". */
.arena-oferta-wyrozniki { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.arena-oferta-wyrozniki span { display: inline-block; padding: 4px 10px 3px; border-radius: 999px; background: var(--marka-jasna); color: var(--marka);
    font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.arena-oferta-w-pakiecie { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.arena-oferta-w-pakiecie li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; color: var(--tekst); }
.arena-oferta-w-pakiecie li::before { content: ""; position: absolute; left: 4px; top: .3em; width: 6px; height: 11px; border: solid var(--marka);
    border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.arena-oferta-wiecej { margin: -10px 0 16px 26px; font-size: 14px; color: var(--tekst-trzeci); }
/* SZCZEGOLY PAKIETU (1.285): tytul-odnosnik w barwie tytulu, "Szczegoly" przed cena, licznik zdjec w rogu zdjecia. */
.arena-oferty .arena-oferta-tytul a { color: inherit; text-decoration: none; }
.arena-oferty .arena-oferta-tytul a:hover { text-decoration: underline; }
.arena-oferty .arena-oferta-wiecej a { color: inherit; }
.arena-oferty a.arena-oferta-szczegoly { align-self: flex-start; margin: -4px 0 16px; font-size: 14.5px; font-weight: 700; color: var(--marka); text-decoration: none; }
.arena-oferty a.arena-oferta-szczegoly:hover { text-decoration: underline; }
.arena-oferta-licznik { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 3px;
    border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; }
/* Stopka (1.424): cena i przycisk w jednym wierszu; gdy brak miejsca, "za pokoj" schodzi pod kwote (twarde spacje w "od 1 560 zl" i "za pokoj"),
   a dopiero gdy nie miesci sie nawet kwota - przycisk przechodzi do nowego wiersza. Nic nie chowa sie pod przyciskiem. */
.arena-oferta-stopka { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; margin-top: auto;
    padding-top: 18px; border-top: 1px solid var(--linia); }
.arena-oferta-cena { flex: 1 1 0; margin: 0; font-size: 14px; line-height: 1.3; color: var(--tekst-drugi); }
.arena-oferta-cena strong { font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--tekst); }
.arena-oferta-dziecko { display: block; margin-top: 2px; font-size: 13px; }
/* Przycisk z klasa ORAZ znacznikiem: regula odnosnikow strony (.oferta a - barwa marki) dawala napis w kolorze tla przycisku. */
.arena-oferty a.arena-oferta-przycisk { display: inline-block; flex: none; padding: 11px 14px 9px; border-radius: 12px; background: var(--marka);
    color: var(--na-marce); font-size: 14.5px; font-weight: 700; text-align: center; text-decoration: none; white-space: nowrap; }
.arena-oferty a.arena-oferta-przycisk:hover { background: var(--marka-ciemna); color: var(--na-marce); text-decoration: none; }
.arena-oferta-stopka a.arena-oferta-przycisk:only-child { flex: 1; }
@media (max-width: 480px) { .arena-oferta-stopka a.arena-oferta-przycisk { flex: 1; } }
@media (min-width: 760px) {
    .arena-oferty.ile-1 .arena-oferta { flex-direction: row; }
    .arena-oferty.ile-1 .arena-oferta-zdjecie, .arena-oferty.ile-1 .arena-oferta-baner { flex: 0 0 44%; aspect-ratio: auto; min-height: 290px; }
    .arena-oferty.ile-1 .arena-oferta-tresc { justify-content: center; padding: 30px 34px; }
    .arena-oferty.ile-1 .arena-oferta-tytul { font-size: 27px; }
    .arena-oferty.ile-1 .arena-oferta-stopka { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .arena-oferta, .arena-oferta-zdjecie img { transition: none; }
    .arena-oferta:hover, .arena-oferta:hover .arena-oferta-zdjecie img { transform: none; }
}

/* OKNO SZCZEGOLOW PAKIETU (1.285): na cala strone nad przyciemnionym tlem - galeria (pasek przewijany w bok, zdjecie po zdjeciu; skrypt
   dodaje strzalki, numer i miniatury), obok szczegoly; na telefonie pelny ekran, jedno pod drugim. Otwarte - klasa "otwarte" (serwer pod
   adresem /pakiet/<nazwa> albo skrypt); przewijanie strony pod oknem zablokowane (klasa na <html>). */
html.pakiet-otwarty { overflow: hidden; }
.pakiet-okno { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 24px; }
.pakiet-okno.otwarte { display: flex; }
.pakiet-okno-tlo { position: absolute; inset: 0; background: rgb(12 10 9 / .62); }
.pakiet-okno-ramka { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 1060px; max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px); overflow: hidden; background: var(--papier); border-radius: 18px; box-shadow: 0 20px 60px rgb(0 0 0 / .35); }
.pakiet-okno-pasek { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--linia); }
.pakiet-okno-nawigacja { display: flex; gap: 8px; min-width: 0; }
.pakiet-okno-nawigacja a { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 7px 12px 5px; border: 1px solid var(--linia);
    border-radius: 999px; color: var(--tekst); font-size: 14px; text-decoration: none; }
.pakiet-okno-nawigacja a:hover { border-color: var(--marka); color: var(--marka); }
.pakiet-okno-nawigacja a span { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pakiet-okno-nawigacja svg { flex: none; width: 16px; height: 16px; }
.pakiet-okno-ktora { margin-left: auto; font-size: 14px; color: var(--tekst-trzeci); white-space: nowrap; }
.pakiet-okno-zamknij { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: auto;
    border: 1px solid var(--linia); border-radius: 50%; color: var(--tekst); }
.pakiet-okno-ktora + .pakiet-okno-zamknij { margin-left: 0; }
.pakiet-okno-zamknij svg { width: 18px; height: 18px; }
/* Wprowadzenie pakietu (1.423) - pierwszy akapit szczegolow, wiekszy i ciemniejszy od opisu. */
.pakiet-okno-wprowadzenie { margin: 0 0 14px; font-size: 16.5px; line-height: 1.55; font-weight: 500; color: var(--tekst); }
.pakiet-okno-tresc { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); overflow-y: auto; }
.pakiet-okno-tresc.bez-zdjec { grid-template-columns: minmax(0, 1fr); }
.pakiet-galeria { padding: 16px; }
.pakiet-galeria-kadr { position: relative; }
.pakiet-galeria-zdjecia { display: flex; aspect-ratio: 3 / 2; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    border-radius: 12px; background: var(--tlo-delikatne); scrollbar-width: thin; }
.pakiet-galeria-zdjecia figure { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.pakiet-galeria-zdjecia img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Ze skryptem (strzalki, miniatury) pasek przewijania zbedny; bez skryptu zostaje - to jedyny sposob na kolejne zdjecia mysza. */
.pakiet-galeria[data-gotowa="1"] .pakiet-galeria-zdjecia { scrollbar-width: none; }
.pakiet-galeria[data-gotowa="1"] .pakiet-galeria-zdjecia::-webkit-scrollbar { display: none; }
.pakiet-galeria-wstecz, .pakiet-galeria-dalej { position: absolute; top: 50%; display: grid; place-items: center; width: 42px; height: 42px; margin-top: -21px;
    padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .92); color: #1c1917; cursor: pointer; box-shadow: 0 2px 10px rgb(0 0 0 / .2); }
.pakiet-galeria-wstecz { left: 10px; }
.pakiet-galeria-dalej { right: 10px; }
.pakiet-galeria-wstecz svg, .pakiet-galeria-dalej svg { width: 22px; height: 22px; }
.pakiet-galeria-numer { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px 3px; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff;
    font-size: 13px; }
.pakiet-galeria-miniatury { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.pakiet-galeria-miniatury[hidden], .pakiet-galeria-wstecz[hidden], .pakiet-galeria-dalej[hidden], .pakiet-galeria-numer[hidden] { display: none; }
.pakiet-galeria-miniatury button { flex: 0 0 72px; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden;
    background: none; cursor: pointer; opacity: .7; }
.pakiet-galeria-miniatury button[aria-current="true"] { border-color: var(--marka); opacity: 1; }
.pakiet-galeria-miniatury img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pakiet-szczegoly { padding: 20px 22px 24px; }
.pakiet-szczegoly h2 { margin: 0 0 6px; font-size: 26px; line-height: 1.2; }
.pakiet-szczegoly .arena-oferta-wyrozniki { margin: 0 0 10px; }
.pakiet-cena { margin: 0 0 16px; font-size: 14.5px; color: var(--tekst-drugi); }
.pakiet-cena strong { font-size: 26px; font-weight: 800; color: var(--tekst); }
.pakiet-przyciski { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
/* DOWOLNY TERMIN (1.293): gosc wybiera dzien przyjazdu, wyjazd liczy strona (tyle nocy, ile pakiet). */
.pakiet-termin-wybor { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0 0 12px; }
.pakiet-termin-wybor label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; font-weight: 600; }
.pakiet-termin-wybor input { min-height: 44px; margin: 0; }
.pakiet-termin-wybor small { flex-basis: 100%; font-size: 13px; line-height: 1.5; color: var(--tekst-drugi); }
.pakiet-link { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border: 1px dashed var(--linia); border-radius: 10px;
    font-size: 13px; color: var(--tekst-drugi); }
.pakiet-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* UDOSTEPNIJ (1.287): ikona w przycisku; komunikat "Link skopiowany" - dymek na dole okna, znika po 3 s (skrypt). */
.pakiet-przyciski [data-udostepnij] { display: inline-flex; align-items: center; gap: 7px; }
.pakiet-przyciski [data-udostepnij][hidden] { display: none; }
.pakiet-przyciski [data-udostepnij] svg { width: 17px; height: 17px; }
.pakiet-komunikat { position: absolute; left: 50%; bottom: 18px; z-index: 2; max-width: calc(100% - 32px); margin: 0; padding: 10px 16px 9px;
    border-radius: 999px; background: var(--tekst); color: var(--papier); font-size: 14px; font-weight: 600; text-align: center;
    box-shadow: 0 6px 20px rgb(0 0 0 / .25); opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s ease, transform .2s ease;
    pointer-events: none; }
.pakiet-komunikat.widac { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .pakiet-komunikat { transition: none; } }
@media (max-width: 760px) {
    .pakiet-okno { padding: 0; }
    .pakiet-okno-ramka { height: 100%; max-height: none; border-radius: 0; }
    .pakiet-okno-tresc { grid-template-columns: minmax(0, 1fr); }
    .pakiet-okno-nawigacja a span { max-width: 96px; }
    .pakiet-okno-ktora { display: none; }
    .pakiet-okno-pasek .pakiet-okno-zamknij { margin-left: auto; }
    .pakiet-galeria { padding: 0; }
    .pakiet-galeria-zdjecia { border-radius: 0; }
    .pakiet-galeria-miniatury { padding: 0 12px; }
}

/* POKOJE I CENY: naglowek z wynikiem wyszukiwania, karty - zdjecie, opis, cena i przycisk w osobnej kolumnie. */
.oferta-naglowek-sekcji { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; margin: 0 0 22px; }
.oferta-naglowek-sekcji h2 { margin: 0; }
.oferta-wynik { margin: 0; color: var(--tekst-drugi); }
.oferta-wynik a { font-weight: 600; }
/* Zasady pobytu przy zapytaniu (1.326): obiekt bez rezerwacji online - czego wyszukany termin nie spelnia; kolor jak .oferta-ograniczenie.
   WLASNA KLASA (1.330): do 1.330 ".oferta-zasady" - ta sama co sekcje "Warto wiedziec" (zasady pobytu, rezygnacja, regulamin), wiec ich
   tresc tez byla pogrubiona i zolta. */
.oferta-zasady-terminu { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--zn-zolty-tekst); }
.oferta-koszyki { display: grid; gap: 18px; }
.oferta-koszyk { position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 230px); background: var(--papier);
    border: 1px solid var(--linia); border-radius: 18px; overflow: hidden; box-shadow: var(--cien); }
.oferta-koszyk.bez-zdjecia { grid-template-columns: minmax(0, 1fr) minmax(0, 230px); }
.oferta-koszyk.niedostepny { opacity: .62; }
.oferta-koszyk.wybrany { border-color: var(--marka); box-shadow: 0 0 0 1px var(--marka), var(--cien); }
/* POKOJ Z KARTY NA STRONIE WWW (1.290, "Szczegóły" -> #pokoj-<klucz>): wyrozniony jak wybrany. */
.oferta-koszyk:target { border-color: var(--marka); box-shadow: 0 0 0 1px var(--marka), var(--cien); }
/* Wysokosc karty pokoju (1.431): udogodnienia bez "pigulek" (1.430) zmniejszyly karte z ~243 do 232 px - Rafal: "wolalem wyzsze";
   zdjecie min. 260 px, karty rowne i wyzsze niz przed 1.430. */
.oferta-koszyk > .zdjecie.okladka { position: relative; display: block; min-height: 260px; background: var(--tlo-delikatne); }
.oferta-koszyk > .zdjecie.okladka img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oferta-licznik-zdjec { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    border-radius: 999px; background: rgb(12 10 9 / .62); color: #ffffff; font-size: 13px; font-weight: 600; }
.oferta-licznik-zdjec .ikona-oferty { color: #ffffff; width: 15px; height: 15px; flex-basis: 15px; }
.oferta-koszyk-tresc { padding: 22px 24px; min-width: 0; }
.oferta-fakty { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; padding: 0; color: var(--tekst-drugi); font-size: 14.5px; }
.oferta-fakty li { display: inline-flex; align-items: center; gap: 7px; }
.oferta-fakty .ikona-oferty { width: 17px; height: 17px; flex-basis: 17px; color: var(--tekst-trzeci); }
/* Udogodnienia przy pokoju (1.430, jak na wzorze): ikona w kolorze strony i tekst, bez tla "pigulki". */
.oferta-udogodnienia.male { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; }
.oferta-udogodnienia.male li { gap: 7px; font-size: 13.5px; color: var(--tekst); }
.oferta-udogodnienia.male .ikona-oferty { width: 16px; height: 16px; flex-basis: 16px; }
.oferta-opis-koszyka { margin-top: 14px; font-size: 14.5px; color: var(--tekst-drugi); }
.oferta-opis-koszyka summary { cursor: pointer; }
.oferta-opis-koszyka summary::marker { color: var(--marka); }
.oferta-opis-koszyka div { margin-top: 8px; }
/* Kolumna ceny (1.430, jak na wzorze): biala, od opisu oddzielona pionowa linia z odstepem od gory i dolu karty; przyciski na cala
   szerokosc kolumny (z zachowaniem odstepow od krawedzi). */
.oferta-koszyk-cena { position: relative; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 14px;
    padding: 22px 24px; text-align: right; background: var(--papier); }
@media (min-width: 901px) {
    .oferta-koszyk-cena::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: var(--linia); }
    .oferta-koszyk-cena .przycisk { align-self: stretch; }
}
.oferta-cena { margin: 0; font-size: 14px; color: var(--tekst-drugi); line-height: 1.45; }
.oferta-cena strong { display: block; font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: var(--tekst); }
.oferta-cena .brak { color: var(--tekst-trzeci); }
/* Rabaty automatyczne (039) juz w cenie: kolor marki, ta sama wielkosc co opis pod cena. */
.oferta-cena .oferta-rabat { color: var(--marka); font-weight: 600; font-size: 13px; }
@media (max-width: 900px) {
    .oferta-koszyk, .oferta-koszyk.bez-zdjecia { grid-template-columns: minmax(0, 1fr); }
    .oferta-koszyk > .zdjecie.okladka { min-height: 0; aspect-ratio: 16 / 10; }
    .oferta-koszyk-tresc { padding: 18px 18px 4px; }
    .oferta-koszyk-cena { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; text-align: left;
        border-left: 0; border-top: 1px solid var(--linia); margin-top: 14px; padding: 16px 18px; }
}

/* ZAPYTANIE (etap B): formularz nad kartami pokoi - dwie kolumny (na telefonie jedna); podziekowanie po wyslaniu. Karta wybranego
 * pokoju ma obwodke marki. POLE-PULAPKA poza ekranem: nie display:none - czesc robotow pomija ukryte pola, a tak widzi zwykle. */
.oferta-zapytanie { margin: 0 0 20px; padding: 22px 24px; border: 2px solid var(--marka); border-radius: 18px; background: var(--papier); box-shadow: var(--cien); }
.oferta-zapytanie h3 { margin: 0 0 4px; }
.oferta-zapytanie.wyslane { border-color: var(--zn-zielony-tekst); }
/* KIEDY PRZYJMUJEMY (1.532): poza terminem przyjmowania zapytan - zdanie i kontakt zamiast formularza. */
.oferta-zapytanie.zamkniete { border-color: var(--zn-zolty-tekst); }
.oferta-zapytanie.zamkniete p { margin: 6px 0 0; }
.oferta-zapytanie-podsumowanie { margin: 0 0 14px; color: var(--tekst-drugi); }
/* GODZINA PRZYJAZDU Z LISTY (1.283): zdanie o prosbie tylko przy wybranej godzinie "na prosbe" (:has, bez skryptu). */
.uwaga-wczesniej { display: none; margin: -4px 0 16px; padding: 10px 12px; border-radius: 10px; background: var(--marka-jasna); font-size: 13.5px; line-height: 1.5; }
.oferta-zapytanie:has(#z-godzina option.wczesniej:checked) .uwaga-wczesniej { display: block; }
/* Wybor liczby pokoi (grupa): odnosniki GET, wybrana liczba pogrubiona w obwodce. */
.oferta-pokoje { margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.oferta-pokoje a, .oferta-pokoje strong { display: inline-block; min-width: 2.2em; padding: 4px 8px; border: 1px solid var(--linia); border-radius: 8px;
    text-align: center; text-decoration: none; }
.oferta-pokoje strong { border-color: var(--marka); color: var(--marka); }
.oferta-pokoje .dopisek { color: var(--tekst-trzeci); font-size: 13px; }
.oferta-formularz-zapytania { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.oferta-formularz-zapytania .cala { grid-column: 1 / -1; }
.oferta-formularz-zapytania input, .oferta-formularz-zapytania textarea { min-width: 0; }
.oferta-formularz-zapytania .przyciski { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 6px 0 0; }
/* FAKTURA (2026-09-24): pola firmy widac dopiero po zaznaczeniu "Chce fakture" - bez skryptu (:has). Przegladarka bez :has pokaze je
   zawsze; serwer i tak bierze je tylko przy zaznaczonym polu. */
.oferta-faktura-wybor { display: flex; align-items: flex-end; }
.oferta-faktura-wybor label { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 16px; font-size: 15px; color: var(--tekst); cursor: pointer; }
.oferta-faktura-wybor input { width: 18px; height: 18px; margin: 0; }
.oferta-faktura-pola { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 14px; padding: 16px 16px 0;
    margin: 0 0 16px; border-radius: 12px; background: var(--tlo-delikatne); }
.oferta-faktura-pola .cala { grid-column: 1 / -1; }
.oferta-formularz-zapytania:has(#z-faktura:not(:checked)) .oferta-faktura-pola { display: none; }
.oferta .dopisek { color: var(--tekst-trzeci); font-weight: 400; }
.oferta-rodo { margin: 12px 0 0; font-size: 12.5px; color: var(--tekst-trzeci); }
.oferta-pulapka { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 720px) {
    .oferta-formularz-zapytania, .oferta-faktura-pola { grid-template-columns: minmax(0, 1fr); }
    .oferta-zapytanie { padding: 18px; }
    .oferta-formularz-zapytania .przyciski { justify-content: stretch; }
    .oferta-formularz-zapytania .przyciski > * { flex: 1 1 auto; }
}

/* REZERWACJA ONLINE (migracja 030): przy karcie pokoju "Zarezerwuj" i cichy odnosnik do zapytania; w formularzu podsumowanie kwot
   (do zaplaty teraz wyrozniona), warunki rezygnacji i zgoda. */
.oferta a.oferta-inna-droga { font-size: 13.5px; font-weight: 600; }
/* OGRANICZENIE TERMINU (1.219): pokoj bylby od reki, ale obiekt przyjmuje ten termin online inaczej - zdanie pod cena, obok "Zapytaj". */
.oferta-ograniczenie { max-width: 22rem; margin: 0; font-size: 13px; line-height: 1.45; color: var(--zn-zolty-tekst); }
/* KAFELEK PAKIETU pod "Zarezerwuj" (1.267; do 1.431 takze oferta bezzwrotna) - caly kafelek to odnosnik do formularza. */
.oferta a.oferta-bezzwrotna { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 8px 12px; border: 1px solid var(--linia-pola);
    border-radius: 12px; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--tekst-drugi); text-decoration: none; }
.oferta a.oferta-bezzwrotna:hover { background: var(--tlo-delikatne); border-color: var(--marka); }
.oferta a.oferta-bezzwrotna > span:first-child { font-weight: 700; color: var(--marka); }
.oferta a.oferta-bezzwrotna strong { font-size: 17px; font-weight: 800; color: var(--tekst); }
@media (max-width: 900px) { .oferta a.oferta-bezzwrotna { align-items: flex-start; } }
/* KARTA POKOJU PO WYSZUKANIU (1.432, makieta ~/projekty/makiety/2026-10-06-oferta-pomysly): */
/* "Zostaly 2 pokoje" - pierwszy w tresci (czytnik czyta go przy nazwie), przy zdjeciu stoi w jego rogu; bez zdjecia - nad nazwa. Barwa stala
   (bursztyn, bialy napis) w obu motywach, jak licznik zdjec. */
.oferta-zostalo { display: inline-block; margin: 0 0 8px; padding: 4px 10px 3px; border-radius: 999px; background: #b45309; color: #ffffff;
    font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.oferta-koszyk:not(.bez-zdjecia) .oferta-zostalo { position: absolute; left: 12px; top: 12px; z-index: 1; margin: 0; box-shadow: 0 2px 8px rgb(0 0 0 / .22); }
/* Ostatni dzien bezplatnej rezygnacji w tym terminie. */
.oferta-rezygnacja-do { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; font-size: 14px; font-weight: 600; color: var(--zn-zielony-tekst); }
.oferta .oferta-rezygnacja-do .ikona-oferty { width: 16px; height: 16px; flex-basis: 16px; color: currentColor; }
/* OFERTA BEZZWROTNA (034; od 1.432 pod data rezygnacji, wariant A): obok bezplatnej rezygnacji - gosc porownuje "elastycznie" i "taniej
   bez zwrotu"; caly kafelek to odnosnik do formularza w tej ofercie. */
.oferta a.oferta-bezzwrotna-karta { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 460px; margin: 12px 0 0;
    padding: 10px 14px 9px; border: 1px solid var(--linia-pola); border-radius: 12px; background: var(--papier); color: var(--tekst); text-decoration: none; }
.oferta a.oferta-bezzwrotna-karta:hover { border-color: var(--marka); background: var(--tlo-najazd); text-decoration: none; }
.oferta-bezzwrotna-opis strong { display: block; font-size: 14px; color: var(--marka); }
.oferta-bezzwrotna-opis span, .oferta-bezzwrotna-cena span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--tekst-drugi); }
.oferta-bezzwrotna-cena { flex: none; text-align: right; }
.oferta-bezzwrotna-cena strong { font-size: 17px; font-weight: 800; color: var(--tekst); white-space: nowrap; }
/* Cena przed rabatem i kodem - przekreslona nad cena. */
.oferta-cena-przed { display: block; font-size: 13.5px; color: var(--tekst-trzeci); }
/* Zadatek i reszta pod cena. */
.oferta-zadatek { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tekst-drugi); }
.oferta-zadatek b { color: var(--tekst); font-weight: 700; }
/* Strzalka w "Zarezerwuj" (Rafal: "do zarezerwuj dodalbym taka strzalke, a zapytaj o termin wysrodkowal"). */
.oferta-koszyk-cena .przycisk.glowny { gap: 8px; }
.oferta-koszyk-cena .przycisk.glowny .ikona-oferty { width: 17px; height: 17px; flex-basis: 17px; color: currentColor; }
@media (min-width: 901px) { .oferta-koszyk-cena a.oferta-inna-droga { align-self: center; } }
.oferta .dla-czytnika { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* PAKIET (1.267): kafelek jak bezzwrotna, w barwie marki; nazwa pakietu nad cena "tylko pakiet"; podpowiedz nad wynikami, gdy termin
   nachodzi na pakiet. */
.oferta a.oferta-pakiet { border-color: var(--marka); background: var(--marka-jasna); }
.oferta a.oferta-pakiet:hover { background: var(--marka-jasna); filter: brightness(.98); }
.oferta-pakiet-nazwa { display: block; margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--marka); }
.oferta-podpowiedz-pakietu { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 12px 16px; border-radius: 12px;
    background: var(--marka-jasna); color: var(--tekst); font-size: 14.5px; line-height: 1.5; }
.oferta-podpowiedz-pakietu .ikona-oferty { flex: none; margin-top: 2px; color: var(--marka); }
.oferta-podpowiedz-pakietu a { font-weight: 700; }
.oferta-kwoty { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; }
.oferta-kwoty > div { padding: 12px 14px; border-radius: 12px; background: var(--tlo-delikatne); }
.oferta-kwoty > div.teraz { background: var(--marka-jasna); outline: 1px solid var(--marka); }
.oferta-kwoty dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-trzeci); }
.oferta-kwoty dd { margin: 4px 0 0; font-size: 20px; font-weight: 800; color: var(--tekst); }
.oferta-kwoty dd small { font-size: 13px; font-weight: 600; color: var(--tekst-drugi); }
/* ILE PLACISZ TERAZ (BLUEPRINT 1.182 krok A): zadatek albo calosc - dwie opcje jak karty, wybrana w barwie strony. */
.oferta-wybor-platnosci { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.oferta-wybor-platnosci legend { grid-column: 1 / -1; margin: 0 0 6px; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--tekst-drugi); }
.oferta .oferta-wybor-platnosci label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--linia-pola);
    border-radius: 12px; background: var(--pole); font-size: 15px; font-weight: 500; color: var(--tekst); cursor: pointer; }
.oferta .oferta-wybor-platnosci label:has(input:checked) { border-color: var(--marka); box-shadow: 0 0 0 3px var(--obrys-fokus); }
.oferta-wybor-platnosci input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--marka); }
@media (max-width: 600px) { .oferta-wybor-platnosci { grid-template-columns: minmax(0, 1fr); } }
/* DODATKI (migracja 040, krok G2): lista dodatkow w formularzu rezerwacji i zapytania - pole wyboru albo ilosc, "Przelicz cenę" pod nimi. */
.oferta-dodatki-wybor { margin: 0 0 14px; padding: 12px 14px 4px; border: 1px solid var(--linia-pola); border-radius: 12px; min-width: 0; }
.oferta-dodatki-wybor legend { padding: 0 6px; font-size: 13.5px; font-weight: 600; color: var(--tekst-drugi); }
.oferta .oferta-dodatki-wybor label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 15px; font-weight: 500; color: var(--tekst); cursor: pointer; }
.oferta-dodatki-wybor input[type=checkbox] { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: var(--marka); }
.oferta .oferta-dodatki-wybor label.oferta-dodatek-ilosc { justify-content: space-between; }
.oferta-dodatki-wybor select { width: auto; min-width: 4.5em; margin: 0; }
.oferta-dodatek-zawsze { margin: 0 0 10px; font-size: 15px; font-weight: 500; }
/* OBRAZEK DODATKU (1.619): ikonka w kolorze strony albo miniatura zdjecia - kwadrat 44 px przed dodatkiem (przy polu wyboru - przed nim). */
.oferta-dodatek-obrazek { display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden;
    border-radius: 10px; background: var(--marka-jasna); }
.oferta .oferta-dodatek-obrazek .ikona-oferty { width: 22px; height: 22px; flex-basis: 22px; }
.oferta-dodatek-obrazek img { display: block; width: 100%; height: 100%; object-fit: cover; }
.oferta-dodatki-wybor .oferta-dodatek-zawsze.z-obrazkiem { display: flex; align-items: center; gap: 10px; }
.oferta .oferta-dodatki-wybor label.oferta-dodatek-ilosc.z-obrazkiem > span:not(.oferta-dodatek-obrazek) { flex: 1 1 auto; }
.oferta-przelicz { margin: 4px 0 10px; }
.oferta-cena .oferta-dodatki { color: var(--tekst-drugi); font-size: 13px; }
.oferta-warunki-rezerwacji { margin: 0 0 12px; padding: 14px 16px; border-radius: 12px; background: var(--tlo-delikatne); font-size: 14px; color: var(--tekst-drugi); }
.oferta-warunki-rezerwacji h4 { margin: 0 0 4px; font-size: 14.5px; color: var(--tekst); }
.oferta-warunki-rezerwacji p { margin: 0 0 6px; }
.oferta-warunki-rezerwacji p:last-child { margin-bottom: 0; }
.oferta-zgoda label { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; font-size: 15px; font-weight: 500; color: var(--tekst); cursor: pointer; }
.oferta-zgoda input { width: 18px; height: 18px; margin: 3px 0 0; flex: 0 0 18px; }

/* WARTO WIEDZIEC: kafelki krotkich faktow (godziny, zwierzeta, palenie), pod nimi platnosci i dzieci jako lista, na koniec zasady. */
.oferta-kafelki { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
.oferta-kafelki > div { padding: 16px 18px; background: var(--papier); border: 1px solid var(--linia); border-radius: 14px; }
.oferta-kafelki dt { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tekst-trzeci); }
.oferta-kafelki dd { margin: 6px 0 0; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--tekst); }
.oferta-fakty-lista { display: grid; grid-template-columns: 13rem minmax(0, 1fr); margin: 0; padding: 4px 22px; background: var(--papier);
    border: 1px solid var(--linia); border-radius: 14px; }
.oferta-fakty-lista :is(dt, dd) { padding: 14px 0; border-top: 1px solid var(--linia); }
.oferta-fakty-lista :is(dt:first-of-type, dt:first-of-type + dd) { border-top: 0; }
.oferta-fakty-lista dt { font-weight: 700; color: var(--tekst); padding-right: 16px; }
.oferta-fakty-lista dd { margin: 0; color: var(--tekst-drugi); }
@media (max-width: 600px) {
    .oferta-kafelki > div { padding: 14px; }
    .oferta-kafelki dd { font-size: 15.5px; }
    .oferta-fakty-lista { grid-template-columns: minmax(0, 1fr); padding: 4px 18px; }
    .oferta-fakty-lista dd { border-top: 0; padding-top: 0; }
}
.oferta-zasady { margin-top: 24px; }
.oferta-zasady h3 { margin: 0 0 8px; }
/* Warunki rezygnacji i zasady pobytu w dwoch kolumnach (1.433) - karty jak lista nad nimi; jedna z dwoch - na cala szerokosc; regulamin
   (sam odnosnik) - pasek na cala szerokosc pod nimi. Opis bez limitu 68 znakow (kolumna i tak jest wezsza). */
.oferta-zasady-kolumny { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.oferta-zasady-kolumny.jedna { grid-template-columns: minmax(0, 1fr); }
.oferta-zasady-kolumny > .oferta-zasady { margin: 0; padding: 20px 22px; border: 1px solid var(--linia); border-radius: 16px; background: var(--papier); }
.oferta-zasady-kolumny > .oferta-regulamin { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 14px 22px; }
.oferta-zasady-kolumny > .oferta-regulamin h3, .oferta-zasady-kolumny > .oferta-regulamin p { margin: 0; }
.oferta-zasady-kolumny .oferta-opis { max-width: none; font-size: 15.5px; line-height: 1.65; }
@media (max-width: 760px) { .oferta-zasady-kolumny { grid-template-columns: minmax(0, 1fr); } .oferta-zasady-kolumny > .oferta-zasady { padding: 16px 18px; } }

/* CZESTE PYTANIA (1.408, Http\CzestePytania): <details> bez skryptu, pod "Warto wiedziec"; plus/minus po prawej. */
.oferta-pytania { margin-top: 8px; border-top: 1px solid var(--linia); }
.oferta-pytania details { border-bottom: 1px solid var(--linia); }
.oferta-pytania summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 15px 2px 13px;
    font-weight: 650; color: var(--tekst); }
.oferta-pytania summary::-webkit-details-marker { display: none; }
.oferta-pytania summary::after { content: "+"; flex: none; font-size: 20px; line-height: 1; color: var(--marka); }
.oferta-pytania details[open] summary::after { content: "\2212"; }
.oferta-pytania summary:focus-visible { outline: 2px solid var(--obrys-fokus); outline-offset: 2px; }
.oferta-pytania .odpowiedz { max-width: 72ch; padding: 0 2px 16px; line-height: 1.6; color: var(--tekst-drugi); }
.oferta-pytania .odpowiedz a { color: var(--marka); }

/* DOJAZD: adres i przycisk do Map obok mapy Google (ramka); na telefonie mapa pod adresem. */
/* PAS "PODARUJ POBYT" (1.448, Vouchery V2 krok 4; makieta 2026-10-07-vouchery, oferta-wejscie): jasny pas w barwie marki - z lewej zdanie,
   kwoty (odnosniki-pigulki) i "Kup voucher", z prawej dwie przechylone karty vouchera (arena-voucher.css, ladowany tylko z pasem).
   Na telefonie karty pod tekstem, jedna. */
.prezent-pas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 36px 40px;
    border-radius: 24px; background: var(--marka-jasna); }
.prezent-etykieta { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--marka); }
.prezent-etykieta .ikona-oferty { width: 18px; height: 18px; }
.oferta .prezent-opis h2 { margin: 0 0 10px; }
.prezent-opis > p { margin: 0 0 18px; font-size: 16.5px; line-height: 1.65; color: var(--tekst-drugi); max-width: 52ch; }
.prezent-kwoty { display: flex; flex-wrap: wrap; gap: 8px; }
.prezent-kwota { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 16px 6px; border: 1px solid var(--linia); border-radius: 999px;
    background: var(--papier); color: var(--tekst); font-weight: 600; text-decoration: none; }
.prezent-kwota:hover { border-color: var(--marka); color: var(--marka); text-decoration: none; }
.prezent-opis .przycisk.glowny { gap: 10px; }
.prezent-opis .przycisk .ikona-oferty { width: 18px; height: 18px; color: currentColor; }
.prezent-karty { position: relative; min-height: 290px; }
.prezent-karta { position: absolute; width: 72%; }
.prezent-karta-1 { right: 0; bottom: 0; transform: rotate(3deg); z-index: 1; }
.prezent-karta-2 { left: 0; top: 0; transform: rotate(-6deg); }
.jedna-karta .prezent-karty { min-height: 0; }
.jedna-karta .prezent-karta-1 { position: relative; width: 86%; margin: 0 auto; transform: rotate(-3deg); }
@media (max-width: 880px) {
    .prezent-pas { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 22px; }
    .prezent-karty { min-height: 0; max-width: 420px; }
    .prezent-karta-2 { display: none; }
    .prezent-karta-1 { position: relative; width: 100%; transform: rotate(-2deg); }
}

/* ATRAKCJE W OKOLICY (1.436; makieta 2026-10-06, wariant lista): dwie kolumny wierszy - miniatura, kategoria, nazwa, dojazd, jedno zdanie
   opisu (ucinane wielokropkiem); reszta listy pod "Pokaż wszystkie" (<details>). Na telefonie jedna kolumna. */
.okolica-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.okolica-wiersz { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border: 1px solid var(--linia); border-radius: 14px; background: var(--papier); }
.okolica-miniatura { flex: 0 0 112px; height: 84px; border-radius: 10px; overflow: hidden; background: var(--tlo-delikatne); }
.okolica-miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.okolica-tresc { min-width: 0; }
.okolica-gora { display: flex; gap: 8px; align-items: center; margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--tekst-trzeci); }
.okolica-polecamy { padding: 3px 8px 1px; border-radius: 999px; background: var(--marka-jasna); color: var(--marka); letter-spacing: 0; text-transform: none; }
.okolica-tresc h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.3; }
.oferta .okolica-tresc h3 a { color: var(--tekst); text-decoration: none; }
.oferta .okolica-tresc h3 a:hover { color: var(--marka); }
.okolica-dojazd { display: flex; align-items: center; gap: 7px; margin: 0 0 2px; font-size: 13.5px; font-weight: 600; color: var(--marka); }
.oferta .okolica-dojazd .ikona-oferty { width: 17px; height: 17px; flex-basis: 17px; }
.okolica-opis { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--tekst-drugi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.okolica-wiecej { margin: 12px 0 0; }
.okolica-wiecej > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 10px 16px 8px; border: 1px solid var(--linia-pola); border-radius: 10px;
    background: var(--papier); color: var(--tekst); font-size: 14.5px; font-weight: 600; cursor: pointer; list-style: none; }
.okolica-wiecej > summary::-webkit-details-marker { display: none; }
.okolica-wiecej > summary:hover { background: var(--tlo-najazd); border-color: var(--tekst-trzeci); }
.okolica-wiecej[open] > summary { display: none; }
.okolica-stopka { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; font-size: 13px;
    color: var(--tekst-trzeci); }
.okolica-stopka > span { text-align: right; }
.oferta .okolica-stopka span a { color: inherit; }
.okolica-stopka > a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.oferta .okolica-stopka .ikona-oferty { width: 16px; height: 16px; flex-basis: 16px; color: currentColor; }
@media (max-width: 760px) {
    .okolica-lista { grid-template-columns: minmax(0, 1fr); }
    .okolica-miniatura { flex-basis: 88px; height: 72px; }
    .okolica-stopka > span { text-align: left; }
}
.oferta-dojazd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px; align-items: start; }
.oferta-dojazd-opis .oferta-adres { font-size: 17px; margin: 0 0 16px; color: var(--tekst); }
.oferta-dojazd .przycisk { gap: 8px; }
.oferta-mapa { display: block; width: 100%; height: 400px; border: 1px solid var(--linia); border-radius: 18px; background: var(--tlo-delikatne); }
@media (max-width: 860px) { .oferta-dojazd { grid-template-columns: minmax(0, 1fr); gap: 16px; } .oferta-mapa { height: 300px; } }

/* PODGLAD ZDJECIA (2026-09-23): nakladka na cala strone, widoczna pod adresem #foto-N (:target) - bez skryptu. Tlo i krzyzyk
   zamykaja (odnosnik "#zamknij"), strzalki przechodza po galerii. Zdjecie miesci sie w oknie w calosci. */
.oferta-podglad { display:none; position:fixed; inset:0; z-index:1000; background:var(--podglad-tlo); color:var(--podglad-tekst);
    align-items:center; justify-content:center; padding:48px 64px; box-sizing:border-box; }
.oferta-podglad:target { display:flex; }
.oferta-podglad .podglad-tlo { position:absolute; inset:0; cursor:zoom-out; }
.oferta-podglad figure { position:relative; margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; max-width:100%; max-height:100%; }
.oferta-podglad img { display:block; max-width:100%; max-height:calc(100vh - 140px); width:auto; height:auto; object-fit:contain; border-radius:8px; }
.oferta-podglad figcaption { font-size:14px; text-align:center; }
.oferta-podglad figcaption span { opacity:.7; margin-left:6px; white-space:nowrap; }
.oferta-podglad :is(.podglad-wstecz, .podglad-dalej, .podglad-zamknij) { position:absolute; display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:999px; background:var(--podglad-przycisk); color:var(--podglad-tekst); }
.oferta-podglad :is(.podglad-wstecz, .podglad-dalej, .podglad-zamknij) .ikona-oferty { color:var(--podglad-tekst); width:24px; height:24px; flex-basis:24px; }
.oferta-podglad .podglad-wstecz { left:12px; top:50%; transform:translateY(-50%); }
.oferta-podglad .podglad-dalej { right:12px; top:50%; transform:translateY(-50%); }
.oferta-podglad .podglad-zamknij { right:12px; top:12px; }
@media (max-width: 560px) {
    .oferta-podglad { padding:56px 8px 64px; }
    .oferta-podglad .podglad-wstecz, .oferta-podglad .podglad-dalej { top:auto; bottom:10px; transform:none; }
}
.oferta a.zdjecie { cursor:zoom-in; }

/* STOPKA I KONTAKT: nazwa, adres, telefon i e-mail z napisem, mapa i WWW same ikony (2026-09-23); pod kreska sprzedawca i informacja,
   ze strona dziala w ArenaBooking (w kazdym pakiecie). */
/* Stopka na delikatnym tle - na bialej stronie (1.429) inaczej zlewalaby sie z ostatnia sekcja. */
.oferta-stopka { margin-top: 80px; padding: 40px 0 28px; background: var(--tlo-delikatne); border-top: 1px solid var(--linia); }
.oferta-stopka-gora { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
/* LOGO W STOPCE (1.421): obok nazwy i adresu, ten sam bialy kafelek co w pasku (ciemne logo nie znika w ciemnym motywie). */
.oferta-stopka-marka { display: flex; align-items: center; gap: 18px; min-width: 0; }
.oferta-stopka-logo { flex: 0 0 auto; height: 80px; width: auto; max-width: 210px; object-fit: contain; padding: 6px 10px; border-radius: 12px;
    background: var(--pasek-znak-tlo); border: 1px solid var(--linia); box-sizing: border-box; }
@media (max-width: 640px) { .oferta-stopka-logo { height: 66px; max-width: 150px; } }
.oferta-stopka-nazwa { margin: 0; font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 800; font-size: 22px; }
.oferta-stopka-adres { margin: 4px 0 0; color: var(--tekst-drugi); }
.oferta-kontakt { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.oferta-kontakt .przycisk { min-height: 42px; padding: 8px 16px 6px; font-size: 14.5px; overflow-wrap: anywhere; gap: 8px; }
.oferta-kontakt .przycisk .ikona-oferty { width: 18px; height: 18px; flex-basis: 18px; }
/* Mapa i WWW - same ikony (2026-09-23): kwadrat wysokosci przycisku, nazwa w podpowiedzi i dla czytnikow ekranu. */
.oferta-kontakt .przycisk.ikonowy { width: 42px; min-width: 42px; padding: 0; justify-content: center; }
/* Dolny pasek wysrodkowany (1.481; Rafal 2026-10-09) - sprzedawca i "dziala w ArenaBooking" jedno pod drugim, takze gdy linia sie lamie. */
.oferta-stopka-dol { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--linia); display: flex; flex-direction: column;
    align-items: center; gap: 4px; text-align: center; color: var(--tekst-trzeci); font-size: 13px; }
.oferta-stopka-dol p { margin: 0; }

/* Oferta niedostepna (404). */
.oferta-pusta { max-width: 560px; margin: 80px auto; padding: 0 16px; text-align: center; }

/* STRONA "TWOJ POBYT" DLA GOSCIA (1.438, public/pobyt.php; makieta ~/projekty/makiety/2026-10-07-twoj-pobyt): zdjecie z nazwa obiektu, terminem
   i stanem rezerwacji, kafelki (zameldowanie, wymeldowanie, do zaplaty, kontakt), sekcje w kartach jak "Warto wiedziec", atrakcje jak na
   stronie oferty, rozliczenie z czynnosciami obok. Na telefonie kafelki i fakty po dwa, karty jedna pod druga. */
.pobyt-bohater { position: relative; height: 340px; overflow: hidden; background: #111518; }
.pobyt-bohater img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.pobyt-bohater::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .05) 30%, rgb(0 0 0 / .64)); }
.pobyt-bohater.bez-zdjecia { height: 240px; background: linear-gradient(135deg, var(--marka-ciemna), var(--marka)); }
.pobyt-bohater.bez-zdjecia::after { background: none; }
.pobyt-bohater-tekst { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 1; color: #fff; }
.pobyt-etykieta { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.oferta .pobyt-bohater h1 { margin: 0 0 6px; font-size: clamp(26px, 4vw, 40px); line-height: 1.12; color: #fff; }
.pobyt-termin { margin: 0 0 12px; font-size: 16px; opacity: .95; }
.pobyt-status { display: inline-block; padding: 6px 12px 4px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.pobyt-status.zielony { background: #dcfce7; color: #14532d; }
.pobyt-status.zolty { background: #fef3c7; color: #78350f; }
.pobyt-status.szary { background: #e5e7eb; color: #374151; }
.pobyt-tresc { padding-top: 26px; padding-bottom: 44px; }
.pobyt-baner { display: flex; gap: 10px; align-items: center; padding: 12px 16px; margin: 0 0 18px; border-radius: 12px; background: var(--marka-jasna); color: var(--tekst); }
.pobyt-kafelki { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pobyt-kafelek { display: grid; gap: 2px; align-content: start; padding: 14px 16px; border: 1px solid var(--linia); border-radius: 14px; background: var(--papier); }
.pobyt-kafelek .ikona-oferty, .pobyt-fakty .ikona-oferty { width: 20px; height: 20px; margin-bottom: 6px; }
.pobyt-kafelek span, .pobyt-fakty span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tekst-trzeci); }
.pobyt-kafelek strong { font-size: 20px; color: var(--tekst); }
.pobyt-kafelek small, .pobyt-fakty small { font-size: 13px; color: var(--tekst-drugi); overflow-wrap: anywhere; }
.pobyt-kafelek.do-zaplaty strong { color: #b45309; }
.pobyt-sekcja { margin-top: 40px; }
.pobyt-sekcja h2 { margin: 0 0 14px; }
.pobyt-dwie { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pobyt-dwie.jedna { grid-template-columns: minmax(0, 1fr); }
.pobyt-karta { padding: 18px 20px; border: 1px solid var(--linia); border-radius: 16px; background: var(--papier); }
.pobyt-karta h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 16px; }
.pobyt-karta h3 .ikona-oferty { width: 18px; height: 18px; flex-basis: 18px; }
.pobyt-karta p { margin: 0 0 10px; line-height: 1.6; color: var(--tekst-drugi); }
.pobyt-karta h3.pobyt-odstep { margin-top: 18px; }
.oferta .pobyt-duzy { font-size: 17px; color: var(--tekst); }
.pobyt-kody { display: grid; gap: 10px; }
.pobyt-kody div { display: grid; padding: 12px 14px; border-radius: 12px; background: var(--tlo-delikatne); }
.pobyt-kody span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tekst-trzeci); }
.pobyt-kody strong { font-size: 30px; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--tekst); }
.pobyt-kody small { font-size: 13px; color: var(--tekst-drugi); }
.pobyt-kody-zamkniete { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--tlo-delikatne); }
.oferta .pobyt-kody-zamkniete .ikona-oferty { color: var(--tekst-trzeci); }
.pobyt-kody-zamkniete strong { display: block; color: var(--tekst); }
.pobyt-kody-zamkniete small { color: var(--tekst-drugi); }
.pobyt-fakty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pobyt-fakty div { display: grid; gap: 2px; align-content: start; padding: 14px 16px; border: 1px solid var(--linia); border-radius: 14px; background: var(--papier); }
.pobyt-fakty strong { color: var(--tekst); }
.pobyt-dzieci { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 12px 16px; border: 1px solid var(--linia); border-radius: 12px;
    background: var(--papier); font-size: 14px; line-height: 1.55; color: var(--tekst-drugi); }
.pobyt-dzieci .ikona-oferty { width: 20px; height: 20px; flex-basis: 20px; }
.pobyt-dzieci strong { color: var(--tekst); }
.pobyt-wiecej { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--linia); border-radius: 12px; background: var(--papier); }
.pobyt-wiecej summary { cursor: pointer; font-weight: 600; }
.pobyt-wiecej .oferta-opis { margin-top: 8px; }
.pobyt-link { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
.pobyt .oferta-okolica { margin-top: 40px; }
.pobyt-lista { margin: 0; display: grid; }
.pobyt-lista div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linia); }
.pobyt-lista div:last-child { border-bottom: 0; }
.pobyt-lista dt { color: var(--tekst-trzeci); }
.pobyt-lista dd { margin: 0; text-align: right; color: var(--tekst); font-weight: 500; overflow-wrap: anywhere; }
.pobyt-lista .pobyt-zostalo dd { color: #b45309; font-weight: 700; }
.pobyt-czynnosci { display: grid; gap: 8px; }
.pobyt-czynnosci > .przycisk { justify-content: center; }
.oferta .pobyt-maly { margin: 0; font-size: 13px; text-align: center; }
.pobyt-rezygnacja { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; font-size: 14px; }
.pobyt-rezygnacja .ikona-oferty { width: 18px; height: 18px; flex-basis: 18px; margin-top: 2px; }
.pobyt-zmiana { margin-top: 6px !important; }
.pobyt-kontakt { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; }
.pobyt-stopka .oferta-szerokosc { padding-top: 28px; padding-bottom: 28px; }
.pobyt-stopka-linki { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 14px; color: var(--tekst-trzeci); }
@media (max-width: 860px) {
    .pobyt-kafelki, .pobyt-fakty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pobyt-dwie { grid-template-columns: minmax(0, 1fr); }
    .pobyt-bohater { height: 280px; }
}
@media (prefers-color-scheme: dark) {
    .pobyt-kafelek.do-zaplaty strong, .pobyt-lista .pobyt-zostalo dd { color: #fbbf24; }
}

/* STRONA SZKOLY (1.574; makieta 2026-10-14-strona-szkoly): rezerwacja lekcji w miejscu wyszukiwarki terminu (pola w rzedzie, na telefonie po dwa),
   pasek sezonu i skroty do turnusow i pakietow; karty turnusow i pakietow jak pokoje; cennik lekcji w tabeli; lekcje na prezent; po koncu sezonu
   "Sezon zakończony". */
.oferta-termin .oferta-podtytul { margin: -6px 0 14px; color: var(--tekst-drugi); font-size: 14.5px; }
.oferta-formularz.lekcja-szkoly { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.oferta-formularz.lekcja-szkoly > div { flex: 1 1 9rem; min-width: 0; }
.oferta-formularz.lekcja-szkoly select { width: 100%; min-height: 44px; margin-bottom: 0; }
.oferta-formularz.lekcja-szkoly .przycisk { flex: 0 0 auto; }
@media (max-width: 760px) {
    .oferta-formularz.lekcja-szkoly > div { flex-basis: calc(50% - 6px); }
    .oferta-formularz.lekcja-szkoly .przycisk { flex-basis: 100%; }
}
.oferta-termin .sezon-szkoly { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--zn-zielony-tlo); color: var(--zn-zielony-tekst); font-size: 14px; }
.szkola-skroty { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; font-size: 14px; }
.szkola-skroty a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.szkola-skroty .ikona-oferty { width: 16px; height: 16px; flex-basis: 16px; }
/* Lekcje telefonicznie (1.592: zgloszenia lekcji ze strony wylaczone) - ta sama karta co koniec sezonu. */
.oferta .oferta-termin:is(.koniec-sezonu, .lekcje-telefonicznie) h2 { margin: 0 0 8px; font-size: 24px; text-transform: none; letter-spacing: 0; color: var(--tekst); }
.oferta-termin:is(.koniec-sezonu, .lekcje-telefonicznie) p { margin: 0 0 14px; font-size: 15.5px; color: var(--tekst-drugi); max-width: 46rem; }
.oferta-termin:is(.koniec-sezonu, .lekcje-telefonicznie) .przyciski { display: flex; flex-wrap: wrap; gap: 10px; }
.strona-szkoly .przycisk.glowny .ikona-oferty { color: #ffffff; }
/* Dopisek pod cena turnusu/pakietu - TYLKO strona szkoly (1.578, audyt D28: bez .strona-szkoly regula zmieniala cene z rabatem w ofercie noclegow). */
.strona-szkoly .oferta-koszyk .oferta-cena small { display: block; margin-top: 2px; font-size: 13px; color: var(--tekst-trzeci); font-weight: 500; }
.oferta-fakty .wolne { color: var(--zn-zielony-tekst); font-weight: 600; }
.oferta-fakty .komplet { color: var(--zn-czerwony-tekst); font-weight: 600; }
/* OSTATNIE MIEJSCA (1.642): 3 wolne albo mniej (turnusy szkoly). */
.oferta-fakty .ostatnie { color: var(--zn-pomaranczowy-tekst); font-weight: 600; }
.opis-turnusu { margin: 10px 0 0; font-size: 14px; color: var(--tekst-drugi); }
/* Telefon (1.586, audyt D69): szeroki cennik (cena za osobe i partnerska) przewija sie w swojej ramce, strona nie jedzie w bok. */
.cennik-szkoly-ramka { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cennik-szkoly { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--papier); border: 1px solid var(--linia); border-radius: 16px; overflow: hidden; }
.cennik-szkoly th, .cennik-szkoly td { padding: 14px 22px; text-align: left; border-bottom: 1px solid var(--linia); font-size: 15px; }
.cennik-szkoly thead th { background: var(--tlo-delikatne); font-size: 12px; white-space: normal; }
.cennik-szkoly tbody th { font-weight: 600; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--tekst); }
.cennik-szkoly tbody tr:last-child td, .cennik-szkoly tbody tr:last-child th { border-bottom: 0; }
.cennik-szkoly td.kwota { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
@media (max-width: 600px) { .cennik-szkoly th, .cennik-szkoly td { padding: 12px; font-size: 14px; } .cennik-szkoly thead th { font-size: 11px; } }
.na-prezent-szkoly { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 64px 0 0; padding: 22px 26px;
    border-radius: 18px; background: linear-gradient(135deg, #fff7ed, #fdf2f8); border: 1px solid #fde2e2; }
.na-prezent-szkoly > div { display: flex; gap: 16px; align-items: center; }
.na-prezent-szkoly strong { display: block; margin-bottom: 4px; font-size: 19px; }
.na-prezent-szkoly span { color: var(--tekst-drugi); font-size: 15px; }
.na-prezent-szkoly > div > .ikona-oferty { flex: none; width: 34px; height: 34px; color: #db2777; }
@media (prefers-color-scheme: dark) {
    .na-prezent-szkoly { background: linear-gradient(135deg, rgb(251 146 60 / .1), rgb(236 72 153 / .1)); border-color: rgb(236 72 153 / .25); }
    .na-prezent-szkoly > div > .ikona-oferty { color: #f472b6; }
}

/* STRONA NOCLEGU (1.738, /nocleg/<nazwa>; makieta 2026-10-29-strony-pokoi): okruszki, nazwa i fakty, zdjecia (komputer: pierwsze duze, reszta
   obok; telefon - tasma do przesuwania palcem z licznikiem), ramka "od X zł za noc" z formularzem terminu z boku - BEZ przyklejania (Rafal
   2026-10-06: "przewijana rezerwacja raczej bez sensu"), na telefonie pod zdjeciami; opis, wyposazenie, "Warto wiedziec", "Zobacz też". */
.nocleg-strona { padding-top: 22px; padding-bottom: 72px; }
.nocleg-okruszki { display: flex; flex-wrap: wrap; gap: 8px; font-size: .9rem; color: var(--tekst-drugi); margin: 0 0 14px; }
.nocleg-okruszki a { color: var(--tekst-drugi); text-decoration: none; }
.nocleg-okruszki a:hover { color: var(--marka); text-decoration: underline; }
.nocleg-okruszki [aria-current] { color: var(--tekst); }
.nocleg-strona h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.15; }
.nocleg-podtytul { margin: 8px 0 20px; color: var(--tekst-drugi); }
.nocleg-galeria { position: relative; display: grid; gap: 8px; grid-template-columns: 2fr 1fr; grid-auto-rows: 210px; border-radius: 16px; overflow: hidden; }
.nocleg-zdjecie { display: block; overflow: hidden; background: var(--tlo-delikatne); }
.nocleg-zdjecie img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.nocleg-zdjecie:hover img { transform: scale(1.03); }
.nocleg-galeria .nocleg-zdjecie:first-child { grid-row: span 2; }
.nocleg-galeria.ile-1 { grid-template-columns: 1fr; grid-auto-rows: 420px; }
.nocleg-galeria.ile-2 { grid-template-columns: 3fr 2fr; grid-auto-rows: 420px; }
.nocleg-galeria.ile-1 .nocleg-zdjecie:first-child, .nocleg-galeria.ile-2 .nocleg-zdjecie:first-child { grid-row: auto; }
.nocleg-galeria.ile-4, .nocleg-galeria.ile-5 { grid-template-columns: 2fr 1fr 1fr; }
/* Ponad piec zdjec - piec w siatce, reszta w podgladzie (strzalki). */
.nocleg-galeria .nocleg-zdjecie:nth-child(n+6) { display: none; }
.nocleg-licznik { display: none; }
.nocleg-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "tresc rezerwacja"; gap: 44px; margin-top: 32px; align-items: start; }
.nocleg-tresc { grid-area: tresc; }
.nocleg-tresc section + section { margin-top: 34px; }
.nocleg-tresc h2 { font-size: 1.3rem; margin: 0 0 12px; }
.nocleg-tresc .oferta-udogodnienia { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 18px; padding: 0; margin: 0; list-style: none; }
.nocleg-tresc .oferta-udogodnienia li { display: flex; align-items: center; gap: 10px; }
.nocleg-tresc .oferta-kafelki { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.nocleg-rezerwacja { grid-area: rezerwacja; background: var(--papier); border: 1px solid var(--linia); border-radius: 16px; padding: 22px; box-shadow: var(--cien);
    scroll-margin-top: 84px; }
.nocleg-cena { margin: 0 0 4px; font-size: 1.05rem; }
.nocleg-cena strong { font-size: 1.6rem; }
.nocleg-rezerwacja h2 { font-size: 1rem; margin: 0 0 14px; color: var(--tekst-drugi); font-weight: 600; }
.nocleg-rezerwacja .oferta-formularz { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nocleg-rezerwacja .oferta-formularz > div { min-width: 0; }
.nocleg-rezerwacja .oferta-formularz input { width: 100%; box-sizing: border-box; }
.nocleg-rezerwacja .oferta-formularz > .przycisk, .nocleg-rezerwacja .oferta-pole-kodu { grid-column: 1 / -1; width: 100%; }
.nocleg-dopisek { margin: 14px 0 0; font-size: .88rem; color: var(--tekst-drugi); }
.nocleg-inne { margin-top: 64px; }
.nocleg-inne h2 { font-size: 1.4rem; margin: 0 0 16px; }
.nocleg-inne-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.nocleg-inny { display: flex; flex-direction: column; border: 1px solid var(--linia); border-radius: 14px; overflow: hidden; background: var(--papier);
    color: var(--tekst); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.nocleg-inny:hover { box-shadow: var(--cien); transform: translateY(-2px); }
.nocleg-inny img { width: 100%; height: 170px; object-fit: cover; display: block; }
.nocleg-inny-tresc { display: grid; gap: 4px; padding: 12px 14px 14px; }
.nocleg-inny-tresc > span { color: var(--tekst-drugi); font-size: .9rem; }
.nocleg-inny-tresc .nocleg-inny-cena { color: var(--tekst); margin-top: 4px; }
.nocleg-inne > p { margin-top: 20px; }
@media (max-width: 900px) {
    .nocleg-uklad { grid-template-columns: 1fr; grid-template-areas: "rezerwacja" "tresc"; gap: 28px; margin-top: 20px; }
    .nocleg-galeria { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; border-radius: 14px; scrollbar-width: none; }
    .nocleg-galeria .nocleg-zdjecie, .nocleg-galeria .nocleg-zdjecie:nth-child(n+6) { display: block; flex: 0 0 100%; height: 280px; scroll-snap-align: start; }
    .nocleg-licznik { display: block; position: absolute; right: 12px; bottom: 12px; background: rgb(15 23 42 / .7); color: #fff; font-size: .8rem;
        padding: 4px 9px 3px; border-radius: 999px; }
    .nocleg-strona h1 { font-size: 1.6rem; }
    .nocleg-tresc .oferta-udogodnienia { grid-template-columns: 1fr 1fr; }
}
/* Karta "Pokoje i ceny": nazwa i "Szczegóły →" prowadza na strone noclegu. */
.oferta-nazwa-noclegu { color: inherit; text-decoration: none; }
.oferta-nazwa-noclegu:hover h3 { color: var(--marka); text-decoration: underline; }
.oferta-szczegoly-noclegu { color: var(--marka); font-weight: 600; text-decoration: none; }
.oferta-szczegoly-noclegu:hover { text-decoration: underline; }
@media (min-width: 901px) { .oferta-koszyk-cena .oferta-szczegoly-noclegu { align-self: center; } }