.brsm-wcmp-cta {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 13px;
	margin: 1.25rem 0;
	padding: 1.1rem 1.25rem 1.1rem 1.35rem;
	border: 1px solid #c8e0df;
	border-inline-start: 4px solid #167d8d;
	border-radius: 12px;
	background: linear-gradient(135deg, #f4fbfa 0%, #e8f5f3 100%);
	color: #173e4b;
	line-height: 1.8;
	box-shadow: 0 7px 18px rgba(22, 125, 141, .1);
	font-size: .95rem;
}

.brsm-wcmp-cta__message {
	margin: 0;
}

.brsm-wcmp-cta__icon {
	display: grid;
	flex: 0 0 46px;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: #ffe49a;
	color: #835b0a;
	font-size: 22px;
	order: -1;
}

.brsm-wcmp-cta__content {
	flex: 1;
	min-width: 0;
}

.brsm-wcmp-cta__badge {
	display: inline-block;
	margin-bottom: 4px;
	padding: 2px 8px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	font-size: .75rem;
}

.brsm-wcmp-cta__title {
	display: block;
	margin-bottom: 4px;
	font-size: 1rem;
}

.brsm-wcmp-cta__discount { position: relative; display: grid; flex: 0 0 86px; place-items: center; align-self: stretch; overflow: hidden; border: 1px solid rgba(255, 228, 154, .8); border-radius: 16px; background: rgba(18, 28, 43, .2); color: #fff3b8; text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 16px rgba(16, 31, 45, .14); }
.brsm-wcmp-cta__discount::before { position: absolute; top: -22px; right: -18px; width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 228, 154, .22); content: ''; }
.brsm-wcmp-cta__discount > i { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.35rem; line-height: 1; }
.brsm-wcmp-cta__discount strong { position: relative; z-index: 1; font-size: 1.3rem; font-weight: 800; line-height: 1.1; }
.brsm-wcmp-cta__discount small { position: relative; z-index: 1; margin-top: -2px; color: rgba(255, 255, 255, .82); font-size: .65rem; font-weight: 700; }

.brsm-wcmp-cta--spotlight {
	align-items: center;
	border: 0;
	border-inline-start: 5px solid #f2b84b;
	background: linear-gradient(135deg, #173e4b 0%, #23658a 100%);
	color: #fff;
	box-shadow: 0 9px 22px rgba(23, 62, 75, .2);
}

.brsm-wcmp-cta--minimal {
	padding: .75rem 1rem;
	border: 0;
	border-radius: 6px;
	background: #f7f8f9;
	color: #44546a;
	box-shadow: none;
	font-size: .9rem;
}

.brsm-wcmp-cta--royal { border-inline-start-color: #f2b84b; background: linear-gradient(110deg, #4e3b8f, #7256b6); color: #fff; }
.brsm-wcmp-cta--coral { border-inline-start-color: #f2b84b; background: linear-gradient(110deg, #8f294f, #c25d59); color: #fff; }
.brsm-wcmp-cta--ocean { border-inline-start-color: #f2b84b; background: linear-gradient(110deg, #086579, #197da0); color: #fff; }
.brsm-wcmp-cta--emerald { border-inline-start-color: #1b9a78; background: linear-gradient(110deg, #e7f7f0, #d4efe7); color: #165448; }
.brsm-wcmp-cta--emerald .brsm-wcmp-cta__discount { border-color: #5cae96; background: rgba(255, 255, 255, .58); color: #165448; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 7px 14px rgba(22, 84, 72, .12); }
.brsm-wcmp-cta--emerald .brsm-wcmp-cta__discount::before { background: rgba(27, 154, 120, .13); }
.brsm-wcmp-cta--emerald .brsm-wcmp-cta__discount small { color: #347868; }
.brsm-wcmp-cta--royal .brsm-wcmp-cta__discount > i { background: rgba(224, 205, 255, .2); color: #eadbff; }
.brsm-wcmp-cta--coral .brsm-wcmp-cta__discount > i { background: rgba(255, 201, 186, .2); color: #ffd0c2; }
.brsm-wcmp-cta--ocean .brsm-wcmp-cta__discount > i { background: rgba(151, 235, 238, .2); color: #baf8f4; }
.brsm-wcmp-cta--emerald .brsm-wcmp-cta__discount > i { background: rgba(22, 84, 72, .12); color: #172b4d; }
.brsm-wcmp-cta--amber .brsm-wcmp-cta__discount > i { background: rgba(255, 229, 164, .2); color: #ffe9a8; }
.brsm-wcmp-cta--sapphire .brsm-wcmp-cta__discount > i { background: rgba(163, 222, 255, .2); color: #c7ecff; }
.brsm-wcmp-cta--ruby .brsm-wcmp-cta__discount > i { background: rgba(255, 190, 211, .2); color: #ffd0df; }
.brsm-wcmp-cta--onyx .brsm-wcmp-cta__discount > i { background: rgba(255, 237, 135, .18); color: #fff0a3; }
.brsm-wcmp-cta--amber { border-inline-start-color: #ffe49a; background: linear-gradient(110deg, #8d4b0b, #c06e18); color: #fff; }
.brsm-wcmp-cta--sapphire { border-inline-start-color: #f2b84b; background: linear-gradient(110deg, #164a7d, #286b9b); color: #fff; }
.brsm-wcmp-cta--ruby { border-inline-start-color: #f2b84b; background: linear-gradient(110deg, #8d1747, #ae3c5c); color: #fff; }
.brsm-wcmp-cta--onyx { border-inline-start-color: #f2d45c; background: linear-gradient(110deg, #171919, #292b2b); color: #fff; }

.brsm-wcmp-cta[hidden] {
	display: none;
}

@media (max-width: 480px) {
	.brsm-wcmp-cta { display: grid; grid-template-columns: 1fr; grid-template-areas: "icon" "content" "discount"; align-items: start; gap: 12px; padding: 1rem; font-size: .9rem; }
	.brsm-wcmp-cta__icon { grid-area: icon; }
	.brsm-wcmp-cta__content { grid-area: content; }
	.brsm-wcmp-cta__discount { grid-area: discount; width: 100%; min-height: 82px; align-self: auto; box-sizing: border-box; }
}