/* =========================================================================
   Sports Live Widgets — main stylesheet
   Contains 4 styles:
     .slw-style-modern_dark
     .slw-style-clean_light
     .slw-style-theme_adaptive
     .slw-style-compact_minimal
   ========================================================================= */

/* ----- CSS variables (defaults: Modern Dark) ----- */
.slw-widget {
    --slw-bg: #0f1419;
    --slw-bg-alt: #1a2129;
    --slw-bg-row-hover: #243040;
    --slw-fg: #e8eaed;
    --slw-fg-muted: #9aa0a6;
    --slw-border: #2a323d;
    --slw-accent: #00d084;
    --slw-accent-2: #00a8ff;
    --slw-danger: #ff5252;
    --slw-warning: #ffb547;
    --slw-zone-champions-bg: rgba(0, 208, 132, 0.12);
    --slw-zone-europa-bg: rgba(0, 168, 255, 0.12);
    --slw-zone-relegation-bg: rgba(255, 82, 82, 0.12);
    --slw-radius: 6px;
    --slw-font-size: 13px;
    /* Readable "Show more / Show less" link color for this style's background. */
    --slw-link: #4db2ff;
    --slw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --slw-row-pad: 7px 9px;
    --slw-gap: 8px;

    background: var(--slw-bg);
    color: var(--slw-fg);
    font-family: var(--slw-font);
    font-size: var(--slw-font-size);
    border-radius: var(--slw-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    margin-bottom: 1.5em;

    /* Container queries let the widget adapt to the SIDEBAR width, not the
       viewport — sidebars are usually much narrower than the screen. */
    container-type: inline-size;
}

/* ----- Header / title bar (v1.9.3) -----
   TWO title sources must share ONE look:
   1. Plugin titles (shortcode + Gutenberg block): <h3 class="slw-widget-title">.
   2. THEME widget titles (sidebar widgets): WordPress injects the theme's
      before_title markup (e.g. <h2 class="widget-title">) as a direct child
      of .slw-widget — the plugin never styled it, so the theme's own padding
      (usually 0 at the top, designed for the theme's widget chrome) made the
      title text touch the TOP EDGE of our header box.
   The vertical metrics (margin / padding / line-height) are forced with
   !important at (0,3,0) specificity (doubled .slw-widget root class) so the
   title text keeps the SAME distance from the top and the bottom of the
   header box in every theme. Per-style overrides below run at (0,4,0). */
.slw-widget.slw-widget .slw-widget-title,
.slw-widget.slw-widget h3.slw-widget-title,
.slw-widget.slw-widget > h1,
.slw-widget.slw-widget > h2,
.slw-widget.slw-widget > h3,
.slw-widget.slw-widget > h4,
.slw-widget.slw-widget > h5,
.slw-widget.slw-widget > h6,
.slw-widget.slw-widget .widget-title,
.slw-widget.slw-widget .widgettitle {
    margin: 0 !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    background: var(--slw-bg-alt) !important;
    border-bottom: 1px solid var(--slw-border) !important;
    color: var(--slw-fg) !important;
}
/* Themes that wrap the widget title in a link: the link keeps the title
   color instead of the theme's link color (e.g. #333 → invisible on dark). */
.slw-widget .slw-widget-title a,
.slw-widget .widget-title a,
.slw-widget .widgettitle a,
.slw-widget > h1 a, .slw-widget > h2 a, .slw-widget > h3 a,
.slw-widget > h4 a, .slw-widget > h5 a, .slw-widget > h6 a {
    color: inherit !important;
    text-decoration: none !important;
}

.slw-widget .slw-widget__body { padding: 8px; }

.slw-widget a { color: var(--slw-accent-2); text-decoration: none; }
.slw-widget a:hover { text-decoration: underline; }

.slw-widget img.slw-team-logo,
.slw-widget img.slw-league-badge,
.slw-widget img.slw-player-photo {
    width: 20px; height: 20px; object-fit: contain; vertical-align: middle; flex-shrink: 0;
}
.slw-widget img.slw-league-badge { width: 16px; height: 16px; opacity: 0.85; }

.slw-team-badge--placeholder,
.slw-player-photo--placeholder {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--slw-bg-alt); color: var(--slw-fg-muted);
    font-size: 10px; font-weight: 700;
}

.slw-error, .slw-empty {
    padding: 14px; text-align: center;
    color: var(--slw-fg-muted); font-style: italic;
}
.slw-error { color: var(--slw-danger); font-style: normal; }

