/**********************************/
/*** SITE ADDITIONS             ***/
/**********************************/
/* Only for pieces the reference does not have; everything else comes from
   base.css / components.css / ref-runtime.css unchanged. */

/* Provider dropdown: a native <select> laid over the MUI-styled box. */
.crmpam-select {
	position: relative;
}
.crmpam-select .lobby-native-select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}
.crmpam-select .lobby-native-select option {
	color: #000;
}

/* The reference's artwork is square; some of our providers ship landscape
   thumbnails, so crop them to fill the card. */
.crmpam-machine .crmpam-machine-logo,
.lux-machine .crmpam-machine-logo {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Providers without a reference logo. */
.provider-slide div span.provider-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
}

/* Logged-in balance next to the account button. */
.crmpam-header-balance {
	font-weight: bold;
	white-space: nowrap;
	color: var(--crmpam-color-primary);
}

/* Sportsbook iframe fills the viewport below the fixed header. */
.sports-frame {
	width: 100%;
	height: calc(100vh - 66px);
	height: calc(100dvh - 66px);
}
.sports-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Tournament descriptions come from the back office as plain text. */
.Card_card__MzoQt .Card_description__c_5H4 {
	padding: 0 16px 16px;
}

/* Tournament media from the back office is often portrait phone video;
   keep cards a sensible height and letterbox the clip. */
.Card_card__MzoQt video.Card_bannerImg__Q22Wf {
	width: 100%;
	height: 420px;
	max-height: 60vh;
	object-fit: contain;
	background: #000;
}

/* Home bottom links: same frame for the three artworks. */
.homeImageLinks .home-tile-image {
	aspect-ratio: 1920 / 500;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 1px 8px 2px rgba(0, 0, 0, 0.3);
}

/* Login popup close button: the reference positions it through a global
   .close rule injected by its loyalty widget; same values, scoped here. */
.crmpam-popup .crmpam-popup-content-header .close {
	top: 16px;
	right: 20px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

/* Our tile artwork carries its own title, so the button sits below the
   image instead of on top of it. */
.homeImageLinks > div a {
	flex-direction: column;
	gap: 12px;
}
.homeImageLinks > div a button.crmpam-btn-primary {
	position: static;
	margin-top: 0;
}