/**
 * Estilos do Pop-up Newsletter (Frontend & Live Preview)
 * Protegido contra conflitos de CSS de temas e construtores (Elementor, Divi, Astra, etc.)
 */

#cpn-popup-overlay.cpn-overlay {
	position: fixed !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 999999 !important;
	background-color: var(--cpn-backdrop, rgba(0, 0, 0, 0.6)) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px !important;
	margin: 0 !important;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	box-sizing: border-box !important;
	backdrop-filter: blur(2px);
}

#cpn-popup-overlay.cpn-overlay.cpn-visible {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Posicionamentos verticais / de tela */
#cpn-popup-overlay.cpn-overlay.cpn-pos-center {
	align-items: center !important;
	justify-content: center !important;
}

#cpn-popup-overlay.cpn-overlay.cpn-pos-top {
	align-items: flex-start !important;
	justify-content: center !important;
	padding-top: var(--cpn-offset, 30px) !important;
}

#cpn-popup-overlay.cpn-overlay.cpn-pos-bottom {
	align-items: flex-end !important;
	justify-content: center !important;
	padding-bottom: var(--cpn-offset, 30px) !important;
}

#cpn-popup-overlay.cpn-overlay.cpn-pos-bottom-right {
	align-items: flex-end !important;
	justify-content: flex-end !important;
	padding-bottom: var(--cpn-offset, 30px) !important;
	padding-right: var(--cpn-offset, 30px) !important;
	background-color: transparent !important;
	backdrop-filter: none !important;
	pointer-events: none !important;
}

#cpn-popup-overlay.cpn-overlay.cpn-pos-bottom-right .cpn-modal {
	pointer-events: auto !important;
}

/* Caixa Principal do Modal */
#cpn-popup-overlay .cpn-modal {
	position: relative !important;
	width: 100% !important;
	max-width: var(--cpn-max-width, 760px) !important;
	max-height: 92vh !important;
	background-color: var(--cpn-bg-color, #ffffff) !important;
	border-radius: var(--cpn-radius, 16px) !important;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: row;
	align-items: stretch !important;
	gap: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	transform: translateY(18px) scale(0.97);
	transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
	box-sizing: border-box !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
}

#cpn-popup-overlay.cpn-visible .cpn-modal {
	transform: translateY(0) scale(1);
}

/* Variações de Layout */
#cpn-popup-overlay .cpn-modal.cpn-layout-image-left {
	flex-direction: row !important;
}

#cpn-popup-overlay .cpn-modal.cpn-layout-image-right {
	flex-direction: row-reverse !important;
}

#cpn-popup-overlay .cpn-modal.cpn-layout-image-top {
	flex-direction: column !important;
}

#cpn-popup-overlay .cpn-modal.cpn-layout-no-image {
	flex-direction: column !important;
}

/* Botão Fechar (blindado contra CSS de temas) */
#cpn-popup-overlay button.cpn-close-btn,
#cpn-popup-overlay .cpn-close-btn {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 30 !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	max-width: 36px !important;
	max-height: 36px !important;
	border-radius: 50% !important;
	border: none !important;
	outline: none !important;
	background: rgba(255, 255, 255, 0.92) !important;
	background-image: none !important;
	color: #1f2937 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16) !important;
	transition: transform 0.2s ease, background-color 0.2s ease !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
}

#cpn-popup-overlay button.cpn-close-btn:hover,
#cpn-popup-overlay .cpn-close-btn:hover {
	background: #ffffff !important;
	color: #111827 !important;
	transform: scale(1.08) !important;
}

#cpn-popup-overlay .cpn-close-btn svg {
	width: 18px !important;
	height: 18px !important;
	stroke: #1f2937 !important;
	fill: none !important;
	display: block !important;
	pointer-events: none !important;
}

/* Coluna de Foto (preenche 100% da altura e largura da coluna sem bordas brancas) */
#cpn-popup-overlay .cpn-media-col {
	flex: 0 0 46% !important;
	width: 46% !important;
	position: relative !important;
	min-height: 320px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background-color: transparent !important;
	overflow: hidden !important;
	align-self: stretch !important;
}

