/* ==========================================================================
   Estilos do Formulário de Notificação de Estoque no Front-end (WNE)
   ========================================================================== */

.wne-product-notification {
	margin: 20px 0 !important;
	padding: 20px 22px !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	box-sizing: border-box !important;
}

.wne-notification-desc {
	font-size: 14px !important;
	color: #475569 !important;
	margin-bottom: 16px !important;
	line-height: 1.5 !important;
}

.wne-notification-desc p {
	margin: 0 0 8px 0 !important;
}

.wne-notification-desc p:last-child {
	margin-bottom: 0 !important;
}

/* Container flexível */
.wne-form-notification,
#form-notification {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* Inputs de Nome e E-mail (Lado a lado no Desktop) */
.wne-form-notification input.notification_input,
#form-notification input.notification_input,
.wne-form-notification .notification_nome,
.wne-form-notification .notification_email,
#form-notification #notification_nome,
#form-notification #notification_email {
	flex: 1 1 calc(50% - 6px) !important;
	width: calc(50% - 6px) !important;
	min-width: 0 !important;
	padding: 12px 14px !important;
	font-size: 14px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 6px !important;
	outline: none !important;
	background: #ffffff !important;
	color: #1e293b !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	line-height: 1.4 !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.wne-form-notification input.notification_input:focus,
#form-notification input.notification_input:focus {
	border-color: #333333 !important;
	box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.12) !important;
}

/* Botão Avise-me (Abaixo com 100% de largura e respiro vertical) */
.wne-form-notification .notification_enviar,
#form-notification #notification_enviar,
#notification_enviar {
	flex: 1 1 100% !important;
	width: 100% !important;
	margin-top: 4px !important;
	padding: 13px 20px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	background-color: #333333 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	text-align: center !important;
	text-transform: uppercase !important;
	display: block !important;
	box-sizing: border-box !important;
	transition: background-color 0.2s ease, opacity 0.2s ease !important;
}

.wne-form-notification .notification_enviar:hover,
#form-notification #notification_enviar:hover,
#notification_enviar:hover {
	background-color: #1a1a1a !important;
	color: #ffffff !important;
}

.wne-form-notification .notification_enviar.disabled,
#form-notification #notification_enviar.disabled,
#notification_enviar.disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* Mensagens de feedback */
.wne-notif-feedback,
.alert-send,
.alert-send-sucesso {
	width: 100% !important;
	padding: 10px 14px !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	margin-bottom: 12px !important;
	display: none;
	box-sizing: border-box !important;
}

.wne-notif-feedback-sucesso,
.alert-send-sucesso {
	background-color: #dcfce7 !important;
	border: 1px solid #86efac !important;
	color: #15803d !important;
}

.wne-notif-feedback-erro,
.alert-send {
	background-color: #fee2e2 !important;
	border: 1px solid #fca5a5 !important;
	color: #b91c1c !important;
}

/* ==========================================================================
   Mobile (Telas até 600px): Um abaixo do outro com 100% de largura
   ========================================================================== */
@media (max-width: 600px) {
	.wne-product-notification {
		padding: 16px 14px !important;
	}

	.wne-form-notification,
	#form-notification {
		flex-direction: column !important;
		gap: 12px !important;
	}

	.wne-form-notification input.notification_input,
	#form-notification input.notification_input,
	.wne-form-notification .notification_nome,
	.wne-form-notification .notification_email,
	#form-notification #notification_nome,
	#form-notification #notification_email {
		flex: 1 1 100% !important;
		width: 100% !important;
		margin: 0 !important;
	}

	.wne-form-notification .notification_enviar,
	#form-notification #notification_enviar,
	#notification_enviar {
		width: 100% !important;
		margin-top: 4px !important;
	}
}