/*--------------------------------------------------------------
This is your custom stylesheet.
--------------------------------------------------------------*/
/* Display font for the premium "Biggermen" look (homepage + contact). */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;600;700;800&display=swap');


/* ============================================================
   BIGGERMEN CUSTOM - Login/Register Redesign (v4, matches approved preview)
   ------------------------------------------------------------
   LOGIN  -> wp-login.php  (body.login, #bm-auth-left, #login, #loginform)
   REGISTER -> BuddyBoss   (body.registration, .bm-auth-split built in JS)
   Tokens copied 1:1 from the approved preview. My JS/WP/BuddyBoss class
   names are bridged to the preview's visual classes here.
   ============================================================ */

body.login, body.registration .bm-auth-split, body.login #bm-auth-left,
body.login #login, body.login #loginform {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- FULL-SCREEN SPLIT SHELL (register) ---------- */
/* Break out of BuddyBoss's narrow content wrapper + make it scrollable. */
.bm-auth-split {
	position: fixed; inset: 0; z-index: 99999;
	display: flex; overflow-y: auto; background: #080808;
}
/* hide theme chrome behind the overlay */
body.registration #masthead, body.registration .site-header,
body.registration #site-navigation, body.registration .site-footer,
body.registration #colophon, body.registration .bb-readylaunch-header { display: none !important; }

/* ---------- LEFT BRANDING PANEL (.bm-l) ---------- */
.bm-auth-left,
body.login #bm-auth-left {
	flex: 0 0 40%; width: 40%;
	background: #0d0d0d; border-right: 1px solid #1a1a1a;
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: 40px 34px; box-sizing: border-box;
}
/* desktop: left panel stays put while the right side scrolls */
.bm-auth-left { position: sticky; top: 0; align-self: flex-start; height: 100vh; }
/* login left is fixed to the viewport */
body.login #bm-auth-left { position: fixed; left: 0; top: 0; height: 100vh; }

