#chat-widget-button {
	position: fixed;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	background: rgb(255, 255, 255);
	border: 0px !important;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999999999;
	transition: 0.2s ease-in-out;
	overflow: hidden;
	padding: 1px;
	bottom: 20px;
	right: 20px;
}

@media screen and (max-width:768px) {

	#chat-widget-button {
		width: 90px;
		height: 90px;
	}

	.floating-buttons {		
		bottom: 110px;
		right: 20px;
	}

}

#chat-widget-button img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: 50%;
}

.gradient-border {
	--border-width: 1px;
}

.gradient-border::after {
	position: absolute;
	content: "";
	top: calc(-1 * var(--border-width));
	left: calc(-1 * var(--border-width));
	z-index: -1;
	width: calc(100% + var(--border-width) * 2);
	height: calc(100% + var(--border-width) * 2);
	background: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0);
	background-size: 300% 300%;
	background-position: 0 50%;
	border-radius: 10px;
	animation: moveGradient 4s alternate infinite;
}

@keyframes moveGradient {
	50% {
		background-position: 100% 50%;
	}
}

/* Modal Overlay */
#callbackModal.modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
}

/* Modal Content Box (Wrapper) */
#modalContentWrapper.modal-content-box {
	background: #fff;
	border-radius: 15px;
	width: 90%;
	/* REDUCED SIZE: Changed from 900px to 750px for a tighter look */
	max-width: 750px;
	position: relative;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	padding: 0;
	overflow: hidden;
}

/* Flex Container */
#callbackModal .modal-flex-container {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

/* Left Column: Form */
#callbackModal .modal-col-left {
	/* EQUAL WIDTH: Changed flex to 1 */
	flex: 1;
	padding: 30px;
	/* Reduced padding slightly */
	background: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Right Column: Image */
#callbackModal .modal-col-right {
	/* EQUAL WIDTH: Changed flex to 1 */
	flex: 1;
	background-color: var(--primary-color, #f4f4f4);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	/* padding: 20px; */
}

/* The Masked Image Logic */
#callbackModal .masked-img {
	width: 100%;
	height: auto;
	object-fit: cover;

	/* -webkit-mask-image: url('../images/feature-thumb-shape3-1.png');
	mask-image: url('../images/feature-thumb-shape3-1.png'); */

	-webkit-mask-size: contain;
	mask-size: contain;

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	-webkit-mask-position: center;
	mask-position: center;
}

/* Close Button */
#callbackModal .close-modal {
	position: absolute;
	top: 10px;
	right: 10px;
	/* Moved slightly tighter */
	font-size: 24px;
	cursor: pointer;
	color: #333;
	z-index: 10;
	background: rgba(255, 255, 255, 0.9);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	line-height: 30px;
	text-align: center;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Form Styles */
#callbackModal h3 {
	font-size: 22px;
	/* Slightly smaller font for compact feel */
	margin-bottom: 20px;
	text-align: center;
}

#callbackModal .form-group {
	margin-bottom: 15px;
	/* Reduced spacing */
	text-align: left;
}

#callbackModal .form-group label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	color: #333;
	font-size: 14px;
	/* Smaller label text */
}

#callbackModal .form-group input {
	width: 100%;
	padding: 10px;
	/* Reduced padding */
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 14px;
	/* Smaller input text */
}

/* Input Validation Styles */
#callbackModal .form-control.is-invalid {
	border-color: #dc3545;
}

#callbackModal .invalid-feedback {
	display: none;
	color: #dc3545;
	font-size: 0.75em;
	/* Smaller error text */
	margin-top: 0.2rem;
}

/* ITI Library Fixes */
.iti {
	width: 100%;
}

.iti__country-list {
	z-index: 10001 !important;
}

/* Submit Button */
#callbackModal .btn-submit {
	width: 100%;
	background: #000;
	color: #fff;
	padding: 12px;
	/* Reduced padding */
	border: none;
	border-radius: 8px;
	font-size: 16px;
	cursor: pointer;
	transition: 0.3s;
	margin-top: 15px;
}

#callbackModal .btn-submit:disabled {
	background: #555;
	cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
	#callbackModal .modal-flex-container {
		flex-direction: column-reverse;
	}

	#callbackModal .modal-col-right {
		display: none;
	}

	#callbackModal .modal-col-left {
		padding: 25px;
	}
}