/**
 * Bloomreach Newsletter — "gutterball" style
 * Activated with the shortcode attribute style="gutterball". Scoped entirely under
 * .br-newsletter-form--gutterball so it never leaks into instances using another style.
 *
 * Colors/typography adapted from the client-supplied CSS (written against Gravity Forms
 * markup — `.gfield_label.gform-field-label` — which doesn't exist on this plugin's form,
 * so selectors are re-targeted to the real markup here). Like "levelx", this only re-colors
 * the existing base layout (br-newsletter.css) rather than replacing it.
 *
 * IMPORTANT DIFFERENCE FROM "lane7"/"levelx": the supplied CSS is a LIGHT form (black
 * label text) while br-newsletter.css assumes a dark section background (white text,
 * white select-arrow icon). This stylesheet therefore also flips those base assumptions
 * (text color, select arrow, consent text) for a light background — if Gutterball actually
 * places this form over a dark section, that part needs revisiting.
 *
 * Accent color sampled from the client's reference screenshot (submit button pixel) —
 * #FF23D0 — and reused for the required marker, focus ring, checked checkbox and submit
 * button, matching that reference.
 */

.br-newsletter-form--gutterball {
	color: #000;
}

.br-newsletter-form--gutterball .br-newsletter-field label {
	color: #000;
	font-family: "Roc Grotesk", Sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
}

.br-newsletter-form--gutterball .br-newsletter-required {
	color: #FF23D0;
}

.br-newsletter-form--gutterball .br-newsletter-field input[type="email"],
.br-newsletter-form--gutterball .br-newsletter-field input[type="text"],
.br-newsletter-form--gutterball .br-newsletter-field input[type="tel"],
.br-newsletter-form--gutterball .br-newsletter-field input[type="number"],
.br-newsletter-form--gutterball .br-newsletter-field select {
	width: 100%;
	padding: .5rem 1rem;
	border: 1px solid #666;
	border-radius: 3px;
	background-color: #fff;
	color: #000;
	transition: all .3s;
}

.br-newsletter-form--gutterball .br-newsletter-field input::placeholder {
	color: #666;
}

.br-newsletter-form--gutterball .br-newsletter-field input:focus,
.br-newsletter-form--gutterball .br-newsletter-field select:focus {
	border-color: #FF23D0;
	background-color: #fff;
	box-shadow: 0 0 0 3px rgba(255, 35, 208, 0.15);
}

.br-newsletter-form--gutterball .br-newsletter-field--error input,
.br-newsletter-form--gutterball .br-newsletter-field--error select {
	border-color: #e2231a;
	background-color: #fff;
}

/*
 * Base select-arrow icon is white, invisible on this light form — swap to a dark one. All
 * background-* sub-properties are re-declared (not just background-image) and forced with
 * !important: this page is built with Elementor, whose own default form-field styling applies
 * background-repeat late in the cascade and wins over a plain override, causing the icon to
 * tile across the full width of the field instead of sitting once on the right.
 */
.br-newsletter-form--gutterball .br-newsletter-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23000'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.293l3.71-4.06a.75.75 0 111.08 1.04l-4.24 4.64a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.9rem center !important;
	background-size: 1.1rem !important;
	padding-right: 2.5rem !important;
}

/* Consent checkbox */
.br-newsletter-form--gutterball .br-newsletter-consent label {
	color: #000;
}

.br-newsletter-form--gutterball .br-newsletter-consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border: 1px solid #666;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	transition: all .3s;
}

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

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

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

.br-newsletter-form--gutterball button[type="submit"]:disabled {
	background: #f5b3e8;
	border-color: #f5b3e8;
}