.bm-rings { position: absolute; inset: 0; pointer-events: none; }
.bm-rings span { position: absolute; border-radius: 50%; border: 1px solid #C9A84C; }
.bm-rings span:nth-child(1) { width: 260px; height: 260px; top: -80px; right: -80px; opacity: .12; }
.bm-rings span:nth-child(2) { width: 160px; height: 160px; top: -20px; right: -20px; opacity: .2; }
.bm-rings span:nth-child(3) { width: 80px;  height: 80px;  top: 30px;  right: 30px;  opacity: .35; background: rgba(201,168,76,.08); }

.bm-live { position: absolute; top: 26px; left: 34px; display: flex; align-items: center; gap: 8px; }
.bm-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #C9A84C; animation: bmPulse 2s infinite; }
@keyframes bmPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
.bm-live span, .bm-live { font-size: 11px; color: #555; letter-spacing: 1px; font-weight: 600; }

.bm-stats { position: absolute; top: 54px; left: 34px; display: flex; gap: 12px; }
.bm-chip { background: #141414; border: 1px solid #222; border-radius: 20px; padding: 5px 12px; display: flex; align-items: center; gap: 6px; }
.bm-chip span { font-size: 11px; color: #666; }
.bm-chip b { font-size: 11px; color: #C9A84C; font-weight: 700; }

.bm-logo { position: relative; z-index: 2; margin-bottom: 22px; }
.bm-logo svg { display: block; }
.bm-logo-name { font-size: 10px; font-weight: 800; letter-spacing: 4px; color: #C9A84C; margin-top: 8px; }

.bm-tagline { position: relative; z-index: 2; }
.bm-tagline h2 { font-size: 30px; font-weight: 900; color: #fff; line-height: 1.15; letter-spacing: -.5px; }
.bm-tagline h2 em, .bm-tagline h2 .gold { color: #C9A84C; font-style: normal; }
.bm-tagline p { font-size: 12px; color: #444; margin-top: 10px; line-height: 1.6; }

.progress-bar { margin-top: 24px; position: relative; z-index: 2; }
.pb-label { font-size: 10px; color: #555; letter-spacing: 1.5px; font-weight: 600; margin-bottom: 8px; text-transform: uppercase; }
.pb-steps { display: flex; gap: 4px; }
.pb-step { height: 3px; flex: 1; border-radius: 2px; background: #1a1a1a; transition: background .4s; }
.pb-step.done { background: #5a4218; }
.pb-step.active { background: #C9A84C; }

/* ---------- RIGHT PANEL (.bm-r) ---------- */
.bm-auth-right {
	flex: 1 1 60%; background: #0a0a0a;
	height: 100vh; box-sizing: border-box;
	padding: 40px 36px;
	/* alleen DEZE kolom scrollt; de linker brand-paneel blijft staan. Centreren
	   via margin:auto op het formulier (niet justify-content:center) zodat lange
	   stappen volledig scrollbaar blijven en de Volgende-knop bereikbaar is. */
	overflow-y: auto;
	display: flex; flex-direction: column; justify-content: flex-start;
}
/* flex: 0 0 auto -> formulier NIET laten krimpen tot de kolomhoogte (default
   flex-shrink:1 kromp 't tot 570px + overflow:hidden -> Volgende afgeknipt).
   Met margin:auto centreert 't als 't past, en scrollt het als 't langer is. */
.bm-auth-right > #signup-form { width: 100%; max-width: 440px; margin: auto; flex: 0 0 auto; overflow: visible; background: transparent; border: none; box-shadow: none; padding: 0; }
.bm-auth-right .layout-wrap { display: block; }

/* ---------- TABS (.tab-bar / .tab-btn) ---------- */
.bm-tabs { display: flex; gap: 3px; margin-bottom: 26px; }
body.login .bm-tabs, body.registration .bm-tabs { gap: 12px; } /* auth: ruimere tussenruimte tussen tabs */
.bm-tab {
	flex: 1; text-align: center; padding: 10px; border: 1px solid #1e1e1e; border-radius: 8px;
	background: transparent; color: #333; text-decoration: none;
	font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.bm-tab.is-active { border-color: #C9A84C; color: #C9A84C; background: #0f0b02; }

/* ---------- STEP HEADER (.se / .st / .sdots / .sd) ---------- */
.bm-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #C9A84C; text-transform: uppercase; margin-bottom: 4px; }
.bm-title { font-size: 21px; font-weight: 900; color: #fff; letter-spacing: -.3px; margin: 0 0 0; }
.bm-stepdots { display: flex; gap: 5px; margin: 10px 0 20px; }
.bm-stepdots span { height: 3px; border-radius: 2px; background: #1e1e1e; width: 12px; transition: all .4s; }
.bm-stepdots span.done { background: #3d2e0d; width: 16px; }
.bm-stepdots span.active { background: #C9A84C; width: 24px; }

/* ---------- STEP PANELS (.fp) + slide ---------- */
.bm-step-viewport { position: relative; }
.bm-step { display: none; }
.bm-step.is-active { display: block; animation: bmFade .3s ease; }
@keyframes bmFade { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

/* ---------- FIELDS (.fg / .fl / .fi) ---------- */
/* BuddyBoss editfield -> .fg ; legend/label -> .fl ; input -> .fi */
body.registration #register-page .editfield { margin-bottom: 13px; position: relative; }
body.registration #register-page .editfield fieldset { border: none; margin: 0; padding: 0; }
body.registration #register-page label,
body.registration #register-page legend,
body.login #loginform label,
.bm-field-label {
	display: block; font-size: 10px; font-weight: 700; letter-spacing: .8px;
	text-transform: uppercase; color: #777; margin-bottom: 5px;
}
/* De wizard verplaatst de velden naar .bm-auth-split (BUITEN #register-page),
   waar BuddyBoss' eigen #buddypress-legend-regel (16px/400) wint op
   specificiteit. Daarom hier !important om de veld-labels klein te houden.
   .option-label (keuze-opties) uitgesloten -> die houden hun eigen stijl. */
body.registration .bm-auth-split legend,
body.registration .bm-auth-split label:not(.option-label) {
	display: block !important; font-size: 10px !important; font-weight: 700 !important;
	letter-spacing: .8px !important; text-transform: uppercase !important;
	color: #777 !important; margin-bottom: 5px !important;
}
body.registration #register-page input[type="text"],
body.registration #register-page input[type="email"],
body.registration #register-page input[type="password"],
body.registration #register-page input[type="number"],
body.registration #register-page input[type="tel"],
body.registration #register-page input[type="url"],
body.registration #register-page select,
body.registration #register-page textarea,
body.login #loginform input[type="text"],
body.login #loginform input[type="password"],
body.login #loginform input[type="email"] {
	width: 100%; box-sizing: border-box;
	background: #0f0f0f; border: 1px solid #1e1e1e; border-radius: 9px;
	padding: 11px 14px; color: #ccc; font-size: 14px; outline: none;
	transition: border-color .2s, background .2s;
}
body.registration #register-page textarea { resize: none; }
body.registration #register-page input::placeholder,
body.registration #register-page textarea::placeholder,
body.login #loginform input::placeholder { color: #2a2a2a; }
body.registration #register-page input:focus,
body.registration #register-page select:focus,
body.registration #register-page textarea:focus,
body.login #loginform input:focus { border-color: #C9A84C; background: #0c0900; color: #fff; }

/* Harden inputs against parent/ReadyLaunch white-input styles (force dark) */
.bm-auth-right input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
.bm-auth-right select, .bm-auth-right textarea {
	background: #0f0f0f !important; border: 1px solid #1e1e1e !important;
	color: #ccc !important; border-radius: 9px !important;
}
.bm-auth-right input:not([type="radio"]):not([type="checkbox"]):focus {
	border-color: #C9A84C !important; background: #0c0900 !important; color: #fff !important;
}

/* ---------- PASSWORD eye toggle + strength ---------- */
.bm-pwd-wrap { position: relative; }
.bm-pwd-wrap .fi, .bm-pwd-wrap input { padding-right: 40px !important; }
.bm-pwd-toggle, body.login .wp-pwd .button.wp-hide-pw {
	position: absolute; right: 0; top: 0; bottom: 0; width: 40px;
	background: none !important; border: none !important; box-shadow: none !important;
	color: #bbb; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; outline: none;
}
.bm-pwd-toggle:hover, body.login .wp-pwd .button.wp-hide-pw:hover { color: #C9A84C; }
.bm-pwd-toggle:focus, .bm-pwd-toggle:focus-visible { outline: none; box-shadow: none; }
.bm-pwd-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
/* login: replace native WP show/hide button with our standardized eye */
body.login .wp-pwd .wp-hide-pw { display: none !important; }
body.login .wp-pwd #user_pass { padding-right: 40px !important; }
body.login .wp-pwd { position: relative; display: block; }
.bm-strength { height: 2px; border-radius: 1px; margin-top: 6px; width: 0; background: transparent; transition: width .4s, background .4s; }
.bm-strength.weak   { width: 25%;  background: #c0392b; }
.bm-strength.medium { width: 50%;  background: #e67e22; }
.bm-strength.good   { width: 75%;  background: #C9A84C; }
.bm-strength.strong { width: 100%; background: #27ae60; }

/* ---------- FIELD GRIDS (.fi-row) ---------- */
.bm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bm-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.bm-grid-2 .editfield, .bm-grid-3 .editfield { margin-bottom: 13px; }

/* ---------- RADIO OPTIONS (.rg / .ro / .rdot / .rl) ---------- */
body.registration #register-page .input-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 7px 0 13px; }
body.registration #register-page .bp-radio-wrap {
	display: flex; align-items: center; gap: 8px;
	background: #0f0f0f; border: 1px solid #1e1e1e; border-radius: 8px; padding: 9px 11px; cursor: pointer;
	transition: border-color .2s, background .2s;
}
body.registration #register-page .bp-radio-wrap:hover { border-color: #2e2208; }
body.registration #register-page .bp-radio-wrap:hover .option-label { color: #666; }
body.registration #register-page .input-options input[type="radio"] {
	-webkit-appearance: none; appearance: none;
	width: 13px; height: 13px; min-width: 13px; margin: 0;
	border: 1.5px solid #2a2a2a; border-radius: 50%; background: transparent; position: relative;
}
body.registration #register-page .input-options input[type="radio"]:checked { border-color: #C9A84C; background: #C9A84C; }
body.registration #register-page .input-options input[type="radio"]:checked::after {
	content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #000;
}
body.registration #register-page .option-label { font-size: 12px; color: #444; font-weight: 500; }
body.registration #register-page .bp-radio-wrap:has(input:checked) { border-color: #C9A84C; background: #0c0900; }
body.registration #register-page .bp-radio-wrap:has(input:checked) .option-label { color: #C9A84C; }

/* ---------- CHECKBOXES (.cr / .cc) ---------- */
body.registration #register-page input[type="checkbox"] {
	-webkit-appearance: none; appearance: none;
	width: 15px; height: 15px; min-width: 15px; margin: 1px 9px 0 0;
	border: 1px solid #222; border-radius: 4px; background: #0f0f0f; position: relative; cursor: pointer;
}
body.registration #register-page input[type="checkbox"]:checked { background: #C9A84C; border-color: #C9A84C; }
body.registration #register-page input[type="checkbox"]:checked::after {
	content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
	border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
body.registration #register-page .biggermen-age-verify { margin-top: 11px; }
body.registration #register-page .biggermen-age-verify__label { display: flex; align-items: flex-start; gap: 9px; font-size: 11px; color: #333; line-height: 1.5; text-transform: none; letter-spacing: 0; font-weight: 400; }
/* De wizard verplaatst het 18+-veld BUITEN #register-page, waardoor de custom
   checkbox-styling niet meer matchte -> het vinkje kreeg geen afmetingen (0x0),
   was onzichtbaar en niet aan te klikken (alleen de tekst werkte). Hier op
   .biggermen-age-verify scopen zodat 't overal een zichtbaar, klikbaar vakje is. */
.biggermen-age-verify__label { display: flex; align-items: flex-start; gap: 9px; font-size: 11px; color: #999; line-height: 1.5; text-transform: none; letter-spacing: 0; font-weight: 400; cursor: pointer; }
.biggermen-age-verify input[type="checkbox"] {
	-webkit-appearance: none !important; appearance: none !important;
	width: 16px !important; height: 16px !important; min-width: 16px !important; flex: 0 0 16px !important;
	margin: 1px 0 0 0 !important; padding: 0 !important;
	border: 1px solid #2a2a2a !important; border-radius: 4px !important; background: #0f0f0f !important;
	position: relative !important; cursor: pointer !important; display: inline-block !important; box-shadow: none !important;
}
.biggermen-age-verify input[type="checkbox"]:checked { background: #C9A84C !important; border-color: #C9A84C !important; }
.biggermen-age-verify input[type="checkbox"]:checked::after {
	content: "" !important; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px; margin: 0;
	border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg); background: transparent;
}
/* BuddyBoss' eigen "Ik ga akkoord"-checkbox (#legal_agreement.bs-styled-checkbox)
   is opacity:0 verstopt en verwacht een + label:before-pseudo die in deze context
   niet rendert -> onzichtbaar vinkje. Zelf zichtbaar + klikbaar maken. */
.bm-auth-split #legal_agreement,
body.registration #legal_agreement {
	-webkit-appearance: none !important; appearance: none !important; opacity: 1 !important;
	width: 16px !important; height: 16px !important; min-width: 16px !important; flex: 0 0 16px !important;
	margin: 1px 8px 0 0 !important; padding: 0 !important;
	border: 1px solid #2a2a2a !important; border-radius: 4px !important; background: #0f0f0f !important;
	position: relative !important; cursor: pointer !important; display: inline-block !important;
	vertical-align: middle !important; box-shadow: none !important;
}
.bm-auth-split #legal_agreement:checked,
body.registration #legal_agreement:checked { background: #C9A84C !important; border-color: #C9A84C !important; }
.bm-auth-split #legal_agreement:checked::after,
body.registration #legal_agreement:checked::after {
	content: "" !important; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px; margin: 0;
	border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg); background: transparent;
}

/* Checkbox + label op één rij (de #register-page grid/flex-regels vallen weg
   nadat de wizard de velden verplaatst -> label brak naar de volgende regel,
   vinkje leek "los" te staan). */
.bm-auth-split .bp-checkbox-wrap {
	display: flex !important; align-items: flex-start !important; gap: 8px !important;
}
.bm-auth-split .bp-checkbox-wrap .option-label { margin: 0 !important; line-height: 1.4 !important; }
/* BuddyBoss' .bs-styled-checkbox + label:before/:after pseudo-vinkje uitzetten:
   we tonen het echte (gestylede) input zelf al -> anders twee vinkjes op een rij. */
.bm-auth-split .bp-checkbox-wrap .option-label::before,
.bm-auth-split .bp-checkbox-wrap .option-label::after { display: none !important; content: none !important; }
/* De echte checkbox is .bs-styled-checkbox (opacity:0 vanuit BuddyBoss); omdat we
   het ::before-pseudo hierboven verbergen, moeten we het ECHTE vakje tonen —
   anders is er geen zichtbaar vinkje (bv. Trainingservaring-opties). */
.bm-auth-split .bp-checkbox-wrap input[type="checkbox"],
.bm-auth-split .input-options input[type="checkbox"] {
	opacity: 1 !important;
	-webkit-appearance: none !important; appearance: none !important;
	width: 16px !important; height: 16px !important; min-width: 16px !important; flex: 0 0 16px !important;
	border: 1px solid #2a2a2a !important; border-radius: 4px !important; background: #0f0f0f !important;
	margin: 0 !important; position: relative !important; cursor: pointer !important; box-shadow: none !important;
}
.bm-auth-split .bp-checkbox-wrap input[type="checkbox"]:checked,
.bm-auth-split .input-options input[type="checkbox"]:checked { background: #C9A84C !important; border-color: #C9A84C !important; }
.bm-auth-split .bp-checkbox-wrap input[type="checkbox"]:checked::after,
.bm-auth-split .input-options input[type="checkbox"]:checked::after {
	content: "" !important; position: absolute; left: 5px; top: 1px; width: 4px; height: 8px; margin: 0;
	border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg); background: transparent;
}

/* Account-aanmaken-knop vol-breed + gecentreerde tekst (was content-breed 202px,
   waardoor 'ie klein/links-uitgelijnd oogde t.o.v. de andere stap-knoppen).
   text-indent compenseert de trailing letter-spacing (2px) na de laatste glyph,
   zodat de zichtbare tekst écht in het midden staat i.p.v. ~1px naar links. */
body.registration .bm-auth-split #signup_submit,
body.registration .bm-auth-right #signup_submit {
	width: 100% !important; display: block !important; text-align: center !important;
	text-indent: 2px !important; padding: 13px !important;
	/* generieke input-regel zet height:41px + line-height:38px -> tekst zat in
	   een te lage content-box (verticaal uit het midden). height:auto + line-height:1
	   laat de padding de hoogte bepalen zodat de tekst echt centraal staat. */
	height: auto !important; min-height: 0 !important; line-height: 1 !important;
}

/* ---------- BUTTONS (.bn / .bb) ---------- */
.bm-step-nav { display: flex; gap: 10px; margin-top: 16px; align-items: center; }
.bm-step-next, body.login #wp-submit, body.registration #register-page #signup_submit {
	flex: 1; background: #C9A84C; color: #000; border: none; border-radius: 8px; padding: 13px;
	font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
	white-space: nowrap; transition: background .3s, transform .15s;
}
.bm-step-next:hover, body.login #wp-submit:hover, body.registration #register-page #signup_submit:hover { background: #b8943e; transform: translateY(-1px); }
.bm-step-next:active, body.login #wp-submit:active, body.registration #register-page #signup_submit:active { transform: translateY(0) scale(.98); }
body.login #wp-submit {
	width: 100%; border-radius: 8px !important; padding: 13px !important;
	font-size: 11px !important; font-weight: 800 !important; letter-spacing: 2px !important;
	text-transform: uppercase !important; background: #C9A84C !important; color: #000 !important;
	border: none !important; line-height: 1 !important; height: auto !important; min-height: 0 !important;
	box-shadow: none !important; text-shadow: none !important; float: none !important;
}
body.login #wp-submit:hover { background: #b8943e !important; transform: translateY(-1px); }

/* Back button: text only (theme styles all <button> gold -> force) */
body.registration #register-page .bm-step-back {
	background: none !important; border: none !important; box-shadow: none !important;
	color: #555 !important; width: auto !important; min-width: 0 !important; flex: 0 0 auto !important;
	padding: 0 4px !important; height: auto !important; letter-spacing: .5px !important;
	font-size: 11px !important; font-weight: 600 !important; cursor: pointer;
}
body.registration #register-page .bm-step-back:hover { color: #C9A84C !important; }
body.registration #register-page .bm-step-back[hidden] { display: none; }

/* ---------- LOGIN: social circles + divider + links ---------- */
.bm-social { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.bm-social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #111; border: 1px solid #1e1e1e; border-radius: 50px; padding: 11px 16px; color: #aaa; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s; }
.bm-social-btn:hover { border-color: #333; color: #fff; }
.bm-social-btn svg { width: 18px; height: 18px; }
.bm-social-btn .bm-apple { fill: #fff; }
.bm-divider { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; color: #2a2a2a; font-size: 10px; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; }
.bm-divider::before, .bm-divider::after { content: ""; flex: 1; height: 1px; background: #161616; }
.bm-forgot { display: block; text-align: right; font-size: 11px; font-weight: 400; color: #555; text-decoration: none; margin-top: 5px; }
.bm-forgot:hover { color: #C9A84C; }
.bm-foot-link { text-align: center; margin-top: 13px; font-size: 11px; font-weight: 400; color: #555; }
.bm-foot-link a { color: #C9A84C; text-decoration: none; }
.bm-field-error { color: #ff4444; font-size: 12px; margin-top: 5px; }

/* ---------- LOGIN layout (body.login) ---------- */
body.login { background: #0a0a0a; }
/* Smooth page-load fade so navigating Sign In <-> Create Account feels seamless */
@keyframes bmAuthIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.bm-auth-right, body.login #login { animation: bmAuthIn .28s ease both; }
body.login #login { width: 60%; margin: 0 0 0 40%; max-width: none; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 36px; box-sizing: border-box; background: #0a0a0a; }
body.login #login h1 { display: none; }
body.login .bm-title { margin-bottom: 28px; } /* heading breathes before social buttons */
body.login #loginform { background: transparent; border: none; box-shadow: none; padding: 0; max-width: 440px; width: 100%; }
body.login #login > * { width: 100%; max-width: 440px; box-sizing: border-box; }
body.login #nav, body.login #backtoblog { display: none !important; }
/* kill any duplicate lost-password link; keep only our .bm-forgot */
body.login a[href*="lostpassword"]:not(.bm-forgot), body.login a[href*="lost-password"]:not(.bm-forgot) { display: none !important; }
/* Remember-me: checkbox + label op één rij (label stond eronder i.p.v. ernaast) */
body.login .forgetmenot {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px !important;
	flex-wrap: nowrap !important;
	margin: 14px 0 !important;
}
body.login .forgetmenot label {
	text-transform: none; letter-spacing: 0; font-weight: 400; color: #555; font-size: 11px;
	margin: 0 !important; display: inline-block !important; width: auto !important; line-height: 1.2 !important;
}
/* Remember-me: same custom checkbox as register step 4 */
body.login .forgetmenot input[type="checkbox"] {
	-webkit-appearance: none !important; appearance: none !important;
	width: 15px !important; height: 15px !important; min-width: 15px; flex: 0 0 15px !important; margin: 0 !important; padding: 0 !important;
	border: 1px solid #222 !important; border-radius: 4px !important; background: #0f0f0f !important;
	position: relative; cursor: pointer; vertical-align: middle; box-shadow: none !important;
}
body.login .forgetmenot input[type="checkbox"]:checked { background: #C9A84C !important; border-color: #C9A84C !important; }
body.login .forgetmenot input[type="checkbox"]:checked::before {
	content: "" !important; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; margin: 0;
	border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg); background: transparent;
}

/* ---------- Hide BuddyBoss native pw-strength + autofill paint ---------- */
body.registration #register-page #pass-strength-result,
body.registration #register-page .bp-password-strength,
body.registration #register-page .bb-field-password-strength { display: none !important; }
body.registration #register-page input:-webkit-autofill,
body.login #loginform input:-webkit-autofill,
body.registration #register-page input:-webkit-autofill:focus,
body.login #loginform input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff !important;
	-webkit-box-shadow: 0 0 0 1000px #0f0f0f inset !important;
	caret-color: #fff; border: 1px solid #1e1e1e !important;
}

/* ---------- LANGUAGE SWITCHER (onderaan login) ----------
   WP plaatst de taalwisselaar (form#language-switcher: vertaal-icoon + select +
   "Wijzigen"-knop) los onderaan. Hier compact, gecentreerd en subtiel zodat hij
   bij de rest past i.p.v. losgeslagen onderaan te zweven. */
body.login .language-switcher {
	width: 100%; max-width: 440px; box-sizing: border-box;
	margin: 22px auto 0 !important;
	display: flex !important; justify-content: center !important;
}
body.login #language-switcher {
	display: inline-flex !important; align-items: center !important; gap: 8px !important;
	margin: 0 !important; flex-wrap: nowrap !important;
}
body.login #language-switcher label { margin: 0 !important; display: inline-flex !important; align-items: center !important; }
body.login #language-switcher .dashicons-translation { color: #cfcfcf !important; font-size: 16px !important; width: 16px; height: 16px; }
body.login #language-switcher-locales {
	background: #0f0f0f !important; border: 1px solid #1e1e1e !important; color: #888 !important;
	border-radius: 8px !important; padding: 7px 28px 7px 10px !important; font-size: 12px !important;
	height: auto !important; min-height: 0 !important; line-height: 1.2 !important; box-shadow: none !important; width: auto !important;
}
/* "Wijzigen"-knop: klein en onopvallend (de select volstaat) */
body.login #language-switcher .button,
body.login #language-switcher input[type="submit"] {
	background: transparent !important; border: 1px solid #1e1e1e !important; color: #888 !important;
	border-radius: 8px !important; padding: 7px 12px !important; font-size: 11px !important;
	font-weight: 600 !important; letter-spacing: .5px !important; text-transform: none !important;
	height: auto !important; min-height: 0 !important; width: auto !important; flex: 0 0 auto !important; box-shadow: none !important;
}
body.login #language-switcher .button:hover,
body.login #language-switcher input[type="submit"]:hover {
	border-color: #C9A84C !important; color: #C9A84C !important; background: transparent !important; transform: none !important;
}

/* ---------- Gele knoppen -> ZWARTE tekst op login + register ----------
   Sluit ghost/outline/tekst/link-knoppen uit (die hebben gouden tekst op
   transparant; die moeten goud blijven). Vangt de BuddyBoss-native gele
   knoppen die nog witte tekst hadden. */
body.login .button:not(.outline):not(.link):not(.text),
body.login input[type="submit"]:not(.outline),
body.login button[type="submit"],
body.login #wp-submit,
body.registration #register-page .button:not(.outline):not(.link):not(.text),
body.registration #register-page input[type="submit"]:not(.outline),
body.registration #register-page button[type="submit"],
body.registration #register-page #signup_submit,
body.registration #register-page .bm-step-next {
	color: #000000 !important;
}

/* ---------- MOBILE ---------- */
@media (max-width: 860px) {
	.bm-auth-split { flex-direction: column; }
	.bm-auth-left { position: static; height: auto; width: 100%; flex-basis: auto; min-height: 240px; justify-content: flex-end; }
	.bm-rings, .bm-stats { display: none; }
	.bm-tagline h2 { font-size: 24px; }
	/* mobiel: kolommen stapelen -> de hele .bm-auth-split scrollt; de rechter
	   kolom niet meer apart (anders nested scroll / afgeknipte knop). */
	.bm-auth-right { min-height: auto; height: auto; overflow: visible; padding: 28px 22px; }
	.bm-auth-right > #signup-form { margin: 0 auto; }
	.bm-grid-2, .bm-grid-3 { grid-template-columns: 1fr; }
	body.registration #register-page .input-options { grid-template-columns: 1fr; }

	body.login #bm-auth-left { position: static; width: 100%; height: auto; min-height: 220px; }
	/* brand-panel decoraties (rings/live/stats) zijn absoluut gepositioneerd en
	   lekken op mobiel naar boven over de tabs -> verbergen, net als registratie */
	body.login #bm-auth-left .bm-rings,
	body.login #bm-auth-left .bm-stats,
	body.login #bm-auth-left .bm-live { display: none !important; }
	body.login #login { width: 100%; margin-left: 0; padding: 24px 18px; min-height: auto; }
	/* form + alle directe kinderen vullen de breedte, geen overflow */
	body.login #login > *,
	body.login #loginform { max-width: 100% !important; }
	body.login .bm-title { margin-bottom: 18px; }
	/* taalwisselaar netjes binnen het scherm op mobiel */
	body.login .language-switcher { max-width: 100%; }
	body.login #language-switcher { flex-wrap: wrap !important; justify-content: center !important; }
}


/* ============================================================
   BIGGERMEN REDESIGN - Global Foundation
   ============================================================ */

/* ---------- STEP 1: tokens + global reset ---------- */
:root {
	--bm-bg: #0a0a0a;
	--bm-surface: #111111;
	--bm-surface-2: #1a1a1a;
	--bm-border: #1e1e1e;
	--bm-gold: #C9A84C;
	--bm-gold-hover: #b8943e;
	--bm-gold-dim: #1a1500;
	--bm-text: #ffffff;
	--bm-text-2: #888888;
	--bm-text-3: #444444;
}
body {
	background: var(--bm-bg);
	color: var(--bm-text);
	font-family: 'Inter', sans-serif;
}
#page, .site, #content, .site-content, main {
	background: var(--bm-bg);
}

/* ---------- STEP 2: header ---------- */
.site-header, .site-header--bb, .site-header-container, #masthead, .bb-readylaunch-header {
	background: var(--bm-surface);
	border-bottom: 1px solid var(--bm-border);
	box-shadow: none;
}
.bb-primary-menu .menu-item > a, .bb-menu-item > a, #primary-navbar a {
	color: var(--bm-text-2);
	font-size: 13px;
	font-weight: 600;
	transition: color 0.2s;
}
.bb-primary-menu .menu-item > a:hover, .current-menu-item > a, .current-menu-ancestor > a {
	color: var(--bm-gold);
}
.sub-menu, .bb-sub-menu {
	background: var(--bm-surface);
	border: 1px solid var(--bm-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.sub-menu .menu-item a {
	color: var(--bm-text-2);
	padding: 10px 16px;
	display: block;
}
.sub-menu .menu-item a:hover {
	color: var(--bm-gold);
	background: var(--bm-surface-2);
}

/* ---------- STEP 3: BuddyPanel sidebar ---------- */
.buddypanel, .bb-buddypanel, .bb-buddypanel-right {
	background: #0d0d0d;
	border-right: 1px solid var(--bm-border);
}
.buddypanel-menu a, .buddypanel-menu-block a, .bb-sidebar-forums a {
	color: var(--bm-text-2);
	font-size: 13px;
	font-weight: 500;
	border-radius: 8px;
	padding: 9px 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s;
}
.buddypanel-menu a:hover, .buddypanel-menu-block a:hover {
	color: var(--bm-text);
	background: var(--bm-surface-2);
}
.buddypanel-menu a.selected, .buddypanel-menu a.current-tab, .buddypanel-menu li.current a {
	color: var(--bm-gold);
	background: var(--bm-gold-dim);
}
.buddypanel-header, .buddypanel-logo {
	background: #0d0d0d;
	border-bottom: 1px solid var(--bm-border);
}

/* ---------- STEP 4: buttons ---------- */
.button, .bb-button, .generic-button a, .bp-title-button a, .create-button a, .more-button a,
input[type="submit"], button[type="submit"], .bbp-submit-wrapper input {
	background: var(--bm-gold);
	color: #000000;
	border: none;
	border-radius: 8px;
	padding: 10px 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	transition: background 0.2s, transform 0.15s;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.button:hover, .bb-button:hover, .generic-button a:hover, input[type="submit"]:hover, button[type="submit"]:hover {
	background: var(--bm-gold-hover);
	transform: translateY(-1px);
}
.button:active, input[type="submit"]:active {
	transform: scale(0.98);
}

/* ============================================================
   GEDEELDE KNOP-CLASSES — .bm-btn (primair) + .bm-btn--ghost
   ------------------------------------------------------------
   Eén primaire goud-knop en één ghost-knop, overal consistent
   (challenge join/leave, foto-upload/verwijderen, check-in-CTA,
   community-/telegram-knoppen ...). De inline-styles zijn eerder
   uit die knoppen gehaald; deze classes vervangen ze centraal. */
.bm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--bm-gold, #C9A84C); color: #141004 !important;
	border: 1px solid var(--bm-gold, #C9A84C); border-radius: 10px;
	padding: 11px 20px; font-size: 13px; font-weight: 800; letter-spacing: .3px;
	line-height: 1; text-decoration: none; text-align: center; white-space: nowrap;
	cursor: pointer; box-shadow: none; transition: background .2s, border-color .2s, color .2s, transform .15s;
}
.bm-btn:hover { background: var(--bm-gold-hover, #b8943e); border-color: var(--bm-gold-hover, #b8943e); color: #141004 !important; transform: translateY(-1px); }
.bm-btn:active { transform: translateY(0) scale(.98); }
.bm-btn:disabled, .bm-btn.is-disabled { opacity: .55; cursor: default; transform: none; }
/* Ghost/secundair: transparant met goud kader + goud tekst; vult op hover.
   !important op background: de brede regel `button[type="submit"] { background: gold }`
   (specificiteit 0,1,1) wint anders van .bm-btn--ghost (0,1,0), waardoor een
   ghost-submit-knop goud-op-goud werd = onzichtbare tekst (challenge "Je doet mee"). */
.bm-btn--ghost { background: transparent !important; color: var(--bm-gold, #C9A84C) !important; border-color: var(--bm-gold, #C9A84C); }
.bm-btn--ghost:hover { background: var(--bm-gold, #C9A84C) !important; color: #141004 !important; border-color: var(--bm-gold, #C9A84C); }
/* Challenge join/leave-knoppen waren vol-breed (inline width:100% is verwijderd)
   -> hier hersteld zodat ze de kaartbreedte vullen. */
.bm-btn[name="bm_challenge_join"], .bm-btn[name="bm_challenge_leave"] { width: 100%; }

/* ---------- Header auth-knoppen (uitgelogd): consistent paar ----------
   Uitgelogd toont de header "Sign in" (.button.outline.link -> thema rendert
   dit als een kale, transparante tekstlink) naast "Sign up" (.button.signup ->
   gevuld). Die leken totaal niet op elkaar. Hier één net ghost+filled-paar:
   gelijke maat/vorm, Sign up = gevuld goud met zwarte tekst, Sign in = goud
   ghost (transparant + goud kader/tekst). */
.bb-header-buttons {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
}
.bb-header-buttons .button,
.bb-header-buttons a.button.outline,
.bb-header-buttons .button.link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 36px !important;
	padding: 0 18px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.6px !important;
	text-transform: uppercase !important;
	border-radius: 8px !important;
	line-height: 1 !important;
	box-shadow: none !important;
	transition: background .2s, color .2s, border-color .2s !important;
}
/* Sign up — gevuld goud, zwarte tekst */
.bb-header-buttons .button.signup {
	background: var(--bm-gold) !important;
	border: 1px solid var(--bm-gold) !important;
	color: #000000 !important;
}
.bb-header-buttons .button.signup:hover {
	background: var(--bm-gold-hover) !important;
	border-color: var(--bm-gold-hover) !important;
	color: #000000 !important;
}
/* Sign in — goud ghost (transparant + goud kader/tekst) */
.bb-header-buttons .signin-button,
.bb-header-buttons a.button.outline.link,
.bb-header-buttons .button.link {
	background: transparent !important;
	border: 1px solid var(--bm-gold) !important;
	color: var(--bm-gold) !important;
	font-weight: 700 !important;
}
.bb-header-buttons .signin-button:hover,
.bb-header-buttons a.button.outline.link:hover,
.bb-header-buttons .button.link:hover {
	background: var(--bm-gold) !important;
	border-color: var(--bm-gold) !important;
	color: #000000 !important;
}

/* ---------- STEP 5: forms + inputs ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], textarea, select, .search-field, .bb-search-field {
	background: var(--bm-surface);
	border: 1px solid var(--bm-border);
	border-radius: 8px;
	color: var(--bm-text);
	padding: 10px 14px;
	font-size: 14px;
	font-family: inherit;
	outline: none;
	transition: border-color 0.2s, background 0.2s;
	width: 100%;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, textarea:focus, select:focus {
	border-color: var(--bm-gold);
	background: #0c0900;
}
input::placeholder, textarea::placeholder {
	color: var(--bm-text-3);
}
label, .bb-field-wrap label, .bp-field-wrap label, .editfield label {
	color: var(--bm-text-2);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	display: block;
	margin-bottom: 5px;
}

/* ---------- STEP 6: cards ---------- */
.bb-member-profile-card, .bb-group-profile-card, .bb-profile-card, .bb-group-card,
.bb-bbpress-profile-card, .activity-item, .bb-card-profile-type {
	background: var(--bm-surface);
	border: 1px solid var(--bm-border);
	border-radius: 12px;
}
.item-list .item, .bs-item-list .bs-item-wrap, .bp-list .item {
	background: var(--bm-surface);
	border: 1px solid var(--bm-border);
	border-radius: 12px;
	padding: 16px;
}

/* ---------- STEP 7: activity feed ---------- */
.activity-list, #activity-stream {
	background: transparent;
}
.activity-item {
	background: var(--bm-surface);
	border: 1px solid var(--bm-border);
	border-radius: 12px;
	margin-bottom: 12px;
	padding: 16px;
}
.activity-content, .activity-inner {
	color: var(--bm-text-2);
}
.activity-meta a, .activity-date, .time-since {
	color: var(--bm-text-3);
	font-size: 12px;
}
.activity-actions a, .activity-meta a {
	color: var(--bm-text-2);
	transition: color 0.2s;
}
.activity-actions a:hover {
	color: var(--bm-gold);
}
#bs-activity-update-wrap, #bs-activity-form-wrap, .activity-update-form, #whats-new-form {
	background: var(--bm-surface);
	border: 1px solid var(--bm-border);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
}

/* ---------- STEP 8: notification bell dropdown ---------- */
#header-notification-dropdown, .notification-dropdown, .notification-popup, .bb_more_dropdown, .bs-dropdown-wrap {
	background: var(--bm-surface);
	border: 1px solid var(--bm-border);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.notification-list .notification-link, .notification-content {
	color: var(--bm-text-2);
	border-bottom: 1px solid var(--bm-border);
	padding: 12px 16px;
}
.notification-list .notification-link:hover {
	background: var(--bm-surface-2);
	color: var(--bm-text);
}
.notification-header, .notification-footer {
	background: #0d0d0d;
	border-color: var(--bm-border);
	color: var(--bm-text-2);
}

/* ---------- STEP 9: profile header ---------- */
.bb-profile-cover-wrap, #header-cover-image, #cover-image-container {
	background: var(--bm-surface-2);
	border-bottom: 1px solid var(--bm-border);
}
.bb-profile-details, .bb-profile-meta, .bb-profile-title {
	color: var(--bm-text);
}
.bb-profile-meta span, .item-meta {
	color: var(--bm-text-2);
	font-size: 13px;
}
.bp-navs, .bp-subnavs, .user-nav-tabs, .single-screen-navs, #item-nav, #subnav {
	background: var(--bm-surface);
	border-bottom: 1px solid var(--bm-border);
}
.bp-navs li a, .bp-subnavs li a {
	color: var(--bm-text-2);
	font-size: 13px;
	font-weight: 500;
	padding: 12px 16px;
	transition: color 0.2s;
}
.bp-navs li.current a, .bp-navs li a:hover {
	color: var(--bm-gold);
	border-bottom: 2px solid var(--bm-gold);
}

/* ---------- STEP 10: forums ---------- */
.bb-single-forum, .bb-forum-content, .bb-forums-list {
	background: transparent;
}
.bb-forums-list .item, .bb-forum-content-wrap {
	background: var(--bm-surface);
	border: 1px solid var(--bm-border);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 8px;
}
.bb-reply-content-text, .bbp-forum-content {
	color: var(--bm-text-2);
}
.bbp-author-name, .bb-profile-details .bb-profile-title {
	color: var(--bm-text);
	font-weight: 600;
}
.bb-reply-actions a, .bbp-admin-links a {
	color: var(--bm-text-3);
	font-size: 12px;
	transition: color 0.2s;
}
.bb-reply-actions a:hover {
	color: var(--bm-gold);
}
.bbp-breadcrumb, .bbp-breadcrumb a {
	color: var(--bm-text-3);
	font-size: 12px;
}

/* ---------- STEP 11: footer ---------- */
.site-footer, #colophon, footer {
	background: #0d0d0d;
	border-top: 1px solid var(--bm-border);
	color: var(--bm-text-3);
}

/* ---------- STEP 12: misc cleanup ---------- */
/* NOTE: "BETA VERSION" was not found in any active theme template/hook (only in
   unrelated Astra/Spectra changelog & language files), so there is no code-derived
   element to hide. If it is a nav-menu item or page text, give it a CSS class and
   add it here. */
.entry-content, .page-content {
	background: transparent;
}
.site-main, #primary {
	background: var(--bm-bg);
}
#wpadminbar {
	background: #0d0d0d;
}


/* ============================================================
   BIGGERMEN REDESIGN - Fix Round 1
   ============================================================ */

/* FIX 1 — Sidebar still white */
.buddypanel, .bb-buddypanel, .bb-buddypanel-right,
#buddypanel, .buddypanel-inner, .buddypanel-wrap,
.bb-panel, .side-panel-inner, .bb-sidebar,
[class*="buddypanel"] {
	background: #0d0d0d !important;
	border-right: 1px solid #1e1e1e !important;
	color: #888888 !important;
}
/* FIX 2 — Dropdown menus still white */
.sub-menu, .bb-sub-menu, .dropdown,
.bs-dropdown, .bs-dropdown-wrap, .bs-submenu,
.bb-header-more-menu, ul.sub-menu,
.main-navigation ul ul,
.bb-primary-menu ul ul {
	background: #111111 !important;
	border: 1px solid #1e1e1e !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
.sub-menu li a, .bb-sub-menu li a,
.main-navigation ul ul li a,
.bb-primary-menu ul ul li a {
	color: #888888 !important;
	background: transparent !important;
}
.sub-menu li a:hover, .bb-sub-menu li a:hover,
.main-navigation ul ul li a:hover {
	color: #C9A84C !important;
	background: #1a1a1a !important;
}

/* FIX 3 — Forum topic and reply cards still white/light */
.bb-single-forum-area, .bbp-lead-topic,
.bbp-topic-content, .bbp-reply-content,
.bb-reply-content-text, .bbp-body,
.bbp-forum-content, .bb-forum-content,
.bb-single-reply-list .bbp-reply-entry,
.bbp-reply-entry, .bbp-lead-topic-entry,
.bbp-topic-entry, .bb-topic-status,
[id*="post-"] {
	background: #111111 !important;
	border: 1px solid #1e1e1e !important;
	border-radius: 12px !important;
	color: #888888 !important;
}
.bbp-reply-content p, .bbp-topic-content p,
.bb-reply-content-text p {
	color: #cccccc !important;
}
.bbp-author-name, .bb-profile-title {
	color: #ffffff !important;
}

/* FIX 4 — Profile content card under tabs still white */
.bp-profile-content, .bp-profile-fields,
.bp-profile-content-area,
#profile-edit-form, .editfield,
.bp-widget, .bp-widget-inner,
.profile-fields-section,
.profile .item-body,
.user-subnav + div,
#buddypress div.item-body,
#buddypress .profile-group,
.bp-profile-group {
	background: #111111 !important;
	border: 1px solid #1e1e1e !important;
	border-radius: 12px !important;
	color: #888888 !important;
}
.profile-fields-section td, .profile-fields-section th,
.bp-profile-group td, .bp-profile-group th {
	border-color: #1e1e1e !important;
	color: #888888 !important;
	background: transparent !important;
}
.profile-fields-section .data,
.bp-profile-group .data {
	color: #ffffff !important;
}

/* FIX 5 — Footer still white */
.site-footer, #colophon, footer,
.footer-widget, .footer-inner,
.bb-footer, [class*="footer"] {
	background: #0d0d0d !important;
	border-top: 1px solid #1e1e1e !important;
	color: #444444 !important;
}
.site-footer *, #colophon * {
	color: #444444 !important;
}
.site-footer a, #colophon a {
	color: #888888 !important;
}
.site-footer a:hover {
	color: #C9A84C !important;
}

/* FIX 6 — Member cards light areas */
.bb-member-profile-card .item-block,
.bb-member-profile-card .bb-profile-card,
.bb-member-profile-card .card-body,
.members-list .item, .members-list .item-body,
.members-list .item-meta,
.bs-item-list .bs-item-wrap .item-body,
.bb-card-info-wrap, .bb-card-footer,
.member-card-footer {
	background: #111111 !important;
	color: #888888 !important;
	border-color: #1e1e1e !important;
}

/* FIX 7 — Reply/Subscribe/Favorite buttons on forum topic */
.bb-topic-reply-link-wrap .button,
.bb-topic-subscribe-link-wrap .button,
.bb-topic-favorite-link-wrap .button,
.bbp-topic-subscribe .button,
.bbp-topic-favorite .button,
.bb-reply-form .button {
	background: #C9A84C !important;
	color: #000000 !important;
	border: none !important;
}
.bb-topic-subscribe-link-wrap .button,
.bb-topic-favorite-link-wrap .button,
.bbp-topic-subscribe .button,
.bbp-topic-favorite .button {
	background: transparent !important;
	border: 1px solid #1e1e1e !important;
	color: #888888 !important;
}
.bb-topic-subscribe-link-wrap .button:hover,
.bb-topic-favorite-link-wrap .button:hover {
	border-color: #C9A84C !important;
	color: #C9A84C !important;
}


/* ============================================================
   BIGGERMEN REDESIGN - Fix Round 2 (live Puppeteer audit)
   ------------------------------------------------------------
   Confirmed via real computed-style audit of biggermen.nl. Already
   dark (untouched): .buddypanel(#0d0d0d), .site-header/#masthead(#111),
   .sub-menu(#111), .footer-bottom/.bb-footer(#0d0d0d). The rules below
   target elements we had NO selector for, so BuddyBoss's white won.
   ============================================================ */

/* BuddyPanel toggle header (.panel-head) — was rgb(255,255,255) */
.panel-head {
	background: #0d0d0d !important;
	border-bottom: 1px solid #1e1e1e !important;
}

/* Menu item anchors (A.bb-menu-item) had a white background */
.bb-menu-item {
	background: transparent !important;
}

/* Header search — wrap white, input rgb(242,244,245) */
.header-search-wrap {
	background: transparent !important;
}
.search-field-top, .header-search-wrap input {
	background: #111111 !important;
	border: 1px solid #1e1e1e !important;
	color: #ffffff !important;
}

/* Mobile slide-in panel (class "light") — wrapper/inner/header all white */
.bb-mobile-panel-wrapper, .bb-mobile-panel-inner, .bb-mobile-panel-header {
	background: #0d0d0d !important;
	border-color: #1e1e1e !important;
}

/* Modals / popups (report + media uploader): container/header were white */
.modal-mask {
	background: rgba(0,0,0,0.7) !important;
}
.modal-container {
	background: #111111 !important;
	border: 1px solid #1e1e1e !important;
	color: #888888 !important;
}
.bb-model-header, .bb-model-footer {
	background: #0d0d0d !important;
	border-color: #1e1e1e !important;
	color: #888888 !important;
}

/* Members directory: search/filter bar + list wrappers (white) */
.bp-dir-search-form, #dir-members-search-form, .dir-search-form,
.bs-search-form, #bbp-search-form,
.select-wrap, .grid-filters, .list-wrap, .bs-dir-list, .bs-item-list {
	background: transparent !important;
}
.bp-dir-search-form input, .select-wrap select, #members-order-by,
.bs-search-form input, #bbp-search-form input {
	background: #111111 !important;
	border: 1px solid #1e1e1e !important;
	color: #ffffff !important;
}

/* List items: forum + member rows (.bs-item-wrap / .bb-cover-list-item) */
.bs-item-wrap, .bb-cover-list-item {
	background: #111111 !important;
	border: 1px solid #1e1e1e !important;
	border-radius: 12px !important;
	color: #888888 !important;
}
/* directory header row stays flat, not a card */
.bs-item-wrap.bs-header-item, .bs-header-item {
	background: transparent !important;
	border: none !important;
}

/* GamiPress rank/achievement badges on member cards — white bg */
.gamipress-buddypress-rank, .gamipress-buddypress-achievement,
[class*="gamipress-buddypress"] {
	background: transparent !important;
	color: #888888 !important;
}


/* ============================================================
   BIGGERMEN REDESIGN - Fix Round 3
   ------------------------------------------------------------
   Logged-in Puppeteer audit: Gravity Forms check-in inputs,
   BuddyPress profile-fields table, profile separator + outline button.
   ============================================================ */

/* Gravity Forms — check-in form inputs */
.gform-body input[type="text"],
.gform-body input[type="number"],
.gform-body input.large,
.gform-body textarea.large,
.gform-body textarea.textarea,
.gform-body select.gfield_select,
.gfield input[type="text"],
.gfield input[type="number"],
.gfield input.large,
.gfield textarea,
.gfield select,
input.large,
textarea.large,
select.gfield_select {
  background: #111111 !important;
  border: 1px solid #1e1e1e !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}
.gfield input:focus,
.gfield textarea:focus,
.gfield select:focus,
input.large:focus,
textarea.large:focus {
  border-color: #C9A84C !important;
  background: #0c0900 !important;
}
input.large::placeholder,
textarea.large::placeholder {
  color: #444444 !important;
}

/* Gravity Forms radio + checkbox custom styling */
.gfield-choice-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  background: #111111 !important;
  border: 1.5px solid #1e1e1e !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: border-color 0.2s, background 0.2s !important;
}
.gfield-choice-input[type="checkbox"] {
  border-radius: 4px !important;
}
.gfield-choice-input:checked {
  background: #C9A84C !important;
  border-color: #C9A84C !important;
}

/* Gravity Forms labels and field wrappers */
.gfield label, .gfield_label,
.gform_wrapper label,
.gfield .gfield_label {
  color: #888888 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}
.gform_wrapper .gfield {
  margin-bottom: 16px !important;
}
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper input[type="submit"] {
  background: #C9A84C !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}
.gform_wrapper {
  background: transparent !important;
}

/* Profile fields table */
table.profile-fields,
table.bp-tables-user,
.profile-fields.bp-tables-user {
  background: #111111 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  width: 100% !important;
}
table.profile-fields td,
table.bp-tables-user td,
table.profile-fields th,
table.bp-tables-user th {
  background: transparent !important;
  border-bottom: 1px solid #1e1e1e !important;
  color: #888888 !important;
  padding: 12px 16px !important;
}
table.profile-fields td:last-child,
table.bp-tables-user td:last-child {
  color: #ffffff !important;
}

/* Group separator and outline button */
.group-separator-block {
  background: transparent !important;
  border-color: #1e1e1e !important;
}
a.button.outline,
.button.outline.small,
a.button.outline.small {
  background: transparent !important;
  border: 1px solid #1e1e1e !important;
  color: #888888 !important;
}
a.button.outline:hover,
.button.outline.small:hover {
  border-color: #C9A84C !important;
  color: #C9A84C !important;
}


/* ============================================================
   BIGGERMEN REDESIGN - Fix Round 4
   ============================================================ */

/* FIX 1 — Double checkbox/radio on Gravity Forms (hide native, keep custom visual) */
.gfield-choice-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}
.gfield_radio .gfield-choice-input,
.gfield_checkbox .gfield-choice-input {
  position: absolute !important;
  opacity: 0 !important;
}
.gfield_radio .gchoice,
.gfield_checkbox .gchoice {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
  cursor: pointer !important;
}
.gfield_radio .gchoice label,
.gfield_checkbox .gchoice label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  color: #888888 !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}
.gfield_radio .gchoice label::before,
.gfield_checkbox .gchoice label::before {
  content: '' !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 1.5px solid #1e1e1e !important;
  background: #111111 !important;
  flex-shrink: 0 !important;
  transition: border-color 0.2s, background 0.2s !important;
}
.gfield_checkbox .gchoice label::before {
  border-radius: 4px !important;
}
.gfield_radio .gchoice input:checked + label::before,
.gfield_checkbox .gchoice input:checked + label::before,
.gfield_radio .gchoice label.gf-choice-is-checked::before,
.gfield_checkbox .gchoice label.gf-choice-is-checked::before {
  background: #C9A84C !important;
  border-color: #C9A84C !important;
}

/* FIX 2 — Gravity Forms spacing / breathing room */
.gform_wrapper .gfield {
  margin-bottom: 24px !important;
  padding-bottom: 0 !important;
}
.gform_wrapper .gfield_label {
  margin-bottom: 12px !important;
  display: block !important;
}
.gform_wrapper .gfield_description {
  color: #444444 !important;
  font-size: 12px !important;
  margin-bottom: 10px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}
.gform_wrapper .gform_body {
  background: transparent !important;
}
.gform_wrapper .gform_fields {
  gap: 0 !important;
}
.gform_wrapper .gform_title,
.gform_wrapper .gform_description {
  color: #ffffff !important;
  margin-bottom: 8px !important;
}

/* FIX 3 — Profile avatar / account dropdown still white */
.bp-cover-image-status,
.bb-profile-avatar-wrap .dropdown,
.bp-avatar-status,
.bb-dropdown-wrap,
.profile-header-nav .dropdown,
.change-avatar .dropdown,
.bb-profile-media .dropdown,
[data-balloon-pos] + .dropdown,
.bb-avatar-btn-wrap + div,
.bb-profile-actions .dropdown,
.bb-action-buttons .dropdown,
.item-header-wrap .dropdown,
#header-my-account-menu,
.header-my-account-menu,
.bb-header-user-menu,
.bb-user-menu {
  background: #111111 !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
#header-my-account-menu a,
.header-my-account-menu a,
.bb-header-user-menu a,
.bb-user-menu a {
  color: #888888 !important;
}
#header-my-account-menu a:hover,
.bb-header-user-menu a:hover {
  color: #C9A84C !important;
  background: #1a1a1a !important;
}

/* FIX 4 — Profile fields table inconsistency (catch all rows) */
table.profile-fields *,
table.bp-tables-user *,
.profile-fields * {
  background: transparent !important;
}
table.profile-fields tr,
table.bp-tables-user tr,
.profile-fields tr {
  border-bottom: 1px solid #1e1e1e !important;
}
table.profile-fields tr:last-child,
table.bp-tables-user tr:last-child {
  border-bottom: none !important;
}
table.profile-fields td:first-child,
table.bp-tables-user td:first-child {
  color: #888888 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  width: 35% !important;
}
table.profile-fields td:last-child,
table.bp-tables-user td:last-child {
  color: #ffffff !important;
  font-size: 14px !important;
}


/* ============================================================
   BIGGERMEN REDESIGN - Typography & Spacing
   ============================================================ */

/* ---------- TYPOGRAPHY ---------- */
/* Page titles */
h1, .page-title, .entry-title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 24px;
  letter-spacing: -0.3px;
}
h2 { font-size: 22px !important; font-weight: 700 !important; color: #ffffff !important; margin-bottom: 16px; }
h3 { font-size: 18px !important; font-weight: 600 !important; color: #ffffff !important; margin-bottom: 12px; }
h4 { font-size: 15px !important; font-weight: 600 !important; color: #ffffff !important; }
h5, h6 { font-size: 13px; font-weight: 600; color: #888888; }

p { color: #888888; font-size: 14px; line-height: 1.7; }
a { color: #C9A84C; text-decoration: none; transition: color 0.2s; }
a:hover { color: #b8943e; }

/* Eyebrow labels */
.bm-eyebrow, .section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #C9A84C;
}

/* ---------- GLOBAL SPACING + LAYOUT ---------- */
/* Main content area */
.site-content, #content, .bb-content-area {
  padding: 90px 32px 32px 32px; /* top clears the fixed ~77px header (was 32px -> content overlapped) */
  max-width: 1200px;
  margin: 0 auto;
  width: 100%; /* fill to max-width: #page is display:flex, so margin:0 auto was collapsing it (e.g. members dir -> 345px) */
}

/* Page wrapper */
#page, .site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Content with sidebar */
.bb-page-content-inner,
.bb-grid,
.bb-layout {
  gap: 24px;
}

/* Remove default WordPress margins that cause white gaps */
.entry-content > *:first-child { margin-top: 0; }
.entry-content > *:last-child { margin-bottom: 0; }

/* (Removed broad generic card-spacing rule — [class*="-wrap"] was too wide-reaching.) */

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #1e1e1e; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #C9A84C; }


/* ============================================================
   BIGGERMEN REDESIGN - Profile Edit Form + Beta Fix
   ============================================================ */

/* FIX 1 — Profile edit form inputs */
.standard-form input[type="text"],
.standard-form input[type="number"],
.standard-form input[type="email"],
.standard-form textarea,
.standard-form select,
#profile-edit-form input[type="text"],
#profile-edit-form input[type="number"],
#profile-edit-form textarea,
#profile-edit-form select,
.bp-profile-edit input[type="text"],
.bp-profile-edit input[type="number"],
.bp-profile-edit textarea,
.bp-profile-edit select,
.editfield input[type="text"],
.editfield input[type="number"],
.editfield textarea,
.editfield select {
  background: #111111 !important;
  border: 1px solid #1e1e1e !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
}
.standard-form input:focus,
.standard-form textarea:focus,
.standard-form select:focus,
#profile-edit-form input:focus,
#profile-edit-form textarea:focus,
.editfield input:focus,
.editfield textarea:focus {
  border-color: #C9A84C !important;
  background: #0c0900 !important;
  outline: none !important;
}

/* FIX 2 — Profile edit radio and checkbox */
.standard-form .input-options input[type="radio"],
.standard-form .input-options input[type="checkbox"],
.editfield .input-options input[type="radio"],
.editfield .input-options input[type="checkbox"],
.bp-radio-wrap input[type="radio"],
.bp-checkbox-wrap input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 1.5px solid #1e1e1e !important;
  background: #111111 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.2s !important;
}
.editfield .input-options input[type="checkbox"],
.bp-checkbox-wrap input[type="checkbox"] {
  border-radius: 4px !important;
}
.standard-form .input-options input:checked,
.editfield .input-options input:checked,
.bp-radio-wrap input:checked,
.bp-checkbox-wrap input:checked {
  background: #C9A84C !important;
  border-color: #C9A84C !important;
}
.standard-form .input-options label,
.editfield .input-options label,
.bp-radio-wrap label,
.bp-checkbox-wrap label,
.option-label {
  color: #888888 !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  cursor: pointer !important;
}

/* FIX 3 — Field labels readable */
.standard-form label,
.editfield label,
.editfield dt label,
#profile-edit-form label {
  color: #888888 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}
.standard-form .description,
.editfield .description {
  color: #444444 !important;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* FIX 4 — Hide "BETA VERSION" (custom nav menu item, found via Puppeteer:
   <li id="menu-item-1109" class="menu-item menu-item-1109 ..."><a href="#"><span>Beta Version</span></a></li>) */
#menu-item-1109,
li.menu-item-1109 {
  display: none !important;
}

/* FIX 2b — the VISIBLE radio/checkbox control is .option-label::before (a 22px
   white pseudo-element in BuddyBoss Nouveau), confirmed via Puppeteer markup dump. */
.bp-radio-wrap .option-label::before,
.bp-checkbox-wrap .option-label::before,
.input-options .option-label::before {
  background: #111111 !important;
  border-color: #1e1e1e !important;
}
.bp-radio-wrap input:checked + .option-label::before,
.bp-checkbox-wrap input:checked + .option-label::before,
.input-options input:checked + .option-label::before {
  background: #C9A84C !important;
  border-color: #C9A84C !important;
}


/* ============================================================
   BIGGERMEN REDESIGN - Component Layout
   (component-level only: no position:fixed, margin-left, or shell overrides)
   ============================================================ */

/* Members grid */
.members-list.grid, .bp-list.grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
}
.members-list.grid .list-wrap { display: contents !important; }

/* (Forums grid rule removed — forums already render as a native bb-grid lg-grid-1-3,
   and .bb-forums-list .item-list matched nothing on this site.) */

/* Activity feed spacing */
.activity-list .activity-item {
  margin-bottom: 12px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.activity .activity-list { padding: 0 !important; }

/* Profile tabs content */
#item-body { padding: 24px 0 !important; }
.bp-profile-content { padding: 24px !important; }


/* ============================================================
   BIGGERMEN REDESIGN - Dropdown wrapper fix
   ------------------------------------------------------------
   The header dropdown's dark .bb-sub-menu sits INSIDE a wrapper
   DIV.wrapper.ab-submenu whose background was white (rgb(255,255,255)),
   showing as white top/bottom caps. Found via Puppeteer elementFromPoint.
   ============================================================ */
.wrapper.ab-submenu,
.ab-submenu {
  background: #111111 !important;
  border-color: #1e1e1e !important;
}


/* ============================================================
   BIGGERMEN REDESIGN - Sidebar polish (high-end)
   ------------------------------------------------------------
   Concept language: grey nav (#9a9a9a) -> white on hover, active
   item in gold with an inset gold left bar + dark inset bg, and a
   clean white uppercase wordmark. Live nav text was a dark navy
   rgb(30,33,50) and the logo was muted #888 — both fixed here.
   ============================================================ */

/* 1. Brand wordmark — clean white uppercase, distinct from the menu */
.buddypanel #site-logo .site-title a,
.buddypanel .site-branding .site-title a {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
}

/* full-bleed menu items so the gold accent bar sits at the sidebar edge */
.buddypanel .side-panel-menu,
.buddypanel .buddypanel-menu {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2. Inactive nav item — soft, readable grey (was dark navy) */
.buddypanel .buddypanel-menu li > a,
.buddypanel .buddypanel-menu li > a.bb-menu-item {
  color: rgb(255 255 255 / 40%) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.2px !important;
  padding: 11px 18px !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}
.buddypanel .buddypanel-menu li > a i,
.buddypanel .buddypanel-menu li > a [class*="bb-icon"] {
  color: inherit !important;
  font-size: 17px !important;
}

/* subtle, modern hover — brighten + faint gold edge previewing the active state */
.buddypanel .buddypanel-menu li > a:hover {
  color: #ffffff !important;
  background: #151515 !important;
  box-shadow: inset 3px 0 0 rgba(201, 168, 76, 0.5) !important;
}

/* 3. Active / current item (Home) — gold + inset gold bar + dark inset bg */
.buddypanel .buddypanel-menu li.current-menu-item > a,
.buddypanel .buddypanel-menu li.current_page_item > a,
.buddypanel .buddypanel-menu li.current-menu-ancestor > a {
  color: #C9A84C !important;
  background: #0a0a0a !important;
  box-shadow: inset 3px 0 0 #C9A84C !important;
  font-weight: 600 !important;
}
.buddypanel .buddypanel-menu li.current-menu-item > a i,
.buddypanel .buddypanel-menu li.current_page_item > a i {
  color: #C9A84C !important;
}


/* ============================================================
   BIGGERMEN REDESIGN - Members Cards Polish
   ------------------------------------------------------------
   Real ReadyLaunch markup (verified live via Puppeteer):
     li.item-entry > .list-wrap[display:contents] > .list-wrap-inner
       > .item-avatar  (avatar img + .gamipress-* rank/badge pills — 216px
                        for 1 badge row, 262px for 2 → this is what shifted
                        Abutaleb's content 46px down)
       > .item ( .item-block(.member-name + .item-meta.last-activity)
                 + .follow-container(.followers-wrap)
                 + .member-buttons-wrap > .footer-button-wrap
                     > .generic-button(Follow button / Connect a) )
   The cards are ALREADY equal height (grid). The fix is to pin the action
   footer to the bottom so it aligns across columns, and to center/restyle
   the real badges + buttons. NOTE: .activity here is the GOLD rank label,
   so it is intentionally NOT touched.
   ============================================================ */

/* 1. Equal-height flex column so the action footer pins to the bottom.
   .list-wrap is display:contents, so .list-wrap-inner is the real flex child of li. */
.members-list.grid li.item-entry {
  display: flex !important;
  flex-direction: column !important;
}
.members-list.grid li.item-entry .list-wrap-inner {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.members-list.grid li.item-entry .item {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* 2. Avatar — centered */
.members-list.grid .item-avatar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.members-list.grid .item-avatar > a {
  display: inline-flex !important;
  justify-content: center !important;
}

/* 3. Rank / badge pills — center + wrap so multi-badge cards stay tidy */
.members-list.grid .gamipress-buddypress-user-details,
.members-list.grid .gamipress-buddypress-ranks,
.members-list.grid .gamipress-buddypress-achievements {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
}

/* 4. Name + meta — centered, on-brand (do NOT touch .activity = gold rank) */
.members-list.grid .item-block { text-align: center !important; width: 100% !important; }
.members-list.grid .member-name,
.members-list.grid .member-name a {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: center !important;
}
.members-list.grid .item-meta.last-activity {
  color: #666666 !important;
  font-size: 12px !important;
  text-align: center !important;
}
.members-list.grid .follow-container { justify-content: center !important; }

/* 5. Action footer — pin to bottom, center the Follow/Connect buttons */
.members-list.grid .member-buttons-wrap {
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px solid #1e1e1e !important;
  width: 100% !important;
}
.members-list.grid .member-buttons-wrap .footer-button-wrap,
.members-list.grid .member-buttons-wrap .button-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}
/* collapse the half-width wrappers (+ their divider) so the icons group, centered */
.members-list.grid .member-buttons-wrap .generic-button {
  flex: 0 0 auto !important;
  width: auto !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.members-list.grid .member-buttons-wrap .generic-button button,
.members-list.grid .member-buttons-wrap .generic-button a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  /* BB hides the "Follow"/"Connect" label with transparent text (not display:none),
     so the label still claims width and offsets the icon — kill it with font-size:0. */
  font-size: 0 !important;
  border-radius: 10px !important;
  background: #1a1a1a !important;
  border: 1px solid #1e1e1e !important;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;
}
.members-list.grid .member-buttons-wrap .generic-button button i,
.members-list.grid .member-buttons-wrap .generic-button a i {
  font-size: 17px !important;
  color: #9a9a9a !important;
  margin: 0 !important;
}
.members-list.grid .member-buttons-wrap .generic-button button:hover,
.members-list.grid .member-buttons-wrap .generic-button a:hover {
  border-color: #C9A84C !important;
  background: #161616 !important;
}
.members-list.grid .member-buttons-wrap .generic-button button:hover i,
.members-list.grid .member-buttons-wrap .generic-button a:hover i {
  color: #C9A84C !important;
}


/* ============================================================
   BIGGERMEN REDESIGN - News Feed
   ------------------------------------------------------------
   Live audit of /news-feed/ found 24 light (rgb>=200) elements:
   feed cards (li.activity-item), gamipress rank / points-award
   announcement blocks, the composer toolbar (#whats-new-toolbar),
   feed-filter button + modals (.subnav-filters-*), the "..." more
   dropdown (.bb_more_dropdown), and both sidebar widgets — Recent
   Discussions (.widget_display_topics) + Profile Completion
   (.widget_bp_profile_completion_widget, whose ring was #F1F3F5
   track + a GREEN rgb(20,181,80) progress path -> recoloured gold).
   ============================================================ */

/* --- Feed cards --- */
#buddypress .activity-list li.activity-item,
.activity-list li.activity-item,
li.activity-item {
  background: #111111 !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 12px !important;
  color: #888888 !important;
}

/* Media attachments — BB lazy-loads photos: `src` starts as a LIGHT
   placeholder.png and is swapped for the real image (in data-src) on scroll,
   at which point the `.lazy` class is removed. A dark backdrop + dimming the
   still-`.lazy` placeholder kills any white flash before the real photo loads. */
.activity-item .entry-img img,
.activity-item .bb-open-media-theatre img,
.activity-item .bb-activity-media-wrap img {
  background-color: #1e1e1e !important;
}
.activity-item img.lazy { filter: brightness(0.12) !important; }

/* GamiPress system blocks inside the feed — both removed for a calmer feed:
   - .gamipress-rank.user-has-earned is EMPTY (ranks have no badge image), so it
     was just a hollow bordered rectangle.
   - .gamipress-points-award is the repetitive "10 Points for publish an activity
     post 1 time" line. The header text + "Platinum" pill already convey context. */
.activity-item .gamipress-rank.user-has-earned,
.activity-item .gamipress-points-award.user-has-earned {
  display: none !important;
}
/* Collapse the now-empty body wrapper on these system posts so Like/Comment sits
   tight under the rank pill. :has scopes this to system posts whose body is ONLY
   the hidden gamipress block (real posts keep their body); browsers without :has
   just fall back to the old spacing. */
.activity-item .activity-content:has(> .activity-inner > .gamipress-rank.user-has-earned),
.activity-item .activity-content:has(> .activity-inner > .gamipress-points-award.user-has-earned) {
  display: none !important;
}

/* Forum-topic ("started a discussion") embeds inside the feed
   (li.bbp_topic_create) — these inner wraps had their own white bg */
.activity-item .bb-content-inr-wrap {
  background: #0d0d0d !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 10px !important;
  color: #888888 !important;
}
/* ---- FORUMS-POLISH Fase 2: discussie-embed = ÉÉN strakke card ----
   li.bbpress = bbp_topic_create / bbp_reply_create. De card is
   .activity-inner; alle geneste kaders/randen eruit. */
.activity-item.bbpress .activity-inner {
  background: #0a0a0a !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  overflow: hidden !important;
}
.activity-item.bbpress .bb-content-inr-wrap,
.activity-item.bbpress .activity-discussion-title-wrap {
  background: transparent !important; border: none !important; border-radius: 0 !important;
  padding: 0 !important; margin: 0 !important;
}
/* titel: wit 13px semibold, hover goud */
.activity-item.bbpress .activity-discussion-title-wrap a {
  color: #ffffff !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important;
}
.activity-item.bbpress .activity-discussion-title-wrap a:hover { color: #C9A84C !important; }
/* snippet: #888 12px, max 2 regels; mention-links goud (Fase 3) */
.activity-item.bbpress .bb-content-inr-wrap,
.activity-item.bbpress .bb-content-inr-wrap p {
  color: #888888 !important; font-size: 12px !important; line-height: 1.5 !important;
}
.activity-item.bbpress .bb-content-inr-wrap p {
  margin: 5px 0 0 !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
}
.activity-item.bbpress .bb-content-inr-wrap a { color: #C9A84C !important; }
.activity-item.bbpress .bb-content-inr-wrap a:hover { color: #b8943e !important; }
/* acties: rij subtiele links, GEEN volle-breedte border-top */
.activity-item.bbpress .activity-inner-meta.action {
  background: transparent !important; border: none !important;
  padding: 9px 0 0 !important; margin-top: 9px !important;
  display: flex !important; gap: 18px !important; align-items: center !important;
}
.activity-item.bbpress .activity-inner-meta .generic-button {
  margin: 0 !important; padding: 0 !important; background: transparent !important;
}
.activity-item.bbpress .activity-inner-meta .generic-button a.button {
  color: #888888 !important; font-size: 11px !important; font-weight: 500 !important;
  background: transparent !important; border: none !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  text-transform: none !important; min-height: 0 !important; line-height: 1.4 !important; box-shadow: none !important;
}
.activity-item.bbpress .activity-inner-meta .generic-button a.button:hover { color: #C9A84C !important; }
.activity-item.bbpress .activity-inner-meta .generic-button a.button .comment-count {
  color: inherit !important; font-size: 11px !important;
}

/* --- Composer (the "What's new" post box + modal) --- */
.activity-update-form,
#bp-nouveau-activity-form,
#bp-nouveau-activity-form .whats-new-scroll-view,
.activity-update-form .whats-new-form-header {
  background: #111111 !important;
  border-color: #1e1e1e !important;
}
#whats-new-toolbar {
  background: #0d0d0d !important;
  border-top: 1px solid #1e1e1e !important;
}
#whats-new, .whats-new, textarea#whats-new,
#whats-new-textarea, .whats-new-textarea,
.activity-update-form .bp-suggestions-mentions,
#bp-nouveau-activity-form [contenteditable="true"],
.bb-activity-placeholder {
  background: #111111 !important;
  color: #ffffff !important;
  border: 1px solid #1e1e1e !important;
}
#whats-new-toolbar .toolbar-button { color: #888888 !important; }
#whats-new-toolbar .toolbar-button:hover { color: #C9A84C !important; }

/* --- Feed filter button + its modals --- */
.subnav-filters-opener {
  background: #111111 !important;
  border: 1px solid #1e1e1e !important;
  color: #888888 !important;
}
.subnav-filters-opener:hover { border-color: #C9A84C !important; color: #C9A84C !important; }
.subnav-filters-modal,
#bb-subnav-filter-show, #bb-subnav-filter-by {
  color: #888888 !important;
}
.subnav-filters-modal a, .subnav-filters-modal li,
.subnav-filters-modal label { color: #888888 !important; }
.subnav-filters-modal a:hover { color: #C9A84C !important; }

/* --- "..." more dropdown on activity items --- */
.media-action_list.bb_more_dropdown,
.bb_more_dropdown,
.activity-item .bb_more_dropdown {
  background: #111111 !important;
  border: 1px solid #1e1e1e !important;
}
.bb_more_dropdown a { color: #888888 !important; }
.bb_more_dropdown a:hover { color: #C9A84C !important; background: #1a1a1a !important; }

/* --- Like / comment action bar -> #888, gold on hover --- */
.activity-item .activity-state a,
.activity-item .activity-state-comments,
.activity-item .activity-state-likes,
.activity-item .activity-meta .button,
.activity-item .ac-reply-content a,
.activity-item .acomment-options a {
  color: #888888 !important;
}
.activity-item .activity-state a:hover,
.activity-item .activity-state-comments:hover,
.activity-item .activity-state-likes:hover,
.activity-item .activity-meta .button:hover,
.activity-item .acomment-options a:hover { color: #C9A84C !important; }

/* --- Sidebar widgets (Recent Discussions + Profile Completion) --- */
.widget_display_topics,
.widget_bp_profile_completion_widget,
#bbp_topics_widget-4,
#bp_xprofile_profile_completion_widget-4,
.bb-sidebar aside.widget,
#secondary aside.widget,
.bb-sidebar-secondary aside.widget {
  background: #111111 !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 12px !important;
  color: #888888 !important;
}
.widget_display_topics .widget-title,
.widget_bp_profile_completion_widget .widget-title { color: #ffffff !important; }
.widget_display_topics .bbp-forum-title { color: #888888 !important; }
.widget_display_topics .bbp-forum-title:hover { color: #C9A84C !important; }
.widget_display_topics li, .widget_display_topics .bbp-topic-info { border-color: #1e1e1e !important; }

/* Profile Completion — dark + GOLD progress ring */
.widget_bp_profile_completion_widget .pc_progress_graph path {
  stroke: #1e1e1e !important;                 /* track ring (was #F1F3F5) */
}
.widget_bp_profile_completion_widget .pc_progress_graph path.pc_progress_rate {
  stroke: #C9A84C !important;                 /* progress arc (was green) */
}
.widget_bp_profile_completion_widget .progress_text_value,
.widget_bp_profile_completion_widget .progress_text_unit { color: #C9A84C !important; }
.widget_bp_profile_completion_widget .progress_text_label { color: #888888 !important; }
.widget_bp_profile_completion_widget .single_section_wrap { border-color: #1e1e1e !important; }
.widget_bp_profile_completion_widget .section_name a { color: #888888 !important; }
.widget_bp_profile_completion_widget .section_name a:hover { color: #C9A84C !important; }
.widget_bp_profile_completion_widget .single_section_wrap.completed .section_ico { color: #C9A84C !important; }

/* --- Admin-bar light bits (admins only) --- */
#wpadminbar #ab-pending-notifications.count { background: #1e1e1e !important; color: #C9A84C !important; }
img.avatar { background-color: transparent !important; }


/* ============================================================
   BIGGERMEN REDESIGN - News Feed (contrast polish)
   ------------------------------------------------------------
   Live-verified contrast fixes (targeted only):
   - Composer icons were rgba(30,33,50,0.3) (dark navy @30% = invisible)
   - Like/Comment + the "Show … / by …" filter text sat at #888
   - Post body (.activity-inner) was #888 @14px -> hard to read
   Brighten interactive bits to #9a9a9a (gold hover); body to #cccccc.
   ============================================================ */

/* 1. Composer toolbar icons (camera / video / GIF-attach) — gold (concept) */
#whats-new-toolbar .toolbar-button i,
#whats-new-toolbar .toolbar-button [class*="bb-icon"] {
  color: #C9A84C !important;
  opacity: 1 !important;
  transition: color 0.18s ease !important;
}
#whats-new-toolbar .toolbar-button:hover i,
#whats-new-toolbar .toolbar-button:hover [class*="bb-icon"] {
  color: #b8943e !important;   /* darker gold on hover */
}

/* 2. LIKE / COMMENT buttons (+ comments count)
   #buddypress prefix needed to outrank the base feed rules (.activity-meta
   .button / .activity-state a were 3-class selectors that won the !important tie). */
#buddypress .activity-item .bp-like-button,
#buddypress .activity-item .bp-like-button span,
#buddypress .activity-item .bp-like-button i,
#buddypress .activity-item .acomment-reply,
#buddypress .activity-item .acomment-reply span,
#buddypress .activity-item .acomment-reply i,
#buddypress .activity-item .activity-state-comments,
#buddypress .activity-item .activity-state-comments .comments-count,
#buddypress .activity-item .activity-state-comments i {
  color: #9a9a9a !important;
}
#buddypress .activity-item .bp-like-button:hover,
#buddypress .activity-item .bp-like-button:hover span,
#buddypress .activity-item .bp-like-button:hover i,
#buddypress .activity-item .acomment-reply:hover,
#buddypress .activity-item .acomment-reply:hover span,
#buddypress .activity-item .acomment-reply:hover i,
#buddypress .activity-item .activity-state-comments:hover,
#buddypress .activity-item .activity-state-comments:hover .comments-count,
#buddypress .activity-item .activity-state-comments:hover i {
  color: #C9A84C !important;
}

/* 3. Feed filter bar ("Show all updates / by new posts") */
.bb-subnav-filters-label,
.subnav-filters-opener .selected,
.bb-subnav-filters-filtering .subnav-filters-opener > i {
  color: #9a9a9a !important;
}
.bb-subnav-filters-filtering .subnav-filters-opener:hover .selected,
.bb-subnav-filters-filtering .subnav-filters-opener:hover > i {
  color: #C9A84C !important;
}

/* 4. Activity post body text -> readable */
.activity-item .activity-inner,
.activity-item .activity-inner p,
.activity-item .bb-content-inr-wrap p {
  color: #cccccc !important;
}

/* 5. Like / Comment action bar — group left, even gap, dark separator (concept) */
#buddypress .activity-item .activity-meta.bp-generic-meta {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 28px !important;
  border-top: none !important;   /* scheidingslijn boven de LIKE/COMMENT-rij weg */
  padding-top: 12px !important;
}
#buddypress .activity-item .activity-meta.bp-generic-meta .generic-button { flex: 0 0 auto !important; }
#buddypress .activity-item .bp-like-button,
#buddypress .activity-item .acomment-reply {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  transition: color 0.18s ease !important;
}

/* 6. Page title — modern style site-wide; hidden on the News Feed page */
.entry-header .entry-title,
h1.entry-title,
.bb-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.5px !important;
}
.entry-header { background: transparent !important; }
/* News Feed page (page-id-696): hide the title entirely — nav already gives context */
body.page-id-696 .entry-header,
body.page-id-696 .entry-title { display: none !important; }


/* ============================================================
   BIGGERMEN REDESIGN - News Feed polish 2
   ------------------------------------------------------------
   Live-verified targeted fixes:
   - Like/Comment hover painted a white box (BB bg rgb(242,244,245))
   - grey "Platinum" chip (light rgb(214,217,221) border + light shadow)
   - avatar already 40px (needs gold ring); username muted; timestamp
     dark navy rgb(30,33,50); composer placeholder rgba(90,90,90,.5)
   ============================================================ */

/* a. Like/Comment hover — remove the white bg box, keep only the gold colour */
#buddypress .activity-item .bp-like-button:hover,
#buddypress .activity-item .bp-like-button:focus,
#buddypress .activity-item .bp-like-button:active,
#buddypress .activity-item .acomment-reply:hover,
#buddypress .activity-item .acomment-reply:focus,
#buddypress .activity-item .activity-state-comments:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* b. Consistent card padding */
#buddypress .activity-list li.activity-item {
  padding: 18px 20px !important;
}

/* c. "Platinum" rank pill -> gold theme (was a default grey chip) */
.activity-item .gamipress-buddypress-rank,
.gamipress-buddypress-rank {
  background: rgba(201, 168, 76, 0.08) !important;
  border: 1px solid rgba(201, 168, 76, 0.40) !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}
.gamipress-buddypress-rank-title,
.gamipress-buddypress-rank .activity {
  color: #C9A84C !important;
  font-weight: 600 !important;
}

/* d. Avatar -> 40px circle with a subtle gold ring */
.activity-item .activity-avatar img,
.activity-item .item-avatar img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(201, 168, 76, 0.35) !important;
  box-sizing: border-box !important;
}

/* e. Username -> white + bold (the member-link in the header) */
.activity-item .activity-header a[href*="/members/"] {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* f. Timestamp + privacy globe -> smaller + subtle #444 */
.activity-item .activity-time-since,
.activity-item .activity-date,
.activity-item .activity-date a,
.activity-item .time-since {
  color: #444444 !important;
  font-size: 12px !important;
}
.activity-item .bb-media-privacy-wrap,
.activity-item .bb-media-privacy-wrap i,
.activity-item .privacy {
  color: #444444 !important;
  font-size: 12px !important;
}

/* g. Composer placeholder -> #555 (was rgba(90,90,90,0.5)) */
.medium-editor-placeholder::before,
.medium-editor-placeholder::after {
  color: #555555 !important;
  opacity: 1 !important;
}


/* ============================================================
   BIGGERMEN REDESIGN - News Feed modern
   ------------------------------------------------------------
   1+2 undo earlier boxes (filter openers + composer input had our own
   bg:#111/border:#1e1e1e); 3 composer depth gradient; 4 card hover lift;
   5 Recent Discussions gold left-border hover.
   ============================================================ */

/* 1. Filter dropdowns ("Show all updates" / "by new posts") -> plain text + arrow */
.bb-subnav-filters-filtering .subnav-filters-opener {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 2px !important;
}
.bb-subnav-filters-filtering .subnav-filters-opener:hover .selected,
.bb-subnav-filters-filtering .subnav-filters-opener:hover > i {
  color: #C9A84C !important;
}

/* 2. Composer — remove inner input border/box; the card is the only container */
#bp-nouveau-activity-form .activity-form,
#bp-nouveau-activity-form #whats-new-textarea,
#bp-nouveau-activity-form #whats-new,
#bp-nouveau-activity-form .bp-suggestions.medium-editor-element {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
#whats-new-toolbar { border-top: none !important; background: transparent !important; }

/* 3. Composer card — subtle bottom gradient for depth */
#bp-nouveau-activity-form.activity-update-form { position: relative !important; }
#bp-nouveau-activity-form.activity-update-form::after {
  content: "" !important;
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: linear-gradient(to top, rgba(201, 168, 76, 0.06), rgba(0, 0, 0, 0)) !important;
  border-radius: 0 0 12px 12px;
  pointer-events: none !important;
  z-index: 1;
}

/* 4. Feed cards — subtle interactive hover (gold border + 1px lift) */
#buddypress .activity-list li.activity-item {
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}
#buddypress .activity-list li.activity-item:hover {
  border-color: rgba(201, 168, 76, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* 5. Recent Discussions links — gold left border + slide on hover */
.widget_display_topics li.bbp-topic-no-avatar {
  border-left: 2px solid transparent !important;
  padding-left: 0 !important;
  transition: border-color 0.2s ease, padding-left 0.2s ease !important;
}
.widget_display_topics li.bbp-topic-no-avatar:hover {
  border-left: 2px solid #C9A84C !important;
  padding-left: 10px !important;
}
.widget_display_topics li.bbp-topic-no-avatar:hover .bbp-forum-title {
  color: #C9A84C !important;
}


/* ============================================================
   BIGGERMEN REDESIGN - Feed search overlay
   ------------------------------------------------------------
   The search lives in .flex.activity-head-bar next to the Show/by
   dropdowns. On click, .bb-subnav-filters-search gets .active and
   grows 30px -> 270px INLINE, pushing the dropdowns right. Fix:
   lock the container footprint to the icon and float the open panel
   (#subnav-filters) as an absolute overlay.
   ============================================================ */

/* collapsed search icon -> plain #9a9a9a, gold hover, no box */
.bb-subnav-filters-search .subnav-filters-opener {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 30px !important;
}
.bb-subnav-filters-search .subnav-filters-opener i { color: #9a9a9a !important; }
.bb-subnav-filters-search .subnav-filters-opener:hover i { color: #FFBC00 !important; }

/* keep the container's layout footprint = icon only, even when .active,
   so opening the search never pushes the Show/by dropdowns.
   Scoped to activity feed only so connections/members view buttons aren't crushed. */
.activity .bb-subnav-filters-search,
.activity .bb-subnav-filters-search.active,
#activity-stream-filters .bb-subnav-filters-search,
#activity-stream-filters .bb-subnav-filters-search.active,
.activity-head-bar > .bb-subnav-filters-search,
.activity-head-bar > .bb-subnav-filters-search.active {
  position: relative !important;
  width: 30px !important;
  flex: 0 0 30px !important;
  overflow: visible !important;
}

/* open search panel -> absolute overlay (floats over the bar, no push) */
.bb-subnav-filters-search.active #subnav-filters {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 260px !important;
  max-width: 260px !important;
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
  border-radius: 10px !important;
  z-index: 50 !important;
  padding: 4px 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
.bb-subnav-filters-search #subnav-filters .subnav-search,
.bb-subnav-filters-search #subnav-filters .dir-search,
.bb-subnav-filters-search #subnav-filters form.bp-dir-search-form {
  width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}
.bb-subnav-filters-search #subnav-filters input#dir-activity-search {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 36px !important;
  color: #fff !important;
  font-size: 14px !important;
}
.bb-subnav-filters-search #subnav-filters input#dir-activity-search::placeholder {
  color: #777 !important;
}
.bb-subnav-filters-search #subnav-filters .nouveau-search-submit,
.bb-subnav-filters-search #subnav-filters .nouveau-search-submit .dashicons {
  background: transparent !important;
  border: none !important;
  color: #aaa !important;
}


/* ============================================================
   BIGGERMEN REDESIGN - Profile Page
   ------------------------------------------------------------
   Live-verified classes (members/<user>/):
   cover #header-cover-image.has-default (+ placeholder <img>),
   avatar #item-header-avatar img, badges inside .bb-user-content-wrap
   (XP .gamipress-buddypress-points-type.gamipress-buddypress-xp,
   rank .gamipress-buddypress-rank, helm .bm-helm-badge), tabs by li id,
   details .bp-profile-content, stats .followers-wrap/.following-wrap.
   ============================================================ */

/* 1. Cover — dark gradient w/ subtle gold tint (only when no custom cover) */
#header-cover-image.has-default {
  background: linear-gradient(135deg, #111111 0%, #1a1610 55%, rgba(201, 168, 76, 0.18) 100%) !important;
}
#header-cover-image { border-bottom: 1px solid #1e1e1e !important; }
#header-cover-image.has-default img,
#header-cover-image.has-default .bb-cover-image-status { display: none !important; }
#cover-image-container { border-color: #1e1e1e !important; }

/* 2. Avatar — gold border + dark separation ring */
#item-header-avatar img,
#item-header-avatar img.avatar {
  border: 3px solid #C9A84C !important;
  box-shadow: 0 0 0 3px #0a0a0a !important;
}

/* 3. Header badges -> single inline row (XP, rank, helm).
   The wrap is laid out as flex-wrap; full-width items force line breaks so
   the badge row (order 2/3) sits together, regardless of DOM order. */
#item-header-content .bb-user-content-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 6px !important;
}
#item-header-content .bb-user-content-wrap > .member-title-wrap { order: 1 !important; flex: 0 0 100% !important; }
#item-header-content .bb-user-content-wrap > .gamipress-buddypress-user-details-top { order: 2 !important; margin: 8px 0 0 !important; }
#item-header-content .bb-user-content-wrap > .bm-helm-badge { order: 3 !important; margin: 8px 0 0 !important; }
#item-header-content .bb-user-content-wrap > .bm-profile-completion { order: 4 !important; flex: 0 0 100% !important; max-width: 100% !important; margin: 12px 0 0 !important; }
#item-header-content .bm-profile-completion > div { max-width: 340px !important; }
#item-header-content .bb-user-content-wrap > .item-meta { order: 5 !important; flex: 0 0 100% !important; margin: 8px 0 0 !important; }
#item-header-content .bb-user-content-wrap > .member-social { order: 6 !important; flex: 0 0 100% !important; }

/* XP + rank side by side inside the gamipress wrapper */
#item-header-content .gamipress-buddypress-user-details-top {
  display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important;
}
#item-header-content .gamipress-buddypress-achievements { display: none !important; }
#item-header-content .gamipress-buddypress-points,
#item-header-content .gamipress-buddypress-ranks { margin: 0 !important; }

/* --- Uniform pill base: all three badges same height/shape (concept) --- */
#item-header-content .gamipress-buddypress-points-type.gamipress-buddypress-xp,
#item-header-content .gamipress-buddypress-rank,
#item-header-content .bm-helm-badge {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  height: 24px !important; padding: 0 10px !important; border-radius: 12px !important;
  font-size: 11px !important; line-height: 1 !important; box-shadow: none !important; margin: 0 !important;
}

/* XP pill — neutral, gold "XP" label + grey number */
#item-header-content .gamipress-buddypress-points-type.gamipress-buddypress-xp {
  background: #111111 !important; border: 1px solid #1e1e1e !important;
}
#item-header-content .gamipress-buddypress-points-type.gamipress-buddypress-xp::before {
  content: "XP"; color: #C9A84C !important; font-size: 11px !important; font-weight: 600 !important; margin-right: 4px !important;
}
#item-header-content .gamipress-buddypress-user-xp { color: #888888 !important; font-size: 11px !important; font-weight: 500 !important; }

/* Rank pill — gold */
#item-header-content .gamipress-buddypress-rank {
  background: rgba(201, 168, 76, 0.12) !important; border: 1px solid #C9A84C !important;
}
#item-header-content .gamipress-buddypress-rank-title { color: #C9A84C !important; font-size: 11px !important; font-weight: 600 !important; }

/* Helm pill — neutral, white text, gold icon.
   Op de profielkop houden we de helm-NAAM wél (daar staat 'ie los; een kaal icoontje
   zonder context zegt daar niets). In het forum en op het leaderboard staat er een
   rang naast en is de naam overbodig — daar tonen we alleen het icoon. */
#item-header-content .bm-helm-badge {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  background: #111111 !important; border: 1px solid #1e1e1e !important;
  color: #ffffff !important; font-size: 11px !important; font-weight: 500 !important;
}
#item-header-content .bm-helm-badge .bm-helm-icon { width: 13px !important; height: 22px !important; }

/* 4. Hide extra tabs (Videos / Photos / Documents / Email Invites) */
#object-nav #video-personal-li,
#object-nav #media-personal-li,
#object-nav #document-personal-li,
#object-nav #invites-personal-li { display: none !important; }

/* 5. Details — compact card. Outer #item-body/wrappers go transparent (no
   double box); the .group-separator-block becomes the actual card. */
#buddypress #item-body,
#buddypress #item-body .bp-widget,
#buddypress #item-body .profile-fields,
#buddypress #item-body .bp-tables-user,
#buddypress #item-body .bp-profile-content,
#buddypress #item-body .bp-profile-wrapper {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* the compact Details card */
#buddypress #item-body .group-separator-block {
  background: #111111 !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  max-width: 560px !important;
}
/* card header: "Details" title + Edit link */
#buddypress #item-body .group-separator-block .entry-header.profile-header {
  border-bottom: 1px solid #1e1e1e !important;
  padding-bottom: 10px !important;
  margin-bottom: 6px !important;
}
#buddypress #item-body .group-separator-block .bb-profile-title,
#buddypress #item-body .group-separator-block .entry-title {
  font-size: 14px !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: 0 !important;
}
/* Edit outline button -> small gold text link */
#buddypress #item-body .group-separator-block .entry-header .button {
  background: transparent !important; border: none !important; box-shadow: none !important;
  color: #C9A84C !important; font-size: 11px !important; font-weight: 600 !important;
  padding: 0 !important; min-height: 0 !important; text-transform: none !important;
}
#buddypress #item-body .group-separator-block .entry-header .button:hover { color: #b8943e !important; }
/* compact rows: label left #888, value right #fff, thin separators */
#buddypress #item-body .profile-fields tr td {
  padding: 7px 0 !important; font-size: 12px !important; border-bottom: 1px solid #1e1e1e !important;
  background: transparent !important; vertical-align: top !important;
}
#buddypress #item-body .profile-fields tr:last-child td { border-bottom: none !important; }
#buddypress #item-body .profile-fields td.label { color: #888888 !important; font-weight: 500 !important; width: 42% !important; }
#buddypress #item-body .profile-fields td.data,
#buddypress #item-body .profile-fields td.data p { color: #ffffff !important; margin: 0 !important; }

/* 5b. Profile tabs — inactive #888, hover white, active gold + underline */
#object-nav { border-bottom: 1px solid #1e1e1e !important; }
#object-nav li > a { color: #888888 !important; font-size: 13px !important; border-bottom: 2px solid transparent !important; transition: color 0.18s ease !important; }
#object-nav li > a:hover { color: #ffffff !important; }
#object-nav li.current > a,
#object-nav li.selected > a,
#object-nav li.current-menu-item > a {
  color: #C9A84C !important; font-weight: 600 !important; border-bottom: 2px solid #C9A84C !important;
}
#object-nav li.current > a span,
#object-nav li.selected > a span { color: #C9A84C !important; }

/* 6. Followers / following — prominent number, muted label, subtle separator */
#item-header-content .member-social .followers-wrap,
#item-header-content .member-social .following-wrap {
  color: #888888 !important; font-size: 13px !important;
}
#item-header-content .member-social .followers-wrap strong,
#item-header-content .member-social .following-wrap strong {
  color: #ffffff !important; font-weight: 700 !important; margin-right: 4px !important;
}
#item-header-content .member-social .followers-wrap {
  border-right: 1px solid #1e1e1e !important; padding-right: 14px !important; margin-right: 14px !important;
}


/* ============================================================
   BIGGERMEN REDESIGN - Profile stats strip + progress blocks
   (styles the PHP-rendered .bm-profile-stats / .bm-profile-progress-grid)
   ============================================================ */

/* Phase 4 — 4-stat strip under the header */
.bm-profile-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  margin: 16px auto; max-width: 1052px; font-family: Inter, 'DM Sans', sans-serif;
}
.bm-stat { background: #111111; border: 1px solid #1e1e1e; border-radius: 10px; padding: 12px; text-align: center; }
.bm-stat-num { font-size: 18px; font-weight: 600; color: #ffffff; line-height: 1.1; }
.bm-stat-gold { color: #C9A84C; }
.bm-stat-ico { font-size: 13px; }
.bm-stat-slash { color: #444444; font-size: 12px; }
.bm-stat-label { font-size: 10px; color: #888888; margin-top: 3px; }

/* Phases 6+7 — progress grid + cards */
.bm-profile-progress-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 16px 0; font-family: Inter, 'DM Sans', sans-serif;
}
.bm-card { background: #111111; border: 1px solid #1e1e1e; border-radius: 12px; padding: 14px; }
.bm-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.bm-card-title { font-size: 13px; font-weight: 600; color: #ffffff; }
.bm-card-date { font-size: 10px; color: #888888; }
.bm-trend { font-size: 10px; font-weight: 600; }
.bm-trend-down { color: #3dd68c; }
.bm-trend-up { color: #888888; }
.bm-weight-svg-card svg { display: block; }
.bm-empty { font-size: 12px; color: #888888; padding: 6px 0 2px; line-height: 1.5; }
.bm-empty-link { color: #C9A84C; white-space: nowrap; }
.bm-lastci-row { display: flex; gap: 8px; }
.bm-mini { flex: 1; background: #0a0a0a; border: 1px solid #1e1e1e; border-radius: 8px; padding: 8px; text-align: center; }
.bm-mini-num { font-size: 14px; font-weight: 600; color: #ffffff; }
.bm-mini-label { font-size: 9px; color: #888888; margin-top: 2px; }
@media (max-width: 600px) {
  .bm-profile-stats { grid-template-columns: repeat(2, 1fr); }
  .bm-profile-progress-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   BIGGERMEN REDESIGN - Check-in form (GF form 2, Orbital theme)
   ------------------------------------------------------------
   Compacte card met chip-selecties. Velden 3/4/12 = single-select
   chips (gedrag via JS), 15 = multi chips. Markup: .gform_wrapper
   --orbital > #gform_2 > .gfield > .ginput_container_(checkbox|number)
   > .gchoice > input + label.
   ============================================================ */

/* --- Card --- */
#gform_wrapper_2 {
  max-width: 520px !important;
  margin: 0 auto 24px !important;
  background: #111111 !important;
  border: 1px solid #1e1e1e !important;
  border-radius: 14px !important;
  padding: 22px !important;
}
#gform_wrapper_2 .gform_title { font-size: 17px !important; font-weight: 600 !important; color: #ffffff !important; margin: 0 0 4px !important; }
#gform_wrapper_2 .gform_description { font-size: 12px !important; color: #888888 !important; }
#gform_2 .gfield { margin-bottom: 18px !important; }

/* --- Labels + required -> gold star --- */
#gform_2 .gfield_label {
  font-size: 12px !important; font-weight: 600 !important; color: #ffffff !important;
  text-transform: none !important; letter-spacing: 0 !important; margin-bottom: 8px !important;
}
/* required = geneste .gfield_required spans -> verberg de "(Vereist)" tekst en
   toon één gouden * op de buitenste wrapper. */
#gform_2 .gfield_required_text { display: none !important; }
#gform_2 .gfield_label > .gfield_required { font-size: 0 !important; margin-left: 3px !important; }
#gform_2 .gfield_label > .gfield_required::after { content: "*" !important; color: #C9A84C !important; font-size: 13px !important; }
#gform_2 .gfield_description, #gform_2 .instruction { font-size: 10px !important; color: #444444 !important; }

/* --- Text / number / textarea inputs --- */
#gform_2 .ginput_container input[type="number"],
#gform_2 .ginput_container input[type="text"],
#gform_2 .ginput_container textarea {
  background: #0a0a0a !important; border: 1px solid #1e1e1e !important; border-radius: 9px !important;
  padding: 10px 14px !important; color: #ffffff !important; box-shadow: none !important; width: 100% !important; font-size: 13px !important;
}
#gform_2 .ginput_container input:focus, #gform_2 .ginput_container textarea:focus {
  border-color: #C9A84C !important; box-shadow: none !important; outline: none !important;
}
#gform_2 .ginput_container textarea { min-height: 56px !important; }

/* --- Chips (choice fields) --- */
/* GF Orbital: .gfield_checkbox (directe ouder van .gchoice) is flex-COLUMN ->
   forceer row + wrap zodat de chips naast elkaar staan. */
#gform_2 .gfield--type-choice .ginput_container { padding: 0 !important; margin: 0 !important; }
#gform_2 .gfield--type-choice .gfield_checkbox,
#gform_2 .gfield--type-choice .gfield_radio {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 !important; padding: 0 !important;
}
#gform_2 #field_2_4 .gfield_checkbox { display: grid !important; grid-template-columns: repeat(8, 1fr) !important; gap: 5px !important; }
#gform_2 .gfield--type-choice .gchoice { flex: 1 1 auto !important; display: block !important; margin: 0 !important; min-width: 0 !important; padding: 0 !important; }
#gform_2 .gfield--type-choice .gchoice label { width: 100% !important; }
/* native input verborgen maar toegankelijk */
#gform_2 .gfield--type-choice .gchoice input {
  position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; pointer-events: none !important;
}
/* GF Orbital tekent de checkbox-visual via label::before -> verbergen */
#gform_2 .gfield--type-choice .gchoice label::before,
#gform_2 .gfield--type-choice .gchoice label::after { content: none !important; display: none !important; }
/* label = chip */
#gform_2 .gfield--type-choice .gchoice label {
  display: block !important; text-align: center !important; cursor: pointer !important; margin: 0 !important;
  background: #0a0a0a !important; border: 1px solid #1e1e1e !important; color: #888888 !important;
  border-radius: 9px !important; padding: 9px 6px !important; font-size: 11px !important; line-height: 1.2 !important;
  transition: all 0.15s ease !important; max-width: 100% !important;
}
#gform_2 .gfield--type-choice .gchoice label:hover { border-color: #C9A84C !important; color: #ffffff !important; }
/* checked — energie/kracht/spiergroepen (gouden tint) */
#gform_2 .gfield--type-choice .gchoice input:checked + label {
  background: rgba(201, 168, 76, 0.12) !important; border-color: #C9A84C !important; color: #C9A84C !important; font-weight: 600 !important;
}
/* checked — trainingsdagen (vol goud) */
#gform_2 #field_2_4 .gchoice input:checked + label {
  background: #C9A84C !important; border-color: #C9A84C !important; color: #0a0a0a !important; font-weight: 700 !important;
}
/* focus-visible */
#gform_2 .gfield--type-choice .gchoice input:focus-visible + label { outline: 2px solid #C9A84C !important; outline-offset: 2px !important; }
/* dagen vierkant */
#gform_2 #field_2_4 .gchoice label { aspect-ratio: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; font-size: 12px !important; }

/* --- Gewicht: kg-suffix + delta-regel --- */
.bm-weight-wrap .ginput_container_number { position: relative !important; }
.bm-weight-wrap .ginput_container_number input { padding-right: 38px !important; }
.bm-weight-wrap .ginput_container_number::after {
  content: "kg"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: #444444; font-size: 11px; pointer-events: none;
}
.bm-weight-delta { font-size: 11px; margin-top: 6px; min-height: 14px; color: #888888; }

/* --- Submit --- */
#gform_2 .gform_footer { padding: 0 !important; margin: 8px 0 0 !important; }
#gform_2 .gform_footer input[type="submit"], #gform_2 .gform_footer button {
  width: 100% !important; background: #C9A84C !important; color: #0a0a0a !important; border: none !important;
  border-radius: 10px !important; padding: 12px !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: 0.3px !important; cursor: pointer !important; transition: background 0.15s ease !important;
}
#gform_2 .gform_footer input[type="submit"]:hover, #gform_2 .gform_footer button:hover { background: #b8943e !important; }

/* validatie-meldingen leesbaar op donker */
#gform_2 .gfield_validation_message, #gform_2 .validation_message {
  background: transparent !important; border: none !important; color: #e06a6a !important; font-size: 11px !important; padding: 4px 0 0 !important;
}

/* ============================================================
   BIGGERMEN REDESIGN - Daily tasks card (match check-in card)
   (override de inline-stijlen uit bm_daily_tasks_render via !important)
   ============================================================ */
.bm-daily-card {
  background: #111111 !important; border: 1px solid #1e1e1e !important; border-radius: 14px !important;
  max-width: 520px !important; margin: 0 auto 24px !important; padding: 22px !important;
}
.bm-daily-card > div:first-child { color: #C9A84C !important; }            /* "Daily Tasks" kop */
.bm-daily-card input.bm-daily-check:checked { background: #C9A84C !important; border-color: #C9A84C !important; }
.bm-daily-card input.bm-daily-check:checked::after { border-color: #0a0a0a !important; }
.bm-daily-card .bm-daily-streak { color: #C9A84C !important; }
.bm-daily-card .bm-daily-msg { color: #C9A84C !important; }
.bm-daily-card .bm-daily-item { border-bottom-color: #1e1e1e !important; }


/* ============================================================
   BIGGERMEN REDESIGN - Check-in form (Fase 1 bugfixes)
   ------------------------------------------------------------
   1. Label-overlap: GF rendert choice-labels als <legend> in een
      <fieldset>; een legend reserveert geen blok-ruimte, waardoor de
      chips ~7px over het label vallen. Root-fix: legend floaten + de
      choice-container clearen (geen symptoom-marges).
   2. Inputs/selects: clipping (line-height), browser-spinners en
      browser-chevrons weg, min-height 44, card max-width 560.
   ============================================================ */

/* 1. Legend overlapt de chips omdat <legend> geen normale blok-ruimte
   reserveert. Root-fix: maak de <fieldset> zelf flex-column -> de legend
   wordt een gewoon flex-item en de choice-container stroomt eronder. */
#gform_2 fieldset.gfield { display: flex !important; flex-direction: column !important; }
#gform_2 fieldset.gfield > legend.gfield_label {
  float: none !important; width: 100% !important; display: block !important; order: -1 !important;
  position: static !important; margin: 0 0 8px !important; line-height: 1.3 !important;
}
/* Chrome rendert de CHECKBOX-velden hun <legend> als speciale caption (over de
   chips heen), terwijl het de RADIO-legend wél in-flow zet. Geen enkele
   fieldset-display (block/flex/grid/flow-root) verhelpt dit. Compensatie:
   de checkbox-choice-containers 15px laten zakken zodat ALLE keuzevelden
   dezelfde nette tussenruimte krijgen (uniform, niet per veld). */
#gform_2 fieldset.gfield--type-choice > .ginput_container_checkbox { margin-top: 15px !important; }

/* card iets breder */
#gform_wrapper_2 { max-width: 560px !important; }

/* 2. Tekst/nummer/textarea: nooit clippen */
#gform_2 .ginput_container input[type="text"],
#gform_2 .ginput_container input[type="number"],
#gform_2 .ginput_container textarea {
  min-height: 44px !important; line-height: 1.4 !important; box-sizing: border-box !important;
}
#gform_2 .ginput_container textarea { min-height: 76px !important; resize: none !important; }

/* nummervelden: spinners weg + smaller */
#gform_2 .ginput_container input[type="number"] {
  -moz-appearance: textfield !important; appearance: textfield !important; max-width: 200px !important;
}
#gform_2 .ginput_container input[type="number"]::-webkit-outer-spin-button,
#gform_2 .ginput_container input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important; appearance: none !important; display: none !important; margin: 0 !important;
}

/* selects: eigen chevron, zelfde stijl als tekstvelden */
#gform_2 .ginput_container select, #gform_2 select {
  appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
  background-color: #0a0a0a !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important;
  border: 1px solid #1e1e1e !important; border-radius: 9px !important; color: #ffffff !important;
  padding: 10px 34px 10px 14px !important; min-height: 44px !important; max-width: 220px !important;
  font-size: 13px !important; box-sizing: border-box !important; line-height: 1.4 !important;
}
#gform_2 .ginput_container select:focus, #gform_2 select:focus { border-color: #C9A84C !important; outline: none !important; box-shadow: none !important; }


/* ============================================================
   BIGGERMEN REDESIGN - Check-in form (Fase 3 details)
   ============================================================ */
/* vraagnummering "1 / 8" rechts naast elk label */
#gform_2 { counter-reset: bmq; }
#gform_2 .gfield:not(.gfield--type-html) { counter-increment: bmq; }
#gform_2 .gfield:not(.gfield--type-html) > .gfield_label::after,
#gform_2 fieldset.gfield > legend.gfield_label::after {
  content: counter(bmq) " / 8" !important; float: none !important; display: inline !important; margin-left: 8px !important;
  color: #444444 !important; font-size: 10px !important; font-weight: 400 !important; white-space: nowrap !important;
}
/* submit-subtekst */
#gform_2 .gform_footer::after {
  content: "Wordt gedeeld in de feed \00B7 streak +1"; display: block; text-align: center;
  font-size: 10px; color: #444444; margin-top: 10px;
}
/* voeding/slaap zijn nu radio: zorg dat ze ook als chip renderen mocht GF
   geen .gfield--type-choice zetten op de geconverteerde velden */
#gform_2 #field_2_7 .gfield_radio, #gform_2 #field_2_6 .gfield_radio {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 6px !important;
}
#gform_2 #field_2_7 .gchoice, #gform_2 #field_2_6 .gchoice { flex: 1 1 auto !important; display: block !important; }
#gform_2 #field_2_7 .gchoice input, #gform_2 #field_2_6 .gchoice input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; }
#gform_2 #field_2_7 .gchoice label::before, #gform_2 #field_2_6 .gchoice label::before { content: none !important; display: none !important; }
#gform_2 #field_2_7 .gchoice label, #gform_2 #field_2_6 .gchoice label {
  display: block !important; width: 100% !important; text-align: center !important; cursor: pointer !important;
  background: #0a0a0a !important; border: 1px solid #1e1e1e !important; color: #888888 !important;
  border-radius: 9px !important; padding: 9px 6px !important; font-size: 11px !important; margin: 0 !important;
}
#gform_2 #field_2_7 .gchoice input:checked + label, #gform_2 #field_2_6 .gchoice input:checked + label {
  background: rgba(201, 168, 76, 0.12) !important; border-color: #C9A84C !important; color: #C9A84C !important; font-weight: 600 !important;
}

/* ============================================================
   BIGGERMEN REDESIGN - BuddyPanel: Uitloggen visueel gescheiden
   ============================================================ */
.buddypanel .buddypanel-menu li.bp-logout-nav {
  margin-top: 16px !important;
  border-top: 1px solid #1e1e1e !important;
  padding-top: 6px !important;
}
/* Check-in item: icoon-uitlijning gelijk aan de rest */
.buddypanel .buddypanel-menu li.bm-checkin-nav > a > i { margin-right: 0 !important; font-size: 17px !important; color: inherit !important; }


/* ============================================================
   BIGGERMEN REDESIGN - Forums round (header / modal / forums / topic)
   ============================================================ */

/* ---- Fase 1: header rechtsboven leesbaar ---- */
.header-aside .header-search-link i,
.header-aside .notification-wrap .notification-link i,
.header-aside .user-name,
#header-aside .header-search-link i,
#header-aside .notification-wrap .notification-link i { color: #888888 !important; }
.header-aside .header-search-link:hover i,
.header-aside .notification-wrap .notification-link:hover i,
.header-aside .user-link:hover .user-name { color: #ffffff !important; }
/* notificatie-badge -> goud */
.header-aside .notification-wrap .count,
#header-aside .notification-wrap .count {
  background: #C9A84C !important; color: #0a0a0a !important; border-color: #C9A84C !important;
}
/* dropdowns (notificaties + account) dark */
.header-aside .notification-dropdown,
.notification-dropdown,
.header-aside .sub-menu,
.bb-my-account-dropdown .sub-menu {
  background: #111111 !important; border: 1px solid #1e1e1e !important;
}
.notification-dropdown .notification-header .title { color: #ffffff !important; }
.notification-dropdown li a, .header-aside .sub-menu a, .bb-my-account-dropdown .sub-menu a { color: #888888 !important; }
.notification-dropdown li a:hover, .header-aside .sub-menu a:hover, .bb-my-account-dropdown .sub-menu a:hover { color: #ffffff !important; background: #1a1a1a !important; }
.notification-dropdown li.unread a { color: #ffffff !important; }

/* ---- Fase 2 + 4: bbPress modals (New Discussion / reply) dark ---- */
#bbpress-forums .modal-mask, .bb-modal .modal-mask, .modal-mask.bb-white { background: rgba(0,0,0,0.7) !important; }
.bb-modal .modal-container,
.bb-action-popup .modal-container,
.bbp-reply-form.bb-modal, .bbp-topic-form.bb-modal,
#new-post.bbp-form, .bb-modal-box {
  background: #111111 !important; border: 1px solid #1e1e1e !important; border-radius: 14px !important; color: #888888 !important;
}
.bb-model-header, .bb-modal .bb-model-header, .bbp-form legend {
  background: none !important; border-color: #1e1e1e !important; color: #ffffff !important;
}
.bb-model-header h4, .bb-model-header .target_name { color: #ffffff !important; }
/* Fase 3: de titel/naam in "Reply to [titel]" goud i.p.v. wit/lavendel */
#bbp-reply-to-user, .bb-model-header .target_name a, .bbp-reply-to-link-title { color: #C9A84C !important; }
/* form-velden */
#bbpress-forums input[type="text"], #bbpress-forums input[type="search"],
#bbpress-forums textarea, #bbpress-forums select,
.bbp-form input[type="text"], .bbp-form textarea, .bbp-form select,
.bb-modal input[type="text"], .bb-modal textarea, .bb-modal select,
#bbp_topic_title, #bbp_topic_tags {
  background: #0a0a0a !important; border: 1px solid #1e1e1e !important; color: #ffffff !important;
  border-radius: 9px !important; box-shadow: none !important;
}
#bbpress-forums ::placeholder, .bbp-form ::placeholder, .bb-modal ::placeholder { color: #444444 !important; }
#bbpress-forums input:focus, #bbpress-forums textarea:focus, #bbpress-forums select:focus,
.bbp-form input:focus, .bbp-form textarea:focus, .bb-modal input:focus, .bb-modal textarea:focus { border-color: #C9A84C !important; outline: none !important; box-shadow: none !important; }
.bbp-form label, #bbpress-forums label, .bb-modal label { color: #888888 !important; }
/* editor + toolbar */
.bbp-form .wp-editor-container, .bb-modal .wp-editor-container, .bbp-the-content { background: #0a0a0a !important; border-color: #1e1e1e !important; }
.bbp-form .mce-toolbar i, .bb-modal .bb-editor-toolbar i, .bbp-form .ed_button, .bb-modal .post-elements-buttons-item i { color: #888888 !important; }
.bbp-form .mce-toolbar i:hover, .bb-modal .bb-editor-toolbar i:hover, .bb-modal .post-elements-buttons-item:hover i { color: #C9A84C !important; }
/* submit-knop */
#bbp_topic_submit, #bbp_reply_submit, .bbp-submit-wrapper button, .bbp-form button[type="submit"], .bb-modal button[type="submit"] {
  background: #C9A84C !important; color: #0a0a0a !important; border: none !important; border-radius: 10px !important; font-weight: 700 !important; cursor: pointer !important;
}
/* hover = iets lichter goud (GEEN bruine tint) */
#bbp_topic_submit:hover, #bbp_reply_submit:hover, .bbp-submit-wrapper button:hover { background: #d8ba66 !important; }
#bbp_topic_submit:disabled, #bbp_reply_submit:disabled, .bbp-submit-wrapper button:disabled, .bbp-form button[type="submit"][disabled] { opacity: 0.5 !important; cursor: default !important; }
/* Fase 3: lege reactie = 50% opacity (BuddyBoss gebruikt 0.4 → te bruin);
   vol goud zodra er content is (ancestor krijgt .has-content). */
#bbp_reply_submit { opacity: 0.5 !important; }
.has-content #bbp_reply_submit { opacity: 1 !important; }

/* --- "Plaatsen"-knop (reactie/discussie/edit) overal compact ---
   De knop erfde line-height:34px + padding van BuddyBoss = ~56px hoog (log) en
   plakte tegen de onderrand. Nu compacter, OVERAL (modal én inline edit-formulier).
   De submit-knoppen dragen een ID (#bbp_reply_submit / #bbp_topic_submit) -> die
   specificiteit (1,0,0) verslaat elke class-regel, dus geen scope-gedoe nodig. */
#bbp_reply_submit,
#bbp_topic_submit,
.bbp-submit-wrapper button.submit {
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.1 !important;
	padding: 9px 20px !important;
	font-size: 13px !important;
}
/* De ademruimte onder de knop wordt geregeld door de bestaande regels verderop:
   #bbpress-forums .bbp-form .bb-form-select-fields (padding-bottom:0) +
   #bbpress-forums fieldset.bbp-form (padding-bottom:16px). Zie daar. */
/* sluitkruis */
.bb-model-close-button, .js-modal-close, #bbp-close-btn, .bb-close-action-popup { color: #888888 !important; }
.bb-model-close-button:hover, .js-modal-close:hover, #bbp-close-btn:hover { color: #ffffff !important; }

/* ---- Fase 3: forums-overzicht ---- */
#bbpress-forums .bs-item-wrap:not(.bs-header-item):hover,
.bb-forums-list .bs-item-wrap:hover { border-color: #C9A84C !important; }
#bbpress-forums .bbp-forum-content, #bbpress-forums .item-meta, .bb-forum-description { color: #888888 !important; }
/* lichte borders in forum-card description weg */
#bbpress-forums .bs-item-wrap .bbp-forum-content,
#bbpress-forums .bs-item-wrap .bs-forum-description { border-color: #1e1e1e !important; background: transparent !important; }
#bbpress-forums .forum-titles a, #bbpress-forums .bbp-forum-title { color: #ffffff !important; font-weight: 600 !important; }
#bbpress-forums .bbp-forum-freshness, #bbpress-forums .forum-count, #bbpress-forums .bbp-forum-reply-count { color: #444444 !important; }

/* ---- Fase 4: topic + replies ---- */
#bbpress-forums .bs-reply-list-item, #bbpress-forums .bs-single-forum-list .bs-item-wrap {
  background: #111111 !important; border: 1px solid #1e1e1e !important; border-radius: 12px !important; margin-bottom: 12px !important;
}
#bbpress-forums .bs-reply-list-item.bs-header-item, #bbpress-forums .bs-item-wrap.bs-header-item { background: transparent !important; border: none !important; }
#bbpress-forums .bbp-reply-content, #bbpress-forums .bbp-reply-content p, #bbpress-forums .bbp-topic-content { color: #ffffff !important; }
#bbpress-forums .bbp-author-name, #bbpress-forums .bs-reply-header a { color: #ffffff !important; font-weight: 600 !important; }
#bbpress-forums .bbp-reply-post-date, #bbpress-forums .bbp-meta, #bbpress-forums .bs-reply-header .item-meta { color: #888888 !important; }
/* rang-pill in forums net als feed */
#bbpress-forums .gamipress-buddypress-rank, #bbpress-forums .bbp-author-role {
  background: rgba(201,168,76,0.12) !important; border: 1px solid #C9A84C !important; color: #C9A84C !important; border-radius: 12px !important; padding: 2px 9px !important; font-size: 11px !important;
}
/* subscribe / favorite / quote knoppen */
#bbpress-forums .bbp-topic-subscribe-link a, #bbpress-forums .bbp-topic-favorite-link a,
#bbpress-forums .bbp-reply-quote a, #bbpress-forums .bs-reply-actions a {
  color: #888888 !important; background: transparent !important; border-color: #1e1e1e !important;
}
#bbpress-forums .bbp-topic-subscribe-link a:hover, #bbpress-forums .bbp-topic-favorite-link a:hover,
#bbpress-forums .bbp-reply-quote a:hover, #bbpress-forums .bs-reply-actions a:hover { color: #C9A84C !important; border-color: #C9A84C !important; }

/* ---- Bro Chat: normaal menu-item, direct onder Forums ----
   (geen inspringing meer; icoon + tekst exact op dezelfde x-lijn als de
   andere items. De chat-glyph komt uit de bb-icon-file override hieronder.) */

/* ---- Fase 2/4 fixes: resterende witte vlakken in modal + topic-acties ---- */
/* modal footer-rij (tags + "notify" + Post) was lichtgrijs rgb(242,244,245) */
.bb-form-select-fields, .bb-modal .bb-form-select-fields, .bbp-reply-form .bb-form-select-fields,
#bbpress-forums .bb-form-select-fields {
  background: #0d0d0d !important; border-color: #1e1e1e !important;
}
.bb-form-select-fields label, .bb-modal .bb-form-select-fields label {
  color: #888888 !important; text-transform: none !important;
}
.bb-form-select-fields input[type="text"], .bb-form-select-fields .bb-tags-input,
.bb-form-select-fields input { background: #0a0a0a !important; border-color: #1e1e1e !important; color: #ffffff !important; }
.bb-form-select-fields input::placeholder { color: #444444 !important; }
/* notify-checkbox + de "Post" knop zichtbaar op donker */
.bb-form-select-fields .notify-toggle, .bb-form-select-fields #bbp_topic_notify, .bb-form-select-fields #bbp_reply_notify { accent-color: #C9A84C !important; }

/* topic-actieknoppen: hoofd-Reply (geel #FFBC00) -> goud */
#bbpress-forums .bbp-topic-reply-link, .bb-topic-reply-link-wrap .bbp-topic-reply-link {
  background: #C9A84C !important; border-color: #C9A84C !important; color: #0a0a0a !important;
}
#bbpress-forums .bbp-topic-reply-link:hover { background: #d8ba66 !important; }
/* Subscribe / Favorite (waren wit) -> donker, #888, hover goud */
#bbpress-forums .subscription-toggle, #bbpress-forums .favorite-toggle,
.bs-single-topic .subscription-toggle, .bs-single-topic .favorite-toggle,
a.subscription-toggle, a.favorite-toggle {
  background: #111111 !important; border: 1px solid #1e1e1e !important; color: #888888 !important;
}
#bbpress-forums .subscription-toggle:hover, #bbpress-forums .favorite-toggle:hover,
a.subscription-toggle:hover, a.favorite-toggle:hover,
a.subscription-toggle.is-subscribed, a.favorite-toggle.is-favorite {
  border-color: #C9A84C !important; color: #C9A84C !important;
}

/* ---- Fase 4 fix: witte reply-wrapper <li> + gamipress-blokken + forum-label ---- */
/* reply <li> heeft witte bg/rand; de binnen-kaart .bs-reply-list-item is al #111 */
#bbpress-forums ul.bs-item-list > li[class*="depth-"],
#bbpress-forums li.depth-1, #bbpress-forums li.depth-2, #bbpress-forums li.depth-3,
#bbpress-forums li.depth-4, #bbpress-forums li.depth-5, #bbpress-forums li.depth-6 {
  background: transparent !important; border: none !important; box-shadow: none !important;
}
/* gamipress punten/rang in reply (waren wit) -> donker, leesbaar */
#bbpress-forums [class*="gamipress-bbpress"] {
  background: transparent !important; border-color: #1e1e1e !important; color: #888888 !important;
}
#bbpress-forums .gamipress-bbpress-rank, #bbpress-forums .gamipress-bbpress-form-rank {
  color: #C9A84C !important;
}
/* reply-actie-iconen op transparant (erfden witte bg van li) */
#bbpress-forums .bs-reply-list-item .bb-icon-reply,
#bbpress-forums .bs-reply-list-item .bb-icon-ellipsis-v,
#bbpress-forums .bbp-reply-action i, #bbpress-forums .reply-actions i { background: transparent !important; }
/* forum-label chip in topic-meta (was lavendel rgb215,223,255) -> goud-pill */
#bbpress-forums .bs-meta-item.forum-label, #bbpress-forums .forum-label.color {
  background: rgba(201,168,76,0.12) !important; color: #C9A84C !important;
  border: 1px solid rgba(201,168,76,0.40) !important;
}

/* ---- Fase 3 fix: forum-omschrijving zonder kader (was 1px box) ---- */
#bbpress-forums .bs-item-wrap .bbp-forum-content,
#bbpress-forums .bs-item-wrap .bs-forum-description,
#bbpress-forums .bs-item-wrap .item-meta .bbp-forum-content {
  border: none !important; background: transparent !important;
  padding-left: 0 !important; padding-right: 0 !important;
  color: #888888 !important; font-size: 12px !important;
}

/* ---- Fase 3 fix 2: inner content-wrappers mogen geen eigen kader/bg/radius ---- */
/* de kaart zelf = .bb-cover-list-item; binnenin geen geneste box rond de omschrijving */
#bbpress-forums .bb-forum-content,
#bbpress-forums .bb-forum-content-wrap,
#bbpress-forums .bs-card-forum-details .bb-forum-content {
  border: none !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important;
}

/* ============================================================
   FORUMS-POLISH ronde
   ============================================================ */
/* ---- Fase 1: sidebar — één icoon per item ----
   Eigen items (Check-in, Bro Chat) krijgen van de BuddyPanel-walker
   exact één native icoon-kolom <i.bb-icon-file> (48px, gecentreerd,
   perfect uitgelijnd met de andere items). We laten die kolom staan
   en vervangen alleen de glyph via de icon-font codepoints:
     bb-icon-file-checklist  = \ee74   (Check-in)
     bb-icon-comments-square = \ee37   (Bro Chat) */
.buddypanel .buddypanel-menu li.bm-checkin-nav .bb-menu-item > i.bb-icon-file::before {
  content: '\ee74' !important;
}
/* .bm-brochat-nav verwijderd: Bro Chat is uit de zijbalk gehaald (dode stijl). */
/* defensief: mocht er nog een ingesloten icoon in de titel staan, verberg het */
.buddypanel .buddypanel-menu li.bm-checkin-nav .link-text > i._mi {
  display: none !important;
}

/* Mobiel menu (.bb-mobile-panel-wrapper): zelfde icoon-glyphs als de desktop-
   zijbalk. Het mobiele menu wordt door JS opgebouwd met dezelfde item-classes
   (.bm-checkin-nav / .bm-brochat-nav) + native i.bb-icon-file-kolom. */
.bb-mobile-panel-wrapper li.bm-checkin-nav i.bb-icon-file::before { content: '\ee74' !important; }
/* .bm-brochat-nav verwijderd: Bro Chat is uit het mobiele menu gehaald (dode stijl). */
.bb-mobile-panel-wrapper li.bm-checkin-nav .link-text > i._mi { display: none !important; }

/* ============================================================
   FORUMS-OVERZICHT POLISH
   ============================================================ */
/* ---- Fix 1: fallback-cover (forums zonder foto) past bij dark theme ----
   BuddyBoss gebruikt een padding-top aspect-truc (content-hoogte 0). We
   zetten die uit en geven de cover een vaste hoogte, zodat de foto (een
   absoluut gepositioneerde <img>) de cover vult; geen foto -> gradient + icoon. */
#bbpress-forums .bb-cover-list-item .bb-cover-wrap {
  position: relative !important;
  height: 160px !important; padding-top: 0 !important; min-height: 0 !important;
  display: block !important; flex: 0 0 auto !important;
  /* VOLLEDIG opaak. De oude blauwgrijze background-color (rgb 100,115,133)
     scheen door de translucente goud-stop (0.18) als een blauwe band onderaan.
     Eind-kleur is nu de voorberekende opaque versie -> geen doorbloeding. */
  background-color: #111111 !important;
  background-image: linear-gradient(135deg, #111111 0%, #1a1610 55%, #33291a 100%) !important;
  overflow: hidden !important;
}
/* gedempt forum-icoon, gecentreerd; valt achter de foto als die er wél is.
   LET OP: BuddyBoss legt op deze ::after een blauwe overlay-gradient
   (transparent -> rgb(7,18,29)); die zetten we uit (background:none),
   anders zie je onderaan de cover een blauwe band. */
#bbpress-forums .bb-cover-list-item .bb-cover-wrap::after {
  content: '\ee37'; /* bb-icon comments-square */
  font-family: 'bb-icons'; font-weight: 400; /* lined-variant, zoals bb-icon-l */
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: #444444; pointer-events: none;
  background: none !important;
}
#bbpress-forums .bb-cover-list-item .bb-cover-wrap img {
  position: absolute !important; top: 0 !important; left: 0 !important; z-index: 1 !important;
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}

/* ---- Fix 2: kaart-layout gelijktrekken (gelijke hoogte, meta onderaan) ---- */
#bbpress-forums ul.bb-forums-list > li[class*="grid"] { display: flex !important; }
#bbpress-forums .bb-cover-list-item {
  display: flex !important; flex-direction: column !important;
  height: 100% !important; width: 100% !important;
}
#bbpress-forums .bb-cover-list-item .bs-card-forum-details {
  display: flex !important; flex-direction: column !important; flex: 1 1 auto !important;
  padding: 14px 16px 16px !important;
}
/* beschrijving max 2 regels, vaste ruimte zodat meta uitlijnt */
#bbpress-forums .bb-cover-list-item .bb-forum-content {
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
  margin: 0 !important;
}
/* meta ("x ago" / "No Discussions") altijd onderaan, op één lijn per rij */
#bbpress-forums .bb-cover-list-item .bs-timestamp,
#bbpress-forums .bb-cover-list-item .forums-meta { margin-top: auto !important; }
#bbpress-forums .bb-cover-list-item .forums-meta + .bs-timestamp { margin-top: 6px !important; }

/* ---- Fix 2: All Discussions lijst (onder het forums-grid) ----
   ul.bbp-topics... .bs-forums-items.list-view — los van het kaart-grid. */
/* topic-titels: lavendel (rgb 30,33,50) -> wit, hover goud */
.bs-forums-items.list-view a.bbp-topic-permalink,
.bs-forums-items .item-title a.bbp-topic-permalink {
  color: #ffffff !important; font-weight: 600 !important;
}
.bs-forums-items.list-view a.bbp-topic-permalink:hover,
.bs-forums-items .item-title a.bbp-topic-permalink:hover { color: #C9A84C !important; }
/* forum-tag rechts: gouden pill (overschrijft de inline per-forum kleur) */
.bs-forums-items .bs-forums-meta .forum-label,
.bs-forums-items .action .forum-label,
.bs-forums-items span.forum-label.color {
  background: rgba(201,168,76,0.12) !important;
  border: 1px solid rgba(201,168,76,0.40) !important;
  border-radius: 12px !important; padding: 2px 10px !important;
}
.bs-forums-items .forum-label a { color: #C9A84C !important; }
/* rij-meta in #888888 */
.bs-forums-items.list-view .item-meta,
.bs-forums-items.list-view .item-meta a,
.bs-forums-items.list-view .bs-replied,
.bs-forums-items.list-view .bs-voices,
.bs-forums-items.list-view .bbp-author-name { color: #888888 !important; }
.bs-forums-items.list-view .item-meta i { color: #444444 !important; }
/* rows are cards now: real gap, no inner divider */
.bs-forums-items.list-view > li .bs-item-wrap {
  margin-bottom: 16px !important;
}

/* ============================================================
   HOMEPAGE UI/UX OPTIMIZATIONS (Antigravity Upgrade)
   ============================================================ */

/* Global Typography & Elements */
body.home h1, body.home h2, body.home h3, body.home h4 {
    letter-spacing: -0.5px !important;
    font-weight: 700 !important;
}

body.home p.uagb-desc-text, body.home p.uagb-ifb-desc {
    line-height: 1.6 !important;
    color: #a0a0a0 !important;
}

.wp-block-uagb-image__figure img {
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
}

/* Fix homepage container background and padding */
body.home #main,
body.home #primary,
body.home article.page,
body.home .site-content,
body.home .bb-grid,
body.home .hentry {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Extra spacing below navigation */
body.home .site-content {
    padding-top: 60px !important;
}

body.home header.entry-header {
    display: none !important;
}

/* 1. Hero Section */
.uagb-block-4de6aee5 .uagb-heading-text {
    letter-spacing: -1px !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}

/* Make all buttons match: Yellow, Pill shape, Smaller text */
.uagb-block-b9ecca73 .wp-block-button__link,
.uagb-block-390b79a7 .wp-block-button__link {
    background-color: #FFBC00 !important;
    color: #000000 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 50px !important; /* Pill shape */
    box-shadow: none !important;
    padding: 12px 24px !important; /* Smaller button */
    font-size: 14px !important; /* Smaller text */
    transition: all 0.2s ease-in-out !important;
    white-space: nowrap !important; /* Prevent 2 lines */
    text-align: center !important;
    display: inline-block !important;
    border: none !important;
}

.uagb-block-b9ecca73 .wp-block-button__link:hover,
.uagb-block-390b79a7 .wp-block-button__link:hover {
    background-color: #ffc933 !important;
    transform: scale(1.02) !important;
}

/* 2. Info Boxes & Content Cards */
.wp-block-uagb-info-box.uagb-infobox__content-wrap {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* 3. Step-by-Step Numbers (01, 02, 03) */
/* Fix flexbox layout for the numbers and text */
.uagb-block-67ff30b9, .uagb-block-d5de9807, .uagb-block-e327bbd3 {
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
    flex-wrap: nowrap !important;
}

/* Styling the numbers */
.uagb-block-6241311c .uagb-heading-text,
.uagb-block-ed6841c7 .uagb-heading-text,
.uagb-block-3afef8a1 .uagb-heading-text {
    font-size: 48px !important;
    font-weight: 800 !important;
    color: #FFBC00 !important;
    -webkit-text-stroke: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* Align image rows with text vertically */
.uagb-block-db0b5e62, .uagb-block-9d58695e, .uagb-block-bb505ec2 {
    align-items: center !important;
}

/* Dividers: dark gray and visible */
.wp-block-uagb-separator {
    display: block !important;
    opacity: 1 !important;
    border-top-color: #333333 !important;
}

/* 4. Coming Soon Image Overlays */
.wp-block-uagb-image--layout-overlay .wp-block-uagb-image__figure {
    overflow: hidden !important;
    border-radius: 8px !important;
}

/* Darken images with heavy overlay */
.wp-block-uagb-image--layout-overlay__color-wrapper {
    background: rgba(0,0,0,0.65) !important;
    opacity: 1 !important;
}

/* Perfectly center the text */
.wp-block-uagb-image--layout-overlay__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

h2.uagb-image-heading {
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: #ffffff !important;
    margin: 0 !important;
    text-align: center !important;
}

/* ============================================================
   NAVIGATION & SIDEBAR FIXES
   ============================================================ */

/* NUCLEAR OPTION FOR THE SIDEBAR BORDERS AND DIVIDER LINES */

/* 1. Remove the floating divider between sidebar and main content */
body, #page, #content, #main, #primary, .site-content, .bb-grid {
    border-left: none !important;
    border-right: none !important;
    border-left-color: transparent !important;
    box-shadow: none !important;
}

#page::before, #page::after,
#content::before, #content::after,
.site-content::before, .site-content::after,
.bb-grid::before, .bb-grid::after,
body::before, body::after,
.buddypanel-open .site-content::before,
.buddypanel-open .site-content::after {
    display: none !important;
    width: 0 !important;
    background: transparent !important;
}

/* 2. Remove the timeline line inside the BuddyPanel */
.buddypanel,
.buddypanel-inner,
.side-panel-inner,
.side-panel-menu-container,
.buddypanel-menu,
.side-panel-menu,
.buddypanel-menu > li,
.side-panel-menu > li {
    border-left: none !important;
    border-right: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    background-image: none !important;
}

.buddypanel::before, .buddypanel::after,
.buddypanel-inner::before, .buddypanel-inner::after,
.side-panel-inner::before, .side-panel-inner::after,
.side-panel-menu-container::before, .side-panel-menu-container::after,
.buddypanel-menu::before, .buddypanel-menu::after,
.side-panel-menu::before, .side-panel-menu::after,
.buddypanel-menu > li::before, .buddypanel-menu > li::after,
.side-panel-menu > li::before, .side-panel-menu > li::after,
.side-panel-menu > li > ul::before {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* 3. Center icons perfectly when collapsed */
body.buddypanel-closed .buddypanel-menu > li > a,
body:not(.buddypanel-open) .buddypanel-menu > li > a,
.buddypanel:not(.buddypanel--toggle-on) .buddypanel-menu > li > a {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
    text-align: center !important;
}
body.buddypanel-closed .buddypanel-menu > li > a i,
body:not(.buddypanel-open) .buddypanel-menu > li > a i,
.buddypanel:not(.buddypanel--toggle-on) .buddypanel-menu > li > a i {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
}

/* Expanded state: normal padding */
.buddypanel.buddypanel--toggle-on .buddypanel-menu > li > a,
body.buddypanel-open .buddypanel-menu > li > a {
    padding-left: 25px !important;
    padding-right: 25px !important;
}

/* 4. Toggle Button Fixes: grey default, yellow hover, no white bg */
.bb-toggle-panel {
    background-color: transparent !important;
}
.bb-toggle-panel i {
    color: #a0a0a0 !important;
    transition: color 0.2s ease !important;
}
.bb-toggle-panel:hover {
    background-color: transparent !important;
}
.bb-toggle-panel:hover i {
    color: #FFBC00 !important;
}

/* 5. Top Navigation Hover - ULTIMATE FORCE */
/* Target absolutely any anchor tag inside the header that doesn't have a button class */
body .site-header a:not(.wp-block-button__link),
body .site-header a:not(.wp-block-button__link) *,
body header.site-header a:not(.wp-block-button__link),
body header.site-header a:not(.wp-block-button__link) *,
#masthead a:not(.wp-block-button__link),
#masthead a:not(.wp-block-button__link) *,
body .bb-primary-menu a,
body .bb-primary-menu a * {
    transition: color 0.2s ease !important;
}

body .site-header a:not(.wp-block-button__link):hover,
body .site-header a:not(.wp-block-button__link):hover *,
body header.site-header a:not(.wp-block-button__link):hover,
body header.site-header a:not(.wp-block-button__link):hover *,
#masthead a:not(.wp-block-button__link):hover,
#masthead a:not(.wp-block-button__link):hover *,
body .bb-primary-menu a:hover,
body .bb-primary-menu a:hover *,
body .header-navigation .menu > li:hover > a,
body .header-navigation .menu > li:hover > a * {
    color: #FFBC00 !important;
}

/* Search bar overlapping text fix */
/* Give the search wrapper a pitch black solid background so it perfectly covers the text beneath it */
.header-search-wrap {
    background-color: #000000 !important; 
    z-index: 9999 !important;
}

.header-search-wrap .search-field {
    background-color: #111111 !important;
    color: #ffffff !important;
    border: 1px solid #333333 !important;
    border-radius: 8px !important;
}

/* 6. Gap fix & additional border removal requested by user */
.buddypanel, .bb-buddypanel, .bb-buddypanel-right, #buddypanel, .buddypanel-inner, .buddypanel-wrap, .bb-panel, .side-panel-inner, .bb-sidebar, [class*="buddypanel"] {
    border-right: none !important;
    border-left: none !important;
}

.panel-head {
    border-bottom: none !important;
}

/* Fix for the tiny gap between the active tab block (dark background) and the RIGHT edge of the panel */
.buddypanel, .bb-buddypanel, .buddypanel-inner, .buddypanel-wrap, .side-panel-inner, .buddypanel-menu, .side-panel-menu {
    padding-right: 0 !important;
}

.buddypanel-menu > li,
.side-panel-menu > li,
.buddypanel-menu > li > a,
.side-panel-menu > li > a {
    margin-right: 0 !important;
}

/* Hide BIGGERMEN text in the sidebar */
.buddypanel #site-logo {
    display: none !important;
}

/* 7. Top Navigation Chevrons */
#navbar-extend .menu-item-has-children:after, 
.menu-style-standard .primary-menu .menu-item-has-children:not(.hideshow):after {
    color: #a0a0a0 !important;
    transition: color 0.2s ease !important;
}

#navbar-extend .menu-item-has-children:hover:after, 
.menu-style-standard .primary-menu .menu-item-has-children:not(.hideshow):hover:after {
    color: #FFBC00 !important;
}

/* 8. Update specific borders and separators to #282828 */
.uagb-separator,
.uagb-separator-spacing-wrapper,
.wp-block-uagb-separator,
.wp-block-uagb-separator__inner {
    border-color: #282828 !important;
    border-top-color: #282828 !important;
    border-bottom-color: #282828 !important;
}

.wp-block-uagb-container {
    border-color: #282828 !important;
    border-top-color: #282828 !important;
    border-bottom-color: #282828 !important;
    border-left-color: #282828 !important;
    border-right-color: #282828 !important;
}

/* 9. Specific UAGB block separator override */
.uagb-block-36c16d4d .uagb-ifb-separator {
    border-top-color: #282828 !important;
}

/* 10. Remove top border from footer elements */
.site-footer, #colophon, footer, .footer-widget, .footer-inner, .bb-footer, [class*="footer"] {
    border-top: none !important;
}

/* ============================================================
   BIGGERMEN REDESIGN - About Us (Over ons)
   ============================================================ */

/* 1. Global typography & text colors */
body.page-id-298 h1, body.page-id-298 h2, body.page-id-298 h3, body.page-id-298 h4 {
    letter-spacing: 0.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 20px !important;
}

body.page-id-298 p.uagb-desc-text, body.page-id-298 p.uagb-ifb-desc, body.page-id-298 p {
    line-height: 1.6 !important;
    color: #a0a0a0 !important;
}

/* 2. Container cleanup (transparent backgrounds, remove borders) */
body.page-id-298 #main,
body.page-id-298 #primary,
body.page-id-298 article.page,
body.page-id-298 .site-content,
body.page-id-298 .bb-grid,
body.page-id-298 .hentry {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

body.page-id-298 .site-content {
    padding-top: 60px !important;
}

/* Hide default page title */
body.page-id-298 header.entry-header {
    display: none !important;
}

/* 3. Image styling (matches homepage) */
body.page-id-298 .wp-block-uagb-image__figure img {
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
}

/* 4. FAQ / Accordion Dark Theme */
body.page-id-298 .wp-block-uagb-faq-child {
    background-color: #111111 !important;
    border: 1px solid #1e1e1e !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    transition: all 0.2s ease !important;
}

body.page-id-298 .uagb-faq-questions-button {
    background-color: transparent !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
}

body.page-id-298 .uagb-question {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: color 0.2s ease !important;
}

body.page-id-298 .wp-block-uagb-faq-child:hover .uagb-question {
    color: #FFBC00 !important;
}

body.page-id-298 .uagb-faq-icon-wrap svg {
    fill: #FFBC00 !important;
}

body.page-id-298 .uagb-faq-content {
    background-color: transparent !important;
    padding: 0 20px 20px 20px !important;
    color: #a0a0a0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

body.page-id-298 .uagb-faq-content p {
    color: #a0a0a0 !important;
    margin: 0 !important;
}

/* 5. About Us Layout Fixes */
body.page-id-298 .uagb-container-inner-blocks-wrap {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Hide stray image (user requested to remove this one) */
body.page-id-298 .uagb-block-ee911b6e {
    display: none !important;
}

/* Beautiful Hero Section Design */
body.page-id-298 .uagb-block-bfe052b1 {
    position: relative !important;
    padding: 80px 20px !important;
    background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000000 100%) !important;
    border-bottom: 1px solid #1e1e1e !important;
}
body.page-id-298 .uagb-block-bfe052b1 .uagb-container-inner-blocks-wrap {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    gap: 80px !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Hero Heading */
body.page-id-298 .uagb-block-4de6aee5 h1 {
    font-size: 58px !important;
    line-height: 1.1 !important;
    letter-spacing: -2px !important;
    font-weight: 800 !important;
    margin-bottom: 30px !important;
    background: linear-gradient(135deg, #ffffff 0%, #aaaaaa 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Hero Separator (Gold Line) */
body.page-id-298 .uagb-block-4de6aee5 .uagb-separator {
    border-top: 4px solid #FFBC00 !important;
    width: 60px !important;
    margin-bottom: 20px !important;
}

/* Hero Image */
body.page-id-298 .uagb-block-259aae54 img {
    border-radius: 16px !important; 
    box-shadow: 0 10px 40px rgba(255, 188, 0, 0.15), 0 4px 15px rgba(0,0,0,0.6) !important;
    transform: perspective(1000px) rotateY(-5deg) !important;
    transition: transform 0.4s ease !important;
}
body.page-id-298 .uagb-block-259aae54 img:hover {
    transform: perspective(1000px) rotateY(0deg) scale(1.02) !important;
}


/* Reset margins and add spacing between sections */
body.page-id-298 .uagb-block-b6c01382 {
    margin-top: 0 !important;
    margin-bottom: 120px !important; /* Huge space below Essence section to separate images */
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    position: relative !important;
    z-index: 2 !important;
}

body.page-id-298 .uagb-block-b7e83894 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Essence Section Grid */
body.page-id-298 .uagb-block-3ac84b20 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
    margin-bottom: 0 !important;
}
body.page-id-298 .uagb-block-0bc34e4a {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
}

/* Community & FAQ Section Grid and Dark Overlay */
body.page-id-298 .uagb-block-b7e83894 {
    position: relative !important;
}
/* Forcefully darken the background image of the FAQ section */
body.page-id-298 .uagb-block-b7e83894::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.85) !important; /* Very dark overlay */
    z-index: 0 !important;
    pointer-events: none !important;
}
body.page-id-298 .uagb-block-b7e83894 .uagb-container-inner-blocks-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1.2fr !important;
    gap: 60px !important;
    align-items: start !important;
    position: relative !important;
    z-index: 1 !important; /* Keeps content visible above the overlay */
}
body.page-id-298 .uagb-block-1fe48051 {
    position: sticky !important;
    top: 100px !important;
}

/* Anonymous Section Grid */
body.page-id-298 .uagb-block-71d5d729 .uagb-container-inner-blocks-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1.5fr !important;
    grid-template-areas: "img text1" "img text2" !important;
    gap: 40px !important;
    align-items: center !important;
}
body.page-id-298 .uagb-block-3b882c31 { grid-area: img !important; }
body.page-id-298 .uagb-block-c0ed63b6 { grid-area: text1 !important; align-self: end !important; }
body.page-id-298 .uagb-block-441d128f { grid-area: text2 !important; align-self: start !important; }

/* Mobile Responsiveness for Layout Fixes */
@media (max-width: 860px) {
    body.page-id-298 .uagb-block-3ac84b20,
    body.page-id-298 .uagb-block-b7e83894 .uagb-container-inner-blocks-wrap,
    body.page-id-298 .uagb-block-71d5d729 .uagb-container-inner-blocks-wrap {
        grid-template-columns: 1fr !important;
        grid-template-areas: "img" "text1" "text2" !important;
        gap: 30px !important;
    }
    body.page-id-298 .uagb-block-1fe48051 {
        position: static !important;
    }
    body.page-id-298 .uagb-block-bfe052b1 .uagb-container-inner-blocks-wrap {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 40px !important;
    }
    body.page-id-298 .uagb-block-4de6aee5 .uagb-separator {
        margin: 0 auto 20px auto !important; /* Center the line on mobile */
    }
    body.page-id-298 .uagb-block-4de6aee5 h1 {
        font-size: 42px !important;
    }
}

/* ============================================================
   CONTACT PAGINA (page-id-301)
============================================================ */
/* 1. Verberg standaard witte paginatitel en ongewenste achtergronden */
body.page-id-301 .page-header,
body.page-id-301 .post-title,
body.page-id-301 .entry-header {
    display: none !important;
}
body.page-id-301 #main,
body.page-id-301 #content,
body.page-id-301 .site-content,
body.page-id-301 .bb-grid,
body.page-id-301 .hentry {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: 0 !important;
}
body.page-id-301 .site-content {
    padding: 0 !important;
}
body.page-id-301 {
    background-color: #0a0a0a !important;
    color: #a0a0a0 !important;
}

/* 2. Hero Section (Gekopieerd van Over Ons) */
body.page-id-301 .uagb-block-bfe052b1 {
    position: relative !important;
    background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000000 100%) !important;
    border-bottom: 1px solid #1e1e1e !important;
}
body.page-id-301 .uagb-block-bfe052b1 .uagb-container-inner-blocks-wrap {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    gap: 80px !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}
body.page-id-301 .uagb-block-4de6aee5 h1 {
    font-size: 58px !important;
    line-height: 1.1 !important;
    letter-spacing: -2px !important;
    font-weight: 800 !important;
    margin-bottom: 30px !important;
    background: linear-gradient(135deg, #ffffff 0%, #aaaaaa 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.page-id-301 .uagb-block-4de6aee5 .uagb-separator {
    border-top: 4px solid #FFBC00 !important;
    width: 60px !important;
    margin-bottom: 20px !important;
}
body.page-id-301 .uagb-block-259aae54 img {
    border-radius: 16px !important; 
    box-shadow: 0 10px 40px rgba(255, 188, 0, 0.15), 0 4px 15px rgba(0,0,0,0.6) !important;
    transform: perspective(1000px) rotateY(-5deg) !important;
    transition: transform 0.4s ease !important;
}
body.page-id-301 .uagb-block-259aae54 img:hover {
    transform: perspective(1000px) rotateY(0deg) scale(1.02) !important;
}

/* 3. SureForms Dark Mode Styling */
body.page-id-301 .sureforms-form-wrapper {
    background: #111111 !important;
    padding: 40px !important;
    border-radius: 12px !important;
    border: 1px solid #1e1e1e !important;
}
body.page-id-301 .sureforms-form-wrapper label {
    color: #cccccc !important;
    font-weight: 600 !important;
}
body.page-id-301 .sureforms-form-wrapper input,
body.page-id-301 .sureforms-form-wrapper textarea {
    background: #1a1a1a !important;
    border: 1px solid #333333 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 15px !important;
    transition: all 0.3s ease !important;
}
body.page-id-301 .sureforms-form-wrapper input:focus,
body.page-id-301 .sureforms-form-wrapper textarea:focus {
    border-color: #FFBC00 !important;
    box-shadow: 0 0 0 2px rgba(255, 188, 0, 0.2) !important;
    outline: none !important;
}
body.page-id-301 .sureforms-form-wrapper button[type="submit"] {
    background: #FFBC00 !important;
    color: #1E2132 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    padding: 15px 30px !important;
    border: none !important;
    transition: all 0.3s ease !important;
}
body.page-id-301 .sureforms-form-wrapper button[type="submit"]:hover {
    background: #FFBC00 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(255, 188, 0, 0.3) !important;
}

/* 4. Google Map Dark Mode Filter */
body.page-id-301 .uagb-google-map__iframe {
    filter: invert(90%) hue-rotate(180deg) grayscale(1) !important;
    border-radius: 12px !important;
    border: 1px solid #1e1e1e !important;
}

/* 5. Icons en Typografie Contact Info */
body.page-id-301 .uagb-block-d9a4d22a h2 {
    color: #ffffff !important;
    font-weight: 700 !important;
}
body.page-id-301 .uagb-icon-list__source-wrap svg {
    fill: #FFBC00 !important;
    transition: transform 0.3s ease !important;
}
body.page-id-301 .uagb-icon-list-child:hover .uagb-icon-list__source-wrap svg {
    transform: translateY(-3px) !important;
    filter: drop-shadow(0 5px 10px rgba(255,188,0,0.4)) !important;
}

/* Mobiele layout fixes contact */
@media (max-width: 860px) {
    body.page-id-301 .uagb-block-bfe052b1 .uagb-container-inner-blocks-wrap {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
}

/* 6. Contact Info Cards (Telefoon, Email, Adres, Social Media) */
body.page-id-301 .uagb-block-c36058f2 .uagb-container-inner-blocks-wrap > div {
    padding: 40px 30px !important;
    background: #111111 !important;
    border: 1px solid #1e1e1e !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 180px !important;
}
body.page-id-301 .uagb-block-c36058f2 .uagb-container-inner-blocks-wrap > div:hover {
    border-color: rgba(255, 188, 0, 0.4) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

/* Make headings within cards smaller and subtle */
body.page-id-301 .uagb-block-c36058f2 .uagb-desc-text {
    color: #888888 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 10px !important;
}

/* VERWIJDERD - CSS-placeholders voor telefoon/e-mail/adres.
   Dit waren nep-vullingen (via ::after content) toen de contactblokken nog leeg
   waren: "+31 (0)6 12 34 56 78", "info@biggermen.nl" en "Fitnessstraat 1 ...".
   Waarom weg:
   - Op productie draait in functions.php (live via SFTP) een contact-filter dat de
     Telefoon- en Adres-blokken verwijdert en het ECHTE e-mailadres injecteert
     (<a class="bm-contact-email">biggermen.nl@gmail.com</a>). Het E-mail-blok blijft
     dus staan, en daar plakte deze CSS er "info@biggermen.nl" bovenop -> TWEE e-mails
     onder elkaar. Door de placeholder te schrappen blijft alleen het echte adres over.
   - Telefoon/adres waren sowieso dummy-data die op productie niet gewenst is. */

/* ============================================================
   CHECK-INS DASHBOARD REDESIGN
============================================================ */

/* Container */
.bm-ci-container {
    font-family: 'DM Sans', sans-serif;
    padding: 20px 0;
    max-width: 100%;
}

/* Titles */
.bm-ci-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #888888;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bm-ci-section-title.bm-ci-primary {
    color: #FFBC00;
}
.bm-ci-section-title::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
}

/* Grids */
.bm-ci-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}
.bm-ci-grid-2 { grid-template-columns: repeat(2, 1fr); }
.bm-ci-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bm-ci-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Cards */
.bm-ci-card {
    background: linear-gradient(145deg, #161616, #111111);
    border: 1px solid #222222;
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.bm-ci-card:hover {
    border-color: rgba(255, 188, 0, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}
.bm-ci-card.bm-ci-highlight {
    border-left: 3px solid #FFBC00;
}

/* Card Content */
.bm-ci-label {
    font-size: 10px;
    color: #777777;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    font-weight: 600;
}
.bm-ci-value {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
}
.bm-ci-value.bm-ci-accent { color: #FFBC00; }
.bm-ci-value.bm-ci-large { font-size: 28px; }
.bm-ci-value span { font-size: 14px; color: #888; font-weight: 600; }

.bm-ci-text {
    font-size: 14px;
    color: #e8e8e8;
    line-height: 1.6;
}

/* Tags */
.bm-ci-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.bm-ci-tag {
    background: #222;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    color: #e8e8e8;
}
.bm-ci-tag b {
    color: #FFBC00;
    margin-left: 4px;
}

/* Progress Bars */
.bm-ci-progress-item {
    margin-bottom: 16px;
}
.bm-ci-progress-item:last-child {
    margin-bottom: 0;
}
.bm-ci-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.bm-ci-progress-label {
    font-size: 13px;
    color: #e8e8e8;
    font-weight: 500;
}
.bm-ci-progress-val {
    font-size: 14px;
    font-weight: 700;
    color: #FFBC00;
}
.bm-ci-progress-track {
    background: #222222;
    border-radius: 4px;
    height: 6px;
    overflow: hidden;
}
.bm-ci-progress-fill {
    background: linear-gradient(90deg, #d49500, #FFBC00);
    height: 100%;
    border-radius: 4px;
    transition: width 1s ease-out;
}

/* History Cards */
.bm-ci-history-card {
    background: #141414;
    border: 1px solid #1e1e1e;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    transition: background 0.2s ease;
}
.bm-ci-history-card:hover {
    background: #181818;
}
.bm-ci-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #222222;
}
.bm-ci-history-title {
    font-size: 12px;
    font-weight: 700;
    color: #FFBC00;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.bm-ci-history-date {
    font-size: 11px;
    color: #666;
    font-weight: 500;
}
.bm-ci-history-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
}
.bm-ci-history-row .bm-ci-history-stat {
    text-align: left;
    min-width: max-content;
}
.bm-ci-history-row .bm-ci-label {
    margin-bottom: 4px;
    font-size: 9px;
}
.bm-ci-history-row .bm-ci-value {
    font-size: 14px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .bm-ci-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .bm-ci-history-row { gap: 16px; }
}

/* ============================================================
   FORUM STYLING FIXES
============================================================ */
.bb-single-forum-area, .bbp-lead-topic, .bbp-topic-content, .bbp-reply-content, .bb-reply-content-text, .bbp-body, .bbp-forum-content, .bb-forum-content, .bb-single-reply-list .bbp-reply-entry, .bbp-reply-entry, .bbp-lead-topic-entry, .bbp-topic-entry, .bb-topic-status, [id*="post-"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   ACTIVITY TIMELINE FIXES
============================================================ */

/* 1. Sidebar Widgets (The white block on the left) */
.bb-profile-sidebar .widget,
#buddypress .widget,
.widget-area .widget,
.buddypress-wrap .widget,
.bp-profile-widget,
.bb-widget {
    background-color: #1a1a1a !important;
    border: 1px solid #252525 !important;
    box-shadow: none !important;
    color: #e8e8e8 !important;
}
.bb-profile-sidebar .widget a,
#buddypress .widget a,
.bb-widget a {
    color: #e8e8e8 !important;
}
.bb-profile-sidebar .widget a:hover,
#buddypress .widget a:hover,
.bb-widget a:hover {
    color: #FFBC00 !important;
}

/* 2. Context Menu (Three dots dropdown) */
.activity-item, .activity-header, .bp-activity-dropdown-wrap, .activity-inner {
    overflow: visible !important;
}
.bb-dropdown-menu,
.dropdown-menu,
.dropdown-menu.show,
.bp-activity-dropdown,
.activity-item .dropdown-menu {
    background-color: #1a1a1a !important;
    border: 1px solid #252525 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}
.bb-dropdown-menu a,
.bb-dropdown-menu li,
.dropdown-menu a,
.dropdown-menu li,
.dropdown-item,
.bb-dropdown-menu i,
.dropdown-menu i,
.dropdown-item i,
.bb-dropdown-menu .bb-icon,
.dropdown-menu .bb-icon {
    color: #e8e8e8 !important;
}
.bb-dropdown-menu a:hover,
.dropdown-menu a:hover,
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #252525 !important;
    color: #FFBC00 !important;
}
.bb-dropdown-menu a:hover i,
.dropdown-menu a:hover i,
.dropdown-item:hover i,
.bb-dropdown-menu a:hover .bb-icon,
.dropdown-menu a:hover .bb-icon {
    color: #FFBC00 !important;
}

/* 3. Comment Input Box & Update Forms */
form.ac-form .ac-reply-content {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
}
form.ac-form .ac-reply-content:focus-within {
    border-color: #FFBC00 !important;
}

/* 4. Activity Post Form (Create a post modal & Share what's on your mind box) */
.whats-new-wrapper,
.bb-activity-post-form,
.activity-update-form,
.buddypress-wrap .dir-form,
.post-update-wrapper,
.bb-share-post-wrap,
.bb-activity-form,
.bp-activity-form-container,
.post-elements-buttons-wrap {
    background-color: #1a1a1a !important;
    border: 1px solid #252525 !important;
    border-radius: 8px !important;
}

/* Explicitly remove background/border from placeholder forms */
#whats-new-form, 
#whats-new-form-placeholder,
.bp-nouveau-activity-form-placeholder,
[class*="bp-nouveau-activity-form-placeholder"] {
    background-color: transparent !important;
    border: none !important;
}

/* Ensure inner wrappers don't force white */
#whats-new-form .whats-new-content,
.bb-activity-post-form .whats-new-content,
.buddypress-wrap .dir-form .whats-new-content {
    background: transparent !important;
    border: none !important;
}

/* Modal Containers */
#whats-new-form .modal-content,
.bb-activity-post-form .modal-content,
.bb-post-modal,
.bb-modal-content,
.post-update-modal .modal-content,
.bp-activity-modal,
.mfp-content .modal-content,
div[role="dialog"] .modal-content {
    background-color: #1a1a1a !important;
}

/* Textareas & Inputs */
#whats-new-form textarea, 
#whats-new,
.activity-update-form textarea,
.bb-activity-post-form textarea,
.bb-share-post-wrap textarea {
    background-color: transparent !important;
    color: #e8e8e8 !important;
}
#whats-new-form textarea::placeholder, 
#whats-new::placeholder,
.bb-activity-post-form textarea::placeholder {
    color: #888 !important;
}

/* User name & Modal Title */
#whats-new-form .bp-user-name,
#whats-new-form .user-name,
#whats-new-form .post-author-name,
.bb-activity-post-form .title,
#whats-new-form .modal-title,
.bb-post-modal .modal-title,
.post-author-name,
.bb-user-name {
    color: #e8e8e8 !important;
}

/* Privacy Dropdown */
#whats-new-form .bb-privacy-dropdown,
#whats-new-form .bb-privacy-selector,
#whats-new-form .post-privacy-button,
.bp-privacy-dropdown-button,
.bb-privacy-button,
.post-privacy-button,
.bb-post-privacy,
.bp-privacy-dropdown button,
.bb-privacy-dropdown-button {
    background-color: #252525 !important;
    color: #e8e8e8 !important;
    border: 1px solid #333 !important;
}
.bb-privacy-button i,
.post-privacy-button i {
    color: #e8e8e8 !important;
}

/* Action Icons (Aa, @) */
#whats-new-form .post-elements-buttons a,
#whats-new-form .bb-post-toolbar a,
#whats-new-form .whats-new-options a,
#whats-new-form .bb-icon-text-format,
#whats-new-form .bb-icon-at,
.bb-post-modal .bb-icon,
.bb-activity-post-form .bb-icon,
.bb-activity-post-form i {
    color: #888 !important;
}
#whats-new-form .post-elements-buttons a:hover,
#whats-new-form .bb-post-toolbar a:hover,
#whats-new-form .whats-new-options a:hover,
.bb-post-modal .bb-icon:hover,
.bb-activity-post-form .bb-icon:hover,
.bb-activity-post-form i:hover {
    color: #FFBC00 !important;
}

/* Title Field */
#whats-new-form input[type="text"],
.activity-update-form input[type="text"],
.bb-post-modal input[type="text"],
.bb-activity-post-form input[type="text"] {
    background-color: transparent !important;
    color: #fff !important;
    border: none !important;
    border-bottom: 1px solid #333 !important;
}

/* Modal Specific Adjustments & Scrolling */
.activity-update-form.modal-popup #whats-new-form, 
.bp-nouveau-activity-form-placeholder-.modal-popup #whats-new-form,
.bp-nouveau-activity-form-placeholder.modal-popup #whats-new-form {
    margin-top: 24px !important;
}

/* Force body and HTML to keep vertical scrollbar when BuddyBoss tries to hide it inline */
html, body {
    overflow-y: scroll !important;
}

/* Modal containers can scroll vertically if they get too big */
.activity-update-form.modal-popup,
.bp-nouveau-activity-form-placeholder-.modal-popup,
.bp-nouveau-activity-form-placeholder.modal-popup,
.post-update-modal {
    overflow-y: auto !important;
    max-height: 100vh;
}

/* ============================================================
   EDIT PROFILE PAGE FIXES
============================================================ */

/* 1. Remove background and borders from profile containers */
.bp-profile-content, 
.bp-profile-fields, 
.bp-profile-content-area, 
#profile-edit-form, 
.editfield, 
.bp-widget, 
.bp-widget-inner, 
.profile-fields-section, 
.profile .item-body, 
.user-subnav + div, 
#buddypress div.item-body, 
#buddypress .profile-group, 
.bp-profile-group {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. Profile Sidebar Menu Navigation */
.bp-navs.vertical li a,
.bp-personal-sub-nav li a {
    color: #e8e8e8 !important;
}
.bp-navs.vertical li a i,
.bp-personal-sub-nav li a i,
.bp-navs.vertical li a .bb-icon {
    color: #e8e8e8 !important;
}

/* Selected/Hover state in sidebar */
.bp-navs.vertical li.current a,
.bp-navs.vertical li.selected a,
.bp-personal-sub-nav li.current a {
    background-color: #FFBC00 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    color: #1a1a1a !important;
}

/* Ensure ALL text inside the active link is dark */
.bp-navs.vertical li.current a span,
.bp-navs.vertical li.current a i,
.bp-navs.vertical li.current a .bb-icon,
.bp-personal-sub-nav li.current a span,
.bp-personal-sub-nav li.current a i,
.bp-personal-sub-nav li.current a .bb-icon {
    color: #1a1a1a !important;
}

/* Hover state for inactive links */
.bp-navs.vertical li:not(.current) a:hover,
.bp-personal-sub-nav li:not(.current) a:hover {
    color: #FFBC00 !important;
    background-color: #252525 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}
.bp-navs.vertical li:not(.current) a:hover span,
.bp-navs.vertical li:not(.current) a:hover i,
.bp-navs.vertical li:not(.current) a:hover .bb-icon,
.bp-personal-sub-nav li:not(.current) a:hover span,
.bp-personal-sub-nav li:not(.current) a:hover i,
.bp-personal-sub-nav li:not(.current) a:hover .bb-icon {
    color: #FFBC00 !important;
}

/* Hover state for active links */
.bp-navs.vertical li.current a:hover,
.bp-navs.vertical li.selected a:hover,
.bp-personal-sub-nav li.current a:hover {
    background-color: #e5a800 !important;
}

/* 3. Profile Form Fields (Labels, Privacy, Links) */
#profile-edit-form label,
.editfield label,
.profile-fields-section label,
.bp-profile-fields label {
    color: #e8e8e8 !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block;
}

/* Inputs styling */
#profile-edit-form input[type="text"],
#profile-edit-form input[type="password"],
#profile-edit-form input[type="email"],
#profile-edit-form textarea,
#profile-edit-form select,
.editfield input[type="text"],
.editfield textarea {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}
#profile-edit-form input:focus,
#profile-edit-form textarea:focus,
.editfield input:focus {
    border-color: #FFBC00 !important;
    box-shadow: 0 0 0 1px rgba(255, 188, 0, 0.3) !important;
    outline: none !important;
}

/* Field visibility & extra text */
.field-visibility-settings,
.field-visibility-settings-toggle,
.field-visibility-settings-notoggle,
.bp-profile-fields p.description,
.editfield p.description,
.editfield .description {
    color: #aaa !important;
    font-size: 12px !important;
    margin-top: 6px !important;
}

.visibility-toggle-link,
.editfield .required,
.bp-profile-fields .required {
    color: #FFBC00 !important;
}

.visibility-toggle-link:hover {
    color: #e5a800 !important;
    text-decoration: underline !important;
}

/* Legend or Headers */
#profile-edit-form legend,
.profile-fields-section legend,
.bp-profile-content h2,
.bp-profile-content h3 {
    color: #fff !important;
    font-weight: 600 !important;
}

/* 4. Save Changes Button */
#profile-edit-form input[type="submit"],
#profile-edit-form button[type="submit"],
.profile-edit-submit,
#buddypress input[type="submit"].save,
#buddypress input[type="button"].save,
.profile .submit input {
    background-color: #FFBC00 !important;
    color: #1a1a1a !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    border: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    height: auto !important;
    line-height: normal !important;
    display: inline-block !important;
    text-align: center !important;
}
#profile-edit-form input[type="submit"]:hover,
#profile-edit-form button[type="submit"]:hover,
.profile-edit-submit:hover,
#buddypress input[type="submit"].save:hover,
#buddypress input[type="button"].save:hover,
.profile .submit input:hover {
    background-color: #e5a800 !important;
    transform: translateY(-2px);
}

/* 5. Change Avatar / Cover Photo UI */

/* Info & Warning Notices */
#buddypress .bp-feedback.info,
#buddypress .bp-template-notice.info,
#buddypress div#message.info {
    background-color: #1a1a1a !important;
    border: none !important;
    color: #e8e8e8 !important;
    box-shadow: none !important;
}
#buddypress .bp-feedback.info span.bp-icon,
#buddypress .bp-template-notice.info span.bp-icon {
    background-color: #FFBC00 !important;
    color: #1a1a1a !important;
}

#buddypress .bp-feedback.warning,
#buddypress .bp-template-notice.warning,
#buddypress div#message.warning,
#buddypress p.warning,
#buddypress #avatar-upload-form p {
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: #aaa !important;
    box-shadow: none !important;
}

/* Avatar / Cover Tabs */
#buddypress #avatar-nav,
#buddypress .bp-avatar-nav,
#buddypress .bp-cover-image-nav {
    border-bottom: none !important;
}
.bp-avatar-nav ul, 
.bp-avatar-nav ul.avatar-nav-items li.current {
    border-color: #000 !important;
}
#buddypress #avatar-nav li a,
#buddypress .bp-avatar-nav li a,
#buddypress .bp-cover-image-nav li a {
    color: #aaa !important;
    background: transparent !important;
    border: none !important;
}
#buddypress #avatar-nav li.current a,
#buddypress .bp-avatar-nav li.current a,
#buddypress .bp-cover-image-nav li.current a {
    color: #FFBC00 !important;
    border-bottom: 2px solid #FFBC00 !important;
}

/* Dropzone Area */
#buddypress #avatar-drop-zone,
#buddypress #cover-image-drop-zone,
#buddypress .bp-dropzone,
#item-body .profile #drag-drop-area {
    background: transparent !important;
    border: 2px dashed #333 !important;
    color: #fff !important;
    border-radius: 8px !important;
}
#buddypress #avatar-drop-zone p,
#buddypress #cover-image-drop-zone p,
#buddypress .bp-dropzone p {
    color: #e8e8e8 !important;
}

/* Select File Button */
#buddypress #bp-browse-button,
#buddypress .bp-browse-button,
#buddypress #avatar-drop-zone .button,
#buddypress #cover-image-drop-zone .button {
    background-color: #FFBC00 !important;
    color: #1a1a1a !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    border: none !important;
    height: auto !important;
    line-height: normal !important;
    display: inline-block !important;
    text-align: center !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
#buddypress #bp-browse-button:hover,
#buddypress .bp-browse-button:hover,
#buddypress #avatar-drop-zone .button:hover,
#buddypress #cover-image-drop-zone .button:hover {
    background-color: #e5a800 !important;
    transform: translateY(-2px);
}

/* Global BuddyBoss Button Fixes */
#buddypress button,
#buddypress .button,
#buddypress input[type="submit"],
#buddypress input[type="button"],
#buddypress input[type="reset"] {
    border-radius: 8px !important;
}
#buddypress button.primary,
#buddypress .button.primary,
#buddypress input[type="submit"].primary {
    color: #1a1a1a !important;
}

/* 6. Dropdown & Status Container Resets */
.bp-cover-image-status, 
.bb-profile-avatar-wrap .dropdown, 
.bp-avatar-status, 
.bb-dropdown-wrap, 
.profile-header-nav .dropdown, 
.change-avatar .dropdown, 
.bb-profile-media .dropdown, 
[data-balloon-pos] + .dropdown, 
.bb-avatar-btn-wrap + div, 
.bb-profile-actions .dropdown, 
.bb-action-buttons .dropdown, 
.item-header-wrap .dropdown, 
#header-my-account-menu, 
.header-my-account-menu, 
.bb-header-user-menu, 
.bb-user-menu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
}

/* 7. Directory & Connections Fixes */

/* Subnav Tabs (My Connections, Requests) */
#buddypress .item-list-tabs#subnav ul li a,
#buddypress .bp-navs.bp-subnavs ul li a,
.bb-subnav ul li a {
    background-color: #1a1a1a !important;
    color: #e8e8e8 !important;
    border: 1px solid #333 !important;
    border-radius: 24px !important; /* Pill shape */
    padding: 8px 20px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
}
#buddypress .item-list-tabs#subnav ul li a:hover,
#buddypress .bp-navs.bp-subnavs ul li a:hover,
.bb-subnav ul li a:hover {
    background-color: #252525 !important;
    color: #FFBC00 !important;
    border-color: #FFBC00 !important;
}
#buddypress .item-list-tabs#subnav ul li.current a,
#buddypress .item-list-tabs#subnav ul li.selected a,
#buddypress .bp-navs.bp-subnavs ul li.current a,
.bb-subnav ul li.current a {
    background-color: #FFBC00 !important;
    color: #1a1a1a !important;
    border-color: #FFBC00 !important;
}
#buddypress .item-list-tabs#subnav ul li.current a span,
#buddypress .bp-navs.bp-subnavs ul li.current a span,
.bb-subnav ul li.current a span {
    color: #1a1a1a !important;
}

/* Layout Switches (Grid / List view) & Search */
#buddypress .members .subnav-filters,
#buddypress .groups .subnav-filters,
#buddypress .friends .subnav-filters,
.bb-subnav-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    background: transparent !important;
    border: none !important;
    padding: 16px 0 !important;
}
#buddypress .subnav-filters .layout-view-buttons,
#buddypress .subnav-filters .bb-view-switches,
.bb-subnav-filters .layout-view-buttons {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: inline-flex !important;
}
#buddypress .subnav-filters .layout-view-buttons a,
#buddypress .subnav-filters .bb-view-switches a,
.bb-subnav-filters .layout-view-buttons a {
    color: #aaa !important;
    background: transparent !important;
    border: none !important;
    padding: 8px 12px !important;
}
#buddypress .subnav-filters .layout-view-buttons a.active,
#buddypress .subnav-filters .bb-view-switches a.active,
.bb-subnav-filters .layout-view-buttons a.active {
    color: #FFBC00 !important;
    background: #252525 !important;
}

/* Search Box in Subnav */
#buddypress .subnav-filters .dir-search,
#buddypress .subnav-filters .subnav-search,
.bb-subnav-filters .dir-search {
    flex-grow: 1;
    max-width: 300px;
    margin: 0 !important;
}
#buddypress .subnav-filters .dir-search form,
#buddypress .subnav-filters .subnav-search form,
.bb-subnav-filters .dir-search form {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    margin: 0 !important;
}
#buddypress .subnav-filters .dir-search input[type="text"],
#buddypress .subnav-filters .subnav-search input[type="text"],
.bb-subnav-filters .dir-search input[type="text"] {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    width: 100% !important;
    padding: 10px 16px !important;
    min-width: 200px;
}
#buddypress .subnav-filters .dir-search button,
#buddypress .subnav-filters .subnav-search button,
.bb-subnav-filters .dir-search button {
    background: transparent !important;
    color: #aaa !important;
    border: none !important;
    padding: 10px 16px !important;
    height: auto !important;
    line-height: normal !important;
}
#buddypress .subnav-filters .dir-search button:hover,
#buddypress .subnav-filters .subnav-search button:hover,
.bb-subnav-filters .dir-search button:hover {
    color: #FFBC00 !important;
    background: transparent !important;
    transform: none !important;
}

/* 8. Activity Feed - Comment Blocks */
.bb-media-model-wrapper .activity-comments .acomment_inner .acomment-content_block,
.buddypress-wrap .activity-comments .acomment_inner .acomment-content_block,
.activity-comments .acomment-content_block,
.acomment-content_block {
    background-color: #1a1a1a !important;
    border: 1px solid #252525 !important;
    border-radius: 12px !important;
    color: #e8e8e8 !important;
}

/* Comment text */
.activity-comments .acomment-content_block .acomment-content,
.activity-comments .acomment-content_block .acomment-content p,
.activity-comments .acomment-content_block .activity-comment-text,
.acomment-content_block p {
    color: #e8e8e8 !important;
}

/* Comment author name */
.activity-comments .acomment-content_block .acomment-meta a,
.activity-comments .acomment-content_block .comment-header a,
.acomment-content_block a.activity-user-name {
    color: #fff !important;
    font-weight: 600 !important;
}

/* Comment action links (Like, Reply, timestamp) */
.activity-comments .acomment-meta .comment-header,
.activity-comments .acomment-meta .time-since,
.activity-comments .acomment-options a,
.activity-comments .acomment_inner .acomment-options a {
    color: #aaa !important;
}
.activity-comments .acomment-options a:hover {
    color: #FFBC00 !important;
}

/* 9. Nav Container Background Resets */
.bp-navs,
.bp-subnavs,
.user-nav-tabs,
.single-screen-navs,
#item-nav,
#subnav {
    background: transparent !important;
    border: none !important;
}

