/*
 * Contact form widget — the parts that are not settings.
 *
 * These rules used to be printed inside a <style> block in the widget's
 * render(), mixed in with the configurable values. Two problems with that, and
 * the second is the serious one:
 *
 *   1. The block was emitted once per widget instance, so a page with the form
 *      in two places carried two copies of identical CSS.
 *   2. Nothing in it was scoped to the instance — every rule was written against
 *      the bare `.urartu-contact-form` class. Two forms on one page with
 *      different padding, colours or button widths both got whichever settings
 *      belonged to the widget that rendered last.
 *
 * Everything configurable now goes through Elementor's own `selectors` with
 * {{WRAPPER}}, which scopes to the instance and makes the control responsive
 * without any of this being involved. What is left here is structure: it is the
 * same for every instance, so a stylesheet is the right place for it.
 */

.urartu-contact-form .form-group p {
	display: flex;
	gap: 20px;
}

.urartu-contact-form .form-group p label {
	flex: 1 1 0;
	min-width: 0;
}

.urartu-contact-form input.wpcf7-form-control,
.urartu-contact-form textarea {
	width: 100%;
}

.urartu-contact-form textarea {
	height: 150px;
	max-height: 150px;
}

.urartu-contact-form .form-checkbox label {
	display: flex;
	align-items: center;
}

.urartu-contact-form span.wpcf7-list-item-label {
	display: inline;
	margin-inline-start: 10px;
}

/* The theme draws its own marker before list items; a consent checkbox already
   has one. */
.urartu-contact-form .wpcf7-list-item-label::before {
	display: none;
}

.urartu-contact-form .wpcf7-form .contact-form-submit p {
	display: flex;
	flex-direction: column;
}

.urartu-contact-form .wpcf7-form input[type="submit"] {
	margin-block: 1.5em .5em;
	border-radius: var(--u-btn-radius, 5px);
	cursor: pointer;
}

/* Two fields side by side is a desktop layout. On a phone they are two fields
   of about 140px, which is not enough for an email address. */
@media (max-width: 600px) {

	.urartu-contact-form .form-group p {
		flex-direction: column;
		gap: 0;
	}
}