@charset "UTF-8";

/**
 * World Cup Predictor — Custom Theme Override
 * Matches WorldCup Pro theme: mondialia.com
 * Colors: #1a6b3c primary | #1a3a6b secondary | #f0b429 accent
 */

/* ── CSS Variables ──────────────────────────────────────── */
:root {
    --wcp-primary:    #1a6b3c;
    --wcp-secondary:  #1a3a6b;
    --wcp-accent:     #f0b429;
    --wcp-bg:         #f7f8fa;
    --wcp-surface:    #ffffff;
    --wcp-border:     #e2e8f0;
    --wcp-text:       #1a202c;
    --wcp-muted:      #718096;
    --wcp-radius:     10px;
    --wcp-shadow:     0 2px 12px rgba(0,0,0,.07);
    --wcp-transition: .2s ease;
}

/* ── Dark Mode ──────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --wcp-bg:      #1a202c;
        --wcp-surface: #2d3748;
        --wcp-border:  #4a5568;
        --wcp-text:    #e2e8f0;
        --wcp-muted:   #a0aec0;
    }
}

/* ── Base table reset ───────────────────────────────────── */
table, th, td { border: 0; }

/* ============================================================
   NOTICES & MESSAGES
   ============================================================ */
.updated, .saved, .error, .message {
    border-radius: var(--wcp-radius);
    padding: 12px 16px;
    margin: 12px 0;
    font-weight: 500;
    border: none;
    border-style: solid;
    border-width: 0 0 0 4px;
}

.saved,
.updated {
    background: #ecfdf5;
    border-color: var(--wcp-primary);
    color: #065f46;
}

.error {
    background: #fff5f5;
    border-color: #e53e3e;
    color: #c53030;
}

.message {
    background: var(--wcp-surface);
    border-color: var(--wcp-accent);
    color: var(--wcp-text);
    text-align: center;
    box-shadow: var(--wcp-shadow);
    font-weight: 400;
    border-width: 0 0 0 4px;
}

.message p {
    margin-bottom: 8px;
    color: var(--wcp-muted);
}

.message p a {
    color: var(--wcp-primary);
    font-weight: 600;
    text-decoration: underline;
}

.saved strong { font-weight: 700; }
.tzClient     { font-weight: 700; color: var(--wcp-secondary); }

/* ============================================================
   COUNTDOWN CLOCK
   ============================================================ */
.wcup_clock {
    text-align: center;
    background: linear-gradient(135deg, var(--wcp-primary) 0%, var(--wcp-secondary) 100%);
    color: #fff;
    padding: 14px 20px;
    border-radius: var(--wcp-radius);
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 20px;
    box-shadow: var(--wcp-shadow);
    letter-spacing: .3px;
}

/* ============================================================
   GROUP TABLES — OUTER WRAPPER & GRID
   ============================================================ */

.wcp-groups-wrap { margin-bottom: 32px; }

/* Tables-only: responsive 2-column grid */
.wcp-groups-wrap--tables-only {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    align-items: start;
}

/* With-results: single-column flow */
.wcp-groups-wrap--with-results .wcp-group-card { margin-bottom: 32px; }
.wcp-groups-wrap--with-results .wcp-group-card:last-of-type { margin-bottom: 0; }

/* Qualification legend */
.wcp-groups-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    padding: 11px 16px;
    background: var(--wcp-surface);
    border-radius: var(--wcp-radius);
    box-shadow: var(--wcp-shadow);
    font-size: .78rem;
    color: var(--wcp-muted);
    grid-column: 1 / -1;
    margin-top: 4px;
}

.wcp-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
    color: var(--wcp-text);
}

