/**
 * B24 Popup — core structure & behavior.
 *
 * Loaded whenever any popup is active (including custom HTML ones), because it
 * provides functionality the user opted into via settings: device visibility,
 * the center-modal scaffold, and the fixed-navbar offset. Cosmetic styling for
 * the default templates lives in popup.css.
 */
:root {
	--b24popup-bar-h: 42px;
}

/* Device visibility (opt-in disable per device). */
@media screen and (max-width: 767px) {
	.b24-popup--no-mobile {
		display: none !important;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.b24-popup--no-tablet {
		display: none !important;
	}
}

/* Hidden after dismiss / when closed by JS. */
.b24-popup-is-closed {
	display: none !important;
}

/*
 * Sticky-mode positioning (behavior, not cosmetics). Applies to BOTH the default
 * bar and custom-HTML popups, so picking "sticky top" always pins the popup to
 * the top — while leaving the inner content/styling entirely to the user.
 */
.b24-popup--sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1031; /* Above Bootstrap .fixed-top (1030). */
}

/* Keep the sticky popup clear of the WordPress admin bar when logged in. */
body.admin-bar .b24-popup--sticky {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .b24-popup--sticky {
		top: 46px;
	}
}

/*
 * Offset the theme's fixed navbar below the sticky bar so they scroll together
 * (i.e. the header becomes taller by the bar's height). Only applies when a
 * sticky top bar (default template) is present.
 *
 * NOTE: content offset (e.g. .single-post .wrapper padding-top) is intentionally
 * left to the theme. Hook off the `has-b24-topbar` body class and the
 * `--b24popup-bar-h` variable to adjust your layout, e.g.:
 *
 *   body.has-b24-topbar .single-post .wrapper {
 *       padding-top: calc(120px + var(--b24popup-bar-h, 42px));
 *   }
 */
body.has-b24-topbar .navbar.fixed-top {
	top: var(--b24popup-bar-h, 42px);
}

/* Center modal scaffold (cosmetics for the default box are in popup.css). */
.b24-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1040;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.55);
}

.b24-popup-modal {
	position: relative;
	width: 100%;
	max-width: 520px;
	box-sizing: border-box;
}

.b24-popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 28px;
	height: 28px;
	padding: 0;
	line-height: 1;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.08);
	color: #000;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.b24-popup-close:hover,
.b24-popup-close:focus {
	background: rgba(0, 0, 0, 0.18);
}

/* Larger touch target on mobile. */
@media screen and (max-width: 767px) {
	.b24-popup-close {
		top: 8px;
		right: 8px;
		width: 32px;
		height: 32px;
		font-size: 22px;
	}
}