/* =================================================================
   THE FLOATING WHATSAPP BUTTON
   =================================================================
   A circle in the corner opposite the theme's scroll-to-top button,
   which widens into a labelled pill on hover or focus.

   POSITIONED LOGICALLY, NOT PHYSICALLY
   ------------------------------------
   `inset-inline-start` rather than `right`, so it lands on the right
   of this Arabic page and would move on its own if the site were ever
   served left-to-right. The theme's scroll-top sits at the physical
   left, which is the inline END here — the two corners cannot collide.

   THE GREEN IS BORROWED ON PURPOSE
   --------------------------------
   #25D366 is WhatsApp's. Everything else on this site is the clinic's
   teal, and the point of this one control is being recognised before
   it is read — a teal version would be a circle with a shape in it.
   ================================================================= */

.cb-wa {
	--wa:      #25D366;
	--wa-deep: #128C7E;

	position: fixed;
	inset-block-end: 22px;
	inset-inline-start: 22px;

	/*
	 * Below the off-canvas menu, which the theme runs at 99999.
	 * A floating button that outranked it would hover over an open
	 * menu, which is the one moment nobody wants it.
	 */
	z-index: 9990;

	display: inline-flex;
	align-items: center;
	gap: 0;

	height: 58px;
	padding: 0;
	border-radius: 999px;
	background: var(--wa);
	overflow: hidden;

	text-decoration: none;
	white-space: nowrap;

	/* Three layers, not one wide blur: a contact shadow, a mid spread
	   and a soft far one, which is how a real object is lit. */
	box-shadow:
		0 2px 4px rgba(4, 60, 40, .16),
		0 8px 18px -6px rgba(4, 60, 40, .28),
		0 22px 40px -18px rgba(4, 60, 40, .38);

	transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.cb-wa__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 58px;
	width: 58px;
	height: 58px;
	color: #fff;
}

/*
 * The label is measured, not hidden.
 *
 * `max-width` animates and `display: none` does not, so the pill grows
 * out of the circle instead of appearing beside it. Kept in the
 * accessibility tree either way — the aria-label on the link is what a
 * screen reader reads, and this is only what a sighted visitor sees.
 */
.cb-wa__label {
	max-width: 0;
	opacity: 0;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	transition: max-width .3s cubic-bezier(.22, .61, .36, 1), opacity .2s ease, padding .3s ease;
	padding-inline-end: 0;
}

.cb-wa:hover,
.cb-wa:focus-visible {
	background: var(--wa-deep);
	transform: translateY(-2px);
}

.cb-wa:hover .cb-wa__label,
.cb-wa:focus-visible .cb-wa__label {
	max-width: 220px;
	opacity: 1;
	padding-inline-end: 22px;
}

/* The theme strips outlines in places, so the ring is stated. */
.cb-wa:focus-visible {
	outline: 3px solid var(--wa-deep);
	outline-offset: 3px;
}


/* -----------------------------------------------------------------
   REDUCED MOTION
   -----------------------------------------------------------------
   The label still appears — it is information, not decoration. Only
   the sliding and the lift are dropped.
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.cb-wa,
	.cb-wa__label { transition: none; }

	.cb-wa:hover,
	.cb-wa:focus-visible { transform: none; }
}


/* -----------------------------------------------------------------
   PHONE
   -----------------------------------------------------------------
   No label at all: there is no hover on a touch screen, so a pill
   that only opens on hover would either never open or open on the tap
   that was meant to place the call.
   ----------------------------------------------------------------- */

@media (max-width: 767px) {

	.cb-wa {
		inset-block-end: 16px;
		inset-inline-start: 16px;
		height: 52px;
	}

	.cb-wa__icon {
		flex-basis: 52px;
		width: 52px;
		height: 52px;
	}

	.cb-wa__label { display: none; }
}


/* =================================================================
   THE IN-PAGE BUTTON  [cb_whatsapp_cta]
   =================================================================
   Green, because a WhatsApp button that is not green is a WhatsApp
   button nobody recognises. It is the one place on these pages that
   uses a colour from outside the brand palette, and that is the point:
   it reads as "this opens WhatsApp" before it is read as a button.
   ================================================================= */

.cb-wa-cta__wrap {
	margin: 26px 0 0;
}

.cb-wa-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 24px;
	border-radius: 8px;
	background: #25D366;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}

.cb-wa-cta:hover,
.cb-wa-cta:focus-visible {
	background: #1EBE5A;
	transform: translateY(-2px);
}


/*
 * The colour, said loudly enough to be heard.
 *
 * A link inside a service section is coloured by
 * `.cb-sections .cb-sec__body a`, which outweighs a single class, so the
 * button came out in brand teal on a green field. This is not an override
 * layer over a rule that is wrong: that rule is right for the links in an
 * article, and this button is the exception, so it says so at a weight the
 * cascade can hear. Listed for both places the button can appear, because it
 * is also meant to be dropped anywhere else.
 *
 * The mark drawn by ::before follows through currentColor.
 */
a.cb-wa-cta,
a.cb-wa-cta:visited,
a.cb-wa-cta:hover,
a.cb-wa-cta:focus-visible,
.cb-sections .cb-sec__body a.cb-wa-cta,
.cb-sections .cb-sec__body a.cb-wa-cta:visited,
.cb-sections .cb-sec__body a.cb-wa-cta:hover,
.cb-sections .cb-sec__body a.cb-wa-cta:focus-visible {
	color: #FFFFFF;
	text-decoration: none;
}

/*
 * The WhatsApp mark, drawn by the stylesheet.
 *
 * It was an inline <svg> until the section body proved it could be filtered
 * away (see inc/whatsapp.php). A mask keeps it under currentColor, so it
 * still follows the button's text colour.
 */
.cb-wa-cta::before {
	content: "";
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
	background-color: currentColor;
	-webkit-mask: var(--cb-wa-mark) center / contain no-repeat;
	mask: var(--cb-wa-mark) center / contain no-repeat;
}

.cb-wa-cta {
	--cb-wa-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2Zm5.8 14.1c-.2.7-1.4 1.3-2 1.4-.5.1-1.1.1-1.8-.1-.4-.1-1-.3-1.7-.6-3-1.3-4.9-4.3-5-4.5-.2-.2-1.2-1.6-1.2-3s.7-2.1 1-2.4c.3-.3.6-.4.8-.4h.6c.2 0 .4 0 .6.5l.9 2.1c.1.2.1.4 0 .6l-.4.5-.3.3c-.1.1-.2.3 0 .5.1.3.6 1.1 1.4 1.8 1 .9 1.8 1.2 2 1.3.2.1.4.1.5-.1l.7-.9c.2-.2.3-.2.6-.1l2 1c.3.1.5.2.5.3.1.2.1.8-.2 1.5Z'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {

	/* Full width on a phone: it is the action of this section, and a
	   thumb should not have to find it. */
	.cb-wa-cta {
		display: flex;
		justify-content: center;
		width: 100%;
		padding: 0 16px;
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.cb-wa-cta,
	.cb-wa-cta:hover,
	.cb-wa-cta:focus-visible {
		transition: none;
		transform: none;
	}
}