#cpn-popup-overlay .cpn-modal.cpn-layout-image-top .cpn-media-col {
	flex: 0 0 auto !important;
	width: 100% !important;
	height: 220px !important;
	min-height: 180px !important;
}

#cpn-popup-overlay .cpn-media-col img {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: var(--cpn-img-fit, cover) !important;
	object-position: center !important;
	display: block !important;
}

/* Coluna de Conteúdo */
#cpn-popup-overlay .cpn-content-col {
	flex: 1 1 54% !important;
	position: relative !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: var(--cpn-bg-color, #ffffff) !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	overflow-y: auto !important;
	display: flex !important;
	align-items: center !important;
}

#cpn-popup-overlay .cpn-content-overlay {
	position: absolute !important;
	inset: 0 !important;
	background-color: transparent !important;
	pointer-events: none !important;
	z-index: 1 !important;
}

#cpn-popup-overlay .cpn-content-col.cpn-has-bg-img .cpn-content-overlay {
	background-color: var(--cpn-overlay, rgba(255, 255, 255, 0.85)) !important;
}

#cpn-popup-overlay .cpn-content-inner {
	position: relative !important;
	z-index: 2 !important;
	width: 100% !important;
	padding: 38px 34px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	text-align: left !important;
}

/* Elementos de Texto */
#cpn-popup-overlay .cpn-badge {
	display: inline-block !important;
	padding: 5px 12px !important;
	font-size: 11px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	border-radius: 999px !important;
	background-color: var(--cpn-badge-bg, #f3f4f6) !important;
	color: var(--cpn-badge-text, #374151) !important;
	margin: 0 0 12px 0 !important;
}

#cpn-popup-overlay .cpn-title {
	margin: 0 0 10px 0 !important;
	padding: 0 !important;
	font-size: 26px !important;
	line-height: 1.22 !important;
	font-weight: 700 !important;
	color: var(--cpn-title-color, #111827) !important;
	text-transform: none !important;
	letter-spacing: -0.01em !important;
}

#cpn-popup-overlay .cpn-subtitle {
	margin: 0 0 22px 0 !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: var(--cpn-text-color, #4b5563) !important;
}

#cpn-popup-overlay .cpn-subtitle p {
	margin: 0 0 8px 0 !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: var(--cpn-text-color, #4b5563) !important;
}

#cpn-popup-overlay .cpn-subtitle p:last-child {
	margin-bottom: 0 !important;
}

/* Formulário e Inputs */
#cpn-popup-overlay .cpn-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 11px !important;
	margin: 0 !important;
	padding: 0 !important;
}

#cpn-popup-overlay .cpn-name-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 11px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

#cpn-popup-overlay .cpn-name-group.cpn-name-inline {
	flex-direction: row !important;
}

#cpn-popup-overlay .cpn-name-group.cpn-name-inline .cpn-field-wrap {
	flex: 1 1 50% !important;
}

#cpn-popup-overlay .cpn-field-wrap {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

#cpn-popup-overlay .cpn-field-disclaimer {
	display: block !important;
	margin: 5px 0 0 4px !important;
	padding: 0 !important;
	font-size: 11.5px !important;
	line-height: 1.35 !important;
	color: var(--cpn-text-color, #6b7280) !important;
	opacity: 0.85 !important;
	text-align: left !important;
}

#cpn-popup-overlay input.cpn-input {
	width: 100% !important;
	height: 46px !important;
	min-height: 46px !important;
	padding: 0 15px !important;
	font-size: 15px !important;
	line-height: 46px !important;
	color: #111827 !important;
	background-color: rgba(255, 255, 255, 0.96) !important;
	border: 1.5px solid #d1d5db !important;
	border-radius: 10px !important;
	box-sizing: border-box !important;
	outline: none !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
	margin: 0 !important;
}

#cpn-popup-overlay input.cpn-input:focus {
	border-color: var(--cpn-btn-bg, #111827) !important;
	box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1) !important;
}

/* Consentimento LGPD */
#cpn-popup-overlay .cpn-consent-wrap {
	margin: 2px 0 0 0 !important;
}

