/**
 * Floating Bar — Frontend (CSS variables from admin)
 */

:root {
	--fb-z: 2147483000;
	--fb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--fb-container-bg: #161618;
	--fb-container-opacity: 0.88;
	--fb-container-bg-rgba: rgba(22, 22, 24, 0.88);
	--fb-dock-bg: var(--fb-container-bg-rgba);
	--fb-dock-bg-fallback: var(--fb-container-bg);
	--fb-dock-border: rgba(255, 255, 255, 0.07);
	--fb-dock-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
	--fb-btn-border: rgba(255, 255, 255, 0.08);
	--fb-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	--fb-btn-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.1);
	--fb-container-max-width: 760px;
	--fb-max-width: var(--fb-container-max-width);
	--fb-container-padding: 14px;
	--fb-radius-dock: 20px;
	--fb-radius-btn: 12px;
	--fb-bottom-spacing: 16px;
	--fb-button-gap: 12px;
	--fb-btn-gap: var(--fb-button-gap);
	--fb-button-height: 56px;
	--fb-button-min-width: 140px;
	--fb-button-padding-x: 18px;
	--fb-animation-speed: 0.18s;
	--fb-font-size: 10px;
	--fb-font-weight: 500;
	--fb-text-transform: uppercase;
	--fb-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--fb-ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
	--fb-whatsapp-bg: #25D366;
	--fb-whatsapp-hover: #1ebe5d;
	--fb-whatsapp-text: #ffffff;
	--fb-whatsapp-icon: #ffffff;
	--fb-appointment-bg: #D6B56D;
	--fb-appointment-hover: #C8A75E;
	--fb-appointment-text: #ffffff;
	--fb-appointment-icon: #ffffff;
	--fb-call-bg: #D6B56D;
	--fb-call-hover: #C8A75E;
	--fb-call-text: #ffffff;
	--fb-call-icon: #ffffff;
}

