.bb-promo-slider {
	position: relative;
}

/* Banner: image fits fully within the card (never cropped), text overlays the bottom. */
.bb-promo-slide { display: none; }
.bb-promo-slide.active { display: block; }

.bb-promo-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 300px;
	background: var(--ink, #0B1330);
	color: #fff;
	border-radius: var(--radius, 8px);
	overflow: hidden;
}

.bb-promo-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Darkens the lower part of the image so the text stays readable. */
.bb-promo-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(12, 14, 26, 0.88) 0%, rgba(12, 14, 26, 0.55) 38%, rgba(12, 14, 26, 0) 70%);
}

.bb-promo-text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 720px;
	padding: 24px 28px;
}

.bb-promo-text strong {
	font-family: var(--font-head, inherit);
	font-size: clamp(20px, 2.6vw, 28px);
	line-height: 1.15;
}

.bb-promo-text span {
	font-size: 14.5px;
	line-height: 1.45;
	opacity: 0.92;
}

@media (max-width: 640px) {
	.bb-promo-card { min-height: 230px; }
	.bb-promo-text { padding: 18px; }
}

/* ==========================================================
   CODE BANNERS
   The banner is built at its design size (e.g. 2400 x 500) inside
   .bb-promo-code-inner, then scaled down to the container width by
   promo-scale.js. The wrapper keeps the same aspect ratio, so its
   height follows automatically. Always full row, even beside others.
   ========================================================== */
.bb-promo-code {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius, 8px);
}

.bb-promo-code-inner {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: top left;
	visibility: hidden; /* revealed once scaled, so it never flashes at full size */
}

.bb-promo-code.is-ready .bb-promo-code-inner { visibility: visible; }