/* ============================================================
   Photodrome theme — custom overrides
   Geladen via overall_header.html na stylesheet.css.
   Geen compilatie nodig: bewerk dit bestand direct.
   ============================================================ */


/* ==========================================================
   0. TYPOGRAFIE
   ========================================================== */

body,
input, textarea, select, button {
  font-family: 'Inter', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
ul.topiclist li.header dt,
ul.topiclist li.header dd,
.topictitle, .forumtitle,
.postbody h3,
#page-header .headerbar,
.navbar .nav-tabs a,
.nav-tabs li a,
.navbar.secondary > ul > li > a,
.site-description {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
}


/* ==========================================================
   1. ACHTERGROND
   ========================================================== */

html,
body,
#body-wrapper {
  background: #000;
  background-image: none;
}


/* ==========================================================
   2. PHOTOSWIPE
   ========================================================== */

.postbody a.pswp-link img.postimage { cursor: zoom-in; }
.pswp__button--close { display: none !important; }

.pswp__custom-close {
  font-size: 22px;
  line-height: 1;
  display: inline-block;
  transform: translateY(-1px);
}

.pswp__zoom-indicator {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.55);
  margin-top: 15px;
}


/* ==========================================================
   3. PAGINA-BREEDTE EN WRAP
   ========================================================== */

.page-width {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  box-sizing: border-box;
}

#wrap,
#page-header {
  margin-top: -20px !important;
  padding-top: 0 !important;
}

#wrap {
  padding-left: 18px !important;
  padding-right: 18px !important;
}


/* ==========================================================
   4. PORTAL HEADER
   ========================================================== */

.portal-hero {
  background: linear-gradient(180deg, #343434 0%, #1e1e1e 100%);
  border-bottom: 1px solid #77706b;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  box-sizing: border-box;
}

.portal-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  font-family: "Trebuchet MS", "Verdana", sans-serif;
  min-height: 86px;
  width: 100%;
  box-sizing: border-box;
}

.portal-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.portal-brand__logo {
  height: 96px;
  width: auto;
  display: block;
  border-radius: 6px;
}

.portal-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  font-weight: 600;
  font-size: 13px;
  margin-left: auto;
}

