/* =========================================================================
   account.css — styling voor /mijn-account/* subpages (v0.16.0)
   Afhankelijk van tkm-blocks.css (brand tokens via :root custom-properties).

   Structuur:
     1.  Layout-shell (.tkm-account)
     2.  Sidebar / menu (.tkm-account__nav)
     3.  Flash-notice (.tkm-account__flash)
     4.  Form-building-blocks (.tkm-form__*)
     5.  Listings (.tkm-listings)
     6.  Favourites (.tkm-favs)
     7.  Chat (.tkm-chat)
     8.  Avatar upload (.tkm-avatar)
     9.  Leaflet map-wrap (.tkm-map-wrap)
     10. Tabbar 5-variant + sell-FAB
     11. Utilities (.tkm-sr-only)
     ========================================================================= */


/* 0. BACKGROUND — override Salient/WPBakery body background op account-pagina's
   zodat er geen rare kleur zichtbaar is als de content de viewport niet vult.
   ------------------------------------------------------------------------- */
body.tkm-body { background: var(--tkm-color-paper) !important; }
body.tkm-body .tkm-main--account { min-height: calc(100dvh - 60px - 56px); }


/* 1. LAYOUT SHELL
   ------------------------------------------------------------------------- */
.tkm-account {
  padding: var(--tkm-space-5) 0 var(--tkm-space-8);
}
@media (min-width: 800px) {
  .tkm-account { padding: var(--tkm-space-6) 0 var(--tkm-space-9); }
}
.tkm-account__container {
  display: grid;
  gap: var(--tkm-space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .tkm-account__container {
    grid-template-columns: 260px 1fr;
    gap: var(--tkm-space-6);
    align-items: start;
  }
}


/* 2. SIDEBAR / MENU
   ------------------------------------------------------------------------- */
.tkm-account__nav {
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  padding: var(--tkm-space-4);
  box-shadow: var(--tkm-shadow-sm);
  position: sticky;
  top: calc(var(--tkm-space-5) + 60px); /* onder de sticky header */
}
@media (max-width: 899px) {
  .tkm-account__nav { position: static; }
}
.tkm-account__identity {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-3);
  padding-bottom: var(--tkm-space-4);
  border-bottom: 1px solid var(--tkm-color-line);
  margin-bottom: var(--tkm-space-3);
}
.tkm-account__avatar {
  width: 48px; height: 48px;
  border-radius: var(--tkm-radius-full);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tkm-color-paper);
}
.tkm-account__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tkm-account__identity-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tkm-account__identity-label {
  font-size: 0.72rem;
  color: var(--tkm-color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tkm-account__identity-name {
  font-size: var(--tkm-text-sm);
  color: var(--tkm-color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tkm-account__menu ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tkm-account__menu-item { list-style: none; }
.tkm-account__menu-item::before { content: none !important; }

.tkm-account__menu-link {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-3);
  padding: 10px 12px;
  border-radius: var(--tkm-radius-md);
  color: var(--tkm-color-ink);
  text-decoration: none;
  font-size: var(--tkm-text-sm);
  font-weight: 500;
  transition: background 140ms ease, color 140ms ease;
  position: relative;
}
.tkm-account__menu-link:hover,
.tkm-account__menu-link:focus-visible {
  background: var(--tkm-color-paper);
  color: var(--tkm-color-ink);
}
.tkm-account__menu-item.is-active .tkm-account__menu-link {
  background: var(--tkm-color-primary-soft);
  color: var(--tkm-color-primary);
}
.tkm-account__menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: currentColor;
}
.tkm-account__menu-label { flex: 1; }
.tkm-account__menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--tkm-color-primary);
  color: var(--tkm-color-paper-bright);
  border-radius: var(--tkm-radius-full);
}
.tkm-account__menu-link--logout { color: var(--tkm-color-muted); }


/* Mobiel: sidebar-nav volledig verbergen. De navigatie zit op mobiel in de
   AccountDrawer (slide-out), geopend door `.tkm-account__menu-trigger` in
   de main-content rechtsboven. Dit voorkomt de dubbele navigatie die we
   eerst hadden (pill-nav BOVEN én mobile-tabbar ONDER én drawer apart). */
@media (max-width: 899px) {
  .tkm-account__nav { display: none !important; }
}


/* Menu-trigger — floating pill rechtsboven in main-content op mobiel.
   Opent de AccountDrawer met alle account-links. Op desktop verborgen
   (desktop heeft de sidebar-nav al). */
