/**
 * CarbonWeb Klaviyo Forms
 * Mirrors the CarbonWeb brand language: Raleway, #00B0C2 primary, #009DAD hover,
 * pill inputs. Everything is scoped to .cw-widget-wrapper / .cw-footer-form so it
 * cannot leak into the old Brevo plugin while both are live during the swap.
 */

/* --------------------------------------------------------------------------
   Shared
   -------------------------------------------------------------------------- */

.cw-widget-wrapper,
.cw-footer-form {
	box-sizing: border-box;
}

.cw-widget-wrapper *,
.cw-footer-form * {
	box-sizing: border-box;
}

.cw-error-notice {
	color: #d93025 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	margin-bottom: 10px !important;
}

/* --------------------------------------------------------------------------
   CTA popup — same layout as the Brevo version
   -------------------------------------------------------------------------- */

.cw-widget-wrapper {
	width: 100% !important;
	max-width: 786px !important;
	margin: 20px auto !important;
	font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.cw-widget-wrapper .cw-widget-title {
	font-family: 'Raleway', sans-serif !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	color: #009DAD !important;
	letter-spacing: 2px !important;
	margin: 0 0 46px !important;
}

.cw-widget-wrapper .cw-main-frame {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	padding: 0 !important;
	gap: 32px !important;
	max-width: 786px !important;
	width: 100% !important;
	background: #ffffff !important;
}

.cw-widget-wrapper .cw-image-section {
	max-width: 312px !important;
	height: 400px !important;
	flex: none !important;
}

.cw-widget-wrapper .cw-image-section img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 6px !important;
	display: block !important;
}

.cw-widget-wrapper .cw-form-section {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	padding: 0 !important;
	gap: 12px !important;
	max-width: 418px !important;
	width: 100% !important;
	min-height: 400px !important;
	flex: 1 !important;
}

.cw-widget-wrapper .cw-api-form {
	width: 100% !important;
}

.cw-widget-wrapper .cw-h4 {
	width: 100% !important;
	margin: 0 0 12px !important;
	font-weight: 700 !important;
	font-size: 24px !important;
	line-height: 130% !important;
	color: #000000 !important;
}

.cw-widget-wrapper .cw-body-medium {
	width: 100% !important;
	margin: 0 0 12px !important;
	font-weight: 400 !important;
	font-size: 18px !important;
	line-height: 160% !important;
	color: #000000 !important;
}

.cw-widget-wrapper .cw-input-group {
	padding-bottom: 12px !important;
}

.cw-widget-wrapper .cw-input-group-email {
	margin-top: 12px !important;
	padding-bottom: 0 !important;
}

.cw-widget-wrapper .cw-input-label {
	display: block !important;
	margin-bottom: 6px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	color: #000 !important;
}

.cw-widget-wrapper .cw-pill-container {
	display: flex !important;
	align-items: center !important;
	padding: 0 20px !important;
	width: 100% !important;
	height: 48px !important;
	background: #FAFAFA !important;
	border: 2px solid #00B0C2 !important;
	border-radius: 100px !important;
}

.cw-widget-wrapper .cw-pill-container:focus-within {
	border-color: #009DAD !important;
}

.cw-widget-wrapper .cw-input-field {
	border: none !important;
	background: transparent !important;
	width: 100% !important;
	font-family: 'Raleway', sans-serif !important;
	font-size: 16px !important;
	outline: none !important;
	color: #000 !important;
	padding: 0 !important;
}

.cw-widget-wrapper .cw-checkbox-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	margin: 16px 0 !important;
}

.cw-widget-wrapper .cw-checkbox-item input {
	margin: 4px 0 0 !important;
	flex: none !important;
	width: 16px !important;
	height: 16px !important;
}

.cw-widget-wrapper .cw-checkbox-item label {
	font-size: 14px !important;
	cursor: pointer !important;
	color: #000 !important;
	line-height: 1.4 !important;
}

