/* ==========================================================================
   Noclegi — odwzorowanie koncepcji Regle Zieleniec
   Wartości (paddingi, rozmiary, cienie, proporcje) przeniesione 1:1 z projektu.
   Kluczowa cecha: NAPRZEMIENNE TŁA — jasne (surface) i ciemne (bg/bg-deep).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1, h2, h3 {
    font-family: var(--font-head);
    font-weight: 400;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.page { max-width: var(--page-max); margin: 0 auto; background: var(--bg); }

/* --- SEKCJE --------------------------------------------------------------- */

.sec { padding: 74px 56px; }
.sec--jasna { background: var(--surface); color: var(--ink); }
.sec--deep  { background: var(--bg-deep); }
.sec--base  { background: var(--bg); }

.sec__inner { max-width: var(--content-max); margin: 0 auto; }

.eyebrow {
    font-size: 12px; letter-spacing: 3px;
    text-transform: uppercase; font-weight: 800;
    color: var(--accent);
    margin-bottom: 8px;
}
.sec--jasna .eyebrow { color: var(--cta); }

.sec__title { font-size: 48px; margin: 0; }
.sec__head { text-align: center; margin-bottom: 40px; }

.sec__head--split {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 34px; text-align: left;
}
.sec__head--split .sec__title { font-size: 52px; }
.sec__more { font-size: 14px; font-weight: 800; color: var(--cta); }

@media (max-width: 900px) {
    .sec { padding: 56px 24px; }
    .sec__title, .sec__head--split .sec__title { font-size: 36px; }
    .sec__head--split { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* --- NAV ------------------------------------------------------------------ */

.nav {
    position: sticky; top: 0; z-index: 5;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.nav__inner {
    max-width: var(--shell-max); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 40px;
}
.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__name {
    font-family: var(--font-head);
    font-size: 26px; letter-spacing: 2px;
    text-transform: uppercase;
}
.nav__tag {
    font-size: 10px; letter-spacing: 3px;
    text-transform: uppercase; font-weight: 800;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    padding: 3px 8px; border-radius: 20px;
}
.nav__logo { height: 34px; width: auto; }

.nav__right {
    display: flex; align-items: center; gap: 24px;
    font-size: 14px; font-weight: 600;
}
.nav__link { transition: color .18s; }
.nav__link:hover { color: var(--accent); }
.nav__cta {
    background: var(--cta); color: #fff;
    padding: 11px 22px; border-radius: 8px;
    font-weight: 800;
    transition: filter .18s;
}
.nav__cta:hover { filter: brightness(1.1); }

/* WhatsApp w navbarze — na desktopie sama ikona, na mobile pełny wiersz */
.nav__wa {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none;
    border-radius: 50%;
    background: #25d366; color: #0a2e15;
    transition: filter .18s, transform .18s;
}
.nav__wa:hover { filter: brightness(1.08); transform: translateY(-1px); }
.nav__wa svg { width: 20px; height: 20px; display: block; }
.nav__wa-txt { display: none; }

/* --- hamburger (czysty CSS) --- */
.nav__burger { display: none; }

@media (max-width: 900px) {
    .nav__inner { padding: 13px 20px; flex-wrap: wrap; }

    .nav__burger {
        display: flex; flex-direction: column; justify-content: center;
        gap: 5px;
        width: 42px; height: 42px;
        padding: 10px;
        cursor: pointer;
        border-radius: 8px;
        border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    }
    .nav__burger span {
        display: block; height: 2px; width: 100%;
        background: var(--text);
        border-radius: 2px;
        transition: transform .22s, opacity .22s;
    }

    /* rozwinięte menu */
    .nav__right {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 0 4px;
    }
    .nav__toggle:checked ~ .nav__right { display: flex; }

    .nav__link {
        display: block;
        padding: 14px 4px;
        font-size: 15px;
        border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    }
    .nav__cta {
        text-align: center;
        margin-top: 12px;
    }

    .nav__wa {
        width: auto; height: auto;
        border-radius: 8px;
        gap: 9px;
        padding: 12px;
        margin-top: 12px;
        font-size: 15px; font-weight: 800;
    }
    .nav__wa-txt { display: inline; }
    .nav__wa + .nav__cta { margin-top: 8px; }

    /* animacja X */
    .nav__toggle:checked ~ .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav__toggle:checked ~ .nav__burger span:nth-child(2) { opacity: 0; }
    .nav__toggle:checked ~ .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* --- HERO ----------------------------------------------------------------- */

.hero { position: relative; height: 600px; overflow: hidden; }
.hero--duza    { height: 480px; }
.hero--srednia { height: 380px; }

.hero__img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(1.05);
}
.hero__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(115deg,
        color-mix(in srgb, var(--bg) 92%, transparent) 0%,
        color-mix(in srgb, var(--bg) 55%, transparent) 48%,
        color-mix(in srgb, var(--bg) 20%, transparent) 100%);
}

.hero__inner {
    position: absolute;
    left: 56px; right: 56px;
    top: 50%; transform: translateY(-50%);
}

.hero__badge {
    display: inline-block;
    font-size: 12px; letter-spacing: 3px;
    text-transform: uppercase; font-weight: 800;
    background: var(--accent); color: var(--bg-deep);
    padding: 7px 15px; border-radius: 6px;
    margin-bottom: 22px;
}

.hero__title { font-size: 88px; line-height: .92; margin: 0 0 20px; }
.hero__title em { font-style: normal; color: var(--accent); }

.hero__sub {
    font-size: 19px; line-height: 1.5;
    max-width: 500px; margin: 0 0 30px;
    color: color-mix(in srgb, var(--text) 85%, transparent);
}

.hero__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.snow {
    position: absolute; top: 0;
    color: var(--accent-soft);
    animation: snowfall linear infinite;
    pointer-events: none;
}
@keyframes snowfall {
    0%   { transform: translateY(-20px); opacity: 0; }
    10%  { opacity: .9; }
    100% { transform: translateY(620px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .snow { display: none; } }

@media (max-width: 900px) {
    .hero { height: 520px; }
    .hero__inner { left: 24px; right: 24px; }
    .hero__title { font-size: 52px; }
    .hero__sub { font-size: 16px; }
}

/* --- PRZYCISKI ------------------------------------------------------------ */

.btn {
    display: inline-block;
    background: var(--cta); color: #fff;
    padding: 16px 34px; border-radius: 10px;
    font-weight: 800; font-size: 16px;
    transition: filter .18s, transform .18s;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }

.btn--ghost {
    background: color-mix(in srgb, var(--text) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
    color: var(--text);
    padding: 15px 28px; font-weight: 700; font-size: 15px;
}

/* przycisk z ikoną telefonu */
.btn--tel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.btn--tel svg {
    flex: none;
    color: var(--accent);
    transition: color .18s;
}
.btn--tel:hover svg { color: var(--text); }
.btn--white { background: #fff; color: var(--cta); }

/* --- STATYSTYKI ----------------------------------------------------------- */

.staty {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 36px 56px;
    background: var(--bg-deep);
    max-width: var(--shell-max);
    margin-inline: auto;
}
.staty__num {
    font-family: var(--font-head);
    font-size: 44px; line-height: 1;
    color: var(--accent);
}
.staty__label {
    font-size: 13px; font-weight: 600;
    color: color-mix(in srgb, var(--text) 60%, transparent);
}
@media (max-width: 760px) {
    .staty { grid-template-columns: repeat(2, 1fr); gap: 26px; padding: 30px 24px; }
}

/* --- POKOJE --------------------------------------------------------------- */

.pokoje__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.pokoj {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 10%, transparent);
    transition: transform .2s, box-shadow .2s;
}
.pokoj:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--ink) 18%, transparent);
}
.pokoj__media { position: relative; }
.pokoj__media img { width: 100%; height: 200px; object-fit: cover; }
.pokoj__badge {
    position: absolute; top: 12px; left: 12px;
    background: var(--cta); color: #fff;
    padding: 5px 12px; border-radius: 6px;
    font-size: 12px; font-weight: 800;
}
.pokoj__body { padding: 20px; }
.pokoj__title { font-size: 22px; margin: 0 0 8px; letter-spacing: .5px; color: var(--ink); }
.pokoj__desc {
    font-size: 13.5px; line-height: 1.5;
    color: var(--ink-muted);
    margin: 0 0 14px;
}
.pokoj__price {
    font-family: var(--font-head);
    font-size: 26px;
    color: var(--cta);
}
.pokoj__unit {
    font-family: var(--font-body);
    font-size: 13px; font-weight: 600;
    color: var(--text-muted);
}

@media (max-width: 980px) { .pokoje__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pokoje__grid { grid-template-columns: 1fr; } }

/* --- UDOGODNIENIA --------------------------------------------------------- */

.udog__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.udog__item {
    background: color-mix(in srgb, #fff 3.5%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: 18px;
    padding: 34px 18px 26px;
    text-align: center;
    transition: border-color .2s, transform .2s;
}
.udog__item:hover { border-color: var(--accent); transform: translateY(-3px); }
.udog__icon { display: inline-flex; color: var(--accent-soft); margin-bottom: 16px; }
.udog__label { font-size: 14px; font-weight: 600; color: var(--text); }

@media (max-width: 1100px) { .udog__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .udog__grid { grid-template-columns: repeat(2, 1fr); } }

/* --- SPLIT (tekst + obraz) ------------------------------------------------ */

.split {
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--bg);
    max-width: var(--shell-max);
    margin-inline: auto;
    width: 100%;
}
.split--deep { background: var(--bg-deep); }
.split__media { position: relative; min-height: 400px; }
.split__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.split__text { padding: 64px 52px; display: flex; flex-direction: column; justify-content: center; }
.split--lewo .split__text  { order: 2; }
.split--lewo .split__media { order: 1; }

.split__title { font-size: 46px; line-height: .95; margin: 0 0 16px; }
.split__body { color: color-mix(in srgb, var(--text) 80%, transparent); line-height: 1.6; font-size: 16px; max-width: 420px; }
.split__body p { margin: 0 0 1em; }
.split__body strong { color: var(--text); }

.split__highlight {
    margin: 20px 0;
    padding: 13px 18px;
    border-left: 3px solid var(--highlight);
    background: color-mix(in srgb, var(--highlight) 10%, transparent);
    color: var(--text);
    font-weight: 700; font-size: 14px;
    border-radius: 0 8px 8px 0;
}

@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }
    .split__text { padding: 46px 24px; }
    .split__media { min-height: 260px; }
    .split--lewo .split__text, .split--lewo .split__media { order: initial; }
}

