/**
 * Bloomreach Newsletter — "levelx" style
 * Activated with the shortcode attribute style="levelx". Scoped entirely under
 * .br-newsletter-form--levelx so it never leaks into instances using another style.
 *
 * Base colors/radius/borders adapted from the client-supplied CSS (written against
 * Contact Form 7 + Premium Addons markup — `.wpcf7-form-control`, `.premium-cf-anim-yes` —
 * neither of which exists on this plugin's form, so selectors are re-targeted to the real
 * markup here). Unlike "lane7", this skin only re-colors the existing base layout
 * (br-newsletter.css) rather than replacing it — the client's CSS was component-level, not
 * a full layout redesign. Gaps not covered by the supplied CSS (label, required marker,
 * focus state, checkbox, submit button) are filled in using the same #9B29F1 accent.
 */

.br-newsletter-form--levelx .br-newsletter-field label {
	color: #fff;
}

.br-newsletter-form--levelx .br-newsletter-required {
	color: #9B29F1;
}

.br-newsletter-form--levelx .br-newsletter-field input[type="email"],
.br-newsletter-form--levelx .br-newsletter-field input[type="text"],
.br-newsletter-form--levelx .br-newsletter-field input[type="tel"],
.br-newsletter-form--levelx .br-newsletter-field input[type="number"],
.br-newsletter-form--levelx .br-newsletter-field select {
	background-color: transparent;
	border: 1px solid #9B29F1;
	border-radius: 12px;
	color: #fff;
}

.br-newsletter-form--levelx .br-newsletter-field input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.br-newsletter-form--levelx .br-newsletter-field input:focus,
.br-newsletter-form--levelx .br-newsletter-field select:focus {
	border-color: #b968ff;
	background-color: transparent;
	box-shadow: 0 0 0 3px rgba(155, 41, 241, 0.25);
}

.br-newsletter-form--levelx .br-newsletter-field--error input,
.br-newsletter-form--levelx .br-newsletter-field--error select {
	border-color: #f87171;
	background-color: transparent;
}

.br-newsletter-form--levelx .br-newsletter-field select option {
	color: #6610f2;
}

.br-newsletter-form--levelx ::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.6;
}

/* Consent checkbox */
.br-newsletter-form--levelx .br-newsletter-consent label {
	color: rgba(255, 255, 255, 0.85);
}

.br-newsletter-form--levelx .br-newsletter-consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border: 1px solid #9B29F1;
	border-radius: 4px;
	background-color: transparent;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.br-newsletter-form--levelx .br-newsletter-consent input[type="checkbox"]:checked {
	background-color: #9B29F1;
	border-color: #9B29F1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.br-newsletter-form--levelx .br-newsletter-consent input[type="checkbox"]:focus {
	outline: 2px solid #b968ff;
	outline-offset: 2px;
}

/* Submit button */
.br-newsletter-form--levelx button[type="submit"] {
	background: #9B29F1;
	color: #fff;
	border: 1px solid #9B29F1;
	border-radius: 12px;
}

.br-newsletter-form--levelx button[type="submit"]:hover,
.br-newsletter-form--levelx button[type="submit"]:focus {
	background: #7f1fd1;
	border-color: #7f1fd1;
	opacity: 1;
}

.br-newsletter-form--levelx button[type="submit"]:disabled {
	background: transparent;
	color: rgba(255, 255, 255, 0.5);
	border-color: rgba(155, 41, 241, 0.4);
}