/* ---------- wrapper / overlay ---------- */

.ipop-wrap {
	position: fixed;
	inset: 0;
	display: flex;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ipop-speed, 300ms) ease, visibility var(--ipop-speed, 300ms) ease;
	padding: 20px;
	box-sizing: border-box;
	/* The overlay is the scroll container: a popup taller than the window
	   is read by scrolling here. Nothing scrolls inside the box. */
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .5) transparent;
}

.ipop-wrap::-webkit-scrollbar {
	width: 10px;
}
.ipop-wrap::-webkit-scrollbar-track {
	background: transparent;
}
.ipop-wrap::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, .45);
	border-radius: 10px;
	border: 3px solid transparent;
	background-clip: content-box;
}
.ipop-wrap::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255, 255, 255, .7);
}

.ipop-wrap.ipop-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

/* Keep it interactive during the closing transition, then it goes away. */
.ipop-wrap.ipop-closing {
	visibility: visible;
	pointer-events: none;
}

.ipop-overlay-bg {
	/* fixed, not absolute: the wrapper scrolls, and an absolute backdrop
	   would scroll away and leave the page bare behind a tall popup. */
	position: fixed;
	inset: 0;
}

/* With no overlay the wrapper still covers the viewport, so it must stay
   click-through or it would silently make the whole page unclickable.
   Only the box itself takes pointer events. This rule has to match the
   specificity of .ipop-wrap.ipop-open above and come after it. */
.ipop-wrap.ipop-no-overlay,
.ipop-no-overlay.ipop-open {
	pointer-events: none;
}
.ipop-no-overlay.ipop-open .ipop-box {
	pointer-events: auto;
}
.ipop-no-overlay .ipop-overlay-bg {
	display: none;
}

/* position:fixed is what actually holds on iOS and on themes that
   scroll a wrapper rather than <body>. The JS saves and restores the
   scroll offset, and also sets overflow inline on html so the page's own
   scrollbar disappears instead of sitting beside the popup's. */
html.ipop-scroll-locked {
	overflow: hidden;
}

body.ipop-scroll-locked {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

/* ---------- box ---------- */

.ipop-box {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	/* No height cap: the box grows and the overlay scrolls it. Centring
	   uses auto margins rather than align-items, because align-items
	   clips the top of a box taller than the viewport and makes the start
	   of a long popup unreachable. */
	margin: auto;
	transition: transform var(--ipop-speed, 300ms) ease, opacity var(--ipop-speed, 300ms) ease;
}

.ipop-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.ipop-head    { flex: 0 0 auto; }
.ipop-actions { flex: 0 0 auto; }

/* ---------- positions ---------- */

/* Horizontal via justify-content; vertical via the box's auto margins. */
.ipop-wrap              { justify-content: center; }

.ipop-pos-top-left,
.ipop-pos-middle-left,
.ipop-pos-bottom-left   { justify-content: flex-start; }

.ipop-pos-top-right,
.ipop-pos-middle-right,
.ipop-pos-bottom-right  { justify-content: flex-end; }

.ipop-pos-top-left .ipop-box,
.ipop-pos-top-center .ipop-box,
.ipop-pos-top-right .ipop-box     { margin-top: 0; margin-bottom: auto; }

.ipop-pos-bottom-left .ipop-box,
.ipop-pos-bottom-center .ipop-box,
.ipop-pos-bottom-right .ipop-box  { margin-top: auto; margin-bottom: 0; }

/* ---------- open animations ---------- */

.ipop-anim-none .ipop-box         { transform: none; }
.ipop-anim-fade .ipop-box         { opacity: 0; }
.ipop-anim-zoom .ipop-box         { opacity: 0; transform: scale(.9); }
.ipop-anim-slide-top .ipop-box    { opacity: 0; transform: translateY(-40px); }
.ipop-anim-slide-bottom .ipop-box { opacity: 0; transform: translateY(40px); }
.ipop-anim-slide-left .ipop-box   { opacity: 0; transform: translateX(-40px); }
.ipop-anim-slide-right .ipop-box  { opacity: 0; transform: translateX(40px); }

.ipop-wrap.ipop-open .ipop-box {
	opacity: 1;
	transform: none;
}

/* ---------- close animations ---------- */

.ipop-closing.ipop-close-anim-fade .ipop-box         { opacity: 0; }
.ipop-closing.ipop-close-anim-zoom .ipop-box         { opacity: 0; transform: scale(.9); }
.ipop-closing.ipop-close-anim-slide-top .ipop-box    { opacity: 0; transform: translateY(-40px); }
.ipop-closing.ipop-close-anim-slide-bottom .ipop-box { opacity: 0; transform: translateY(40px); }
.ipop-closing.ipop-close-anim-slide-left .ipop-box   { opacity: 0; transform: translateX(-40px); }
.ipop-closing.ipop-close-anim-slide-right .ipop-box  { opacity: 0; transform: translateX(40px); }

/* ---------- close button ---------- */

/* A fixed square box with the X centred in it. Width, height and the
   resets carry !important because theme button rules (padding,
   min-height, line-height, text-transform) otherwise reshape it. */
.ipop-wrap .ipop-close-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent;
	border: none;
	font-size: 24px;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-indent: 0 !important;
	cursor: pointer;
	color: inherit;
	opacity: .55;
	transition: opacity .2s ease;
	z-index: 3;
}
/* The drawn X fills the button; its viewBox leaves the margin, so the
   stroke covers the middle half and stays centred at any size. */
