/*
 * Annette Quiz — Popup CTA button styles
 * Pill-shaped amber button, fixed bottom-center, slide-up animation.
 * Loaded site-wide only on pages configured in admin.
 */

.aq-popup {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(120px);
	opacity: 0;
	z-index: 99998;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 400ms ease;
	pointer-events: none;
	max-width: calc(100vw - 32px);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

.aq-popup.is-visible {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.aq-popup__btn,
.aq-popup__btn:link,
.aq-popup__btn:visited,
.aq-popup__btn:hover,
.aq-popup__btn:focus,
.aq-popup__btn:active {
	color: #FFFFFF !important;
	text-decoration: none !important;
}
.aq-popup__btn * {
	color: #FFFFFF !important;
}
.aq-popup__btn {
	background: #B48748;
	padding: 14px 24px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.04em;
	box-shadow: 0 8px 24px rgba(180, 135, 72, 0.35);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
	cursor: pointer;
	line-height: 1.2;
}

.aq-popup__btn:hover,
.aq-popup__btn:focus {
	background: #705547;
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(112, 85, 71, 0.4);
}

.aq-popup__arrow {
	transition: transform 200ms ease;
	display: inline-block;
}

.aq-popup__btn:hover .aq-popup__arrow {
	transform: translateX(3px);
}

.aq-popup__close {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #FFFFFF;
	border: 1px solid rgba(180, 135, 72, 0.3);
	color: #705547;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-family: inherit;
	transition: background 200ms ease, transform 200ms ease;
	flex-shrink: 0;
}

.aq-popup__close:hover {
	background: #FAF8F5;
	transform: scale(1.05);
}

/* Mobile: compact + positioned above cookie banner to avoid overlap */
@media (max-width: 768px) {
	.aq-popup {
		bottom: 140px; /* clears CookieYes banner; banner is ~120-130px on mobile */
		gap: 5px;
		max-width: calc(100vw - 20px);
		transition:
			transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
			opacity 400ms ease,
			bottom 500ms cubic-bezier(0.22, 1, 0.36, 1);
	}
	.aq-popup__btn {
		padding: 10px 14px;
		font-size: 12px;
		letter-spacing: 0.02em;
		gap: 6px;
		box-shadow: 0 6px 18px rgba(180, 135, 72, 0.3);
	}
	.aq-popup__close {
		width: 28px;
		height: 28px;
		font-size: 15px;
	}

	/* When cookie banner is hidden — slide popup down to natural bottom position.
	   Three triggers cover all cases:
	   1. body.aq-cky-hidden  → our 30s auto-hide class
	   2. body:has(.cky-consent-container.cky-hide) → CookieYes adds cky-hide on Accept/Reject
	   3. body:not(:has(.cky-consent-container)) → no banner present at all */
	body.aq-cky-hidden .aq-popup,
	body:has(.cky-consent-container.cky-hide) .aq-popup,
	body:not(:has(.cky-consent-container)) .aq-popup {
		bottom: 20px;
	}
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.aq-popup,
	.aq-popup__btn,
	.aq-popup__arrow,
	.aq-popup__close {
		transition: none !important;
	}
}