/*
 * Casino Toplists plugin — theme-side fixes (the plugin itself is untouched).
 *
 * The plugin lays each card out as a fixed-width flex row (logo 220px +
 * features 440px + CTA 230px ≈ 890px) and only stacks it below a *viewport*
 * width of 1099px. When a sidebar is shown (body.has-sidebar) the main column is
 * narrow even on wide viewports, so the row never stacks and the CTA overflows
 * onto the sidebar.
 *
 * Here we force the plugin's own stacked layout whenever a sidebar is present,
 * so the card fits its narrow column at any viewport width.
 */

body.has-sidebar .tli-casino-card {
	flex-direction: column;
	overflow: hidden;
}

body.has-sidebar .tli-casino-card-left {
	width: 100%;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 20px 18px 0;
	gap: 0;
}

body.has-sidebar .tli-casino-logo-link {
	height: 70px;
	width: 180px;
	flex-shrink: 0;
}

body.has-sidebar .tli-casino-rating-container {
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	margin-top: -5px;
}

body.has-sidebar .tli-casino-card-middle {
	padding: 16px 20px 8px;
	min-width: 0;
}

body.has-sidebar .tli-casino-card-features {
	width: 100%;
	max-width: 100%;
	border-left: none !important;
	padding: 12px 20px;
	justify-content: center;
}

body.has-sidebar .tli-casino-card-right {
	width: 100%;
	border-left: none !important;
	padding: 14px 20px 18px;
}

/* Very narrow main column (small desktops): mirror the plugin's 768px stacking
   of the logo/rating block too. */
@media screen and (max-width: 1200px) {
	body.has-sidebar .tli-casino-card-left {
		flex-direction: column;
		align-items: center;
		padding-top: 20px;
	}

	body.has-sidebar .tli-casino-logo-link {
		width: 100%;
		max-width: 200px;
		height: 72px;
	}

	body.has-sidebar .tli-casino-rating-container {
		flex-direction: row;
		align-items: center;
	}
}