.ribbon-container {
	font-size: 16px;
	position: relative;
	display: inline-block;
	text-align: center;
	z-index: 9999; /* ensures ribbon stays above everything */
}

.ribbon-text {
	display: inline-block;
	padding: 0.5em 1em;
	line-height: 1.2em;
	background: #3b82f6; /* Main blue */
	color: #fff;
	position: relative;
	z-index: 10000; /* keeps text above decorative shapes */
}

/* Ribbon shapes */
.ribbon-container::after,
.ribbon-container::before,
.ribbon-text::before,
.ribbon-text::after,
.ribbon-bold::before {
	content: "";
	position: absolute;
	border-style: solid;
	z-index: 9998; /* shapes just behind text but above other elements */
}

.ribbon-container::before {
	top: 0.3em;
	width: 100%;
	height: 100%;
	border: none;
	background: #e0e7ff; /* light blue-gray shadow */
}

.ribbon-text::before {
	bottom: 100%;
	left: 0;
	border-width: 0.6em 0.7em 0 0;
	border-color: transparent #1e40af transparent transparent; /* dark blue edge */
}

.ribbon-text::after {
	top: 100%;
	right: 0;
	border-width: 0.5em 2em 0 0;
	border-color: #1e40af transparent transparent transparent; /* dark blue edge */
}

.ribbon-container::after,
.ribbon-bold::before {
	top: 0.5em;
	right: -2em;
	border-width: 1.1em 1em 1.1em 3em;
	border-color: #2563eb transparent #2563eb #2563eb; /* deep blue tail */
}

.ribbon-bold::before {
	border-color: #e0e7ff transparent #e0e7ff #e0e7ff; /* light edge accent */
	top: 0.7em;
	right: -2.3em;
}