/**
 * The contact form.
 *
 * Almost everything here is inherited from the calculators' stylesheet — the
 * dark panel, the fields, the button. What is left is the handful of things a
 * form needs and a calculator does not: a hidden honeypot, an error under a
 * field, and a wide box for the long answer.
 */

/* The honeypot. Off-screen rather than display:none, because some form-filling
   software skips anything display:none and would walk straight past it. */
.dwe-req__hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* The long answer takes the full width of the row rather than a third of it. */
.dwe-tool__f--wide {
	flex: 1 1 100%;
	width: 100%;
}

/*
 * The long answer, dragged back off the theme.
 *
 * Sydney styles every textarea on the site its own way — white background,
 * grey text, a red border — and on a dark page that reads as a broken field
 * rather than a designed one. The single-line inputs are already dark because
 * the calculators' stylesheet claims them; textareas it never needed.
 *
 * The values below are the computed values of the inputs beside it, so the
 * two match exactly rather than approximately. !important because the theme's
 * own rules are what is being overruled, and losing this race leaves a white
 * box in the middle of the form.
 */
.dwe-req textarea,
.dwe-req .dwe-tool__f textarea {
	width: 100%;
	min-height: 120px;
	resize: vertical;
	font: inherit;
	font-size: 16px !important;
	line-height: 1.5;
	padding: 11px 13px !important;
	color: #fff !important;
	background: rgba(255, 255, 255, .043) !important;
	border: 1px solid rgba(255, 255, 255, .15) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

.dwe-req textarea:focus {
	outline: none;
	border-color: rgba(255, 255, 255, .42) !important;
}

.dwe-req textarea::placeholder {
	color: rgba(255, 255, 255, .38);
}

/* What went wrong, under the field it went wrong in. */
.dwe-req__err {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.4;
	color: #ff9f85;
}

.dwe-tool__f.is-wrong input,
.dwe-tool__f.is-wrong select,
.dwe-tool__f.is-wrong textarea {
	border-color: #ff9f85;
}

/* The thank-you, in the space the form was in. */
.dwe-req__done {
	padding: 8px 0 4px;
}

.dwe-req__done .dwe-tool__h {
	margin: 10px 0 8px;
}

/* A sent form should not leave the button looking pressable. */
.dwe-req button[disabled] {
	opacity: .6;
	cursor: default;
}

@media (max-width: 720px) {
	.dwe-req textarea { min-height: 140px; }
}

/* A set of tick boxes — the days and times a consultation could be. */
.dwe-req__boxes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-top: 8px;
}

.dwe-req__box {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.2;
}

.dwe-req__box input { margin: 0; }

.dwe-req__box:hover { border-color: rgba(255, 255, 255, .4); }

.dwe-req__box:has(input:checked) {
	border-color: currentColor;
	background: rgba(255, 255, 255, .07);
}