/* =====================================================
   PAGE RIBBONS
   Fixed to the browser viewport.
   ===================================================== */

.cpr-page-ribbon {
	position: fixed;
	z-index: 999999;
	width: 160px;
	box-sizing: border-box;
	padding: 6px 0;
	background: var(--cpr-bg, #cc0000);
	color: var(--cpr-color, #ffffff);
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	pointer-events: none;
}

.cpr-page-ribbon.cpr-top-left {
	top: 20px;
	left: -45px;
	transform: rotate(-45deg);
}

.cpr-page-ribbon.cpr-top-right {
	top: 20px;
	right: -45px;
	transform: rotate(45deg);
}

.cpr-page-ribbon.cpr-bottom-left {
	bottom: 20px;
	left: -45px;
	transform: rotate(45deg);
}

.cpr-page-ribbon.cpr-bottom-right {
	right: -45px;
	bottom: 20px;
	transform: rotate(-45deg);
}


/* =====================================================
   IMAGE RIBBONS
   The wrapper clips the diagonal ribbon to the image.
   Position is calculated from the chosen ribbon width,
   which keeps the visible band centred across the corner.
   ===================================================== */

.cpr-image-wrapper {
	position: relative;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	vertical-align: middle;
	line-height: 0;
}

.cpr-image-wrapper > img {
	display: block;
	max-width: 100%;
	height: auto;
}

.cpr-image-wrapper .cpr-ribbon {
	--cpr-image-width: 180px;
	--cpr-image-font-size: 14px;
	--cpr-image-padding: 8px;

	position: absolute;
	z-index: 10;
	width: var(--cpr-image-width);
	box-sizing: border-box;
	padding: var(--cpr-image-padding) 10px;
	background: var(--cpr-bg, #cc0000);
	color: var(--cpr-color, #ffffff);
	font-size: var(--cpr-image-font-size);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
	transform-origin: center;
}

/*
 * For a 45-degree corner ribbon, positioning it approximately
 * 29.3% of its width outside the edge centres the diagonal band
 * over the corner. The inward offset uses roughly 20% of width.
 */
.cpr-image-wrapper .cpr-top-left {
	top: calc(var(--cpr-image-width) * 0.20);
	left: calc(var(--cpr-image-width) * -0.293);
	transform: rotate(-45deg);
}

.cpr-image-wrapper .cpr-top-right {
	top: calc(var(--cpr-image-width) * 0.20);
	right: calc(var(--cpr-image-width) * -0.293);
	transform: rotate(45deg);
}

.cpr-image-wrapper .cpr-bottom-left {
	bottom: calc(var(--cpr-image-width) * 0.20);
	left: calc(var(--cpr-image-width) * -0.293);
	transform: rotate(45deg);
}

.cpr-image-wrapper .cpr-bottom-right {
	right: calc(var(--cpr-image-width) * -0.293);
	bottom: calc(var(--cpr-image-width) * 0.20);
	transform: rotate(-45deg);
}