/* The pofu-popup-* rules that used to live here have been removed — the
 * confirmation popup now uses Core's shared window.POPopup component
 * (pixelated-orange-core includes/popup.php) instead of its own overlay
 * markup. See assets/signup-form.js and includes/signup-form.php. */

/* =========================================================
   BASE FORM LOOK (all [po_signup_form] instances — newsletter
   lists and the waitlist alike). Matches the sizing that used to
   be hardcoded as inline styles on each element.
   ========================================================= */

.po-signup-form .po-signup-input {
	width: 100%;
	padding: 8px;
	box-sizing: border-box;
}

.po-signup-form label .po-signup-input {
	margin-top: 4px;
}

.po-signup-form .po-signup-button {
	padding: 10px 24px;
	cursor: pointer;
}

/* =========================================================
   WAITLIST-ONLY STYLING
   Scoped to .po-signup-outer--waitlist so newsletter signup
   forms elsewhere on the site (which share the same markup and
   classes) are never affected — see po_followups_waitlist_form_css_vars()
   in includes/signup-form.php for where these custom properties
   come from.
   ========================================================= */

.po-signup-outer--waitlist .po-signup-title strong {
	font-size: var(--po-waitlist-label-font-size, 16px);
	color: var(--po-waitlist-label-colour, #000000);
	font-weight: var(--po-waitlist-label-font-weight, 700);
	text-transform: var(--po-waitlist-label-text-transform, none);
}

.po-signup-outer--waitlist .po-signup-input {
	border-width: var(--po-waitlist-input-border-width, 1px);
	border-style: solid;
	border-color: var(--po-waitlist-input-border-colour, #cccccc);
	border-radius: var(--po-waitlist-input-border-radius, 0px);
	padding: var(--po-waitlist-input-padding, 8px);
	font-size: var(--po-waitlist-input-font-size, 14px);
}

.po-signup-outer--waitlist .po-signup-button-wrap {
	text-align: var(--po-waitlist-btn-align, left);
}

.po-signup-outer--waitlist .po-signup-button {
	border-width: var(--po-waitlist-btn-border-width, 0px);
	border-style: solid;
	border-color: var(--po-waitlist-btn-border-colour, transparent);
	border-radius: var(--po-waitlist-btn-border-radius, 0px);
	background-color: var(--po-waitlist-btn-bg, #000000);
	color: var(--po-waitlist-btn-colour, #ffffff);
	font-size: var(--po-waitlist-btn-font-size, 14px);
	font-weight: var(--po-waitlist-btn-font-weight, 400);
	text-transform: var(--po-waitlist-btn-text-transform, none);
	width: var(--po-waitlist-btn-width, auto);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.po-signup-outer--waitlist .po-signup-button:hover {
	background-color: var(--po-waitlist-btn-bg-hover, #333333);
	color: var(--po-waitlist-btn-colour-hover, #ffffff);
	border-color: var(--po-waitlist-btn-border-colour-hover, transparent);
}