/* =========================================================
   Harto Booking – floating consultancy button
   by Zoon11 · https://zoon11.com
   ========================================================= */

.hbook {
	--hbook-accent: #C8FF00;
	--hbook-accent-h: #FFE600;
	--hbook-surface: #111111;
	--hbook-text: #F5F2EB;
	--hbook-border: #2C2C2C;
	--hbook-ink: #000000;
	--hbook-edge: clamp(12px, 2vw, 28px);
	--hbook-ease: cubic-bezier(.22, 1, .36, 1);

	position: fixed !important;
	bottom: calc(var(--hbook-edge) + env(safe-area-inset-bottom, 0px)) !important;
	z-index: 9990 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	max-width: calc(100vw - 2 * var(--hbook-edge)) !important;
	font-family: 'DM Sans', 'Helvetica Neue', Arial, sans-serif !important;
	font-weight: 300 !important;
	-webkit-font-smoothing: antialiased !important;
	transition: opacity .35s ease, transform .5s var(--hbook-ease), visibility 0s linear 0s !important;
}
.hbook *,
.hbook *::before,
.hbook *::after { box-sizing: border-box !important; }

.hbook--right { right: var(--hbook-edge) !important; align-items: flex-end !important; }
.hbook--left  { left: var(--hbook-edge) !important;  align-items: flex-start !important; }

/* Hidden states (before scrolling, while the CTA is visible, after dismissing) */
.hbook.is-waiting,
.hbook.is-covered {
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(16px) !important;
	pointer-events: none !important;
	transition: opacity .35s ease, transform .5s var(--hbook-ease), visibility 0s linear .5s !important;
}

/* ---------- Pill ---------- */
.hbook .hbook__pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 12px !important;
	height: 52px !important;
	margin: 0 !important;
	padding: 0 8px 0 18px !important;
	border: 1px solid var(--hbook-border) !important;
	border-radius: 999px !important;
	background: rgba(17, 17, 17, .88) !important;
	background: color-mix(in srgb, var(--hbook-surface) 88%, transparent) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	backdrop-filter: blur(10px) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
	color: var(--hbook-text) !important;
	font: inherit !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
	transition: border-color .3s ease, background-color .3s ease !important;
}
.hbook .hbook__pill:hover,
.hbook .hbook__pill:focus-visible,
.hbook.is-open .hbook__pill {
	border-color: var(--hbook-accent) !important;
	background: rgba(17, 17, 17, .88) !important;
	background: color-mix(in srgb, var(--hbook-surface) 88%, transparent) !important;
	color: var(--hbook-text) !important;
}
.hbook .hbook__pill:focus-visible { outline: 2px solid var(--hbook-accent) !important; outline-offset: 3px !important; }
.hbook--left .hbook__pill { padding: 0 8px 0 18px !important; }

.hbook__live {
	position: relative !important;
	flex: 0 0 8px !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	background: var(--hbook-accent) !important;
}
.hbook__live::after {
	content: '' !important;
	position: absolute !important;
	inset: -4px !important;
	border: 1px solid var(--hbook-accent) !important;
	border-radius: 50% !important;
	animation: hbook-pulse 2.2s ease-out infinite !important;
}
@keyframes hbook-pulse {
	from { opacity: .9; transform: scale(.6); }
	to   { opacity: 0;  transform: scale(1.8); }
}

.hbook__label {
	overflow: hidden !important;
	font-family: 'Space Mono', 'Courier New', monospace !important;
	font-size: 11px !important;
	font-weight: 400 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
}

.hbook__price {
	display: grid !important;
	place-items: center !important;
	flex: 0 0 auto !important;
	height: 36px !important;
	padding: 0 14px !important;
	border-radius: 999px !important;
	background: var(--hbook-accent) !important;
	color: var(--hbook-ink) !important;
	font-family: 'Space Mono', 'Courier New', monospace !important;
	font-size: 12px !important;
	font-weight: 700 !important;
}

