/*--------------------------------------------------------------
# Running Stitches Brevo Newsletter Popup
--------------------------------------------------------------*/

:root {

	/*----------------------------------------------------------
	# Brand Colours
	----------------------------------------------------------*/

	--rs-newsletter-primary: #2f4f4f;
	--rs-newsletter-accent: #e9967a;

	--rs-newsletter-bg: #ffffff;
	--rs-newsletter-text: #333333;
	--rs-newsletter-muted: #777777;

	--rs-newsletter-border: #d8cfc5;

	--rs-newsletter-overlay: rgba(0, 0, 0, 0.62);


	/*----------------------------------------------------------
	# Popup Sizing
	----------------------------------------------------------*/

	--rs-newsletter-width: 560px;
	--rs-newsletter-padding: 42px;

	--rs-newsletter-radius: 8px;

	--rs-newsletter-shadow:
		0 20px 60px rgba(0, 0, 0, 0.28);


	/*----------------------------------------------------------
	# Form Fields
	----------------------------------------------------------*/

	--rs-newsletter-input-height: 50px;
	--rs-newsletter-input-radius: 5px;

	--rs-newsletter-input-padding:
		10px 14px;


	/*----------------------------------------------------------
	# Button
	----------------------------------------------------------*/

	--rs-newsletter-button-radius: 5px;

	--rs-newsletter-button-padding:
		12px 24px;
}


/*--------------------------------------------------------------
# Popup Wrapper
--------------------------------------------------------------*/

.rs-newsletter-popup {

	position: fixed;
	inset: 0;

	z-index: 999999;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 30px;

	visibility: hidden;
	opacity: 0;

	pointer-events: none;

	transition:
		opacity 0.25s ease,
		visibility 0.25s ease;
}

.rs-newsletter-popup.is-open {

	visibility: visible;
	opacity: 1;

	pointer-events: auto;
}


/*--------------------------------------------------------------
# Background Overlay
--------------------------------------------------------------*/

.rs-newsletter-popup-overlay {

	position: absolute;
	inset: 0;

	background: var(--rs-newsletter-overlay);

	backdrop-filter: blur(3px);
}


/*--------------------------------------------------------------
# Popup Box
--------------------------------------------------------------*/

.rs-newsletter-popup-dialog {

	position: relative;

	z-index: 2;

	width: 100%;
	max-width: var(--rs-newsletter-width);

	max-height: calc(100vh - 60px);

	overflow-y: auto;

	background: var(--rs-newsletter-bg);

	border-radius: var(--rs-newsletter-radius);

	box-shadow: var(--rs-newsletter-shadow);

	box-sizing: border-box;
}


/*--------------------------------------------------------------
# Popup Content
--------------------------------------------------------------*/

.rs-newsletter-popup-content {

	padding: var(--rs-newsletter-padding);

	box-sizing: border-box;
}


/*--------------------------------------------------------------
# Reset Brevo Generated Layout
--------------------------------------------------------------*/

.rs-newsletter-popup .sib-form,
.rs-newsletter-popup .sib-form-container,
.rs-newsletter-popup #sib-container {

	width: 100%;
	max-width: none !important;

	margin: 0;
	padding: 0;

	background: transparent !important;

	border: 0 !important;

	box-shadow: none !important;

	box-sizing: border-box;
}


/*--------------------------------------------------------------
# Close Button
--------------------------------------------------------------*/