.wcp-legend-item span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.wcp-legend-item--qualified span { background: var(--wcp-primary); }
.wcp-legend-item--third span     { background: var(--wcp-accent); }
.wcp-legend-item--out span       { background: #c53030; }

/* ============================================================
   GROUP TABLE  (wcp-group / zebra)
   ============================================================ */

table.wcp-group {
    width: 100%;
    margin-bottom: 0;
    background: var(--wcp-surface);
    border-radius: var(--wcp-radius);
    box-shadow: var(--wcp-shadow);
    overflow: hidden;
    border-collapse: collapse;
    counter-reset: group-rank;
}

/* Standalone (no wrapper) spacing */
table.wcp-group + table.wcp-group { margin-top: 20px; }

table.zebra th {
    border: none;
    padding: 10px 12px;
}

/* Group title row */
table.wcp-group tr:first-child th {
    background: linear-gradient(135deg, var(--wcp-secondary) 0%, #1d4f9a 100%);
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    padding: 13px 16px;
    text-align: start;
    letter-spacing: .2px;
}

table.wcp-group tr:first-child th h3 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    display: inline;
}

/* Column header row — group tables only */
table.wcp-group tr.wcup-header th {
    background: rgba(26, 107, 60, .92);
    color: #fff !important;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 7px 10px;
    line-height: 1.4;
}

/* Zebra rows */
table.zebra tr.alt td {
    background: var(--wcp-bg);
    color: var(--wcp-text);
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid var(--wcp-border);
}

table.zebra tr.even td {
    background: var(--wcp-surface);
    color: var(--wcp-text);
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid var(--wcp-border);
}

table.zebra td { padding: 9px 10px; }

table.scores th { text-transform: capitalize; }

/* Team links */
.wcup-team a {
    color: var(--wcp-text);
    font-weight: 600;
    font-size: .88rem;
    vertical-align: middle;
    transition: color var(--wcp-transition);
}
.wcup-team a:hover { color: var(--wcp-primary); }

/* Stats columns */
.wcup-points,
.wcup-review,
.wcup-score {
    text-align: center;
    padding-inline-end: .5em;
    vertical-align: middle;
}
.wcup-points { width: 7%; min-width: 26px; }
.wcup-review { width: 10%; }
.wcup-score  { width: 17%; }

/* ── Position number (CSS counter) ──────────────────────── */
table.wcp-group tr.wcup-row { counter-increment: group-rank; }

table.wcp-group tr.wcup-row td.wcup-team::before {
    content: counter(group-rank);
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: rgba(26, 107, 60, .1);
    border-radius: 50%;
    font-size: .68rem;
    font-weight: 700;
    color: var(--wcp-primary);
    text-align: center;
    line-height: 20px;
    margin-inline-end: 7px;
    vertical-align: middle;
}

/* ── Qualification status border ─────────────────────────── */

/* Rank 1 & 2 — qualified (green) */
table.wcp-group tr.wcup-row:nth-child(3) td:first-child,
table.wcp-group tr.wcup-row:nth-child(4) td:first-child {
    border-inline-start: 3px solid var(--wcp-primary);
    padding-inline-start: 9px;
}

/* Rank 3 — third-place playoff (gold) */
table.wcp-group tr.wcup-row:nth-child(5) td:first-child {
    border-inline-start: 3px solid var(--wcp-accent);
    padding-inline-start: 9px;
}

/* Rank 4 — eliminated (red) */
table.wcp-group tr.wcup-row:nth-child(6) td:first-child {
    border-inline-start: 3px solid #c53030;
    padding-inline-start: 9px;
}

/* ── Points column (last) highlight ─────────────────────── */
table.wcp-group tr.wcup-row td:last-child {
    font-weight: 700;
    font-size: .92rem;
    color: var(--wcp-primary);
    background: rgba(26, 107, 60, .05);
}

table.wcp-group tr.wcup-header th:last-child {
    background: rgba(26, 107, 60, 1);
}

/* ── Row hover ───────────────────────────────────────────── */
table.wcp-group tr.wcup-row:hover td {
    background: rgba(26, 107, 60, .06) !important;
}

/* Scrollable on small screens */
.wcp-group-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Results table inside a group card ───────────────────── */
.wcp-group-card table.predictor { margin-top: 12px; }

/* ============================================================
   PREDICTIONS TABLE
   ============================================================ */
table.predictor {
    width: 100%;
    margin-bottom: 24px;
    background: var(--wcp-surface);
    border-radius: var(--wcp-radius);
    box-shadow: var(--wcp-shadow);
    overflow: hidden;
    border-collapse: collapse;
}

/* Stage header inside predictor */
table.predictor tr:first-child th {
    background: var(--wcp-secondary);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    padding: 13px 16px;
    text-align: start;
    letter-spacing: .2px;
}

table.predictor td {
    border: none;
    padding: 6px 10px;
}

/* Venue / separator row */
table.predictor td.sep {
    border-top: 1px solid var(--wcp-border);
    background: var(--wcp-bg);
    color: var(--wcp-muted);
    font-size: .78rem;
    text-align: center;
    padding: 6px 10px;
}

table.predictor td.sep a {
    color: var(--wcp-muted);
    transition: color var(--wcp-transition);
}
table.predictor td.sep a:hover { color: var(--wcp-primary); }

/* Team columns */
table.predictor td.l,
table.predictor td.r { width: 42%; vertical-align: middle; }

table.predictor td.l { text-align: left; }
table.predictor td.r { text-align: right; }

/* Score input columns */
table.predictor td.cl,
table.predictor td.cr {
    width: 4%;
    text-align: center;
    vertical-align: middle;
}

/* Separator dash */
table.predictor td.c {
    width: 2%;
    text-align: center;
    color: var(--wcp-muted);
    font-weight: 700;
    font-size: 1.1rem;
    vertical-align: middle;
}

table.predictor td.res {
    width: 6%;
    text-align: center;
}

/* ── Score inputs ───────────────────────────────────────── */
table.predictor td.cl input,
table.predictor td.cr input {
    width: 2.8em;
    height: 2.8em;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    padding: 4px;
    border: 2px solid var(--wcp-border);
    border-radius: 6px;
    background: var(--wcp-surface);
    color: var(--wcp-text);
    transition: border-color var(--wcp-transition), box-shadow var(--wcp-transition);
    outline: none;
    font-family: inherit;
}

table.predictor td.cl input:focus,
table.predictor td.cr input:focus {
    border-color: var(--wcp-primary);
    box-shadow: 0 0 0 3px rgba(26, 107, 60, .15);
}

table.predictor td.cl input:disabled,
table.predictor td.cr input:disabled {
    background: var(--wcp-bg);
    color: var(--wcp-muted);
    cursor: not-allowed;
    border-color: var(--wcp-border);
}

/* Predict row spacing */
table tr.predict td { padding-top: 16px; }

/* ── Flags ──────────────────────────────────────────────── */
.wcup_flag { border: none; }

.team-flag {
    width: 34px;
    border-radius: 3px;
    vertical-align: middle;
    display: inline-block;
}

table.predictor td.l .team-flag,
table.predictor td.l .team-name { float: left; }

table.predictor td.r .team-flag,
table.predictor td.r .team-name {
    float: right;
    padding-inline-end: 8px;
}

/* ── Team name links in predictor ───────────────────────── */
table.predictor td.l a,
table.predictor td.r a {
    vertical-align: middle;
    color: var(--wcp-text);
    font-weight: 500;
    transition: color var(--wcp-transition);
}

table.predictor td.l a:hover,
table.predictor td.r a:hover { color: var(--wcp-primary); }

/* ============================================================
   KNOCKOUT TABLE
   ============================================================ */
table.knockout {
    margin: 1em 0;
    font-size: 85%;
    width: 100%;
    background: var(--wcp-surface);
    border-radius: var(--wcp-radius);
    box-shadow: var(--wcp-shadow);
    overflow: hidden;
    border-collapse: collapse;
}

table.knockout td {
    vertical-align: middle;
    padding: 8px 12px;
    border-bottom: 1px solid var(--wcp-border);
    color: var(--wcp-text);
}

/* ============================================================
   SAVE BUTTON
   ============================================================ */
p.save-button {
    text-align: center;
    margin: 20px 0 28px;
}

p.save-button .button,
.wcup_user_form input[type="submit"] {
    display: inline-block;
    background: var(--wcp-primary);
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 11px 40px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--wcp-transition), transform .1s ease, box-shadow var(--wcp-transition);
    box-shadow: 0 3px 10px rgba(26, 107, 60, .3);
    font-family: inherit;
    letter-spacing: .2px;
}

