/**
 * Booking widget + popup styling. Uses the same CSS custom properties as
 * the main site theme (--cnk-*) where available, with safe fallback
 * values so the widget still looks correct if loaded on a page where
 * those variables aren't defined (e.g. previewed standalone).
 */

.cnk-booking-widget {
	--cnk-w-rose: var(--cnk-rose, #BFA87E);
	--cnk-w-rose-dark: var(--cnk-rose-dark, #A68F63);
	--cnk-w-black: var(--cnk-black, #263640);
	--cnk-w-white: var(--cnk-white, #FFFFFF);
	--cnk-w-cream: var(--cnk-cream-light, #F5F2ED);
	--cnk-w-muted: var(--cnk-muted, #516674);
	--cnk-w-line: var(--cnk-line, rgba(38, 54, 64, 0.12));

	font-family: 'Montserrat', Arial, sans-serif;
	color: var(--cnk-w-black);
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.cnk-booking-widget__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 400;
	font-size: 28px;
	margin: 0 0 24px;
	text-align: center;
}

.cnk-booking-widget__steps {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.cnk-booking-widget__progress {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 28px;
	flex-shrink: 0;
}

.cnk-booking-widget__progress-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cnk-w-line);
	transition: background 0.2s ease, transform 0.2s ease;
}

.cnk-booking-widget__progress-dot.is-active {
	background: var(--cnk-w-rose);
	transform: scale(1.3);
}

.cnk-booking-widget__progress-dot.is-done {
	background: var(--cnk-w-rose-dark);
}

.cnk-booking-widget__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 2px;
}

.cnk-booking-widget__step-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 400;
	font-size: 22px;
	margin: 0 0 20px;
	text-align: center;
}

.cnk-booking-widget__step-title:empty {
	display: none;
}

.cnk-booking-widget__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cnk-booking-widget__option-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border: 1.5px solid var(--cnk-w-line);
	border-radius: 10px;
	background: var(--cnk-w-white);
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	text-align: left;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.cnk-booking-widget__option-row:hover {
	border-color: var(--cnk-w-rose);
	background: var(--cnk-w-cream);
}

.cnk-booking-widget__option-row.is-selected {
	border-color: var(--cnk-w-rose);
	background: var(--cnk-w-cream);
	box-shadow: 0 0 0 1px var(--cnk-w-rose);
}

.cnk-booking-widget__option-row-name {
	font-weight: 600;
}

.cnk-booking-widget__option-row-meta {
	color: var(--cnk-w-muted);
	font-size: 13px;
	flex-shrink: 0;
}

.cnk-booking-widget__empty {
	color: var(--cnk-w-muted);
	font-size: 14px;
	text-align: center;
	padding: 32px 0;
}

.cnk-booking-widget__datepicker {
	margin-bottom: 24px;
}

/* -----------------------------------------------------------
   Fixed 7-day grid (matches the Treatwell reference: a full
   week of tiles always visible at once, paged with Voor/Na
   buttons rather than scrolled through). No overflow-x here —
   every day in the current window is visible without scrolling.
----------------------------------------------------------- */
.cnk-booking-widget__date-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
	margin-bottom: 16px;
}

.cnk-booking-widget__date-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 14px 6px;
	border: 1.5px solid var(--cnk-w-line);
	border-radius: 10px;
	background: var(--cnk-w-cream);
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cnk-booking-widget__date-chip:hover {
	border-color: var(--cnk-w-rose);
}

.cnk-booking-widget__date-chip.is-active {
	background: var(--cnk-w-white);
	border-color: var(--cnk-w-black);
}

.cnk-booking-widget__date-chip-weekday {
	font-size: 13px;
	font-weight: 700;
	color: var(--cnk-w-black);
	text-transform: lowercase;
}

.cnk-booking-widget__date-chip-day {
	font-size: 20px;
	font-weight: 700;
	color: var(--cnk-w-black);
	line-height: 1.1;
}

.cnk-booking-widget__date-chip-month {
	font-size: 12px;
	color: var(--cnk-w-muted);
}

/* "Voor {date}" / "Na {date}" week-paging controls, directly below the
   grid — same pattern as the reference screenshot's blue pill buttons,
   left-aligned "Voor" and right-aligned "Na". */
.cnk-booking-widget__date-pager {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 12px;
	border-top: 1px solid var(--cnk-w-line);
}

.cnk-booking-widget__date-pager-btn {
	padding: 10px 18px;
	border: none;
	border-radius: 999px;
	background: var(--cnk-w-black);
	color: var(--cnk-w-white);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.cnk-booking-widget__date-pager-btn:hover:not(:disabled) {
	background: var(--cnk-w-rose-dark);
}

.cnk-booking-widget__date-pager-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (max-width: 640px) {
	/* On mobile the 7 day tiles stack into a single vertical list rather
	   than a cramped 7-column grid — each day gets a full-width row, more
	   comfortable to tap and to read the weekday/day/month text on. */
	.cnk-booking-widget__date-grid {
		grid-template-columns: 1fr;
	}

	.cnk-booking-widget__date-chip {
		flex-direction: row;
		justify-content: flex-start;
		gap: 10px;
		padding: 14px 16px;
	}

	.cnk-booking-widget__date-chip-weekday {
		width: 42px;
		text-align: left;
	}

	.cnk-booking-widget__date-chip-day {
		font-size: 16px;
	}

	.cnk-booking-widget__date-pager-btn {
		font-size: 12px;
		padding: 10px 14px;
	}
}

.cnk-booking-widget__slots {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

.cnk-booking-widget__slot {
	padding: 12px 6px;
	border: 1.5px solid var(--cnk-w-line);
	border-radius: 8px;
	background: var(--cnk-w-white);
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cnk-booking-widget__slot:hover {
	border-color: var(--cnk-w-rose);
}

.cnk-booking-widget__slot.is-selected {
	background: var(--cnk-w-rose);
	border-color: var(--cnk-w-rose);
	color: var(--cnk-w-white);
	font-weight: 600;
}

.cnk-booking-widget__summary {
	background: var(--cnk-w-cream);
	border-radius: 12px;
	padding: 18px 22px;
	margin-bottom: 24px;
}

.cnk-booking-widget__summary-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	font-size: 14px;
}

.cnk-booking-widget__summary-row span {
	color: var(--cnk-w-muted);
}

.cnk-booking-widget__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cnk-booking-widget__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--cnk-w-muted);
}

.cnk-booking-widget__field input,
.cnk-booking-widget__field textarea {
	padding: 13px 15px;
	border: 1.5px solid var(--cnk-w-line);
	border-radius: 8px;
	background: var(--cnk-w-white);
	font-family: inherit;
	font-size: 15px;
	color: var(--cnk-w-black);
}

.cnk-booking-widget__field input:focus,
.cnk-booking-widget__field textarea:focus {
	outline: none;
	border-color: var(--cnk-w-rose);
}

.cnk-booking-widget__field-error {
	display: none;
	font-size: 12px;
	font-weight: 600;
	color: #b32d2e;
}

.cnk-booking-widget__field-error:not([hidden]) {
	display: block;
}

.cnk-booking-widget__field:has(.cnk-booking-widget__field-error:not([hidden])) input {
	border-color: #b32d2e;
}

.cnk-booking-widget__payment-choice {
	display: flex;
	gap: 12px;
}

.cnk-booking-widget__radio {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 13px 15px;
	border: 1.5px solid var(--cnk-w-line);
	border-radius: 8px;
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.cnk-booking-widget__radio:has(input:checked) {
	border-color: var(--cnk-w-rose);
	background: var(--cnk-w-cream);
}

.cnk-booking-widget__radio input {
	accent-color: var(--cnk-w-rose);
}

.cnk-booking-widget__error {
	color: #b32d2e;
	font-size: 13px;
	margin: 0;
}

.cnk-booking-widget__success {
	text-align: center;
	padding: 40px 0;
}

.cnk-booking-widget__success-icon {
	color: var(--cnk-w-rose);
	margin-bottom: 16px;
}

.cnk-booking-widget__success h3 {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 400;
	font-size: 26px;
	margin: 0 0 12px;
}

.cnk-booking-widget__success p {
	color: var(--cnk-w-muted);
	font-size: 14px;
	margin: 0;
	max-width: 340px;
	margin-left: auto;
	margin-right: auto;
}

.cnk-booking-widget__nav {
	flex-shrink: 0;
	display: none;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--cnk-w-line);
}

.cnk-booking-widget__nav:not([hidden]) {
	display: flex;
}

@media (max-width: 640px) {
	.cnk-booking-widget__nav {
		/* The popup panel's own bottom padding is 0 on mobile (see the
		   640px popup media query above) so the nav bar controls its
		   own safe spacing instead — this keeps Terug/Volgende clear of
		   the screen edge and, on devices with a home-indicator/gesture
		   bar, respects that safe area too. */
		padding-bottom: max(16px, env(safe-area-inset-bottom));
		background: var(--cnk-w-white);
	}
}

.cnk-booking-widget__back {
	display: none;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: var(--cnk-w-muted);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	padding: 10px 4px;
}

.cnk-booking-widget__back:not([hidden]) {
	display: inline-flex;
}

.cnk-booking-widget__back:hover {
	color: var(--cnk-w-black);
}

.cnk-booking-widget__next {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 50px;
	padding: 0 28px;
	margin-left: auto;
	border: 1px solid var(--cnk-w-black);
	border-radius: 999px;
	background: var(--cnk-w-black);
	color: var(--cnk-w-white);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.cnk-booking-widget__next:not([hidden]) {
	display: inline-flex;
}

.cnk-booking-widget__next:hover:not(:disabled) {
	background: var(--cnk-w-rose-dark);
	border-color: var(--cnk-w-rose-dark);
}

.cnk-booking-widget__next:disabled {
	opacity: 0.35;
	cursor: default;
}

.cnk-booking-widget__next--submit {
	padding: 0 32px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 13px;
}

@media (max-width: 480px) {
	.cnk-booking-widget__slots {
		grid-template-columns: repeat(3, 1fr);
	}
	.cnk-booking-widget__payment-choice {
		flex-direction: column;
	}
	.cnk-booking-widget__next span {
		white-space: nowrap;
	}
}

.cnk-booking-popup__trigger {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9998;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 15px 24px;
	border: none;
	border-radius: 999px;
	background: var(--cnk-black, #263640);
	color: var(--cnk-white, #fff);
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(38, 54, 64, 0.28);
	transition: transform 0.15s ease, background 0.15s ease;
}

.cnk-booking-popup__trigger:hover {
	background: var(--cnk-rose-dark, #A68F63);
	transform: translateY(-2px);
}

.cnk-booking-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

/* The [hidden] attribute alone isn't enough here: this rule's own
   display: flex above would otherwise always win over the browser's
   built-in `[hidden] { display: none }` default (equal specificity,
   declared later in this stylesheet), which is exactly what caused the
   popup to appear open immediately on every page load and stay stuck
   open even after JS set hidden = true on close. Explicitly setting
   display: none as this selector's own base state (above), then
   overriding it here only when NOT hidden, removes that conflict —
   the JS's hidden = true / hidden = false now has real effect either way. */
.cnk-booking-popup:not([hidden]) {
	display: flex;
}

.cnk-booking-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(38, 54, 64, 0.6);
}

/* -----------------------------------------------------------
   Modal popup with a visible backdrop overlay: the panel is a
   centered card, not a full-viewport takeover — the page behind
   it stays partially visible through the dimmed backdrop, which
   is what signals "this is a temporary overlay" rather than a
   full page navigation. Sized wider than the previous 760px
   (now up to 1000px) so the two-column browse layout (category
   list + treatments) still has comfortable room inside the modal.
----------------------------------------------------------- */
.cnk-booking-popup__panel {
	position: relative;
	width: min(1000px, 100%);
	max-height: min(760px, calc(100vh - 48px));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--cnk-white, #fff);
	border-radius: 20px;
	padding: 56px 44px 32px;
	box-shadow: 0 30px 90px rgba(38, 54, 64, 0.4);
}

.cnk-booking-popup__panel .cnk-booking-widget {
	width: 100%;
	max-width: none;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

/* Extra clearance above the progress dots specifically inside the
   popup: the close button is absolutely positioned at top: 20px with
   its own 40px height, so it occupies roughly the panel's first 60px.
   The panel's padding-top (56px, above) already pushes the widget's
   content below that in normal cases, but the progress dots are the
   very first thing inside the widget with no top margin of their own
   (by design, so they sit flush with the top in the non-popup/shortcode
   context) — this rule adds the missing clearance only for the popup
   context, so the dots never sit close enough to visually crowd or
   fall under the close button. */
.cnk-booking-popup__panel .cnk-booking-widget__progress {
	margin-top: 4px;
}

.cnk-booking-popup__close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--cnk-line, rgba(38, 54, 64, 0.12));
	border-radius: 50%;
	background: none;
	color: var(--cnk-black, #263640);
	cursor: pointer;
	transition: background 0.15s ease;
}

.cnk-booking-popup__close:hover {
	background: var(--cnk-cream-light, #F5F2ED);
}

/* overflow: hidden on body alone doesn't reliably block scroll in every
   browser — some scroll the <html> element instead, and touch-scroll on
   mobile can still drag the page underneath even with overflow: hidden
   set. Locking both html and body, plus position: fixed on body (which
   removes it from the normal scrolling flow entirely), covers all of that. */
html.cnk-booking-popup-open,
body.cnk-booking-popup-open {
	overflow: hidden;
	height: 100%;
}

body.cnk-booking-popup-open {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
}

@media (max-width: 640px) {
	.cnk-booking-popup {
		padding: 0;
	}
	.cnk-booking-popup__panel {
		width: 100vw;
		/* 100vh is unreliable on mobile browsers — the address bar and
		   bottom toolbar are sometimes counted as part of the viewport
		   and sometimes not, depending on scroll state and browser. That
		   mismatch is exactly what was pushing the close button off the
		   top and the Volgende/nav bar off the bottom: the panel was
		   sized taller than the actually-visible screen. 100dvh (dynamic
		   viewport height) tracks the real visible area and updates as
		   the browser chrome shows/hides; the plain 100vh line stays as
		   a fallback for older browsers that don't support dvh yet. */
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
		border-radius: 0;
		/* Top padding only needs to clear the close button itself
		   (40px button + 20px offset from the top = 60px) rather than
		   the larger 64px used for the desktop/tablet modal, and the
		   bottom padding is dropped to 0 here because the nav bar
		   (Terug/Volgende) provides its own bottom spacing — adding
		   panel padding on top of that was part of why it could end up
		   pushed below the visible area on short mobile screens. */
		padding: 64px 16px 0;
		display: flex;
		flex-direction: column;
	}
	.cnk-booking-popup__close {
		/* Slightly smaller and closer to the corner on mobile, purely to
		   maximize the content area on small screens — still comfortably
		   large enough to tap. */
		top: 12px;
		right: 12px;
	}
	.cnk-booking-popup__trigger span {
		display: none;
	}
	.cnk-booking-popup__trigger {
		padding: 15px;
	}
}

/* -----------------------------------------------------------
   Browse screen — filter tiles + category list + expandable
   treatments with options, modeled on the Treatwell reference
   screenshot. Replaces the old separate category/treatment/
   option wizard steps with a single combined screen.
----------------------------------------------------------- */

.cnk-browse__filters {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 12px;
	padding: 20px;
	margin: 0 0 24px;
	background: var(--cnk-w-cream);
	border-radius: 12px;
}

.cnk-browse__filter-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 84px;
	padding: 14px 8px;
	border: 1.5px solid transparent;
	border-radius: 10px;
	background: var(--cnk-w-white);
	color: var(--cnk-w-muted);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(38, 54, 64, 0.06);
	transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.cnk-browse__filter-tile:hover {
	border-color: var(--cnk-w-rose);
}

.cnk-browse__filter-tile.is-active {
	border-color: var(--cnk-w-black);
	color: var(--cnk-w-black);
	box-shadow: 0 2px 6px rgba(38, 54, 64, 0.12);
}

.cnk-browse__filter-icon {
	display: flex;
	flex-shrink: 0;
}

@media (max-width: 720px) {
	.cnk-browse__filters {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 480px) {
	.cnk-browse__filters {
		grid-template-columns: repeat(3, 1fr);
	}
	.cnk-browse__filter-tile {
		font-size: 11px;
		min-height: 72px;
	}
}

.cnk-browse__layout {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 20px;
	min-height: 0;
}

.cnk-browse__categories {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-right: 1px solid var(--cnk-w-line);
	padding-right: 16px;
}

.cnk-browse__category-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 11px 10px;
	border: none;
	border-radius: 6px;
	background: none;
	color: var(--cnk-w-black);
	font-family: inherit;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease;
}

.cnk-browse__category-row:hover {
	background: var(--cnk-w-cream);
}

.cnk-browse__category-row.is-active {
	background: var(--cnk-w-cream);
	font-weight: 600;
}

.cnk-browse__category-count {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 400;
	color: var(--cnk-w-muted);
}

.cnk-browse__treatments {
	min-width: 0;
}

.cnk-browse__group-heading {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 400;
	font-size: 16px;
	margin: 20px 0 10px;
}

.cnk-browse__group-heading:first-child {
	margin-top: 0;
}

.cnk-browse__treatment-list {
	display: flex;
	flex-direction: column;
}

.cnk-browse__treatment {
	border-bottom: 1px solid var(--cnk-w-line);
}

.cnk-browse__treatment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 4px;
	border: none;
	background: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	color: var(--cnk-w-black);
}

.cnk-browse__treatment-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.cnk-browse__treatment-price {
	font-size: 13px;
	font-weight: 600;
	color: var(--cnk-w-muted);
}

.cnk-browse__chevron {
	flex-shrink: 0;
	color: var(--cnk-w-muted);
	transition: transform 0.15s ease;
}

.cnk-browse__treatment-header.is-open .cnk-browse__chevron {
	transform: rotate(180deg);
}

.cnk-browse__treatment-body {
	padding: 4px 4px 16px;
}

.cnk-browse__description-toggle {
	display: inline-block;
	background: none;
	border: none;
	color: var(--cnk-w-rose-dark);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	padding: 0 0 10px;
}

.cnk-browse__description {
	font-size: 13px;
	line-height: 1.6;
	color: var(--cnk-w-muted);
	margin: 0 0 14px;
}

.cnk-browse__option-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 12px 10px;
	margin: 0 -10px;
	border-top: 1px solid var(--cnk-w-line);
	border-radius: 8px;
	transition: background 0.15s ease;
}

.cnk-browse__option-row.is-selected {
	background: var(--cnk-w-cream);
}

.cnk-browse__treatment-body > .cnk-browse__option-row:first-of-type,
.cnk-browse__description-toggle:first-child + .cnk-browse__option-row,
.cnk-browse__description + .cnk-browse__option-row {
	border-top: none;
}

.cnk-browse__option-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.cnk-browse__option-name {
	font-size: 13px;
	font-weight: 500;
}

.cnk-browse__option-duration {
	font-size: 12px;
	color: var(--cnk-w-muted);
}

.cnk-browse__option-price {
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 600;
	min-width: 64px;
	text-align: right;
}

.cnk-browse__choose-btn {
	flex-shrink: 0;
	padding: 8px 18px;
	border: 1.5px solid var(--cnk-w-rose);
	border-radius: 999px;
	background: var(--cnk-w-white);
	color: var(--cnk-w-rose-dark);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.cnk-browse__choose-btn:hover {
	background: var(--cnk-w-rose);
	color: var(--cnk-w-white);
}

.cnk-browse__option-row.is-selected .cnk-browse__choose-btn {
	background: var(--cnk-w-black);
	border-color: var(--cnk-w-black);
	color: var(--cnk-w-white);
}

@media (max-width: 640px) {
	.cnk-browse__layout {
		grid-template-columns: 1fr;
	}
	.cnk-browse__categories {
		flex-direction: row;
		overflow-x: auto;
		border-right: none;
		border-bottom: 1px solid var(--cnk-w-line);
		padding-right: 0;
		padding-bottom: 12px;
		margin-bottom: 12px;
	}
	.cnk-browse__category-row {
		flex: 0 0 auto;
		white-space: nowrap;
	}
	.cnk-browse__option-row {
		flex-wrap: wrap;
	}
}

/* -----------------------------------------------------------
   Contrast fix: the "Maak een afspraak" popup trigger sits on
   top of arbitrary page content behind it (via position: fixed),
   so it must stay legible regardless of what's directly behind
   it — including a section with a similarly dark/blue background,
   where the button's own dark fill used to blend straight in.
   A visible border plus a stronger, wider shadow keeps the button
   as a clearly separate floating element on any background,
   light or dark, rather than relying on color contrast alone.
----------------------------------------------------------- */
.cnk-booking-popup__trigger {
	border: 2px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.1);
}