/**
 * The floating "Book a Consultation" button. Plain CSS, not Tailwind: it sits
 * outside the popup's .mbc-booking wrapper. Same ids as mbc-book-tool's
 * button, so every #mbc-book-trigger reference keeps working.
 *
 * Styles (class on #mbc-book-root, Settings → Booking Popup → Floating button):
 *   mbc-book--glass mbc-book--glass-dark   liquid glass, smoky charcoal (default)
 *   mbc-book--glass mbc-book--glass-light  liquid glass, frosted white
 *   mbc-book--glass mbc-book--glass-light mbc-book--refract
 *                                          liquid glass with a refracting rim
 *                                          (Chromium; see "Refraction" below)
 *   mbc-book--classic                      the old blue button (mbc-book-tool's look)
 *
 * Liquid glass = what is behind blurred and saturated (backdrop-filter), a
 * tint dark enough for white text on a white page (~8:1), a rim light
 * brighter on top, a soft gloss fading out by the middle, a light that follows the
 * pointer (booking.js sets --mx / --my), a sweep every 6 s, a soft lift on
 * hover and a press. Solid fallbacks for no backdrop-filter, reduced
 * transparency and more contrast; no motion for reduced motion.
 */

/* ===== Position (every style) ===== */
#mbc-book-root {
	all: initial;
	display: block;
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	/* Above the page, under every menu and drawer: Bricks' mobile menu
	   (998–999), the shop's filter drawer (1000–1001), Bricks popups (10000),
	   the shop's search (999999). The booking popup itself is 9999999. */
	z-index: 990;
	isolation: isolate;
}

@media (max-width: 782px) {
	#mbc-book-root {
		left: 16px;
		right: 16px;
		bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
		transform: none;
	}

	body.admin-bar #mbc-book-root {
		bottom: 60px;
	}
}

@media (max-width: 600px) {
	body.admin-bar #mbc-book-root {
		bottom: 74px;
	}
}

/* ===== Liquid glass ===== */
.mbc-book--glass {
	animation: mbc-glass-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s backwards;
}

.mbc-book--glass-dark {
	--glass-tint: rgba(30, 29, 27, 0.82);
	--glass-text: #ffffff;
	--glass-rim-top: rgba(255, 255, 255, 0.45);
	--glass-rim-mid: rgba(255, 255, 255, 0.08);
	--glass-rim-bottom: rgba(255, 255, 255, 0.16);
	--glass-gloss: rgba(255, 255, 255, 0.12);
	--glass-light: rgba(255, 255, 255, 0.24);
	--glass-sweep: rgba(255, 255, 255, 0.16);
	--glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.22);
	--glass-shadow: 0 18px 40px -12px rgba(16, 24, 40, 0.45), 0 6px 14px -4px rgba(16, 24, 40, 0.25);
	--glass-shadow-hover: 0 24px 48px -12px rgba(16, 24, 40, 0.5), 0 8px 18px -4px rgba(16, 24, 40, 0.28);
	--glass-icon-bg: rgba(255, 255, 255, 0.14);
	--glass-icon-rim: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	--glass-solid: #2a2927;
	--glass-ring: rgba(16, 24, 40, 0.55);
}

.mbc-book--glass-light {
	--glass-tint: rgba(255, 255, 255, 0.62);
	--glass-text: #191d28;
	--glass-rim-top: rgba(255, 255, 255, 0.95);
	--glass-rim-mid: rgba(255, 255, 255, 0.35);
	--glass-rim-bottom: rgba(16, 24, 40, 0.1);
	--glass-gloss: rgba(255, 255, 255, 0.55);
	--glass-light: rgba(255, 255, 255, 0.9);
	--glass-sweep: rgba(255, 255, 255, 0.8);
	--glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(16, 24, 40, 0.06);
	--glass-shadow: 0 18px 40px -12px rgba(16, 24, 40, 0.28), 0 6px 14px -4px rgba(16, 24, 40, 0.14);
	--glass-shadow-hover: 0 24px 48px -12px rgba(16, 24, 40, 0.32), 0 8px 18px -4px rgba(16, 24, 40, 0.16);
	--glass-icon-bg: rgba(16, 24, 40, 0.06);
	--glass-icon-rim: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(16, 24, 40, 0.08);
	--glass-solid: #ffffff;
	--glass-ring: rgba(16, 24, 40, 0.35);
}