/* Filter Modal & Dropdowns ("Show" / "By" op de newsfeed).
   LET OP: dit is een ZWEVENDE overlay, geen inline-blok. Transparant maken (wat
   hier eerder stond) laat de feed er dwars doorheen schijnen en maakt de opties
   onleesbaar. Een popover hoort dus wél een dichte achtergrond te hebben - dat is
   geen "doos in een doos". */
/* Yurish wil deze filter-dropdowns plat: geen eigen achtergrond/rand/radius/schaduw
   (getest in DevTools). Alleen de tekstkleur blijft. */
.subnav-filters-modal,
#bb-subnav-filter-show,
#bb-subnav-filter-by {
    color: #888888 !important;
}
/* Native <select> (o.a. de composer "Post in:"): een doorzichtige achtergrond laat
   de browser ook de optielijst doorzichtig tekenen. Optie-regels expliciet dicht. */
#buddypress select,
.buddypress-wrap select,
.activity-head-bar select,
.privacy-status-form-body select,
#whats-new-post-in {
    background-color: #111111 !important;
    color: #cfcfcf !important;
    border: 1px solid #1e1e1e !important;
    border-radius: 8px !important;
}
#buddypress select option,
.buddypress-wrap select option,
.activity-head-bar select option,
.privacy-status-form-body select option,
#whats-new-post-in option {
    background-color: #111111 !important;
    color: #cfcfcf !important;
}

