/* ============================================================
   Contact Form 7 forms
   Matches the checkout form styling (assets/css/woocommerce/checkout.css)
   so every CF7 form on the site reads as the same component:
   blue labels above white, blue-bordered fields and a green
   submit button with the yellow brand arrow.

   Scoped to .nikwax-form, which is added to every CF7 form by
   inc/elements/class-contact-forms.php. The footer newsletter
   modal keeps its own bespoke styling and is excluded there.
   ============================================================ */

.wpcf7-form.nikwax-form {
	max-width: 720px;
	margin: 0 auto;
	text-align: left;
	color: var(--nikwax-blue);
	font-family: var(--brand-font, "Ubuntu"), sans-serif;
}


/* ---- Rows ---- */
/* CF7 wraps each field in a <p>; that is this form's .form-row. */
.wpcf7-form.nikwax-form p {
	margin: 0 0 14px;
	padding: 0;
	color: var(--nikwax-blue);
	font-size: 13px;
	line-height: 1.5;
}

.wpcf7-form.nikwax-form p:last-child {
	margin-bottom: 0;
}

.wpcf7-form.nikwax-form a {
	color: var(--nikwax-blue);
	text-decoration: underline;
}

/* ---- Labels ---- */
.wpcf7-form.nikwax-form label {
	display: block;
	color: var(--nikwax-blue);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

/* The <br> CF7 puts between the label text and the field is replaced by the
   control wrap's own top margin, matching the checkout label gap. */
.wpcf7-form.nikwax-form label br {
	display: none;
}

.wpcf7-form.nikwax-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

/* ---- Fields ---- */
.wpcf7-form.nikwax-form input[type="text"],
.wpcf7-form.nikwax-form input[type="email"],
.wpcf7-form.nikwax-form input[type="tel"],
.wpcf7-form.nikwax-form input[type="url"],
.wpcf7-form.nikwax-form input[type="number"],
.wpcf7-form.nikwax-form input[type="date"],
.wpcf7-form.nikwax-form input[type="password"],
.wpcf7-form.nikwax-form input[type="search"],
.wpcf7-form.nikwax-form textarea,
.wpcf7-form.nikwax-form select {
	width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid var(--nikwax-blue);
	border-radius: 3px;
	background-color: var(--brand-white);
	color: var(--nikwax-blue);
	font-size: 15px;
	font-weight: 400;
	font-family: var(--brand-font, "Ubuntu"), sans-serif;
	line-height: 1.3;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpcf7-form.nikwax-form textarea {
	min-height: 90px;
	resize: vertical;
}

.wpcf7-form.nikwax-form input::placeholder,
.wpcf7-form.nikwax-form textarea::placeholder {
	color: var(--nikwax-blue);
	opacity: 0.85;
	font-weight: 600;
}

.wpcf7-form.nikwax-form input:focus,
.wpcf7-form.nikwax-form textarea:focus,
.wpcf7-form.nikwax-form select:focus {
	outline: none;
	border-color: var(--nikwax-blue);
	box-shadow: 0 0 0 3px rgba(var(--nikwax-blue-rgb), 0.15);
}

/* ---- Checkboxes / radios (acceptance, checkbox and radio tags) ---- */
/* The box hangs in the left gutter so wrapped label text stays aligned. The
   text sits loose in the label (not in a span), so flex + gap can't be used —
   it would space out every word and link as its own flex item. */
.wpcf7-form.nikwax-form label:has(input[type="checkbox"]),
.wpcf7-form.nikwax-form label:has(input[type="radio"]) {
	position: relative;
	padding-left: 28px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
}

.wpcf7-form.nikwax-form .wpcf7-form-control-wrap:has(input[type="checkbox"]),
.wpcf7-form.nikwax-form .wpcf7-form-control-wrap:has(input[type="radio"]) {
	position: absolute;
	left: 0;
	top: 0;
	margin-top: 0;
}

.wpcf7-form.nikwax-form .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form.nikwax-form input[type="checkbox"],
.wpcf7-form.nikwax-form input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--nikwax-blue);
	flex-shrink: 0;
}

