/* BSX Newsletter — uses site palette: #21201e bg / #37353a card / #edcb81 accent / #f1eee7 text */

.bsx-nl-form-wrap {
	--nl-bg: #37353a;
	--nl-accent: #edcb81;
	--nl-text: #f1eee7;
	--nl-border: #555;
	max-width: 420px;
}

.bsx-nl-form {
	background: var(--nl-bg);
	border: 1px solid var(--nl-border);
	border-radius: 8px;
	padding: 20px;
}

.bsx-nl-label {
	display: block;
	color: var(--nl-text);
	font-size: 14px;
	margin-bottom: 10px;
}

.bsx-nl-row {
	display: flex;
	gap: 8px;
}

.bsx-nl-input {
	flex: 1;
	background: #21201e;
	border: 1px solid var(--nl-border);
	border-radius: 4px;
	color: var(--nl-text);
	padding: 10px 12px;
	font-size: 14px;
}

.bsx-nl-input:focus {
	outline: none;
	border-color: var(--nl-accent);
}

.bsx-nl-submit {
	background: var(--nl-accent);
	color: #21201e;
	border: none;
	border-radius: 4px;
	padding: 10px 16px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
}

.bsx-nl-submit:hover {
	background: #ffcc33;
}

.bsx-nl-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.bsx-nl-msg {
	margin: 10px 0 0;
	font-size: 13px;
	min-height: 16px;
}

.bsx-nl-msg-success {
	color: #00b746;
}

.bsx-nl-msg-error {
	color: #ef403c;
}

/* Modal trigger button (e.g. for a menu item / nav link) */
.bsx-nl-trigger-btn {
    background: #030204;
	color: #f1eee7;
	border: none;
	padding: 2px 2px;
	font-weight: 600;
	font-size: 35px;
	cursor: pointer;
}

/*.bsx-nl-trigger-btn:hover {
	background: #ffcc33;
}*/

/* Modal overlay */
.bsx-nl-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(3, 2, 4, 0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.bsx-nl-modal-overlay[hidden] {
	display: none;
}

.bsx-nl-modal-box {
	position: relative;
	background: transparent;
	max-width: 90vw;
	width: 440px;
}

.bsx-nl-modal-close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #edcb81;
	color: #21201e;
	border: none;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

body.bsx-nl-modal-open {
	overflow: hidden;
}

@media (max-width: 480px) {
	.bsx-nl-row {
		flex-direction: column;
	}

	.bsx-nl-modal-box {
		width: 92vw;
	}
}