/* Strike-through the disabled radio options (SBO) */
input[disabled] + .vl-radio__label {
	text-decoration: line-through;
}

ul {
	list-style-type: disc;
}

/* The green box when the voucher is approved. */
.decision_message_approved {
	background-color: #4caf50;
	color: white;
	border-radius: 10px; /* Adjust this value to control the rounded corner radius */
	padding: 10px; /* Add padding to give some space around the content */
}

/* The orange box when the voucher information is incomplete. */
.decision_message_incomplete {
	background-color: #ff9800 !important;
	color: black !important;
	border-radius: 10px; /* Adjust this value to control the rounded corner radius */
	padding: 10px; /* Add padding to give some space around the content */
}

/* The red box when the voucher is rejected. */
.decision_message_rejected,
.vl-alert.vl-alert--naked.vl-alert--accent.vl-alert--error {
	background-color: #8b0000 !important; /* Dark red */
	color: white !important;
	border-radius: 10px; /* Adjust this value to control the rounded corner radius */
	padding: 10px; /* Add padding to give some space around the content */
}

/* Style the error message content */
.vl-alert.vl-alert--naked.vl-alert--accent.vl-alert--error .vl-alert__content {
	color: white;
}

.vl-alert.vl-alert--naked.vl-alert--accent.vl-alert--error .vl-alert__title,
.vl-alert.vl-alert--naked.vl-alert--accent.vl-alert--error .vl-alert__message {
	color: white;
}

/* The table for low usage. Maybe we change it for all tables in veka_loket */
.veka_loket_overview_table {
	table-layout: fixed;
	width: 100%;
}

.veka_loket_overview_table_column_1 {
	width: 15%;
	font-weight: bold;
}

/* Minimum height for the table cells if empty */
@media screen and (max-width: 767px) {
	.vl-data-table--collapsed-s tr td::after {
		content: "";
		display: inline-block;
		vertical-align: top;
		min-height: 1.4rem;
	}
}

/* Form in Doormat(button) should not have spacing */
.vl-doormat .vl-form__group {
	padding: 0;
	margin: 0;
	width: auto;
	left: unset;
	right: unset;
}

.vl-doormat .vl-form {
	margin: 0;
}

.vl-doormat__text {
	margin-top: 2rem;
}

@media screen and (max-width: 956px) {
	.vl-doormat .vl-button {
		margin-top: 0.7rem;
		margin-bottom: 0.7rem;
	}

	.vl-doormat .vl-action-group {
		margin-top: 1.3rem;
		margin-bottom: -0.7rem;
	}
}

/* Forms */
.consent-form .vl-form__group,
.review-summary-form .vl-form__group,
.review-device-type-form .vl-form__group,
.voucher-main-form .vl-form__group {
	background: none;
}

.vl-radio-tile:first-child {
	margin-top: 10px;
}

.vl-radio-tile__label {
	width: 100%;
}

@media screen and (max-width: 767px) {
	#edit-contact-column {
		margin-bottom: 3rem;
	}
}
.vl-page
	.vl-data-table--zebra
	tbody
	tr:not(.vl-data-table__element--warning):not(
		.vl-data-table__element--error
	):not(.vl-data-table__element--success):nth-child(2n + 1):hover {
	background-color: #f3f5f6;
}

.vl-page .vl-data-table--hover tbody tr:hover {
	background: initial;
}

/* The table css for the mobile as in the latest webuniversum library */
@media screen and (max-width: 767px) {
	.vl-data-table--collapsed-s td {
		border-bottom: 1px solid #cfd5dd;
		position: relative;
		padding-left: 0;
		white-space: normal;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 10px;
		-webkit-box-flex: 2;
		-ms-flex-positive: 2;
		flex-grow: 2;
	}
}

@media screen and (max-width: 767px) {
	.vl-data-table--collapsed-s td::before,
	.vl-data-table--collapsed-s th::before {
		content: attr(data-title);
		position: relative;
		top: unset;
		left: unset;
		width: 35%;
		padding-right: 0;
		white-space: normal;
		-o-text-overflow: initial;
		text-overflow: initial;
		overflow: initial;
		text-align: left;
		font-weight: 500;
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}
}

