/**
 * Mundial 2026 — Page & Component Styles (supplement to style.css)
 * Loaded via @import or separate enqueue if needed.
 * These are page-specific refinements.
 */

/* ── LOGIN / REGISTER PAGES ───────────────────────────────── */
.page-template-template-login,
.page-template-template-register {
    background: var(--c-navy);
}

.page-template-template-login #site-footer,
.page-template-template-register #site-footer {
    display: none;
}

/* ── MATCH CARDS HOVER ────────────────────────────────────── */
.match-card {
    transition: border-color .2s, background .2s, transform .15s;
}

.match-card:hover {
    transform: translateY(-1px);
}

/* ── SCORE INPUT FOCUS RING ────────────────────────────────── */
.score-input:focus {
    box-shadow: 0 0 0 3px rgba(201,168,76,0.2);
}

/* ── GROUP SELECT SAVED STATE ─────────────────────────────── */
.group-pred-select.saved,
.bracket-select.saved {
    border-color: var(--c-success);
    color: var(--c-success);
}

/* ── PODIUM ANIMATION ─────────────────────────────────────── */
@keyframes podiumRise {
    from { transform: scaleY(0); transform-origin: bottom; }
    to   { transform: scaleY(1); transform-origin: bottom; }
}

/* ── STICKY GROUP NAVIGATION ──────────────────────────────── */
.group-nav-sticky {
    position: sticky;
    top: var(--header-h);
    z-index: 100;
    background: var(--c-navy);
    border-bottom: 1px solid var(--c-navy-border);
    padding: 10px 0;
}

/* ── TABLE RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 600px) {
    .group-table th:nth-child(3),
    .group-table th:nth-child(4),
    .group-table td:nth-child(3),
    .group-table td:nth-child(4) {
        display: none;
    }

    .leaderboard-table th:nth-child(3),
    .leaderboard-table td:nth-child(3) {
        display: none;
    }

    .match-card .match-teams {
        gap: 8px;
    }

    .score-input {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
    }
}

/* ── BRACKET SELECT ───────────────────────────────────────── */
.bracket-select option:first-child {
    color: var(--c-gray-600);
}

/* ── QUALIFY LINE SEPARATOR ───────────────────────────────── */
.qualify-line td {
    border-bottom: 2px dashed rgba(201,168,76,0.35) !important;
}

/* ── PRINT STYLES FOR LEADERBOARD ─────────────────────────── */
@media print {
    #site-header,
    #site-footer,
    .btn,
    .card-footer { display: none !important; }

    body { background: #fff; color: #000; }

    .leaderboard-table th,
    .leaderboard-table td { border-color: #ddd; }

    .points-cell { color: #000 !important; }
}

/* ── SMOOTH SCROLL OFFSET ─────────────────────────────────── */
[id^="group-"] {
    scroll-margin-top: calc(var(--header-h) + 20px);
}

/* ── EMPTY PREDICTION INDICATOR ───────────────────────────── */
.score-input:placeholder-shown {
    border-color: rgba(201,168,76,0.2);
    background: rgba(201,168,76,0.03);
}

/* ── PHASE BADGE IN HEADER ────────────────────────────────── */
.phase-locked-banner {
    background: rgba(239,68,68,0.08);
    border-bottom: 1px solid rgba(239,68,68,0.15);
    padding: 8px 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-danger);
}

/* ── AUTOSAVE INDICATOR ───────────────────────────────────── */
.autosave-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-success);
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0;
    transition: opacity .3s;
}

.autosave-dot.visible { opacity: 1; }