p.save-button .button:hover,
.wcup_user_form input[type="submit"]:hover {
    background: var(--wcp-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(26, 58, 107, .3);
}

p.save-button .button:active,
.wcup_user_form input[type="submit"]:active {
    transform: translateY(0);
}

/* ============================================================
   WIDGET
   ============================================================ */
.widget h3 { margin: 0 0 12px; }

.wcup_user_pred_widget { font-size: 85%; }

/* ============================================================
   CONTENT AREA — remove unwanted shadows on images
   ============================================================ */
.entry-content .wcup-team a,
.widget .wcup-team a,
.entry-content .wcup-review a,
.widget .wcup-review a,
.entry-content .predictor a,
.entry-content .wcup-team a img,
.widget .wcup-team a img,
.entry-content .wcup-review a img,
.widget .wcup-review a img,
.entry-content .predictor a img {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.entry-content th,
.entry-content td { padding: 1px; }

.entry-content p { text-align: justify; }

/* ============================================================
   RANKING / LEADERBOARD TABLE  (scoped to .wcp-ranking)
   ============================================================ */

table.zebra.wcp-ranking {
    width: 100%;
    border-radius: var(--wcp-radius);
    box-shadow: var(--wcp-shadow);
    overflow: hidden;
    border-collapse: collapse;
    background: var(--wcp-surface);
}

/* Header — secondary (blue) for ranking */
table.zebra.wcp-ranking tr.wcup-header th {
    background: var(--wcp-secondary);
    color: #fff;
    padding: 13px 16px;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: none;
}

/* User column header */
th.wcup-user { text-align: start; }

/* Ranking data rows — larger padding than group tables */
table.zebra.wcp-ranking tr.wcup-row td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--wcp-border);
    vertical-align: middle;
    transition: background var(--wcp-transition);
}

