/* 2nd Tier Signup Forms - intentionally light so the theme's styling shows through. */

/*
 * Tell the browser this form is a light-coloured UI. Without it, browsers paint
 * form controls with their own system colours, which on iOS follow the phone's
 * appearance setting: in Dark Mode the submit button's text and border turned
 * white on a white page and vanished.
 */
.stp-signup-wrap {
	max-width: 100%;
	color-scheme: light;
}

.stp-signup-title { margin: 0 0 .6em; }
.stp-signup-form .stp-field { margin: 0 0 1em; }
.stp-signup-form label { display: block; font-weight: 600; margin-bottom: .25em; }
.stp-signup-form input[type="text"],
.stp-signup-form input[type="email"],
.stp-signup-form input[type="tel"],
.stp-signup-form textarea {
	width: 100%;
	padding: .7em .9em;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #fff;
	font-size: 1em;
	line-height: 1.4;
	box-sizing: border-box;
}

/* Same reason as the button below: never leave typed text to the system colour.
   Wrapped in :where() so any Divi "Fields" design setting still wins. */
.stp-signup-form :where(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	color: #333;
}

.stp-signup-form textarea { resize: vertical; }
.stp-signup-form .stp-required { color: #c00; }
.stp-signup-form .stp-submit { margin: 0; }

/*
 * Submit button.
 *
 * Divi's .et_pb_button sets `border: 2px solid` with no colour and never sets
 * `color`, which is fine for Divi's own buttons because they are <a> elements
 * and inherit the surrounding text colour. A <button> does not inherit colour:
 * every browser falls back to its own button colour, and the border follows it
 * through currentColor. On iOS that colour tracks the system appearance, so in
 * Dark Mode the whole button rendered white on white and looked missing while
 * still being tappable. Setting the colour ourselves removes the guesswork.
 *
 * Kept at single-class specificity on purpose: it loads after Divi's stylesheet
 * so it beats the .et_pb_button default, while any per-module Design setting
 * from the Divi Builder is more specific and still wins.
 */
.stp-signup-button {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	color: #000;
	background-color: transparent;
	font-family: inherit;
	cursor: pointer;
}

/* Divi adds this class when the module's Text Color is set to light. */
:where(.et_pb_bg_layout_dark) .stp-signup-button {
	color: #fff;
}

.stp-signup-form.stp-busy { opacity: .6; pointer-events: none; }
.stp-signup-message { margin: 0; }
.stp-signup-message.stp-success,
.stp-signup-message.stp-error {
	margin: 0 0 1em;
	padding: .8em 1em;
	border-left: 4px solid #46b450;
	background: #f4fbf4;
}
.stp-signup-message.stp-error {
	border-left-color: #dc3232;
	background: #fdf3f3;
}