/*
 * Pop Commerce builder: content blocks added in F7 (perks list, heading accents, bold weight, leading field icon).
 *
 * Custom properties set by style props (style-props.json): --pc-cols, --pc-perk-ico, --pc-perk-ico-c, --pc-accent,
 * --pc-strong-w, --pc-lead-s, --pc-lead-c, --pc-lead-y. Every rule sits in :where() (specificity 0), so the styles of a
 * node always win. No transitions or animations in this file.
 */
:where(.pc-perks-list) {
	display: grid;
	grid-template-columns: repeat(var(--pc-cols, 2),minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

:where(.pc-perk) {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	box-sizing: border-box;
}

:where(.pc-perk-ico) {
	flex: none;
	display: inline-flex;
	width: var(--pc-perk-ico, 40px);
	height: var(--pc-perk-ico, 40px);
	color: var(--pc-perk-ico-c, currentcolor);
}

:where(.pc-perk-ico svg) {
	width: 100%;
	height: 100%;
	fill: currentcolor;
}

:where(.pc-perk-t) {
	white-space: pre-line;
	min-width: 0;
}

:where(.pc-accent) {
	color: var(--pc-accent, inherit);
}

:where(.pc-tm) {
	display: inline-block;
	font-size: .3em;
	line-height: 1;
	padding: .25em;
	border: 1px solid currentcolor;
	border-radius: 50%;
	vertical-align: super;
	color: var(--pc-accent, inherit);
}

:where(.pc-b-richtext strong, .pc-b-text strong) {
	font-weight: var(--pc-strong-w, bolder);
}

:where(.pc-has-lead) {
	position: relative;
}

:where(.pc-f-lead) {
	position: absolute;
	left: 14px;
	top: var(--pc-lead-y, 12px);
	width: var(--pc-lead-s, 18px);
	height: var(--pc-lead-s, 18px);
	color: var(--pc-lead-c, currentcolor);
	pointer-events: none;
}

:where(.pc-f-lead svg) {
	width: 100%;
	height: 100%;
	fill: currentcolor;
}

:where(.pc-has-lead > .pc-input) {
	padding-left: calc(24px + var(--pc-lead-s, 18px));
}

/*
 * E8: the success node sits in a column or a card (pc-has-success on that parent). In the success view the
 * parent keeps only the thank-you, the close button and the background picture. Zero specificity: a style on a node
 * still wins.
 */
:where(.pc-popup[data-pc-view="success"] .pc-has-success > :not(.pc-b-success, .pc-b-close, .pc-bgpic)) {
	display: none;
}

/*
 * E8: a column whose only child is the form (the thank-you sits in another container) is hidden in the success view.
 * Zero specificity, like the rule above. The renderer marks such a column or card with pc-form-only
 * (ContainerBlocks::add_host_classes).
 */
:where(.pc-popup[data-pc-view="success"] .pc-form-only) {
	display: none;
}

/*
 * E8: the thank-you inside a column or card cannot be wider than its host (a 100% width plus the margin of the
 * success stuck out by the margin, 40 px in popup1). Low specificity: a max-width set on the node still wins.
 */
:where(.pc-has-success) > .pc-b-success {
	max-width: 100%;
	box-sizing: border-box;
}