/* =========================================================
   KINETIC MARKET — BLACK BUSINESS PLEDGE
   BREVO FORM REDESIGN
   ========================================================= */


/* =========================================================
   1. OUTER FORM AREA
   Remove the default Brevo/plugin appearance
   ========================================================= */

.sib-form {
	background: transparent !important;
	padding: 0 !important;
	text-align: left !important;
}

#sib-form-container {
	width: 100%;
	max-width: none !important;
	margin: 0 auto;
	padding: 0;
}

#sib-container {
	width: 100% !important;
	max-width: 1000px !important;
	margin: 0 auto !important;

	padding: 54px 60px !important;

	background: #ffffff !important;

	border: 0 !important;
	border-radius: 0 !important;

	box-shadow: none !important;

	text-align: left !important;
}


/* =========================================================
   2. TYPOGRAPHY
   Override Brevo's inline Helvetica / Roboto styling
   ========================================================= */

#sib-container,
#sib-container input,
#sib-container button,
#sib-container label,
#sib-container p,
#sib-container span {
	font-family: inherit !important;
}

#sib-container p {
	margin-top: 0;
}


/* =========================================================
   3. HIDE REDUNDANT INTERNAL FORM TITLE

   The page introduction above the form now handles this.
   This targets the first Brevo text block only.
   ========================================================= */

#sib-form > div:first-child {
	display: none !important;
}


/* =========================================================
   4. NORMALIZE BREVO'S DEFAULT BLOCK SPACING

   Brevo inserts inline 24px padding around nearly everything.
   ========================================================= */

#sib-form > div {
	padding-top: 0 !important;
	padding-bottom: 22px !important;
}


/* =========================================================
   5. SECTION HEADINGS
   ABOUT YOU
   YOUR COMMITMENT
   SHARE MY PLEDGE
   GET UPDATES
   ========================================================= */

#sib-container .sib-text-form-block p {
	margin: 0 !important;

	color: #035841 !important;

	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;

	letter-spacing: 0.08em;
	text-transform: uppercase;
}


/* =========================================================
   6. DIVIDERS
   ========================================================= */

#sib-container .sib-divider-form-block {
	padding: 0 !important;
	margin: -10px 0 28px !important;
}

#sib-container .sib-divider-form-block > div {
	border: 0 !important;
	border-bottom: 2px solid #f2b544 !important;
}


/* =========================================================
   7. FIELD LABELS
   ========================================================= */

#sib-container .entry__label {
	display: block;

	margin-bottom: 8px !important;

	color: #111111 !important;

	font-size: 13px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;

	letter-spacing: 0.035em;
	text-transform: uppercase;
}


/* =========================================================
   8. TEXT INPUTS
   ========================================================= */

#sib-container .entry__field {
	background: transparent !important;
	border: 0 !important;
}

#sib-container .entry__field .input {
	width: 100% !important;
	min-height: 54px;

	padding: 13px 16px !important;

	background: #f8f5ec !important;

	border: 1px solid #d8d3c7 !important;
	border-radius: 0 !important;

	color: #111111 !important;

	font-size: 16px !important;
	line-height: 1.4 !important;

	box-shadow: none !important;

	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		background-color 0.18s ease;
}

#sib-container .entry__field .input::placeholder {
	color: #817d74 !important;
	font-family: inherit !important;
	opacity: 1;
}

#sib-container .entry__field .input:hover {
	border-color: #9f9a8f !important;
}

#sib-container .entry__field .input:focus {
	background: #ffffff !important;

	border-color: #035841 !important;

	box-shadow: 0 0 0 2px rgba(3, 88, 65, 0.12) !important;

	outline: none !important;
}


/* =========================================================
   9. FIELD SPACING
   ========================================================= */

#sib-container .sib-input {
	padding: 0 !important;
	margin: 0;
}


/* =========================================================
   10. BREVO CHECKBOX FOUNDATION
   ========================================================= */

/* Keep Brevo's functional input hidden */

#sib-container .entry__choice input.input_replaced {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	pointer-events: none !important;
}


/* Every checkbox label becomes a clean flex row */

#sib-container .entry__choice > label,
#sib-container label.checkbox__label {
	position: relative !important;

	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;

	gap: 14px !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	cursor: pointer;
}


/* =========================================================
   11. VISIBLE CHECKBOX
   Completely neutralize Brevo positioning
   ========================================================= */

