/*
 * Halo Sąsiedzi — nadpisanie kolorystyki Unify3
 * Ładowany jako OSTATNI arkusz — wygrywa kaskadę nad theme.min.css
 * Primary: #a00000 (ciemnoczerwony)
 */

:root {
  --bs-primary:              var(--ep-primary, var(--ep-primary));
  --bs-primary-rgb:          var(--ep-primary-rgb, 160, 0, 0);
  --bs-link-color:           var(--ep-primary, var(--ep-primary));
  --bs-link-hover-color:     var(--ep-primary, #800000);
  --bs-focus-ring-color:     rgba(var(--ep-primary-rgb, 160, 0, 0), .25);

  /* Unify custom vars */
  --bs-soft-primary-bg:      rgba(var(--ep-primary-rgb, 160, 0, 0), .1);

  /* Rozjasniony wariant koloru przewodniego — czytelny na ciemnym tle (dark mode) */
  --ep-primary-light:        color-mix(in srgb, var(--ep-primary, var(--ep-primary)), #fff 45%);
}

/* Przyciski */
.btn-primary {
  --bs-btn-bg:                   var(--ep-primary, var(--ep-primary));
  --bs-btn-border-color:         var(--ep-primary, var(--ep-primary));
  --bs-btn-hover-bg:             var(--ep-primary, #800000);
  --bs-btn-hover-border-color:   var(--ep-primary, #800000);
  --bs-btn-active-bg:            var(--ep-primary, #5a0000);
  --bs-btn-active-border-color:  var(--ep-primary, #5a0000);
  --bs-btn-disabled-bg:          var(--ep-primary, var(--ep-primary));
  --bs-btn-disabled-border-color:var(--ep-primary, var(--ep-primary));
  color: #fff !important;
}
.btn-outline-primary {
  --bs-btn-color:                var(--ep-primary, var(--ep-primary));
  --bs-btn-border-color:         var(--ep-primary, var(--ep-primary));
  --bs-btn-hover-bg:             var(--ep-primary, var(--ep-primary));
  --bs-btn-hover-border-color:   var(--ep-primary, var(--ep-primary));
  --bs-btn-active-bg:            var(--ep-primary, var(--ep-primary));
  --bs-btn-hover-color:          #fff;
  --bs-btn-active-color:         #fff;
}

/* Reset btn flex (Unify ustawia column) */
.btn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .3rem;
}
/* ...ale klasy wyświetlania Bootstrapa muszą dalej działać na przyciskach (d-none, d-md-none, d-lg-inline-flex...) -
   bez tego .btn z d-none był zawsze widoczny. Kolejność: bez progu, potem rosnące szerokości. */
.btn.d-none { display: none !important; }
.btn.d-inline, .btn.d-inline-block, .btn.d-inline-flex { display: inline-flex !important; }
.btn.d-block, .btn.d-flex { display: flex !important; }
@media (min-width: 576px) {
  .btn.d-sm-none { display: none !important; }
  .btn.d-sm-inline, .btn.d-sm-inline-block, .btn.d-sm-inline-flex { display: inline-flex !important; }
  .btn.d-sm-block, .btn.d-sm-flex { display: flex !important; }
}
@media (min-width: 768px) {
  .btn.d-md-none { display: none !important; }
  .btn.d-md-inline, .btn.d-md-inline-block, .btn.d-md-inline-flex { display: inline-flex !important; }
  .btn.d-md-block, .btn.d-md-flex { display: flex !important; }
}
@media (min-width: 992px) {
  .btn.d-lg-none { display: none !important; }
  .btn.d-lg-inline, .btn.d-lg-inline-block, .btn.d-lg-inline-flex { display: inline-flex !important; }
  .btn.d-lg-block, .btn.d-lg-flex { display: flex !important; }
}
@media (min-width: 1200px) {
  .btn.d-xl-none { display: none !important; }
  .btn.d-xl-inline, .btn.d-xl-inline-block, .btn.d-xl-inline-flex { display: inline-flex !important; }
  .btn.d-xl-block, .btn.d-xl-flex { display: flex !important; }
}
@media (min-width: 1400px) {
  .btn.d-xxl-none { display: none !important; }
  .btn.d-xxl-inline, .btn.d-xxl-inline-block, .btn.d-xxl-inline-flex { display: inline-flex !important; }
  .btn.d-xxl-block, .btn.d-xxl-flex { display: flex !important; }
}

/* Checkboxy i radio */
.form-check-input:checked {
  background-color: var(--ep-primary, var(--ep-primary));
  border-color:     var(--ep-primary, var(--ep-primary));
}
.form-check-input:focus {
  border-color: rgba(var(--ep-primary-rgb, 160, 0, 0), .5);
  box-shadow:   0 0 0 .25rem rgba(var(--ep-primary-rgb, 160, 0, 0), .25);
}

/* Link pointer — strzałka SVG sterowana kolorem przewodnim (mask zamiast fill) */
.link-pointer::after {
  background-image: none !important;
  background-color: var(--ep-primary) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z'/%3e%3c/svg%3e");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
[data-theme="dark"] .link-pointer::after {
  background-color: var(--ep-primary-light) !important;
}

/* List checked — ptaszek SVG sterowany kolorem przewodnim (mask zamiast fill) */
.list-checked-primary .list-checked-item::before {
  background-image: none;
  background-color: var(--ep-primary);
  -webkit-mask-image: url("data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.3035 4.76425C13.5718 4.44865 14.0451 4.41027 14.3607 4.67853C14.6763 4.9468 14.7147 5.42012 14.4464 5.73572L8.07144 13.2357C7.79896 13.5563 7.31616 13.5901 7.00171 13.3105L3.62671 10.3105C3.31713 10.0354 3.28924 9.5613 3.56443 9.25172C3.83962 8.94213 4.31367 8.91424 4.62326 9.18943L7.42515 11.68L13.3035 4.76425Z' fill='%23000'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.3035 4.76425C13.5718 4.44865 14.0451 4.41027 14.3607 4.67853C14.6763 4.9468 14.7147 5.42012 14.4464 5.73572L8.07144 13.2357C7.79896 13.5563 7.31616 13.5901 7.00171 13.3105L3.62671 10.3105C3.31713 10.0354 3.28924 9.5613 3.56443 9.25172C3.83962 8.94213 4.31367 8.91424 4.62326 9.18943L7.42515 11.68L13.3035 4.76425Z' fill='%23000'/%3e%3c/svg%3e");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
[data-theme="dark"] .list-checked-primary .list-checked-item::before {
  background-image: none;
  background-color: var(--ep-primary-light);
}

/* Linki */
a { color: var(--ep-primary, var(--ep-primary)); }
a:hover { color: var(--ep-primary, #800000); filter: brightness(.85); }
/* Unify koduje zielony hover na linkach .text-dark[href] (np. imiona na forum) — nadpisujemy kolorem aplikacji */
.text-dark[href]:hover { color: var(--ep-primary, #800000) !important; filter: brightness(.85); }
[data-theme="dark"] .text-dark[href]:hover { color: var(--ep-primary-light) !important; }

/* Wyjatki — footer i navbar */
.navbar-nav .nav-link { color: inherit; }
#ep-footer a { color: rgba(255,255,255,.6) !important; }
#ep-footer a:hover { color: #fff !important; }

/* Badge, text, bg */
.text-primary  { color: var(--ep-primary, var(--ep-primary)) !important; }
.bg-primary    { background-color: var(--ep-primary, var(--ep-primary)) !important; }
.border-primary{ border-color: var(--ep-primary, var(--ep-primary)) !important; }
.badge.bg-primary { background-color: var(--ep-primary, var(--ep-primary)) !important; }

/* Soft primary */
.bg-soft-primary  { background-color: rgba(var(--ep-primary-rgb, 160, 0, 0), .1) !important; }
.text-cap.text-primary { color: var(--ep-primary, var(--ep-primary)) !important; }

/* Link pointer (Unify) */
.link { color: var(--ep-primary, var(--ep-primary)); }
.link:hover { color: var(--ep-primary, #800000); filter: brightness(.85); }

/* ── DARK MODE ── */
[data-theme="dark"] {
  --bs-link-color:       var(--ep-primary-light);
  --bs-link-hover-color: var(--ep-primary-light);
}
[data-theme="dark"] a             { color: var(--ep-primary-light); }
[data-theme="dark"] a:hover       { color: var(--ep-primary-light); }
[data-theme="dark"] .text-primary { color: var(--ep-primary-light) !important; }
[data-theme="dark"] .text-cap.text-primary { color: var(--ep-primary-light) !important; }
[data-theme="dark"] .link         { color: var(--ep-primary-light) !important; }
[data-theme="dark"] .link:hover   { color: var(--ep-primary-light) !important; }

[data-theme="dark"] .btn-primary {
  background-color: var(--ep-primary) !important;
  border-color:     var(--ep-primary) !important;
  color: #fff !important;
}
[data-theme="dark"] .btn-primary:hover {
  background-color: var(--ep-primary) !important;
  border-color:     var(--ep-primary) !important;
}
[data-theme="dark"] .btn-outline-primary {
  color:        var(--ep-primary-light) !important;
  border-color: var(--ep-primary-light) !important;
}
[data-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--ep-primary-light) !important;
  color: #fff !important;
}

/* checkbox / radio / przełącznik NIEZAZNACZONY - dawniej białe tło Bootstrapa w ciemnym motywie */
[data-theme="dark"] .form-check-input {
  background-color: #0d1117;
  border-color:     #484f58;
}
[data-theme="dark"] .form-switch .form-check-input:not(:checked) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238b949e'/%3e%3c/svg%3e");
}
[data-theme="dark"] .form-check-input:focus { border-color: var(--ep-primary); box-shadow: 0 0 0 .2rem rgba(var(--ep-primary-rgb), .25); }
[data-theme="dark"] .form-check-input:checked {
  background-color: var(--ep-primary);
  border-color:     var(--ep-primary);
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-soft-light { background-color: #1c2128 !important; }
[data-theme="dark"] .list-step-item .position-absolute { background-color: #1c2128 !important; }

/* nav-segment (taby Unify) — Unify koduje na sztywno jasne #f3f6f9/#fff/zielony hover */
[data-theme="dark"] .nav-segment { background-color: #1c2128; }
[data-theme="dark"] .nav-segment .nav-link { color: #c9d1d9; }
[data-theme="dark"] .nav-segment .nav-link:hover { color: var(--ep-primary-light); }
[data-theme="dark"] .nav-segment .nav-link.active {
  color: #fff;
  background-color: var(--ep-primary);
  box-shadow: none;
}

/* u-nav (taby edycji profilu: Podstawowe/Zdjęcia/Prywatność…) — Unify koduje jasne kolory */
[data-theme="dark"] .u-nav-v1-1 .nav-link,
[data-theme="dark"] .u-nav-primary .nav-link { color: #8b949e; }
[data-theme="dark"] .u-nav-v1-1 .nav-link:hover,
[data-theme="dark"] .u-nav-primary .nav-link:hover { color: #c9d1d9; }
[data-theme="dark"] .u-nav-v1-1 .nav-link.active,
[data-theme="dark"] .u-nav-primary .nav-link.active { color: var(--ep-primary-light); }

/* Leaflet — pinezka EP (divIcon): bez domyślnego białego tła/ramki .leaflet-div-icon */
.ep-map-pin { background: transparent; border: none; }
.ep-map-pin svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }

/* Leaflet — kafelki OpenStreetMap (bez klucza API) we wszystkich mapach.
   Dark mode = filtr CSS na warstwie kafelków (pinezki/popupy w osobnych panelach - bez filtra).
   Działa przy przełączaniu motywu na żywo, bez podmiany warstwy w JS. */
[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9); }

/* Leaflet — kontrolki/popup/atrybucja w dark mode */
[data-theme="dark"] .leaflet-popup-content-wrapper { background:#1e2022; color:#c9d1d9; box-shadow:0 3px 14px rgba(0,0,0,.5); }
[data-theme="dark"] .leaflet-popup-tip { background:#1e2022; }
[data-theme="dark"] .leaflet-popup-close-button { color:#8b949e; }
[data-theme="dark"] .leaflet-control-zoom a { background:#1e2022; color:#c9d1d9; border-color:#30363d; }
[data-theme="dark"] .leaflet-control-zoom a:hover { background:#161b22; color:#fff; }
[data-theme="dark"] .leaflet-control-attribution { background:rgba(13,17,23,.8); color:#8b949e; }
[data-theme="dark"] .leaflet-control-attribution a { color:var(--ep-primary-light); }

[data-theme="dark"] h1,[data-theme="dark"] h2,
[data-theme="dark"] h3,[data-theme="dark"] h4,
[data-theme="dark"] h5,[data-theme="dark"] h6 { color: #c9d1d9; }
[data-theme="dark"] p     { color: #8b949e; }
[data-theme="dark"] .lead { color: #8b949e; }
[data-theme="dark"] .list-checked-item { color: #c9d1d9; }

[data-theme="dark"] .dropdown-menu {
  background-color: #161b22;
  border-color:     #30363d;
}
[data-theme="dark"] .dropdown-item       { color: #c9d1d9; }
[data-theme="dark"] .dropdown-item:hover { background-color: #1c2128; color: #fff; }
[data-theme="dark"] .dropdown-item.active{ background-color: var(--ep-primary); }

[data-theme="dark"] .navbar-toggler-icon { filter: invert(1); }

[data-theme="dark"] #epNavbar .nav-link       { color: #c9d1d9; }
[data-theme="dark"] #epNavbar .nav-link:hover,
[data-theme="dark"] #epNavbar .nav-link.active { color: var(--ep-primary-light); }

[data-theme="dark"] .shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.4) !important; }

/* Footer dark mode — bg-dark jest hardcoded w Unify, nadpisujemy */
[data-theme="dark"] footer.bg-dark {
  background-color: #0d1117 !important;
}
[data-theme="dark"] footer.bg-dark .border-white-10 {
  border-color: rgba(255,255,255,.06) !important;
}

/* Sekcja why — ikony dark mode */
[data-theme="dark"] span[style*="rgba(160,0,0,.1)"] {
  background: rgba(160,0,0,.2) !important;
}

/* Karty dark mode */
[data-theme="dark"] .card {
  background-color: #161b22;
  border-color: #30363d;
}
[data-theme="dark"] .card-shadow {
  box-shadow: 0 .375rem 1.5rem rgba(0,0,0,.4) !important;
}

/* Nagłówki kart z bg-white (np. Kontakt, Odpowiedź na ogłoszenie) */
[data-theme="dark"] .card-header.bg-white,
[data-theme="dark"] .card-header.bg-light {
  background-color: #1c2128 !important;
  color: #c9d1d9;
  border-color: #30363d;
}

/* list-group wewnątrz kart (np. dane kontaktowe ogłoszenia) */
[data-theme="dark"] .list-group-item {
  background-color: transparent;
  border-color: #30363d;
  color: #c9d1d9;
}

/* text-dark/text-muted na ciemnym tle (nazwy autorów, linki, dane kontaktowe) */
[data-theme="dark"] .text-dark { color: #c9d1d9 !important; }
[data-theme="dark"] .text-muted { color: #8b949e !important; }

/* form-control (pole odpowiedzi na forum) */
[data-theme="dark"] .form-control {
  background-color: #0d1117;
  border-color: #30363d;
  color: #c9d1d9;
}
[data-theme="dark"] .form-control::placeholder { color: #6e7681; }
[data-theme="dark"] .form-control:focus {
  background-color: #0d1117;
  border-color: var(--ep-primary);
  color: #c9d1d9;
}

/* form-select (listy rozwijane, np. Kategoria / Rozliczenie w ogłoszeniu) - jak form-control */
[data-theme="dark"] { color-scheme: dark; }   /* natywne listy opcji, kalendarze i paski przewijania w ciemnym */
[data-theme="dark"] .form-select {
  background-color: #0d1117;
  border-color: #30363d;
  color: #c9d1d9;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b949e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
[data-theme="dark"] .form-select:focus {
  border-color: var(--ep-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--ep-primary-rgb), .25);
}
[data-theme="dark"] .form-select option,
[data-theme="dark"] .form-select optgroup { background-color: #161b22; color: #c9d1d9; }
[data-theme="dark"] .form-select:disabled { background-color: #161b22; color: #6e7681; }

/* alerty light/info na ciemnym tle */
[data-theme="dark"] .alert-light {
  background-color: #1c2128;
  border-color: #30363d;
  color: #c9d1d9;
}
[data-theme="dark"] .btn-light {
  background-color: #21262d;
  border-color: #30363d;
  color: #c9d1d9;
}
[data-theme="dark"] .btn-light:hover {
  background-color: #30363d;
  color: #fff;
}
[data-theme="dark"] .blockquote { color: #c9d1d9; }
[data-theme="dark"] .blockquote-footer { color: #8b949e; }
[data-theme="dark"] .blockquote-footer::before { color: #8b949e; }
[data-theme="dark"] .list-timeline-item::before {
  border-color: #30363d;
  background-color: var(--ep-primary);
}

@media (max-width: 991.98px) {
  [data-theme="dark"] #epNavbar {
    background-color: #161b22;
    border-top: 1px solid #30363d;
    padding: .75rem 0;
  }
}

/* Swiper strzałki — dark mode */
[data-theme="dark"] .swiper-button-prev,
[data-theme="dark"] .swiper-button-next {
  color: #c9d1d9;
}
[data-theme="dark"] .swiper-button-prev:hover,
[data-theme="dark"] .swiper-button-next:hover {
  color: var(--ep-primary);
}
[data-theme="dark"] .swiper-static-button-prev,
[data-theme="dark"] .swiper-static-button-next {
  color: #c9d1d9;
}
[data-theme="dark"] .swiper-static-button-prev:hover,
[data-theme="dark"] .swiper-static-button-next:hover {
  color: var(--ep-primary);
}


/* Mapa Leaflet — zamknięcie stacking context żeby nie przykrywać modali i dropdownów */
.leaflet-container {
  z-index: 0;
}
.ep-map-section {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* Accordion (FAQ /pomoc) — dark mode.
   Bootstrap po rozwinięciu nakłada jasne --bs-accordion-active-bg + jasną
   strzałkę SVG. Nadpisujemy zmienne BS i wymuszamy ciemne tło na rozwiniętym
   przycisku oraz odwracamy kolor ikony. */
[data-theme="dark"] .accordion {
  --bs-accordion-bg: #161b22;
  --bs-accordion-color: #c9d1d9;
  --bs-accordion-border-color: #30363d;
  --bs-accordion-btn-color: #c9d1d9;
  --bs-accordion-btn-bg: #161b22;
  --bs-accordion-active-color: var(--ep-primary-light);
  --bs-accordion-active-bg: #1c2128;
  --bs-accordion-btn-focus-border-color: var(--ep-primary);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(160,0,0,.25);
}
/* Inline style w pomoc.blade ustawia jasne tło na przyciskach/treści —
   wymuszamy ciemne niezależnie od stanu collapsed/rozwinięty. */
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-button,
[data-theme="dark"] .accordion-button:not(.collapsed),
[data-theme="dark"] .accordion-body {
  background: #161b22 !important;
  color: #c9d1d9 !important;
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
  background: #1c2128 !important;
  color: var(--ep-primary-light) !important;
}
[data-theme="dark"] .accordion-button::after {
  filter: invert(1) brightness(1.4);
}

/* Kafelki CMS na stronie /informacje — dark mode */
[data-theme="dark"] .ep-info-body *[style*="background:#fdf2f2"] {
  background: rgba(160,0,0,.12) !important;
  color: #e6edf3 !important;
}

/* Wrapper #ep-landing-map — izolacja stacking context dla wszystkich landingów.
   isolation bezpośrednio na kontenerze mapy (nie przez :has() na rodzicu),
   żeby działało też w przeglądarkach bez wsparcia CSS :has(). */
#ep-landing-map {
  position: relative;
  z-index: 0;
  isolation: isolate;
}


/* ── Ikony kategorii (Category::icon) - zamiast emoji ───────────────────────── */
.ep-cat-i   { display: inline-flex; align-items: center; justify-content: center; color: var(--ep-primary); line-height: 1; vertical-align: -.125em; }
.ep-cat-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1;
              width: 2em; height: 2em; border-radius: .6em; background: rgba(var(--ep-primary-rgb), .12); color: var(--ep-primary); }
.ep-cat-i svg, .ep-cat-ico svg { width: 1em; height: 1em; }
.ep-cat-ico.lg { width: 2.6em; height: 2.6em; border-radius: .7em; }
[data-theme="dark"] .ep-cat-i, [data-theme="dark"] .ep-cat-ico { color: var(--ep-primary-light, #66bb6a); }
[data-theme="dark"] .ep-cat-ico { background: rgba(var(--ep-primary-rgb), .22); }
/* na aktywnym (zielonym) chipie/przycisku ikona biała */
.is-on .ep-cat-i, .active .ep-cat-i, .btn-check:checked + * .ep-cat-i { color: inherit; }

/* ── Pas w kolorze serwisu z rysunkiem: linia osiedla przy dolnej krawędzi + dwa domki połączone ścieżką z serduszkiem ("sąsiad trafia do sąsiada").
      Okruszki na stronie ogłoszenia, nagłówek /uslugi. Gradient liczony z --ep-primary; rysunek biały, półprzezroczysty. ── */
.ep-band { position: relative; overflow: hidden; color: #fff;
    background-color: color-mix(in srgb, var(--ep-primary) 55%, #0b1410);
    background-image: linear-gradient(110deg, color-mix(in srgb, var(--ep-primary) 45%, #06100b) 0%, color-mix(in srgb, var(--ep-primary) 85%, #0b1410) 100%); }
.ep-band::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='50' viewBox='0 0 300 50'%3E%3Cg fill='none' stroke='white' stroke-opacity='0.11' stroke-width='1.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M0 49.4 H300'/%3E%3Cpath d='M12 49 V30 L27 18 L42 30 V49'/%3E%3Cpath d='M23 49 V40 H31 V49'/%3E%3Crect x='15' y='32' width='5' height='5'/%3E%3Cpath d='M58 49 V40'/%3E%3Ccircle cx='58' cy='34' r='6.5'/%3E%3Cpath d='M74 49 V22 H100 V49'/%3E%3Cpath d='M74 22 L87 15 L100 22'/%3E%3Crect x='78' y='27' width='6' height='6'/%3E%3Crect x='90' y='27' width='6' height='6'/%3E%3Crect x='78' y='37' width='6' height='6'/%3E%3Cpath d='M90 49 V39 H96 V49'/%3E%3Cpath d='M112 49 V43 M118 49 V43 M124 49 V43 M130 49 V43 M110 45 H132'/%3E%3Cpath d='M142 49 V28 L158 15 L174 28 V49'/%3E%3Cpath d='M166 20 V12 H170 V23'/%3E%3Crect x='147' y='31' width='6' height='6'/%3E%3Crect x='163' y='31' width='6' height='6'/%3E%3Cpath d='M154 49 V40 H162 V49'/%3E%3Cpath d='M190 49 V43'/%3E%3Cpath d='M190 24 L198 43 H182 Z'/%3E%3Cpath d='M210 49 V33 L222 23 L234 33 V49'/%3E%3Crect x='219' y='36' width='6' height='6'/%3E%3Cpath d='M250 49 V41'/%3E%3Ccircle cx='250' cy='35' r='5.5'/%3E%3Cpath d='M262 49 V42'/%3E%3Ccircle cx='262' cy='37' r='4.5'/%3E%3Cpath d='M276 49 V31 L287 22 L298 31 V49'/%3E%3Cpath d='M284 49 V41 H290 V49'/%3E%3C/g%3E%3C/svg%3E") repeat-x left bottom / 300px 50px; pointer-events: none; }
.ep-band::after { content: ''; position: absolute; top: 50%; right: max(1rem, calc((100% - 1320px) / 2)); width: 260px; height: min(64px, calc(100% - .5rem)); transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='64' viewBox='0 0 300 64'%3E%0A%3Cg fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3E%0A%3Cpath d='M70 44 C110 8, 190 8, 230 40' stroke-opacity='0.45' stroke-width='1.6' stroke-dasharray='3 6'/%3E%0A%3Cpath d='M38 50 V34 L52 22 L66 34 V50 Z' stroke-opacity='0.6' stroke-width='1.6'/%3E%0A%3Cpath d='M48 50 V41 H56 V50' stroke-opacity='0.6' stroke-width='1.4'/%3E%0A%3Cpath d='M234 50 V34 L248 22 L262 34 V50 Z' stroke-opacity='0.6' stroke-width='1.6'/%3E%0A%3Cpath d='M244 50 V41 H252 V50' stroke-opacity='0.6' stroke-width='1.4'/%3E%0A%3C/g%3E%0A%3Cpath d='M150 25 C150 21 145 19 142.5 22 C140 19 135 21 135 25 C135 29 142.5 33 142.5 33 C142.5 33 150 29 150 25 Z' transform='translate(7 -6)' fill='white' fill-opacity='0.7'/%3E%0A%3C/svg%3E") no-repeat center / contain; pointer-events: none; }
.ep-band > .container { position: relative; z-index: 1; }
.ep-band .breadcrumb { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; margin: 0; --bs-breadcrumb-divider-color: rgba(255,255,255,.45); }
.ep-band .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.45); }
.ep-band .breadcrumb a, [data-theme="dark"] .ep-band .breadcrumb a { color: rgba(255,255,255,.78); text-decoration: none; }
.ep-band .breadcrumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ep-band .breadcrumb .active { color: #fff; font-weight: 600; }
.ep-band.ep-band--top::after { top: 1.4rem; transform: none; height: 64px; }   /* wysoki pas (nagłówek strony): domki w prawym górnym rogu */
@media (max-width: 767.98px) { .ep-band::after { display: none; } }