/* ============================================================
   Container
   ============================================================ */
.tipster-matches-container {
    width: 100vw;
    margin: 0 auto;
    padding: 0;
}

/* ============================================================
   Desktop tabs
   ============================================================ */
.tipster-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 2vw 0;
}
.tipster-tab-btn {
    flex: 1;
    text-align: center;
    background: none;
    border: none !important;
    border-left: 1px solid var(--border-color) !important;
    padding: 8px 0;
    cursor: pointer;
    color: rgba(var(--text-main), 0.5);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    outline: none !important;
    box-shadow: none !important;
}



/* Prvi tab – nema levu ivicu */
.tipster-tab-btn:first-child {
    border-left: none !important;
}
.tipster-tab-label {
    color: var(--text-light);
}
.tipster-tab-btn:hover .tipster-tab-label {
    color: var(--text-muted);
}
.tipster-tab-btn:hover .tipster-tab-date {
    color: var(--text-muted);
}
.tipster-tab-btn:hover {
    color: var(--text-muted);
}
.tipster-tab-date {
    color: var(--text-light);
    transition: color 0.2s ease;
}

/* Aktivni tab */
.tipster-tab-btn.active {
    border-left: 1px solid var(--text-main) !important;
    border-right: 1px solid var(--text-main) !important;
    color: var(--text-main);
}
.tipster-tab-btn.active .tipster-tab-label {
    color: var(--text-main);
}
.tipster-tab-btn.active .tipster-tab-date {
    display: block;
    color: var(--text-main);
}

/* ============================================================
   Mobilna navigacija (strelice + dan/datum) - SVIDA NA SVIM EKRANIMA
   ============================================================ */
.tipster-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4vw 0;
}
.tipster-mobile-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.tipster-current-day {
    font-weight: 700;
    color: var(--text-muted);
}
.tipster-current-date {
    color: var(--text-muted);
}
.tipster-nav-prev,
.tipster-nav-next {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-main, #333);
    padding: 5px 15px;
    transition: opacity 0.2s;
}
.tipster-nav-prev:disabled,
.tipster-nav-next:disabled {
    opacity: 0.3;
    cursor: default;
}
.tipster-nav-prev:hover:not(:disabled),
.tipster-nav-next:hover:not(:disabled) {
    opacity: 0.7;
}

/* ============================================================
   Tab paneli
   ============================================================ */
.tipster-tab-panel {
    display: none;
}
.tipster-tab-panel.active {
    width: 96vw;
    margin: 0 auto;
    display: block;
    border:  1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-card);;
}
.tipster-matches-list{
    padding: 0.5vw;
}
.tipster-matches-list .tipster-match-row:last-child {
    border-bottom: none !important;
}
.tipster-match-row{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5vw;
    padding: 0.5vw;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    transition: background 0.2s ease;
}

/* ============================================================
   CARD MOD
   ============================================================ */
