/**
 * Synsbasen Connector - front-end styling.
 *
 * Styles for the auto-filled vehicle fields (hidden until a lookup attempt
 * has been made) and the lookup status/error/loading messages. Targets
 * Elementor's native id="form-field-{custom_id}" / class
 * "elementor-field-group-{custom_id}" output, so no CSS classes need to be
 * added to the form fields themselves (Elementor doesn't support that
 * natively).
 */

/* Vehicle result fields: hidden (including their label) until the visitor
   has attempted at least one lookup. The plugin's JS adds the
   "synsbasen-fields-revealed" class to the <form> once a lookup attempt
   (success or failure) has completed. */
.elementor-field-group-brand,
.elementor-field-group-model,
.elementor-field-group-variant,
.elementor-field-group-model_year,
.elementor-field-group-fuel_type,
.elementor-field-group-mileage,
.elementor-field-group-mileage + .e-form__buttons {
	display: none !important;
}

.synsbasen-fields-revealed .elementor-field-group-brand,
.synsbasen-fields-revealed .elementor-field-group-model,
.synsbasen-fields-revealed .elementor-field-group-variant,
.synsbasen-fields-revealed .elementor-field-group-model_year,
.synsbasen-fields-revealed .elementor-field-group-fuel_type,
.synsbasen-fields-revealed .elementor-field-group-mileage,
.synsbasen-fields-revealed .elementor-field-group-mileage + .e-form__buttons {
	display: block !important;
}

/* When a lookup succeeded, the fields are locked (readonly) and styled to
   look confirmed/non-editable. The plugin's JS toggles the "readonly"
   attribute directly, so we style based on that attribute rather than a
   class - this way the visual state always matches the actual editability. */
#form-field-brand[readonly],
#form-field-model[readonly],
#form-field-variant[readonly],
#form-field-model_year[readonly],
#form-field-fuel_type[readonly],
#form-field-mileage[readonly] {
	background-color: #f2f2f2 !important;
	color: #444 !important;
	cursor: default !important;
	border-color: #ddd !important;
}

#form-field-brand[readonly]:focus,
#form-field-model[readonly]:focus,
#form-field-variant[readonly]:focus,
#form-field-model_year[readonly]:focus,
#form-field-fuel_type[readonly]:focus,
#form-field-mileage[readonly]:focus {
	outline: none;
	box-shadow: none;
}

/* Lookup button */
#synsbasen-lookup-btn {
	cursor: pointer;
}

#synsbasen-lookup-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Status message container */
#synsbasen-lookup-status {
	display: block;
	margin-top: 8px;
	font-size: 0.9em;
	min-height: 1.2em;
}

#synsbasen-lookup-status.synsbasen-status-loading {
	color: #555;
}

#synsbasen-lookup-status.synsbasen-status-error {
	color: #c0392b;
	font-weight: 600;
}

#synsbasen-lookup-status.synsbasen-status-success {
	color: #27ae60;
	font-weight: 600;
}