/* =========================================================
   CCBD SUPPORT BUTTON
   FULLY SCOPED VERSION
   ========================================================= */


/* ---------------------------------------------------------
   MAIN WIDGET
   --------------------------------------------------------- */

#ccbd-support-widget.ccbd-support-widget {
	position: fixed !important;

	right: 25px !important;
	bottom: 25px !important;

	width: auto !important;
	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	z-index: 2147483000 !important;

	font-family: inherit;
}


/* ---------------------------------------------------------
   TOGGLE BUTTON
   --------------------------------------------------------- */

#ccbd-support-widget .ccbd-support-toggle {
	position: relative !important;

	width: 58px !important;
	height: 58px !important;

	min-width: 58px !important;
	min-height: 58px !important;

	max-width: 58px !important;
	max-height: 58px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 50% !important;

	display: flex !important;

	align-items: center !important;
	justify-content: center !important;

	background: #e74c3c !important;

	color: #ffffff !important;

	cursor: pointer !important;

	box-shadow:
		0 8px 25px rgba(98, 62, 230, 0.45) !important;

	outline: none !important;

	line-height: 1 !important;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease !important;
}


#ccbd-support-widget .ccbd-support-toggle:hover {
	transform: scale(1.08) !important;
	background: linear-gradient(135deg, #ff6b35, #ffd700) !important;

	box-shadow:
		0 12px 32px rgba(98, 62, 230, 0.55) !important;
}


#ccbd-support-widget .ccbd-support-toggle:active {
	transform: scale(0.94) !important;
}


/* ---------------------------------------------------------
   TOGGLE ICONS
   --------------------------------------------------------- */

#ccbd-support-widget .ccbd-support-headset,
#ccbd-support-widget .ccbd-support-close {
	position: absolute !important;

	top: 50% !important;
	left: 50% !important;

	width: 27px !important;
	height: 27px !important;

	margin: 0 !important;
	padding: 0 !important;

	display: flex !important;

	align-items: center !important;
	justify-content: center !important;

	transform-origin: center !important;

	transition:
		opacity 0.25s ease,
		transform 0.3s ease !important;
}


#ccbd-support-widget .ccbd-support-headset {
	opacity: 1 !important;

	transform:
		translate(-50%, -50%)
		rotate(0deg)
		scale(1) !important;
}


#ccbd-support-widget .ccbd-support-close {
	opacity: 0 !important;

	transform:
		translate(-50%, -50%)
		rotate(-90deg)
		scale(0.5) !important;
}


/* ---------------------------------------------------------
   SVG RESET
   --------------------------------------------------------- */

#ccbd-support-widget svg {
	display: block !important;

	width: 100% !important;
	height: 100% !important;

	min-width: 0 !important;
	min-height: 0 !important;

	max-width: 100% !important;
	max-height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* ---------------------------------------------------------
   OPEN STATE
   --------------------------------------------------------- */

#ccbd-support-widget.is-open .ccbd-support-headset {
	opacity: 0 !important;

	transform:
		translate(-50%, -50%)
		rotate(90deg)
		scale(0.5) !important;
}


#ccbd-support-widget.is-open .ccbd-support-close {
	opacity: 1 !important;

	transform:
		translate(-50%, -50%)
		rotate(0deg)
		scale(1) !important;
}


/* =========================================================
   SUPPORT MENU
   ========================================================= */

#ccbd-support-widget .ccbd-support-menu {

	position: absolute !important;

	right: 0 !important;
	bottom: 70px !important;

	width: 155px !important;
	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	display: none !important;

	flex-direction: column !important;

	align-items: flex-end !important;

	justify-content: flex-start !important;

	gap: 9px !important;

	background: transparent !important;

	border: 0 !important;

	box-shadow: none !important;
}


/* ---------------------------------------------------------
   MENU OPEN
   --------------------------------------------------------- */

#ccbd-support-widget.is-open .ccbd-support-menu {
	display: flex !important;
}


/* =========================================================
   SUPPORT ITEMS
   ========================================================= */

#ccbd-support-widget .ccbd-support-item {

	position: relative !important;

	width: 155px !important;
	height: 42px !important;

	min-width: 155px !important;
	min-height: 42px !important;

	max-width: 155px !important;
	max-height: 42px !important;

	margin: 0 !important;
	padding: 0 14px !important;

	box-sizing: border-box !important;

	display: flex !important;

	flex-direction: row !important;

	align-items: center !important;
	justify-content: flex-start !important;

	gap: 8px !important;

	border: 0 !important;
	border-radius: 24px !important;

	color: #ffffff !important;

	text-decoration: none !important;

	font-size: 14px !important;
	font-weight: 600 !important;

	line-height: 1 !important;

	white-space: nowrap !important;

	overflow: hidden !important;

	box-shadow:
		0 6px 18px rgba(0, 0, 0, 0.22) !important;

	opacity: 0 !important;

	transform:
		translateY(15px)
		scale(0.85) !important;

	transition:
		opacity 0.25s ease,
		transform 0.3s ease,
		filter 0.2s ease !important;
}


/* ---------------------------------------------------------
   ITEMS OPEN ANIMATION
   --------------------------------------------------------- */

#ccbd-support-widget.is-open .ccbd-support-item {
	opacity: 1 !important;

	transform:
		translateY(0)
		scale(1) !important;
}


#ccbd-support-widget.is-open .ccbd-support-item:nth-child(1) {
	transition-delay: 0.04s !important;
}


#ccbd-support-widget.is-open .ccbd-support-item:nth-child(2) {
	transition-delay: 0.09s !important;
}


#ccbd-support-widget.is-open .ccbd-support-item:nth-child(3) {
	transition-delay: 0.14s !important;
}


/* =========================================================
   ITEM ICON
   ========================================================= */

#ccbd-support-widget .ccbd-support-item-icon {

	width: 25px !important;
	height: 25px !important;

	min-width: 25px !important;
	min-height: 25px !important;

	max-width: 25px !important;
	max-height: 25px !important;

	margin: 0 !important;
	padding: 0 !important;

	flex: 0 0 25px !important;

	display: flex !important;

	align-items: center !important;
	justify-content: center !important;
}


#ccbd-support-widget .ccbd-support-item-icon svg {

	width: 20px !important;
	height: 20px !important;

	min-width: 20px !important;
	min-height: 20px !important;

	max-width: 20px !important;
	max-height: 20px !important;

	display: block !important;
}


/* ---------------------------------------------------------
   TEXT
   --------------------------------------------------------- */

#ccbd-support-widget .ccbd-support-item > span:last-child {

	display: block !important;

	width: auto !important;
	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	font-size: 14px !important;
	font-weight: 600 !important;

	line-height: 1 !important;

	white-space: nowrap !important;
}


/* =========================================================
   COLORS
   ========================================================= */

#ccbd-support-widget .ccbd-support-telegram {

	background:
		linear-gradient(
			135deg,
			#229ed9,
			#168dcc
		) !important;
}


#ccbd-support-widget .ccbd-support-phone {

	background:
		linear-gradient(
			135deg,
			#9b59b6,
			#8143a0
		) !important;
}


#ccbd-support-widget .ccbd-support-whatsapp {

	background:
		linear-gradient(
			135deg,
			#00c853,
			#00bfa5
		) !important;
}


/* =========================================================
   HOVER
   ========================================================= */

#ccbd-support-widget .ccbd-support-item:hover {

	filter: brightness(1.08) !important;

	color: #ffffff !important;

	text-decoration: none !important;

	transform:
		translateX(-5px)
		scale(1.02) !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 575px) {

	#ccbd-support-widget.ccbd-support-widget {
		right: 12px !important;
		bottom: 75px !important;
	}

	#ccbd-support-widget .ccbd-support-toggle {
		width: 52px !important;
		height: 52px !important;

		min-width: 52px !important;
		min-height: 52px !important;

		max-width: 52px !important;
		max-height: 52px !important;
	}

	#ccbd-support-widget .ccbd-support-headset,
	#ccbd-support-widget .ccbd-support-close {
		width: 25px !important;
		height: 25px !important;
	}

	#ccbd-support-widget .ccbd-support-menu {
		right: 0 !important;
		bottom: 62px !important;
		width: 130px !important;
	}

	#ccbd-support-widget .ccbd-support-item {
		width: 130px !important;
		height: 38px !important;

		min-width: 130px !important;
		min-height: 38px !important;

		max-width: 130px !important;
		max-height: 38px !important;

		padding: 0 12px !important;

		font-size: 12px !important;
	}

	#ccbd-support-widget .ccbd-support-item-icon {
		width: 22px !important;
		height: 22px !important;

		min-width: 22px !important;
		min-height: 22px !important;

		flex-basis: 22px !important;
	}

	#ccbd-support-widget .ccbd-support-item-icon svg {
		width: 18px !important;
		height: 18px !important;
	}

	#ccbd-support-widget .ccbd-support-item > span:last-child {
		font-size: 12px !important;
	}
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	#ccbd-support-widget *,
	#ccbd-support-widget *::before,
	#ccbd-support-widget *::after {

		transition: none !important;
		animation: none !important;
	}

}