/**
 * AAM Contact Widget — Frontend Styles
 * Version: 2.0.0
 *
 * Uses CSS custom properties injected by PHP (class-frontend.php):
 *   --acw-primary, --acw-whatsapp, --acw-call, --acw-font, --acw-font-size
 */

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
.acw-wrapper,
.acw-wrapper * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ── SVG Icon base ───────────────────────────────────────────────────────── */
.acw-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	pointer-events: none;
	line-height: 1;
}

/* ── Dot Animation ───────────────────────────────────────────────────────── */
.acw-dot {
	animation: acwDotPulse 1.5s infinite;
	fill: var(--acw-text-main, #fff); /* inherit dot color */
}

.acw-dot--1 { animation-delay: 0s; }
.acw-dot--2 { animation-delay: 0.3s; }
.acw-dot--3 { animation-delay: 0.6s; }



/* ── Wrapper Positioning ─────────────────────────────────────────────────── */
.acw-wrapper {
	position: fixed;
	bottom: 28px;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	font-family: var(--acw-font, inherit);
	font-size: var(--acw-font-size, 14px);
}

.acw-pos-bottom-right {
	inset-inline-end: 15px;
	align-items: flex-end;
}

.acw-pos-bottom-left {
	inset-inline-start: 15px;
	align-items: flex-start;
}

/* Ensure logical direction support for buttons and menu */
[dir="rtl"] .acw-wrapper,
.rtl .acw-wrapper {
	direction: rtl;
}

[dir="ltr"] .acw-wrapper,
.ltr .acw-wrapper {
	direction: ltr;
}

/* Nudge expanded menu slightly 'to the opposite side' (inward) */
.acw-pos-bottom-right.is-open .acw-menu {
	margin-inline-end: 10px;
}

.acw-pos-bottom-left.is-open .acw-menu {
	margin-inline-start: 10px;
}

/* ── FAB (Floating Action Button) ────────────────────────────────────────── */
.acw-fab {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--acw-primary, #35b979);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(53, 185, 121, .45);
	transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
	color: #fff;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
}

.acw-fab:hover {
	transform: scale(1.1);
	box-shadow: 0 8px 28px rgba(53, 185, 121, .55);
}

.acw-fab:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* Icon swap */
.acw-fab__icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}

.acw-fab__icon--plus  { opacity: 1;  transform: rotate(0deg); }
.acw-fab__icon--close { opacity: 0;  transform: rotate(-90deg); }

.acw-wrapper.is-open .acw-fab__icon--plus  { opacity: 0;  transform: rotate(90deg); }
.acw-wrapper.is-open .acw-fab__icon--close { opacity: 1;  transform: rotate(0deg); }

/* ── Expanded Menu ───────────────────────────────────────────────────────── */
.acw-menu {
	display: flex;
	flex-direction: column;
	gap: 10px;
	visibility: hidden;
	pointer-events: none;
	opacity: 0;
	transform: translateY(12px) scale(.95);
	transition:
		opacity .22s ease,
		transform .22s cubic-bezier(.34,1.56,.64,1),
		visibility 0s linear .22s;
}

.acw-pos-bottom-right .acw-menu {
	align-items: stretch;
	transform-origin: bottom right;
}

.acw-pos-bottom-left .acw-menu {
	align-items: stretch;
	transform-origin: bottom left;
}

.acw-wrapper.is-open .acw-menu {
	visibility: visible;
	pointer-events: auto;
	opacity: 1;
	transform: translateY(0) scale(1);
	transition:
		opacity .22s ease,
		transform .22s cubic-bezier(.34,1.56,.64,1),
		visibility 0s;
}

/* Stagger children */
.acw-menu .acw-btn:nth-child(1) { transition-delay: .03s; }
.acw-menu .acw-btn:nth-child(2) { transition-delay: .06s; }

/* ── Action Buttons ───────────────────────────────────────────────────────── */
.acw-btn {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 11px 18px;
	border-radius: 50px;
	font-size: var(--acw-font-size, 14px);
	font-family: var(--acw-font, inherit);
	font-weight: 600;
	color: var(--acw-text-main, #fff);
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0,0,0,.2);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, color .2s ease;
	letter-spacing: .01em;
}

