/* Podstawy i zmienne */
html { scroll-behavior: smooth; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface); border-radius: 5px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: var(--border) var(--surface); }

:root{
  --bg: #0b0f19;
  --surface: #0f1724;
  --muted: #9aa4b2;
  --text: #e6eef6;
  --border: #172032;
  --accent: #34d399;
  --accent-2: #60a5fa;
  --card-radius: 12px;
  --shadow: 0 8px 28px rgba(2,6,23,.6);
  --navy: #1e3a8a;
  --filter-field-bg: #080c15;
  --filter-field-border: #1a2235;
}
body.light-theme{
  --bg: #f7fafc;
  --surface: #ffffff;
  --muted: #64748b;
  --text: #0f172a;
  --border: #e2e8f0;
  --accent: #2563eb;
  --accent-2: #16a34a;
  --shadow: 0 8px 20px rgba(2,6,23,.06);
  --navy: #1e3a8a;
  --filter-field-bg: #f0f4f8;
  --filter-field-border: #d0d8e4;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg); color:var(--text);
  transition: background 0.3s ease, color 0.3s ease;
}

header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(0,0,0,.08), transparent);
  position:static; top:0; z-index:100;
}
.brand{display:flex; flex-direction:column}
.title{font-size:18px; font-weight:800}/* Podstawy i zmienne */
html { scroll-behavior: smooth; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface); border-radius: 5px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: var(--border) var(--surface); }

:root{
  --bg: #0b0f19;
  --surface: #0f1724;
  --muted: #9aa4b2;
  --text: #e6eef6;
  --border: #172032;
  --accent: #34d399;
  --accent-2: #60a5fa;
  --card-radius: 12px;
  --shadow: 0 8px 28px rgba(2,6,23,.6);
  --navy: #1e3a8a;
  --filter-field-bg: #080c15;
  --filter-field-border: #1a2235;
}
body.light-theme{
  --bg: #f7fafc;
  --surface: #ffffff;
  --muted: #64748b;
  --text: #0f172a;
  --border: #e2e8f0;
  --accent: #2563eb;
  --accent-2: #16a34a;
  --shadow: 0 8px 20px rgba(2,6,23,.06);
  --navy: #1e3a8a;
  --filter-field-bg: #f0f4f8;
  --filter-field-border: #d0d8e4;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg); color:var(--text);
  transition: background 0.3s ease, color 0.3s ease;
}

header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(0,0,0,.08), transparent);
  position:static; top:0; z-index:100;
}
.brand{display:flex; flex-direction:column}
.title{font-size:18px; font-weight:800}
.subtitle{font-size:12px; color:var(--muted)}
.controls{display:flex; gap:8px; align-items:center}
.btn{
  appearance:none; border:none; border-radius:999px; padding:8px 12px;
  background:var(--accent-2); color:#07203b; font-weight:700;
  cursor:pointer; transition: all 0.2s ease, transform 0.1s ease;
  display:flex; align-items:center; gap:6px;
}
.btn:hover {transform: translateY(-2px);}
.btn.ghost{background:transparent; border:1px solid var(--border); color:var(--text); padding:8px}

.map-toggle-btn{
  border-radius:999px; background:var(--accent-2); color:#07203b;
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; transition:.3s; box-shadow:0 2px 6px rgba(0,0,0,.15);
  padding:8px 12px; gap:6px;
}
.map-toggle-btn:hover{ transform:scale(1.05); box-shadow:0 4px 8px rgba(0,0,0,.2); }

.login-section{ display:flex; gap:12px; margin-left:auto; padding:0 20px; }
.login-btn{ padding:8px 16px; border-radius:6px; text-decoration:none; font-weight:600; font-size:14px; transition:.2s; display:flex; align-items:center; gap:6px; }
.login-btn.login{ background:transparent; border:1px solid var(--accent-2); color:var(--accent-2); }
.login-btn.add-ad{ background:var(--accent-2); color:white; border:1px solid var(--accent-2); }
.login-btn.login:hover{ background:rgba(96,165,250,.1); }
.login-btn.add-ad:hover{ background:var(--accent); }
body.light-theme .login-btn.login { border-color:var(--accent); color:var(--accent); }

body.light-theme .btn#apply { background:var(--navy); color:white; }
body.light-theme .login-btn.add-ad { background:var(--navy); color:white; border-color:var(--navy); }
body.light-theme .map-toggle-btn { background:var(--navy); color:white; }
body.light-theme .login-btn.add-ad:hover,
body.light-theme .btn#apply:hover,
body.light-theme .map-toggle-btn:hover { background:#152c6e; }

body.light-theme .btn.ghost { background:transparent; border:1px solid var(--border); color:var(--text); }
body.light-theme .btn.ghost:hover { background:rgba(0,0,0,.05); }

/* Nawigacja kategorii */
#category-nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--border);
  overflow-x:auto; position:sticky; top:64px; z-index:90;
}
.category-buttons{ display:flex; gap:8px; flex-wrap:wrap; }
.category-btn{
  appearance:none; border:none; border-radius:999px; padding:8px 16px;
  background:var(--filter-field-bg); color:var(--text);
  font-size:14px; font-weight:600; white-space:nowrap; cursor:pointer; transition:.2s;
}
.category-btn:hover{ background:var(--accent-2); color:white; }
.category-btn.active{ background:var(--accent); color:white; }
body.light-theme .category-btn.active, body.light-theme .category-btn:hover { background:var(--navy); color:white; }

.nav-controls{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

/* --- FIX: minmax(0, …) i min-width:0 --- */
.layout{
  display:grid;
  grid-template-columns: 255px minmax(0,1fr) minmax(0,0.93fr);
  height: calc(100vh - 64px - 56px);
  transition: grid-template-columns 0.3s ease;
}
.layout.map-collapsed { grid-template-columns: 300px minmax(0,1fr) 0px; }
.layout.filters-collapsed{ grid-template-columns: 0px minmax(0,1fr) minmax(0,1.6fr); }
.layout.filters-collapsed.map-collapsed{ grid-template-columns: 0px minmax(0,1fr) 0px; }

.col{ position:relative; min-height:0; min-width:0; overflow:auto; transition: width .3s ease; }
.col:not(:last-child)::after{
  content:''; position:absolute; top:0; right:0; width:1px; height:100%;
  background-color:var(--border); transition:opacity .3s ease;
}

/* Bezpieczniki */
.layout > * { min-width:0; min-height:0; overflow:auto; }
#filters, #list, #mapCol, .items-container { min-width:0; }

/* Resizer */
.map-col, .filters-col{ transition:width .28s ease, opacity .28s ease; }
.map-col.hidden, .filters-col.hidden{ width:0; opacity:0; pointer-events:none; }
.resizer{ position:absolute; top:0; right:0; width:6px; height:100%; cursor:col-resize; z-index:10; transition: background-color .2s; }
.resizer:hover, .resizer.active{ background-color:var(--accent); }
.col:last-child .resizer{ display:none; }

/* Filtry i pola */
#filters{ padding:16px; overflow:auto; background:var(--bg); height:100%; transition: opacity .3s; }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--card-radius); padding:14px; margin-bottom:14px; box-shadow:var(--shadow); transition: all .3s; }
.card h3{ margin:0 0 10px; font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
label{ font-size:14px; color:var(--muted); display:block; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
input[type="text"], select, input[type="number"]{
  width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid var(--filter-field-border); background:var(--filter-field-bg) !important;
  color:var(--text); outline:none; transition:border-color .2s; font-size:14px;
}
input[type="text"]:focus, select:focus, input[type="number"]:focus{
  border-color:var(--accent); box-shadow:0 0 0 2px rgba(52,211,153,.2);
}
input::placeholder{color:var(--muted)}
.row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; transition: all .3s; }
.actions{ display:flex; gap:10px; transition: all .3s; }

/* Lista */
#list{ display:flex; flex-direction:column; padding:0; overflow:auto; background:var(--bg); height:100%; }
.toolbar-container{
  position:sticky; top:0; background:var(--bg); z-index:50;
  padding:12px; border-bottom:1px solid var(--border); box-shadow:0 4px 10px rgba(0,0,0,.1);
}
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:0; }
.count{ font-size:15px; color:var(--muted); white-space:nowrap; }

.main-search{ display:flex; align-items:center; gap:10px; flex:1; }
.search-box{ flex:1; position:relative; }
.search-box i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); }
.search-box input{
  width:100%; padding:12px 12px 12px 42px; border-radius:30px; border:2px solid var(--accent-2);
  background:var(--surface); color:var(--text); font-size:14px; outline:none; transition:border-color .2s;
}
.search-box input:focus{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(52,152,219,.2); }