/* --- GALERIA -------------------------------------------------------------- */

.galeria__grid { display: grid; gap: 14px; }
.galeria__grid--2 { grid-template-columns: repeat(2, 1fr); }
.galeria__grid--3 { grid-template-columns: repeat(3, 1fr); }
.galeria__grid--4 { grid-template-columns: repeat(4, 1fr); }

.galeria__item { margin: 0; overflow: hidden; border-radius: 12px; }
.galeria__item img {
    width: 100%; height: 230px; object-fit: cover;
    transition: transform .35s;
}
.galeria__item:hover img { transform: scale(1.05); }

@media (max-width: 860px) { .galeria__grid--3, .galeria__grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .galeria__grid { grid-template-columns: 1fr !important; } }

/* --- OPINIE --------------------------------------------------------------- */

.opinie__oceny {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 16px; margin-bottom: 16px;
}
.ocena {
    display: flex; align-items: center; gap: 22px;
    background: var(--bg-alt);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: 16px;
    padding: 26px 30px;
    transition: border-color .2s;
}
.ocena:hover { border-color: var(--accent); }
.ocena__logo {
    width: 66px; height: 66px; flex: none;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head);
    color: #fff; font-size: 30px;
}
.ocena__logo--booking { background: #003580; }
.ocena__booking {
    font-family: var(--font-head);
    font-size: 30px; color: #fff;
    letter-spacing: -1px;
}
.ocena__logo--google {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.ocena__logo--google svg { display: block; }
.ocena__body { flex: 1; }
.ocena__row { display: flex; align-items: baseline; gap: 10px; }
.ocena__score {
    font-family: var(--font-head);
    font-size: 34px; line-height: 1;
    color: var(--text);
}
.ocena__word { font-size: 14px; font-weight: 800; color: var(--accent); }
.ocena__meta {
    font-size: 13px; font-weight: 600;
    color: color-mix(in srgb, var(--text) 55%, transparent);
    margin-top: 3px;
}
.ocena__arrow { color: color-mix(in srgb, var(--text) 40%, transparent); }

.opinie__cytaty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cytat {
    background: var(--bg-alt);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: 16px;
    padding: 24px;
}
.cytat__gwiazdki { color: var(--highlight); font-size: 14px; margin-bottom: 10px; letter-spacing: 2px; }
.cytat__tekst {
    font-size: 14px; line-height: 1.6;
    color: color-mix(in srgb, var(--text) 80%, transparent);
    margin: 0 0 12px;
}
.cytat__autor { font-size: 13px; font-weight: 700; color: var(--text-muted); }

@media (max-width: 900px) {
    .opinie__oceny, .opinie__cytaty { grid-template-columns: 1fr; }
}

/* --- CENNIK (grid, jak w koncepcji) --------------------------------------- */

.cennik__head {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 12px; gap: 24px;
}
.cennik__lead {
    font-size: 13px; line-height: 1.5;
    color: color-mix(in srgb, var(--text) 55%, transparent);
    max-width: 230px; text-align: right;
}

/* legenda sezonów */
.cennik__legenda {
    display: flex; gap: 22px; flex-wrap: wrap;
    margin: 24px 0 20px;
    font-size: 12.5px; font-weight: 600;
    color: color-mix(in srgb, var(--text) 70%, transparent);
}
.cennik__leg { display: flex; align-items: center; gap: 8px; }
.cennik__kropka { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.cennik__kropka--accent    { background: var(--accent); }
.cennik__kropka--cta       { background: var(--cta); }
.cennik__kropka--highlight { background: var(--highlight); }

/* siatka */
.cennik__grid {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.cennik__row {
    display: grid;
    grid-template-columns: 1.5fr repeat(var(--kol, 3), 1fr);
}
.cennik__row--head { background: var(--bg-alt); }
.cennik__row--a { background: color-mix(in srgb, var(--bg-alt) 45%, var(--bg-deep)); }
.cennik__row--b { background: color-mix(in srgb, var(--bg-alt) 20%, var(--bg-deep)); }
.cennik__row:not(.cennik__row--head) {
    border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
}

.cennik__cell { padding: 20px 16px; display: flex; align-items: center; justify-content: center; }
.cennik__cell--nazwa {
    padding: 20px 24px;
    justify-content: flex-start;
    flex-direction: column; align-items: flex-start; gap: 3px;
}
.cennik__cell--nazwa strong { font-weight: 800; font-size: 15.5px; }
.cennik__opis {
    font-size: 12.5px;
    color: color-mix(in srgb, var(--text) 50%, transparent);
}

/* nagłówki kolumn — kolor per sezon */
.cennik__cell--th {
    padding: 18px 16px;
    font-size: 12px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
}
.cennik__row--head .cennik__cell--nazwa {
    padding: 18px 24px;
    font-size: 12px; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase;
    color: color-mix(in srgb, var(--text) 50%, transparent);
}
.cennik__cell--accent    { color: var(--accent); }
.cennik__cell--cta       { color: var(--cta); }
.cennik__cell--highlight { color: var(--highlight); }

/* ceny */
.cennik__cell--cena {
    font-family: var(--font-head);
    font-size: 22px;
    color: var(--text);
}
.cennik__cell--cena.is-wyrozniona {
    background: color-mix(in srgb, var(--highlight) 8%, transparent);
    color: var(--highlight);
}

/* mobile: karty zamiast siatki */
@media (max-width: 720px) {
    .cennik__head { flex-direction: column; align-items: flex-start; }
    .cennik__lead { text-align: left; max-width: none; }

    .cennik__grid { border: 0; border-radius: 0; }
    .cennik__row--head { display: none; }
    .cennik__row {
        display: block;
        border-radius: 14px;
        border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
        margin-bottom: 12px;
        padding: 4px 0;
    }
    .cennik__cell--nazwa { padding: 16px 18px 10px; }
    .cennik__cell--cena {
        justify-content: space-between;
        padding: 11px 18px;
        font-size: 19px;
        border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
    }
    .cennik__cell--cena::before {
        content: attr(data-sezon);
        font-family: var(--font-body);
        font-size: 13px; font-weight: 600;
        color: color-mix(in srgb, var(--text) 55%, transparent);
    }
}

/* karty okresów specjalnych */
.cennik__okresy {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 14px; margin-top: 22px;
}
.okres {
    background: var(--bg-alt);
    border-radius: 14px;
    padding: 22px 24px;
    border-left: 4px solid var(--highlight);
}
.okres--highlight { border-left-color: var(--highlight); }
.okres--cta       { border-left-color: var(--cta); }
.okres--accent    { border-left-color: var(--accent); }

.okres__tytul {
    font-family: var(--font-head);
    font-size: 19px; letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 1.15;
    color: var(--text);
}
.okres--highlight .okres__tytul { color: var(--highlight); }
.okres--accent .okres__tytul    { color: var(--accent); }

.okres__termin {
    font-size: 13px;
    color: color-mix(in srgb, var(--text) 60%, transparent);
    margin: 8px 0 12px;
}
.okres__opis {
    font-size: 13.5px; line-height: 1.55;
    color: color-mix(in srgb, var(--text) 85%, transparent);
}

@media (max-width: 900px) {
    .cennik__okresy { grid-template-columns: 1fr; }
}

.cennik__note {
    font-size: 12.5px; line-height: 1.7;
    color: color-mix(in srgb, var(--text) 45%, transparent);
    margin: 20px 0 0;
    text-align: center;
}

/* --- KONTAKT (gradient CTA) ----------------------------------------------- */

.kontakt {
    padding: 74px 56px;
    background: linear-gradient(135deg, var(--cta) 0%, var(--cta-dark) 100%);
    color: #fff;
}
.kontakt__inner { max-width: var(--content-max); margin: 0 auto; }
.kontakt .eyebrow { color: rgba(255,255,255,.75); }
.kontakt__title { font-size: 48px; margin: 0 0 12px; }
.kontakt__lead {
    color: rgba(255,255,255,.85);
    max-width: 560px; margin: 0 0 34px;
    line-height: 1.6;
}
.kontakt__grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 20px; margin-bottom: 26px;
}
.kontakt__box {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 16px;
    padding: 28px;
    backdrop-filter: blur(4px);
}
.kontakt__h3 {
    font-family: var(--font-body);
    font-size: 13px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    color: rgba(255,255,255,.8);
    margin-bottom: 16px;
}
.kontakt__list { list-style: none; padding: 0; margin: 0; }
.kontakt__list li { padding: 8px 0; font-size: 17px; font-weight: 700; }
.kontakt__list a { transition: opacity .18s; }
.kontakt__list a:hover { opacity: .75; }
.kontakt__muted { font-weight: 400 !important; font-size: 14px !important; color: rgba(255,255,255,.7); }

/* WhatsApp — pigułka w barwach marki, tuż pod numerem telefonu */
.kontakt__wa { padding: 4px 0 10px !important; }
.kontakt__wa a {
    display: inline-flex; align-items: center; gap: 8px;
    background: #25d366; color: #0a2e15;
    padding: 9px 16px; border-radius: 999px;
    font-size: 15px; font-weight: 800; letter-spacing: .01em;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    transition: background .18s, transform .18s, box-shadow .18s;
}
.kontakt__wa a:hover,
.kontakt__wa a:focus-visible {
    background: #1ebe57; opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(0,0,0,.26);
}
.kontakt__wa svg { flex: 0 0 auto; }

.kontakt__warunki { margin: 0; padding-left: 18px; }
.kontakt__warunki li {
    font-size: 13.5px; line-height: 1.55;
    color: rgba(255,255,255,.85);
    padding: 5px 0;
}
.kontakt__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }

.kontakt__mapa {
    border-radius: 16px; overflow: hidden; line-height: 0;
    border: 1px solid rgba(255,255,255,.2);
}
.kontakt__mapa iframe { width: 100%; height: 340px; border: 0; }

@media (max-width: 900px) {
    .kontakt { padding: 56px 24px; }
    .kontakt__title { font-size: 34px; }
    .kontakt__grid { grid-template-columns: 1fr; }
}

/* --- PROSE ---------------------------------------------------------------- */

/* .prose siedzi wewnatrz .sec > .sec__inner (patrz default.html.twig),
   wiec tlo i padding zewnetrzny daje sekcja. Tu tylko szerokosc kolumny tekstu. */
.prose { max-width: 760px; margin: 0 auto; }
.prose > h1:first-child { margin-top: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; }
.prose th { color: var(--text); font-weight: 600; }
.prose td { color: var(--text-muted); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; }
.sec--jasna .prose p, .sec--jasna .prose li, .sec--jasna .prose td { color: var(--ink-muted); }
.sec--jasna .prose strong, .sec--jasna .prose th { color: var(--ink); }
.sec--jasna .prose a { color: var(--cta); }
.prose h1 { font-size: 52px; margin-bottom: .4em; }
.prose h2 { font-size: 28px; margin: 1.8em 0 .5em; }
.prose p, .prose li { color: var(--text-muted); line-height: 1.7; }
.prose strong { color: var(--text); }
.prose a { color: var(--accent); text-decoration: underline; }

/* --- FOOTER (jedna linia) ------------------------------------------------- */

.footer {
    background: var(--bg-deep);
    color: color-mix(in srgb, var(--text) 60%, transparent);
}
.footer__inner {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 24px 56px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;          /* logo i tekst obok siebie, bez rozpychania */
}

/* logo po lewej */
.footer__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}
.footer__logo {
    width: auto;
    display: block;
    opacity: .9;
    transition: opacity .18s;
}
.footer__brand:hover .footer__logo { opacity: 1; }

.footer__nazwa {
    font-family: var(--font-head);
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text);
}