#edit-contact-choice {
	display: grid;
}

/* The title css making backward compatible with latest webuniversum library */
.vl-title--h1 {
	margin-top: 4rem;
	margin-bottom: 6rem;
}

@media screen and (max-width: 1023px) {
	.vl-title--h1 {
		margin-bottom: 4.5rem;
	}
}

@media screen and (max-width: 767px) {
	.vl-title--h1 {
		margin-bottom: 3rem;
	}
}

.vl-title--h2 {
	margin-top: 4rem;
	margin-bottom: 2rem;
}

@media screen and (max-width: 767px) {
	.vl-title--h2 {
		margin-bottom: 1.5rem;
	}
}

.vl-title--h3 {
	margin-top: 4rem;
	margin-bottom: 2rem;
}

@media screen and (max-width: 767px) {
	.vl-title--h3 {
		margin-bottom: 1.5rem;
	}
}

.vl-title--h4 {
	margin-top: 3.6rem;
	margin-bottom: 1.8rem;
}

@media screen and (max-width: 767px) {
	.vl-title--h4 {
		margin-bottom: 1.4rem;
	}
}

.vl-title--h5 {
	margin-top: 3.2rem;
	margin-bottom: 1.6rem;
}

@media screen and (max-width: 767px) {
	.vl-title--h5 {
		margin-bottom: 1.2rem;
	}
}

.vl-title--h6 {
	margin-top: 2.8rem;
	margin-bottom: 1.4rem;
}

@media screen and (max-width: 767px) {
	.vl-title--h6 {
		margin-bottom: 1rem;
	}
}

.vl-title--no-space-bottom {
	margin-bottom: 0;
}

/* The header css making backward compatible with latest webuniversum library */
.vl-functional-header {
	background-color: var(--vl-theme-action-color);
	margin-bottom: 2rem;
}

.vl-functional-header .vl-link--neutral,
.vl-functional-header .vl-link--neutral:hover,
.vl-functional-header .vl-link--neutral:focus,
.vl-functional-header .vl-link--neutral:active,
.vl-functional-header .vl-link--neutral:visited {
	color: #fff;
}

.vl-functional-header .vl-region--alt {
	background-color: transparent;
}

/* Remove decorative lines/stripes added by webuniversum. */
.vl-functional-header--has-actions::before,
.vl-functional-header__sub::before,
.vl-functional-header .vl-tabs--alt::before {
	display: none;
}

.vl-functional-header .vl-functional-header__actions {
	background: transparent;
	margin-top: 0;
}

.vl-functional-header__title {
	margin-top: 0;
	text-transform: uppercase;
}

.vl-functional-header__sub {
	padding-bottom: 2rem;
}

.vl-functional-header .vl-tab,
.vl-functional-header .vl-tab:visited {
	color: #fff;
}

.vl-functional-header .vl-tab--active,
.vl-functional-header .vl-tab--active:visited {
	background-color: var(--vl-theme-action-color);
	color: #fff;
	border-bottom: 3px solid #fff;
}

/* Anonymous design: a rule closes off the navigation row, with the active tab
   sitting on top of it. The grid has to fill the flex row, otherwise the rule
   stops right after the last tab. */
.role-anonymous .vl-functional-header__sub > .vl-grid {
	flex: 1;
}

.role-anonymous .vl-functional-header .vl-tabs:not(.vl-tabs--overflow) {
	border-bottom: 1px solid #4b7284;
}

.role-anonymous .vl-functional-header__row {
	/* The design lines the "Over VEKA" link up with the application name. */
	align-items: flex-end;
}

/* Keep the active tab's indicator off the link text. */
.role-anonymous .vl-functional-header .vl-tab {
	padding-bottom: 0.9rem;
}

