/* ---------------------------------------------------------------------
 * Popup shell: an inset, rounded "sheet" with a thin margin of the page
 * behind still visible (dimmed) — not an edge-to-edge full screen.
 * Scoped to THIS popup only via its unique #elementor-popup-modal-8299
 * id, never touches any other popup on the site.
 * --------------------------------------------------------------------- */
/* iOS Safari bug: Elementor sizes this outer overlay with a static
 * `height:100vh`, which is the LARGER viewport height assuming the
 * address bar/toolbar are collapsed. The actually visible screen is
 * shorter than that whenever the toolbar is showing — so this overlay
 * (and everything inset inside it, including the card's right/bottom
 * margin and the Bel/Mail buttons) extended past the real visible
 * area, underneath the Safari chrome. `position:fixed; inset:0` pins
 * all 4 edges straight to the real visual viewport with no height/vh
 * math at all — this is the standard fix for this exact bug. */
#elementor-popup-modal-8299.dialog-widget {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: auto !important;
	height: auto !important;
	background: rgba(16, 26, 22, .45) !important;
}

#elementor-popup-modal-8299 .dialog-widget-content {
	background: #ffffff !important;
	/* Explicit top/right/bottom/left on a `position:fixed` element pins it
	 * straight to the real visible screen, on every browser, with zero
	 * shorthand/calc()/vh ambiguity — the most bulletproof way to inset a
	 * box from the viewport edges that exists in CSS. */
	position: fixed !important;
	top: 16px !important;
	right: 16px !important;
	bottom: 16px !important;
	left: 16px !important;
	margin: 0 !important;
	width: auto !important;
	height: auto !important;
	max-width: none !important;
	max-height: none !important;
	border-radius: 26px !important;
	overflow: hidden !important;
	box-shadow: 0 24px 60px -12px rgba(10, 20, 16, .45) !important;
}

/* Elementor's own CSS sizes .dialog-message with `width:100vw`. 100vw
 * includes the width of the OS scrollbar when it's a classic (non-overlay)
 * one, while `100%` of our position:fixed/inset:0 wrapper does not — so
 * everything inside was pushed past the true right edge by exactly the
 * scrollbar's width. That's the "no margin/content cut off on the right"
 * bug. Pin it to 100% of our own correctly-bound wrapper instead. */
#elementor-popup-modal-8299 .dialog-message {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
}

#elementor-popup-modal-8299 .elementor-location-popup {
	height: 100% !important;
	width: 100% !important;
}

#elementor-popup-modal-8299 .elementor-section-height-full {
	height: 100% !important;
	min-height: 100% !important;
}

#elementor-popup-modal-8299 .elementor-element-6f9def8 {
	padding: 0 !important;
	height: 100% !important;
}

/* Elementor's content_position:middle centers the (auto-height) .elementor-container
 * vertically inside the section — the section itself isn't the thing that's short,
 * its flex row wrapper is. Force that row to stretch to the section's full height too. */
#elementor-popup-modal-8299 .elementor-element-6f9def8 > .elementor-container {
	height: 100% !important;
	align-self: stretch !important;
}

#elementor-popup-modal-8299 .elementor-element-0cb7d5d {
	height: 100% !important;
	align-self: stretch !important;
}

#elementor-popup-modal-8299 .elementor-element-0cb7d5d > .elementor-widget-wrap {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	justify-content: flex-start !important;
}

#elementor-popup-modal-8299 .elementor-element-1802ba7 {
	flex: 1 1 auto !important;
	height: auto !important;
	min-height: 0 !important;
	width: 100% !important;
	padding: 0 22px !important;
}

/* Elementor's "boxed" container ("e-con-boxed") wraps its real children in
 * an .e-con-inner div for the max-width centering — that inner div (and
 * everything below it: widget > widget-container > .tulp-dd) needs the
 * same flex/height cascade, otherwise the widget stays content-sized
 * instead of stretching to fill the now-grown outer container. */
#elementor-popup-modal-8299 .elementor-element-1802ba7 > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	min-height: 0 !important;
	width: 100% !important;
}

#elementor-popup-modal-8299 .elementor-element-1802ba7 .e-con-inner > .elementor-widget-tulp-drilldown-menu {
	flex: 1 1 auto !important;
	height: auto !important;
	min-height: 0 !important;
	display: flex !important;
	align-self: stretch !important;
}

