/*!
 * Camerce Popup Campaigns — visual builder element styles (front end).
 *
 * Every rule reads from the --camerce-popups-el-* custom properties the layout renderer
 * prints on each element wrapper, and inherits the campaign's own --camerce-popups-text /
 * --camerce-popups-bg for colour: a popup can be any colour, so nothing here hardcodes
 * one. Only camerce-popups-el--hide-* is resolved by a media query — the markup is cached
 * and shared, so device decisions have to live in CSS. Form, countdown and
 * dismiss elements reuse the block styles in camerce-popups-blocks.css.
 */
.camerce-popups-el {
	--camerce-popups-ink: var(--camerce-popups-text, currentColor);
	--camerce-popups-soft: color-mix(in srgb, var(--camerce-popups-ink) 68%, transparent);
	--camerce-popups-line: color-mix(in srgb, var(--camerce-popups-ink) 26%, transparent);
	--camerce-popups-tint: color-mix(in srgb, var(--camerce-popups-ink) 8%, transparent);
	box-sizing: border-box;
	margin-top: var(--camerce-popups-el-mt, 0);
	margin-bottom: var(--camerce-popups-el-mb, 0);
	color: var(--camerce-popups-el-color, var(--camerce-popups-ink));
	text-align: var(--camerce-popups-el-align, inherit);
}

.camerce-popups-el *,
.camerce-popups-el *::before,
.camerce-popups-el *::after { box-sizing: inherit; }

.camerce-popups-el--left { --camerce-popups-el-flex: flex-start; }
.camerce-popups-el--center { --camerce-popups-el-flex: center; }
.camerce-popups-el--right { --camerce-popups-el-flex: flex-end; }

/* Heading. */
.camerce-popups-el__heading {
	margin: 0;
	color: inherit;
	font-size: var(--camerce-popups-el-size, 1.5em);
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
}

/* Rich text. */
.camerce-popups-el__text {
	color: inherit;
	font-size: var(--camerce-popups-el-size, 1em);
	line-height: 1.55;
}

.camerce-popups-el__text > :first-child { margin-top: 0; }
.camerce-popups-el__text > :last-child { margin-bottom: 0; }
.camerce-popups-el__text p { margin: 0 0 .75em; }
.camerce-popups-el__text a { color: inherit; text-underline-offset: .18em; }
.camerce-popups-el__text img { max-width: 100%; height: auto; }
.camerce-popups-el__text ul,
.camerce-popups-el__text ol { margin: 0 0 .75em; padding-inline-start: 1.25em; }

/* Image. */
.camerce-popups-el--image { line-height: 0; }
.camerce-popups-el--center.camerce-popups-el--image { text-align: center; }

.camerce-popups-el__image {
	display: inline-block;
	max-width: 100%;
	width: var(--camerce-popups-el-img-w, auto);
	height: auto;
	border-radius: var(--camerce-popups-el-img-r, 0);
	vertical-align: middle;
}

/* Button. */
.camerce-popups-el--button { display: flex; justify-content: var(--camerce-popups-el-flex, stretch); }

.camerce-popups-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 0;
	padding: 11px 22px;
	border: 1px solid transparent;
	border-radius: var(--camerce-popups-btn-radius, 8px);
	font: inherit;
	font-size: var(--camerce-popups-el-size, 1em);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .15s ease;
}

.camerce-popups-el--button:not(.camerce-popups-el--left):not(.camerce-popups-el--center):not(.camerce-popups-el--right) .camerce-popups-btn { width: 100%; }