.portal-nav a {
  padding: 6px 12px;
  border-radius: 6px;
  background: #1c1c1c;
  border: 1px solid #77706b;
  color: #b16d26;
  text-decoration: none;
  line-height: 1.2;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.portal-nav a:hover,
.portal-nav a:focus {
  color: #b16d26;
  text-decoration: none;
  border-color: rgba(232,130,3,0.6);
  background: linear-gradient(90deg, rgba(232,130,3,0.12) 0%, #1c1c1c 70%);
  box-shadow: 0 0 0 1px rgba(232,130,3,0.2), 0 2px 8px rgba(232,130,3,0.1);
}


/* ==========================================================
   5. NAVIGATIE
   ========================================================== */

/* Tabbed navbar — oranje achtergrond */
.navbar.tabbed,
.navbar .nav-tabs,
.navbar .nav-tabs .tab,
.navbar .nav-tabs .tab.selected {
  background: #b16d26;
}

.navbar .nav-tabs .tab {
  transition: background 0.18s ease;
}

.navbar .nav-tabs .tab:hover {
  background: linear-gradient(90deg, #d4822e 0%, #b16d26 60%);
}

.navbar.tabbed {
  border-radius: 6px;
  overflow: visible;
  position: relative;
  z-index: 900;
}

.navbar.tabbed .nav-tabs { border-radius: 6px; }

.navbar .nav-tabs .tab > a,
.navbar .nav-tabs .tab > strong,
.navbar .nav-tabs .tab > strong .arrow,
.navbar.secondary > ul > li > a {
  color: #fff;
}

/* Voorkom dat vaste navbar over portal-header valt */
.navbar .inner.static {
  position: relative;
  top: auto;
}

/* Dropdown zichtbaarheid */
.navbar .nav-tabs .dropdown { z-index: 920; top: 30px; }
.dropdown-up .navbar .nav-tabs .dropdown { top: auto; bottom: 30px; }

.navbar .nav-tabs .dropdown-visible .dropdown {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Quick-links dropdown */
#quick-links .dropdown {
  margin-right: 0 !important;
  margin-left: 0 !important;
  left: 0 !important;
  right: auto !important;
  top: 30px !important;
  min-width: 220px;
  z-index: 1200;
}

#quick-links .dropdown .dropdown-contents {
  background: #2b2b2b;
  border: 1px solid #565656;
  border-top-color: #b16d26;
  color: #f0e9dd;
}

#quick-links .dropdown .dropdown-contents a { color: #f0e9dd; }

#quick-links .dropdown .dropdown-contents a:hover,
#quick-links .dropdown .dropdown-contents a:focus {
  color: #fff;
  background: #b16d26;
}

/* Secundaire navbar */
.navbar.secondary { background: #1c1c1c; }

.navbar.secondary > ul > li > a {
  transition: background 0.18s ease, color 0.18s ease;
  border-radius: 4px;
  padding: 2px 6px;
}

.navbar.secondary > ul > li > a:hover {
  background: linear-gradient(90deg, rgba(232,130,3,0.15) 0%, transparent 70%);
  color: #E88203 !important;
}

/* ==========================================================
   BREADCRUMBS
   ========================================================== */

.breadcrumbs .crumb {
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.breadcrumbs .crumb a {
  color: #9a9590 !important;
  transition: color 0.15s ease;
}

.breadcrumbs .crumb a:hover {
  color: #E88203 !important;
}

/* Huidige pagina (laatste crumb) — oranje en iets groter */
.breadcrumbs .crumb:last-child a {
  color: #E88203 !important;
  font-size: 14px !important;
}

/* Scheidingsteken oranje en iets groter */
.breadcrumbs .crumb:before {
  color: #E88203 !important;
  font-size: 10px !important;
}


.navbar.secondary .search-box .inputbox {
  border: 1px solid #b16d26;
  background-color: #111;
  color: #e6e0d6;
}

.navbar.secondary .search-box .button-search,
.navbar.secondary .search-box .button-search-end {
  background-color: #b16d26;
  border-color: #b16d26;
  color: #fff;
}

/* Header zoekbalk */
.headerbar { min-height: 64px; }

.headerbar .search-header {
  position: relative;
  top: auto;
  right: auto;
  margin: 10px 0 0;
  float: right;
}


/* ==========================================================
   6. KNOPPEN EN ZOEKBALK
   ========================================================== */

.action-bar .button,
.button, .button1, .button2,
.button-search, .button-search-end {
  background-color: #1c1c1c !important;
  border: 1px solid #E88203 !important;
  color: #E88203 !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease !important;
}

.action-bar .button:hover,
.button:hover, .button1:hover, .button2:hover,
.button-search:hover, .button-search-end:hover {
  background: linear-gradient(90deg, #f59520 0%, #E88203 60%) !important;
  border-color: #E88203 !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(232,130,3,0.4), 0 4px 12px rgba(232,130,3,0.2) !important;
}

/* Ga naar (jumpbox dropdown) */
.dropdown-select {
  background-color: #242424 !important;
  border-color: #3a3a3a !important;
  color: #E88203 !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  transition: border-color 0.18s ease, background 0.18s ease !important;
}

.dropdown-select:hover,
.dropdown-visible .dropdown-select {
  background: linear-gradient(90deg, rgba(232,130,3,0.12) 0%, #242424 70%) !important;
  border-color: #E88203 !important;
  color: #E88203 !important;
  box-shadow: 0 0 0 1px rgba(232,130,3,0.25) !important;
}

/* Zoekbalken — consistente stijl voor header én action-bar */
.search-box fieldset,
.search-header fieldset {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Input: volledig afgerond, oranje rand */
.search-box .inputbox,
.search-header .inputbox {
  border: 1px solid #E88203 !important;
  background-color: #1c1c1c !important;
  color: #e6e0d6 !important;
  border-radius: 8px !important;
  align-self: stretch !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* Zoekknop en instellingenknop: zelfde stijl als andere buttons */
.search-box .button-search,
.search-box .button-search-end,
.search-header .button-search,
.search-header .button-search-end {
  background-color: #1c1c1c !important;
  border: 1px solid #E88203 !important;
  color: #E88203 !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  transition: background 0.18s ease, box-shadow 0.18s ease !important;
}

.search-box .button-search:hover,
.search-box .button-search-end:hover,
.search-header .button-search:hover,
.search-header .button-search-end:hover {
  background: linear-gradient(90deg, #f59520 0%, #E88203 60%) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(232,130,3,0.4), 0 4px 12px rgba(232,130,3,0.2) !important;
}

/* Action-bar zoekbalk rechts uitlijnen */
.action-bar .search-box {
  float: right;
  margin-left: 12px;
}

/* ==========================================================
   PAGINERING
   ========================================================== */

/* Reset: .button regel hierboven pakt ook paginerings-buttons */
.pagination a,
.pagination .button,
.pagination .arrow a {
  background-color: #242424 !important;
  background-image: none !important;
  border-color: #3a3a3a !important;
  color: #E88203 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.pagination a:hover,
.pagination .button:hover,
.pagination .arrow a:hover {
  background: linear-gradient(90deg, rgba(232,130,3,0.18) 0%, #242424 70%) !important;
  border-color: #E88203 !important;
  color: #E88203 !important;
  box-shadow: none !important;
}

.pagination li a,
.pagination li span {
  border-radius: 6px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}

.pagination li a {
  color: #E88203 !important;
  background-color: #242424 !important;
  border-color: #3a3a3a !important;
}

.pagination li a:hover {
  background: linear-gradient(90deg, rgba(232,130,3,0.18) 0%, #242424 70%) !important;
  border-color: #E88203 !important;
  color: #E88203 !important;
}

/* Huidige pagina */
.pagination li.active span {
  background-color: #E88203 !important;
  border-color: #E88203 !important;
  color: #111 !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}

/* Paginanummers in topic-rijen */
.row .pagination li a,
.row .pagination li span {
  border-radius: 4px !important;
  font-size: 10px !important;
}


/* Forum-richtlijnbalk onder "Nieuw onderwerp" */
.forum-guidelines {
  margin: 6px 4px 12px;
  padding: 8px 12px;
  background: #1c1c1c;
  border: 1px solid #4a4a4a;
  border-radius: 8px;
  color: #c4bdb2;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.forum-guidelines p { margin: 0; }

.forum-guidelines .guideline-icon,
.forum-guidelines .guideline-number {
  color: #b16d26;
  font-weight: 700;
}


/* ==========================================================
   7. BLOKKEN EN FRAMES
   ========================================================== */

.forabg,
.forumbg,
.stat-block,
.panel,
ul.topiclist.topics li.row {
  border: 1px solid #505050;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  border-radius: 12px;
  margin: 0 4px 8px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

@media (hover: hover) {
  ul.topiclist.topics li.row:hover {
    border-color: #6a4a1a;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 0 1px rgba(177,109,38,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
    background: linear-gradient(90deg, rgba(232,130,3,0.07) 0%, transparent 35%);
  }
}

ul.topiclist.topics li.row:first-child { margin-top: 6px; }
/* Override parent theme .forabg ul.topiclist li.header { margin: -5px -10px 5px; padding: 6px }
   Zonder !important won de parent (hogere specificiteit 0,2,2 vs 0,1,2). */
.forabg ul.topiclist li.header,
.forumbg ul.topiclist li.header,
ul.topiclist li.header {
  margin: 0 4px 6px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: 1px solid transparent !important;
}

.forabg .header,
.forumbg .header { border-radius: 8px; }

/* Oranje balkjes */
.forabg .header,
.forumbg .header,
ul.topiclist li.header,
.topiclist .header,
.cat, .catdiv {
  background: #b16d26;
  border-color: #b16d26;
}

.topiclist li.header,
.topiclist li.header dt,
.topiclist li.header dd,
.topiclist li.header dl {
  background: #b16d26 !important;
  border-color: #b16d26 !important;
}

/* Balkje-hoogte */
.forabg .header,
.forumbg .header,
ul.topiclist li.header,
.topiclist .header {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  height: 32px !important;
  min-height: 32px !important;
  line-height: 24px !important;
}

ul.topiclist li.header dt,
ul.topiclist li.header dd {
  height: 32px !important;
  line-height: 32px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

ul.topiclist li.header dt .list-inner { line-height: 32px !important; }

/* Forum-index kaart-rijen */
body.section-index ul.topiclist.forums li.header {
  margin: 0 4px 6px !important;
  border: 1px solid transparent !important;
}

body.section-index ul.topiclist.forums li.row {
  border: 1px solid #505050 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  margin: 0 4px 8px !important;
  overflow: hidden !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

@media (hover: hover) {
  body.section-index ul.topiclist.forums li.row:hover {
    border-color: #6a4a1a !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 0 1px rgba(177,109,38,0.25), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    background: linear-gradient(90deg, rgba(232,130,3,0.07) 0%, transparent 35%) !important;
  }
}

body.section-index ul.topiclist.forums li.row:first-child { margin-top: 6px !important; }


/* ==========================================================
   8. TOPICLIJST — FLEX LAYOUT
   ========================================================== */

/* Rijlayout */
ul.topiclist.topics li.row dl {
  display: flex !important;
  width: 100% !important;
}

ul.topiclist.topics li.row dt {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
}

ul.topiclist.topics li.row dd {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Headerlayout */
ul.topiclist li.header dl {
  display: flex !important;
  width: 100% !important;
}

ul.topiclist li.header dt { flex: 1 !important; }

ul.topiclist li.header dd {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-left: 1px solid #000 !important;
}

/* Kolombreedtes */
ul.topiclist dd.trophies,
ul.topiclist li.header dd.trophies {
  width: 50px !important;
  flex: 0 0 50px !important;
  text-align: center !important;
  border-left: none !important;
}

ul.topiclist dd.author,
ul.topiclist li.header dd.author {
  flex: 0 1 180px !important;
  min-width: 180px !important;
  text-align: center !important;
  padding: 0 4px !important;
  font-size: 13px !important;
}

ul.topiclist li.header dd.posts,
ul.topiclist li.header dd.views,
ul.topiclist.topics dd.posts,
ul.topiclist.topics dd.views {
  flex: 0 0 85px !important;
  min-width: 85px !important;
  text-align: center !important;
  font-size: 13px !important;
}

ul.topiclist li.header dd.lastpost,
ul.topiclist.topics dd.lastpost {
  flex: 0 1 220px !important;
  min-width: 220px !important;
  text-align: left !important;
  padding-left: 8px !important;
  justify-content: flex-start !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Header-label "Laatste bericht" gecentreerd */
ul.topiclist li.header dd.lastpost {
  justify-content: center !important;
  text-align: center !important;
}

/* Rij-borders */
ul.topiclist dd { box-sizing: border-box; }

ul.topiclist.topics dd {
  border-left: 1px solid #4a4a4a !important;
  padding: 8px 6px;
  box-sizing: border-box;
}

ul.topiclist.topics dd.trophies { border-left: none !important; }

/* Titel-kolom padding */
ul.topiclist li.header dt .list-inner {
  padding-left: 10px !important;
  margin-right: 0 !important;
}

/* Parent theme: .forabg li.header dl.row-item dt .list-inner { padding-left: 0; padding-right: 50px } — resetten */
.forabg li.header dl.row-item dt .list-inner,
.forumbg li.header dl.row-item dt .list-inner {
  padding-left: 10px !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

ul.topiclist.topics .list-inner {
  padding: 10px 6px 10px 50px !important;
  margin-right: 0 !important;
  line-height: 1.55 !important;
}

/* Op search.php zitten li.header en li.row in dezelfde ul.topiclist.topics.
   Geef li.header een transparante border zodat de content-breedte gelijk is aan li.row (1px border). */
ul.topiclist.topics li.header {
  border: 1px solid transparent !important;
  box-sizing: border-box !important;
}

/* Trophy-icoontje centreren in kolom */
ul.topiclist dd.trophies .topic-trophy-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* Titels vet en oranje */
a.forumtitle,
a.topictitle {
  font-weight: 700;
  font-size: 16px !important;
}

a.forumtitle,
h2.topic-title a,
.postbody h3 a {
  color: #E88203;
}

/* Gelezen topics: warm lichtgrijs */
a.topictitle {
  color: #d4cfc9;
}

/* Hover: oranje als interactie-signaal */
a.topictitle:hover {
  color: #E88203 !important;
}

.forum_unread .forumtitle,
.forum_unread_subforum .forumtitle,
.forum_unread_locked .forumtitle,
.icon-link + .list-inner > a.forumtitle {
  color: #E88203;
}

/* Gelezen topics: leesbaar label achter de titel — alleen voor ingelogde leden */
.user-logged-in .topic_read .topictitle::after,
.user-logged-in .topic_read_mine .topictitle::after,
.user-logged-in .topic_read_locked .topictitle::after,
.user-logged-in .topic_read_locked_mine .topictitle::after,
.user-logged-in .topic_read_hot .topictitle::after,
.user-logged-in .topic_read_hot_mine .topictitle::after,
.user-logged-in .announce_read .topictitle::after,
.user-logged-in .sticky_read .topictitle::after,
.user-logged-in .global_read .topictitle::after {
  content: ' (dit topic heb je gelezen)';
  font-size: 14px;
  font-weight: 400;
  font-style: italic;
  color: #9a9590;
}

/* ==========================================================
   TOPIC STATUS ICONEN — CSS vervangt PNG achtergronden
   ========================================================== */

/* Verwijder alle PNG achtergronden (topics + forums) */
.topic_read, .topic_read_mine, .topic_read_locked, .topic_read_locked_mine,
.topic_read_hot, .topic_read_hot_mine, .pm_read,
.topic_unread, .pm_unread, .topic_unread_mine,
.topic_unread_hot, .topic_unread_hot_mine,
.topic_unread_locked, .topic_unread_locked_mine,
.announce_read, .announce_read_mine, .announce_read_locked, .announce_read_locked_mine,
.announce_unread, .announce_unread_mine, .announce_unread_locked, .announce_unread_locked_mine,
.sticky_read, .sticky_read_mine, .sticky_read_locked, .sticky_read_locked_mine,
.sticky_unread, .sticky_unread_mine, .sticky_unread_locked, .sticky_unread_locked_mine,
.global_read, .global_read_mine, .global_read_locked, .global_read_locked_mine,
.global_unread, .global_unread_mine, .global_unread_locked, .global_unread_locked_mine,
.topic_moved,
.forum_read, .forum_read_locked, .forum_read_subforum,
.forum_unread, .forum_unread_locked, .forum_unread_subforum,
.forum_link {
  background-image: none !important;
}

/* Ook dt onderdrukken */
li.row dl.row-item dt {
  background-image: none !important;
}

/* HiDPI (Retina/iPhone): stylesheet.css heeft eigen @media (-webkit-min-device-pixel-ratio: 2)
   met HD PNG rules. Expliciet dezelfde query gebruiken zodat onze !important zeker wint. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 1.5dppx) {
  .topic_read, .topic_read_mine, .topic_read_locked, .topic_read_locked_mine,
  .topic_read_hot, .topic_read_hot_mine, .pm_read,
  .topic_unread, .pm_unread, .topic_unread_mine,
  .topic_unread_hot, .topic_unread_hot_mine,
  .topic_unread_locked, .topic_unread_locked_mine,
  .announce_read, .announce_read_mine, .announce_read_locked, .announce_read_locked_mine,
  .announce_unread, .announce_unread_mine, .announce_unread_locked, .announce_unread_locked_mine,
  .sticky_read, .sticky_read_mine, .sticky_read_locked, .sticky_read_locked_mine,
  .sticky_unread, .sticky_unread_mine, .sticky_unread_locked, .sticky_unread_locked_mine,
  .global_read, .global_read_mine, .global_read_locked, .global_read_locked_mine,
  .global_unread, .global_unread_mine, .global_unread_locked, .global_unread_locked_mine,
  .topic_moved,
  .forum_read, .forum_read_locked, .forum_read_subforum,
  .forum_unread, .forum_unread_locked, .forum_unread_subforum,
  .forum_link {
    background-image: none !important;
    background-size: auto !important;
  }
  li.row dl.row-item dt {
    background-image: none !important;
  }
}

/* Positionering — alleen topic-rijen, niet de header-balk */
li.row dl.row-item {
  position: relative !important;
}

/* Basis-cirkel: exacte rijkleur (.bg1) met lichtgrijze rand (gelezen) */
li.row dl.row-item::before {
  content: '' !important;
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #383838 !important;
  border: 2px solid #555 !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
/* .bg2 alternerende rijen */
li.row.bg2 dl.row-item::before {
  background: #343434 !important;
}

/* FontAwesome icon bovenop cirkel */
li.row dl.row-item::after {
  font-family: 'FontAwesome' !important;
  font-size: 13px !important;
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  color: #888 !important;
  pointer-events: none !important;
}

/* GELEZEN: gedempd oranje vinkje */
li.row dl.row-item.topic_read::after,
li.row dl.row-item.topic_read_mine::after,
li.row dl.row-item.topic_read_hot::after,
li.row dl.row-item.topic_read_hot_mine::after,
li.row dl.row-item.pm_read::after { content: '\f00c' !important; color: #b06820 !important; }

/* GELEZEN + VERGRENDELD: gedempd oranje slotje */
li.row dl.row-item.topic_read_locked::after,
li.row dl.row-item.topic_read_locked_mine::after { content: '\f023' !important; color: #b06820 !important; }

/* ONGELEZEN: oranje rand, oranje pijltje */
li.row dl.row-item.topic_unread::before,
li.row dl.row-item.topic_unread_mine::before,
li.row dl.row-item.pm_unread::before {
  border-color: #E88203 !important;
}
li.row dl.row-item.topic_unread::after,
li.row dl.row-item.topic_unread_mine::after,
li.row dl.row-item.pm_unread::after {
  content: '\f054' !important;
  color: #E88203 !important;
}

/* ONGELEZEN HOT: oranje rand, bliksem */
li.row dl.row-item.topic_unread_hot::before,
li.row dl.row-item.topic_unread_hot_mine::before {
  border-color: #E88203 !important;
}
li.row dl.row-item.topic_unread_hot::after,
li.row dl.row-item.topic_unread_hot_mine::after {
  content: '\f0e7' !important; color: #E88203 !important;
}

/* ONGELEZEN + VERGRENDELD: oranje rand, slotje */
li.row dl.row-item.topic_unread_locked::before,
li.row dl.row-item.topic_unread_locked_mine::before {
  border-color: #E88203 !important;
}
li.row dl.row-item.topic_unread_locked::after,
li.row dl.row-item.topic_unread_locked_mine::after {
  content: '\f023' !important; color: #E88203 !important;
}

/* AANKONDIGING ONGELEZEN: rode rand, uitroepteken */
li.row dl.row-item.announce_unread::before,
li.row dl.row-item.announce_unread_mine::before,
li.row dl.row-item.global_unread::before,
li.row dl.row-item.global_unread_mine::before {
  border-color: #c0392b !important;
}
li.row dl.row-item.announce_unread::after,
li.row dl.row-item.announce_unread_mine::after,
li.row dl.row-item.global_unread::after,
li.row dl.row-item.global_unread_mine::after {
  content: '\f06a' !important; color: #c0392b !important; font-size: 15px !important;
}

/* AANKONDIGING GELEZEN: uitroepteken gedempd */
li.row dl.row-item.announce_read::after,
li.row dl.row-item.announce_read_mine::after,
li.row dl.row-item.global_read::after,
li.row dl.row-item.global_read_mine::after { content: '\f06a' !important; }

/* STICKY ONGELEZEN: oranje rand, pin */
li.row dl.row-item.sticky_unread::before,
li.row dl.row-item.sticky_unread_mine::before {
  border-color: #E88203 !important;
}
li.row dl.row-item.sticky_unread::after,
li.row dl.row-item.sticky_unread_mine::after { content: '\f08d' !important; color: #E88203 !important; }

/* STICKY GELEZEN: pin gedempd */
li.row dl.row-item.sticky_read::after,
li.row dl.row-item.sticky_read_mine::after { content: '\f08d' !important; }

/* VERPLAATST TOPIC */
li.row dl.row-item.topic_moved::after { content: '\f08e' !important; }

/* VERGRENDELD AANKONDIGING */
li.row dl.row-item.announce_unread_locked::before,
li.row dl.row-item.announce_unread_locked_mine::before,
li.row dl.row-item.global_unread_locked::before,
li.row dl.row-item.global_unread_locked_mine::before {
  border-color: #c0392b !important;
}
li.row dl.row-item.announce_unread_locked::after,
li.row dl.row-item.announce_unread_locked_mine::after,
li.row dl.row-item.global_unread_locked::after,
li.row dl.row-item.global_unread_locked_mine::after {
  content: '\f023' !important; color: #c0392b !important;
}

/* FORUM GELEZEN: gedempd oranje vinkje */
li.row dl.row-item.forum_read::after,
li.row dl.row-item.forum_read_subforum::after { content: '\f00c' !important; color: #b06820 !important; }

/* FORUM GELEZEN + VERGRENDELD */
li.row dl.row-item.forum_read_locked::after { content: '\f023' !important; color: #b06820 !important; }

/* FORUM ONGELEZEN: oranje rand + oranje pijltje */
li.row dl.row-item.forum_unread::before,
li.row dl.row-item.forum_unread_subforum::before { border-color: #E88203 !important; }
li.row dl.row-item.forum_unread::after,
li.row dl.row-item.forum_unread_subforum::after { content: '\f054' !important; color: #E88203 !important; }

/* FORUM ONGELEZEN + VERGRENDELD */
li.row dl.row-item.forum_unread_locked::before { border-color: #E88203 !important; }
li.row dl.row-item.forum_unread_locked::after { content: '\f023' !important; color: #E88203 !important; }

/* FORUM LINK (extern) */
li.row dl.row-item.forum_link::after { content: '\f08e' !important; color: #888 !important; }

/* ==========================================================
   "MINE"-STIPJE — jij hebt zelf in dit topic gereageerd
   phpBB markeert die topics met een _mine class. Klein oranje
   bolletje rechtsboven op de cirkel, met rijkleur-rand zodat het
   los oogt. Op dt::after (dl::before/::after + .topictitle::after
   zijn al in gebruik). Geldt alleen voor topics, niet voor forums.
   ========================================================== */
li.row dl.row-item[class*="_mine"] dt::after {
  content: '' !important;
  position: absolute !important;
  left: 32px !important;
  top: 50% !important;
  margin-top: -19px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #E88203 !important;
  border: 2px solid #383838 !important;
  box-sizing: border-box !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
/* .bg2 alternerende rijen: ring in die rijkleur */
li.row.bg2 dl.row-item[class*="_mine"] dt::after {
  border-color: #343434 !important;
}


/* Klikbare overlay op de cirkel. Expliciete geometrie zodat het hitvlak exact
   over de cirkel valt (left:10px, 34px). iOS Safari tikt niet op volledig
   transparante lege links → nagenoeg-transparante achtergrond. */
li.row dl.row-item a.row-item-link {
  display: block !important;
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  background-color: rgba(0,0,0,0.001) !important;
  border-radius: 50% !important;
  z-index: 4 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}


/* Ongelezen topics: wit — springt er duidelijk uit als nieuw */
.global_unread .topictitle, .global_unread_mine .topictitle,
.announce_unread_mine .topictitle, .sticky_unread_mine .topictitle,
.announce_unread .topictitle, .sticky_unread .topictitle,
.global_unread_locked .topictitle, .global_unread_locked_mine .topictitle,
.announce_unread_locked_mine .topictitle, .sticky_unread_locked_mine .topictitle,
.announce_unread_locked .topictitle, .sticky_unread_locked .topictitle,
.topic_unread .topictitle, .pm_unread .topictitle,
.topic_unread_mine .topictitle, .topic_unread_locked .topictitle,
.topic_unread_locked_mine .topictitle, .topic_unread_hot .topictitle,
.topic_unread_hot_mine .topictitle {
  color: #ffffff !important;
}

/* Metadata-tekst */
ul.topiclist.topics .topic-poster,
ul.topiclist.topics .lastpost,
ul.topiclist.topics .author {
  color: #c4bdb2;
  font-size: 13px;
  line-height: 1.5;
}

/* ==========================================================
   ZOEKRESULTATEN
   ========================================================== */

/* Titel boven de resultaten */
body.section-search h2.searchresults-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #E88203 !important;
  margin: 8px 4px 4px !important;
}

/* Zoekterm link in titel */
body.section-search h2.searchresults-title a {
  color: #E88203 !important;
  text-decoration: underline !important;
}

/* "Ga naar geavanceerd zoeken" link */
body.section-search p.advanced-search-link,
body.section-search p.return-link {
  margin: 0 4px 12px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
}

body.section-search p.advanced-search-link a,
body.section-search p.return-link a {
  color: #9a9590 !important;
  transition: color 0.15s ease;
}

body.section-search p.advanced-search-link a:hover,
body.section-search p.return-link a:hover {
  color: #E88203 !important;
}

/* Header-balk: transparante rand zodat dl evenwijd is aan kaart-rijen */
body.section-search .forumbg > .inner > ul.topiclist li.header {
  margin: 0 4px 6px !important;
  border: 1px solid transparent !important;
  box-sizing: border-box !important;
}

/* Auteur kolom */
body.section-search .topiclist li.header dd.author,
body.section-search .topiclist.topics dd.author {
  flex: 0 0 160px !important;
  min-width: 160px !important;
  text-align: center !important;
}

/* Laatste bericht kolom */
body.section-search .topiclist li.header dd.lastpost,
body.section-search .topiclist.topics dd.lastpost {
  flex: 0 1 200px !important;
  min-width: 180px !important;
}

/* Profielpagina */
dl.details dt {
  color: #9a9590 !important;
}

dl.details dd {
  color: #E88203 !important;
}

/* H2/H3 globaal: oude theme-kleuren vervangen */
h2 {
  color: #E88203 !important;
}

h3 {
  color: #c4bdb2 !important;
}

/* Uitzondering: h3 binnen posts (bericht-opmaak) */
.post h3, .postbody h3 {
  color: #c4bdb2 !important;
}

/* ==========================================================
   GEBRUIKERSPANEEL (UCP)
   ========================================================== */

/* Hoofd-tabs (Overzicht | Forumvoorkeuren | Profiel …) */
#tabs .tab > a {
  color: #c4bdb2 !important;
  background: #242424 !important;
  border-color: #3a3a3a !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  transition: color 0.15s ease, background 0.15s ease !important;
}

#tabs .tab > a:hover {
  color: #E88203 !important;
  background: #2a2a2a !important;
}

#tabs .activetab > a,
#tabs .activetab > a:hover {
  color: #E88203 !important;
  background: #1c1c1c !important;
  border-color: #E88203 !important;
  font-weight: 700 !important;
}

/* Zijbalk-navigatie (Voorpagina, Beheer abonnementen …) */
#navigation a {
  color: #c4bdb2 !important;
  background: #242424 !important;
  background-image: none !important;
  border-radius: 6px !important;
  transition: color 0.15s ease, background 0.15s ease !important;
}

#navigation a:hover {
  color: #E88203 !important;
  background: linear-gradient(90deg, rgba(232,130,3,0.12) 0%, #242424 70%) !important;
  background-image: none !important;
}

#navigation .nav-selected a,
#navigation li.selected a {
  color: #E88203 !important;
  background: linear-gradient(90deg, rgba(232,130,3,0.15) 0%, #242424 70%) !important;
  font-weight: 600 !important;
}

/* Navigatie-items (ul.navlinks valt hier soms ook onder) */
body.section-ucp ul.navlinks a {
  color: #c4bdb2 !important;
  transition: color 0.15s ease;
}

body.section-ucp ul.navlinks a:hover {
  color: #E88203 !important;
}

body.section-ucp ul.navlinks li.selected a,
body.section-ucp ul.navlinks .selected > a {
  color: #E88203 !important;
  font-weight: 600 !important;
}

/* Fieldset titels (legend) */
body.section-ucp fieldset legend,
body.section-ucp .panel legend {
  color: #E88203 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
}

/* Fieldset labels */
body.section-ucp fieldset dt label,
body.section-ucp fieldset dt {
  color: #9a9590 !important;
}

/* Beschrijvende tekst onder velden */
body.section-ucp fieldset dd .explain,
body.section-ucp .explain {
  color: #9a9590 !important;
  font-size: 11px !important;
}


/* Verberg "Ongelezen berichten" uit quick-links */
.dropdown-contents a[href*="search_id=unreadposts"] { display: none !important; }


/* ==========================================================
   9. FORUMLIJST — FLEX LAYOUT (index.php / viewforum.php)
   ========================================================== */

ul.topiclist.forums li.row dl {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

ul.topiclist.forums li.row dt {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding-left: 50px !important;
}

ul.topiclist.forums li.row dd {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Kolombreedtes */
ul.topiclist.forums dd.topics {
  width: 110px !important;
  flex: 0 0 110px !important;
}

ul.topiclist.forums dd.posts {
  width: 110px !important;
  flex: 0 0 110px !important;
}

ul.topiclist.forums dd.lastpost {
  width: 260px !important;
  flex: 0 0 260px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 14px !important;
}

/* Borders rijen */
ul.topiclist.forums li.row dd { border: none !important; }
ul.topiclist.forums li.row dd.topics { border-left: 1px solid #4a4a4a !important; border-right: 1px solid #4a4a4a !important; }
ul.topiclist.forums li.row dd.posts { border-right: 1px solid #4a4a4a !important; }

/* Padding en marges */
ul.topiclist.forums .list-inner { padding: 8px 6px !important; min-width: 0; }

/* Beschrijving afbreken */
ul.topiclist.forums li.row .forum-description {
  display: block;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.4;
}

/* Forum zonder beschrijving: titel centreren */
ul.topiclist.forums li.row .list-inner > a.forumtitle:only-child {
  display: block;
  text-align: center;
}

/* Laatste-bericht links uitlijnen (index en viewforum) */
body.section-index ul.topiclist.forums li.row dd.lastpost,
body.section-viewforum ul.topiclist.forums li.row dd.lastpost {
  text-align: left !important;
  justify-content: flex-start !important;
}

body.section-index ul.topiclist.forums dd.lastpost > span,
body.section-index ul.topiclist.forums li.row dd.lastpost .forum-lastpost,
body.section-index ul.topiclist.forums li.row dd.lastpost .forum-lastpost span,
body.section-viewforum ul.topiclist.forums dd.lastpost > span,
body.section-viewforum ul.topiclist.forums li.row dd.lastpost .forum-lastpost,
body.section-viewforum ul.topiclist.forums li.row dd.lastpost .forum-lastpost span {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}

/* Viewforum en zoekresultaten: lastpost links */
body.section-viewforum ul.topiclist.topics dd.lastpost,
body.section-viewforum ul.topiclist.topics dd.lastpost > span,
body.section-viewforum ul.topiclist.topics li.header dd.lastpost,
body.section-search ul.topiclist.topics dd.lastpost,
body.section-search ul.topiclist.topics dd.lastpost > span,
body.section-search ul.topiclist.topics li.header dd.lastpost {
  text-align: left !important;
}

body.section-viewforum ul.topiclist.topics dd.lastpost > span,
body.section-search ul.topiclist.topics dd.lastpost > span {
  display: block !important;
  width: 100% !important;
}


/* ==========================================================
   10. CATEGORIE HEADERS (forabg balk bovenaan forum)
   ========================================================== */

.forabg > .inner > ul.topiclist:not(.forums),
.forabg > .inner > ul.topiclist:first-of-type {
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* index.php: li.header krijgt zelfde marge+border als li.row zodat dl-breedtes gelijk zijn */
body.section-index .forabg > .inner > ul.topiclist:not(.forums) li.header,
body.section-index .forabg > .inner > ul.topiclist:first-of-type li.header {
  margin: 0 4px !important;
  border: 1px solid transparent !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.forabg > .inner > ul.topiclist:not(.forums) li.header dl,
.forabg > .inner > ul.topiclist:first-of-type li.header dl {
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

.forabg > .inner > ul.topiclist:not(.forums) li.header dt,
.forabg > .inner > ul.topiclist:first-of-type li.header dt {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  padding-left: 50px !important;
}

.forabg > .inner > ul.topiclist:not(.forums) li.header dt .list-inner,
.forabg > .inner > ul.topiclist:first-of-type li.header dt .list-inner {
  margin-right: 0 !important;
  padding: 0 !important;
  line-height: 32px !important;
}

.forabg > .inner > ul.topiclist:not(.forums) li.header dd,
.forabg > .inner > ul.topiclist:first-of-type li.header dd {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  height: 32px !important;
  line-height: 32px !important;
  border: none !important;
}

/* Zelfde kolombreedtes als li.row + borders identiek aan rijen */
.forabg > .inner > ul.topiclist:not(.forums) li.header dd.topics,
.forabg > .inner > ul.topiclist:first-of-type li.header dd.topics {
  width: 110px !important;
  flex: 0 0 110px !important;
  border-left: 1px solid rgba(0,0,0,0.6) !important;
  border-right: 1px solid rgba(0,0,0,0.6) !important;
}

.forabg > .inner > ul.topiclist:not(.forums) li.header dd.posts,
.forabg > .inner > ul.topiclist:first-of-type li.header dd.posts {
  width: 110px !important;
  flex: 0 0 110px !important;
  border-right: 1px solid rgba(0,0,0,0.6) !important;
}

.forabg > .inner > ul.topiclist:not(.forums) li.header dd.lastpost,
.forabg > .inner > ul.topiclist:first-of-type li.header dd.lastpost {
  width: 260px !important;
  flex: 0 0 260px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 14px !important;
}


/* ==========================================================
   11. BERICHTEN (POSTS)
   ========================================================== */

.postbody .content {
  font-size: 15px;
  line-height: 1.5;
  overflow-x: auto;
  display: block;
}

/* Native regelafstand behouden */
.postbody .content br {
  display: inline;
  height: auto;
}

/* Post-afbeeldingen centreren */
.bbcode-center img,
.bbcode-centre img,
.postbody .content img:not(.smilies),
.postbody .content img.postimage,
.postbody p img:not(.smilies) {
  display: block !important;
  margin: 12px auto !important;
  float: none !important;
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
}

/* PhotoSwipe-omhulde afbeeldingen */
.postbody .content a.pswp-link {
  display: block;
  text-align: center;
}

.postbody .content a.pswp-link img.postimage {
  display: inline-block !important;
  margin: 12px auto !important;
  float: none !important;
}

/* Smilies blijven inline */
.postbody .content img.smilies,
.postbody p img.smilies {
  display: inline-block !important;
  margin: 0 !important;
}

/* Post-head balk */
.post-head {
  border: 1px solid #565656;
  border-radius: 10px;
  background: #2f2f2f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 2px;
}

.post-head h3 {
  margin: 0;
  line-height: 1.2;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
}

.post-head .post-buttons { margin: 0 0 0 auto; }

.post-content-box { background: transparent; padding: 8px 12px; }
.post-content-box .content { padding-bottom: 0; }

/* Viewtopic: post-head als grid (titel + knoppen naast elkaar) */
body.section-viewtopic .postbody .post-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title buttons"
    "meta  buttons";
  column-gap: 10px;
  row-gap: 4px;
  align-items: start;
}

body.section-viewtopic .postbody .post-head > h3         { grid-area: title; min-width: 0; }
body.section-viewtopic .postbody .post-head > ul.post-buttons { grid-area: buttons; align-self: start; margin: 0 0 0 auto !important; }

body.section-viewtopic .postbody .post-head > p.author {
  grid-area: meta;
  display: block !important;
  width: auto !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: end;
  text-align: right !important;
}

body.section-viewtopic .postbody .post-head > p.author .unread {
  float: none !important;
  display: inline-block !important;
  margin-right: 6px !important;
}

/* Compacte post-titel */
.postbody h3 {
  margin: 0 0 6px !important;
  padding: 4px 8px !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
}

.postbody h3 a,
.postbody h3 .postlink,
.postbody h3 .post-url { line-height: 1.2 !important; }

.postbody h3 .icon { margin-right: 6px !important; font-size: 12px !important; }

/* Post-linkbar onderaan elk bericht */
.post-linkbar {
  margin: 12px 0 0;
  padding: 6px 10px;
  border: 1px solid #565656;
  border-radius: 8px;
  background: transparent;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.post-linkbar__link {
  color: #a7a198;
  text-decoration: none;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}

.post-linkbar__link + .post-linkbar__link::before {
  content: "|";
  color: #605b54;
  margin: 0 7px;
}

.post-linkbar__link:hover,
.post-linkbar__link:focus {
  color: #d3cdc2;
  text-decoration: none;
}

/* EXIF-regel onder afbeeldingen */
.exif-line {
  text-align: center;
  color: #c4bdb2;
  font-size: 13px;
  margin: 8px 0 14px;
}


/* ==========================================================
   12. PHOTODROME COMPONENTEN
   ========================================================== */

/* Trophy-markers in topiclijst */
.topic-trophy-inline {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
}

.topic-trophy-inline .icon                           { font-size: 24px; text-shadow: none; }
.topic-trophy-inline.trophy--today .icon             { color: #f5c36b; }
.topic-trophy-inline.trophy--yesterday .icon         { color: #cfd3d8; text-shadow: none; }
.topic-trophy-inline.trophy--weekfoto .icon,
.topic-trophy-inline.trophy--maandopdracht .icon     { color: #d6b89c; text-shadow: none; }
.topic-trophy-inline.trophy--theme-month .icon       { color: #fff; text-shadow: none; }

/* Topic-badge bovenaan viewtopic */
.topic-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 10px 0 16px;
  font-weight: 800;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid #77706b;
  background: #343434;
  color: #b16d26;
  font-size: 20px;
}

.topic-badge .icon {
  font-size: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 999px;
  background: #1c1c1c;
  border: 1px solid #77706b;
  text-shadow: none;
}

.topic-badge--today .icon     { color: #f5c36b; }
.topic-badge--yesterday .icon { color: #cfd3d8; }
.topic-badge--weekfoto .icon  { color: #b16d26; }

/* Contrast-balk (beoordelingswidget) */
.contrast-bar {
  box-sizing: border-box;
  margin: 0 -10px 16px;
  padding: 10px 12px;
  border: 1px solid #505050;
  border-radius: 10px;
  background: #383838;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 0, rgba(0, 0, 0, 0.08) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.contrast-bar__scale {
  display: grid;
  grid-template-columns: repeat(19, minmax(0, 1fr));
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #5c5c5c;
}

.contrast-bar__scale span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  font-size: 8px;
  font-weight: 700;
  background: rgb(var(--tone), var(--tone), var(--tone));
  color: rgb(calc(255 - var(--tone)), calc(255 - var(--tone)), calc(255 - var(--tone)));
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.contrast-bar__scale span:last-child { border-right: 0; }

/* Weekfoto direct-pick widget */
.weekfoto-direct-pick-wrap { display: table; max-width: 100%; margin: 12px auto; }
.weekfoto-direct-pick-wrap > a,
.weekfoto-direct-pick-wrap > img    { display: block; }
.weekfoto-direct-pick-wrap img.postimage { margin: 0 !important; }

.weekfoto-direct-pick { margin-top: 10px; text-align: center; }

.weekfoto-direct-pick__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #d17726;
  border-radius: 8px;
  background: rgba(10, 10, 10, 0.92);
  color: #f0f0f0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.weekfoto-direct-pick__link:hover,
.weekfoto-direct-pick__link:focus {
  background: rgba(20, 20, 20, 0.98);
  color: #fff;
  text-decoration: none;
}

/* Stemmen CTA */
.pt-countdown-cta { margin-top: 8px; }

.pt-vote-btn {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background: #b16d26;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}

.pt-vote-btn:hover { background: #d38a35; color: #fff; }

/* Gallerij: verberg upload/abonneer knoppen */
body.gallery .action-bar a.button { display: none !important; }

/* Forum-index: verberg "Laatste bericht" als inline tekst in dt op desktop */
/* (wordt getoond in dd kolom) — zie responsive sectie voor mobile toggle */


/* ==========================================================
   13. RESPONSIVE
   ========================================================== */

/* --- Desktop (>700px) --- */
@media (min-width: 701px) {

  /* Post-linkbar onderin postbody verankerd via grid */
  body.section-viewtopic .post.has-profile > .inner {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: stretch;
  }

  body.section-viewtopic .post.has-profile .postprofile {
    float: none; width: auto; margin: 0; grid-column: 1;
  }

  body.section-viewtopic .post.has-profile .postprofile + .postbody {
    float: none; width: auto; margin-left: 0; grid-column: 2;
  }

  body.section-viewtopic .post.has-profile .postprofile + .postbody > div {
    margin-left: 0; height: 100%; display: flex; flex-direction: column;
  }

  body.section-viewtopic .post.has-profile .post-linkbar { margin-top: auto; }

  /* Forum dd.lastpost via kolom, responsive-show in dt verbergen */
  body.section-index ul.topiclist.forums li.row dt .responsive-show,
  body.section-index ul.topiclist.forums li.row dt .forum-lastpost,
  body.section-index ul.topiclist.forums li.row dt .forum-lastpost span,
  body.section-viewforum ul.topiclist.forums li.row dt .responsive-show,
  body.section-viewforum ul.topiclist.forums li.row dt .forum-lastpost,
  body.section-viewforum ul.topiclist.forums li.row dt .forum-lastpost span {
    display: none !important;
  }
}

/* --- Tablet en kleiner (≤1366px): topiclijst naar blok --- */
@media (max-width: 1366px) {

  /* Onderwerpenlijst: kop verbergen, naar blok-layout */
  ul.topiclist.topics li.header { display: none !important; }
  ul.topiclist.topics li.row dl { display: block !important; }
  ul.topiclist.topics li.row dt,
  ul.topiclist.topics li.row dd { width: 100% !important; float: none !important; }
  ul.topiclist.topics li.row .responsive-show { display: block !important; margin-top: 6px; }
  ul.topiclist.topics li.row .responsive-hide,
  ul.topiclist.topics li.row dd.posts,
  ul.topiclist.topics li.row dd.views,
  ul.topiclist.topics li.row dd.lastpost { display: none !important; }

  /* Forumlijst: kop verbergen, naar blok-layout */
  ul.topiclist.forums li.header { display: none !important; }
  ul.topiclist.forums li.row dl { display: block !important; }
  ul.topiclist.forums li.row dt,
  ul.topiclist.forums li.row dd { width: 100% !important; float: none !important; }
  ul.topiclist.forums li.row .responsive-show { display: block !important; margin-top: 6px; }
  ul.topiclist.forums li.row dd.topics,
  ul.topiclist.forums li.row dd.posts,
  ul.topiclist.forums li.row dd.lastpost { display: none !important; }
}

/* --- Viewforum en zoeken (≤900px) --- */
@media (max-width: 900px) {

  body.section-viewforum ul.topiclist.topics li.header { display: none !important; }
  body.section-viewforum ul.topiclist.topics li.row dl { display: block !important; width: 100% !important; }
  body.section-viewforum ul.topiclist.topics li.row dt { width: 100% !important; float: none !important; min-width: 0 !important; }
  body.section-viewforum ul.topiclist.topics li.row dd.author,
  body.section-viewforum ul.topiclist.topics li.row dd.posts,
  body.section-viewforum ul.topiclist.topics li.row dd.views,
  body.section-viewforum ul.topiclist.topics li.row dd.lastpost,
  body.section-viewforum ul.topiclist.topics li.row dd.trophies { display: none !important; }
  body.section-viewforum ul.topiclist.topics li.row .list-inner {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    padding-left: 55px !important; padding-right: 0 !important; box-sizing: border-box !important;
  }
  body.section-viewforum ul.topiclist.topics li.row .responsive-show { display: block !important; margin-top: 8px !important; }
  body.section-viewforum .forabg, body.section-viewforum .forumbg { overflow: hidden !important; }

  body.section-search ul.topiclist.topics li.header { display: none !important; }
  body.section-search ul.topiclist.topics li.row dl { display: block !important; width: 100% !important; }
  body.section-search ul.topiclist.topics li.row dt { width: 100% !important; float: none !important; min-width: 0 !important; }
  body.section-search ul.topiclist.topics li.row dd.author,
  body.section-search ul.topiclist.topics li.row dd.posts,
  body.section-search ul.topiclist.topics li.row dd.views,
  body.section-search ul.topiclist.topics li.row dd.lastpost,
  body.section-search ul.topiclist.topics li.row dd.trophies { display: none !important; }
  body.section-search ul.topiclist.topics li.row .list-inner {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    padding-left: 55px !important; padding-right: 0 !important; box-sizing: border-box !important;
  }
  body.section-search ul.topiclist.topics li.row .responsive-show { display: block !important; margin-top: 8px !important; }
  body.section-search .forabg, body.section-search .forumbg { overflow: hidden !important; }

  /* Topic/forum iconen: verankerd aan top (bij titeltekst), niet midden van gestapelde dl */
  body.section-viewforum li.row dl.row-item::before,
  body.section-viewforum li.row dl.row-item::after,
  body.section-search li.row dl.row-item::before,
  body.section-search li.row dl.row-item::after,
  body.section-index li.row dl.row-item::before,
  body.section-index li.row dl.row-item::after {
    top: 20px !important;
    transform: translateY(-50%) !important;
  }

  /* row-item-link (klikbare overlay op cirkel) meeverplaatsen naar top: 20px,
     exact bovenop de verplaatste cirkel (zelfde transform-aanpak als basis). */
  body.section-viewforum li.row dl.row-item a.row-item-link,
  body.section-search li.row dl.row-item a.row-item-link,
  body.section-index li.row dl.row-item a.row-item-link {
    top: 20px !important;
    transform: translateY(-50%) !important;
  }

  /* "Mine"-stipje meeverplaatsen naar de verplaatste cirkel (top: 20px) */
  body.section-viewforum li.row dl.row-item[class*="_mine"] dt::after,
  body.section-search li.row dl.row-item[class*="_mine"] dt::after,
  body.section-index li.row dl.row-item[class*="_mine"] dt::after {
    top: 20px !important;
  }
}

/* --- Forumindex mobiel (≤760px) --- */
@media (max-width: 760px) {

  body.section-index ul.topiclist.forums li.header dd.topics,
  body.section-index ul.topiclist.forums li.header dd.posts,
  body.section-index ul.topiclist.forums li.header dd.lastpost,
  body.section-index ul.topiclist.forums li.row dd.topics,
  body.section-index ul.topiclist.forums li.row dd.posts,
  body.section-index ul.topiclist.forums li.row dd.lastpost { display: none !important; }

  body.section-index ul.topiclist.forums li.row dl,
  body.section-index ul.topiclist.forums li.row dt,
  body.section-index ul.topiclist.forums li.row .list-inner,
  body.section-index ul.topiclist.forums li.header dl,
  body.section-index ul.topiclist.forums li.header dt {
    width: 100% !important; max-width: 100% !important;
    min-width: 0 !important; box-sizing: border-box !important;
  }

  body.section-index ul.topiclist.forums li.row .responsive-show,
  body.section-index ul.topiclist.forums li.row .forum-lastpost { display: block !important; }

  body.section-index .forabg,
  body.section-index .forumbg { overflow: hidden; }
}

/* --- Mobiel (≤700px) --- */
@media (max-width: 700px) {

  /* Portal hero stapelen */
  .portal-hero { padding-left: 12px; padding-right: 12px; }
  .portal-hero__inner { flex-direction: column; justify-content: center; text-align: center; padding: 12px 0; }
  .portal-brand { justify-content: center; width: 100%; }
  .portal-nav { flex-wrap: wrap; justify-content: center; margin-left: 0; width: 100%; }

  /* Zoekbalk volledige breedte */
  .action-bar .search-box { float: none; margin: 8px 0 0; width: 100%; }
  .action-bar .search-box .inputbox { width: calc(100% - 64px); }

  /* Topiclijst: auteur, trophy, weergaves en laatste bericht verbergen */
  ul.topiclist dd.author, ul.topiclist li.header dd.author,
  ul.topiclist dd.trophies, ul.topiclist li.header dd.trophies { display: none !important; }
  ul.topiclist li.header dt .list-inner,
  ul.topiclist.topics .list-inner { padding-left: 10px !important; }
  ul.topiclist.topics li.header dd.lastpost, ul.topiclist.topics li.row dd.lastpost,
  ul.topiclist li.header dd.lastpost, ul.topiclist li.row dd.lastpost { display: none !important; }
  ul.topiclist.topics li.header dd.views, ul.topiclist.topics li.row dd.views,
  ul.topiclist li.header dd.views, ul.topiclist li.row dd.views { display: none !important; }

  /* Forumlijst kolommen */
  ul.topiclist.forums dd.lastpost,
  ul.topiclist.forums li.header dd.lastpost { display: none !important; }
  ul.topiclist.forums dd.topics, ul.topiclist.forums li.header dd.topics,
  ul.topiclist.forums dd.posts, ul.topiclist.forums li.header dd.posts {
    flex: 0 0 60px !important; width: 60px !important;
  }

  /* Categorie headers */
  .forabg > .inner > ul.topiclist:not(.forums) li.header dd.lastpost,
  .forabg > .inner > ul.topiclist:first-of-type li.header dd.lastpost { display: none !important; }

  /* Contrast-balk compacter */
  .contrast-bar { margin-left: -8px; margin-right: -8px; padding: 8px; }
  .contrast-bar__scale { grid-template-columns: repeat(10, minmax(0, 1fr)); }

  /* Viewtopic post-head stapelen */
  body.section-viewtopic .postbody .post-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "buttons" "meta";
  }
  body.section-viewtopic .postbody .post-head > p.author { justify-self: start; text-align: left !important; }

  .post-linkbar { margin: 10px 0 0; padding: 5px 8px; border-radius: 7px; }
  .post-linkbar__link + .post-linkbar__link::before { margin: 0 6px; }
}

/* --- Beschrijving afbreken op kleine schermen (≤680px) --- */
@media (max-width: 680px) {

  ul.topiclist.forums li.row dt .list-inner .forum-lastpost,
  ul.topiclist.forums li.row dt .list-inner .forum-lastpost span {
    display: block !important;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  #site-description h1,
  #site-description .logo,
  #site-description img { max-width: 85%; height: auto; }

  .nav-main, .nav-breadcrumbs, .navbar, .navbar .linklist { flex-wrap: wrap; gap: 6px; }
  .forum-description { margin-top: 4px; font-size: 0.95em; }
}