/**
 * Popular Plans block — layout shell; card UI is rendered by React (MUI).
 */

#dp-block--popular-plans {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

#dp-block--popular-plans .react-popular-plans {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

#dp-block--popular-plans .dp-popular-plans-placeholder {
	text-align: center;
	color: var(--wp--preset--color--utility-body, #4b5260);
	margin: 2rem 0;
}

#dp-block--popular-plans .react-popular-plans[data-react-mounted="1"] .dp-popular-plans-placeholder {
	display: none;
}

/**
 * Defensive resets — WordPress block typography (h1–h6, p) and the
 * `.wp-element-button` rules add margins and font sizes that leak into the
 * React-rendered MUI components. Strip them inside the mount so MUI's `sx`
 * styles render exactly as designed in Figma.
 */
#dp-block--popular-plans .react-popular-plans :is(h1, h2, h3, h4, h5, h6, p) {
	margin: 0;
	padding: 0;
}