/**
 * Contact form notice + input validation styles.
 *
 * Two scopes, never global:
 *  - [data-bamboo-contact-status]  → status notice (success / error).
 *  - .sb-contact-form              → per-field input validation.
 *
 * Error colour (#9f2d2d) intentionally matches the value already used by
 * the Sandra Bamboo theme in components.css for .sb-contact-form__status[data-state="error"].
 * Theme CSS tokens (--sb-*) are referenced where available with safe fallbacks.
 */

/* ── Status notice ──────────────────────────────────────────── */

[data-bamboo-contact-status] {
	display: none;
	margin-top: var(--sb-space-sm, 1rem);
	padding: 0.6rem 0.85rem;
	border-left: 2px solid transparent;
	font-size: var(--sb-type-step--1, 0.94rem);
	line-height: var(--sb-leading-body, 1.6);
}

/* Reveal only when JS has written a message */
[data-bamboo-contact-status]:not(:empty) {
	display: block;
}

[data-bamboo-contact-status][data-state="success"] {
	background-color: rgba(42, 102, 68, 0.07);
	border-left-color: #2e7855;
	color: #265e41;
}

[data-bamboo-contact-status][data-state="error"] {
	background-color: rgba(159, 45, 45, 0.07);
	border-left-color: #9f2d2d;
	color: #9f2d2d;
}

/* ── Input / textarea validation ────────────────────────────── */
/*
 * :user-invalid fires only after the user has interacted with the field,
 * so required inputs won't look broken on page load.
 * The :focus:invalid fallback covers older engines (Firefox < 88, Safari < 16.5).
 */

.sb-contact-form input:user-invalid,
.sb-contact-form textarea:user-invalid {
	border-bottom-color: #9f2d2d;
	outline: none;
	box-shadow: none; /* reset browser default validation ring */
}

.sb-contact-form input:focus:invalid,
.sb-contact-form textarea:focus:invalid {
	border-bottom-color: #9f2d2d;
	outline: none;
	box-shadow: none;
}

/* Label colour mirrors invalid field when the field has been touched */
.sb-contact-form__field:has(input:user-invalid) label,
.sb-contact-form__field:has(textarea:user-invalid) label {
	color: #9f2d2d;
}

/* ── Dark system preference ─────────────────────────────────── */

@media (prefers-color-scheme: dark) {
	[data-bamboo-contact-status][data-state="success"] {
		background-color: rgba(60, 140, 90, 0.12);
		border-left-color: #4fa870;
		color: #8fdba8;
	}

	[data-bamboo-contact-status][data-state="error"] {
		background-color: rgba(210, 80, 80, 0.12);
		border-left-color: #d07070;
		color: #e8a0a0;
	}

	.sb-contact-form input:user-invalid,
	.sb-contact-form textarea:user-invalid,
	.sb-contact-form input:focus:invalid,
	.sb-contact-form textarea:focus:invalid {
		border-bottom-color: #d07070;
	}

	.sb-contact-form__field:has(input:user-invalid) label,
	.sb-contact-form__field:has(textarea:user-invalid) label {
		color: #d07070;
	}
}

/* ── RGPD consent checkboxes ────────────────────────────────── */
/*
 * The theme's floating-label pattern sets label { position: absolute;
 * pointer-events: none } and input { appearance: none; width: 100% } for all
 * form fields. These overrides restore sensible defaults specifically for the
 * consent rows so the checkbox and its label text are both visible and usable.
 */

.bamboo-core-contact-form__consents {
	display: grid;
	gap: 0.6rem;
	margin-top: 0.1rem;
	margin-bottom: 0.25rem;
	padding-top: 0.15rem;
}

.sb-contact-form__field--consent,
.bamboo-core-contact-form__consent {
	margin: 0;
}

.sb-contact-form__field--consent label,
.sb-contact-form .sb-contact-form__consent-label,
.bamboo-core-contact-form__label {
	position: static;
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	color: var(--sb-color-ink-soft, #434150);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.48;
	pointer-events: auto;
	transform: none;
	transition: none;
	cursor: pointer;
}

.bamboo-core-contact-form__label-text {
	display: inline;
	min-width: 0;
}

/* Custom checkbox — styled to match the theme's ink palette */
.sb-contact-form__field--consent input[type="checkbox"],
.bamboo-core-contact-form__checkbox {
	flex-shrink: 0;
	position: relative;
	width: 1rem;
	height: 1rem;
	margin-top: 0.13em; /* optical alignment with first line of text */
	padding: 0;
	border: 1.5px solid var(--sb-color-border-strong, rgba(75, 73, 88, 0.32));
	border-radius: 3px;
	background-color: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sb-contact-form__field--consent input[type="checkbox"]:checked,
.bamboo-core-contact-form__checkbox:checked {
	background-color: var(--sb-color-ink, #2e2c38);
	border-color: var(--sb-color-ink, #2e2c38);
	/* Checkmark as inline SVG data URI — white stroke on dark fill */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.5 3.8 7 9 1' stroke='%23fffdfd' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.6rem;
}

.sb-contact-form__field--consent input[type="checkbox"]:focus-visible,
.bamboo-core-contact-form__checkbox:focus-visible {
	outline: 2px solid var(--sb-color-accent, #9EA1B5);
	outline-offset: 2px;
}

/* Block the floating-label animation for consent rows */
.sb-contact-form .sb-contact-form__field--consent .sb-contact-form__consent-label,
.sb-contact-form__field--consent:focus-within label {
	color: var(--sb-color-ink-soft, #434150);
	transform: none;
}

/* Required asterisk */
.sb-contact-form__required {
	display: inline-block;
	margin-left: 0.12em;
	color: #9f2d2d;
	font-size: 1em;
	font-weight: 500;
	line-height: 1;
	vertical-align: text-top;
}

.sb-contact-form__field--consent a,
.bamboo-core-contact-form__label-text a {
	color: var(--sb-color-heading, #2e2c38);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.bamboo-submit-wrap {
	margin-top: 0.75rem;
}

@media (max-width: 48rem) {
	.bamboo-core-contact-form__consents {
		gap: 0.55rem;
		margin-top: 0.15rem;
	}

	.sb-contact-form__field--consent label,
	.sb-contact-form .sb-contact-form__consent-label,
	.bamboo-core-contact-form__label {
		gap: 0.6rem;
		font-size: 0.78rem;
		line-height: 1.5;
	}
}

/* ── Entrance animation ─────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
	[data-bamboo-contact-status]:not(:empty) {
		animation: bamboo-notice-in 0.2s ease both;
	}
}

@keyframes bamboo-notice-in {
	from {
		opacity: 0;
		transform: translateY(-3px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}