/* wszystko w jednym wierszu po prawej */
.footer__linia {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: 12.5px;
    margin-left: auto;   /* dosuwa do prawej, ale bez rozpychania */
}
.footer__linia > a {
    color: color-mix(in srgb, var(--text) 68%, transparent);
    font-weight: 600;
    white-space: nowrap;
    transition: color .18s;
}
.footer__linia > a:hover { color: var(--accent); }

.footer__copy {
    color: color-mix(in srgb, var(--text) 42%, transparent);
    font-size: 12px;
    padding-left: 18px;
    border-left: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
}
.footer__copy a {
    color: color-mix(in srgb, var(--text) 60%, transparent);
    font-weight: 600;
    transition: color .18s;
}
.footer__copy a:hover {
    color: var(--accent);
    text-decoration: underline;
}

@media (max-width: 900px) {
    .footer__inner {
        padding: 26px 24px;
        flex-direction: column;
        gap: 18px;
    }
    .footer__linia {
        justify-content: center;
        gap: 14px;
    }
    .footer__copy {
        padding-left: 0;
        border-left: 0;
        padding-top: 14px;
        border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
        width: 100%;
        text-align: center;
    }
}


/* ==========================================================================
   KARTY (szkoła / wypożyczalnia)
   ========================================================================== */

.karty__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.karta {
    background: #fff;
    border-radius: 18px;
    padding: 34px;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 8%, transparent);
    display: flex; flex-direction: column;
    color: var(--ink);
}
.karta__icon { display: inline-flex; color: var(--cta); margin-bottom: 18px; }
.karta__title { font-size: 26px; margin: 0 0 10px; letter-spacing: .5px; }
.karta__desc {
    font-size: 15px; line-height: 1.6;
    color: var(--ink-muted);
    margin: 0 0 18px;
}
.karta__tagi { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.karta__tag {
    background: var(--surface); color: var(--cta);
    padding: 8px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 700;
}
.karta__wyroznik {
    background: color-mix(in srgb, var(--highlight) 14%, transparent);
    border-left: 3px solid var(--highlight);
    padding: 12px 16px; margin: 0 0 22px;
    font-size: 13.5px; font-weight: 700;
    color: var(--ink);
    border-radius: 0 8px 8px 0;
}
.karta__cta {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 22px; border-radius: 10px;
    font-weight: 800; font-size: 14px;
    color: #fff;
    transition: filter .18s, transform .18s;
}
.karta__cta--niebieski { background: var(--cta); }
.karta__cta--ciemny    { background: var(--bg); }
.karta__cta:hover { filter: brightness(1.15); transform: translateX(2px); }

@media (max-width: 860px) { .karty__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   REZERWACJA (gradient + biały formularz)
   ========================================================================== */

.rez {
    padding: 74px 56px;
    background: linear-gradient(135deg, var(--cta) 0%, var(--cta-dark) 100%);
    color: #fff;
}
.rez__inner {
    max-width: var(--content-max); margin: 0 auto;
    display: grid; grid-template-columns: .85fr 1.15fr;
    gap: 44px; align-items: stretch;
}
.rez__left { display: flex; flex-direction: column; justify-content: space-between; }
.rez .eyebrow { color: rgba(255,255,255,.7); margin-bottom: 14px; }
.rez__title { font-size: 52px; line-height: .95; margin: 0 0 16px; }
.rez__lead {
    font-size: 16px; line-height: 1.6;
    color: rgba(255,255,255,.9);
    margin: 0 0 28px; max-width: 360px;
}
.rez__kontakty { display: flex; flex-direction: column; gap: 14px; }
.rez__kontakt { display: flex; align-items: center; gap: 12px; }
.rez__ikona {
    width: 40px; height: 40px; flex: none;
    border-radius: 10px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.14);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    transition: background .18s, transform .18s;
}
.rez__ikona svg { display: block; }
.rez__kontakt:hover .rez__ikona {
    background: rgba(255,255,255,.28);
    transform: scale(1.05);
}
.rez__klabel {
    font-size: 11px; color: rgba(255,255,255,.6);
    text-transform: uppercase; letter-spacing: 1px;
}
.rez__kval { font-weight: 800; font-size: 16px; }

/* WhatsApp — kafelek w barwach marki, reszta wiersza bez zmian */
.rez__kontakt--wa .rez__ikona {
    background: #25d366;
    border-color: #25d366;
    color: #0a2e15;
}
.rez__kontakt--wa:hover .rez__ikona {
    background: #1ebe57;
    border-color: #1ebe57;
}
.rez__kontakt--wa .rez__klabel { color: #7fe8ac; }

/* --- formularz (biała karta) --- */
.rezform {
    background: #fff;
    border-radius: 18px;
    padding: 32px;
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(6,20,45,.35);
}
.rezform__label {
    display: block;
    font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--ink-muted);
    margin-bottom: 7px;
}
.rezform__input {
    width: 100%;
    background: var(--surface);
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 15px; font-weight: 600;
    font-family: var(--font-body);
    color: var(--ink);
    transition: border-color .18s;
}
.rezform__input:focus { outline: none; border-color: var(--cta); }

.rezform__pokoje { display: flex; gap: 9px; margin-bottom: 16px; }
.rezform__pokoj { flex: 1; cursor: pointer; }
.rezform__pokoj input { position: absolute; opacity: 0; pointer-events: none; }
.rezform__pokoj span {
    display: block; text-align: center;
    border: 1.5px solid #dbe3ee;
    border-radius: 10px;
    padding: 11px 6px;
    font-size: 13px; font-weight: 700;
    color: var(--ink-muted);
    transition: all .18s;
}
.rezform__pokoj input:checked + span {
    border-color: var(--cta);
    background: color-mix(in srgb, var(--cta) 8%, transparent);
    color: var(--cta);
    font-weight: 800;
}

.rezform__cena {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.rezform__cena-label {
    font-size: 12px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.rezform__cena-note {
    font-size: 12px; color: var(--accent);
    font-weight: 700; margin-top: 2px;
}
.rezform__cena-kwota {
    font-family: var(--font-head);
    font-size: 30px; color: var(--accent);
}

.rezform__submit {
    width: 100%;
    background: var(--cta); color: #fff;
    border: 0; cursor: pointer;
    text-align: center; padding: 17px;
    border-radius: 12px;
    font-family: var(--font-body);
    font-weight: 800; font-size: 15px;
    letter-spacing: .5px;
    transition: filter .18s;
}
.rezform__submit:hover { filter: brightness(1.1); }

.rezform__note {
    font-size: 11.5px; color: var(--text-muted);
    text-align: center; margin: 12px 0 0;
}

.rez__mapa {
    max-width: var(--content-max); margin: 34px auto 0;
    border-radius: 16px; overflow: hidden; line-height: 0;
    border: 1px solid rgba(255,255,255,.2);
}
.rez__mapa iframe { width: 100%; height: 340px; border: 0; }

@media (max-width: 900px) {
    .rez { padding: 56px 24px; }
    .rez__inner { grid-template-columns: 1fr; gap: 34px; }
    .rez__title { font-size: 36px; }
    .rezform__pokoje { flex-direction: column; }
}

/* --- SPLIT bez obrazu: pełna szerokość tekstu --- */
.split--brak { grid-template-columns: 1fr; }
.split--brak .split__text { max-width: var(--content-max); margin: 0 auto; }

/* ==========================================================================
   BANNER (zdjęcie w tle, gradient poziomy)
   ========================================================================== */

.banner {
    position: relative;
    padding: 74px 56px;
    overflow: hidden;
    max-width: var(--shell-max);
    margin-inline: auto;
}
.banner__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.banner__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--bg) 95%, transparent) 0%,
        color-mix(in srgb, var(--bg) 70%, transparent) 55%,
        color-mix(in srgb, var(--bg) 40%, transparent) 100%);
}
.banner__inner { position: relative; max-width: 560px; }
.banner__title {
    font-size: 52px; line-height: .95;
    margin: 0 0 18px;
}
.banner__body {
    font-size: 16px; line-height: 1.6;
    color: color-mix(in srgb, var(--text) 85%, transparent);
    margin-bottom: 24px;
}
.banner__body p { margin: 0 0 1em; }

