/*
 * DEV-tony-024: the BetAnything banner on prediction pages.
 *
 * Colours are sampled from the two supplied creatives, not chosen: the ground
 * is #2c033d (the dominant colour of both left columns) and the call to action
 * is #4dfc87 (the JOIN NOW pill). The plain panel exists for the fifteen
 * thousand predictions in leagues with no artwork, and it has to read as the
 * same advertiser.
 */

.sas-banner {
	margin: 1.5rem 0;
}

.sas-banner-link {
	display: block;
	text-decoration: none;
	border-radius: 10px;
	overflow: hidden;
	background: #2c033d;
	color: #fff;
}

.sas-banner-link:hover,
.sas-banner-link:focus-visible {
	text-decoration: none;
	color: #fff;
}

/* The artwork carries the offer, the brand and its own call to action, so the
   only thing added under it is the line naming this game. */
.sas-banner-art {
	display: block;
	width: 100%;
	height: auto;
}

.sas-banner--art .sas-banner-line {
	display: block;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	color: #fff;
}

/* The plain panel names the brand and the game and nothing else. No offer
   terms: none were supplied for these leagues. */
.sas-banner--plain .sas-banner-link {
	padding: 1.25rem 1rem 1rem;
	text-align: center;
}

.sas-banner-brand {
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #f0d181;
}

.sas-banner--plain .sas-banner-line {
	display: block;
	margin: 0.5rem 0 1rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.sas-banner-cta {
	display: inline-block;
	min-width: 12rem;
	padding: 0.65rem 2rem;
	border-radius: 999px;
	background: #4dfc87;
	color: #08321c;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sas-banner-link:hover .sas-banner-cta,
.sas-banner-link:focus-visible .sas-banner-cta {
	background: #35e870;
}

.sas-banner-terms {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.75rem;
	color: #cbb8d6;
}

@media (max-width: 480px) {
	.sas-banner--plain .sas-banner-line {
		font-size: 1.0625rem;
	}

	.sas-banner-cta {
		min-width: 0;
		width: 100%;
	}
}