.search-button{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:var(--accent-2); border:none; border-radius:50%; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:white; transition:.2s;
}
.search-button:hover{ background:var(--accent); transform:translateY(-50%) scale(1.05); }
body.light-theme .search-button{ background:var(--navy); }
body.light-theme .search-button:hover{ background:#152c6e; }

.items-container{ flex:1; overflow-y:auto; padding:0 12px 12px; }
.item{
  display:grid; grid-template-columns:120px 1fr auto; gap:85px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:6px;
  padding:6px; margin:6px 0; transition:transform .12s, box-shadow .12s; cursor:pointer; min-height:152px;
}
.item:hover{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(2,6,23,.45); }
.thumb{ width:140px; height:140px; border-radius:10px; background:linear-gradient(135deg, rgba(255,255,255,.02), transparent); object-fit:cover; display:flex; align-items:center; justify-content:center; font-size:24px; }
.thumb img{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
.meta{ font-size:14px; color:var(--muted); }
.price_gross{ font-weight:900; font-size:26px; color:var(--accent); text-align:right; }
.item-title{ font-size:18px; font-weight:700; margin-bottom:6px; }
.chip{ font-size:14px; background:transparent; border:1px solid var(--border); border-radius:999px; padding:6px 10px; margin-right:8px; transition: background .2s; }

/* Mapa */
#map-container{
  width:calc(100% - 16px); aspect-ratio:1/1; margin:8px; border-radius:var(--card-radius);
  border:2px solid var(--border); box-shadow:var(--shadow); overflow:hidden; background:var(--surface);
  transition: all .3s; position:sticky; top:70px;
}
#map{ width:100%; height:100%; transition: all .3s; }

.price_gross-marker{ display:flex; align-items:center; justify-content:center; flex-direction:column; pointer-events:auto; }
.price_gross-marker .circle{
  width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 8px rgba(2,6,23,.45); background:var(--surface); border:1.5px solid var(--accent);
  color:var(--text); transition: all .3s; font-weight:700;
}
body.light-theme .price_gross-marker .circle{ border:1.5px solid var(--accent-2); }
.price_gross-marker .val{ font-size:14px; font-weight:400; line-height:1; padding:2px; text-align:center; }

.marker-cluster-custom{
  background:var(--navy); border:2px solid var(--navy); box-shadow:0 4px 8px rgba(2,6,23,.35);
  border-radius:50%; color:white; font-weight:700; text-align:center; display:flex; align-items:center; justify-content:center;
}
.marker-cluster-custom div{
  background:transparent !important; color:inherit !important; font-weight:700 !important;
  font-size:12px; width:100%; height:100%; display:flex; align-items:center; justify-content:center; margin:0 !important;
}

/* Paginacja */
.pagination{ display:flex; justify-content:center; align-items:center; padding:20px 0; gap:10px; }
.pagination button{
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:8px 16px; border-radius:8px; cursor:pointer; transition:.2s;
}
.pagination button:hover:not(:disabled){ background:var(--accent-2); color:white; border-color:var(--accent-2); }
.pagination button:disabled{ opacity:.5; cursor:not-allowed; }
.pagination button.active{ background:var(--accent); color:white; border-color:var(--accent); }
.pagination .page-numbers{ display:flex; gap:5px; flex-wrap:wrap; justify-content:center; }
.page-info{ margin:0 10px; font-size:14px; color:var(--muted); }

/* Animacje i motyw jasny */
.flash{ box-shadow: inset 0 0 0 3px rgba(96,165,250,.28); }
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.fade-in{ animation:fadeIn .4s ease forwards; }

body.light-theme .item{ background:#fff; border:2px solid #e0e0e0; box-shadow:0 4px 12px rgba(0,0,0,.08); }
body.light-theme .item:hover{ border-color:#c0c0c0; box-shadow:0 6px 16px rgba(0,0,0,.12); }
body.light-theme .item .meta{ color:#5a5a5a; }
body.light-theme .item .chip{ border-color:#d0d0d0; background:#f8f8f8; }
body.light-theme .item .price_gross{ color:#1e88e5; }
body.light-theme .card{ border:1px solid #e0e0e0; background:#fff; }
body.light-theme input[type="text"], body.light-theme select, body.light-theme input[type="number"]{
  border-color:#d0d0d0; background:#fff;
}

/* Link w popupie */
.popup-link{ color:#000 !important; text-decoration:none; font-weight:700; transition:.2s; }
.popup-link:hover{ text-decoration:underline; }

/* Wyszukiwarka w headerze */
.header-search{ display:flex; align-items:center; flex:1; max-width:600px; margin:0 20px; }
.header-search .main-search{ width:100%; display:flex; align-items:center; }
.header-search .search-box{ flex:1; margin-bottom:0; }
.header-search .count{ margin-left:10px; white-space:nowrap; }
@media (max-width:980px){ .header-search{ display:none; } }

/* RWD */
@media (max-width:980px){
  .layout{ grid-template-columns:1fr; height:auto; }
  .col{ border-right:none; }
  .map-col{ order:3; }
  #map-container{ height:48vh; aspect-ratio:unset; margin:8px; top:0; }
  .item{ grid-template-columns:120px 1fr auto; min-height:140px; }
  .thumb{ width:120px; height:120px; }
  .controls{ flex-direction:column; align-items:flex-end; }
  .resizer{ display:none; }
  .layout.map-collapsed #list{ grid-column:auto; }
  .layout.map-collapsed #mapCol{ display:block; }
  .login-section{ display:none; }
  .toolbar{ flex-direction:column; align-items:stretch; }
  .main-search{ width:100%; }
  #category-nav{ top:64px; flex-direction:column; align-items:stretch; gap:12px; }
  .nav-controls{ justify-content:center; }
}
@media (max-width:768px){
  .item{ grid-template-columns:100px 1fr auto; min-height:130px; padding:14px; }
  .thumb{ width:100px; height:100px; }
  .item-title{ font-size:17px; }
  .price_gross{ font-size:24px; }
  #category-nav{ padding:8px; }
  .nav-controls{ flex-direction:column; align-items:stretch; }
}
@media (max-width:480px){
  .brand .title{ font-size:16px; }
  .row{ grid-template-columns:1fr; }
  .toolbar{ flex-direction:column; align-items:flex-start; gap:10px; }
  .toolbar input[type="text"]{ max-width:100%; }
  .controls{ flex-direction:row; flex-wrap:wrap; justify-content:flex-end; }
  .controls .btn{ font-size:12px; padding:6px 10px; }
  .item{ grid-template-columns:90px 1fr auto; min-height:120px; padding:12px; gap:12px; }
  .thumb{ width:90px; height:90px; }
  .item-title{ font-size:16px; margin-bottom:4px; }
  .price_gross{ font-size:22px; }
  .chip{ font-size:12px; padding:4px 8px; }
  .btn span{ display:none; }
  .btn i{ margin-right:0; }
  .pagination{ flex-direction:column; gap:8px; }
  #category-nav{ padding:8px 12px; }
  .category-btn{ padding:6px 12px; font-size:12px; }
  .search-button{ display:flex; right:6px; width:28px; height:28px; }
  .nav-controls .btn span{ display:none; }
  
}





/* 📸 Zdjęcia w proporcji 4:3 */
.thumb {
  width: 200px !important;         /* szerokość zdjęcia (możesz zmienić np. 240px) */
  aspect-ratio: 4 / 3 !important;  /* proporcje */
  height: auto !important;         /* wysokość wynika z proporcji */
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* wypełnia ramkę bez zniekształcenia */
  border-radius: 8px;
}




/* wyłaczam zaokrąglenie rogów zdjęć */
.thumb,
.thumb img {
  border-radius: 10 !important;
}







/*Wysrodkowanie kategorii oraz przeniesienie przycisku "ukryj filtry" na lewą stronę"*/

/* ================= Cookie Banner (light/dark aware) ================ */
#cookie-banner[aria-hidden="true"] { display: none !important; }

#cookie-banner {
  position: fixed;
  inset: auto 0 0 0;               /* bottom bar */
  z-index: 9999;                    /* ponad mapą/overlayami */
  display: grid;
  place-items: center;
  padding: 0.75rem;
  pointer-events: none;             /* klikają tylko elementy wewnątrz */
}

#cookie-banner .cb__inner {
  pointer-events: auto;
  width: min(980px, 100%);
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid var(--cb-border);
  background: var(--cb-bg);
  color: var(--cb-fg);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: .9rem 1rem;
}

#cookie-banner .cb__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

#cookie-banner .cb__link {
  color: var(--cb-accent);
  text-underline-offset: 3px;
}

#cookie-banner .cb__actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: end;
}

#cookie-banner .cb__btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: .6rem .9rem;
  font-size: .92rem;
  cursor: pointer;
  transition: transform .05s ease, opacity .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}

#cookie-banner .cb__btn:active { transform: translateY(1px); }

#cookie-banner .cb__btn--primary {
  background: var(--cb-accent);
  color: var(--cb-button-fg);
  border-color: color-mix(in oklab, var(--cb-accent), black 12%);
}

#cookie-banner .cb__btn--secondary {
  background: transparent;
  color: var(--cb-fg);
  border-color: var(--cb-border);
}

/* ========== Kolory: automatyczne z motywu (light/dark) ========== */
/* Domyślne (light) */
:root {
  --cb-bg: #ffffff;
  --cb-fg: #111318;
  --cb-border: #E5E7EB;
  --cb-accent: #2563EB;       /* niebieski przycisku/linków */
  --cb-button-fg: #ffffff;
}

/* prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  :root {
    --cb-bg: #101114F2;
    --cb-fg: #F5F7FB;
    --cb-border: #2B2F36;
    --cb-accent: #60A5FA;     /* jaśniejszy akcent w dark */
    --cb-button-fg: #0B1220;
  }
}

/* Wymuś przez klasę lub atrybut na <html> lub <body> */
html.dark, body.dark, [data-theme="dark"] {
  --cb-bg: #101114F2;
  --cb-fg: #F5F7FB;
  --cb-border: #2B2F36;
  --cb-accent: #60A5FA;
  --cb-button-fg: #0B1220;
}

html.light, body.light, [data-theme="light"] {
  --cb-bg: #ffffff;
  --cb-fg: #111318;
  --cb-border: #E5E7EB;
  --cb-accent: #2563EB;
  --cb-button-fg: #ffffff;
}

/* Małe ekrany: pionowa akcja */
@media (max-width: 640px) {
  #cookie-banner .cb__inner {
    grid-template-columns: 1fr;
  }
  #cookie-banner .cb__actions {
    justify-content: stretch;
  }
  #cookie-banner .cb__btn { flex: 1; }
}



/* Upewnij się, że klik działa na całym banerze */
#cookie-banner { pointer-events: auto !important; }

/* (dla pewności) gdy ukryty, naprawdę znika */
#cookie-banner[aria-hidden="true"],
#cookie-banner.is-hidden { display: none !important; }



[hidden]{ display:none !important; }








/* WYLOGUJ = takie same kolory jak ZALOGUJ */
header .login-section .login-btn.logout{
  background: transparent !important;
  border: 1px solid var(--accent-2) !important;
  color: var(--accent-2) !important;
}
header .login-section .login-btn.logout:hover{
  background: rgba(96,165,250,.1) !important; /* jak .login-btn.login:hover */
}

