/**
 * Contact Form 7 — Cairnhill
 *
 * Styles ONLY the elements CF7 adds on top of the original Design System
 * form markup. Field, label, layout and button styles stay in each
 * block's own scoped CSS and are deliberately not repeated here.
 *
 * Specificity note: block CSS is `.fl-ds-custom-<id>.svc-request input`
 * (0,2,1) and prints inline after this file, so overrides of control
 * properties use (0,3,1) or higher.
 */

/* ---------- Shared service form ("Request an appointment") ---------- */

/* Astra's CF7 compatibility CSS adds `.wpcf7 form > div { margin-bottom: 1.2em }`,
   which would add space under the Name | Phone row on top of the flex gap. */
.svc-request .wpcf7 form > .req-row {
	margin-bottom: 0;
}

/* Astra's Customizer CSS pads CF7 controls 12px 16px at (0,3,1), beating the
   block's `input, textarea { padding: 14px 16px }`. Restore the block value. */
.svc-request .wpcf7 .wpcf7-form-control-wrap input.wpcf7-form-control,
.svc-request .wpcf7 .wpcf7-form-control-wrap textarea.wpcf7-form-control {
	padding: 14px 16px;
}

/* CF7 wraps each control in a span, so the textarea is no longer a flex item
   and sits on a text baseline (≈6px extra gap below it). Make it block-level
   again, as it was in the original markup. */
.svc-request .wpcf7 .wpcf7-form-control-wrap textarea.wpcf7-form-control {
	display: block;
}

/* Astra (compatibility + Customizer CSS) removes the outline and swaps border
   and text colour on focus. Keep the block's border/text colour and a visible
   keyboard focus ring. */
.svc-request .wpcf7 .wpcf7-form-control-wrap input.wpcf7-form-control:focus,
.svc-request .wpcf7 .wpcf7-form-control-wrap textarea.wpcf7-form-control:focus {
	border-color: rgba(255,255,255,.6);
	border-width: 1px;
	color: var(--ds-color-stone-800);
	outline: 2px solid var(--ds-color-focus-ring);
	outline-offset: 2px; /* = design system base :focus-visible */
}

/* Validation message under a field */
.svc-request .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	padding: 4px 8px;
	border-radius: var(--ds-radius-xs);
	background: var(--ds-color-danger-100);
	color: var(--ds-color-danger-600);
	font-family: var(--ds-font-core);
	font-size: var(--ds-text-caption);
	font-weight: var(--ds-weight-semibold);
	line-height: 1.4;
}

/* Invalid field outline */
.svc-request .wpcf7-form-control-wrap input.wpcf7-not-valid,
.svc-request .wpcf7-form-control-wrap textarea.wpcf7-not-valid {
	border-color: var(--ds-color-danger-600);
}

/* Form-level response (hidden until a submission attempt) */
.svc-request .wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--ds-color-border-default);
	border-radius: var(--ds-radius-sm);
	background: var(--ds-color-white);
	color: var(--ds-color-stone-800);
	font-family: var(--ds-font-core);
	font-size: var(--ds-text-caption);
	line-height: 1.5;
}

.svc-request .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--ds-color-success-600);
}

.svc-request .wpcf7 form.invalid .wpcf7-response-output,
.svc-request .wpcf7 form.unaccepted .wpcf7-response-output,
.svc-request .wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--ds-color-warn-600);
}

.svc-request .wpcf7 form.failed .wpcf7-response-output,
.svc-request .wpcf7 form.aborted .wpcf7-response-output {
	border-color: var(--ds-color-danger-600);
}

/* While sending: keep the button's design, signal progress */
.svc-request .wpcf7 form.submitting .req-send {
	opacity: .55;
	cursor: progress;
}

/* ---------- Contact page form ("Send us a message") ----------
 * The Contact block's own CSS is more specific than the service block's
 * (`.fl-ds-custom-<id>.contact-details .ctd-field input`, 0,3,1) and already
 * sets padding, height:auto and its focus ring, so it keeps winning over
 * Astra's CF7 rules. Only the remaining conflicts are handled here.
 */

/* Astra: `.wpcf7 form > div { margin-bottom: 1.2em }` under the Name | Phone pair */
.contact-details .wpcf7 form > .ctd-form-pair {
	margin-bottom: 0;
}

/* CF7's wrapper span puts the textarea on a text baseline (extra gap below) */
.contact-details .wpcf7 .wpcf7-form-control-wrap textarea.wpcf7-form-control {
	display: block;
}

/* Astra's Customizer focus rule swaps the text colour; keep the block's */
.contact-details .ctd-field .wpcf7-form-control-wrap input.wpcf7-form-control:focus,
.contact-details .ctd-field .wpcf7-form-control-wrap textarea.wpcf7-form-control:focus {
	color: var(--ds-color-ink-body);
}

/* Validation message under a field */
.contact-details .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	padding: 4px 8px;
	border-radius: var(--ds-radius-xs);
	background: var(--ds-color-danger-100);
	color: var(--ds-color-danger-600);
	font-family: var(--ds-font-core);
	font-size: var(--ds-text-caption);
	font-weight: var(--ds-weight-semibold);
	line-height: 1.4;
}

