/* Arbor Exit-Intent Popup — frontend styles.
   Mirrors the look of the Arbor Cultural consultation form (assets/css/frontend.css):
   same font, same pill buttons/hover behaviour, same card shadow language —
   just scaled down to popup size. Colours are set inline via CSS custom
   properties from the admin settings (see class-aep-frontend.php). */

.aep-overlay {
	--aep-primary: #C59F55;
	--aep-primary-hover: #a9853f;
	--aep-secondary: #2f5d3a;
	--aep-text: #22291f;
	--aep-card: #ffffff;
	--aep-font: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(20, 20, 16, 0.5);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity .25s ease;
}
.aep-overlay.is-visible { display: flex; }
.aep-overlay.is-active { opacity: 1; }

.aep-popup, .aep-popup * , .aep-popup *::before, .aep-popup *::after { box-sizing: border-box; }

.aep-popup {
	position: relative;
	width: 100%;
	max-width: 280px;
	background: var(--aep-card);
	border-radius: 18px;
	box-shadow: 0 16px 44px rgba(0,0,0,0.22);
	padding: 28px 22px 20px;
	font-family: var(--aep-font);
	color: var(--aep-text);
	text-align: center;
	transform: translateY(14px) scale(.96);
	transition: transform .25s ease;
}
.aep-overlay.is-active .aep-popup { transform: translateY(0) scale(1); }

.aep-close {
	position: absolute;
	top: 10px; right: 10px;
	width: 26px; height: 26px;
	border: none;
	background: rgba(0,0,0,0.05);
	color: var(--aep-text);
	border-radius: 50%;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s;
}
.aep-close:hover { background: rgba(0,0,0,0.1); }

/* Avatar: photo (or initial) contained in a circle with a gold ring,
   matching the brand's primary colour, plus a soft white gap and shadow
   so it lifts off the card. */
.aep-avatar-wrap { position: relative; display: inline-block; margin-bottom: 12px; }
.aep-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px; height: 68px;
	border-radius: 50%;
	background: var(--aep-secondary);
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	overflow: hidden;
	box-shadow:
		0 0 0 3px var(--aep-card),
		0 0 0 6px var(--aep-primary),
		0 6px 16px rgba(0,0,0,0.18);
}
.aep-avatar--img { object-fit: cover; }
.aep-dot {
	position: absolute;
	bottom: 3px; right: 3px;
	width: 13px; height: 13px;
	border-radius: 50%;
	background: #3bb35c;
	border: 2.5px solid var(--aep-card);
	z-index: 2;
}

.aep-name {
	margin: 0 0 6px;
	font-weight: 700;
	font-size: 14px;
	color: var(--aep-primary);
}

.aep-message {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.5;
}

.aep-buttons { display: flex !important; flex-direction: column !important; gap: 8px !important; }
/* !important throughout this block on purpose: many themes ship their own
   global "button"/"a.button" styles (often the theme's accent colour, which
   is where a stray pink was coming from) that would otherwise win over ours
   by loading later in the page. These rules make sure the popup always
   renders in the Arbor brand colours regardless of the theme. */
.aep-btn {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	border-radius: 999px !important;
	padding: 10px 18px !important;
	font-family: var(--aep-font) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: filter .15s, box-shadow .15s, transform .1s !important;
}
.aep-btn-primary {
	background: var(--aep-primary) !important;
	color: #fff !important;
	border: none !important;
}
.aep-btn-primary:hover,
.aep-btn-primary:focus {
	background: var(--aep-primary) !important;
	color: #fff !important;
	filter: brightness(0.9);
	box-shadow: 0 6px 16px rgba(0,0,0,0.18) !important;
}
.aep-btn-primary:active { transform: scale(.98); }
.aep-btn-secondary {
	background: transparent !important;
	color: var(--aep-text) !important;
	border: 1px solid rgba(0,0,0,0.15) !important;
}
.aep-btn-secondary:hover,
.aep-btn-secondary:focus {
	background: rgba(0,0,0,0.04) !important;
	color: var(--aep-text) !important;
	border-color: rgba(0,0,0,0.15) !important;
}
.aep-btn-secondary:active { transform: scale(.98); }

@media (max-width: 360px) {
	.aep-popup { max-width: 240px; padding: 24px 18px 18px; }
	.aep-avatar { width: 58px; height: 58px; font-size: 20px; }
}

/* Admin settings-page preview panel */
.aep-preview-stage { max-width: 400px; }
.aep-preview-overlay { background: #efece3; border-radius: 16px; padding: 30px 10px; }