#sib-container .entry__choice .checkbox {
	position: static !important;

	display: block !important;
	flex: 0 0 20px !important;

	width: 20px !important;
	height: 20px !important;

	min-width: 20px !important;
	min-height: 20px !important;

	margin: 1px 0 0 0 !important;
	padding: 0 !important;

	box-sizing: border-box !important;

	background: #ffffff !important;

	border: 2px solid #111111 !important;
	border-radius: 0 !important;

	transform: none !important;
}


/* Remove Brevo's native decorative marks */

#sib-container .entry__choice .checkbox::before,
#sib-container .entry__choice .checkbox::after {
	content: none !important;
}


/* Checked state */

#sib-container
.entry__choice
input.input_replaced:checked + .checkbox {
	position: relative !important;

	background: #035841 !important;
	border-color: #035841 !important;
}


/* Our checkmark */

#sib-container
.entry__choice
input.input_replaced:checked + .checkbox::after {
	content: "" !important;

	position: absolute !important;

	top: 2px !important;
	left: 6px !important;

	display: block !important;

	width: 5px !important;
	height: 10px !important;

	border: solid #ffffff !important;
	border-width: 0 2px 2px 0 !important;

	transform: rotate(45deg) !important;
}


/* =========================================================
   12. CHECKBOX TEXT
   ========================================================= */

/* This is the text span immediately after Brevo's checkbox */

#sib-container .entry__choice .checkbox + span {
	position: static !important;

	display: block !important;
	flex: 1 1 auto !important;

	width: auto !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #111111 !important;

	font-family: inherit !important;
	font-size: 15px !important;
	line-height: 1.45 !important;

	text-align: left !important;

	transform: none !important;
}


/* Brevo wraps some labels in a paragraph */

#sib-container .entry__choice .checkbox + span p {
	display: block !important;

	margin: 0 !important;
	padding: 0 !important;

	font: inherit !important;
	line-height: inherit !important;
}


/* =========================================================
   13. COMMITMENT CARDS
   ========================================================= */

#sib-container .sib-checkbox-group {
	padding: 0 !important;
}

#sib-container .sib-checkbox-group .entry__choice {
	margin: 0 0 14px !important;
}


/* The entire commitment label becomes the card */

#sib-container .sib-checkbox-group label.checkbox__label {
	align-items: center !important;

	min-height: 68px;

	padding: 20px 22px !important;

	background: #f8f5ec;

	border: 2px solid #e4ded0;

	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		transform 0.18s ease;
}


/* Slightly larger checkbox inside commitment cards */

#sib-container .sib-checkbox-group .checkbox {
	flex-basis: 22px !important;

	width: 22px !important;
	height: 22px !important;

	min-width: 22px !important;
	min-height: 22px !important;

	margin-top: 0 !important;
}


/* Commitment copy */

#sib-container .sib-checkbox-group .checkbox + span {
	font-size: 16px !important;
	font-weight: 750 !important;
	line-height: 1.35 !important;
}


/* Hover */

#sib-container .sib-checkbox-group label.checkbox__label:hover {
	background: #f2eddf;

	border-color: #f2b544;

	transform: translateY(-1px);
}


/* Selected card */

#sib-container
.sib-checkbox-group
label.checkbox__label:has(input.input_replaced:checked) {
	background: #eef5f1;

	border-color: #035841;
}


/* =========================================================
   STANDARD OPT-IN ROWS
   Share My Pledge + Get Updates
   ========================================================= */

#sib-container .sib-optin {
	padding: 0 !important;
}

#sib-container .sib-optin .entry__choice {
	margin: 0 !important;
}

#sib-container .sib-optin .entry__choice > label {
	align-items: flex-start !important;
}

/* =========================================================
   14. CHECKBOX TEXT ALIGNMENT
   Force separation between Brevo checkbox + label text
   ========================================================= */

#sib-container .entry__choice .checkbox + span {
	margin-left: 14px !important;
}


/* Brevo commitment cards */

#sib-container .sib-checkbox-group .checkbox + span {
	margin-left: 14px !important;
}


/* Standard permission rows */

#sib-container .sib-optin .checkbox + span {
	margin-left: 14px !important;
}

/* =========================================================
   14. CAPTCHA
   ========================================================= */

#sib-container .sib-captcha {
	padding: 6px 0 0 !important;
}

#sib-container .g-recaptcha {
	margin: 0 !important;
}

