/* WK2026 odds widget — self-contained styles, no dependency on Bootstrap responsive utilities */

.wk-widget { font-size: 14px; color: #222; }

/* ─── Spinner ────────────────────────────────────────────────────────────── */
.wk-spinner       { display: flex; justify-content: center; padding: 24px; }
.wk-spinner span  { width: 28px; height: 28px; border: 3px solid #ddd;
                    border-top-color: #555; border-radius: 50%;
                    animation: wk-spin .7s linear infinite; }
@keyframes wk-spin { to { transform: rotate(360deg); } }
.wk-widget.wk-updating .wk-content { opacity: .5; pointer-events: none; }

.wk-msg       { color: #999; padding: 16px 0; text-align: center; margin: 0; }
.wk-msg-small { color: #999; font-size: .85em; }

/* ─── Toolbar ─────────────────────────────────────────────────────────────── */
.wk-toolbar       { margin-bottom: 12px; }
.wk-market-select { max-width: 240px; }

/* ─── League card ─────────────────────────────────────────────────────────── */
.wk-league-card   { margin-bottom: 16px; border: 1px solid #dee2e6; border-radius: 4px;
                    background: #fff; overflow: hidden; }
.wk-league-header { background: #ff4f01; color: #fff; padding: 10px 16px; border-bottom: 0; }
.wk-league-name   { font-weight: 600; font-size: 1.05em; }

/* ─── Date row ────────────────────────────────────────────────────────────── */
.wk-date-row {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    font-size: .85em;
}
.wk-date-label  { flex: 1 1 auto; min-width: 0; color: #6c757d; text-transform: lowercase; }

/* Mobile-first: kolomlabels + spacer verbergen */
.wk-col-labels    { display: none; }
.wk-compare-spacer{ display: none; }
.wk-col-label     { color: #6c757d; font-weight: 600; letter-spacing: .05em; text-align: center; }

/* ─── Event row ───────────────────────────────────────────────────────────── */
.wk-event           { border-top: 1px solid #dee2e6; }
.wk-event-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 16px;
}

.wk-info       { display: flex; align-items: center; width: 100%; padding-bottom: 8px; min-width: 0; }
.wk-time       { font-weight: 600; min-width: 50px; margin-right: 12px; flex-shrink: 0; }
.wk-teams      { flex: 1 1 auto; min-width: 0; }
.wk-team       { display: flex; align-items: center; padding: 1px 0; }
.wk-team-ph    { display: inline-block; width: 16px; height: 16px;
                 background: #cfd2d6; border-radius: 50%;
                 margin-right: 8px; flex-shrink: 0; }
.wk-team-logo  { display: none; width: 16px; height: 16px;
                 margin-right: 8px; flex-shrink: 0;
                 border-radius: 50%; object-fit: contain; }
.wk-team-name  { line-height: 1.25; }

/* Chips */
.wk-chips     { display: flex; width: 100%; }
.wk-chip-cell { flex: 1 1 0; min-width: 0; padding: 0 2px; text-align: center; }

.wk-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 58px;
    background: #fff;
    color: #222;
    border: 1px solid transparent;
    border-radius: 6px;
    text-decoration: none;
    transition: opacity .15s;
    overflow: hidden;
}
.wk-chip:hover  { opacity: .85; text-decoration: none; }
.wk-chip-top    { display: flex; align-items: center; justify-content: center; width: 100%; height: 26px;
                  background: #f1f3f5; }
.wk-chip-val    { color: #6c757d; font-weight: 800; font-size: 13px; line-height: 1; white-space: nowrap; }

.wk-chip-brand  { display: flex; align-items: center; justify-content: center; width: 100%; flex: 1; }
.wk-chip-logo   { max-width: 50px; max-height: 15px; width: auto; height: auto; object-fit: contain; display: block; }
.wk-chip-name   { font-weight: 800; font-size: 12px; line-height: 1; color: #fff; padding: 0 6px; text-align: center; }
.wk-no-odds     { color: #ccc; }

/* Compare link */
.wk-compare        { width: 100%; padding-top: 10px; text-align: center; }
.wk-compare-link   { color: #ff4f01; font-size: .9em; font-weight: 500; white-space: nowrap;
                     text-decoration: none; }
.wk-compare-link:hover     { color: #cc3f00; text-decoration: none; }
.wk-compare-link .wk-arrow {
    display: inline-block;
    font-size: 1.15em;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
    margin-left: 6px;
    transition: transform .2s;
}
.wk-compare-link .wk-arrow::before { content: "❯"; }
/* Closed: points down-ish; Open: points up-ish */
.wk-compare-link .wk-arrow { transform: rotate(90deg); }
.wk-compare-link[aria-expanded="true"] .wk-arrow { transform: rotate(-90deg); }

/* ─── Expanded comparison table ───────────────────────────────────────────── */
.wk-expanded {
    background: #fafafa;
    padding: 8px 16px 16px;
}
.wk-compare-table         { font-size: .9em; margin-bottom: 0; }
.wk-compare-table th      { font-weight: 600; color: #555; border-top: 0; }
.wk-compare-table td      { vertical-align: middle; }
.wk-compare-table .wk-th-odd,
.wk-compare-table .wk-td-odd { text-align: center; width: 70px; min-width: 70px; }
.wk-compare-table .wk-td-empty .wk-odd-val { color: #ccc; cursor: default; }

/* Right-side spacer column — keeps odds aligned with chips above without
   chopping off table borders. Hidden on mobile. */
.wk-compare-table .wk-th-spacer,
.wk-compare-table .wk-td-spacer { display: none; padding: 0; }

.wk-bm-link { display: inline-block; text-decoration: none; }
.wk-bm-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 90px; min-height: 32px;
    padding: 4px 10px;
    background: #444;
    color: #fff;
    border-radius: 6px;
    transition: opacity .15s;
}
.wk-bm-link:hover .wk-bm-chip { opacity: .85; }
.wk-bm-logo {
    max-width: 70px; max-height: 22px;
    width: auto; height: auto;
    object-fit: contain;
}
.wk-bm-name { font-size: .8em; font-weight: 600; color: #fff; line-height: 1; }

.wk-odd-val {
    display: inline-block;
    padding: 4px 12px;
    border: 2px solid transparent;
    border-radius: 4px;
    color: #222;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
}
.wk-odd-val:hover { color: #ff4f01; text-decoration: none; }
.wk-odd-val--boosted { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; }
.wk-compare-table td.wk-best .wk-odd-val { border-color: #ff4f01; }
.wk-line                { display: block; color: #888; font-size: .8em; margin-top: 2px; }

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.wk-footer { text-align: right; color: #aaa; font-size: .78em; padding: 8px 4px 0; }

/* ─── Desktop ≥ 768px ────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .wk-col-labels    { display: flex; flex-direction: row; flex-shrink: 0; }
    .wk-col-label     { width: 70px; min-width: 70px; }
    .wk-compare-spacer{ display: block; width: 200px; flex-shrink: 0; }

    .wk-event-main { flex-wrap: nowrap; }

    .wk-info       { flex: 1 1 auto; width: auto; padding-bottom: 0; }

    .wk-chips      { width: auto; flex-shrink: 0; }
    .wk-chip-cell  { flex: 0 0 70px; width: 70px; padding: 0 4px; }

    .wk-compare    { width: 200px; flex-shrink: 0;
                     padding-top: 0; padding-left: 12px;
                     text-align: right; }

    /* Spacer column reserves the same right-side width as .wk-compare,
       so odds columns line up with chips above without chopping the table. */
    .wk-compare-table .wk-th-spacer,
    .wk-compare-table .wk-td-spacer { display: table-cell; width: 200px; min-width: 200px; }
}

/* Boosted odds (Tonybet oddsBooster) */
.wk-chip--boosted .wk-chip-top { flex-direction: column; height: auto; min-height: 26px; gap: 1px; padding: 2px 0; }
.wk-chip-orig  { font-size: .72em; opacity: .6; font-weight: 400; text-decoration: line-through; line-height: 1; }
.wk-chip-boost { font-weight: 800; font-size: 13px; line-height: 1; }