/**
 * Floating WhatsApp button. Uses the theme's tokens when the CareNestPro theme is active;
 * the fallbacks are the same values, so the button looks right under any theme.
 * White on green-700 is 5.75:1.
 */

/* Keep focused elements clear of the button when the page scrolls to them. */
html {
	scroll-padding-bottom: 5.5rem;
}

.cnp-wa-fab {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: var(--cnp-z-fab, 800);
	display: inline-flex;
	gap: 0.625rem;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	min-height: 3.5rem;
	padding: 0;
	font-family: inherit;
	font-size: 1rem;
	font-weight: var(--cnp-weight-bold, 700);
	line-height: 1.25;
	color: var(--cnp-white, #fff);
	text-decoration: none;
	background: var(--cnp-green-700, #18761f);
	border-radius: var(--cnp-radius-pill, 999px);
	box-shadow: var(--cnp-shadow-lg, 0 20px 48px rgb(14 47 67 / 16%), 0 4px 12px rgb(14 47 67 / 6%));
}

.cnp-wa-fab:hover,
.cnp-wa-fab:focus {
	color: var(--cnp-white, #fff);
	text-decoration: none;
	background: var(--cnp-green-800, #166e1f);
}

/* Two-tone ring: the button floats over white and navy sections alike. */
.cnp-wa-fab:focus-visible {
	outline: 2px solid var(--cnp-white, #fff);
	outline-offset: 0;
	box-shadow: 0 0 0 4px var(--cnp-navy-900, #0e2f43);
}

.cnp-wa-fab__icon {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
}

/* Phones: a 56px circle with the icon only. */
.cnp-wa-fab__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Clear a sticky enroll bar on mobile course pages. */
body:has(.cnp-sticky-enroll) .cnp-wa-fab {
	bottom: 6rem;
}

@media (min-width: 600px) {

	.cnp-wa-fab {
		right: 1.25rem;
		bottom: 1.25rem;
		width: auto;
		padding: 0 1.375rem 0 1rem;
	}

	.cnp-wa-fab__label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	body:has(.cnp-sticky-enroll) .cnp-wa-fab {
		bottom: 1.25rem;
	}
}

@media print {

	.cnp-wa-fab {
		display: none;
	}
}