/* =========================================================
   15. CAPTCHA + SUBMIT ALIGNMENT
   Align with checkbox content above
   ========================================================= */

#sib-container .sib-captcha,
#sib-container .sib-form-block:has(.sib-form-block__button) {
	padding-left: 24px !important;
}

/* =========================================================
   FORM SECTION RHYTHM
   ========================================================= */

/* Section headings */

#sib-container .sib-text-form-block {
	margin-top: 20px !important;
}


/* First section doesn't need extra space above */

#sib-form > div:nth-child(2) .sib-text-form-block {
	margin-top: 0 !important;
}


/* More room after section divider */

#sib-container .sib-divider-form-block {
	margin-bottom: 34px !important;
}


/* More separation before each new section heading */

#sib-container .sib-checkbox-group + * {
	margin-top: 16px !important;
}


/* Individual permission rows */

#sib-container .sib-optin {
	margin-bottom: 14px !important;
}


/* Give captcha its own breathing room */

#sib-container .sib-captcha {
	margin-top: 18px !important;
}


/* More separation before submit */

#sib-container .sib-captcha + * {
	margin-top: 12px !important;
}

/* =========================================================
   15. SUBMIT BUTTON
   ========================================================= */

#sib-container .sib-form-block__button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	min-height: 56px;

	padding: 15px 28px !important;

	background: #f2b544 !important;

	border: 2px solid #f2b544 !important;
	border-radius: 0 !important;

	color: #111111 !important;

	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;

	text-align: center !important;

	cursor: pointer;

	box-shadow: none !important;

	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		transform 0.18s ease;
}

#sib-container .sib-form-block__button:hover {
	background: #111111 !important;
	border-color: #111111 !important;
	color: #ffffff !important;

	transform: translateY(-1px);
}

#sib-container .sib-form-block__button:focus-visible {
	outline: 3px solid #035841 !important;
	outline-offset: 3px;
}


/* =========================================================
   16. SUCCESS / ERROR PANELS
   ========================================================= */

#sib-form-container .sib-form-message-panel {
	max-width: 1000px !important;

	margin: 0 auto 24px !important;

	border-radius: 0 !important;

	font-family: inherit !important;
}


/* =========================================================
   17. DESKTOP — FIRST + LAST NAME SIDE BY SIDE

   Uses the known Brevo field IDs rather than relying on
   arbitrary form position.
   ========================================================= */

@media (min-width: 769px) {

	#sib-form:has(#FIRSTNAME) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 22px;
	}

	/* Every normal form block spans the full form */

	#sib-form > div {
		grid-column: 1 / -1;
	}

	/* First-name wrapper */

	#sib-form > div:has(#FIRSTNAME) {
		grid-column: 1;
	}

	/* Last-name wrapper */

	#sib-form > div:has(#LASTNAME) {
		grid-column: 2;
	}

}


/* =========================================================
   18. TABLET / MOBILE
   ========================================================= */

@media (max-width: 768px) {

	#sib-container {
		padding: 38px 26px !important;
	}

	#sib-form > div {
		padding-bottom: 19px !important;
	}

	#sib-container .sib-checkbox-group .checkbox__label {
		padding: 18px !important;
	}

	#sib-container .sib-checkbox-group .checkbox__label > span:last-child {
		font-size: 16px !important;
	}

	#sib-container .sib-form-block__button {
		width: 100% !important;
	}

}


/* =========================================================
   19. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

	#sib-container {
		padding: 30px 18px !important;
	}

	#sib-container .entry__field .input {
		min-height: 52px;
	}

	#sib-container .sib-checkbox-group .checkbox__label {
		padding: 16px !important;
	}

	#sib-container .g-recaptcha {
		transform-origin: left top;
	}

}


/* =========================================================
   20. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	#sib-container .entry__field .input,
	#sib-container .sib-checkbox-group .checkbox__label,
	#sib-container .sib-form-block__button {
		transition: none !important;
	}

	#sib-container .sib-checkbox-group .checkbox__label:hover,
	#sib-container .sib-form-block__button:hover {
		transform: none !important;
	}

}



/* =========================================================
   CENTER BREVO FORM
   ========================================================= */

#sib-form-container {
	width: 100% !important;
	max-width: 1000px !important;

	margin-left: auto !important;
	margin-right: auto !important;
}

#sib-container {
	width: 100% !important;
	max-width: 1000px !important;

	margin-left: auto !important;
	margin-right: auto !important;
}