/*
 * Copamex Site -- the floating WhatsApp button (1.44.0, Phase 14.8.11.1; WhatsAppWidget).
 *
 * A launcher fixed in the bottom-right corner and, above it, a panel of the
 * company's WhatsApp lines. Fixed, so it takes no room in the page and moves
 * nothing when it appears; above the page's content and just below ILM's
 * menus and dropdowns (--ilm-z-dropdown minus one, 999), so the header's
 * mobile menu and its submenus open over it, and so do the sticky header
 * and ILM's dialogs and their backdrop. WhatsApp's own greens,
 * with text on the dark one (#075e54, 7.6:1 with white); the panel is light
 * whatever the page, so its colours are its own. Plain CSS, no build step.
 */

.copamex-wa {
	--copamex-wa-green: #25d366;
	--copamex-wa-dark: #075e54;
	--copamex-wa-gap: 1rem;
	position: fixed;
	inset-block-end: calc(var(--copamex-wa-gap) + env(safe-area-inset-bottom, 0px));
	inset-inline-end: calc(var(--copamex-wa-gap) + env(safe-area-inset-right, 0px));
	z-index: calc(var(--ilm-z-dropdown, 1000) - 1);
	display: flex;
	justify-content: flex-end;
	max-inline-size: calc(100vw - 2 * var(--copamex-wa-gap));
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	box-sizing: border-box;
}

.copamex-wa *,
.copamex-wa *::before,
.copamex-wa *::after {
	box-sizing: border-box;
}

/* Without the script, a native disclosure; the panel is placed against the fixed root either way. */
.copamex-wa__details {
	display: flex;
	justify-content: flex-end;
	max-inline-size: 100%;
}

/* The launcher. */
.copamex-wa__launcher {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	max-inline-size: 100%;
	min-block-size: 3.25rem;
	padding: 0.375rem 1.125rem 0.375rem 0.375rem;
	border: 0;
	border-radius: 999px;
	background-color: var(--copamex-wa-dark);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	text-align: start;
	appearance: none;
	cursor: pointer;
	list-style: none;
	box-shadow: 0 6px 20px rgb(0 0 0 / 0.28);
	user-select: none;
}

.copamex-wa__launcher::-webkit-details-marker,
.copamex-wa__launcher::marker {
	display: none;
	content: "";
}

.copamex-wa__launcher:hover {
	background-color: #054d45;
}

.copamex-wa__launcher:focus-visible,
.copamex-wa__close:focus-visible,
.copamex-wa__account:focus-visible {
	outline: 3px solid var(--ilm-color-focus-ring, #ffbf47);
	outline-offset: 3px;
}

.copamex-wa__label {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.copamex-wa__disc {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	background-color: var(--copamex-wa-green);
	color: #fff;
}

.copamex-wa__glyph {
	inline-size: 1.375rem;
	block-size: 1.375rem;
}

/* The panel, above the launcher. */
.copamex-wa__panel {
	position: absolute;
	inset-block-end: calc(100% + 0.75rem);
	inset-inline-end: 0;
	inline-size: min(22rem, calc(100vw - 2 * var(--copamex-wa-gap)));
	max-block-size: calc(100vh - 7rem);
	max-block-size: calc(100dvh - 7rem);
	overflow: auto;
	overscroll-behavior: contain;
	border-radius: 16px;
	background-color: #fff;
	color: #1f2937;
	box-shadow: 0 12px 40px rgb(0 0 0 / 0.3);
}

.copamex-wa__panel[hidden] {
	display: none;
}

.copamex-wa__head {
	position: relative;
	padding: 1rem 3rem 1rem 1.125rem;
	background-color: var(--copamex-wa-dark);
	color: #fff;
}

.copamex-wa .copamex-wa__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
	overflow-wrap: anywhere;
}

.copamex-wa .copamex-wa__intro {
	margin: 0.375rem 0 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: inherit;
	overflow-wrap: anywhere;
}

.copamex-wa .copamex-wa__preview {
	display: inline-block;
	margin: 0 0 0.5rem;
	padding: 0.125rem 0.5rem;
	border-radius: 4px;
	background-color: #fff3cd;
	color: #3d2e00;
	font-size: 0.75rem;
	font-weight: 600;
}

.copamex-wa__close {
	position: absolute;
	inset-block-start: 0.625rem;
	inset-inline-end: 0.625rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.copamex-wa__close[hidden] {
	display: none;
}

.copamex-wa__close:hover {
	background-color: rgb(255 255 255 / 0.15);
}

.copamex-wa__close .copamex-wa__glyph {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.copamex-wa .copamex-wa__list {
	margin: 0;
	padding: 0.5rem;
	list-style: none;
}

.copamex-wa .copamex-wa__item {
	margin: 0;
	padding: 0;
}

.copamex-wa .copamex-wa__item::before {
	content: none;
}

.copamex-wa .copamex-wa__account {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.625rem;
	border-radius: 12px;
	color: #111827;
	text-decoration: none;
}

.copamex-wa .copamex-wa__account:hover {
	background-color: #ecfdf3;
	color: #111827;
	text-decoration: none;
}

.copamex-wa__text {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

.copamex-wa__name {
	font-weight: 700;
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

.copamex-wa__desc {
	color: #4b5563;
	font-size: 0.8125rem;
	overflow-wrap: anywhere;
}

.copamex-wa__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* A narrow phone: the button keeps its text for assistive technology, shows the icon. */
@media (max-width: 359.98px) {
	.copamex-wa__launcher {
		padding: 0.375rem;
	}

	.copamex-wa__label {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Devices, by width: the same page for every visitor. */
@media (max-width: 767.98px) {
	.copamex-wa--no-mobile {
		display: none;
	}
}

@media (min-width: 768px) {
	.copamex-wa--no-desktop {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.copamex-wa__details[open] .copamex-wa__panel,
	.copamex-wa--open .copamex-wa__panel {
		animation: copamex-wa-in 160ms ease-out;
	}

	.copamex-wa__launcher,
	.copamex-wa__account,
	.copamex-wa__close {
		transition: background-color 120ms ease;
	}
}

@keyframes copamex-wa-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.copamex-wa {
		display: none;
	}
}