/* ---------- Card ---------- */
.hbook__card {
	position: relative !important;
	width: 340px !important;
	max-width: 100% !important;
	max-height: calc(100vh - 120px) !important;
	max-height: calc(100dvh - 120px) !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain !important;
	padding: 26px 24px 18px !important;
	border: 1px solid var(--hbook-border) !important;
	background: var(--hbook-surface) !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55) !important;
	color: var(--hbook-text) !important;
	opacity: 0 !important;
	transform: translateY(10px) scale(.96) !important;
	transform-origin: bottom right !important;
	transition: opacity .3s ease, transform .45s var(--hbook-ease) !important;
}
.hbook--left .hbook__card { transform-origin: bottom left !important; }
.hbook__card[hidden] { display: none !important; }
.hbook.is-open .hbook__card { opacity: 1 !important; transform: none !important; }

.hbook__card::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 2px !important;
	background: var(--hbook-accent) !important;
}

.hbook .hbook__close {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	display: grid !important;
	place-items: center !important;
	width: 36px !important;
	height: 36px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: rgba(245, 242, 235, .6) !important;
	color: color-mix(in srgb, var(--hbook-text) 45%, transparent) !important;
	cursor: pointer !important;
}
.hbook .hbook__close:hover,
.hbook .hbook__close:focus-visible {
	background: transparent !important;
	color: var(--hbook-text) !important;
}

.hbook .hbook__eyebrow {
	margin: 0 0 10px !important;
	font-family: 'Space Mono', 'Courier New', monospace !important;
	font-size: 11px !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	color: var(--hbook-accent) !important;
}

.hbook .hbook__title {
	margin: 0 0 16px !important;
	padding-right: 28px !important;
	font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif !important;
	font-size: 38px !important;
	font-weight: 400 !important;
	line-height: .95 !important;
	color: var(--hbook-text) !important;
}
.hbook__title span { display: block !important; color: var(--hbook-accent) !important; }

.hbook .hbook__list {
	display: grid !important;
	gap: 8px !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	list-style: none !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	color: rgba(245, 242, 235, .6) !important;
	color: color-mix(in srgb, var(--hbook-text) 75%, transparent) !important;
}
.hbook .hbook__list li {
	position: relative !important;
	margin: 0 !important;
	padding-left: 22px !important;
}
.hbook .hbook__list li::before {
	content: '' !important;
	position: absolute !important;
	top: .5em !important;
	left: 2px !important;
	width: 10px !important;
	height: 5px !important;
	border-left: 1.5px solid var(--hbook-accent) !important;
	border-bottom: 1.5px solid var(--hbook-accent) !important;
	transform: rotate(-45deg) !important;
}

.hbook .hbook__btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	min-height: 50px !important;
	padding: 10px 16px !important;
	background: var(--hbook-accent) !important;
	color: var(--hbook-ink) !important;
	font-family: 'Space Mono', 'Courier New', monospace !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: .12em !important;
	text-align: center !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	transition: background-color .25s ease !important;
}
.hbook .hbook__btn:hover,
.hbook .hbook__btn:focus-visible {
	background: var(--hbook-accent-h) !important;
	color: var(--hbook-ink) !important;
}

.hbook .hbook__more,
.hbook .hbook__dismiss,
.hbook .hbook__fine {
	display: block !important;
	margin: 12px 0 0 !important;
	font-family: 'Space Mono', 'Courier New', monospace !important;
	font-size: 10px !important;
	letter-spacing: .14em !important;
	text-align: center !important;
	text-transform: uppercase !important;
	color: rgba(245, 242, 235, .6) !important;
	color: color-mix(in srgb, var(--hbook-text) 45%, transparent) !important;
}
.hbook .hbook__more { margin-top: 14px !important; font-size: 11px !important; text-decoration: none !important; }
.hbook .hbook__more:hover,
.hbook .hbook__more:focus-visible { color: var(--hbook-accent) !important; }

