/* ==========================================================================
   HEADER STYLES
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-4) 0;
}

/* Logo */
.site-branding {
    flex-shrink: 0;
}

.site-branding a {
    display: flex;
    align-items: center;
}

.site-branding img {
    max-height: 50px;
    width: auto;
}

.site-logo-text {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--flm-primary);
    text-decoration: none;
}

/* Navigation */
.main-navigation {
    flex: 1;
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    position: relative;
}

.nav-menu a {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-700);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.nav-menu a:hover,
.nav-menu .current-menu-item a {
    color: var(--flm-primary);
    background: var(--color-gray-100);
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
}

.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
}

.hamburger span {
    display: block;
    height: 2px;
    background: var(--color-gray-700);
    border-radius: 2px;
    transition: all var(--transition-fast);
}

/* Sport Toggle */
.sport-toggle {
    display: flex;
    gap: var(--space-2);
    background: var(--color-gray-100);
    padding: var(--space-1);
    border-radius: var(--radius-lg);
}

.sport-toggle__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-600);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.sport-toggle__item:hover {
    background: var(--color-white);
    color: var(--flm-primary);
}

.sport-toggle__item.active {
    background: var(--color-white);
    color: var(--flm-primary);
    box-shadow: var(--shadow-sm);
}

.sport-toggle__icon {
    font-size: var(--font-size-lg);
}

@media (max-width: 1024px) {
    .sport-toggle__label {
        display: none;
    }
}

@media (max-width: 768px) {
    .flm-tabela,
    .flm-table {
        font-size: var(--font-size-2xs);
    }

    .flm-tabela th,
    .flm-tabela td,
    .flm-table th,
    .flm-table td {
        padding: 0.5rem var(--space-2);
    }

    .flm-table .pozicija,
    .flm-tabela th:first-child,
    .flm-tabela td:first-child {
        width: 28px;
        min-width: 28px;
        max-width: 28px;
        padding-left: var(--space-1);
        padding-right: var(--space-1);
        text-align: center;
    }

    .flm-pozicija-badge {
        min-width: 28px;
        height: 18px;
        font-size: 10px;
        padding: 0 4px;
        line-height: 18px;
    }

    .flm-table .tim-naziv,
    .flm-tabela td:nth-child(2) {
        max-width: 90px;
        padding-left: calc(var(--space-3) + 15px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .flm-table .forma-item {
        width: 12px;
        height: 12px;
    }

    .page-mali-fudbal .su-card__body[data-su-top-scorers] .flm-table-wrap {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    .page-mali-fudbal .su-card__body[data-su-top-scorers] .flm-tabela {
        width: 520px;
        min-width: 520px;
        max-width: none;
        table-layout: auto;
    }

    .page-mali-fudbal .su-card__body[data-su-top-scorers] .flm-tabela th,
    .page-mali-fudbal .su-card__body[data-su-top-scorers] .flm-tabela td {
        white-space: nowrap;
    }

    .page-mali-fudbal .su-card__body[data-su-top-scorers] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }
    .menu-toggle {
        display: block;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--color-white);
        box-shadow: var(--shadow-lg);
        padding: var(--space-4);
        gap: var(--space-1);
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu a {
        width: 100%;
    }
}

/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */

.site-footer {
    background: var(--color-gray-900);
    color: var(--color-gray-300);
    margin-top: auto;
}

.footer-main {
    padding: var(--space-16) 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.35fr 1.35fr 0.9fr;
    gap: var(--space-10);
}

.footer-title {
    color: var(--color-white);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
}

.footer-about {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-6);
}

.footer-social {
    display: flex;
    gap: var(--space-3);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-gray-800);
    color: var(--color-gray-400);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.social-link:hover {
    background: var(--flm-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li {
    margin-bottom: var(--space-2);
}

.footer-links a {
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-links a:hover {
    color: var(--color-white);
}

.footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-contact li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
}

.contact-icon {
    font-size: var(--font-size-lg);
}

.footer-contact a {
    color: var(--color-gray-400);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-contact a:hover {
    color: var(--color-white);
}

.footer-bottom {
    border-top: 1px solid var(--color-gray-800);
    padding: var(--space-6) 0;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
}

.footer-bottom a {
    color: var(--flm-primary-light);
    text-decoration: none;
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .footer-bottom-inner {
        flex-direction: column;
        gap: var(--space-2);
        text-align: center;
    }
}

/* ==========================================================================
   LANDING PAGE STYLES
   ========================================================================== */

/* Hero enhancements */
.su-hero--mali-fudbal {
    background: linear-gradient(135deg, var(--flm-primary) 0%, var(--flm-primary-dark) 50%, #0f2138 100%);
    position: relative;
    overflow: hidden;
}

.su-hero--mali-fudbal::before {
    content: '';
    position: absolute;
    inset: -30% -20% -30% -20%;
    background:
        radial-gradient(700px 320px at 18% 18%, rgba(255,255,255,0.22), rgba(255,255,255,0) 60%),
        radial-gradient(520px 360px at 82% 12%, rgba(56, 161, 105, 0.28), rgba(56, 161, 105, 0) 65%),
        radial-gradient(600px 420px at 70% 85%, rgba(15, 23, 42, 0.45), rgba(15, 23, 42, 0) 70%),
        radial-gradient(520px 280px at 12% 85%, rgba(120, 214, 255, 0.14), rgba(120, 214, 255, 0) 65%),
        conic-gradient(from 220deg at 70% 40%, rgba(255,255,255,0.06), rgba(255,255,255,0) 30%, rgba(56,161,105,0.08) 60%, rgba(255,255,255,0) 100%);
    opacity: 1;
    filter: blur(0.5px);
    animation: heroGlow 16s ease-in-out infinite;
    mix-blend-mode: screen;
}

@keyframes rotatePattern {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes heroGlow {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(-3%, 2%, 0) scale(1.08);
    }
}

.su-hero--mali-fudbal::after {
    content: '';
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(380px 220px at 30% 60%, rgba(255,255,255,0.08), rgba(255,255,255,0) 70%),
        radial-gradient(420px 260px at 75% 55%, rgba(56,161,105,0.10), rgba(56,161,105,0) 70%);
    opacity: 0.5;
    mix-blend-mode: screen;
    animation: heroDrift 22s ease-in-out infinite;
}

@keyframes heroDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(1.5%, -1%, 0) scale(1.03); }
}

.su-hero__liga-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(255,255,255,0.15);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-6);
}

.badge-label {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

.badge-name {
    font-weight: var(--font-weight-semibold);
}

.su-hero__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Section styles */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.section-title {
    font-size: var(--font-size-2xl);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.view-all-link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--flm-primary);
}

/* Content grid */
.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-6);
}