/* W trybie jasnym tak jak .login-btn.login */
body.light-theme header .login-section .login-btn.logout{
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.subtitle{font-size:12px; color:var(--muted)}
.controls{display:flex; gap:8px; align-items:center}
.btn{
  appearance:none; border:none; border-radius:999px; padding:8px 12px;
  background:var(--accent-2); color:#07203b; font-weight:700;
  cursor:pointer; transition: all 0.2s ease, transform 0.1s ease;
  display:flex; align-items:center; gap:6px;
}
.btn:hover {transform: translateY(-2px);}
.btn.ghost{background:transparent; border:1px solid var(--border); color:var(--text); padding:8px}

.map-toggle-btn{
  border-radius:999px; background:var(--accent-2); color:#07203b;
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; transition:.3s; box-shadow:0 2px 6px rgba(0,0,0,.15);
  padding:8px 12px; gap:6px;
}
.map-toggle-btn:hover{ transform:scale(1.05); box-shadow:0 4px 8px rgba(0,0,0,.2); }

.login-section{ display:flex; gap:12px; margin-left:auto; padding:0 20px; }
.login-btn{ padding:8px 16px; border-radius:6px; text-decoration:none; font-weight:600; font-size:14px; transition:.2s; display:flex; align-items:center; gap:6px; }
.login-btn.login{ background:transparent; border:1px solid var(--accent-2); color:var(--accent-2); }
.login-btn.add-ad{ background:var(--accent-2); color:white; border:1px solid var(--accent-2); }
.login-btn.login:hover{ background:rgba(96,165,250,.1); }
.login-btn.add-ad:hover{ background:var(--accent); }
body.light-theme .login-btn.login { border-color:var(--accent); color:var(--accent); }

body.light-theme .btn#apply { background:var(--navy); color:white; }
body.light-theme .login-btn.add-ad { background:var(--navy); color:white; border-color:var(--navy); }
body.light-theme .map-toggle-btn { background:var(--navy); color:white; }
body.light-theme .login-btn.add-ad:hover,
body.light-theme .btn#apply:hover,
body.light-theme .map-toggle-btn:hover { background:#152c6e; }

body.light-theme .btn.ghost { background:transparent; border:1px solid var(--border); color:var(--text); }
body.light-theme .btn.ghost:hover { background:rgba(0,0,0,.05); }

/* Nawigacja kategorii */
#category-nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--border);
  overflow-x:auto; position:static; top:64px; z-index:90;
}
.category-buttons{ display:flex; gap:8px; flex-wrap:wrap; }
.category-btn{
  appearance:none; border:none; border-radius:999px; padding:8px 16px;
  background:var(--filter-field-bg); color:var(--text);
  font-size:14px; font-weight:600; white-space:nowrap; cursor:pointer; transition:.2s;
}
.category-btn:hover{ background:var(--accent-2); color:white; }
.category-btn.active{ background:var(--accent); color:white; }
body.light-theme .category-btn.active, body.light-theme .category-btn:hover { background:var(--navy); color:white; }

.nav-controls{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

/* --- FIX: minmax(0, …) i min-width:0 --- */
.layout{
  display:grid;
  grid-template-columns: 255px minmax(0,1fr) minmax(0,0.93fr);
  height: calc(100vh - 64px - 56px);
  transition: grid-template-columns 0.3s ease;
}
.layout.map-collapsed { grid-template-columns: 300px minmax(0,1fr) 0px; }
.layout.filters-collapsed{ grid-template-columns: 0px minmax(0,1fr) minmax(0,1.6fr); }
.layout.filters-collapsed.map-collapsed{ grid-template-columns: 0px minmax(0,1fr) 0px; }

.col{ position:relative; min-height:0; min-width:0; overflow:auto; transition: width .3s ease; }
.col:not(:last-child)::after{
  content:''; position:absolute; top:0; right:0; width:1px; height:100%;
  background-color:var(--border); transition:opacity .3s ease;
}

/* Bezpieczniki */
.layout > * { min-width:0; min-height:0; overflow:auto; }
#filters, #list, #mapCol, .items-container { min-width:0; }

/* Resizer */
.map-col, .filters-col{ transition:width .28s ease, opacity .28s ease; }
.map-col.hidden, .filters-col.hidden{ width:0; opacity:0; pointer-events:none; }
.resizer{ position:absolute; top:0; right:0; width:6px; height:100%; cursor:col-resize; z-index:10; transition: background-color .2s; }
.resizer:hover, .resizer.active{ background-color:var(--accent); }
.col:last-child .resizer{ display:none; }

/* Filtry i pola */
#filters{ padding:16px; overflow:auto; background:var(--bg); height:100%; transition: opacity .3s; }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--card-radius); padding:14px; margin-bottom:14px; box-shadow:var(--shadow); transition: all .3s; }
.card h3{ margin:0 0 10px; font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
label{ font-size:14px; color:var(--muted); display:block; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
input[type="text"], select, input[type="number"]{
  width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid var(--filter-field-border); background:var(--filter-field-bg) !important;
  color:var(--text); outline:none; transition:border-color .2s; font-size:14px;
}
input[type="text"]:focus, select:focus, input[type="number"]:focus{
  border-color:var(--accent); box-shadow:0 0 0 2px rgba(52,211,153,.2);
}
input::placeholder{color:var(--muted)}
.row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; transition: all .3s; }
.actions{ display:flex; gap:10px; transition: all .3s; }

/* Lista */
#list{ display:flex; flex-direction:column; padding:0; overflow:auto; background:var(--bg); height:100%; }
.toolbar-container{
  position:sticky; top:0; background:var(--bg); z-index:50;
  padding:12px; border-bottom:1px solid var(--border); box-shadow:0 4px 10px rgba(0,0,0,.1);
}
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:0; }
.count{ font-size:15px; color:var(--muted); white-space:nowrap; }

.main-search{ display:flex; align-items:center; gap:10px; flex:1; }
.search-box{ flex:1; position:relative; }
.search-box i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); }
.search-box input{
  width:100%; padding:12px 12px 12px 42px; border-radius:30px; border:2px solid var(--accent-2);
  background:var(--surface); color:var(--text); font-size:14px; outline:none; transition:border-color .2s;
}
.search-box input:focus{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(52,152,219,.2); }

.search-button{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:var(--accent-2); border:none; border-radius:50%; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:white; transition:.2s;
}
.search-button:hover{ background:var(--accent); transform:translateY(-50%) scale(1.05); }
body.light-theme .search-button{ background:var(--navy); }
body.light-theme .search-button:hover{ background:#152c6e; }

.items-container{ flex:1; overflow-y:auto; padding:0 12px 12px; }
.item{
  display:grid; grid-template-columns:120px 1fr auto; gap:85px; align-items:center;
  background:var(--surface); border:1px solid var(--border); border-radius:6px;
  padding:6px; margin:6px 0; transition:transform .12s, box-shadow .12s; cursor:pointer; min-height:152px;
}
.item:hover{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(2,6,23,.45); }
.thumb{ width:140px; height:140px; border-radius:10px; background:linear-gradient(135deg, rgba(255,255,255,.02), transparent); object-fit:cover; display:flex; align-items:center; justify-content:center; font-size:24px; }
.thumb img{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
.meta{ font-size:14px; color:var(--muted); }
.price_gross{ font-weight:900; font-size:26px; color:var(--accent); text-align:right; }
.item-title{ font-size:18px; font-weight:700; margin-bottom:6px; }
.chip{ font-size:14px; background:transparent; border:1px solid var(--border); border-radius:999px; padding:6px 10px; margin-right:8px; transition: background .2s; }

/* Mapa */
#map-container{
  width:calc(100% - 16px); aspect-ratio:1/1; margin:8px; border-radius:var(--card-radius);
  border:2px solid var(--border); box-shadow:var(--shadow); overflow:hidden; background:var(--surface);
  transition: all .3s; position:sticky; top:70px;
}
#map{ width:100%; height:100%; transition: all .3s; }

.price_gross-marker{ display:flex; align-items:center; justify-content:center; flex-direction:column; pointer-events:auto; }
.price_gross-marker .circle{
  width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 8px rgba(2,6,23,.45); background:var(--surface); border:1.5px solid var(--accent);
  color:var(--text); transition: all .3s; font-weight:700;
}
body.light-theme .price-marker .circle{ border:1.5px solid var(--accent-2); }
.price_gross-marker .val{ font-size:14px; font-weight:400; line-height:1; padding:2px; text-align:center; }

.marker-cluster-custom{
  background:var(--navy); border:2px solid var(--navy); box-shadow:0 4px 8px rgba(2,6,23,.35);
  border-radius:50%; color:white; font-weight:700; text-align:center; display:flex; align-items:center; justify-content:center;
}
.marker-cluster-custom div{
  background:transparent !important; color:inherit !important; font-weight:700 !important;
  font-size:12px; width:100%; height:100%; display:flex; align-items:center; justify-content:center; margin:0 !important;
}

/* Paginacja */
.pagination{ display:flex; justify-content:center; align-items:center; padding:20px 0; gap:10px; }
.pagination button{
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:8px 16px; border-radius:8px; cursor:pointer; transition:.2s;
}
.pagination button:hover:not(:disabled){ background:var(--accent-2); color:white; border-color:var(--accent-2); }
.pagination button:disabled{ opacity:.5; cursor:not-allowed; }
.pagination button.active{ background:var(--accent); color:white; border-color:var(--accent); }
.pagination .page-numbers{ display:flex; gap:5px; flex-wrap:wrap; justify-content:center; }
.page-info{ margin:0 10px; font-size:14px; color:var(--muted); }

/* Animacje i motyw jasny */
.flash{ box-shadow: inset 0 0 0 3px rgba(96,165,250,.28); }
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.fade-in{ animation:fadeIn .4s ease forwards; }

body.light-theme .item{ background:#fff; border:2px solid #e0e0e0; box-shadow:0 4px 12px rgba(0,0,0,.08); }
body.light-theme .item:hover{ border-color:#c0c0c0; box-shadow:0 6px 16px rgba(0,0,0,.12); }
body.light-theme .item .meta{ color:#5a5a5a; }
body.light-theme .item .chip{ border-color:#d0d0d0; background:#f8f8f8; }
body.light-theme .item .price_gross{ color:#1e88e5; }
body.light-theme .card{ border:1px solid #e0e0e0; background:#fff; }
body.light-theme input[type="text"], body.light-theme select, body.light-theme input[type="number"]{
  border-color:#d0d0d0; background:#fff;
}

/* Link w popupie */
.popup-link{ color:#000 !important; text-decoration:none; font-weight:700; transition:.2s; }
.popup-link:hover{ text-decoration:underline; }

/* Wyszukiwarka w headerze */
.header-search{ display:flex; align-items:center; flex:1; max-width:600px; margin:0 20px; }
.header-search .main-search{ width:100%; display:flex; align-items:center; }
.header-search .search-box{ flex:1; margin-bottom:0; }
.header-search .count{ margin-left:10px; white-space:nowrap; }
@media (max-width:980px){ .header-search{ display:none; } }

/* RWD */
@media (max-width:980px){
  .layout{ grid-template-columns:1fr; height:auto; }
  .col{ border-right:none; }
  .map-col{ order:3; }
  #map-container{ height:88vh; aspect-ratio:unset; margin:8px; top:0; }
  .item{ grid-template-columns:120px 1fr auto; min-height:140px; }
  .thumb{ width:120px; height:120px; }
  .controls{ flex-direction:column; align-items:flex-end; }
  .resizer{ display:none; }
  .layout.map-collapsed #list{ grid-column:auto; }
  .layout.map-collapsed #mapCol{ display:block; }
  .login-section{ display:none; }
  .toolbar{ flex-direction:column; align-items:stretch; }
  .main-search{ width:100%; }
  #category-nav{ top:64px; flex-direction:column; align-items:stretch; gap:12px; }
  .nav-controls{ justify-content:center; }
}
@media (max-width:768px){
  .item{ grid-template-columns:100px 1fr auto; min-height:130px; padding:14px; }
  .thumb{ width:100px; height:100px; }
  .item-title{ font-size:17px; }
  .price_gross{ font-size:24px; }
  #category-nav{ padding:8px; }
  .nav-controls{ flex-direction:column; align-items:stretch; }
}
@media (max-width:480px){
  .brand .title{ font-size:16px; }
  .row{ grid-template-columns:1fr; }
  .toolbar{ flex-direction:column; align-items:flex-start; gap:10px; }
  .toolbar input[type="text"]{ max-width:100%; }
  .controls{ flex-direction:row; flex-wrap:wrap; justify-content:flex-end; }
  .controls .btn{ font-size:12px; padding:6px 10px; }
  .item{ grid-template-columns:90px 1fr auto; min-height:120px; padding:12px; gap:12px; }
  .thumb{ width:90px; height:90px; }
  .item-title{ font-size:16px; margin-bottom:4px; }
  .price_gross{ font-size:22px; }
  .chip{ font-size:12px; padding:4px 8px; }
  .btn span{ display:none; }
  .btn i{ margin-right:0; }
  .pagination{ flex-direction:column; gap:8px; }
  #category-nav{ padding:8px 12px; }
  .category-btn{ padding:6px 12px; font-size:12px; }
  .search-button{ display:flex; right:6px; width:28px; height:28px; }
  .nav-controls .btn span{ display:none; }
  
}





/* 📸 Zdjęcia w proporcji 4:3 */
.thumb {
  width: 200px !important;         /* szerokość zdjęcia (możesz zmienić np. 240px) */
  aspect-ratio: 4 / 3 !important;  /* proporcje */
  height: auto !important;         /* wysokość wynika z proporcji */
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* wypełnia ramkę bez zniekształcenia */
  border-radius: 8px;
}




/* wyłaczam zaokrąglenie rogów zdjęć */
.thumb,
.thumb img {
  border-radius: 10 !important;
}







/*Wysrodkowanie kategorii oraz przeniesienie przycisku "ukryj filtry" na lewą stronę"*/

/* ================= Cookie Banner (light/dark aware) ================ */
#cookie-banner[aria-hidden="true"] { display: none !important; }

#cookie-banner {
  position: fixed;
  inset: auto 0 0 0;               /* bottom bar */
  z-index: 9999;                    /* ponad mapą/overlayami */
  display: grid;
  place-items: center;
  padding: 0.75rem;
  pointer-events: none;             /* klikają tylko elementy wewnątrz */
}

#cookie-banner .cb__inner {
  pointer-events: auto;
  width: min(980px, 100%);
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid var(--cb-border);
  background: var(--cb-bg);
  color: var(--cb-fg);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: .9rem 1rem;
}

#cookie-banner .cb__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

#cookie-banner .cb__link {
  color: var(--cb-accent);
  text-underline-offset: 3px;
}

#cookie-banner .cb__actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: end;
}

#cookie-banner .cb__btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: .6rem .9rem;
  font-size: .92rem;
  cursor: pointer;
  transition: transform .05s ease, opacity .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}

#cookie-banner .cb__btn:active { transform: translateY(1px); }

#cookie-banner .cb__btn--primary {
  background: var(--cb-accent);
  color: var(--cb-button-fg);
  border-color: color-mix(in oklab, var(--cb-accent), black 12%);
}

#cookie-banner .cb__btn--secondary {
  background: transparent;
  color: var(--cb-fg);
  border-color: var(--cb-border);
}

/* ========== Kolory: automatyczne z motywu (light/dark) ========== */
/* Domyślne (light) */
:root {
  --cb-bg: #ffffff;
  --cb-fg: #111318;
  --cb-border: #E5E7EB;
  --cb-accent: #2563EB;       /* niebieski przycisku/linków */
  --cb-button-fg: #ffffff;
}

/* prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  :root {
    --cb-bg: #101114F2;
    --cb-fg: #F5F7FB;
    --cb-border: #2B2F36;
    --cb-accent: #60A5FA;     /* jaśniejszy akcent w dark */
    --cb-button-fg: #0B1220;
  }
}

