/* Publieke UI-verbeteringen (publiek-20260925b) — dicht, marktplaats-stijl. */

/* Advertentiedetail: titel niet in de kruimel op mobiel (staat al in de H1) */
@media (max-width: 640px) {
  .breadcrumbs .breadcrumbs-listing-title,
  .breadcrumbs .breadcrumbs-mobile-hide {
    display: none;
  }
}

/* /aanbod: filterchips direct onder de H1 op mobiel/tablet; desktop heeft de sidebar */
.browse-mobile-filters {
  margin: 0.25rem 0 0.6rem;
}

@media (min-width: 1024px) {
  .browse-mobile-filters {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .browse-mobile-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .browse-mobile-filters::-webkit-scrollbar { display: none; }
  .browse-mobile-filters .filter-pill { flex: 0 0 auto; white-space: nowrap; }
}

/* Teller-link naar gevraagd in dezelfde rubriek */
.page-meta-link {
  color: var(--muted-foreground);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-meta-link:hover { color: var(--foreground); }

/* Home: één regel populaire rubrieken als tekstlinks */
.home-popular-cats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}
.home-popular-cats-label {
  font-weight: 700;
  color: var(--foreground);
}
.home-popular-cats a {
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--foreground) 25%, transparent);
  text-underline-offset: 2px;
}
.home-popular-cats a:hover { text-decoration-color: currentColor; }
.home-popular-cats-all { font-weight: 700; }

/* Registratie: 'Al een account? Inloggen' direct onder de kop */
.auth-login-top {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0.25rem 0 0.75rem;
  font-size: 0.9375rem;
}
.auth-login-top-note {
  font-weight: 700;
}
.auth-login-top a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Overzichten: redesign.css (.section 4.25rem) overschreef de compacte browse-afstand */
.section.browse-section {
  padding-top: 1.25rem;
}

/* Kop-kolom mag krimpen, zodat scrollende filterchips de pagina niet verbreden */
.browse-header-row > div {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 640px) {
  .browse-header {
    padding-bottom: 0.25rem;
  }
  .section.browse-section {
    padding-top: 0.5rem;
  }
}

/* ------------------------------------------------------------------
   Plaatswizard account/plaatsen.php — onderbalk (publiek-20260925c)
   Eén rij, 64px incl. padding: Vorige (ghost, 44px tap) links, één hoofdknop
   rechts (~60%, 48px). Stap 1–4 'Volgende' (navy), stap 5 'Publiceren' (teal).
   'Concept opslaan' staat als tekstlink in de kop naast de stapteller.
   < 1100px: vast onderaan (MOD-balk staat daar bovenaan). >= 1100px: sticky
   onderaan de formulierkolom, boven de vaste MOD-balk.
   ------------------------------------------------------------------ */
.listing-create-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.4rem;
  margin: 0.2rem 0 0;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--muted-foreground);
}

.listing-create-stepcount {
  font-weight: 700;
  color: var(--foreground);
}

.listing-create-textlink {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0.55rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.listing-create-textlink:hover { text-decoration-thickness: 2px; }

.listing-create-meta .listing-create-autosave {
  flex: 1 1 100%;
  min-height: 0;
  margin: -0.2rem 0 0.2rem;
}

.listing-create-meta .listing-create-autosave:empty { display: none; }

.listing-create-actions.listing-create-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  box-sizing: border-box;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  margin: 1.25rem 0 0;
  padding: 0 1rem env(safe-area-inset-bottom, 0px);
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* .btn { display:inline-flex } overschreef [hidden] — daardoor stonden Vorige en Publiceren al bij stap 1 */
.listing-create-bar [hidden] { display: none !important; }

/* Zelfde oorzaak: .listing-create-card { display:grid } overschreef [hidden], waardoor alle
   5 stappen tegelijk zichtbaar waren. Alleen de wizard-panelen (JS zet hidden per stap). */
.listing-create [data-step-panel][hidden] { display: none !important; }

.listing-create-bar-prev {
  min-width: 44px;
  min-height: 44px;
  margin-left: -0.5rem;
  padding: 0 0.75rem 0 0.4rem;
  gap: 0.25rem;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  color: var(--foreground);
  font-size: 0.9375rem;
  font-weight: 700;
}

.listing-create-bar-prev:hover { background: var(--muted, #f1f3f6); }
.listing-create-bar-prev svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

.listing-create-bar-main {
  flex: 0 0 60%;
  height: 48px;
  margin-left: auto;
  padding: 0 1rem;
  border: 0;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 800;
}

.listing-create-bar-main.btn-primary { background: var(--primary); color: #fff; }
.listing-create-bar-main.btn-primary:hover { background: #1a3252; }
.listing-create-bar-publish { background: var(--accent); color: #fff; }
.listing-create-bar-publish:hover { background: #006d6e; color: #fff; }

@media (max-width: 1099px) {
  .listing-create-actions.listing-create-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    margin: 0;
  }

  /* Ruimte onder de pagina zodat de vaste balk geen velden/fouten/footer bedekt.
     Specifieker dan body:has(.admin-debug-bar) { padding-bottom: 0 } uit de MOD-balk. */
  html body:has(.listing-create-bar) {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  html:has(.listing-create-bar) {
    scroll-padding-bottom: calc(64px + 1rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 1100px) {
  .listing-create-actions.listing-create-bar {
    position: sticky;
    bottom: 0;
    z-index: 40;
    padding-left: 0;
    padding-right: 0;
  }

  .listing-create-bar-prev { margin-left: 0; }

  .listing-create-bar-main {
    flex: 0 0 auto;
    min-width: 15rem;
    padding: 0 1.75rem;
  }

  /* MOD-balk is vanaf 1100px fixed onderaan: wizardbalk er net boven */
  body:has(.admin-debug-bar) .listing-create-actions.listing-create-bar {
    bottom: var(--admin-debug-bar-offset, 2.75rem);
  }
}

/* ------------------------------------------------------------------
   (publiek-20260925d) Vangnet kapotte advertentiefoto: img onerror zet
   .is-img-broken op de container → rubriek-placeholder i.p.v. alt-tekst.
   Geldt voor listing-kaart (ook uitgelicht), listing-rij en detailgalerij.
   ------------------------------------------------------------------ */
.listing-img-fallback { display: none; }

.is-img-broken { position: relative; }
.is-img-broken > img { display: none !important; }

.is-img-broken > .listing-img-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background-color: var(--muted);
}

/* /categorie: subrubriek-chips niet dubbel naast de sidebar-lijst (sidebar vanaf 1024px, net als /aanbod) */
@media (min-width: 1024px) {
  .category-subchips { display: none !important; }
}