.content-main {
    min-width: 0;
}

.content-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

@media (max-width: 1024px) {
    .content-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   LIVE SECTION - Redesigned
   ========================================================================== */

.su-section--live {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    color: var(--color-white);
    padding: var(--space-12) 0;
    position: relative;
    overflow: hidden;
}

/* Animated background pattern */
.su-section--live::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(239, 68, 68, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(239, 68, 68, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Glowing top border */
.su-section--live::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--color-live), transparent);
    animation: liveGlow 2s ease-in-out infinite;
}

@keyframes liveGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.su-section--live .su-container {
    position: relative;
    z-index: 1;
}

.su-section--live .section-header {
    margin-bottom: var(--space-8);
}

.su-section--live .section-title {
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-2xl);
    margin: 0;
}

.su-section--live .section-title .su-badge {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Live matches grid */
.live-matches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
}

/* Live match card - clickable link */
.su-card--live-match {
    display: block;
    text-decoration: none;
    background:
        radial-gradient(120% 120% at 20% 0%, rgba(56, 161, 105, 0.18) 0%, transparent 55%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    padding-top: var(--space-8);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.su-card--live-match:hover {
    transform: translateY(-6px);
    border-color: rgba(56, 161, 105, 0.35);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

a.su-card--live-match:hover {
    text-decoration: none;
}

/* Override base anchor styles for live match card */
a.su-card--live-match,
a.su-card--live-match:visited,
a.su-card--live-match:hover,
a.su-card--live-match:active {
    color: #ffffff;
}

/* Ensure all text inside the live match card is white */
.su-card--live-match * {
    color: inherit;
}

.su-card--live-match .match-separator {
    color: #94a3b8 !important;
}

.su-card--live-match .match-time {
    color: #fbbf24 !important;
}

/* Red glow line at top */
.su-card--live-match::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--flm-accent), var(--flm-primary), transparent);
}