#elementor-popup-modal-8299 .elementor-element-1802ba7 .elementor-widget-tulp-drilldown-menu > .elementor-widget-container {
	flex: 1 1 auto !important;
	height: 100% !important;
	min-height: 0 !important;
	display: flex !important;
}

/* Just the logo, no "MENU" label underneath — shrinks the header so more
 * of the actual menu list is visible without scrolling. */
#elementor-popup-modal-8299 .elementor-element-a0d493c {
	flex: 0 0 auto !important;
	padding: 12px 0 3px !important;
}

#elementor-popup-modal-8299 .elementor-element-a0d493c .elementor-image-box-title {
	display: none !important;
}

#elementor-popup-modal-8299 .elementor-element-a0d493c .elementor-image-box-img {
	max-width: 40px !important;
	margin: 0 auto !important;
}

#elementor-popup-modal-8299 .elementor-element-a0d493c .elementor-image-box-img img {
	max-width: 100% !important;
	height: auto !important;
}

#elementor-popup-modal-8299 .dialog-lightbox-close-button {
	top: 22px !important;
	right: 22px !important;
}

/* Elementor's animate.css entrance defaults to a 1s duration, which reads
 * as sluggish for a menu people open constantly. Force it snappy. */
#elementor-popup-modal-8299 .dialog-widget-content.animated {
	animation-duration: .22s !important;
}

/* ---------------------------------------------------------------------
 * The menu itself.
 * --------------------------------------------------------------------- */
.tulp-dd,
.tulp-dd * {
	box-sizing: border-box;
}

.tulp-dd {
	--tulp-dd-accent: #6EC09C;
	--tulp-dd-accent-dark: #4E9E7D;
	--tulp-dd-text: #141414;
	--tulp-dd-muted: #8A8A8A;
	--tulp-dd-divider: #E7EFEC;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 0;
	font-family: "Nunito Sans", sans-serif;
}

.tulp-dd-viewport {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	width: 100%;
}

.tulp-dd-panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	/* Without an explicit overflow-x, the browser was free to make this
	 * axis scrollable too as soon as ANYTHING inside was a fraction of a
	 * pixel wider than the panel — showing a horizontal scrollbar and
	 * clipping the right edge. Block it outright: nothing in here should
	 * ever need to scroll sideways. */
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	/* Pure-CSS "scroll shadow": a subtle shadow fades in at the top/bottom
	 * edge only while there's more content to scroll to in that direction,
	 * and disappears on its own once you've scrolled all the way — so a
	 * long list (like Behandelingen) visibly hints it continues below. */
	background:
		linear-gradient(#fff, rgba(255, 255, 255, 0)) center top,
		linear-gradient(rgba(255, 255, 255, 0), #fff) center bottom,
		radial-gradient(farthest-side at 50% 0, rgba(20, 20, 20, .12), rgba(20, 20, 20, 0)) center top,
		radial-gradient(farthest-side at 50% 100%, rgba(20, 20, 20, .14), rgba(20, 20, 20, 0)) center bottom;
	background-repeat: no-repeat;
	background-color: #ffffff;
	background-size: 100% 24px, 100% 24px, 100% 10px, 100% 10px;
	background-attachment: local, local, scroll, scroll;
	transform: translateX(100%);
	transition: transform .26s cubic-bezier(.22, 1, .36, 1);
	will-change: transform;
}

.tulp-dd-panel[data-panel="tulp-dd-root"] {
	transform: translateX(0);
}

.tulp-dd-panel.is-current {
	transform: translateX(0);
}

.tulp-dd-panel.is-prev {
	transform: translateX(-28%);
	filter: brightness(.96);
}

.tulp-dd-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 2px 0 16px;
	border-bottom: 1px solid var(--tulp-dd-divider);
	margin-bottom: 4px;
	flex: 0 0 auto;
}

.tulp-dd-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	background: #fff;
	border: 1.5px solid var(--tulp-dd-divider);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	padding: 0;
	margin: 0;
	color: var(--tulp-dd-accent-dark);
	cursor: pointer;
	flex: 0 0 auto;
	box-shadow: 0 2px 6px rgba(20, 20, 20, .06);
}

.tulp-dd-back span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.tulp-dd-title {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .2px;
	color: var(--tulp-dd-text);
}

