/*  BMW7forum: kindstijl van prosilver, opgebouwd naar het voorbeeld van Metro Black and White.
    Zelfde indeling en kleuren als Metro, strakker uitgevoerd. Alleen overrides: phpBB-updates blijven werken.
    Kleuren: donker #333 (balken), grijs #707070 (categoriekoppen, iets donkerder dan Metro voor leesbaar contrast),
    achtergrond #F6F6F6, BMW-blauw #0066B1 alleen voor hover, focus en ongelezen. */

@import url("../../prosilver/theme/stylesheet.css");

@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/open-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/open-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/open-sans-700.woff2") format("woff2"); }

:root {
	--ink: #333333;
	--muted: #6F6F6F;
	--line: #E4E4E4;
	--bg: #F6F6F6;
	--surface: #FFFFFF;
	--band: #EEEEEE;
	--bar: #333333;
	--bar-hover: #444444;
	--cat: #707070;
	--accent: #0066B1;
	--r: 8px;
	--r-sm: 6px;
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.03);
	--divider: #EEEEEE;
	--font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	color-scheme: light;
}

/* Iconen: zwart-wit set uit Metro Black and White */
.contact-icon {background-image: url("./images/icons_contact.png");}
.global_read {background-image: url("./images/announce_read.svg");}
.global_read_mine {background-image: url("./images/announce_read_mine.svg");}
.global_read_locked {background-image: url("./images/announce_read_locked.svg");}
.global_read_locked_mine {background-image: url("./images/announce_read_locked_mine.svg");}
.global_unread {background-image: url("./images/announce_unread.svg");}
.global_unread_mine {background-image: url("./images/announce_unread_mine.svg");}
.global_unread_locked {background-image: url("./images/announce_unread_locked.svg");}
.global_unread_locked_mine {background-image: url("./images/announce_unread_locked_mine.svg");}
.announce_read {background-image: url("./images/announce_read.svg");}
.announce_read_mine {background-image: url("./images/announce_read_mine.svg");}
.announce_read_locked {background-image: url("./images/announce_read_locked.svg");}
.announce_read_locked_mine {background-image: url("./images/announce_read_locked_mine.svg");}
.announce_unread {background-image: url("./images/announce_unread.svg");}
.announce_unread_mine {background-image: url("./images/announce_unread_mine.svg");}
.announce_unread_locked {background-image: url("./images/announce_unread_locked.svg");}
.announce_unread_locked_mine {background-image: url("./images/announce_unread_locked_mine.svg");}
.forum_link {background-image: url("./images/forum_link.svg");}
.forum_read {background-image: url("./images/forum_read.svg");}
.forum_read_locked {background-image: url("./images/forum_read_locked.svg");}
.forum_read_subforum {background-image: url("./images/forum_read_subforum.svg");}
.forum_unread {background-image: url("./images/forum_unread.svg");}
.forum_unread_locked {background-image: url("./images/forum_unread_locked.svg");}
.forum_unread_subforum {background-image: url("./images/forum_unread_subforum.svg");}
.sticky_read {background-image: url("./images/sticky_read.svg");}
.sticky_read_mine {background-image: url("./images/sticky_read_mine.svg");}
.sticky_read_locked {background-image: url("./images/sticky_read_locked.svg");}
.sticky_read_locked_mine {background-image: url("./images/sticky_read_locked_mine.svg");}
.sticky_unread {background-image: url("./images/sticky_unread.svg");}
.sticky_unread_mine {background-image: url("./images/sticky_unread_mine.svg");}
.sticky_unread_locked {background-image: url("./images/sticky_unread_locked.svg");}
.sticky_unread_locked_mine {background-image: url("./images/sticky_unread_locked_mine.svg");}
.topic_moved {background-image: url("./images/topic_moved.svg");}
.pm_read,
.topic_read {background-image: url("./images/topic_read.svg");}
.topic_read_mine {background-image: url("./images/topic_read_mine.svg");}
.topic_read_hot {background-image: url("./images/topic_read_hot.svg");}
.topic_read_hot_mine {background-image: url("./images/topic_read_hot_mine.svg");}
.topic_read_locked {background-image: url("./images/topic_read_locked.svg");}
.topic_read_locked_mine {background-image: url("./images/topic_read_locked_mine.svg");}
.pm_unread,
.topic_unread {background-image: url("./images/topic_unread.svg");}
.topic_unread_mine {background-image: url("./images/topic_unread_mine.svg");}
.topic_unread_hot {background-image: url("./images/topic_unread_hot.svg");}
.topic_unread_hot_mine {background-image: url("./images/topic_unread_hot_mine.svg");}
.topic_unread_locked {background-image: url("./images/topic_unread_locked.svg");}
.topic_unread_locked_mine {background-image: url("./images/topic_unread_locked_mine.svg");}
.loading_indicator {background-color: #000000;
	background-image: url("./images/loading.gif");}