/* Subtle glow overlay */
.su-card--live-match::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(400px 200px at 80% 0%, rgba(255, 255, 255, 0.06), transparent 60%),
        radial-gradient(500px 280px at 10% 100%, rgba(56, 161, 105, 0.12), transparent 70%);
    pointer-events: none;
    opacity: 0.9;
}

/* Live indicator badge */
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: #ef4444;
    color: #ffffff !important;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    z-index: 2;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.live-indicator .pulse {
    width: 8px;
    height: 8px;
    background: var(--color-white);
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/* Match teams layout */
.su-card--live-match .match-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: nowrap;
    margin: var(--space-6) 0 var(--space-5);
    position: relative;
    z-index: 1;
}

.su-card--live-match .team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}

.su-card--live-match .team--home {
    align-items: flex-end;
    text-align: right;
}

.su-card--live-match .team--away {
    align-items: flex-start;
    text-align: left;
}

.su-card--live-match .team-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: #ffffff !important;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.9;
    text-align: center;
}

.su-card--live-match .team-score {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
    color: #ffffff !important;
    line-height: 1;
    min-width: 52px;
    text-align: center;
    text-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.su-card--live-match .match-separator {
    font-size: var(--font-size-xl);
    color: rgba(148, 163, 184, 0.9) !important;
    font-weight: var(--font-weight-semibold);
    padding: 0 var(--space-2);
}

.su-card--live-match .match-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

.su-card--live-match .team-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
}

.su-card--live-match .team-logo--placeholder {
    display: inline-block;
}

/* Match time/minute display */
.su-card--live-match .match-time {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: var(--space-2) var(--space-3);
    background: rgba(251, 191, 36, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: #fbbf24 !important;
    letter-spacing: 0.02em;
}

/* Match link text inside the card */
.su-card--live-match .match-link-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-align: center;
    color: #ffffff !important;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    text-decoration: none;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.95), rgba(30, 58, 95, 0.75));
    border-radius: var(--radius-lg);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.su-card--live-match:hover .match-link-text {
    background: linear-gradient(135deg, var(--flm-primary), var(--flm-primary-dark));
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.45);
}

.su-card--live-match .live-indicator {
    display: none;
}

/* No live matches message */
.su-section--live .no-live-matches {
    text-align: center;
    padding: var(--space-10);
    color: var(--color-gray-400);
}

.su-section--live .no-live-matches p {
    font-size: var(--font-size-lg);
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .su-section--live {
        padding: var(--space-8) 0;
    }

    .live-matches-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .su-card--live-match {
        padding: var(--space-4);
        padding-top: var(--space-7);
    }

    .su-card--live-match .team-name {
        font-size: var(--font-size-xs);
        max-width: 70px;
        color: #ffffff !important;
    }

    .su-card--live-match .team-score {
        font-size: var(--font-size-2xl);
        min-width: 35px;
        color: #ffffff !important;
    }

    .su-card--live-match .team-logo {
        width: 28px;
        height: 28px;
    }

    .su-card--live-match .match-time {
        font-size: var(--font-size-2xs);
        color: #fbbf24 !important;
        top: var(--space-3);
        right: var(--space-3);
    }

    .su-card--live-match .match-time {
        display: none;
    }
}

/* Stats section */
.su-section--stats {
    background: var(--color-white);
    padding: var(--space-8) 0;
    margin-top: calc(var(--space-8) * -1);
    position: relative;
    z-index: 1;
}

.su-section--stats .su-stats-grid {
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    padding: var(--space-6);
}

/* Matches list in sidebar */
.matches-list,
.results-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.match-item,
.result-item {
    display: block;
    padding: var(--space-3);
    background: #0b1f3a;
    border-radius: var(--radius-md);
}

.match-item {
    color: #ffffff;
    text-decoration: none;
}

.match-item:hover {
    background: #132a4b;
    color: #ffffff;
}

.match-item:hover .match-teams-mini,
.match-item:hover .match-teams-mini span {
    color: #ffffff;
}

.match-item:hover .match-date {
    color: #d8e4f2;
}


