/**
 * Visitor Notifications popup — shared base styles.
 *
 * These used to live in each theme. The plugin now ships a neutral base so every
 * site gets a consistent, working popup out of the box.
 *
 * Themes restyle it by declaring custom properties:
 *
 *   #prc-visitor-notification-popup {
 *       --prc-vn-accent: #b40000;      // heading, and the default for both buttons
 *       --prc-vn-button-bg: #b40000;   // "OK" button;  defaults to the accent
 *       --prc-vn-close-color: #333;    // "×" close button; defaults to the accent
 *       --prc-vn-button-weight: 800;   // "OK" button font-weight
 *   }
 *
 * The two buttons therefore match out of the box, but either can be recoloured
 * on its own without disturbing the other.
 *
 * Note the base deliberately does NOT declare those properties, it only reads
 * them with a fallback. A theme's declaration would otherwise land on the same
 * selector at the same specificity, leaving the winner down to stylesheet order
 * — which the plugin cannot control. Reading with a fallback means a theme's
 * value always wins, whichever stylesheet loads first.
 *
 * Anything beyond these hooks can still be overridden with normal theme CSS, but
 * use a slightly higher specificity (e.g. `body #prc-visitor-notification-popup`)
 * so the override does not depend on load order either.
 *
 * The markup is printed into the footer and moved into Magnific Popup's container
 * when the popup opens. It must stay hidden everywhere else, otherwise it renders
 * as stray content at the bottom of the page — both before the popup opens and
 * permanently once a visitor has dismissed it.
 */

#prc-visitor-notification-popup {
	display: none;
	position: relative;
	max-width: 500px;
	margin: 20px auto;
	padding: 30px 50px 30px 30px;
	background: #fff;
}

/* Revealed only once Magnific Popup has moved it into its container. */
.mfp-content #prc-visitor-notification-popup {
	display: block;
}

/*
 * Close button: plain CSS, no icon font.
 *
 * Magnific Popup's own markup already contains a "×" character, so this only has
 * to style it. Some themes hide that character with `color: transparent
 * !important` and paste a Font Awesome glyph on via a pseudo-element — that
 * belongs to their general popup styling, so rather than change it site-wide the
 * two declarations are asserted back here, scoped to this popup. The !important
 * is deliberate and only where a theme's own !important has to be outranked.
 */
#prc-visitor-notification-popup button.mfp-close {
	top: 0;
	right: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 44px;
	text-align: center;
	opacity: 1;
	cursor: pointer;
	color: var(--prc-vn-close-color, var(--prc-vn-accent, #2c3e50)) !important;
}

/* Discard any icon-font glyph a theme attaches to the close button. */
#prc-visitor-notification-popup button.mfp-close::before,
#prc-visitor-notification-popup button.mfp-close::after {
	content: none !important;
}

#prc-visitor-notification-popup p {
	margin: 0 0 0.25em;
}

#prc-visitor-notification-popup h3 {
	margin-bottom: 0.5em;
	color: var(--prc-vn-accent, #2c3e50);
}

/*
 * "OK" button.
 *
 * inline-flex so the box hugs whatever label was entered: 1em of padding each
 * side makes it 2em wider than its text, with 0.75em above and below. The label
 * is centred by the flex alignment rather than by line-height, and line-height is
 * pinned to 1 precisely because an inherited theme value is what knocks the text
 * off-centre vertically.
 */
#prc-visitor-notification-popup .close-on-click {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.5em;
	padding: 0.75em 1em;
	border-radius: 0.1em;
	background-color: var(--prc-vn-button-bg, var(--prc-vn-accent, #2c3e50));
	color: #fff;
	font-weight: var(--prc-vn-button-weight, 700);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}