.ipop-wrap .ipop-close-btn svg {
	display: block;
	flex: none;
	width: 100%;
	height: 100%;
	margin: 0;
	pointer-events: none;
}
.ipop-wrap .ipop-close-btn:hover,
.ipop-wrap .ipop-close-btn:focus {
	opacity: 1;
}
.ipop-wrap .ipop-close-btn.ipop-close-hidden {
	display: none !important;
}

.ipop-wrap .ipop-close-inside-left .ipop-close-btn {
	right: auto;
	left: 8px;
}
.ipop-wrap .ipop-close-outside-right .ipop-close-btn {
	top: -14px;
	right: -14px;
	background: #fff;
	border-radius: 50%;
	width: 28px !important;
	height: 28px !important;
	font-size: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
	color: #333;
	opacity: 1;
}

@media (max-width: 600px) {
	.ipop-wrap .ipop-close-btn {
		width: 28px !important;
		height: 28px !important;
		font-size: 22px;
	}
	/* The overlay padding is only 12px on phones, so a button hanging
	   14px outside the box would be cut off by the screen edge. */
	.ipop-wrap .ipop-close-outside-right .ipop-close-btn {
		top: 8px;
		right: 8px;
	}
}

/* ---------- content ---------- */

.ipop-title {
	margin: 0 0 8px;
	line-height: 1.25;
}

.ipop-subtitle {
	margin: 0 0 14px;
	line-height: 1.45;
}
.ipop-subtitle p {
	margin: 0 0 6px;
}

.ipop-body {
	line-height: 1.6;
}
.ipop-body > *:first-child { margin-top: 0; }
.ipop-body > *:last-child  { margin-bottom: 0; }
.ipop-body img {
	max-width: 100%;
	height: auto;
}