.match-kolo {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: #7cc7ff;
    color: #0b1f3a;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.match-grupa {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: #ff8a1f;
    color: #1b1206;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.match-live {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: #dc2626;
    color: #ffffff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
}

.match-date {
    font-size: var(--font-size-xs);
    color: #d8e4f2;
    margin-bottom: var(--space-1);
}

.match-teams-mini {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.match-teams-mini span {
    min-width: 0;
}

.match-teams-mini .vs {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .match-teams-mini {
        flex-wrap: nowrap;
    }

    .match-teams-mini span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .match-teams-mini span:not(.vs) {
        flex: 1 1 0;
        max-width: 120px;
    }
}

@media (max-width: 480px) {
    .match-teams-mini span:not(.vs) {
        max-width: 95px;
    }
}

.match-teams-mini .vs {
    color: var(--color-gray-400);
    font-weight: var(--font-weight-normal);
}

.result-teams {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
}

.result-teams .winner {
    font-weight: var(--font-weight-bold);
    color: var(--flm-primary);
}

.result-score {
    background: var(--flm-primary);
    color: var(--color-white);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
}

.no-data {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: var(--space-4);
}

/* Teams section */
.su-section--teams {
    background: var(--color-gray-100);
}

/* Lige grid */
.lige-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-6);
}

.liga-card {
    display: block;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transition: all var(--transition-normal);
}

.liga-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

.liga-card__image {
    aspect-ratio: 16/9;
    background: var(--color-gray-200);
    overflow: hidden;
}

.liga-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.liga-card__content {
    padding: var(--space-4);
}

.liga-card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin: 0 0 var(--space-2);
}

/* ==========================================================================
   CARD STYLES
   ========================================================================== */

.su-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Live match card should NOT inherit white background */
.su-card.su-card--live-match {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
}

.su-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-gray-100);
}

.su-card__header h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.su-card__body {
    padding: var(--space-6);
}

.su-card__footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-gray-100);
    background: var(--color-gray-50);
}

.su-card__footer a {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--flm-primary);
    text-decoration: none;
}

.su-card__footer a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   BADGE STYLES
   ========================================================================== */

.su-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.su-badge--primary {
    background: var(--flm-primary);
    color: var(--color-white);
}

.su-badge--secondary {
    background: var(--color-gray-200);
    color: var(--color-gray-700);
}

.su-badge--success {
    background: var(--color-success);
    color: var(--color-white);
}

.su-badge--warning {
    background: var(--color-warning);
    color: var(--color-gray-900);
}

.su-badge--error {
    background: var(--color-error);
    color: var(--color-white);
}

.su-badge--live {
    background: var(--color-live);
    color: var(--color-white);
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ==========================================================================
   BUTTON STYLES
   ========================================================================== */

.su-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.su-btn--primary {
    background: var(--flm-primary);
    color: var(--color-white);
}

.su-btn--primary:hover {
    background: var(--flm-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.su-btn--secondary {
    background: var(--color-white);
    color: var(--flm-primary);
    border: 2px solid var(--flm-primary);
}

.su-btn--secondary:hover {
    background: var(--flm-primary);
    color: var(--color-white);
}

.su-btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-base);
}

.su-btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
}

/* ==========================================================================
   STATS GRID STYLES
   ========================================================================== */

.su-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.su-stat-card {
    text-align: center;
    padding: var(--space-4);
}

.su-stat-card__value {
    display: block;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--flm-primary);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.su-stat-card__label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    font-weight: var(--font-weight-medium);
}