.tkm-account__menu-trigger {
  display: none; /* desktop */
  appearance: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: 999px;
  color: var(--tkm-color-ink);
  font-family: var(--tkm-font-display);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(11, 25, 41, 0.06);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.tkm-account__menu-trigger:hover {
  background: var(--tkm-color-primary-soft);
  border-color: var(--tkm-color-primary);
  color: var(--tkm-color-primary);
}
.tkm-account__menu-trigger:active { transform: scale(0.98); }

/* Op dashboard-pagina: positioneer de trigger rechtsboven in de hero-header */
.tkm-account__menu-trigger--dashboard {
  margin-left: auto;
  margin-bottom: var(--tkm-space-3);
  align-self: flex-end;
}

@media (max-width: 899px) {
  .tkm-account__menu-trigger {
    display: inline-flex;
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 5;
  }
  /* Op dashboard: statisch boven hero, niet overlappend */
  .tkm-account__menu-trigger--dashboard {
    position: static;
    align-self: flex-end;
    margin: 0 0 12px auto;
    display: inline-flex;
  }
}

/* ═══ MOBIEL: app-stijl — geen kaart-container, full-width tot schermrand
   Alle /mijn-account/* tabs gedragen zich als een native app op mobiel:
   geen outer box, geen zijkant-padding, geen border/radius/shadow.
   Elke tab-sectie bepaalt zijn eigen inner ruimte.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* Geen verticale outer-ruimte — sluit direct aan op header */
  .tkm-account { padding: 0; }

  /* Container-padding nul → content gaat tot de schermranden */
  .tkm-account__container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0;
  }

  /* Main: geen card (border/radius/shadow). position:relative blijft voor trigger.
     padding-top 56px houd ruimte voor de absoluut-gepositioneerde Menu-trigger. */
  .tkm-account__main {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 56px 0 var(--tkm-space-8) 0 !important;
    min-height: calc(100dvh - 64px); /* vul tot onderkant tabbar */
  }

  /* Tab-titel + scheidingslijn: eigen horizontale padding */
  .tkm-account__head {
    padding: 0 var(--tkm-space-4) var(--tkm-space-4) !important;
    margin-bottom: 0 !important;
  }

  /* Body: standaard inner padding voor tekst-content (formulieren, lijsten) */
  .tkm-account__body { padding: 0 var(--tkm-space-4) !important; }

  /* Chat: eigen full-width behandeling — overruled via :has() */
  /* Dashboard: secties bepalen hun eigen ruimte */
  .tkm-account__body:has(.tkm-dash__content) { padding: 0 !important; }
}


/* 3. FLASH NOTICE
   ------------------------------------------------------------------------- */
.tkm-account__main {
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-lg);
  padding: var(--tkm-space-5);
  box-shadow: var(--tkm-shadow-sm);
  min-width: 0; /* voorkom overflow in grid */
  position: relative; /* voor absolute menu-trigger */
}
@media (min-width: 800px) {
  .tkm-account__main { padding: var(--tkm-space-6); }
}
.tkm-account__head {
  margin: 0 0 var(--tkm-space-5);
  padding-bottom: var(--tkm-space-4);
  border-bottom: 1px solid var(--tkm-color-line);
}
.tkm-account__title {
  margin: 0 !important;
  font-family: var(--tkm-font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--tkm-color-ink) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}
@media (min-width: 900px) {
  .tkm-account__title { font-size: 1.35rem !important; }
}

.tkm-account__flash {
  display: flex;
  align-items: flex-start;
  gap: var(--tkm-space-3);
  padding: 12px 16px;
  border-radius: var(--tkm-radius-md);
  margin-bottom: var(--tkm-space-4);
  font-size: var(--tkm-text-sm);
  border: 1px solid transparent;
}
.tkm-account__flash--success {
  background: var(--tkm-color-accent-soft);
  color: var(--tkm-color-accent);
  border-color: color-mix(in srgb, var(--tkm-color-accent) 20%, transparent);
}
.tkm-account__flash--error {
  background: color-mix(in srgb, var(--tkm-color-danger) 10%, var(--tkm-color-paper-bright));
  color: var(--tkm-color-danger);
  border-color: color-mix(in srgb, var(--tkm-color-danger) 25%, transparent);
}
.tkm-account__flash--info {
  background: color-mix(in srgb, var(--tkm-color-info) 10%, var(--tkm-color-paper-bright));
  color: var(--tkm-color-info);
  border-color: color-mix(in srgb, var(--tkm-color-info) 25%, transparent);
}
.tkm-account__flash-icon { flex-shrink: 0; display: flex; margin-top: 1px; }
.tkm-account__flash-msg { flex: 1; }


/* 4. FORM BUILDING BLOCKS
   ------------------------------------------------------------------------- */