table.zebra.wcp-ranking tr.wcup-row:last-child td {
    border-bottom: none;
}

table.zebra.wcp-ranking tr.wcup-row:hover td {
    background: rgba(26, 107, 60, .04) !important;
}

/* Avatar */
td.wcup-user { padding-inline-end: 4px; width: 1px; white-space: nowrap; }
td.wcup-user img {
    border-radius: 50%;
    vertical-align: middle;
    border: 2px solid var(--wcp-border);
    display: inline-block;
}

/* Position + name cell — ranking only */
table.zebra.wcp-ranking tr.wcup-row td:nth-child(2) {
    font-weight: 500;
    color: var(--wcp-text);
    font-size: .95rem;
}

/* Points cell — ranking only */
table.zebra.wcp-ranking td.wcup-points {
    font-weight: 700;
    color: var(--wcp-primary);
    font-size: 1rem;
    text-align: center;
    min-width: 54px;
}

/* Points badge " pts" — ranking only, intentionally NOT on group tables */
table.zebra.wcp-ranking td.wcup-points::after {
    content: ' pts';
    font-size: .65rem;
    font-weight: 400;
    color: var(--wcp-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Review / predictions icon link */
td.wcup-review { text-align: center; width: 40px; }

.review-link img,
.predictions-link img {
    width: 22px;
    height: 22px;
    opacity: .45;
    transition: opacity var(--wcp-transition), transform var(--wcp-transition);
    display: inline-block;
}
.review-link:hover img,
.predictions-link:hover img {
    opacity: 1;
    transform: scale(1.15);
}

/* ── Top-3 medal rows — ranking only ───────────────────── */

/* Gold — 1st place */
table.zebra.wcp-ranking tr.wcup-row:nth-child(3) td {
    background: linear-gradient(90deg, rgba(240,180,41,.12) 0%, var(--wcp-surface) 100%) !important;
}
table.zebra.wcp-ranking tr.wcup-row:nth-child(3) td:nth-child(2)::before {
    content: '🥇 ';
}

/* Silver — 2nd place */
table.zebra.wcp-ranking tr.wcup-row:nth-child(4) td {
    background: linear-gradient(90deg, rgba(160,174,192,.1) 0%, var(--wcp-surface) 100%) !important;
}
table.zebra.wcp-ranking tr.wcup-row:nth-child(4) td:nth-child(2)::before {
    content: '🥈 ';
}

/* Bronze — 3rd place */
table.zebra.wcp-ranking tr.wcup-row:nth-child(5) td {
    background: linear-gradient(90deg, rgba(197,130,79,.08) 0%, var(--wcp-surface) 100%) !important;
}
table.zebra.wcp-ranking tr.wcup-row:nth-child(5) td:nth-child(2)::before {
    content: '🥉 ';
}

/* ── Current user highlight — ranking only ──────────────── */
table.zebra.wcp-ranking tr[style*="background"] td {
    background: rgba(26, 107, 60, .08) !important;
    font-weight: 600;
}
table.zebra.wcp-ranking tr[style*="background"] td.wcup-points {
    color: var(--wcp-accent) !important;
}

/* ── Back link ──────────────────────────────────────────── */
a.predictions-link h6 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wcp-primary);
    font-size: .85rem;
    font-weight: 600;
    margin: 14px 0;
    text-decoration: none;
    transition: color var(--wcp-transition);
}
a.predictions-link h6::before { content: '← '; }
a.predictions-link:hover h6 { color: var(--wcp-secondary); }