.cw-widget-wrapper .cw-submit-btn {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	max-width: 160px !important;
	height: 40px !important;
	background: #00B0C2 !important;
	border: none !important;
	border-radius: 100px !important;
	cursor: pointer !important;
	transition: background 0.3s ease !important;
	font-family: 'Raleway', sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
}

.cw-widget-wrapper .cw-submit-btn:hover {
	background: #009DAD !important;
}

.cw-widget-wrapper .cw-submit-btn:disabled {
	background: #a5dce2 !important;
	cursor: not-allowed !important;
}

.cw-widget-wrapper .cw-confirmation-frame {
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 32px !important;
	border-radius: 20px !important;
	position: relative !important;
	width: 100% !important;
}

.cw-widget-wrapper .cw-text-stack {
	text-align: center !important;
}

.cw-widget-wrapper .cw-h4-confirm {
	font-weight: 700 !important;
	font-size: 24px !important;
	text-align: center !important;
	color: #000 !important;
	margin: 0 !important;
}

.cw-widget-wrapper .cw-body-confirm {
	font-weight: 400 !important;
	font-size: 18px !important;
	text-align: center !important;
	color: #000 !important;
	margin: 0 !important;
}

.cw-widget-wrapper .cw-user-email {
	font-weight: 700 !important;
	color: #00B0C2 !important;
}

.cw-widget-wrapper .cw-illustration-container {
	margin-top: 24px !important;
}

.cw-widget-wrapper .cw-illustration-container img {
	max-width: 100% !important;
	height: auto !important;
}

/* --------------------------------------------------------------------------
   Footer newsletter form
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Footer newsletter

   Values taken from the Brevo embed it replaces, cross-checked against
   sib-styles.css. Every declaration is !important so theme and Elementor
   global styles cannot win. Targets this plugin's own markup only.
   -------------------------------------------------------------------------- */