/* Wymuś przez klasę lub atrybut na <html> lub <body> */
html.dark, body.dark, [data-theme="dark"] {
  --cb-bg: #101114F2;
  --cb-fg: #F5F7FB;
  --cb-border: #2B2F36;
  --cb-accent: #60A5FA;
  --cb-button-fg: #0B1220;
}

html.light, body.light, [data-theme="light"] {
  --cb-bg: #ffffff;
  --cb-fg: #111318;
  --cb-border: #E5E7EB;
  --cb-accent: #2563EB;
  --cb-button-fg: #ffffff;
}

/* Małe ekrany: pionowa akcja */
@media (max-width: 640px) {
  #cookie-banner .cb__inner {
    grid-template-columns: 1fr;
  }
  #cookie-banner .cb__actions {
    justify-content: stretch;
  }
  #cookie-banner .cb__btn { flex: 1; }
}



/* Upewnij się, że klik działa na całym banerze */
#cookie-banner { pointer-events: auto !important; }

/* (dla pewności) gdy ukryty, naprawdę znika */
#cookie-banner[aria-hidden="true"],
#cookie-banner.is-hidden { display: none !important; }



[hidden]{ display:none !important; }





/* 🔧 Uchwyt do zmiany szerokości kolumn – pokaż też dla mapy (ostatniej kolumny) */
#mapCol .resizer{ display:block !important; }
.resizer{ cursor:col-resize; width:6px; right:0; top:0; height:100%; position:absolute; z-index:10; }
.resizer:hover, .resizer.active{ background:var(--accent); }







/* Mapa dopasowana do wysokości okna – automatycznie liczy TOP */
#map-container{
  position: sticky;
  top: var(--stack-top, 120px);                 /* ile miejsca zajmują header + pasek kategorii */
  aspect-ratio: unset !important;
  height: calc(100vh - var(--stack-top, 120px) - 16px) !important;  /* 16px = Twoje marginesy 8+8 */
}
#map{
  height: 100% !important;
  min-height: 240px; /* bezpieczne minimum */
}

/* Na telefonach mapa niższa, bez sticky (wygodniej przewijać) */
@media (max-width: 980px){
  #map-container{
    position: static;
    height: 50vh !important;
  }
}




/* Pokaż login-section zawsze (również na mobile) */
header .login-section { display: flex !important; gap: 12px; align-items: center; }
@media (max-width: 980px){
  header .login-section { display: flex !important; }
}





/* ===== User menu ("Witaj, [imię]") ===== */
.user-menu { position: relative; }
.user-btn{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:8px;
  background:transparent; border:1px solid var(--accent-2);
  color:var(--accent-2); font-weight:700; cursor:pointer;
  transition:.2s;
}
.user-btn:hover{ background:rgba(96,165,250,.10); }
body.light-theme .user-btn{ border-color:var(--accent); color:var(--accent); }
.user-btn .caret{ font-size: .9em; opacity:.8; }

.user-dropdown{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width: 200px; padding:6px;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  box-shadow: var(--shadow); z-index: 200;
}
.user-item{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:10px 12px;
  background:transparent; border:none; color:inherit;
  text-decoration:none; cursor:pointer; border-radius:8px;
}
.user-item:hover{ background:rgba(96,165,250,.12); }
.user-item i{ width:18px; text-align:center; }























/* === Linki w kartach jak wcześniej (bez „niebieskich” stylów) === */
.item a[data-view] {
  color: inherit;
  text-decoration: none;
}
.item .item-title a[data-view] {
  font-weight: 700;
}
.item a[data-view]:hover .item-title,
.item .item-title a[data-view]:hover {
  text-decoration: underline;
}

/* Miniatura jako pełny klikalny blok */
.item .thumb a[data-view]{
  display: block;
  width: 100%;
  height: 100%;
}

/* „Pokaż na mapie” – zgodne z Twoim ghost */
.item .btn[data-focus]{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  font-weight:600;
}
.item .btn[data-focus]:hover{
  background: rgba(96,165,250,.12);
}
body.light-theme .item .btn[data-focus]:hover{
  background: rgba(0,0,0,.05);
}

/* Karta – delikatniejszy „podniesiony” hover jak wcześniej */
.item{
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.item:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(2,6,23,.45);
}
body.light-theme .item:hover{
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  border-color:#cfd8e3;
}

/* Cena po prawej – wyrównanie, brak łamania */
.item .price_gross{
  white-space: nowrap;
  align-self: center;
}

/* Focus (z klawiatury) – miękki ring wg motywu */
.item a[data-view]:focus-visible,
.item .btn[data-focus]:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
  border-radius: 10px;
}

/* Leaflet popup – ciemny/jasny zgodny z resztą */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.leaflet-popup-content{
  margin: 10px 12px;
}
.leaflet-container a.popup-link{
  color: var(--accent-2);
  text-decoration: none;
  font-weight: 700;
}
.leaflet-container a.popup-link:hover{
  text-decoration: underline;
}

/* Mapa – obramowanie i promienie jak w kartach */
#map-container{
  border-radius: var(--card-radius);
  border: 2px solid var(--border);
  overflow: hidden;
}

/* Licznik wyników – stabilna wysokość, żeby nie „skakał” układ */
#count{
  min-height: 1.2em;
}

/* Zapewnij, że kolumna 2 zawsze ma miejsce (gdyby coś ją „przygniotło”) */
#list{
  position: relative;
  z-index: 1;
}

/* (opcjonalnie) subtelny efekt „flash” po kliknięciu Pokaż na mapie */
.item.flash{
  box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--accent-2), transparent 70%);
  transition: box-shadow .4s ease;
}








/* Tytuły produktów w liście (kolumna 2) */
#list .item .item-title { color: #fff; }                /* tryb nocny (domyślnie) */
body.light-theme #list .item .item-title { color: #000; } /* tryb dzienny */

/* jeśli tytuł jest linkiem – niech dziedziczy ten kolor */
#list .item .item-title a[data-view] { color: inherit; }




/* === UŁOŻENIE KAFELKA: cena w prawym górnym, przycisk w prawym dolnym === */

/* 1) Uporządkuj siatkę karty */
#list .item{
  display: grid !important;
  grid-template-columns: auto 1fr auto; /* miniatura | treść | kolumna prawa */
  grid-template-rows: auto 1fr auto;   /* góra | środek | dół */
  gap: 12px 16px;                      /* (wiersze, kolumny) */
  align-items: start;
}

/* 2) Miniatura – od góry do dołu w pierwszej kolumnie */
#list .item .thumb{
  grid-column: 1;
  grid-row: 1 / -1; /* zajmij wszystkie rzędy */
}

/* 3) Hack: pozwól dzieciom .meta „wejść” do siatki rodzica */
#list .item .meta{ display: contents; }

/* 4) Tytuł/opisy do kolumny środkowej (2) */
#list .item .item-title,
#list .item .chips{
  grid-column: 2;
}

/* 5) CENA – prawa kolumna, górny róg */
#list .item .price_gross{
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  margin: 0;              /* usuń ewentualne marginesy */
  white-space: nowrap;    /* nie łam linii */
}

/* 6) PRZYCISK „Pokaż na mapie” – prawa kolumna, dolny róg */
#list .item .btn[data-focus]{
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
  align-self: end;
}

/* (opcjonalnie) odrobina oddechu, gdy treści dużo */
@media (max-width: 980px){
  #list .item{ gap: 10px 12px; }
}


