/* =========================================================
 * PO POPUP — shared toast/modal component (see includes/popup.php)
 *
 * Classes are namespaced "po-core-popup-*" (not just "po-popup-*") to
 * avoid colliding with the separate pixelated-orange-popups plugin,
 * which already owns the ".po-popup" class name with its own default
 * "opacity:0; visibility:hidden;" closed state. Any element sharing
 * that exact class inherits that rule regardless of which plugin
 * created it, which permanently hid this component's popups on sites
 * running both plugins.
 * ========================================================= */

.po-core-popup-container {
	position: fixed;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
	max-width: calc(100vw - 40px);
}

.po-core-popup-container--center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	align-items: center;
}

.po-core-popup-backdrop {
	position: fixed;
	inset: 0;
	background: var(--po-popup-overlay, rgba(0,0,0,0.5));
	z-index: 999998;
	pointer-events: auto;
}

.po-core-popup {
	width: var(--po-popup-width, 340px);
	max-width: 100%;
	background: var(--po-popup-bg, #ffffff);
	color: var(--po-popup-text-colour, #333333);
	border-radius: var(--po-popup-radius, 8px);
	padding: var(--po-popup-padding, 16px);
	border-width: var(--po-popup-border-width, 0px);
	border-style: solid;
	border-color: var(--po-popup-border-colour, transparent);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
	position: relative;
	pointer-events: auto;
	box-sizing: border-box;
}

.po-core-popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: var(--po-popup-text-colour, #333333);
	opacity: 0.5;
	padding: 4px;
}

.po-core-popup__close:hover { opacity: 1; }

.po-core-popup__title {
	margin: 0 24px 4px 0;
	font-weight: 600;
	color: var(--po-popup-title-colour, #000000);
}

.po-core-popup__message {
	margin: 0 24px 0 0;
	font-size: 14px;
	line-height: 1.5;
}

.po-core-popup__title:empty,
.po-core-popup__message:empty {
	display: none;
}

.po-core-popup__link {
	display: inline-block;
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--po-popup-title-colour, #000000);
	text-decoration: underline;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}

.po-core-popup__link:hover {
	text-decoration: none;
}

/* Animations - the popup fades regardless, with slide/scale adding extra motion */
.po-core-popup {
	opacity: 0;
	animation-duration: var(--po-popup-speed, 300ms);
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

.po-core-popup--anim-fade { animation-name: po-core-popup-fade-in; }
.po-core-popup--anim-slide { animation-name: po-core-popup-slide-in; }
.po-core-popup--anim-scale { animation-name: po-core-popup-scale-in; }

.po-core-popup.po-core-popup--closing {
	animation-name: po-core-popup-fade-out;
	animation-duration: var(--po-popup-speed, 300ms);
}

@keyframes po-core-popup-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes po-core-popup-fade-out {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes po-core-popup-slide-in {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes po-core-popup-scale-in {
	from { opacity: 0; transform: scale(0.9); }
	to   { opacity: 1; transform: scale(1); }
}