.callpoint {
	--callpoint-color: #d82c70;
	font-family: inherit;
	line-height: 1.2;
}

.callpoint--floating {
	position: fixed;
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 9999;
}

.callpoint--bottom-right { right: 20px; }
.callpoint--bottom-left { left: 20px; }
.callpoint--bottom-center { left: 50%; transform: translateX(-50%); }
.callpoint--inline { display: inline-flex; margin: 12px 0; }
.callpoint--movable { touch-action: none; }
.callpoint--dragging, .callpoint--dragging .callpoint-trigger { cursor: grabbing; user-select: none; }

.callpoint-trigger {
	align-items: center;
	appearance: none;
	background: var(--callpoint-color);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 10px 28px rgb(24 24 27 / 24%);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	gap: 9px;
	justify-content: center;
	min-height: 54px;
	padding: 0 20px;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}

.callpoint-trigger:hover { box-shadow: 0 14px 32px rgb(24 24 27 / 30%); transform: translateY(-2px); }
.callpoint-trigger:focus-visible, .callpoint-dialog button:focus-visible, .callpoint-dialog a:focus-visible { outline: 3px solid #111827; outline-offset: 3px; }
.callpoint-icon { display: inline-flex; height: 20px; width: 20px; }
.callpoint-icon svg, .callpoint-dialog__icon svg { fill: currentColor; height: 100%; width: 100%; }
.callpoint--circle .callpoint-trigger { border-radius: 50%; padding: 0; width: 58px; }
.callpoint--circle .callpoint-label { display: none; }
.callpoint--extended .callpoint-trigger { border-radius: 12px; min-width: 220px; }

.callpoint-dialog[hidden] { display: none; }
.callpoint-dialog { align-items: center; display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 10000; }
.callpoint-dialog__backdrop { background: rgb(15 23 42 / 62%); inset: 0; position: absolute; }
.callpoint-dialog__panel { background: #fff; border-radius: 18px; box-shadow: 0 24px 70px rgb(15 23 42 / 30%); color: #182033; max-width: 390px; padding: 36px 28px 28px; position: relative; text-align: center; width: 100%; }
.callpoint-dialog__close { appearance: none; background: transparent; border: 0; color: #4b5563; cursor: pointer; font-size: 30px; line-height: 1; padding: 6px; position: absolute; right: 12px; top: 10px; }
.callpoint-dialog__icon { align-items: center; background: color-mix(in srgb, var(--callpoint-color) 12%, white); border-radius: 50%; color: var(--callpoint-color); display: inline-flex; height: 52px; justify-content: center; margin-bottom: 8px; padding: 14px; width: 52px; }
.callpoint-dialog h2 { color: #182033; font-size: 24px; line-height: 1.25; margin: 7px 0 9px; }
.callpoint-dialog p { color: #5e6778; font-size: 15px; line-height: 1.55; margin: 0 auto 20px; max-width: 300px; }
.callpoint-dialog__number { color: #182033; display: block; font-size: 21px; font-weight: 800; margin-bottom: 20px; text-decoration: none; }
.callpoint-dialog__actions { display: grid; gap: 10px; }
.callpoint-dialog__call, .callpoint-dialog__copy { align-items: center; border-radius: 10px; box-sizing: border-box; cursor: pointer; display: inline-flex; font: inherit; font-size: 15px; font-weight: 700; justify-content: center; min-height: 46px; padding: 0 16px; text-decoration: none; width: 100%; }
.callpoint-dialog__call { background: var(--callpoint-color); color: #fff; }
.callpoint-dialog__copy { background: #f1f5f9; border: 1px solid #e2e8f0; color: #263143; }
.callpoint-dialog__channel { border: 1px solid #dce3eb; border-radius: 10px; box-sizing: border-box; color: #172033; display: grid; font-size: 15px; gap: 2px; min-height: 55px; padding: 9px 16px; text-decoration: none; width: 100%; }
.callpoint-dialog__channel span { color: #5e6778; font-size: 12px; font-weight: 600; }
.callpoint-dialog__channel--whatsapp { background: #e9fbf0; border-color: #b9ebca; color: #10743d; }
.callpoint-dialog__channel--messenger { background: #edf2ff; border-color: #c8d5ff; color: #3156c9; }

@media (max-width: 767px) {
	.callpoint--desktop-only { display: none; }
	.callpoint--floating { bottom: max(16px, env(safe-area-inset-bottom)); }
	.callpoint--bottom-right { right: 16px; }
	.callpoint--bottom-left { left: 16px; }
	.callpoint--bottom-center { left: 50%; }
}

@media (min-width: 768px) {
	.callpoint--mobile-only { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.callpoint-trigger { transition: none; }
}