.acw-btn svg {
	flex-shrink: 0;
}

.acw-btn:hover {
	transform: translateX(-3px);
	box-shadow: 0 6px 20px rgba(0,0,0,.25);
	filter: brightness(1.08);
}

.acw-btn--whatsapp {
	background: var(--acw-whatsapp, #25D366);
	color: var(--acw-text-wa, #fff);
}

.acw-btn--whatsapp:hover {
	background: var(--acw-hover-wa, #128C7E);
	color: var(--acw-hover-text-wa, #fff);
}

.acw-btn--call {
	background: var(--acw-call, #0e4449);
	color: var(--acw-text-call, #fff);
}

.acw-btn--call:hover {
	background: var(--acw-hover-call, #092d30);
	color: var(--acw-hover-text-call, #fff);
}

.acw-btn--page {
	background: var(--acw-page);
	color: var(--acw-text-page);
}

.acw-btn--page:hover {
	background: var(--acw-hover-page);
	color: var(--acw-hover-text-page);
}

/* Left-side position: slide right on hover */
.acw-pos-bottom-left .acw-btn:hover {
	transform: translateX(3px);
}

/* ── Pulse Bubble ─────────────────────────────────────────────────────────── */
.acw-bubble {
	position: absolute;
	bottom: 68px; /* sits just above the FAB */
	inset-inline-end: 10px;  /* slightly inward relative to FAB edge */
	display: flex;
	align-items: center;
	gap: 8px;
	pointer-events: none;
	opacity: 1;                                    /* always visible by default */
	transition: opacity .25s ease, visibility 0s; /* smooth hide when menu opens */
	animation: acwBubbleFloat 6s ease-in-out infinite;
}

.acw-pos-bottom-left .acw-bubble {
	inset-inline-end: auto;
	inset-inline-start: 10px;
}

/* Pill label wrapper */
.acw-bubble__content {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	padding: 5px 14px;
	border-radius: 50px;
	box-shadow: 0 4px 14px rgba(0,0,0,.12);
	opacity: 1;
}

/* Pill label text */
.acw-bubble__label {
	color: #1a1a1a;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

/* Dot icon inside bubble */
.acw-bubble__icon {
	color: var(--acw-primary, #35b979);
	display: flex;
}

/* Pulse ring */
.acw-bubble__ring {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--acw-primary, #35b979);
	box-shadow: 0 0 0 0 rgba(53, 185, 121, .6);
	animation: acwPulseRing 2s ease-out infinite;
	flex-shrink: 0;
}

/* When FAB menu is open, smoothly hide the bubble */
.acw-wrapper.is-open .acw-bubble {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity .2s ease, visibility 0s linear .2s;
}

/* ── Keyframes ────────────────────────────────────────────────────────────── */
@keyframes acwPulseRing {
	0%   { box-shadow: 0 0 0 0   rgba(53,185,121,.6); }
	70%  { box-shadow: 0 0 0 12px rgba(53,185,121,.0); }
	100% { box-shadow: 0 0 0 0   rgba(53,185,121,.0); }
}

@keyframes acwDotPulse {
	0%, 100% { opacity: 0.3; transform: scale(0.8); }
	50%      { opacity: 1;   transform: scale(1.2); }
}

@keyframes acwBubbleFloat {
	0%,100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}


/* acwBubbleLabel removed — label is always visible */

/* ── Mobile adjustments ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.acw-wrapper {
		bottom: 16px;
	}

	.acw-pos-bottom-right { right: 10px; }
	.acw-pos-bottom-left  { left: 10px; }

	.acw-btn {
		padding: 10px 16px 10px 12px;
		font-size: 13px;
	}

	.acw-fab {
		width: 52px;
		height: 52px;
	}
}

/* ── High contrast / accessibility ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.acw-bubble,
	.acw-bubble__ring {
		animation: none;
	}
}