Fix Spotlight items watchlist functionality

scripts/cardBuilder.css

@@ -779,10 +779,6 @@
 .spotlight-play-button {
 	width: 48px;
 	height: 48px;
-	border-radius: 50%;
-	background: rgba(255, 255, 255, 0.9);
-	color: #000;
-	border: none;
 	cursor: pointer;
 	display: flex;
 	align-items: center;
@@ -803,9 +799,6 @@
 	width: 48px;
 	height: 48px;
 	border-radius: 50%;
-	background: rgba(255, 255, 255, 0.2);
-	color: white;
-	border: 2px solid rgba(255, 255, 255, 0.5);
 	cursor: pointer;
 	display: flex;
 	align-items: center;
@@ -814,25 +807,12 @@
 	transition: all 0.2s;
 }
 
-.spotlight-watchlist-button:hover {
-	background: rgba(255, 255, 255, 0.3);
-}
-
-.spotlight-watchlist-button.watchlisted {
-	border-color: #4caf50;
-}
-
-.spotlight-watchlist-button.watchlisted .material-icons {
+.spotlight-watchlist-button[data-active="true"] .material-icons {
 	color: #4caf50;
 }
 
-.spotlight-watchlist-button:not(.watchlisted):hover {
-	border-color: rgba(255, 255, 255, 0.7);
-}
-
 .spotlight-watchlist-button .material-icons {
 	font-size: 28px;
-	color: white;
 }
 
 .spotlight-info-button {
@@ -842,15 +822,16 @@
 	justify-content: center;
 	transition: all 0.2s;
 	position: relative;
+	overflow: visible;
 }
 
 .spotlight-overview-tooltip {
-	position: absolute;
+	position: absolute !important;
 	text-align: left;
 	bottom: 100%;
 	left: 50%;
-	transform: translateX(-50%);
-	margin-bottom: 12px;
+	transform: translateX(-50%) !important;
+	margin-bottom: 12px !important;
 	padding: 16px;
 	background: rgba(0, 0, 0, 0.95);
 	color: white;
@@ -864,17 +845,19 @@
 	pointer-events: none;
 	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
 	transition-delay: 0s;
-	z-index: 1000;
+	z-index: 1000 !important;
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 	word-wrap: break-word;
+	max-height: unset !important;
 }
 
 /* Show only while hovering the info icon glyph — not the button/tooltip footprint */
-.spotlight-info-button:has(.material-icons:hover) .spotlight-overview-tooltip {
+.spotlight-info-button:is(.emby-button):hover .spotlight-overview-tooltip {
 	opacity: 1;
 	visibility: visible;
 	pointer-events: none;
 	transition-delay: 0.5s, 0.5s;
+	display: block;
 }
 
 /* Hover overview only on Normal desktop spotlights */
@@ -1703,7 +1686,7 @@
 	transform: translateX(-50%) !important;
 	width: fit-content !important;
 	max-width: min(85%, 700px);
-	text-align: center !important;
+	text-align: left !important;
 	font-style: italic;
 	font-size: 1.05em;
 	margin: 0 !important;
@@ -1725,6 +1708,8 @@
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
 	cursor: default;
+	height: unset;
+	line-height: 1.5;
 }
 
 /* Normal and large: tagline above dots (dots at bottom: 20px) */
@@ -1885,6 +1870,9 @@
 	margin: 0px !important;
 	padding: 0px !important;
 }
+.spotlight-section .mainDetailButtons > :is(button.emby-button) {
+	padding: 0.5em !important;
+}
 .spotlight-section .mainDetailButtons > .btnPlay:is(.emby-button) {
 	padding: 0.25em !important;
 }
@@ -1934,7 +1922,7 @@
 }
 
 .spotlight-metadata-row .emby-tab-button {
-	color: #ececec;
+	color: #c0c0c0;
 }
 
 :where(.spotlight-section-title.headerTabs.sectionTabs),