body {background: #fff;}
table {border-collapse: collapse; width: 100%; margin-bottom: 20px;}
th, td {border: 1px solid #ddd; padding: 8px; text-align: left;}
th {background-color: #f2f2f2;}
button { margin: 5px; }
a {color: #313233 !important;}

.bar-bg {height: 20px; background: #f1f1f1;}
.bar    {height: 20px; background: #4CAF50;}
.party-buckets { display:grid; gap:14px; margin-top:14px; }
.question { margin-bottom: 20px; }
.page-container {position: relative;padding-bottom: 10px; /* Ruimte voor knoppen */}
.button-container {width: 100%;box-shadow: 0 -2px 5px rgba(0,0,0,0.05);}
.nav-item.has-sub .nav-dropdown-link::after {display: none !important;}

/* Explanation button */
.explanation-btn {
    background: none;
    border: none;
    color: #0066cc;
    cursor: pointer;
    margin-left: 5px;
    font-size: 0.9em;
}

/* Explanation popup */
:root { --header-offset: 0px; } 
.explanation-popup {
    display: none;
    position: fixed;
    top: calc(var(--header-offset) + 12px); /* ? exact onder header */
    right: 20px;
    width: 500px;
	max-width: 95vw;
    height: 80vh;
    background: white;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    z-index: 3000;
    padding: 10px;
    overflow-y: auto;
    transition: transform 0.3s ease;
    transform: translateX(100%);
	scroll-behavior: smooth;
}
.explanation-popup.active {display: block;transform: translateX(0);animation: slideIn 0.3s forwards;}
.explanation-content {position: relative;width: 100%; max-width: 100%;}
#explanation-text {padding-right: 15px;line-height: 1.6;font-size: 16px;}
.close-explanation {
	position: relative;
    top: 2px;
    right: 2px;
    font-size: 30px;
    cursor: pointer;
    color: #666;
    background: none;
    border: none;
    z-index: 1001;
	padding: 5px;
}
.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2999;
}
.popup-overlay.active {display: block;}
.code-popup pre {
	background: #f5f5f5;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
}


@keyframes slideIn {from { right: -450px; } to { right: 0; }}
.footer {background-color: #fff !important;padding: 0rem 0; !important;margin-top: 0rem !important;}
.bg-gray-100:not(.btn,button,[type=submit],[type=reset],[type=button]) {background-color: #fff !important;}
.custom-scroll {scrollbar-gutter: stable;}

.table td, .table th {
	padding: 0rem !important;
	border-width: 0 0 0 !important;
	vertical-align: top;
	text-align: inherit;
	margin: 0;
}

.fig .fig-caption {margin-top: 0rem !important;}
.fig {display: flex;flex-direction: column;align-items: center;text-align: center;}
.fig-caption {margin-top: 5px;font-size: 14px;}
.fig img {display: block;}
.program-link{ margin-left:.4rem; font-size:12px; text-decoration:none; }
.program-link .fa-file-pdf{ vertical-align:-1px; }

.stat-top {
	padding: 10px 14px;
	margin: 10px 0 16px;
	background: #eef9f1;
	border: 1px solid #d6e9d7;
	border-radius: 6px;
	font-size: 1.05em;
}
.stat-top small { color:#666; }
.button-container {width: 100%;box-shadow: 0 0px 0px rgba(0, 0, 0, 0) !important;}
.max-w-fit {max-width: fit-content !important;}

/* forceer gelijke grootte en centering van je QR-figuren */
.footer .qr-figure {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.7rem; /* ondermarge om overlap te vermijden */
  text-align: center;
}

.footer .qr-figure img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Rating widget */
.review-inline,
.review-inline > * {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Make common star elements behave inline */
.review-inline svg,
.review-inline i,
.review-inline img,
.review-inline span { display: inline-block; vertical-align: middle;}
.review-inline svg path {fill: currentColor !important;}
.review-inline br { display: none; }
#rating-widget { display:flex; flex-direction:column; }
#rating-widget .review-inline { justify-content: center; }
#rating-widget {
  /* keep your existing flex + column */
  align-items: center;       /* center inner content horizontally */
  text-align: center;        /* center text/icons inside */
  margin-left: auto;
  margin-right: auto;        /* center as block and flex item */
  align-self: center;        /* if its parent is display:flex */
  float: none;               /* ignore theme floats */
}

/* Mobiel */
@media (max-width: 768px) {
    .header {
		padding: 0 0rem !important;
    }
	.header .nav-btn {
		width: 1.5rem !important;
	}
	.menuicon {
		margin-top:20px
	} 
	.nav-btn {
       
    }
	/* Pas tekstgrootte aan voor mobiel */
	body {
		font-size: 16px; /* Kleinere basis font size */
		line-height: 1.7; /* Compactere line height */
		height: 100%;
	}
	h2 {
		font-size: 1.5rem; /* Kleinere grootte voor mobiel, bijvoorbeeld 24px */
	}
	.strongsmall {
		font-size: 0.8rem; /* Kleinere grootte voor mobiel, bijvoorbeeld 24px */
	}
	/* Voorkom horizontaal scrollen voor lange woorden */
	.text-container {
		overflow-wrap: break-word;
		word-wrap: break-word;
		hyphens: auto;
	}
    .default-prev-btn {display: none !important;}
    .hide_normal {display: none !important;}
	article, blockquote, p {
		font-size: 1rem;
		line-height: 1.2;
		margin-bottom: 1rem;
	}
}

/* Groter dan mobiel */
@media (min-width: 768px) { /* Pas dit breekpunt aan op basis van Cirrus-UI */
	.hide_mobile {display: none !important;}
	.mobile-prev-btn {display: none !important;}
}
	:root { --name-col: 22ch; }
	.results-flex{ display:flex; align-items:center; gap:.75rem; }
	.results-table { width:100%; border-collapse:separate; border-spacing:0 8px; }
	.results-row { background:var(--cirrus-elevated, #fff); border:1px solid rgba(0,0,0,.06); border-radius:12px; }
	.results-row > td { padding:.6rem .8rem; }

	.results-grid{
	  display: grid;
	  grid-template-columns: auto var(--name-col) 1fr auto; /* logo | fixed name | bar | % */
	  align-items: center;
	  column-gap: .75rem;
	}
	.results-grid * { min-width: 0; } /* allow shrinking without wrapping */

	.party-logo { width:28px; height:28px; object-fit:contain; border-radius:6px; display:block; }
	.party-name{ flex: 0 0 var(--name-col); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
	.progress.inline{ flex: 1 1 auto; }  /* fills the remaining space, bars line up */
	.score-badge { font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600; }

  /* Small screens: cap name width so everything still fits on one line */
  @media (max-width: 520px){
    .results-grid {
      grid-template-columns: auto minmax(0, 12ch) 1fr auto; /* name up to ~12 chars */
    }
  }