@media (max-width: 768px) {
    .su-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   SHORTCODE OUTPUT STYLES - TABELA
   ========================================================================== */

.flm-tabela-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.flm-tabela {
    width: 100%;
    min-width: 600px;
}

@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden;
    }

    .page-mali-fudbal .su-card,
    .page-mali-fudbal .su-card__body {
        max-width: 100%;
    }

    .page-mali-fudbal .flm-shortcode .flm-table-wrap {
        max-width: 100%;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
    }

    .page-mali-fudbal .flm-shortcode .flm-tabela {
        max-width: none;
    }

    .flm-tabela-shortcode .flm-table-wrap {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .flm-tabela-shortcode .flm-tabela {
        min-width: 900px !important;
        width: 900px !important;
    }

    .flm-tabela-shortcode .flm-tabela th,
    .flm-tabela-shortcode .flm-tabela td {
        white-space: nowrap;
    }

    .flm-rang-lista-shortcode .flm-table-wrap {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .flm-rang-lista-shortcode .flm-tabela {
        min-width: 600px;
        width: 600px;
    }

    .flm-rang-lista-shortcode .flm-tabela th,
    .flm-rang-lista-shortcode .flm-tabela td {
        white-space: nowrap;
    }

    .page-mali-fudbal .su-card__body[data-su-table] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page-mali-fudbal .su-card__body[data-su-table] .flm-table-wrap {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page-mali-fudbal .su-card__body[data-su-table] .flm-tabela {
        min-width: 900px;
        width: 900px;
    }

    .page-mali-fudbal .su-card__body[data-su-table] .flm-tabela th,
    .page-mali-fudbal .su-card__body[data-su-table] .flm-tabela td {
        white-space: nowrap;
    }
}

.flm-table {
    width: 100%;
    border-collapse: collapse;
}

.flm-table th {
    background: var(--color-gray-100);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.flm-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-gray-100);
    font-size: var(--font-size-sm);
}

.flm-table tbody tr:hover {
    background: var(--color-gray-50);
}

.flm-table .pozicija {
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-400);
    width: 40px;
}

.flm-table .tim-naziv {
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
}

.flm-table .bodovi {
    font-weight: var(--font-weight-bold);
    color: var(--flm-primary);
    font-size: var(--font-size-base);
}

.flm-table .forma {
    display: flex;
    gap: var(--space-1);
}

.flm-table .forma-item {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
}

.flm-table .forma-item--w { background: var(--color-success); }
.flm-table .forma-item--d { background: var(--color-warning); color: var(--color-gray-900); }
.flm-table .forma-item--l { background: var(--color-error); }

/* Top 4 highlight */
.flm-table tbody tr:nth-child(-n+4) .pozicija {
    background: var(--flm-primary);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    text-align: center;
}

/* ==========================================================================
   SHORTCODE OUTPUT STYLES - RASPORED
   ========================================================================== */

.flm-raspored-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.flm-kolo {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.flm-kolo__header {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--flm-primary);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--flm-primary);
}

.flm-kolo__utakmice {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.flm-utakmica-item {
    display: flex;
    align-items: center;
    background: var(--color-white);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    gap: var(--space-3);
}

.flm-utakmica-item__datum {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    min-width: 80px;
}

.flm-utakmica-item__timovi {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
}

.flm-utakmica-item__vs {
    color: var(--color-gray-400);
}

.flm-utakmica-item__rezultat {
    background: var(--flm-primary);
    color: var(--color-white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    min-width: 60px;
    text-align: center;
}

.flm-utakmica-item__rezultat--pending {
    background: var(--color-gray-200);
    color: var(--color-gray-600);
}

/* ==========================================================================
   SHORTCODE OUTPUT STYLES - RANG LISTA
   ========================================================================== */

.flm-rang-lista {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.flm-rang-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.flm-rang-item:first-child {
    background: linear-gradient(135deg, var(--flm-accent) 0%, #f59e0b 100%);
    color: var(--color-gray-900);
}

.flm-rang-item:nth-child(2) {
    background: var(--color-gray-200);
}

.flm-rang-item:nth-child(3) {
    background: #cd7f32;
    color: var(--color-white);
}

.flm-rang-item__pozicija {
    font-weight: var(--font-weight-bold);
    min-width: 24px;
}

.flm-rang-item__igrac {
    flex: 1;
    font-weight: var(--font-weight-medium);
}

.flm-rang-item__tim {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.flm-rang-item:first-child .flm-rang-item__tim,
.flm-rang-item:nth-child(3) .flm-rang-item__tim {
    color: inherit;
    opacity: 0.8;
}

.flm-rang-item__vrednost {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}

/* ==========================================================================
   TOP SCORERS (CUSTOM LIST)
   ========================================================================== */

.su-top-scorers {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.su-top-scorers__header {
    display: grid;
    grid-template-columns: 32px 34px 1fr 70px;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 var(--space-2);
}

.su-top-scorers__item {
    display: grid;
    grid-template-columns: 32px 34px 1fr 70px;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-3);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
}

.su-top-scorers__item:hover {
    background: var(--color-gray-100);
}

.su-top-scorers__rank {
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-400);
    text-align: center;
    grid-column: 1;
}

.su-top-scorers__player a,
.su-top-scorers__player span {
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    text-decoration: none;
}

.su-top-scorers__player {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.su-top-scorers__player > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.su-top-scorers__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--color-gray-200);
    flex-shrink: 0;
    grid-column: 2;
}

.su-top-scorers__avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.03em;
}

.su-top-scorers__team {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}

.su-top-scorers__info {
    grid-column: 3;
    min-width: 0;
}

.su-top-scorers__value {
    font-weight: var(--font-weight-bold);
    color: var(--flm-primary);
    text-align: right;
    grid-column: 4;
}

@media (max-width: 768px) {
    .su-top-scorers__header,
    .su-top-scorers__item {
        grid-template-columns: 28px 30px 1fr 60px;
    }

    .su-top-scorers__value {
        text-align: right;
    }
}

/* ==========================================================================
   SHORTCODE OUTPUT STYLES - TIMOVI GRID
   ========================================================================== */

.flm-timovi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-4);
}