.tulp-dd-list {
	list-style: none;
	margin: 0;
	padding: 6px 0 10px;
}

.tulp-dd-item {
	border-bottom: 1px solid var(--tulp-dd-divider);
}

/* button.tulp-dd-row (expandable items) vs a.tulp-dd-row (direct links) must
 * look identical — but the theme's own `button{...}` reset otherwise wins
 * over a plain class selector on font weight/size, so this needs !important. */
.tulp-dd-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	width: 100% !important;
	background: none !important;
	border: 0 !important;
	padding: 17px 2px !important;
	text-align: left !important;
	font-family: "Montserrat", sans-serif !important;
	font-weight: 700 !important;
	font-size: 19px !important;
	letter-spacing: .1px !important;
	line-height: 1.25 !important;
	color: var(--tulp-dd-text) !important;
	text-decoration: none !important;
	cursor: pointer !important;
	-webkit-tap-highlight-color: transparent;
	transition: color .18s ease, padding-left .18s ease;
}

.tulp-dd-row:hover,
.tulp-dd-row:focus-visible {
	color: var(--tulp-dd-accent-dark);
	padding-left: 6px;
}

.tulp-dd-row:hover .tulp-dd-chev,
.tulp-dd-row:focus-visible .tulp-dd-chev {
	transform: translateX(3px);
}

/* Submenu-items (2e niveau) = body-tekst, geen kopfont/tracking. */
.tulp-dd-panel:not([data-panel="tulp-dd-root"]) .tulp-dd-row {
	font-family: "Nunito Sans", sans-serif !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	letter-spacing: normal !important;
	color: #3E3E3E !important;
	padding: 15px 2px !important;
}

.tulp-dd-panel:not([data-panel="tulp-dd-root"]) .tulp-dd-row:hover,
.tulp-dd-panel:not([data-panel="tulp-dd-root"]) .tulp-dd-row:focus-visible {
	color: var(--tulp-dd-accent-dark);
}

.tulp-dd-chev {
	flex: 0 0 auto;
	width: 11px !important;
	height: 17px !important;
	color: var(--tulp-dd-accent-dark);
	transition: transform .18s ease;
}

/* ---------------------------------------------------------------------
 * Footer: address/phone/hours rows + pinned Bel/Mail buttons.
 * --------------------------------------------------------------------- */
.tulp-dd-footer {
	flex: 0 0 auto;
	border-top: 1px solid var(--tulp-dd-divider);
	padding-top: 4px;
}

.tulp-dd-info {
	padding: 10px 2px 6px;
}

.tulp-dd-info-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	padding: 7px 0;
	font-family: "Nunito Sans", sans-serif;
	max-width: 100%;
}

.tulp-dd-info-label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--tulp-dd-muted);
	white-space: nowrap;
}

.tulp-dd-info-value {
	font-size: 17px;
	font-weight: 600;
	color: var(--tulp-dd-text);
	text-align: left;
	width: 100%;
	overflow-wrap: break-word;
}

.tulp-dd-cta {
	flex: 0 0 auto;
	display: flex;
	gap: 10px;
	padding: 12px 0 max(14px, env(safe-area-inset-bottom));
}

.tulp-dd-btn {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 10px;
	min-width: 0;
	border-radius: 999px;
	font-family: "Nunito Sans", sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border: 1.5px solid var(--tulp-dd-accent);
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
	text-align: center;
	line-height: 1.2;
}

.tulp-dd-btn:active {
	transform: scale(.97);
}

.tulp-dd-btn--ghost {
	background: #fff;
	color: var(--tulp-dd-accent-dark);
}

.tulp-dd-btn--ghost:hover {
	background: rgba(110, 192, 156, .1);
}

.tulp-dd-btn--solid {
	background: var(--tulp-dd-accent);
	border-color: var(--tulp-dd-accent);
	color: #fff;
	box-shadow: 0 8px 18px -6px rgba(78, 158, 125, .55);
}

.tulp-dd-btn--solid:hover {
	background: var(--tulp-dd-accent-dark);
	border-color: var(--tulp-dd-accent-dark);
}

@media (max-width: 380px) {
	.tulp-dd-row {
		font-size: 17px;
	}

	.tulp-dd-btn {
		font-size: 13.5px;
		padding: 13px 8px;
	}
}