/* Opties leesbaar + duidelijke hover/selectie in de popover. */
.subnav-filters-modal ul,
.subnav-filters-modal li {
    background: transparent !important;
    border: none !important;
}
.subnav-filters-modal li > a {
    display: block !important;
    padding: 8px 14px !important;
    color: #cfcfcf !important;
}
.subnav-filters-modal li > a:hover,
.subnav-filters-modal li.selected > a {
    background: #1a1a1a !important;
    color: #C9A84C !important;
}

/* View Switcher & Filter Buttons - darker borders and text */
.bb-subnav-filters-container .subnav-filters-opener,
.bb-subnav-filters-container .layout-view-buttons,
.bb-subnav-filters-container .layout-view-buttons a,
.bb-subnav-filters-container .bb-view-switches,
.bb-subnav-filters-container .bb-view-switches a {
    border-color: #333 !important;
    color: #888 !important;
}
.bb-subnav-filters-container .layout-view-buttons a.active,
.bb-subnav-filters-container .bb-view-switches a.active {
    color: #FFBC00 !important;
}
.bb-subnav-filters-container .subnav-filters-opener {
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    color: #888 !important;
}
.bb-subnav-filters-container .subnav-filters-opener .selected {
    color: #888 !important;
}
.bb-subnav-filters-container .subnav-filters-opener:hover,
.bb-subnav-filters-container .subnav-filters-opener:hover .selected {
    border-color: #FFBC00 !important;
    color: #FFBC00 !important;
}

