/* Shared form component: .gems-form
 *
 * Everything a GEMSai form needs - field labels, inline validation messages,
 * the radio-tile pickers, the agreement line and the primary button. Used by
 * download.html; request_estimate.html and contact.html can adopt it by
 * adding the class to their <form> and linking this sheet.
 *
 * Load this BEFORE the page's own stylesheet so page rules can override it.
 *
 * Palette: #4b81e8 accent, #d6deeb borders, #3f4652 text, #dc3545 errors.
 */

.gems-form {
	border: 1px solid #e3e9f3;
	border-radius: 12px;
	box-shadow: 0 6px 18px -16px rgba(0, 0, 0, 0.5);
}

.gems-form .form-intro {
	margin-bottom: 1.1rem;
	color: #4d4d4d;
}

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

@media (min-width: 768px) {
	.gems-form .form-group {
		margin-bottom: 0.85rem;
	}
}

/* Adds a break before a new question, where the next block would otherwise
   read as one more field. */
.gems-form .form-group-gap {
	margin-bottom: 1.6rem;
}

/* ------------------------------------------------------------------ fields */

.gems-form .form-control {
	height: 44px;
	padding: 0.45rem 0.75rem;
	border-radius: 8px;
	border-color: #d6deeb;
}

.gems-form textarea.form-control {
	height: auto;
}

/* Declared after .form-control: both are two classes, so source order is what
   makes the red border win. */
.gems-form .field-error {
	border-color: #dc3545;
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* intl-tel-input wraps the phone input in an inline-block that sizes to its
   own content; stretch it to match the fields beside it. */
.gems-form .iti {
	width: 100%;
}

.gems-form .field-label,
.gems-form .section-label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: #3f4652;
}

.gems-form .field-label {
	margin-bottom: 0.25rem;
}

.gems-form .section-label {
	margin-bottom: 0.4rem;
}

.gems-form .req {
	color: #dc3545;
}

.gems-form .optional-note {
	font-weight: 400;
	color: #8a93a3;
}

.gems-form .field-hint {
	font-size: 12px;
	color: #6b7280;
	margin-top: 4px;
}

/* Hidden by default; scripts must set display to 'block', not '', to show it. */
.gems-form .field-error-msg {
	display: none;
	color: #dc3545;
	font-size: 12px;
	margin-top: 4px;
}

/* --------------------------------------------------------- lookup shortcut */

/* Hint and button share the line under the field, so the field itself keeps
   the full column width. */
.gems-form .fetch-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 5px;
}

.gems-form .fetch-row .field-hint {
	margin-top: 0;
}

/* Full-width row: keep the offer together on the left instead of pushing the
   button to the far edge. */
.gems-form .fetch-row-start {
	justify-content: flex-start;
}

.gems-form .fetch-details-btn {
	flex: 0 0 auto;
	height: 30px;
	padding: 0 0.7rem;
	border: 1px solid #4b81e8;
	border-radius: 6px;
	background: #fff;
	color: #4b81e8;
	font-size: 0.78rem;
	white-space: nowrap;
	cursor: pointer;
}

.gems-form .fetch-details-btn:hover:not(:disabled) {
	background: #eef3fd;
}

.gems-form .fetch-details-btn:disabled {
	opacity: 0.55;
	cursor: default;
}

/* ----------------------------------------------------------- radio pickers */

/* The whole tile is the click target, so the radio never has to be hit.
   One per line on a phone; give the grid a column count from tablet up with
   a .option-grid-N modifier. */
.gems-form .option-grid {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.gems-form .option-grid-2 { grid-template-columns: repeat(2, 1fr); }
	.gems-form .option-grid-3 { grid-template-columns: repeat(3, 1fr); }
	.gems-form .option-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.gems-form .option-tile {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	padding: 0.6rem 0.7rem;
	border: 1px solid #d6deeb;
	border-radius: 8px;
	background: #fff;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.3;
	color: #3f4652;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}

.gems-form .option-tile:hover {
	border-color: #4b81e8;
	background: #f7faff;
}

.gems-form .option-tile input {
	margin-top: 0.2rem;
	flex: 0 0 auto;
}

.gems-form .option-tile.is-selected {
	border-color: #4b81e8;
	background: #f2f7ff;
	box-shadow: inset 0 0 0 1px #4b81e8;
}

.gems-form .option-badge {
	display: block;
	margin-top: 0.15rem;
	font-size: 11px;
	color: #4b81e8;
}

/* ------------------------------------------------------- consent and submit */

/* The label must cover only the wording: a link inside it would both navigate
   and toggle the box, losing whatever has been filled in. */
.gems-form .agree-line {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0.25rem 0 0;
	font-size: 0.9rem;
	color: #3f4652;
}

.gems-form .agree-line input {
	margin-top: 0.25rem;
	flex: 0 0 auto;
}

.gems-form .agree-line label {
	display: inline;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.gems-form .form-submit {
	width: 100%;
	height: 50px;
	padding: 0.4rem 0.6rem;
	border: 1px solid #4b81e8;
	border-radius: 8px;
	background: #4b81e8;
	color: #fff;
	font-size: 1rem;
	font-weight: 400;
	cursor: pointer;
}

.gems-form .form-submit:hover:not(:disabled) {
	box-shadow: 0 5px 20px -7px rgba(0, 0, 0, 0.9);
}

.gems-form .form-submit:disabled {
	opacity: 0.7;
	cursor: default;
}

.gems-form .submit-note {
	margin: 0.55rem 0 0;
	font-size: 12px;
	color: #6b7280;
	text-align: center;
}

/* Honeypot: stays empty, bots fill it. */
.gems-form .hp-field {
	position: absolute;
	left: -5000px;
	top: -5000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}