/* Desktop spacing from the design: the rule runs the full width of the 80px
   gutter, while the text it underlines is indented to the 110px the page
   content uses. Smaller screens keep the layout's own gutters. */
@media screen and (min-width: 1024px) {
	.role-anonymous .vl-functional-header .vl-layout {
		padding-right: 8rem;
		padding-left: 8rem;
	}

	.role-anonymous .vl-functional-header__row {
		padding: 5rem 3rem 0;
	}

	.role-anonymous .vl-functional-header__sub {
		padding-top: 2.1rem;
	}

	.role-anonymous .vl-functional-header .vl-tabs:not(.vl-tabs--overflow) {
		padding-left: 3rem;
	}
}

.veka-loket-header-title {
	margin: 0;
	font-family: "Flanders Art Sans", sans-serif;
	font-size: 2.4rem;
	line-height: 2.8rem;
	text-transform: uppercase;
	color: #fff;
}

.veka-loket-header-title__agency,
.veka-loket-header-title__app {
	display: block;
}

.veka-loket-header-title__app {
	font-weight: 700;
}

@media screen and (max-width: 767px) {
	.veka-loket-header-title {
		font-size: 1.8rem;
		line-height: 2.2rem;
	}
}

.vl-accordion__title {
	font-size: 20px;
}

.vl-max-width--80 {
	max-width: 80%;
}

/* Global breadcrumb removal */
.vl-breadcrumb,
.breadcrumb,
nav[aria-label="breadcrumb"],
.region-breadcrumb {
	display: none !important;
}

