.wpcupid-callout {
	--wpcupid-callout-accent: #1677c8;
	--wpcupid-callout-bg: #eaf4ff;
	--wpcupid-callout-heading: #0d4f85;
	align-items: flex-start;
	background: var(--wpcupid-callout-bg);
	border: 1px solid #d7e0e8;
	border-color: color-mix(in srgb, var(--wpcupid-callout-accent) 28%, #fff);
	border-left: 6px solid var(--wpcupid-callout-accent);
	border-radius: 12px;
	box-shadow: 0 5px 18px rgb(15 23 42 / 7%);
	box-sizing: border-box;
	color: #263445;
	display: grid;
	font-family: inherit;
	gap: 14px;
	grid-template-columns: 42px minmax(0, 1fr);
	line-height: 1.65;
	margin: 1.6rem 0;
	padding: 20px 22px 20px 18px;
	width: 100%;
}

.wpcupid-callout *,
.wpcupid-callout *::before,
.wpcupid-callout *::after {
	box-sizing: border-box;
}

.wpcupid-callout__emoji {
	align-items: center;
	background: rgb(255 255 255 / 72%);
	border-radius: 50%;
	display: flex;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-size: 24px;
	height: 42px;
	justify-content: center;
	line-height: 1;
	width: 42px;
}

.wpcupid-callout__title {
	color: var(--wpcupid-callout-heading);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 1px 0 7px;
}

.wpcupid-callout__content {
	font-size: 16px;
}

.wpcupid-callout__content > :first-child {
	margin-top: 0 !important;
}

.wpcupid-callout__content > :last-child {
	margin-bottom: 0 !important;
}

.wpcupid-callout__content ul,
.wpcupid-callout__content ol {
	margin-bottom: 0.25em;
	padding-left: 1.35em;
}

.wpcupid-callout--quick-answer {
	--wpcupid-callout-accent: #1677c8;
	--wpcupid-callout-bg: #eaf4ff;
	--wpcupid-callout-heading: #0d4f85;
}

.wpcupid-callout--expert-tip {
	--wpcupid-callout-accent: #315fbd;
	--wpcupid-callout-bg: #e8efff;
	--wpcupid-callout-heading: #24488f;
}

.wpcupid-callout--common-mistake {
	--wpcupid-callout-accent: #d13b45;
	--wpcupid-callout-bg: #fff0f1;
	--wpcupid-callout-heading: #992832;
}

.wpcupid-callout--from-my-experience {
	--wpcupid-callout-accent: #238b57;
	--wpcupid-callout-bg: #edf9f2;
	--wpcupid-callout-heading: #17643d;
}

.wpcupid-callout--money-saving-tip {
	--wpcupid-callout-accent: #d09b00;
	--wpcupid-callout-bg: #fff8dc;
	--wpcupid-callout-heading: #755700;
}

.wpcupid-callout--checklist {
	--wpcupid-callout-accent: #2d8a3f;
	--wpcupid-callout-bg: #effaf0;
	--wpcupid-callout-heading: #20662e;
}

@media (max-width: 600px) {
	.wpcupid-callout {
		gap: 10px;
		grid-template-columns: 34px minmax(0, 1fr);
		padding: 17px 16px 17px 13px;
	}

	.wpcupid-callout__emoji {
		font-size: 20px;
		height: 34px;
		width: 34px;
	}

	.wpcupid-callout__title {
		font-size: 17px;
	}
}