/* ==========================================================================
   SN Sports widgets — self-contained styling.
   Uses theme CSS variables when present, with safe fallbacks.
   ========================================================================== */

.sn-w,
.sn-ticker-wrap {
	--sn-green:   var(--color-brand, #0A7A3D);
	--sn-green-d: var(--color-brand-dark, #075c2d);
	--sn-orange:  var(--color-accent, #FF6A00);
	--sn-ink:     var(--color-ink, #0c1116);
	--sn-muted:   var(--color-muted, #687586);
	--sn-line:    var(--color-line, #e6e9ee);
	--sn-surface: var(--color-surface, #ffffff);
	--sn-soft:    var(--color-soft, #f5f7f9);
	--sn-live:    #e8202a;
	font-family: var(--font-body, "Work Sans", system-ui, -apple-system, sans-serif);
	color: var(--sn-ink);
	box-sizing: border-box;
}
.sn-w *,
.sn-ticker-wrap * { box-sizing: border-box; }

/* ---------- block headings / states ---------- */
.sn-block-h {
	font-family: var(--font-display, "Anton", system-ui, sans-serif);
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: .82rem;
	color: var(--sn-ink);
	margin: 14px 0 8px;
	padding-bottom: 5px;
	border-bottom: 2px solid var(--sn-green);
}
.sn-empty {
	padding: 18px 14px;
	text-align: center;
	color: var(--sn-muted);
	font-size: .85rem;
	background: var(--sn-soft);
	border-radius: 10px;
}
.sn-updated { font-size: .68rem; color: var(--sn-muted); margin-top: 6px; text-align: right; }
.sn-attr { font-size: .62rem; color: var(--sn-muted); margin-top: 8px; opacity: .8; }
.sn-more {
	display: inline-block; margin-top: 8px; font-size: .76rem; font-weight: 700;
	color: var(--sn-green); text-decoration: none;
}
.sn-more:hover { color: var(--sn-orange); }

/* ---------- live dot ---------- */
.sn-dot {
	display: inline-block; width: 7px; height: 7px; border-radius: 50%;
	background: var(--sn-live); margin-right: 5px; vertical-align: middle;
	box-shadow: 0 0 0 0 rgba(232,32,42,.7); animation: sn-pulse 1.6s infinite;
}
@keyframes sn-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(232,32,42,.6); }
	70%  { box-shadow: 0 0 0 7px rgba(232,32,42,0); }
	100% { box-shadow: 0 0 0 0 rgba(232,32,42,0); }
}
@media (prefers-reduced-motion: reduce) { .sn-dot { animation: none; } }

/* ---------- pills ---------- */
.sn-pill {
	display: inline-flex; align-items: center; font-size: .68rem; font-weight: 700;
	padding: 2px 7px; border-radius: 20px; white-space: nowrap; line-height: 1.4;
}
.sn-live  { background: rgba(232,32,42,.10); color: var(--sn-live); }
.sn-final { background: var(--sn-soft); color: var(--sn-muted); }
.sn-pre   { background: rgba(10,122,61,.08); color: var(--sn-green-d); }

/* ---------- logos ---------- */
.sn-logo { width: 22px; height: 22px; object-fit: contain; flex: 0 0 22px; }
.sn-logo-ph { background: var(--sn-soft); border-radius: 50%; display: inline-block; }

/* ==========================================================================
   Ticker
   ========================================================================== */
.sn-ticker-wrap {
	background: var(--sn-ink); color: #fff; overflow: hidden;
	border-top: 2px solid var(--sn-green); border-bottom: 2px solid var(--sn-orange);
}
.sn-w-ticker { background: var(--sn-ink); }
.sn-w-ticker .sn-region { overflow: hidden; }
.sn-ticker-track {
	display: inline-flex; align-items: center; white-space: nowrap;
	padding: 7px 0; will-change: transform; animation: sn-marquee 60s linear infinite;
}
.sn-w-ticker:hover .sn-ticker-track { animation-play-state: paused; }
@keyframes sn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sn-ticker-track { animation: none; } }
.sn-tick {
	display: inline-flex; align-items: center; gap: 6px; color: #fff;
	padding: 0 16px; font-size: .8rem; border-right: 1px solid rgba(255,255,255,.12);
}
.sn-tick.is-live { color: #fff; }
.sn-tick-lg { color: var(--sn-orange); font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
.sn-tick-t i { font-style: normal; font-weight: 800; color: #fff; }
.sn-tick.is-live .sn-tick-t i { color: #ffd23f; }
.sn-tick-sep { opacity: .5; }
.sn-tick-d { font-size: .66rem; color: rgba(255,255,255,.6); }
.sn-tick-note b { color: var(--sn-orange); margin-right: 5px; }
.sn-tick-gap { display: inline-flex; }
.sn-ticker-empty { color: rgba(255,255,255,.7); font-size: .8rem; padding: 0 18px; }

/* ==========================================================================
   Match rows / scores
   ========================================================================== */
.sn-scores { display: flex; flex-direction: column; gap: 6px; }
.sn-match {
	display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
	align-items: center; padding: 8px 10px; background: var(--sn-surface);
	border: 1px solid var(--sn-line); border-radius: 10px;
}
.sn-match.is-live { border-color: rgba(232,32,42,.4); box-shadow: inset 3px 0 0 var(--sn-live); }
.sn-match-league {
	grid-column: 1 / -1; font-size: .6rem; text-transform: uppercase;
	letter-spacing: .05em; color: var(--sn-muted); font-weight: 700;
}
.sn-match-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sn-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sn-team-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.sn-team.sn-win .sn-team-name { font-weight: 800; }
.sn-score { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 18px; text-align: right; }
.sn-match-status { display: flex; align-items: center; justify-self: end; }

/* ==========================================================================
   Tables (standings / rankings)
   ========================================================================== */
.sn-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.sn-table thead th {
	font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
	color: var(--sn-muted); font-weight: 700; padding: 6px 4px; text-align: center;
	border-bottom: 1px solid var(--sn-line);
}
.sn-table th.sn-c-team { text-align: left; }
.sn-table tbody td { padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--sn-soft); font-variant-numeric: tabular-nums; }
.sn-table td.sn-c-rank { color: var(--sn-muted); font-weight: 700; width: 22px; }
.sn-table td.sn-c-team { text-align: left; }
.sn-c-team { display: flex; align-items: center; gap: 7px; }
.sn-c-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.sn-table td.sn-c-pts { font-weight: 800; }
.sn-table tbody tr:hover { background: var(--sn-soft); }
.sn-c-form { white-space: nowrap; }

/* zone bands */
.sn-zone-ucl td.sn-c-rank { box-shadow: inset 3px 0 0 var(--sn-green); }
.sn-zone-uel td.sn-c-rank { box-shadow: inset 3px 0 0 #2f80ed; }
.sn-zone-rel td.sn-c-rank { box-shadow: inset 3px 0 0 var(--sn-live); }

/* form dots */
.sn-formline { display: inline-flex; gap: 3px; }
.sn-fdot {
	display: inline-flex; align-items: center; justify-content: center;
	width: 15px; height: 15px; border-radius: 4px; font-size: .58rem; font-weight: 800; color: #fff;
}
.sn-f-w { background: var(--sn-green); }
.sn-f-d { background: #c9ad3a; }
.sn-f-l { background: var(--sn-live); }
.sn-conf { font-size: .78rem; font-weight: 800; margin: 10px 0 4px; color: var(--sn-green-d); }
.sn-move { font-size: .6rem; margin-right: 3px; }
.sn-move.sn-up { color: var(--sn-green); }
.sn-move.sn-down { color: var(--sn-live); }
.sn-ctry { font-style: normal; color: var(--sn-muted); font-size: .68rem; }

/* ==========================================================================
   Tabs
   ========================================================================== */
.sn-tablist { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.sn-tab {
	border: 1px solid var(--sn-line); background: var(--sn-surface); color: var(--sn-ink);
	padding: 6px 12px; border-radius: 20px; font-size: .78rem; font-weight: 700;
	cursor: pointer; transition: all .15s ease;
}
.sn-tab:hover { border-color: var(--sn-green); }
.sn-tab.is-active { background: var(--sn-green); color: #fff; border-color: var(--sn-green); }
.sn-subtabs .sn-tab { padding: 4px 9px; font-size: .72rem; }
.sn-pane { display: none; }
.sn-pane.is-active { display: block; animation: sn-fade .25s ease; }
@keyframes sn-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.sn-hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 720px) { .sn-hub-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Fixtures
   ========================================================================== */
.sn-fixtures { display: flex; flex-direction: column; gap: 6px; }
.sn-fixture {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
	padding: 8px 10px; border: 1px solid var(--sn-line); border-radius: 10px; background: var(--sn-surface);
}
.sn-fx-team { display: flex; align-items: center; gap: 7px; font-size: .82rem; min-width: 0; }
.sn-fx-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-fx-away { justify-content: flex-end; text-align: right; }
.sn-fx-mid { font-size: .7rem; color: var(--sn-muted); text-align: center; font-weight: 700; }
.sn-vs { color: var(--sn-muted); }

/* ==========================================================================
   Tennis
   ========================================================================== */
.sn-tn-matches { display: flex; flex-direction: column; gap: 6px; }
.sn-tn-match { padding: 8px 10px; border: 1px solid var(--sn-line); border-radius: 10px; position: relative; background: var(--sn-surface); }
.sn-tn-match.is-live { border-color: rgba(232,32,42,.4); }
.sn-tn-p { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; padding: 1px 0; }
.sn-tn-p.sn-win { font-weight: 800; }
.sn-tn-p b { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.sn-tn-match .sn-pill { position: absolute; top: -8px; right: 8px; }

/* ==========================================================================
   Cricket
   ========================================================================== */
.sn-ck-matches { display: flex; flex-direction: column; gap: 8px; }
.sn-ck-match { padding: 10px; border: 1px solid var(--sn-line); border-radius: 10px; background: var(--sn-surface); }
.sn-ck-match.is-live { border-color: rgba(232,32,42,.4); box-shadow: inset 3px 0 0 var(--sn-live); }
.sn-ck-name { font-size: .72rem; color: var(--sn-muted); margin-bottom: 6px; }
.sn-ck-name em { font-style: normal; background: var(--sn-soft); padding: 1px 6px; border-radius: 4px; }
.sn-ck-team { display: flex; align-items: center; gap: 7px; font-size: .86rem; padding: 2px 0; }
.sn-ck-team span { flex: 1; }
.sn-ck-team b { font-variant-numeric: tabular-nums; }
.sn-ck-team b small { color: var(--sn-muted); font-weight: 500; }
.sn-ck-status { font-size: .72rem; color: var(--sn-green-d); margin-top: 6px; font-weight: 600; }
.sn-ck-series { list-style: none; margin: 0; padding: 0; }
.sn-ck-series li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--sn-soft); font-size: .8rem; }
.sn-ck-series em { font-style: normal; color: var(--sn-muted); font-size: .72rem; }

/* ==========================================================================
   Formula 1
   ========================================================================== */
.sn-f1-next {
	background: linear-gradient(135deg, var(--sn-ink), #1b2734); color: #fff;
	border-radius: 12px; padding: 14px 16px; margin-bottom: 6px;
}
.sn-f1-next-h { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sn-orange); font-weight: 800; }
.sn-f1-next-name { font-family: var(--font-display, "Anton", sans-serif); font-size: 1.15rem; margin-top: 2px; }
.sn-f1-next-loc { font-size: .78rem; color: rgba(255,255,255,.75); }
.sn-f1-count { margin-top: 8px; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #ffd23f; }
.sn-f1-bars { display: flex; flex-direction: column; gap: 5px; }
.sn-bar-row { display: grid; grid-template-columns: 18px 1fr 70px 34px; align-items: center; gap: 8px; font-size: .78rem; }
.sn-bar-pos { color: var(--sn-muted); font-weight: 700; }
.sn-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-bar-name em { font-style: normal; color: var(--sn-muted); font-size: .68rem; }
.sn-bar-track { background: var(--sn-soft); height: 8px; border-radius: 5px; overflow: hidden; }
.sn-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--sn-green), #11a352); border-radius: 5px; }
.sn-bar-con { background: linear-gradient(90deg, var(--sn-orange), #ff9248); }
.sn-bar-pts { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.sn-podium { display: flex; gap: 8px; }
.sn-pod { flex: 1; text-align: center; padding: 10px 6px; border-radius: 10px; background: var(--sn-soft); display: flex; flex-direction: column; gap: 2px; }
.sn-pod b { font-size: 1.1rem; }
.sn-pod span { font-size: .76rem; font-weight: 700; }
.sn-pod em { font-style: normal; font-size: .64rem; color: var(--sn-muted); }
.sn-pod-1 { background: linear-gradient(160deg, #fff4cc, #ffe89a); }
.sn-pod-2 { background: linear-gradient(160deg, #eef1f4, #dfe4ea); }
.sn-pod-3 { background: linear-gradient(160deg, #f7e3d0, #f0cdaa); }

/* ==========================================================================
   Sidebar (single post) + footer mini
   ========================================================================== */
.sn-sidebar {
	background: var(--sn-surface); border: 1px solid var(--sn-line);
	border-radius: 14px; padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.sn-side-head {
	font-family: var(--font-display, "Anton", sans-serif); text-transform: uppercase;
	letter-spacing: .03em; font-size: .95rem; margin-bottom: 10px;
	display: flex; align-items: center; gap: 7px;
}
.sn-side-head::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sn-live); animation: sn-pulse 1.6s infinite; }

.sn-footer-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: .76rem; color: rgba(255,255,255,.85); }
.sn-fm-h { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--sn-orange); font-size: .68rem; }
.sn-fm-item { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Hub container chrome
   ========================================================================== */
.sn-hub { background: var(--sn-surface); border: 1px solid var(--sn-line); border-radius: 16px; padding: 18px; }