/**
 * Waitlist Form Styles
 * Using native CSS nesting for higher specificity
 */

.stb-waitlist {
	--stb-waitlist-primary: #1e70eb;
	--stb-waitlist-primary-hover: #165ac0;
	--stb-waitlist-navy: #0b1220;
	--stb-waitlist-border: #f3f4f6;
	--stb-waitlist-input-border: #e5e7eb;
	--stb-waitlist-input-bg: #f9fafb;
	--stb-waitlist-placeholder: #9ca3af;
	--stb-waitlist-hint: #94a3b8;
	--stb-waitlist-success: #0f766e;
	--stb-waitlist-error: #b91c1c;

	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background: #fff;
	border: 1px solid var(--stb-waitlist-border);
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.08),
		0 12px 24px -8px rgba(15, 23, 42, 0.05);
	max-width: 420px;

	& .stb-waitlist__hp {
		position: absolute;
		left: -9999px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
	}

	& .stb-waitlist__form {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	& .stb-waitlist__field {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	& .stb-waitlist__label {
		margin: 0;
		font-size: 15px;
		font-weight: 600;
		color: var(--stb-waitlist-navy);
		letter-spacing: -0.01em;
	}

	& .stb-waitlist__input {
		height: 52px;
		width: 100%;
		border-radius: 10px;
		border: 1px solid var(--stb-waitlist-input-border);
		background: var(--stb-waitlist-input-bg);
		padding: 0 18px;
		font-size: 16px;
		font-family: inherit;
		color: var(--stb-waitlist-navy);
		transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;

		&::placeholder {
			color: var(--stb-waitlist-placeholder);
			font-size: 16px;
		}

		&:hover {
			border-color: #d1d5db;
		}

		&:focus {
			outline: none;
			border-color: var(--stb-waitlist-primary);
			background: #fff;
			box-shadow: 0 0 0 4px rgba(30, 112, 235, 0.12);
		}
	}

	& .stb-waitlist__button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 52px;
		width: 100%;
		border-radius: 10px;
		border: none;
		background: var(--stb-waitlist-primary);
		padding: 0 24px;
		font-size: 16px;
		font-weight: 700;
		font-family: inherit;
		color: #fff;
		letter-spacing: -0.01em;
		box-shadow: 0 10px 20px rgba(30, 112, 235, 0.25);
		transition: transform 150ms ease, background-color 150ms ease,
			box-shadow 150ms ease, opacity 150ms ease;
		cursor: pointer;

		&:hover {
			background: var(--stb-waitlist-primary-hover);
			box-shadow: 0 14px 28px rgba(30, 112, 235, 0.32);
			transform: translateY(-2px);
		}

		&:active {
			transform: translateY(0);
			box-shadow: 0 6px 12px rgba(30, 112, 235, 0.2);
		}

		&:focus-visible {
			outline: none;
			box-shadow: 0 0 0 4px rgba(30, 112, 235, 0.25), 0 10px 20px rgba(30, 112, 235, 0.25);
		}

		&[disabled] {
			opacity: 0.65;
			cursor: not-allowed;
			transform: none;
			box-shadow: none;
		}
	}

	& .stb-waitlist__spinner {
		display: none;
		width: 18px;
		height: 18px;
		border: 2.5px solid currentColor;
		border-right-color: transparent;
		border-radius: 50%;
		animation: stb-waitlist-spin 0.75s linear infinite;
	}

	&.is-loading .stb-waitlist__spinner {
		display: inline-block;
	}

	& .stb-waitlist__status {
		margin: 0;
		text-align: center;
		font-size: 15px;
		font-weight: 500;
		padding: 12px 16px;
		border-radius: 8px;

		&:empty {
			display: none;
		}

		&.is-success {
			color: var(--stb-waitlist-success);
			background: rgba(15, 118, 110, 0.08);
		}

		&.is-error {
			color: var(--stb-waitlist-error);
			background: rgba(185, 28, 28, 0.08);
		}
	}

	& .stb-waitlist__hint {
		margin: 0;
		text-align: center;
		font-size: 13px;
		color: var(--stb-waitlist-hint);
		line-height: 1.5;
	}
}

@keyframes stb-waitlist-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}