.tipster-mode-card {
    min-width: 0;
    gap: 0.5vw;
}
.tipster-mode-card:hover {
    background: var(--bg-highlight);
}
/* Vreme */
.tipster-match-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--font-secondary);
    line-height: var(--line-secondary);
    color: var(--text-main);

}
.tipster-match-live-time {
    font-size: var(--font-secondary);
    color: var(--accent);
    animation: pulse-live 1.5s ease-in-out infinite;
}
.tipster-match-status-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 700;
    color: #fff;
}
.tipster-match-status-badge.ht { background: #f59e0b; }
.tipster-match-status-badge.bt { background: #8b5cf6; }
.tipster-match-status-badge.pen { background: #ef4444; }

/* Zastava i kod */
.tipster-match-flag-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tipster-league-icon {
    height: clamp(1.2rem, 1rem + 0.4vw, 1.5rem);
    width: auto;
    object-fit: contain;
}
.tipster-league-code {
    font-size: var(--font-tertiary);
    line-height: var(--line-tertiary);
    color: var(--text-muted);
}

/* Timovi + rezultati */
.tipster-match-teams{
    display: flex;
    flex-direction: column; 
}
.tipster-match-team-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.tipster-team-logo-small {
    height: var(--font-h4);
    width: auto;
    max-height: 2rem;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
}
.tipster-team-home,
.tipster-team-away {
    display: flex;
    align-items: center; /* VERTIKALNO CENTRIRANJE SADRŽAJA */
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-align: left;
    gap: 0.5vw;
}
.tipster-match-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: auto; /* gura ga skroz desno */

    flex-shrink: 0;
}
.tipster-score-stacked {
    display: flex;
    flex-direction: column;
    align-items: center; /* horizontalno centriranje dece */
}
.tipster-score-home,
.tipster-score-away {
    text-align: center;
}

/* ============================================================
   ROW MOD
   ============================================================ */
.tipster-mode-row {
    align-items: center;
    justify-content: space-between; /* umesto center */
  
}
.tipster-mode-row:hover {
    background: var(--bg-highlight);
}

/* Timovi – levo i desno, podjednako široki */
.tipster-mode-row .tipster-team-home {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 0.5vw;
    min-width: 0;
}
.tipster-team-name{
    white-space: nowrap;      /* sprečava prelamanje u više redova */
    overflow: hidden;         /* sakriva višak teksta */
    text-overflow: ellipsis;  /* dodaje tri tačke na kraju */
}
.tipster-mode-row .tipster-match-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Timovi – levo i desno, podjednako široki */
.tipster-mode-row .tipster-team-away {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    gap: 0.5vw;
    min-width: 0;
    white-space: nowrap;      /* sprečava prelamanje u više redova */
    overflow: hidden;         /* sakriva višak teksta */
    text-overflow: ellipsis;  /* dodaje tri tačke na kraju */
}
/* Vreme početka (pre utakmice) */
.tipster-mode-row .tipster-match-time-start {
    color: var(--text-muted);
}

/* Badge (HT, BT, PEN) */
.tipster-mode-row .tipster-match-status-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    color: #fff;
}
.tipster-mode-row .tipster-match-status-badge.ht { background: #f59e0b; }
.tipster-mode-row .tipster-match-status-badge.bt { background: #8b5cf6; }
.tipster-mode-row .tipster-match-status-badge.pen { background: #ef4444; }
.tipster-match-score-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Rezultat */
.tipster-mode-row .tipster-match-score {
    font-weight: 700;
    color: var(--text-main);
}

/* Phase label (Extra Time, Penalties) */
.tipster-mode-row .tipster-match-phase-label {
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.5px;
}
.tipster-mode-row .tipster-match-phase-score {
    font-weight: 700;
    color: var(--text-main);
}
@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ============================================================
   TREPERENJE REZULTATA PRI PROMENI
   ============================================================ */

@keyframes flash-result {
    0% { opacity: 1; background-color: rgba(251, 191, 36, 0.3); }
    25% { opacity: 0.7; background-color: rgba(251, 191, 36, 0.6); }
    50% { opacity: 1; background-color: rgba(251, 191, 36, 0.3); }
    75% { opacity: 0.7; background-color: rgba(251, 191, 36, 0.6); }
    100% { opacity: 1; background-color: transparent; }
}
.tipster-team-score.result-flash {
    animation: flash-result 1.5s ease-in-out 5; /* 5 puta = ~7.5 sekundi */
    border-radius: 4px;
    padding: 0 4px;
    transition: background-color 0.3s ease;
}
.tipster-status-text {
    color: var(--text-muted);
    font-weight: 700;
}
/* ============================================================
   SLIM MOD – GRID SA APSOLUTNIM CENTROM
   ============================================================ */

.tipster-mode-slim-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* levo | centar | desno */
    align-items: center;
    gap: 0.5vw;
    width: 100%;
    padding: 0.5vw 0;
}

/* Leva kolona – sve što ide levo od centra */
.tipster-slim-left {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    justify-content: flex-end; /* gura sadržaj ka centru */
    min-width: 0;
    overflow: hidden;
}

/* Srednja kolona – APSOLUTNI CENTAR */
.tipster-slim-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.tipster-match-score-slim {
    text-align: center;
    font-weight: 700;
    padding: 0 10px;
    color: var(--text-main);
    white-space: nowrap;
}

/* Desna kolona – sve što ide desno od centra */
.tipster-slim-right {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    justify-content: flex-start; /* gura sadržaj od centra */
    min-width: 0;
    overflow: hidden;
}

/* Stilovi za elemente unutar slim moda */
.tipster-mode-slim-grid .tipster-match-date-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    min-width: 40px;
}

.tipster-mode-slim-grid .tipster-match-date {
    font-size: var(--font-tertiary);

}

.tipster-mode-slim-grid .tipster-match-year {
    font-size: var(--font-tertiary);
    color: var(--text-muted);
}

.tipster-mode-slim-grid .tipster-team-home {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 0.5vw;
    min-width: 0;
    overflow: hidden;
}

.tipster-mode-slim-grid .tipster-team-away {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    min-width: 0;
    overflow: hidden;
}

.tipster-mode-slim-grid .tipster-team-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tipster-mode-slim-grid .tipster-team-logo-small {
    height: 1.2em;
    width: auto;
    max-height: 2rem;
    object-fit: contain;
    flex-shrink: 0;
}

.tipster-mode-slim-grid .tipster-flag-left,
.tipster-mode-slim-grid .tipster-flag-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.tipster-mode-slim-grid .tipster-flag-icon {
    height: 1.2em;
    width: auto;
    max-height: 2rem;
    object-fit: contain;
}

.tipster-mode-slim-grid .tipster-league-code {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text-muted);
    font-size: var(--font-tertiary);
}

/* Hover */
.tipster-mode-slim-grid:hover {
    background: var(--bg-highlight);
}
/* ============================================================
   SHOW MORE / SHOW LESS DUGME
   ============================================================ */

/* Sakriveni redovi */
.tipster-match-row-wrapper.hidden-result {
    display: none !important;
}

/* Wrapper za dugme */
.tipster-show-more-wrap {
    text-align: center;
    padding: 1.5vw 0;
}

/* Dugme */
.tipster-show-more-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 0.6vw 2vw;
    border-radius: 4px;
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.tipster-show-more-btn:hover {
    background: #a07a1a; /* tamnija nijansa accent */
    opacity: 0.9;
}

.tipster-show-more-btn:active {
    transform: scale(0.98);
}

/* Mobilni */
@media (max-width: 768px) {
    .tipster-show-more-btn {
        padding: 2vw 4vw;
        width: 100%;
    }
}



/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Desktop – mobilna navigacija je vidljiva svuda ali manje istaknuta */
/* Zapravo, mobilna navigacija je vidljiva svuda, ali na desktopu tabovi imaju prednost */

@media (min-width: 769px) {
    .tipster-mobile-nav {
        display: none;
    }
}

/* Mobilni – sitna podešavanja */
@media (max-width: 768px) {
    .tipster-tabs {
        display: none;
    }
    .tipster-matches-list{
        padding: 1vw;
    }
    .tipster-match-card {
        padding: 8px 10px;
        gap: 8px;
    }
    .tipster-mode-card {
        padding: 1vw 0;
    }
    .tipster-league-icon {
        width: 20px;
        height: 20px;
    }
    .tipster-team-home,
    .tipster-team-away {
        min-width: 45px;
    }

    .tipster-match-status {
        min-width: 40px;
    }

    .tipster-tab-btn.active {
        border: none !important;
    }
}