/* ----- Standings -----
   FIXED table layout + explicit column widths so the table ALWAYS fits the
   sidebar. Default column set (v1.9.1, "extra columns" unchecked):
       #  Team  P  W  D  L  Pts
   — the position number and team name sit together on the left, the core
   numeric block (P W D L Pts) is contiguous right after the team, and the
   team name gets ALL the remaining width. The optional extended columns
   (GF GA GD | Form) are opt-in in the widget form and still auto-hide in
   narrow sidebars (container queries below). The scroll wrapper is a
   last-resort safety net for extremely narrow containers. */
.slw-standings-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.slw-standings-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--slw-font-size);
}
/* Tighter horizontal padding than the rest of the widget: with 10 columns,
   every saved pixel goes to the team name. */
.slw-standings-table th,
.slw-standings-table td {
    box-sizing: border-box;
    padding: 6px 3px;
    text-align: left;
    border-bottom: 1px solid var(--slw-border);
}
.slw-standings-table th {
    color: var(--slw-fg-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    background: var(--slw-bg-alt);
    position: sticky; top: 0;
    white-space: nowrap;
}
.slw-standings-table tbody tr:hover { background: var(--slw-bg-row-hover); }
/* Numeric columns are deliberately NARROW (v1.9.1: 27→22px) and tightly
   padded so P W D L Pts sit close together and the team-name column keeps
   the maximum possible share of the sidebar width. */
.slw-standings-table th.slw-col-num,
.slw-standings-table td.slw-col-num {
    width: 22px;
    padding-left: 1px; padding-right: 2px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
}
.slw-standings-table th.slw-col-pts,
.slw-standings-table td.slw-col-pts {
    width: 30px;
}
.slw-standings-table .slw-col-pts { font-weight: 700; color: var(--slw-fg); }
.slw-standings-table th.slw-col-pos,
.slw-standings-table td.slw-col-pos {
    width: 24px;
    padding-left: 2px; padding-right: 0;
    text-align: center; font-weight: 600;
    position: relative;
}
.slw-standings-table th.slw-col-form,
.slw-standings-table td.slw-col-form { width: 100px; }
/* Team cell: flex so the name truncates with an ellipsis instead of
   stretching the table. */
.slw-standings-table td.slw-col-team {
    display: flex; align-items: center; gap: 4px;
    min-width: 0;
    padding-left: 3px; padding-right: 4px;
}
.slw-col-team .slw-team-logo { flex-shrink: 0; margin-right: 0; }
.slw-col-team .slw-team-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slw-zone-dot {
    display: inline-block; width: 4px; height: 14px;
    border-radius: 2px; margin-right: 4px; vertical-align: middle;
    background: transparent;
}
.slw-row-zone-champions .slw-zone-dot { background: var(--slw-accent); }
.slw-row-zone-europa .slw-zone-dot { background: var(--slw-accent-2); }
.slw-row-zone-relegation .slw-zone-dot { background: var(--slw-danger); }
.slw-row-zone-champions { background: var(--slw-zone-champions-bg); }
.slw-row-zone-europa { background: var(--slw-zone-europa-bg); }
.slw-row-zone-relegation { background: var(--slw-zone-relegation-bg); }

.slw-form { display: inline-flex; gap: 2px; }
.slw-form-pill {
    display: inline-block; min-width: 16px; height: 16px;
    line-height: 16px; text-align: center; border-radius: 3px;
    font-size: 10px; font-weight: 700; color: #fff;
}
.slw-form-win   { background: var(--slw-accent); }
.slw-form-draw  { background: var(--slw-fg-muted); }
.slw-form-loss  { background: var(--slw-danger); }

/* ----- Collapsible "See more" (all widget types) -----
   v1.9.2: a MINIMAL single-line link (~15px tall). Colors are forced with
   !important on EVERY interactive state because themes commonly ship rules
   like `button:hover { color:#fff }` or `button:focus { color:#fff }` — with
   a transparent background that made the label literally disappear on hover
   and after clicking (the button keeps focus once expanded). --slw-link is
   defined per widget style with values that are readable on that style's
   background. */
/* v1.9.4: base rule doubled to (0,2,0) — theme attacks like
   `.widget-slot button { padding:10px 20px !important; color:#fff !important }`
   are (0,1,1) and were inflating the toggle back to ~39px and whitening the
   label on aggressive themes (same attack class as the box repaint). */
.slw-toggle-more.slw-toggle-more {
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    margin: 4px auto 0 !important;
    padding: 1px 4px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 3px;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--slw-link, #4db2ff) !important;
    font-family: inherit;
    font-size: 11px !important;
    font-weight: 600;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-align: center;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
/* Re-forced per state so nothing can flip the label to white/invisible.
   The doubled class raises specificity (0,3,0) above common theme rules
   like `.widget button:hover { color:#fff !important }` (0,2,1). */
.slw-toggle-more.slw-toggle-more:hover,
.slw-toggle-more.slw-toggle-more:focus,
.slw-toggle-more.slw-toggle-more:active,
.slw-toggle-more.slw-toggle-more:focus-visible,
.slw-toggle-more.slw-toggle-more[aria-expanded="true"] {
    background: transparent !important;
    border: 0 !important;
    color: var(--slw-link, #4db2ff) !important;
    text-decoration: underline !important;
}
/* Hover/focus feedback is a neutral tint (visible on light AND dark
   backgrounds) — the text color never changes, so it can't vanish. */
.slw-toggle-more.slw-toggle-more:hover,
.slw-toggle-more.slw-toggle-more:focus {
    background: rgba(127, 127, 127, 0.14) !important;
    outline: none;
}
.slw-toggle-more.slw-toggle-more:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}
.slw-toggle-more.slw-toggle-more:active {
    background: rgba(127, 127, 127, 0.24) !important;
}
/* One chevron that rotates: ▾ points down while collapsed ("more below"),
   and flips 180° to ▴ while expanded ("click to fold back up"). */
.slw-toggle-more::after {
    content: "▾";
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    line-height: 1;
    vertical-align: 0.5px;
    transition: transform 0.18s ease;
}
.slw-has-more:not(.slw-is-collapsed) .slw-toggle-more::after {
    transform: rotate(180deg);
}

/* Extra rows hide ONLY when JS marks the wrapper as collapsed — without
   JavaScript the full list stays visible (progressive enhancement).
   The JS sets the class, the [hidden] attribute AND an inline
   display:none!important (v1.9.2) — three locks. The extra .slw-widget
   ancestor raises the specificity to (0,4,0) so aggressive theme rules
   (e.g. `.sidebar .widget ul li { display:block!important }`) cannot
   un-hide collapsed rows. */
.slw-widget .slw-has-more.slw-is-collapsed .slw-row-extra,
.slw-widget .slw-has-more .slw-row-extra[hidden] {
    display: none !important;
}

/* ----- Sidebar-adaptive columns (container queries) -----
   Column priority: # Team P W D L Pts are ALWAYS visible; GF/GA/GD drop
   below 520px and Form below 640px so the team column stays as wide as
   possible and the table fits without horizontal scrolling in any real
   sidebar. Browsers without container-query support (pre-2023) fall back
   to the viewport media query at the bottom of this file. */
@container (max-width: 640px) {
    .slw-standings-table .slw-col-form,
    .slw-standings-table th.slw-col-form { display: none; }
}
@container (max-width: 520px) {
    .slw-standings-table .slw-col-gf,
    .slw-standings-table .slw-col-ga,
    .slw-standings-table .slw-col-gd,
    .slw-standings-table th.slw-col-gf,
    .slw-standings-table th.slw-col-ga,
    .slw-standings-table th.slw-col-gd { display: none; }
}
@container (max-width: 360px) {
    .slw-standings-table th,
    .slw-standings-table td { padding-top: 5px; padding-bottom: 5px; }
    .slw-standings-table th.slw-col-num,
    .slw-standings-table td.slw-col-num { width: 20px; }
    .slw-standings-table th.slw-col-pts,
    .slw-standings-table td.slw-col-pts { width: 28px; }
    .slw-standings-table th.slw-col-pos,
    .slw-standings-table td.slw-col-pos { width: 20px; }
}

/* ----- Fixtures / Results / Live lists ----- */
.slw-fixtures-list,
.slw-results-list,
.slw-live-list,
.slw-scorers-list {
    list-style: none; margin: 0; padding: 0;
}
.slw-fixtures-day { margin-bottom: 6px; }
.slw-results-day { margin-bottom: 6px; }
.slw-day-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--slw-fg-muted); padding: 4px 6px; background: var(--slw-bg-alt);
    border-radius: 3px; margin-bottom: 4px;
}