/* ETS1 page wider layout */
.path-ets1 .vl-layout {
	max-width: 2000px;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* ETS1 exposed form spacing */
/* Add space between filters */
.vl-custom-exposed .form-item {
	margin-right: 2rem;
}

/* Add extra space before the Apply/Reset buttons */
.vl-custom-exposed .form-actions {
	margin-left: 3rem;
	margin-top: 28px !important;
}

/* Override any inline styles on vl-action-group */
.vl-custom-exposed .vl-action-group {
	margin-top: 0 !important;
}

/* Add space between Apply and Reset buttons */
.vl-custom-exposed .form-actions .vl-button {
	margin-right: 1rem;
}

/* Make Toepassen button same height as dropdown */
.vl-custom-exposed .form-actions .vl-button {
	height: 3.5rem;
	line-height: 3.5rem;
	padding-top: 0;
	padding-bottom: 0;
}

.vl-custom-exposed .form-actions .vl-button:last-child {
	margin-right: 0;
}

/* Responsive spacing for smaller screens */
@media screen and (max-width: 767px) {
	.vl-custom-exposed {
		flex-direction: column;
		align-items: stretch;
	}

	.vl-custom-exposed .form-item {
		margin-right: 0;
		margin-bottom: 1.5rem;
	}

	.vl-custom-exposed .form-actions {
		margin-left: 0;
		margin-top: 2rem;
	}

	.vl-custom-exposed .form-actions .vl-button {
		margin-right: 1rem;
		margin-bottom: 1rem;
	}
}

/* Override infoblock header icon color to white on dark teal background */
.vl-infoblock__header__icon {
	color: #fff !important;
}

/* Ensure the upload document extension badge text has enough contrast
   against the teal accent background, across all front-office file widgets. */
.vl-document__type__text {
	color: #fff;
}

/* Global layout width increase - extends application_frontpage_ng layout. */
.vl-page .vl-layout {
	max-width: 1480px;
}

.vl-page .vl-infoblock__content {
	margin-left: 0;
}

/* Restore progress bar to v3 sizing: all steps same size (2.4rem desktop,
   2.5rem mobile), not v4's enlarged active bullet (4.2rem) or larger
   non-active bullet (3.2rem). */
.vl-progress-bar--numeric {
	height: 2.4rem;
}
/* All bullets (active and non-active): 2.4rem on desktop. */
.vl-progress-bar--numeric .vl-progress-bar__step .vl-progress-bar__bullet,
.vl-progress-bar--numeric
	.vl-progress-bar__step--active
	.vl-progress-bar__bullet {
	width: 2.4rem;
	height: 2.4rem;
}
/* Font inside bullets: scaled for 2.4rem bullet. */
.vl-progress-bar--numeric .vl-progress-bar__step
	.vl-progress-bar__bullet::after,
.vl-progress-bar--numeric
	.vl-progress-bar__step--active
	.vl-progress-bar__bullet::after {
	font-size: 1.4rem;
}
/* Connector line: adjust right offset for 2.4rem bullet (was 3.7rem for 3.2rem). */
.vl-progress-bar--numeric .vl-progress-bar__step::before,
.vl-progress-bar--numeric .vl-progress-bar__step--active::before {
	right: 2.9rem;
}
/* progress-marker matches the bar height. */
.progress-marker {
	height: 2.4rem;
}
@media screen and (max-width: 767px) {
	.vl-progress-bar--numeric {
		height: 2.5rem;
	}
	.vl-progress-bar--numeric .vl-progress-bar__step .vl-progress-bar__bullet,
	.vl-progress-bar--numeric
		.vl-progress-bar__step--active
		.vl-progress-bar__bullet {
		width: 2.5rem;
		height: 2.5rem;
	}
	.vl-progress-bar--numeric .vl-progress-bar__step::before,
	.vl-progress-bar--numeric .vl-progress-bar__step--active::before {
		right: 3rem;
	}
	.progress-marker {
		height: 2.5rem;
	}
}

/* Fix upload progress bar: stable theme overrides .progress__bar to 1.5em
   which makes the filled bar taller than the 16px track. The track has a 1px
   border on all sides, so the inner height is 14px. */
.progress__bar {
	height: 14px;
}

/* Vestiging switcher */
.vestiging-switcher {
	position: relative;
	display: block;
	width: 28.5rem;
	max-width: 100%;
}

.vestiging-switcher__trigger {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	background: transparent;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 1rem 1rem 0.5rem;
	text-align: left;
	background-color: #4b7284;
	transition: background-color 0.15s ease;
}

.vestiging-switcher__trigger:hover,
.vestiging-switcher__trigger[aria-expanded="true"] {
	background-color: #728f9b;
}

/* Static (non-interactive) variant for users with a single vestiging. */
.vestiging-switcher__static {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	color: #fff;
	padding: 1rem 1rem 0.5rem;
	text-align: left;
	background-color: #4b7284;
}

.vestiging-switcher__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	background-color: #105269;
	font-size: 1.6rem;
}

.vestiging-switcher__icon-svg {
	display: block;
	width: auto;
	height: 1.5rem;
}

.vestiging-switcher__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.vestiging-switcher__title {
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 2rem;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vestiging-switcher__sub {
	font-size: 1.2rem;
	line-height: 1.6rem;
	color: #b7c9cd;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vestiging-switcher__arrow {
	flex-shrink: 0;
	align-self: flex-start;
	font-size: 1.8rem;
}

.vestiging-switcher__dropdown {
	position: absolute;
	top: calc(100% + 0.6rem);
	left: 0;
	width: 28.5rem;
	max-width: 100vw;
	background: #fff;
	border: 1px solid #cfd5dd;
	box-shadow: 0 2px 12px rgba(106, 118, 134, 0.35);
	z-index: 200;
}

.vestiging-switcher__dropdown[hidden] {
	display: none;
}

/* Arrow pointer above the popover. */
.vestiging-switcher__dropdown::before,
.vestiging-switcher__dropdown::after {
	content: "";
	position: absolute;
	left: 2rem;
	width: 0;
	height: 0;
	border-left: 0.6rem solid transparent;
	border-right: 0.6rem solid transparent;
}

.vestiging-switcher__dropdown::before {
	top: -0.7rem;
	border-bottom: 0.6rem solid #cfd5dd;
}

.vestiging-switcher__dropdown::after {
	top: -0.6rem;
	border-bottom: 0.6rem solid #fff;
}

.vestiging-switcher__search {
	padding: 1rem 0.8rem;
	border-bottom: 1px solid #cfd5dd;
}

.vestiging-switcher__search-input {
	box-sizing: border-box;
	width: 100%;
	height: 3.5rem;
	padding: 0.55rem 0.6rem;
	border: 1px solid #cfd5dd;
	border-radius: 3px;
	font-family: inherit;
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 2.4rem;
	color: #333332;
	-webkit-appearance: none;
	appearance: none;
}

.vestiging-switcher__search-input::placeholder {
	color: #687483;
	opacity: 1;
}

.vestiging-switcher__search-input:focus {
	outline: none;
	border-color: #075e8d;
}

.vestiging-switcher__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 36rem;
	overflow-y: auto;
}