.camerce-popups-btn--primary {
	background: var(--camerce-popups-el-color, var(--camerce-popups-ink));
	color: var(--camerce-popups-bg, #fff);
}

/* The border follows the element's own colour, not the campaign ink, and at a
   mix strong enough to survive a dark panel: --camerce-popups-line is 26%, which reads as
   no border at all on a deep background. The flat declaration first is the
   fallback for a browser without color-mix(). */
.camerce-popups-btn--secondary {
	background: transparent;
	border-color: var(--camerce-popups-el-color, var(--camerce-popups-ink));
	border-color: color-mix(in srgb, var(--camerce-popups-el-color, var(--camerce-popups-ink)) 45%, transparent);
	color: var(--camerce-popups-el-color, var(--camerce-popups-ink));
}

.camerce-popups-btn--link {
	min-height: 0;
	padding: 4px 0;
	background: transparent;
	color: var(--camerce-popups-el-color, var(--camerce-popups-ink));
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: .18em;
}

.camerce-popups-btn:hover { opacity: .88; }
.camerce-popups-btn--secondary:hover { background: var(--camerce-popups-tint); opacity: 1; }

.camerce-popups-btn:focus-visible {
	outline: 2px solid var(--camerce-popups-el-color, var(--camerce-popups-ink));
	outline-offset: 2px;
}

/* List. */
.camerce-popups-el__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--camerce-popups-el-size, 1em);
	line-height: 1.5;
	text-align: start;
}

.camerce-popups-el__list-item {
	position: relative;
	margin: 0 0 .5em;
	padding-inline-start: 1.6em;
}

.camerce-popups-el__list-item:last-child { margin-bottom: 0; }

.camerce-popups-el__list-item::before {
	position: absolute;
	inset-inline-start: 0;
	color: inherit;
	font-weight: 700;
	line-height: inherit;
}

.camerce-popups-el__list--check .camerce-popups-el__list-item::before { content: "\2713"; }
.camerce-popups-el__list--arrow .camerce-popups-el__list-item::before { content: "\2192"; }

.camerce-popups-el__list--dot .camerce-popups-el__list-item::before {
	top: .5em;
	width: .4em;
	height: .4em;
	background: currentColor;
	border-radius: 50%;
	content: "";
}

/* Divider. */
.camerce-popups-el--divider { display: flex; justify-content: var(--camerce-popups-el-flex, center); }

.camerce-popups-el__divider {
	width: var(--camerce-popups-el-hr-w, 100%);
	height: var(--camerce-popups-el-hr-t, 1px);
	margin: 0;
	padding: 0;
	background: var(--camerce-popups-el-color, var(--camerce-popups-line));
	border: 0;
}

/* Spacer. */
.camerce-popups-el--spacer { margin-top: 0; margin-bottom: 0; }
.camerce-popups-el__spacer { height: var(--camerce-popups-el-sp, 24px); }

/* Form and dismiss link: block styles do the work, the wrapper only carries
   alignment and spacing. */
.camerce-popups-el--form,
.camerce-popups-el--close { font-size: var(--camerce-popups-el-size, 1em); }

.camerce-popups-el--close .camerce-popups-close-wrap { justify-content: var(--camerce-popups-el-flex, center); }

/* The dismiss control paints from --camerce-popups-soft, which is derived from the
   campaign's text colour: without this it is the one element whose own colour
   setting does nothing at all. */
.camerce-popups-el--close .camerce-popups-close { color: var(--camerce-popups-el-color, var(--camerce-popups-soft)); }

.camerce-popups-el--close .camerce-popups-close--button {
	border-color: var(--camerce-popups-el-color, var(--camerce-popups-soft));
	color: var(--camerce-popups-el-color, var(--camerce-popups-ink));
}

.camerce-popups-el--close .camerce-popups-close:hover { color: var(--camerce-popups-el-color, var(--camerce-popups-ink)); opacity: .82; }

.camerce-popups-el--html > :first-child { margin-top: 0; }
.camerce-popups-el--html > :last-child { margin-bottom: 0; }
















/* Responsive visibility. Never sniffed from the user agent: the campaign HTML
   is printed once into a <template> and shared by every visitor. */
@media (max-width: 600px) {
	.camerce-popups-el--hide-mobile { display: none !important; }


}

@media (min-width: 601px) {
	.camerce-popups-el--hide-desktop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.camerce-popups-btn { transition: none; }
}