.slw-match {
    display: flex; flex-direction: column;
    padding: var(--slw-row-pad);
    border-bottom: 1px solid var(--slw-border);
    gap: 4px;
}
.slw-match:last-child { border-bottom: none; }
.slw-match:hover { background: var(--slw-bg-row-hover); }

.slw-match-time,
.slw-match-meta {
    font-size: 11px; color: var(--slw-fg-muted);
}
.slw-match-meta--top { display: flex; align-items: center; gap: 6px; }

.slw-match-teams { display: flex; flex-direction: column; gap: 2px; }
.slw-match-teams--score .slw-team { flex-direction: row; justify-content: space-between; align-items: center; }
.slw-team { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.slw-team-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slw-team-score {
    font-weight: 700; font-variant-numeric: tabular-nums;
    min-width: 24px; text-align: right;
}

.slw-match-status {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px;
}
.slw-status-text { color: var(--slw-fg-muted); }
.slw-match-live .slw-status-text,
.slw-status-live, .slw-status-1h, .slw-status-2h, .slw-status-ht, .slw-status-et, .slw-status-p {
    color: var(--slw-danger);
}
.slw-status-ft, .slw-status-aet, .slw-status-pen { color: var(--slw-fg-muted); }

.slw-live-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; background: var(--slw-danger);
    animation: slw-pulse 1.4s ease-in-out infinite;
}
.slw-live-dot--idle { background: var(--slw-fg-muted); animation: none; }
@keyframes slw-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* ----- Top scorers ----- */
.slw-scorers-list { counter-reset: slw-scorer; }
.slw-scorer {
    display: flex; align-items: center; gap: 8px;
    padding: var(--slw-row-pad);
    border-bottom: 1px solid var(--slw-border);
    counter-increment: slw-scorer;
}
.slw-scorer:last-child { border-bottom: none; }
.slw-scorer::before {
    content: counter(slw-scorer);
    width: 22px; height: 22px; line-height: 22px; text-align: center;
    background: var(--slw-bg-alt); color: var(--slw-fg-muted);
    border-radius: 50%; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.slw-scorer img.slw-player-photo,
.slw-scorer .slw-player-photo--placeholder { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.slw-scorer-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.slw-scorer-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slw-scorer-team { font-size: 11px; color: var(--slw-fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Stats column (v1.9.2): goals are the ONLY stat — rank, name, team and
   goals always fit, even in the narrowest sidebars. */
.slw-scorer-stats { display: flex; gap: 4px; flex-shrink: 0; }
.slw-stat {
    display: inline-flex; align-items: baseline; gap: 2px;
    padding: 2px 6px; border-radius: 4px;
    background: var(--slw-bg-alt); font-weight: 700;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Stat numbers use the widget's foreground color instead of the accent —
   in Theme-Adaptive style the accent can map to a theme preset that is
   unreadable on the stat pill background. Suffix letters stay muted. */
.slw-stat small { font-size: 10px; color: var(--slw-fg-muted); font-weight: 400; }
.slw-stat-goals { color: var(--slw-fg); }
@container (max-width: 320px) {
    .slw-scorer img.slw-player-photo,
    .slw-scorer .slw-player-photo--placeholder { width: 22px; height: 22px; }
    .slw-scorer::before { width: 18px; height: 18px; line-height: 18px; font-size: 10px; }
    .slw-scorer { gap: 6px; }
}

.slw-loading {
    display: flex; align-items: center; justify-content: center;
    padding: 20px; color: var(--slw-fg-muted);
    font-style: italic; font-size: 12px;
}
.slw-loading::before {
    content: ''; display: inline-block;
    width: 14px; height: 14px; margin-right: 8px;
    border: 2px solid var(--slw-border);
    border-top-color: var(--slw-accent);
    border-radius: 50%;
    animation: slw-spin 0.8s linear infinite;
}
@keyframes slw-spin { to { transform: rotate(360deg); } }

/* =========================================================================
   Style: Clean Light
   ========================================================================= */
.slw-style-clean_light {
    --slw-bg: #ffffff;
    --slw-bg-alt: #f6f7f8;
    --slw-bg-row-hover: #f0f3f5;
    --slw-fg: #1a1a1a;
    --slw-fg-muted: #666;
    --slw-border: #e1e4e8;
    --slw-accent: #1b8200;
    --slw-accent-2: #0a5cb8;
    --slw-danger: #c8102e;
    --slw-warning: #c47f00;
    --slw-zone-champions-bg: rgba(27, 130, 0, 0.10);
    --slw-zone-europa-bg: rgba(10, 92, 184, 0.10);
    --slw-zone-relegation-bg: rgba(200, 16, 46, 0.10);
    --slw-link: #0a5cb8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.slw-style-clean_light .slw-form-win { background: #1b8200; }
.slw-style-clean_light .slw-form-loss { background: #c8102e; }

/* =========================================================================
   Style: Theme-Adaptive — uses WP theme variables where possible
   ========================================================================= */
.slw-style-theme_adaptive {
    --slw-bg: var(--wp--preset--color--background, #ffffff);
    --slw-bg-alt: var(--wp--preset--color--surface, #f6f7f8);
    --slw-bg-row-hover: rgba(125, 125, 125, 0.10);
    --slw-fg: var(--wp--preset--color--foreground, #1a1a1a);
    --slw-fg-muted: var(--wp--preset--color--muted, #666);
    --slw-border: var(--wp--preset--color--border, #e1e4e8);
    --slw-accent: var(--wp--preset--color--primary, #008080);
    --slw-accent-2: var(--wp--preset--color--secondary, #0a5cb8);
    --slw-danger: var(--wp--preset--color--alert, #c8102e);
    --slw-zone-champions-bg: rgba(0, 128, 128, 0.10);
    --slw-zone-europa-bg: rgba(10, 92, 184, 0.10);
    --slw-zone-relegation-bg: rgba(200, 16, 46, 0.10);
    /* The theme's own foreground color is the ONLY hue guaranteed readable
       on the theme's background — presets like "secondary" can be white.
       Underline + chevron carry the link affordance. */
    --slw-link: var(--slw-fg);
    box-shadow: none;
    border: 1px solid var(--slw-border);
}
/* Title bar: transparent with an accent underline (v1.9.3 — covers THEME
   widget titles too, at (0,4,0) so it beats the forced base rule above). */
.slw-widget.slw-widget.slw-style-theme_adaptive .slw-widget-title,
.slw-widget.slw-widget.slw-style-theme_adaptive > h1,
.slw-widget.slw-widget.slw-style-theme_adaptive > h2,
.slw-widget.slw-widget.slw-style-theme_adaptive > h3,
.slw-widget.slw-widget.slw-style-theme_adaptive > h4,
.slw-widget.slw-widget.slw-style-theme_adaptive > h5,
.slw-widget.slw-widget.slw-style-theme_adaptive > h6,
.slw-widget.slw-widget.slw-style-theme_adaptive .widget-title,
.slw-widget.slw-widget.slw-style-theme_adaptive .widgettitle {
    background: transparent !important;
    border-bottom: 2px solid var(--slw-accent) !important;
}

/* =========================================================================
   Style: Compact / Minimal
   ========================================================================= */
.slw-style-compact_minimal {
    --slw-bg: #ffffff;
    --slw-bg-alt: #f9f9f9;
    --slw-bg-row-hover: #f0f0f0;
    --slw-fg: #222;
    --slw-fg-muted: #888;
    --slw-border: #eee;
    --slw-accent: #444;
    --slw-accent-2: #444;
    --slw-danger: #c00;
    --slw-zone-champions-bg: rgba(0, 128, 0, 0.06);
    --slw-zone-europa-bg: rgba(0, 0, 200, 0.06);
    --slw-zone-relegation-bg: rgba(200, 0, 0, 0.06);
    --slw-radius: 2px;
    --slw-font-size: 11px;
    --slw-link: #444;
    --slw-row-pad: 4px 6px;
    --slw-gap: 4px;
    box-shadow: none;
    border: 1px solid var(--slw-border);
}
/* Title bar: smaller + tighter, still symmetric (v1.9.3 — covers THEME
   widget titles too, at (0,4,0) so it beats the forced base rule above). */
.slw-widget.slw-widget.slw-style-compact_minimal .slw-widget-title,
.slw-widget.slw-widget.slw-style-compact_minimal > h1,
.slw-widget.slw-widget.slw-style-compact_minimal > h2,
.slw-widget.slw-widget.slw-style-compact_minimal > h3,
.slw-widget.slw-widget.slw-style-compact_minimal > h4,
.slw-widget.slw-widget.slw-style-compact_minimal > h5,
.slw-widget.slw-widget.slw-style-compact_minimal > h6,
.slw-widget.slw-widget.slw-style-compact_minimal .widget-title,
.slw-widget.slw-widget.slw-style-compact_minimal .widgettitle {
    font-size: 12px !important;
    padding: 6px 8px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--slw-border) !important;
}
.slw-style-compact_minimal .slw-widget__body { padding: 4px; }
.slw-style-compact_minimal .slw-standings-table th { font-size: 9px; }
.slw-style-compact_minimal img.slw-team-logo,
.slw-style-compact_minimal img.slw-league-badge,
.slw-style-compact_minimal img.slw-player-photo { width: 14px; height: 14px; }
.slw-style-compact_minimal .slw-team-badge--placeholder,
.slw-style-compact_minimal .slw-player-photo--placeholder { width: 14px; height: 14px; font-size: 8px; }
.slw-style-compact_minimal .slw-form-pill { min-width: 12px; height: 12px; line-height: 12px; font-size: 8px; }

/* =========================================================================
   Responsive (viewport fallback for browsers without container queries)
   ========================================================================= */
@media (max-width: 480px) {
    .slw-widget { --slw-font-size: 12px; }
    .slw-standings-table .slw-col-form,
    .slw-standings-table th.slw-col-form,
    .slw-standings-table .slw-col-gf,
    .slw-standings-table .slw-col-ga,
    .slw-standings-table .slw-col-gd,
    .slw-standings-table th.slw-col-gf,
    .slw-standings-table th.slw-col-ga,
    .slw-standings-table th.slw-col-gd { display: none; }
}

/* =========================================================================
   v1.9.4 — BOX IDENTITY LOCK (theme-repaint defense)
   =========================================================================
   REPORTED BUG: switching the widget style (Modern Dark / Clean Light / …)
   changed NOTHING on sites with aggressive themes — the widgets kept the
   theme's colors and layout, and the v1.9.3 title fix was invisible too.

   ROOT CAUSE: v1.9.1–v1.9.3 hardened the title bar, the toggle button and
   the stat colors — but the widget BOX itself (background, text color,
   font, radius, shadow) sat at (0,1,0) with no !important. Any theme rule
   like `.sidebar .widget { background:#fff; color:#333 !important }`
   repainted the whole box, and since every style paints through the same
   `var(--slw-*)` variables, switching styles had no visible effect.

   DEFENSE (same pattern that already works for titles/toggles):
     - CSS lock: doubled root class (0,2,0)+!important for the box,
       (0,3,0)+!important for per-style shadow/border differences,
       (0,3,0)+!important for the lists, and a full !important pass over
       the standings table geometry (theme `.widget table td { padding:10px
       !important }` attacks were rewriting the whole layout).
     - JS lock: slw.js normalizeBoxes() applies inline !important to the
       box background/color/font/radius/shadow/border — inline !important
       beats even ID-selector !important theme rules
       (`#sidebar .widget { background:#fff !important }`), the one attack
       class CSS alone cannot defeat. */

/* A. The box itself. */
.slw-widget.slw-widget {
    background: var(--slw-bg) !important;
    color: var(--slw-fg) !important;
    font-family: var(--slw-font) !important;
    font-size: var(--slw-font-size) !important;
    line-height: 1.45 !important;
    box-sizing: border-box !important;
    border-radius: var(--slw-radius) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
    border: 0 !important;
    margin-bottom: 1.5em !important;
    overflow: hidden !important;
}

/* B. Per-style box corrections (shadow / border differ per style) at
   (0,3,0)+!important so they still beat the forced base above. */
.slw-widget.slw-widget.slw-style-clean_light {
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
.slw-widget.slw-widget.slw-style-theme_adaptive {
    box-shadow: none !important;
    border: 1px solid var(--slw-border) !important;
}
.slw-widget.slw-widget.slw-style-compact_minimal {
    box-shadow: none !important;
    border: 1px solid var(--slw-border) !important;
}

/* C. Lists: themes ship `.widget ul { padding-left:1.5em; margin:1em 0 }`
   and bullets that push the whole layout sideways. */
.slw-widget.slw-widget ul.slw-fixtures-list,
.slw-widget.slw-widget ul.slw-results-list,
.slw-widget.slw-widget ul.slw-live-list,
.slw-widget.slw-widget ul.slw-scorers-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.slw-widget.slw-widget .slw-fixtures-list li,
.slw-widget.slw-widget .slw-results-list li,
.slw-widget.slw-widget .slw-live-list li,
.slw-widget.slw-widget .slw-scorers-list li {
    list-style: none !important;
}

/* D. Standings table geometry: themes style `.widget table { … }` and
   `.widget table td { padding:10px; border:1px solid }` aggressively.
   Every structural property is re-asserted at (0,3,0)+!important. */
.slw-widget.slw-widget table.slw-standings-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    font-size: var(--slw-font-size) !important;
}
.slw-widget.slw-widget .slw-standings-table th,
.slw-widget.slw-widget .slw-standings-table td {
    box-sizing: border-box !important;
    padding: 6px 3px !important;
    text-align: left !important;
    border: 0 !important;
    border-bottom: 1px solid var(--slw-border) !important;
    background: transparent !important;
}
.slw-widget.slw-widget .slw-standings-table th {
    color: var(--slw-fg-muted) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2px !important;
    background: var(--slw-bg-alt) !important;
    white-space: nowrap !important;
}
.slw-widget.slw-widget .slw-standings-table tbody tr:hover {
    background: var(--slw-bg-row-hover) !important;
}
/* Zone tint rows keep their colors under attack. */
.slw-widget.slw-widget .slw-row-zone-champions { background: var(--slw-zone-champions-bg) !important; }
.slw-widget.slw-widget .slw-row-zone-europa    { background: var(--slw-zone-europa-bg) !important; }
.slw-widget.slw-widget .slw-row-zone-relegation{ background: var(--slw-zone-relegation-bg) !important; }

/* Column geometry — the same values as above, now !important, so theme
   `td { padding/text-align/width !important }` cannot reshape the table. */
.slw-widget.slw-widget .slw-standings-table th.slw-col-num,
.slw-widget.slw-widget .slw-standings-table td.slw-col-num {
    width: 22px !important;
    padding-left: 1px !important;
    padding-right: 2px !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}
.slw-widget.slw-widget .slw-standings-table th.slw-col-pts,
.slw-widget.slw-widget .slw-standings-table td.slw-col-pts {
    width: 30px !important;
}
.slw-widget.slw-widget .slw-standings-table .slw-col-pts {
    font-weight: 700 !important;
    color: var(--slw-fg) !important;
}
.slw-widget.slw-widget .slw-standings-table th.slw-col-pos,
.slw-widget.slw-widget .slw-standings-table td.slw-col-pos {
    width: 24px !important;
    padding-left: 2px !important;
    padding-right: 0 !important;
    text-align: center !important;
    font-weight: 600 !important;
}
.slw-widget.slw-widget .slw-standings-table td.slw-col-team {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    padding-left: 3px !important;
    padding-right: 4px !important;
    text-align: left !important;
}
.slw-widget.slw-widget .slw-standings-table th.slw-col-form,
.slw-widget.slw-widget .slw-standings-table td.slw-col-form { width: 100px !important; }

/* Container-query column hiding, !important so a theme
   `td { display:table-cell !important }` cannot resurrect hidden columns. */
@container (max-width: 640px) {
    .slw-standings-table .slw-col-form,
    .slw-standings-table th.slw-col-form { display: none !important; }
}
@container (max-width: 520px) {
    .slw-standings-table .slw-col-gf,
    .slw-standings-table .slw-col-ga,
    .slw-standings-table .slw-col-gd,
    .slw-standings-table th.slw-col-gf,
    .slw-standings-table th.slw-col-ga,
    .slw-standings-table th.slw-col-gd { display: none !important; }
}
@container (max-width: 360px) {
    .slw-standings-table th,
    .slw-standings-table td { padding-top: 5px !important; padding-bottom: 5px !important; }
    .slw-standings-table th.slw-col-num,
    .slw-standings-table td.slw-col-num { width: 20px !important; }
    .slw-standings-table th.slw-col-pts,
    .slw-standings-table td.slw-col-pts { width: 28px !important; }
    .slw-standings-table th.slw-col-pos,
    .slw-standings-table td.slw-col-pos { width: 20px !important; }
}

/* E. Compact / Minimal per-style table tweaks, kept winning at (0,3,0). */
.slw-widget.slw-widget.slw-style-compact_minimal .slw-standings-table th {
    font-size: 9px !important;
}

/* =========================================================================
   v1.9.5 — THEME HOST NEUTRALIZER + DEEP TITLE CAPTURE
   Built against the real SportyPress theme (sportypress-v1.9.21):

   (a) The theme's before_widget wrapper is a full THEME CARD
       (`.mg-sidebar .mg-widget`: white background, 12px padding, radius,
       shadow — dark palettes force it with `body.sp-dark-palette
       .mg-sidebar .mg-widget { background:… !important }` at (0,3,1)).
       Our box sat INSIDE that card, so the card dominated the look and
       switching Dark/Light appeared dead. The plugin now stamps that
       wrapper with `.slw-host` (see SLW_Widget_Base::widget()) and this
       rule strips its card chrome. body+div+TRIPLED class = (0,3,2) with
       !important — above the dark guarantee — and slw.css prints after
       every theme stylesheet (WP footer), so ties resolve our way too.
       The JS normalizeHosts() inline lock is the second defense.
       Margin is deliberately KEPT: the theme's widget spacing survives.
   ========================================================================= */
body div.slw-host.slw-host.slw-host {
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* (b) DEEP TITLE CAPTURE — themes wrap the widget title in their own
   markup. SportyPress injects
       <div class="mg-wid-title"><h6 class="wtitle"><span class="bg">Title
   where the WRAPPER carries negative margins sized for the theme card
   padding (the ribbon then overflows our box), the h6 is the theme's
   colored ribbon (accent background, uppercase, radius, centered) and
   the inner span adds a second padding layer. The v1.9.3 selector list
   matched none of that. Below, the OUTER wrapper becomes our header bar
   and everything inside is reset. Mirrors normalizeTitles() in slw.js
   for the no-JS path; the JS pass adds inline !important locks on top.

   Per-style bar tokens (the bar must follow the widget style, not the
   theme palette): */
.slw-widget {
    --slw-title-bg: var(--slw-bg-alt);
    --slw-title-border: 1px solid var(--slw-border);
}
.slw-widget.slw-style-theme_adaptive,
.slw-widget.slw-style-compact_minimal { --slw-title-bg: transparent; }
.slw-widget.slw-style-theme_adaptive { --slw-title-border: 2px solid var(--slw-accent); }

/* The bar: plugin padding, plugin background, plugin typography. Doubled
   .slw-widget root class = (0,3,0) with !important — same defense level
   as the proven .slw-widget-title rules above. */
.slw-widget.slw-widget .mg-wid-title,
.slw-widget.slw-widget .widget-title-outer {
    margin: 0 !important;
    padding: 12px 14px !important;
    background: var(--slw-title-bg) !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: var(--slw-title-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--slw-fg) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-align: left !important;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.slw-widget.slw-widget.slw-style-compact_minimal .mg-wid-title,
.slw-widget.slw-widget.slw-style-compact_minimal .widget-title-outer {
    padding: 6px 8px !important;
    font-size: 12px !important;
}

/* Everything the theme wrapped INSIDE the bar (h6.wtitle, span.bg…):
   only the bar may paint. */
.slw-widget .mg-wid-title h1, .slw-widget .mg-wid-title h2,
.slw-widget .mg-wid-title h3, .slw-widget .mg-wid-title h4,
.slw-widget .mg-wid-title h5, .slw-widget .mg-wid-title h6,
.slw-widget .mg-wid-title .wtitle,
.slw-widget .mg-wid-title .wtitle span,
.slw-widget .mg-wid-title .wtitle .bg,
.slw-widget .mg-wid-title span.bg,
.slw-widget .wtitle,
.slw-widget .wtitle span,
.slw-widget .wtitle .bg {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    display: block !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-align: inherit !important;
}

/* Theme title decorations (ribbon ::before/::after) die too. */
.slw-widget .mg-wid-title::before, .slw-widget .mg-wid-title::after,
.slw-widget .mg-wid-title *::before, .slw-widget .mg-wid-title *::after,
.slw-widget .wtitle::before, .slw-widget .wtitle::after,
.slw-widget .wtitle *::before, .slw-widget .wtitle *::after {
    content: none !important;
    display: none !important;
}

/* (c) MANUAL HEADER HEIGHT (widget-form slider → data-header-height>0).
   The exact pixel height is applied by normalizeTitles() inline (CSS
   cannot read attribute values into height); these rules give the
   flex-centering behavior to every bar shape. */
.slw-widget[data-header-height]:not([data-header-height="0"]):not([data-header-height=""]) .slw-widget-title,
.slw-widget[data-header-height]:not([data-header-height="0"]):not([data-header-height=""]) .mg-wid-title,
.slw-widget[data-header-height]:not([data-header-height="0"]):not([data-header-height=""]) .widget-title-outer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}