/* Madden School - sitewide dark form fields.
   Fixes black-on-black inputs by giving form controls a dark fill with light
   text. Scoped to form CONTROLS only (input/textarea/select), so body text,
   badges, cards, and ad units are never touched.

   Variables mirror login.css so the look stays consistent. Defined here too
   in case this file loads without login.css. */
:root {
	--msf-field-bg:     #171717;
	--msf-field-border: #2c2c2c;
	--msf-field-text:   #e8e8e8;
	--msf-field-muted:  #8a8a8a;
	--msf-field-focus:  #3d7bff;
}

/* Text-like inputs + textarea + select. The long attribute list keeps this
   from touching checkboxes, radios, buttons, ranges, or color pickers. */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
input:not([type]),
textarea,
select {
	background-color: var(--msf-field-bg) !important;
	color: var(--msf-field-text) !important;
	-webkit-text-fill-color: var(--msf-field-text) !important;
	border: 1px solid var(--msf-field-border) !important;
	box-shadow: none !important;
}

/* Placeholders need their own rule or they inherit the dark default. */
input::placeholder,
textarea::placeholder {
	color: var(--msf-field-muted) !important;
	opacity: 1 !important;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: var(--msf-field-muted) !important;
}

/* Focus state: keep the dark fill, add a visible accent border. */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
	background-color: var(--msf-field-bg) !important;
	color: var(--msf-field-text) !important;
	border-color: var(--msf-field-focus) !important;
	outline: none !important;
}

/* Browser autofill paints its own background + text; force it back to dark. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-text-fill-color: var(--msf-field-text) !important;
	caret-color: var(--msf-field-text) !important;
	transition: background-color 9999s ease-out 0s !important;
	box-shadow: 0 0 0 1000px var(--msf-field-bg) inset !important;
}

/* Select dropdown arrow + open option list stay readable on dark.
   The open <option> list is drawn by the browser/OS; color-scheme plus
   explicit option colors keep it from rendering dark-on-dark. */
select {
	color-scheme: dark;
}
select option {
	background-color: var(--msf-field-bg) !important;
	color: var(--msf-field-text) !important;
}
select option:checked,
select option:hover {
	background-color: #232323 !important;
	color: #ffffff !important;
}

/* Form submit buttons sitewide -> brand blue with white text.
   Covers native submit/button inputs and common framework button classes.
   Excludes the plugin's own pills (mslogin-*) which set their own colors. */
input[type="submit"]:not(.mslogin-trigger):not(.mslogin-cta-unlimited),
input[type="button"]:not(.mslogin-trigger):not(.mslogin-cta-unlimited),
button[type="submit"]:not(.mslogin-trigger):not(.mslogin-cta-unlimited),
.wp-block-search__button,
#wp-submit,
.woocommerce button.button,
.woocommerce-Button {
	background-color: var(--msf-field-focus) !important;
	background-image: none !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	text-shadow: none !important;
	border: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
}
input[type="submit"]:not(.mslogin-trigger):not(.mslogin-cta-unlimited):hover,
input[type="button"]:not(.mslogin-trigger):not(.mslogin-cta-unlimited):hover,
button[type="submit"]:not(.mslogin-trigger):not(.mslogin-cta-unlimited):hover,
.wp-block-search__button:hover,
#wp-submit:hover,
.woocommerce button.button:hover,
.woocommerce-Button:hover {
	background-color: #2f6ae8 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}