/**
 * Bloomreach Newsletter — "playdirty" style
 * Activated with the shortcode attribute style="playdirty". Scoped entirely under
 * .br-newsletter-form--playdirty so it never leaks into instances using another style.
 *
 * Source: client-supplied CSS for the Elementor "ENQUIRE HERE" button
 * (`.elementor-1927 .elementor-element.elementor-element-ced7a86 .elementor-button`) plus a
 * reference screenshot of that button — transparent pill, red outline/text, filling solid red
 * with black text on hover. That selector doesn't exist on this plugin's form, so it's
 * re-targeted below to `button[type="submit"]`; the button rules are a direct translation of
 * the supplied values (including background-color: transparent, equivalent to the supplied
 * #61CE7000 — an 8-digit hex whose alpha byte is 00, i.e. fully transparent regardless of the
 * RGB). Only the button was specified — labels, inputs, checkbox and focus states are NOT from
 * client-supplied CSS; they're extrapolated here to the same black/red outline language so the
 * rest of the form doesn't clash with the button, and should be revisited once/if the client
 * sends CSS for those elements specifically.
 *
 * Base br-newsletter.css already assumes a dark section background (white text, white select
 * arrow), matching this brand's black background, so unlike "gutterball" this stylesheet only
 * re-colors accents rather than flipping the base light/dark assumptions.
 */

.br-newsletter-form--playdirty .br-newsletter-field label {
	font-family: "brother-1816", Sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.br-newsletter-form--playdirty .br-newsletter-required {
	color: #FF0000;
}

.br-newsletter-form--playdirty .br-newsletter-field input[type="email"],
.br-newsletter-form--playdirty .br-newsletter-field input[type="text"],
.br-newsletter-form--playdirty .br-newsletter-field input[type="tel"],
.br-newsletter-form--playdirty .br-newsletter-field input[type="number"],
.br-newsletter-form--playdirty .br-newsletter-field select {
	background-color: transparent;
	border: 1px solid #FF0000;
	border-radius: 32px;
	font-family: "brother-1816", Sans-serif;
}

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

.br-newsletter-form--playdirty .br-newsletter-field input:focus,
.br-newsletter-form--playdirty .br-newsletter-field select:focus {
	border-color: #FF0000;
	background-color: rgba(255, 0, 0, 0.08);
	box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.2);
}

/* Deliberately NOT red-on-black like the rest of this style: the normal field border is
 * already red (#FF0000), so a red error state wouldn't read as "different" against it. Amber
 * gives a clearly distinct, high-contrast alert against both the black background and the red
 * accent. */
.br-newsletter-form--playdirty .br-newsletter-field--error input,
.br-newsletter-form--playdirty .br-newsletter-field--error select {
	border-color: #FFC800;
	background-color: rgba(255, 200, 0, 0.1);
}

.br-newsletter-form--playdirty .br-newsletter-field--error input:focus,
.br-newsletter-form--playdirty .br-newsletter-field--error select:focus {
	border-color: #FFC800;
	box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.25);
}

.br-newsletter-form--playdirty .br-newsletter-consent.br-newsletter-field--error label {
	outline-color: #FFC800;
}

/* Base select-arrow icon is already white (dark-form default), kept as-is — only the field
 * border/shape changes for this style. */
.br-newsletter-form--playdirty .br-newsletter-field select {
	border-radius: 32px;
}

/* Consent checkbox */
.br-newsletter-form--playdirty .br-newsletter-consent label {
	font-family: "brother-1816", Sans-serif;
}

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

.br-newsletter-form--playdirty .br-newsletter-consent input[type="checkbox"]:checked {
	background-color: #FF0000;
	border-color: #FF0000;
	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='%23000' 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--playdirty .br-newsletter-consent input[type="checkbox"]:focus {
	outline: 2px solid #FF0000;
	outline-offset: 2px;
}

/* Submit button — values taken directly from the client-supplied Elementor button CSS */
.br-newsletter-form--playdirty button[type="submit"] {
	background-color: transparent;
	font-family: "brother-1816", Sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	color: #FF0000;
	border-style: solid;
	border-width: 1px;
	border-color: #FF0000;
	border-radius: 32px;
	padding: 15px 25px;
}

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

.br-newsletter-form--playdirty button[type="submit"]:disabled {
	background-color: transparent;
	color: #7a1f1f;
	border-color: #7a1f1f;
}

/* Reference button is plain text, no arrow glyph */
.br-newsletter-form--playdirty .br-newsletter-arrow {
	display: none;
}