/* FlyingPenguin Newsletter - shortcode/widget form. Deliberately minimal and
   theme-friendly: inherits fonts/colours, only lays out the fields. */
.fpnl-wrap { max-width: 100%; }
.fpnl-title { font-weight: 700; margin: 0 0 6px; }
.fpnl-text { margin: 0 0 10px; opacity: .85; }

/* Explicit flex-direction is REQUIRED: some themes (e.g. Shoptimizer) force
   `flex-direction: column` on footer/widget forms, which would turn the input's
   flex-basis into a height and blow the field up. Setting it here (class
   specificity beats the theme's element selector) keeps the field the right size. */
.fpnl-form { display: flex; flex-direction: row; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.fpnl-form.fpnl-stacked, .fpnl-stacked .fpnl-form { flex-direction: column; }

.fpnl-form input[type="email"],
.fpnl-form input[type="text"].fpnl-name {
	flex: 1 1 160px;
	min-width: 0;
	width: auto;
	height: auto;
	padding: 10px 12px;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.2;
	box-sizing: border-box;
}
.fpnl-inline .fpnl-submit { flex: 0 0 auto; }
/* Stacked: full-width field and button, natural heights. */
.fpnl-stacked .fpnl-form input[type="email"],
.fpnl-stacked .fpnl-form input[type="text"].fpnl-name,
.fpnl-stacked .fpnl-submit { flex: 0 0 auto; width: 100%; }

.fpnl-form .fpnl-submit {
	padding: 10px 18px;
	border: 0;
	border-radius: 4px;
	background: #0a0c10;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.fpnl-form .fpnl-submit:hover { opacity: .9; }
.fpnl-form .fpnl-submit[disabled] { opacity: .6; cursor: default; }

/* Honeypot: hidden from people, present for bots. */
.fpnl-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0; overflow: hidden;
}

.fpnl-msg { flex-basis: 100%; margin-top: 8px; font-size: 14px; min-height: 1em; }
.fpnl-msg.fpnl-ok { color: #1a7f37; }
.fpnl-msg.fpnl-err { color: #b32d2e; }