/* ============================================================================
   CricHD — homepage bookmarks (row layout): star on each row + popup panel.
   Also keeps the FIXED live badge (so the dot bug stays fixed after revert).
   Uses theme-v2.css variables -> auto light/dark.
   ============================================================================ */

/* ---------- FIXED live badge -------------------------------------------- */
.badge-live {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 9px; border-radius: var(--radius-sm);
	background: var(--live-bg); color: var(--live-text);
	font-size: 11px; font-weight: 600; line-height: 1;
	text-transform: uppercase; letter-spacing: .02em;
	overflow: visible; border-left: 0;
}
.badge-live::before {
	content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
	background: var(--live-dot); box-shadow: 0 0 0 0 var(--live-dot);
	animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(var(--live-pulse-rgba), .6); }
	70%  { box-shadow: 0 0 0 6px rgba(var(--live-pulse-rgba), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--live-pulse-rgba), 0); }
}
@media (prefers-reduced-motion: reduce) { .badge-live::before { animation: none; } }

/* ---------- per-row star (homepage only) -------------------------------- */
.event-row { position: relative; }
.event-row:has(.event-star) .event-cta { display: none; }
.event-star {
	position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
	z-index: 3;
	width: 30px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center;
	border: none; background: transparent; color: var(--muted);
	font-size: 16px; line-height: 1; cursor: pointer;
	border-radius: var(--radius-sm);
	transition: color .15s, background .15s, transform .15s;
}
.event-star:hover { background: var(--card-2); color: var(--accent); }
.event-star:active { transform: translateY(-50%) scale(.85); }
.event-star.is-saved { color: var(--accent); }
.event-star:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---------- bookmark FAB ------------------------------------------------- */
.bm-fab {
	position: fixed; z-index: 9998; right: 18px; bottom: 18px;
	width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
	background: var(--brand); color: #fff; font-size: 20px;
	box-shadow: var(--shadow-md);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s, transform .15s;
}
.bm-fab:hover { background: var(--brand-dark); transform: translateY(-1px); }
.bm-count {
	position: absolute; top: -4px; right: -4px;
	min-width: 20px; height: 20px; padding: 0 5px;
	border-radius: 999px; background: var(--accent); color: #1a1a1a;
	font-size: 11px; font-weight: 700; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- bookmark popup panel ---------------------------------------- */
.bm-panel {
	position: fixed; z-index: 9999; right: 18px; bottom: 80px;
	width: min(360px, calc(100vw - 36px));
	max-height: min(70vh, 560px); overflow: auto;
	background: var(--card); border: 1px solid var(--border);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
	padding: 12px;
}
.bm-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bm-panel-title { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.bm-panel-title .fa { color: var(--accent); }
.bm-close {
	border: none; background: transparent; color: var(--muted);
	font-size: 22px; line-height: 1; cursor: pointer;
	width: 30px; height: 30px; border-radius: var(--radius-sm);
}
.bm-close:hover { background: var(--card-2); color: var(--text); }

.bm-list { display: flex; flex-direction: column; gap: 8px; }
.bm-item {
	display: flex; align-items: center; gap: 10px; padding: 8px;
	border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-2);
}
.bm-item-main { flex: 1 1 auto; min-width: 0; }
.bm-item-teams { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-item-league { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-item-watch {
	flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #fff;
	background: var(--brand); border-radius: var(--radius-sm); padding: 6px 10px; text-decoration: none;
}
.bm-item-watch:hover { background: var(--brand-dark); color: #fff; }
.bm-item-remove {
	flex: 0 0 auto; border: none; background: transparent; color: var(--muted);
	cursor: pointer; font-size: 14px; width: 28px; height: 28px; border-radius: var(--radius-sm);
}
.bm-item-remove:hover { background: var(--card); color: var(--live-text); }
.bm-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 10px 6px; margin: 0; }

@media (max-width: 480px) {
	.bm-fab { right: 14px; bottom: 14px; width: 48px; height: 48px; }
	.bm-panel { right: 14px; bottom: 70px; }
}

/* ---------- "Live Now" pinned strip ------------------------------------- */
.league-card.live-strip .league-card-head { display: flex; align-items: center; }
.live-dot { color: var(--live-dot) !important; animation: live-blink 1.4s ease-in-out infinite; }
@keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.live-strip-count {
	margin-left: auto; font-size: 11px; font-weight: 700; line-height: 1;
	color: var(--live-text); background: var(--live-bg);
	padding: 3px 9px; border-radius: 999px;
	text-transform: uppercase; letter-spacing: .02em;
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }