/*
|--------------------------------------------------------------------------
| Dubai TEREA Floating Chat Widget
|--------------------------------------------------------------------------
*/

.dtd-chat-widget {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 999999;

	width: 64px;
	height: 64px;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Arial,
		sans-serif;
}


/*
|--------------------------------------------------------------------------
| Main Chat Button
|--------------------------------------------------------------------------
*/

.dtd-chat-toggle {
	position: absolute !important;
	right: 0 !important;
	bottom: 0 !important;

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

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

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

	background: #31577F !important;
	background-image: none !important;

	color: #ffffff !important;

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

	cursor: pointer !important;

	-webkit-appearance: none !important;
	appearance: none !important;

	box-shadow:
		0 8px 22px rgba(49, 87, 127, 0.28),
		0 3px 8px rgba(0, 0, 0, 0.12) !important;

	outline: none !important;

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

.dtd-chat-toggle:hover {
	background: #244968 !important;
	background-image: none !important;

	transform: scale(1.06) !important;

	box-shadow:
		0 10px 28px rgba(49, 87, 127, 0.34),
		0 4px 10px rgba(0, 0, 0, 0.14) !important;
}

.dtd-chat-toggle:active {
	transform: scale(0.94) !important;
}

.dtd-chat-toggle:focus,
.dtd-chat-toggle:focus-visible {
	outline: 3px solid rgba(49, 87, 127, 0.20) !important;
	outline-offset: 3px !important;
}


/*
|--------------------------------------------------------------------------
| Main Chat / Close Icons
|--------------------------------------------------------------------------
*/

.dtd-chat-icon {
	position: absolute !important;

	width: 32px !important;
	height: 32px !important;

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

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

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

	display: block !important;

	fill: #ffffff !important;
	color: #ffffff !important;

	pointer-events: none !important;

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


/*
|--------------------------------------------------------------------------
| Chat Icon
|--------------------------------------------------------------------------
*/

.dtd-chat-icon-open {
	opacity: 1 !important;

	transform:
		scale(1)
		rotate(0deg) !important;
}


/*
|--------------------------------------------------------------------------
| Close Icon
|--------------------------------------------------------------------------
*/

.dtd-chat-icon-close {
	opacity: 0 !important;

	transform:
		scale(0.65)
		rotate(-90deg) !important;
}


/*
|--------------------------------------------------------------------------
| Open State — Chat Icon
|--------------------------------------------------------------------------
*/

.dtd-chat-widget.is-open .dtd-chat-icon-open {
	opacity: 0 !important;

	transform:
		scale(0.65)
		rotate(90deg) !important;
}


/*
|--------------------------------------------------------------------------
| Open State — Close Icon
|--------------------------------------------------------------------------
*/

.dtd-chat-widget.is-open .dtd-chat-icon-close {
	opacity: 1 !important;

	transform:
		scale(1)
		rotate(0deg) !important;
}


/*
|--------------------------------------------------------------------------
| Action Container
|--------------------------------------------------------------------------
*/

.dtd-chat-actions {
	position: absolute;

	right: 7px;
	bottom: 76px;

	width: 50px;

	display: flex;
	flex-direction: column;
	align-items: center;

	gap: 12px;

	pointer-events: none;
}


/*
|--------------------------------------------------------------------------
| Action Buttons
|--------------------------------------------------------------------------
*/

.dtd-chat-action {
	width: 50px !important;
	height: 50px !important;
	min-width: 50px !important;
	min-height: 50px !important;

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

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

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

	text-decoration: none !important;

	box-shadow:
		0 7px 18px rgba(0, 0, 0, 0.16),
		0 2px 5px rgba(0, 0, 0, 0.10);

	opacity: 0;

	transform:
		translateY(18px)
		scale(0.65);

	pointer-events: none;

	transition:
		opacity 0.25s ease,
		transform 0.28s cubic-bezier(.2,.8,.2,1);
}


/*
|--------------------------------------------------------------------------
| Action Icons
|--------------------------------------------------------------------------
*/

.dtd-chat-action svg {
	width: 25px !important;
	height: 25px !important;

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

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

	display: block !important;

	fill: #ffffff !important;
	color: #ffffff !important;
}


/*
|--------------------------------------------------------------------------
| Call
|--------------------------------------------------------------------------
*/

.dtd-chat-call {
	background: #00D084 !important;
	background-image: none !important;
}


/*
|--------------------------------------------------------------------------
| WhatsApp
|--------------------------------------------------------------------------
*/

.dtd-chat-whatsapp {
	background: #40DC70 !important;
	background-image: none !important;
}


/*
|--------------------------------------------------------------------------
| Email
|--------------------------------------------------------------------------
*/

.dtd-chat-email {
	background: #506BCB !important;
	background-image: none !important;
}


/*
|--------------------------------------------------------------------------
| Open Animation
|--------------------------------------------------------------------------
*/

.dtd-chat-widget.is-open .dtd-chat-action {
	opacity: 1;

	transform:
		translateY(0)
		scale(1);

	pointer-events: auto;
}


/*
|--------------------------------------------------------------------------
| Staggered Animation
|--------------------------------------------------------------------------
*/

.dtd-chat-widget.is-open .dtd-chat-action:nth-child(1) {
	transition-delay: 0.04s;
}

.dtd-chat-widget.is-open .dtd-chat-action:nth-child(2) {
	transition-delay: 0.08s;
}

.dtd-chat-widget.is-open .dtd-chat-action:nth-child(3) {
	transition-delay: 0.12s;
}


/*
|--------------------------------------------------------------------------
| Action Hover
|--------------------------------------------------------------------------
*/

.dtd-chat-action:hover {
	transform: scale(1.08) !important;
}

.dtd-chat-action:active {
	transform: scale(0.94) !important;
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

	.dtd-chat-widget {
		right: 18px;
		bottom: 18px;

		width: 60px;
		height: 60px;
	}

	.dtd-chat-toggle {
		width: 60px !important;
		height: 60px !important;

		min-width: 60px !important;
		min-height: 60px !important;
	}

	.dtd-chat-icon {
		width: 31px !important;
		height: 31px !important;

		min-width: 31px !important;
		min-height: 31px !important;
	}

	.dtd-chat-actions {
		right: 5px;
		bottom: 71px;

		gap: 11px;
	}

	.dtd-chat-action {
		width: 48px !important;
		height: 48px !important;

		min-width: 48px !important;
		min-height: 48px !important;
	}

	.dtd-chat-action svg {
		width: 24px !important;
		height: 24px !important;
	}
}


/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

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

	.dtd-chat-toggle,
	.dtd-chat-icon,
	.dtd-chat-action {
		transition: none !important;
	}
}