/* Selected Nav Item - remove bottom border accent */
.bb-template-v2 nav#object-nav > ul > .selected > a .bb-single-nav-item-point {
    border-bottom: none !important;
}

/* Grid/Filter border color fixes */
.buddypress-wrap .select-wrap {
    border-color: #333 !important;
}
.buddypress-wrap .grid-filters {
    border-color: #333 !important;
}
a.layout-grid-view {
    border-right-color: #333 !important;
}

/* 10. Group Cards */
#groups-list li,
#groups-list .list-wrap,
.bp-list .list-wrap,
.buddypress-wrap .groups-list .list-wrap,
.buddypress-wrap #groups-list li .list-wrap {
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease !important;
}
#groups-list.bp-list .item-entry .list-wrap {
    border: 1px solid #252525 !important;
}
#groups-list li:hover .list-wrap,
.bp-list .list-wrap:hover {
    border-color: #FFBC00 !important;
}

/* Group card content area */
#groups-list .group-inner-list-content,
#groups-list .item-block,
.buddypress-wrap .groups-list .item-block {
    background: transparent !important;
}

/* Group name */
#groups-list .list-title a,
#groups-list .item-title a,
.buddypress-wrap .groups-list .list-title a {
    color: #FFBC00 !important;
    font-weight: 600 !important;
}
#groups-list .list-title a:hover,
#groups-list .item-title a:hover {
    color: #e5a800 !important;
}

/* Group meta (Public • Group • Active...) */
#groups-list .item-meta,
#groups-list .item-meta span,
#groups-list .group-item-meta,
.buddypress-wrap .groups-list .item-meta {
    color: #aaa !important;
}

/* Group avatar border */
#groups-list .item-avatar img,
#groups-list .group-item-avatar img,
.buddypress-wrap .groups-list .item-avatar img {
    border-color: #333 !important;
    border-radius: 12px !important;
}

/* Organizer / Member badge button */
#groups-list .action .generic-button a,
#groups-list .action .generic-button button,
#groups-list .group-button a,
#groups-list .group-button button,
.buddypress-wrap .groups-list .action .generic-button a {
    background-color: transparent !important;
    color: #FFBC00 !important;
    border: 1px solid #FFBC00 !important;
    border-radius: 20px !important;
    padding: 6px 16px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}
#groups-list .action .generic-button a:hover,
#groups-list .action .generic-button button:hover,
#groups-list .group-button a:hover,
#groups-list .group-button button:hover {
    background-color: #FFBC00 !important;
    color: #1a1a1a !important;
}

/* Member count avatar circle */
#groups-list .member-count-wrapper,
#groups-list .group-members-wrap {
    border-color: #333 !important;
}
#groups-list .member-count-wrapper img,
#groups-list .group-members-wrap img {
    border-color: #1a1a1a !important;
}

/* "Viewing X group" text */
.buddypress-wrap .bp-pagination,
.buddypress-wrap .pag-count {
    color: #888 !important;
}

/* 11. Group Members Page */

/* Member Cards - only target .list-wrap, not bare li (which includes separator headings) */
#members-list .list-wrap,
.buddypress-wrap #members-list li .list-wrap,
.members-list .list-wrap,
.group-members .list-wrap {
    background-color: #1a1a1a !important;
    border: 1px solid #252525 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease !important;
}

/* Separator li (Organizers / Members heading) - no card styling */
#members-list li.separator-li,
#members-list li.activity-separator,
#members-list > li:not(.item-entry) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#members-list li.separator-li h3,
#members-list > li:not(.item-entry) h3,
#members-list .separator-title {
    color: #FFBC00 !important;
    font-weight: 600 !important;
}

/* Search form border removal */
.buddypress-wrap form.bp-dir-search-form,
.buddypress-wrap form.bp-invites-search-form,
.buddypress-wrap form.bp-messages-search-form {
    border: none !important;
}
#members-list li:hover .list-wrap,
.members-list .list-wrap:hover {
    border-color: #FFBC00 !important;
}

/* Member name */
#members-list .list-title a,
#members-list .item-title a,
.members-list .list-title a,
.group-members .list-title a {
    color: #fff !important;
    font-weight: 600 !important;
}
#members-list .list-title a:hover,
#members-list .item-title a:hover {
    color: #FFBC00 !important;
}

/* Member meta (Joined, Active, followers) */
#members-list .item-meta,
#members-list .item-meta span,
#members-list .item-meta a,
.members-list .item-meta,
.group-members .item-meta {
    color: #aaa !important;
}

/* Section headings (Organizers, Members) */
.group-members h3,
.group-members .item-list-tabs h3,
.buddypress-wrap .members-group-list h3,
#buddypress .group-members h3,
.group-members .separator-title,
.buddypress-wrap .item-body h3 {
    color: #FFBC00 !important;
    font-weight: 600 !important;
}

/* Member search box */
.group-members .dir-search form,
.group-members .subnav-search form,
.group-members #search-members-form,
#buddypress .group-members .bp-dir-search-form {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
}
.group-members .dir-search input[type="text"],
.group-members .dir-search input[type="search"],
.group-members .subnav-search input,
#search-members-form input {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
}
.group-members .dir-search input::placeholder,
.group-members .subnav-search input::placeholder,
#search-members-form input::placeholder {
    color: #777 !important;
}

/* Member action buttons */
#members-list .action .generic-button a,
#members-list .action .generic-button button,
.members-list .action .generic-button a {
    background: transparent !important;
    color: #FFBC00 !important;
    border: 1px solid #FFBC00 !important;
    border-radius: 20px !important;
    padding: 6px 16px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}
#members-list .action .generic-button a:hover,
#members-list .action .generic-button button:hover {
    background: #FFBC00 !important;
    color: #1a1a1a !important;
}

/* Group nav tabs (Members, Feed, Photos, etc.) */
.group-nav-tabs a,
#buddypress .item-list-tabs ul li a,
.single-group .bp-navs li a {
    color: #e8e8e8 !important;
}
.group-nav-tabs .current a,
.group-nav-tabs .selected a,
#buddypress .item-list-tabs ul li.current a,
#buddypress .item-list-tabs ul li.selected a,
.single-group .bp-navs li.current a,
.single-group .bp-navs li.selected a {
    color: #FFBC00 !important;
}

/* Item entry header text */
.item-entry.item-entry-header,
.item-entry.item-entry-header * {
    color: #fff !important;
}

/* Grid filter icons - make visible */
.grid-filters a,
.grid-filters a i,
.grid-filters a .bb-icon,
.grid-filters a svg {
    color: #aaa !important;
    fill: #aaa !important;
}
.grid-filters a.active,
.grid-filters a.active i,
.grid-filters a.active .bb-icon,
.grid-filters a.active svg {
    color: #FFBC00 !important;
    fill: #FFBC00 !important;
}
.grid-filters a:hover,
.grid-filters a:hover i,
.grid-filters a:hover .bb-icon {
    color: #FFBC00 !important;
}

/* 12. Group Sub-Pages (Photos, Videos, Albums, Documents, Invites, Manage) */

/* Content area wrapper */
.single-group .item-body,
.single-group #item-body,
.single-group .group-media,
.single-group .group-albums,
.single-group .group-documents,
.single-group .group-invites,
.single-group .group-manage,
#buddypress .item-body {
    background: transparent !important;
}

/* Add buttons (ADD PHOTOS, ADD VIDEOS, CREATE ALBUM) */
.bb-photos-actions a,
.bb-videos-actions a,
.bb-albums-actions a,
.bb-documents-actions a,
.bb-media-actions a,
#bb-add-photos,
#bb-add-videos,
#bb-create-album,
#bb-add-document,
.group-media .generic-button a,
.group-albums .generic-button a,
.group-documents .generic-button a {
    background: transparent !important;
    color: #FFBC00 !important;
    border: 1px solid #FFBC00 !important;
    border-radius: 8px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.bb-photos-actions a:hover,
.bb-videos-actions a:hover,
.bb-albums-actions a:hover,
.bb-documents-actions a:hover,
.bb-media-actions a:hover,
#bb-add-photos:hover,
#bb-add-videos:hover,
#bb-create-album:hover,
#bb-add-document:hover {
    background: #FFBC00 !important;
    color: #1a1a1a !important;
}