.leaflet-marker-pane, .marker-cluster, .price-marker { opacity: 1 !important; }
.price-marker .circle {
  display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: white; border: 2px solid #1d4ed8; /* niebieska obwódka */
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.price-marker .val { font: 600 12px/1.2 system-ui; color:#111; text-align:center; padding: 4px; }


/* --- RĘCZNE POSZERZANIE KOLUMN --- */
.layout .col { position: relative; }

.resizer {
  position: absolute;
  top: 0; right: -4px;
  width: 8px; height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 50;
}
.resizer::before{
  content:"";
  position:absolute; top:0; bottom:0; left:3px;
  width:2px; background: currentColor; opacity:.15;
  pointer-events: none;
}
.resizer:hover::before{ opacity:.35; }
.layout.resizing .resizer::before{ opacity:.6; }

/* Gdy kolumna jest ukryta – wyłącz uchwyt */
.layout.map-collapsed #mapCol .resizer { display:none; }
.layout.filters-collapsed #filters .resizer { display:none; }

/* --- GRID sterowany zmiennymi --- */
.layout {
  display: grid;
  grid-template-columns: var(--w-filters, 260px) minmax(0, 1fr) var(--w-map, 520px);
  gap: 0;
}
.layout .col { position: relative; min-width: 0; }

/* Schowanie kolumn przez klasy (bez JS-owego ręcznego mieszania w gridTemplateColumns) */
.layout.filters-collapsed { --w-filters: 0px; }
.layout.map-collapsed     { --w-map: 0px; }

/* --- UCHWYTY --- */
.resizer {
  position: absolute;
  top: 0; right: -4px;
  width: 8px; height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 50;
}
.resizer::before{
  content:"";
  position:absolute; top:0; bottom:0; left:3px;
  width:2px; background: currentColor; opacity:.15;
  pointer-events: none;
}
.resizer:hover::before{ opacity:.35; }

/* W trakcie przeciągania */
.layout.resizing { cursor: col-resize; }
.layout.resizing * { user-select: none !important; }

/* Jeśli mapa/filtry są schowane – nie pokazuj tam uchwytu */
.layout.map-collapsed    #mapCol    .resizer { display:none; }
.layout.filters-collapsed#filters   .resizer { display:none; }


/* GRID sterowany zmiennymi (reszta bez zmian) */
.layout{
  display:grid;
  grid-template-columns: var(--w-filters,260px) minmax(0,1fr) var(--w-map,520px);
}
.layout .col{ min-width:0; position:relative; }

/* Stany chowające kolumny */
.layout.filters-collapsed{ --w-filters:0px; }
.layout.map-collapsed{ --w-map:0px; }

/* GLOBALNY overlay z uchwytami (poza mapą, ponad wszystkim) */
#col-resizer-overlay{
  position:fixed; inset:0;
  pointer-events:none; /* tylko same uchwyty łapią eventy */
  z-index: 2147483646; /* wyżej niż cokolwiek na stronie */
}
.col-grip{
  position:fixed; top:0; width:10px; height:0; /* wysokość ustawimy w JS */
  cursor:col-resize;
  pointer-events:auto;
  /* cienka prowadnica */
}
.col-grip::before{
  content:""; position:absolute; top:0; bottom:0; left:4px; width:2px;
  background: currentColor; opacity:.18;
}
.col-grip:hover::before{ opacity:.45; }

/* podczas przeciągania wyłącz interakcje mapy, żeby nie „porywała” dotyku */
.layout.resizing #map{ pointer-events:none !important; }




/* === RESIZER OVERLAY: kolumny sterowane zmiennymi CSS === */
.layout{
  display:grid;
  grid-template-columns: var(--w-filters,260px) minmax(0,1fr) var(--w-map,520px);
}
.layout .col{ min-width:0; position:relative; }

/* Stany chowające kolumny */
.layout.filters-collapsed{ --w-filters:0px; }
.layout.map-collapsed{ --w-map:0px; }

/* GLOBALNY overlay z uchwytami (zawsze nad wszystkim) */
#col-resizer-overlay{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:2147483646;
}
.col-grip{
  position:fixed; top:0; width:12px; height:0; /* wysokość nada JS */
  cursor:col-resize;
  pointer-events:auto;
}
.col-grip::before{
  content:""; position:absolute; top:0; bottom:0; left:5px; width:2px;
  background: currentColor; opacity:.2;
}
.col-grip:hover::before{ opacity:.45; }

/* W trakcie przeciągania mapa nie „porywa” dotyku */
.layout.resizing #map { pointer-events: none !important; }






/* Grid sterowany zmiennymi: [filtry] [lista] [mapa] */
.layout{
  display:grid;
  grid-template-columns: var(--w-filters,260px) minmax(0,1fr) var(--w-map,520px);
}

/* Schowanie filtrów ≠ zmiana mapy: mapy nie dotykamy, tylko zerujemy kolumnę filtrów */
.layout.filters-collapsed{ --w-filters: 0px; }

/* (jeśli masz tryb ukrywania mapy, on niech tylko zeruje mapę) */
.layout.map-collapsed{ --w-map: 0px; }



/* --- UKŁAD: filtry | lista | mapa --- */
.layout{
  display: grid;
  grid-template-columns: var(--w-filters,260px) minmax(0,1fr) var(--w-map,520px);
}

/* Po schowaniu filtrów NIE ruszamy mapy: zerujemy tylko kolumnę filtrów.
   Środek rośnie automatycznie o wolne miejsce. */
.layout.filters-collapsed{
  grid-template-columns: 0 minmax(0, calc(100% - var(--w-map,520px))) var(--w-map,520px) !important;
}

/* (gdybyś chował mapę) */
.layout.map-collapsed{
  grid-template-columns: var(--w-filters,260px) minmax(0,1fr) 0 !important;
}







/* === KANONICZNY UKŁAD 3 KOLUMN (nadpisuje wszystko powyżej) === */
/* Filtry | Lista | Mapa
   - filtry mają MIN 30px przy przeciąganiu
   - przyciskiem "Ukryj filtry" chowamy do 0 (lista rośnie, mapa SZTYWNA)
*/
.layout{
  display: grid;
  grid-template-columns: minmax(60px, var(--w-filters,260px)) minmax(0,1fr) var(--w-map,520px);
  transition: grid-template-columns .2s ease;
}

/* Po ukryciu filtrów: filtry=0, środek rośnie, mapa NIE zmienia szerokości */
.layout.filters-collapsed{
  grid-template-columns: 0 minmax(0, calc(100% - var(--w-map,520px))) var(--w-map,520px) !important;
}

/* (opcjonalnie) Ukryj mapę przyciskiem – wtedy mapa=0 */
.layout.map-collapsed{
  grid-template-columns: minmax(60px, var(--w-filters,260px)) minmax(0,1fr) 0 !important;
}




/* ====== KROPKI NA UCHWYCIE (resizer + overlay grip) ====== */
/* Kolor kropek dziedziczy z 'color'. Dajemy domyślnie stonowany,
   a przy hover/drag rozjaśniamy. */
.resizer,
.col-grip { 
  color: var(--muted);
}

/* pionowa „drabinka” z kropek pośrodku uchwytu */
.resizer::after,
.col-grip::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 28px;
  /* kropki co 6px – wygląd „•••” */
  background:
    radial-gradient(currentColor 2px, transparent 2px) center/100% 6px repeat-y;
  opacity: .6;
  pointer-events: none;
  border-radius: 3px;
}

/* gdy najedziesz lub przeciągasz – mocniejszy akcent */
.resizer:hover::after,
.col-grip:hover::after,
.layout.resizing .resizer::after,
.layout.resizing .col-grip::after{
  opacity: .95;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.15));
}

/* lekka zmiana koloru przy hoverze (opcjonalnie) */
.resizer:hover,
.col-grip:hover{
  color: var(--accent);
}

/* upewnij się, że uchwyt wystaje „na zewnątrz” o kilka px
   (masz już right:-4px; width:8px – zostaw tak) */
.resizer{
  right: -4px;           /* 4px poza kolumnę */
  width: 8px;            /* wygodniejszy chwyt */
}

/* Na mobile zwykle ukrywasz resizery – zostaw jak jest.
   Jeśli chcesz je pokazać także na mobile, usuń swoje @media które je chowa. */









   /* ===== 1) SZERSZE UCHWYTY (resizery) + kropki ===== */
.resizer,
.col-grip { color: var(--muted); }

/* sam uchwyt: szerszy o 50% */
.resizer{
  right: -6px;           /* wystaw o 6px poza kolumnę */
  width: 12px;           /* było ~8px */
}
.col-grip{               /* overlayowy chwyt, jeśli go używasz */
  width: 14px;           /* trochę szerszy niż .resizer */
}

/* pionowa „drabinka” z kropek – też większa */
.resizer::after,
.col-grip::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  width: 8px;                   /* było 6px */
  height: 36px;                 /* było ~28px */
  background:
    radial-gradient(currentColor 2.2px, transparent 2.2px) center/100% 7px repeat-y;
  opacity: .65;
  pointer-events: none;
  border-radius: 4px;
}
.resizer:hover::after,
.col-grip:hover::after,
.layout.resizing .resizer::after,
.layout.resizing .col-grip::after{
  opacity: .98;
  filter: drop-shadow(0 0 2px rgba(0,0,0,.15));
}

/* delikatna zmiana koloru przy hoverze */
.resizer:hover,
.col-grip:hover{ color: var(--accent); }

/* subtelna linia prowadząca w środku uchwytu */
.resizer::before{
  content:"";
  position:absolute; top:0; bottom:0; left:5px; /* dostosowane do width:12px */
  width:2px; background: currentColor; opacity:.15; pointer-events:none;
}

/* Na mobile zwykle chowamy uchwyty – jeśli chcesz zostawić, usuń swoje @media które je ukrywa. */


/* ===== 2) SZERSZE PASKI PRZEWIJANIA ===== */
/* Chromium/Safari/Edge */
::-webkit-scrollbar{
  width: 14px;   /* było 10px */
  height: 14px;  /* dla osi poziomej */
}
::-webkit-scrollbar-thumb{
  border-radius: 8px;      /* łagodniejsze krawędzie */
  background: var(--border);
  border: 3px solid transparent;            /* „grubszy” chwyt bez zasłaniania treści */
  background-clip: content-box;             /* zachowaj wewnętrzne marginesy */
}
::-webkit-scrollbar-thumb:hover{ background: var(--accent); }
::-webkit-scrollbar-track{ background: var(--surface); }