.ipop-actions {
	margin-top: 20px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.ipop-pos-center .ipop-actions {
	justify-content: inherit;
}

.ipop-button {
	display: inline-block;
	padding: 11px 22px;
	border: none;
	cursor: pointer;
	text-decoration: none;
	font-size: 15px;
	line-height: 1.2;
	transition: opacity .2s ease;
}
.ipop-button:hover {
	opacity: .88;
}

/* Outlined variant: the border color comes from the generated CSS, so
   only the box-model reset belongs here. */
.ipop-button-outline {
	padding: 9px 20px; /* keeps the 2px border from changing overall size */
}

/* Plain text link variant — strips all button chrome so it inherits the
   surrounding text flow. Needs the resets because it may render as a
   <button>, which carries UA styling. */
.ipop-link {
	display: inline-block;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: opacity .2s ease;
}
.ipop-link:hover {
	opacity: .75;
}

/* Give a link and a solid button breathing room when shown side by side. */
.ipop-actions .ipop-link {
	align-self: center;
	padding: 0 4px;
}

.ipop-trigger-btn {
	cursor: pointer;
}

/* ---------- small screens ---------- */

@media (max-width: 600px) {
	.ipop-wrap {
		padding: 12px;
	}
	.ipop-box {
		min-width: 0 !important;
		max-width: 100% !important;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ipop-wrap,
	.ipop-box {
		transition-duration: .01ms !important;
	}
}

/* ---------- fine print ---------- */

.ipop-fine-print {
	margin-top: 16px;
	line-height: 1.45;
	color: inherit;
}
.ipop-fine-print p {
	margin: 0 0 6px;
}
.ipop-fine-print p:last-child {
	margin-bottom: 0;
}
.ipop-fine-print a {
	color: inherit;
}

/* ---------- columns ---------- */

.ipop-row {
	display: flex;
	flex-wrap: wrap;
	/* Columns always fill the row's height, so a coloured column paints
	   top to bottom. The row's alignment setting is applied to the
	   content inside each column instead (see .ipop-col). */
	align-items: stretch;
	--ipop-col-gap: 10px;
	margin: 0 0 14px;
}
.ipop-row:last-child {
	margin-bottom: 0;
}

.ipop-col {
	flex: 1 1 0;
	min-width: 0; /* lets long words and URLs wrap instead of overflowing */
	box-sizing: border-box;
	/* A flex column only so its content can be centred vertically. */
	display: flex;
	flex-direction: column;
}

/* Normal flow lives in here. Without this wrapper, inline text and tags
   in a column would each become a separate stacked flex item. */
.ipop-col-inner > *:first-child { margin-top: 0; }
.ipop-col-inner > *:last-child  { margin-bottom: 0; }

/* Headings in the popup body. Scoped under .ipop-wrap .ipop-box so
   site-wide heading rules (Bootstrap sets h3 to weight 500 and a
   viewport-based size) don't override them. A popup's Custom CSS can
   still change them with {{popup}} h3 { ... }. */
.ipop-wrap .ipop-box h3 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
}
.ipop-col-inner img {
	max-width: 100%;
	height: auto;
}

/* A column with its own text colour: themes often colour headings and
   paragraphs directly, which would override it, so pull them back. */
.ipop-col-has-color .ipop-col-inner h1,
.ipop-col-has-color .ipop-col-inner h2,
.ipop-col-has-color .ipop-col-inner h3,
.ipop-col-has-color .ipop-col-inner h4,
.ipop-col-has-color .ipop-col-inner h5,
.ipop-col-has-color .ipop-col-inner h6,
.ipop-col-has-color .ipop-col-inner p,
.ipop-col-has-color .ipop-col-inner li,
.ipop-col-has-color .ipop-col-inner span,
.ipop-col-has-color .ipop-col-inner strong,
.ipop-col-has-color .ipop-col-inner em,
.ipop-col-has-color .ipop-col-inner a {
	color: inherit;
}

/* ---------- edge-to-edge rows ---------- */

/* Pull the row out by the popup's padding so its columns reach the
   popup's edges, e.g. a coloured panel running to the rounded corner. */
.ipop-row-bleed {
	margin-left: calc(-1 * var(--ipop-pad, 32px));
	margin-right: calc(-1 * var(--ipop-pad, 32px));
}

/* Only when nothing sits above or below it (no heading, buttons or fine
   print outside the builder) can it also reach the top and bottom. */
.ipop-content > .ipop-body:first-child > .ipop-row-bleed:first-child {
	margin-top: calc(-1 * var(--ipop-pad, 32px));
}
.ipop-content > .ipop-body:last-child > .ipop-row-bleed:last-child {
	margin-bottom: calc(-1 * var(--ipop-pad, 32px));
}

/* Round the corners that touch the popup's corners, so a coloured
   column follows the popup's shape instead of poking out square. */
.ipop-content > .ipop-body:first-child > .ipop-row-bleed:first-child > .ipop-col:first-child {
	border-top-left-radius: var(--ipop-radius, 0);
}
.ipop-content > .ipop-body:first-child > .ipop-row-bleed:first-child > .ipop-col:last-child {
	border-top-right-radius: var(--ipop-radius, 0);
}
.ipop-content > .ipop-body:last-child > .ipop-row-bleed:last-child > .ipop-col:first-child {
	border-bottom-left-radius: var(--ipop-radius, 0);
}
.ipop-content > .ipop-body:last-child > .ipop-row-bleed:last-child > .ipop-col:last-child {
	border-bottom-right-radius: var(--ipop-radius, 0);
}

/* Columns stack on phones whatever width was set on them. */
@media (max-width: 600px) {
	.ipop-col {
		flex: 1 1 100% !important;
	}

	/* Stacked, the first column takes the top corners and the last the
	   bottom corners — not left and right as side by side. */
	.ipop-row-bleed > .ipop-col {
		border-radius: 0 !important;
	}
	.ipop-content > .ipop-body:first-child > .ipop-row-bleed:first-child > .ipop-col:first-child {
		border-top-left-radius: var(--ipop-radius, 0) !important;
		border-top-right-radius: var(--ipop-radius, 0) !important;
	}
	.ipop-content > .ipop-body:last-child > .ipop-row-bleed:last-child > .ipop-col:last-child {
		border-bottom-left-radius: var(--ipop-radius, 0) !important;
		border-bottom-right-radius: var(--ipop-radius, 0) !important;
	}

}

/* =========================================================
   Revision preview bar (editors only)
   ========================================================= */

.ipop-preview-bar {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 2147483647; /* above the popup, which sets its own z-index */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	padding: 12px 18px;
	padding-top: calc(12px + env(safe-area-inset-top, 0px));
	background: #1d2327;
	color: #f0f0f1;
	font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}

.ipop-preview-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ipop-preview-dim  { color: #a7aaad; }
.ipop-preview-warn { color: #ffb900; }

.ipop-preview-stats {
	display: flex;
	gap: 18px;
	margin-left: auto;
	flex-wrap: wrap;
}
.ipop-preview-stats b  { font-size: 15px; }
.ipop-preview-stats em {
	font-style: normal;
	color: #72aee6;
	margin-left: 4px;
}

.ipop-preview-nav,
.ipop-preview-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ipop-preview-btn {
	display: inline-block;
	padding: 6px 13px;
	border-radius: 3px;
	background: #2c3338;
	color: #f0f0f1 !important;
	text-decoration: none;
	border: 1px solid #50575e;
	white-space: nowrap;
	font: inherit;
	cursor: pointer;
}
.ipop-preview-btn:hover {
	background: #3c434a;
}
.ipop-preview-btn:disabled {
	opacity: .35;
	pointer-events: none;
}

.ipop-preview-count {
	color: #a7aaad;
	min-width: 54px;
	text-align: center;
}

/* Keep the bar clear of the popup it describes. */
.ipop-wrap[data-preview="1"] {
	padding-top: 96px;
}

@media (max-width: 700px) {
	.ipop-preview-stats {
		margin-left: 0;
		width: 100%;
		gap: 14px;
	}
	.ipop-wrap[data-preview="1"] {
		padding-top: 150px;
	}
}

/* Per-column "Hide on mobile" from the content builder. */
@media (max-width: 600px) {
	.ipop-col-hide-mobile {
		display: none !important;
	}
}

.ipop-preview-badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 10px;
	background: #00a32a;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
}
.ipop-preview-badge[hidden] {
	display: none;
}

/* ---------- buttons placed with [ipop_buttons] ---------- */

.ipop-actions-left   { justify-content: flex-start; }
.ipop-actions-center { justify-content: center; }
.ipop-actions-right  { justify-content: flex-end; }

/* width="full": each button spans the column, stacked - the usual look
   for a form panel, with a "Not now" link centred underneath. */
.ipop-actions-full > .ipop-button,
.ipop-actions-full > .ipop-link {
	flex: 1 1 100%;
	text-align: center;
	box-sizing: border-box;
}
.ipop-actions-full > .ipop-link {
	align-self: auto;
	padding: 6px 0;
}