@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

/* ================================================
   Football Standings – Public v1.4
   Always shows names + logos, fits any width
   ================================================ */

.fs-standings-wrap {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    width: 100%;
    max-width: 780px;
    margin: 0 auto 24px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(15,37,58,.10);
    background: #fff;
    border: 1px solid rgba(15,37,58,.08);
    box-sizing: border-box;
}

/* ---- Header ---- */
.fs-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    background: linear-gradient(135deg, #0f253a 0%, #1b3d5c 100%);
    position: relative;
    overflow: hidden;
}
.fs-header::after {
    content: ''; position: absolute; right: -40px; top: -40px;
    width: 120px; height: 120px; background: rgba(255,255,255,.04);
    border-radius: 50%; pointer-events: none;
}
.fs-league-logo {
    height: 34px; width: 34px; object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
    position: relative; z-index: 1; flex-shrink: 0;
}
.fs-header-text {
    display: flex; flex-direction: column; gap: 2px;
    position: relative; z-index: 1; min-width: 0;
}
.fs-league-name {
    font-size: .98rem; font-weight: 800; color: #fff;
    letter-spacing: -.02em; line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fs-season {
    font-size: 0.68rem; color: rgba(255,255,255,.5);
    font-weight: 500; text-transform: uppercase; letter-spacing: .08em;
}

/* ---- Table: fluid, no fixed layout, no horizontal scroll ---- */
.fs-table-wrap { width: 100%; overflow: hidden; }

.fs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.fs-table thead tr { background: #f4f7fa; border-bottom: 1.5px solid #e4eaf2; }
.fs-table thead th {
    padding: 8px 6px;
    color: #8a99aa; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    text-align: center; white-space: nowrap;
}
.fs-table thead .fs-col-team { text-align: left; padding-left: 6px; }

/* ---- Rows ---- */
.fs-row td {
    padding: 7px 6px;
    text-align: center;
    color: #2c3e50;
    vertical-align: middle;
    border-bottom: 1px solid #f0f4f8;
    background: #fff;
}
.fs-row:last-child td { border-bottom: none; }
.fs-row:nth-child(even) td { background: #f9fbfd; }
.fs-row:hover td { background: #eef4ff !important; }

/* ---- Highlighted row ---- */
.fs-row.fs-highlight td {
    background: #fff8e6 !important;
    border-top: 1px solid #fcd34d;
    border-bottom: 1px solid #fcd34d;
}
.fs-row.fs-highlight:hover td { background: #fff2cc !important; }
.fs-row.fs-highlight td.fs-col-pos { border-left: 3px solid #f59e0b; }
.fs-row.fs-highlight .fs-team-name { font-weight: 700; color: #0f253a; }
.fs-row.fs-highlight .fs-pts {
    background: #f59e0b !important;
    color: #fff !important;
}

/* ---- Position badge ---- */
.fs-col-pos { width: 34px; }
.fs-pos {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 6px;
    font-size: 11px; font-weight: 700;
    background: #edf1f7; color: #5a6a7a;
    /* Zone color injected via inline style from PHP */
}

/* ---- Team cell — always shows logo + full name ---- */
.fs-col-team { text-align: left !important; }

.fs-team-cell {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-left: 2px;
    min-width: 0;
}
.fs-team-logo {
    width: 22px; height: 22px;
    object-fit: contain; flex-shrink: 0;
}
.fs-team-name {
    font-weight: 600; color: #1a2a3a;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* Short name hidden always — only shown if JS detects very narrow */
.fs-team-short { display: none; }

/* ---- Stats ---- */
.fs-stat { color: #6a7a8a; font-weight: 500; }

/* ---- Goal diff ---- */
.fs-gd { font-weight: 700; font-size: 12px; }
.fs-gd.pos  { color: #16a34a; }
.fs-gd.neg  { color: #dc2626; }
.fs-gd.zero { color: #94a3b8; }

/* ---- Points badge ---- */
.fs-pts {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 24px;
    background: #0f253a; color: #fff;
    border-radius: 6px; font-size: 12px; font-weight: 800;
    padding: 0 6px;
}

/* ---- Form dots ---- */
.fs-form { display: inline-flex; gap: 2px; align-items: center; }
.fs-form-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; border-radius: 50%;
    font-size: 8px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.fs-form-w { background: #16a34a; }
.fs-form-d { background: #d97706; }
.fs-form-l { background: #e53e3e; }

/* ================================================
   RESPONSIVE — shrink gracefully, never hide names
   ================================================ */

/* Medium narrow: tighten padding */
@media (max-width: 500px) {
    .fs-header { padding: 12px 14px; gap: 10px; }
    .fs-league-logo { width: 28px; height: 28px; }
    .fs-league-name { font-size: .88rem; }

    .fs-table { font-size: 12px; }
    .fs-table thead th { padding: 7px 3px; font-size: 9.5px; }
    .fs-row td { padding: 6px 3px; }

    .fs-team-cell { gap: 5px; }
    .fs-team-logo { width: 18px; height: 18px; }
    .fs-team-name { font-size: 11.5px; }

    .fs-pos { width: 22px; height: 22px; font-size: 10.5px; }
    .fs-pts { min-width: 26px; height: 22px; font-size: 11px; padding: 0 5px; }
    .fs-form-dot { width: 15px; height: 15px; font-size: 7.5px; }

    /* Hide less critical columns */
    .fs-col-won,
    .fs-col-drawn,
    .fs-col-lost { display: none; }
}

/* Very narrow: hide even more columns, keep pos+team+ag+vath */
@media (max-width: 320px) {
    .fs-col-gf,
    .fs-col-ga,
    .fs-col-gd  { display: none; }

    .fs-table thead th { padding: 6px 2px; font-size: 9px; }
    .fs-row td { padding: 5px 2px; }
    .fs-team-name { font-size: 11px; }
}

/* ---- Strip theme widget box ---- */
.widget_fs_standings_widget,
.widget.widget_fs_standings_widget {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}