.tkm-form { display: flex; flex-direction: column; gap: var(--tkm-space-5); }
.tkm-form + .tkm-form { margin-top: var(--tkm-space-5); }
.tkm-form__group {
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  padding: var(--tkm-space-5);
  margin: 0;
  background: var(--tkm-color-paper-bright);
}
.tkm-form__legend {
  font-family: var(--tkm-font-display);
  font-size: var(--tkm-text-lg);
  font-weight: 600;
  color: var(--tkm-color-ink);
  padding: 0 8px;
  margin-left: -8px;
  letter-spacing: -0.015em;
}
.tkm-form__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--tkm-space-4);
}
.tkm-form__row:first-of-type { margin-top: var(--tkm-space-3); }
.tkm-form__row--split {
  display: grid;
  gap: var(--tkm-space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .tkm-form__row--split { grid-template-columns: 1fr 1fr; }
}
.tkm-form__row--split > div { display: flex; flex-direction: column; gap: 6px; }

.tkm-form__label {
  font-size: var(--tkm-text-sm);
  font-weight: 600;
  color: var(--tkm-color-ink);
}
.tkm-form__label--with-icon {
  display: flex; align-items: center; gap: 8px;
  color: var(--tkm-color-muted);
}
.tkm-form__required { color: var(--tkm-color-danger); font-weight: 700; }

.tkm-form__control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.tkm-form__control--static {
  padding: 10px 0;
}
.tkm-form__input,
.tkm-form__select {
  width: 100%;
  padding: 11px 14px;
  font-size: var(--tkm-text-base);
  font-family: var(--tkm-font-sans);
  color: var(--tkm-color-ink);
  background: var(--tkm-color-paper-bright);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  transition: border-color 140ms ease, box-shadow 140ms ease;
  box-sizing: border-box;
  line-height: 1.4;
}
.tkm-form__input:focus,
.tkm-form__select:focus {
  outline: none;
  border-color: var(--tkm-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tkm-color-primary) 20%, transparent);
}
.tkm-form__input[disabled] { opacity: 0.6; cursor: not-allowed; }
.tkm-form__hint {
  font-size: 0.78rem;
  color: var(--tkm-color-muted);
  margin: 0;
  line-height: 1.4;
}

.tkm-form__btn-icon {
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--tkm-color-muted);
  cursor: pointer;
  border-radius: var(--tkm-radius-sm);
  transition: color 140ms ease, background 140ms ease;
}
.tkm-form__btn-icon:hover { color: var(--tkm-color-primary); background: var(--tkm-color-paper); }

/* Checkbox (simpel) */
.tkm-form__check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--tkm-text-sm);
  color: var(--tkm-color-ink);
}
.tkm-form__check input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--tkm-color-primary);
  cursor: pointer;
}

/* Radio-cards (voor privacy-zichtbaarheid) */
.tkm-form__radios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tkm-form__radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  background: var(--tkm-color-paper-bright);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.tkm-form__radio:hover { border-color: color-mix(in srgb, var(--tkm-color-primary) 40%, var(--tkm-color-line)); }
.tkm-form__radio input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--tkm-color-primary);
  cursor: pointer;
}
.tkm-form__radio.is-checked,
.tkm-form__radio:has(input[type="radio"]:checked) {
  border-color: var(--tkm-color-primary);
  background: var(--tkm-color-primary-soft);
}
.tkm-form__radio-body { display: flex; flex-direction: column; gap: 2px; }
.tkm-form__radio-body strong {
  font-size: var(--tkm-text-sm);
  color: var(--tkm-color-ink);
  font-weight: 600;
}
.tkm-form__radio-body em {
  font-size: 0.8rem;
  color: var(--tkm-color-muted);
  font-style: normal;
}

/* Toggle-switch (voor notificaties) */
.tkm-form__toggle {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-3);
  padding: 14px 16px;
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  background: var(--tkm-color-paper-bright);
  cursor: pointer;
  margin-top: 10px;
}
.tkm-form__toggle:first-of-type { margin-top: 0; }
.tkm-form__toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tkm-form__toggle-switch {
  flex-shrink: 0;
  width: 40px; height: 22px;
  border-radius: var(--tkm-radius-full);
  background: var(--tkm-color-sand);
  position: relative;
  transition: background 180ms ease;
}
.tkm-form__toggle-switch::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: var(--tkm-radius-full);
  background: var(--tkm-color-paper-bright);
  box-shadow: var(--tkm-shadow-sm);
  transition: transform 180ms ease;
}
.tkm-form__toggle input[type="checkbox"]:checked ~ .tkm-form__toggle-switch {
  background: var(--tkm-color-accent);
}
.tkm-form__toggle input[type="checkbox"]:checked ~ .tkm-form__toggle-switch::before {
  transform: translateX(18px);
}
.tkm-form__toggle-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.tkm-form__toggle-body strong {
  font-size: var(--tkm-text-sm);
  color: var(--tkm-color-ink);
  font-weight: 600;
}
.tkm-form__toggle-body em {
  font-size: 0.8rem;
  color: var(--tkm-color-muted);
  font-style: normal;
}

.tkm-form__socials {
  display: grid;
  gap: var(--tkm-space-4);
  grid-template-columns: 1fr;
  margin-top: var(--tkm-space-4);
}
@media (min-width: 640px) {
  .tkm-form__socials { grid-template-columns: 1fr 1fr; }
}
.tkm-form__social { display: flex; flex-direction: column; gap: 6px; }