.flm-tim-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.flm-tim-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.flm-tim-card__logo {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-3);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.flm-tim-card__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.flm-tim-card__logo--placeholder {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--flm-primary);
}

.flm-tim-card__naziv {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
}

/* ==========================================================================
   SHORTCODE OUTPUT STYLES - PLAYOFF BRACKET
   ========================================================================== */

.flm-playoff-wrapper {
    overflow-x: auto;
    padding: var(--space-4) 0;
}

.flm-playoff-bracket {
    display: flex;
    gap: var(--space-8);
    min-width: max-content;
}

.flm-playoff-round {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.flm-playoff-round__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--flm-primary);
    text-align: center;
    margin-bottom: var(--space-4);
    text-transform: uppercase;
}

.flm-playoff-match {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    min-width: 200px;
}

.flm-playoff-match__team {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-gray-100);
}

.flm-playoff-match__team:last-child {
    border-bottom: none;
}

.flm-playoff-match__team--winner {
    background: var(--color-success);
    color: var(--color-white);
}

.flm-playoff-match__team--winner .flm-playoff-match__name {
    font-weight: var(--font-weight-bold);
}

.flm-playoff-match__name {
    font-size: var(--font-size-sm);
}

.flm-playoff-match__score {
    font-weight: var(--font-weight-bold);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-muted {
    color: var(--color-gray-500);
}

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.hidden {
    display: none !important;
}

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

@media (max-width: 768px) {
    .su-container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .content-grid {
        grid-template-columns: 1fr;
    }

    .su-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .flm-utakmica-item {
        flex-direction: column;
        text-align: center;
    }

    .flm-utakmica-item__datum {
        min-width: auto;
    }

.flm-playoff-bracket {
    flex-direction: column;
    gap: var(--space-6);
}
}

/* ==========================================================================
   BLOG / VESTI
   ========================================================================== */

.vesti-hero {
    padding: 60px 0 30px;
    background: linear-gradient(180deg, rgba(14, 116, 144, 0.08) 0%, rgba(14, 116, 144, 0) 100%);
}

.vesti-hero__title {
    font-size: clamp(32px, 4vw, 48px);
    margin: 0 0 10px;
}

.vesti-hero__subtitle {
    margin: 0;
    color: var(--color-gray-600);
    max-width: 640px;
}

.vesti-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.vesti-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
}

.vesti-card__media {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.vesti-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vesti-card__placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-gray-200);
}

.vesti-card__content {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vesti-card__meta {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--color-gray-600);
}

.vesti-card__title {
    margin: 0;
    font-size: 20px;
}

.vesti-card__title a {
    color: inherit;
    text-decoration: none;
}

.vesti-card__excerpt {
    color: var(--color-gray-700);
}

.vesti-card__link {
    margin-top: auto;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.vesti-pagination {
    margin-top: 30px;
}

.vesti-back-link {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--color-gray-700);
    text-decoration: none;
}

.vesti-single-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 14px;
    color: var(--color-gray-600);
}

.vesti-single-media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.vesti-article {
    margin-top: 24px;
    line-height: 1.7;
}