@media (max-width: 900px) {
    .banner { padding: 56px 24px; }
    .banner__title { font-size: 34px; }
}

/* ==========================================================================
   PEŁNA SZEROKOŚĆ — tła na cały ekran, treść wyśrodkowana
   Bloki z .sec__inner robią to same. Split/banner/staty mają
   max-width: var(--shell-max), więc trzymają się środka.
   ========================================================================== */

.layout-pelna .page { box-shadow: none; }

/* sekcje: tło pełne (bo .sec nie ma max-width), treść w .sec__inner */
.layout-pelna .sec,
.layout-pelna .rez { padding-inline: max(56px, calc((100% - var(--shell-max)) / 2)); }

@media (max-width: 900px) {
    .layout-pelna .sec,
    .layout-pelna .rez { padding-inline: 24px; }
}

/* ==========================================================================
   TAGI — dwa style (wypełnione / obwódka)
   ========================================================================== */

.tagi { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 24px; }

.tag {
    padding: 9px 15px;
    border-radius: 8px;
    font-size: 13px; font-weight: 700;
}
/* wypełnione — restauracja */
.tag--pelne {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}
/* obwódka — narciarnia */
.tag--obwodka {
    border: 1px solid color-mix(in srgb, var(--text) 35%, transparent);
    color: var(--text);
    padding: 10px 16px;
    font-weight: 600;
}

/* ==========================================================================
   OCENA — karta z dużą cyfrą
   ========================================================================== */

.split__akcje {
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.ocenabox {
    display: flex; align-items: center; gap: 11px;
    background: color-mix(in srgb, #fff 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 12px;
    padding: 11px 16px;
}
.ocenabox__num {
    font-family: var(--font-head);
    font-size: 26px; line-height: 1;
    color: var(--highlight);
}
.ocenabox__gwiazdki {
    color: var(--highlight);
    font-size: 13px; letter-spacing: 2px;
}
.ocenabox__src {
    font-size: 11px; font-weight: 600;
    color: color-mix(in srgb, var(--text) 55%, transparent);
    margin-top: 1px;
}

/* przycisk inline (nie na całą szerokość) */
.btn--inline {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 22px;
    font-size: 14px;
    width: auto;
}

/* ==========================================================================
   RABAT — karta z dużą wartością
   ========================================================================== */

.rabat {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff3e0;
    border: 1px solid var(--highlight);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
    align-self: flex-start;
}
.rabat__num {
    font-family: var(--font-head);
    font-size: 24px; line-height: 1;
    color: var(--highlight);
}
.rabat__opis {
    font-size: 13px; font-weight: 700;
    color: #8a6a1f;
    line-height: 1.4;
}

/* --- formularz (biała karta) --- */
.rezform {
    background: #fff;
    border-radius: 18px;
    padding: 32px;
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(6,20,45,.35);
}
.rezform__row2 {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 14px; margin-bottom: 16px;
}
.rezform__row1 { margin-bottom: 16px; }
.rezform__label {
    display: block;
    font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--ink-muted);
    margin-bottom: 7px;
}
.rezform__input {
    width: 100%;
    background: var(--surface);
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 15px; font-weight: 600;
    font-family: var(--font-body);
    color: var(--ink);
    transition: border-color .18s;
}
.rezform__input:focus { outline: none; border-color: var(--cta); }

.rezform__pokoje { display: flex; gap: 9px; margin-bottom: 16px; }
.rezform__pokoj { flex: 1; cursor: pointer; }
.rezform__pokoj input { position: absolute; opacity: 0; pointer-events: none; }
.rezform__pokoj span {
    display: block; text-align: center;
    border: 1.5px solid #dbe3ee;
    border-radius: 10px;
    padding: 11px 6px;
    font-size: 13px; font-weight: 700;
    color: var(--ink-muted);
    transition: all .18s;
}
.rezform__pokoj input:checked + span {
    border-color: var(--cta);
    background: color-mix(in srgb, var(--cta) 8%, transparent);
    color: var(--cta);
    font-weight: 800;
}

.rezform__cena {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.rezform__cena-label {
    font-size: 12px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.rezform__cena-note {
    font-size: 12px; color: var(--accent);
    font-weight: 700; margin-top: 2px;
}
.rezform__cena-kwota {
    font-family: var(--font-head);
    font-size: 30px; color: var(--accent);
}

.rezform__submit {
    width: 100%;
    background: var(--cta); color: #fff;
    border: 0; cursor: pointer;
    text-align: center; padding: 17px;
    border-radius: 12px;
    font-family: var(--font-body);
    font-weight: 800; font-size: 15px;
    letter-spacing: .5px;
    transition: filter .18s;
}
.rezform__submit:hover { filter: brightness(1.1); }

.rezform__note {
    font-size: 11.5px; color: var(--text-muted);
    text-align: center; margin: 12px 0 0;
}

.rez__mapa {
    max-width: var(--content-max); margin: 34px auto 0;
    border-radius: 16px; overflow: hidden; line-height: 0;
    border: 1px solid rgba(255,255,255,.2);
}
.rez__mapa iframe { width: 100%; height: 340px; border: 0; }

@media (max-width: 900px) {
    .rez { padding: 56px 24px; }
    .rez__inner { grid-template-columns: 1fr; gap: 34px; }
    .rez__title { font-size: 36px; }
    .rezform__pokoje { flex-direction: column; }
}

/* --- SPLIT bez obrazu: pełna szerokość tekstu --- */
.split--brak { grid-template-columns: 1fr; }
.split--brak .split__text { max-width: var(--content-max); margin: 0 auto; }

/* ==========================================================================
   BANNER (zdjęcie w tle, gradient poziomy)
   ========================================================================== */

.banner {
    position: relative;
    padding: 74px 56px;
    overflow: hidden;
    max-width: var(--shell-max);
    margin-inline: auto;
}
.banner__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.banner__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--bg) 95%, transparent) 0%,
        color-mix(in srgb, var(--bg) 70%, transparent) 55%,
        color-mix(in srgb, var(--bg) 40%, transparent) 100%);
}
.banner__inner { position: relative; max-width: 560px; }
.banner__title {
    font-size: 52px; line-height: .95;
    margin: 0 0 18px;
}
.banner__body {
    font-size: 16px; line-height: 1.6;
    color: color-mix(in srgb, var(--text) 85%, transparent);
    margin-bottom: 24px;
}
.banner__body p { margin: 0 0 1em; }

@media (max-width: 900px) {
    .banner { padding: 56px 24px; }
    .banner__title { font-size: 34px; }
}

/* ==========================================================================
   PEŁNA SZEROKOŚĆ — tła na cały ekran, treść wyśrodkowana
   Bloki z .sec__inner robią to same. Split/banner/staty mają
   max-width: var(--shell-max), więc trzymają się środka.
   ========================================================================== */

.layout-pelna .page { box-shadow: none; }

/* sekcje: tło pełne (bo .sec nie ma max-width), treść w .sec__inner */
.layout-pelna .sec,
.layout-pelna .rez { padding-inline: max(56px, calc((100% - var(--shell-max)) / 2)); }

@media (max-width: 900px) {
    .layout-pelna .sec,
    .layout-pelna .rez { padding-inline: 24px; }
}

/* ==========================================================================
   TAGI — dwa style (wypełnione / obwódka)
   ========================================================================== */

.tagi { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 24px; }

.tag {
    padding: 9px 15px;
    border-radius: 8px;
    font-size: 13px; font-weight: 700;
}
/* wypełnione — restauracja */
.tag--pelne {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}
/* obwódka — narciarnia */
.tag--obwodka {
    border: 1px solid color-mix(in srgb, var(--text) 35%, transparent);
    color: var(--text);
    padding: 10px 16px;
    font-weight: 600;
}

/* ==========================================================================
   OCENA — karta z dużą cyfrą
   ========================================================================== */

