/* Exit Intent Popup - Frontend Styles */

.eip-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba( 0, 0, 0, 0.6 ); /* overridden inline per admin settings */
	padding: 20px;
	box-sizing: border-box;
	animation: eip-fade-in 0.2s ease-out;
}

.eip-overlay[hidden] {
	display: none;
}

@keyframes eip-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.eip-modal {
	--eip-accent: #0c2340;
	position: relative;
	background: #ffffff;
	border-radius: 20px;
	max-width: 460px;
	width: 100%;
	padding: 40px 32px 32px 32px;
	box-sizing: border-box;
	text-align: center;
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
	animation: eip-pop-in 0.25s cubic-bezier( 0.2, 0.9, 0.3, 1.2 );
	max-height: 90vh;
	overflow-y: auto;
}

@keyframes eip-pop-in {
	from { transform: scale( 0.92 ); opacity: 0; }
	to { transform: scale( 1 ); opacity: 1; }
}

/* Styled Close Circle */
.eip-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: #f1f3f5;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: #6c757d;
	transition: background-color 0.15s, color 0.15s;
	padding: 0;
	box-sizing: border-box;
}

.eip-close:hover,
.eip-close:focus {
	background-color: #e2e6ea;
	color: #212529;
	outline: none;
}

/* Logo Styles */
.eip-logo-container {
	margin-bottom: 24px;
}

.eip-logo {
	max-width: 220px;
	max-height: 60px;
	height: auto;
	width: auto;
	display: block;
	margin: 0 auto;
}

/* Image Styles */
.eip-image {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin-bottom: 20px;
}

/* Typography */
.eip-headline {
	margin: 0 0 16px 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	color: #1a1a1a;
}

.eip-body {
	margin: 0 0 24px 0;
	font-size: 15px;
	line-height: 1.6;
	color: #495057;
}

.eip-body p {
	margin: 0 0 10px 0;
}

.eip-body p:last-child {
	margin-bottom: 0;
}

/* Form Styles */
.eip-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.eip-email-input {
	width: 100%;
	padding: 14px 16px;
	font-size: 15px;
	border: 1px solid #ced4da;
	border-radius: 6px;
	box-sizing: border-box;
	background-color: #ffffff;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.eip-email-input:focus {
	border-color: var( --eip-accent, #0c2340 );
	box-shadow: 0 0 0 3px rgba(12, 35, 64, 0.1);
	outline: none;
}

.eip-button {
	display: inline-block;
	width: 100%;
	padding: 14px 20px;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	background-color: var( --eip-accent, #0c2340 );
	border: none;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	box-sizing: border-box;
	text-align: center;
	transition: filter 0.15s ease, background-color 0.15s ease;
}

.eip-button:hover,
.eip-button:focus {
	filter: brightness( 0.9 );
	color: #ffffff;
	outline: none;
}

/* Secondary Dismiss Link */
.eip-dismiss-container {
	margin-top: 18px;
}

.eip-dismiss-link {
	font-size: 14px;
	color: #2b4560;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	transition: color 0.15s, text-decoration 0.15s;
}

.eip-dismiss-link:hover,
.eip-dismiss-link:focus {
	color: #0c2340;
	text-decoration: underline;
	outline: none;
}

/* Divider & Footer Text */
.eip-footer-divider {
	border: 0;
	border-top: 1px solid #e9ecef;
	margin: 24px 0 16px 0;
	padding: 0;
	width: 100%;
}

.eip-footer-text {
	font-size: 13px;
	color: #868e96;
	margin: 0;
	line-height: 1.4;
}

body.eip-no-scroll {
	overflow: hidden;
}

/* Small screens responsive */
@media ( max-width: 480px ) {
	.eip-modal {
		padding: 32px 20px 24px 20px;
	}

	.eip-headline {
		font-size: 20px;
	}
	
	.eip-body {
		font-size: 14px;
		margin-bottom: 20px;
	}
}