.hbook .hbook__dismiss {
	width: 100% !important;
	margin-top: 14px !important;
	padding: 10px 0 0 !important;
	border: 0 !important;
	border-top: 1px solid var(--hbook-border) !important;
	border-radius: 0 !important;
	background: transparent !important;
	cursor: pointer !important;
}
.hbook .hbook__dismiss:hover,
.hbook .hbook__dismiss:focus-visible {
	background: transparent !important;
	color: var(--hbook-text) !important;
}

/* ---------- Tablet / mobile ---------- */
@media (max-width: 767px) {
	.hbook {
		left: var(--hbook-edge) !important;
		right: var(--hbook-edge) !important;
		align-items: stretch !important;
		max-width: none !important;
	}
	.hbook .hbook__pill { justify-content: space-between !important; width: 100% !important; height: 48px !important; }
	.hbook__label { flex: 1 1 auto !important; text-align: left !important; }
	.hbook__card { width: 100% !important; padding: 24px 20px 16px !important; }
	.hbook .hbook__title { font-size: 34px !important; }
	.hbook--no-mobile { display: none !important; }
}

@media (max-width: 767px) and (max-height: 560px) {
	.hbook .hbook__list { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.hbook,
	.hbook__card { transition: none !important; }
	.hbook__live::after { animation: none !important; }
}

/* ---------- Theme overrides (the theme colours buttons/links on hover, focus and click) ---------- */
.hbook button,
.hbook button:hover,
.hbook button:focus,
.hbook button:active,
.hbook a,
.hbook a:hover,
.hbook a:focus,
.hbook a:active,
.hbook a:visited {
	box-shadow: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
}
.hbook .hbook__pill:hover,
.hbook .hbook__pill:focus,
.hbook .hbook__pill:active {
	background: rgba(17, 17, 17, .88) !important;
	background: color-mix(in srgb, var(--hbook-surface) 88%, transparent) !important;
	color: var(--hbook-text) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
}
.hbook .hbook__pill:focus:not(:focus-visible) { outline: none !important; border-color: var(--hbook-border) !important; }
.hbook.is-open .hbook__pill:focus:not(:focus-visible) { border-color: var(--hbook-accent) !important; }

.hbook .hbook__close,
.hbook .hbook__close:hover,
.hbook .hbook__close:focus,
.hbook .hbook__close:active {
	background: transparent !important;
	border: 0 !important;
}
.hbook .hbook__close:focus:not(:focus-visible),
.hbook .hbook__close:active {
	outline: none !important;
	color: rgba(245, 242, 235, .6) !important;
	color: color-mix(in srgb, var(--hbook-text) 45%, transparent) !important;
}
.hbook .hbook__close:focus-visible { outline: 2px solid var(--hbook-accent) !important; outline-offset: -2px !important; }
.hbook .hbook__close svg { display: block !important; width: 16px !important; height: 16px !important; }
.hbook .hbook__close svg path { stroke: currentColor !important; fill: none !important; }

.hbook .hbook__dismiss:focus,
.hbook .hbook__dismiss:active {
	background: transparent !important;
	border-color: var(--hbook-border) !important;
	color: var(--hbook-text) !important;
	outline: none !important;
}
.hbook .hbook__dismiss:focus-visible { outline: 2px solid var(--hbook-accent) !important; outline-offset: 2px !important; }

.hbook .hbook__btn:visited,
.hbook .hbook__btn:focus,
.hbook .hbook__btn:active { color: var(--hbook-ink) !important; }
.hbook .hbook__btn:active { background: var(--hbook-accent-h) !important; }
.hbook .hbook__btn:focus-visible { outline: 2px solid var(--hbook-text) !important; outline-offset: 3px !important; }

.hbook .hbook__more:visited { color: rgba(245, 242, 235, .6) !important; color: color-mix(in srgb, var(--hbook-text) 45%, transparent) !important; }
.hbook .hbook__more:active { color: var(--hbook-accent) !important; }