/**
 * Contact Buttons by WebAdis — frontend styles.
 * No external dependencies. Dynamic values are injected as CSS custom properties.
 */

.wacb-widget {
	--wacb-size: 56px;
	--wacb-icon: 26px;
	--wacb-radius: 50%;
	--wacb-spacing: 12px;
	--wacb-offset-x: 20px;
	--wacb-offset-y: 20px;
	--wacb-z: 99990;
	--wacb-opacity: 1;
	--wacb-trigger-bg: #25d366;
	--wacb-trigger-icon: #fff;
	--wacb-hover-bg: #1da851;
	--wacb-border: 0 solid #fff;
	--wacb-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);

	position: fixed;
	z-index: var(--wacb-z);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--wacb-spacing);
	opacity: var(--wacb-opacity);
	box-sizing: border-box;
}

.wacb-widget[hidden] {
	display: none !important;
}

.wacb-widget *,
.wacb-widget *::before,
.wacb-widget *::after {
	box-sizing: border-box;
}

/* Positions */
.wacb-pos-bottom-right { right: var(--wacb-offset-x); bottom: var(--wacb-offset-y); align-items: flex-end; }
.wacb-pos-bottom-left  { left: var(--wacb-offset-x);  bottom: var(--wacb-offset-y); align-items: flex-start; }
.wacb-pos-top-right    { right: var(--wacb-offset-x); top: var(--wacb-offset-y);    align-items: flex-end; flex-direction: column-reverse; }
.wacb-pos-top-left     { left: var(--wacb-offset-x);  top: var(--wacb-offset-y);    align-items: flex-start; flex-direction: column-reverse; }
.wacb-pos-middle-right { right: var(--wacb-offset-x); top: 50%; transform: translateY(-50%); align-items: flex-end; }
.wacb-pos-middle-left  { left: var(--wacb-offset-x);  top: 50%; transform: translateY(-50%); align-items: flex-start; }

/* Trigger & channel buttons */
.wacb-trigger,
.wacb-channel {
	width: var(--wacb-size);
	height: var(--wacb-size);
	border-radius: var(--wacb-radius);
	border: var(--wacb-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--wacb-shadow);
	transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
	flex: 0 0 auto;
	padding: 0;
	line-height: 0;
}

.wacb-trigger {
	background: var(--wacb-trigger-bg);
	color: var(--wacb-trigger-icon);
	position: relative;
}

.wacb-trigger:hover,
.wacb-trigger:focus-visible {
	background: var(--wacb-hover-bg);
	transform: scale(1.06);
	outline: none;
}

.wacb-channel {
	background: var(--wacb-channel-bg, #444);
	color: #fff;
}

.wacb-channel:hover,
.wacb-channel:focus-visible {
	transform: scale(1.06);
	outline: none;
	filter: brightness(1.06);
}

.wacb-trigger:focus-visible,
.wacb-channel:focus-visible {
	box-shadow: var(--wacb-shadow), 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 5px rgba(0, 0, 0, 0.35);
}

.wacb-icon {
	width: var(--wacb-icon);
	height: var(--wacb-icon);
	display: block;
}

/* Labels */
.wacb-label {
	display: none;
}

.wacb-has-labels .wacb-channel {
	width: auto;
	min-width: var(--wacb-size);
	padding: 0 18px 0 14px;
	gap: 10px;
	border-radius: calc(var(--wacb-size) / 2);
	justify-content: flex-start;
}

.wacb-has-labels .wacb-label {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: #fff;
	line-height: 1;
}

.wacb-pos-bottom-left .wacb-has-labels .wacb-channel,
.wacb-pos-top-left .wacb-has-labels .wacb-channel,
.wacb-pos-middle-left .wacb-has-labels .wacb-channel {
	flex-direction: row;
}

/* CTA bubble on trigger */
.wacb-cta {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	background: #fff;
	color: #222;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 12px;
	border-radius: 8px;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.wacb-pos-bottom-left .wacb-cta,
.wacb-pos-top-left .wacb-cta,
.wacb-pos-middle-left .wacb-cta {
	right: auto;
	left: calc(100% + 10px);
}

/* Close icon visibility */
.wacb-trigger-close { display: none; }
.wacb-widget.is-open .wacb-trigger-open { display: none; }
.wacb-widget.is-open .wacb-trigger-close { display: inline-flex; }
.wacb-widget.is-open .wacb-cta { display: none; }

/* List visibility (multi mode) */
.wacb-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: var(--wacb-spacing);
}

.wacb-mode-multi .wacb-list {
	pointer-events: none;
	opacity: 0;
}

.wacb-mode-multi.is-open .wacb-list {
	pointer-events: auto;
	opacity: 1;
}

.wacb-mode-multi .wacb-item {
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.wacb-mode-multi.is-open .wacb-item {
	opacity: 1;
}

/* Animations (applied to items when open) */
.wacb-anim-fade.is-open .wacb-item { animation: wacb-fade 0.25s ease both; }
.wacb-anim-slide.is-open .wacb-item { animation: wacb-slide 0.28s ease both; }
.wacb-anim-bounce.is-open .wacb-item { animation: wacb-bounce 0.4s ease both; }
.wacb-anim-scale.is-open .wacb-item { animation: wacb-scale 0.24s ease both; }
.wacb-anim-rotate.is-open .wacb-item { animation: wacb-rotate 0.3s ease both; }

.wacb-mode-multi.is-open .wacb-item:nth-child(1) { animation-delay: 0.02s; }
.wacb-mode-multi.is-open .wacb-item:nth-child(2) { animation-delay: 0.06s; }
.wacb-mode-multi.is-open .wacb-item:nth-child(3) { animation-delay: 0.10s; }
.wacb-mode-multi.is-open .wacb-item:nth-child(4) { animation-delay: 0.14s; }
.wacb-mode-multi.is-open .wacb-item:nth-child(5) { animation-delay: 0.18s; }
.wacb-mode-multi.is-open .wacb-item:nth-child(n+6) { animation-delay: 0.22s; }

@keyframes wacb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wacb-slide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wacb-scale { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes wacb-rotate { from { opacity: 0; transform: rotate(-25deg) scale(0.7); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes wacb-bounce {
	0% { opacity: 0; transform: translateY(16px); }
	60% { opacity: 1; transform: translateY(-5px); }
	100% { transform: translateY(0); }
}

/* Screen-reader-only text */
.wacb-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* RTL */
.rtl .wacb-pos-bottom-right,
.rtl .wacb-pos-top-right,
.rtl .wacb-pos-middle-right { align-items: flex-end; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.wacb-trigger,
	.wacb-channel,
	.wacb-item {
		transition: none !important;
		animation: none !important;
	}
}

/* High-contrast support */
@media (forced-colors: active) {
	.wacb-trigger,
	.wacb-channel { border: 1px solid CanvasText; }
}