/* ============================================================
   Studio Visuali — Quick Contact  |  widget.css
   ============================================================ */

:root {
	--vqc-size:          52px;
	--vqc-item-size:     46px;
	--vqc-offset-bottom: 20px;
	--vqc-offset-side:   20px;
	--vqc-item-gap:      58px;
	--vqc-color:         #25d366;
	--vqc-color-rgb:     37,211,102;
}

/* ── Container ─────────────────────────────────────────────── */
#vqc-wrap {
	position: fixed;
	z-index: 99990;
	bottom: calc( var(--vqc-offset-bottom) + env(safe-area-inset-bottom, 0px) );
	right:  var(--vqc-offset-side);
	left:   auto;
	top:    auto;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

#vqc-wrap.vqc-bottom-left {
	right: auto;
	left:  var(--vqc-offset-side);
}

#vqc-wrap.vqc-top-right {
	bottom: auto;
	top:    var(--vqc-offset-bottom);
	align-items: flex-start;
}

#vqc-wrap.vqc-top-left {
	bottom: auto;
	top:    var(--vqc-offset-bottom);
	right:  auto;
	left:   var(--vqc-offset-side);
	align-items: flex-start;
}

/* ── Trigger / single button ───────────────────────────────── */
.vqc-trigger {
	position: relative;
	z-index: 2;
	width:       var(--vqc-size) !important;
	height:      var(--vqc-size) !important;
	min-width:   unset !important;
	min-height:  unset !important;
	max-width:   unset !important;
	max-height:  unset !important;
	padding:     0 !important;
	box-sizing:  border-box !important;
	line-height: 1 !important;
	border-radius: 50% !important;
	overflow: hidden;
	background: var(--vqc-color);
	border: none !important;
	cursor: pointer;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #fff;
	box-shadow: 0 4px 14px rgba(0,0,0,0.28);
	transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
	text-decoration: none !important;
	flex-shrink: 0;
	-webkit-tap-highlight-color: transparent;
	appearance: none !important;
	-webkit-appearance: none !important;
}

.vqc-trigger:hover,
.vqc-trigger:focus-visible {
	transform: scale(1.08);
	opacity: 0.92;
	outline: 2px solid rgba(255,255,255,0.6);
	outline-offset: 2px;
}

/* Force white icons — overrides any theme color rules including hover */
#vqc-wrap .vqc-trigger,
#vqc-wrap .vqc-trigger:hover,
#vqc-wrap .vqc-trigger:focus,
#vqc-wrap .vqc-trigger:focus-visible,
#vqc-wrap .vqc-trigger:active,
#vqc-wrap .vqc-item,
#vqc-wrap .vqc-item:hover,
#vqc-wrap .vqc-item:focus,
#vqc-wrap .vqc-item:focus-visible,
#vqc-wrap .vqc-item:active {
	color: #fff !important;
}

/* Single mode: SVG sits directly in the anchor */
a.vqc-trigger > svg {
	width:  62%;
	height: 62%;
	pointer-events: none;
}

/* Multi mode: icon spans fill the button and center their SVG */
.vqc-trigger .vqc-icon-open,
.vqc-trigger .vqc-icon-close {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.vqc-trigger .vqc-icon-open svg,
.vqc-trigger .vqc-icon-close svg {
	width:  65%;
	height: 65%;
	pointer-events: none;
}

/* Pulse animation ─────────────────────────────────────────── */
@keyframes vqc-pulse {
	0%   { box-shadow: 0 4px 14px rgba(0,0,0,0.28), 0 0 0 0   rgba(var(--vqc-color-rgb), 0.55); }
	70%  { box-shadow: 0 4px 14px rgba(0,0,0,0.28), 0 0 0 14px rgba(var(--vqc-color-rgb), 0); }
	100% { box-shadow: 0 4px 14px rgba(0,0,0,0.28), 0 0 0 0   rgba(var(--vqc-color-rgb), 0); }
}

.vqc-trigger.vqc-pulse {
	animation: vqc-pulse 2.2s infinite;
}

/* ── Multi-mode items container ─────────────────────────────── */
.vqc-items {
	position: absolute;
	bottom: 0;
	right:  0;
	left:   auto;
	width:  var(--vqc-size);
	pointer-events: none;
}

#vqc-wrap.vqc-bottom-left .vqc-items {
	right: auto;
	left:  0;
}

#vqc-wrap.vqc-top-right .vqc-items,
#vqc-wrap.vqc-top-left  .vqc-items {
	bottom: auto;
	top:    0;
}

/* ── Individual channel item ─────────────────────────────────── */
.vqc-item {
	position: absolute;
	bottom: 0;
	right:  50%;
	transform: translateX(50%) translateY(0) scale(0.6);
	width:  var(--vqc-item-size);
	height: var(--vqc-item-size);
	border-radius: 50% !important;
	overflow: hidden;
	background: #555;
	border: none !important;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: #fff;
	box-shadow: 0 3px 10px rgba(0,0,0,0.22);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.24s cubic-bezier(0.34,1.56,0.64,1), opacity 0.18s ease;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
}

#vqc-wrap.vqc-top-right .vqc-item,
#vqc-wrap.vqc-top-left  .vqc-item {
	bottom: auto;
	top: 0;
}

.vqc-item svg {
	width:  56%;
	height: 56%;
	pointer-events: none;
}

/* Open state — stacked upward (or downward for top positions) */
#vqc-wrap.vqc-open .vqc-item {
	opacity: 1;
	pointer-events: auto;
	/* translateX keeps button centred; translateY is set inline by JS */
	transform: translateX(50%) translateY(var(--vqc-item-translate, 0px)) scale(1);
}

.vqc-item:hover,
.vqc-item:focus-visible {
	filter: brightness(1.12);
	outline: 2px solid rgba(255,255,255,0.5);
	outline-offset: 2px;
}

/* ── Tooltip labels ──────────────────────────────────────────── */
.vqc-item::before {
	content: attr(aria-label);
	position: absolute;
	right: calc(100% + 10px);
	top:   50%;
	transform: translateY(-50%);
	white-space: nowrap;
	background: rgba(20,20,20,0.82);
	color: #fff;
	font-size: 12px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 5px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s;
}

#vqc-wrap.vqc-bottom-left .vqc-item::before,
#vqc-wrap.vqc-top-left    .vqc-item::before {
	right: auto;
	left:  calc(100% + 10px);
}

.vqc-item:hover::before,
.vqc-item:focus-visible::before {
	opacity: 1;
}

/* ── Visibility ────────────────────────────────────────────── */
@media (max-width: 767px) {
	#vqc-wrap.vqc-desktop-only {
		display: none !important;
	}
}

@media (min-width: 768px) {
	#vqc-wrap.vqc-mobile-only {
		display: none !important;
	}
}

/* ── Open / close icon swap ─────────────────────────────────── */
.vqc-trigger .vqc-icon-close {
	opacity: 0;
	transform: rotate(-45deg) scale(0.6);
}

.vqc-trigger .vqc-icon-open {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

#vqc-wrap.vqc-open .vqc-trigger .vqc-icon-open {
	opacity: 0;
	transform: rotate(45deg) scale(0.6);
}

#vqc-wrap.vqc-open .vqc-trigger .vqc-icon-close {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}