#dcm-menu {
	--dcm-green: #25D366;
	--dcm-green-dark: #1ebe5d;
	--dcm-item-bg: #ffffff;
	--dcm-item-text: #202124;
	--dcm-accent: #25D366;

	position: fixed;
	right: var(--dcm-right, 24px);
	bottom: var(--dcm-bottom, 24px);
	width: 390px;
	height: 330px;
	z-index: 999999;
	font-family: inherit;
	pointer-events: none;
}

#dcm-menu.dcm-left {
	left: var(--dcm-left, 24px);
	right: auto;
}

/*
 * The orbit is centered exactly on the main WhatsApp button.
 * The JavaScript calculates the individual positions.
 */
#dcm-menu .dcm-items {
	position: absolute;
	right: 36px;
	bottom: 36px;
	width: 1px;
	height: 1px;
	z-index: 3;
	pointer-events: none;
}

#dcm-menu.dcm-left .dcm-items {
	left: 36px;
	right: auto;
}

#dcm-menu .dcm-item {
	position: absolute;
	left: 0;
	top: 0;
	width: 58px;
	height: 58px;
	margin: -29px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dcm-item-bg);
	color: var(--dcm-item-text);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transform:
		translate(var(--dcm-x, 0px), var(--dcm-y, 0px))
		scale(.35);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		transform .42s cubic-bezier(.18, .89, .32, 1.28),
		opacity .20s ease,
		visibility .20s ease,
		box-shadow .18s ease;
	transition-delay: var(--dcm-delay, 0s);
}

#dcm-menu.is-open .dcm-item {
	transform:
		translate(var(--dcm-x, 0px), var(--dcm-y, 0px))
		scale(1);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

#dcm-menu .dcm-item:hover,
#dcm-menu .dcm-item:focus-visible {
	box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
	outline: none;
}

#dcm-menu .dcm-item:focus-visible {
	box-shadow:
		0 0 0 3px rgba(37, 211, 102, .25),
		0 10px 30px rgba(0, 0, 0, .22);
}

#dcm-menu .dcm-item-icon {
	font-size: 24px;
	line-height: 1;
	user-select: none;
}

/*
 * Labels are intentionally hidden until the user hovers/focuses
 * the corresponding circle. This keeps the radial menu clean.
 */
#dcm-menu .dcm-item-text {
	position: absolute;
	top: 50%;
	width: max-content;
	max-width: 190px;
	padding: 9px 13px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .98);
	color: var(--dcm-item-text);
	box-shadow: 0 7px 24px rgba(0, 0, 0, .12);
	transform: translateY(-50%) scale(.96);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	white-space: nowrap;
	transition:
		opacity .16s ease,
		transform .16s ease,
		visibility .16s ease;
	z-index: 20;
}

#dcm-menu.dcm-left .dcm-item-text {
	left: 70px;
	right: auto;
	text-align: left;
	transform-origin: left center;
}

#dcm-menu.dcm-right .dcm-item-text {
	right: 70px;
	left: auto;
	text-align: right;
	transform-origin: right center;
}

#dcm-menu .dcm-item:hover .dcm-item-text,
#dcm-menu .dcm-item:focus-visible .dcm-item-text {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) scale(1);
}

#dcm-menu .dcm-item-text strong {
	display: block;
	font-size: 13px;
	line-height: 1.2;
	font-weight: 700;
}

#dcm-menu .dcm-item-text small {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	line-height: 1.25;
	opacity: .68;
	font-weight: 400;
}

#dcm-menu .dcm-main {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 72px;
	height: 72px;
	border: 0;
	border-radius: 50%;
	background: var(--dcm-green);
	color: #fff;
	box-shadow: 0 10px 32px rgba(0, 0, 0, .20);
	cursor: pointer;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 0;
	pointer-events: auto;
	overflow: hidden;
	transition:
		width .30s cubic-bezier(.2, .8, .2, 1),
		border-radius .30s ease,
		box-shadow .20s ease,
		background-color .20s ease;
}

#dcm-menu.dcm-left .dcm-main {
	left: 0;
	right: auto;
}

#dcm-menu .dcm-main:hover {
	background: var(--dcm-accent);
	box-shadow: 0 12px 36px rgba(0, 0, 0, .24);
}

#dcm-menu .dcm-main-icon {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

#dcm-menu .dcm-whatsapp-icon svg {
	width: 34px;
	height: 34px;
	fill: currentColor;
}

#dcm-menu .dcm-main-label {
	display: none;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

#dcm-menu .dcm-main-close {
	display: none;
	font-size: 32px;
	font-weight: 300;
	line-height: 1;
	flex: 0 0 auto;
}

#dcm-menu.is-open .dcm-main {
	width: 260px;
	border-radius: 38px;
	justify-content: space-between;
	padding: 0 19px;
}

#dcm-menu.is-open .dcm-main-label {
	display: inline;
}

#dcm-menu.is-open .dcm-main-icon {
	display: none;
}

#dcm-menu.is-open .dcm-main-close {
	display: inline;
}

#dcm-menu.dcm-right .dcm-main {
	flex-direction: row-reverse;
}

#dcm-menu.dcm-left .dcm-main {
	flex-direction: row;
}

@media (max-width: 767px) {
	#dcm-menu {
		width: 300px;
		height: 275px;
	}

	#dcm-menu .dcm-main {
		width: 62px;
		height: 62px;
	}

	#dcm-menu.is-open .dcm-main {
		width: min(235px, calc(100vw - 28px));
	}

	#dcm-menu .dcm-items {
		right: 31px;
		bottom: 31px;
	}

	#dcm-menu.dcm-left .dcm-items {
		left: 31px;
		right: auto;
	}

	#dcm-menu .dcm-item {
		width: 50px;
		height: 50px;
		margin: -25px;
	}

	#dcm-menu .dcm-item-icon {
		font-size: 21px;
	}

	#dcm-menu .dcm-item-text {
		max-width: 145px;
		padding: 7px 10px;
	}

	#dcm-menu .dcm-item-text strong {
		font-size: 11px;
	}

	#dcm-menu .dcm-item-text small {
		display: none;
	}

	#dcm-menu.dcm-left .dcm-item-text {
		left: 60px;
	}

	#dcm-menu.dcm-right .dcm-item-text {
		right: 60px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#dcm-menu *,
	#dcm-menu *::before,
	#dcm-menu *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}