/* Firefox (nie ma px, tylko thin/auto) -> ustawiamy „auto” = szerszy */
* { scrollbar-width: auto; }   /* było: thin */





  /* Domyślnie: 3 kolumny: 320px | 1fr | 1fr */
  #layout {
    display: grid !important;
    grid-template-columns: 320px 1fr 1fr !important;
    gap: 0 !important;
    min-width: 0 !important;
  }
  #layout > .col { min-width: 0 !important; }

  /* Gdy filtry ukryte: 2 kolumny: (lista rośnie) | (mapa o stałej szerokości) */
  /* --map-col ustawimy z JS na aktualną szerokość mapy w px */
  #layout.filters-hidden {
    grid-template-columns: 1fr var(--map-col, 500px) !important;
  }
  #layout.filters-hidden .filters-col { display: none !important; }

  /* Mapa niech wypełnia swoją kolumnę */
  #map-container, #map { width: 100% !important; height: 100% !important; }


  



  /* mapa schowana → lista przejmuje miejsce mapy */
  #layout.map-hidden {
    grid-template-columns: 320px 1fr 0 !important;
  }
  #layout.map-hidden .map-col {
    display: none !important;
  }

  /* gdy jednocześnie filtry schowane i mapa schowana → tylko lista */
  #layout.filters-hidden.map-hidden {
    grid-template-columns: 1fr !important;
  }



  /* Siatka (jak masz już te reguły, zostaw swoje) */
  #layout{
    display:grid!important;
    grid-template-columns: var(--filters-col,261px) 1fr var(--map-col,500px)!important;
    gap:0!important; min-width:0!important;
  }
  #layout.filters-hidden{ grid-template-columns: 1fr var(--map-col,500px)!important; }
  #layout.filters-hidden .filters-col{ display:none!important; }
  #layout.map-hidden{ grid-template-columns: var(--filters-col,261px) 1fr 0!important; }
  #layout.map-hidden .map-col{ display:none!important; }
  #layout.filters-hidden.map-hidden{ grid-template-columns: 1fr!important; }

  /* Kolumny + chwytaki */
  .col{ position:relative; min-width:0; }
  .resizer{
    position:absolute; top:0; bottom:0; width:10px;
    cursor:col-resize; user-select:none; z-index:2000; /* ponad mapą */
    background: transparent; /* duże pole trafienia, niewidoczne */
  }
  .resizer:hover::after{ opacity:.4; }
  .resizer::after{
    content:""; position:absolute; top:0; bottom:0; left:4px; width:2px;
    background: currentColor; color: rgba(0,0,0,.15); opacity:.2;
  }

  /* Pozycja chwytaków */
  .filters-col .resizer{ right:0; }   /* prawa krawędź filtrów */
  .map-col .resizer{ left:0; }        /* lewa krawędź mapy   */

  /* Podczas drag blokujemy zaznaczanie/klik w treść */
  body.dragging { cursor: col-resize !important; }
  body.dragging * { cursor: inherit !important; }


  /* 🔒 Wyłącz chwytak środkowej kolumny, żeby nie zasłaniał filtra */
#list .resizer {
  pointer-events: none !important;
  display: none !important;
}

/* 🧲 Chwytaki aktywne: filtry (po prawej krawędzi) i mapa (po lewej) */
.resizer {
  position: absolute;
  top: 0; bottom: 0;
  width: 14px;                 /* większy hitbox */
  cursor: col-resize;
  user-select: none;
  touch-action: none;          /* mobilki / iOS */
  background: transparent;
}

/* Filtry – wysuń delikatnie na prawo (nadchodząca lista i tak jest pod spodem) */
.filters-col .resizer {
  right: 0px;                 /* lekko poza kolumnę */
  z-index: 4000;               /* ponad wszystkim obok */
}

/* Mapa – standardowo po lewej */
.map-col .resizer {
  left: -7px;
  z-index: 3000;
}

/* Wskazówka wizualna (cienka linia) */
.resizer::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 6px; width: 2px;
  background: rgba(0,0,0,.15);
}

/* === Kropkowane chwytaki (gripy) na resizerach === */

/* bazowy kolor w trybie jasnym/ciemnym */
.resizer { color: rgba(0,0,0,.35); }
html.dark .resizer, body.dark .resizer { color: rgba(255,255,255,.45); }

/* cienka linia, jeśli chcesz — usuń jeśli zbędna */
.resizer::after{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:2px;
  transform: translateX(-50%);
  background: currentColor; opacity:.12; pointer-events:none;
}

/* kropki – zawsze na wierzchu, nie łapią zdarzeń */
.resizer::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:6px; height:6px; border-radius:50%;
  transform: translate(-50%, -50%);
  background: currentColor;
  box-shadow:
    0 -16px 0 0 currentColor,
    0 -8px  0 0 currentColor,
    0  0    0 0 currentColor,
    0  8px  0 0 currentColor,
    0 16px  0 0 currentColor;
  opacity:.55; pointer-events:none;
}

/* efekt hover/drag – bardziej widoczne */
.resizer:hover::before { opacity:.9; }
body.dragging .resizer::before { opacity: 1; }

/* pozycje chwytaków (prawa krawędź filtrów, lewa krawędź mapy) */
.filters-col .resizer{
  position:absolute; top:0; bottom:0; right:0;
  width:18px; cursor:col-resize; z-index:5000; background:transparent;
  touch-action:none; user-select:none;
}
.map-col .resizer{
  position:absolute; top:0; bottom:0; left:0;
  width:18px; cursor:col-resize; z-index:3000; background:transparent;
  touch-action:none; user-select:none;
}

/* (pewność) środkowy „uchwyt” wyłączony */
#list .resizer { display:none !important; pointer-events:none !important; }
































/* === Pozycje przycisków w kafelku === */
.item { 
  position: relative; 
  padding-right: 150px;    /* miejsce na kolumnę przycisków po prawej */
  padding-bottom: 52px;    /* miejsce na przycisk na dole */
}

/* „Ulubione” – prawa krawędź, środek w pionie */
.item .btn-fav{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

/* „Pokaż na mapie” – prawa krawędź, dół */
.item .btn-map{
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
}

/* estetyka przycisków (ghost już masz – zostawiamy) */
.item .btn-fav i { font-size: 16px; }

/* na wąskich ekranach trochę ciaśniej */
@media (max-width: 768px){
  .item { padding-right: 130px; padding-bottom: 48px; }
  .item .btn-fav, .item .btn-map { right: 10px; }
}





#list .item{
  /* BYŁO: grid-template-columns: auto 1fr auto; */
  grid-template-columns: auto 1fr max-content;  /* prawa kolumna = szerokość treści */
  padding-right: 4px;                            /* mniejszy odstęp przy prawej krawędzi */
}


#list .item .price_gross{
  grid-column: 3;
  grid-row: 1;
  justify-self: end;     /* trzyma się prawej krawędzi kolumny */
  align-self: start;
  text-align: right;
  margin-right: 0;       /* na wszelki wypadek – bez dodatkowych marginesów */
}



/* Przywrócenie owalnego przycisku dla "Pokaż na mapie" */
#list .item .btn[data-focus] {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;      /* 🔑 pełny owal */
  padding: 8px 18px;         /* szerzej w poziomie */
  font-weight: 600;
  line-height: 1.2;
}

#list .item .btn[data-focus]:hover {
  background: rgba(96,165,250,.12);
}

body.light-theme #list .item .btn[data-focus]:hover {
  background: rgba(0,0,0,.05);
}



/* ✅ Owalny, wąski poziomo przycisk "Pokaż na mapie" w prawym dolnym rogu kafelka */
#list .item .btn[data-focus]{
  /* wygląd */
  border: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--text) !important;
  border-radius: 999px !important;   /* pełny owal */
  padding: 8px 18px !important;      /* szerzej w poziomie */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;

  /* żeby nie rozciągał się na całą szerokość siatki */
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;

  /* pozycja – prawy dolny róg kafelka (jak wcześniej) */
  grid-column: 3 !important;
  grid-row: 3 !important;
  justify-self: end !important;
  align-self: end !important;
}

#list .item .btn[data-focus]:hover{
  background: rgba(96,165,250,.12) !important;
}
body.light-theme #list .item .btn[data-focus]:hover{
  background: rgba(0,0,0,.05) !important;
}



/* ✅ Przywrócona wysokość kafelków jak wcześniej */
#list .item{
  min-height: 152px !important;   /* jak wcześniej */
  padding: 6px !important;         /* jak wcześniej */
}



/* Środkowy rząd (gdzie jest „Ulubione”) ma co najmniej wysokość miniatury,
   więc przycisk ładnie centruje się w pionie */
#list .item .meta{
  min-height: 140px !important;
}

/* RWD – spójne ze starymi rozmiarami */
@media (max-width: 980px){
  #list .item{ min-height: 140px !important; }
  #list .item .thumb{ width: 120px !important; height: 120px !important; }
}
@media (max-width: 480px){
  #list .item{ min-height: 120px !important; }
  #list .item .thumb{ width: 90px !important; height: 90px !important; }
}

















/* ✅ Miniatury 4:3 jak wcześniej + stała wysokość kafelka */
:root { --thumb-w: 187px; }            /* ~187×(3/4)=140px wysokości, czyli jak poprzednio */

/* Kafelek jak wcześniej */
#list .item{
  min-height: 152px !important;
  padding: 6px !important;
}

/* Miniatura 4:3 */
#list .item .thumb{
  width: var(--thumb-w) !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
}
#list .item .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10 !important; /* jeśli chcesz nadal bez zaokrągleń */
}

/* Środkowa kolumna (żeby „Ulubione” było idealnie na środku w pionie) */
#list .item .meta{
  min-height: calc(var(--thumb-w) * 0.75) !important; /* = wysokość miniatury 4:3 */
}

/* RWD: zachowaj 4:3 i proporcjonalne wysokości jak wcześniej */
@media (max-width: 980px){
  :root { --thumb-w: 160px; }          /* 160×(3/4)=120px wysokości */
  #list .item{ min-height: 140px !important; }
}
@media (max-width: 480px){
  :root { --thumb-w: 120px; }          /* 120×(3/4)=90px wysokości */
  #list .item{ min-height: 120px !important; }
}










/* Pozycja w siatce kafelka */
#list .item .fav-btn {
  grid-column: 3;             /* prawa kolumna */
  grid-row: 2;                /* środkowy rząd = środek w pionie */
  justify-self: end;          /* prawa krawędź w poziomie */
  align-self: center;         /* wyśrodkowanie w pionie */
}

/* Styl okrągłego przycisku */
.fav-btn{
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  transition: background .2s, transform .05s, border-color .2s;
}
.fav-btn:hover { background: rgba(96,165,250,.12); }
body.light-theme .fav-btn:hover { background: rgba(0,0,0,.05); }

/* Sama ikona serca */
.fav-btn i { font-size: 18px; line-height: 1; }

/* Stan aktywny (zaznaczone ulubione) */
.fav-btn.active{
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 18%, transparent);
  color: var(--accent);
}












/* Siatka kafelka: 3 kolumny (miniatura | treść | prawa kolumna) i 3 wiersze */
#list .item{
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 12px 16px;
  min-height: 152px; /* jak było wcześniej */
}

