/**
 * Emblit WhatsApp CTA front-end styles.
 *
 * Every selector is namespaced. There are no element selectors and no
 * utility class names, so the plugin cannot alter the host theme.
 *
 * Typography is inherited rather than declared, so the button reads as part
 * of the website rather than as a bolted-on widget. Logical properties are
 * used throughout, so an RTL site mirrors correctly without a separate
 * stylesheet.
 */

.emblit-cta {
	margin-block: 1.5rem;
}

.emblit-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	box-sizing: border-box;
	min-height: 44px;
	max-width: 100%;
	padding-block: 0.7em;
	padding-inline: 1.2em;
	border: 1px solid transparent;
	border-radius: 6px;
	background-color: #1faa53;
	color: #ffffff;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.emblit-cta__button:hover,
.emblit-cta__button:active {
	background-color: #17803e;
	color: #ffffff;
	text-decoration: none;
}

.emblit-cta__button:focus {
	color: #ffffff;
}

.emblit-cta__button:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

.emblit-cta__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.emblit-cta__label {
	overflow-wrap: anywhere;
}

/* Accessible name supplement, visually hidden without being hidden from
   assistive technology. */
.emblit-cta__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Floating overlay.
   Positions use logical properties, so "bottom right" mirrors to the bottom
   left on right-to-left websites, which is the expected reading behaviour. */
.emblit-cta--floating {
	position: fixed;
	z-index: 9990;
	inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
	margin: 0;
}

.emblit-cta--floating.emblit-cta--right {
	inset-inline-end: calc(1rem + env(safe-area-inset-right, 0px));
}

.emblit-cta--floating.emblit-cta--left {
	inset-inline-start: calc(1rem + env(safe-area-inset-left, 0px));
}

.emblit-cta--floating .emblit-cta__button {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Sticky mobile bar. Hidden on larger viewports, where the configured
   in-content placement is the intended experience. */
.emblit-cta--sticky-mobile {
	display: none;
	margin: 0;
}

@media (max-width: 767px) {
	.emblit-cta--sticky-mobile {
		display: block;
		position: fixed;
		z-index: 9991;
		inset-inline: 0;
		inset-block-end: 0;
		padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
		background-color: rgba(255, 255, 255, 0.96);
		box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.15);
	}

	.emblit-cta--sticky-mobile .emblit-cta__button {
		display: flex;
		width: 100%;
	}

	/* Two overlapping overlays would obscure each other and the page. The
	   sticky bar wins on small screens. */
	.emblit-cta--floating {
		display: none;
	}
}

/* Editor-only notice, never shown to visitors. */
.emblit-cta--placeholder {
	padding: 1rem;
	border: 1px dashed #8c8f94;
	border-radius: 6px;
	color: #50575e;
	font-size: 0.9em;
}

.emblit-cta--placeholder p {
	margin: 0;
}