/**
 * Boranet Email Subscribe Styles
 * Clean inline design based on Bootstrap 5
 * High specificity selectors to override theme styles
 */

/* Container - High specificity to override theme styles */
div.boranet-email-subscribe-container {
	max-width: 600px !important;
	margin: 20px auto !important;
	padding: 0 15px !important;
	box-sizing: border-box !important;
}

/* Form */
div.boranet-email-subscribe-container .boranet-email-subscribe-form,
div.boranet-email-subscribe-container form.boranet-email-subscribe-form {
	width: 100% !important;
}

/* Email Subscribe Group - Inline Layout */
div.boranet-email-subscribe-container .email-subscribe-group {
	display: flex !important;
	gap: 10px !important;
	align-items: stretch !important;
	width: 100% !important;
}

/* Email Input - Critical styling to override theme */
div.boranet-email-subscribe-container .email-subscribe-group .email-input,
div.boranet-email-subscribe-container .email-subscribe-group input.email-input {
	flex: 1 !important;
	border: 2px solid #e0e0e0 !important;
	border-radius: 8px !important;
	padding: 0.75rem 1rem !important;
	font-size: 1rem !important;
	transition: all 0.3s ease !important;
	min-width: 0 !important; /* Prevent flex overflow */
	background-color: #fff !important;
	color: #212529 !important;
	line-height: 1.5 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
}

div.boranet-email-subscribe-container .email-subscribe-group .email-input:focus,
div.boranet-email-subscribe-container .email-subscribe-group input.email-input:focus {
	border-color: #0d6efd !important;
	box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15) !important;
	outline: none !important;
}

div.boranet-email-subscribe-container .email-subscribe-group .email-input::placeholder,
div.boranet-email-subscribe-container .email-subscribe-group input.email-input::placeholder {
	color: #6c757d !important;
	opacity: 0.7 !important;
}

/* Subscribe Button */
div.boranet-email-subscribe-container .email-subscribe-group .subscribe-btn,
div.boranet-email-subscribe-container .email-subscribe-group button.subscribe-btn {
	background-color: #0d6efd !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 0.75rem 1.5rem !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	transition: all 0.3s ease !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	color: #fff !important;
	text-align: center !important;
}

div.boranet-email-subscribe-container .email-subscribe-group .subscribe-btn:hover,
div.boranet-email-subscribe-container .email-subscribe-group button.subscribe-btn:hover {
	background-color: #0b5ed7 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3) !important;
}

div.boranet-email-subscribe-container .email-subscribe-group .subscribe-btn:active,
div.boranet-email-subscribe-container .email-subscribe-group button.subscribe-btn:active {
	transform: translateY(0) !important;
}

div.boranet-email-subscribe-container .email-subscribe-group .subscribe-btn:disabled,
div.boranet-email-subscribe-container .email-subscribe-group button.subscribe-btn:disabled {
	background-color: #6c757d !important;
	cursor: not-allowed !important;
	transform: none !important;
}

/* Message Container */
div.boranet-email-subscribe-container #boranet-email-message-container,
#boranet-email-message-container {
	margin-bottom: 1rem !important;
}

div.boranet-email-subscribe-container #boranet-email-message-container .alert,
#boranet-email-message-container .alert {
	border-radius: 8px !important;
	border: none !important;
	padding: 1rem 1.25rem !important;
	font-size: 0.95rem !important;
	animation: slideDown 0.3s ease-out !important;
	margin-bottom: 1rem !important;
}

div.boranet-email-subscribe-container #boranet-email-message-container .alert-success,
#boranet-email-message-container .alert-success {
	background-color: #d1e7dd !important;
	color: #0f5132 !important;
}

div.boranet-email-subscribe-container #boranet-email-message-container .alert-danger,
#boranet-email-message-container .alert-danger {
	background-color: #f8d7da !important;
	color: #842029 !important;
}

/* Loading Spinner */
div.boranet-email-subscribe-container .spinner-border-sm {
	width: 1rem !important;
	height: 1rem !important;
	border-width: 0.15em !important;
}

/* Smooth Animations */
@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Form Validation States */
div.boranet-email-subscribe-container .email-subscribe-group .email-input:invalid:not(:placeholder-shown),
div.boranet-email-subscribe-container .email-subscribe-group input.email-input:invalid:not(:placeholder-shown) {
	border-color: #dc3545 !important;
}

div.boranet-email-subscribe-container .email-subscribe-group .email-input:valid:not(:placeholder-shown),
div.boranet-email-subscribe-container .email-subscribe-group input.email-input:valid:not(:placeholder-shown) {
	border-color: #198754 !important;
}

/* Focus Outline for Accessibility */
div.boranet-email-subscribe-container .email-subscribe-group .email-input:focus-visible,
div.boranet-email-subscribe-container .email-subscribe-group input.email-input:focus-visible,
div.boranet-email-subscribe-container .email-subscribe-group .subscribe-btn:focus-visible,
div.boranet-email-subscribe-container .email-subscribe-group button.subscribe-btn:focus-visible {
	outline: 2px solid #0d6efd !important;
	outline-offset: 2px !important;
}

/* Responsive Design - Stack on Mobile */
@media (max-width: 576px) {
	div.boranet-email-subscribe-container .email-subscribe-group {
		flex-direction: column !important;
		gap: 12px !important;
	}

	div.boranet-email-subscribe-container .email-subscribe-group .subscribe-btn,
	div.boranet-email-subscribe-container .email-subscribe-group button.subscribe-btn {
		width: 100% !important;
		padding: 0.875rem 1.5rem !important;
	}
}

/* Tablet View */
@media (max-width: 768px) {
	div.boranet-email-subscribe-container {
		margin: 15px auto !important;
	}

	div.boranet-email-subscribe-container .email-subscribe-group .email-input,
	div.boranet-email-subscribe-container .email-subscribe-group input.email-input {
		font-size: 0.95rem !important;
	}

	div.boranet-email-subscribe-container .email-subscribe-group .subscribe-btn,
	div.boranet-email-subscribe-container .email-subscribe-group button.subscribe-btn {
		font-size: 0.95rem !important;
		padding: 0.75rem 1.25rem !important;
	}
}