@import url('../css/variables.css');

/**
 * Contact Form 7 - Custom Styles (Child Theme Override)
 * Couleurs basées sur variables.css du thème child
 * Utilise !important pour écraser les styles par défaut de CF7
 */

/* ============================================================
   VARIABLES LOCALES CF7 (basées sur variables.css)
   ============================================================
   --color-base       : #BD2360  → utilisé pour l'état par défaut/info
   --color-category   : #92B93E  → succès (sent)
   --color-link       : #DD4C5C  → erreur/danger (failed, aborted, invalid)
   --color-tags       : #F6EDE0  → fond des alertes (neutre/chaud)
   --color-paragraphe : #6D6059  → texte secondaire
   --color-title      : #221812  → texte principal foncé
   --color-divider-border : #E9E4DE → bordure neutre
   ============================================================ */

.wpcf7 .screen-reader-response {
	position: absolute !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	width: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	word-wrap: normal !important;
	word-break: normal !important;
}

.wpcf7 .hidden-fields-container {
	display: none !important;
}

/* --- Réponse output : base (info/défaut) --- */
.wpcf7 form .wpcf7-response-output {
	margin: 2em 0.5em 1em !important;
	padding: 0.75em 1em !important;
	border: 1.5px solid var(--color-base) !important;
	border-left: 4px solid var(--color-base) !important;
	border-radius: 0.375rem !important;
	background-color: var(--color-tags) !important;
	color: var(--color-title) !important;
	font-family: var(--font-text) !important;
	font-size: var(--font-size-paragraphe) !important;
}

/* --- États cachés --- */
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none !important;
}

/* --- Succès ✅ --color-category (#92B93E vert olive) --- */
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--color-category) !important;
	border-left-color: var(--color-category) !important;
	background-color: color-mix(in srgb, var(--color-category) 12%, var(--color-background)) !important;
	color: var(--color-title) !important;
}

/* --- Échec / Abandonné ❌ --color-link (#DD4C5C rouge rosé) --- */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: var(--color-link) !important;
	border-left-color: var(--color-link) !important;
	background-color: color-mix(in srgb, var(--color-link) 10%, var(--color-background)) !important;
	color: var(--color-title) !important;
}

/* --- Spam 🔶 --color-base (#BD2360 fuchsia/rose foncé) --- */
.wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--color-base) !important;
	border-left-color: var(--color-base) !important;
	background-color: color-mix(in srgb, var(--color-base) 10%, var(--color-background)) !important;
	color: var(--color-title) !important;
}

/* --- Invalide / Non accepté / Paiement requis ⚠️ --color-paragraphe (#6D6059 brun neutre) --- */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: var(--color-paragraphe) !important;
	border-left-color: var(--color-paragraphe) !important;
	background-color: color-mix(in srgb, var(--color-paragraphe) 10%, var(--color-tags)) !important;
	color: var(--color-title) !important;
}

/* --- Champ invalide (tip d'erreur sous le champ) --- */
.wpcf7-form-control-wrap {
	position: relative !important;
}

.wpcf7-not-valid-tip {
	color: var(--color-link) !important;
	font-size: 0.85em !important;
	font-weight: 500 !important;
	font-family: var(--font-text) !important;
	display: block !important;
	margin-top: 0.25rem !important;
}

.use-floating-validation-tip .wpcf7-not-valid-tip {
	position: relative !important;
	top: -2ex !important;
	left: 1em !important;
	z-index: 100 !important;
	border: 1px solid var(--color-link) !important;
	background: var(--color-background) !important;
	color: var(--color-link) !important;
	padding: 0.2em 0.8em !important;
	width: 24em !important;
	border-radius: 0.375rem !important;
	font-family: var(--font-text) !important;
}

/* --- List items --- */
.wpcf7-list-item {
	display: inline-block !important;
	margin: 0 0 0 1em !important;
}

.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
	content: " " !important;
}

/* --- Spinner --- */
.wpcf7-spinner {
	visibility: hidden !important;
	display: inline-block !important;
	background-color: var(--color-title) !important;
	opacity: 0.75 !important;
	width: 24px !important;
	height: 24px !important;
	border: none !important;
	border-radius: 100% !important;
	padding: 0 !important;
	margin: 0 24px !important;
	position: relative !important;
}

form.submitting .wpcf7-spinner {
	visibility: visible !important;
}

.wpcf7-spinner::before {
	content: '' !important;
	position: absolute !important;
	background-color: var(--color-background) !important;
	top: 4px !important;
	left: 4px !important;
	width: 6px !important;
	height: 6px !important;
	border: none !important;
	border-radius: 100% !important;
	transform-origin: 8px 8px !important;
	animation-name: spin !important;
	animation-duration: 1000ms !important;
	animation-timing-function: linear !important;
	animation-iteration-count: infinite !important;
}

@media (prefers-reduced-motion: reduce) {
	.wpcf7-spinner::before {
		animation-name: blink !important;
		animation-duration: 2000ms !important;
	}
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes blink {
	from { opacity: 0; }
	50%  { opacity: 1; }
	to   { opacity: 0; }
}

/* --- Divers --- */
.wpcf7 [inert] {
	opacity: 0.5 !important;
}

.wpcf7 input[type="file"] {
	cursor: pointer !important;
}

.wpcf7 input[type="file"]:disabled {
	cursor: default !important;
}

.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed !important;
}

.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
	direction: ltr !important;
}

.wpcf7-reflection > output {
	display: list-item !important;
	list-style: none !important;
}

.wpcf7-reflection > output[hidden] {
	display: none !important;
}