/* Upload / Create Modals & Popups */
.bb-modal-overlay,
.bb-modal,
.bb-media-upload-modal,
.bb-album-create-modal,
.bb-document-upload-modal,
.modal-popup .modal-container,
.bb-dropzone-wrap,
#bossjob-modal .modal-dialog .modal-content,
.bp-nouveau .activity-modal,
.open-popup .modal-container,
.bb-field-wrap-search .bb-search-users-wrap,
[class*="modal"] .modal-content,
[class*="modal"] .modal-dialog .modal-content {
    /* bg + border removed: they painted a second box over the popup's
       own (now variable-driven dark) surface. Surface color comes from
       --bb-content-background-color. */
    border-radius: 12px !important;
    color: #e8e8e8 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* Modal headers */
.bb-modal .bb-modal-header,
.bb-media-upload-modal .bb-modal-header,
.modal-popup .modal-container .modal-header,
[class*="modal"] .modal-header,
.bb-modal-header {
    background: transparent !important;
    border-bottom: 1px solid #252525 !important;
    color: #fff !important;
}
.bb-modal .bb-modal-header h2,
.bb-modal .bb-modal-header h3,
.bb-modal .bb-modal-header .bb-modal-title,
.modal-popup .modal-header h2,
.modal-popup .modal-header h3,
[class*="modal"] .modal-header h2,
[class*="modal"] .modal-header h3,
[class*="modal"] .modal-title,
.bb-modal-title {
    color: #fff !important;
}

/* Modal close button */
.bb-modal .bb-close-action-popup,
.bb-modal .bb-model-close-button,
.modal-popup .bb-close-action-popup,
[class*="modal"] .close,
[class*="modal"] .bb-close-action-popup {
    color: #aaa !important;
}
.bb-modal .bb-close-action-popup:hover,
[class*="modal"] .close:hover {
    color: #fff !important;
}

/* Modal body text */
.bb-modal .bb-modal-body,
.bb-modal .bb-modal-body p,
.bb-modal .bb-modal-body span,
.bb-modal .bb-modal-body label,
.modal-popup .modal-container p,
.modal-popup .modal-container span,
.modal-popup .modal-container label,
[class*="modal"] .modal-body,
[class*="modal"] .modal-body p,
[class*="modal"] .modal-body span,
[class*="modal"] .modal-body label {
    color: #e8e8e8 !important;
}

/* Modal textarea / text input */
.bb-modal textarea,
.bb-modal input[type="text"],
.modal-popup textarea,
.modal-popup input[type="text"],
[class*="modal"] textarea,
[class*="modal"] input[type="text"] {
    background: #111 !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    color: #fff !important;
    padding: 10px 14px !important;
}
.bb-modal textarea::placeholder,
.bb-modal input[type="text"]::placeholder,
.modal-popup textarea::placeholder,
.modal-popup input[type="text"]::placeholder,
[class*="modal"] textarea::placeholder,
[class*="modal"] input[type="text"]::placeholder {
    color: #777 !important;
}

/* Drop zones inside modals */
.bb-modal .bb-dropzone,
.bb-modal .bb-dropzone-wrap,
.bb-modal .dropzone,
.bb-modal .bb-field-wrap,
.modal-popup .bb-dropzone,
.modal-popup .dropzone,
[class*="modal"] .bb-dropzone,
[class*="modal"] .dropzone,
.bb-dropzone-wrap .dropzone {
    background: #111 !important;
    border: 2px dashed #333 !important;
    border-radius: 8px !important;
    color: #e8e8e8 !important;
}
.bb-modal .bb-dropzone p,
.bb-modal .bb-dropzone span,
.bb-modal .dropzone p,
.bb-modal .dropzone span,
.modal-popup .bb-dropzone p,
.modal-popup .dropzone p,
[class*="modal"] .bb-dropzone p,
[class*="modal"] .dropzone p,
[class*="modal"] .dropzone span,
.bb-dropzone-wrap .dropzone p,
.bb-dropzone-wrap .dropzone span {
    color: #aaa !important;
}

/* Drop zone icons */
.bb-modal .bb-dropzone i,
.bb-modal .dropzone i,
.modal-popup .bb-dropzone i,
[class*="modal"] .bb-dropzone i,
[class*="modal"] .dropzone i,
.bb-dropzone-wrap .dropzone i {
    color: #555 !important;
}

/* Modal footer / action buttons */
.bb-modal .bb-modal-footer,
.modal-popup .modal-footer,
[class*="modal"] .modal-footer {
    background: transparent !important;
    border-top: 1px solid #252525 !important;
}
.bb-modal .bb-modal-footer button,
.bb-modal .bb-modal-footer a,
.modal-popup .modal-footer button,
[class*="modal"] .modal-footer button,
[class*="modal"] .modal-footer a.btn-primary {
    background-color: #FFBC00 !important;
    color: #1a1a1a !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 10px 24px !important;
    transition: all 0.2s ease !important;
}
.bb-modal .bb-modal-footer button:hover,
.modal-popup .modal-footer button:hover,
[class*="modal"] .modal-footer button:hover {
    background-color: #e5a800 !important;
    transform: translateY(-2px);
}

/* Group admin / manage forms */
.group-manage form,
.group-manage .bp-group-admin-form,
#buddypress .group-admin-form,
.single-group .group-settings-form {
    background: transparent !important;
}
.group-manage label,
.group-manage h4,
.group-manage h3,
.group-manage p,
.group-manage legend,
#buddypress .group-admin-form label,
#buddypress .group-admin-form h4,
#buddypress .group-admin-form p {
    color: #e8e8e8 !important;
}
.group-manage input[type="text"],
.group-manage input[type="email"],
.group-manage textarea,
.group-manage select,
#buddypress .group-admin-form input[type="text"],
#buddypress .group-admin-form textarea,
#buddypress .group-admin-form select {
    background: #111 !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    color: #fff !important;
}

/* Send Invites */
.group-invites label,
.group-invites p,
.group-invites h3,
.group-invites .bp-invites-content {
    color: #e8e8e8 !important;
}
.group-invites .bp-invites-filters,
.group-invites .subnav-filters {
    background: transparent !important;
    border: none !important;
}

/* Notice messages */
#buddypress .bp-feedback,
#buddypress .bp-template-notice,
.buddypress-wrap .bp-feedback {
    background-color: #1a1a1a !important;
    border: 1px solid #252525 !important;
    color: #e8e8e8 !important;
}
#buddypress .bp-feedback p,
#buddypress .bp-template-notice p,
.buddypress-wrap .bp-feedback p {
    color: #e8e8e8 !important;
}

/* ============================================================
   GROUP MEDIA — photo/video/document THEATRE (lightbox popup)
   The viewer overlay that opens when you click a photo/video/doc.
   Image stays on black; the right-hand info/comments column and
   any inner frame were white — darken them and lighten their text.
   Targets: .bb-media-model-wrapper / -container / -inner,
            .bb-media-info-section, .bb-document-theater
   ============================================================ */
