/* ==========================================================================
   TBG Community - alleen de eigen onderdelen
   --------------------------------------------------------------------------
   Deze laag verandert NIETS aan de bestaande vormgeving van Fluent Community.
   Geen kleuren, geen feedkaarten, geen layouts. Alleen wat nodig is om de
   blokken die deze plugin toevoegt er netjes uit te laten zien:

     - aanmeldkaart voor uitgelogde bezoekers
     - het aanmeldblok in een draad
     - setup-chip achter een naam
     - eerste stappen
     - puntenblok in de zijkolom
     - actieknoppen onder de postbox

   Alle kleuren komen uit de variabelen van Fluent Community zelf, met een
   nuchtere terugval. Wissel je van kleurenschema of zet je dark mode aan,
   dan volgen deze blokken vanzelf mee.
   ========================================================================== */

.tbg_widget {
  background: var(--fcom-primary-bg, #fff);
  border: 1px solid var(--fcom-primary-border, #e3e8ee);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.tbg_widget h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--fcom-primary-text, #1a1a1a);
}

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */
.tbg_btn {
  display: inline-block;
  box-sizing: border-box;
  background: var(--fcom-primary-button, #2b2e33);
  color: var(--fcom-primary-button-text, #fff);
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s ease;
}
.tbg_btn:hover { opacity: .88; color: var(--fcom-primary-button-text, #fff); }
.tbg_btn_block { display: block; width: 100%; text-align: center; }

.tbg_btn_ghost {
  display: inline-block;
  box-sizing: border-box;
  background: var(--fcom-primary-bg, #fff);
  color: var(--fcom-secondary-text, #5b6b62);
  border: 1px solid var(--fcom-primary-border, #e3e8ee);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.tbg_btn_ghost:hover {
  border-color: var(--fcom-text-link, #0d9668);
  color: var(--fcom-text-link, #0d9668);
}

/* --------------------------------------------------------------------------
   Inloggen en aanmelden los in de kop
   -------------------------------------------------------------------------- */
/* De kop van Fluent stuurt zijn links met een sterkere selector aan dan onze
   knopklassen. Daarom hier hetzelfde uiterlijk, maar zwaarder genoteerd. */
/* de knoppen kunnen ook buiten .fcom_top_menu belanden, daarom beide */
.tbg_auth_item, .fcom_top_menu .tbg_auth_item {
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.tbg_auth_item a.tbg_btn_klein, .fcom_top_menu .tbg_auth_item a.tbg_btn_klein {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity .15s ease, border-color .15s ease, color .15s ease;
}
.tbg_auth_item a.tbg_btn, .fcom_top_menu .tbg_auth_item a.tbg_btn {
  background: var(--fcom-primary-button, #10b981);
  color: var(--fcom-primary-button-text, #fff);
  border: 1px solid transparent;
}
/* Fluent geeft links in de kop bij hover zelf een groene achtergrond. Zonder
   dat hier te overschrijven wordt groene tekst op groen onleesbaar. */
.tbg_auth_item a.tbg_btn:hover,
.fcom_top_menu .tbg_auth_item a.tbg_btn:hover {
  background: var(--fcom-primary-button, #10b981);
  color: var(--fcom-primary-button-text, #fff);
  opacity: .9;
}
.tbg_auth_item a.tbg_btn_ghost, .fcom_top_menu .tbg_auth_item a.tbg_btn_ghost {
  background: transparent;
  color: var(--fcom-menu-text, #0f172a);
  border: 1px solid var(--fcom-primary-border, #e3e8ee);
}
.tbg_auth_item a.tbg_btn_ghost:hover,
.fcom_top_menu .tbg_auth_item a.tbg_btn_ghost:hover {
  background: var(--fcom-highlight-bg, #ecfdf5);
  border-color: var(--fcom-text-link, #10b981);
  color: var(--fcom-text-link, #10b981);
}
html.dark .tbg_auth_item a.tbg_btn_ghost:hover,
html.dark .fcom_top_menu .tbg_auth_item a.tbg_btn_ghost:hover {
  background: var(--fcom-active-bg, #064e3b);
  color: var(--fcom-primary-button-text, #fff);
  border-color: var(--fcom-text-link, #10b981);
}

[data-tbg-auth-oud] { display: none !important; }

/* Smal scherm: de kop heeft geen ruimte voor twee knoppen naast het logo,
   dus blijft alleen de aanmeldknop staan. Inloggen kan daar via het menu. */
@media (max-width: 600px) {
  .tbg_auth_item a.tbg_btn_klein, .fcom_top_menu .tbg_auth_item a.tbg_btn_klein {
    height: 30px;
    padding: 0 11px;
    font-size: 12.5px;
  }
  .tbg_auth_item, .fcom_top_menu .tbg_auth_item { margin-left: 5px; }
}
@media (max-width: 420px) {
  .tbg_auth_inlog { display: none; }
}

/* --------------------------------------------------------------------------
   Tabjes boven het aanmeldscherm
   -------------------------------------------------------------------------- */
.tbg_auth_tabs {
  display: flex;
  gap: 4px;
  max-width: 480px;
  margin: 0 auto;
  padding: 5px;
  background: var(--fcom-primary-bg, #fff);
  border: 1px solid var(--fcom-primary-border, #eee8e0);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
.tbg_auth_tab {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  background: transparent;
  color: var(--fcom-text-off, #64748b);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.tbg_auth_tab:hover {
  background: var(--fcom-secondary-content-bg, #f5f3ee);
  color: var(--fcom-primary-text, #0f172a);
}
.tbg_auth_tab_login.is_actief {
  background: var(--fcom-primary-text, #0f172a);
  color: var(--fcom-primary-bg, #fff);
}
.tbg_auth_tab_register.is_actief {
  background: var(--fcom-primary-button, #10b981);
  color: var(--fcom-primary-button-text, #fff);
}
.tbg_heeft_tabs .fcom_user_onboard {
  border-top: 0;
  border-radius: 0 0 14px 14px;
}

/* --------------------------------------------------------------------------
   Aanmeldkaart voor uitgelogde bezoekers
   -------------------------------------------------------------------------- */
.tbg_join_card h3 { font-size: 16px; line-height: 1.3; margin: 0 0 8px; }
.tbg_faces { display: flex; align-items: center; margin-bottom: 12px; }
.tbg_faces img {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid var(--fcom-primary-bg, #fff);
  object-fit: cover;
}
.tbg_faces_rest {
  margin-left: 10px;
  font-size: 13px;
  color: var(--fcom-text-off, #8a958f);
}
.tbg_join_points {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.55;
}
.tbg_join_points li { margin-bottom: 3px; }
.tbg_join_login {
  margin-top: 9px;
  text-align: center;
  font-size: 13px;
  color: var(--fcom-text-off, #8a958f);
}
.tbg_join_login a { font-weight: 600; }

/* --------------------------------------------------------------------------
   Het aanmeldblok in een draad
   Niets wordt uit de HTML gehaald en niets krijgt display none. De reacties
   voorbij de teaser worden alleen weggeklikt met overflow, zodat Googlebot
   precies hetzelfde ziet als een bezoeker.
   -------------------------------------------------------------------------- */
.each_comment[data-tbg-teaser] {
  position: relative;
  max-height: 132px;
  overflow: hidden;
}
.each_comment[data-tbg-teaser]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0) 0%,
              var(--fcom-secondary-bg, #f6f7f9) 88%);
}
html.dark .each_comment[data-tbg-teaser]::after {
  background: linear-gradient(180deg,
              rgba(0, 0, 0, 0) 0%,
              var(--fcom-secondary-bg, #16181d) 88%);
}
.each_comment[data-tbg-beyond],
.child_reply_wrap[data-tbg-beyond] {
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

.tbg_gate {
  background: var(--fcom-primary-bg, #fff);
  border: 1px solid var(--fcom-primary-border, #e3e8ee);
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  margin: 6px 0 18px;
}
.tbg_gate_title { font-size: 18px; font-weight: 700; margin-bottom: 5px; }
.tbg_gate_sub {
  font-size: 14px;
  color: var(--fcom-secondary-text, #5b6b62);
  margin-bottom: 14px;
}
.tbg_gate_actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tbg_gate_stats { font-size: 13px; color: var(--fcom-secondary-text, #5b6b62); }
.tbg_gate_stats b { color: var(--fcom-primary-text, #1a1a1a); }

/* --------------------------------------------------------------------------
   Setup-chip achter een naam  (variant B: met batterij-icoontje)
   Staat bij elke reactie. Wil je hem alleen bij de eerste reactie van iemand
   in een draad, zet dan SETUP_EENMALIG in het JS-bestand op true.
   -------------------------------------------------------------------------- */
.tbg_setup_chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 2px;
  padding: 1px 8px;
  border-radius: 7px;
  background: var(--fcom-secondary-bg, #f2f4f7);
  border: 1px solid var(--fcom-secondary-border, #e8ecf1);
  color: var(--fcom-secondary-text, #5b6b62);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  max-width: 260px;
  vertical-align: middle;
  cursor: default;
}
/* Overal dezelfde regel: de chip krimpt mee en kapt af, de regel breekt niet.
   Zo blijft het menu met de drie puntjes rechts staan en oogt een lijst met
   reacties rustig, want alle chips zijn even breed of smaller. */
.tbg_naam_regel {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: visible;
  row-gap: 0;
}
.tbg_setup_chip {
  flex: 0 1 auto;
  min-width: 0;
}
.each_comment .tbg_setup_chip,
.feed_header .tbg_setup_chip {
  max-width: 190px;
}

/* De volledige tekst bij hover. Het bakje wordt door het script in de body
   gehangen, want elk blok eromheen knipt een zwevend element weg. */
.tbg_setup_chip[data-tbg-vol] { cursor: help; }

.tbg_tip {
  position: fixed;
  z-index: 9999;
  max-width: 320px;
  padding: 7px 11px;
  border-radius: 8px;
  background: var(--fcom-primary-text, #0f172a);
  color: var(--fcom-primary-bg, #fff);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
}

.feed_header .tbg_setup_chip {
  margin-left: 6px;
}
/* Afkappen met puntjes hoort op dit laagje, niet op de chip. De chip is een
   flexbox en die kapt hard af, waardoor het lijkt alsof er niets mist. */
.tbg_setup_tekst {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tbg_setup_icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--fcom-text-off, #8a958f);
}
.tbg_setup_icon svg { width: 12px; height: 12px; display: block; }

/* --------------------------------------------------------------------------
   Onderwerp als pil met merkletter  (variant C)
   Dit is het element van Fluent Community zelf, we geven het alleen vorm.
   -------------------------------------------------------------------------- */
.fcom_feed_topics a[data-tbg-letter],
.fcom_space_topics .el-button[data-tbg-letter] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  border-radius: 999px;
  border: 1px solid var(--fcom-primary-border, #e3e8ee);
  background: var(--fcom-primary-bg, #fff);
  color: var(--fcom-primary-text, #1a2320);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: border-color .15s ease;
}
.fcom_feed_topics a[data-tbg-letter]:hover,
.fcom_space_topics .el-button[data-tbg-letter]:hover {
  border-color: var(--fcom-text-link, #0d9668);
}
.fcom_feed_topics a[data-tbg-letter]::before,
.fcom_space_topics .el-button[data-tbg-letter]::before {
  content: attr(data-tbg-letter);
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--fcom-primary-text, #1a2320);
  color: var(--fcom-primary-bg, #fff);
  font-size: 8.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
/* het actieve onderwerp in de filterbalk van een ruimte */
.fcom_space_topics .el-button.fcom_active_topic[data-tbg-letter] {
  background: var(--fcom-primary-text, #1a2320);
  border-color: var(--fcom-primary-text, #1a2320);
  color: var(--fcom-primary-bg, #fff);
}
.fcom_space_topics .el-button.fcom_active_topic[data-tbg-letter]::before {
  background: var(--fcom-primary-bg, #fff);
  color: var(--fcom-primary-text, #1a2320);
}

/* --------------------------------------------------------------------------
   Eerste stappen
   -------------------------------------------------------------------------- */
.tbg_bar {
  display: block;
  height: 4px;
  margin: 4px 0 6px;
  border-radius: 999px;
  background: var(--fcom-secondary-border, #e8ecf1);
  overflow: hidden;
}
.tbg_bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--fcom-primary-button, #10b981);
}
.tbg_onboard_count {
  font-size: 12px;
  color: var(--fcom-text-off, #8a958f);
  margin-bottom: 8px;
}
.tbg_step {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  font-size: 14px;
  color: var(--fcom-primary-text, #1a1a1a);
  text-decoration: none;
}
.tbg_step.is_done {
  color: var(--fcom-text-off, #8a958f);
  text-decoration: line-through;
}
.tbg_step_box {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 6px;
  border: 1.5px solid var(--fcom-primary-border, #e3e8ee);
  background: var(--fcom-primary-bg, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  line-height: 1;
}
.tbg_step.is_done .tbg_step_box {
  border-color: var(--fcom-primary-button, #10b981);
  background: var(--fcom-primary-button, #10b981);
}

/* --------------------------------------------------------------------------
   Puntenblok in de linker zijkolom
   -------------------------------------------------------------------------- */
.tbg_points_box {
  margin: 12px 14px 6px;
  padding: 12px 0 2px;
  border-top: 1px solid var(--fcom-secondary-border, #e8ecf1);
}
.tbg_points_label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fcom-text-off, #8a958f);
  margin-bottom: 5px;
}
.tbg_points_value {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  margin-right: 4px;
  color: var(--fcom-primary-text, #1a1a1a);
}
.tbg_points_meta { font-size: 13px; color: var(--fcom-secondary-text, #5b6b62); }
.tbg_points_next {
  display: block;
  font-size: 12px;
  color: var(--fcom-text-off, #8a958f);
}

/* --------------------------------------------------------------------------
   Topbijdragers en handige tools
   -------------------------------------------------------------------------- */
.tbg_tool_link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 10px;
  color: var(--fcom-primary-text, #1a1a1a);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.tbg_tool_link:hover { background: var(--fcom-menu-bg-hover, rgba(0, 0, 0, .04)); }
.tbg_tool_icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--fcom-active-bg, rgba(0, 0, 0, .05));
}
.tbg_tool_icon svg { width: 16px; height: 16px; }
.tbg_tool_link .tbg_chevron { margin-left: auto; color: var(--fcom-text-off, #8a958f); }

.tbg_top_row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
.tbg_top_row:hover { background: var(--fcom-menu-bg-hover, rgba(0, 0, 0, .04)); }
.tbg_top_row img { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; }
.tbg_top_name { font-size: 14px; font-weight: 600; }
.tbg_top_points { margin-left: auto; font-size: 13px; font-weight: 700; }

/* --------------------------------------------------------------------------
   Actieknoppen onder de postbox
   -------------------------------------------------------------------------- */
.tbg_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--fcom-secondary-border, #e8ecf1);
}
.tbg_actions button { font: inherit; line-height: 1.4; }
@media (max-width: 640px) {
  .tbg_actions .tbg_btn,
  .tbg_actions .tbg_btn_ghost { flex: 1 1 auto; text-align: center; }
}

/* de bron van de zijkolomblokken blijft verborgen */
#tbg_side_widgets { display: none; }

/* --------------------------------------------------------------------------
   Populaire merken in de zijkolom
   -------------------------------------------------------------------------- */
.tbg_topic_row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 6px;
  border-radius: 10px;
  color: var(--fcom-primary-text, #1a2320);
  text-decoration: none;
  font-size: 14px;
}
.tbg_topic_row:hover { background: var(--fcom-menu-bg-hover, rgba(0, 0, 0, .04)); }
.tbg_topic_letter {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--fcom-primary-text, #1a2320);
  color: var(--fcom-primary-bg, #fff);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}
.tbg_topic_naam { font-weight: 600; }
.tbg_topic_aantal {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--fcom-text-off, #8a958f);
}

/* --------------------------------------------------------------------------
   Onderwerp in de metaregel in plaats van los bovenaan het bericht
   -------------------------------------------------------------------------- */
.fcom_feed_topics[data-tbg-moved] { display: none; }

/* De pil op zijn eigen plek boven het bericht: klein en dicht op de rest,
   zodat hij een label is en geen kop. */
.fcom_feed_topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
  line-height: 1;
}
.fcom_feed_topics.tbg_topic_inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1;
}
.fcom_feed_topics.tbg_topic_inline a[data-tbg-letter] {
  padding: 2px 8px 2px 2px;
  gap: 4px;
  font-size: 11px;
}
.fcom_feed_topics.tbg_topic_inline a[data-tbg-letter]::before {
  width: 14px;
  height: 14px;
  font-size: 8px;
  line-height: 14px;
}


/* de eigen gastenregel van Fluent Community, als onze kaart er staat */
[data-tbg-native-bar] { display: none; }

/* --------------------------------------------------------------------------
   Merkpagina op de site: [tbg_merk]
   Staat buiten de portal, dus hier geen --fcom variabelen maar nuchtere
   waarden die je thema niet in de weg zitten.
   -------------------------------------------------------------------------- */
.tbg_merk_index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.tbg_merk_kaart {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #e3e8ee;
  border-radius: 10px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease;
}
.tbg_merk_kaart:hover { border-color: #10b981; }
.tbg_merk_naam { font-weight: 700; font-size: 15px; }
.tbg_merk_aantal { margin-left: auto; font-size: 13px; color: #8a958f; }

.tbg_merk_kop { margin-bottom: 14px; }
.tbg_merk_kop h2 { margin: 6px 0 2px; font-size: 22px; line-height: 1.25; }
.tbg_merk_terug { font-size: 13.5px; font-weight: 600; text-decoration: none; }
.tbg_merk_meta { margin: 0; font-size: 13.5px; color: #8a958f; }

.tbg_merk_lijst {
  border: 1px solid #e3e8ee;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.tbg_merk_lijst > .tbg_merk_kop { padding: 16px 18px 0; margin-bottom: 8px; }
.tbg_merk_draad {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid #eef1f5;
  color: inherit;
  text-decoration: none;
}
.tbg_merk_draad:hover { background: #f8fafb; }
.tbg_merk_titel { flex: 1; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.tbg_merk_regel { font-size: 12.5px; color: #8a958f; }
.tbg_merk_reacties {
  flex: 0 0 42px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #5b6b62;
}
.tbg_merk_cta {
  padding: 16px 18px;
  border-top: 1px solid #eef1f5;
  background: #f8fafb;
}
@media (max-width: 560px) {
  .tbg_merk_regel { display: none; }
  .tbg_merk_draad { padding: 11px 14px; }
}