/* Quick Popup Box front-end styles.
   Every selector is scoped under .qpbx-popup-overlay (the outer wrapper
   printed for each popup) and every declaration carries !important, so
   theme stylesheets loading after this one can't silently override the
   popup's own positioning, sizing, or typography.

   Colors and typography come from inline styles per popup (post meta),
   this stylesheet only handles overlay positioning, sizing, and
   transitions. */

.qpbx-popup-overlay {
	display: none !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	justify-content: center !important;
	align-items: center !important;
	z-index: 100000 !important;
	opacity: 0 !important;
	transition: opacity 0.25s ease !important;
}

.qpbx-popup-overlay.qpbx-is-active {
	display: flex !important;
}

.qpbx-popup-overlay.qpbx-is-visible {
	opacity: 1 !important;
}

.qpbx-popup-overlay .qpbx-popup-box {
	border-radius: 8px !important;
	padding: 24px 28px !important;
	/* No !important here on purpose: each popup sets its own max-width
	   inline (from the Width setting), and an !important rule in this
	   stylesheet would beat that plain inline style every time, which is
	   exactly the bug that made an 800px setting silently stay at 480px. */
	max-width: 480px;
	width: 90% !important;
	max-height: 85vh !important;
	overflow-y: auto !important;
	position: relative !important;
	transform: translateY( -10px ) !important;
	transition: transform 0.25s ease !important;
}

.qpbx-popup-overlay.qpbx-is-visible .qpbx-popup-box {
	transform: translateY( 0 ) !important;
}

.qpbx-popup-overlay .qpbx-popup-title {
	margin: 0 28px 12px 0 !important;
	line-height: 1.3 !important;
}

.qpbx-popup-overlay .qpbx-popup-content {
	/* No !important: each popup sets its own line-height inline (from the
	   Line Height setting), same reasoning as max-width above. */
	line-height: 1.6;
}

.qpbx-popup-overlay .qpbx-popup-content p {
	margin: 0 0 1em !important;
}

.qpbx-popup-overlay .qpbx-popup-content ul {
	margin: 0 0 1.5em 1.5em !important;
	padding: 0 !important;
}

.qpbx-popup-overlay .qpbx-popup-content ol {
	list-style: decimal outside !important;
	margin: 0 0 1.5em 1.5em !important;
	padding: 0 !important;
}

.qpbx-popup-overlay .qpbx-popup-content ul li {
	list-style: disc outside !important;
	margin-bottom: 0.5em !important;
}

.qpbx-popup-overlay .qpbx-popup-content ol li {
	margin-bottom: 0.5em !important;
}

.qpbx-popup-overlay .qpbx-popup-content > *:last-child {
	margin-bottom: 0 !important;
}

.qpbx-popup-overlay .qpbx-popup-box .qpbx-popup-close {
	border: none !important;
	color: #767676 !important;
	font-size: 18px !important;
	padding: 0px !important;
}

.qpbx-popup-overlay .qpbx-popup-box .qpbx-popup-close:hover,
.qpbx-popup-overlay .qpbx-popup-box .qpbx-popup-close:active,
.qpbx-popup-overlay .qpbx-popup-box .qpbx-popup-close:focus {
	background: none !important;
}

.qpbx-popup-overlay .qpbx-popup-close {
	all: unset !important;
	position: absolute !important;
	top: 10px !important;
	right: 14px !important;
	font-size: 22px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	color: #666 !important;
}

.qpbx-popup-overlay .qpbx-popup-close:hover {
	color: #000 !important;
}