.vestiging-switcher__item {
	margin: 0;
	border-bottom: 1px solid #cfd5dd;
}

.vestiging-switcher__item:last-child {
	border-bottom: none;
}

.vestiging-switcher__link {
	display: block;
	padding: 1rem 2rem;
	border-left: 3px solid transparent;
	color: #075e8d;
	text-decoration: none;
	transition: background-color 0.1s ease;
}

.vestiging-switcher__link:hover {
	background-color: #f0f7fb;
	text-decoration: none;
}

.vestiging-switcher__item--active .vestiging-switcher__link {
	border-left-color: #6098b6;
}

.vestiging-switcher__link-title {
	display: block;
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 2rem;
	color: #075e8d;
}

.vestiging-switcher__item--active .vestiging-switcher__link-title {
	color: #333332;
}

.vestiging-switcher__link-number {
	display: block;
	font-size: 1.4rem;
	line-height: 2rem;
	color: #687483;
}

.vestiging-switcher__link-sub {
	display: block;
	font-size: 1.2rem;
	line-height: 1.6rem;
	color: #687483;
}

/* Header action links */
.veka-loket-header-actions__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.veka-loket-header-actions__link {
	font-family: "Flanders Art Sans", sans-serif;
	font-weight: 500;
	font-size: 1.6rem;
	line-height: 2.4rem;
	letter-spacing: 0;
	white-space: nowrap;
	/* The design underlines these links on hover, not at rest. */
	text-decoration: none;
}

.veka-loket-header-actions__link:hover,
.veka-loket-header-actions__link:focus {
	text-decoration: underline;
}

.veka-loket-header-actions__icon::before {
	font-size: 1.6rem;
	margin-left: 0.5rem;
}

/* Step navigation: compact font sizes for sidebar */
.webform-steps-nav .vl-step__title {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.4;
	margin-bottom: 0;
	color: #687483;
}

.webform-steps-nav .vl-step--highlighted > .vl-step__container .vl-step__title,
.webform-steps-nav .vl-step--completed > .vl-step__container .vl-step__title {
	font-weight: 700;
	color: #333332;
}

/* Completed step links (sidebar navigation back to past steps). */
.webform-steps-nav .vl-step__title--link {
	text-decoration: none;
	color: inherit;
	display: inline;
}
.webform-steps-nav .vl-step__title--link:hover,
.webform-steps-nav .vl-step__title--link:focus {
	text-decoration: underline;
	color: #075e8d;
}

/* Step markers are small dots, not numbered circles. */
.webform-steps-nav .vl-step > .vl-step__container > .vl-step__icon {
	font-size: 0;
	height: 1.2rem;
	width: 1.2rem;
	padding: 0;
	border-radius: 50%;
	/* position: relative keeps the dot in normal flow (the upstream icon is
     absolutely positioned), which is what aligns it with the title. */
	position: relative;
	transform: translate(-3rem, 1.7rem);
	background-color: #b7c9cd;
	color: transparent;
}

/* Current and completed steps share the same medium-slate dot. */
.webform-steps-nav .vl-step--highlighted > .vl-step__container > .vl-step__icon,
.webform-steps-nav .vl-step--completed > .vl-step__container > .vl-step__icon {
	background-color: #728f9b;
}