#cpn-popup-overlay .cpn-consent-label {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	font-size: 12.5px !important;
	line-height: 1.45 !important;
	color: var(--cpn-text-color, #4b5563) !important;
	cursor: pointer !important;
	font-weight: 400 !important;
}

#cpn-popup-overlay .cpn-consent-label input[type="checkbox"] {
	margin: 3px 0 0 0 !important;
	flex-shrink: 0 !important;
	width: 16px !important;
	height: 16px !important;
}

/* Botão de Envio (blindado contra CSS de temas) */
#cpn-popup-overlay button.cpn-submit-btn,
#cpn-popup-overlay .cpn-submit-btn {
	width: 100% !important;
	min-height: 48px !important;
	height: auto !important;
	margin: 4px 0 0 0 !important;
	padding: 13px 20px !important;
	border: none !important;
	border-radius: 10px !important;
	background-color: var(--cpn-btn-bg, #111827) !important;
	background-image: none !important;
	color: var(--cpn-btn-text, #ffffff) !important;
	font-size: 15.5px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	transition: opacity 0.2s ease, transform 0.15s ease !important;
}

#cpn-popup-overlay button.cpn-submit-btn:hover,
#cpn-popup-overlay .cpn-submit-btn:hover {
	background-color: var(--cpn-btn-bg, #111827) !important;
	color: var(--cpn-btn-text, #ffffff) !important;
	opacity: 0.92 !important;
}

#cpn-popup-overlay button.cpn-submit-btn:active,
#cpn-popup-overlay .cpn-submit-btn:active {
	transform: scale(0.99) !important;
}

#cpn-popup-overlay button.cpn-submit-btn:disabled,
#cpn-popup-overlay .cpn-submit-btn:disabled {
	opacity: 0.65 !important;
	cursor: not-allowed !important;
}

#cpn-popup-overlay .cpn-btn-label {
	color: var(--cpn-btn-text, #ffffff) !important;
}

#cpn-popup-overlay .cpn-btn-spinner {
	width: 18px !important;
	height: 18px !important;
	border: 2.5px solid rgba(255, 255, 255, 0.35) !important;
	border-top-color: currentColor !important;
	border-radius: 50% !important;
	animation: cpn-spin 0.7s linear infinite !important;
}

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

/* Feedback de Erro ou Sucesso */
#cpn-popup-overlay .cpn-form-feedback {
	margin-top: 6px !important;
	padding: 11px 14px !important;
	border-radius: 8px !important;
	font-size: 13.5px !important;
	line-height: 1.45 !important;
	font-weight: 500 !important;
}

#cpn-popup-overlay .cpn-form-feedback.cpn-success {
	background-color: #ecfdf5 !important;
	color: #065f46 !important;
	border: 1px solid #a7f3d0 !important;
}

#cpn-popup-overlay .cpn-form-feedback.cpn-error {
	background-color: #fef2f2 !important;
	color: #991b1b !important;
	border: 1px solid #fecaca !important;
}

/* Rodapé */
#cpn-popup-overlay .cpn-footer-note {
	margin: 14px 0 0 0 !important;
	padding: 0 !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: var(--cpn-text-color, #6b7280) !important;
	opacity: 0.82 !important;
	text-align: center !important;
}

/* Responsividade Mobile */
@media (max-width: 680px) {
	#cpn-popup-overlay.cpn-overlay {
		padding: 14px !important;
	}

	#cpn-popup-overlay .cpn-modal.cpn-layout-image-left,
	#cpn-popup-overlay .cpn-modal.cpn-layout-image-right {
		flex-direction: column !important;
	}

	#cpn-popup-overlay .cpn-media-col {
		flex: 0 0 auto !important;
		width: 100% !important;
		height: 195px !important;
		min-height: 160px !important;
	}

	#cpn-popup-overlay .cpn-content-inner {
		padding: 24px 20px !important;
	}

	#cpn-popup-overlay .cpn-title {
		font-size: 22px !important;
	}

	#cpn-popup-overlay .cpn-name-group.cpn-name-inline {
		flex-direction: column !important;
	}
}