/* Modal Overlay */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(5px);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999999999999;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.modal-overlay.active {
	opacity: 1;
	visibility: visible;
}

.modal {
	background: white;
	border-radius: 16px;
	padding: 32px;
	width: 536px;
	position: relative;
	transform: scale(0.9);
	transition: transform 0.3s;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	pointer-events: all;
	overscroll-behavior: contain;
}

body.modal-open {
	overflow: hidden !important;
	position: fixed !important;
	width: 100% !important;
}

.modal-overlay.active .modal {
	transform: scale(1);
}

/* Close Button */
.modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: #9ca3af;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.3s;
}

.modal-close:hover {
	background: #f3f4f6;
	color: #374151;
}

/* Modal Headers */
.modal-title {
	font-size: 48px;
	line-height: 46px;
	font-weight: 500;
	color: #030309;
	margin-bottom: 12px;
	font-family: DegularDisplay-Medium, sans-serif;
}

.modal-subtitle {
	color: #030309;
	font-size: 18px;
	line-height: 26px;
	font-family: Inter, sans-serif;
}

/* Form Styles */
form#contactForm, form#demoForm {
	padding-top: 24px;
}

.form-group {
	margin-bottom: 16px;
	position: relative;
}

.form-group.last {
	margin-bottom: 0;
}

.input-field {
	width: 100%;
	padding: 17px 16px;
	border: 1px solid #babbd7;
	border-radius: 10px;
	font-size: 15px;
	line-height: 16px;
	background-color: #f9f9f9;
	font-family: Inter, sans-serif !important;
	color: #161616;
	transition: border-color 0.3s;
	box-sizing: border-box;
}

.input-field::placeholder {
	color: #636363;
}

.contact-form .input-field:focus {
	outline: none;
	border-color: #6b8dff;
	padding: 17px 16px;
}

.select-field {
	width: 100%;
	padding: 10px;
	border: 1px solid #babbd7;
	border-radius: 10px;
	font-size: 15px;
	line-height: 16px;
	background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcgMTBMMTIgMTVMMTcgMTAiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+") #f9f9f9 no-repeat !important;
	background-position: right 12px top 50%, 0 0 !important;
	background-size: 21px auto, 100% !important;
	cursor: pointer;
	transition: border-color 0.3s;
	color: #161616;
	font-family: Inter, sans-serif;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	height: 52px;
}

.contact-form .select-field:focus {
	outline: none;
	border-color: #6b8dff;
}

.select-field:invalid,
option[value=""] {
	color: #636363;
}

/* Phone Input Group */
.phone-input {
	display: flex;
}

.select-phone-code {
	width: 80px;
	flex-shrink: 0;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-right: 1px solid transparent;
}

.input-phone {
	flex: 1;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	border-left: 1px solid transparent;
}

/* Input hover effects */
.form-group:hover .input-field,
.form-group:hover .form-select {
	border-color: #4b62ff;
}

.form-group:hover .select-phone-code {
	border-right: 1px solid transparent;
}

.form-group:hover .input-phone {
	border-left: 1px solid transparent;
}

.form-group.error {
	margin-bottom: 10px;
}

.contact-form input.error,
.contact-form select.error,
.contact-form .phone-input.error {
	border: 1px solid #e8292b;
	color: #e8292b;
}

.contact-form img.error-icon {
	top: 15px;
}

.contact-form input.error.input-field.input-phone {
	border-left: 1px solid transparent;
}

.contact-form select.error.select-field.select-phone-code {
	border-right: 1px solid transparent;
}

.contact-form .error-container {
	padding-top: 0px;
}

/* Disclaimer */
.form-group-disclaimer {
	display: flex;
	gap: 40px;
	padding-top: 24px;
}

.disclaimer {
	font-size: 12px;
	color: #6b7280;
	line-height: 22px;
	font-family: Inter, sans-serif;
	width: 316px;
}

/* Submit Button */
.submit-btn {
	background: #4b62ff;
	color: #ffffff;
	padding: 12px 43px;
	border: none;
	border-radius: 50px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s;
	font-family: InterMedium, sans-serif;
}

.submit-btn:hover {
	background: #3635fe;
	box-shadow: 0px 4px 16px rgba(54, 53, 254, 0.5);
}

.submit-btn:disabled {
	background: #9ca3af;
	cursor: not-allowed;
}

/* Success State */
.success-content {
	text-align: center;
	display: none;
}

.success-content.active {
	display: block;
	padding: 32px 0px;
}

.success-title {
	font-size: 48px;
	line-height: 46px;
	color: #030309;
	margin-bottom: 12px;
	font-family: DegularDisplay-Medium, sans-serif;
}

.success-message {
	color: #030309;
	font-size: 18px;
	margin-bottom: 32px;
	line-height: 22px;
	font-family: Inter, sans-serif;
}

.success-btn {
	background: #4b62ff;
	color: #ffffff;
	padding: 12px 24px;
	border: none;
	border-radius: 50px;
	font-size: 16px;
	line-height: 24px;
	cursor: pointer;
	transition: all 0.3s;
	font-family: InterMedium, sans-serif;
}

.success-btn:hover {
	background: #3635fe;
	box-shadow: 0px 4px 16px rgba(54, 53, 254, 0.5);
}

.success-btn.docs-btn {
	background: #FFFFFF;
	color: #4b62ff;
	border: 1px solid #4b62ff;
}

.form-group-actions {
	display: flex;
	gap: 24px;
	justify-content: center;
	align-items: center;
}

/* Responsive */
@media (max-width: 768px) {
	.modal {
		margin: 1rem;
	}

	.modal-title {
		font-size: 40px;
		line-height: 38px;
	}

	.modal-subtitle {
		font-size: 16px;
		line-height: 24px;
	}

	.phone-group {
		flex-direction: column;
		gap: 1rem;
	}

	.country-code {
		width: 100%;
		border-radius: 10px;
		border-right: 1px solid #babbd7;
	}

	.phone-input {
		border-radius: 10px;
		border-left: 1px solid #babbd7;
	}
}

@media (max-width: 600px) {
	.modal {
		width: 80%;
	}

	.modal-title {
		font-size: 36px;
		line-height: 32px;
	}

	.modal-subtitle {
		font-size: 14px;
		line-height: 20px;
	}

	.form-group-disclaimer {
		flex-direction: column;
        gap: 24px;
	}

    .disclaimer{
        width: 100%;
    }

    button#contactSubmitBtn, button#demoSubmitBtn {
        width: 140px;
        padding: 12px 29px;
        font-size: 14px;
        line-height: 20px;
    }
}