/* Basis */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
html, body { color: var(--ink); background-color: var(--bg); }
body { font-family: var(--font); font-size: 12px; line-height: 1.4; }
h1, h2, h3, h4, .postbody h3, .forumtitle, .topictitle, li.header dt, li.header dd, .button, input, select, textarea { font-family: var(--font); }
.wrap { background: transparent; border: 0; padding: 0 15px; max-width: 1152px; }
h2, .content h2, .panel h2, h3, .login-box h2 { color: var(--ink); }
h2 { font-weight: 400; }
h3 { font-weight: 600; border-bottom-color: var(--line); }
hr { border-color: var(--surface); border-top-color: var(--line); }

/* Links */
a { color: var(--ink); }
a:hover, a:focus { color: var(--accent); }
.postbody a, .content a:not(.button) { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.postbody a:hover, .content a:not(.button):hover { text-decoration-color: var(--accent); }
a.forumtitle, a.topictitle { color: var(--ink); font-weight: 700; text-decoration: none; }
a.forumtitle:hover, a.topictitle:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Header: groot logo links (zoals Metro), accountlinks rechtsboven */
.headerbar { background: transparent; border: 0; box-shadow: none; padding: 16px 0 12px; margin: 0; color: var(--ink); border-radius: 0; }
.headerbar .logo { padding: 0; }
.site_logo { background-image: url("./images/bmw7club-logo-wide.png"); background-size: contain; background-repeat: no-repeat; background-position: left center; width: 404px; height: 64px; }
.site-description h1, .site-description p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.search-header { margin-top: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: none; }
.search-box .inputbox, .search-box .inputbox:hover, .search-box .inputbox:focus { border-color: transparent; background: transparent; box-shadow: none; }
.search-box .button, .search-box .button:hover { background: var(--bar); border-color: var(--bar); }


/* Navigatie: menu (ingelogd) licht boven de donkere broodkruimelbalk, zoals Metro */
.navbar { background: transparent; border: 0; border-radius: 0; padding: 0; }
#nav-main { padding: 6px 0 10px; }
#nav-main > li > a, #nav-main > li > a .icon, #nav-main .username, #nav-main .username-coloured { color: #808080 !important; font-size: 14px; }
#nav-main > li > a:hover, #nav-main > li > a:hover .icon { color: var(--ink) !important; }
#nav-main > li:has(> a[rel="help"]) { display: none; }
.bmw7-nav-empty #nav-main { display: none; }
ul.navlinks {
	background: var(--bar);
	border: 0;
	border-radius: var(--r);
	padding: 0 12px;
	min-height: 37px;
	display: flex;
	align-items: center;
}
.navbar ul.linklist.navlinks { padding: 2px 14px; }
ul.navlinks a, ul.navlinks .icon, .navbar .crumb, ul.navlinks li { color: #FFFFFF; font-size: 13px; font-weight: 400; }
ul.navlinks a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.navbar .dropdown a, .navbar .dropdown li, .navbar .dropdown .icon { color: var(--ink) !important; font-size: 12px; }
.navbar .dropdown a:hover { color: var(--accent) !important; }

/* Tijdregels: naar de footer verplaatst door bmw7.js */
.bmw7-time { text-align: center; color: var(--ink); font-size: 13px; margin: 16px 0 4px; }
.action-bar .mark-read, .mark-read { color: #808080; font-size: 13px; }

/* Categorieblokken: grijze kopbalk, witte rijen */
.forabg, .forumbg {
	background: var(--surface);
	background-image: none;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 0;
	overflow: hidden;
	margin-bottom: 12px;
	box-shadow: none;
}
ul.topiclist li.header { background: var(--cat); border: 0; border-radius: 0; }
ul.topiclist li.header dl.row-item { min-height: 48px; display: flex; align-items: center; }
ul.topiclist li.header dt, ul.topiclist li.header dd { color: #FFFFFF; text-transform: none; letter-spacing: 0; border: 0; }
ul.topiclist li.header dt { font-size: 14px; font-weight: 600; }
ul.topiclist li.header dd { font-size: 12px; font-weight: 400; padding-top: 0; }
ul.topiclist li.header dl.row-item dt .list-inner { padding-left: 12px; }
li.header dt a, li.header dd a, .forabg .header a, .forumbg .header a, th a { color: #FFFFFF; }
.forabg .header a:hover, .forumbg .header a:hover, th a:hover { color: #FFFFFF; text-decoration: underline; }
ul.topiclist li.row, li.row, .bg1, .bg2 { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 0; }
ul.topiclist li.row dl { border: 0; }
ul.topiclist li.row dl.row-item { min-height: 64px; }
ul.topiclist li.row dt .list-inner { padding-top: 10px; padding-bottom: 10px; }
ul.topiclist li.row dd { border-left: 0; font-size: 13px; color: var(--muted); padding-top: 12px; }
ul.topiclist li.row dd.lastpost { font-size: 12px; }
a.forumtitle, a.topictitle { font-size: 14px; }
ul.topiclist li.row dt .list-inner { color: var(--muted); font-size: 13px; }
@media (hover: hover) and (pointer: fine) {
	ul.topiclist li.row:hover { background: #FAFAFA; }
}

/* Wie is er online / Statistieken: donkere kopbalk met wit vak */
.stat-block { margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.stat-block h3, .stat-block h3 a {
	margin: 0;
	padding: 0 12px;
	line-height: 48px;
	background: var(--bar);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	border: 0;
}
.stat-block h3 a { padding: 0; background: transparent; }
.stat-block p { margin: 0; padding: 12px; font-size: 13px; color: var(--ink); }
.stat-block p + p { padding-top: 0; }

/* Panelen, berichten */
.panel { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); }
.post { border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.post.bg1, .post.bg2 { background: var(--surface); }
.postprofile { border-left-color: var(--line); color: var(--muted); }
.postbody .content { color: var(--ink); font-size: 14px; }
blockquote { background: var(--bg); border-color: var(--line); border-radius: var(--r); }

/* Knoppen */
.button, a.button1, input.button1, input.button2, a.button2, input.button1:hover {
	color: #FFFFFF;
	background: var(--bar);
	background-image: none;
	border-color: var(--bar);
	border-radius: var(--r);
	text-shadow: none;
	box-shadow: none;
	touch-action: manipulation;
	transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
.button:active, a.button1:active, input.button1:active, input.button2:active, a.button2:active { transform: scale(0.97); }
.button:hover, .button:focus, a.button1:hover, input.button1:hover, input.button2:hover, a.button2:hover { text-shadow: none; }
@media (hover: hover) and (pointer: fine) {
	.button:hover, a.button1:hover, input.button1:hover, input.button2:hover, a.button2:hover { color: #FFFFFF; background: var(--bar-hover); border-color: var(--bar-hover); }
	.button:hover .icon, a.button1:hover .icon { color: #FFFFFF; }
}
.button .icon, .button-secondary { color: #FFFFFF; }
input.inputbox, textarea.inputbox, select, input.post, textarea.post { border-radius: var(--r); border-color: var(--line); background: var(--surface); color: var(--ink); }
input.inputbox:focus, textarea:focus, select:focus { border-color: var(--accent); }
.pagination li a, .pagination li span { border-color: var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); }
.pagination li.active span { background: var(--bar); border-color: var(--bar); color: #FFFFFF; }

/* Tabs en UCP-menu */
.tabs .tab > a { background: var(--band); background-image: none; border-color: var(--line); color: var(--muted); border-radius: var(--r) var(--r) 0 0; }
.tabs .tab > a:hover { background: var(--line); color: var(--ink); }
.tabs .activetab > a, .tabs .activetab > a:hover { background: var(--surface); border-color: var(--line); color: var(--ink); }
#navigation a { background: var(--band); background-image: none; border-color: var(--line); color: var(--ink); }
#navigation a:hover { background: var(--bar); color: #FFFFFF; }
#navigation #active-subsection a, #navigation .active-subsection a { background: var(--surface); color: var(--accent); }
.rules { background: var(--surface); background-image: none; border-radius: var(--r); }

/* Snel-inloggen onderaan de index verbergen: inloggen gaat via het venster (zoals Metro) */
form.headerspace { display: none; }

/* Footer: lijnen boven en onder, tijd en copyright gecentreerd */
#page-footer .navbar { background: transparent; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; margin-top: 12px; padding: 10px 0; }
#page-footer .navbar a, #page-footer .navbar li, #page-footer .navbar .icon { color: #808080; font-size: 13px; }
#page-footer .navbar a:hover, #page-footer .navbar a:hover .icon { color: var(--ink); }
.copyright { color: #555555; font-size: 13px; padding-top: 8px; }
.copyright a { color: #808080; }

/* Inlogvenster (overlay), naar het voorbeeld van Metro */
.bmw7-login {
	width: min(380px, calc(100vw - 32px));
	padding: 0;
	border: 0;
	border-radius: var(--r);
	background: var(--surface);
	color: var(--ink);
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.35);
}
.bmw7-login::backdrop { background: rgba(0, 0, 0, 0.6); }
.bmw7-login[open] { animation: bmw7-login-in 180ms var(--ease-out); }
@keyframes bmw7-login-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.bmw7-login-form {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 16px;
	padding: 20px 32px 0;
	font-size: 12px;
}
.bmw7-login-head { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bmw7-login-head h2 { margin: 0; font-size: 24px; font-weight: 400; color: #808080; }
.bmw7-login-close { width: 32px; height: 32px; margin-right: -8px; border: 0; border-radius: var(--r); background: transparent; color: #B3B3B3; font-size: 16px; cursor: pointer; }
.bmw7-login-close:hover { color: var(--ink); background: var(--band); }
.bmw7-login-field { grid-column: 1 / -1; position: relative; margin: 8px 0; }
.bmw7-login-field:nth-of-type(2) { grid-row: 3; }
.bmw7-login-field:nth-of-type(3) { grid-row: 4; }
.bmw7-login-field label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 400; }
.bmw7-login-field input.inputbox {
	width: 100% !important; max-width: none; box-sizing: border-box;
	height: 40px; padding: 0 12px 0 34px;
	font-size: 13px;
	border: 1px solid #EBEBEB; border-radius: var(--r);
}
.bmw7-login-field input.inputbox:focus { border-color: #808080; }
.bmw7-login-field::after {
	font-family: FontAwesome;
	position: absolute; left: 13px; bottom: 11px;
	color: #B3B3B3; font-size: 13px; pointer-events: none;
}
.bmw7-login-field:nth-of-type(2)::after { content: "\f007"; }
.bmw7-login-field:nth-of-type(3)::after { content: "\f023"; }
input.button1.bmw7-login-submit { grid-column: 1; grid-row: 5; justify-self: start; width: auto !important; min-width: 120px; height: 36px; margin: 12px 0 20px; padding: 0 16px; font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; }
.bmw7-login-remember { grid-column: 2; grid-row: 5; display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 11px; cursor: pointer; }
.bmw7-login-foot {
	grid-column: 1 / -1; grid-row: 6;
	display: flex; justify-content: space-between; gap: 12px;
	margin: 0 -32px; padding: 14px 32px 18px;
	border-top: 1px solid #EBEBEB;
	font-size: 13px;
}
.bmw7-login-foot a { color: #808080; }
.bmw7-login-foot a:hover { color: var(--ink); }

/* Mobiel */
@media (max-width: 700px) {
	.headerbar { padding: 12px 0 10px; }
	.logo { display: block; float: left; padding: 0; }
	.site_logo { width: min(280px, 72vw); height: 45px; }
	.bmw7-account { margin-top: 2px; gap: 18px; }
	.headerbar, .navbar, .forabg, .forumbg, .post, .panel { margin-left: 0; margin-right: 0; }
	ul.topiclist li.header dl.row-item { justify-content: center; }
	input, textarea, select, input.inputbox { font-size: 16px; }
}
@media (pointer: coarse) {
	input, textarea, select, input.inputbox, .bmw7-login-field input.inputbox { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.button, a.button1, input.button1, input.button2, a.button2 { transition: none; }
	.button:active, a.button1:active, input.button1:active, input.button2:active { transform: none; }
	.bmw7-login[open] { animation: none; }
}

/* Header zoals Metro: logo links, rechts een bovenregel (zoeken + account) en daaronder tegels voor leden */
.headerbar .inner.bmw7-head { display: flex; justify-content: space-between; align-items: stretch; gap: 24px; }
.bmw7-head .site-description { float: none; width: auto; flex: 0 0 auto; }
.headerbar .inner.bmw7-head::after, .headerbar .inner.bmw7-head::before { display: none; }
.bmw7-head-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 12px; min-width: 0; }
.bmw7-topbar { display: flex; align-items: center; gap: 24px; }
.bmw7-topbar .search-header { float: none; margin: 0; display: block; }
.bmw7-account { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.bmw7-account > li { float: none; margin: 0; padding: 0; list-style: none; position: relative; }
.bmw7-account > li > a { color: #808080; font-size: 14px; text-decoration: none; }
.bmw7-account > li > a .icon { color: #B3B3B3; }
.bmw7-account > li > a:hover, .bmw7-account > li > a:hover .icon { color: var(--ink); }
.bmw7-account .header-avatar img { max-height: 24px; width: auto; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.bmw7-account .badge { background: var(--accent); color: #FFFFFF; border-radius: 9px; padding: 1px 6px; font-size: 10px; }
.bmw7-account .dropdown a, .bmw7-account .dropdown li, .bmw7-tiles .dropdown a, .bmw7-tiles .dropdown li { color: var(--ink); font-size: 12px; }
.bmw7-account .dropdown a:hover, .bmw7-tiles .dropdown a:hover { color: var(--accent); }

.bmw7-tiles { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bmw7-tiles > li { float: none; margin: 0; padding: 0; list-style: none; position: relative; }
.bmw7-tiles > li > a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	width: 92px;
	height: 72px;
	padding: 10px 10px 9px;
	border-radius: var(--r);
	background: var(--cat);
	color: #FFFFFF;
	font-size: 12px;
	text-decoration: none;
	transition: background-color 150ms var(--ease-out);
}
.bmw7-tiles > li > a .icon { color: #FFFFFF; font-size: 20px; width: auto; margin: 0; align-self: flex-start; text-align: left; }
.bmw7-tiles > li > a span { align-self: flex-start; }
.bmw7-tiles > li > a:hover, .bmw7-tiles > li > a:focus-visible, .bmw7-tiles > li.dropdown-visible > a { background: var(--bar); color: #FFFFFF; }
.bmw7-tiles > li > a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 700px) {
	.headerbar .inner.bmw7-head { flex-wrap: wrap; gap: 10px; }
	.bmw7-head-right { flex: 1 1 auto; }
	.bmw7-topbar { gap: 16px; }
	.bmw7-topbar .search-header { display: none; }
	.bmw7-tiles { width: 100%; justify-content: flex-end; }
	.bmw7-tiles > li > a { flex-direction: row; align-items: center; gap: 8px; width: auto; height: 36px; padding: 0 12px; }
	.bmw7-tiles > li > a .icon { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.bmw7-tiles > li > a { transition: none; }
}

/* 2026-afwerking: zelfde indeling en kleuren, rustiger en strakker */
.forabg, .forumbg, .stat-block, .panel, .post { border-color: #E6E6E6; box-shadow: var(--shadow); }
ul.navlinks { border-radius: var(--r); min-height: 42px; }

ul.topiclist li.header dl.row-item { min-height: 46px; }
ul.topiclist li.header dt { font-size: 14px; font-weight: 600; letter-spacing: 0.005em; }
ul.topiclist li.header dd { font-size: 12px; opacity: 0.9; }
ul.topiclist li.row { border-top-color: var(--divider); transition: background-color 120ms ease; }
ul.topiclist li.row dt .list-inner { padding-top: 13px; padding-bottom: 13px; }
ul.topiclist li.row dd { padding-top: 15px; }
ul.topiclist li.row dd.posts, ul.topiclist li.row dd.topics, ul.topiclist li.row dd.views { font-variant-numeric: tabular-nums; color: #555555; }
ul.topiclist li.row dd.lastpost > span { line-height: 1.5; }
ul.topiclist li.row dd.lastpost a.lastsubject { font-weight: 600; }
a.forumtitle, a.topictitle { font-weight: 600; letter-spacing: -0.005em; }

.stat-block h3, .stat-block h3 a { line-height: 46px; font-weight: 600; }
.stat-block p { padding: 14px 14px 12px; line-height: 1.55; }
.stat-block p + p { padding-top: 0; padding-bottom: 14px; }

.button, a.button1, input.button1, input.button2, a.button2, input.inputbox, textarea.inputbox, select,
.pagination li a, .pagination li span, .search-header, .bmw7-tiles > li > a, .bmw7-login-field input.inputbox, .bmw7-login-close,
blockquote, .tabs .tab > a { border-radius: var(--r-sm); }
.tabs .tab > a { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.dropdown .dropdown-contents { border-radius: var(--r-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); border-color: #E6E6E6; }

#page-footer .navbar { border-top-color: #E6E6E6; border-bottom-color: #E6E6E6; padding: 12px 0; }
.bmw7-time { color: #555555; }
.bmw7-login { border-radius: var(--r); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28); }
.bmw7-login::backdrop { background: rgba(20, 20, 20, 0.55); }
.bmw7-login-foot { border-top-color: #EEEEEE; }

/* Naam in de bovenregel in dezelfde grijstint als de andere links */
.bmw7-account #username_logged_in .username, .bmw7-account #username_logged_in .username-coloured { color: #555555 !important; font-size: 14px; font-weight: 600; }
.bmw7-account #username_logged_in .header-profile > a:hover .username, .bmw7-account #username_logged_in .header-profile > a:hover .username-coloured { color: var(--ink) !important; }

/* Topicweergave: één lettertype, rustige knoppen, duidelijke hiërarchie */
h2.topic-title, h2.forum-title { font-family: var(--font); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 18px 0 10px; }
h2.topic-title a, h2.forum-title a { color: var(--ink); text-decoration: none; }

.post { padding: 16px 18px; margin-bottom: 10px; }
.postbody h3, .postbody h3.first { font-family: var(--font); font-size: 16px; font-weight: 600; line-height: 1.35; margin: 0 0 4px; padding: 0; }
.postbody h3 a, .postbody h3.first a { color: var(--ink); text-decoration: none; }
.postbody h3 a:hover { color: var(--accent); }
.postbody .author { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.postbody .author .username, .postbody .author .username-coloured { font-weight: 600; }

.content { font-family: var(--font); font-size: 14px; line-height: 1.65; color: var(--ink); }
.postbody .content { font-size: 14px; }
.content img.postimage, .content .postimage { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.signature { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--divider); font-size: 12px; color: var(--muted); }
.signature strong, .signature b { font-weight: 600; }

blockquote { margin: 10px 1px 10px 12px; padding: 10px 14px; background: #FAFAFA; border: 1px solid #ECECEC; border-left: 3px solid #C8C8C8; border-radius: var(--r-sm); font-size: 13px; }
blockquote cite { font-style: normal; font-weight: 600; color: var(--muted); }
.codebox { background: #FAFAFA; border: 1px solid #ECECEC; border-radius: var(--r-sm); }

/* Meld/citeer-knoppen: licht in plaats van zware zwarte blokjes */
.post-buttons .button {
	background: transparent;
	border-color: transparent;
	color: #8A8A8A;
	box-shadow: none;
}
.post-buttons .button .icon { color: #8A8A8A; }
@media (hover: hover) and (pointer: fine) {
	.post-buttons .button:hover { background: var(--band); border-color: var(--band); }
	.post-buttons .button:hover .icon { color: var(--ink); }
}

/* Profielkolom */
.postprofile { padding-left: 14px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.postprofile .avatar img { border-radius: var(--r-sm); }
.postprofile dd, .postprofile dt { line-height: 1.5; }
.postprofile dt .username, .postprofile dt .username-coloured { font-size: 13px; font-weight: 600; }
.postprofile strong { color: var(--ink); font-weight: 600; }
.postprofile .profile-rank { color: var(--muted); }
.back2top .top { opacity: 0.5; }
.back2top .top:hover { opacity: 1; }

/* Zoeken in onderwerp en paginering in de actiebalk */
.action-bar .search-box .inputbox { border: 1px solid var(--line); border-right: 0; background: var(--surface); height: 24px; padding: 0 8px; }
.action-bar .search-box .button-search { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.action-bar .search-box .inputbox { border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); border-top-right-radius: 0; border-bottom-right-radius: 0; }
.action-bar .pagination li a, .action-bar .pagination li span { min-width: 24px; text-align: center; }

@media (max-width: 700px) {
	.post { padding: 12px; }
	.postprofile { padding-left: 0; }
	h2.topic-title, h2.forum-title { font-size: 19px; }
}
.pagination li a .icon, .pagination .button .icon { color: var(--ink); }
.pagination li a:hover .icon { color: #FFFFFF; }
.content img.postimage { border: 1px solid var(--line); }
@media (max-width: 700px) {
	.action-bar .search-box { display: none; }
}
/* Breed logo: verticaal midden in de header; op mobiel logo op eigen regel, account en tegels eronder rechts */
.bmw7-head .site-description { align-self: center; }
.headerbar { padding-top: 20px; padding-bottom: 16px; }
@media (max-width: 700px) {
	.bmw7-head .site-description { flex: 1 1 100%; }
	.bmw7-head-right { flex: 1 1 100%; margin-left: 0; }
}

/* Mobiel: logo in het midden */
@media (max-width: 700px) {
	.bmw7-head .site-description, .site-description { text-align: center; }
	.headerbar .logo { float: none; display: inline-block; }
	.site_logo { background-position: center; }
}

/* Knoppen in formulieren: zelfde lettertype als de rest (prosilver zet hier Verdana/Lucida) */
input.button1, input.button2, a.button1, a.button2, .button { font-family: var(--font) !important; font-weight: 600; }
input.button1, input.button2 { padding: 6px 14px; font-size: 13px; }

/* Registratieformulier: labels links met uitleg eronder, velden rechts, ruime rijen */
#register .panel { padding: 22px 26px; }
#register h2 { font-size: 22px; font-weight: 600; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--divider); }
#register .panel h3, #register .captcha-panel h3 { font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; padding-bottom: 10px; border-bottom: 1px solid var(--divider); }
#register fieldset dl {
	display: grid;
	grid-template-columns: minmax(220px, 32%) 1fr;
	column-gap: 28px;
	align-items: start;
	padding: 12px 0;
	margin: 0;
	border-top: 1px solid #F2F2F2;
}
#register fieldset dl:first-child { border-top: 0; }
#register fieldset dt, #register fieldset dd { float: none; width: auto; margin: 0; padding: 0; }
#register fieldset dt label { font-size: 13px; font-weight: 600; color: var(--ink); }
#register fieldset dt span, #register fieldset dt .explain { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--muted); font-weight: 400; }
#register fieldset dt br { display: none; }
#register fieldset dd input.inputbox, #register fieldset dd select {
	width: 100%;
	max-width: 400px;
	box-sizing: border-box;
	height: 38px;
	padding: 0 11px;
	font-size: 14px;
	border: 1px solid #DADADA;
	background: var(--surface);
}
#register fieldset dd select + select, #register fieldset dd select + .button, #register fieldset dd .button + select { margin-top: 6px; }
#register fieldset dd input.inputbox:focus, #register fieldset dd select:focus { border-color: var(--accent); outline: 2px solid rgba(0, 102, 177, 0.15); outline-offset: 0; }
#register fieldset dd strong, #register fieldset > dl > dd:only-child { font-weight: 600; }
#register hr { border-top-color: var(--divider); margin: 8px 0; }
#register .submit-buttons, #register fieldset.submit-buttons { text-align: center; padding: 6px 0; }
#register .submit-buttons input.button1 { min-width: 180px; height: 42px; font-size: 14px; }

/* Voorwaarden en leeftijdsvraag: ruimere knoppen */
#agreement .panel { padding: 22px 26px; }
#agreement .content { font-size: 13px; line-height: 1.7; }
#agreement fieldset.submit-buttons input, form#agreement input.button1, form#agreement input.button2 { height: 40px; padding: 0 18px; margin: 4px; }

@media (max-width: 700px) {
	#register .panel, #agreement .panel { padding: 16px; }
	#register fieldset dl { grid-template-columns: 1fr; row-gap: 8px; }
	#register fieldset dd input.inputbox, #register fieldset dd select { max-width: none; font-size: 16px; }
	#register .submit-buttons input.button1 { width: 100%; }
}
/* Registratie: correcties voor de prosilver-opbouw */
#register fieldset dd input.inputbox.autowidth, #register fieldset dd input.inputbox { width: 100% !important; max-width: 400px; }
#register fieldset dd select.autowidth { width: 100% !important; max-width: 400px; }
#register fieldset dl > dd + dd { grid-column: 2; margin-top: 6px; }
#register fieldset dl > dd:only-child { grid-column: 1 / -1; padding: 10px 14px; background: #FAFAFA; border: 1px solid #EEEEEE; border-radius: var(--r-sm); font-size: 13px; line-height: 1.55; color: var(--ink); }
#register fieldset dl > dd:only-child strong { font-weight: 600; }
#register fieldset dl:has(> dd:only-child) { border-top: 0; }
@media (max-width: 700px) {
	#register fieldset dl > dd + dd { grid-column: 1; }
	#register fieldset dd input.inputbox.autowidth, #register fieldset dd input.inputbox, #register fieldset dd select.autowidth { max-width: none; }
}
#register :is(label, strong, dt, dd, span, p, input, select, h2, h3), #agreement :is(label, strong, p, span, h2, h3, .content) { font-family: var(--font); }
#register fieldset dt label { font-weight: 600; }

/* Gasten (geen tegels): Registreer/Aanmelden verticaal gelijk met het midden van het logo */
@media (min-width: 701px) {
	.bmw7-head-right:not(:has(.bmw7-tiles)) { justify-content: center; }
}
/* Inlogvenster: foutmelding en schudden bij een foute poging */
.bmw7-login-error {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0 0 6px;
	padding: 9px 12px;
	border: 1px solid #F1C9D2;
	border-radius: var(--r-sm);
	background: #FDF2F4;
	color: #8A1C33;
	font-size: 12px;
	line-height: 1.45;
}
.bmw7-login-error[hidden] { display: none; }
.bmw7-login-form[aria-busy="true"] .bmw7-login-submit { opacity: 0.6; cursor: progress; }
.bmw7-shake { animation: bmw7-shake 360ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes bmw7-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(3px); }
	30%, 50%, 70% { transform: translateX(-6px); }
	40%, 60% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
	.bmw7-shake { animation: none; }
}
/* "Stuur activatie-e-mail opnieuw" pas tonen na een foute poging, als rustige hulpregel onderaan */
.bmw7-login { overflow: hidden; }
.bmw7-login-foot a[href*="resend_act"] { display: none; }
.bmw7-login-help {
	grid-column: 1 / -1;
	grid-row: 7;
	margin: 0 -32px;
	padding: 12px 32px 14px;
	border-top: 1px solid #EEEEEE;
	background: #FAFAFA;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.5;
	animation: bmw7-help-in 220ms var(--ease-out);
}
.bmw7-login-help a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: #CFCFCF; text-underline-offset: 2px; }
.bmw7-login-help a:hover { text-decoration-color: var(--ink); }
@keyframes bmw7-help-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bmw7-login-help { animation: none; } }

/* Eén lettertype voor de hele site (prosilver zet op veel plekken Verdana, Lucida of Trebuchet); iconen en code blijven ongemoeid */
body *:not(i):not(.icon):not(.fa):not(code):not(pre):not(kbd):not(samp):not(.codebox *) { font-family: var(--font); }
a.forumtitle, a.topictitle { font-family: var(--font); }
.content a.button1, .content a.button2, a.button1, a.button2 { text-decoration: none; }

/* Inloggen, activatie-e-mail en wachtwoord vergeten: zelfde opmaak als het registratieformulier */
:is(#login, #resend, #reset_password) .panel { padding: 22px 26px; }
:is(#login, #resend, #reset_password) h2 { font-size: 22px; font-weight: 600; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--divider); }
:is(#login, #resend, #reset_password) h3 { font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; padding-bottom: 10px; border-bottom: 1px solid var(--divider); }
:is(#login, #resend, #reset_password) fieldset dl { display: grid; grid-template-columns: minmax(220px, 32%) 1fr; column-gap: 28px; align-items: start; padding: 10px 0; margin: 0; }
:is(#login, #resend, #reset_password) fieldset dt, :is(#login, #resend, #reset_password) fieldset dd { float: none; width: auto; margin: 0; padding: 0; }
:is(#login, #resend, #reset_password) fieldset dl > dd + dd, :is(#login, #resend, #reset_password) fieldset dl > dt:empty + dd, :is(#login, #resend, #reset_password) fieldset dl > dd:only-child { grid-column: 2; }
:is(#login, #resend, #reset_password) fieldset dt label { font-size: 13px; font-weight: 600; color: var(--ink); }
:is(#login, #resend, #reset_password) fieldset dt span, :is(#login, #resend, #reset_password) fieldset dt .explain { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--muted); }
:is(#login, #resend, #reset_password) fieldset dt br { display: none; }
:is(#login, #resend, #reset_password) fieldset dd input.inputbox { width: 100% !important; max-width: 400px; box-sizing: border-box; height: 38px; padding: 0 11px; font-size: 14px; border: 1px solid #DADADA; background: var(--surface); }
:is(#login, #resend, #reset_password) fieldset dd input.inputbox:focus { border-color: var(--accent); outline: 2px solid rgba(0, 102, 177, 0.15); outline-offset: 0; }
:is(#login, #resend, #reset_password) fieldset dd label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
:is(#login, #resend, #reset_password) fieldset dd > a { font-size: 13px; }
:is(#login, #resend, #reset_password) input.button1 { min-width: 140px; height: 38px; font-size: 14px; }
#login .content, #login .panel p { font-size: 13px; line-height: 1.65; }
#login hr.dashed { border-top: 1px solid var(--divider); }
@media (max-width: 700px) {
	:is(#login, #resend, #reset_password) .panel { padding: 16px; }
	:is(#login, #resend, #reset_password) fieldset dl { grid-template-columns: 1fr; row-gap: 8px; }
	:is(#login, #resend, #reset_password) fieldset dl > dd + dd, :is(#login, #resend, #reset_password) fieldset dl > dt:empty + dd, :is(#login, #resend, #reset_password) fieldset dl > dd:only-child { grid-column: 1; }
	:is(#login, #resend, #reset_password) fieldset dd input.inputbox { max-width: none; font-size: 16px; }
}

/* Ontbrekende avatars (bestand niet meer op de server): verborgen door bmw7.js */
.bmw7-avatar-missing { display: none !important; }

/* Losse knoppen in panelen (zoals Registreer op de inlogpagina) even groot als de formulierknoppen */
#page-body .panel a.button1, #page-body .panel a.button2 { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; height: 38px; padding: 0 18px; font-size: 14px; box-sizing: border-box; }

/* Groepskleur #3300FF (paarsblauw) als BMW-blauw tonen; andere groepskleuren blijven herkenbaar */
.username-coloured[style*="3300FF" i], .username-coloured[style*="3300ff" i] { color: var(--accent) !important; }
.username-coloured[style*="3300FF" i]:hover { color: #004F8A !important; }