/* Ślubne Auto — interfejs v1 (granat, turkus, złoto; pakiet wdrożeniowy z 11.10.2026). Bez zewnętrznych czcionek i skryptów. */
*, *::before, *::after { box-sizing: border-box; }

:root {
    /* Paleta pakietu */
    --sa-navy: #15324D;
    --sa-navy-dark: #0D2640;
    --sa-teal: #0F7287;
    --sa-teal-hover: #0A5969;
    --sa-gold: #B89152;        /* tylko ozdobnie: obok białego tekstu ma za słaby kontrast */
    --sa-gold-strong: #8A682B; /* złoto pod biały tekst (przycisk „Dodaj ogłoszenie”), kontrast 5,1:1 */
    --sa-gold-soft: #E8D7B7;
    --sa-ivory: #FCFBF8;
    --sa-page: #F6F9FA;

    /* Nazwy używane w całym arkuszu (historyczne: „gold” oznacza kolor działania) */
    --bg: var(--sa-page);
    --bg-deep: #E9EFF2;
    --surface: #ffffff;
    --ink: #17324A;
    --muted: #52697C;
    --border: #DDE5E9;
    --border-strong: #8395A1;
    --gold: var(--sa-teal);
    --gold-deep: var(--sa-teal-hover);
    --gold-light: var(--sa-gold);
    --cream: #EDF4F6;
    --danger: #a12622;
    --ok-bg: #e9f3e6;
    --err-bg: #fbe9e7;
    --info-bg: #EDF4F6;
    --focus: #0D829D;
    --font-head: Georgia, Cambria, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --radius: 10px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(21, 50, 77, .05), 0 2px 8px rgba(21, 50, 77, .05);
    --shadow-md: 0 8px 25px rgba(21, 50, 77, .08);
    --shadow-lg: 0 4px 8px rgba(21, 50, 77, .06), 0 20px 44px rgba(21, 50, 77, .14);
    --ease: cubic-bezier(.2, .7, .2, 1);
    --container: 80rem;
}

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
    background: var(--bg);
}

.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }

a { color: var(--gold); text-underline-offset: .18em; transition: color .16s var(--ease); }
a:hover { color: var(--gold-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link { position: absolute; left: -999rem; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--surface); padding: .5rem 1rem; z-index: 60; border-radius: var(--radius-sm); }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.22em; }

