/**
 * TP Newsletter Signup – Frontend
 *
 * Two layers:
 *   1. Plugin behaviour styles (spinner, message, success state)
 *      — always applied, not visual design.
 *   2. Optional design layer — only when form has `.tpns-has-design` class.
 *      Uses CSS custom properties set inline on the form element so each
 *      form instance can have its own design & so settings are live-editable.
 */

/* ─── Spinner / loading state (always active) ──────────────────── */
.tpns-btn {
	position: relative;
}
.tpns-btn.is-loading .tpns-btn-text {
	opacity: 0;
}
.tpns-btn-spinner {
	display: none;
	position: absolute;
	inset: 0;
	margin: auto;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: tpns-spin 0.7s linear infinite;
}
.tpns-btn.is-loading .tpns-btn-spinner {
	display: block;
}
@keyframes tpns-spin {
	to { transform: rotate(360deg); }
}

/* ─── Status message (always active, user-customized appearance) ─ */
.tpns-message {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.5;
	display: none;
	padding: 15px 30px;
	border-radius: 20px;
	border: 1px solid;
}
.tpns-message.is-visible {
	display: block;
}
.tpns-message.is-success {
	color: #ffffff;
	background: rgb(105 120 96);
}
.tpns-message.is-error {
	color: #a90c0c;
	background: rgb(255 193 193 / 60%);
}

/* Privacy checkbox wrapper */
.tpns-privacy {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0;
	font-size: 13px;
}

/* Success state - hide inputs, keep message */
.tpns-form.is-submitted .tpns-input,
.tpns-form.is-submitted .tpns-btn,
.tpns-form.is-submitted .tpns-privacy {
	display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   Design layer – only applies when .tpns-has-design is on form
   CSS vars are set inline on the form element via PHP.
   Anchored on .tpns-form (plugin class) rather than .tp-newsletter-form
   (theme class) so theme styles can't interfere with custom design.
   ═══════════════════════════════════════════════════════════════════ */

.tpns-form.tpns-has-design {
	/* Reset any theme styles that might leak through */
	border: 0;
	box-shadow: none;
	margin: 0;

	display: flex;
	align-items: stretch;
	gap: var(--tpns-gap, 8px);
	max-width: var(--tpns-max-width, 100%);
	width: 100%;
	background: var(--tpns-container-bg, transparent);
	padding: var(--tpns-container-pad, 0);
	border-radius: var(--tpns-container-radius, 0);
	flex-wrap: wrap;
	position: relative;
}

/* Stacked layout */
.tpns-form.tpns-has-design.tpns-layout-stacked {
	flex-direction: column;
	align-items: stretch;
}

/* Input */
.tpns-form.tpns-has-design .tpns-input {
	flex: 1;
	min-width: 0;
	background: var(--tpns-input-bg, #fff);
	color: var(--tpns-input-color, #111);
	border: var(--tpns-input-border-width, 1px) solid var(--tpns-input-border-color, #d1d5db);
	border-radius: var(--tpns-input-radius, 8px);
	padding: var(--tpns-input-pad-y, 12px) var(--tpns-input-pad-x, 16px);
	font-size: var(--tpns-input-font-size, 15px);
	font-family: inherit;
	line-height: 1.4;
	box-shadow: none;
	outline: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	box-sizing: border-box;
}
.tpns-form.tpns-has-design .tpns-input::placeholder {
	color: var(--tpns-input-placeholder, #9ca3af);
	opacity: 1;
}
.tpns-form.tpns-has-design .tpns-input:focus {
	border-color: var(--tpns-btn-bg, #2271b1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tpns-btn-bg, #2271b1) 20%, transparent);
}

/* Stacked: input goes full width */
.tpns-form.tpns-has-design.tpns-layout-stacked .tpns-input {
	flex: 0 0 auto;
	width: 100%;
}

/* Button */
.tpns-form.tpns-has-design .tpns-btn {
	background: var(--tpns-btn-bg, #2271b1);
	color: var(--tpns-btn-color, #fff);
	border: 0;
	border-radius: var(--tpns-btn-radius, 8px);
	padding: var(--tpns-btn-pad-y, 12px) var(--tpns-btn-pad-x, 24px);
	font-size: var(--tpns-btn-font-size, 14px);
	font-weight: var(--tpns-btn-font-weight, 600);
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	min-width: var(--tpns-btn-min-width, auto);
	line-height: 1.4;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}
.tpns-form.tpns-has-design .tpns-btn:hover,
.tpns-form.tpns-has-design .tpns-btn:focus-visible {
	background: var(--tpns-btn-hover-bg, #135e96);
	color: var(--tpns-btn-hover-color, #fff);
	outline: none;
}

/* Optional hover-lift */
.tpns-form.tpns-has-design.tpns-hover-lift .tpns-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

/* Message occupies full row inside the flex container */
.tpns-form.tpns-has-design .tpns-message,
.tpns-form.tpns-has-design .tpns-privacy {
	flex: 0 0 100%;
}