/* CF WhatsApp Chat
 *
 * Values come from the CF Fire Doors design (index.html section 21). Colours are
 * written literally rather than as theme tokens: the plugin must render
 * correctly if it is ever activated on a theme that does not define them.
 *
 * z-index 930 sits below Salient's off-canvas menu (9996/9997) and its header
 * (9999) deliberately - the chat panel must never cover an open menu.
 */

.cf-wa {
	position: fixed;
	bottom: 22px;
	z-index: 930;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cf-wa-right .cf-wa { right: 22px; align-items: flex-end; }
.cf-wa-left .cf-wa { left: 22px; align-items: flex-start; }

/* ---- Panel ---- */
.cf-wa__panel {
	width: 320px;
	max-width: calc(100vw - 44px);
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 30px 70px -22px rgba(14,17,22,.45);
	overflow: hidden;
	transform: translateY(16px) scale(.96);
	transform-origin: bottom right;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s cubic-bezier(.22,.61,.36,1), transform .35s cubic-bezier(.22,.61,.36,1), visibility .35s;
}
.cf-wa-left .cf-wa__panel { transform-origin: bottom left; }
.cf-wa.is-open .cf-wa__panel { opacity: 1; visibility: visible; transform: none; }

.cf-wa__head {
	background: #075E54;
	color: #fff;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
}
.cf-wa__av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	display: grid;
	place-items: center;
	flex: none;
	overflow: hidden;
	padding: 4px;
}
.cf-wa__av img { width: 100%; height: auto; display: block; }
.cf-wa__who { min-width: 0; }
.cf-wa__who b {
	display: block;
	font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px;
	line-height: 1.25;
	font-weight: 700;
}
.cf-wa__who > span {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	opacity: .78;
	margin-top: 2px;
}
.cf-wa__dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; display: inline-block; flex: none; }

.cf-wa__x {
	position: absolute;
	right: 8px;
	top: 8px;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 0;
	padding: 0;
	background: none;
	border-radius: 50%;
	color: #fff;
	opacity: .75;
	cursor: pointer;
	transition: opacity .2s, background .2s;
}
.cf-wa__x:hover { opacity: 1; background: rgba(255,255,255,.15); }
.cf-wa__x svg { width: 14px !important; height: 14px !important; }

.cf-wa__body { padding: 20px 18px; background: #ECE5DD; }
.cf-wa__msg {
	background: #fff;
	border-radius: 2px 10px 10px 10px;
	padding: 13px 15px;
	font-size: 14.5px;
	line-height: 1.55;
	color: #222935;
	box-shadow: 0 1px 2px rgba(0,0,0,.1);
	position: relative;
}
.cf-wa__msg time { display: block; font-size: 11px; color: #687285; margin-top: 7px; text-align: right; }

.cf-wa__foot { padding: 14px 18px 18px; background: #ECE5DD; }

/* The label is near-black on WhatsApp green: white on #25D366 is 1.98:1 and
   fails WCAG AA outright. */
.cf-wa__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 20px;
	border-radius: 3px;
	background: #25D366;
	color: #04310F;
	border: 2px solid #25D366;
	font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;
}
.cf-wa__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(37,211,102,.7); color: #04310F; }
.cf-wa__cta svg { width: 18px !important; height: 18px !important; flex: none; }

/* ---- Button ---- */
.cf-wa__fab {
	width: 64px;
	height: 64px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 14px 32px -10px rgba(37,211,102,.7);
	transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s;
	position: relative;
}
/* !important on the colour as well as the size. In direct mode the button is an
   <a>, and a theme is entitled to a blanket `a { color: inherit }` - the CF
   child theme has one - which made the mark inherit the body's near-black and
   render a dark glyph on the green circle. */
.cf-wa__fab,
.cf-wa__fab:hover,
.cf-wa__fab:focus,
.cf-wa__fab:visited { color: #fff !important; }
.cf-wa__fab:hover { transform: scale(1.07); }
.cf-wa__fab svg path { fill: currentColor; }
/* !important because a theme may set a global svg size. The CF child theme does
   exactly that - `.cf-site svg:not(#icons) {width:1em;height:1em}` at (0,2,1) -
   which shrank this mark to 13px and made the button look empty. A plugin
   cannot assume anything about the theme it lands in. */
.cf-wa__fab svg { width: 32px !important; height: 32px !important; flex: none; }
.cf-wa__fab::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid #25D366;
	animation: cf-wa-ping 2.6s cubic-bezier(.22,.61,.36,1) infinite;
	pointer-events: none;
}
.cf-wa.is-open .cf-wa__fab::after { display: none; }

@keyframes cf-wa-ping {
	0%   { transform: scale(1); opacity: .7; }
	70%  { transform: scale(1.55); opacity: 0; }
	100% { opacity: 0; }
}

.cf-wa__badge {
	position: absolute;
	right: -2px;
	top: -2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #CD0038;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: grid;
	place-items: center;
	border: 2px solid #fff;
	font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}
.cf-wa.is-open .cf-wa__badge { display: none; }

/* Clear the theme's mobile action bar. */
@media (max-width: 700px) {
	.cf-wa { bottom: 78px; }
	.cf-wa-right .cf-wa { right: 16px; }
	.cf-wa-left .cf-wa { left: 16px; }
	.cf-wa__fab { width: 58px; height: 58px; }
	.cf-wa__fab svg { width: 29px !important; height: 29px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.cf-wa__fab::after { animation: none; }
	.cf-wa__panel { transition-duration: .001ms; }
}