/*
 * Speelse laag (body.hw-fun): de Wijzer, gekleurde blokken met golfovergangen, micro-interacties.
 * Wordt alleen geladen als hw_fun_active() waar is.
 */

/* ---------- De Wijzer ---------- */
.hw-wijzer__shadow {
	fill: #14213d;
	opacity: 0.12;
	transform-box: fill-box;
	transform-origin: center;
	animation: hw-w-shadow 2.6s ease-in-out infinite alternate;
}

.hw-wijzer__bob {
	animation: hw-w-bob 2.6s ease-in-out infinite alternate;
}

.hw-wijzer__eyes {
	transform-box: fill-box;
	transform-origin: center;
	animation: hw-w-blink 5.5s infinite;
}

.hw-wijzer__needle {
	transform: translate(98px, 76px) rotate(var(--hw-point, 30deg));
	transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hw-wijzer.is-poke .hw-wijzer__jab {
	animation: hw-w-jab 0.5s ease-out 0.35s 2;
}

.hw-wijzer--wave {
	flex: none;
	width: 48px;
	height: auto;
	margin: -6px 0 -8px;
	overflow: visible;
}

.hw-wijzer--wave .hw-wijzer__needle {
	animation: hw-w-wave 3.2s ease-in-out infinite;
}

@keyframes hw-w-bob {
	from { transform: translateY(0); }
	to { transform: translateY(-5px); }
}

@keyframes hw-w-shadow {
	from { transform: scale(1); opacity: 0.12; }
	to { transform: scale(0.82); opacity: 0.07; }
}

@keyframes hw-w-blink {
	0%, 92%, 100% { transform: scaleY(1); }
	95% { transform: scaleY(0.1); }
}

@keyframes hw-w-jab {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(6px); }
}

@keyframes hw-w-wave {
	0%, 55%, 100% { transform: translate(98px, 76px) rotate(-40deg); }
	65% { transform: translate(98px, 76px) rotate(-5deg); }
	75% { transform: translate(98px, 76px) rotate(-45deg); }
	85% { transform: translate(98px, 76px) rotate(-10deg); }
}

body.hw-fun .hw-mm-teaser {
	border: 2px solid #14213d;
	background: #fff;
	box-shadow: 3px 3px 0 #14213d;
	color: #14213d !important;
}

body.hw-fun .hw-mm-teaser:hover {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 #14213d;
}

/* ---------- Gekleurde blokken met golfovergang (homepage) ---------- */
body.hw-fun .elementor-element-f3a8c10,
body.hw-fun .elementor-element-a7c31e9,
body.hw-fun .elementor-element-551fc0c {
	position: relative;
	padding-top: 44px !important;
	padding-bottom: 34px !important;
}

body.hw-fun .elementor-element-f3a8c10 {
	margin-top: 40px;
	background: #fff6da !important;
}

body.hw-fun .elementor-element-a7c31e9 {
	background: #eef3fe !important;
}

body.hw-fun .elementor-element-551fc0c {
	background: #fdf1e0 !important;
}

body.hw-fun .elementor-element-39b6e63 {
	position: relative;
	padding-top: 44px !important;
}

body.hw-fun .elementor-element-f3a8c10::before,
body.hw-fun .elementor-element-a7c31e9::before,
body.hw-fun .elementor-element-551fc0c::before,
body.hw-fun .elementor-element-39b6e63::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 44px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
}

/* De golf heeft de kleur van het blok erboven. */
body.hw-fun .elementor-element-f3a8c10::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 44%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 0H1440V14C1180 48 960 4 720 22S300 44 0 18Z%22 fill=%22%23ffffff%22/%3E%3C/svg%3E");
}

body.hw-fun .elementor-element-a7c31e9::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 44%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 0H1440V20C1200 2 980 44 700 26S260 4 0 24Z%22 fill=%22%23fff6da%22/%3E%3C/svg%3E");
}

body.hw-fun .elementor-element-551fc0c::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 44%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 0H1440V14C1180 48 960 4 720 22S300 44 0 18Z%22 fill=%22%23eef3fe%22/%3E%3C/svg%3E");
}