.tkm-form__submit {
  display: flex;
  justify-content: flex-end;
  gap: var(--tkm-space-3);
  padding-top: var(--tkm-space-3);
}


/* 5. LISTINGS
   ------------------------------------------------------------------------- */
.tkm-listings { display: flex; flex-direction: column; gap: var(--tkm-space-4); }
.tkm-listings__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tkm-space-3);
  align-items: center;
}
.tkm-listings__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tkm-space-2);
  flex: 1;
  min-width: 0;
}
.tkm-listings__select {
  padding: 9px 12px;
  font-size: var(--tkm-text-sm);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  background: var(--tkm-color-paper-bright);
  font-family: var(--tkm-font-sans);
  min-width: 150px;
}
.tkm-listings__search {
  display: flex;
  flex: 1;
  min-width: 200px;
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  overflow: hidden;
  background: var(--tkm-color-paper-bright);
}
.tkm-listings__search-input {
  flex: 1;
  padding: 9px 12px;
  font-size: var(--tkm-text-sm);
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--tkm-font-sans);
}
.tkm-listings__search-btn {
  background: transparent;
  border: none;
  border-left: 1px solid var(--tkm-color-line);
  padding: 0 14px;
  cursor: pointer;
  color: var(--tkm-color-muted);
  transition: color 140ms ease;
}
.tkm-listings__search-btn:hover { color: var(--tkm-color-primary); }
.tkm-listings__new {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.tkm-listings__empty {
  text-align: center;
  padding: var(--tkm-space-8) var(--tkm-space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tkm-space-3);
}
.tkm-listings__empty-icon { color: var(--tkm-color-sand); }
.tkm-listings__empty p { color: var(--tkm-color-muted); margin: 0; }

.tkm-listings__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tkm-space-3);
}
.tkm-listings__list li { list-style: none; }
.tkm-listings__list li::before { content: none !important; }

.tkm-listings__item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--tkm-space-3);
  padding: var(--tkm-space-3);
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  background: var(--tkm-color-paper-bright);
  align-items: center;
  transition: box-shadow 140ms ease, transform 140ms ease;
}
.tkm-listings__item:hover { box-shadow: var(--tkm-shadow-md); transform: translateY(-1px); }

@media (max-width: 640px) {
  .tkm-listings__item {
    grid-template-columns: 80px 1fr;
    grid-template-areas:
      "thumb body"
      "actions actions";
  }
  .tkm-listings__item-thumb { grid-area: thumb; }
  .tkm-listings__item-body  { grid-area: body; }
  .tkm-listings__item-actions { grid-area: actions; justify-content: flex-end; }
}

.tkm-listings__item-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--tkm-radius-sm);
  background: var(--tkm-color-paper);
}
.tkm-listings__item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tkm-listings__item-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tkm-listings__item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--tkm-color-muted);
}
.tkm-listings__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: var(--tkm-radius-full);
}
.tkm-listings__badge--online  { background: var(--tkm-color-accent-soft);  color: var(--tkm-color-accent); }
.tkm-listings__badge--pending { background: var(--tkm-color-primary-soft); color: var(--tkm-color-primary); }
.tkm-listings__badge--expired { background: var(--tkm-color-paper);        color: var(--tkm-color-muted); }
.tkm-listings__badge--draft   { background: color-mix(in srgb, var(--tkm-color-info) 15%, var(--tkm-color-paper-bright)); color: var(--tkm-color-info); }

.tkm-listings__item-title {
  font-size: var(--tkm-text-base);
  font-weight: 600;
  color: var(--tkm-color-ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tkm-listings__item-title:hover { color: var(--tkm-color-primary); }
.tkm-listings__item-price {
  font-weight: 700;
  color: var(--tkm-color-primary);
  font-size: var(--tkm-text-sm);
  font-family: var(--tkm-font-display);
}

.tkm-listings__item-actions { display: flex; gap: 6px; }
.tkm-listings__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-sm);
  background: var(--tkm-color-paper);
  color: var(--tkm-color-ink);
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease;
}
.tkm-listings__action:hover { border-color: var(--tkm-color-primary); color: var(--tkm-color-primary); }

.tkm-listings__pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding-top: var(--tkm-space-4);
}
.tkm-listings__pagination a,
.tkm-listings__pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px; height: 36px;
  padding: 0 10px;
  border-radius: var(--tkm-radius-sm);
  border: 1px solid var(--tkm-color-line);
  background: var(--tkm-color-paper-bright);
  color: var(--tkm-color-ink);
  font-size: var(--tkm-text-sm);
  text-decoration: none;
}
.tkm-listings__pagination .current {
  background: var(--tkm-color-primary);
  border-color: var(--tkm-color-primary);
  color: var(--tkm-color-paper-bright);
}


/* 6. FAVOURITES
   ------------------------------------------------------------------------- */