.cw-footer-form {
	display: block !important;
	font-size: 16px !important;
	font-family: 'Roboto', Helvetica, Arial, sans-serif !important;
	text-align: center !important;
	background: #F5F7FB !important;
	border-radius: 8px !important;
	margin: 0 !important;
	padding: 32px !important;
	width: auto !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

.cw-footer-form form {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 16px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 !important;
	text-align: center !important;
}

.cw-footer-form form > p {
	flex: 1 1 100% !important;
	margin: 0 !important;
	font-size: 20px !important;
	line-height: 1.5 !important;
	font-weight: 700 !important;
	font-family: 'Raleway', sans-serif !important;
	color: #3C4858 !important;
	text-align: left !important;
}

/* Email field. Brevo wrapped this in .entry__field; here it is the input itself. */
.cw-footer-form input[name="EMAIL"] {
	display: block !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	width: auto !important;
	height: 48px !important;
	min-height: 48px !important;
	padding: 0 12px !important;
	background: #ffffff !important;
	border: 1px solid #c0ccda !important;
	border-radius: 100px !important;
	box-shadow: none !important;
	font-family: 'Raleway', sans-serif !important;
	font-size: 16px !important;
	color: #000000 !important;
	outline: 0 !important;
	appearance: none !important;
}

.cw-footer-form input[name="EMAIL"]::placeholder {
	color: #c0ccda !important;
	opacity: 1 !important;
	text-align: left !important;
	font-family: Helvetica, sans-serif !important;
}

.cw-footer-form input[name="EMAIL"]:focus {
	border-color: #c0ccda !important;
	box-shadow: 0 0 0 2px #c9e1f4 !important;
}

/* The empty inline label Brevo used to hold per-field errors. */
.cw-footer-form form > label:not([for]) {
	display: none !important;
}

.cw-footer-form button[type="submit"] {
	display: inline-flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	height: 48px !important;
	min-height: 48px !important;
	line-height: 23px !important;
	padding: 0 18px !important;
	margin: 0 !important;
	border-radius: 100px !important;
	text-align: left !important;
	cursor: pointer !important;
}

/* Brevo's paper-plane glyph is decorative only. It stays hidden at rest so the
   button is text-only; the spinner below is the only moving part, and it appears
   only while .is-loading is on the button. */
.cw-footer-form button[type="submit"] .cw-btn-icon {
	display: none !important;
}

/* Spinner. Hidden until the button carries .is-loading, which the submit
   handler toggles. Uses currentColor so it follows the button's text colour
   in both themes without extra rules. */
.cw-footer-form button[type="submit"] .cw-spinner {
	display: none !important;
	width: 20px !important;
	height: 20px !important;
	margin-right: 10px !important;
	flex: none !important;
	animation: cw-spin 0.7s linear infinite !important;
}

.cw-footer-form button[type="submit"].is-loading .cw-spinner {
	display: block !important;
}

.cw-footer-form button[type="submit"].is-loading .cw-btn-icon {
	display: none !important;
}

.cw-footer-form button[type="submit"].is-loading {
	opacity: 0.75 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

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

@media (prefers-reduced-motion: reduce) {
	.cw-footer-form button[type="submit"] .cw-spinner {
		animation: none !important;
	}
}

/* Consent checkbox, only rendered when the setting is on. */
.cw-footer-form .form__label-row {
	display: block !important;
	margin: 0 0 12px !important;
	text-align: left !important;
}

.cw-footer-form .entry__choice {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
}

.cw-footer-form .entry__choice input[type="checkbox"] {
	margin: 3px 0 0 !important;
	flex: none !important;
	width: 16px !important;
	height: 16px !important;
}

.cw-footer-form .entry__choice label {
	font-size: 14px !important;
	line-height: 1.45 !important;
	color: #3C4858 !important;
	cursor: pointer !important;
}

/* Success / error panels. They replace the form (see .is-done below) rather
   than pushing it around, so the footer's height stays stable. */
.cw-footer-form .cw-msg {
	display: none !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex: 1 1 100% !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 16px 20px !important;
	font-size: 16px !important;
	line-height: 1.45 !important;
	font-weight: 500 !important;
	font-family: 'Raleway', sans-serif !important;
	text-align: left !important;
	border-radius: 100px !important;
}

.cw-footer-form .cw-msg.is-visible {
	display: flex !important;
	animation: cw-msg-in 0.25s ease-out both;
}

@keyframes cw-msg-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.cw-footer-form .cw-msg svg {
	width: 22px !important;
	height: 22px !important;
	flex: none !important;
	margin-right: 14px !important;
	fill: currentColor !important;
}

/* On confirmation only the field and the button step aside; the heading stays
   put so the card does not lose its context. */
.cw-footer-form.is-done input[name="EMAIL"],
.cw-footer-form.is-done button[type="submit"],
.cw-footer-form.is-done form > label:not([for]) {
	display: none !important;
}

/* Success reads as the brand teal, not a generic "Bootstrap green"; errors stay
   red so the two are never confused. */
.cw-footer-form .cw-msg[data-role="error"] {
	color: #8A1F1F !important;
	background: #FDECEC !important;
	border: 1px solid #F5B5B5 !important;
}

.cw-footer-form .cw-msg[data-role="success"] {
	color: #0A5560 !important;
	background: #E4F6F9 !important;
	border: 1px solid #9BD9E3 !important;
}

/* On the dark footer the panel is a translucent teal chip, not a light box. */
.cw-footer-form[data-theme="dark"] .cw-msg {
	padding: 16px 22px !important;
	border-radius: 100px !important;
}

.cw-footer-form[data-theme="dark"] .cw-msg[data-role="success"] {
	color: #FFFFFF !important;
	background: rgba(0, 176, 194, 0.18) !important;
	border: 1px solid rgba(0, 176, 194, 0.55) !important;
}

.cw-footer-form[data-theme="dark"] .cw-msg[data-role="success"] svg {
	fill: #00B0C2 !important;
}

.cw-footer-form[data-theme="dark"] .cw-msg[data-role="error"] {
	color: #FFE3E3 !important;
	background: rgba(220, 60, 60, 0.18) !important;
	border: 1px solid rgba(255, 120, 120, 0.45) !important;
}

.cw-footer-form input[name="cw_website"] {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Footer newsletter — dark

   Values lifted from the Custom CSS the dark footer template (Footer Black,
   13318) already carried, which targeted Brevo's .sib-form. Reproduced so the
   swap is visually identical: inverted button, pill field, translucent card,
   flex row with a fixed-width button that stacks under 1024px.
   -------------------------------------------------------------------------- */

.cw-footer-form[data-theme="dark"] {
	background: rgba(255, 255, 255, 0.20) !important;
	padding: 30px !important;
	border-radius: 8px !important;
}

.cw-footer-form[data-theme="dark"] form > p {
	color: #FFFFFF !important;
	font-size: 20px !important;
	font-weight: 500 !important;
}

/* Row layout is set on the base .cw-footer-form form rule; dark only needs its
   own colours. */
.cw-footer-form[data-theme="dark"] input[name="EMAIL"] {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	height: 48px !important;
	min-height: 48px !important;
	padding: 0 24px !important;
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.50) !important;
	border-radius: 100px !important;
	box-shadow: none !important;
}

.cw-footer-form[data-theme="dark"] input[name="EMAIL"]:focus {
	border-color: #00B0C2 !important;
	box-shadow: none !important;
	outline: none !important;
}

.cw-footer-form[data-theme="dark"] button[type="submit"] {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0 !important;
	height: 48px !important;
	min-height: 48px !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	padding: 0 32px !important;
	background: #FFFFFF !important;
	color: #00B0C2 !important;
	border-radius: 100px !important;
	border: none !important;
	white-space: nowrap !important;
}

.cw-footer-form[data-theme="dark"] button[type="submit"] .cw-btn-icon {
	fill: #00B0C2 !important;
}

.cw-footer-form[data-theme="dark"] button[type="submit"]:hover {
	background: #69D757 !important;
	color: #FFFFFF !important;
}

.cw-footer-form[data-theme="dark"] button[type="submit"]:hover .cw-btn-icon {
	fill: #FFFFFF !important;
}

.cw-footer-form[data-theme="dark"] button[type="submit"]:disabled {
	background: #8f91a5 !important;
	color: #FFFFFF !important;
}

.cw-footer-form[data-theme="dark"] input[name="cw_website"] {
	display: none !important;
}

@media (max-width: 1024px) {
	.cw-footer-form[data-theme="dark"] {
		padding: 20px !important;
	}

	.cw-footer-form[data-theme="dark"] input[name="EMAIL"],
	.cw-footer-form[data-theme="dark"] button[type="submit"] {
		flex: 1 1 100% !important;
		width: 100% !important;
	}

	.cw-footer-form[data-theme="dark"] button[type="submit"] {
		margin-top: 0 !important;
	}
}

/* --------------------------------------------------------------------------
   Focus visibility + responsive
   -------------------------------------------------------------------------- */

.cw-widget-wrapper :focus-visible,
.cw-footer-form :focus-visible {
	outline: 2px solid #009DAD;
	outline-offset: 2px;
}

@media (max-width: 800px) {
	.cw-widget-wrapper .cw-main-frame {
		flex-direction: column;
		padding: 20px;
	}

	.cw-widget-wrapper .cw-image-section {
		display: none;
	}

	.cw-widget-wrapper .cw-widget-title {
		margin-bottom: 24px;
	}
}

@media (max-width: 480px) {
	.cw-footer-form .cw-footer-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cw-footer-form .cw-footer-btn,
	.cw-widget-wrapper .cw-submit-btn {
		transition: none;
	}
}