/**
 * protox-newsletter — branded form styling.
 *
 * Brand tokens pulled from the design contract (protox_branded_floating_cta_panel.html):
 *   green #2D5A3D, accent blue #1E3A8A, sharp corners (border-radius:0),
 *   ALL-CAPS labels with letter-spacing, inputs 1px solid #CCCCCC.
 *
 * Everything is scoped under .pnl-form-wrap so it reads correctly standalone AND
 * inside a ~300px Porto blog sidebar column (Plan 04-04 consumes it).
 *
 * IMPORTANT (keystone, D-08): the success/error states are hidden via the HTML
 * `hidden` attribute and revealed by JS. This stylesheet must NOT override
 * `[hidden]` with `display:block`, or the states would be visible before JS runs.
 */

.pnl-form-wrap {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: #1a1a1a;
	max-width: 360px;
}

/* Top accent strip echoing the branded panel's green strip. */
.pnl-form-wrap .pnl-state {
	background: #ffffff;
	border: 1px solid #D5D5D5;
	border-top: 4px solid #2D5A3D;
	padding: 18px;
	box-sizing: border-box;
}

/* Honeypot: removed off-screen (Pitfall 1) — NOT display:none, so bots still fill it. */
.pnl-form-wrap .pnl-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Heading lines: small green eyebrow + larger dark heading (mockup lines 97/98). */
.pnl-form-wrap .pnl-eyebrow {
	margin: 0 0 4px;
	font-size: 11px;
	color: #2D5A3D;
	font-weight: 700;
	letter-spacing: 1.2px;
	line-height: 1.4;
	text-transform: uppercase;
}

.pnl-form-wrap .pnl-heading {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.25;
}

.pnl-form-wrap .pnl-subheading {
	margin: 0 0 16px;
	font-size: 12px;
	color: #555;
	line-height: 1.5;
}

/* Labels: ALL-CAPS with letter-spacing (mockup line 101). */
.pnl-form-wrap .pnl-label {
	display: block;
	font-size: 11px;
	color: #555;
	margin-bottom: 5px;
	font-weight: 500;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

/* Inputs: 1px solid #CCCCCC, sharp corners, 9px 11px pad, 13px font (mockup 102/105). */
.pnl-form-wrap .pnl-input {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 11px;
	font-size: 13px;
	border: 1px solid #CCCCCC;
	border-radius: 0;
	margin-bottom: 12px;
	font-family: inherit;
	background: #ffffff;
	color: #1a1a1a;
}

.pnl-form-wrap .pnl-input:focus {
	outline: none;
	border-color: #2D5A3D;
}

/* Country <select> (v1.4.0). Inherits the full .pnl-input styling; these rules
   add the select-specific niceties. While the empty placeholder option is
   selected the control is :invalid (it is `required`), so it is greyed like a
   placeholder until the visitor picks a real country. */
.pnl-form-wrap .pnl-country-select {
	cursor: pointer;
}

.pnl-form-wrap .pnl-country-select:invalid {
	color: #777;
}

/* Submit button: green, sharp corners, ALL-CAPS (mockup line 114). */
.pnl-form-wrap .pnl-submit {
	width: 100%;
	background: #2D5A3D;
	color: #ffffff;
	border: none;
	padding: 12px;
	border-radius: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	cursor: pointer;
	text-transform: uppercase;
	font-family: inherit;
}

.pnl-form-wrap .pnl-submit:hover {
	background: #24492f;
}

/* Consent line (mockup line 116). */
.pnl-form-wrap .pnl-consent {
	margin: 10px 0 0;
	font-size: 10px;
	color: #888;
	line-height: 1.5;
}

/* No-JS notice (D-09). */
.pnl-form-wrap .pnl-noscript {
	margin: 10px 0 0;
	font-size: 11px;
	color: #b00;
	line-height: 1.5;
}

/* Success state: green check tile + heading (Opus design) above the body copy. */
.pnl-form-wrap .pnl-success-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 0 14px;
	background: #2D5A3D;
	color: #ffffff;
}
.pnl-form-wrap .pnl-success-heading {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.2;
}

/* Success state body copy. */
.pnl-form-wrap .pnl-success-body {
	margin: 0;
	font-size: 12px;
	color: #555;
	line-height: 1.55;
}

.pnl-form-wrap .pnl-success-email {
	font-weight: 700;
	color: #1a1a1a;
}

/* Error state copy. */
.pnl-form-wrap .pnl-error-heading {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	color: #1a1a1a;
}

.pnl-form-wrap .pnl-error-body {
	margin: 0;
	font-size: 12px;
	color: #555;
	line-height: 1.55;
}