.fb-floating-bar {
	position: fixed;
	left: 50%;
	bottom: 0;
	z-index: var(--fb-z);
	width: 100%;
	max-width: var(--fb-container-max-width);
	padding-left: max(20px, env(safe-area-inset-left, 0px));
	padding-right: max(20px, env(safe-area-inset-right, 0px));
	padding-bottom: max(var(--fb-bottom-spacing), env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	will-change: transform, opacity;
}

.fb-floating-bar--anim-fade-up {
	transform: translate3d(-50%, calc(100% + 16px), 0);
	transition:
		transform var(--fb-animation-speed) var(--fb-ease-enter),
		opacity var(--fb-animation-speed) var(--fb-ease-enter),
		visibility 0s linear var(--fb-animation-speed);
}

.fb-floating-bar--anim-fade-up.is-visible {
	transform: translate3d(-50%, 0, 0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		transform var(--fb-animation-speed) var(--fb-ease-enter),
		opacity var(--fb-animation-speed) var(--fb-ease-enter),
		visibility 0s linear 0s;
}

.fb-floating-bar--anim-scale {
	transform: translate3d(-50%, 0, 0) scale(0.94);
	transition:
		transform var(--fb-animation-speed) var(--fb-ease-enter),
		opacity var(--fb-animation-speed) var(--fb-ease-enter),
		visibility 0s linear var(--fb-animation-speed);
}

.fb-floating-bar--anim-scale.is-visible {
	transform: translate3d(-50%, 0, 0) scale(1);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.fb-floating-bar--anim-none {
	transform: translate3d(-50%, 0, 0);
	transition: opacity var(--fb-animation-speed) ease, visibility 0s;
}

.fb-floating-bar--anim-none.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.fb-floating-bar--no-entrance.fb-floating-bar--anim-fade-up,
.fb-floating-bar--no-entrance.fb-floating-bar--anim-scale {
	transform: translate3d(-50%, 0, 0);
	transition: opacity var(--fb-animation-speed) ease, visibility 0s;
}

.fb-floating-bar__dock {
	background: var(--fb-dock-bg-fallback);
	background: var(--fb-container-bg-rgba);
	backdrop-filter: blur(20px) saturate(120%);
	-webkit-backdrop-filter: blur(20px) saturate(120%);
	border: 0.5px solid var(--fb-dock-border);
	border-radius: var(--fb-radius-dock);
	box-shadow: var(--fb-dock-shadow);
	padding: var(--fb-container-padding);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.fb-floating-bar__dock {
		background: var(--fb-container-bg-rgba);
	}
}

.fb-floating-bar__inner {
	display: flex;
	align-items: stretch;
	gap: var(--fb-button-gap);
}

.fb-floating-bar__btn {
	flex: 1 1 0;
	min-width: var(--fb-button-min-width);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 var(--fb-button-padding-x);
	min-height: var(--fb-button-height);
	text-decoration: none;
	border-radius: var(--fb-radius-btn);
	border: 0.5px solid var(--fb-btn-border);
	box-shadow: var(--fb-btn-shadow);
	transition:
		transform var(--fb-animation-speed) var(--fb-ease),
		background-color var(--fb-animation-speed) var(--fb-ease),
		box-shadow var(--fb-animation-speed) var(--fb-ease),
		opacity var(--fb-animation-speed) var(--fb-ease-enter);
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	cursor: pointer;
}

.fb-floating-bar__btn--whatsapp {
	background-color: var(--fb-whatsapp-bg);
	color: var(--fb-whatsapp-text);
}

.fb-floating-bar__btn--appointment {
	background-color: var(--fb-appointment-bg);
	color: var(--fb-appointment-text);
}

.fb-floating-bar__btn--call {
	background-color: var(--fb-call-bg);
	color: var(--fb-call-text);
}

.fb-floating-bar--anim-fade-up .fb-floating-bar__btn,
.fb-floating-bar--anim-scale .fb-floating-bar__btn {
	opacity: 0;
	transform: translate3d(0, 8px, 0);
}

.fb-floating-bar--anim-fade-up.is-visible .fb-floating-bar__btn,
.fb-floating-bar--anim-scale.is-visible .fb-floating-bar__btn {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.fb-floating-bar.is-visible .fb-floating-bar__btn:nth-child(1) { transition-delay: calc(var(--fb-animation-speed) * 0.55); }
.fb-floating-bar.is-visible .fb-floating-bar__btn:nth-child(2) { transition-delay: calc(var(--fb-animation-speed) * 0.9); }
.fb-floating-bar.is-visible .fb-floating-bar__btn:nth-child(3) { transition-delay: calc(var(--fb-animation-speed) * 1.25); }

.fb-floating-bar--no-entrance .fb-floating-bar__btn {
	opacity: 1;
	transform: none;
	transition-delay: 0s !important;
}

@media (hover: hover) and (pointer: fine) {
	.fb-floating-bar:not(.fb-floating-bar--no-hover) .fb-floating-bar__btn--whatsapp:hover {
		transform: translate3d(0, -2px, 0);
		background-color: var(--fb-whatsapp-hover);
		box-shadow: var(--fb-btn-shadow-hover);
	}
	.fb-floating-bar:not(.fb-floating-bar--no-hover) .fb-floating-bar__btn--appointment:hover {
		transform: translate3d(0, -2px, 0);
		background-color: var(--fb-appointment-hover);
		box-shadow: var(--fb-btn-shadow-hover);
	}
	.fb-floating-bar:not(.fb-floating-bar--no-hover) .fb-floating-bar__btn--call:hover {
		transform: translate3d(0, -2px, 0);
		background-color: var(--fb-call-hover);
		box-shadow: var(--fb-btn-shadow-hover);
	}
}

.fb-floating-bar__btn.is-pressed,
.fb-floating-bar__btn:active {
	transform: translate3d(0, 0, 0) !important;
	box-shadow: none;
	transition-duration: 0.1s;
	filter: brightness(0.96);
}

.fb-floating-bar__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	transition: transform var(--fb-animation-speed) var(--fb-ease);
}

.fb-floating-bar__btn--whatsapp .fb-floating-bar__icon { color: var(--fb-whatsapp-icon); }
.fb-floating-bar__btn--appointment .fb-floating-bar__icon { color: var(--fb-appointment-icon); }
.fb-floating-bar__btn--call .fb-floating-bar__icon { color: var(--fb-call-icon); }

.fb-floating-bar__icon i {
	font-size: 0.9375rem;
	line-height: 1;
}

.fb-floating-bar__label {
	font-family: var(--fb-font);
	font-size: var(--fb-font-size);
	font-weight: var(--fb-font-weight);
	text-transform: var(--fb-text-transform);
	letter-spacing: 0.04em;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	opacity: 0.95;
}

.fb-floating-bar__btn--whatsapp .fb-floating-bar__label { color: var(--fb-whatsapp-text); }
.fb-floating-bar__btn--appointment .fb-floating-bar__label { color: var(--fb-appointment-text); }
.fb-floating-bar__btn--call .fb-floating-bar__label { color: var(--fb-call-text); }

@media (min-width: 768px) {
	.fb-floating-bar {
		padding-left: max(24px, env(safe-area-inset-left, 0px));
		padding-right: max(24px, env(safe-area-inset-right, 0px));
	}
}

@media (max-width: 380px) {
	.fb-floating-bar__btn {
		gap: 5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fb-floating-bar, .fb-floating-bar__btn, .fb-floating-bar__icon { transition: none !important; }
	.fb-floating-bar--anim-fade-up, .fb-floating-bar--anim-scale { transform: translate3d(-50%, 0, 0); }
	.fb-floating-bar__btn { opacity: 1; transform: none; }
}