.webform-steps-nav .vl-steps__list {
	overflow: hidden;
	padding-left: 0.6rem;
	list-style: none;
}

.webform-steps-nav .vl-step {
	margin-left: 4rem;
	margin-top: 1.3rem;
}

/*
 * Connector line. The upstream two-stub approach (::before + ::after) is tuned for
 * tall steps and leaves ragged gaps with small dots, so draw a single segment per
 * step. It starts just below the step's dot and ends just above the next dot,
 * leaving an even gap around each dot. The last step has no trailing connector.
 */
.webform-steps-nav .vl-step__container::before {
	display: none;
}

.webform-steps-nav .vl-step .vl-step__container::after {
	top: 3.3rem;
	bottom: auto;
	height: 2.8rem;
	left: -2.55rem;
	background-color: #cfd5dd;
}

.webform-steps-nav .vl-step:last-child .vl-step__container::after {
	display: none;
}

/* Webform page content: consistent question/label sizing */
.webform-submission-form .fieldset-legend,
.webform-submission-form legend {
	font-size: 1.8rem;
	font-weight: 500;
}

.webform-submission-form .vl-form__label {
	font-size: 1.6rem;
}

/* Two-column layout: vl-steps left, form content right */
.webform-submission-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 60px;
}

.webform-submission-form > .webform-progress {
	flex: 0 0 357px;
	width: 357px;
}

.webform-submission-form
	> .webform-progress
	~ .form-wrapper:not(.webform-actions) {
	flex: 1 1 0%;
	min-width: 0;
}

/* Buttons inside the content column (right of sidebar) */
.webform-submission-form .form-wrapper > .webform-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
}

.webform-submission-form
	.form-wrapper
	> .webform-actions
	> .vl-action-group--align-right {
	margin-left: auto;
}

.webform-submission-form > input[type="hidden"] {
	display: none;
}

/* Desktop: hide checkbox and label, step list always visible */
.webform-steps-toggle {
	display: none;
}

.webform-steps-summary {
	display: none;
}

/* Tablet: narrower sidebar, still two-column */
@media screen and (max-width: 1023px) {
	.webform-submission-form > .webform-progress {
		flex: 0 0 260px;
		width: 260px;
	}

	.webform-submission-form {
		column-gap: 30px;
	}
}