.mbc-book--glass #mbc-book-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	height: 56px;
	margin: 0;
	padding: 0 22px 0 8px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	overflow: hidden;
	color: var(--glass-text);
	font: 600 16px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	letter-spacing: -0.01em;
	text-align: left;
	text-transform: none;
	white-space: nowrap;
	background: var(--glass-tint);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	box-shadow: var(--glass-inner), var(--glass-shadow);
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Rim light: a 1px ring, brighter on top (above the refraction layers). */
.mbc-book--glass #mbc-book-trigger::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(180deg, var(--glass-rim-top), var(--glass-rim-mid) 45%, var(--glass-rim-bottom));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* Gloss: the whole pill, fading out by the middle — no edges of its own
   (an inset band read as a box inside the button). */
.mbc-book--glass #mbc-book-trigger::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, var(--glass-gloss) 0%, rgba(255, 255, 255, 0) 55%);
	pointer-events: none;
}

/* A light that follows the pointer; a sweep now and then. */
.mbc-book--glass .mbc-glass__light,
.mbc-book--glass .mbc-glass__sweep {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}

.mbc-book--glass .mbc-glass__light {
	background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 0%), var(--glass-light), rgba(255, 255, 255, 0) 60%);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.mbc-book--glass .mbc-glass__sweep {
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, var(--glass-sweep) 50%, rgba(255, 255, 255, 0) 65%);
	transform: translateX(-120%);
	animation: mbc-glass-sweep 6s ease-in-out 2.5s infinite;
}

.mbc-book--glass .mbc-book-btn-inner {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.mbc-book--glass .mbc-glass__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--glass-icon-bg);
	box-shadow: var(--glass-icon-rim);
}

.mbc-book--glass .mbc-glass__icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

.mbc-book--glass .mbc-glass__arrow {
	position: relative;
	z-index: 1;
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
	opacity: 0.7;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s;
}

@media (hover: hover) {
	.mbc-book--glass #mbc-book-trigger:hover {
		transform: translateY(-2px) scale(1.015);
		box-shadow: var(--glass-inner), var(--glass-shadow-hover);
	}

	.mbc-book--glass #mbc-book-trigger:hover .mbc-glass__light {
		opacity: 1;
	}

	.mbc-book--glass #mbc-book-trigger:hover .mbc-glass__arrow {
		transform: translateX(3px);
		opacity: 1;
	}
}

.mbc-book--glass #mbc-book-trigger:active {
	transform: translateY(0) scale(0.97);
	transition-duration: 0.15s;
}

.mbc-book--glass #mbc-book-trigger:focus {
	outline: none;
}

.mbc-book--glass #mbc-book-trigger:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
	box-shadow: var(--glass-inner), var(--glass-shadow), 0 0 0 6px var(--glass-ring);
}

@media (max-width: 782px) {
	.mbc-book--glass #mbc-book-trigger {
		width: 100%;
		justify-content: center;
		padding: 0 20px 0 8px;
	}

	.mbc-book--glass .mbc-book-btn-inner {
		flex: 1;
	}

	.mbc-book--glass .mbc-glass__arrow {
		margin-left: auto;
	}
}

