/* ==========================================================
   Aquabrass Xpress — Contact Form 7 field styles
   File: assets/css/contact-form.css (enqueued in functions.php as 'mugistore-contact-form')
   Moved from mu-plugin wp-content/mu-plugins/aqx-contact-form-styles.php (v1.0.0, Webnauts, created 20.10.2026, moved to theme 09.11.2026).
   Layout rules for .contact-form live in assets/scss/_contact.scss (compiled into dist/main.css);
   this file only adds borders/backgrounds/states on top of them.
   ========================================================== */

/* ==========================================================
   Contact Form 7 — contact form field styles (Aquabrass Xpress)
   Scope: only forms with class "contact-form" (EN + FR contact pages),
   the newsletter form ("subscribe-form") is not affected.
   Colors from the theme palette (theme.json presets):
   green #22b689, green-40 #d9ece1, grey-40 #d7d8d9,
   grey-80 #aeb1b3, grey-main #5d6266, titles #303336

   Why !important on border/background/color of text fields:
   GoDaddy inline CSS "wp-site-designer-contrast-fallback" styles inputs
   with variables --wp--preset--color--base / --contrast that the Mugistore
   theme does not define, so border and background become "none/transparent".
   That rule has very high specificity, so we override only these properties.
   ========================================================== */

/* Field labels */
.wpcf7 form.wpcf7-form.contact-form > p > label,
.wpcf7 form.wpcf7-form.contact-form .contact-form-radio > p > label,
.wpcf7 form.wpcf7-form.contact-form .contact-form-radio > label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #303336;
	margin-bottom: 16px;
}

/* Text fields */
.wpcf7 form.wpcf7-form.contact-form input[type="text"],
.wpcf7 form.wpcf7-form.contact-form input[type="email"],
.wpcf7 form.wpcf7-form.contact-form input[type="tel"],
.wpcf7 form.wpcf7-form.contact-form input[type="url"],
.wpcf7 form.wpcf7-form.contact-form input[type="number"],
.wpcf7 form.wpcf7-form.contact-form textarea,
.wpcf7 form.wpcf7-form.contact-form select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 6px;
	padding: 14px 16px;
	background-color: #ffffff !important;
	border: 1px solid #d7d8d9 !important;
	border-radius: 5px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #383838 !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7 form.wpcf7-form.contact-form textarea {
	min-height: 140px;
	resize: vertical;
}

/* Hover / focus */
.wpcf7 form.wpcf7-form.contact-form input[type="text"]:hover,
.wpcf7 form.wpcf7-form.contact-form input[type="email"]:hover,
.wpcf7 form.wpcf7-form.contact-form input[type="tel"]:hover,
.wpcf7 form.wpcf7-form.contact-form textarea:hover,
.wpcf7 form.wpcf7-form.contact-form select:hover {
	border-color: #aeb1b3 !important;
}

.wpcf7 form.wpcf7-form.contact-form input[type="text"]:focus,
.wpcf7 form.wpcf7-form.contact-form input[type="email"]:focus,
.wpcf7 form.wpcf7-form.contact-form input[type="tel"]:focus,
.wpcf7 form.wpcf7-form.contact-form textarea:focus,
.wpcf7 form.wpcf7-form.contact-form select:focus {
	outline: none;
	border-color: #22b689 !important;
	box-shadow: 0 0 0 3px #d9ece1;
}

/* Validation errors (Contact Form 7) */
.wpcf7 form.wpcf7-form.contact-form .wpcf7-form-control.wpcf7-not-valid {
	border-color: #dc3232 !important;
}

.wpcf7 form.wpcf7-form.contact-form .wpcf7-form-control.wpcf7-not-valid:focus {
	box-shadow: 0 0 0 3px rgba(220, 50, 50, 0.15);
}

.wpcf7 form.wpcf7-form.contact-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 400;
}

/* Radio buttons and checkboxes */
.wpcf7 form.wpcf7-form.contact-form input[type="radio"],
.wpcf7 form.wpcf7-form.contact-form input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0 8px 0 0;
	vertical-align: middle;
	accent-color: #22b689;
	cursor: pointer;
}

.wpcf7 form.wpcf7-form.contact-form .wpcf7-list-item {
	margin: 0 0 8px 0;
}

.wpcf7 form.wpcf7-form.contact-form .wpcf7-list-item label {
	font-size: 14px;
	font-weight: 400;
	color: #383838;
	cursor: pointer;
}

/* File upload */
.wpcf7 form.wpcf7-form.contact-form input[type="file"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 6px;
	padding: 12px;
	background-color: #ffffff;
	border: 1px dashed #aeb1b3;
	border-radius: 5px;
	font-size: 14px;
	color: #5d6266;
	cursor: pointer;
}

.wpcf7 form.wpcf7-form.contact-form input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 18px;
	background-color: #ffffff;
	border: 1px solid #22b689;
	border-radius: 1000px;
	font-family: inherit;
	font-size: 14px;
	color: #22b689;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wpcf7 form.wpcf7-form.contact-form input[type="file"]::file-selector-button:hover {
	background-color: #22b689;
	color: #ffffff;
}

/* Submit button: hover state only (base style comes from the theme) */
.wpcf7 form.wpcf7-form.contact-form input[type="submit"] {
	transition: opacity 0.2s ease;
}

.wpcf7 form.wpcf7-form.contact-form input[type="submit"]:hover {
	opacity: 0.85;
}