.bb-media-model-wrapper {
    background: rgba(0,0,0,0.92) !important;
}
.bb-media-model-container,
.bb-media-model-inner,
.bb-media-model-wrapper .bb-media-info-section,
.bb-media-info-section.media,
.bb-media-info-section.document,
.bb-media-model-container.bb-document-theater {
    background: #111111 !important;
    border-color: #252525 !important;
    color: #e8e8e8 !important;
}
/* all text inside the info/comments column → light */
.bb-media-info-section,
.bb-media-info-section h1, .bb-media-info-section h2,
.bb-media-info-section h3, .bb-media-info-section h4,
.bb-media-info-section p, .bb-media-info-section span,
.bb-media-info-section a, .bb-media-info-section li,
.bb-media-info-section .activity-header,
.bb-media-info-section .activity-header a,
.bb-media-info-section .activity-list .activity-content,
.bb-media-info-section time,
.bb-media-info-section .activity-time-since {
    color: #e8e8e8 !important;
}
.bb-media-info-section .activity-time-since,
.bb-media-info-section time {
    color: #888888 !important;
}
.bb-media-info-section a:hover,
.bb-media-info-section .activity-header a:hover {
    color: #FFBC00 !important;
}
/* comment composer inside the theatre */
.bb-media-info-section .ac-form,
.bb-media-info-section .ac-textarea,
.bb-media-info-section textarea,
.bb-media-info-section input[type="text"] {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: #fff !important;
}
.bb-media-info-section textarea::placeholder,
.bb-media-info-section input[type="text"]::placeholder {
    color: #777 !important;
}
/* privacy dropdown shown in the theatre header */
.bb-media-info-section .bb-media-privacy-wrap,
.bb-media-info-section .media-privacy,
.bb-media-privacy-wrap .media-privacy {
    background: #1a1a1a !important;
    border-color: #252525 !important;
    color: #e8e8e8 !important;
}
/* theatre close button */
.bb-close-media-theatre,
.bb-close-model,
.bb-close-document-theatre {
    color: #aaa !important;
}
.bb-close-media-theatre:hover,
.bb-close-model:hover { color: #fff !important; }

/* ------------------------------------------------------------
   GROUP MEDIA — actions toolbar + search bar (was white)
   Targets: .bb-media-actions-header / -wrap, .media-search-form
   ------------------------------------------------------------ */
.bb-media-actions-header,
.bb-media-actions-wrap,
.bb-media-section .bb-media-actions-header {
    background: transparent !important;
    border-color: #252525 !important;
    color: #e8e8e8 !important;
}
.media-search-form input[type="text"],
.media-search-form input[type="search"],
.bb-media-actions-wrap input[type="text"],
.bb-media-actions-wrap input[type="search"] {
    background: #111111 !important;
    border: 1px solid #1e1e1e !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}
.media-search-form input::placeholder,
.bb-media-actions-wrap input::placeholder { color: #777 !important; }

/* ------------------------------------------------------------
   SEND INVITES — member list cards (login-gated; styled from
   standard bp-nouveau invite classes, verify when logged in)
   ------------------------------------------------------------ */
.bp-invites-content .bp-invites-card,
.bp-invites-content li.selected,
.bp-invites-content .item,
#group-invites-container .bp-invites-content li {
    background: #1a1a1a !important;
    border: 1px solid #252525 !important;
    color: #e8e8e8 !important;
}
.bp-invites-content .bp-invites-card .name,
.bp-invites-content .bp-invites-card a,
#group-invites-container .bp-invites-content li .name {
    color: #e8e8e8 !important;
}

/* ============================================================
   BUDDYBOSS DESIGN TOKENS — DARK OVERRIDE (the master switch)
   ------------------------------------------------------------
   BuddyBoss renders an inline `<style id="buddyboss_theme-style">
   :root{…}` block in <head> that drives almost every surface via
   CSS custom properties. The defaults are light (e.g.
   --bb-content-background-color:#FFFFFF), which is why containers
   like .bb-media-container kept coming back white. custom.css is
   enqueued last, so re-declaring these on :root wins by source
   order and recolours ALL BuddyBoss content surfaces site-wide in
   one place — no per-class chasing. Explicit per-class rules above
   (with !important) still take precedence where they exist.
   Scope kept to content/body/surface/border/text tokens; chrome
   tokens (header/sidenav/footer) are left to existing explicit
   rules. Accent --bb-primary-color (#FFBC00) intentionally kept.

   NOTE: BuddyBoss prints its inline :root block AFTER custom.css in
   the document, so a bare `:root` here would lose on source order.
   `html:root` (specificity 0,1,1 > 0,1,0) wins regardless of order.
   ============================================================ */
html:root {
    /* page + content backgrounds: light -> dark */
    --bb-body-background-color: #0a0a0a;
    --bb-body-background-color-rgb: 10, 10, 10;
    --bb-content-background-color: #111111;
    --bb-content-alternate-background-color: #1a1a1a;
    /* borders: light grey -> dark */
    --bb-content-border-color: #252525;
    --bb-content-border-color-rgb: 37, 37, 37;
    /* text: dark-on-white -> light-on-dark */
    --bb-body-text-color: #cfcfcf;
    --bb-body-text-color-rgb: 207, 207, 207;
    --bb-headings-color: #ffffff;
    --bb-headings-color-rgb: 255, 255, 255;
    --bb-alternate-text-color: #888888;
    --bb-alternate-text-color-rgb: 136, 136, 136;
    /* gele/primaire knoppen (#FFBC00) hadden WITTE tekst -> zwart, leesbaar.
       Geldt site-breed voor alle BuddyBoss primary (gevulde gele) knoppen. */
    --bb-primary-button-text-regular: #000000;
    --bb-primary-button-text-hover: #000000;
    --bb-primary-button-text-active: #000000;
    --bb-primary-button-text-focus: #000000;
}

/* ============================================================
   KENNISBANK — single article reading view
   ------------------------------------------------------------
   The bm_kennisbank CPT (slug /kennisbank-article/) has no custom
   template, so it falls back to BuddyBoss's generic BLOG single
   layout (template-parts/content.php: .entry-title / .entry-media
   / .entry-content / .post-meta-wrapper-main + sidebar + comments
   + author/share/related). That reads poorly for a KB article, so
   we reshape it into a clean reading column. Palette matches the
   .bm-kb listing the user clicks in from (Inter, gold #C9A84C).
   Login-gated, so styled from the template markup (not live DOM).
   ============================================================ */

/* drop the blog sidebar; let content use the full width */
body.single-bm_kennisbank #secondary,
body.single-bm_kennisbank .sidebar,
body.single-bm_kennisbank .widget-area { display: none !important; }
body.single-bm_kennisbank #primary,
body.single-bm_kennisbank .content-area {
    width: 100% !important; max-width: 100% !important; float: none !important;
}

/* the centered reading column */
body.single-bm_kennisbank .site-main > article,
body.single-bm_kennisbank article.post {
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 24px 20px 64px !important;
    background: transparent !important;
    border: none !important;
    font-family: Inter, 'DM Sans', sans-serif !important;
}

/* title */
body.single-bm_kennisbank .entry-title {
    color: #fff !important;
    font-size: 34px !important; line-height: 1.2 !important;
    font-weight: 800 !important; letter-spacing: -0.01em;
    margin: 0 0 12px !important;
}

/* category badge + meta */
body.single-bm_kennisbank .cat-links a {
    display: inline-block;
    background: #0f0b02 !important; color: #C9A84C !important;
    border: 1px solid #C9A84C !important; border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: .04em; text-transform: uppercase; text-decoration: none !important;
}
body.single-bm_kennisbank .post-meta-wrapper-main,
body.single-bm_kennisbank .entry-meta,
body.single-bm_kennisbank .post-date { color: #888 !important; font-size: 13px !important; }

/* featured image as a hero */
body.single-bm_kennisbank .entry-media,
body.single-bm_kennisbank .entry-img {
    border-radius: 14px !important; overflow: hidden !important; margin: 0 0 28px !important;
}
body.single-bm_kennisbank .entry-media img {
    width: 100% !important; height: auto !important; display: block; border-radius: 14px !important;
}

/* body typography */
body.single-bm_kennisbank .entry-content { color: #cfcfcf !important; font-size: 16px !important; line-height: 1.75 !important; }
body.single-bm_kennisbank .entry-content p { margin: 0 0 18px !important; color: #cfcfcf !important; }
body.single-bm_kennisbank .entry-content h2 { color: #fff !important; font-size: 24px !important; font-weight: 800 !important; margin: 36px 0 12px !important; }
body.single-bm_kennisbank .entry-content h3 { color: #fff !important; font-size: 19px !important; font-weight: 700 !important; margin: 28px 0 10px !important; }
body.single-bm_kennisbank .entry-content a { color: #C9A84C !important; text-decoration: underline; }
body.single-bm_kennisbank .entry-content a:hover { color: #b8943e !important; }
body.single-bm_kennisbank .entry-content ul,
body.single-bm_kennisbank .entry-content ol { margin: 0 0 18px 22px !important; color: #cfcfcf !important; }
body.single-bm_kennisbank .entry-content li { margin: 6px 0 !important; line-height: 1.7 !important; }
body.single-bm_kennisbank .entry-content img { max-width: 100% !important; height: auto !important; border-radius: 10px !important; margin: 18px 0 !important; }
body.single-bm_kennisbank .entry-content blockquote {
    border-left: 3px solid #C9A84C !important; background: #141414 !important;
    margin: 22px 0 !important; padding: 14px 18px !important;
    border-radius: 0 8px 8px 0 !important; color: #ddd !important;
}
body.single-bm_kennisbank .entry-content pre,
body.single-bm_kennisbank .entry-content code {
    background: #0d0d0d !important; border: 1px solid #252525 !important;
    border-radius: 8px !important; color: #e8e8e8 !important;
}
body.single-bm_kennisbank .entry-content pre { padding: 14px 16px !important; overflow: auto !important; }

/* hide blog-centric chrome that doesn't belong on a KB article */
body.single-bm_kennisbank .bb-share-box,
body.single-bm_kennisbank .post-author-box,
body.single-bm_kennisbank .post-author,
body.single-bm_kennisbank #comments,
body.single-bm_kennisbank .comments-area,
body.single-bm_kennisbank .related-posts,
body.single-bm_kennisbank .bb-related-posts { display: none !important; }

/* ============================================================
   FULL-SITE DARK SWEEP — remaining hardcoded-white surfaces
   ------------------------------------------------------------
   The html:root token override handles variable-driven surfaces;
   header/panel/footer are handled by explicit rules above. These
   components hardcode #fff/#F2F4F5/#FAFBFD in the compiled theme +
   buddypress CSS, so they need explicit overrides. Selectors were
   harvested directly from theme.min.css / buddypress.min.css and
   confirmed against logged-in pages. Palette: #111 surface, #1a1a1a
   alt, #252525 border, #e8e8e8/#cfcfcf text, #C9A84C accent.
   (Avatars, croppie cropper, toggle knobs, checkbox/radio marks
    are intentionally left untouched.)
   ============================================================ */

/* ---- Dropdown / account / nav menus + popovers (were white) ---- */
.ab-submenu, .bb-sub-menu,
.site-header .ab-submenu,
#header-aside .bb-my-account-menu .sub-menu,
.header-aside .wrapper li .wrapper,
.bs-dropdown, .dropdown:not(.v-select),
.act-dropdown, .bb-more-menu-nav,
.bb-help-content,
#member-list .member-options-wrap .member-options-menu,
.messages .ac_results {
    background: #111111 !important;
    border: 1px solid #252525 !important;
    color: #e8e8e8 !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.5) !important;
}
.ab-submenu a, .bb-sub-menu a,
#header-aside .bb-my-account-menu .sub-menu a,
.header-aside .wrapper li .wrapper a,
.bs-dropdown a, .dropdown:not(.v-select) a,
.act-dropdown a, .bb-more-menu-nav a,
.messages .ac_results li, .messages .ac_results a {
    color: #cfcfcf !important;
}
.ab-submenu a:hover, .bb-sub-menu a:hover,
#header-aside .bb-my-account-menu .sub-menu a:hover,
.bs-dropdown a:hover, .act-dropdown a:hover,
.bb-more-menu-nav a:hover,
.messages .ac_results li:hover { color: #C9A84C !important; background: #1a1a1a !important; }
/* arrow/caret pseudo-elements on these menus */
.ab-submenu:before, .bb-sub-menu:before,
.header-aside .wrapper li .wrapper:before,
#header-aside .bb-my-account-menu .sub-menu::before { border-bottom-color: #111111 !important; background: transparent !important; }

/* ---- select2 dropdowns ---- */
.select2-dropdown,
body .select2-container .select2-dropdown,
.select2-results__options {
    background: #111111 !important;
    border-color: #252525 !important;
    color: #e8e8e8 !important;
}
.select2-results__option { background: transparent !important; color: #cfcfcf !important; }
.select2-results__option--highlighted,
.select2-results__option[aria-selected="true"] { background: #1a1a1a !important; color: #fff !important; }
.select2-container--default .select2-selection,
.select2-search--dropdown .select2-search__field {
    background: #111111 !important; border-color: #252525 !important; color: #fff !important;
}

/* ---- Header search ---- */
.header-search-wrap,
.header-search-wrap .search-form-section,
.bb-search-results-dropdown {
    background: #111111 !important; border-color: #252525 !important; color: #e8e8e8 !important;
}

/* ---- Secondary / inverted buttons (were white) ---- */
.buddypress-wrap .button.secondary, .buddypress-wrap .button.inverted,
.buddypress-wrap a.button.secondary, .buddypress-wrap a.button.inverted,
.buddypress-wrap button.secondary, .buddypress-wrap button.inverted,
.buddypress-wrap input[type=submit].secondary, .buddypress-wrap input[type=submit].inverted,
.buddypress-wrap input[type=button].secondary, .buddypress-wrap input[type=reset].secondary,
.buddypress-wrap .generic-button a.secondary, .buddypress-wrap .generic-button a.inverted,
.buddypress-wrap a.bp-title-button.secondary, .buddypress-wrap a.bp-title-button.inverted,
.button.secondary, .button.inverted, .message.inverted, .bg-inverted {
    background: #1a1a1a !important;
    border: 1px solid #333333 !important;
    color: #e8e8e8 !important;
}
.buddypress-wrap .button.secondary:hover, .buddypress-wrap .button.inverted:hover,
.button.secondary:hover, .button.inverted:hover {
    background: #222222 !important; color: #ffffff !important; border-color: #C9A84C !important;
}

/* ---- Tables (forum / profile fields / report tables) ---- */
.buddypress-wrap table.forum,
.buddypress-wrap table.wp-profile-fields,
.buddypress-wrap .bp-tables-user,
.buddypress-wrap .bp-tables-report,
.bp_ld_report_table_wrapper .bp_ld_report_table thead tr {
    background: #111111 !important; color: #e8e8e8 !important; border-color: #252525 !important;
}
.buddypress-wrap table.forum th, .buddypress-wrap table.forum td,
.buddypress-wrap table.wp-profile-fields th, .buddypress-wrap table.wp-profile-fields td,
.buddypress-wrap .bp-tables-user th, .buddypress-wrap .bp-tables-user td {
    border-color: #252525 !important; color: #cfcfcf !important;
}
.buddypress-wrap table thead tr { background: #1a1a1a !important; }

/* ---- Profile / group sub-nav + headers + list wrappers ---- */
#item-nav, #item-nav .item-list-tabs,
.group-invites #item-body .bp-navs.group-subnav,
.bs-activity-wrap, .bs-item-list-inner,
.bb-group-header-wrapper, .group-members-heading {
    background: transparent !important;
    border-color: #252525 !important;
    color: #e8e8e8 !important;
}

/* ---- Cards / surfaces that were white ---- */
.recent-visitors,
.bb-invite-anyone-wrap,
.bb-create-group-container .bb-privary-box,
.bb-shared-poll .poll-item,
.bb-single-bp-content,
.bb-meeting-container,
.group-item-avatar {
    background: #111111 !important;
    border-color: #252525 !important;
    color: #e8e8e8 !important;
}

/* ---- Activity comment composer textarea ---- */
form.ac-form .ac-reply-content .ac-textarea textarea,
form.ac-form .ac-reply-content .ac-textarea textarea:focus {
    background: #1a1a1a !important; border: 1px solid #333 !important; color: #fff !important;
}
form.ac-form .ac-reply-content .ac-textarea textarea::placeholder { color: #777 !important; }

/* ---- SureForms payment dashboard panels ---- */
.srfm-pd-panel, .srfm-pd-section {
    background: #111111 !important; border-color: #252525 !important; color: #e8e8e8 !important;
}

/* ============================================================
   CONTACT PAGE (page id 301) — premium dark/gold look
   ------------------------------------------------------------
   Keeps the existing Spectra content + SureForms form, drops the
   image, and layers on the homepage aesthetic: Anton display
   headings, gold accents, dark inputs with gold focus, gold
   submit button. Scoped to body.page-id-301 so nothing leaks.
   Palette matches .bm-home (gold #C9A84C, text #EFEBE0).
   ============================================================ */

/* drop the decorative image */
body.page-id-301 .entry-content .uagb-block-259aae54,
body.page-id-301 .entry-content .wp-block-uagb-image { display: none !important; }

/* headings -> Anton, uppercase, off-white */
body.page-id-301 .entry-content .uagb-heading-text,
body.page-id-301 .entry-content h1,
body.page-id-301 .entry-content h2,
body.page-id-301 .entry-content h3 {
    font-family: 'Anton', Impact, sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
    color: #EFEBE0 !important;
    font-weight: 400 !important;
    line-height: 1.08 !important;
}
body.page-id-301 .entry-content h1.uagb-heading-text {
    font-size: clamp(2.1rem, 6vw, 3.2rem) !important;
    position: relative !important;
    padding-bottom: 16px !important;
    margin-bottom: 6px !important;
}
/* gold accent bar under the main heading */
body.page-id-301 .entry-content h1.uagb-heading-text::after {
    content: "" !important;
    position: absolute !important; left: 0; bottom: 0;
    width: 64px; height: 3px;
    background: linear-gradient(90deg, #EDD389, #C9A84C) !important;
    border-radius: 99px !important;
}
body.page-id-301 .entry-content h2.uagb-heading-text { font-size: clamp(1.5rem, 4.5vw, 2.1rem) !important; }

/* body text / list items -> light */
body.page-id-301 .entry-content .uagb-desc-text,
body.page-id-301 .entry-content p,
body.page-id-301 .entry-content li,
body.page-id-301 .entry-content .uagb-icon-list__label {
    color: #cfcfcf !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}
/* gold social icons + links */
body.page-id-301 .entry-content .uagb-icon-list__source-wrap svg,
body.page-id-301 .entry-content .uagb-icon-list__source-wrap svg path {
    fill: #C9A84C !important;
}
body.page-id-301 .entry-content .uagb-icon-list-child:hover .uagb-icon-list__source-wrap svg path {
    fill: #EDD389 !important;
}

/* ============================================================
   HOMEPAGE "Over ons" — the over-ons page content appended at the
   bottom of .bm-home, restyled to match (Anton headings, light
   text, transparent Spectra containers). do_blocks output keeps
   uagb-* classes, so we target those within .bm-home .bm-about.
   ============================================================ */
/* margin-top is handled by .bm-home .wrap (60px) so the space sits above the
   divider line, not between the line and the "Over ons" text. */
.bm-home .bm-about { border-top: 1px solid var(--border); padding-top: 52px; }
.bm-home .bm-about-lead {
    font-family: var(--display); text-transform: uppercase; letter-spacing: .02em;
    color: var(--text); font-weight: 400; line-height: 1.08;
    font-size: clamp(1.7rem, 5vw, 2.5rem); margin: 4px 0 6px;
}
.bm-home .bm-about-intro { color: var(--gold); font-size: .95rem; letter-spacing: .04em; margin: 0 0 28px; max-width: 540px; }
.bm-home .bm-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bm-home .bm-about-card {
    position: relative; overflow: hidden;
    background: var(--card2); border: 1px solid var(--border); border-radius: 14px;
    padding: 22px 22px 22px 26px;
    transition: border-color .25s ease, transform .25s ease;
}
.bm-home .bm-about-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, transparent);
}
.bm-home .bm-about-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.bm-home .bm-about-card h3 {
    font-family: var(--display); text-transform: uppercase; letter-spacing: .02em;
    color: var(--text); font-weight: 400; font-size: 1.15rem; line-height: 1.15; margin: 0 0 10px;
}
.bm-home .bm-about-card p { color: #cfcfcf; font-size: .9rem; line-height: 1.7; margin: 0; }
/* the over-ons images don't fit — never show them in this section */
.bm-home .bm-about img, .bm-home .bm-about-body img { display: none !important; }
@media (max-width: 640px) { .bm-home .bm-about-grid { grid-template-columns: 1fr; } }

/* remove the stray ::before background on the over-ons block (page 298) */
body.page-id-298 .uagb-block-b7e83894::before {
    background: none !important;
    background-color: transparent !important;
}
body.page-id-301 .entry-content a { color: #C9A84C !important; }
body.page-id-301 .entry-content a:hover { color: #EDD389 !important; }

/* ---- SureForms form: single dark card ---- */
body.page-id-301 .srfm-form-container {
    background: #141414 !important;
    border: 1px solid #262626 !important;
    border-radius: 16px !important;
    padding: 26px 24px !important;
}
body.page-id-301 .srfm-label,
body.page-id-301 .srfm-block label {
    color: #cfcfcf !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 600 !important;
}
body.page-id-301 .srfm-input-common,
body.page-id-301 .srfm-input-input,
body.page-id-301 .srfm-input-email,
body.page-id-301 .srfm-input-textarea,
body.page-id-301 .srfm-block input[type="text"],
body.page-id-301 .srfm-block input[type="email"],
body.page-id-301 .srfm-block textarea {
    background: #0f0f0f !important;
    border: 1px solid #262626 !important;
    border-radius: 10px !important;
    color: #EFEBE0 !important;
}
body.page-id-301 .srfm-input-common:focus,
body.page-id-301 .srfm-block input:focus,
body.page-id-301 .srfm-block textarea:focus {
    border-color: #C9A84C !important;
    box-shadow: 0 0 0 2px rgba(201,168,76,.15) !important;
    outline: none !important;
}
body.page-id-301 .srfm-block ::placeholder { color: #777 !important; }

/* submit -> gold gradient (matches .bm-home .gbtn) */
body.page-id-301 .srfm-submit-button,
body.page-id-301 .srfm-submit-container button,
body.page-id-301 button.srfm-button {
    background: linear-gradient(180deg, #EDD389, #C9A84C) !important;
    color: #141004 !important;
    border: none !important;
    border-radius: 12px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 800 !important;
    padding: 12px 26px !important;
    text-transform: none !important;
    transition: filter .2s ease !important;
}
body.page-id-301 .srfm-submit-button:hover,
body.page-id-301 .srfm-submit-container button:hover { filter: brightness(1.06) !important; }

/* ============================================================
   LIST-ROW SPACING — BuddyBoss ships list-view rows with
   margin-bottom:-1px (a flush "shared-border" list, table-style).
   Our dark redesign renders them as rounded cards, so the rows
   collide / sit flush against each other. Give every such row real
   separation. Site-wide scan covered: forums topics, members &
   groups directories (list-view), search results, friends, group
   invites / send-invites, membership requests, manage-members.
   (In grid-view these wrappers are display:contents, so this only
   affects list-view; nav/tab/subnav selectors that also use -1px
   are intentionally left alone.)
   ============================================================ */
.bs-item-list.list-view .bs-item-wrap,
#buddypress .groups-manage-members-list ul.item-list > li,
.groups.group-create .buddypress-wrap .bp-invites-content #members-list li,
#item-body #group-invites-container .bp-invites-content .item-list > li,
#group-settings-form #request-list li,
#friend-list.item-list .list-wrap,
#members-list.item-list .list-wrap,
.item-list.bp-search-results-list .list-wrap,
.item-list.groups-list .list-wrap {
    margin-bottom: 16px !important;
}

/* ============================================================
   FORUM DISCUSSION (single topic) — REDESIGN v2 (id-specificity)
   Rebuilt with #bbpress-forums prefixes so it OVERRIDES BuddyBoss's
   id-level !important rules (why v1 didn't visibly change). Flat
   Discourse/GitHub-style timeline: connecting thread line, avatar +
   indented content, role chips, clean composer. ALL features kept
   (reply, subscribe, favorite, admin dropdown, report, @mentions,
   media/video/doc attach, pagination). Scope: body.single-topic.
   ============================================================ */
body.single-topic .bbp-breadcrumb { font-size:13px !important; color:#8a8578 !important; margin-bottom:14px !important; background:transparent !important; border:none !important; padding:0 !important; }
body.single-topic .bbp-breadcrumb a { color:#8a8578 !important; text-decoration:none !important; }
body.single-topic .bbp-breadcrumb a:hover { color:#C9A84C !important; }
body.single-topic .bbp-breadcrumb-current { color:#cfcfcf !important; }
body.single-topic .bbp-breadcrumb-sep { color:#3a3a3a !important; margin:0 7px !important; }

body.single-topic .entry-title,
body.single-topic #bbpress-forums .bb-reply-topic-title,
body.single-topic #bbpress-forums .bbp-topic-title { color:#fff !important; font-weight:800 !important; line-height:1.2 !important; font-size:clamp(1.5rem,4vw,2rem) !important; }
body.single-topic #bbpress-forums .bs-item-wrap.bs-header-item { display:flex !important; align-items:center !important; gap:14px !important; flex-wrap:wrap !important; background:transparent !important; border:none !important; border-radius:0 !important; padding:0 0 16px !important; margin:0 0 4px !important; border-bottom:1px solid rgba(255,255,255,.10) !important; }
body.single-topic #bbpress-forums .bs-header-item .bbp-forum-buttons-wrap,
body.single-topic #bbpress-forums .bs-header-item .bb-topic-states,
body.single-topic #bbpress-forums .bs-header-item .action { margin-left:auto !important; display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important; }
body.single-topic #bbpress-forums .bs-item-wrap.bs-header-item.header-total-reply-count,
body.single-topic #bbpress-forums .header-total-reply-count { border-bottom:none !important; padding:14px 0 2px !important; margin:0 !important; color:#8a8578 !important; font-size:12.5px !important; letter-spacing:.05em !important; text-transform:uppercase !important; }

/* POSTS -> flat timeline rows */
body.single-topic #bbpress-forums .bs-single-reply-list,
body.single-topic #bbpress-forums .bb-single-reply-list,
body.single-topic #bbpress-forums .bbp-lead-topic,
body.single-topic #bbpress-forums .bs-item-list.list-view { background:transparent !important; border:none !important; box-shadow:none !important; }
body.single-topic #bbpress-forums .bs-reply-list-item,
body.single-topic #bbpress-forums .bbp-lead-topic .bs-item-wrap:not(.bs-header-item) { background:transparent !important; border:none !important; border-radius:0 !important; box-shadow:none !important; margin:0 !important; padding:24px 0 22px 0 !important; position:relative !important; border-bottom:1px solid rgba(255,255,255,.07) !important; }
/* connecting thread line behind avatars */
body.single-topic #bbpress-forums .bs-reply-list-item::before,
body.single-topic #bbpress-forums .bbp-lead-topic .bs-item-wrap:not(.bs-header-item)::before { content:"" !important; position:absolute !important; left:23px !important; top:60px !important; bottom:-1px !important; width:2px !important; background:rgba(255,255,255,.07) !important; pointer-events:none !important; }
body.single-topic #bbpress-forums .bb-single-reply-list .bs-reply-list-item:last-child { border-bottom:none !important; }
body.single-topic #bbpress-forums .bb-single-reply-list .bs-reply-list-item:last-child::before { display:none !important; }

/* post header */
body.single-topic #bbpress-forums .bs-reply-header { display:flex !important; align-items:flex-start !important; gap:14px !important; margin:0 0 10px !important; padding:0 !important; border:none !important; position:relative !important; z-index:1 !important; }
body.single-topic #bbpress-forums .bbp-reply-author.item-avatar { flex:0 0 auto !important; margin:0 !important; }
body.single-topic #bbpress-forums .bbp-author-avatar img,
body.single-topic #bbpress-forums .bbp-reply-author .avatar { width:46px !important; height:46px !important; border-radius:50% !important; border:1px solid #2a2419 !important; background:#0a0a0a !important; }
body.single-topic #bbpress-forums .bbp-lead-topic .bbp-author-avatar img { box-shadow:0 0 0 2px #C9A84C !important; }
body.single-topic #bbpress-forums .item-meta.flex-1 { display:flex !important; flex-direction:column !important; gap:2px !important; min-width:0 !important; padding-top:2px !important; }
body.single-topic #bbpress-forums .bbp-author-name { color:#fff !important; font-weight:700 !important; font-size:15px !important; line-height:1.2 !important; }
body.single-topic #bbpress-forums .bbp-author-link:hover .bbp-author-name { color:#C9A84C !important; }
body.single-topic #bbpress-forums .bbp-author-role { display:inline-flex !important; align-items:center !important; width:auto !important; align-self:flex-start !important; background:rgba(201,168,76,.10) !important; border:1px solid rgba(201,168,76,.35) !important; color:#C9A84C !important; font-size:10.5px !important; font-weight:700 !important; letter-spacing:.05em !important; text-transform:uppercase !important; padding:2px 8px !important; border-radius:99px !important; margin-top:3px !important; }
body.single-topic #bbpress-forums .bs-timestamp,
body.single-topic #bbpress-forums .bbp-reply-post-date { color:#8a8578 !important; font-size:12.5px !important; }
body.single-topic #bbpress-forums .bbp-meta.push-right,
body.single-topic #bbpress-forums .more-actions.bb-reply-actions { margin-left:auto !important; }

/* content (indented under the name) */
body.single-topic #bbpress-forums .bbp-reply-content,
body.single-topic #bbpress-forums .bs-forum-content { color:#cfcfcf !important; font-size:15px !important; line-height:1.75 !important; padding-left:60px !important; }
body.single-topic #bbpress-forums .bbp-reply-content p,
body.single-topic #bbpress-forums .bs-forum-content p { color:#cfcfcf !important; margin-bottom:14px !important; }
body.single-topic #bbpress-forums .bbp-reply-content a,
body.single-topic #bbpress-forums .bs-forum-content a { color:#C9A84C !important; text-decoration:underline; }
body.single-topic #bbpress-forums .bbp-reply-content img { max-width:100% !important; height:auto !important; border-radius:10px !important; }
body.single-topic #bbpress-forums .bbp-reply-content blockquote { border-left:3px solid #C9A84C !important; background:rgba(255,255,255,.03) !important; margin:14px 0 !important; padding:10px 16px !important; border-radius:0 8px 8px 0 !important; color:#ddd !important; }
@media(max-width:560px){ body.single-topic #bbpress-forums .bbp-reply-content, body.single-topic #bbpress-forums .bs-forum-content { padding-left:0 !important; } body.single-topic #bbpress-forums .bs-reply-list-item::before, body.single-topic #bbpress-forums .bbp-lead-topic .bs-item-wrap:not(.bs-header-item)::before { display:none !important; } }

/* per-post action bar */
body.single-topic #bbpress-forums .bbp-reply-to-link,
body.single-topic #bbpress-forums .bbp-admin-links a,
body.single-topic #bbpress-forums .bb-reply-actions-button,
body.single-topic #bbpress-forums .bbp-reply-edit-link { color:#8a8578 !important; font-size:13px !important; font-weight:600 !important; text-decoration:none !important; }
body.single-topic #bbpress-forums .bbp-reply-to-link:hover,
body.single-topic #bbpress-forums .bbp-admin-links a:hover,
body.single-topic #bbpress-forums .bb-reply-actions-button:hover { color:#C9A84C !important; }
body.single-topic #bbpress-forums .bbp-reply-to-link { display:inline-flex !important; align-items:center !important; gap:6px !important; margin:14px 0 0 60px !important; border:1px solid #252525 !important; border-radius:8px !important; padding:6px 14px !important; transition:border-color .2s,color .2s !important; }
body.single-topic #bbpress-forums .bbp-reply-to-link:hover { border-color:#C9A84C !important; }

/* composer */
body.single-topic #bbpress-forums .bbp-reply-form,
body.single-topic #new-post { background:#0f0f0f !important; border:none !important; border-radius:16px !important; padding:20px !important; }
body.single-topic #bbpress-forums .bbp-reply-form legend,
body.single-topic #new-post .bbp-form-title { color:#fff !important; font-weight:800 !important; font-size:15px !important; margin-bottom:12px !important; }
body.single-topic #bbp_reply_content,
body.single-topic #bbpress-forums .bbp-the-content { background:#0a0a0a !important; border:1px solid #262626 !important; border-radius:10px !important; color:#EFEBE0 !important; min-height:120px !important; }
body.single-topic #bbpress-forums .post-elements-buttons-item,
body.single-topic #bbpress-forums .toolbar-button { color:#8a8578 !important; border-radius:8px !important; transition:color .2s,background .2s !important; }
body.single-topic #bbpress-forums .post-elements-buttons-item:hover,
body.single-topic #bbpress-forums .toolbar-button:hover { color:#C9A84C !important; background:rgba(201,168,76,.08) !important; }
body.single-topic #bbpress-forums .bbp-submit-wrapper { display:flex !important; gap:10px !important; align-items:center !important; flex-wrap:wrap !important; margin-top:14px !important; }
body.single-topic #bbpress-forums .bbp-submit-wrapper input[type="submit"],
body.single-topic #bbpress-forums .bbp-submit-wrapper button.submit,
body.single-topic #bbpress-forums .bbp-submit-wrapper button[type="submit"] { background:linear-gradient(180deg,#EDD389,#C9A84C) !important; color:#141004 !important; border:none !important; border-radius:10px !important; font-weight:800 !important; padding:11px 24px !important; }

/* pagination */
body.single-topic #bbpress-forums .bbp-pagination { margin:18px 0 !important; text-align:center !important; background:transparent !important; border:none !important; }
body.single-topic #bbpress-forums .bbp-pagination .page-numbers,
body.single-topic #bbpress-forums .bbp-pagination-link { color:#8a8578 !important; border:1px solid #252525 !important; border-radius:8px !important; padding:6px 12px !important; margin:0 3px !important; text-decoration:none !important; display:inline-block !important; }
body.single-topic #bbpress-forums .bbp-pagination .page-numbers:hover,
body.single-topic #bbpress-forums .bbp-pagination-link:hover { border-color:#C9A84C !important; color:#C9A84C !important; }
body.single-topic #bbpress-forums .bbp-pagination .page-numbers.current { background:#C9A84C !important; color:#141004 !important; border-color:#C9A84C !important; }

/* ============================================================
   FORUMS — unified button system + forum/bro-chat layout
   Scope: body.bbpress (topic, single forum, forum archive). All
   features kept; buttons get a consistent gold-primary / dark-ghost
   / toggle treatment, and the forum header + topic rows are cleaned
   up. Palette matches the site (gold #C9A84C, dark #141414/#0f0f0f).
   ============================================================ */

/* --- PRIMARY buttons (gold) --- */
body.bbpress .btn-new-topic,
body.bbpress .bbp-topic-reply-link,
body.bbpress #bbpress-forums .button.submit,
body.bbpress .bbp-submit-wrapper input[type="submit"],
body.bbpress .bbp-submit-wrapper button[type="submit"],
body.bbpress .report-submit.button,
body.bbpress .bb-create-topic-button {
    background: linear-gradient(180deg, #EDD389, #C9A84C) !important;
    color: #141004 !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    font-size: .88rem !important;
    padding: 11px 22px !important;
    letter-spacing: .01em !important;
    box-shadow: none !important;
    transition: filter .2s ease, transform .15s ease !important;
}
body.bbpress .btn-new-topic:hover,
body.bbpress .bbp-topic-reply-link:hover,
body.bbpress #bbpress-forums .button.submit:hover,
body.bbpress .bbp-submit-wrapper input[type="submit"]:hover,
body.bbpress .report-submit.button:hover {
    filter: brightness(1.06) !important;
    transform: translateY(-1px) !important;
    color: #141004 !important;
}

/* --- SECONDARY / ghost buttons --- */
body.bbpress .button.outline,
body.bbpress .bb_discard_topic_reply_draft,
body.bbpress .bb-cancel-report-content.button,
body.bbpress .bb-model-close-button.button {
    background: transparent !important;
    border: 1px solid #333333 !important;
    color: #cfcfcf !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    padding: 10px 18px !important;
    transition: border-color .2s, color .2s !important;
}
body.bbpress .button.outline:hover,
body.bbpress .bb_discard_topic_reply_draft:hover,
body.bbpress .bb-cancel-report-content.button:hover {
    border-color: #C9A84C !important; color: #C9A84C !important;
}

/* --- TOGGLE buttons (subscribe / favorite) as quiet pills --- */
body.bbpress .subscription-toggle,
body.bbpress .favorite-toggle {
    background: transparent !important;
    border: 1px solid #252525 !important;
    color: #8a8578 !important;
    border-radius: 99px !important;
    padding: 7px 14px !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    transition: border-color .2s, color .2s !important;
}
body.bbpress .subscription-toggle:hover,
body.bbpress .favorite-toggle:hover { border-color: #C9A84C !important; color: #C9A84C !important; }
body.bbpress .subscription-toggle.is-subscribed,
body.bbpress .is-subscribed .subscription-toggle,
body.bbpress .favorite-toggle.is-favorite {
    color: #C9A84C !important; border-color: rgba(201,168,76,.45) !important; background: rgba(201,168,76,.08) !important;
}

/* editor toolbar icons in the composer — quiet, gold on hover */
body.bbpress .toolbar-button { color: #8a8578 !important; border-radius: 8px !important; transition: color .2s, background .2s !important; }
body.bbpress .toolbar-button:hover { color: #C9A84C !important; background: rgba(201,168,76,.08) !important; }

/* --- Sidebar: no double-active. On a single forum (e.g. Bro Chat) WP also
   lights up the "Forums"/"All Forums" archive item. Force that archive item
   back to inactive in the BuddyPanel so only the forum's own item (Bro Chat)
   shows active. (The PHP filter strips the class too; this guarantees the
   visual regardless of cache/walker.) --- */
body.single-forum .buddypanel .buddypanel-menu li.menu-item-type-post_type_archive.menu-item-object-forum > a,
body.single-forum .buddypanel .buddypanel-menu li.menu-item-type-post_type_archive.menu-item-object-forum.current-menu-item > a,
body.single-forum .buddypanel .buddypanel-menu li.menu-item-type-post_type_archive.menu-item-object-forum.current-menu-ancestor > a {
    color: #9a9a9a !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}
body.single-forum .buddypanel .buddypanel-menu li.menu-item-type-post_type_archive.menu-item-object-forum > a i {
    color: #9a9a9a !important;
}

/* ============================================================
   FORUMS — FLAT "LEDGER" REDESIGN (kill "container syndrome")
   These components ship as heavy detached boxes (theme + our
   earlier dark pass). We OVERRIDE them flat: transparent surfaces,
   NO per-item card, razor-thin dividers, condensed rows + small
   thumbnails. Reference: Linear / GitHub / Discourse. Scope: forum
   pages only, so member/group directories keep their own styling.
   ============================================================ */

/* ---- THREAD / TOPIC ROWS → flat ledger (single forum + index recent) ---- */
body.bbpress .bs-forums-items.list-view,
body.bbpress .bs-forums-items.list-view .bs-item-list-inner { background: transparent !important; border: none !important; }
body.bbpress .bs-forums-items.list-view > li .bs-item-wrap:not(.bs-header-item) {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 15px 4px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    transition: background .15s ease !important;
}
body.bbpress .bs-forums-items.list-view > li:last-child .bs-item-wrap:not(.bs-header-item) { border-bottom: none !important; }
body.bbpress .bs-forums-items.list-view > li .bs-item-wrap:not(.bs-header-item):hover { background: rgba(255,255,255,0.02) !important; }
body.bbpress .bs-forums-items.list-view .bs-item-wrap .item-avatar img,
body.bbpress .bs-forums-items.list-view .bs-item-wrap .bbp-author-avatar img {
    width: 38px !important; height: 38px !important; border-radius: 50% !important;
}

/* ---- SINGLE FORUM action bar ("All Discussions" + Subscribe/New) ---- */
body.single-forum .bs-forums-items.list-view .bs-item-wrap.bs-header-item {
    background: transparent !important; border: none !important; border-radius: 0 !important;
    box-shadow: none !important; margin: 4px 0 4px !important; padding: 0 4px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    display: flex !important; align-items: center !important; gap: 14px !important;
}
body.single-forum .bs-header-item .bs-section-title { color: #ffffff !important; font-weight: 800 !important; font-size: 17px !important; }
body.single-forum .bs-header-item .bbp-forum-buttons-wrap { margin-left: auto !important; display: flex !important; align-items: center !important; gap: 10px !important; }
body.single-forum .bbp-forum-content-wrap,
body.single-forum .bbp-forum-content { color: #8a8578 !important; font-size: .92rem !important; line-height: 1.6 !important; }

/* ---- FORUMS INDEX page title + rounded search ---- */
body.post-type-archive-forum .entry-title { color: #ffffff !important; font-weight: 800 !important; }
body.post-type-archive-forum .bs-dir-search,
body.post-type-archive-forum .bs-forums-search { border-radius: 12px !important; overflow: hidden !important; }
body.post-type-archive-forum .bs-dir-search input,
body.post-type-archive-forum .bs-forums-search input,
body.post-type-archive-forum .bs-dir-search form,
body.post-type-archive-forum .bs-forums-search form {
    border-radius: 12px !important;
}
body.post-type-archive-forum .bs-dir-search input[type="text"],
body.post-type-archive-forum .bs-dir-search input[type="search"],
body.post-type-archive-forum .bs-forums-search input {
    background: #111111 !important; border: 1px solid #262626 !important; color: #EFEBE0 !important; border-radius: 12px !important;
}
body.post-type-archive-forum .bs-dir-search input:focus { border-color: #C9A84C !important; box-shadow: 0 0 0 2px rgba(201,168,76,.15) !important; }

/* ============================================================
   FORUMS INDEX — 3-KOLOMS CATEGORIEGRID
   ------------------------------------------------------------
   De categorie-carousel (biggermen_forum_carousel) is uitgezet
   (add_action staat uit in functions.php), dus .bm-fcar-viewport/
   -track/-dots worden nooit meer aangemaakt: al die regels waren
   dood en zijn verwijderd. De kale <ul class="bb-forums-list
   bs-card-list"> stond op flex 0 0 33.33% + gap, waardoor 33.33%+gap
   > 100% en de 3e kaart doorwrapte naar rij 2. CSS-grid rekent de
   gap uit de tracks, dus 3 gelijke kolommen passen wél netjes.
   De zoekbalk staat in de entry-header (los van deze lijst) en blijft
   dus gewoon op de titelregel staan. ============================================================ */
body.post-type-archive-forum .bb-forums-list.bs-card-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin: 40px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
body.post-type-archive-forum .bb-forums-list.bs-card-list > li {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}
@media (max-width: 1000px) {
    body.post-type-archive-forum .bb-forums-list.bs-card-list { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    body.post-type-archive-forum .bb-forums-list.bs-card-list { grid-template-columns: 1fr !important; }
}
/* tighten the slide meta: kill the inherited left/top padding */
body.post-type-archive-forum #bbpress-forums .bb-forums-list .item,
body.post-type-archive-forum #bbpress-forums .bb-forum-content-wrap {
    padding-left: 0 !important;
    padding-top: 0 !important;
}

/* strip the bg/border from forum meta-item action links (lead topic + single-forum header) */
#bbpress-forums .bbp-lead-topic .bs-meta-item > a,
#bbpress-forums .bbp-lead-topic .bs-meta-item.bs-meta-item > a,
#bbpress-forums .bs-single-forum-list .bs-header-item .bs-meta-item > a {
    background: none !important;
    border: none !important;
}

/* pull the content grid up — SCOPED to the discussion page only
   (.bb-grid/.bb-grid-cell is the site-wide layout grid, so this is
   intentionally NOT applied globally). */
body.single-topic .bb-grid-cell:not(.no-gutter),
body.single-topic .bb-grid > :not(.no-gutter) {
    margin-top: -40px !important;
}

/* align the lead-topic action row left — SCOPED to the discussion page
   (.bs-forums-meta is also used on the single-forum + forums-index pages). */
body.single-topic #bbpress-forums .action.bs-forums-meta.flex.align-items-center {
    justify-content: flex-start !important;
}

/* ============================================================
   DISCUSSION — FEEDBACK PASS (on top of the v2 block)
   Fixes the floating action box + dead 40% + scattered actions as
   ONE thing: cap the reading column and anchor per-reply actions to
   the COLUMN edge (not the viewport). De-box the action cluster.
   Hover-reveal on desktop only (⋯ stays tappable on touch). Flat
   dividers (no surface). Tighten rhythm; reserve gold for Reply.
   ============================================================ */

/* 1+4+5. Cap the thread to a reading column (actions now anchor to
   the column edge via push-right -> no dead air). */
body.single-topic #bbpress-forums { margin-left: auto !important; margin-right: auto !important; }

/* 1+5. De-box the per-reply action cluster (overrides the global
   .bs-dropdown-wrap surface that was rendering the empty grey box). */
body.single-topic #bbpress-forums .bbp-meta.push-right,
body.single-topic #bbpress-forums .more-actions.bb-reply-actions,
body.single-topic #bbpress-forums .more-actions.bb-reply-actions.bs-dropdown-wrap,
body.single-topic #bbpress-forums .bs-dropdown-wrap-inner.bb-theme-actions {
    background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important;
}
body.single-topic #bbpress-forums .bbp-meta.push-right { margin-left: auto !important; }
body.single-topic #bbpress-forums .bs-dropdown-wrap-inner.bb-theme-actions { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
/* the dropdown POPOVER stays a dark card (only when open) */
body.single-topic #bbpress-forums .bs-dropdown.bb-reply-actions-dropdown { background: #111111 !important; border: 1px solid #252525 !important; box-shadow: 0 8px 28px rgba(0,0,0,.5) !important; }

/* Reply + ⋯ as clean inline controls (undo the v2 pill on reply-to) */
body.single-topic #bbpress-forums .bbp-reply-to-link {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    margin: 0 !important; padding: 5px 8px !important; border: none !important; border-radius: 6px !important;
    color: #8a8578 !important; font-size: 13px !important; font-weight: 600 !important;
}
body.single-topic #bbpress-forums .bbp-reply-to-link:hover { color: #C9A84C !important; background: rgba(201,168,76,.08) !important; }
body.single-topic #bbpress-forums .bs-dropdown-link.bb-reply-actions-button {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 30px !important; height: 30px !important; border-radius: 6px !important; color: #8a8578 !important;
}
body.single-topic #bbpress-forums .bs-dropdown-link.bb-reply-actions-button:hover { color: #C9A84C !important; background: rgba(201,168,76,.08) !important; }

/* 3. Hover-reveal on desktop ONLY; always visible (tappable) on touch */
@media (hover: hover) {
  body.single-topic #bbpress-forums .bs-reply-list-item .bbp-meta.push-right { opacity: 0 !important; transition: opacity .15s ease !important; }
  body.single-topic #bbpress-forums .bs-reply-list-item:hover .bbp-meta.push-right,
  body.single-topic #bbpress-forums .bs-reply-list-item:focus-within .bbp-meta.push-right { opacity: 1 !important; }
}

/* 9. Reserve gold for the primary action -> mute the per-post role chip */
body.single-topic #bbpress-forums .bbp-author-role {
    background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.12) !important; color: #9a9a9a !important;
}

/* 6. Tighten rhythm: smaller avatar, less per-post padding, realign line+indent */
body.single-topic #bbpress-forums .bbp-author-avatar img,
body.single-topic #bbpress-forums .bbp-reply-author .avatar { width: 40px !important; height: 40px !important; }
body.single-topic #bbpress-forums .bs-reply-list-item,
body.single-topic #bbpress-forums .bbp-lead-topic .bs-item-wrap:not(.bs-header-item) { padding: 18px 0 16px 0 !important; }
body.single-topic #bbpress-forums .bs-reply-list-item::before,
body.single-topic #bbpress-forums .bbp-lead-topic .bs-item-wrap:not(.bs-header-item)::before { left: 20px !important; top: 52px !important; }
body.single-topic #bbpress-forums .bbp-reply-content,
body.single-topic #bbpress-forums .bs-forum-content { padding-left: 54px !important; }

/* ============================================================
   DISCUSSION — REPRIORITIZE (hierarchy over chrome)
   Message = hero, metadata quiet, OP = thread root. Same flat dark/
   gold vocabulary; only emphasis changes. Gold is reserved for the
   OP left-rail + the primary Reply button — nowhere else.
   ============================================================ */

/* no max-width cap — full content width (the cap was squishing the layout) */

/* drop the decorative connector line (flat list, not real threading) */
body.single-topic #bbpress-forums .bs-reply-list-item::before,
body.single-topic #bbpress-forums .bbp-lead-topic .bs-item-wrap:not(.bs-header-item)::before { display: none !important; }

/* OP = root: a single flat gold left-rail + heavier body */
body.single-topic #bbpress-forums .bbp-lead-topic .bs-item-wrap:not(.bs-header-item) {
    border-left: 3px solid #C9A84C !important; padding-left: 18px !important;
}
body.single-topic #bbpress-forums .bbp-lead-topic .bbp-reply-content,
body.single-topic #bbpress-forums .bbp-lead-topic .bs-forum-content { color: #ececec !important; font-size: 16px !important; line-height: 1.7 !important; padding-left: 0 !important; }
body.single-topic #bbpress-forums .bbp-lead-topic .bbp-author-avatar img { box-shadow: none !important; } /* reserve gold */

/* the MESSAGE is the heaviest element in each reply */
body.single-topic #bbpress-forums .bbp-reply-content,
body.single-topic #bbpress-forums .bs-forum-content { color: #e6e6e6 !important; font-size: 15px !important; }
body.single-topic #bbpress-forums .bbp-reply-content p,
body.single-topic #bbpress-forums .bs-forum-content p { color: #e6e6e6 !important; }

/* metadata demoted: small muted lowercase role (no chip), quiet name/time */
body.single-topic #bbpress-forums .bbp-author-role {
    background: none !important; border: none !important; padding: 0 !important; border-radius: 0 !important;
    color: #777777 !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0 !important;
    text-transform: lowercase !important; margin-top: 1px !important;
}
body.single-topic #bbpress-forums .bbp-author-name { font-size: 14px !important; }
body.single-topic #bbpress-forums .bbp-author-link:hover .bbp-author-name { color: #cfcfcf !important; } /* not gold */
body.single-topic #bbpress-forums .bs-timestamp,
body.single-topic #bbpress-forums .bbp-reply-post-date { color: #6f6b62 !important; font-size: 12px !important; }

/* thinner dividers */
body.single-topic #bbpress-forums .bs-reply-list-item,
body.single-topic #bbpress-forums .bbp-lead-topic .bs-item-wrap:not(.bs-header-item) { border-bottom-color: rgba(255,255,255,.05) !important; }

/* ============================================================
   DISCUSSION — PROXIMITY SPACING (group header + message as one unit)
   Was uniform spacing -> message looked detached. Now: header on ONE
   line, content hugs it (small gap within), bigger gap BETWEEN replies.
   ============================================================ */

/* 1. header meta on a single line: name + lowercase role + relative time */
body.single-topic #bbpress-forums .item-meta.flex-1 {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    align-items: baseline !important; gap: 8px !important; padding-top: 0 !important; min-width: 0 !important;
}
body.single-topic #bbpress-forums .item-meta.flex-1 h3 { display: inline !important; margin: 0 !important; line-height: 1.2 !important; }
body.single-topic #bbpress-forums .item-meta.flex-1 .bbp-author-role { margin-top: 0 !important; align-self: baseline !important; }
body.single-topic #bbpress-forums .item-meta.flex-1 .bs-timestamp { margin-left: auto !important; }
body.single-topic #bbpress-forums .bs-reply-header { align-items: center !important; }

/* 2. header hugs content (~5px), no floating gap */
body.single-topic #bbpress-forums .bs-reply-header { margin: 0 0 5px !important; }
body.single-topic #bbpress-forums .bbp-reply-content,
body.single-topic #bbpress-forums .bs-forum-content { margin-top: 0 !important; }

/* 3. proximity rhythm: ~12px within (top/bottom padding) -> ~24px between */
body.single-topic #bbpress-forums .bs-reply-list-item,
body.single-topic #bbpress-forums .bbp-lead-topic .bs-item-wrap:not(.bs-header-item) {
    padding-top: 12px !important; padding-bottom: 12px !important;
}

/* 5. OP: same proximity; clear gap before the replies section */
body.single-topic #bbpress-forums .bbp-lead-topic { margin-bottom: 10px !important; }

/* ============================================================
   REPLY MODAL — slim down the reused "what's new" composer
   (it's BuddyBoss's activity composer wearing a reply hat). Cap
   width, lift the surface off the overlay, kill the empty media
   hatching, demote toolbar icons, drop the tags field (topic-only),
   strong-gold the primary action. Scope: .bbp-reply-form.
   ============================================================ */

/* overlay (patch 1) */
.bb-modal-overlay { background-color: rgb(8 8 8 / 90%) !important; }

/* cap width + lighter surface so the modal lifts off the overlay */
.bbp-reply-form.bb-modal-box,
.bbp-reply-form .modal-container {
    max-width: 620px !important; width: calc(100% - 32px) !important; margin: auto !important;
    height: auto !important; max-height: 86vh !important; overflow: auto !important;
    background: #161616 !important; border: 1px solid #2a2a2a !important; border-radius: 16px !important;
}
.bbp-reply-form fieldset.bbp-form { background: transparent !important; border: none !important; padding: 16px 20px 20px !important; }

/* kill the empty media-dropzone hatching; pad it only when populated (patch 4) */
.bbp-reply-form #whats-new-attachments,
.bbp-topic-form #whats-new-attachments { padding: 20px 15px !important; }
.bbp-reply-form #whats-new-attachments:empty { display: none !important; padding: 0 !important; border: none !important; background: none !important; }

/* demote the toolbar icons (Aa / camera / video / clip) — muted, gold on hover only */
.bbp-reply-form .post-elements-buttons-item,
.bbp-reply-form .post-elements-buttons-item i,
.bbp-reply-form .toolbar-button { color: #8a8578 !important; background: none !important; }
.bbp-reply-form .post-elements-buttons-item:hover,
.bbp-reply-form .post-elements-buttons-item:hover i,
.bbp-reply-form .toolbar-button:hover { color: #C9A84C !important; }

/* drop the tags field on replies (belongs on new topics) */
.bbp-reply-form .bbp_topic_tags_wrapper,
.bbp-reply-form #bbp_topic_tags,
.bbp-reply-form #bbp_topic_tags_dropdown { display: none !important; }

/* footer layout: subscription left, button right, no dead gap */
.bbp-reply-form .bbp-submit-wrapper {
    display: flex !important; align-items: center !important; justify-content: flex-end !important;
    gap: 14px !important; margin-top: 12px !important;
}
.bbp-reply-form .bbp-submit-wrapper .bbp-subscription-wrap,
.bbp-reply-form .bbp-submit-wrapper .subscription { margin-right: auto !important; }

/* PLAATSEN = confident primary: full-strength gold, dark readable text */
.bbp-reply-form .button.submit,
.bbp-reply-form .bbp-submit-wrapper .button.submit,
.bbp-reply-form .bbp-submit-wrapper input[type="submit"],
.bbp-reply-form .bbp-submit-wrapper button[type="submit"] {
    background: #C9A84C !important; color: #141004 !important; opacity: 1 !important;
    border: none !important; border-radius: 10px !important; font-weight: 800 !important; padding: 11px 26px !important;
}
.bbp-reply-form .button.submit:hover { background: #EDD389 !important; }

/* dropzone default state: transparent (no hatched/grey fill) */
.dropzone .dz-default { background: transparent !important; }

/* ============================================================
   FORUM COMPOSER (reply + new-discussion) — LAYOUT PASS.
   Scoped to .bbp-form — the <fieldset class="bbp-form"> that wraps
   the whole modal (confirmed in the inspected DOM). bbPress-only,
   so the news-feed activity composer (BuddyPress, no .bbp-form) is
   NOT touched. (v1 scoped to .bbp-reply-form/.bbp-topic-form, which
   don't wrap this modal -> every rule was a no-op.)
   ============================================================ */

/* NOTE: prefixed with #bbpress-forums so these out-specify BuddyBoss's own
   #bbpress-forums rules (id+class beats the theme's id+class). Class-only
   .bbp-form selectors LOST the cascade — which is why v2 changed nothing. */

/* 1. empty media area collapses fully; re-expands only when a file is attached */
#bbpress-forums .bbp-form #whats-new-attachments { padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
#bbpress-forums .bbp-form #whats-new-attachments .dropzone.closed { display: none !important; }
#bbpress-forums .bbp-form #whats-new-attachments:has(.dropzone:not(.closed)) { padding: 12px 0 !important; }

/* 2. editor box: ~4 lines tall, scroll past that (no giant empty field) */
#bbpress-forums .bbp-form .bbp-the-content-wrapper { margin-bottom: 0 !important; }
#bbpress-forums .bbp-form .bbp-the-content { min-height: 96px !important; max-height: 240px !important; overflow-y: auto !important; padding: 12px 14px !important; }

/* 3. toolbar attached flush under the editor */
#bbpress-forums .bbp-form #whats-new-toolbar {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important;
    margin: 0 0 14px 0 !important; padding: 8px 10px !important; border-top: none !important;
}

/* 4. spacing rhythm + no tag-wrapper dividers */
#bbpress-forums .bbp-form .bbp_topic_title_wrapper { margin-bottom: 14px !important; }
#bbpress-forums .bbp-form .bbp_topic_tags_wrapper { margin: 0 0 14px 0 !important; border-top: none !important; border-bottom: none !important; }

/* 5. footer: one aligned row, submit pushed hard right, small radius */
#bbpress-forums .bbp-form .bb-form-select-fields,
#bbpress-forums .bbp-form .bb-form-select-fields.flex {
    display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px 20px !important; margin: 0 !important; padding-bottom: 0 !important; border-radius: 8px !important;
}
#bbpress-forums .bbp-form .bbp-submit-wrapper { margin-left: auto !important; display: flex !important; align-items: center !important; gap: 8px !important; }

/* 6. trim trailing dead space at the form level.
   Iets ruimer (24px) zodat de "Plaatsen"-knop niet tegen de onderrand van de
   reply-modal plakt (Yousif). */
#bbpress-forums fieldset.bbp-form { padding-bottom: 24px !important; margin-bottom: 0 !important; }

/* ============================================================
   NEW DISCUSSION MODAL (.bbp-topic-form) — same composer as the
   reply modal in topic-creation mode. Inherits the reply fixes +
   topic-specific: drop the title-row avatar, title = headline,
   clarify the Type select, KEEP tags. Strings localized via
   biggermen_forum_nl_strings (functions.php).
   ============================================================ */

/* surface + width (lift off overlay, cap size) */
.bbp-topic-form.bb-modal-box,
.bbp-topic-form .modal-container {
    max-width: 640px !important; width: calc(100% - 32px) !important; margin: auto !important;
    height: auto !important; max-height: 86vh !important; overflow: auto !important;
    background: #161616 !important; border: 1px solid #2a2a2a !important; border-radius: 16px !important;
}
.bbp-topic-form fieldset.bbp-form { background: transparent !important; border: none !important; padding: 16px 20px 20px !important; }

/* drop the pointless title-row avatar — title owns the row */
.bbp-topic-form .bbp-author-avatar,
.bbp-topic-form .item-avatar,
.bbp-topic-form .bbp-reply-form-avatar { display: none !important; }

/* title = headline (bigger/heavier than content) */
.bbp-topic-form #bbp_topic_title {
    font-size: 19px !important; font-weight: 700 !important; color: #ffffff !important;
    background: #0f0f0f !important; border: 1px solid #262626 !important; border-radius: 10px !important; padding: 12px 14px !important; width: 100% !important;
}
.bbp-topic-form #bbp_topic_title::placeholder { color: #777 !important; font-weight: 600 !important; }

/* content box subordinate to the title */
.bbp-topic-form #bbp_topic_content,
.bbp-topic-form .bbp-the-content { background: #0a0a0a !important; border: 1px solid #262626 !important; border-radius: 10px !important; color: #EFEBE0 !important; min-height: 120px !important; font-size: 15px !important; }

/* kill empty media hatching; pad only when populated */
.bbp-topic-form #whats-new-attachments { padding: 20px 15px !important; }
.bbp-topic-form #whats-new-attachments:empty { display: none !important; padding: 0 !important; border: none !important; background: none !important; }

/* demote gold toolbar icons */
.bbp-topic-form .post-elements-buttons-item,
.bbp-topic-form .post-elements-buttons-item i,
.bbp-topic-form .toolbar-button { color: #8a8578 !important; background: none !important; }
.bbp-topic-form .post-elements-buttons-item:hover,
.bbp-topic-form .post-elements-buttons-item:hover i,
.bbp-topic-form .toolbar-button:hover { color: #C9A84C !important; }

/* Type select -> clearly a dropdown (labelled, with a caret) */
.bbp-topic-form .bbp_topic_form_type_wrapper { display: flex !important; align-items: center !important; gap: 8px !important; }
.bbp-topic-form .bbp_topic_form_type_wrapper label { color: #8a8578 !important; font-size: 13px !important; font-weight: 600 !important; }
.bbp-topic-form #bbp_stick_topic_select,
.bbp-topic-form .bbp_topic_form_type_wrapper select {
    background-color: #0f0f0f !important; color: #EFEBE0 !important; border: 1px solid #333 !important; border-radius: 8px !important;
    padding: 7px 30px 7px 12px !important; font-size: 13px !important; cursor: pointer !important;
    -webkit-appearance: none !important; appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8578' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 10px center !important;
}

/* tags BELONG here — keep + style */
.bbp-topic-form .bbp_topic_tags_wrapper { display: block !important; }
.bbp-topic-form #bbp_topic_tags { background: #0f0f0f !important; border: 1px solid #262626 !important; border-radius: 10px !important; color: #EFEBE0 !important; }

/* footer: button right, full-strength gold primary */
.bbp-topic-form .bbp-submit-wrapper { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 14px !important; margin-top: 12px !important; flex-wrap: wrap !important; }
.bbp-topic-form .button.submit,
.bbp-topic-form .bbp-submit-wrapper input[type="submit"],
.bbp-topic-form .bbp-submit-wrapper button[type="submit"] {
    background: #C9A84C !important; color: #141004 !important; opacity: 1 !important; border: none !important; border-radius: 10px !important; font-weight: 800 !important; padding: 11px 26px !important;
}
.bbp-topic-form .button.submit:hover { background: #EDD389 !important; }

/* select2 (tags field): no border / background, indented search text */
.select2-container--default .select2-selection,
.select2-search--dropdown .select2-search__field {
    background: none !important;
    border: none !important;
}
body:not(.topic-edit) #new-post input.select2-search__field {
    text-indent: 10px !important;
}

/* theme's bbpress.min.css hides the single forum label — show it */
.bs-meta-item .no-links.forum-label__is-single { display: inline-block !important; }

/* GROUPS DIRECTORY only (body.directory.groups): flatten the list cards
   (remove bg/border) — elsewhere the cards keep their styling. */
body.directory.groups .item-list .item,
body.directory.groups .bs-item-list .bs-item-wrap,
body.directory.groups .bp-list .item {
    background: transparent !important;
    border: none !important;
}
/* and the footer-ish elements INSIDE the groups list -> transparent bg */
#groups-list .site-footer,
#groups-list #colophon,
#groups-list footer,
#groups-list .footer-widget,
#groups-list .footer-inner,
#groups-list .bb-footer,
#groups-list [class*="footer"] {
    background: transparent !important;
}

/* mobile header: left-panel (hamburger) icon -> white */
@media (max-width: 799px) {
    .site-header .bb-left-panel-mobile > i { color: #ffffff !important; }
}

/* news-feed: activity head bar op smalle schermen.
   BuddyBoss' eigen mobiel-patroon (buddypress.css ~27389) VERBERGT het zoek-icoon
   en toont de zoekbalk inline op volle breedte. Mijn desktop-redesign (icoon ->
   absolute overlay) botste daarmee: het icoon EN de inline balk waren allebei
   zichtbaar (= twee zoekknoppen). Hier volgen we het native mobiel-patroon: één
   nette, volle-breedte donkere zoekbalk, geen los icoon, geen absolute overlay. */
@media (max-width: 800px) {
    .activity-head-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center !important;
    }
    /* verberg het zoek-ICOON (toggle) — de balk staat al inline */
    .activity-head-bar .bb-subnav-filters-search .subnav-filters-opener { display: none !important; }
    /* zoekcontainer = volle rij */
    .activity-head-bar .bb-subnav-filters-container.bb-subnav-filters-search,
    .activity-head-bar > .bb-subnav-filters-search,
    .activity-head-bar > .bb-subnav-filters-search.active {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    /* toon de modal als statische, volle-breedte donkere balk (NIET absoluut) */
    .activity-head-bar .bb-subnav-filters-search #subnav-filters,
    .bb-subnav-filters-search #subnav-filters,
    .bb-subnav-filters-search.active #subnav-filters {
        display: block !important;
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        /* geen eigen achtergrond/rand: de zoekbalk heeft al z'n eigen omhulsel,
           anders krijg je een doos-in-een-doos (flat-UI). */
        background: transparent !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 0 !important;
        box-shadow: none !important;
        z-index: auto !important;
    }
    .activity-head-bar .dir-search,
    .activity-head-bar .activity-search,
    .activity-head-bar .bp-search { width: 100% !important; max-width: 100% !important; margin: 0 !important; float: none !important; }
    .activity-head-bar .bp-dir-search-form { width: 100% !important; }
    .activity-head-bar .bp-dir-search-form input { width: 100% !important; box-sizing: border-box !important; }
    /* "Show"-dropdown eronder, eigen rij */
    .activity-head-bar .bb-subnav-filters-container-main {
        flex: 1 1 100% !important;
        align-self: stretch !important;
        min-width: 0 !important;
    }

    /* --- Leaderboard-avatar: geen fallback-letter door de foto heen -------
       De .pav toont een profielfoto, maar erachter staat de eerste letter van de
       naam als BuddyBoss-fallback. Op desktop verbergt Ramtins inline-stijl die met
       font-size:0; zijn eigen mobiele media-query (max-width:520) zet 'm echter terug
       op 1.1rem, waardoor op mobiel de letter (H/M/...) door de foto heen prikt.
       Foto's laden hier altijd, dus de letter heeft geen functie -> weer verbergen. --- */
    .bm-lb2 .pav,
    .bm-lb2 .pod.first .pav,
    .bm-lb2 .bav { font-size: 0 !important; }

    /* --- De twee filter-dropdowns ("Show" + "By") op mobiel ---------------
       Probleem 1: BuddyBoss centreert de modal onder een BREDE desktop-opener met
       negatieve left/right (bv. left:-121px op een 230px-brede modal). Op een
       telefoon duwt dat de "By"-modal het scherm links uit.
       Probleem 2: beide filter-containers hebben z-index:11 en de modal zelf
       z-index:auto, dus de TWEEDE filterdoos ("By") schildert over de OPEN
       dropdown van de eerste ("Show") heen.
       Fix: modal links uitlijnen op z'n eigen opener en binnen het scherm klemmen;
       de container die open is optillen zodat z'n dropdown boven de buur komt. --- */
    .activity-head-bar .bb-subnav-filters-filtering { position: relative !important; }
    .activity-head-bar .bb-subnav-filters-filtering.active { z-index: 40 !important; }
    .activity-head-bar .bb-subnav-filters-filtering .subnav-filters-modal {
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        width: max-content !important;
        min-width: 200px !important;
        max-width: calc(100vw - 24px) !important;
        z-index: 41 !important;
    }
}

/* notifications: center the selected text vertically in the bulk-action select.
   It's #notification-select (id) — a class rule lost; id + !important wins. */
#notification-select,
.buddypress-wrap #notification-select,
#notifications-bulk-management #notification-select {
    height: auto !important;
    line-height: 1.3 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* ============================================================
   SPECTRA INFO-BOX CTA IN SMALLE ZIJBALK — verticale-letter-glitch
   ------------------------------------------------------------
   De "Begin vandaag nog met jouw reis"-CTA is een UAGB info-box.
   In de 280px-zijbalk (o.a. author-/archive-pagina's) kreeg de
   .uagb-ifb-desc breedte 0 -> de omschrijving brak letter-voor-
   letter verticaal naar beneden. De keten op volle breedte
   forceren zodat de tekst normaal doorloopt. Alleen in .widget
   (zijbalk), zodat een full-width plaatsing elders ongemoeid blijft.
   ============================================================ */
.widget .wp-block-uagb-info-box,
.widget .wp-block-uagb-info-box .uagb-infobox-margin-wrapper,
.widget .wp-block-uagb-info-box .uagb-ifb-content,
.widget .wp-block-uagb-info-box .uagb-ifb-title-wrap,
.widget .wp-block-uagb-info-box .uagb-ifb-left-right-wrap {
	display: block !important; width: 100% !important; max-width: 100% !important;
	min-width: 0 !important; float: none !important;
}
.widget .wp-block-uagb-info-box .uagb-ifb-desc,
.widget .wp-block-uagb-info-box .uagb-ifb-title {
	width: 100% !important; min-width: 0 !important; max-width: 100% !important;
	white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important;
}

/* ============================================================
   BIGGERMEN - Forum: leesbaarheid discussie + opgeruimde reactie
   ============================================================ */

/* --- Discussion starter: bericht was grijs (#888) onder een enorme witte titel,
   waardoor de TITEL alle aandacht kreeg en het BERICHT wegviel. We draaien die
   verhouding om: titel iets rustiger, berichttekst wit en op leesmaat. --- */
#bbpress-forums .bbp-lead-topic .topic-lead .item-description,
#bbpress-forums .bbp-lead-topic .topic-lead .item-description p,
.single-topic .topic-lead .item-description,
.single-topic .topic-lead .item-description p {
	color: #e8e8e8 !important;
	font-size: 15px !important;
	line-height: 1.75 !important;
}
.single-topic .topic-lead .item-description p + p { margin-top: 12px !important; }

/* Titel: van 32px naar een rustiger formaat, zodat 'ie de tekst niet meer platdrukt.
   Specificiteit moet MINSTENS gelijk zijn aan de bestaande regel hierboven in dit
   bestand (body.single-topic #bbpress-forums .bb-reply-topic-title), anders wint die. */
body.single-topic #bbpress-forums h1.bb-reply-topic-title,
body.single-topic .entry-title.bb-reply-topic-title {
	font-size: clamp(1.25rem, 2.5vw, 1.625rem) !important; /* 20px -> 26px */
	line-height: 1.25 !important;
	margin-bottom: 10px !important;
}

/* --- Reactie-kop: de WordPress-rol ("Member"/"Administrator") is ruis naast de naam;
   de rang (Recruit/Spartan) zegt binnen Biggermen alles. Ramtin verwijdert 'm nu al
   in PHP - deze regel blijft staan als vangnet voor plekken waar bbPress 'm alsnog
   rendert (forum-archief, groepsforum). --- */
body.single-topic #bbpress-forums .bbp-author-role,
body.forum #bbpress-forums .bbp-author-role,
#bbpress-forums .bbp-author-role { display: none !important; }

/* --- Auteur-meta: naam -> rang -> helm, op één regel.
   Ramtin levert .bm-forum-author-meta ZONDER inline-styles aan (bewust: styling is
   van mij). Dus flex/gap/uitlijning komen hier vandaan, niet uit PHP. --- */
#bbpress-forums .bm-forum-author-meta {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	flex-wrap: wrap !important;
	margin: 0 !important;
	vertical-align: middle !important;
}
#bbpress-forums .bs-reply-header .bbp-author-name {
	font-size: 14px !important; font-weight: 700 !important; color: #ffffff !important;
}
/* Rang: kleiner dan de naam en in goud, zodat 'ie ondergeschikt blijft. */
#bbpress-forums .bm-fam-rank {
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	color: #C9A84C !important;
	line-height: 1 !important;
}
#bbpress-forums .bm-fam-helm {
	display: inline-flex !important;
	align-items: center !important;
	line-height: 0 !important;
}

/* --- Helm-icoon (.bm-helm-icon).
   LET OP - de bronbestanden zitten raar in elkaar: het CANVAS is 300x178 (liggend),
   maar de helm zelf is 70x141 (STAAND) en staat midden in dat canvas met ~40% lege
   ruimte links en ~37% rechts. Schalen op hoogte geeft daardoor een piepklein
   helmpje met een berg loze ruimte eromheen (en dat is precies hoe het er nu uitzag).

   Oplossing: een STAAND kadertje + object-fit:cover. Cover schaalt op de hoogte en
   snijdt links/rechts weg - en dat weggesneden deel is exact de lege marge, want de
   helm staat gecentreerd. Zo vult de helm het kader en klopt de verhouding.
   (Netter zou zijn de PNG's strak bijgesneden te exporteren - dat is Ramtins kant.) */
.bm-helm-icon {
	width: 13px !important;
	height: 22px !important;
	flex: 0 0 auto !important;          /* niet platdrukken in de flex-regel */
	object-fit: cover !important;
	object-position: center !important;
	max-width: none !important;
	display: block !important;
	vertical-align: middle !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
/* De hoogste tiers mogen opvallen: gouden gloed vanaf Gold Helmet (4-6). */
.bm-helm-icon[data-helm-level="4"],
.bm-helm-icon[data-helm-level="5"],
.bm-helm-icon[data-helm-level="6"] {
	filter: drop-shadow(0 0 4px rgba(201, 168, 76, .55)) !important;
}

/* --- Datum rechtsonder onder het bericht.
   bbPress zet .bs-timestamp in de KOPREGEL (rechtsboven). Verplaatsen kan ik niet
   in CSS, maar wél herpositioneren: de reactie krijgt ruimte onderaan en de datum
   wordt daar absoluut in geparkeerd. Zelfde eindresultaat, zonder aan functions.php
   te komen. --- */
body.single-topic #bbpress-forums .bs-reply-list-item { position: relative !important; }
/* De ruimte voor die datum maken we met een marge ONDER het bericht, niet met
   padding op de reactie: de forum-JS zet daar een INLINE padding-bottom:12px
   !important op, en inline !important wint altijd van een stylesheet. Zonder deze
   marge zou de datum over de laatste regel tekst heen vallen. */
body.single-topic #bbpress-forums .bs-reply-list-item .bbp-reply-content,
body.single-topic #bbpress-forums .bs-reply-list-item .bs-forum-content { margin-bottom: 22px !important; }
/* De kopregel moet GEEN containing block zijn, anders parkeert de datum onderaan de
   KOP i.p.v. onderaan de reactie. Specificiteit moet de bestaande regel hierboven
   (body.single-topic #bbpress-forums .bs-reply-header -> position:relative) verslaan. */
body.single-topic #bbpress-forums .bs-reply-list-item .bs-reply-header { position: static !important; }
body.single-topic #bbpress-forums .bs-reply-list-item .bs-reply-header .bs-timestamp {
	position: absolute !important;
	right: 0 !important;
	bottom: 6px !important;
	margin: 0 !important;
	color: #777777 !important;
	font-size: 11px !important;
	font-weight: 400 !important;
}

/* --- Zwevende helm/rang boven de discussie.
   De topic-auteur z'n meta wordt door bbp_template_before_lead_topic BUITEN het
   topic-blok gerenderd: een losse regel onder de breadcrumb, zonder context. Tot
   Ramtin 'm binnen het blok rendert, halen we 'm hier weg.
   LET OP: moet een ID bevatten, anders wint de .bm-forum-author-meta-regel hierboven
   (#bbpress-forums = hogere specificiteit dan losse classes). --- */
body.single-topic #bbpress-forums .replies-content > .bm-forum-author-meta { display: none !important; }

/* --- Leaderboard: alleen helm-icoon + rangnaam. --- */
.bm-lb__helm {
	display: inline-flex !important;
	align-items: center !important;
	vertical-align: middle !important;
	line-height: 0 !important;
}
.bm-lb__helm .bm-helm-icon { width: 16px !important; height: 28px !important; }

/* --- Kennisbank: kaart-tekst wit i.p.v. grijs, net als de titel. --- */
.bm-kb-excerpt,
.bm-kb-card .bm-kb-excerpt,
.bm-kb-card p { color: #ffffff !important; }

/* ============================================================
   BIGGERMEN - Styling voor Ramtins class-hooks
   ------------------------------------------------------------
   Ramtin levert deze elementen bewust ZONDER inline-styles aan (functionaliteit =
   zijn kant, opmaak = custom.css). Zonder onderstaande regels zijn ze dus kaal.
   ============================================================ */

/* --- Logo op login/register. Bron is een vierkante transparante PNG (300x300);
   width/height-attributen staan op 72 om layout-shift te voorkomen. --- */
.bm-logo-img {
	display: block !important;
	width: 64px !important;
	height: 64px !important;
	object-fit: contain !important;
	margin: 0 0 10px !important;
}

/* --- Forum-validatie: foutmelding + het veld dat fout is. --- */
.bm-form-error {
	display: block;
	margin: 8px 0 0;
	padding: 9px 12px;
	background: rgba(220, 76, 70, .10);
	border: 1px solid rgba(220, 76, 70, .40);
	border-left: 3px solid #dc4c46;
	border-radius: 8px;
	color: #f0a9a5;
	font-size: 12.5px;
	line-height: 1.45;
}
.bm-field-invalid,
.bm-field-invalid:focus,
textarea.bm-field-invalid,
input.bm-field-invalid,
.bm-field-invalid.medium-editor-element {
	border: 1px solid #dc4c46 !important;
	box-shadow: 0 0 0 3px rgba(220, 76, 70, .12) !important;
	border-radius: 8px !important;
}

/* --- Hint onder het gewichtsveld op de profiel-bewerkpagina. --- */
.bm-weight-hint {
	display: block;
	margin: 6px 0 0;
	color: #8a8578;
	font-size: 12px;
	line-height: 1.5;
}

/* --- Foto-blok: potlood-knop (bekijken -> bewerken). De "Klaar"-knop draagt al
   .bm-btn en erft die styling; het potlood is bewust rustiger (secundair). --- */
.bm-ci-edit-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 6px 12px;
	background: transparent;
	border: 1px solid #2a2a2a;
	border-radius: 8px;
	color: #9a9a9a;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: border-color .18s, color .18s;
}
.bm-ci-edit-toggle:hover {
	border-color: #C9A84C;
	color: #C9A84C;
}
.bm-ci-photos__head {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

/* --- Prestatiemiddelen: de pagina is na het inkorten kaal geworden.
   De paginatitel zegt al "Prestatiemiddelen" en de eyebrow herhaalt dat nog een
   derde keer -> eyebrow weg, en de rest rustig gecentreerd zodat de korte tekst
   niet in een leeg veld hangt. --- */
.bm-pm__eyebrow { display: none !important; }
.bm-pm__hero {
	text-align: center !important;
	padding: 48px 18px 0 !important;
}
.bm-pm__title {
	font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
	margin: 0 auto 18px !important;
}
.bm-pm__sub {
	color: #d5d0c4 !important;
	font-size: 1rem !important;
	line-height: 1.75 !important;
	max-width: 620px !important;
	margin: 0 auto !important;
}
.bm-pm__section { padding: 28px 0 56px !important; text-align: center !important; }
.bm-pm__btn { margin: 0 auto !important; }

/* ============================================================
   BIGGERMEN — FEEDBACK BATCH (23 jul)
   Messages, challenges, prestatiemiddelen-titel, lightbox,
   news-feed comments/overlay/avatars, edit-discussie.
   ============================================================ */

/* ---------- 1. MESSAGES: actieve thread past bij donker thema ----------
   De actieve/geopende thread (li.current .bp-message-link) kreeg van BuddyBoss een
   licht crème achtergrond (witte 90%-overlay op goud) met gouden tekst = onleesbaar.
   We maken 'm donker met een gouden accentrand + leesbare tekst. */
#message-threads .thread-item.current .bp-message-link,
.bp-messages-user-threads .thread-item.current .bp-message-link,
.messages-screen .thread-item.current .bp-message-link {
    background: rgba(201, 168, 76, .12) !important;
    box-shadow: inset 3px 0 0 #C9A84C !important;
}
/* tekst in de actieve thread leesbaar (naam wit, preview/datum gedempt) */
#message-threads .thread-item.current .bp-message-link .thread-title,
#message-threads .thread-item.current .bp-message-link .thread-from,
#message-threads .thread-item.current .bp-message-link .name,
.thread-item.current .bp-message-link .thread-subject { color: #ffffff !important; }
#message-threads .thread-item.current .bp-message-link .thread-excerpt,
#message-threads .thread-item.current .bp-message-link .last-message-date,
#message-threads .thread-item.current .bp-message-link .thread-date,
.thread-item.current .bp-message-link .thread-preview { color: #cfcfcf !important; }
/* niet-actieve thread: subtiele donkere hover i.p.v. het lichte thema-hover */
#message-threads .thread-item:not(.current) .bp-message-link:hover {
    background: rgba(255, 255, 255, .04) !important;
}

/* ---------- 2. CHALLENGES: deelname-blok ----------
   (a) De "Je doet mee ✓"-knop is al gefixt via .bm-btn--ghost !important hierboven.
   (b) Native file-input netjes stylen (choose-file-knop + spacing).
   (c) Uploaden-knop stond pal tegen de file-input: ruimte ertussen. */
.bm-challenge-photo__input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 6px 0 14px !important;
    padding: 8px !important;
    background: #0f0f0f !important;
    border: 1px solid #262626 !important;
    border-radius: 8px !important;
    color: #cfcfcf !important;
    font-size: 12px !important;
    cursor: pointer !important;
}
/* de "Choose File"-knop binnen de native input */
.bm-challenge-photo__input::-webkit-file-upload-button,
.bm-challenge-photo__input::file-selector-button {
    margin-right: 12px !important;
    padding: 7px 14px !important;
    background: #1e1e1e !important;
    border: 1px solid #333 !important;
    border-radius: 7px !important;
    color: #EFEBE0 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: border-color .18s, color .18s !important;
}
.bm-challenge-photo__input::-webkit-file-upload-button:hover,
.bm-challenge-photo__input::file-selector-button:hover {
    border-color: #C9A84C !important;
    color: #C9A84C !important;
}
.bm-challenge-photo__btn { margin-top: 4px !important; }

/* ---------- 3. PRESTATIEMIDDELEN: dubbele titel ----------
   De paginatitel (H1.entry-title "Prestatiemiddelen") én de blok-titel
   (.bm-pm__title, boven de beschrijving) toonden hetzelfde woord. De eerste
   (paginatitel bovenaan) weg; die boven de beschrijving is genoeg.
   Scoped op page-id-1309 zodat alleen déze pagina's H1 verdwijnt. */
body.page-id-1309 .entry-header .entry-title,
body.page-id-1309 .content-area > article > .entry-title,
body.page-id-1309 header.entry-header { display: none !important; }

/* ---------- 4. LIGHTBOX close-knop netjes ----------
   Inline-stijl (functions.php) staat in de footer en kan m'n head-CSS overschrijven;
   daarom !important. Nette ronde knop, goede hover. */
.bm-lightbox .bm-lightbox__close,
.bm-lightbox__close {
    position: fixed !important;
    top: 20px !important;
    right: 24px !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: #ffffff !important;
    background: rgba(20, 20, 20, .7) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow: none !important;
    transition: background .18s, border-color .18s, transform .18s !important;
}
.bm-lightbox__close:hover {
    background: #C9A84C !important;
    border-color: #C9A84C !important;
    color: #141004 !important;
    transform: rotate(90deg) !important;
}

/* ---------- 5. NEWS-FEED comments ----------
   (a) Theatre-overlay (foto-modal) donker i.p.v. lichte overlay. */
.bb-activity-model-wrapper.bb-internal-model.activity-theatre.buddypress-wrap,
.bb-media-model-wrapper.activity-theatre,
.activity-theatre.bb-internal-model {
    background-color: rgb(10 10 10 / 90%) !important;
}

/* (b) Reactie-avatars: de max-width:32px klemde de BREEDTE af terwijl de hoogte
   groter bleef -> horizontaal ingedrukt (squashed). NIET met width:100% oplossen
   (dan vult 'ie z'n container = 152px = veel te groot). Gewoon een net vierkant op
   comment-maat, met object-fit:cover zodat de verhouding klopt. */
.activity-list.item-list .activity-item .activity-comments img.avatar,
.activity-comments img.avatar,
.bb-media-model-wrapper .activity-comments div.acomment-avatar img,
.buddypress-wrap .activity-comments div.acomment-avatar img,
.activity-comments .acomment-avatar img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    min-width: 40px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    image-rendering: -webkit-optimize-contrast !important;
}
/* geneste reactie-avatars (reply op een reactie) iets kleiner */
.activity-comments .activity-comments img.avatar,
.acomment-comments img.avatar {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    min-width: 32px !important;
}
/* de post-avatar (niet in comments) alleen de klem eraf, verder ongemoeid */
.activity-list .activity-item div.item-avatar img,
.activity-list .activity-item.mini .activity-avatar img.FB_profile_pic {
    max-width: none !important;
}

/* (c) Reactie-formulier: verborgen bijlage-rij. */
form.ac-form .bp-ac-form-container .ac-reply-attachments { display: none !important; }

/* (d) Reactie-blokken: geen doos meer. Tekst komt gewoon naast de avatar, onder de
   naam. Rang-badge ("Recruit") veel kleiner, klein badge naast de naam. */
.bb-media-model-wrapper .activity-comments .acomment_inner .acomment-content_block,
.buddypress-wrap .activity-comments .acomment_inner .acomment-content_block,
.activity-comments .acomment-content_block,
.acomment-content_block {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
/* De rang ("Recruit") in reacties is een GamiPress-rank (.gamipress-buddypress-rank
   met .gamipress-buddypress-rank-title). Stond als grote pil op een eigen regel; nu
   een klein badge, strak onder de naam getrokken. (Écht naast de naam plaatsen zou
   een DOM-verplaatsing vergen: naam zit in .acomment-meta, rang in .acomment-content
   — dat is Ramtins functions.php, niet mijn CSS.) */
.activity-comments .acomment-content .gamipress-buddypress-user-details,
.activity-comments .acomment-content .gamipress-buddypress-ranks {
    display: inline-flex !important;
    margin: 0 0 3px !important;
    padding: 0 !important;
}
.activity-comments .acomment-content .gamipress-buddypress-rank {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 1px 7px !important;
    background: rgba(201, 168, 76, .12) !important;
    border: 1px solid rgba(201, 168, 76, .30) !important;
    border-radius: 5px !important;
}
.activity-comments .acomment-content .gamipress-buddypress-rank .gamipress-buddypress-rank-title,
.activity-comments .acomment-content .gamipress-buddypress-rank-title {
    font-size: 9px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: #C9A84C !important;
}
/* verberg het losse rank-image/thumbnail als dat er is (houdt 't compact) */
.activity-comments .acomment-content .gamipress-buddypress-rank .gamipress-buddypress-rank-image,
.activity-comments .acomment-content .gamipress-buddypress-rank img { display: none !important; }
/* naam en badge tegen elkaar: minder ruimte tussen meta en content */
.activity-comments .acomment-meta { margin-bottom: 2px !important; line-height: 1.2 !important; }

/* ---------- 6. DISCUSSIE BEWERKEN (topic-edit): dubbele rand + uitlijning ----------
   De editor zat in een dubbel kader: .bbp-the-content-wrapper heeft een gedeeltelijke
   rand (boven/zij) én de inner .bbp-the-content een volledige 10px-rand => doos-in-doos.
   Fix: de WRAPPER is het enige kader (volledige rand + radius, overflow hidden),
   de inner content krijgt geen eigen rand. Scoped op body.topic-edit zodat de
   reply-modal ongemoeid blijft. */
body.topic-edit #bbpress-forums .bbp-the-content-wrapper {
    border: 1px solid #262626 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #0a0a0a !important;
    margin-bottom: 16px !important;
}
body.topic-edit #bbpress-forums .bbp-the-content-wrapper .bbp-the-content {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}
/* onderste rij (Forum / Type / melding-checkbox / Plaatsen) op één lijn.
   Het vak (.bb-form-select-fields = zichtbaar #0d0d0d-doosje) had padding-top:15px
   maar padding-bottom:0 (bbPress + een eigen regel), dus de knop plakte tegen de
   ONDERRAND van het doosje. Symmetrische padding via de .flex-selector (hogere
   specificiteit) zodat er evenveel lucht onder als boven de knop zit. */
body.topic-edit #bbpress-forums .bb-form-select-fields,
body.topic-edit #bbpress-forums .bbp-topic-form .bbp-form > div:last-child {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px 20px !important;
}
body.topic-edit #bbpress-forums .bb-form-select-fields.flex {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}
/* De knop erft margin-top:20px van bbPress (.reply-edit ... .bbp-submit-wrapper
   .button) -> die duwt 'm naar de BODEM van z'n wrapper. Marge weg zodat
   align-items:center 'm netjes in het midden zet. */
body.topic-edit #bbpress-forums .bbp-submit-wrapper .button,
body.topic-edit #bbpress-forums .bbp-submit-wrapper button,
body.topic-edit #bbpress-forums #bbp_topic_submit {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Elke veld-groep (Forum / Type / abonneren) = label + input op ÉÉN horizontale
   regel, verticaal gecentreerd. (De echte wrapper-klassen zijn
   .bbp_topic_form_*_wrapper — niet .bbp-form-forum; die matchten niets.) */
body.topic-edit #bbpress-forums .bbp_topic_form_forum_wrapper,
body.topic-edit #bbpress-forums .bbp_topic_form_type_wrapper,
body.topic-edit #bbpress-forums .bbp_topic_subscription_wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    align-self: center !important;
}
body.topic-edit #bbpress-forums .bbp_topic_form_forum_wrapper > label,
body.topic-edit #bbpress-forums .bbp_topic_form_type_wrapper > label,
body.topic-edit #bbpress-forums .bbp_topic_subscription_wrapper > label {
    margin: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    align-self: center !important;
}
/* De "Type:"-tekst staat DUBBEL: het externe label zegt "Type:" én de select toont
   zelf al "Type: Normaal" (via <span>Type: </span> in de options). Verberg het
   externe label; de select spreekt voor zich. */
body.topic-edit #bbpress-forums .bbp_topic_form_type_wrapper > label { display: none !important; }
/* De abonneren-checkbox verticaal gecentreerd t.o.v. de (mogelijk 2-regelige) tekst. */
body.topic-edit #bbpress-forums .bbp_topic_subscription_wrapper input[type="checkbox"] {
    margin: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
}
/* Plaatsen-knop hard naar rechts, op dezelfde middenlijn.
   LET OP: body.single-topic #bbpress-forums .bbp-submit-wrapper zet margin-top:14px
   (regel ~6046). De edit-pagina IS ook single-topic, dus die marge duwde de knop
   naar beneden ("latched to the bottom"). margin volledig resetten (alleen links
   auto) zodat align-items:center 'm echt centreert. */
body.topic-edit #bbpress-forums .bbp-submit-wrapper {
    margin: 0 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
}
body.topic-edit #bbpress-forums select {
    background: #0f0f0f !important;
    border: 1px solid #262626 !important;
    color: #EFEBE0 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

/* ---------- 7. NEWS-FEED: "View more comments" onderaan i.p.v. bovenaan ----------
   BuddyBoss zet .view-more-comments als eerste kind van .activity-comments (dus
   BOVEN de reacties). Met flexbox-order schuiven we 'm onder de reactielijst,
   vlak boven het reactie-formulier. */
.activity-comments {
    display: flex !important;
    flex-direction: column !important;
}
.activity-comments > .view-more-comments { order: 2 !important; }
.activity-comments > .ac-form,
.activity-comments > form.ac-form { order: 3 !important; }
/* de reactielijst en overige inhoud houden order 0 -> komen dus vóór de knop */

/* ---------- 8. MOBIEL: profiel bewerken direct bereikbaar ----------
   Op desktop verschijnt de foto-bewerkknop bij hover over de avatar; op mobiel
   moet je eerst de foto aantikken voordat 'ie verschijnt. We tonen 'm op mobiel
   meteen als duidelijke, aantikbare knop (geen tap-om-te-onthullen meer). */
@media (max-width: 800px) {
    #item-header .link-change-profile-image,
    .link-change-profile-image {
        opacity: 1 !important;
        visibility: visible !important;
        background: rgba(10, 10, 10, .78) !important;
        border: 1.5px solid #C9A84C !important;
        color: #C9A84C !important;
        border-radius: 50% !important;
        width: 38px !important;
        height: 38px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .5) !important;
    }
    #item-header .link-change-profile-image i,
    .link-change-profile-image i { color: #C9A84C !important; font-size: 16px !important; }
    /* cover-foto bewerken ook direct zichtbaar */
    .link-change-cover-image {
        opacity: 1 !important;
        visibility: visible !important;
        background: rgba(10, 10, 10, .78) !important;
        border: 1px solid rgba(201, 168, 76, .6) !important;
        color: #C9A84C !important;
        border-radius: 8px !important;
    }
    .link-change-cover-image i { color: #C9A84C !important; }
}

/* ============================================================
   BIGGERMEN — kleine fixes (widget, sidebar, lightbox-kruis)
   ============================================================ */

/* --- "Complete Your Profile"-widget verbergen ---
   BuddyBoss' Engelse profielcompletie-widget in de rechter zijbalk telt andere
   dingen dan onze eigen NL-balk ("Profiel X% compleet") op het profiel -> twee
   verschillende percentages = verwarrend. We houden onze eigen balk aan.
   De klasse widget_bp_profile_completion_widget is uniek voor deze widget, dus
   globaal verbergen raakt geen andere zijbalk-blokken (bv. Recent Discussions). */
.widget_bp_profile_completion_widget { display: none !important; }

/* --- Zijbalk: "Prestatiemiddelen" niet meer afgekapt ---
   De .link-text stond op nowrap + text-overflow:ellipsis met te weinig breedte, dus
   het langste woord ("Prestatiemiddelen") kreeg "...". Er is genoeg ruimte in het
   paneel; we laten de tekst gewoon volledig zien (geen ellipsis). */
.buddypanel .buddypanel-menu .bb-menu-item .link-text,
.buddypanel .buddypanel-menu li > a .link-text,
.side-panel-menu .bb-menu-item .link-text {
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
}
/* iets minder ruimte tussen icoon en tekst zodat het langste label zeker past */
.buddypanel .buddypanel-menu .bb-menu-item { padding-right: 8px !important; }

/* --- Lightbox-sluitknop: het × zat niet exact in het midden ---
   Het tekst-"×"-glyph heeft eigen font-metrics (zit optisch iets te hoog). We
   verbergen het tekst-glyph (font-size:0) en tekenen het kruis zelf via ::before,
   gecentreerd door de flex-container -> niet meer afhankelijk van de letter-baseline.
   Specificiteit .bm-lightbox .bm-lightbox__close (0,2,0) om de eerdere 22px-regel te
   verslaan (anders blijft het tekst-× staan -> twee kruisjes). */
.bm-lightbox .bm-lightbox__close,
.bm-lightbox__close {
    font-size: 0 !important;
    line-height: 0 !important;
}
.bm-lightbox .bm-lightbox__close::before,
.bm-lightbox__close::before {
    content: "\00d7" !important;
    font-size: 24px !important;
    line-height: 1 !important;
    display: block !important;
}

/* ============================================================
   BIGGERMEN — @mention-dropdown + groep-knoppen (24 jul)
   ============================================================ */

/* --- @mention-dropdown (atwho): highlight in themakleuren ---
   atwho zet de match van wat je typt in een <strong> in elke suggestie, en de
   getypte query in .atwho-query. Dat toonde wit-vlak/rode tekst. Nu passend bij
   het thema: donker paneel, goud voor de match. */
.atwho-view,
.atwho-container .atwho-view {
    background: #111111 !important;
    border: 1px solid #1e1e1e !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55) !important;
    color: #cfcfcf !important;
}
.atwho-view ul,
.atwho-view ul li { background: transparent !important; color: #cfcfcf !important; }
.atwho-view ul li strong,
.atwho-view strong {
    background: transparent !important;   /* was wit vlak */
    color: #C9A84C !important;            /* was rood -> goud */
    font-weight: 700 !important;
}
.atwho-view ul li.cur,
.atwho-view .cur {
    background: #1a1a1a !important;
    color: #ffffff !important;
}
.atwho-view ul li.cur strong,
.atwho-view .cur strong { color: #EDD389 !important; }
/* de getypte query in de editor (@ra) — geen wit vlak/rode tekst */
.atwho-query {
    background: transparent !important;
    color: #C9A84C !important;
}

/* --- Groep-ledenlijst: knop-iconen netjes gescheiden ---
   De bestaande regel was gescoped op .members-list.grid (de site-brede
   ledendirectory); de GROEP-ledenpagina gebruikt een andere container, dus daar
   kregen de follow/message-iconen geen flex/gap en liepen ze in elkaar. Hier
   direct op de wrap-klassen. */
.button-wrap.member-button-wrap.footer-button-wrap,
.member-button-wrap.footer-button-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}
.button-wrap.member-button-wrap.footer-button-wrap > .generic-button,
.member-button-wrap.footer-button-wrap > .generic-button {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* --- Groepsuitnodiging: Accepteren + Weigeren netjes, geen overlap ---
   Beide knoppen stonden als ghost-goud in een te smalle flex-row -> ze liepen door
   elkaar en over de metaregel. Nu: onder elkaar, volle breedte, met ruimte.
   Accepteren = gevuld goud (hoofdknop), Weigeren = ghost (secundair).
   Scoped met :has(.bm-reject-invite) zodat gewone groep-kaarten (alleen join/leave)
   ongemoeid blijven. */
.bp-generic-meta.groups-meta.action:has(.bm-reject-invite),
.group-button-wrap:has(.bm-reject-invite) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    position: static !important;
}
.bp-generic-meta.groups-meta.action:has(.bm-reject-invite) > .generic-button,
.bp-generic-meta.groups-meta.action:has(.bm-reject-invite) > [id^="groupbutton-"] {
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
    float: none !important;
}
/* Accepteren = gevuld goud (hoofdknop). Moet de eigen ghost-goud-groepknopregel
   verslaan (#groups-list .action .generic-button button, color:#FFBC00 !important,
   1,3,1) — anders goud-op-goud = onleesbaar. Vandaar de volledige keten + de
   accept-invite-klasse (1,4,1). */
.accept-invite,
.group-button.accept-invite,
#groups-list .action .generic-button button.accept-invite,
#groups-list .action .generic-button a.accept-invite,
#buddypress .bp-generic-meta .generic-button button.accept-invite,
#buddypress .action .generic-button button.accept-invite {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background: linear-gradient(180deg, #EDD389, #C9A84C) !important;
    background-color: #C9A84C !important;
    color: #141004 !important;
    border: 1px solid #C9A84C !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
}
.accept-invite:hover,
#groups-list .action .generic-button button.accept-invite:hover { filter: brightness(1.05) !important; color: #141004 !important; }
/* Weigeren = ghost (secundair) */
a.bm-reject-invite,
.group-button.bm-reject-invite {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background: transparent !important;
    color: #C9A84C !important;
    border: 1px solid rgba(201, 168, 76, .5) !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-align: center !important;
}
a.bm-reject-invite:hover,
.group-button.bm-reject-invite:hover {
    background: rgba(201, 168, 76, .12) !important;
    border-color: #C9A84C !important;
    color: #EDD389 !important;
}

/* ============================================================
   BIGGERMEN — GROEP-LEDENLIJST altijd als nette lijst
   ------------------------------------------------------------
   De kaart/grid-weergave was rommelig: #buddypress .members-group-list.grid is een 4-koloms
   CSS-grid waarin de sectiekoppen (Organizers/Members) zélf grid-cellen worden,
   waardoor koppen en kaarten door elkaar liepen. We forceren de rij-indeling
   (zoals de nette list-view) ongeacht de opgeslagen weergavevoorkeur.
   Scoped op .members-group-list (groep-ledenpagina) — de site-brede ledendirectory
   (.members-list zonder .members-group-list) blijft ongemoeid.
   ============================================================ */
#buddypress .members-group-list.grid {
    display: block !important;
    grid-template-columns: none !important;
}
#buddypress .members-group-list.grid > li.item-entry {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    float: none !important;
}
/* Sectiekoppen (Organizers / Members): volle breedte, rustige kop */
#buddypress .members-group-list.grid > li.item-entry-header {
    background: transparent !important;
    border: none !important;
    padding: 20px 2px 8px !important;
    margin: 6px 0 2px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: #8a8578 !important;
    text-align: left !important;
}
/* De rij = platte kaart, subtiele hover */
#buddypress .members-group-list.grid .list-wrap {
    display: block !important;
    background: #141414 !important;
    border: 1px solid #1e1e1e !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    transition: border-color .18s ease !important;
}
#buddypress .members-group-list.grid .list-wrap:hover { border-color: #2a2a2a !important; }
/* Inner = horizontale rij */
#buddypress .members-group-list.grid .list-wrap-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
}
/* Avatar links, klein en rond */
#buddypress .members-group-list.grid .item-avatar {
    display: block !important;
    flex: 0 0 auto !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    position: relative !important;
}
#buddypress .members-group-list.grid .item-avatar img.avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 0 !important;
}
/* online/offline-stip netjes rechtsonder op de avatar */
#buddypress .members-group-list.grid .item-avatar .member-status {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
}
/* Naam + meta links; followers + acties duwen naar rechts */
#buddypress .members-group-list.grid .item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 16px !important;
    text-align: left !important;
    margin: 0 !important;
}
#buddypress .members-group-list.grid .item-block {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
}
#buddypress .members-group-list.grid .member-name {
    text-align: left !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}
#buddypress .members-group-list.grid .member-name a { color: #ffffff !important; }
/* Naam + anker expliciet links (een grid-regel centreerde de titel-link). */
#buddypress .members-group-list.grid .item-block,
#buddypress .members-group-list.grid .list-title,
#buddypress .members-group-list.grid .list-title a,
#buddypress .members-group-list.grid .member-name a {
    text-align: left !important;
    justify-content: flex-start !important;
    display: block !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}
#buddypress .members-group-list.grid .member-name a { display: inline-block !important; }
#buddypress .members-group-list.grid .item-meta {
    text-align: left !important;
    margin: 3px 0 0 !important;
    font-size: 12px !important;
    color: #8a8578 !important;
}
#buddypress .members-group-list.grid .follow-container,
#buddypress .members-group-list.grid .followers-wrap {
    flex: 0 0 auto !important;
    text-align: right !important;
    white-space: nowrap !important;
    color: #8a8578 !important;
    font-size: 12px !important;
}
/* Actie-knoppen (follow/message) rechts IN de rij.
   De .footer-button-wrap komt uit de kaart-modus en is daar position:absolute
   (hoort onderaan een kaart) -> in onze lijst stak 'ie als zwevend donker blok
   rechtsonder uit. Terug in de flow, rechts, verticaal gecentreerd. Ruimte rechts
   (margin-right) zodat 'ie niet onder de absolute "..."-menuknop valt. */
#buddypress .members-group-list.grid .member-buttons-wrap {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 44px 0 0 !important;
    padding: 0 !important;
    border: none !important;
}
#buddypress .members-group-list.grid .member-buttons-wrap .footer-button-wrap,
#buddypress .members-group-list.grid .member-button-wrap.footer-button-wrap,
#buddypress .members-group-list.grid .only-grid-view.footer-button-wrap {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* De "..."-menuknop stond in de hoek rechtsboven; nu netjes verticaal gecentreerd
   aan de rechterkant van de rij. */
#buddypress .members-group-list.grid .list-wrap > .bb_more_options.member-dropdown,
#buddypress .members-group-list.grid .list-wrap .member-dropdown {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    right: 14px !important;
}
/* Follow/message-knop: icoon écht in het midden. De <a>/<button> bevat een leeg
   <i>-icoon + verborgen tekst ("Send Message"/"Follow"); zelfs op font-size:0 duwde
   die tekst het icoon iets naar links (langere tekst = grotere duw). Daarom het
   icoon ABSOLUUT centreren: dan kan de tekst-node het nooit verschuiven. */
#buddypress .members-group-list.grid .footer-button-wrap a,
#buddypress .members-group-list.grid .footer-button-wrap button {
    position: relative !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
}
#buddypress .members-group-list.grid .footer-button-wrap a i,
#buddypress .members-group-list.grid .footer-button-wrap button i {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* Context-menu ("...") items: inhoud (icoon + tekst) netjes in het midden van hun
   vak (stond op justify-center + text-align left = scheef). Nu icoon + tekst als
   groep horizontaal én verticaal gecentreerd. */
#buddypress .members-group-list.grid .bb_more_dropdown li,
#buddypress .members-group-list.grid .member-dropdown .bb_more_dropdown li {
    text-align: center !important;
}
#buddypress .members-group-list.grid .bb_more_dropdown li a,
#buddypress .members-group-list.grid .member-dropdown .bb_more_dropdown li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
    width: 100% !important;
    padding: 9px 14px !important;
    line-height: 1.3 !important;
}
#buddypress .members-group-list.grid .bb_more_dropdown li a i,
#buddypress .members-group-list.grid .member-dropdown .bb_more_dropdown li a i {
    flex: 0 0 auto !important;
    margin: 0 !important;
}