/**
 * Rasa June homepage contact form — WPForms #1993.
 *
 * Loaded on both the public site and in Elementor so the editor preview
 * matches the published form. Everything is scoped to this one form.
 */

#wpforms-form-1993 {
	width: 100%;
	max-width: 560px;
}

#wpforms-form-1993 .wpforms-field {
	padding: 0 0 14px !important;
}

#wpforms-form-1993 input[type="text"],
#wpforms-form-1993 input[type="email"],
#wpforms-form-1993 textarea {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(29, 29, 29, 0.42) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #1d1d1d !important;
	font-family: Inter, Arial, sans-serif;
	font-size: 16px !important;
	font-weight: 400;
	line-height: 1.5 !important;
	transition: border-color 180ms ease;
}

#wpforms-form-1993 input[type="text"],
#wpforms-form-1993 input[type="email"] {
	height: 46px !important;
	padding: 9px 0 !important;
}

#wpforms-form-1993 textarea {
	height: 46px !important;
	min-height: 46px !important;
	padding: 9px 0 !important;
	resize: vertical;
}

#wpforms-form-1993 input::placeholder,
#wpforms-form-1993 textarea::placeholder {
	color: rgba(29, 29, 29, 0.52) !important;
	opacity: 1;
}

#wpforms-form-1993 input[type="text"]:focus,
#wpforms-form-1993 input[type="email"]:focus,
#wpforms-form-1993 textarea:focus {
	border-bottom-color: #1d1d1d !important;
	box-shadow: none !important;
	outline: none !important;
}

#wpforms-form-1993 .wpforms-submit-container {
	margin-top: 6px !important;
	padding: 0 !important;
}

body #wpforms-form-1993 button.wpforms-submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 190px;
	height: 52px !important;
	padding: 0 30px !important;
	border: 1px solid #1d1d1d !important;
	border-radius: 999px !important;
	background: #dffd95 !important;
	box-shadow: none !important;
	color: #1d1d1d !important;
	font-family: Inter, Arial, sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 0.01em;
	transition: background-color 180ms ease, transform 180ms ease;
}

body #wpforms-form-1993 button.wpforms-submit:hover {
	background: #dffd95 !important;
	color: #777777 !important;
	transform: translateY(-1px);
}

body #wpforms-form-1993 button.wpforms-submit:focus-visible {
	outline: 2px solid #1d1d1d !important;
	outline-offset: 3px;
}

@media (max-width: 767px) {
	#wpforms-form-1993 .wpforms-field {
		padding-bottom: 12px !important;
	}

	body #wpforms-form-1993 button.wpforms-submit {
		width: 100% !important;
	}
}


/* ---------------------------------------------------------------------------
 * Om meg contact row - tablet (768px - 1024px)
 *
 * The form column is a fixed 500px while the text column next to it asks for
 * 56%, so between 768px and 1024px the two together are wider than the row
 * and the page scrolled sideways. Let the row wrap there and give each column
 * the full width, which is what the phone layout already does. Desktop
 * (1025px and up) and phone (767px and down) are untouched.
 * ------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
	body .elementor-element-2e24d71 > .e-con-inner {
		flex-wrap: wrap !important;
	}

	body .elementor-element-2e24d71 > .e-con-inner > .e-con {
		--width: 100%;
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}

	body .elementor-element-a324a85 {
		max-width: 500px !important;
	}
}

/* ---------------------------------------------------------------------------
 * Case study contact rows - tablet (768px - 1024px)
 *
 * Same problem the Om meg page had: the form column is a fixed 500px next to
 * a 56% text column, so between 768px and 1024px the pair is wider than the
 * row and the page scrolled sideways by 63px. Let the row wrap there and give
 * each column the full width, exactly as the phone layout already does. The
 * form keeps its 500px cap so it never stretches wider than designed.
 *
 * Rows: Bauhaus Urban Studio, Kiga Studio, Hverdagsplan, Apiventor, ZuriLit.
 * Some of these rows are boxed containers and some are full-width ones, so
 * both the container itself and its inner wrapper are covered.
 * Desktop (1025px+) and phone (767px-) are untouched.
 * ------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
	body #content .elementor-element-d669810,
	body #content .elementor-element-d669810 > .e-con-inner,
	body #content .elementor-element-d103ab7,
	body #content .elementor-element-d103ab7 > .e-con-inner,
	body #content .elementor-element-a0c3f2b,
	body #content .elementor-element-a0c3f2b > .e-con-inner,
	body #content .elementor-element-7dd1874,
	body #content .elementor-element-7dd1874 > .e-con-inner,
	body #content .elementor-element-3eecbcc,
	body #content .elementor-element-3eecbcc > .e-con-inner {
		flex-wrap: wrap !important;
	}

	body #content .elementor-element-d669810 > .e-con,
	body #content .elementor-element-d669810 > .e-con-inner > .e-con,
	body #content .elementor-element-d103ab7 > .e-con,
	body #content .elementor-element-d103ab7 > .e-con-inner > .e-con,
	body #content .elementor-element-a0c3f2b > .e-con,
	body #content .elementor-element-a0c3f2b > .e-con-inner > .e-con,
	body #content .elementor-element-7dd1874 > .e-con,
	body #content .elementor-element-7dd1874 > .e-con-inner > .e-con,
	body #content .elementor-element-3eecbcc > .e-con,
	body #content .elementor-element-3eecbcc > .e-con-inner > .e-con {
		--width: 100%;
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}

	body #content .elementor-element-58f9af3,
	body #content .elementor-element-f576df3,
	body #content .elementor-element-c2fc1ed,
	body #content .elementor-element-a88a28d,
	body #content .elementor-element-836e85a {
		max-width: 500px !important;
	}
}