/* [hpc_subscribe_coupon] widget on the /subscribe/ page.
   Matches the "Sponsor & Partner" price-card's code-input + cta-secondary
   styling from the subscribe page mockup (same colors, stacked layout,
   uppercase input) so this widget looks native to that card wherever it's
   dropped, not like a bolted-on form. */

.hpc-subscribe-coupon {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	max-width: 360px;
}

.hpc-subscribe-coupon-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 8px;
}

.hpc-subscribe-coupon-row {
	display: flex;
	flex-direction: column;
}

.hpc-subscribe-coupon-input {
	width: 100%;
	padding: 10px 14px;
	margin-bottom: 10px;
	border: 1px solid #E5E2D9;
	border-radius: 4px;
	font-family: inherit;
	font-size: 14px;
	color: #263A33;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.hpc-subscribe-coupon-input:focus {
	outline: none;
	border-color: #005A99;
}

.hpc-subscribe-coupon-input::placeholder {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #9B9F9C;
}

/* A <span> with role="button", not a <button> - so the theme's global
   button styles (and any Elementor button widget defaults) can't reach in
   and override this. Styled and behaves like a button via CSS/JS only.
   Mirrors the mockup's .cta.cta-secondary: white fill, ink text/border,
   darkens on hover - not a filled/colored button. */
.hpc-subscribe-coupon-btn {
	display: block;
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #E5E2D9;
	border-radius: 4px;
	background: white;
	color: #263A33;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
	transition: border-color 0.15s;
}

.hpc-subscribe-coupon-btn:hover {
	border-color: #263A33;
}

.hpc-subscribe-coupon-btn.is-disabled {
	opacity: 0.6;
	cursor: default;
	pointer-events: none;
}

.hpc-subscribe-coupon-message {
	font-size: 12px;
	margin-top: 6px;
	min-height: 15px;
}