/* Fixed visible contact button (text-only + logo on top) */
.msc-contact-button {
	position: fixed !important;
	bottom: 24px !important;
	right: 24px !important;
	z-index: 2147483600 !important;
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 0 !important;
	background: transparent !important;
	color: #3296A4 !important;
	border: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent !important;
}

.msc-contact-button:hover { text-decoration: none !important; border: none !important; }
.msc-contact-button:focus { outline: none !important; box-shadow: none !important; }

/* Disable selection highlight within plugin scope */
.msc-contact-button::selection,
.msc-contact-button *::selection,
.msc-modal::selection,
.msc-modal *::selection { background: transparent !important; color: inherit !important; }
.msc-contact-button::-moz-selection,
.msc-contact-button *::-moz-selection,
.msc-modal::-moz-selection,
.msc-modal *::-moz-selection { background: transparent !important; color: inherit !important; }

/* Pulsate animation */
@keyframes msc-pulsate {
	0% { transform: scale(1); }
	70% { transform: scale(1.04); }
	100% { transform: scale(1); }
}

.msc-contact-button .msc-logo {
	display: block !important;
	width: clamp(80px, 18vw, 150px) !important;
	height: auto !important;
	object-fit: contain !important;
	margin: 0 auto !important;
	border: none !important;
	outline: none !important;
	animation: msc-pulsate 1.8s ease-in-out infinite !important;
	will-change: transform !important;
}

@media (prefers-reduced-motion: reduce) {
	.msc-contact-button .msc-logo { animation: none !important; }
	.msc-contact-button .msc-text { animation: none !important; }
}