.split__akcje {
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.ocenabox {
    display: flex; align-items: center; gap: 11px;
    background: color-mix(in srgb, #fff 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 12px;
    padding: 11px 16px;
}
.ocenabox__num {
    font-family: var(--font-head);
    font-size: 26px; line-height: 1;
    color: var(--highlight);
}
.ocenabox__gwiazdki {
    color: var(--highlight);
    font-size: 13px; letter-spacing: 2px;
}
.ocenabox__src {
    font-size: 11px; font-weight: 600;
    color: color-mix(in srgb, var(--text) 55%, transparent);
    margin-top: 1px;
}

/* przycisk inline (nie na całą szerokość) */
.btn--inline {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 22px;
    font-size: 14px;
    width: auto;
}

/* ==========================================================================
   RABAT — karta z dużą wartością
   ========================================================================== */

.rabat {
    display: inline-flex; align-items: center; gap: 10px;
    background: #fff3e0;
    border: 1px solid var(--highlight);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 24px;
    align-self: flex-start;
}
.rabat__num {
    font-family: var(--font-head);
    font-size: 24px; line-height: 1;
    color: var(--highlight);
}
.rabat__opis {
    font-size: 13px; font-weight: 700;
    color: #8a6a1f;
    line-height: 1.4;
}

/* ==========================================================================
   FOOTER — podpis wykonawcy
   ========================================================================== */

.footer__credits {
    font-size: 12.5px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--text) 50%, transparent);
    flex: 1;
    min-width: 0;
}
.footer__credits a {
    color: color-mix(in srgb, var(--text) 72%, transparent);
    font-weight: 600;
    transition: color .18s;
}
.footer__credits a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* ==========================================================================
   FORMULARZ — dopasowany do realnej struktury wtyczki Form:
   .form-field > .form-label + .form-data > .form-input-wrapper > input
   ========================================================================== */

.rezform {
    background: #fff;
    border-radius: 18px;
    padding: 32px;
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(6,20,45,.35);
}

.rezform .form-field { margin-bottom: 16px; }

.rezform .form-label label,
.rezform label.inline {
    display: block;
    font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--ink-muted);
    margin-bottom: 7px;
}
.rezform .required { color: #e05252; margin-left: 2px; }

.rezform input[type="text"],
.rezform input[type="email"],
.rezform input[type="tel"],
.rezform input[type="date"],
.rezform input[type="number"]:not(.stepper__input),
.rezform textarea {
    width: 100%;
    background: var(--surface);
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 15px; font-weight: 600;
    font-family: var(--font-body);
    color: var(--ink);
    transition: border-color .18s;
}
.rezform input:focus,
.rezform textarea:focus { outline: none; border-color: var(--cta); }
.rezform textarea { resize: vertical; min-height: 84px; font-weight: 400; }

/* --- układ 2-kolumnowy: grid na formularzu ---
   Pary: przyjazd|wyjazd, dorośli|dzieci, e-mail|telefon.
   Reszta (pokój, imię, uwagi, RODO) na pełną szerokość. --- */

.rezform form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

/* domyślnie każde pole zajmuje obie kolumny */
.rezform .form-field { grid-column: 1 / -1; margin-bottom: 16px; }

/* te idą parami — po jednej kolumnie */
.rezform .form-field:has(input[name="data[checkin]"]),
.rezform .form-field:has(input[name="checkin"]),
.rezform .form-field:has(input[name="data[checkout]"]),
.rezform .form-field:has(input[name="checkout"]),
.rezform .form-field:has(input[name="data[children]"]),
.rezform .form-field:has(input[name="children"]),
.rezform .form-field:has(input[name="data[maluchy]"]),
.rezform .form-field:has(input[name="maluchy"]),
.rezform .form-field:has(input[name="data[email]"]),
.rezform .form-field:has(input[name="email"]),
.rezform .form-field:has(input[name="data[telefon]"]),
.rezform .form-field:has(input[name="telefon"]) {
    grid-column: span 1;
}

/* dorośli — pełna szerokość, nad parą pól z dziećmi */
.rezform .form-field:has(input[name="data[adults]"]),
.rezform .form-field:has(input[name="adults"]) { grid-column: 1 / -1; }

/* elementy spoza .form-field też na pełną szerokość
   (override checkboxa renderuje goły .rezform__zgoda, bez .form-field) */
.rezform .rezform__zgoda,
.rezform form > input[type="hidden"],
.rezform .kalk,
.rezform .kalk__note,
.rezform .rezform__buttons,
.rezform .rezform__note,
.rezform .rezform__msg,
.rezform .form-honeybear,
/* kontenery przycisków z szablonu pluginu Form — BEZ TEGO przycisk
   siedział w jednej kolumnie gridu i zajmował pół szerokości */
.rezform .buttons,
.rezform .form-buttons,
.rezform .form-field:has(button[type="submit"]),
.rezform .form-field:has(input[type="submit"]) {
    grid-column: 1 / -1;
}

/* --- fallback dla przeglądarek bez :has() --- */
@supports not selector(:has(*)) {
    .rezform form { display: block; }
    .rezform .form-field { display: block; width: 100%; }
}

/* --- radio "pokój" jako przyciski --- */
.rezform .form-data[data-grav-field="radio"] {
    display: flex; gap: 9px;
}
.rezform .radio { flex: 1; position: relative; }
.rezform .radio input[type="radio"] {
    position: absolute; opacity: 0;
    width: 100%; height: 100%;
    margin: 0; cursor: pointer; z-index: 1;
}
.rezform .radio label {
    display: block !important;
    text-align: center;
    border: 1.5px solid #dbe3ee;
    border-radius: 10px;
    padding: 12px 8px;
    font-size: 13px; font-weight: 700;
    color: var(--ink-muted);
    text-transform: none; letter-spacing: 0;
    margin: 0;
    cursor: pointer;
    transition: all .18s;
}
.rezform .radio input[type="radio"]:checked + label {
    border-color: var(--cta);
    background: color-mix(in srgb, var(--cta) 8%, transparent);
    color: var(--cta);
    font-weight: 800;
}

/* --- checkbox RODO --- */
.rezform .form-data[data-grav-field="checkbox"] .form-input-wrapper {
    display: flex; align-items: flex-start; gap: 10px;
}
.rezform input[type="checkbox"] {
    width: auto; flex: none;
    margin: 3px 0 0;
    accent-color: var(--cta);
}
.rezform .form-data[data-grav-field="checkbox"] label {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--ink-muted);
    line-height: 1.45;
    margin: 0 !important;
    cursor: pointer;
}
/* pusta etykieta nad checkboxem - ukryj */
.rezform .form-field:has([data-grav-field="checkbox"]) .form-label { display: none; }

/* --- honeypot --- */
.rezform .form-honeybear { display: none !important; }

/* --- przycisk --- */
.rezform__buttons { margin-top: 8px; }
.rezform__submit {
    width: 100%;
    background: var(--cta); color: #fff;
    border: 0; cursor: pointer;
    padding: 17px;
    border-radius: 12px;
    font-family: var(--font-body);
    font-weight: 800; font-size: 15px;
    letter-spacing: .5px;
    transition: filter .18s;
}
.rezform__submit:hover { filter: brightness(1.1); }

.rezform__note {
    font-size: 11.5px;
    color: var(--ink-muted);
    text-align: center;
    margin: 12px 0 0;
    line-height: 1.45;
}

/* --- komunikaty --- */
.rezform__msg {
    padding: 14px 16px; border-radius: 10px;
    margin-bottom: 18px; font-size: 14px; line-height: 1.5;
}
.rezform__msg--success { background: #e6f7ea; color: #1a6b32; }
.rezform__msg--error   { background: #fdeaea; color: #a32020; }
.rezform__msg ul { margin: 0; padding-left: 18px; }

.rezform__error {
    background: #fdeaea; color: #a32020;
    padding: 16px; border-radius: 10px;
    font-size: 13.5px; line-height: 1.6;
}
.rezform__error code {
    background: rgba(0,0,0,.08);
    padding: 2px 6px; border-radius: 4px;
    font-size: 12.5px;
}

@media (max-width: 560px) {
    .rezform { padding: 24px; }
    .rezform form { grid-template-columns: 1fr; }
    .rezform .form-field { grid-column: 1 / -1 !important; }
    .rezform .form-data[data-grav-field="radio"] { flex-direction: column; }
}

/* ==========================================================================
   KALKULATOR CENY
   ========================================================================== */

.kalk {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
    background: var(--bg);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 4px 0 8px;
    transition: background .25s;
}
.kalk__label {
    font-size: 12px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.kalk__opis {
    font-size: 12px; color: var(--text-muted);
    font-weight: 600; margin-top: 3px;
    line-height: 1.4;
}
.kalk.is-active .kalk__opis { color: var(--accent); }
.kalk__kwota {
    font-family: var(--font-head);
    font-size: 30px;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color .25s;
}
.kalk.is-active .kalk__kwota { color: var(--accent); }

.kalk__note {
    font-size: 11.5px;
    color: var(--ink-muted);
    text-align: center;
    margin: 0 0 14px;
    line-height: 1.4;
}

@media (max-width: 480px) {
    .kalk { flex-direction: column; align-items: flex-start; gap: 8px; }
    .kalk__kwota { font-size: 26px; }
}

/* ==========================================================================
   KOTWICE — płynne przewijanie z offsetem pod sticky nav
   ========================================================================== */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Sticky nav ma ~68px — sekcja musi się zatrzymać PONIŻEJ niego,
   inaczej nagłówek chowa się pod paskiem. */
[id="pokoje"],
[id="restauracja"],
[id="galeria"],
[id="cennik"],
[id="rezerwacja"],
[id="udogodnienia"],
[id="opinie"] {
    scroll-margin-top: 76px;
}

/* ==========================================================================
   PAKIETY — karty ofert
   ========================================================================== */

.pakiety__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    align-items: stretch;
}

/* Przy jednej ofercie auto-fit rozciągnąłby kartę na całą szerokość sekcji
   i wyglądałaby jak baner. Ograniczamy i centrujemy. */
.pakiety__grid:has(.pakiet:only-child) {
    max-width: 560px;
    margin: 0 auto;
}

.pakiet {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--bg-alt);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: 18px;
    padding: 30px 26px;
    transition: transform .2s, border-color .2s;
}
.pakiet:hover { transform: translateY(-4px); border-color: var(--accent); }

.pakiet--wyroz {
    border-color: var(--highlight);
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--highlight) 8%, var(--bg-alt)) 0%,
        var(--bg-alt) 60%
    );
}

