/* Exit Intent Popup basic styles (harmonized with custom popup) */

#exit-popup-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.7);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}
#exit-popup-overlay.is-open { display: flex; }

#exit-popup {
	font-family: 'Gilroy', sans-serif;
	background: #fff;
	border-radius: 10px;
	max-width: 80%;
	width: 100%;
	position: relative;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
	
}

#exit-popup-close {
	position: absolute;
	top: 8px;
	right: 8px;
	background: transparent;
	border: none;
	font-size: 24px;
	cursor: pointer;
}

.exit-popup-body { 
	display: flex;
	flex-direction: row;
	min-height: 420px;
}

.exit-popup-content {
	padding: 40px;
	width: 40%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

.exit-popup-content h2 { font-size: 28px; font-weight: 700; color: #000;}
.exit-popup-subtitle { margin: 0 0 8px; font-size: 16px; }
.exit-popup-offer { font-size: 18px; color: #ff8338; margin: 0 0 16px;}
.exit-popup-fine { font-size: 12px; color: #888; margin-top: 10px; }

.exit-popup-image { flex: 1; overflow: hidden; border-radius: 0 10px 10px 0; }
.exit-popup-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Button style aligned with custom popup */
#exit-popup .button-with-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background-color: #ff8338;
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 16px 48px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	letter-spacing: normal;
	width: 100%;
}
.button-with-arrow:hover { background-color: #e6722f; }
.button-with-arrow:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,131,56,0.35); }
.button-with-arrow:disabled { opacity: .6; cursor: not-allowed; }

.exit-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.exit-timer { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #444; width: 100%; flex-wrap: wrap; min-width: 0; margin: 0 0 16px;}
.exit-timer-label { white-space: nowrap; }
.exit-timer-count { font-weight: 700; }
.exit-timer-bar { position: relative; height: 4px; background: #eee; border-radius: 999px; overflow: hidden; width: 100%; flex: 1 1 100%; }
.exit-timer-progress { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: #ff8338; transition: width 1s linear; }

/* Close button contrast on dark overlay */
#exit-popup-close .popup-close-icon { width: 40px; height: 40px; fill: #000;}
#exit-popup-close .popup-close-icon path { stroke: #fff; }
#exit-popup-close:hover { opacity: .9; }


@media (max-width: 767px) {
	.exit-popup-body { flex-direction: column; min-height: initial; }
	.exit-popup-content { width: 100%; padding: 40px 24px 24px; }
	.exit-popup-image { height: 200px; border-radius: 0 0 10px 10px; }
	.exit-popup-content h2 {
	    font-size: 20px;
	}
	#exit-popup-close .popup-close-icon {
        width: 32px;
        height: 32px;
	}
}

@media (min-width: 768px) {
	.exit-cta-wrap { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
	.exit-timer { width: auto; flex-wrap: nowrap; }
	.exit-timer-bar { flex: 0 0 140px; width: 140px; }
}



/* Decline link-style button */
.exit-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: none;
	color: #6b7280;
	text-decoration: underline;
	cursor: pointer;
	font-size: 14px;
	padding: 6px 0;
	width: fit-content;
}
.exit-link-btn:hover { color: #374151; }
.exit-link-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(107,114,128,0.25); border-radius: 6px; }

/* Mini floating banner for active discount */
.exit-mini-banner {
	position: fixed;
	left: 0;
	bottom: 124px; /* mobile-first */
	z-index: 9999;
	display: none;
	align-items: center;
	gap: 8px;
	background: #111827;
	color: #fff;
	padding: 8px 6px;
	border-radius: 0 12px 12px 0;
	box-shadow: 0 8px 24px rgba(0,0,0,0.25);
	font-size: 12px;
	opacity: .96;
	flex-direction: column;
	width: 64px;
}
.exit-mini-banner.is-visible { display: flex; }
.exit-mini-badge { background:#ff8338; color:#fff; font-weight:700; border-radius:6px; padding:4px 6px; font-size:12px; text-align: center; }
.exit-mini-timer { display:flex; align-items:center; gap:6px; flex-direction: column; }
.exit-mini-count { font-variant-numeric: tabular-nums; font-weight:700; }
.exit-mini-count.tick { transform: scale(1.02); opacity:.9; transition: transform .2s ease, opacity .2s ease; }
.exit-mini-bar { display:none !important; }
.exit-mini-progress { display:none !important; }
.exit-mini-note { color:#9CA3AF; font-size:10px; line-height:1.2; text-align:center; max-width: 88px; padding: 0 2px; }
.exit-mini-close { background: transparent; border:none; color: #9ca3af; cursor:pointer; padding:2px; }
.exit-mini-close:hover { color:#fff; }

@media (min-width: 768px){
	.exit-mini-banner{
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		padding: 10px 8px;
		width: 64px;
		gap: 8px;
	}
}

/* Пульсирующая точка перед таймером */
.exit-mini-timer::before{
	content: '';
	width: 6px; height: 6px;
	background: #ff8338;
	border-radius: 9999px;
	box-shadow: 0 0 0 0 rgba(255,131,56,0.45);
	animation: miniPulse 1.6s infinite ease-in-out;
}
@keyframes miniPulse {
	0% { box-shadow: 0 0 0 0 rgba(255,131,56,0.45); }
	70% { box-shadow: 0 0 0 6px rgba(255,131,56,0); }
	100% { box-shadow: 0 0 0 0 rgba(255,131,56,0); }
}