/* Fanzo Feed — colours/fonts below are overridden per-instance via inline
   custom properties set from Settings > Fanzo Feed. These var(..., fallback)
   values only apply when nothing has been saved there. */
.fanzo-feed {
	--fanzo-accent: #1a1a1a;
	--fanzo-accent-hover: #000;
	--fanzo-accent-text: #fff;
	--fanzo-muted: #666;
	--fanzo-border: rgba(0, 0, 0, 0.1);
	--fanzo-big-screen-bg: #e8f4fd;
	--fanzo-big-screen-text: #1a6fa8;
	--fanzo-sound-bg: #edfaee;
	--fanzo-sound-text: #1a7a25;
	--fanzo-sticky-top: 0px;

	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0 0 2em;
}

.fanzo-feed p.fanzo-feed__title { font-size: 0.8em; text-transform: uppercase; }

.fanzo-feed__item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--fanzo-border); flex-wrap: nowrap; }
.fanzo-feed__day:last-child .fanzo-feed__item { border-bottom: none; }

/* Date/time */
.fanzo-feed__time { flex: 0 0 180px; font-size: 0.85rem; color: var(--fanzo-muted); white-space: nowrap; }

/* Competition logo (small, e.g. league badge) */
.fanzo-feed__comp-logo { flex: 0 0 auto; width: 20px; height: 20px; object-fit: contain; }

/* Competition/league name */
.fanzo-feed__competition { flex: 0 0 180px; font-size: 0.8rem; color: var(--fanzo-muted); white-space: nowrap; }

/* Teams row — takes remaining space */
.fanzo-feed__teams { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Team or sport badge */
.fanzo-feed__badge { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.fanzo-feed__badge--sport { width: 28px; height: 28px; opacity: 0.7; }

/* Match title */
.fanzo-feed__title { margin: 0; font-size: 0.8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Channel logo (Sky Sports, TNT etc.) */
.fanzo-feed__channel-logo { flex: 0 0 auto; width: 32px; height: 20px; object-fit: contain; }

/* Big screen / sound flags */
.fanzo-feed__flag { flex: 0 0 auto; font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.fanzo-feed__flag--big-screen { background: var(--fanzo-big-screen-bg); color: var(--fanzo-big-screen-text); }
.fanzo-feed__flag--sound { background: var(--fanzo-sound-bg); color: var(--fanzo-sound-text); }

/* "More info" CTA button — colours/font configurable in Settings > Fanzo Feed */
a.fanzo-feed__book {
	flex: 0 0 auto;
	font-weight: 400;
	white-space: nowrap;
	text-decoration: none;
	padding-top: var(--fanzo-cta-padding-top, 6px);
	padding-right: 12px;
	padding-bottom: var(--fanzo-cta-padding-bottom, 8px);
	padding-left: 12px;
	border-radius: var(--fanzo-cta-radius, 4px);
	text-transform: uppercase;
	background: var(--fanzo-cta-bg, var(--fanzo-accent));
	color: var(--fanzo-cta-text, var(--fanzo-accent-text));
	font-family: var(--fanzo-cta-font, inherit);
	font-size: var(--fanzo-cta-font-size, 0.8rem);
	transition: background 0.2s, color 0.2s;
}
a.fanzo-feed__book:hover {
	background: var(--fanzo-cta-bg-hover, var(--fanzo-accent-hover));
	color: var(--fanzo-cta-text-hover, var(--fanzo-cta-text, var(--fanzo-accent-text)));
}

/* Top navigation (month) buttons — colours/font configurable in Settings > Fanzo Feed */
.fanzo-feed__month-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
	position: sticky;
	top: var(--fanzo-sticky-top);
	padding: 25px 0;
	z-index: 100;
	background: var(--fanzo-month-controls-bg, inherit);
}
.fanzo-feed__month-controls::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--fanzo-border); }

.fanzo-feed__month-button {
	border: 1px solid var(--fanzo-month-border, rgba(0, 0, 0, 0.4));
	background: var(--fanzo-month-bg, transparent);
	color: var(--fanzo-month-text, rgba(0, 0, 0, 0.6));
	font-family: var(--fanzo-month-font, inherit);
	padding-top: var(--fanzo-month-padding-top, 4px);
	padding-right: 12px;
	padding-bottom: var(--fanzo-month-padding-bottom, 7px);
	padding-left: 12px;
	cursor: pointer;
	font-size: var(--fanzo-month-font-size, 0.8em);
	text-transform: uppercase;
	border-radius: var(--fanzo-month-radius, 4px);
	line-height: normal;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.fanzo-feed__month-button.is-active,
.fanzo-feed__month-button:hover {
	background: var(--fanzo-month-bg-hover, var(--fanzo-month-bg, transparent));
	color: var(--fanzo-month-text-hover, var(--fanzo-accent));
	border-color: var(--fanzo-month-border-hover, var(--fanzo-accent));
}

.fanzo-feed__month-panel { display: none; }
.fanzo-feed__month-panel.is-active { display: block; padding-top: 40px; }

/* Mobile */
@media (max-width: 600px) {
	.fanzo-feed__item { flex-wrap: wrap; gap: 8px; }
	.fanzo-feed__time { flex: 0 0 100%; font-size: 0.8rem; text-align: center; }
	.fanzo-feed__teams { flex: 1 1 100%; order: -1; display: flex; justify-content: center; }
	.fanzo-feed__teams .fanzo-feed__title { font-size: 0.8em; }
	.fanzo-feed__competition,
	.fanzo-feed__comp-logo { display: none; }
	.fanzo-feed__channel-logo { display: none; }
	a.fanzo-feed__book { margin-left: auto; display: none; }
}