.pakiet__badge {
    position: absolute; top: -10px; right: 22px;
    background: var(--highlight); color: var(--bg-deep);
    font-size: 11px; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 5px 12px; border-radius: 6px;
}

.pakiet__nazwa {
    font-size: 24px; margin: 0 0 6px;
    letter-spacing: .5px;
}
.pakiet__termin {
    font-size: 12.5px; font-weight: 600;
    color: color-mix(in srgb, var(--text) 55%, transparent);
    margin-bottom: 18px;
}

.pakiet__cena {
    display: flex; align-items: baseline; gap: 6px;
    padding: 14px 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    margin-bottom: 18px;
}
.pakiet__od {
    font-size: 12px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px;
}
.pakiet__kwota {
    font-family: var(--font-head);
    font-size: 38px; line-height: 1;
    color: var(--accent);
}
.pakiet--wyroz .pakiet__kwota { color: var(--highlight); }
.pakiet__unit {
    font-size: 12.5px; font-weight: 600;
    color: var(--text-muted);
}

.pakiet__opis {
    font-size: 14px; line-height: 1.55;
    color: color-mix(in srgb, var(--text) 75%, transparent);
    margin: 0 0 16px;
}

.pakiet__lista { list-style: none; padding: 0; margin: 0 0 22px; }
.pakiet__lista li {
    position: relative;
    padding: 7px 0 7px 24px;
    font-size: 13.5px;
    color: color-mix(in srgb, var(--text) 80%, transparent);
    line-height: 1.45;
}
.pakiet__lista li::before {
    content: '✓';
    position: absolute; left: 0; top: 7px;
    color: var(--accent);
    font-weight: 800;
}
.pakiet--wyroz .pakiet__lista li::before { color: var(--highlight); }

.pakiet__cta {
    margin-top: auto; align-self: stretch;
    text-align: center;
    background: color-mix(in srgb, var(--text) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
    color: var(--text);
    padding: 13px 20px; border-radius: 10px;
    font-weight: 800; font-size: 14px;
    transition: background .18s, border-color .18s;
}
.pakiet__cta:hover {
    background: var(--cta);
    border-color: var(--cta);
    color: #fff;
}
.pakiet--wyroz .pakiet__cta {
    background: var(--highlight);
    border-color: var(--highlight);
    color: var(--bg-deep);
}
.pakiet--wyroz .pakiet__cta:hover { filter: brightness(1.1); }

/* ==========================================================================
   DOPŁATY — lista z kwotami
   ========================================================================== */

.doplaty {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.doplata {
    display: flex; justify-content: space-between; align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: var(--bg-alt);
}
.doplata:nth-child(even) {
    background: color-mix(in srgb, var(--bg-alt) 55%, var(--bg-deep));
}
.doplata + .doplata {
    border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
}
.doplata__left { display: flex; flex-direction: column; gap: 3px; }
.doplata__tytul { font-size: 15px; font-weight: 800; }
.doplata__opis {
    font-size: 12.5px;
    color: color-mix(in srgb, var(--text) 55%, transparent);
}
.doplata__kwota {
    font-family: var(--font-head);
    font-size: 22px;
    color: var(--highlight);
    white-space: nowrap;
}

@media (max-width: 560px) {
    .doplata { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ==========================================================================
   FAQ — rozwijane (bez JS)
   ========================================================================== */

.faq {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.faq__item { background: var(--bg-alt); }
.faq__item + .faq__item {
    border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
}
.faq__q {
    padding: 20px 24px;
    font-size: 15px; font-weight: 800;
    cursor: pointer;
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
    transition: color .18s;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
    content: '+';
    font-family: var(--font-head);
    font-size: 24px; line-height: 1;
    color: var(--accent);
    flex: none;
    transition: transform .2s;
}
.faq__item[open] .faq__q { color: var(--accent); }
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { color: var(--accent); }

.faq__a {
    padding: 0 24px 22px;
    font-size: 14px; line-height: 1.65;
    color: color-mix(in srgb, var(--text) 75%, transparent);
}

/* --- komunikaty formularza --- */
.rezform__msg {
    padding: 14px 16px; border-radius: 10px;
    margin-bottom: 16px; font-size: 14px; line-height: 1.5;
}
.rezform__msg--success { background: #e6f7ea; color: #1a6b32; }
.rezform__msg--error   { background: #fdeaea; color: #a32020; }
.rezform__msg ul { margin: 0; padding-left: 18px; }
.rezform__buttons { margin-top: 6px; }

/* ==========================================================================
   GALERIA PEŁNA — filtry + siatka
   ========================================================================== */

.galp__pusto {
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
    background: var(--bg-alt);
    border-radius: 14px;
}

/* --- filtry --- */
.galp__filtry {
    display: flex; flex-wrap: wrap; gap: 9px;
    justify-content: center;
    margin-bottom: 32px;
}
.galp__filtr {
    display: inline-flex; align-items: center; gap: 7px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    color: var(--text-muted);
    padding: 9px 16px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: all .18s;
}
.galp__filtr:hover {
    border-color: var(--accent);
    color: var(--text);
}
.galp__filtr.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-deep);
}
.galp__licznik {
    font-size: 11px;
    opacity: .65;
    font-weight: 800;
}
.sec--jasna .galp__filtr { border-color: #d5dde8; color: var(--ink-muted); }
.sec--jasna .galp__filtr.is-active { color: #fff; background: var(--cta); border-color: var(--cta); }

/* --- siatka --- */
.galp__grid { display: grid; gap: 14px; }
.galp__grid--3 { grid-template-columns: repeat(3, 1fr); }
.galp__grid--4 { grid-template-columns: repeat(4, 1fr); }
.galp__grid--5 { grid-template-columns: repeat(5, 1fr); }

.galp__item {
    margin: 0;
    animation: galpIn .3s ease both;
}
.galp__item.is-ukryty { display: none; }

@keyframes galpIn {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .galp__item { animation: none; }
}

.galp__link {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    line-height: 0;
}
.galp__link img {
    width: 100%; height: 200px;
    object-fit: cover;
    transition: transform .35s;
}
.galp__link:hover img { transform: scale(1.06); }

.galp__overlay {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .22s;
}
.galp__link:hover .galp__overlay { opacity: 1; }

.galp__zoom {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg-deep);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 300;
    line-height: 1;
}

.galp__podpis {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
    line-height: 1.35;
}
.sec--jasna .galp__podpis { color: var(--ink-muted); }

@media (max-width: 1000px) {
    .galp__grid--4, .galp__grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
    .galp__grid { grid-template-columns: repeat(2, 1fr) !important; }
    .galp__link img { height: 140px; }
    .galp__filtry { justify-content: flex-start; }
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */

.lb {
    position: fixed; inset: 0;
    z-index: 100;
    background: rgba(6, 14, 26, .95);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 60px 70px;
}
.lb[hidden] { display: none; }

.lb__figure {
    margin: 0;
    max-width: 100%; max-height: 100%;
    display: flex; flex-direction: column;
    align-items: center; gap: 14px;
}
.lb__img {
    max-width: 100%;
    max-height: calc(100vh - 160px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.lb__podpis {
    color: #fff;
    font-size: 14px; font-weight: 600;
    text-align: center;
}

.lb__zamknij, .lb__prev, .lb__next {
    position: absolute;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s, transform .18s;
    font-family: var(--font-body);
}
.lb__zamknij:hover, .lb__prev:hover, .lb__next:hover {
    background: var(--accent);
    color: var(--bg-deep);
    border-color: var(--accent);
}

.lb__zamknij {
    top: 20px; right: 20px;
    width: 44px; height: 44px;
    font-size: 26px; line-height: 1;
}
.lb__prev, .lb__next {
    top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px;
    font-size: 34px; line-height: 1;
}
.lb__prev { left: 20px; }
.lb__next { right: 20px; }
.lb__prev:hover, .lb__next:hover { transform: translateY(-50%) scale(1.06); }

.lb__licznik {
    position: absolute;
    bottom: 22px; left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.7);
    font-size: 13px; font-weight: 700;
    letter-spacing: 1px;
}

@media (max-width: 700px) {
    .lb { padding: 60px 12px; }
    .lb__prev, .lb__next {
        width: 42px; height: 42px;
        font-size: 26px;
    }
    .lb__prev { left: 8px; }
    .lb__next { right: 8px; }
    .lb__img { max-height: calc(100vh - 180px); }
}

/* ==========================================================================
   WIRTUALNY SPACER
   ========================================================================== */

.spacer__ramka {
    border-radius: 16px;
    overflow: hidden;
    line-height: 0;
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.spacer__ramka iframe {
    width: 100%;
    border: 0;
    display: block;
}
.spacer__autor {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    margin: 14px 0 0;
}
.spacer__autor a {
    color: var(--accent);
    font-weight: 700;
}
.spacer__autor a:hover { text-decoration: underline; }

/* --- legenda --- */
.legenda {
    margin-top: 28px;
    background: var(--bg-alt);
    border-radius: 16px;
    padding: 24px 28px;
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.legenda__tytul {
    font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 2px;
    color: var(--accent);
    margin-bottom: 16px;
}
.legenda__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px 20px;
}
.legenda__item {
    display: flex; align-items: center; gap: 10px;
    font-size: 13.5px;
}
.legenda__kod {
    flex: none;
    min-width: 34px;
    text-align: center;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent);
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 12px;
}
.legenda__opis { color: var(--text-muted); }

@media (max-width: 600px) {
    .legenda { padding: 20px; }
    .legenda__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   STEPPER (− / +) — wartości 1:1 z koncepcji
   ========================================================================== */

.stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 9px 12px;
    transition: border-color .18s;
}
.stepper:focus-within { border-color: var(--cta); }

/* natywny input — ukryty, ale nadal w formularzu (wysyłka + walidacja) */
.stepper__input {
    position: absolute !important;
    opacity: 0;
    width: 1px; height: 1px;
    padding: 0 !important;
    border: 0 !important;
    pointer-events: none;
}

.stepper__btn {
    width: 30px; height: 30px;
    flex: none;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
    transition: filter .16s, opacity .16s;
}

.stepper__btn--minus {
    background: #fff;
    color: var(--cta);
    box-shadow: 0 1px 3px rgba(13, 24, 38, .1);
}
.stepper__btn--plus {
    background: var(--cta);
    color: #fff;
}

.stepper__btn:hover:not(:disabled) { filter: brightness(1.08); }
.stepper__btn:active:not(:disabled) { transform: scale(.94); }

.stepper__btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.stepper__val {
    font-weight: 800;
    font-size: 16px;
    color: var(--ink);
    min-width: 24px;
    text-align: center;
    user-select: none;
}

/* ==========================================================================
   BANER COOKIES
   ========================================================================== */

.ck {
    position: fixed;
    left: 20px; right: 20px; bottom: 20px;
    z-index: 90;
    display: flex;
    justify-content: center;
    animation: ckIn .3s ease both;
}
.ck[hidden] { display: none; }

@keyframes ckIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .ck { animation: none; } }

.ck__box {
    width: 100%;
    max-width: 640px;
    background: var(--bg-alt);
    border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    border-radius: 16px;
    padding: 24px 26px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.ck__tytul {
    font-size: 22px;
    margin: 0 0 10px;
    letter-spacing: 1px;
}
.ck__tekst {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 18px;
}
.ck__tekst a {
    color: var(--accent);
    text-decoration: underline;
}

.ck__akcje {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ck__btn {
    flex: 1;
    min-width: 130px;
    padding: 12px 18px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter .18s, border-color .18s;
}
.ck__btn--akcept {
    background: var(--cta);
    color: #fff;
}
.ck__btn--akcept:hover { filter: brightness(1.1); }

.ck__btn--odrzuc,
.ck__btn--ustaw {
    background: transparent;
    border-color: color-mix(in srgb, var(--text) 25%, transparent);
    color: var(--text);
}
.ck__btn--odrzuc:hover,
.ck__btn--ustaw:hover { border-color: var(--accent); }

/* --- panel szczegółowy --- */
.ck__szczegoly[hidden] { display: none; }

.ck__kat {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    cursor: pointer;
}
.ck__kat:last-of-type { border-bottom: 0; margin-bottom: 12px; }
.ck__kat--stala { cursor: default; opacity: .65; }

.ck__kat input {
    margin-top: 3px;
    flex: none;
    accent-color: var(--cta);
    width: 17px; height: 17px;
}
.ck__kat span { display: block; }
.ck__kat strong {
    display: block;
    font-size: 14px;
    margin-bottom: 3px;
}
.ck__kat em {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.45;
}

/* --- przycisk ponownego otwarcia --- */
.ck__reopen {
    position: fixed;
    left: 20px; bottom: 20px;
    z-index: 80;
    background: var(--bg-alt);
    border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
    color: var(--text-muted);
    padding: 9px 15px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    opacity: .55;
    transition: opacity .18s, border-color .18s;
}
.ck__reopen[hidden] { display: none; }
.ck__reopen:hover {
    opacity: 1;
    border-color: var(--accent);
    color: var(--text);
}

@media (max-width: 600px) {
    .ck { left: 12px; right: 12px; bottom: 12px; }
    .ck__box { padding: 20px; }
    .ck__btn { min-width: 100%; }
    .ck__reopen { left: 12px; bottom: 12px; }
}


/* --- zgody w formularzu rezerwacji (checkbox z linkiem) --- */
.rezform__zgoda,
.rezform .form-field:has(input[type="checkbox"]) { margin: 10px 0; }
.rezform__zgoda-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}
.rezform__zgoda-label input[type="checkbox"] {
    margin-top: 3px;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: var(--cta);
    cursor: pointer;
}
.rezform__zgoda-tekst {
    font-size: 13px;
    line-height: 1.5;
    /* .rezform ma białe tło — --text-muted (jasny szary z ciemnego motywu)
       dawał tu za mały kontrast. --ink-muted jest ciemny i czytelny. */
    color: var(--ink-muted);
}
.rezform__zgoda-tekst a {
    color: var(--accent);
    text-decoration: underline;
}
.rezform__zgoda-tekst a:hover { color: var(--cta); }
.rezform__wymagane { color: var(--highlight); }


/* --- HEADER / STOPKA: padding poziomy tylko w trybie pelnoekranowym ---------
   W 'boxed' i 'szeroka' kontener .page juz zaweza i wysrodkowuje strone,
   wiec dodatkowy padding w nav/stopce wcinal je bardziej niz reszte tresci.
   Zerujemy go tam, a zostawiamy w 'pelna' (gdzie tresc dotykalaby krawedzi
   ekranu) oraz na mobile (gdzie .page zajmuje cala szerokosc). */
.layout-boxed .nav__inner,
.layout-szeroka .nav__inner,
.layout-boxed .footer__inner,
.layout-szeroka .footer__inner {
    padding-inline: 0;
}

@media (max-width: 900px) {
    .layout-boxed .nav__inner,
    .layout-szeroka .nav__inner,
    .layout-boxed .footer__inner,
    .layout-szeroka .footer__inner {
        padding-inline: 24px;
    }
}


/* --- wybór pokoju: kafelki o równej wysokości ------------------------------
   Etykiety mają różną długość ("Apartament / Pokój 1-osobowy" łamie się do
   dwóch linii), więc kafelki muszą sięgać wysokości najwyższego z nich.
   Struktura pluginu Form: .form-data[data-grav-field="radio"] > .radio > input + label */
.rezform .form-data[data-grav-field="radio"] {
    align-items: stretch;
    flex-wrap: wrap;
}
.rezform .radio {
    flex: 1 1 140px;
    display: flex;
}
.rezform .radio label {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1.3;
}

/* to samo dla trybu zewnętrznego (partial rezform-pola) */
.rezform__pokoje { align-items: stretch; flex-wrap: wrap; }
.rezform__pokoj { flex: 1 1 140px; display: flex; }
.rezform__pokoj span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1.3;
}

@media (max-width: 480px) {
    .rezform .radio,
    .rezform__pokoj { flex: 1 1 100%; }
}


/* Oferta wigilijna jest ukryta do czasu, aż kalkulator ustali, że wybrany
   termin ją obejmuje. Bez tego migała przy pustym formularzu.
   JS pokazuje ją inline (`style.display = 'block'`), co wygrywa nad tą regułą. */
.rezform__zgoda:has(input[name="wigilia"]),
.rezform .form-field:has(input[name="data[wigilia]"]),
.rezform .form-field:has(input[name="wigilia"]) { display: none; }

/* fallback: przeglądarki bez :has() — klasa nadawana przez JS w rezerwacja.html.twig */
.rezform__zgoda.js-wigilia-ukryta,
.rezform .form-field.js-wigilia-ukryta { display: none; }

/* --- karta oferty specjalnej (kolacja wigilijna) ---------------------------
   Checkbox w formularzu, ale wyglądający jak oferta, a nie jak zgoda
   formalna — ma zachęcać, nie ginąć obok RODO. */
.rezform .form-field.rezform__oferta,
.rezform__oferta {
    position: relative;
    margin: 6px 0 16px;
    padding: 16px 18px 16px 16px;
    border: 1.5px solid var(--highlight);
    border-radius: 12px;
    background: color-mix(in srgb, var(--highlight) 12%, #fff);
    transition: background .18s, border-color .18s;
}
.rezform__oferta:hover {
    background: color-mix(in srgb, var(--highlight) 20%, #fff);
}
.rezform__oferta::before {
    content: 'OFERTA ŚWIĄTECZNA';
    position: absolute;
    top: -9px; left: 14px;
    background: var(--highlight);
    color: #1b1206;
    font-size: 10px; font-weight: 800;
    letter-spacing: 1.2px;
    padding: 3px 9px;
    border-radius: 99px;
}
.rezform__oferta .rezform__zgoda-label,
.rezform__oferta label {
    align-items: flex-start;
    gap: 12px;
    margin: 0;
}
.rezform__oferta input[type="checkbox"] {
    margin-top: 2px;
    width: 19px; height: 19px;
    accent-color: var(--highlight);
    flex: 0 0 auto;
    cursor: pointer;
}
.rezform__oferta .rezform__zgoda-tekst,
.rezform__oferta label span {
    font-size: 13.5px;
    line-height: 1.55;
    /* formularz ma białe tło (.rezform), więc kolor z ciemnego motywu
       (--text) byłby tu niewidoczny — używamy --ink */
    color: var(--ink);
    font-weight: 500;
}
/* stan zaznaczony — wyraźne potwierdzenie wyboru */
.rezform__oferta:has(input:checked) {
    background: color-mix(in srgb, var(--highlight) 26%, #fff);
    border-width: 2px;
}

/* podpowiedź o minimalnej liczbie dób */
.rezform__hint {
    margin-top: 5px;
    font-size: 12px;
    color: var(--highlight);
    font-weight: 600;
}


/* --- paginacja galerii ------------------------------------------------------
   Przy 78 zdjęciach ładowanie wszystkiego naraz to kilkanaście MB transferu.
   Pokazujemy porcjami, zdjęcia poza pierwszą porcją mają src podstawiany
   przez JS dopiero po kliknięciu. */
.galp__nawigacja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
}
.galp__postep {
    font-size: 13px;
    color: color-mix(in srgb, var(--text) 55%, transparent);
    letter-spacing: .04em;
}
.galp__wiecej {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 13px 32px;
    border-radius: 10px;
    border: 1.5px solid var(--accent);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    transition: background .18s, color .18s;
}
.galp__wiecej:hover {
    background: var(--accent);
    color: var(--bg);
}
.galp__wiecej[hidden] { display: none; }


/* --- klikalna legenda spaceru ----------------------------------------------
   Punkt z własnym adresem osadzenia staje się przyciskiem, który podmienia
   widok w ramce Street View. Bez adresu zostaje zwykłym opisem. */
.legenda__hint {
    font-weight: 400;
    font-size: 12px;
    color: color-mix(in srgb, var(--text) 45%, transparent);
    letter-spacing: 0;
    text-transform: none;
}
.legenda__item--btn {
    font-family: var(--font-body);
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.legenda__item--btn:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.legenda__item--btn.is-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.legenda__item--btn.is-active .legenda__kod {
    background: var(--accent);
    color: var(--bg);
}
.legenda__item--btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}


/* --- skip link (dostępność) ------------------------------------------------
   Ukryty do momentu sfokusowania klawiaturą (Tab jako pierwsza akcja). */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--cta);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 8px 0;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}
#tresc:focus { outline: none; }


/* --- formularz: oryginalny szablon pluginu Form -----------------------------
   Motyw NIE nadpisuje form.html.twig (własny szablon gubił token CSRF).
   Wygląd sterujemy wyłącznie stąd, dopasowując się do klas pluginu. */

/* przycisk wysyłki */
.rezform .buttons,
.rezform .form-buttons {
    margin-top: 20px;
}
.rezform button[type="submit"],
.rezform .button {
    width: 100%;
    padding: 15px 24px;
    background: var(--cta);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter .18s;
}
.rezform button[type="submit"]:hover,
.rezform .button:hover { filter: brightness(1.1); }

/* komunikaty po wysłaniu (plugin używa .form-message / .alert) */
.rezform .form-message,
.rezform .alert {
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.6;
    background: color-mix(in srgb, #5fd48a 14%, #fff);
    border: 1.5px solid #5fd48a;
    color: #1a5c38;
}
.rezform .form-message.error,
.rezform .alert.error,
.rezform .form-errors {
    background: color-mix(in srgb, #ff8080 12%, #fff);
    border-color: #ff8080;
    color: #8a1f1f;
}


/* --- poprawki formularza po przejściu na szablon pluginu Form -------------- */

/* 1. LINKI W ZGODACH — miały kolor tekstu, więc wyglądały jak zwykłe słowa.
   Szablon pluginu renderuje etykietę w .form-label albo w <label>. */
.rezform .form-field label a,
.rezform .form-label a,
.rezform label a {
    color: var(--cta);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.rezform .form-field label a:hover,
.rezform .form-label a:hover,
.rezform label a:hover { color: var(--accent); }

/* 2. KALKULATOR wewnątrz formularza (przenosi go tam JS — patrz
   kalkulator.js, funkcja przeniesDoFormularza). Musi zajmować całą
   szerokość gridu, tak jak pozostałe elementy spoza .form-field. */
.rezform form .kalk,
.rezform form .kalk__note {
    grid-column: 1 / -1;
}

/* 3. PRZYCISK NA CAŁĄ SZEROKOŚĆ */
.rezform .buttons,
.rezform .form-buttons {
    display: block;
    width: 100%;
}
.rezform button[type="submit"],
.rezform input[type="submit"],
.rezform .button {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* --- STRONA PODZIĘKOWANIA ------------------------------------------------- */

.dzieki { text-align: center; }
.dzieki__inner { max-width: 720px; }

.dzieki__znak {
    width: 84px; height: 84px;
    margin: 0 auto 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cta) 12%, transparent);
    border: 2px solid var(--cta);
    color: var(--cta);
    display: flex; align-items: center; justify-content: center;
}

.dzieki__title { font-size: 42px; margin: 0 0 14px; }
.dzieki__lead {
    font-size: 18px; line-height: 1.6;
    color: var(--ink-muted);
    margin: 0 auto 34px; max-width: 520px;
}

.dzieki__kroki {
    list-style: none; padding: 0;
    margin: 0 auto 30px; max-width: 480px;
    text-align: left;
    display: flex; flex-direction: column; gap: 14px;
}
.dzieki__kroki li { display: flex; align-items: flex-start; gap: 14px; }
.dzieki__krok-num {
    flex: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--cta); color: #fff;
    font-size: 14px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.dzieki__krok-tekst {
    font-size: 15px; line-height: 1.55;
    color: var(--ink);
    padding-top: 3px;
}

.dzieki__uwaga {
    font-size: 14px; line-height: 1.6;
    color: var(--ink-muted);
    margin: 0 auto 30px; max-width: 520px;
}

.dzieki__akcje {
    display: flex; gap: 12px; flex-wrap: wrap;
    justify-content: center;
}
.btn--ghost-ink {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
    color: var(--ink);
    padding: 15px 28px; font-weight: 700; font-size: 15px;
}
.btn--wa {
    background: #25d366; color: #0a2e15;
    padding: 15px 28px; font-weight: 800; font-size: 15px;
}

.dzieki__tresc { margin-top: 40px; text-align: left; }

@media (max-width: 700px) {
    .dzieki__title { font-size: 30px; }
    .dzieki__lead { font-size: 16px; }
    .dzieki__znak { width: 68px; height: 68px; }
    .dzieki__akcje .btn { width: 100%; text-align: center; }
}

/* --- KOMUNIKATY GRAVA ----------------------------------------------------- */

.komunikaty {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 18px 56px 0;
    display: flex; flex-direction: column; gap: 10px;
}
.komunikat {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    border-left: 4px solid;
    border-radius: 0 12px 12px 0;
    font-size: 15px; line-height: 1.55; font-weight: 700;
    background: #fff;
    color: #243040;
    box-shadow: 0 6px 24px rgba(6, 20, 45, .18);
}
.komunikat--error  { border-left-color: #d64545; }
.komunikat--info   { border-left-color: var(--cta); }
.komunikat--success{ border-left-color: #1ebe57; }
.komunikat--warning{ border-left-color: var(--highlight); }
.komunikat__tekst a { text-decoration: underline; }

@media (max-width: 900px) {
    .komunikaty { padding: 14px 20px 0; }
    .komunikat { font-size: 14px; padding: 14px 16px; }
}

/* --- KOMUNIKATY FORMULARZA (plugin Form) ---------------------------------
   Grav renderuje je przez partials/form-messages.html.twig jako
   <div class="notices error red">. Bez tych reguł komunikat pojawia się
   jako goły tekst w białej karcie i ginie — a formularz leży poniżej
   ekranu, więc użytkownik odbiera to jako "nic się nie stało". */

.notices {
    padding: 14px 18px;
    margin: 0 0 20px;
    border-radius: 0 10px 10px 0;
    border-left: 4px solid;
    font-size: 15px; font-weight: 700; line-height: 1.5;
}
.notices p { margin: 0; }
.notices.red,   .notices.error   { background: #fdecec; border-left-color: #d64545; color: #8f2020; }
.notices.green, .notices.success { background: #e8f8ee; border-left-color: #1ebe57; color: #0f5f2c; }
.notices.yellow,.notices.warning { background: #fff6e5; border-left-color: #e0a020; color: #7a5410; }
.notices:not(.red):not(.green):not(.yellow):not(.error):not(.success):not(.warning) {
    background: #eef3fb; border-left-color: #2f6bff; color: #1b3a7a;
}

/* Błędy przy pojedynczych polach — podbite, żeby rzucały się w oczy */
.rezform .has-errors input,
.rezform .has-errors select,
.rezform .has-errors textarea { border-color: #d64545 !important; }

/* --- KONTAKT: adres klikalny + numer konta ------------------------------- */

/* Drobny podpis pod wartością: "Zobacz na mapie", nazwa odbiorcy przelewu */
.rez__kmeta {
    font-size: 12px; font-weight: 500;
    color: rgba(255,255,255,.62);
    margin-top: 2px;
}
a.rez__kontakt:hover .rez__kmeta { color: rgba(255,255,255,.85); }

/* Numer konta: cyfry o stałej szerokości czytają się znacznie lepiej,
   a zaznaczenie jednym kliknięciem ratuje, gdyby JS nie zadziałał. */
.rez__konto {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    -webkit-user-select: all;
    user-select: all;
    word-break: break-word;
}
.rez__kontakt--konto { align-items: flex-start; }

.rez__kopiuj {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font: inherit; font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: background .18s, border-color .18s;
}
.rez__kopiuj:hover,
.rez__kopiuj:focus-visible { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }

@media (max-width: 700px) {
    .rez__konto { font-size: 15px; }
}

/* --- STRONA BŁĘDU (404 i pozostałe) -------------------------------------- */

.blad { text-align: center; }
.blad__inner { max-width: 680px; }

/* Duży numer w tle nagłówka — czytelny sygnał "to nie jest zwykła strona",
   ale wyciszony, żeby nie przykrywał treści. */
.blad__kod {
    font-size: 108px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.03em;
    color: color-mix(in srgb, var(--cta) 20%, transparent);
    margin-bottom: 6px;
}

.blad__title { font-size: 34px; margin: 0 0 14px; }
.blad__lead {
    font-size: 17px; line-height: 1.6;
    color: var(--ink-muted);
    margin: 0 auto 30px; max-width: 480px;
}

.blad__linki {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center;
    margin-bottom: 30px;
}
.blad__link {
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    transition: border-color .18s, color .18s, transform .18s;
}
.blad__link:hover {
    border-color: var(--cta);
    color: var(--cta);
    transform: translateY(-1px);
}

.blad__kontakt {
    display: flex; gap: 12px; flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 700px) {
    .blad__kod { font-size: 76px; }
    .blad__title { font-size: 26px; }
    .blad__lead { font-size: 15px; }
    .blad__kontakt .btn { width: 100%; text-align: center; }
}