.rs-newsletter-popup-close {

	position: absolute;

	top: 10px;
	right: 12px;

	z-index: 5;

	width: 38px;
	height: 38px;

	padding: 0;

	background: transparent;

	border: 0;

	color: var(--rs-newsletter-primary);

	font-size: 34px;
	font-weight: 300;

	line-height: 1;

	cursor: pointer;

	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

.rs-newsletter-popup-close:hover,
.rs-newsletter-popup-close:focus {

	color: var(--rs-newsletter-accent);

	transform: scale(1.08);

	outline: none;
}


/*--------------------------------------------------------------
# Heading
--------------------------------------------------------------*/

.rs-newsletter-heading {

	margin-bottom: 24px;

	text-align: center;
}

.rs-newsletter-heading h2 {

	margin: 0 0 12px;

	color: var(--rs-newsletter-primary);

	font-size: 32px;
	line-height: 1.2;
}

.rs-newsletter-heading p {

	margin: 0;

	color: var(--rs-newsletter-text);

	font-size: 16px;
	line-height: 1.6;
}


/*--------------------------------------------------------------
# Form Label
--------------------------------------------------------------*/

.rs-newsletter-popup .entry__label {

	display: block;

	margin-bottom: 8px;

	color: var(--rs-newsletter-primary);

	font-size: 15px;
	font-weight: 600;

	line-height: 1.4;
}


/*--------------------------------------------------------------
# Email Input
--------------------------------------------------------------*/

.rs-newsletter-popup .entry__field {

	width: 100%;
}

.rs-newsletter-popup .entry__field input {

	display: block;

	width: 100%;

	min-height: var(--rs-newsletter-input-height);

	padding: var(--rs-newsletter-input-padding);

	color: var(--rs-newsletter-text);

	background: #ffffff;

	border: 1px solid var(--rs-newsletter-border);

	border-radius: var(--rs-newsletter-input-radius);

	box-sizing: border-box;

	font-size: 16px;

	box-shadow: none;
}

.rs-newsletter-popup .entry__field input::placeholder {

	color: #a0a0a0;

	opacity: 1;
}

.rs-newsletter-popup .entry__field input:focus {

	border-color: var(--rs-newsletter-primary);

	outline: none;

	box-shadow:
		0 0 0 2px rgba(47, 79, 79, 0.12);
}


/*--------------------------------------------------------------
# Email Help Text
--------------------------------------------------------------*/

.rs-newsletter-popup .entry__specification {

	display: block;

	margin-top: 7px;

	color: var(--rs-newsletter-muted);

	font-size: 12px;

	line-height: 1.4;
}


/*--------------------------------------------------------------
# Brevo Error Message
--------------------------------------------------------------*/

.rs-newsletter-popup .entry__error {

	display: block;

	margin-top: 8px;

	color: #8a2428;

	font-size: 13px;

	line-height: 1.4;
}


/*--------------------------------------------------------------
# Subscribe Button
--------------------------------------------------------------*/

.rs-newsletter-submit {

	margin-top: 22px;

	text-align: center;
}

.rs-newsletter-popup .sib-form-block__button {

	display: inline-block;

	min-width: 180px;

	padding: var(--rs-newsletter-button-padding);

	background: var(--rs-newsletter-accent);

	border: 2px solid var(--rs-newsletter-accent);

	border-radius: var(--rs-newsletter-button-radius);

	color: #ffffff;

	font-size: 17px;
	font-weight: 700;

	line-height: 1.2;

	text-align: center;

	cursor: pointer;

	box-shadow: none;

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

.rs-newsletter-popup .sib-form-block__button:hover,
.rs-newsletter-popup .sib-form-block__button:focus {

	background: var(--rs-newsletter-primary);

	border-color: var(--rs-newsletter-primary);

	color: #ffffff;

	transform: translateY(-1px);

	outline: none;
}


/*--------------------------------------------------------------
# Brevo Success / Error Panels
--------------------------------------------------------------*/

.rs-newsletter-popup .sib-form-message-panel {

	margin: 0 0 20px;

	padding: 12px 14px;

	border-radius: 5px;

	box-sizing: border-box;
}

.rs-newsletter-popup #success-message {

	color: #2c5e35;

	background: #edf7ef;

	border: 1px solid #8fc89a;
}

.rs-newsletter-popup #error-message {

	color: #8a2428;

	background: #fdf0f0;

	border: 1px solid #d89a9d;
}


/*--------------------------------------------------------------
# Brevo Hidden Anti-Bot Field
--------------------------------------------------------------*/

.rs-newsletter-popup .input--hidden {

	position: absolute !important;

	left: -9999px !important;

	width: 1px !important;
	height: 1px !important;

	overflow: hidden !important;

	opacity: 0 !important;
}


/*--------------------------------------------------------------
# Prevent Page Scroll While Popup Open
--------------------------------------------------------------*/

body.rs-newsletter-popup-open {

	overflow: hidden;
}


/*--------------------------------------------------------------
# Tablet
--------------------------------------------------------------*/

@media (max-width: 980px) {

	:root {

		--rs-newsletter-width: 520px;

		--rs-newsletter-padding: 36px;

	}

	.rs-newsletter-popup {

		padding: 24px;
	}

	.rs-newsletter-heading h2 {

		font-size: 30px;
	}

}


/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media (max-width: 767px) {

	:root {

		--rs-newsletter-width: 100%;

		--rs-newsletter-padding: 30px 22px;

		--rs-newsletter-radius: 7px;

	}

	.rs-newsletter-popup {

		align-items: center;

		padding: 16px;
	}

	.rs-newsletter-popup-dialog {

		max-height: calc(100vh - 32px);
	}

	.rs-newsletter-heading {

		margin-bottom: 20px;
	}

	.rs-newsletter-heading h2 {

		font-size: 27px;
	}

	.rs-newsletter-heading p {

		font-size: 15px;

		line-height: 1.55;
	}

	.rs-newsletter-popup .entry__label {

		font-size: 14px;
	}

	.rs-newsletter-popup .entry__field input {

		min-height: 48px;

		font-size: 16px;
	}

	.rs-newsletter-popup .sib-form-block__button {

		width: 100%;

		min-width: 0;

		font-size: 16px;
	}

}


/*--------------------------------------------------------------
# Small Mobile
--------------------------------------------------------------*/

@media (max-width: 480px) {

	:root {

		--rs-newsletter-padding: 26px 18px;

	}

	.rs-newsletter-popup {

		padding: 10px;
	}

	.rs-newsletter-popup-dialog {

		max-height: calc(100vh - 20px);
	}

	.rs-newsletter-popup-close {

		top: 6px;
		right: 7px;

		width: 34px;
		height: 34px;

		font-size: 30px;
	}

	.rs-newsletter-heading h2 {

		font-size: 25px;
	}

	.rs-newsletter-heading p {

		font-size: 14px;
	}

	.rs-newsletter-popup .entry__specification {

		font-size: 11px;
	}

}


/*--------------------------------------------------------------
# Reduced Motion
--------------------------------------------------------------*/

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

	.rs-newsletter-popup,
	.rs-newsletter-popup-close,
	.rs-newsletter-popup .sib-form-block__button {

		transition: none;
	}

}