/* ═══════════════════════════════════════════════════════════════════
   Subscribe Now Widget — Frontend Styles
   Uses !important on layout-critical rules to prevent Elementor
   and theme resets from collapsing the form.
═══════════════════════════════════════════════════════════════════ */

/* ── Widget wrapper ─────────────────────────────────────────────── */
.snw-widget-wrap {
	width: 100% !important;
}

.snw-form-outer {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
}

/* ── The pill container (FORM element) ──────────────────────────── */
.snw-form-wrap {
	display:          flex !important;
	flex-direction:   row !important;
	align-items:      stretch !important;
	background-color: #2a2a2a !important;
	border:           1px solid #444444 !important;
	border-radius:    10px !important;
	overflow:         hidden !important;
	min-height:       58px !important;
	width:            100% !important;
	box-sizing:       border-box !important;
	padding:          0 !important;
	margin:           0 !important;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.snw-form-wrap:focus-within {
	border-color: #666666 !important;
	box-shadow:   0 0 0 3px rgba(192, 0, 30, 0.25) !important;
}

/* ── Inputs ─────────────────────────────────────────────────────── */
.snw-input {
	flex:             1 1 auto !important;
	-webkit-flex:     1 1 auto !important;
	border:           none !important;
	outline:          none !important;
	box-shadow:       none !important;
	background:       transparent !important;
	color:            #ffffff !important;
	font-size:        15px !important;
	padding:          0 20px !important;
	margin:           0 !important;
	line-height:      1 !important;
	height:           auto !important;
	min-height:       0 !important;
	border-radius:    0 !important;
	width:            100% !important;
	font-family:      inherit !important;
	display:          block !important;
}

.snw-input::placeholder {
	color:   #888888 !important;
	opacity: 1 !important;
}

/* Name field gets a subtle right divider and fixed width */
.snw-name-input {
	flex:        0 0 28% !important;
	max-width:   28% !important;
	border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── Submit Button ──────────────────────────────────────────────── */
.snw-submit-btn {
	flex-shrink:      0 !important;
	-webkit-flex-shrink: 0 !important;
	flex-grow:        0 !important;
	background-color: #c0001e !important;
	color:            #ffffff !important;
	border:           none !important;
	border-radius:    10px !important;
	padding:          0 32px !important;
	margin:           0 !important;
	font-size:        14px !important;
	font-weight:      700 !important;
	letter-spacing:   1.5px !important;
	text-transform:   uppercase !important;
	cursor:           pointer !important;
	font-family:      inherit !important;
	display:          flex !important;
	align-items:      center !important;
	justify-content:  center !important;
	gap:              10px !important;
	min-height:       58px !important;
	height:           auto !important;
	white-space:      nowrap !important;
	line-height:      1 !important;
	box-shadow:       none !important;
	outline:          none !important;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.snw-submit-btn:hover {
	background-color: #a00019 !important;
}

.snw-submit-btn:active {
	transform: scale(0.97);
}

.snw-submit-btn:disabled {
	opacity: 0.7 !important;
	cursor:  not-allowed !important;
}

/* Ensure text span inside button is visible */
.snw-btn-label {
	display:     inline-block !important;
	color:       inherit !important;
	font-size:   inherit !important;
	font-weight: inherit !important;
}

/* ── Loading spinner ────────────────────────────────────────────── */
.snw-btn-spinner {
	display:       none !important;
	width:         18px;
	height:        18px;
	border:        2px solid rgba(255, 255, 255, 0.3);
	border-top:    2px solid #ffffff;
	border-radius: 50%;
	animation:     snw-spin 0.7s linear infinite;
	flex-shrink:   0;
}

.snw-submit-btn.snw-loading .snw-btn-spinner {
	display: inline-block !important;
}

.snw-submit-btn.snw-loading .snw-btn-label {
	opacity: 0.6;
}

@keyframes snw-spin {
	to { transform: rotate(360deg); }
}

/* ── Inline error ───────────────────────────────────────────────── */
.snw-error-msg {
	color:      #ff6b6b !important;
	font-size:  13px !important;
	margin:     8px 0 0 !important;
	min-height: 0 !important;
	display:    none !important;
	padding:    0 !important;
}

.snw-error-msg.snw-visible {
	display: block !important;
}

/* ── Thank-you message ──────────────────────────────────────────── */
.snw-thankyou {
	display:     none !important;
	color:       #ffffff !important;
	font-size:   18px !important;
	font-weight: 600 !important;
	padding:     16px 4px !important;
	text-align:  center !important;
}

.snw-thankyou.snw-visible {
	display:   block !important;
	animation: snw-fadein 0.5s ease forwards;
}

@keyframes snw-fadein {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive — keep single-row pill on ALL screen sizes ──────── */
@media (max-width: 600px) {
	.snw-form-wrap {
		flex-direction: row !important;   /* NEVER stack */
		min-height:     50px !important;
	}
	.snw-input {
		font-size: 13px !important;
		padding:   0 12px !important;
	}
	.snw-submit-btn {
		padding:       0 16px !important;
		font-size:     12px !important;
		letter-spacing: 1px !important;
		min-height:    50px !important;
		border-radius: 10px !important;
	}
}

@media (max-width: 360px) {
	.snw-submit-btn {
		padding:   0 12px !important;
		font-size: 11px !important;
	}
}