/* Mednix Floating Buttons
 * Closed = circles (bottom-left)
 * Open = expand RIGHT: [icon left][text right]
 * Only one button open at a time (JS)
 */

.mednix-fb {
	--fb-yellow: #fcb900;
	--fb-teal: #185768;
	--fb-green: #25d366;
	--fb-size: 62px;
	--fb-play: 32px; /* same closed & open */
	--fb-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--fb-soft: cubic-bezier(0.22, 1, 0.36, 1);

	position: fixed;
	bottom: 24px;
	left: 24px;
	right: auto;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	/* Force LTR layout so flex-start = physical LEFT.
	   On RTL sites, without this the stack re-centers/jumps
	   when a button expands and the container grows wider. */
	direction: ltr;
	align-items: flex-start;
	gap: 18px;
	pointer-events: none;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	width: max-content;
	max-width: calc(100vw - 48px);
}

.mednix-fb,
.mednix-fb * {
	font-family: inherit;
	box-sizing: border-box;
}

.mednix-fb a {
	pointer-events: auto;
	text-decoration: none;
	color: inherit;
}

/* ---------- Shared: icon left, grow right ---------- */
.mednix-fb__btn {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	height: var(--fb-size);
	width: var(--fb-size);
	max-width: var(--fb-size);
	padding: 0;
	overflow: hidden;
	border-radius: 999px;
	isolation: isolate;
	transition:
		max-width 0.5s var(--fb-ease),
		width 0.5s var(--fb-ease),
		padding 0.45s var(--fb-soft),
		box-shadow 0.3s ease;
}

.mednix-fb__btn.is-open {
	width: auto;
	max-width: 280px;
	padding: 0 20px 0 0;
}

.mednix-fb__icon-wrap {
	flex: 0 0 var(--fb-size);
	width: var(--fb-size);
	height: var(--fb-size);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	/* Keep a solid hit target so siblings don’t steal hover while expanding */
	pointer-events: auto;
}

.mednix-fb__label {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	align-self: stretch;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	pointer-events: none;
	transition:
		max-width 0.5s var(--fb-ease),
		opacity 0.28s ease 0.04s,
		margin 0.45s var(--fb-soft);
	margin-left: 0;
}

.mednix-fb__btn.is-open .mednix-fb__label {
	max-width: 180px;
	opacity: 1;
	margin-left: 2px;
	pointer-events: none;
}

.mednix-fb__text {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 0.3em;
	white-space: nowrap;
	padding-right: 4px;
	line-height: 1;
}

.mednix-fb__word {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--fb-teal);
	opacity: 0;
	transform: translateX(-8px);
	transition:
		opacity 0.3s var(--fb-soft),
		transform 0.4s var(--fb-ease);
	transition-delay: 0s;
}

.mednix-fb__btn.is-open .mednix-fb__word {
	opacity: 1;
	transform: translateX(0);
	transition-delay: calc(0.1s + (var(--i) * 0.08s));
}

.mednix-fb__btn:not(.is-open) .mednix-fb__word {
	transition-delay: calc((var(--n) - var(--i) - 1) * 0.04s);
}

/* ---------- WhatsApp ---------- */
.mednix-fb__whatsapp {
	background-color: var(--fb-green);
	box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35);
}

.mednix-fb__whatsapp.is-open {
	box-shadow: 0 12px 28px rgba(37, 211, 102, 0.42);
}

.mednix-fb__whatsapp .mednix-fb__icon {
	display: block;
	width: 28px;
	height: 28px;
	color: #fff;
}

/* ---------- Watch Now ---------- */
.mednix-fb__cta {
	background-color: var(--fb-yellow);
	box-shadow: 0 8px 22px rgba(24, 87, 104, 0.2);
}

.mednix-fb__cta.is-open {
	box-shadow: 0 12px 28px rgba(24, 87, 104, 0.28);
}

.mednix-fb__play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--fb-play);
	height: var(--fb-play);
	border-radius: 50%;
	background-color: var(--fb-teal);
	flex-shrink: 0;
}

.mednix-fb__play-icon {
	display: block;
	width: 14px;
	height: 14px;
	color: var(--fb-yellow);
	margin-left: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mednix-fb__btn,
	.mednix-fb__label,
	.mednix-fb__word {
		transition: none !important;
	}

	.mednix-fb__btn {
		width: auto;
		max-width: 280px;
		padding: 0 20px 0 0;
	}

	.mednix-fb__label {
		max-width: 180px;
		opacity: 1;
		margin-left: 2px;
	}

	.mednix-fb__word {
		opacity: 1;
		transform: none;
	}
}

@media (hover: none), (pointer: coarse) {
	.mednix-fb__btn {
		width: auto;
		max-width: 280px;
		padding: 0 18px 0 0;
	}

	.mednix-fb__label {
		max-width: 180px;
		opacity: 1;
		margin-left: 2px;
	}

	.mednix-fb__word {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (max-width: 767px) {
	.mednix-fb {
		bottom: 18px;
		left: 16px;
		gap: 14px;
		--fb-size: 58px;
		--fb-play: 30px;
	}

	.mednix-fb__whatsapp .mednix-fb__icon {
		width: 26px;
		height: 26px;
	}

	.mednix-fb__word {
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.mednix-fb {
		bottom: max(16px, env(safe-area-inset-bottom, 0px));
		left: max(12px, env(safe-area-inset-left, 0px));
	}
}