body.hw-fun .elementor-element-39b6e63::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 44%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 0H1440V20C1200 2 980 44 700 26S260 4 0 24Z%22 fill=%22%23fdf1e0%22/%3E%3C/svg%3E");
}

/* Kaarten in de gekleurde blokken: wit, met een "sticker"-rand. */
body.hw-fun .hw-mm {
	border: 2px solid #14213d;
	box-shadow: 5px 5px 0 #14213d;
}

/* Routekaarten: rustig, dun lijntje en een accent bovenaan in de logokleuren (blauw, geel, oranje, zwart). */
body.hw-fun .hw-routes__card {
	position: relative;
	border: 1px solid #e3e7ef;
	border-top: 5px solid #296bef;
	background: #fff;
	box-shadow: 0 1px 2px rgba(20, 33, 61, 0.04);
	transition: transform 0.18s, box-shadow 0.18s;
}

body.hw-fun .hw-routes__card:nth-child(2) { border-top-color: #fdc92f; }
body.hw-fun .hw-routes__card:nth-child(3) { border-top-color: #f0a636; }
body.hw-fun .hw-routes__card:nth-child(4) { border-top-color: #14213d; }
body.hw-fun .hw-routes__card:nth-child(5) { border-top-color: #296bef; }

body.hw-fun .hw-routes__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(41, 107, 239, 0.12);
}

body.hw-fun .hosting-uitleg-card {
	border: 1px solid #efd9b8 !important;
	background: #fff !important;
}

body.hw-fun .hw-hub__card {
	transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

body.hw-fun .hw-hub__card:hover {
	border-color: #14213d;
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(20, 33, 61, 0.12);
}

/* Rangnummers van de top 5 als ronde badges in de logokleuren; nummer 1 krijgt een sterretje. */
body.hw-fun .elementor-element-9731933 .elementor-heading-title,
body.hw-fun .elementor-element-b2e2ed9 .elementor-heading-title,
body.hw-fun .elementor-element-1301b2c .elementor-heading-title,
body.hw-fun .elementor-element-c50a8d6 .elementor-heading-title,
body.hw-fun .elementor-element-7d8b54b .elementor-heading-title {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: #fdc92f;
	color: #14213d !important;
	font-size: 40px !important;
	line-height: 1 !important;
	box-shadow: 0 6px 0 rgba(20, 33, 61, 0.16);
	transform: rotate(-10deg) scale(0.6);
	transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}

body.hw-fun .elementor-element-b2e2ed9 .elementor-heading-title,
body.hw-fun .elementor-element-c50a8d6 .elementor-heading-title {
	background: #296bef;
	color: #fff !important;
}

body.hw-fun .elementor-element-1301b2c .elementor-heading-title {
	background: #f0a636;
}

body.hw-fun .elementor-element-9731933 .elementor-heading-title::after {
	content: "";
	position: absolute;
	right: -8px;
	top: -8px;
	width: 26px;
	height: 26px;
	background: #f0a636;
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	animation: hw-twinkle 2.4s ease-in-out infinite;
}

body.hw-fun .hw-reveal.is-in .elementor-heading-title {
	transform: rotate(-6deg) scale(1);
}

/* ---------- Zwevende kompassterretjes ---------- */
.hw-has-deco {
	position: relative;
}

.hw-deco-star {
	position: absolute;
	z-index: 1;
	width: var(--s, 16px);
	height: var(--s, 16px);
	background: var(--c, #fdc92f);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	pointer-events: none;
	animation: hw-float 6s ease-in-out var(--d, 0s) infinite alternate;
}

@keyframes hw-float {
	from { transform: translateY(0) rotate(0deg); }
	to { transform: translateY(-12px) rotate(35deg); }
}

@keyframes hw-twinkle {
	0%, 100% { transform: scale(1) rotate(0deg); }
	50% { transform: scale(1.25) rotate(25deg); }
}

/* ---------- De Wijzer in de hero ---------- */
.hw-hero-wijzer {
	position: absolute;
	left: -10px;
	bottom: -54px;
	z-index: 3;
	width: 150px;
	pointer-events: none;
}

.hw-hero-wijzer .hw-wijzer {
	display: block;
	width: 150px;
	height: auto;
	overflow: visible;
}

.hw-wijzer--hero .hw-wijzer__needle {
	animation: hw-w-wave 3.2s ease-in-out infinite;
}

.hw-hero-wijzer__bubble,
.hw-peek__bubble {
	position: relative;
	margin: 0 0 10px 30px;
	padding: 9px 13px;
	border-radius: 16px;
	background: #fff;
	color: #14213d;
	font-family: var(--hw-font-head);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	box-shadow: 0 6px 16px rgba(20, 33, 61, 0.14);
	transform: rotate(-4deg);
	animation: hw-bubble-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both;
}

.hw-hero-wijzer__bubble::after,
.hw-peek__bubble::after {
	content: "";
	position: absolute;
	left: 28px;
	bottom: -8px;
	width: 16px;
	height: 16px;
	background: #fff;
	transform: rotate(45deg);
}

@keyframes hw-bubble-in {
	from { opacity: 0; transform: rotate(-4deg) scale(0.6) translateY(10px); }
	to { opacity: 1; transform: rotate(-4deg); }
}

/* ---------- De Wijzer bij de top 5 ---------- */
body.hw-fun .elementor-element-f9f8a50 {
	position: relative;
}

.hw-peek {
	position: absolute;
	right: -30px;
	bottom: calc(100% - 44px);
	width: 200px;
	pointer-events: none;
}

.hw-peek .hw-wijzer {
	display: block;
	width: 118px;
	height: auto;
	margin-left: 70px;
	overflow: visible;
	--hw-point: 115deg;
}

.hw-peek__bubble {
	margin: 0 0 6px;
	transform: rotate(3deg);
	animation-name: hw-bubble-in-r;
}

@keyframes hw-bubble-in-r {
	from { opacity: 0; transform: rotate(3deg) scale(0.6) translateY(10px); }
	to { opacity: 1; transform: rotate(3deg); }
}


/* ---------- Routekaarten: icoon in een kleurvlek, speels scheef ---------- */
.hw-routes__icon {
	display: none;
}

body.hw-fun .hw-routes__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 0 12px;
	border-radius: 58% 42% 55% 45% / 50% 55% 45% 50%;
	background: #296bef;
	color: #fff;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.hw-fun .hw-routes__icon svg {
	width: 28px;
	height: 28px;
}

body.hw-fun .hw-routes__card:nth-child(2) .hw-routes__icon { background: #fdc92f; color: #14213d; }
body.hw-fun .hw-routes__card:nth-child(3) .hw-routes__icon { background: #f0a636; color: #14213d; }
body.hw-fun .hw-routes__card:nth-child(4) .hw-routes__icon { background: #14213d; }


body.hw-fun .hw-routes__card:hover {
	transform: translateY(-4px);
}

body.hw-fun .hw-routes__card:hover .hw-routes__icon {
	transform: rotate(-10deg) scale(1.08);
}

/* ---------- Sappige knoppen ---------- */
body.hw-fun .hw-btn--primary,
body.hw-fun .btn_offer_block:not(.coupon_btn):not(.masked_coupon),
body.hw-fun .elementor-element-43cc021a button,
body.hw-fun .elementor-element-43cc021a .wpsm-button {
	border-radius: 12px !important;
	box-shadow: 0 4px 0 #1b4fbf !important;
	transition: transform 0.1s, box-shadow 0.1s !important;
}

body.hw-fun .hw-btn--primary:hover,
body.hw-fun .btn_offer_block:not(.coupon_btn):not(.masked_coupon):hover {
	transform: translateY(-1px);
	box-shadow: 0 5px 0 #1b4fbf !important;
}

body.hw-fun .hw-btn--primary:active,
body.hw-fun .btn_offer_block:not(.coupon_btn):not(.masked_coupon):active {
	transform: translateY(3px);
	box-shadow: 0 1px 0 #1b4fbf !important;
}

body.hw-fun .hw-quicklinks a {
	transition: transform 0.15s;
}

body.hw-fun .hw-quicklinks a:hover {
	transform: rotate(-2deg) translateY(-1px);
}

/* ---------- Sterrenregen bij de Matchmaker-uitslag ---------- */
.hw-confetti {
	position: fixed;
	z-index: 9999;
	width: var(--s, 12px);
	height: var(--s, 12px);
	margin: calc(var(--s, 12px) / -2) 0 0 calc(var(--s, 12px) / -2);
	background: var(--c, #fdc92f);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	pointer-events: none;
	animation: hw-boom 1.25s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}

@keyframes hw-boom {
	0% { transform: translate(0, 0) rotate(0) scale(0.4); opacity: 1; }
	70% { opacity: 1; }
	100% { transform: translate(var(--x), calc(var(--y) + 120px)) rotate(var(--r)) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hw-deco-star,
	.hw-hero-wijzer__bubble,
	.hw-peek__bubble,
	.hw-wijzer--hero .hw-wijzer__needle,
	body.hw-fun .elementor-element-9731933 .elementor-heading-title::after {
		animation: none;
	}
}

@media (max-width: 767px) {
	body.hw-fun .elementor-element-f3a8c10,
	body.hw-fun .elementor-element-a7c31e9,
	body.hw-fun .elementor-element-551fc0c,
	body.hw-fun .elementor-element-39b6e63 {
		padding-top: 36px !important;
	}

	body.hw-fun .elementor-element-f3a8c10::before,
	body.hw-fun .elementor-element-a7c31e9::before,
	body.hw-fun .elementor-element-551fc0c::before,
	body.hw-fun .elementor-element-39b6e63::before {
		height: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hw-wijzer__shadow,
	.hw-wijzer__bob,
	.hw-wijzer__eyes,
	.hw-wijzer--wave .hw-wijzer__needle,
	.hw-wijzer.is-poke .hw-wijzer__jab {
		animation: none;
	}

	.hw-wijzer__needle {
		transition: none;
	}
}

/* Tekstballonnen niet onnodig smal. */
.hw-hero-wijzer__bubble,
.hw-peek__bubble {
	width: max-content;
	max-width: 230px;
}

/* "Waarom"-kaarten: geen loze ruimte boven de kop. */
body.hw-fun .hosting-uitleg-card h3 {
	margin-top: 0 !important;
}

/* De Wijzer bij de top 5 boven de hero-golf laten staan, niet erachter. */
body.hw-fun .elementor-element-e47ccf9 {
	position: relative;
	z-index: 3;
}

.hw-peek {
	z-index: 5;
}

/* Rangnummers rustiger: kleiner, zachte tint, geen schaduw of kanteling (feedback 25-09). */
body.hw-fun .elementor-element-9731933 .elementor-heading-title,
body.hw-fun .elementor-element-b2e2ed9 .elementor-heading-title,
body.hw-fun .elementor-element-1301b2c .elementor-heading-title,
body.hw-fun .elementor-element-c50a8d6 .elementor-heading-title,
body.hw-fun .elementor-element-7d8b54b .elementor-heading-title {
	width: 52px;
	height: 52px;
	font-size: 26px !important;
	background: #eef3fe;
	color: #296bef !important;
	box-shadow: none;
	transform: scale(0.8);
}

body.hw-fun .elementor-element-9731933 .elementor-heading-title {
	background: #fff3cc;
	color: #14213d !important;
}

body.hw-fun .elementor-element-9731933 .elementor-heading-title::after {
	right: -6px;
	top: -6px;
	width: 18px;
	height: 18px;
}

body.hw-fun .hw-reveal.is-in .elementor-heading-title {
	transform: none;
}

/* =========================================================================
   Mobiel compacter (25-09): minder scrollen, meer vegen.
   ========================================================================= */
@media (max-width: 767px) {
	/* Routes en "waarom"-kaarten als veegbare rij. */
	body.hw-fun .hw-routes,
	body.hw-fun .hosting-uitleg-grid {
		display: flex !important;
		gap: 12px !important;
		margin-left: -16px !important;
		margin-right: -16px !important;
		padding: 6px 16px 14px !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	body.hw-fun .hw-routes::-webkit-scrollbar,
	body.hw-fun .hosting-uitleg-grid::-webkit-scrollbar {
		display: none;
	}

	body.hw-fun .hw-routes__card,
	body.hw-fun .hosting-uitleg-card {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}

	body.hw-fun .hw-routes::after,
	body.hw-fun .hosting-uitleg-grid::after {
		content: "";
		flex: 0 0 4px;
	}

	/* Reviewkaarten op de homepage: twee per rij, alleen de kern, alleen "zelf gebruikt". */
	body.hw-fun .hw-hub--compact .hw-hub__list {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	body.hw-fun .hw-hub--compact .hw-hub__card:not([data-group="zelf-gebruikt"]) {
		display: none;
	}

	body.hw-fun .hw-hub--compact .hw-hub__card {
		padding: 10px 10px 12px !important;
	}

	body.hw-fun .hw-hub--compact .hw-hub__logo {
		height: 56px;
		margin-bottom: 4px;
	}

	body.hw-fun .hw-hub--compact .hw-hub__logo img {
		max-height: 50px;
	}

	body.hw-fun .hw-hub--compact .hw-hub__best,
	body.hw-fun .hw-hub--compact .hw-hub__limit,
	body.hw-fun .hw-hub--compact .hw-hub__meta span {
		display: none;
	}

	body.hw-fun .hw-hub--compact .hw-hub__name {
		font-size: 0.95rem;
	}

	/* Deelcijfers in de top 5: twee kolommen. */
	body.hw-fun .elementor-element-a4ca2ad > .elementor-widget-wrap,
	body.hw-fun .elementor-element-2505deb > .elementor-widget-wrap,
	body.hw-fun .elementor-element-64b134b > .elementor-widget-wrap,
	body.hw-fun .elementor-element-f5e9862 > .elementor-widget-wrap,
	body.hw-fun .elementor-element-6abc4f2 > .elementor-widget-wrap {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		column-gap: 14px;
		row-gap: 2px;
	}

	body.hw-fun .elementor-element-a4ca2ad .elementor-widget-star-rating,
	body.hw-fun .elementor-element-2505deb .elementor-widget-star-rating,
	body.hw-fun .elementor-element-64b134b .elementor-widget-star-rating,
	body.hw-fun .elementor-element-f5e9862 .elementor-widget-star-rating,
	body.hw-fun .elementor-element-6abc4f2 .elementor-widget-star-rating {
		grid-column: 1 / -1;
	}

	body.hw-fun .elementor-widget-progress .elementor-title {
		font-size: 12px !important;
	}

	body.hw-fun .elementor-widget-progress {
		margin-bottom: 6px !important;
	}
}

/* ---------- De Wijzer op reviewpagina's (alternatieven) en onder artikelen ---------- */
.hw-guide {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
}

.hw-guide .hw-wijzer--guide {
	flex: none;
	width: 84px;
	height: auto;
	overflow: visible;
	--hw-point: 70deg;
}

.hw-guide__bubble {
	position: relative;
	padding: 9px 14px;
	border-radius: 14px;
	background: #fff6da;
	color: #14213d;
	font-family: var(--hw-font-head, inherit);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.35;
}

.hw-guide__bubble::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	background: #fff6da;
	transform: rotate(45deg);
}

body.hw-fun .hw-alts {
	padding: 22px 22px 24px;
	border-radius: 18px;
	background: #eef3fe;
}

body.hw-fun .hw-alt {
	border-color: transparent;
	box-shadow: 0 2px 0 rgba(20, 33, 61, 0.05);
	transition: transform 0.2s, box-shadow 0.2s;
}

body.hw-fun .hw-alt:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(41, 107, 239, 0.12);
}

/* "Verder op Hostingwijzer" onder artikelen: warm geel blok met de Wijzer. */
body.hw-fun .hw-related--fun {
	padding: 18px 20px 16px;
	border: 0;
	border-radius: 18px;
	background: #fff6da;
}

body.hw-fun .hw-related--fun .hw-guide__bubble,
body.hw-fun .hw-related--fun .hw-guide__bubble::before {
	background: #fff;
}

body.hw-fun .hw-related--fun .hw-related__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 10px;
}

body.hw-fun .hw-related--fun .hw-related__list li {
	margin: 0 !important;
	padding: 10px 12px !important;
	border-radius: 12px;
	background: #fff;
	transition: transform 0.18s, box-shadow 0.18s;
}

body.hw-fun .hw-related--fun .hw-related__list li:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(240, 166, 54, 0.18);
}

@media (max-width: 600px) {
	.hw-guide .hw-wijzer--guide {
		width: 64px;
	}

	.hw-guide__bubble {
		font-size: 14.5px;
	}
}

/* Mobiel: minder dubbele ruimte boven de koppen in de gekleurde blokken. */
@media (max-width: 767px) {
	body.hw-fun .elementor-element-f3a8c10 > .elementor-container > .elementor-column > .elementor-widget-wrap,
	body.hw-fun .elementor-element-a7c31e9 > .elementor-container > .elementor-column > .elementor-widget-wrap,
	body.hw-fun .elementor-element-551fc0c > .elementor-container > .elementor-column > .elementor-widget-wrap,
	body.hw-fun .elementor-element-39b6e63 > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding-top: 0 !important;
	}

	body.hw-fun .elementor-element-0753759,
	body.hw-fun .elementor-element-c9e53a1,
	body.hw-fun .elementor-element-2ec766e,
	body.hw-fun .elementor-element-4bd1a6cd {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
}

/* ---------- Kleine Wijzer op tablet en mobiel ---------- */
@media (max-width: 1180px) {
	/* Bij de top 5: klein, zonder tekstballon, gluurt over de golfrand. */
	.hw-peek {
		right: 4px;
		bottom: calc(100% - 8px);
		width: auto;
	}

	.hw-peek__bubble {
		display: none;
	}

	.hw-peek .hw-wijzer {
		width: 72px;
		margin-left: 0;
	}

	/* Naast de zoekbalk: klein en zonder tekstballon. */
	.hw-hero-wijzer {
		width: 96px;
		left: 4px;
		bottom: -34px;
	}

	.hw-hero-wijzer .hw-wijzer {
		width: 96px;
	}

	.hw-hero-wijzer__bubble {
		display: none;
	}
}

@media (max-width: 767px) {
	/* Op de telefoon staat de Wijzer al in de Matchmaker-knop; naast de zoekbalk zou hij de knop raken. */
	.hw-hero-wijzer {
		display: none;
	}

	.hw-peek .hw-wijzer {
		width: 60px;
	}
}

/* ---------- Inklapbare footer op mobiel (hw-fun.js) ---------- */
@media (max-width: 767px) {
	.footer-bottom .hw-fold-hidden {
		display: none !important;
	}

	.footer-bottom .hw-fold-title {
		position: relative;
		display: block;
		margin: 0 !important;
		padding: 14px 32px 14px 0 !important;
		border-bottom: 1px solid #e4e7ee;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.footer-bottom .hw-fold-title::after {
		content: "";
		position: absolute;
		right: 6px;
		top: 50%;
		width: 9px;
		height: 9px;
		margin-top: -7px;
		border-right: 2px solid #296bef;
		border-bottom: 2px solid #296bef;
		transform: rotate(45deg);
		transition: transform 0.2s;
	}

	.footer-bottom .hw-fold-title[aria-expanded="true"]::after {
		margin-top: -2px;
		transform: rotate(-135deg);
	}

	.footer-bottom .hw-fold-title:focus-visible {
		outline: 3px solid #9dbcf7;
		outline-offset: 2px;
	}

	.footer-bottom .footer_widget {
		padding-top: 4px !important;
	}

	.footer-bottom .wpsm-one-half {
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
	}
}

/* Tussenkop die het script tot kop maakt: zelfde stijl als de andere footerkoppen. */
.footer-bottom .hw-fold-sub {
	font-weight: 700;
	color: #14213d;
}