/* ── User predictions sub-table ─────────────────────────── */
table.group.zebra {
    width: 100%;
    background: var(--wcp-surface);
    border-radius: var(--wcp-radius);
    box-shadow: var(--wcp-shadow);
    overflow: hidden;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table.group.zebra td,
table.group.zebra th {
    padding: 9px 14px;
    border-bottom: 1px solid var(--wcp-border);
}

table.group.zebra th {
    background: var(--wcp-primary);
    color: #fff;
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    border: none;
}

table.group.zebra tr:last-child td,
table.group.zebra tr:last-child th { border-bottom: none; }

table.group.zebra tr:last-child th {
    background: var(--wcp-bg);
    color: var(--wcp-text);
    font-size: .9rem;
}

table.group.zebra td.wcup-score {
    text-align: center;
    font-weight: 600;
    color: var(--wcp-secondary);
    font-variant-numeric: tabular-nums;
}

table.group.zebra td.wcup-points {
    text-align: center;
    font-weight: 700;
    color: var(--wcp-primary);
}

/* ── Scores table ───────────────────────────────────────── */
table.scores.zebra tr.wcup-header th {
    background: var(--wcp-primary);
    font-size: .82rem;
}

/* ============================================================
   RESULTS TABLE — stage-title & venue rows
   ============================================================ */

/* Stage title inside results */
table.predictor tr.stage-title td {
    background: rgba(26, 58, 107, .07);
    padding: 9px 14px;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--wcp-secondary);
    border-bottom: 1px solid var(--wcp-border);
}

table.predictor tr.stage-title td h3 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Venue / kickoff row */
table.predictor tr.venue td.sep {
    font-size: .75rem;
    color: var(--wcp-muted);
    padding: 4px 14px 10px;
    border-bottom: 1px solid var(--wcp-border);
    font-style: italic;
}

/* Result not yet played */
table.predictor td.cl,
table.predictor td.cr {
    font-size: 1.05rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
    /* Grid collapses to 1 column */
    .wcp-groups-wrap--tables-only {
        grid-template-columns: 1fr;
    }

    table.wcp-group,
    .wcup_clock { font-size: 85%; }

    table.predictor,
    table.scores  { font-size: 80%; }

    table.knockout { font-size: 60%; }

    table.predictor td.cl input,
    table.predictor td.cr input {
        width: 2.2em;
        height: 2.2em;
        font-size: .9rem;
    }

    .wcp-groups-legend { gap: 12px; font-size: .75rem; }
}

@media (max-width: 479px) {
    table.wcp-group,
    .wcup_clock { font-size: 78%; }

    table.predictor,
    table.scores  { font-size: 72%; }

    table.knockout { font-size: 52%; }

    /* Hide rank number on very small screens */
    table.wcp-group tr.wcup-row td.wcup-team::before {
        display: none;
    }
}

/* ============================================================
   EDIT / VIEW MODE
   ============================================================ */

/* Bar displayed at top of form after saving */
.wcp-edit-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(26,107,60,.06) 0%, rgba(26,58,107,.04) 100%);
    border: 1px solid rgba(26,107,60,.2);
    border-radius: var(--wcp-radius);
    padding: 14px 20px;
    margin-bottom: 20px;
}

.wcp-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--wcp-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--wcp-transition), transform .1s ease, box-shadow var(--wcp-transition);
    box-shadow: 0 3px 10px rgba(26,107,60,.25);
    font-family: inherit;
    white-space: nowrap;
}

.wcp-edit-btn:hover {
    background: var(--wcp-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(26,58,107,.25);
}

.wcp-edit-btn:active { transform: translateY(0); }

.wcp-edit-hint {
    font-size: .82rem;
    color: var(--wcp-muted);
    line-height: 1.4;
}

/* Disabled inputs in view mode */
input.wcp-readonly,
input.wcp-readonly:disabled {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--wcp-primary) !important;
    font-weight: 700 !important;
    cursor: default !important;
    pointer-events: none;
    -webkit-text-fill-color: var(--wcp-primary);
}

/* Empty readonly inputs */
input.wcp-readonly[value=""],
input.wcp-readonly:disabled[value=""] {
    color: var(--wcp-muted) !important;
    -webkit-text-fill-color: var(--wcp-muted);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .wcp-edit-bar {
        background: linear-gradient(135deg, rgba(26,107,60,.12) 0%, rgba(26,58,107,.08) 100%);
        border-color: rgba(26,107,60,.3);
    }
}