/* 3D GTranslate-style button for "Connect with us" text only */
/* Border radius, font size, padding, and height will be dynamically set by JavaScript to match GTranslate exactly */
.msc-contact-button .msc-text { 
	display: inline-block !important;
	padding: 8px 12px !important; /* Default - will be overridden by JS to match GTranslate */
	/* 3D Background gradient matching GTranslate */
	background: linear-gradient(135deg, rgba(40, 143, 158, 1) 0%, rgba(50, 150, 164, 0.95) 50%, rgba(40, 143, 158, 1) 100%) !important;
	background-color: rgba(40, 143, 158, 1) !important;
	/* 3D Box shadows for depth - matching GTranslate style */
	box-shadow: 
		0 2px 8px rgba(0, 0, 0, 0.15),
		0 1px 3px rgba(0, 0, 0, 0.1),
		0 4px 12px rgba(40, 143, 158, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
	/* 3D Border radius matching GTranslate - will be overridden by JS with !important */
	border-radius: 10px; /* Default - will be overridden by JS to match GTranslate exactly */
	border: none !important;
	outline: none !important;
	color: #ffffff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; /* 3D text shadow */
	animation: msc-pulsate 1.8s ease-in-out infinite !important;
	will-change: transform !important;
	font-weight: 700 !important;
	font-size: 11px !important; /* Default - will be overridden by JS to match GTranslate exactly */
	letter-spacing: 0 !important;
	line-height: 1.2 !important; /* Default - will be overridden by JS to match GTranslate exactly */
	white-space: nowrap !important;
	/* Backdrop filter for glass effect */
	backdrop-filter: blur(10px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(10px) saturate(180%) !important;
	/* Smooth transitions */
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
	/* Box sizing */
	box-sizing: border-box !important;
	/* Perspective for 3D effect */
	transform-style: preserve-3d !important;
	height: auto !important; /* Will be set by JS to match GTranslate */
	min-height: auto !important; /* Will be set by JS to match GTranslate */
}

.msc-contact-button:hover .msc-text {
	/* Enhanced 3D effect on hover */
	transform: translateY(-2px) !important;
	box-shadow: 
		0 4px 12px rgba(0, 0, 0, 0.2),
		0 2px 6px rgba(0, 0, 0, 0.15),
		0 6px 20px rgba(40, 143, 158, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.3),
		inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
	background: linear-gradient(135deg, rgba(50, 150, 164, 1) 0%, rgba(40, 143, 158, 0.98) 50%, rgba(50, 150, 164, 1) 100%) !important;
}

.msc-contact-button:active .msc-text {
	transform: translateY(0) !important;
	box-shadow: 
		0 1px 3px rgba(0, 0, 0, 0.15),
		0 2px 8px rgba(40, 143, 158, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.15),
		inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

.msc-contact-button:focus .msc-text { 
	box-shadow: 
		0 2px 8px rgba(0, 0, 0, 0.15),
		0 1px 3px rgba(0, 0, 0, 0.1),
		0 4px 12px rgba(40, 143, 158, 0.2),
		0 0 0 3px rgba(40, 143, 158, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Modal root toggle */
#msc-modal-root.msc-open { display: block !important; }

/* Overlay and modal */
.msc-overlay {
	position: fixed !important;
	top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	background: rgba(0, 0, 0, 0.8) !important; /* match navbar modal */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 2147483601 !important;
}

.msc-modal {
	background: #fff !important;
	width: 90% !important;
	max-width: 600px !important; /* match navbar modal */
	max-height: 90vh !important;
	border-radius: 15px !important; /* match navbar modal */
	box-shadow: none !important;
	overflow-y: auto !important;
}

.msc-modal-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 25px 30px !important; /* match navbar modal */
	background: #3296A4 !important; /* navbar header blue */
	border-radius: 15px 15px 0 0 !important;
	border-bottom: 2px solid rgba(50, 150, 164, 0.2) !important;
	color: #fff !important;
}

/* Close button like navbar */
.msc-close {
	background: transparent !important;
	border: none !important;
	color: #ffffff !important; /* high contrast on blue header */
	font-size: 28px !important; /* larger for visibility */
	cursor: pointer !important;
	padding: 8px !important;
	line-height: 1 !important;
	border-radius: 0 !important;
	transition: all 0.3s !important;
	position: relative !important;
	z-index: 2 !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}

.msc-close:hover { color: #e6f6fa !important; transform: rotate(90deg) !important; }

.msc-modal-body { padding: 30px !important; }

.msc-form fieldset { border: none !important; margin: 0 0 12px 0 !important; padding: 0 !important; }
.msc-form label { display: block !important; margin-bottom: 6px !important; font-weight: 600 !important; }
/* Inputs focus like navbar */
.msc-form input[type="text"],
.msc-form input[type="email"],
.msc-form textarea {
	width: 100% !important;
	padding: 12px 15px !important;
	border: 1px solid #ddd !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-family: 'Poppins', sans-serif !important;
	transition: all 0.3s !important;
}

.msc-form input[type="text"]:focus,
.msc-form input[type="email"]:focus,
.msc-form textarea:focus {
	outline: none !important;
	border-color: #3296A4 !important;
	box-shadow: 0 0 0 3px rgba(50, 150, 164, 0.1) !important;
}

/* Inputs: remove default invalid red visuals */
.msc-form input:invalid,
.msc-form textarea:invalid { box-shadow: none !important; outline: none !important; border-color: #dcdcdc !important; }

/* Remove iOS tap highlight in modal */
.msc-modal *, .msc-form * { -webkit-tap-highlight-color: transparent !important; }

.msc-form textarea { min-height: 120px !important; resize: vertical !important; }
/* Submit button like navbar */
.msc-submit {
	width: 100% !important;
	padding: 14px 24px !important;
	border: 2px solid rgba(50, 150, 164, 0.3) !important;
	border-radius: 25px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: all 0.3s !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	background: #3296A4 !important;
	color: #ffffff !important;
	font-size: 15px !important;
	box-shadow: 0 3px 12px rgba(50, 150, 164, 0.3) !important;
}

.msc-submit:hover {
	background: #2a8593 !important;
	color: #ffffff !important;
	border-color: rgba(50, 150, 164, 0.3) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 18px rgba(50, 150, 164, 0.5) !important;
}

.msc-submit[disabled] { opacity: .6 !important; cursor: not-allowed !important; }
.msc-feedback { margin-top: 10px !important; font-weight: 600 !important; color: #00adef !important; }

/* Responsive adjustments */
@media (max-width: 1024px) {
	.msc-contact-button {
		bottom: 20px !important;
		right: 20px !important;
		gap: 6px !important;
		font-size: 15px !important;
	}
	.msc-contact-button .msc-logo {
		width: clamp(80px, 22vw, 150px) !important;
		height: auto !important;
	}
	.msc-contact-button .msc-text {
		font-size: 11px !important; /* Keep GTranslate size */
		padding: 8px 12px !important; /* Maintain 3D padding */
	}
}

@media (max-width: 768px) {
	.msc-contact-button {
		bottom: 16px !important;
		right: 16px !important;
		gap: 4px !important;
		font-size: 14px !important;
	}
	.msc-contact-button .msc-logo {
		width: clamp(72px, 26vw, 150px) !important;
		height: auto !important;
	}
	.msc-contact-button .msc-text {
		font-size: 11px !important; /* Keep GTranslate size */
		padding: 8px 12px !important; /* Maintain 3D padding */
	}
}

@media (max-width: 480px) {
	.msc-contact-button {
		bottom: calc(12px + env(safe-area-inset-bottom)) !important;
		right: 0 !important;
		margin-right: env(safe-area-inset-right) !important;
		gap: 4px !important;
		font-size: 14px !important;
	}
	.msc-contact-button .msc-logo {
		width: clamp(64px, 32vw, 150px) !important;
		height: auto !important;
	}
	.msc-contact-button .msc-text {
		font-size: 11px !important; /* Keep GTranslate size */
		padding: 8px 12px !important; /* Maintain 3D padding */
	}
	.msc-modal-header { position: relative !important; }
	.msc-close {
		position: absolute !important;
		right: 8px !important;
		top: 8px !important;
		padding: 10px !important; /* larger tap target */
	}
}

/* Mobile modal spacing like navbar */
@media (max-width: 767px) {
	.msc-modal { width: 95% !important; max-height: 95vh !important; }
	.msc-modal-header { padding: 20px !important; }
	.msc-modal-body { padding: 20px !important; }
	.msc-submit { padding: 15px 24px !important; font-size: 14px !important; }
}