@keyframes mbc-glass-in {
	from {
		opacity: 0;
		translate: 0 24px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes mbc-glass-sweep {
	0% {
		transform: translateX(-120%);
	}
	18%,
	100% {
		transform: translateX(120%);
	}
}

/* ===== Refraction (style "glass-refract") =====
   Chromium only: an SVG filter inside backdrop-filter renders nowhere else —
   Firefox passes @supports and draws nothing, Safari drops the whole
   declaration, its blur with it. So no url() in this file: booking.js
   checks the browser, builds the lens filter for the button's size and sets
   it inline on .mbc-glass__lens, then adds .mbc-book--lens-on. Until then
   (and in Safari / Firefox) this is the light glass above.
   Two sibling layers — a backdrop-filter inside another one would see
   nothing of the page: the lens bends the backdrop along the rim (the map
   is neutral in the middle), the frost over it blurs the middle for the
   text, fading out towards the rim so the lens shows at the edge. */
/* Off in every style until the lens is on (as flex items they would add gaps). */
.mbc-glass__lens,
.mbc-glass__frost {
	display: none;
}

.mbc-book--lens-on #mbc-book-trigger {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.mbc-book--lens-on .mbc-glass__lens,
.mbc-book--lens-on .mbc-glass__frost {
	display: block;
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}

.mbc-book--lens-on .mbc-glass__lens {
	background: rgba(255, 255, 255, 0.16);
}

.mbc-book--lens-on .mbc-glass__frost {
	background: rgba(255, 255, 255, 0.58);
	backdrop-filter: blur(14px) saturate(180%);
	-webkit-mask:
		linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 12px), transparent),
		linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
	-webkit-mask-composite: source-in;
	mask:
		linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 12px), transparent),
		linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
	mask-composite: intersect;
}

/* No blur available, less transparency asked for, or more contrast: solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mbc-book--glass #mbc-book-trigger {
		background: var(--glass-solid);
	}
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
	.mbc-book--glass #mbc-book-trigger {
		background: var(--glass-solid);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mbc-book--glass,
	.mbc-book--glass .mbc-glass__sweep {
		animation: none;
	}

	.mbc-book--glass .mbc-glass__sweep {
		display: none;
	}

	.mbc-book--glass #mbc-book-trigger,
	.mbc-book--glass #mbc-book-trigger:hover,
	.mbc-book--glass #mbc-book-trigger:active {
		transform: none;
		transition: none;
	}
}

/* ===== Classic — mbc-book-tool's blue button, as it was ===== */
.mbc-book--classic {
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 30px;
	will-change: transform, opacity;
}

.mbc-book--classic .mbc-glass__icon {
	display: contents;
}

.mbc-book--classic .mbc-glass__arrow,
.mbc-book--classic .mbc-glass__light,
.mbc-book--classic .mbc-glass__sweep {
	display: none;
}

.mbc-book--classic #mbc-book-trigger {
	position: relative;
	display: block;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	padding: 6px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	overflow: hidden;
	width: 100%;
	font-family: inherit;
	letter-spacing: normal;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.mbc-book--classic .mbc-book-btn-inner {
	display: flex;
	padding: 12px 16px;
	background: var(--bricks-color-civnyb);
	color: white;
	font: 500 16px/1.2 -apple-system, BlinkMacSystemFont, "Inter", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	border-radius: 8px;
	position: relative;
	transition: inherit;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	justify-content: center;
}

.mbc-book--classic .mbc-glass__icon svg {
	width: 16px;
	height: 16px;
}

.mbc-book--classic #mbc-book-trigger::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-20deg);
	animation: mbc-gloss 3s infinite;
	opacity: 0.4;
	pointer-events: none;
}

@keyframes mbc-gloss {
	0% {
		left: -100%;
	}
	100% {
		left: 150%;
	}
}

.mbc-book--classic #mbc-book-trigger:hover {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	animation: mbc-pulse 1.5s infinite;
}

@keyframes mbc-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
	}
	70% {
		box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

.mbc-book--classic #mbc-book-trigger:hover::before {
	animation: mbc-gloss 3s infinite, mbc-soft-glow 2s ease-in-out infinite;
	opacity: 0.8;
}

@keyframes mbc-soft-glow {
	0%,
	100% {
		opacity: 0.6;
	}
	50% {
		opacity: 0.8;
	}
}

@media (max-width: 782px) {
	.mbc-book--classic #mbc-book-trigger:focus {
		outline: 2px solid #204ce5;
		outline-offset: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mbc-book--classic #mbc-book-trigger::before {
		animation: none !important;
	}

	.mbc-book--classic #mbc-book-trigger {
		transition: none !important;
	}
}