/* Mobile: single column, collapsible step indicator */
@media screen and (max-width: 767px) {
	.webform-submission-form {
		flex-direction: column;
		gap: 2rem;
	}

	.webform-submission-form > .webform-progress {
		flex: 0 0 auto;
		width: 100%;
	}

	.webform-steps-summary {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 1rem;
		font-weight: 600;
		cursor: pointer;
		border: 1px solid #cfd5dd;
		border-radius: 4px;
		background: #f3f5f6;
	}

	.webform-steps-summary::before {
		content: "\25B6";
		font-size: 0.8rem;
		transition: transform 0.2s ease;
	}

	.webform-steps-toggle:checked ~ .webform-steps-summary::before {
		transform: rotate(90deg);
	}

	.webform-steps-nav > .vl-steps__list {
		display: none;
	}

	.webform-steps-toggle:checked ~ .vl-steps__list {
		display: block;
		border: 1px solid #cfd5dd;
		border-top: none;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		padding: 0.5rem;
	}

	.webform-steps-toggle:checked ~ .webform-steps-summary {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
}

/* -------------------------------------------------------------------------- */
/* EU Cookie Compliance — VEKA (webuniversum) look and feel.                  */
/* Renders the banner as a floating bottom-right card with vertically stacked */
/* full-width buttons. Works with the module's "bare" CSS library, which only */
/* handles positioning and a float layout; everything below overrides that    */
/* layout and adds the visual chrome using the webuniversum theme tokens.     */
/* Buttons pick up their styling from the vl-button classes added in the      */
/* template overrides.                                                        */
/* -------------------------------------------------------------------------- */

/* Dark card colours. Defined once here for reuse across the rules below. */
.sliding-popup-bottom,
.eu-cookie-withdraw-wrapper.sliding-popup-bottom {
	--cookie-card-bg: #105269;
	--cookie-card-fg: #fff;
}

/* Turn the full-width bottom bar into a floating bottom-right dark card. */
.sliding-popup-bottom,
.eu-cookie-withdraw-wrapper.sliding-popup-bottom {
	right: 4rem;
	bottom: 4rem !important;
	left: auto;
	width: 100%;
	max-width: 61.2rem;
	background: var(--cookie-card-bg);
	color: var(--cookie-card-fg);
	border-radius: 6px;
	box-shadow: none;
	text-align: left;
}

/* Override bare's inline-block / max-width 80% content wrapper. */
.sliding-popup-bottom .eu-cookie-compliance-content {
	display: block;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 2rem;
}

/* Message spans the full card width; drop bare's float and 60% cap. */
.sliding-popup-bottom .eu-cookie-compliance-message {
	float: none;
	max-width: none;
	margin-bottom: 1.6rem;
	color: var(--cookie-card-fg);
	font-size: 1.4rem;
	line-height: 1.5;
}

/* Title with a cookie icon to its left, wrapping text indented beside it. */
.sliding-popup-bottom .eu-cookie-compliance-message h2 {
	margin: 0 0 0.8rem;
	padding-left: 4.4rem;
	min-height: 3.2rem;
	color: var(--cookie-card-fg);
	font-size: 2rem;
	line-height: 1.2;
	font-weight: 300;
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7c9cd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.5a9.5 9.5 0 1 0 9.5 9.5 3.8 3.8 0 0 1-3.8-3.8 3.8 3.8 0 0 1-3.8-3.8A1.9 1.9 0 0 0 12 2.5Z'/><circle cx='8.5' cy='11' r='.9' fill='%23b7c9cd' stroke='none'/><circle cx='12.5' cy='15' r='.9' fill='%23b7c9cd' stroke='none'/><circle cx='15.5' cy='11.5' r='.9' fill='%23b7c9cd' stroke='none'/><circle cx='9.5' cy='15' r='.7' fill='%23b7c9cd' stroke='none'/></svg>");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 3.5rem 3.5rem;
}

.sliding-popup-bottom .eu-cookie-compliance-message p {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.5;
}

.sliding-popup-bottom .eu-cookie-compliance-message a {
	color: var(--cookie-card-fg);
	text-decoration: underline;
}

.sliding-popup-bottom .eu-cookie-compliance-message a:hover {
	color: var(--cookie-card-fg);
	opacity: 0.85;
}

/* Render the "Meer info" trigger as a plain inline text link, not a button. */
.sliding-popup-bottom .eu-cookie-compliance-more-button {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--cookie-card-fg);
	text-decoration: underline;
	cursor: pointer;
}

.sliding-popup-bottom .eu-cookie-compliance-more-button:hover {
	opacity: 0.85;
}

/* Buttons sit side by side, left aligned, sized to their content. */
.sliding-popup-bottom .eu-cookie-compliance-buttons {
	float: none;
	max-width: none;
	margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.sliding-popup-bottom .eu-cookie-compliance-buttons .vl-button {
	width: auto;
	justify-content: center;
	border-radius: 0;
	padding: 0.6rem 1.2rem;
	font-size: 1.7rem;
}

/* Primary button: light fill with dark text (e.g. "Alles toestaan"). */
.sliding-popup-bottom .eu-cookie-compliance-buttons
	.vl-button:not(.vl-button--secondary):not(.vl-button--tertiary) {
	background-color: #fff;
	color: var(--cookie-card-bg);
	border: 0.2rem solid #fff;
}

.sliding-popup-bottom
	.eu-cookie-compliance-buttons
	.vl-button:not(.vl-button--secondary):not(.vl-button--tertiary):hover {
	background-color: #e6ebee;
	color: var(--cookie-card-bg);
}

/* Secondary/tertiary button: outlined white on the dark card (e.g. "Weigeren"). */
.sliding-popup-bottom .eu-cookie-compliance-buttons .vl-button--secondary,
.sliding-popup-bottom .eu-cookie-compliance-buttons .vl-button--tertiary {
	background-color: transparent;
	color: var(--cookie-card-fg);
	border: 0.2rem solid var(--cookie-card-fg);
}

.sliding-popup-bottom .eu-cookie-compliance-buttons .vl-button--secondary:hover,
.sliding-popup-bottom .eu-cookie-compliance-buttons .vl-button--tertiary:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--cookie-card-fg);
}