/* --- Pasek narzędzi (granatowy) i nagłówek z logo oraz menu głównym --- */
.topbar { background: var(--sa-navy); color: #fff; font-size: .875rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; min-height: 2.75rem; }
.topbar-note { margin: 0; color: #D5DEE6; }
.topbar nav { margin-left: auto; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav form { margin: 0; }
.nav-account { gap: 0 1.35rem; flex-wrap: nowrap; }
.nav-account > li > a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; color: #fff; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav-account > li > a:hover, .nav-account > li > a[aria-current] { color: var(--sa-gold-soft); text-decoration: underline; text-underline-offset: .3em; }
.nav-count { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; border-radius: 999px; background: var(--sa-gold-soft); color: var(--sa-navy); font-size: .6875rem; font-weight: 700; }
.account-menu { position: relative; }
.account-menu > summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; color: #fff; font-weight: 500; cursor: pointer; list-style: none; white-space: nowrap; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary::after { content: ""; width: .4rem; height: .4rem; margin-left: .1rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.account-menu > summary:hover, .account-menu[open] > summary { color: var(--sa-gold-soft); }
.account-points { padding: .05rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: .8125rem; }
.account-menu > ul { position: absolute; right: 0; top: calc(100% + .15rem); z-index: 40; display: grid; min-width: 14rem; margin: 0; padding: .4rem; list-style: none; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.account-menu ul a, .account-menu ul .link-button { display: flex; align-items: center; width: 100%; min-height: 2.75rem; padding: .5rem .75rem; border-radius: var(--radius-sm); color: var(--sa-navy); font-size: .9375rem; font-weight: 500; text-decoration: none; }
.account-menu ul a:hover, .account-menu ul .link-button:hover { background: var(--cream); color: var(--sa-teal); }

.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 var(--border), 0 6px 18px rgba(21, 50, 77, .05); }
.header-inner { display: flex; align-items: center; gap: .5rem 2rem; min-height: 4.5rem; padding-block: .5rem; }
.site-name { display: inline-flex; align-items: center; gap: .6rem; color: var(--sa-navy); text-decoration: none; flex: none; }
.site-name:hover { color: var(--sa-navy); }
.site-name svg { width: 2.5rem; height: 2.1rem; flex: none; }
.site-name-text { display: grid; line-height: 1.05; }
.site-name-text strong { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
.site-name-text small { font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.header-menu { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; min-width: 0; }
.header-menu > nav { margin-inline: auto; }
.nav-main { gap: .25rem; flex-wrap: nowrap; }
.nav-main a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem 1.05rem; border-radius: 999px; color: var(--sa-navy); font-family: var(--font-head); font-size: 1.125rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .16s var(--ease), color .16s var(--ease); }
.nav-main a:hover { background: var(--cream); color: var(--sa-teal); }
.nav-main a[aria-current] { background: var(--sa-navy); color: #fff; }
.button.button-add { background: var(--sa-gold-strong); border-color: var(--sa-gold-strong); border-radius: 999px; white-space: nowrap; }
.button.button-add:hover { background: #77591f; border-color: #77591f; }
.menu-toggle { display: none; align-items: center; gap: .4rem; margin-left: auto; min-height: 2.75rem; padding: .4rem .85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--sa-navy); font: inherit; font-weight: 600; cursor: pointer; }

main { flex: 1; padding-bottom: 3.5rem; }
main > .container { padding-top: 1.5rem; }

/* --- Typografia --- */
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; color: var(--sa-navy); line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.75rem); margin: 0 0 1rem; letter-spacing: -.01em; }
h1 small { font-family: var(--font-body); font-size: .9rem; font-weight: 400; color: var(--muted); }
h2 { font-size: 1.5rem; margin: 2.25rem 0 1rem; }
h3 { font-size: 1.15rem; margin: 1.25rem 0 .5rem; }
small { color: var(--muted); }

/* --- Okruszki --- */
.breadcrumbs { margin: 0 0 .75rem; font-size: .875rem; color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .15rem .5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: .5rem; color: var(--border-strong); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--sa-teal); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--ink); }

/* --- Strona główna: sekcja powitalna --- */
.hero { position: relative; isolation: isolate; background: linear-gradient(180deg, #F3F7F8 0%, #FBFAF7 100%); border-bottom: 1px solid var(--border); }
.hero-photo { display: block; position: absolute; inset: 0 0 auto auto; z-index: -1; width: min(64%, 61.875rem); height: min(100%, 27rem); }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 78% 30%;
    /* Zdjęcie sięga pod wyszukiwarkę (najwyżej 27rem, żeby nie powiększać go za mocno) i wtapia się w tło z lewej i u dołu. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, #000 62%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(180deg, #000 62%, transparent 100%); mask-composite: intersect; }
.hero-inner { padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); }
.hero h1 { font-size: clamp(1.95rem, 4.6vw, 3rem); margin: 0 0 .6rem; max-width: 20ch; }
.hero-lead { margin: 0 0 1.5rem; max-width: 30rem; font-size: 1.0625rem; color: var(--ink); }
.hero-form { max-width: 54rem; margin-inline: auto; }
.search-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.search-tabs label { position: relative; display: block; cursor: pointer; }
.search-tabs input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.search-tabs span { display: block; padding: .6rem 1.1rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: rgba(255, 255, 255, .72); color: var(--sa-navy); font-weight: 600; font-size: .9375rem; transition: background .16s var(--ease), color .16s var(--ease); }
.search-tabs input:hover + span { background: #fff; }
@media (max-width: 39.99rem) { .search-tabs { flex-wrap: nowrap; } .search-tabs label { flex: 1; } .search-tabs span { height: 100%; padding: .5rem .35rem; font-size: .8125rem; line-height: 1.25; text-align: center; display: grid; place-items: center; } }
.search-tabs input:checked + span { background: #fff; color: var(--sa-teal); box-shadow: inset 0 3px 0 var(--sa-teal); }
.search-tabs input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.hero-search { display: grid; gap: .85rem 1rem; align-items: end; grid-template-columns: 1fr;
    padding: 1.1rem 1.25rem 1.25rem; background: #fff; border-radius: 0 var(--radius) var(--radius) var(--radius); box-shadow: var(--shadow-lg); }
.hero-search .field label { font-size: .875rem; }
.hero-search .button, .list-search .button { width: 100%; }
.hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1rem auto 0; padding: 0; max-width: 54rem; }
.quick-search { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .9rem; align-items: start; max-width: 54rem; margin: .9rem auto 0; }
.quick-label { padding-top: .45rem; color: var(--sa-navy); font-size: .875rem; font-weight: 700; }
.quick-rows { display: grid; gap: .45rem; min-width: 0; }
.quick-rows ul { display: flex; flex-wrap: wrap; gap: .45rem; max-height: 2.25rem; overflow: hidden; list-style: none; margin: 0; padding: 0; }
.quick-chip { display: inline-flex; align-items: center; gap: .35rem; height: 2.25rem; padding: 0 .4rem 0 .7rem; border: 1px solid rgba(255, 255, 255, .9); border-radius: 999px; background: rgba(255, 255, 255, .92);
    color: var(--sa-navy); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease); }
.quick-chip .icon { width: 1rem; height: 1rem; color: var(--sa-teal); }
.quick-chip:hover { background: var(--sa-teal); border-color: var(--sa-teal); color: #fff; }
.quick-chip:hover .icon { color: #fff; }
.quick-count { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 .35rem; border-radius: 999px; background: var(--cream); color: var(--sa-navy); font-size: .75rem; font-weight: 700; }
.quick-chip:hover .quick-count { background: rgba(255, 255, 255, .22); color: #fff; }
@media (max-width: 47.99rem) {
    .quick-search { grid-template-columns: 1fr; gap: .35rem; }
    .quick-label { padding-top: 0; }
    .quick-rows ul { flex-wrap: nowrap; max-height: none; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
    .quick-rows li { flex: none; }
    .quick-chip { height: 2.75rem; padding: 0 .55rem 0 .85rem; }
}
.chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .3rem .95rem; border: 1px solid var(--border); border-radius: 999px; background: #fff;
    color: var(--sa-navy); font-size: .9375rem; font-weight: 500; text-decoration: none; transition: border-color .16s var(--ease), color .16s var(--ease); }
a.chip:hover { border-color: var(--sa-teal); color: var(--sa-teal); }
@media (min-width: 48rem) { .hero-search { grid-template-columns: 1fr 1fr auto; } .hero-search .button { min-width: 9.5rem; } }
@media (max-width: 47.99rem) {
    .hero-photo { position: relative; inset: auto; width: 100%; height: auto; }
    .hero-photo img { height: auto; aspect-ratio: 720 / 280; object-position: center;
        -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
    .hero-inner { padding-top: .25rem; }
}

/* --- Pasek faktów, kroki, kategorie --- */
.facts { display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); list-style: none; margin: 0; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.facts li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .85rem; align-items: center; }
.facts .icon { grid-row: span 2; width: 2rem; height: 2rem; color: var(--sa-teal); stroke-width: 1.5; }
.facts strong { color: var(--sa-navy); font-size: .9375rem; }
.facts span { color: var(--muted); font-size: .875rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; margin: 2.25rem 0 1rem; }
.section-head h2 { margin: 0; }
.section-head a { font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.section-head a:hover { text-decoration: underline; }
.steps { display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); list-style: none; margin: 0; padding: 1.5rem 0; counter-reset: krok; align-items: start; }
.steps-wrap { display: grid; gap: 0 2.5rem; grid-template-columns: 1fr; align-items: center; margin-top: 2rem; padding: 0 1.5rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.steps-wrap h2 { margin: 1.25rem 0 0; }
@media (min-width: 64rem) { .steps-wrap { grid-template-columns: auto 1fr; } .steps-wrap h2 { margin: 0; } }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: .15rem 1rem; counter-increment: krok; }
.steps li::before { content: counter(krok); grid-row: span 2; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--sa-gold-strong); color: #fff; font-family: var(--font-head); font-size: 1.2rem; }
.steps strong { font-family: var(--font-head); font-size: 1.1rem; color: var(--sa-navy); }
.steps span { color: var(--muted); font-size: .9375rem; }
.category-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.category-tiles a { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; min-height: 6.25rem; padding: .8rem .9rem; overflow: hidden; border-radius: var(--radius);
    color: #fff; font-family: var(--font-head); font-size: 1.1rem; font-weight: 700; text-decoration: none; background: var(--sa-navy); isolation: isolate; }
.category-tiles img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .18s var(--ease); }
.category-tiles a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13, 38, 64, .1) 0%, rgba(13, 38, 64, .78) 100%); }
.category-tiles a:hover img { transform: scale(1.04); }
.category-tiles .icon { width: 1.9rem; height: 1.9rem; padding: .35rem; border-radius: 50%; background: #fff; color: var(--sa-navy); }

/* --- Komunikaty --- */
.alert { position: relative; padding: .85rem 1rem .85rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 0 0 1.25rem; box-shadow: var(--shadow-sm); overflow: hidden; }
.alert::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--gold); }
.alert p { margin: 0 0 .25rem; }
.alert ul { margin: 0; padding-left: 1.25rem; }
.alert-success { background: var(--ok-bg); }
.alert-success::before { background: #3f7a3a; }
.alert-error { background: var(--err-bg); border-color: #e3b5b1; }
.alert-error::before { background: var(--danger); }
.alert-info { background: var(--info-bg); }

/* --- Przyciski --- */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .65rem 1.35rem; min-height: 2.75rem;
    border: 1px solid var(--sa-teal); border-radius: var(--radius-sm);
    background: var(--sa-teal); color: #fff;
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.button:hover { color: #fff; background: var(--sa-teal-hover); border-color: var(--sa-teal-hover); }
.button-small { min-height: 0; padding: .4rem .95rem; }
.button-secondary { background: #fff; color: var(--sa-teal); border-color: #C5D3DA; }
.button-secondary:hover { background: #fff; color: var(--sa-teal-hover); border-color: var(--sa-teal); }
.button-danger { background: #a12622; border-color: #a12622; }
.button-danger:hover { background: #7d1a17; border-color: #7d1a17; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--gold); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.link-button:hover { color: var(--gold-deep); }
.link-danger, .link-danger:hover { color: var(--danger); }
.inline { display: inline; }

/* --- Formularze --- */
.form { display: grid; gap: 1.1rem; max-width: 60rem; }
/* Strony logowania, rejestracji i odzyskiwania hasła: formularz na środku */
.auth-page main > .container { padding-top: 2.5rem; }
.auth-page h1 { text-align: center; }
.auth-note { max-width: 30rem; margin: 0 auto 1rem; color: var(--muted); text-align: center; font-size: .9375rem; }
.auth-page .form-narrow { margin-inline: auto; }
.form-narrow { max-width: 30rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.form-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.field { display: grid; gap: .3rem; align-content: start; }
.field label, legend { font-weight: 600; font-size: .9375rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search],
input[type=tel], input[type=url], input[type=date], input[type=file], select, textarea {
    width: 100%; padding: .6rem .8rem; min-height: 2.8rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: #fff; color: var(--ink); font: inherit;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--gold); }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(184, 145, 82, .28); }
textarea { resize: vertical; }
[aria-invalid=true] { border-color: var(--danger); border-width: 2px; }
.field-error { margin: 0; color: var(--danger); font-weight: 600; }
.hint { margin: 0; color: var(--muted); font-size: .9375rem; }
.field-check { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.field-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--gold); }
.field-check label { font-weight: 400; font-size: 1rem; }
.check-grid { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem 1.25rem; margin: 0; display: grid; gap: .85rem; min-width: 0; background: rgba(255, 255, 255, .6); }
legend { padding: 0 .5rem; font-family: var(--font-head); font-weight: 400; font-size: 1.1rem; }
.hp { position: absolute; left: -999rem; }

.search-form {
    display: grid; gap: .85rem 1rem; align-items: end;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.1rem; margin-bottom: 1.75rem; box-shadow: var(--shadow-sm);
}
.newsletter-form { border: 0; padding: 0; margin-bottom: .5rem; background: none; box-shadow: none; }
.result-count { color: var(--muted); }

/* --- Karta ogłoszenia (wspólna dla strony głównej, list i schowka) --- */
.listing-grid { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
.listing-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-sm); transition: box-shadow .16s var(--ease), border-color .16s var(--ease); }
.listing-card:hover, .listing-card:focus-within { box-shadow: var(--shadow-md); border-color: #C5D3DA; }
.listing-card-media { position: relative; display: block; background: var(--bg-deep); }
.listing-card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.listing-card-flag { position: absolute; left: .7rem; top: .7rem; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 6px; background: var(--sa-gold-strong); color: #fff; font-size: .8125rem; font-weight: 600; }
.listing-card-kind { position: absolute; left: .7rem; bottom: .7rem; padding: .15rem .6rem; border-radius: 6px; background: var(--sa-gold-soft); color: #5a4317; font-size: .8125rem; font-weight: 600; }
.listing-card-save { position: absolute; right: .6rem; top: .6rem; margin: 0; }
.listing-card-save button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--sa-navy); cursor: pointer; box-shadow: var(--shadow-sm); transition: color .16s var(--ease), transform .16s var(--ease); }
.listing-card-save button:hover { color: var(--sa-teal); transform: scale(1.06); }
.listing-card-save button[aria-pressed=true] { color: #b3302b; }
.listing-card-save button[aria-pressed=true] .icon { fill: currentColor; }
.listing-body { display: flex; flex-direction: column; gap: .35rem; flex: 1; padding: .9rem 1rem 1rem; }
.listing-body h3 { font-size: 1.15rem; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
.listing-body h3 a { color: var(--sa-navy); text-decoration: none; }
.listing-body h3 a:hover { color: var(--sa-teal); }
.listing-location, .listing-meta { margin: 0; color: var(--muted); font-size: .9375rem; }
.listing-location { display: flex; align-items: center; gap: .35rem; }
.listing-meta { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: .875rem; }
.listing-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.listing-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; margin-top: auto; padding-top: .55rem; }
.listing-price { margin: 0; color: var(--sa-navy); font-size: .9375rem; }
.listing-price strong { font-size: 1.15rem; }
.listing-price { display: grid; gap: .1rem; }
.listing-price-unit { color: var(--muted); font-size: .8125rem; }
.result-group { margin-bottom: 1.5rem; padding: 1rem; border: 1px solid var(--sa-gold-soft); border-radius: var(--radius); background: #FDFBF6; }
.result-group h2, .result-group-title { margin: 0 0 .85rem; font-size: 1.25rem; }
.result-group h2 small { margin-left: .5rem; font-family: var(--font-body); font-weight: 400; font-size: .875rem; }
.result-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 1.5rem; padding: 1rem 1.25rem; background: #fff; border: 1px dashed #C5D3DA; border-radius: var(--radius); }
.result-note p { margin: 0; }
.listing-price-none { color: var(--muted); font-size: .875rem; }
.listing-card .button { min-height: 2.75rem; padding: .45rem .95rem; font-size: .9375rem; }
.listing-row { display: grid; grid-template-columns: 6.5rem 1fr; gap: .25rem .85rem; align-items: center; padding: .5rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); color: inherit; text-decoration: none; transition: box-shadow .16s var(--ease), border-color .16s var(--ease); }
.listing-row:hover { color: inherit; border-color: #C5D3DA; box-shadow: var(--shadow-md); }
.listing-row img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--bg-deep); }
.listing-row strong { display: block; color: var(--sa-navy); font-size: .9375rem; overflow-wrap: anywhere; }
.listing-row span { display: block; color: var(--muted); font-size: .875rem; }
.listing-rows { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.badge { display: inline-block; padding: .1rem .6rem; border-radius: 6px; background: #E6EEF2; color: var(--sa-navy); font-size: .8125rem; font-weight: 600; }
.badge-warn { background: var(--err-bg); color: #7a1c19; }
.empty-state { padding: 2.25rem 1.25rem; text-align: center; background: #fff; border: 1px dashed #C5D3DA; border-radius: var(--radius); }
.empty-state img { width: 9rem; height: auto; margin-bottom: .5rem; }
.empty-state h2 { margin: 0 0 .4rem; font-size: 1.35rem; }
.empty-state p { margin: 0 auto .9rem; max-width: 34rem; color: var(--muted); }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; margin-top: 2rem; }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--sa-navy); font-weight: 600; text-decoration: none; }
.pagination a:hover { border-color: var(--sa-teal); color: var(--sa-teal); }
.pagination [aria-current] { background: var(--sa-teal); border-color: var(--sa-teal); color: #fff; }
.pagination [aria-disabled=true] { color: #667a89; background: transparent; }
.pagination .pagination-gap { border: 0; background: none; min-width: 1.25rem; padding: 0; }

/* --- Lista ogłoszeń --- */
.list-hero { position: relative; isolation: isolate; background: linear-gradient(180deg, #F0F5F7 0%, var(--bg) 100%); }
.list-hero .container { padding-block: 1.25rem .25rem; }
.list-hero h1 { margin: 0 0 .25rem; }
.list-hero h1 span { margin-left: .5rem; font-size: .5em; font-weight: 400; color: var(--sa-gold-strong); white-space: nowrap; }
.list-hero p { margin: 0; color: var(--muted); font-size: 1.0625rem; }
.list-hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; padding-bottom: 1rem; }
.list-hero-row form { margin: 0; }
.list-search { display: grid; gap: .85rem 1rem; align-items: end; grid-template-columns: 1fr; margin: 1.25rem 0 0; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
@media (min-width: 48rem) { .list-search { grid-template-columns: 1fr 1fr; } .list-search .field-submit { grid-column: 1 / -1; } }
@media (min-width: 64rem) { .list-search { grid-template-columns: 1fr 1fr 1fr auto; } .list-search .field-submit { grid-column: auto; } .list-search .button { min-width: 11rem; } }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: .9375rem; }
.active-filters .chip { min-height: 2.75rem; }
.active-filters .chip .icon { width: 1rem; height: 1rem; }
.list-layout { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; margin-top: 1.5rem; }
.filters { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem 1.25rem; }
.filters-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.filters-head h2 { margin: 0; font-size: 1.3rem; }
.filters-head a { font-size: .875rem; }
.filters fieldset { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; padding: .85rem 0 0; margin-top: .85rem; gap: .5rem; }
.filters legend { padding: 0; font-family: var(--font-body); font-weight: 700; font-size: .9375rem; color: var(--sa-navy); float: left; width: 100%; margin-bottom: .4rem; }
.filters .field { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--border); }
.filters .field label { font-weight: 700; color: var(--sa-navy); }
.filters .option { display: flex; align-items: center; gap: .55rem; min-height: 2rem; font-size: .9375rem; clear: both; }
.filters .option input { width: 1.15rem; height: 1.15rem; accent-color: var(--sa-teal); flex: none; }
.filters > .button { width: 100%; margin-top: 1rem; }
.filters-close, .filters-open { display: none; }
.list-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1.25rem; margin-bottom: 1rem; }
.list-toolbar p { margin: 0; }
.result-count { color: var(--sa-navy); font-size: 1.15rem; }
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.sort-form { display: flex; align-items: center; gap: .5rem; margin: 0; min-width: 0; }
.sort-form label { color: var(--muted); font-size: .9375rem; white-space: nowrap; }
.sort-form select { width: auto; min-width: 0; max-width: 100%; min-height: 2.75rem; text-overflow: ellipsis; }
.list-tools > * { min-width: 0; }
.unit-links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .5rem !important; }
.js .sort-form .button { display: none; }
.button.button-ghost { background: #fff; color: var(--sa-navy); border-color: var(--border); box-shadow: none; }
.button.button-ghost:hover { background: #fff; color: var(--sa-teal); border-color: var(--sa-teal); }
@media (min-width: 64rem) {
    .list-layout { grid-template-columns: 16.5rem minmax(0, 1fr); }
    .list-layout .listing-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
}
@media (max-width: 63.99rem) {
    .js .filters-open { display: inline-flex; }
    .js .filters { display: none; }
    .js .filters.is-open { display: block; position: fixed; inset: 0; z-index: 50; overflow-y: auto; border: 0; border-radius: 0; padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); }
    .js .filters.is-open .filters-close { display: inline-flex; }
    .js .filters.is-open .filters-head { position: sticky; top: -1rem; z-index: 1; margin: -1rem -1rem .5rem; padding: .75rem 1rem; background: #fff; border-bottom: 1px solid var(--border); align-items: center; }
}

/* --- Strona ogłoszenia --- */
.offer-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1rem; }
.offer-head h1 { margin: 0 0 .2rem; overflow-wrap: anywhere; }
.offer-head p { margin: 0; color: var(--muted); font-size: 1.0625rem; }
.offer-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.offer-actions form { margin: 0; }
.offer-top { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
.offer-main { display: grid; gap: 1.25rem 1.5rem; grid-template-columns: 1fr; align-items: start; min-width: 0; }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gallery li { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-deep); }
.gallery li:first-child { grid-column: 1 / -1; border-radius: var(--radius); }
.gallery a { display: block; cursor: zoom-in; }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery li:first-child img { aspect-ratio: 16 / 10; }
.gallery li:nth-child(n+7) { display: none; }
.gallery-count { position: absolute; left: .75rem; bottom: .75rem; padding: .15rem .6rem; border-radius: 6px; background: rgba(13, 38, 64, .8); color: #fff; font-size: .8125rem; font-weight: 600; pointer-events: none; }
.gallery-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(13, 38, 64, .62); color: #fff; font-size: 1.25rem; font-weight: 700; pointer-events: none; }
.gallery-video a { position: relative; cursor: pointer; }
.gallery-video img { filter: brightness(.72); }
.gallery-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.3rem; border-radius: 999px; background: rgba(13, 38, 64, .88); color: #fff; font-weight: 700; white-space: nowrap; transition: background .16s var(--ease); }
.gallery-play .icon { width: 1.6rem; height: 1.6rem; }
.gallery-video a:hover .gallery-play { background: var(--sa-teal); }
.gallery-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.rating-field { border: 0; padding: 0; background: none; gap: .35rem; }
.rating-field legend { padding: 0; font-family: var(--font-body); font-weight: 600; font-size: .9375rem; }
.rating-stars { display: flex; align-items: center; gap: .1rem; }
.rating-stars label { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; cursor: pointer; border-radius: var(--radius-sm); }
.rating-stars input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rating-star { width: 2.1rem; height: 2.1rem; color: #AEBFC9; stroke-width: 1.4; transition: color .12s var(--ease), transform .12s var(--ease); }
.rating-stars label:has(input:checked) .rating-star, .rating-stars label:has(~ label input:checked) .rating-star { color: var(--sa-gold); fill: currentColor; }
.rating-stars:hover .rating-star { color: #AEBFC9; fill: none; }
.rating-stars label:hover .rating-star, .rating-stars label:has(~ label:hover) .rating-star { color: var(--sa-gold-strong); fill: currentColor; }
.rating-stars label:hover .rating-star { transform: scale(1.12); }
.rating-stars label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.rating-output { margin-left: .6rem; color: var(--muted); font-size: .9375rem; }
.rating-none { display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; font-weight: 400; font-size: .9375rem; color: var(--muted); }
.rating-none input { width: 1.1rem; height: 1.1rem; accent-color: var(--sa-teal); }
.gallery-empty { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--bg-deep); }
.gallery-empty img { display: block; width: 100%; height: auto; }
.offer-facts { display: grid; gap: .9rem; list-style: none; margin: 0; padding: 0; }
.offer-facts li { display: grid; grid-template-columns: auto 1fr; gap: 0 .85rem; align-items: center; }
.offer-facts .icon { grid-row: span 2; width: 1.6rem; height: 1.6rem; color: var(--sa-teal); stroke-width: 1.5; }
.offer-facts strong { color: var(--sa-navy); overflow-wrap: anywhere; }
.offer-facts span { color: var(--muted); font-size: .875rem; }
.offer-facts .offer-price strong { font-size: 1.25rem; }
.contact-card { display: grid; gap: .85rem; padding: 1.25rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.contact-card-owner { display: grid; grid-template-columns: 1fr; gap: .1rem 1rem; align-items: center; }
.contact-card-owner:has(img) { grid-template-columns: auto 1fr; }
.contact-card-owner img { grid-row: span 2; width: 4.5rem; height: 4.5rem; object-fit: contain; border-radius: 50%; border: 1px solid var(--border); background: #fff; }
.contact-card-owner strong { font-family: var(--font-head); font-size: 1.2rem; color: var(--sa-navy); overflow-wrap: anywhere; }
.contact-card .badges { margin: 0; }
.contact-card .button { width: 100%; }
.button-large { min-height: 3.4rem; font-size: 1.0625rem; flex-direction: column; gap: 0; line-height: 1.25; }
.button-large small { color: rgba(255, 255, 255, .88); font-weight: 400; font-size: .8125rem; }
.contact-card .phone-box { padding: .75rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: center; }
.contact-card .phone-box p { margin: 0 0 .25rem; }
.contact-card .phone-box form { margin-top: .5rem; }
.contact-card-row { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.contact-card-row form { margin: 0; }
.offer-tabs { display: flex; gap: .25rem 1.75rem; overflow-x: auto; margin: 2rem 0 1.25rem; padding: 0; list-style: none; border-bottom: 1px solid var(--border); scrollbar-width: thin; }
.offer-tabs a { display: block; padding: .7rem 0; color: var(--sa-navy); font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.offer-tabs a:hover { color: var(--sa-teal); border-bottom-color: var(--sa-teal); }
.offer-sections { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
.offer-sections > section, .offer-sections > div > section { scroll-margin-top: 5.5rem; }
.offer-sections h2 { margin: 0 0 .75rem; font-size: 1.4rem; }
.offer-panel { padding: 1.1rem 1.25rem 1.25rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.offer-panel + .offer-panel { margin-top: 1.5rem; }
.price-list { margin: 0; display: grid; gap: 0; }
.price-list div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .15rem 1rem; padding: .55rem 0; border-top: 1px solid var(--border); }
.price-list div:first-child { border-top: 0; padding-top: 0; }
.price-list dt { color: var(--muted); }
.price-list dd { margin: 0; font-weight: 600; color: var(--sa-navy); overflow-wrap: anywhere; }
.review { border-top: 1px solid var(--border); padding: .85rem 0; }
.review:first-of-type { border-top: 0; padding-top: 0; }
.review p { margin: 0 0 .25rem; overflow-wrap: anywhere; }
.review-meta { color: var(--muted); font-size: .9375rem; }
.review-meta strong { color: var(--sa-navy); }
.stars { white-space: nowrap; }
.star-on { color: var(--sa-gold); fill: currentColor; }
.offer-panel h2 small { margin-left: .4rem; font-family: var(--font-body); font-weight: 400; font-size: .9375rem; }
.star-off { color: #AEBFC9; }
.prose { overflow-wrap: anywhere; font-size: 1.0625rem; }
.details { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; }
.details dt { color: var(--muted); }
.details dd { margin: 0; overflow-wrap: anywhere; }
.listing-columns { display: grid; gap: 0 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .listing-columns { grid-template-columns: 2fr 1fr; } }
.listing-columns aside { align-self: start; padding: 0 1.25rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.listing-columns aside h2 { font-size: 1.2rem; margin-top: 1.25rem; }
.sticky-cta { display: none; }
.sticky-cta-single { grid-template-columns: 1fr !important; }
@media (min-width: 48rem) {
    .offer-main { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
@media (min-width: 72rem) {
    .offer-top { grid-template-columns: minmax(0, 1fr) 22.5rem; }
    .offer-top .contact-card { position: sticky; top: 5.5rem; }
    .offer-sections { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
@media (max-width: 47.99rem) {
    .offer-actions .button { min-height: 2.75rem; padding: .4rem .75rem; font-size: .9375rem; }
    .list-tools { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .list-tools .sort-form { grid-column: 1 / -1; order: 3; }
    .list-tools .sort-form select { flex: 1 1 0; width: 100%; }
    .list-tools .button { padding-inline: .6rem; }
    .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .gallery li:nth-child(n+6) { display: none; }
    .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .97); border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(21, 50, 77, .1); }
    .sticky-cta .button { min-height: 2.9rem; padding-inline: .5rem; }
    body.has-sticky-cta { padding-bottom: 4.75rem; }
}

/* --- Wyróżnione oferty: najwyżej 4 karty naraz, reszta po przewinięciu --- */
.carousel-track.listing-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 1.25rem) / 4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .25rem .25rem .75rem; margin: -.25rem; scrollbar-width: thin; }
.carousel-track > li { scroll-snap-align: start; }
.carousel-nav { display: none; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.js .carousel.has-overflow .carousel-nav { display: flex; }
.carousel-nav .button { min-height: 2.75rem; padding: .35rem .8rem; font-size: .875rem; }
@media (max-width: 63.99rem) { .carousel-track.listing-grid { grid-auto-columns: calc((100% - 1.25rem) / 2); } }
@media (max-width: 39.99rem) { .carousel-track.listing-grid { grid-auto-columns: 86%; } }

/* --- Newsletter i porady na stronie głównej --- */
.newsletter-band { display: grid; gap: 1rem 2rem; grid-template-columns: 1fr; align-items: center; margin-top: 2.5rem; padding: 1.5rem; background: linear-gradient(120deg, #EEF5F7, #FBFAF7); border: 1px solid var(--border); border-radius: var(--radius); }
.newsletter-band h2 { display: flex; align-items: center; gap: .75rem; margin: 0 0 .35rem; font-size: 1.4rem; }
.newsletter-band h2 .icon { width: 2.2rem; height: 2.2rem; color: var(--sa-teal); stroke-width: 1.4; }
.newsletter-band p { margin: 0; color: var(--muted); }
.newsletter-form { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); align-items: end; margin: 0; }
@media (min-width: 64rem) { .newsletter-band { grid-template-columns: 1fr 1.25fr; } }
.home-columns { display: grid; gap: 0 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 64rem) { .home-columns.has-advice { grid-template-columns: 1fr 1fr; } }
.advice-list { display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.advice-list a { display: grid; grid-template-columns: 6.5rem 1fr; gap: .25rem .85rem; padding: .5rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); color: inherit; text-decoration: none; }
.advice-list a.no-cover { grid-template-columns: 1fr; padding: .75rem .9rem; }
.advice-list a:hover { border-color: #C5D3DA; box-shadow: var(--shadow-md); color: inherit; }
.advice-list img { grid-row: span 2; width: 100%; height: 100%; min-height: 4.75rem; object-fit: cover; border-radius: 6px; }
.advice-list strong { font-family: var(--font-head); color: var(--sa-navy); overflow-wrap: anywhere; }
.advice-list span { color: var(--muted); font-size: .875rem; }

/* --- Panele i karty --- */
.subnav { display: flex; flex-wrap: wrap; gap: .4rem .5rem; padding: 0 0 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.subnav a { padding: .4rem .95rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: .9375rem; text-decoration: none; transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.subnav a:hover { background: var(--cream); border-color: #C5D3DA; box-shadow: var(--shadow-sm); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.15rem 1.35rem 1.35rem; box-shadow: var(--shadow-sm); }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.card-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.actions { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; align-items: center; }
.actions-stack { flex-direction: column; align-items: flex-start; gap: .85rem; }
.promo-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; padding: .7rem 0; border-top: 1px solid var(--border); }
.promo-row:first-of-type { border-top: 0; }
.promo-admin { white-space: nowrap; font-size: .875rem; }
.plain-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; }
.photo-list { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: 1rem; }
.photo-list li { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .photo-list li { grid-template-columns: 16rem 1fr; } }
.photo-list img { width: 100%; height: auto; border-radius: var(--radius-sm); }
details.card > summary { cursor: pointer; font-family: var(--font-head); font-size: 1.1rem; padding: .25rem 0; }
details.card[open] > summary { margin-bottom: 1rem; }
details.card { margin-block: 1rem; }

/* --- Tabele: przewijane w poziomie na wąskich ekranach --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td { padding: .6rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
thead th { background: linear-gradient(180deg, #F0F5F7, #EAF0F3); white-space: nowrap; font-weight: 600; }
tbody th { font-weight: 600; }
tbody tr { transition: background .15s var(--ease); }
tbody tr:hover { background: #F6F9FA; }
tbody tr:last-child > * { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Opinie, logo, artykuły, terminy --- */
.review { border-top: 1px solid var(--border); padding: .85rem 0; }
.review p { margin: 0 0 .25rem; overflow-wrap: anywhere; }
.review-meta { color: var(--muted); }
.logo-preview { display: block; max-width: 12rem; max-height: 8rem; width: auto; height: auto; margin-bottom: .5rem; border-radius: var(--radius-sm); }
.article-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.article-list h2 { margin: 0 0 .25rem; }
.article-list .card { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.article-list .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.article-body { max-width: 46rem; overflow-wrap: anywhere; font-size: 1.05rem; }
.article-body img { max-width: 100%; height: auto; }
/* Stare i długie treści nie mogą rozszerzać strony: kod i adresy są zawijane, szerokie bloki przewijają się lokalnie. */
.article-body, .prose { min-width: 0; }
.article-body code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.article-body pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--bg-deep); }
.article-body table { display: block; max-width: 100%; overflow-x: auto; }
.article-body iframe, .article-body video { max-width: 100%; }
details.card { min-width: 0; }
details.card > summary { overflow-wrap: anywhere; }
.date-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.date-list li { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--gold-light); border-radius: var(--radius-sm); padding: .7rem 1rem; box-shadow: var(--shadow-sm); }
.storefront-header { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: 1rem; }
.storefront-header h1 { margin-bottom: .25rem; }

/* --- Reklama, chmura tagów, statystyki --- */
.banner { margin: 1rem 0; text-align: center; }
.banner img { max-width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.banner small { display: block; color: var(--muted); font-size: .75rem; }
.banner-text { display: inline-block; padding: .75rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-weight: 600; }
.banner-preview { max-width: 100%; max-height: 10rem; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.tag-cloud a { display: inline-block; padding: .3rem .9rem; border: 1px solid #C5D3DA; border-radius: var(--radius-sm); background: linear-gradient(180deg, #fff, #F6F9FA); text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.tag-cloud a:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.stat-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); margin: 1rem 0; }
.stat-tiles .card { background: linear-gradient(160deg, #fff, #F3F7F9); }
.stat-value { display: block; font-family: var(--font-head); font-size: 2rem; line-height: 1.2; }
.stat-label { color: var(--muted); }
.chart { margin: 1rem 0; }
.chart figcaption { font-weight: 600; margin-bottom: .5rem; }
.chart svg { display: block; width: 100%; height: auto; }
.chart-bar { fill: var(--gold); }
.chart-hit { fill: transparent; }
.chart g:hover .chart-hit { fill: #EDF4F6; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-label { fill: var(--muted); font-size: 11px; }

/* --- Przeglądarka zdjęć --- */
.gallery a { display: block; cursor: zoom-in; }
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 24, 38, .94); color: #fff; }
.lightbox[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; animation: lightbox-in .25s var(--ease); }
.lightbox::backdrop { background: rgba(10, 24, 38, .6); }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox figure { grid-column: 2; margin: 0; display: grid; grid-template-rows: 1fr auto; gap: .75rem; height: 100vh; padding: 3.5rem .5rem 1rem; min-width: 0; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; margin: auto; object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); min-height: 0; }
.lightbox figcaption { text-align: center; color: #DDE5E9; font-size: .9375rem; }
.lightbox button { border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; border-radius: 50%; font-size: 2rem; line-height: 1; width: 3rem; height: 3rem; transition: background .2s var(--ease), transform .2s var(--ease); }
.lightbox button:hover { background: rgba(255, 255, 255, .22); transform: scale(1.06); }
.lightbox button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lightbox-close { position: absolute; top: .75rem; right: .75rem; z-index: 2; }
.lightbox-nav { margin: 0 .5rem; }
.lightbox-prev { grid-column: 1; } .lightbox-next { grid-column: 3; }
.lightbox-single .lightbox-nav { visibility: hidden; }
@media (max-width: 40rem) { .lightbox-nav { position: absolute; bottom: 3.25rem; z-index: 2; } .lightbox-prev { left: .5rem; } .lightbox-next { right: .5rem; } .lightbox[open] { grid-template-columns: 0 1fr 0; } }

/* --- Cennik w panelu administratora --- */
.settings-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); align-items: start; }
.settings-group h2 { font-size: 1.25rem; padding-bottom: .5rem; border-bottom: 2px solid var(--gold-light); }
.setting-row { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: center; padding: .7rem 0; border-top: 1px solid var(--border); }
.setting-row:first-of-type { border-top: 0; }
.setting-row label { font-weight: 600; }
.setting-row .field-error { grid-column: 1 / -1; }
.setting-input { display: flex; align-items: center; gap: .5rem; }
.setting-input input { width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.setting-unit { min-width: 2.2rem; color: var(--muted); }
.settings-save { position: sticky; bottom: 0; margin: 1.5rem 0 0; padding: .85rem 0; background: linear-gradient(180deg, transparent, var(--bg) 35%); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Listy administracyjne --- */
.quick-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.quick-filters a { padding: .4rem .9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; font-weight: 600; font-size: .9375rem; transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.quick-filters a:hover { background: var(--cream); box-shadow: var(--shadow-sm); }
.quick-filters a[aria-current] { background: linear-gradient(180deg, #0F7287, #0F7287); border-color: var(--gold-deep); color: #fff; }
.quick-filters .count { display: inline-block; min-width: 1.5rem; padding: 0 .4rem; margin-left: .25rem; border-radius: var(--radius-sm); background: rgba(21, 50, 77, .14); text-align: center; font-size: .8125rem; }
.quick-filters a[aria-current] .count { background: rgba(255, 255, 255, .25); }
.bulk-bar { position: sticky; top: 4.25rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; padding: .7rem 1rem; margin-bottom: 1rem; background: rgba(255, 255, 255, .95); border: 1px solid #C5D3DA; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.bulk-bar select { width: auto; min-width: 16rem; flex: 1; }
.admin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.admin-row { display: grid; gap: .75rem 1rem; align-items: center; padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--border); border-left: 5px solid #5c8a57; border-radius: var(--radius); box-shadow: var(--shadow-sm); grid-template-columns: auto 6rem 1fr; transition: box-shadow .2s var(--ease); }
.admin-row:hover { box-shadow: var(--shadow-md); }
.admin-row.status-expired { border-left-color: #A9B7C1; }
.admin-row.status-hidden { border-left-color: var(--gold-light); }
.admin-row.status-blocked, .admin-row.status-archived { border-left-color: var(--danger); }
.admin-row > input[type=checkbox] { width: 1.3rem; height: 1.3rem; accent-color: var(--gold); }
.admin-row img { width: 6rem; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-deep); }
.admin-row h2 { font-size: 1.1rem; margin: 0 0 .15rem; }
.admin-row p { margin: 0; color: var(--muted); font-size: .9375rem; overflow-wrap: anywhere; }
.admin-row-state, .admin-row-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; font-size: .9375rem; }
.badge-state { background: #eef2ea; color: #2f4a2c; }
.status-expired .badge-state { background: #E9EFF2; color: #3D5466; }
.status-blocked .badge-state, .status-archived .badge-state { background: var(--err-bg); color: #7a1c19; }
@media (min-width: 62rem) {
    .admin-row { grid-template-columns: auto 7rem minmax(0, 2fr) minmax(0, 1.4fr) auto; }
    .admin-row-state, .admin-row-actions { grid-column: auto; }
    .admin-row-state { flex-direction: column; align-items: flex-start; gap: .3rem; }
    .admin-row-actions { flex-direction: column; align-items: flex-end; gap: .2rem; }
    .admin-row img { width: 7rem; }
}
.thumb-strip { display: flex; gap: .5rem; overflow-x: auto; list-style: none; margin: 0 0 1rem; padding: 0 0 .25rem; }
.thumb-strip img { height: 5rem; width: auto; border-radius: var(--radius-sm); }

/* --- Edytor treści --- */
.editor-toolbar { display: flex; flex-wrap: wrap; gap: .35rem; padding: .4rem; border: 1px solid var(--border-strong); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: linear-gradient(180deg, #F6F9FA, #EAF0F3); }
.editor-toolbar button, .editor-toolbar .editor-upload { min-height: 2.2rem; padding: .25rem .7rem; border: 1px solid #C5D3DA; border-radius: var(--radius-sm); background: #fff; color: var(--ink); font: inherit; font-size: .9375rem; cursor: pointer; transition: background .15s var(--ease); }
.editor-toolbar button:hover, .editor-toolbar .editor-upload:hover { background: var(--cream); }
.editor-toolbar button[aria-pressed=true] { background: var(--gold); color: #fff; border-color: var(--gold-deep); }
.editor-toolbar .editor-upload { display: inline-flex; align-items: center; }
.editor-toolbar .editor-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.editor-toolbar .editor-upload:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
[data-editor] textarea { border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .95rem; line-height: 1.6; min-height: 18rem; }
.editor-preview { margin-top: .75rem; padding: 1rem 1.25rem; border: 1px dashed #C5D3DA; border-radius: var(--radius-sm); background: #fff; }
.editor-preview::before { content: "Podgląd"; display: block; margin-bottom: .5rem; color: var(--muted); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.article-cover { display: block; width: 100%; max-height: 26rem; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); margin-bottom: 1.25rem; }
.article-card { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .article-card.has-cover { grid-template-columns: 14rem 1fr; } }
.article-card img { width: 100%; height: 100%; max-height: 11rem; object-fit: cover; border-radius: var(--radius-sm); }
.lead { font-size: 1.15rem; color: #3D5466; max-width: 46rem; }
.meter { height: .6rem; border-radius: var(--radius-sm); background: #E3EBEF; overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--gold-light), var(--gold)); }

.cms-form { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; margin-bottom: 1.5rem; }
@media (min-width: 62rem) { .cms-form { grid-template-columns: minmax(0, 1fr) 20rem; } .cms-form aside { position: sticky; top: 5rem; } }
.cms-form aside { display: grid; gap: 1rem; }
.cms-form aside h2 { font-size: 1.15rem; margin: 0; }

/* --- Menu administratora --- */
.admin-menu { display: grid; gap: .75rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); padding: 1rem 1.25rem; margin-bottom: 1.5rem; border-radius: var(--radius); background: linear-gradient(160deg, #15324D, #1B3F5E); box-shadow: var(--shadow-md); }
.admin-menu-group h2 { margin: 0 0 .35rem; font-family: var(--font-body); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #B9C7D1; }
.admin-menu-group h2::after { display: none; }
.admin-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.admin-menu a { display: block; padding: .35rem .6rem; border-radius: var(--radius-sm); color: #EDF4F6; text-decoration: none; font-weight: 500; transition: background .15s var(--ease); }
.admin-menu a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.admin-menu a[aria-current] { background: #EDF4F6; color: #15324D; font-weight: 700; }
.admin-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); margin-bottom: 1.5rem; }
.admin-tiles a { display: block; text-decoration: none; color: inherit; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.admin-tiles a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tile-alert { border-left: 4px solid var(--danger); }

/* --- Działania na zaznaczonych --- */
.bulk-bar { display: grid; gap: .6rem; }
.bulk-bar .bulk-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.bulk-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.bulk-buttons button { min-height: 2.3rem; padding: .35rem .8rem; }
.bulk-buttons button:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; box-shadow: none; }
.admin-row.is-selected { background: #EDF4F6; box-shadow: var(--shadow-md), 0 0 0 2px var(--gold-light); }
.row-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.row-actions form { margin: 0; }
.row-actions .button { min-height: 2.1rem; padding: .25rem .7rem; font-size: .875rem; font-weight: 600; }

/* --- Podpowiedzi --- */
.tip { margin: 0 0 1.25rem; padding: .6rem 1rem; border: 1px solid #C5D3DA; border-left: 4px solid var(--gold-light); border-radius: var(--radius); background: #F6FAFB; }
.tip > summary { cursor: pointer; font-weight: 600; color: var(--gold-deep); }
.tip > summary::before { content: "💡 "; }
.tip-body { margin-top: .5rem; color: #3D5466; }
.tip-body ul { margin: .25rem 0 0; padding-left: 1.25rem; display: grid; gap: .25rem; }
.tip-body p { margin: .25rem 0; }

/* --- Okno potwierdzenia --- */
.confirm { max-width: 28rem; width: calc(100% - 2rem); padding: 1.5rem; border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); color: var(--ink); }
.confirm::backdrop { background: rgba(10, 24, 38, .55); }
.confirm h2 { margin: 0 0 .5rem; font-size: 1.3rem; }
.confirm p { margin: 0 0 1.25rem; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
pre.card { overflow-x: auto; font-size: .9375rem; }

.list-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; margin-bottom: 1rem; }
.list-toolbar p { margin: 0; }
.sort-links { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .75rem; font-size: .9375rem; }
.list-toolbar .sort-links { margin-bottom: 0; }
.sort-links span:first-child { color: var(--muted); margin-right: .25rem; }
.sort-links a { padding: .3rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; transition: background .15s var(--ease); }
.sort-links a:hover { background: var(--cream); }
.sort-links a[aria-current] { background: var(--gold); border-color: var(--gold-deep); color: #fff; font-weight: 600; }

/* --- Strona pojedynczego rekordu w panelu administratora --- */
.record-head { display: grid; gap: 1rem 1.5rem; grid-template-columns: 1fr; align-items: start; margin-bottom: 1.25rem; border-left: 5px solid #5c8a57; }
.record-head.status-expired { border-left-color: #A9B7C1; }
.record-head.status-hidden { border-left-color: var(--gold-light); }
.record-head.status-blocked, .record-head.status-archived { border-left-color: var(--danger); }
.record-head img { width: 100%; max-width: 16rem; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-deep); }
.record-head h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 .35rem; }
.record-head p { margin: 0 0 .5rem; }
.record-facts { display: grid; gap: .5rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); margin: .5rem 0 .75rem; }
.record-facts dt { color: var(--muted); font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; }
.record-facts dd { margin: 0; font-weight: 600; }
.record-head-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.record-head-actions .button { min-height: 2.3rem; padding: .35rem .85rem; }
.record-layout { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
.record-main { display: grid; gap: 1.25rem; min-width: 0; }
.record-side { display: grid; gap: 1rem; }
.record-side h2 { font-size: 1.25rem; margin: 0; }
.record-side .field-check .hint { flex-basis: 100%; margin-left: 1.8rem; }
.thumb-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); list-style: none; margin: 0 0 1rem; padding: 0; }
.thumb-grid img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.details-columns { margin-bottom: 1rem; }
@media (min-width: 48rem) {
    .record-head { grid-template-columns: 14rem minmax(0, 1fr); }
    .record-head-actions { grid-column: 1 / -1; }
    .details-columns { grid-template-columns: auto 1fr auto 1fr; }
}
@media (min-width: 70rem) {
    .record-head { grid-template-columns: 14rem minmax(0, 1fr) 12rem; }
    .record-head-actions { grid-column: auto; flex-direction: column; align-items: stretch; }
    .record-head-actions .button { justify-content: center; }
    .record-layout { grid-template-columns: minmax(0, 1fr) 23rem; }
    .record-side { position: sticky; top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
}

/* --- Wykresy: kolory serii w stałej kolejności (paleta sprawdzona pod kątem rozróżnialności barw) --- */
:root { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --series-5: #e87ba4; --series-6: #008300; }
.series-1-fill { fill: var(--series-1); } .series-2-fill { fill: var(--series-2); } .series-3-fill { fill: var(--series-3); }
.series-4-fill { fill: var(--series-4); } .series-5-fill { fill: var(--series-5); } .series-6-fill { fill: var(--series-6); }
.series-1-stroke { stroke: var(--series-1); } .series-2-stroke { stroke: var(--series-2); } .series-3-stroke { stroke: var(--series-3); }
.series-4-stroke { stroke: var(--series-4); } .series-5-stroke { stroke: var(--series-5); } .series-6-stroke { stroke: var(--series-6); }
.series-1-bg { background: var(--series-1); } .series-2-bg { background: var(--series-2); } .series-3-bg { background: var(--series-3); }
.series-4-bg { background: var(--series-4); } .series-5-bg { background: var(--series-5); } .series-6-bg { background: var(--series-6); }
.chart-row { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; margin: 1.25rem 0; }
.chart-row .chart { margin: 0; height: 100%; }
.chart figcaption { font-family: var(--font-head); font-size: 1.15rem; font-weight: 400; }
.chart rect[class^="series-"], .chart circle[class^="series-"] { transition: opacity .15s var(--ease); }
.chart g:hover rect[class^="series-"], .donut circle[class^="series-"]:hover { opacity: .8; }
.chart-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .9375rem; }
.chart-legend li { display: grid; grid-template-columns: auto 1fr auto auto; gap: .5rem; align-items: center; }
.chart-legend small { min-width: 2.5rem; text-align: right; }
.chart-legend-inline { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-bottom: .5rem; }
.chart-legend-inline li { display: flex; }
.swatch { width: .85rem; height: .85rem; border-radius: 2px; flex: none; }
.donut { display: grid; gap: 1rem 1.5rem; grid-template-columns: minmax(8rem, 11rem) 1fr; align-items: center; }
@media (max-width: 28rem) { .donut { grid-template-columns: 1fr; justify-items: center; } .donut .chart-legend { width: 100%; } }
.donut svg { transform: rotate(0); }
.donut-track { stroke: #E9EFF2; }
.donut-total { font-family: var(--font-head); font-size: 6.5px; fill: var(--ink); }
.donut-unit { font-size: 2.6px; fill: var(--muted); }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .9375rem; }
.hbars li { display: grid; grid-template-columns: minmax(6rem, 11rem) 1fr auto; gap: .6rem; align-items: center; }
.hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: .9rem; border-radius: 2px; background: #E9EFF2; overflow: hidden; }
.hbar-fill { display: block; height: 100%; min-width: 2px; border-radius: 0 3px 3px 0; }
.chart-table { margin-top: .75rem; }
.chart-table summary { cursor: pointer; color: var(--gold); font-size: .9375rem; }
.chart-table .table-wrap { margin-top: .5rem; max-height: 18rem; overflow-y: auto; }
.stat-accent-1 { border-top: 4px solid var(--series-1); } .stat-accent-2 { border-top: 4px solid var(--series-2); }
.stat-accent-3 { border-top: 4px solid var(--series-3); } .stat-accent-4 { border-top: 4px solid var(--series-4); }

.funnel ol { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .9rem; }
.funnel-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .9rem; margin-bottom: .3rem; }
.funnel-value { font-family: var(--font-head); font-size: 1.4rem; }
.funnel .hbar-track { height: 1.1rem; }
.funnel h2, .chart-title { margin-top: 0; font-size: 1.15rem; }

.checklist { list-style: none; margin: .75rem 0; padding: 0; display: grid; gap: .35rem; }
.checklist li { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: .4rem; align-items: baseline; }
.checklist li > span:first-child { color: var(--muted); font-weight: 700; }
.checklist .is-done { color: var(--muted); }
.checklist .is-done > span:first-child { color: #2f7a2c; }
.onboarding { margin-bottom: 1.25rem; border-left: 4px solid var(--gold-light); }
.onboarding h2 { margin-top: 0; font-size: 1.25rem; }
.badge-trust { background: #e6f1e4; color: #24521f; }
.badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .75rem; }
section.tip h2 { margin: 0 0 .25rem; }
section.tip ul { margin: .25rem 0; padding-left: 1.25rem; display: grid; gap: .3rem; }

.phone-box p { margin: 0 0 .35rem; font-size: 1.05rem; }
.phone-box form { margin-top: .5rem; }
.phone-box:focus { outline: none; }

/* --- Dane konta --- */
.profile-layout { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
.profile-form, .profile-side { display: grid; gap: 1.25rem; min-width: 0; }
.profile-side details.card { margin-block: 0; }
.profile-section { display: grid; gap: 1rem; }
.profile-section > header { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding-bottom: .8rem; border-bottom: 1px solid var(--border); }
.profile-section > header h2 { margin: 0; font-size: 1.25rem; }
.profile-section > header .hint { flex-basis: 100%; }
.profile-pair { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.profile-section .field-check .hint { flex-basis: 100%; margin-left: 1.8rem; }
.badge-private { background: #ece8f1; color: #3d2f55; }
.profile-save { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 1rem; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.profile-email { margin: 0 0 .5rem; overflow-wrap: anywhere; }
.logo-empty { margin: 0 0 .75rem; padding: 1.25rem .75rem; text-align: center; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-deep); }
@media (min-width: 40rem) { .profile-pair-address { grid-template-columns: 9rem minmax(0, 1fr); } }
@media (min-width: 62rem) {
    .profile-layout { grid-template-columns: minmax(0, 1fr) 21rem; }
    .profile-side { position: sticky; top: 5.5rem; }
}

/* --- Odświeżanie ogłoszeń --- */
.refresh-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.25rem; border-left: 4px solid var(--border-strong); }
.refresh-card.is-ready { border-left-color: var(--gold); background: linear-gradient(160deg, #fff, #F3F7F9); }
.refresh-card > div { flex: 1 1 22rem; min-width: 0; }
.refresh-card h2 { margin: 0 0 .35rem; font-size: 1.25rem; }
.refresh-card p { margin: 0 0 .4rem; }
.confirm-scope { display: grid; gap: .85rem; margin: .75rem 0; }
.confirm-scope .check-grid { max-height: 14rem; overflow-y: auto; padding: .25rem; }
.streak { display: flex; gap: .3rem; margin-top: .35rem; }
.streak span { width: 2.5rem; height: .45rem; border-radius: var(--radius-sm); background: #E3EBEF; }
.streak .is-on { background: linear-gradient(90deg, var(--gold-light), var(--gold)); }

/* --- Formularz ogłoszenia: kroki na całą szerokość, podsumowanie w bocznej kolumnie --- */
.wizard { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
.wizard-main, .wizard-side { display: grid; gap: 1.25rem; min-width: 0; }
.wizard-step { display: grid; gap: 1.1rem; }
.wizard-step > header { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; padding-bottom: .9rem; border-bottom: 1px solid var(--border); }
.wizard-step > header h2 { margin: 0; font-size: 1.35rem; }
.wizard-step > header p { margin: .15rem 0 0; color: var(--muted); }
.wizard-no { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--sa-navy); color: #fff; font-family: var(--font-head); font-size: 1.2rem; }
.wizard-grid { display: grid; gap: 1.1rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: start; }
.wizard .field label, .wizard legend { font-size: 1rem; }
.wizard .hint { padding: .45rem .7rem .45rem 2.1rem; position: relative; border-radius: 6px; background: var(--cream); color: var(--ink); font-size: .9375rem; line-height: 1.45; }
.wizard .hint::before { content: "i"; position: absolute; left: .6rem; top: .5rem; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--sa-teal); color: #fff; font-size: .75rem; font-weight: 700; font-family: var(--font-head); }
.plain-fieldset { border: 0; padding: 0; background: none; gap: .7rem; }
.plain-fieldset legend { padding: 0; font-family: var(--font-body); font-weight: 600; margin-bottom: .5rem; }
.choice-cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.choice-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; align-items: center; padding: .9rem 1rem; border: 2px solid var(--border); border-radius: var(--radius); background: #fff; cursor: pointer; font-weight: 400; transition: border-color .16s var(--ease), background .16s var(--ease); }
.choice-card input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice-card .icon { width: 2.2rem; height: 2.2rem; color: var(--sa-teal); stroke-width: 1.4; }
.choice-card strong { display: block; color: var(--sa-navy); font-size: 1.0625rem; }
.choice-card small { display: block; color: var(--muted); font-size: .875rem; }
.choice-card:hover { border-color: #9FC3CC; }
.choice-card:has(input:checked) { border-color: var(--sa-teal); background: #F1F8FA; box-shadow: inset 0 0 0 1px var(--sa-teal); }
.choice-card:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.cost-card h2, .wizard-side h2 { margin: 0 0 .6rem; font-size: 1.2rem; }
.cost-card .price-list { margin: 0 0 .85rem; }
.next-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; font-size: .9375rem; }
.wizard-submit { display: grid; gap: .5rem; }
.wizard-submit .button { width: 100%; min-height: 3.25rem; font-size: 1.0625rem; }
@media (min-width: 64rem) {
    .wizard { grid-template-columns: minmax(0, 1fr) 21.5rem; }
    .wizard-side { position: sticky; top: 5.5rem; }
}
@media (max-width: 63.99rem) {
    .wizard-submit { position: sticky; bottom: 0; z-index: 5; padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--bg) 30%); }
    .wizard-submit .hint { display: none; }
}

/* --- Suma kosztu w formularzu ogłoszenia --- */
.cost-summary { padding: .85rem 1rem; border: 1px solid #C5D3DA; border-left: 4px solid var(--sa-gold); border-radius: var(--radius-sm); background: #fff; }
.cost-summary .is-short { color: var(--danger); font-weight: 600; }

/* --- Tabele jako karty na telefonie: nazwa u góry, dane pod spodem, działania zawsze widoczne --- */
@media (max-width: 47.99rem) {
    .table-wrap:has(> .cards-mobile) { overflow: visible; border: 0; background: none; box-shadow: none; }
    .cards-mobile, .cards-mobile tbody, .cards-mobile tr, .cards-mobile th, .cards-mobile td { display: block; width: 100%; }
    .cards-mobile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .cards-mobile tr { margin-bottom: .85rem; padding: .85rem 1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
    .cards-mobile tbody tr:hover { background: #fff; }
    .cards-mobile th, .cards-mobile td { padding: .3rem 0; border: 0; }
    .cards-mobile th[scope=row] { font-size: 1.0625rem; }
    .cards-mobile td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 600; }
    .cards-mobile td.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; padding-top: .7rem; border-top: 1px solid var(--border); }
    .cards-mobile td.actions > a, .cards-mobile td.actions .link-button { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem .8rem; border: 1px solid #C5D3DA; border-radius: var(--radius-sm); background: #fff; font-weight: 600; text-decoration: none; }
}

/* --- Stopka: granatowe zamknięcie strony, nawiązanie do paska u góry --- */
.site-footer { margin-top: auto; padding-block: 2.5rem 1.5rem; background: var(--sa-navy); border-top: 3px solid var(--sa-gold); color: #C7D3DD; font-size: .9375rem; }
.site-footer a { color: #C7D3DD; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .site-name, .site-footer .site-name:hover { color: #fff; text-decoration: none; }
.footer-grid { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.footer-grid h2 { margin: 0 0 .5rem; font-family: var(--font-body); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sa-gold-soft); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.footer-grid li a { display: inline-block; padding: .3rem 0; }
.footer-grid p { margin: 0; }
.footer-brand { margin: 0 0 .5rem !important; }
.footer-note { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .875rem; color: #A9B9C6; }
.sponsored { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .875rem; }
.site-footer :focus-visible { outline-color: #fff; }

/* --- Widgety osadzane na obcych stronach --- */
body.widget { display: block; min-height: 0; background: transparent; padding: .5rem; }
.widget-credit { margin: .5rem 0 0; font-size: .8125rem; text-align: right; }

/* --- Wąskie ekrany: menu główne rozwijane przyciskiem (bez JavaScriptu jest po prostu widoczne) --- */
@media (max-width: 61.99rem) {
    .js .menu-toggle { display: inline-flex; }
    .header-inner { flex-wrap: wrap; min-height: 4rem; }
    .header-menu { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .5rem; }
    .js .header-menu { display: none; }
    .js .header-menu.is-open { display: flex; padding-bottom: .75rem; }
    .header-menu > nav { margin: 0; }
    .nav-main { flex-direction: column; align-items: stretch; gap: .15rem; }
    .nav-main a { border-radius: var(--radius-sm); }
    .header-menu > .button { width: 100%; }
    .site-name-text strong { font-size: 1.35rem; }
}
@media (max-width: 47.99rem) {
    .topbar-note { display: none; }
    .topbar nav { margin-left: 0; width: 100%; min-width: 0; }
    .nav-account { justify-content: space-between; gap: 0 .75rem; }
}
/* Wąskie telefony: saldo przenosi się z paska do rozwijanego menu konta, więc pasek mieści się niezależnie od liczby punktów. */
.account-balance { display: none; padding: .5rem .75rem; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .9375rem; }
.account-balance strong { color: var(--sa-navy); }
@media (max-width: 29.99rem) {
    .account-points { display: none; }
    .account-balance { display: block; }
    .account-menu > ul { max-width: calc(100vw - 2rem); }
}
/* Najwęższe ekrany (320–360 px): ikony „Szukaj” i „Schowek” bez podpisów (nazwy zostają dla czytników), mniejsze logo. */
@media (max-width: 23.99rem) {
    .nav-account .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .nav-account > li > a { min-width: 2.75rem; justify-content: center; }
    .nav-account > li > a .icon { width: 1.4em; height: 1.4em; }
    .header-inner { gap: .5rem; }
    .site-name { gap: .45rem; min-width: 0; }
    .site-name svg { width: 2rem; height: 1.7rem; }
    .site-name-text strong { font-size: 1.2rem; }
    .site-name-text small { letter-spacing: .08em; }
    .menu-toggle { padding-inline: .65rem; }
}

/* --- Poszanowanie ustawień ograniczenia ruchu --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- Ustawienia prywatności: baner pierwszej warstwy i strona ustawień --- */
.privacy-banner { position: fixed; inset: auto 0 0 0; z-index: 60; max-height: 85vh; overflow-y: auto; padding-block: 1rem 1.1rem; background: #fff; border-top: 3px solid var(--sa-gold); box-shadow: 0 -8px 24px rgba(21, 50, 77, .18); }
.privacy-banner h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.privacy-banner p { margin: 0 0 .8rem; font-size: .9375rem; max-width: 70rem; }
.privacy-demo { color: var(--sa-navy); }
.privacy-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
.privacy-actions .button { flex: 1 1 11rem; justify-content: center; text-align: center; }
.privacy-choice form { display: grid; gap: 1rem; }
.privacy-purposes { display: grid; gap: .9rem; }
.privacy-purpose { padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.privacy-purpose p { margin: 0 0 .3rem; }
.privacy-purpose .hint { margin-top: .35rem; }
.privacy-state .hint { display: block; overflow-wrap: anywhere; }
.privacy-withdraw { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.privacy-withdraw .hint { display: block; margin-top: .3rem; }
.tech-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.tech-list h3 { margin: 0 0 .6rem; font-family: var(--font-body); font-size: 1rem; display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.tech-list code { overflow-wrap: anywhere; }
.tech-list dl { margin: 0; display: grid; gap: .45rem; font-size: .9375rem; }
.tech-list dt { font-weight: 600; color: var(--sa-navy); }
.tech-list dd { margin: 0; }
.footer-withdraw { margin-top: 1.25rem; }
.site-footer .link-button { color: #C7D3DD; }
.site-footer .link-button:hover { color: #fff; }

/* --- Film: informacja o dostawcy przed uruchomieniem odtwarzacza --- */
.video-consent { display: grid; gap: .6rem; align-content: center; min-height: 100%; padding: 1.1rem 1.2rem; background: var(--sa-navy); color: #fff; border-radius: var(--radius-sm); }
.video-consent p { margin: 0; font-size: .9375rem; }
.video-consent a { color: #fff; }
.video-consent .privacy-actions .button-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.video-consent :focus-visible { outline-color: #fff; }

/* --- Dokumenty: wersja, zapis i wydruk --- */
.document-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; margin: 0 0 1.25rem; padding: .7rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: .9375rem; }
.document-meta p { margin: 0; }
.document-versions { margin-top: 2rem; }
@media print {
    .topbar, .site-header, .site-footer, .skip-link, .breadcrumbs, .privacy-banner, .document-actions, .document-versions, .alert, .banner-slot { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .article-body a { color: #000; text-decoration: underline; }
    .document-meta { border: 0; padding: 0; background: none; }
}

/* --- Podsumowanie operacji punktowej przed potwierdzeniem --- */
.order-summary { max-width: 44rem; }
.order-summary .price-list { margin-bottom: 1rem; }
.order-summary .price-list dt { flex: 1 1 12rem; }
.order-total { border-top: 2px solid var(--sa-navy) !important; }
.order-summary .actions { gap: .8rem 1.4rem; }
.hash { overflow-wrap: anywhere; font-size: .8125rem; }
.document-hash { margin-top: 1.5rem; }

/* --- Dokumenty (regulamin, polityka): cała szerokość strony, spis treści obok tekstu --- */
.document { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 2rem; }
.document .article-body, .document .lead { max-width: none; }
.document .article-body h2 { margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid var(--border); scroll-margin-top: 6rem; }
.document .article-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.document .article-body ol { padding-left: 1.6rem; }
.document .article-body li { margin-bottom: .7rem; }
.document-toc summary { font-family: var(--font-body); font-weight: 700; color: var(--sa-navy); cursor: pointer; }
.document-toc ol { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .1rem; font-size: .9375rem; }
.document-toc a { display: block; padding: .3rem .5rem; border-radius: 6px; text-decoration: none; color: var(--sa-navy); }
.document-toc a:hover, .document-toc a:focus-visible { background: #E6EEF2; color: var(--sa-teal); }
@media (min-width: 60rem) {
    .document-with-toc { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 0 clamp(1.5rem, 3vw, 3rem); align-items: start; }
    .document-toc { position: sticky; top: 6rem; max-height: calc(100vh - 7rem); overflow-y: auto; padding-right: 1rem; border-right: 1px solid var(--border); }
    .document-toc summary { list-style: none; cursor: default; pointer-events: none; }
    .document-toc summary::-webkit-details-marker { display: none; }
}
@media (max-width: 59.99rem) {
    .document-toc { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
}
@media print {
    .document { border: 0; box-shadow: none; padding: 0; display: block; }
    .document-toc { display: none; }
}

/* --- Rejestracja: dwie kolumny — korzyści i kroki obok szerokiego formularza --- */
.register-page main > .container { padding-top: 2rem; }
.register { display: grid; gap: 1.5rem; align-items: start; }
.register-aside { padding: 1.75rem clamp(1.1rem, 3vw, 2rem) 2rem; background: var(--sa-navy); color: #E3EAF0; border-radius: var(--radius); border-bottom: 4px solid var(--sa-gold); }
.register-aside h1 { margin: 0 0 .6rem; color: #fff; }
.register-lead { margin: 0 0 1rem; font-size: 1.15rem; color: #fff; }
.register-aside .auth-note { max-width: none; margin: 0 0 1.25rem; text-align: left; color: #C7D3DD; }
.register-steps { margin: 0 0 1.5rem; padding: 0; list-style: none; counter-reset: krok; display: grid; gap: .9rem; }
.register-steps li { counter-increment: krok; position: relative; padding-left: 2.6rem; }
.register-steps li::before { content: counter(krok); position: absolute; left: 0; top: .05rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--sa-gold); color: var(--sa-navy); font-weight: 700; font-size: .9375rem; }
.register-steps strong { color: #fff; }
.register-login { margin: 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.register-aside a { color: #fff; }
.register-aside :focus-visible { outline-color: #fff; }
.register-form { max-width: none; padding: 1.5rem clamp(1.1rem, 3vw, 2.25rem) 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); display: grid; gap: 1.75rem; }
.register-form section { display: grid; gap: 1rem; min-width: 0; }
.register-form section + section { padding-top: 1.5rem; border-top: 1px solid var(--border); }
.register-form h2 { margin: 0; font-size: 1.25rem; }
.register-pair { display: grid; gap: 1rem; }
.register-terms .field-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .7rem; align-items: start; }
.register-terms .field-check input { margin-top: .2rem; }
.register-terms .field-check .hint, .register-terms .field-check .field-error { grid-column: 2; margin-left: 0; }
.register-submit { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }
.register-submit .button { min-width: 14rem; justify-content: center; }
@media (min-width: 40rem) {
    .register-pair { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 62rem) {
    .register { grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr); gap: 2rem; }
    .register-aside { position: sticky; top: 6rem; }
}