.tkm-favs__grid {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: var(--tkm-space-3);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.tkm-favs__grid li { list-style: none; }
.tkm-favs__grid li::before { content: none !important; }

.tkm-favs__card {
  position: relative;
  border: 1px solid var(--tkm-color-line);
  border-radius: var(--tkm-radius-md);
  overflow: hidden;
  background: var(--tkm-color-paper-bright);
  transition: box-shadow 140ms ease, transform 140ms ease;
}
.tkm-favs__card:hover { box-shadow: var(--tkm-shadow-md); transform: translateY(-2px); }

.tkm-favs__card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.tkm-favs__card-thumb {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--tkm-color-paper);
}
.tkm-favs__card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tkm-favs__card-badge {
  position: absolute;
  top: 8px; left: 8px;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--tkm-radius-full);
  background: var(--tkm-color-paper-bright);
  color: var(--tkm-color-muted);
}
.tkm-favs__card-badge--pending { color: var(--tkm-color-primary); }
.tkm-favs__card-badge--expired { color: var(--tkm-color-muted); }

.tkm-favs__card-body {
  padding: var(--tkm-space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tkm-favs__card-title {
  margin: 0;
  font-size: var(--tkm-text-sm);
  font-weight: 600;
  color: var(--tkm-color-ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tkm-favs__card-price {
  font-family: var(--tkm-font-display);
  font-weight: 700;
  color: var(--tkm-color-primary);
  font-size: var(--tkm-text-sm);
}
.tkm-favs__card-remove {
  position: absolute;
  top: 8px; right: 8px;
  margin: 0;
}
.tkm-favs__remove-btn {
  width: 34px; height: 34px;
  border: none;
  background: var(--tkm-color-paper-bright);
  color: var(--tkm-color-danger);
  border-radius: var(--tkm-radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--tkm-shadow-sm);
  transition: transform 140ms ease, background 140ms ease;
}
.tkm-favs__remove-btn:hover { transform: scale(1.08); background: color-mix(in srgb, var(--tkm-color-danger) 10%, var(--tkm-color-paper-bright)); }

.tkm-favs__empty {
  text-align: center;
  padding: var(--tkm-space-8) var(--tkm-space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tkm-space-3);
}
.tkm-favs__empty-icon { color: var(--tkm-color-sand); }


/* 7. CHAT — twee-panel layout in AccountShell
   =========================================================================
   Structuur:
     .tkm-chat-layout              — flex-rij, hoogte via JS gezet
       .tkm-chat-layout__left      — inbox-lijst (320px op desktop)
       .tkm-chat-layout__right     — thread of placeholder (flex:1)
         .tkm-chat-layout__thread  — actief gesprek

   JS (initChatLayout) meet getBoundingClientRect().top en zet height zodat
   de chat precies tot onderkant viewport loopt — geen magic numbers nodig.

   Desktop ≥900px : 320px | 1fr naast elkaar
   Mobiel         : is-thread => linker panel verborgen, rechter full
   ========================================================================= */

/* ── AccountShell-overrides via :has() — werkt zonder body-class ─────── */
.tkm-account__body:has(.tkm-chat-layout) { padding: 0 !important; overflow: hidden; }
/* Mobiel: geen bottom-padding op main zodat chat strak tegen tabbar aansluit */
@media (max-width: 899px) {
  .tkm-account__main:has(.tkm-chat-layout) { padding-bottom: 0 !important; }
}

/* ── Outer container ──────────────────────────────────────────────────── */
/* Desktop ≥900px : hoogte via JS (initChatLayout), card in AccountShell  */
/* Mobiel  <900px : position:fixed fullscreen — zoals Marktplaats         */
.tkm-chat-layout {
  height: 600px; /* fallback; initChatLayout() overschrijft dit op desktop */
  display: flex;
  flex-direction: row;
  overflow: hidden;
  background: var(--tkm-color-paper-bright);
  border-radius: var(--tkm-radius-lg);
  border: 1px solid var(--tkm-color-line);
}
@media (max-width: 899px) {
  /* Altijd: geen card-styling op mobiel */
  .tkm-chat-layout { border-radius: 0 !important; border: none !important; width: 100% !important; overflow: hidden !important; }
  /* Inbox-modus: normaal in paginastroom zodat de tabbar zichtbaar blijft.
     Hoogte wordt via initChatLayout() gezet: viewport - top - tabbar-hoogte. */
  .tkm-chat-layout:not(.is-thread) { position: static !important; }
  /* Thread-modus: fullscreen overlay — tabbar verdwijnt (composer neemt die plek) */
  .tkm-chat-layout.is-thread { position: fixed !important; inset: 0 !important; height: 100dvh !important; z-index: 9999 !important; }
}

/* ── LINKER PANEL ─────────────────────────────────────────────────────── */
.tkm-chat-layout__left {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-right: 1px solid var(--tkm-color-line);
  background: var(--tkm-color-paper-bright);
  flex-shrink: 0;
}
@media (max-width: 899px) {
  .tkm-chat-layout.is-thread .tkm-chat-layout__left { display: none; }
}
@media (min-width: 900px) {
  .tkm-chat-layout__left { width: 320px; }
}
.tkm-chat-layout__inbox-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ── RECHTER PANEL ────────────────────────────────────────────────────── */
.tkm-chat-layout__right { display: none; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; }
.tkm-chat-layout.is-thread .tkm-chat-layout__right { display: flex; }
@media (min-width: 900px) {
  .tkm-chat-layout__right { display: flex !important; }
  .tkm-chat-full__back { display: none; }
}

/* Thread-wrapper */
.tkm-chat-layout__thread { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

/* Placeholder (geen gesprek geselecteerd) */
.tkm-chat-layout__placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--tkm-color-muted); padding: var(--tkm-space-6); text-align: center; }
.tkm-chat-layout__placeholder h3 { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--tkm-color-ink); }
.tkm-chat-layout__placeholder p  { margin: 0; font-size: var(--tkm-text-sm); }

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.tkm-chat__tabs { display: flex; width: 100%; border-bottom: 1px solid var(--tkm-color-line); }
.tkm-chat__tab { flex: 1; text-align: center; padding: 10px 0; font-size: var(--tkm-text-sm); font-weight: 500; color: var(--tkm-color-muted); border-bottom: 3px solid transparent; text-decoration: none; transition: color 140ms ease, border-color 140ms ease; background: transparent; }
.tkm-chat__tab.is-active { color: var(--tkm-color-primary); border-bottom-color: var(--tkm-color-primary); font-weight: 600; }
.tkm-chat__tab:hover:not(.is-active) { color: var(--tkm-color-ink); }
.tkm-chat__notice { font-size: 0.8rem; color: var(--tkm-color-muted); padding: var(--tkm-space-3) var(--tkm-space-4); background: var(--tkm-color-paper); margin: 0; }

/* ── Lege inbox ────────────────────────────────────────────────────────── */
.tkm-chat__empty { text-align: center; padding: var(--tkm-space-7) var(--tkm-space-4); display: flex; flex-direction: column; align-items: center; gap: var(--tkm-space-3); color: var(--tkm-color-muted); }
.tkm-chat__empty-icon { color: var(--tkm-color-sand); }

/* ── Gesprekken-lijst ──────────────────────────────────────────────────── */
.tkm-chat__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.tkm-chat__list li { list-style: none; }
.tkm-chat__list li::before { content: none !important; }
.tkm-chat__item { position: relative; border-bottom: 1px solid var(--tkm-color-line); transition: background 140ms ease; }
.tkm-chat__item:first-child { border-top: 1px solid var(--tkm-color-line); }
.tkm-chat__item.is-pinned  { background: color-mix(in srgb, var(--tkm-color-primary) 4%, var(--tkm-color-paper-bright)); }
.tkm-chat__item.is-trashed { opacity: 0.8; background: var(--tkm-color-paper); }
.tkm-chat__item.has-unread { background: var(--tkm-color-paper-bright); }
.tkm-chat__item.is-active  { background: color-mix(in srgb, var(--tkm-color-primary) 8%, var(--tkm-color-paper-bright)); }
.tkm-chat__item.is-active .tkm-chat__item-title { color: var(--tkm-color-primary); }
.tkm-chat__item-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; transition: background 140ms ease; }
.tkm-chat__item-row:hover { background: color-mix(in srgb, var(--tkm-color-primary) 5%, var(--tkm-color-paper-bright)); }
.tkm-chat__item-thumb { position: relative; flex-shrink: 0; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--tkm-color-paper); border: 1px solid var(--tkm-color-line); display: flex; align-items: center; justify-content: center; color: var(--tkm-color-sand); }
.tkm-chat__item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tkm-chat__item-pin { position: absolute; top: 2px; right: 2px; font-size: 10px; }
.tkm-chat__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tkm-chat__item-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tkm-chat__item-title { font-size: var(--tkm-text-sm); font-weight: 700; color: var(--tkm-color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.tkm-chat__item.is-trashed .tkm-chat__item-title { text-decoration: line-through; }
.tkm-chat__item-timebadge { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tkm-chat__item-time { font-size: 0.72rem; color: var(--tkm-color-muted); white-space: nowrap; }
.tkm-chat__item-preview { font-size: 0.82rem; color: var(--tkm-color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.tkm-chat__item.has-unread .tkm-chat__item-preview { color: var(--tkm-color-ink); font-weight: 500; }
.tkm-chat__item-sender { font-weight: 500; color: #555; }
.tkm-chat__item-badge { flex-shrink: 0; min-width: 20px; height: 20px; border-radius: 999px; background: var(--tkm-color-primary); color: #fff; font-size: 0.7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; margin-left: 4px; }

/* Contextmenu */
.tkm-chat__item-menu { position: absolute; top: 10px; right: 8px; }
.tkm-chat__item-menu-btn { width: 28px; height: 28px; border: none; background: transparent; border-radius: var(--tkm-radius-full); color: var(--tkm-color-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 160ms, background 160ms; }
.tkm-chat__item:hover .tkm-chat__item-menu-btn, .tkm-chat__item-menu-btn[aria-expanded="true"] { opacity: 1; }
.tkm-chat__item-menu-btn:hover { background: var(--tkm-color-paper); color: var(--tkm-color-ink); }
.tkm-chat__item-menu-panel { position: absolute; top: 100%; right: 0; min-width: 140px; background: var(--tkm-color-paper-bright); border: 1px solid var(--tkm-color-line); border-radius: var(--tkm-radius-md); box-shadow: var(--tkm-shadow-md); overflow: hidden; z-index: 10; }
.tkm-chat__item-menu-item { display: block; width: 100%; text-align: left; padding: 10px 14px; border: none; background: transparent; font-size: 0.85rem; color: var(--tkm-color-ink); cursor: pointer; font-family: inherit; }
.tkm-chat__item-menu-item:hover { background: var(--tkm-color-paper); }
.tkm-chat__item-menu-item--danger { color: var(--tkm-color-danger); }
.tkm-chat__item-menu-item--danger:hover { background: color-mix(in srgb, var(--tkm-color-danger) 8%, var(--tkm-color-paper-bright)); }
.tkm-chat__item-controls { display: flex; justify-content: flex-end; padding: 0 var(--tkm-space-3) var(--tkm-space-3); }
.tkm-chat__item-action--restore { background: var(--tkm-color-accent); color: var(--tkm-color-paper-bright); border: none; padding: 7px 16px; border-radius: var(--tkm-radius-sm); font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.tkm-chat__item-action--restore:hover { background: var(--tkm-color-accent-hover); }

/* ── Thread-header ────────────────────────────────────────────────────── */
.tkm-chat-full__head { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); background: #fff; border-bottom: 1px solid var(--tkm-color-line); min-height: 60px; position: relative; }
.tkm-chat-full__back { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--tkm-color-primary); border-radius: var(--tkm-radius-md); transition: background 140ms ease; }
.tkm-chat-full__back:hover { background: var(--tkm-color-primary-soft); }
.tkm-chat-full__thumb { flex-shrink: 0; width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--tkm-color-paper-bright); border: 1px solid var(--tkm-color-line); display: flex; align-items: center; justify-content: center; color: var(--tkm-color-muted); text-decoration: none; }
.tkm-chat-full__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tkm-chat-full__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tkm-chat-full__title { font-size: var(--tkm-text-base); font-weight: 700; color: var(--tkm-color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.tkm-chat-full__title a { color: inherit; text-decoration: none; }
.tkm-chat-full__title a:hover { text-decoration: underline; }
.tkm-chat-full__other { font-size: var(--tkm-text-sm); color: var(--tkm-color-primary); font-weight: 500; }
.tkm-chat-full__more { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--tkm-radius-md); color: var(--tkm-color-ink); border: none; background: transparent; cursor: pointer; transition: background 140ms ease; }
.tkm-chat-full__more:hover { background: var(--tkm-color-paper); }
.tkm-chat-full__more-panel { position: absolute; top: calc(100% - 4px); right: 14px; min-width: 180px; background: #fff; border: 1px solid var(--tkm-color-line); border-radius: var(--tkm-radius-md); box-shadow: var(--tkm-shadow-md); overflow: hidden; z-index: 20; }
.tkm-chat-full__more-item { display: block; width: 100%; text-align: left; padding: 12px 16px; border: none; background: transparent; font-size: var(--tkm-text-sm); color: var(--tkm-color-ink); cursor: pointer; font-family: inherit; text-decoration: none; }
.tkm-chat-full__more-item:hover { background: var(--tkm-color-paper); }
.tkm-chat-full__more-item--danger { color: var(--tkm-color-danger); }
.tkm-chat-full__more-item--danger:hover { background: color-mix(in srgb, var(--tkm-color-danger) 8%, #fff); }

/* ── Veiligheidsmelding (wegklikbare kaart boven de log) ──────────────── */
.tkm-chat__safety-area { flex-shrink: 0; padding: 8px 12px; background: var(--tkm-color-paper); border-bottom: 1px solid var(--tkm-color-line); }
.tkm-chat__safety-card { display: flex; align-items: flex-start; gap: 10px; background: #fff8f2; border: 1px solid #ffd9bb; border-radius: 12px; padding: 10px 12px; }
.tkm-chat__safety-icon { flex-shrink: 0; color: var(--tkm-color-primary); margin-top: 2px; }
.tkm-chat__safety-body { flex: 1; min-width: 0; }
.tkm-chat__safety-text { font-size: 0.82rem; color: var(--tkm-color-ink); line-height: 1.45; margin: 0 0 3px; }
.tkm-chat__safety-link { color: var(--tkm-color-primary); text-decoration: underline; }
.tkm-chat__safety-note { font-size: 0.73rem; color: var(--tkm-color-muted); margin: 0; }
.tkm-chat__safety-close { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--tkm-color-muted); border-radius: var(--tkm-radius-full); cursor: pointer; transition: background 140ms ease, color 140ms ease; margin-top: -2px; }
.tkm-chat__safety-close:hover { background: #ffd9bb; color: var(--tkm-color-ink); }

/* ── Berichten-log ────────────────────────────────────────────────────── */
.tkm-chat-full__log { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; scroll-behavior: smooth; background: var(--tkm-color-paper); }
.tkm-chat-full__log li { list-style: none; }
.tkm-chat-full__log li::before { content: none !important; }

/* Bubbles */
.tkm-chat__msg { display: flex; flex-direction: column; gap: 3px; max-width: 72%; }
.tkm-chat__msg--me   { align-self: flex-end;   align-items: flex-end; }
.tkm-chat__msg--them { align-self: flex-start; align-items: flex-start; }
.tkm-chat__msg-bubble { padding: 10px 14px; border-radius: 18px; font-size: var(--tkm-text-sm); line-height: 1.5; word-wrap: break-word; white-space: pre-wrap; }
.tkm-chat__msg--me   .tkm-chat__msg-bubble { background: var(--tkm-color-primary); color: #fff; border-bottom-right-radius: 4px; }
.tkm-chat__msg--them .tkm-chat__msg-bubble { background: #fff; border: 1px solid var(--tkm-color-line); color: var(--tkm-color-ink); border-bottom-left-radius: 4px; }
.tkm-chat__msg-time { font-size: 0.7rem; color: var(--tkm-color-muted); padding: 0 4px; }
.tkm-chat__placeholder { text-align: center; color: var(--tkm-color-muted); font-size: var(--tkm-text-sm); padding: var(--tkm-space-5); }

/* ── Schrijfbalk ──────────────────────────────────────────────────────── */
.tkm-chat-full__composer { flex-shrink: 0; display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px; padding-bottom: max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--tkm-color-line); background: #fff; }
.tkm-chat-full__input { flex: 1; min-height: 44px; max-height: 120px; padding: 10px 16px; font-size: var(--tkm-text-base); font-family: var(--tkm-font-sans); border: 1px solid var(--tkm-color-line); border-radius: 22px; resize: none; outline: none; background: var(--tkm-color-paper-bright); line-height: 1.4; overflow-y: auto; transition: border-color 140ms ease; }
.tkm-chat-full__input:focus { border-color: var(--tkm-color-primary); }
.tkm-chat-full__send { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--tkm-color-primary); color: #fff; border: none; border-radius: 50%; cursor: pointer; transition: background 140ms ease, transform 120ms ease; }
.tkm-chat-full__send:hover:not(:disabled) { background: var(--tkm-color-primary-hover); transform: scale(1.05); }
.tkm-chat-full__send:disabled { opacity: 0.45; cursor: not-allowed; }


/* 8. AVATAR UPLOAD
   ------------------------------------------------------------------------- */
.tkm-avatar {
  display: flex;
  align-items: center;
  gap: var(--tkm-space-4);
  margin-top: var(--tkm-space-4);
  flex-wrap: wrap;
}
.tkm-avatar__preview {
  width: 96px; height: 96px;
  border-radius: var(--tkm-radius-full);
  overflow: hidden;
  background: var(--tkm-color-paper);
  border: 2px solid var(--tkm-color-line);
  flex-shrink: 0;
}
.tkm-avatar__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tkm-avatar__actions {
  display: flex;
  gap: var(--tkm-space-2);
  flex-wrap: wrap;
}
.tkm-avatar__pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}


/* 9. LEAFLET MAP-WRAP
   ------------------------------------------------------------------------- */
.tkm-map-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: var(--tkm-radius-md);
  overflow: hidden;
  border: 1px solid var(--tkm-color-line);
}
.tkm-map {
  width: 100%;
  height: 300px;
  background: var(--tkm-color-paper);
}
.tkm-map-wrap + .tkm-form__hint { margin-top: 4px; }


/* 10. TABBAR 5-VARIANT + SELL-FAB — verhuisd naar blocks.css
   -------------------------------------------------------------------------
   De FAB-styles voor de "Plaatsen"-tab stonden hier, maar account.css
   laadt alleen op /mijn-account/*. De MobileTabBar wordt echter op álle
   wrapped-pages gerenderd, dus de FAB-styles moeten altijd beschikbaar
   zijn. Nu in blocks.css (zoek op "Tabbar 5-variant + \"Plaatsen\" FAB"). */


/* 11. UTILITIES
   ------------------------------------------------------------------------- */
.tkm-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}