/* Cookie categories (opt-in per category). */
.sliding-popup-bottom .eu-cookie-compliance-categories {
	clear: both;
	margin: 0 0 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.eu-cookie-compliance-category {
	margin-bottom: 0.75rem;
}

.sliding-popup-bottom .eu-cookie-compliance-category-description {
	margin-left: 1.75rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.8);
}

/* Withdraw tab that sits at the window edge. */
.eu-cookie-withdraw-tab {
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

/* On small screens let the card use (almost) the full viewport width. */
@media screen and (max-width: 600px) {
	.sliding-popup-bottom,
	.eu-cookie-withdraw-wrapper.sliding-popup-bottom {
		right: 0.75rem;
		bottom: 0.75rem;
		left: 0.75rem;
		width: auto;
		max-width: none;
	}

	/* Stack the buttons full width when the card spans the viewport. */
	.sliding-popup-bottom .eu-cookie-compliance-buttons {
		flex-direction: column;
	}

	.sliding-popup-bottom .eu-cookie-compliance-buttons .vl-button {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------- */
/* File upload inputs — vl-upload drop zone.                                  */
/* Markup comes from templates/form/input--file.html.twig; the zone visuals  */
/* come from the webuniversum vl-upload component CSS. The rules below       */
/* stretch the native input invisibly across the zone so clicking anywhere   */
/* opens the file picker and native drag-and-drop onto the input keeps       */
/* working, without the vl-upload JS widget (its own upload handling would   */
/* conflict with the AJAX upload of Drupal's managed_file element).          */
/* -------------------------------------------------------------------------- */

.vl-upload .vl-upload__element__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: auto;
	cursor: pointer;
	z-index: 5;
}

.vl-upload .vl-upload__element__button {
	text-decoration: underline;
	font-weight: 500;
}

/* The input is transparent, so :focus+label from the component CSS never    */
/* shows; draw the keyboard focus ring on the zone instead.                  */
.vl-upload .vl-upload__element:focus-within {
	outline: 0.2rem solid
		var(--vl-theme-focus-outline-color, rgba(7, 94, 141, 0.65));
	outline-offset: 0.2rem;
}

/*
 * The active-tab underline is invisible on both the "main" and
 * "main-anonymous" top nav menus: a later rule in webuniversum's compiled
 * CSS resets .vl-tab's border-bottom-color back to transparent, overriding
 * the color .vl-tab--active sets. Pre-existing issue, not specific to the
 * anonymous menu - fixing it here for both since they share this component.
 */
#block-subuniversum-main-menu .vl-tab--active,
#block-subuniversum-main-menu-anonymous .vl-tab--active {
	border-bottom-color: #fff !important;
}

/*
 * Even breathing room between the top nav tabs. Webuniversum's compiled CSS
 * ends on .vl-tab{margin:0 .8rem} for this tabs variant, which reads as
 * cramped at the header's font size; the ID keeps it above that rule without
 * !important. Margin rather than padding, so the active tab's underline stays
 * the width of its own label.
 */
#block-subuniversum-main-menu .vl-tab,
#block-subuniversum-main-menu-anonymous .vl-tab {
	margin-right: 1.6rem;
}
#block-subuniversum-main-menu .vl-tab:last-child,
#block-subuniversum-main-menu-anonymous .vl-tab:last-child {
	margin-right: 0;
}