:root{
  --bg:#f3f4f6;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --yellow:#f6c343;
  --shadow: 0 10px 30px rgba(17,24,39,.08);
  --radius:16px;

  /* micro-interactions */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t: 160ms;
  --focus: 0 0 0 4px rgba(246,195,67,.35);
}

*{box-sizing:border-box}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(#f7f7f9, #f1f2f5);
}

/* smoother, more "product" feel */
a, button, .btn, input, select, textarea{transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease), opacity var(--t) var(--ease);}

/* focus states (keyboard friendly) */
:where(a,button,input,select,textarea,.btn):focus{outline:none;}
:where(a,button,input,select,textarea,.btn):focus-visible{box-shadow: var(--focus);}

/* subtle "shake" for invalid fields */
.is-invalid{border-color: rgba(239,68,68,.55) !important; box-shadow: 0 0 0 4px rgba(239,68,68,.18) !important;}
.shake{animation: shake 320ms var(--ease) 1;}
@keyframes shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)}
  75%{transform:translateX(-3px)}
  100%{transform:translateX(0)}
}

/* toast notifications */
.toast-wrap{position:fixed; right:18px; bottom:18px; z-index:9999; display:flex; flex-direction:column; gap:10px;}
.toast{
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:12px 14px;
  min-width: 260px;
  max-width: 360px;
  display:flex; gap:10px; align-items:flex-start;
  transform: translateY(8px);
  opacity:0;
  animation: toastIn 200ms var(--ease) forwards;
}
.toast .dot{width:10px;height:10px;border-radius:999px; margin-top:5px; background:#111827; opacity:.35; flex:0 0 auto;}
.toast.is-ok .dot{background:rgba(34,197,94,.85); opacity:1}
.toast.is-warn .dot{background:rgba(245,158,11,.9); opacity:1}
.toast.is-error .dot{background:rgba(239,68,68,.9); opacity:1}
.toast .t{font-weight:900; margin:0 0 2px; font-size:14px}
.toast .m{margin:0; font-weight:700; color:#111827; opacity:.85; font-size:14px; line-height:1.25}
@keyframes toastIn{to{transform:translateY(0); opacity:1}}

.container{max-width:1100px;margin:0 auto;padding:0 18px;}

.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex;align-items:center;gap:18px;height:72px;}
.brand{font-weight:900;font-size:34px;letter-spacing:-1px;text-decoration:none;color:#0b1220}
.brand span{color:#0b1220}
.nav{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav-link{color:#111827;opacity:.75;text-decoration:none;font-weight:600}
.nav-link:hover{opacity:1}
.nav-link.active{opacity:1}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;border-radius:999px;
  padding:0 6px;background:#111827;color:#fff;font-size:12px;margin-left:6px;
}

.btn{
  border:1px solid transparent;
  border-radius:12px;
  padding:12px 16px;
  font-weight:800;
  text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
}
.btn:active{transform: translateY(1px) scale(.99)}
.btn[disabled], .btn.is-disabled{opacity:.6;cursor:not-allowed;transform:none}

/* button spinner */
.btn.is-loading{position:relative; padding-right:44px;}
.btn.is-loading::after{
  content:"";
  position:absolute;
  right:14px; top:50%;
  width:16px;height:16px;
  margin-top:-8px;
  border-radius:999px;
  border:2px solid rgba(17,24,39,.28);
  border-top-color: rgba(17,24,39,.85);
  animation: spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-yellow{background:var(--yellow);color:#111827;box-shadow:0 8px 18px rgba(246,195,67,.35)}
.btn-yellow:hover{filter:brightness(.98)}
.btn-ghost{background:#fff;border-color:var(--line);color:#111827}
.btn-ghost:hover{background:#fafafa}

.hero{padding:34px 0 24px;background:
  radial-gradient(1200px 400px at 60% 40%, rgba(255,255,255,.9), rgba(255,255,255,.35)),
  url("img/hero-bg.jpg");
  background-size: cover;
  background-position:center;
}
.hint-row{display:flex;align-items:center;justify-content:flex-start;margin-top:8px}
.hint{font-size:20px;color:#111827;opacity:.75}
.flag{
  display:inline-block;
  margin-left:8px;
  font-size:26px;              /* większa flaga */
  line-height:1;
  transform-origin: 15% 50%;
  animation: flagWave 2.2s ease-in-out infinite;
  filter: drop-shadow(0 2px 2px rgba(17,24,39,.15));
}

/* delikatna animacja "powiewania" */
@keyframes flagWave{
  0%   { transform: perspective(220px) rotateY(0deg)   rotateZ(0deg)   translateY(0); }
  20%  { transform: perspective(220px) rotateY(-14deg) rotateZ(1.2deg) translateY(-1px); }
  40%  { transform: perspective(220px) rotateY(10deg)  rotateZ(-1deg)  translateY(0); }
  60%  { transform: perspective(220px) rotateY(-10deg) rotateZ(1deg)   translateY(-1px); }
  80%  { transform: perspective(220px) rotateY(12deg)  rotateZ(-1.2deg)translateY(0); }
  100% { transform: perspective(220px) rotateY(0deg)   rotateZ(0deg)   translateY(0); }
}
.h1{font-size:48px;line-height:1.05;margin:18px 0 18px;font-weight:900}
.h2{font-size:28px;margin:28px 0 14px;font-weight:900}

.search-card{
  background:rgba(255,255,255,.95);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.search-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr .8fr .8fr auto;
  gap:14px;
  align-items:end;
}
.field label{display:block;font-weight:800;margin-bottom:6px;color:#111827;opacity:.75}
.field select, .field input{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 12px;
  background:#fff;
  font-weight:700;
  outline:none;
}

.field select:hover, .field input:hover{border-color:#d6dae1;}
.field select:focus-visible, .field input:focus-visible{border-color: rgba(246,195,67,.8); box-shadow: var(--focus);}

/* subtle lift on interactive cards */
.cat-card, .ad-card, .card, .panel, .search-card{will-change: transform;}
.cat-card:hover, .ad-card:hover{transform: translateY(-2px); box-shadow: 0 16px 40px rgba(17,24,39,.10);}

/* toast */
.toast-wrap{position:fixed; right:18px; bottom:18px; z-index:9999; display:flex; flex-direction:column; gap:10px; pointer-events:none;}
.toast{
  pointer-events:auto;
  min-width: 260px;
  max-width: 360px;
  background: rgba(255,255,255,.98);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px 14px;
  display:flex; gap:10px; align-items:flex-start;
  transform: translateY(10px);
  opacity:0;
  animation: toastIn 220ms var(--ease) forwards;
}
.toast b{display:block; font-size:14px; margin-bottom:2px;}
.toast p{margin:0; color: var(--muted); font-weight:650; font-size:13px; line-height:1.35;}
.toast .dot{width:10px;height:10px;border-radius:999px; margin-top:4px; background:#111827; flex:0 0 auto;}
.toast.ok .dot{background:#16a34a;}
.toast.err .dot{background:#dc2626;}
.toast.warn .dot{background:#f59e0b;}
@keyframes toastIn{to{transform:translateY(0); opacity:1;}}
@keyframes toastOut{to{transform:translateY(10px); opacity:0;}}

/* gentle shake for invalid */
.shake{animation: shake 380ms var(--ease);}
@keyframes shake{0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}}
.btn-search{height:46px;padding:0 20px}
.arrow{font-size:12px}

.category-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin:22px 0 10px;
}

.cat-card{
  background:rgba(255,255,255,.95);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 18px 16px;
  text-decoration:none;
  color:var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:210px;
}

/* subtle lift on interactive cards */
.cat-card:hover, .ad-card:hover, .panel:hover, .card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(17,24,39,.10);
}

/* toast */
.toast-wrap{
  position:fixed;right:18px;bottom:18px;z-index:9999;
  display:flex;flex-direction:column;gap:10px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  background:rgba(255,255,255,.95);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow: 0 14px 40px rgba(17,24,39,.14);
  padding:12px 14px;
  min-width: 260px;
  max-width: 360px;
  display:flex;align-items:flex-start;gap:10px;
  animation: toastIn 220ms var(--ease) both;
}
.toast .dot{width:10px;height:10px;border-radius:999px;margin-top:5px;background:#111827}
.toast.success .dot{background:#16a34a}
.toast.error .dot{background:#dc2626}
.toast.warn .dot{background:#f59e0b}
.toast .t{font-weight:900;margin:0 0 2px;font-size:14px}
.toast .d{margin:0;color:var(--muted);font-weight:650;font-size:13px;line-height:1.25}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* >>> TU jest poprawka "za duże obrazki" <<< */
.cat-imgwrap{
  width:100%;
  height:110px;               /* mniejsza wysokość obrazka */
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:4px;
}
.cat-imgwrap img{
  max-width:220px;            /* LIMIT szerokości */
  max-height:110px;           /* LIMIT wysokości */
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

.cat-title{
  margin-top:14px;
  font-size:22px;
  font-weight:900;
  text-align:center;
  letter-spacing:.5px;
}

.latest-grid, .list-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin:14px 0 22px;
}

.card{
  background:#fff;
  content-visibility:auto;
  contain-intrinsic-size: 300px 360px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.card-img{
  width:100%;
  height:180px;
  background:#f3f4f6;
  object-fit:cover;
  display:block;
}
.card-body{padding:14px}
.card-title{font-weight:900;font-size:18px;margin:0 0 6px}
.card-meta{color:var(--muted);font-weight:700;display:flex;gap:12px;flex-wrap:wrap}
.card-price{margin-top:10px;font-weight:900;font-size:22px}
.card-actions{margin-top:12px;display:flex;gap:10px;align-items:center}
.small{font-size:12px}
.muted{color:var(--muted);font-weight:700}

.page{padding:22px 0}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.actions{display:flex;gap:10px}

/* ===== LISTA: FILTRY (pod nagłówkiem) ===== */
.list-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  margin-left:auto;
}
.list-filters select,
.list-filters input{
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 12px;
  background:#fff;
  font-weight:800;
  outline:none;
  min-width:140px;
}
.list-filters input{
  width:140px;
}
.list-filters .btn-filters{
  height:40px;
  padding:0 14px;
  border-radius:999px;
}

 (max-width: 980px){
  .list-filters{ margin-left:0; width:100%; }
  .list-filters select, .list-filters input{ flex:1 1 160px; }
}


.form-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;margin-top:12px;
}
.form-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.field-wide{grid-column: 1 / -1;}
.form-actions{display:flex;gap:10px;margin-top:14px}

.ok-box{
  margin-top:12px;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
  color:#065f46;
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
}
.empty-box{
  background:#fff;border:1px dashed var(--line);border-radius:var(--radius);
  padding:16px;color:var(--muted);font-weight:800
}

/* Empty state (lista.html) */
.empty-state{
  background:#fff;
  border:1px dashed var(--line);
  border-radius:var(--radius);
  padding:18px;
}
.empty-title{font-weight:1000;font-size:18px}
.empty-text{color:var(--muted);font-weight:800;margin-top:6px}
.empty-suggest{margin:12px 0 0 18px;color:var(--muted);font-weight:800}
.empty-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.empty-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-weight:900;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.chip:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.hidden{display:none}

.compare-wrap{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;
}
.compare-table{
  width:100%;
  border-collapse:collapse;
}
.compare-table th, .compare-table td{
  border-bottom:1px solid var(--line);
  padding:10px;
  text-align:left;
  vertical-align:top;
  font-weight:800;
}
.compare-table th{width:220px;color:var(--muted)}
.compare-hero{
  display:flex;gap:14px;align-items:center
}
.compare-hero img{
  width:120px;height:80px;border-radius:12px;object-fit:cover;border:1px solid var(--line)
}

/* ===============================
   PORÓWNYWARKA – PROSTA I PRZEJRZYSTA (jak na screenie)
   Używane na porownania.html przez app.js
   - nagłówek porównania jest w THEAD tabeli, żeby kolumny zawsze się wyrównywały
   =============================== */
.cmp-imgwrap{
  width:100%;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#f3f4f6;
}
.cmp-imgwrap img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}
.cmp-title{
  margin-top:10px;
  font-weight:1000;
  font-size:26px;
  line-height:1.15;
}
.cmp-remove{
  margin-top:8px;
  border:none;
  background:transparent;
  color:#2563eb;
  font-weight:900;
  cursor:pointer;
  padding:6px 8px;
}
.cmp-remove:hover{ text-decoration:underline; }

.cmp-tablewrap{ margin-top:6px; }
.cmp-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.cmp-head{
  text-align:center;
  padding:12px 10px;
  vertical-align:top;
}
.cmp-head .cmp-title{ margin-top:10px; }
.cmp-head .cmp-remove{ margin-top:6px; }
.cmp-table tr{ border-bottom:1px solid var(--line); }
.cmp-key{
  width:240px;
  text-align:left;
  padding:12px 10px;
  font-weight:1000;
}
.cmp-val{
  text-align:center;
  padding:12px 10px;
  font-weight:900;
}
.cmp-val.best{ color:#16a34a; }
.cmp-link{ color:#2563eb; font-weight:1000; text-decoration:underline; }

@media (max-width: 980px){
  .cmp-imgwrap img{ height:200px; }
  .cmp-key{ width:160px; }
  .cmp-title{ font-size:22px; }
}

.footer{
  margin-top:24px;
  padding:22px 0 28px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.8);
}
.footer-inner{display:flex;gap:28px;justify-content:center;flex-wrap:wrap}
.footer a{color:#111827;opacity:.7;text-decoration:none;font-weight:800}
.footer a:hover{opacity:1}

/* responsywność */
@media (max-width: 980px){
  .search-grid{grid-template-columns: 1fr 1fr; }
  .btn-search{grid-column:1/-1}
  .category-cards{grid-template-columns:1fr}
  .latest-grid, .list-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
/* ===== OGŁOSZENIE (jak na grafice) ===== */
.ad-topline{margin:8px 0 10px}
.ad-title{font-size:40px;line-height:1.1;margin:0 0 14px;font-weight:900}

.ad-grid{
  display:grid;
  grid-template-columns: 1.6fr .9fr;
  gap:18px;
  align-items:start;
}

.ad-photos{padding:0}
.photo-count-badge{
  position:absolute;
  top:12px;
  right:12px;
  background:rgba(17,24,39,.78);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:8px 12px;
  font-weight:1000;
  font-size:13px;
  line-height:1;
  backdrop-filter:saturate(140%) blur(6px);
}
.ad-main-img{
  width:100%;
  height:360px;
  object-fit:cover;
  display:block;
  background:#f3f4f6;
}
.ad-thumbs{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:10px;
  padding:12px;
}
.thumb{
  width:100%;
  height:64px;
  border-radius:12px;
  border:1px solid var(--line);
  object-fit:cover;
  cursor:pointer;
  background:#f3f4f6;
}
.thumb.active{outline:3px solid rgba(246,195,67,.8)}

.ad-seller{padding:14px}
.seller-row{display:flex;align-items:center;gap:12px}
.seller-avatar{
  width:48px;height:48px;border-radius:999px;
  background:#f3f4f6;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
}
.seller-name{font-weight:900;font-size:18px}
.seller-actions{display:flex;gap:10px;margin-top:14px}
.seller-btn{flex:1}

.trust-box{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background:#fff;
}
.trust-title{font-weight:1000;margin-bottom:8px}
.trust-list{margin:0;padding-left:18px;color:var(--muted);font-weight:800}
.trust-list li{margin:6px 0}

.ad-details{padding:16px;margin-top:16px}
.details-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:stretch;
}
.details-table{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}
.d-row{
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap:0;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.d-row:nth-child(odd){background:#fafafa}
.d-row:last-child{border-bottom:none}
.d-key{color:var(--muted);font-weight:900}
.d-val{font-weight:900}

.details-map{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.map-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.map-pin{font-size:22px}
.map-box{padding:12px}
.map-placeholder{
  width:100%;
  height:220px;
  border-radius:14px;
  border:1px solid var(--line);
  background:linear-gradient(135deg,#f3f4f6,#ffffff);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:var(--muted);
}

.ad-bottom-actions{display:flex;gap:10px;margin-top:14px}

@media (max-width: 980px){
  .ad-grid{grid-template-columns:1fr}
  .details-grid{grid-template-columns:1fr}
  .ad-title{font-size:30px}
  .ad-thumbs{grid-template-columns: repeat(4,1fr)}
}

/* Sticky CTA na mobile (nr 7) */
.sticky-cta{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:80;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 10px 30px rgba(17,24,39,.12);
}
.sticky-price{
  flex:1;
  font-weight:1000;
  font-size:16px;
  padding-left:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sticky-btn{min-width:120px}

@media (min-width: 981px){
  .sticky-cta{display:none}
}

/* =========================================================
   DODAJ OGŁOSZENIE – STYLE (SCOPED)
   Działa tylko na stronie, gdzie body ma klasę: add-page
   ========================================================= */
body.add-page .wizard-bar{
  display:flex;gap:10px;margin-top:10px;justify-content:flex-end;flex-wrap:wrap;
}
body.add-page .wizard-pill{
  border:1px solid var(--line, #e5e7eb);
  border-radius:999px;
  padding:10px 14px;
  font-weight:1000;
  background:#fff;
  color:#111;
  display:flex;
  gap:8px;
  align-items:center;
}
body.add-page .wizard-pill.active{
  background:var(--yellow, #f7c600);
  border-color:var(--yellow, #f7c600);
}
body.add-page .addlike-grid{
  display:grid;
  grid-template-columns: 1.6fr .85fr;
  gap:18px;
  margin-top:14px;
  align-items:start;
}
body.add-page .addlike-left{padding:18px}
body.add-page .addlike-right{display:flex;flex-direction:column;gap:14px}

body.add-page .section-title{font-weight:1000;font-size:18px;margin-bottom:12px}

body.add-page .w-step{display:none}
body.add-page .w-step.active{display:block}

body.add-page .cat-tiles{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-bottom:14px;
}
body.add-page .cat-tile{
  border:1px solid var(--line, #e5e7eb);
  border-radius:14px;
  padding:12px;
  background:#fff;
  cursor:pointer;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
body.add-page .cat-tile.active{
  border:2px solid var(--yellow, #f7c600);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}
body.add-page .cat-img{
  width:86px;height:56px;border-radius:12px;
  background:#f3f4f6;border:1px solid var(--line, #e5e7eb);
  background-repeat:no-repeat;background-position:center;background-size:72% 72%;
}

body.add-page .cat-ico{
  width:86px;height:56px;border-radius:12px;
  background:#f3f4f6;border:1px solid var(--line, #e5e7eb);
  display:flex;align-items:center;justify-content:center;
}
body.add-page .cat-ico svg{width:46px;height:46px;display:block}

body.add-page .cat-img-car{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'>\
<path fill='%23111' d='M12 20h40c2.2 0 4-1.8 4-4v-4c0-2-1.5-3.7-3.5-4l-6.5-1.2-4.5-6.6C44.6 0.7 43.4 0 42.2 0H21.8c-1.2 0-2.4.7-3.1 1.9L14.2 8.6 7.7 9.8C5.5 10.2 4 12 4 14.2V16c0 2.2 1.8 4 4 4h4z'/>\
<circle cx='18' cy='24' r='5' fill='%23111'/>\
<circle cx='46' cy='24' r='5' fill='%23111'/>\
<rect x='18' y='6' width='28' height='8' rx='2' fill='%23fff' opacity='.85'/>\
</svg>");
}
body.add-page .cat-img-truck{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'>\
<path fill='%23111' d='M4 6c0-2.2 1.8-4 4-4h28c2.2 0 4 1.8 4 4v14H4V6z'/>\
<path fill='%23111' d='M40 10h10l6 6v4H40v-10z'/>\
<circle cx='18' cy='24' r='5' fill='%23111'/>\
<circle cx='46' cy='24' r='5' fill='%23111'/>\
<rect x='8' y='7' width='24' height='7' rx='2' fill='%23fff' opacity='.85'/>\
</svg>");
}
body.add-page .cat-img-moto{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'>\
<circle cx='18' cy='24' r='6' fill='%23111'/>\
<circle cx='46' cy='24' r='6' fill='%23111'/>\
<path fill='%23111' d='M30 10h10l4 6h-9l-3-4h-6l-4 6h-5l6-8h7z'/>\
<path fill='%23111' d='M33 10l-3 8h4l3-8h-4z'/>\
</svg>");
}
body.add-page .cat-name{font-weight:1000;line-height:1.1}

body.add-page .form-grid.like-screen{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}
body.add-page .field{display:flex;flex-direction:column;gap:6px}
body.add-page .field label{font-weight:1000;color:#2b2b2b}
body.add-page .field input,
body.add-page .field select{
  border:1px solid var(--line, #e5e7eb);
  border-radius:12px;
  padding:12px;
  font-weight:900;
  background:#fff;
}
body.add-page .field-wide{grid-column:1/-1}
body.add-page .textarea-like{
  width:100%;
  border:1px solid var(--line, #e5e7eb);
  border-radius:12px;
  padding:12px;
  font-weight:900;
}
body.add-page .input-suffix{
  display:flex;align-items:center;
  border:1px solid var(--line, #e5e7eb);
  border-radius:12px;overflow:hidden;background:#fff;
}
body.add-page .input-suffix input{border:none;width:100%;padding:12px;font-weight:900;outline:none}
body.add-page .input-suffix span{
  padding:0 12px;font-weight:1000;color:#6b7280;border-left:1px solid var(--line, #e5e7eb);
  display:flex;align-items:center;
}
body.add-page .btn-wide{width:100%;margin-top:14px}
body.add-page .btn-row{display:flex;gap:10px;margin-top:12px}
body.add-page .btn-row .btn{flex:1}
body.add-page .steps-card{padding:14px}
body.add-page .stepbox{
  padding:12px;border-radius:12px;border:1px solid var(--line, #e5e7eb);
  font-weight:1000;color:#666;background:#fff;
}
body.add-page .stepbox.active{border:2px solid var(--yellow, #f7c600);color:#111}
body.add-page .stepline{height:14px;border-left:2px dashed #d1d5db;margin:8px 0 8px 18px}
body.add-page .help-card{padding:14px}
body.add-page .help-title{font-weight:1000;margin-bottom:10px}
body.add-page .help-list{margin:0 0 0 18px;color:#555;line-height:1.8;font-weight:800}
body.add-page .ad-thumbs{display:flex;flex-wrap:wrap;gap:10px;padding-top:10px}
body.add-page .ad-thumbs img{width:110px;height:78px;object-fit:cover;border-radius:12px;border:1px solid var(--line, #e5e7eb);background:#f3f4f6}

@media (max-width: 980px){
  body.add-page .addlike-grid{grid-template-columns:1fr}
  body.add-page .wizard-bar{justify-content:flex-start}
  body.add-page .form-grid.like-screen{grid-template-columns:1fr}
  body.add-page .cat-tiles{grid-template-columns:1fr}
}



/* ===============================
   TOP SEARCH (header) - poprawka pozycjonowania
   =============================== */
.top-search{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  max-width:540px;
  margin-left:42px; /* odsuń od MKO.pl i przesuń w stronę "Porównania" */
}
.top-search-input{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
}
.top-search-btn{
  border-radius:999px;
  padding:10px 14px;
  white-space:nowrap;
}
@media (max-width: 900px){
  .topbar-inner{flex-wrap:wrap;height:auto;padding:14px 0}
  .nav{margin-left:0}
  .top-search{order:3;max-width:none;margin-left:0;width:100%}
}

/* ===============================
   DODAJ OGŁOSZENIE - layout + kroki
   =============================== */
body.add-page .add-layout{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:22px;
  align-items:start;
  margin-top:14px;
}
@media (max-width: 980px){
  body.add-page .add-layout{grid-template-columns:1fr}
}
body.add-page .wizard-step{display:none}
body.add-page .wizard-step.active{display:block}

body.add-page .preview-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-top:10px;
}

/* miniatury w podglądzie (żeby zdjęcia nie były gigantyczne) */
body.add-page .preview-item{
  position:relative;
  border:1px solid var(--line, #e5e7eb);
  border-radius:16px;
  overflow:hidden;
  background:#f3f4f6;
}
body.add-page .preview-item img{
  width:100%;
  height:110px;
  object-fit:cover;
  display:block;
}
body.add-page .preview-item button{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--line, #e5e7eb);
  background:rgba(255,255,255,.95);
  font-weight:1000;
  cursor:pointer;
}
body.add-page .preview-item button:hover{filter:brightness(.98)}

/* upload box: HTML używa .dropzone (spięte z app.js) */
body.add-page .dropzone{
  border:2px dashed #d1d5db;
  border-radius:16px;
  padding:14px;
  background:#fff;
  outline:none;
}
body.add-page .dropzone.dragover{
  border-color: var(--yellow, #f7c600);
  background: rgba(247,198,0,.08);
}

/* ===============================
   DODAJ OGŁOSZENIE – UPLOAD ZDJĘĆ (drag&drop / wybór plików / Ctrl+V)
   Scoped do body.add-page
   =============================== */
body.add-page .upload-drop{
  border:2px dashed #d1d5db;
  border-radius:16px;
  padding:14px;
  background:#fff;
  outline:none;
}
body.add-page .upload-drop.drag{
  border-color: var(--yellow, #f7c600);
  background: rgba(247,198,0,.08);
}
body.add-page .upload-drop-title{font-weight:1000; margin-bottom:6px;}
body.add-page .upload-drop-sub{color:var(--muted); font-weight:800; line-height:1.35;}
body.add-page .upload-drop-actions{margin-top:10px;}

body.add-page .upimg{position:relative;}
body.add-page .upimg-rm{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.95);
  font-weight:1000;
  cursor:pointer;
}
body.add-page .upimg-rm:hover{filter:brightness(.98)}
@media (max-width: 520px){
  body.add-page .preview-grid{grid-template-columns: repeat(2, 1fr);}
}
body.add-page .info-card{
  padding:14px;
}
body.add-page .checklist{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:8px}
body.add-page .checklist li{display:flex; gap:10px; align-items:flex-start; color:#374151; font-weight:800}
body.add-page .check{
  width:18px;height:18px;border-radius:999px;
  border:2px solid #22c55e;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;color:#22c55e;
  flex:0 0 auto;margin-top:2px;
}
body.add-page .check.off{border-color:#d1d5db;color:#d1d5db}


/* helper for right column */
.stack{display:grid;gap:18px}
.bulb{
  width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(247,198,0,.18);
}


/* =========================================================
   IKONKI KATEGORII (jak na screenie) – bus/naczepy/maszyny/lotnictwo/łodzie
   (bez ruszania istniejących ikon osobowe/ciężarowe/moto)
   ========================================================= */

/* BUSY / DOSTAWCZE (van) */
.cat-img-bus,
.cat-img-van,
.cat-img-busy{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'>\
<path fill='%23111' d='M6 10c0-2.2 1.8-4 4-4h28c2.2 0 4 1.8 4 4v12H6V10z'/>\
<path fill='%23111' d='M42 12h10l6 6v4H42v-10z'/>\
<circle cx='20' cy='24' r='5' fill='%23111'/>\
<circle cx='46' cy='24' r='5' fill='%23111'/>\
<rect x='12' y='12' width='16' height='6' rx='2' fill='%23fff' opacity='.85'/>\
</svg>");
}

/* NACZEPY / PRZYCZEPY */
.cat-img-trailer,
.cat-img-naczepy,
.cat-img-naczepa{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'>\
<path fill='%23111' d='M6 12c0-2.2 1.8-4 4-4h34c2.2 0 4 1.8 4 4v10H6V12z'/>\
<rect x='4' y='10' width='6' height='2' fill='%23111'/>\
<circle cx='18' cy='24' r='5' fill='%23111'/>\
<circle cx='38' cy='24' r='5' fill='%23111'/>\
</svg>");
}

/* MASZYNY (tractor) */
.cat-img-machine,
.cat-img-tractor,
.cat-img-maszyny{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'>\
<path fill='%23111' d='M12 10c0-2.2 1.8-4 4-4h16c2.2 0 4 1.8 4 4v10H12V10z'/>\
<path fill='%23111' d='M36 12h8l6 6v2H36v-8z'/>\
<circle cx='22' cy='24' r='6' fill='%23111'/>\
<circle cx='46' cy='24' r='4' fill='%23111'/>\
<rect x='16' y='11' width='12' height='6' rx='2' fill='%23fff' opacity='.85'/>\
</svg>");
}

/* LOTNICTWO (plane) */
.cat-img-plane,
.cat-img-air,
.cat-img-lotnictwo{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'>\
<path fill='%23111' d='M2 16l60-4v4l-60 4v-4z'/>\
<path fill='%23111' d='M28 6h8v20h-8z'/>\
</svg>");
}

/* ŁODZIE / JACHTY (boat) */
.cat-img-boat,
.cat-img-lodzie,
.cat-img-yacht{
  background-image:url(\"data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'>\
<path fill='%23111' d='M8 18h48l-8 10H18L8 18z'/>\
<path fill='%23111' d='M32 4h3v12h-3z'/>\
<path fill='%23111' d='M35 6l16 8H35V6z'/>\
</svg>\");
}

/* Upewnij się, że ikony nie są „wyblakłe” */
.cat-img-bus, .cat-img-van, .cat-img-busy,
.cat-img-trailer, .cat-img-naczepy, .cat-img-naczepa,
.cat-img-machine, .cat-img-tractor, .cat-img-maszyny,
.cat-img-plane, .cat-img-air, .cat-img-lotnictwo,
.cat-img-boat, .cat-img-lodzie, .cat-img-yacht{
  background-repeat:no-repeat;
  background-position:center;
  background-size:72% 72%;
}


/* === MINI IKONKI LISTY (jak na screenie) === */
.mini-ico{
  width:18px;height:18px;display:inline-block;flex:0 0 auto;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  transform: translateY(1px);
}

/* czerwony bus/ciężarówka */
.mini-ico-van{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<rect width='64' height='64' rx='14' fill='none'/>\
<path d='M10 28c0-4 3-7 7-7h22c4 0 7 3 7 7v12H10V28z' fill='%23ef4444'/>\
<path d='M46 30h8l6 6v4H46V30z' fill='%23dc2626'/>\
<circle cx='22' cy='44' r='6' fill='%23111827'/>\
<circle cx='50' cy='44' r='6' fill='%23111827'/>\
<circle cx='22' cy='44' r='3' fill='%23ffffff' opacity='.9'/>\
<circle cx='50' cy='44' r='3' fill='%23ffffff' opacity='.9'/>\
<rect x='16' y='26' width='18' height='8' rx='2' fill='%23ffffff' opacity='.85'/>\
</svg>");
}

/* czerwone auto osobowe */
.mini-ico-car{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<path d='M14 36h36c3 0 6-3 6-6v-4c0-3-2-5-5-6l-7-2-5-7c-1-2-3-3-5-3H26c-2 0-4 1-5 3l-5 7-7 2c-3 1-5 3-5 6v4c0 3 3 6 6 6h4z' fill='%23ef4444'/>\
<circle cx='22' cy='44' r='6' fill='%23111827'/>\
<circle cx='46' cy='44' r='6' fill='%23111827'/>\
<circle cx='22' cy='44' r='3' fill='%23ffffff' opacity='.9'/>\
<circle cx='46' cy='44' r='3' fill='%23ffffff' opacity='.9'/>\
<rect x='24' y='20' width='20' height='8' rx='2' fill='%23ffffff' opacity='.85'/>\
</svg>");
}

/* motocykl (czarny z czerwonym akcentem) */
.mini-ico-moto{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<circle cx='20' cy='44' r='8' fill='%23111827'/>\
<circle cx='48' cy='44' r='8' fill='%23111827'/>\
<circle cx='20' cy='44' r='4' fill='%23ffffff' opacity='.9'/>\
<circle cx='48' cy='44' r='4' fill='%23ffffff' opacity='.9'/>\
<path d='M30 28h12l5 8H37l-4-5h-8l-5 8h-7l8-11h9z' fill='%23111827'/>\
<path d='M34 28l-3 10h6l3-10h-6z' fill='%23ef4444'/>\
</svg>");
}

/* maszyny (zielony traktor) */
.mini-ico-machine{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<rect x='14' y='26' width='26' height='14' rx='4' fill='%2322c55e'/>\
<path d='M40 28h10l6 7v5H40V28z' fill='%2316a34a'/>\
<circle cx='26' cy='46' r='9' fill='%23111827'/>\
<circle cx='50' cy='46' r='6' fill='%23111827'/>\
<circle cx='26' cy='46' r='4' fill='%23ffffff' opacity='.9'/>\
<circle cx='50' cy='46' r='3' fill='%23ffffff' opacity='.9'/>\
<rect x='18' y='28' width='14' height='8' rx='2' fill='%23ffffff' opacity='.85'/>\
</svg>");
}

/* lotnictwo (niebieski samolot) */
.mini-ico-plane{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<path d='M6 34l52-4v6L6 40v-6z' fill='%233b82f6'/>\
<path d='M30 12h6v40h-6z' fill='%231d4ed8' opacity='.9'/>\
</svg>");
}

/* łodzie (niebieska łódź z żółtym) */
.mini-ico-boat{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<path d='M12 34h40l-8 14H20L12 34z' fill='%230ea5e9'/>\
<path d='M18 34h28l-4 8H22l-4-8z' fill='%23f59e0b' opacity='.95'/>\
<path d='M32 14h4v18h-4z' fill='%23111827'/>\
<path d='M36 16l16 10H36V16z' fill='%236b7280'/>\
</svg>");
}

/* lista jak na screenie */
.cat-mini-list{
  margin:16px 0 0;
  padding-left:22px;
  font-weight:900;
}
.cat-mini-list li{
  margin:8px 0;
}
.cat-mini-list .row{
  display:inline-flex;
  gap:10px;
  align-items:center;
}


/* === IKONKI NA KAFELKACH KATEGORII (HOME) === */

/* === IKONKI NA KAFELKACH KATEGORII (HOME) === */
/* działa na index.html (kafelki kategorii) */
.category-cards .cat-img{
  width:110px;
  height:74px;
  border-radius:16px;
  background:#f3f4f6;
  border:1px solid var(--line, #e5e7eb);
  background-repeat:no-repeat;
  background-position:center;
  background-size:78% 78%;
  margin:6px auto 0;
}

/* ikony (SVG w CSS – zawsze działa bez obrazków) */
.category-cards .cat-img-car{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'>\
<path fill='%23111' d='M12 20h40c2.2 0 4-1.8 4-4v-4c0-2-1.5-3.7-3.5-4l-6.5-1.2-4.5-6.6C44.6.7 43.4 0 42.2 0H21.8c-1.2 0-2.4.7-3.1 1.9L14.2 8.6 7.7 9.8C5.5 10.2 4 12 4 14.2V16c0 2.2 1.8 4 4 4h4z'/>\
<circle cx='18' cy='24' r='5' fill='%23111'/>\
<circle cx='46' cy='24' r='5' fill='%23111'/>\
<rect x='18' y='6' width='28' height='8' rx='2' fill='%23fff' opacity='.85'/>\
</svg>");
}
.category-cards .cat-img-van{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'>\
<path fill='%23111' d='M6 10c0-2.2 1.8-4 4-4h28c2.2 0 4 1.8 4 4v12H6V10z'/>\
<path fill='%23111' d='M42 12h10l6 6v4H42v-10z'/>\
<circle cx='20' cy='24' r='5' fill='%23111'/>\
<circle cx='46' cy='24' r='5' fill='%23111'/>\
<rect x='12' y='12' width='16' height='6' rx='2' fill='%23fff' opacity='.85'/>\
</svg>");
}
.category-cards .cat-img-truck{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'>\
<path fill='%23111' d='M4 6c0-2.2 1.8-4 4-4h28c2.2 0 4 1.8 4 4v14H4V6z'/>\
<path fill='%23111' d='M40 10h10l6 6v4H40v-10z'/>\
<circle cx='18' cy='24' r='5' fill='%23111'/>\
<circle cx='46' cy='24' r='5' fill='%23111'/>\
<rect x='8' y='7' width='24' height='7' rx='2' fill='%23fff' opacity='.85'/>\
</svg>");
}
.category-cards .cat-img-moto{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'>\
<circle cx='18' cy='24' r='6' fill='%23111'/>\
<circle cx='46' cy='24' r='6' fill='%23111'/>\
<path fill='%23111' d='M30 10h10l4 6h-9l-3-4h-6l-4 6h-5l6-8h7z'/>\
<path fill='%23111' d='M33 10l-3 8h4l3-8h-4z'/>\
</svg>");
}
.category-cards .cat-img-machine{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'>\
<rect x='10' y='10' width='30' height='14' rx='3' fill='%23111'/>\
<circle cx='20' cy='26' r='6' fill='%23111'/>\
<circle cx='42' cy='26' r='4' fill='%23111'/>\
<rect x='40' y='12' width='16' height='6' rx='2' fill='%23111'/>\
</svg>");
}
.category-cards .cat-img-plane{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'>\
<path fill='%23111' d='M2 18L62 16v4L2 22z'/>\
<rect x='28' y='6' width='8' height='20' fill='%23111'/>\
</svg>");
}
.category-cards .cat-img-boat{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'>\
<path fill='%23111' d='M8 20h48l-10 8H18z'/>\
<rect x='30' y='6' width='4' height='14' fill='%23111'/>\
<path fill='%23111' d='M34 6l12 10H34z'/>\
</svg>");
}



/* === IKONKI KATEGORII (DOKLADNIE JAK NA SCREENIE) === */

/* wspólny wygląd ikonki (HOME + DODAJ OGŁOSZENIE) */
.cat-img{
  background-repeat:no-repeat;
  background-position:center;
  background-size:78% 78%;
}

/* HOME (kafelki na pierwszej stronie) */
.category-cards .cat-img{
  width:110px;
  height:74px;
  border-radius:16px;
  background:#f3f4f6;
  border:1px solid var(--line, #e5e7eb);
  margin:6px auto 0;
}

/* DODAJ OGŁOSZENIE (kafelki w kroku 1) */
body.add-page .cat-img{
  width:86px;
  height:56px;
  border-radius:12px;
  background:#f3f4f6;
  border:1px solid var(--line, #e5e7eb);
}

.cat-img-car{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+CiAgPHBhdGggZD0iTTE0IDM4aDM2YzQgMCA3LTMgNy03di01YzAtMy0yLTYtNS03bC03LTItNS03Yy0xLTItMy0zLTUtM0gyNmMtMiAwLTQgMS01IDNsLTUgNy03IDJjLTMgMS01IDQtNSA3djVjMCA0IDMgNyA3IDdoM3oiIGZpbGw9IiNlZjQ0NDQiLz4KICA8cmVjdCB4PSIyNCIgeT0iMjEiIHdpZHRoPSIxOCIgaGVpZ2h0PSI4IiByeD0iMiIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iLjkiLz4KICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjQ2IiByPSI3IiBmaWxsPSIjMTExODI3Ii8+CiAgPGNpcmNsZSBjeD0iNDYiIGN5PSI0NiIgcj0iNyIgZmlsbD0iIzExMTgyNyIvPgogIDxjaXJjbGUgY3g9IjIyIiBjeT0iNDYiIHI9IjMuMiIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iLjkiLz4KICA8Y2lyY2xlIGN4PSI0NiIgY3k9IjQ2IiByPSIzLjIiIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9Ii45Ii8+Cjwvc3ZnPg==");}

.cat-img-van{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+CiAgPHJlY3QgeD0iMTAiIHk9IjIyIiB3aWR0aD0iMzQiIGhlaWdodD0iMTgiIHJ4PSI2IiBmaWxsPSIjZWY0NDQ0Ii8+CiAgPHBhdGggZD0iTTQ0IDI2aDhsNiA2djhINDRWMjZ6IiBmaWxsPSIjZGMyNjI2Ii8+CiAgPHJlY3QgeD0iMTYiIHk9IjI2IiB3aWR0aD0iMTYiIGhlaWdodD0iOCIgcng9IjIiIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9Ii45Ii8+CiAgPGNpcmNsZSBjeD0iMjIiIGN5PSI0NiIgcj0iNyIgZmlsbD0iIzExMTgyNyIvPgogIDxjaXJjbGUgY3g9IjUwIiBjeT0iNDYiIHI9IjciIGZpbGw9IiMxMTE4MjciLz4KICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjQ2IiByPSIzLjIiIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9Ii45Ii8+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI0NiIgcj0iMy4yIiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIuOSIvPgo8L3N2Zz4=");}

.cat-img-moto{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+CiAgPGNpcmNsZSBjeD0iMjAiIGN5PSI0NiIgcj0iOCIgZmlsbD0iIzExMTgyNyIvPgogIDxjaXJjbGUgY3g9IjQ4IiBjeT0iNDYiIHI9IjgiIGZpbGw9IiMxMTE4MjciLz4KICA8Y2lyY2xlIGN4PSIyMCIgY3k9IjQ2IiByPSIzLjUiIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9Ii45Ii8+CiAgPGNpcmNsZSBjeD0iNDgiIGN5PSI0NiIgcj0iMy41IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIuOSIvPgogIDxwYXRoIGQ9Ik0yOCAyOGgxMmw2IDEwSDM2bC00LTVoLTlsLTUgOUgxMGw5LTE0aDl6IiBmaWxsPSIjMTExODI3Ii8+CiAgPHBhdGggZD0iTTM0IDI4bC0zIDEwaDZsMy0xMGgtNnoiIGZpbGw9IiNlZjQ0NDQiLz4KPC9zdmc+");}

.cat-img-machine{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+CiAgPHJlY3QgeD0iMTQiIHk9IjI2IiB3aWR0aD0iMjYiIGhlaWdodD0iMTYiIHJ4PSI1IiBmaWxsPSIjMjJjNTVlIi8+CiAgPHBhdGggZD0iTTQwIDI4aDEwbDYgOHY2SDQwVjI4eiIgZmlsbD0iIzE2YTM0YSIvPgogIDxyZWN0IHg9IjE4IiB5PSIyOCIgd2lkdGg9IjEyIiBoZWlnaHQ9IjgiIHJ4PSIyIiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIuOSIvPgogIDxjaXJjbGUgY3g9IjI2IiBjeT0iNDgiIHI9IjkiIGZpbGw9IiMxMTE4MjciLz4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjQ4IiByPSI2LjUiIGZpbGw9IiMxMTE4MjciLz4KICA8Y2lyY2xlIGN4PSIyNiIgY3k9IjQ4IiByPSI0IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIuOSIvPgogIDxjaXJjbGUgY3g9IjUwIiBjeT0iNDgiIHI9IjMiIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9Ii45Ii8+Cjwvc3ZnPg==");}

.cat-img-plane{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+CiAgPHBhdGggZD0iTTYgMzRsNTItNHY2TDYgNDB2LTZ6IiBmaWxsPSIjOWNhM2FmIi8+CiAgPHBhdGggZD0iTTMwIDEyaDZ2NDBoLTZ6IiBmaWxsPSIjNmI3MjgwIi8+CiAgPHBhdGggZD0iTTEwIDM2bDEwLTJ2NmwtMTAgMnYtNnoiIGZpbGw9IiM2YjcyODAiIG9wYWNpdHk9Ii45Ii8+Cjwvc3ZnPg==");}

.cat-img-boat{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+CiAgPHBhdGggZD0iTTEyIDM2aDQwbC04IDE0SDIwTDEyIDM2eiIgZmlsbD0iIzBlYTVlOSIvPgogIDxwYXRoIGQ9Ik0xOCAzNmgyOGwtNCA3SDIybC00LTd6IiBmaWxsPSIjZjU5ZTBiIiBvcGFjaXR5PSIuOTUiLz4KICA8cGF0aCBkPSJNMzIgMTRoNHYxOGgtNHoiIGZpbGw9IiMxMTE4MjciLz4KICA8cGF0aCBkPSJNMzYgMTZsMTYgMTBIMzZWMTZ6IiBmaWxsPSIjNmI3MjgwIi8+Cjwvc3ZnPg==");}

.cat-img-truck{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+CiAgPHJlY3QgeD0iMTAiIHk9IjIyIiB3aWR0aD0iMzAiIGhlaWdodD0iMTgiIHJ4PSI2IiBmaWxsPSIjZWY0NDQ0Ii8+CiAgPHBhdGggZD0iTTQwIDI2aDEwbDYgNnY4SDQwVjI2eiIgZmlsbD0iI2RjMjYyNiIvPgogIDxyZWN0IHg9IjE0IiB5PSIyNiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjgiIHJ4PSIyIiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIuOSIvPgogIDxjaXJjbGUgY3g9IjIyIiBjeT0iNDYiIHI9IjciIGZpbGw9IiMxMTE4MjciLz4KICA8Y2lyY2xlIGN4PSI0OCIgY3k9IjQ2IiByPSI3IiBmaWxsPSIjMTExODI3Ii8+CiAgPGNpcmNsZSBjeD0iMjIiIGN5PSI0NiIgcj0iMy4yIiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIuOSIvPgogIDxjaXJjbGUgY3g9IjQ4IiBjeT0iNDYiIHI9IjMuMiIgZmlsbD0iI2ZmZmZmZiIgb3BhY2l0eT0iLjkiLz4KPC9zdmc+");}

.cat-img-trailer{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+CiAgPHJlY3QgeD0iMTAiIHk9IjI0IiB3aWR0aD0iNDAiIGhlaWdodD0iMTYiIHJ4PSI1IiBmaWxsPSIjOWNhM2FmIi8+CiAgPHJlY3QgeD0iNiIgeT0iMjgiIHdpZHRoPSI2IiBoZWlnaHQ9IjQiIHJ4PSIyIiBmaWxsPSIjNmI3MjgwIi8+CiAgPGNpcmNsZSBjeD0iMjQiIGN5PSI0NiIgcj0iNyIgZmlsbD0iIzExMTgyNyIvPgogIDxjaXJjbGUgY3g9IjQyIiBjeT0iNDYiIHI9IjciIGZpbGw9IiMxMTE4MjciLz4KICA8Y2lyY2xlIGN4PSIyNCIgY3k9IjQ2IiByPSIzLjIiIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9Ii45Ii8+CiAgPGNpcmNsZSBjeD0iNDIiIGN5PSI0NiIgcj0iMy4yIiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIuOSIvPgo8L3N2Zz4=");}


/* INLINE SVG ICONS (kolorowe) */
.cat-img .ico{width:72px;height:46px;display:block}
.category-cards .cat-img .ico{width:86px;height:54px}

/* ===== LISTA: FILTRY (pod nagłówkiem) ===== */
.list-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  margin-left:auto;
}
.list-filters select,
.list-filters input{
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 12px;
  background:#fff;
  font-weight:800;
  outline:none;
  min-width:140px;
}
.list-filters input{ min-width:120px; }
.list-filters .btn-filters{
  border-radius:999px;
  padding:10px 14px;
  height:42px;
}

@media (max-width: 980px){
  .list-filters{ margin-left:0; width:100%; }
  .list-filters select,
  .list-filters input{ flex:1 1 140px; min-width:0; }
}

/* ===== LISTA: FILTRY (pod nagłówkiem) ===== */
.list-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  margin-left:auto;
}
.list-filters select,
.list-filters input{
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 12px;
  background:#fff;
  font-weight:800;
  outline:none;
  min-width:140px;
}
.list-filters input{ min-width:120px; }
.list-filters .btn-filters{
  height:42px;
  padding:0 14px;
  border-radius:999px;
}

/* Układ nagłówka listy: tytuł z lewej, filtry w środku/prawo, aktywne filtry pod spodem */
.page-head #activeFilters{
  flex-basis:100%;
  margin-top:6px;
}
.page-head #addedMsg{
  flex-basis:100%;
}

@media (max-width: 980px){
  .list-filters{ margin-left:0; }
  .list-filters select,
  .list-filters input{ min-width:46%; }
  .list-filters .btn-filters{ flex:1; }
}

/* ===== LISTA: FILTRY (pod nagłówkiem) ===== */
.list-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  margin-left:auto;
}
.list-filters select,
.list-filters input{
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 12px;
  background:#fff;
  font-weight:800;
  outline:none;
  min-width:140px;
}
.list-filters input{ min-width:120px; }
.list-filters .btn-filters{
  border-radius:999px;
  padding:10px 14px;
  height:42px;
}

@media (max-width: 980px){
  .list-filters{ margin-left:0; width:100%; }
  .list-filters select,
  .list-filters input{ flex:1 1 160px; }
  .list-filters .btn-filters{ flex:1 1 140px; }
}

/* ===== LISTA: FILTRY (pod nagłówkiem) ===== */
.list-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  margin-left:auto;
}
.list-filters select,
.list-filters input{
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 12px;
  background:#fff;
  font-weight:800;
  outline:none;
  min-width:140px;
}
.list-filters input{ min-width:120px; }
.list-filters .btn-filters{
  border-radius:999px;
  padding:10px 14px;
  height:42px;
}

@media (max-width: 980px){
  .list-filters{ margin-left:0; width:100%; }
  .list-filters select,
  .list-filters input{ flex:1 1 160px; min-width:0; }
}

/* ===== LISTA: FILTRY (pod nagłówkiem) ===== */
.list-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  margin-left:auto;
}
.list-filters select,
.list-filters input{
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 12px;
  background:#fff;
  font-weight:800;
  outline:none;
  min-width:140px;
}
.list-filters input{ min-width:120px; }
.btn-filters{border-radius:999px;padding:10px 14px;height:42px;}

@media (max-width: 980px){
  .list-filters{margin-left:0;width:100%;}
  .list-filters select, .list-filters input{flex:1;min-width:0;}
  .btn-filters{flex:1;}
}

/* =========================
   Admin panel (admin.html)
   ========================= */
.admin-msg{margin:10px 0 16px;font-size:14px;}
.admin-table-wrap{overflow:auto;}
.admin-table{width:100%;border-collapse:collapse;}
.admin-table th,.admin-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top;}
.admin-table th{text-align:left;font-weight:600;white-space:nowrap;}
.btn.btn-small{padding:6px 10px;font-size:12px;}
.btn.btn-danger{border-color:rgba(255,80,80,.6);color:#ffb3b3;}
.admin-ads-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.admin-ad-card{border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.02);}
.admin-ad-top img{width:100%;height:170px;object-fit:cover;display:block;}
.admin-ad-body{padding:10px 12px;}
.admin-ad-title{font-weight:650;line-height:1.2;margin-bottom:6px;}
.admin-ad-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;}

@media (max-width: 980px){
  .admin-ads-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 620px){
  .admin-ads-grid{grid-template-columns:1fr;}
}

/* === AUTH: typ konta (osobiste vs firmowe) === */
.company-fields{display:none;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.10)}
.company-fields.show{display:block}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.seg{display:flex;gap:10px;flex-wrap:wrap;padding:6px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-pill,999px);background:rgba(255,255,255,.03)}
.seg label{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-pill,999px);cursor:pointer;user-select:none}
.seg input{margin:0;accent-color:var(--primary,#f7c600)}
.seg label:has(input:checked){background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.10) inset}

@media (max-width:720px){
  .row2{grid-template-columns:1fr}
  .seg{border-radius:var(--radius-md,14px)}
}

/* === LISTA: extra filtry + zapisy + ostatnie wyszukiwania === */
.lf-extras{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0 6px}
.lf-check{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.88);user-select:none}
.lf-check input{accent-color:var(--primary,#f7c600)}
.lf-presets{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 2px}
.lf-recent{margin:10px 0 0}
.lf-recent-title{font-size:12px;color:rgba(255,255,255,.65);margin-bottom:6px}
.lf-recent-chips{display:flex;gap:8px;flex-wrap:wrap}

.btn.btn-sm{padding:6px 10px;font-size:12px}

/* === LISTA: licznik wyników + infinite scroll === */
.list-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 10px}
.list-count{font-size:13px;color:rgba(255,255,255,.75)}
.loadmore-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin:16px 0 28px}
.loadmore-btn{min-width:240px}
.loadmore-sentinel{height:1px;width:100%}

/* === KARTA: obserwowane (❤) === */
.btn-heart{
  width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn-heart span{font-size:18px;line-height:1;color:rgba(0,0,0,.35);transition:color .12s ease}
.btn-heart:hover{transform:translateY(-1px)}
.btn-heart.is-on{
  border-color:rgba(255,59,48,.45);
  background:rgba(255,59,48,.08);
}
.btn-heart.is-on span{color:#ff3b30}
.btn-heart:active{transform:translateY(0)}

@media (max-width:720px){
  .loadmore-btn{min-width:100%}
}


/* ===== PERF: obrazki ===== */
.card-img, .ad-img, .preview-item img{ background:#f3f4f6; }


/* === Konto: zakładki === */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 10px}
.tab{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  font-weight:900;
  cursor:pointer;
}
.tab.is-on{background:rgba(0,0,0,.06)}


/* --- Professional UX additions (hero + chips + saved searches) --- */
.sublead{margin:10px 0 12px;color:var(--muted);font-weight:700;line-height:1.35}
.hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.06);font-weight:800;font-size:13px}

.filter-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);font-weight:800;font-size:13px;margin:4px 6px 0 0}
.filter-chip .chip-x{border:none;background:transparent;color:var(--muted);font-weight:900;cursor:pointer;font-size:16px;line-height:1}
.filter-chip .chip-x:hover{color:#fff}

.saved-searches{margin-top:10px}
.saved-searches-inner{display:grid;grid-template-columns:1fr;gap:12px;padding:12px;border:1px solid rgba(0,0,0,.08);border-radius:16px;background:#fff}
@media(min-width:900px){.saved-searches-inner{grid-template-columns:1fr 1fr}}
.saved-title{font-weight:900;margin-bottom:8px}
.saved-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.08)}
.saved-link{color:#111;text-decoration:none;font-weight:800}
.saved-link:hover{text-decoration:underline}
.saved-del{border:1px solid rgba(0,0,0,.12);background:#f6f6f6;color:#111;font-weight:900;cursor:pointer;border-radius:10px;padding:6px 10px}
.saved-del:hover{background:#eee}

.trust-box{margin-top:12px;padding:12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18)}
.trust-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.trust-badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);font-weight:900;font-size:12px}
.trust-report{width:100%}



.cat-card[data-cat="wozki-widlowe"] .ico,
.cat-card[data-cat="sprzet-magazynowy"] .ico,
.cat-card[data-cat="transport-kolejowy"] .ico,
.cat-card[data-cat="sprzet-portowy"] .ico,
.cat-card[data-cat="sprzet-energetyczny"] .ico,
.cat-card[data-cat="recykling"] .ico,
.cat-card[data-cat="drony-i-roboty"] .ico,
.cat-card[data-cat="sprzet-morski-offshore"] .ico,
.cat-card[data-cat="sprzet-specjalistyczny-hightech"] .ico,
.cat-card[data-cat="sprzet-specjalistyczny"] .ico{
  filter: saturate(1.45) contrast(1.15);
  opacity: 1;
}


/* MKO ICON COLOR FIX – wyrównanie nowych ikon do starych */
.cat-card .ico {
  opacity: 1 !important;
  filter: saturate(1.6) contrast(1.25) brightness(1.05);
}



.cat-card[data-cat="wozki-widlowe"] .ico,
.cat-card[data-cat="sprzet-magazynowy"] .ico,
.cat-card[data-cat="transport-kolejowy"] .ico,
.cat-card[data-cat="sprzet-portowy"] .ico,
.cat-card[data-cat="energetyka"] .ico,
.cat-card[data-cat="recykling"] .ico,
.cat-card[data-cat="drony-i-roboty"] .ico,
.cat-card[data-cat="sprzet-morski-offshore"] .ico,
.cat-card[data-cat="sprzet-specjalistyczny-hightech"] .ico,
.cat-card[data-cat="sprzet-specjalistyczny-high-tech"] .ico,
/* na stronie dodaj-ogloszenie kafelki też używają .ico */
button[data-cat="wozki-widlowe"] .ico,
button[data-cat="sprzet-magazynowy"] .ico,
button[data-cat="transport-kolejowy"] .ico,
button[data-cat="sprzet-portowy"] .ico,
button[data-cat="energetyka"] .ico,
button[data-cat="recykling"] .ico,
button[data-cat="drony-i-roboty"] .ico,
button[data-cat="sprzet-morski-offshore"] .ico,
button[data-cat="sprzet-specjalistyczny-hightech"] .ico,
button[data-cat="sprzet-specjalistyczny-high-tech"] .ico{
  opacity: 1 !important;
  filter: saturate(1.7) contrast(1.25) brightness(1.06);
}



/* MKO ICON BOOST – mocniejsze kolory dla nowych kategorii (SVG ma wbudowane opacity, więc nadpisujemy) */
.cat-card[data-cat="wozki-widlowe"] .ico,
.cat-card[data-cat="sprzet-magazynowy"] .ico,
.cat-card[data-cat="transport-kolejowy"] .ico,
.cat-card[data-cat="sprzet-portowy"] .ico,
.cat-card[data-cat="energetyka"] .ico,
.cat-card[data-cat="recykling"] .ico,
.cat-card[data-cat="drony-i-roboty"] .ico,
.cat-card[data-cat="sprzet-morski-offshore"] .ico,
.cat-card[data-cat="sprzet-specjalistyczny-hightech"] .ico,
.cat-card[data-cat="sprzet-specjalistyczny-high-tech"] .ico,
.cat-card[data-cat="sprzet-morski"] .ico,
.cat-card[data-cat="sprzet-specjalistyczny"] .ico,
.cat-card[data-cat="high-tech"] .ico,
.cat-card[data-cat="sprzet-morski-offshore"] .ico,
.cat-card[data-cat="sprzet-energetyczny"] .ico,
button[data-cat="wozki-widlowe"] .ico,
button[data-cat="sprzet-magazynowy"] .ico,
button[data-cat="transport-kolejowy"] .ico,
button[data-cat="sprzet-portowy"] .ico,
button[data-cat="energetyka"] .ico,
button[data-cat="recykling"] .ico,
button[data-cat="drony-i-roboty"] .ico,
button[data-cat="sprzet-morski-offshore"] .ico,
button[data-cat="sprzet-specjalistyczny-hightech"] .ico,
button[data-cat="sprzet-specjalistyczny-high-tech"] .ico,
button[data-cat="sprzet-morski"] .ico,
button[data-cat="sprzet-specjalistyczny"] .ico,
button[data-cat="high-tech"] .ico,
button[data-cat="sprzet-morski-offshore"] .ico,
button[data-cat="sprzet-energetyczny"] .ico{
  opacity: 1 !important;
  filter: saturate(2.2) contrast(1.35) brightness(1.12);
}
.cat-card[data-cat="wozki-widlowe"] .ico [opacity],
.cat-card[data-cat="sprzet-magazynowy"] .ico [opacity],
.cat-card[data-cat="transport-kolejowy"] .ico [opacity],
.cat-card[data-cat="sprzet-portowy"] .ico [opacity],
.cat-card[data-cat="energetyka"] .ico [opacity],
.cat-card[data-cat="recykling"] .ico [opacity],
.cat-card[data-cat="drony-i-roboty"] .ico [opacity],
.cat-card[data-cat="sprzet-morski-offshore"] .ico [opacity],
.cat-card[data-cat="sprzet-specjalistyczny-hightech"] .ico [opacity],
.cat-card[data-cat="sprzet-specjalistyczny-high-tech"] .ico [opacity],
.cat-card[data-cat="sprzet-morski"] .ico [opacity],
.cat-card[data-cat="sprzet-specjalistyczny"] .ico [opacity],
.cat-card[data-cat="high-tech"] .ico [opacity],
.cat-card[data-cat="sprzet-morski-offshore"] .ico [opacity],
.cat-card[data-cat="sprzet-energetyczny"] .ico [opacity],
button[data-cat="wozki-widlowe"] .ico [opacity],
button[data-cat="sprzet-magazynowy"] .ico [opacity],
button[data-cat="transport-kolejowy"] .ico [opacity],
button[data-cat="sprzet-portowy"] .ico [opacity],
button[data-cat="energetyka"] .ico [opacity],
button[data-cat="recykling"] .ico [opacity],
button[data-cat="drony-i-roboty"] .ico [opacity],
button[data-cat="sprzet-morski-offshore"] .ico [opacity],
button[data-cat="sprzet-specjalistyczny-hightech"] .ico [opacity],
button[data-cat="sprzet-specjalistyczny-high-tech"] .ico [opacity],
button[data-cat="sprzet-morski"] .ico [opacity],
button[data-cat="sprzet-specjalistyczny"] .ico [opacity],
button[data-cat="high-tech"] .ico [opacity],
button[data-cat="sprzet-morski-offshore"] .ico [opacity],
button[data-cat="sprzet-energetyczny"] .ico [opacity]{
  opacity: 0.95 !important;
}



/* === DODAJ OGŁOSZENIE – LAYOUT PRO (pełna szerokość, lepsza siatka) === */
.dodaj-page .cat-grid,
.dodaj-page .categories-grid,
.dodaj-page [data-cat-grid],
.dodaj-page .add-categories-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 18px !important;
  width:100% !important;
  margin: 22px 0 18px !important;
  justify-items: stretch !important;
}

.dodaj-page .cat-tile,
.dodaj-page .cat-card,
.dodaj-page .add-category-card,
.dodaj-page [data-cat-card]{
  width:100% !important;
}

.dodaj-page .cat-tile,
.dodaj-page [data-cat-card]{
  border-radius: 16px !important;
  padding: 22px 16px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

.dodaj-page .cat-tile:hover,
.dodaj-page [data-cat-card]:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10) !important;
}

/* Ikonki kafelków – równe rozmiary (w tym drony/morski/high-tech) */
.dodaj-page .cat-tile .cat-img,
.dodaj-page [data-cat-card] .cat-img{
  width: 64px !important;
  height: 46px !important;
  margin: 0 auto 10px !important;
}

.dodaj-page .cat-tile .ico,
.dodaj-page [data-cat-card] .ico,
.dodaj-page .cat-tile img,
.dodaj-page [data-cat-card] img{
  width: 46px !important;
  height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
}

/* Kroki 1-2-3 na całą szerokość */
.dodaj-page .steps,
.dodaj-page .add-steps,
.dodaj-page [data-steps]{
  display:grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  width:100% !important;
  margin: 18px 0 22px !important;
}

@media (max-width: 820px){
  .dodaj-page .steps,
  .dodaj-page .add-steps,
  .dodaj-page [data-steps]{
    grid-template-columns: 1fr !important;
  }
}

/* Pola formularza (marka/model/podkategoria itd.) w siatce */
.dodaj-page .form-grid,
.dodaj-page .vehicle-form,
.dodaj-page .form-row,
.dodaj-page .fields-grid,
.dodaj-page [data-form-grid]{
  display:grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  width:100% !important;
  align-items: end !important;
}

/* end */



/* === DODAJ OGŁOSZENIE – FULL WIDTH / 6 W RZĘDZIE (tylko ta strona) === */
body.dodaj-page .wizard-bar{
  display:grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:12px !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  margin-top:12px !important;
}
body.dodaj-page .wizard-pill{
  justify-content:center !important;
  width:100% !important;
}

body.dodaj-page .add-layout{
  grid-template-columns: 1fr !important;   /* zamiast dwóch kolumn */
}

body.dodaj-page .cat-tiles{
  grid-template-columns: repeat(6, 1fr) !important;
  gap:14px !important;
}

@media (max-width: 1100px){
  body.dodaj-page .cat-tiles{ grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 760px){
  body.dodaj-page .cat-tiles{ grid-template-columns: repeat(2, 1fr) !important; }
}

/* równe ikonki (w tym drony/morski/high-tech) */
body.dodaj-page .cat-tile .cat-img{
  width: 64px !important;
  height: 48px !important;
}
body.dodaj-page .cat-tile .ico,
body.dodaj-page .cat-tile img{
  width: 46px !important;
  height: 46px !important;
  max-width:46px !important;
  max-height:46px !important;
}

/* pola formularza rozłożone na pełną szerokość */
body.dodaj-page .form-grid{
  display:grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:16px !important;
  width:100% !important;
}
@media (max-width: 900px){
  body.dodaj-page .form-grid{ grid-template-columns: 1fr !important; }
}



/* MKO DODAJ IKONY SQUARE – tylko rozmiar ikon w "Dodaj ogłoszenie" (bez ruszania układu 6 w rzędzie) */
.dodaj-page [data-cat-card] .cat-img{
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin: 0 auto 10px !important;
}
.dodaj-page [data-cat-card] .cat-img svg,
.dodaj-page [data-cat-card] .cat-img img,
.dodaj-page [data-cat-card] .ico{
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  display:block !important;
  object-fit: contain !important;
}
/* MKO DODAJ IKONY SQUARE end */



/* MKO DODAJ CATIMG SQUARE FINAL – ujednolicenie wszystkich kafelków w "Dodaj ogłoszenie" */
.dodaj-page [data-cat-card] .cat-img{
  width: 56px !important;
  height: 56px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 14px !important;
  margin: 0 auto 10px !important;
  background-size: 76% 76% !important;
}
.dodaj-page [data-cat-card] .cat-img svg,
.dodaj-page [data-cat-card] .cat-img img,
.dodaj-page [data-cat-card] .ico{
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  object-fit: contain !important;
}
/* MKO DODAJ CATIMG SQUARE FINAL end */

/* === MKO FIX: Rodzaj (Naczepa/Przyczepa) – estetyka jak reszta pól === */
#mkoTrailerTypeBox{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
  margin:0 !important;
  min-width:0;
}
#mkoTrailerTypeBox label{
  display:block;
  font-weight:700;
  margin:0 0 6px 0;
}
#mkoTrailerTypeBox select{
  width:100%;
  min-width:0;
  border:1px solid #d1d5db;
  border-radius:12px;
  padding:12px 12px;
  background:#fff;
}
/* Jeśli masz siatkę/wiersz pól – traktuj box jak normalne pole */
#mkoTrailerTypeBox{ align-self:stretch; }
/* === END MKO FIX === */

/* === MKO FIX: wygląd pola Rodzaj (Naczepa/Przyczepa) + aktywna ramka dla .cat-card === */
#mkoTrailerTypeBox{ display:flex; flex-direction:column; gap:6px; width:100%; margin:0 !important; min-width:0; }
#mkoTrailerTypeBox label{ display:block; font-weight:700; margin:0 0 6px 0; }
#mkoTrailerTypeBox select{ width:100%; min-width:0; border:1px solid #d1d5db; border-radius:12px; padding:12px 12px; background:#fff; }
/* ramka aktywna także dla dynamicznych kart */
.cat-card.active{ outline:2px solid #f59e0b; outline-offset:-2px; border-radius:14px; }
/* === END MKO FIX === */


/* --- MKO: Stan produktu (Nowy/Używany) --- */
.condition-frame{
  /* wygląda jak standardowe pole (select/input) w formularzu */
  border: 1px solid #d1d5db;
  background: #ffffff;
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  width: 100%;
}
.radio-inline{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}
.radio-inline input{
  transform: scale(1.1);
  margin: 0;
}