/* Invalid field outline (0,4,1 to beat the block's 0,3,1 border) */
.contact-details .ctd-field .wpcf7-form-control-wrap input.wpcf7-not-valid,
.contact-details .ctd-field .wpcf7-form-control-wrap textarea.wpcf7-not-valid {
	border-color: var(--ds-color-danger-600);
}

/* Form-level response (hidden until a submission attempt) */
.contact-details .wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--ds-color-border-default);
	border-radius: var(--ds-radius-sm);
	background: var(--ds-color-white);
	color: var(--ds-color-ink-body);
	font-family: var(--ds-font-core);
	font-size: var(--ds-text-caption);
	line-height: 1.5;
}

.contact-details .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--ds-color-success-600);
}

.contact-details .wpcf7 form.invalid .wpcf7-response-output,
.contact-details .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-details .wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--ds-color-warn-600);
}

.contact-details .wpcf7 form.failed .wpcf7-response-output,
.contact-details .wpcf7 form.aborted .wpcf7-response-output {
	border-color: var(--ds-color-danger-600);
}

/* While sending (the block's own disabled opacity is .5) */
.contact-details .wpcf7 form.submitting .ctd-send {
	opacity: .5;
	cursor: progress;
}

/* ---------- Cold Compression Rental form ("Book Your Unit") ----------
 * The <form> itself is the block's 2-column grid (`.frm-grid`), and the
 * block's control CSS is `.fl-ds-custom-<id>.ccr-form input, select` (0,2,1),
 * so Astra's CF7 rules (0,3,1+) win unless countered here.
 */

/* Astra's Customizer CSS pads CF7 inputs 12px 16px and selects 6px 10px.
   Restore the block's 14px 16px. */
.ccr-form .wpcf7 .wpcf7-form-control-wrap input.wpcf7-form-control,
.ccr-form .wpcf7 .wpcf7-form-control-wrap select.wpcf7-form-control {
	padding: 14px 16px;
}

/* Astra removes the outline and swaps border/text colour on focus. Keep the
   block's border and text colour and a visible keyboard focus ring. */
.ccr-form .wpcf7 .wpcf7-form-control-wrap input.wpcf7-form-control:focus,
.ccr-form .wpcf7 .wpcf7-form-control-wrap select.wpcf7-form-control:focus {
	border-color: var(--ds-color-border-default);
	border-width: 1px;
	color: var(--ds-color-stone-800);
	outline: 2px solid var(--ds-color-focus-ring);
	outline-offset: 2px; /* = design system base :focus-visible */
}

/* Validation message under a field. The tip sits inside the uppercase,
   letter-spaced `.frm-field` label, so reset the inherited text styles. */
.ccr-form .wpcf7-form-control-wrap .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	padding: 4px 8px;
	border-radius: var(--ds-radius-xs);
	background: var(--ds-color-danger-100);
	color: var(--ds-color-danger-600);
	font-family: var(--ds-font-core);
	font-size: var(--ds-text-caption);
	font-weight: var(--ds-weight-semibold);
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
}

/* Invalid field outline */
.ccr-form .wpcf7 .wpcf7-form-control-wrap input.wpcf7-not-valid,
.ccr-form .wpcf7 .wpcf7-form-control-wrap select.wpcf7-not-valid {
	border-color: var(--ds-color-danger-600);
}

/* Form-level response: a direct child of the grid form, so span both columns
   (as the removed "not connected" notice did). Hidden until a submission attempt. */
.ccr-form .wpcf7 form .wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--ds-color-border-default);
	border-radius: var(--ds-radius-sm);
	background: var(--ds-color-white);
	color: var(--ds-color-stone-800);
	font-family: var(--ds-font-core);
	font-size: var(--ds-text-caption);
	line-height: 1.5;
}

.ccr-form .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--ds-color-success-600);
}

.ccr-form .wpcf7 form.invalid .wpcf7-response-output,
.ccr-form .wpcf7 form.unaccepted .wpcf7-response-output,
.ccr-form .wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--ds-color-warn-600);
}

.ccr-form .wpcf7 form.failed .wpcf7-response-output,
.ccr-form .wpcf7 form.aborted .wpcf7-response-output {
	border-color: var(--ds-color-danger-600);
}

/* While sending (the block's own disabled opacity is .55) */
.ccr-form .wpcf7 form.submitting .frm-send {
	opacity: .55;
	cursor: progress;
}

/* ---------- Submit buttons: keyboard focus (all three forms) ----------
 * The design system's base rule `:focus-visible { outline: 2px solid
 * var(--ds-color-focus-ring); outline-offset: 2px }` (0,1,0) is defeated by
 * Astra's `button:focus { outline: 0 }` (0,1,1), so keyboard users got no
 * focus ring on the submit buttons. Restore the design system's own values.
 * :focus-visible only, so mouse clicks look unchanged. No hover rule is added:
 * the blocks define none for these buttons.
 */
.svc-request .wpcf7 .req-send:focus-visible,
.contact-details .wpcf7 .ctd-send:focus-visible,
.ccr-form .wpcf7 .frm-send:focus-visible {
	outline: 2px solid var(--ds-color-focus-ring);
	outline-offset: 2px;
}