/* free-quote.css */

/* Outer container for form positioning */
.outer-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
}

@media (max-width: 768px) {
	.outer-container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Intro box styling to match form-wrapper width and center it */
.intro-box {
	width: 100%;
	max-width: clamp(300px, 30.83vw, 592px); /* 592px / 1920px * 100vw = 30.83vw */
	margin-bottom: 40px;
	padding: 20px;
	border: 6px double #0E86D4;
	border-radius: 10px;
	/* background-color: rgba(221, 241, 253, 0.6); */
	background: linear-gradient(90deg, rgba(221, 241, 253, 0.9) 0%, rgba(255, 255, 255, 0.3) 100%);
	box-shadow: var(--box-shadow);
	font-size: var(--r20px); /* responsive scaling for 20px */
	font-style: italic;
	line-height: var(--r20px-line-height); /* Line-height based on a 1.6 ratio */
	text-align: center;
}

@media (orientation: landscape) {
	.intro-box {
		font-size: var(--r20px-landscape); /* Reduce scaling factor for landscape mode */
		line-height: var(--r20px-line-height-landscape); /* Adjust line-height for landscape mode proportionally */
	}
}

.q-button {
	background: var(--c-button-bg);
	border: 0;
	border-radius: 50px; /* Pill-shaped button */
	color: #FFF; /* Ensure text color is always white */
	cursor: pointer;
	display: inline-block;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
	font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem); /* 20px */
	font-weight: 600;
	font-style: normal;
	letter-spacing: 1.5px;
	outline: 0;
	padding: 10px 20px;
	position: relative;
	text-align: center;
	text-decoration: none;
	transition: all .3s;
	user-select: none;
	touch-action: manipulation;
	backdrop-filter: blur(10px); /* Adds a blur effect for glassy appearance */
}

/* Override global link styles for service buttons */
.q-button:link,
.q-button:visited,
.q-button:hover,
.q-button:active {
	text-decoration: none; /* Ensures no underline */
	color: #FFF; /* Ensure the text color is always white */
}

.q-button:hover {
	background: var(--c-button-hover-bg);
	text-shadow: 2px 2px 2px rgba(0, 48, 96, 0.8);
	border: var(--c-button-border-bg);
}

.q-button:active {
	background: rgba(0, 32, 64, 0.3); /* Adjusted background for active state */
}

/*
@media (min-width: 768px) {
	.q-button {
		padding: 16px 48px;
	}
}
*/

/* FORM DESIGN */
.form-wrapper {
	background: var(--form-bg-color);
	padding: 20px;
	border: 2px solid #FFF;
	border-radius: 10px;
	box-shadow: var(--box-shadow);
	width: 100%;
	max-width: clamp(320px, 31.25vw, 600px); /* 600px / 1920px * 100vw = 31.25vw */
}

.header-bg {
	background: var(--form-header-bg-color);
	border-radius: 5px 5px 0 0; /* Remove bottom border-radius */
	margin-bottom: 0; /* Remove bottom margin */
	padding: 10px;
	text-align: center;
	border-top: 1px solid hsla(0, 0%, 100%, 0.9);
	border-left: 1px solid hsla(0, 0%, 100%, 0.9);
	border-right: 1px solid hsla(0, 0%, 100%, 0.9);
	border-bottom: none; /* Remove bottom border */
}

.form-title {
	color: #FFF;
	font-size: 1.875rem;
	font-weight: bold;
	margin: 0;
	text-shadow: 0px 0px var(--form-title-shadow), 1px -1px 0 var(--form-title-shadow), -1px 1px 0 var(--form-title-shadow), 1px 1px 0 var(--form-title-shadow);
}

.lock-bg {
	color: #FFF;
	background: #003060;
	border: 1px solid hsla(0, 0%, 100%, 0.8);
	font-size: 0.9em;
	font-weight: normal;
	border-radius: 0 0 5px 5px; /* Remove top border-radius */
	padding: 10px 0;
	text-align: center;
	margin-top: 0; /* Remove top margin */
	margin-bottom: 30px;
}

.lock-icon:before {
	content: url("../assets/images/lock.png");
}

.field-group {
	margin-bottom: 20px;
}

.form {
	width: 100%;
	max-width: 100%; /* Ensure the form doesn't exceed its container */
	box-sizing: border-box; /* Include padding and border in the element's total width and height */
	padding: 10px; /* Form padding */
}

.form select,
.form input[type="number"],
.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form textarea {
	width: 100%; /* Set the form field width to 100% */
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid hsla(202, 89%, 63%, 0.8);
	border-radius: 5px;
	color: #0000EE;
	font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem); /* 20px */
	box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

@media (orientation: landscape) {
	.form select,
	.form input[type="number"],
	.form input[type="text"],
	.form input[type="tel"],
	.form input[type="email"],
	.form textarea {
		font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem); /* Adjusted for landscape */
	}
}

.form label {
	display: block;
	margin-top: 10px;
	font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem); /* 20px */
	font-weight: 600;
	color: #003060;
}

@media (orientation: landscape) {
	.form label {
		font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem); /* Adjusted for landscape */
	}
}

.services-requested label {
	font-weight: 500; /* Specific font weight for services-requested labels */
}

input[type="checkbox"] {
	border: 1px solid hsla(202, 89%, 63%, 0.8);
	border-radius: 5px;
	color: #0000EE;
}

input::placeholder,
select::placeholder {
	color: #666; /* Light gray color for the placeholder */
}

input:focus::placeholder,
select:focus::placeholder {
	color: transparent; /* Hide the placeholder when the input is focused */
}

/* Styles for the required field indicator */
.required {
	color: #cc0000;
}

.services-container {
	background-color: rgba(255, 255, 255, 0.3);
	border: 1px solid #0288d1;
	padding: 10px;
	border-radius: 5px;
}

.services-requested {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.services-requested label {
	display: flex;
	align-items: center;
	font-size: clamp(0.875rem, 0.9vw + 0.625rem, 1.125rem); /* 18px */
}

@media (orientation: landscape) {
	.services-requested label {
		font-size: clamp(0.875rem, 1.4vw + 0.375rem, 1.125rem); /* Adjusted for landscape */
	}
}

.services-requested input[type="checkbox"] {
	margin-right: 10px;
}

/* Styles for the form submit button */
.form button {
	display: inline-block;
	width: 100%;
	padding: 10px;
	border: 1px solid hsla(0, 0%, 100%, 0.8);
	border-radius: 5px;
	background-color: #d73925;
	color: #FFF;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
	font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem); /* 20px */
	font-weight: 600;
	font-style: normal;
	letter-spacing: 1.5px;
	text-shadow: 2px 2px 3px #bb0000;
	cursor: pointer;
	transition: all .3s;
	user-select: none;
	touch-action: manipulation;
	box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

@media (orientation: landscape) {
	.form button {
		font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem); /* Adjusted for landscape */
	}
}

.form button:hover,
.form button:focus,
.form button:active {
	background-color: #dd4b39;
	border-color: #bb0000;
}

/* Style for inline form field error messages */
.error {
	margin-top: -15px;
	margin-bottom: 10px;
	vertical-align: super;
	font-size: smaller;
	font-weight: bold;
	color: red;
	text-shadow: 1px 1px 0 #fff;
}

/* Form Submission Spinner Styles */
#loading-spinner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}

.spinner-overlay {
	text-align: center;
	color: #fff;
}

.spinner {
	border: 8px solid #f3f3f3;
	border-top: 8px solid #009dfc;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 1s linear infinite;
	margin: 0 auto 20px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}