/* Miniatura – cała lewa kolumna */
#list .item .thumb{ grid-column: 1; grid-row: 1 / -1; }

/* Ułatwienie – dzieci .meta mogą „wejść” do siatki rodzica */
#list .item .meta{ display: contents; }

/* Cena – prawy górny róg */
#list .item .price_gross{
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  margin: 0;
  white-space: nowrap;
}

/* ❤️ Ulubione – środek (pionowo), prawa strona (poziomo) */
#list .item .fav-btn{
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  align-self: center;

  /* wygląd „kółka z sercem” */
  width: 38px; height: 38px;
  display: inline-flex; align-items:center; justify-content:center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 0;
}
#list .item .fav-btn i{ font-size: 18px; line-height: 1; }
#list .item .fav-btn:hover{ background: rgba(96,165,250,.12); }

/* 📍 Pokaż na mapie – prawy dolny róg (owalny jak wcześniej) */
#list .item .btn[data-focus]{
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
  align-self: end;

  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius: 999px;          /* Owal w poziomie */
  padding: 8px 14px;
  font-weight:600;
}
#list .item .btn[data-focus]:hover{
  background: rgba(96,165,250,.12);
}














/* --- Siatka kafelka z dedykowaną kolumną na serce --- */
#list .item{
  display: grid !important;
  grid-template-columns: /* miniatura */ auto
                         /* środek    */ 1fr
                         /* prawa     */ auto
                         /* ❤️ fav    */ 56px;     /* stała „szyna” na serduszko */
  grid-template-rows: auto 1fr auto;                /* góra | środek | dół */
  gap: 12px 16px;
  align-items: start;
  min-height: 152px;                                 /* jak wcześniej */
}

/* miniatura lewa – od góry do dołu */
#list .item .thumb{
  grid-column: 1;
  grid-row: 1 / -1;
}

/* pozwól elementom .meta „wpaść” w siatkę rodzica */
#list .item .meta{ display: contents; }

/* tytuł + chipy w środkowej kolumnie */
#list .item .item-title,
#list .item .chips{
  grid-column: 2;      /* kolumna środkowa */
}

/* CENA – dosuń do prawej krawędzi kafelka */
#list .item .price_gross{
  /* zamiast samej kolumny 3, rozszerzamy obszar do prawej krawędzi */
  grid-column: 3 / -1;
  grid-row: 1;

  justify-self: end;     /* wyrównanie do prawej krawędzi obszaru */
  align-self: start;
  margin: 0;
  white-space: nowrap;

  /* zostaw miejsce na kolumnę z sercem (56px) + przerwa 8px */
  padding-right: 10px;
}


/* „Pokaż na mapie”: prawa kolumna, prawy dolny róg (bez marginesów) */
#list .item .btn[data-focus]{
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
  align-self: end;

  /* owal jak wcześniej */
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:999px;
  padding:8px 14px;
}
#list .item .btn[data-focus]:hover{
  background: rgba(96,165,250,.12);
}

/* ❤️ Serduszko: własna, wąska kolumna, zawsze wyśrodkowane w pionie i poziomie */
#list .item .fav-btn{
  grid-column: 4;           /* dedykowana kolumna */
  grid-row: 1 / -1;         /* na środku w pionie */
  justify-self: center;
  align-self: center;

  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 0;
}
#list .item .fav-btn i{ font-size: 18px; line-height: 1; }
#list .item .fav-btn:hover{ background: rgba(96,165,250,.12); }

/* responsywnie można delikatnie zmniejszyć kolumnę na serce */
@media (max-width: 520px){
  #list .item{
    grid-template-columns: auto 1fr auto 50px;
    gap: 10px 12px;
  }
  #list .item .fav-btn{ width: 34px; height: 34px; }
}



/* ——— Kafelki: stan w pionowym środku, miasto+data na dole ——— */
.items-container .item { position: relative; }

.items-container .item .meta {
  display: flex;
  flex-direction: column;
  min-height: 120px;           /* daje miejsce na środek i dół */
}

/* Stan techniczny – wycentrowany w pionie w bloku .meta */
.items-container .item .status-center {
  margin: auto 0;              /* <— to robi pionowe centrowanie */
  font-weight: 600;
  opacity: .95;
}

/* Pasek na dole: miasto + data obok siebie */
.items-container .item .meta-bottom {
  margin-top: auto;
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  opacity: .9;
}

.items-container .item .chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}




/* ===== KAFELKI: layout i kosmetyka ===== */
.items-container { display: grid; gap: 12px; }

.items-container .item{
  position: relative;
  display: grid;
  grid-template-columns: 140px 1fr auto;
  grid-auto-rows: minmax(110px, auto);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border, #1f2937);
  border-radius: 12px;
  background: var(--surface, #0f1724);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.items-container .item:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* Miniatura */
.items-container .item .thumb{
  grid-column: 1; grid-row: 1 / span 3;
  width: 140px; height: 100px;
  border-radius: 10px; overflow: hidden;
  background: rgba(148,163,184,.08);
  display:flex; align-items:center; justify-content:center;
}
.items-container .item .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Kolumna środkowa (tytuł → STAN (środek) → dół: miasto+data) */
.items-container .item .meta{
  grid-column: 2; grid-row: 1 / span 3;
  display: grid;
  grid-template-rows: auto 1fr auto; /* tytuł | środek | dół */
  min-height: 100px;
}

/* Tytuł */
.items-container .item .item-title{
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 4px;
}
.items-container .item .item-title a{
  color: var(--text, #e6eef6);
  text-decoration: none;
}
.items-container .item .item-title a:hover{ text-decoration: underline; }

/* STAN — w pionowym środku kolumny treści */
.items-container .item .status-center{
  align-self: center; justify-self: start;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(96,165,250,.12);           /* delikatne tło */
  color: #60a5fa;                              /* akcent */
  border: 1px solid rgba(96,165,250,.35);
}

/* Dół: miasto + data obok siebie */
.items-container .item .meta-bottom{
  margin-top: 6px;
  display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center;
  opacity: .95;
}
.items-container .item .chip{
  display: inline-flex; align-items:center; gap:.4rem;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(148,163,184,.14);
  color: var(--muted, #9aa4b2);
}
.items-container .item .chip i{ opacity: .9; }

/* Kolumna prawa: cena + przyciski */
.items-container .item .price_gross{
  grid-column: 3; grid-row: 1;
  align-self: start; justify-self: end;
  font-weight: 800; font-size: 16px;
  color: var(--accent, #60a5fa);
}

/* Serduszko – na środku prawej kolumny */
.items-container .item .fav-btn{
  grid-column: 3; grid-row: 2;
  align-self: center; justify-self: end;
  border: 1px solid var(--border, #1f2937);
  background: transparent;
  padding: 6px 10px; border-radius: 10px;
}
.items-container .item .fav-btn[aria-pressed="true"]{
  background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35);
}

/* „Pokaż na mapie” – dół prawej kolumny */
.items-container .item .btn-map{
  grid-column: 3; grid-row: 3;
  align-self: end; justify-self: end;
  padding: 6px 10px; border-radius: 10px;
}

/* Responsywność – na wąskich ekranach układ pionowy */
@media (max-width: 640px){
  .items-container .item{
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .items-container .item .thumb{
    grid-column: 1; grid-row: 1;
    width: 100%; height: 180px;
  }
  .items-container .item .meta{
    grid-column: 1; grid-row: 2;
    min-height: 0;
  }
  .items-container .item .price_gross,
  .items-container .item .fav-btn,
  .items-container .item .btn-map{
    grid-column: 1;
    justify-self: start;
  }
  .items-container .item .price_gross{ margin-top: 6px; }
  .items-container .item .btn-map{ justify-self: end; }
}


/* Ułóż kolumnę treści: tytuł → stan → (zaraz pod nim) miasto+data */
.items-container .item .meta{
  display: grid;
  grid-template-rows: auto auto auto; /* tytuł, stan, dół */
  min-height: 100px;
}

/* Stan nie jest już centrowany w pionie – siedzi nad dolnym wierszem */
.items-container .item .status-center{
  align-self: start;
  justify-self: start;
  margin: 6px 0 4px;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(96,165,250,.12);
  color: #60a5fa;
  border: 1px solid rgba(96,165,250,.35);
}

/* Miasto + data w jednej linii, bezpośrednio pod stanem */
.items-container .item .meta-bottom{
  margin-top: 0;               /* od razu pod stanem */
  display: flex; gap: 8px;
  flex-wrap: wrap; align-items: center;
}
.items-container .item .chip{
  display: inline-flex; align-items:center; gap:.4rem;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(148,163,184,.14);
  color: var(--muted, #9aa4b2);
}
.items-container .item .chip i{ opacity: .9; }


/* Ułóż wnętrze kafelka: tytuł (góra) → stan (przed dołem) → miasto+data (dół) */
.items-container .item .meta{
  display: grid;
  grid-template-rows: auto 1fr auto; /* 1: tytuł, 2: wolna przestrzeń + stan, 3: dół */
  row-gap: 6px;
  min-height: 120px; /* możesz zmienić */
}

/* Stan przy dolnej krawędzi sekcji treści */
.items-container .item .status-center{
  grid-row: 2;
  align-self: end;           /* oprzyj o dół rzędu 2 */
  justify-self: start;
  margin: 0;                 /* blisko meta-bottom */
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(96,165,250,.12);
  color: #60a5fa;
  border: 1px solid rgba(96,165,250,.35);
  white-space: nowrap;
}

/* Miasto + data w jednej linii, NA SAMYM DOLE (tuż pod stanem) */
.items-container .item .meta-bottom{
  grid-row: 3;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;           /* minimalny odstęp od stanu */
}

/* Wygląd „chipów” (miasto, data) */
.items-container .item .chip{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(148,163,184,.14);
  color: var(--muted, #9aa4b2);
}
.items-container .item .chip i{ opacity: .9; }


/* Przywrócenie rozmiaru i wagi ceny w kafelku */
.items-container .item .price_gross{
  font-size: 26px;     /* zmień na 20px, jeśli tak było wcześniej */
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap; /* żeby się nie łamała */
}


/* LISTA OGŁOSZEŃ — nie rozciągaj pojedynczej karty na całą szerokość */
#items.items-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 320px)); /* stałe „kafelkowe” kolumny */
  gap: 14px;
  justify-content: center;  /* ostatni rząd (i 1 karta) na środku */
  align-content: start;
}

#items .item{
  width: 100%;
  max-width: 320px;   /* dopasowane do max z minmax() */
  margin: 0;
}

/* Na bardzo wąskich ekranach karta może być pełnej szerokości */
@media (max-width: 560px){
  #items.items-container{
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
  #items .item{ max-width: none; }
}


/* LISTA OGŁOSZEŃ — układ kafelków bez rozciągania jednej karty */
#items.items-container{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;   /* 1 karta (i ostatni rząd) na środku */
  align-content: flex-start;
}

/* Pojedyncza karta: szerokość „kartowa”, responsywnie ile się zmieści */
#items.items-container > .item{
  flex: 1 1 300px;  /* baza ok. 300px, może lekko urosnąć/zmaleć */
  max-width: 360px; /* górny limit szerokości karty */
}

/* Na bardzo wąskich ekranach karta może być pełnej szerokości kolumny */
@media (max-width: 560px){
  #items.items-container > .item{
    flex-basis: 100%;
    max-width: 100%;
  }
}



/* 1) Lista: jedna kolumna, każdy kafelek na pełną szerokość */
#items.items-container{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px;
}

/* 2) Kafelek nie ma żadnych limitów szerokości i nie rozciąga się na wysokość */
#items.items-container > .item{
  width: 100% !important;
  max-width: none !important;
  height: auto !important;     /* brak pionowego rozciągania */
  flex: 0 0 auto;              /* gdyby gdzieś był flex — nie rozpychaj w pionie */
}

/* 3) Miniatura: stała, rozsądna wysokość, żeby pion nie „puchł” przy pełnej szerokości */
#items .item .thumb{
  height: 180px;               /* możesz zmienić np. na 160/200 */
  overflow: hidden;
  border-radius: 10px;
}
#items .item .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;           /* ładne przycięcie obrazka */
}