/* ---- Submit ---- */
/* Green with the yellow arrow, as per #place_order / .button.alt on checkout.
   The arrow is a background image because <input> has no pseudo-elements. */
.wpcf7-form.nikwax-form .wpcf7-submit {
	display: block;
	width: auto;
	min-width: 240px;
	margin-top: 22px;
	padding: 18px 48px 18px 24px;
	border: 0;
	border-radius: 3px;
	background-color: var(--nikwax-green);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' viewBox='0 0 12 16'%3E%3Cpath d='M0 0l12 8-12 8z' fill='%23fcbf00'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 22px center;
	background-size: 12px 16px;
	color: var(--brand-white);
	font-size: 16px;
	font-weight: 700;
	font-family: var(--brand-font, "Ubuntu"), sans-serif;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wpcf7-form.nikwax-form .wpcf7-submit:hover {
	background-color: #006b34;
}

.wpcf7-form.nikwax-form .wpcf7-spinner {
	margin: 22px 0 0 14px;
	vertical-align: middle;
}

/* ---- Validation + response messages ---- */
.wpcf7-form.nikwax-form .wpcf7-not-valid {
	border-color: var(--brand-red);
}

.wpcf7-form.nikwax-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: var(--brand-red);
	font-size: 13px;
	font-weight: 400;
}

.wpcf7-form.nikwax-form .wpcf7-response-output {
	margin: 22px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--nikwax-blue);
	border-radius: 3px;
	background-color: var(--brand-off-white);
	color: var(--nikwax-blue);
	font-size: 14px;
	line-height: 1.5;
}

.wpcf7-form.nikwax-form.sent .wpcf7-response-output {
	border-color: var(--nikwax-green);
	color: var(--nikwax-green);
}

.wpcf7-form.nikwax-form.invalid .wpcf7-response-output,
.wpcf7-form.nikwax-form.unaccepted .wpcf7-response-output,
.wpcf7-form.nikwax-form.payment-required .wpcf7-response-output,
.wpcf7-form.nikwax-form.failed .wpcf7-response-output,
.wpcf7-form.nikwax-form.aborted .wpcf7-response-output {
	border-color: var(--brand-red);
	color: var(--brand-red);
}

/* ---- Responsive ---- */
@media screen and (max-width: 768px) {
	.wpcf7-form.nikwax-form .wpcf7-submit {
		width: 100%;
		min-width: 0;
	}
}

/* ============================================================
   On a Content Bar block
   A light fill (.content-bar--light, set in blocks/content-bar/content-bar.php)
   keeps the blue-on-white checkout look above. A dark fill flips the labels,
   field outlines and text to white so they read against the colour; the green
   submit button is unchanged either way, as on checkout.
   ============================================================ */
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form,
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form p,
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form label,
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form a {
	color: var(--brand-white);
}

.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form input[type="text"],
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form input[type="email"],
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form input[type="tel"],
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form input[type="url"],
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form input[type="number"],
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form input[type="date"],
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form input[type="password"],
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form input[type="search"],
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form textarea,
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form select {
    border-color: var(--nikwax-blue);
    background-color: white;
    color: var(--nikwax-blue);
}

/* The dropdown list itself is painted by the OS, so keep it readable. */
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form select option {
	background-color: var(--brand-white);
	color: var(--nikwax-blue);
}

.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form input::placeholder,
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form textarea::placeholder {
	color: var(--brand-white);
}

.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form input:focus,
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form textarea:focus,
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form select:focus {
	border-color: var(--brand-white);
	box-shadow: 0 0 0 3px rgba(var(--brand-white-rgb), 0.3);
}

.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form input[type="checkbox"],
.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form input[type="radio"] {
	accent-color: var(--brand-white);
}

.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form .wpcf7-not-valid {
	border-color: var(--golden-yellow);
}

.content-bar:not(.content-bar--light) .wpcf7-form.nikwax-form .wpcf7-not-valid-tip {
	color: var(--golden-yellow);
}