/* 4) Na wąskich ekranach miniatura może być wyższa, żeby lepiej wyglądała */
@media (max-width: 640px){
  #items .item .thumb{ height: 200px; }
}




/* podświetlenie kafelka + ładny skok */
.item { scroll-margin-top: var(--stack-top, 120px); }
.item.highlight {
  outline: 2px solid var(--accent, #34d399);
  box-shadow: 0 0 0 6px rgba(52,211,153,.25);
  border-radius: 12px;
  animation: cardPulse .8s ease-out 0s 2;
}
@keyframes cardPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

/* Przywróć pełną nieprzezroczystość markerów i ich warstwy */
.leaflet-pane.leaflet-marker-pane,
.leaflet-marker-icon,
.leaflet-marker-shadow {
  opacity: 1 !important;
  filter: none !important;
}


/* Leaflet MarkerCluster – pełna nieprzezroczystość jak „kiedyś” */
.marker-cluster-small {
  background-color: rgba(181, 226, 140, 1) !important;
}
.marker-cluster-small div {
  background-color: rgba(110, 204, 57, 1) !important;
  color: #fff;
}

.marker-cluster-medium {
  background-color: rgba(241, 211, 87, 1) !important;
}
.marker-cluster-medium div {
  background-color: rgba(240, 194, 12, 1) !important;
  color: #fff;
}

.marker-cluster-large {
  background-color: rgba(253, 156, 115, 1) !important;
}
.marker-cluster-large div {
  background-color: rgba(241, 128, 23, 1) !important;
  color: #fff;
}

/* Na wszelki wypadek: wyłącz wszelkie filtry/opacity narzucone na markery */
.leaflet-pane.leaflet-marker-pane,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.marker-cluster,
.marker-cluster div {
  opacity: 1 !important;
  filter: none !important;
}


/* --- Stopka (20px) --- */
:root { --footer-h: 20px; }

/* Zrób miejsce na stopkę, żeby nic pod nią nie wchodziło */
html, body { height: 100%; }
body { padding-bottom: var(--footer-h); }

/* Pasek stopki */
.site-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--footer-h);
  z-index: 1000;             /* nad mapą/treścią, poniżej banera cookies */
  background: var(--footer-bg, #0b0f19);
  color: var(--footer-fg, #cbd5e1);
  border-top: 1px solid rgba(125,125,125,.25);
  font: 12px/20px system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Wyrównanie treści i odstępy między linkami */
.site-footer .footer-nav{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  padding: 0 10px;
}

/* Linki */
.site-footer a{
  color: inherit;
  text-decoration: none;
  opacity: .9;
}
.site-footer a:hover,
.site-footer a:focus{
  text-decoration: underline;
  opacity: 1;
}

/* Kropki-separatory */
.site-footer .sep{ opacity: .5; }

/* Wersja jasna — dopasowanie do Twojej klasy .light-theme na <body> */
body.light-theme .site-footer{
  --footer-bg: #ffffff;
  --footer-fg: #111318;
  border-top-color: #E5E7EB;
}

/* Małe ekrany: jeśli coś się nie mieści, pozwól zawijać */
@media (max-width: 420px){
  .site-footer .footer-nav{
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: 8px;
    justify-content: center;
  }
}




/* Środkowa kolumna: +20px u góry i +20px u dołu */
:root { --footer-h: -20px; }

#list{
  /* było: padding-bottom: calc(var(--footer-h) + 12px); */
  padding-top: -20px; 
  padding-bottom: calc(var(--footer-h) + 12px + 20px); /* +20px więcej na dole */
}

/* (opcjonalnie) sama paginacja też +20px: */
#pagination{
  margin-bottom: calc(var(--footer-h) + 8px + 20px);
}







/* Zmniejsz przerwę pod paskiem kategorii do 5px */
#category-nav{
  margin-bottom: 5px !important;
}

/* Upewnij się, że kontener z kolumnami nie dodaje własnego odstępu od góry */
#layout{
  margin-top: 0 !important;
  padding-top: 0 !important;
}


.toolbar-container { margin-top: 0 !important; padding-top: 0 !important; }











/* === Stopka statyczna (nie fixed) === */
:root { --footer-h: 20px; }

/* Cofnij padding dodany wcześniej na body pod fixed stopkę */
body {
  padding-bottom: 0 !important;
}

/* Zmień stopkę na statyczną w normalnym flow dokumentu */
.site-footer{
  position: static !important;   /* zamiast fixed */
  height: var(--footer-h);
  z-index: auto;
  left: auto; right: auto; bottom: auto; /* neutralizacja poprzednich */
  /* reszta wyglądu może zostać jak była (tło/kolor/ramka/font) */
  margin-top: 12px;              /* delikatny odstęp od treści, opcjonalnie */
}

/* Jeśli wcześniej powiększaliśmy dół #list o wysokość fixed stopki — wróć do zwykłego 20px */
#list{
  padding-top: 5px;             /* jak ustalaliśmy */
  padding-bottom: 5px !important;
}

/* Paginacja bez dodatkowej rezerwy na fixed stopkę */
#pagination{
  margin-bottom: 5px !important;
}




/* Zmniejsz przerwę pod paskiem kategorii do 5px */
#category-nav{
  margin-bottom: 5px !important;
}

/* Upewnij się, że kontener z kolumnami nie dodaje własnego odstępu od góry */
#layout{
  margin-top: 0 !important;
  padding-top: 0 !important;
}


.toolbar-container { margin-top: 0 !important; padding-top: 0 !important; }





/* Miniatura w kafelku: stabilny box i cover */
.items-container .item .thumb {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #0f172a0d;            /* delikatny placeholder */
  aspect-ratio: 4 / 3;              /* ustalony stosunek — bez CLS */
}
.items-container .item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* docięcie do pudełka */
  display: block;
}





























/* ================================
   LIGHT THEME – wyższy kontrast
   ================================ */
body.light-theme {
  /* Tła i tekst */
  --bg:           #ffffff;        /* główne tło */
  --fg:           #0b1220;        /* zasadniczy tekst (ciemniejszy) */
  --fg-muted:     #334155;        /* sekundarny tekst (ciemniejszy niż wcześniej) */

  /* Powierzchnie / karty / paski */
  --surface:      #f8fafc;        /* delikatna różnica względem tła */
  --surface-2:    #f1f5f9;

  /* Obramowania (wyraźniejsze) */
  --border:       #cbd5e1;        /* ~ Slate 300 */
  --border-strong:#94a3b8;        /* ~ Slate 400 do separatorów */

  /* Akcenty */
  --accent:       #1d4ed8;        /* mocniejszy niebieski */
  --accent-600:   #1e40af;        /* hover */
  --accent-700:   #1e3a8a;        /* active */
  --accent-fg:    #ffffff;        /* kolor tekstu na akcencie */

  /* Stany */
  --success:      #166534;
  --warning:      #92400e;
  --danger:       #b91c1c;

  /* Focus ring – wyraźny, a nie jaskrawy */
  --focus:        #2563eb33;      /* półprzezroczysty niebieski */
}

/* Ogólne zastosowania (jeśli jeszcze nie masz) */
body.light-theme {
  color: var(--fg);
  background: var(--bg);
}

body.light-theme .card,
body.light-theme .toolbar,
body.light-theme header,
body.light-theme nav#category-nav,
body.light-theme .items-container {
  background: var(--surface);
  border: 1px solid var(--border);
}

/* Separatory/linie w listach, stopce itp. */
body.light-theme .sep { color: var(--border-strong); }

/* Przyciski */
body.light-theme .btn {
  color: var(--fg);
  background: #ffffff;
  border: 1px solid var(--border-strong);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
body.light-theme .btn:hover { background: var(--surface-2); }
body.light-theme .btn:active { background: #e2e8f0; }

body.light-theme .btn.ghost {
  background: transparent;
  border-color: var(--border-strong);
}

body.light-theme .btn.primary,
body.light-theme .search-button {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent-600);
}
body.light-theme .btn.primary:hover,
body.light-theme .search-button:hover {
  background: var(--accent-600);
}
body.light-theme .btn.primary:active,
body.light-theme .search-button:active {
  background: var(--accent-700);
}

/* Pola formularzy */
body.light-theme input[type="text"],
body.light-theme input[type="number"],
body.light-theme select,
body.light-theme textarea {
  background: #ffffff;
  color: var(--fg);
  border: 1px solid var(--border-strong);
}
body.light-theme input::placeholder,
body.light-theme textarea::placeholder {
  color: #64748b; /* czytelniejszy placeholder */
}

/* Focus – wyraźny, dostępny */
body.light-theme :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Nagłówek i nawigacja – minimalnie mocniejsze krawędzie */
body.light-theme header,
body.light-theme nav#category-nav {
  border-bottom: 1px solid var(--border-strong);
}

/* Kolumny – kontrastowe krawędzie między nimi */
body.light-theme .filters-col { border-right: 1px solid var(--border-strong); }
body.light-theme .map-col     { border-left:  1px solid var(--border-strong); }

/* Karty listy */
body.light-theme #items .item {
  background: #ffffff;
  border: 1px solid var(--border);
}
body.light-theme #items .item:hover {
  border-color: var(--border-strong);
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

/* Paginacja */
body.light-theme .pagination a {
  color: var(--fg);
  border: 1px solid var(--border);
  background: #fff;
}
body.light-theme .pagination a.active {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent-600);
}

/* Ikony FA – lekko przyciemnić w light */
/* body.light-theme .fas, 
body.light-theme .far,
body.light-theme .fa-solid,
body.light-theme .fa-regular {
  color: var(--fg-muted);
} */