/* =========================================
   zgMbet Dark Theme — main.css
   ========================================= */

:root {
    --bg-primary:   #0a0a0a;
    --bg-card:      #151515;
    --bg-card-2:    #1e1e1e;
    --bg-nav:       #111111;
    --accent:       #c8f000;
    --accent-dark:  #a8cc00;
    --accent-text:  #0a0a0a;
    --text-primary: #ffffff;
    --text-muted:   #888888;
    --text-dim:     #555555;
    --border:       #2a2a2a;
    --border-light: #333333;
    --danger:       #e74c3c;
    --success:      #27ae60;
    --warning:      #f39c12;
    --info:         #3498db;
    --live-color:   #e74c3c;

    --header-h:      56px;
    --bottom-nav-h:  72px;
    /* STVARNA visina reda tabova (12px + 12px odmak + tekst + donja linija).
       Bila je 48px, a traka je uvek bila 44 — red sportova se lepio 4px nize i
       kroz taj prozor se pri skrolu videla lista ispod. */
    --tab-bar-h:     44px;
    --ticket-bar-h:  68px;
    --safe-bottom:   env(safe-area-inset-bottom, 0px);

    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    14px;

    --font-main:    'Inter', 'Roboto', sans-serif;
}

/* =========================================
   RESET / BASE
   ========================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    padding-top: var(--header-h);
    padding-bottom: calc(var(--bottom-nav-h) + var(--ticket-bar-h) + 16px);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

img { max-width: 100%; }

ul, ol { padding: 0; margin: 0; list-style: none; }

input, select, textarea, button { font-family: inherit; }

/* =========================================
   PRELOADER
   ========================================= */
.preloader {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity .4s ease;
}
.preloader.hide { opacity: 0; pointer-events: none; }
.preloader__img img { width: 60px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.preloader__logo { height: 44px; width: auto; animation: zgmPulse 1.1s ease-in-out infinite; }
@keyframes zgmPulse { 0%,100% { opacity: .45; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }

/* =========================================
   OVERLAYS
   ========================================= */
.body-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.body-overlay.active { opacity: 1; pointer-events: all; }

/* =========================================
   HEADER
   ========================================= */
.zgm-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 10px;
    z-index: 200;
}

.zgm-header__hamburger {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.zgm-header__hamburger:hover { background: var(--bg-card-2); }

.zgm-header__logo {
    flex: 1;
    display: flex;
    align-items: center;
}
/* Visinu logoa odredjuje .zgm-logo (razlicita je za pun logo i za znak) —
   ovde ostaje samo da slika ne bude razvucena. */
.zgm-header__logo img { width: auto; }
.zgm-header__logo-text {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}
.zgm-header__logo-text span { color: var(--accent); }

/* LOGO (slika). Vodoravni znak+natpis je odnosa 4,48:1, pa je na 26px visine
   sirok 117px. Prijavljenom igracu desnu stranu zaglavlja zauzimaju stanje i
   nalog i na uskom telefonu za logo ostane ~65-105px — zato se ispod 420px
   prijavljenom prikazuje SAMO znak. Gostu pun logo staje i na 320px. */
.zgm-logo { display: block; height: 26px; width: auto; }
.zgm-logo--mark { display: none; height: 28px; width: auto; }
.zgm-logo--sm { height: 22px; }
@media (max-width: 419px) {
    .zgm-header--auth .zgm-logo { display: none; }
    .zgm-header--auth .zgm-logo--mark { display: block; }
}
@media (max-width: 359px) {
    .zgm-logo { height: 24px; }
}

.zgm-header__balance {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card-2);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.zgm-header__balance-add {
    width: 22px; height: 22px;
    background: var(--accent);
    color: var(--accent-text);
    border-radius: 50%;
    border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

.zgm-header__user {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.zgm-header__user:hover { color: var(--accent); }

/* Guest header buttons */
.zgm-header__guest {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.zgm-header__btn-login {
    background: none;
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all .2s;
    white-space: nowrap;
}
.zgm-header__btn-login:hover { border-color: var(--text-muted); color: var(--text-primary); }
.zgm-header__btn-reg {
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background .2s;
    white-space: nowrap;
}
.zgm-header__btn-reg:hover { background: var(--accent-dark); color: var(--accent-text); }

/* Sidebar drawer */
.zgm-sidebar {
    position: fixed;
    top: 0; left: -280px;
    width: 280px;
    height: 100%;
    background: var(--bg-nav);
    border-right: 1px solid var(--border);
    z-index: 300;
    transition: left .3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.zgm-sidebar.open { left: 0; }
.zgm-sidebar__head {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.zgm-sidebar__close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
}
.zgm-sidebar__menu { padding: 8px 0; }
.zgm-sidebar__item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-muted);
    font-size: 14px;
    transition: all .2s;
}
.zgm-sidebar__item a:hover,
.zgm-sidebar__item a.active {
    color: var(--accent);
    background: rgba(200,240,0,.06);
}
.zgm-sidebar__item a i { font-size: 18px; width: 20px; text-align: center; }

/* =========================================
   MAIN TABS (Uživo / Top / 24h / Favoriti)
   ========================================= */
.zgm-tabs {
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border);
    display: flex;
    /* STROGO: red tabova nikad ne skroluje — sa lupom ih je 5 (ulogovan),
       pa se stiskaju da stanu i na 330px. */
    overflow-x: hidden;
    scrollbar-width: none;
    position: sticky;
    top: var(--header-h);
    z-index: 100;
}
.zgm-tabs::-webkit-scrollbar { display: none; }
.zgm-tabs__item {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all .2s;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zgm-tabs__item:hover { color: var(--text-primary); }
.zgm-tabs__item.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
/* Lupa: uska celija, uzima minimum da tekstualni tabovi dobiju sirinu. */
.zgm-tabs__search { flex: 0 0 32px; padding: 12px 0; }
.zgm-tabs__search i { font-size: 17px; }
/* Polje pretrage: skriveno dok se ne klikne lupa, tada zauzme ceo red. */
.zgm-tabs__find { display: none; }
.zgm-tabs.zzsearching .zgm-tabs__item { display: none; }
.zgm-tabs.zzsearching .zgm-tabs__find {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
}
.zgm-tabs__find-ico { color: var(--accent); font-size: 17px; flex: 0 0 auto; }
.zgm-tabs__find input {
    flex: 1 1 auto;
    min-width: 0;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    /* 16px je OBAVEZNO: iPhone sam zumira stranu na fokus polja manjeg od
       16px, a zum odgura desni kraj reda (X) van ekrana. */
    font-size: 16px;
    font-weight: 600;
    padding: 6px 9px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.zgm-tabs__find input::placeholder { color: var(--text-muted); font-weight: 400; font-size: 14px; }
/* X: vidljiv kvadrat sa okvirom (ne bledi sivi znak), dovoljno veliki za prst. */
.zgm-tabs__find-x {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    align-self: stretch;
    background: rgba(255, 255, 255, .10);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}
.zgm-tabs__find-x:active { background: rgba(255, 255, 255, .18); }

/* =========================================
   SPORT CATEGORY ICONS
   ========================================= */
.sport-icons {
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 4px;
    gap: 4px;
    position: sticky;
    /* -1px: preklop preko reda tabova. Cist racun je tacan, ali pri uvecanju
       strane pregledac zaokruzuje delove piksela i ostavila bi se dlaka kroz
       koju se vidi lista. Preklop se ne vidi, a rupa ne moze da se vrati. */
    top: calc(var(--header-h) + var(--tab-bar-h) - 1px);
    z-index: 99;
}
.sport-icons::-webkit-scrollbar { display: none; }
.sport-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    border-radius: var(--radius-md);
    background: var(--bg-card-2);
    border: 1px solid transparent;
    cursor: pointer;
    /* Exactly 6 tiles ("Svi" + 5 sports) fill the viewport; the rest scroll
       horizontally. 6 tiles + 5 gaps(4px) = full content width. Fixed basis,
       no grow/shrink, so extra sports overflow into the horizontal scroll. */
    box-sizing: border-box;
    flex: 0 0 calc((100% - 20px) / 6);
    min-width: 0;
    color: var(--text-muted);
    transition: all .2s;
    text-decoration: none;
}
.sport-icon-btn:hover { color: var(--text-primary); border-color: var(--border-light); }
.sport-icon-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(200,240,0,.08);
}
.sport-icon-btn__icon {
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}
.sport-icon-btn__icon svg,
.sport-icon-btn__icon img { width: 24px; height: 24px; }
.sport-icon-btn__name {
    font-size: 9px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}
.sport-icon-btn__count {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
}

/* =========================================
   MARKET FILTER PILLS
   ========================================= */
.market-filter {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
}
.market-filter::-webkit-scrollbar { display: none; }
.market-filter__pill {
    flex-shrink: 0;
    padding: 6px 14px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.market-filter__pill:hover { color: var(--text-primary); border-color: var(--border-light); }
.market-filter__pill.active {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
}
.market-filter__filter-btn {
    flex-shrink: 0;
    width: 32px; height: 32px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    align-self: center;
}

/* =========================================
   SECTION HEADER (• UŽIVO 37)
   ========================================= */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 6px;
}
.section-header__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.section-header__dot {
    width: 8px; height: 8px;
    background: var(--live-color);
    border-radius: 50%;
    animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(1.3); }
}
.section-header__count {
    font-size: 12px;
    font-weight: 700;
    background: var(--live-color);
    color: #fff;
    border-radius: 10px;
    padding: 1px 6px;
}
.section-header__link {
    font-size: 12px;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* =========================================
   MATCH CARD
   ========================================= */
.match-card {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0;
    position: relative;
    overflow: hidden;
}
/* No perpetual green card glow — looked like random "odds flash" on time ticks. */
.match-card + .match-card { margin-top: 2px; }

.match-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 4px;
}
.match-card__league {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 6px;
}
.match-card__league-flag {
    width: 16px; height: 12px;
    object-fit: cover;
    border-radius: 2px;
}
.match-card__time {
    font-size: 11px;
    color: var(--accent);
    font-weight: 700;
}

.match-card__body {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 8px;
    min-width: 0;
    overflow: hidden;
}

.match-card__teams { min-width: 0; }
.match-card__team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
}
.match-card__team-name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.match-card__score {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    min-width: 16px;
    text-align: right;
}

/* Odds wrap: labels above + buttons below */
.match-card__odds-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
    min-width: 0;
}
.match-card__odds-labels {
    display: flex;
    gap: 2px;
}
.match-card__odds-labels span {
    width: 42px;
    text-align: center;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: .3px;
}
.match-card__odds {
    display: flex;
    gap: 2px;
    align-items: center;
}

.match-card__more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 42px;
}
.match-card__more-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
}
.match-card__more-count {
    font-size: 10px;
    color: var(--accent);
    font-weight: 700;
}

.match-card__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 8px;
}
.match-card__live-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--live-color);
    text-transform: uppercase;
}
.match-card__live-badge::before {
    content: '•';
    font-size: 14px;
    animation: pulse 1.4s ease-in-out infinite;
}
.match-card__minute {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
}
.match-card__elapsed {
    font-size: 11px;
    color: var(--text-muted);
}
.match-card__stats {
    margin-left: auto;
    display: flex;
    gap: 2px;
}
.match-card__stats-bar {
    width: 3px; height: 12px;
    background: var(--accent);
    border-radius: 2px;
    opacity: .4;
}
.match-card__stats-bar:nth-child(2) { height: 8px; }
.match-card__stats-bar:nth-child(3) { height: 16px; }
.match-card__fav {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    transition: color .2s;
}
.match-card__fav:hover,
.match-card__fav.active { color: var(--warning); }

/* Odds buttons */
.odds-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.odds-group__header {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    padding: 0 0 2px 0;
}
.odds-group__label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    text-align: center;
    width: 52px;
}
.odds-group__row {
    display: flex;
    gap: 4px;
}

.oddBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 0;
    height: 38px;
    background: var(--bg-card-2);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    padding: 4px;
    line-height: 1.2;
}
.oddBtn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.oddBtn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
    box-shadow: 0 0 14px 4px rgba(200,240,0,.7);
}
.oddBtn.suspended {
    opacity: .5;
    cursor: not-allowed;
}
.oddBtn--dash {
    font-size: 18px;
    color: var(--text-dim);
}

/* =========================================
   LEAGUES SUB-BAR
   ========================================= */
.leagues-bar {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bg-primary);
}
.leagues-bar::-webkit-scrollbar { display: none; }
.leagues-bar__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: all .2s;
}
.leagues-bar__item:hover { color: var(--text-primary); border-color: var(--border-light); }
.leagues-bar__item.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(200,240,0,.08);
}
.leagues-bar__item img { width: 18px; height: 14px; object-fit: cover; border-radius: 2px; }
.leagues-bar__item--all i { font-size: 15px; line-height: 1; }
.leagues-bar__item--all { font-weight: 700; }

/* Pehar: otvara spisak liga po drzavama. Stoji odmah iza SVE. */
.leagues-bar__trophy {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    padding: 6px 0;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--accent);
    cursor: pointer;
}
.leagues-bar__trophy i { font-size: 17px; line-height: 1; }
.leagues-bar__trophy.active { border-color: var(--accent); background: rgba(200,240,0,.12); }
/* Poslednja pilula kad lige ne stanu u red — vodi na pun spisak. */
.leagues-bar__more { font-weight: 700; color: var(--accent); border-color: var(--accent); }

/* =========================================
   TIKET BAR (sticky bottom, above bottom nav)
   ========================================= */
.tiket-bar {
    position: fixed;
    bottom: var(--bottom-nav-h);
    left: 0; right: 0;
    height: var(--ticket-bar-h);
    background: var(--bg-card);
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    /* Uska traka: na 320px svaki piksel ivice i razmaka je razlika izmedju
       "staje" i "tekst gazi polje za ulog". */
    padding: 0 8px;
    gap: 6px;
    z-index: 150;
}
.tiket-bar__icon {
    position: relative;
    flex-shrink: 0;
}
.tiket-bar__icon-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}
.tiket-bar__badge {
    position: absolute;
    top: -4px; right: -4px;
    background: var(--accent);
    color: var(--accent-text);
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
}
.tiket-bar__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}
.tiket-bar__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    /* Brana: sadrzaj se sece u svom polju, nikad se ne preliva preko polja za
       ulog i nikad ne prelama traku u dva reda — koliko god iznos bio dug. */
    overflow: hidden;
    white-space: nowrap;
}
.tiket-bar__info-row {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-size: 12px;
    color: var(--text-muted);
}
.tiket-bar__info-label { flex-shrink: 0; color: #c8ccd6; }
/* Ukupan koeficijent je jedini broj u ovom delu trake — vidi se izdaleka.
   Vece i svetlije od ostatka trake; mera je uzeta tako da i najgori slucaj
   (koef 42.60 uz isplatu od 639.000,00) stane na 320px. */
.tiket-bar__info-val {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
}
.tiket-bar__btn {
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: var(--radius-md);
    /* Bocna ivica 20 -> 12: dugme raste sa iznosom isplate, pa je ovo mesto
       koje najvise uzima kad je ulog veliki. */
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background .2s;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.tiket-bar__btn:hover { background: var(--accent-dark); }
.tiket-bar__btn:disabled { opacity: .5; cursor: not-allowed; }

/* =========================================
   ZETONI ZA ULOG
   Okrugli, kao pravi kazino zetoni: obod sa zarezima, tamno lice, broj u
   sredini. Boja OBODA raste sa apoenom (celicna -> akcentna -> zlatna), pa se
   vrednost prepozna i pre nego sto se procita broj. Lice ostaje tamno da broj
   uvek bude beo i citljiv.
   Sirina: rastu sa ekranom (flex 1 1 0) ali su ogranicene na 46px, a visak
   prostora ide u razmake — red nikad ne skroluje.
   ========================================= */
.zzchips {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 6px;
}
.zzchips[hidden] { display: none; }

.zzchips__c {
    flex: 1 1 0;
    min-width: 0;
    max-width: 46px;
    aspect-ratio: 1;
    padding: 4px;              /* debljina oboda */
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    /* Klasican kazino zeton: crven obod sa belim zarezima, BELO lice, broj u
       crvenom. Broj je jedina razlika izmedju apoena. */
    --zc: #d32f2f;
    color: #c62828;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -.2px;
    /* Lice (prvi sloj) je isecen na unutrasnji krug i pokriva sredinu zareza;
       obod (drugi sloj) viri po ivici — otud izgled pravog zetona. */
    background:
        radial-gradient(circle at 50% 34%, #ffffff 0%, #f4f4f4 70%, #d9d9d9 100%) content-box,
        repeating-conic-gradient(from 0deg, #ffffff 0 14deg, var(--zc) 14deg 45deg) border-box;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .28);
    transition: transform .08s ease, box-shadow .08s ease;
}

.zzchips__c:active {
    transform: scale(.92);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(0, 0, 0, .18);
}

/* Strelica nije zeton — prazan, iscrtkan krug, da se ne pomesa sa vrednoscu. */
.zzchips__undo {
    flex: 0 0 34px;
    max-width: 34px;
    aspect-ratio: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(200, 240, 0, .45);
    border-radius: 50%;
    background: transparent;
    color: var(--accent);
    font-size: 15px;
    cursor: pointer;
    transition: transform .08s ease, background .08s ease;
}
.zzchips__undo:active { transform: scale(.92); background: rgba(200, 240, 0, .14); }

/* Traka: red visi O SAMOJ TRACI (njeno dete, zalepljen za gornji rub), pa je
   prati svuda — sakriven hrom pri skrolu, otvoren mec, desktop bez trake.
   Racunanje iz fiksnih visina (nav + traka) je vazilo samo dok traka stoji na
   svom mestu; cim se spusti, red bi ostao da visi iznad nje. */
.zzchips--bar {
    position: absolute;
    left: 0; right: 0;
    bottom: 100%;
    margin: 0;
    padding: 8px;
    background: linear-gradient(180deg, #101010, var(--bg-card));
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .45);
}

/* Ulazak: zetoni se "bacaju" na sto jedan za drugim. Pomeranje ide kroz
   translate/scale (zasebna svojstva), a ne kroz transform — da zavrsno stanje
   animacije ne pojede transform pritiska. */
@keyframes zzchip-in {
    from { opacity: 0; translate: 0 10px; scale: .8; }
    to   { opacity: 1; translate: 0 0;    scale: 1;  }
}
.zzchips:not([hidden]) > * { animation: zzchip-in .18s cubic-bezier(.2, .9, .3, 1.35) both; }
.zzchips:not([hidden]) > *:nth-child(2) { animation-delay: .012s; }
.zzchips:not([hidden]) > *:nth-child(3) { animation-delay: .024s; }
.zzchips:not([hidden]) > *:nth-child(4) { animation-delay: .036s; }
.zzchips:not([hidden]) > *:nth-child(5) { animation-delay: .048s; }
.zzchips:not([hidden]) > *:nth-child(6) { animation-delay: .060s; }
.zzchips:not([hidden]) > *:nth-child(7) { animation-delay: .072s; }
.zzchips:not([hidden]) > *:nth-child(8) { animation-delay: .084s; }

@media (prefers-reduced-motion: reduce) {
    .zzchips:not([hidden]) > * { animation: none; }
}

/* Najuzi ekrani: zeton je manji, pa broj dobija manje slovo da ne izadje. */
@media (max-width: 300px) {
    .zzchips__c { font-size: 10px; }
}

/* =========================================
   PORUKE (iziToast) — "NEON STAKLO"
   Tamno staklo cija ivica svetli u boji statusa i gasi se ka desnoj strani,
   pun krug sa ikonicom (isti fazon kao zetoni: puna boja + tamna ikonica),
   mikro-natpis, bela poruka, svetleca linija vremena. Biblioteka ostaje ista
   — ovo je samo njen izgled; klase zz-* dodeljuje Template::partials/notify.
   ========================================= */
.iziToast.zz-success { --zc:#c8f000; --zg:rgba(200,240,0,.14);  --zg2:rgba(200,240,0,.30); }
.iziToast.zz-error   { --zc:#ff3b56; --zg:rgba(255,59,86,.14);  --zg2:rgba(255,59,86,.30); }
.iziToast.zz-warning { --zc:#ffb020; --zg:rgba(255,176,32,.14); --zg2:rgba(255,176,32,.30); }
.iziToast.zz-info    { --zc:#3ea6ff; --zg:rgba(62,166,255,.14); --zg2:rgba(62,166,255,.30); }

.iziToast.zz-toast {
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    /* Dva sloja: tamno staklo unutra, svetleca ivica po obodu. */
    background:
        linear-gradient(180deg, rgba(26,26,26,.97), rgba(19,19,19,.97)) padding-box,
        linear-gradient(115deg, var(--zc) 0%, rgba(255,255,255,.10) 45%, rgba(255,255,255,.06) 100%) border-box !important;
    box-shadow: 0 16px 36px rgba(0,0,0,.6), 0 2px 20px var(--zg), inset 0 1px 0 rgba(255,255,255,.05) !important;
    min-height: 0 !important;
    overflow: hidden;
}
.iziToast.zz-toast::after { box-shadow: none !important; }
/* Meko obojeno svetlo u gornjem levom uglu, iza kruga. */
.iziToast.zz-toast::before {
    content: "";
    position: absolute;
    left: -30px; top: -40px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--zg2), transparent 70%);
    pointer-events: none;
}
.iziToast.zz-toast > .iziToast-body {
    padding: 11px 34px 13px 62px !important;
    margin: 0 !important;
    min-height: 0 !important;
}
.iziToast.zz-toast .iziToast-icon {
    left: 12px !important; top: 50% !important;
    transform: translateY(-50%) !important;
    width: 38px !important; height: 38px !important; line-height: 38px !important;
    border-radius: 50%;
    text-align: center;
    font-size: 21px !important;
    background: var(--zc);
    color: #0d0d0d !important;
    box-shadow: 0 0 20px var(--zg2), inset 0 2px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.18);
    margin: 0 !important;
    opacity: 1 !important;
}
.iziToast.zz-toast .iziToast-title {
    display: block; float: none;
    margin: 0 0 2px !important; padding: 0 !important;
    font-size: 9px !important; font-weight: 800 !important;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--zc) !important; opacity: .9;
    line-height: 1.2 !important;
}
.iziToast.zz-toast .iziToast-message {
    display: block; float: none;
    margin: 0 !important; padding: 0 !important;
    font-size: 14px !important; font-weight: 650;
    color: #fff !important; line-height: 1.3 !important;
}
.iziToast.zz-toast .iziToast-close {
    width: 32px !important; height: 100% !important;
    right: 0 !important; top: 0 !important;
    opacity: .35 !important;
    filter: invert(1);           /* podrazumevani X je crn — na tamnom mora beo */
    background-size: 8px !important;
}
.iziToast.zz-toast .iziToast-progressbar {
    height: 2px !important;
    background: rgba(255,255,255,.04) !important;
    bottom: 0 !important;
}
.iziToast.zz-toast .iziToast-progressbar > div {
    height: 100%;
    background: linear-gradient(90deg, var(--zc) 60%, transparent) !important;
    opacity: .85;
    border-radius: 0;
    box-shadow: 0 0 8px var(--zg2);
}

/* =========================================
   BOTTOM NAVIGATION
   ========================================= */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-h);
    padding-bottom: 10px;
    background: var(--bg-nav);
    border-top: 1px solid var(--border);
    display: flex;
    z-index: 160;
}
.bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    color: var(--text-dim);
    transition: color .2s;
    text-decoration: none;
    position: relative;
}
.bottom-nav__item:hover { color: var(--text-muted); }
.bottom-nav__item.active { color: var(--accent); }
.bottom-nav__icon {
    font-size: 20px;
    line-height: 1;
    position: relative;
}
.bottom-nav__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.bottom-nav__badge {
    position: absolute;
    top: -4px; right: -6px;
    background: var(--accent);
    color: var(--accent-text);
    font-size: 9px;
    font-weight: 700;
    border-radius: 50%;
    width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center;
}

/* =========================================
   BET SLIP DRAWER
   ========================================= */
.betslip-drawer {
    position: fixed;
    bottom: 0; right: 0;
    width: 100%;
    max-width: 420px;
    height: calc(100% - var(--header-h));
    background: var(--bg-nav);
    border-left: 1px solid var(--border);
    z-index: 250;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s ease;
}
.betslip-drawer.open { transform: translateX(0); }
/* Isto i za ceo panel (futer, prazan prostor ispod spiska). */
.betslip-drawer { overscroll-behavior: contain; }

/* Pozadina zakljucana dok je tiket otvoren (samo mobilni prikaz; na >=992px je
   tiket stalni panel pa se ne zakljucava). Telo se "zamrzne" na tekucoj poziciji
   preko position:fixed + top:-Ypx, koji upisuje JS; on i vraca stranu nazad. */
body.zz-tiket-open {
    position: fixed;
    left: 0; right: 0; width: 100%;
    overflow: hidden;
}

.betslip-drawer__header {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.betslip-drawer__tab {
    flex: 1;
    padding: 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all .2s;
    text-transform: uppercase;
    letter-spacing: .3px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.betslip-drawer__tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.betslip-drawer__close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 0 14px;
    align-self: center;
    flex-shrink: 0;
}

/* Tab content wrapper — flex column so list scrolls and footer sticks */
.betslip-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.betslip-tab-content.d-none { display: none !important; }

/* Scrollable list area inside the tab */
.betslip__body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    /* Pokret ostaje UNUTAR tiketa: bez ovoga, cim se dodje do dna ili vrha
       spiska, telefon nastavi da skroluje listu meceva iza panela. */
    overscroll-behavior: contain;
}

.betslip-drawer__footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 12px;
    background: var(--bg-card);
}

/* Bet slip items */
.betslip__list { display: flex; flex-direction: column; gap: 0; }
.betslip-item {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
}
.betslip-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.betslip-item-league {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    font-size: 10px;
    color: var(--text-muted);
}
.betslip-item-league__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.betslip-item-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.betslip-item-close:hover { color: var(--danger); }
/* Red para je uzi za sirinu iksa i ne dodiruje ivicu; duga imena se skracuju. */
.betslip-item-teams {
    display: flex;
    gap: 5px;
    margin-bottom: 3px;
    max-width: calc(100% - 22px);
}
.betslip-item-team {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
}
.betslip-item-team__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.betslip-item-team__logo { width: 18px; height: 18px; object-fit: cover; border-radius: 50%; }
/* Igra i ishod u istom redu sa kvotom — stavka je 3 reda, ne 4. */
.betslip-item-market { margin-bottom: 0; }
.betslip-item-market__wrapper {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.betslip-item-market__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--text-muted);
}
.betslip-item-market__label b { color: var(--text-primary); font-weight: 800; font-size: 12px; }
.betslip-item-market__score {
    font-size: 15px;
    font-weight: 800;
    color: var(--accent);
}
.betslip-item-stake .form--control {
    background: var(--bg-card-2);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 13px;
}
.betslip-item-stake .input-group-text {
    background: var(--bg-card-2);
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    font-size: 12px;
}
.betslip-item-return {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}
.betslip-item-return .bet-return-amount { color: var(--accent); font-weight: 700; }

/* Slip footer — 6 redova. Sve staje bez skrola i bez preseka od 320px navise:
   1 parova+kvota, 2 ulog+valuta, 3 obe opcije, 4 bonus, 5 dobitak, 6 dugmad. */
.zzf-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.zzf-top span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zzf-top b { color: var(--text-primary); font-weight: 800; font-size: 13px; margin-left: 4px; }

.zzf-stake { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.zzf-lab {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .3px;
    flex-shrink: 0;
}
.zzf-inp {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 40px;
    background: var(--bg-card-2);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
}
/* 16px je namerno: ispod toga iPhone zumira stranu na fokus. */
.zzf-inp > input {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    text-align: right;
    padding: 0 8px;
    outline: none;
    -moz-appearance: textfield;
}
.zzf-inp > input::-webkit-outer-spin-button,
.zzf-inp > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zzf-code {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 9px;
    flex-shrink: 0;
    border-left: 1px solid var(--border);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

.zzf-opts { display: flex; gap: 10px; margin-bottom: 10px; }
.zzf-opts label {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zzf-opts input { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }

.zzf-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.zzf-bonus { font-size: 12px; color: #e4e4e4; margin-bottom: 4px; }
.zzf-bonus i { font-style: normal; color: #ffffff; font-weight: 700; }
.zzf-bonus b { color: var(--accent); font-weight: 700; white-space: nowrap; }
.zzf-win { margin-bottom: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
/* Samo natpis (neposredno dete) — iznos je span UNUTAR <b> i mora da nasledi njega. */
.zzf-win > span { font-size: 11px; font-weight: 700; color: #f2f2f2; letter-spacing: .3px; }
.zzf-win b { font-size: 19px; font-weight: 800; color: var(--accent); white-space: nowrap; }

.zzf-act { display: flex; gap: 8px; }
.zzf-del {
    width: 44px; height: 44px;
    flex-shrink: 0;
    background: var(--bg-card-2);
    border: 1px solid var(--border-light);
    color: var(--danger);
    border-radius: 8px;
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.zzf-play {
    flex: 1;
    min-width: 0;
    height: 44px;
    background: var(--accent);
    color: var(--accent-text);
    border: 0;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s;
}
.zzf-play:hover { background: var(--accent-dark); }

/* Najuzi telefoni (320-359px). */
@media (max-width: 359px) {
    .zzf-win b { font-size: 17px; }
    .zzf-opts label { font-size: 11px; gap: 6px; }
    .zzf-play { font-size: 14px; }
}

/* =========================================
   SPISAK ODIGRANIH TIKETA — kartica po tiketu (bez tabele i bocnog skrola).
   Cela kartica je dugme: klik bilo gde otvara detalje.
   ========================================= */
.zzt {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 30px 10px 12px;
    margin-bottom: 8px;
    color: inherit;
    font: inherit;
}
.zzt::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--warning);
}
.zzt--win::before  { background: var(--success); }
.zzt--loss::before { background: var(--danger); }
.zzt--ref::before  { background: var(--text-dim); }
.zzt::after {
    content: "\203A";
    position: absolute;
    right: 11px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    font-size: 20px;
    line-height: 1;
}
.zzt__gore { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.zzt__gore > div { min-width: 0; }
.zzt__br { font-size: 13px; font-weight: 800; letter-spacing: .3px; }
.zzt__sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.zzt__mreza {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.zzt__mreza > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zzt__mreza span {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.zzt__mreza b { font-size: 13px; font-weight: 800; white-space: nowrap; }
.zzt__mreza > div:last-child b { color: var(--accent); }
.zzt--loss .zzt__mreza > div:last-child b { color: var(--text-muted); }
.zzt__bonus { font-size: 11px; color: #e4e4e4; margin-top: 7px; }
.zzt__bonus b { color: var(--accent); font-weight: 700; }

@media (max-width: 359px) {
    .zzt { padding: 9px 26px 9px 10px; }
    .zzt__mreza { gap: 6px; }
    .zzt__mreza span { font-size: 9px; }
    .zzt__mreza b { font-size: 12px; }
    .zzt__sub { font-size: 10px; }
}

/* =========================================
   DETALJI TIKETA — noge pa sazetak (deli ih igracki modal i agentski panel)
   ========================================= */
.zzdet { display: flex; flex-direction: column; gap: 8px; }

/* Noga: tri reda, nista se ne skracuje osim naziva lige. Traka levo nosi status. */
.zznoga {
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 9px 11px;
}
.zznoga::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--warning);
}
.zznoga--win::before  { background: var(--success); }
.zznoga--loss::before { background: var(--danger); }
.zznoga--ref::before  { background: var(--text-dim); }

.zznoga__gore {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}
.zznoga__liga {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zznoga__liga i, .zznoga__liga img { flex-shrink: 0; font-size: 12px; color: var(--accent); }
.zznoga__liga img { width: 14px; height: 14px; object-fit: contain; }
.zznoga__kad { flex-shrink: 0; white-space: nowrap; }

.zznoga__par { font-size: 13px; font-weight: 700; line-height: 1.3; margin: 5px 0 4px; }
.zznoga__vs { color: var(--text-dim); font-size: 11px; font-weight: 600; padding: 0 2px; }

.zznoga__dole { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.zznoga__igra { font-size: 11px; color: var(--text-muted); min-width: 0; }
.zznoga__igra b { color: var(--text-primary); font-weight: 800; font-size: 12px; }
.zznoga__desno { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.zznoga__kvota { font-size: 15px; font-weight: 800; color: var(--accent); }

/* Sazetak ISPOD poslednjeg para: ulog, kvota, dobitak, bonus. */
.zzsum {
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 11px 12px;
}
.zzsum__gore { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.zzsum__nas { font-size: 14px; font-weight: 800; }
.zzsum__sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.zzsum__mreza {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.zzsum__mreza > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zzsum__mreza span {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.zzsum__mreza b { font-size: 14px; font-weight: 800; white-space: nowrap; }
.zzsum__mreza > div:last-child b { color: var(--accent); }
.zzsum__red {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: #e4e4e4;
}
.zzsum__red b { color: var(--accent); font-weight: 700; white-space: nowrap; }

@media (max-width: 359px) {
    .zzsum__mreza b { font-size: 13px; }
    .zznoga__kvota { font-size: 14px; }
}

.empty-slip-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    gap: 12px;
}
.empty-slip-message img { width: 80px; opacity: .5; }

.validation-msg { font-size: 11px; color: var(--danger); }

/* =========================================
   NOVI PRIKAZI IGRACU (odabrane varijante operatora)
   1A potvrda uplate · 2A na proveri · 3A nova ponuda · 4A ishodi ·
   5A prazna stanja i sitne poruke. Zajednicki recnik: tamno staklo sa
   svetlecom ivicom u boji statusa, pun krug sa ikonicom (kao zetoni),
   mikro-natpis, beli tekst, iznosi tabelarnim ciframa.
   ========================================= */

/* ---------- 1A: POTVRDA UPLATE (betModal) ---------- */
#betModal .modal-content {
    border: 1px solid transparent;
    border-radius: 20px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(27,27,27,.98), rgba(17,17,17,.98)) padding-box,
        linear-gradient(150deg, var(--accent), rgba(255,255,255,.09) 45%, rgba(255,255,255,.04)) border-box;
    box-shadow: 0 22px 48px rgba(0,0,0,.66), 0 2px 26px rgba(200,240,0,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.zzm__head { display: flex; align-items: center; gap: 11px; padding: 16px 16px 12px; }
.zzm__krug {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    background: var(--accent); color: #0c0c0c; font-size: 21px;
    box-shadow: 0 0 22px rgba(200,240,0,.35), inset 0 2px 0 rgba(255,255,255,.42), inset 0 -2px 0 rgba(0,0,0,.2);
}
.zzm__mikro { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.zzm__naslov { display: block; color: #fff; font-size: 17px; font-weight: 800; line-height: 1.15; }
.zzm__pil {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px; font-size: 10px; font-weight: 800;
    letter-spacing: .09em; text-transform: uppercase;
    background: rgba(200,240,0,.12); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(200,240,0,.32);
}
.zzm__pil i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); }
.zzm__x { background: none; border: 0; color: #fff; opacity: .35; font-size: 17px; padding: 2px 4px; cursor: pointer; }
.zzm__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 0 16px; }
.zzm__cell {
    background: rgba(255,255,255,.04); border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.055); padding: 10px 6px; text-align: center;
}
.zzm__cell span { display: block; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.zzm__cell b { color: #fff; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.zzm__hero {
    margin: 10px 16px 0; padding: 12px 14px; border-radius: 14px;
    background: rgba(200,240,0,.07); box-shadow: inset 0 0 0 1px rgba(200,240,0,.28);
}
.zzm__hero-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.zzm__hero-top .l { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.zzm__hero-top .r { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.zzm__hero-val {
    color: var(--accent); font-size: 27px; font-weight: 800; line-height: 1.1;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em; text-shadow: 0 0 24px rgba(200,240,0,.25);
}
.zzm__hero-val small { font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.zzm__note { display: flex; align-items: center; gap: 9px; padding: 12px 16px 0; color: var(--text-muted); font-size: 11.5px; }
.zzm__note i {
    width: 26px; height: 26px; flex: 0 0 auto; border-radius: 9px;
    background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
    display: flex; align-items: center; justify-content: center; font-size: 13px; color: #c8ccd6;
}
.zzm__akcije { display: flex; gap: 10px; padding: 14px 16px 16px; }
.zzm__akcije .otk {
    flex: 1; background: rgba(255,255,255,.03); color: #e6e6e6;
    border: 1px solid rgba(255,255,255,.14); border-radius: 13px; padding: 14px 10px;
    font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.zzm__akcije .go {
    flex: 1.7; background: var(--accent); color: #0c0c0c; font-weight: 800; border: 0;
    border-radius: 13px; padding: 14px 10px; font-size: 13.5px; text-transform: uppercase;
    letter-spacing: .05em; cursor: pointer; font-variant-numeric: tabular-nums;
    box-shadow: 0 6px 22px rgba(200,240,0,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.zzm__akcije .go:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
#betModal #userBalance.text--danger { color: var(--danger, #ff3b56) !important; }

/* ---------- 2A/3A/4A: KARTICE PROVERE TIKETA ---------- */
.zzpp {
    position: relative; border: 1px solid transparent; border-radius: 18px;
    overflow: hidden; margin-bottom: 12px;
    background:
        linear-gradient(180deg, rgba(27,27,27,.98), rgba(17,17,17,.98)) padding-box,
        linear-gradient(150deg, var(--zpc, rgba(255,255,255,.14)), rgba(255,255,255,.08) 45%, rgba(255,255,255,.04)) border-box;
    box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 2px 18px var(--zpg, rgba(0,0,0,0)), inset 0 1px 0 rgba(255,255,255,.05);
}
.zzpp:last-child { margin-bottom: 0; }
.zzpp--wait  { --zpc: #ffb020; --zpg: rgba(255,176,32,.10); }
.zzpp--offer { --zpc: #3ea6ff; --zpg: rgba(62,166,255,.10); }
.zzpp--ok    { --zpc: var(--accent); --zpg: rgba(200,240,0,.10); --zpg2: rgba(200,240,0,.12); }
.zzpp--ko    { --zpc: #ff3b56; --zpg: rgba(255,59,86,.10); --zpg2: rgba(255,59,86,.12); }
.zzpp--exp   { --zpc: #ffb020; --zpg: rgba(255,176,32,.10); --zpg2: rgba(255,176,32,.12); }
.zzpp__num { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.zzpp__pil {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
    background: var(--pt); color: var(--pc); box-shadow: inset 0 0 0 1px var(--pr);
}
.zzpp__pil i { width: 6px; height: 6px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 7px var(--pc); }
.zzpp__pil--amber { --pt: rgba(255,176,32,.13); --pc: #ffb020; --pr: rgba(255,176,32,.34); }
.zzpp__pil--blue  { --pt: rgba(62,166,255,.13); --pc: #3ea6ff; --pr: rgba(62,166,255,.34); }
.zzpp__top { display: flex; align-items: center; gap: 9px; padding: 12px 14px 0; }
.zzpp__top .zzpp__pil { margin-left: auto; }
.zzpp__krug {
    width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--kk, var(--accent)); color: #0c0c0c; font-size: 20px;
    box-shadow: 0 0 20px var(--kg2, rgba(200,240,0,.32)), inset 0 2px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.18);
}
.zzpp__krug--blue  { --kk: #3ea6ff; --kg2: rgba(62,166,255,.32); width: 34px; height: 34px; font-size: 17px; }
.zzpp__krug--red   { --kk: #ff3b56; --kg2: rgba(255,59,86,.32); }
.zzpp__krug--amber { --kk: #ffb020; --kg2: rgba(255,176,32,.32); }

/* 2A: puls — stit, veliko odbrojavanje, dve plocice */
.zzpp__puls { text-align: center; padding: 14px 14px 2px; }
.zzpp__ring {
    width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #ffb020; font-size: 24px;
    box-shadow: inset 0 0 0 2px rgba(255,176,32,.55), 0 0 26px rgba(255,176,32,.22);
}
.zzpp__timer-veliki {
    display: block; color: #ffb020; font-size: 26px; font-weight: 800; line-height: 1.1;
    font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(255,176,32,.3);
}
.zzpp__ceka { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.zzpp__cells { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 14px; }
.zzpp__cell { background: rgba(255,255,255,.04); border-radius: 13px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.055); padding: 9px 11px; }
.zzpp__cell span { display: block; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.zzpp__cell b { color: #fff; font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.zzpp__cell small { font-size: 9px; color: var(--text-muted); }
.zzpp__cell--lime b { color: var(--accent); }
.zzpp__info { padding: 0 14px 12px; margin-top: -6px; color: var(--text-muted); font-size: 11px; text-align: center; }

/* 3A: nova ponuda — diff parova, hero, traka vremena */
.zzpp__razlog { padding: 8px 14px 0; color: var(--text-muted); font-size: 11.5px; font-style: italic; }
.zzpp__legs { margin: 10px 14px 0; display: flex; flex-direction: column; gap: 6px; }
.zzpp__leg {
    display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 12px;
    background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    border-left: 3px solid transparent;
}
.zzpp__leg-l { flex: 1 1 auto; min-width: 0; }
.zzpp__leg-l b { display: block; color: #fff; font-size: 12.5px; font-weight: 700; }
.zzpp__leg-l span { display: block; color: var(--text-muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; margin-top: 1px; }
.zzpp__leg-r { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.zzpp__leg-r s { color: var(--text-muted); font-size: 12px; }
.zzpp__leg-r b { color: #fff; font-size: 13px; font-weight: 800; }
.zzpp__cip { background: var(--accent); color: #0c0c0c; font-weight: 800; font-size: 12px; border-radius: 8px; padding: 3px 9px; font-style: normal; box-shadow: 0 0 14px rgba(200,240,0,.3); }
.zzpp__cip--out { background: rgba(255,59,86,.14); color: #ff3b56; box-shadow: inset 0 0 0 1px rgba(255,59,86,.35); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; }
.zzpp__leg--hit { background: rgba(200,240,0,.06); box-shadow: inset 0 0 0 1px rgba(200,240,0,.22); border-left-color: var(--accent); }
.zzpp__leg--out { border-left-color: #ff3b56; opacity: .75; }
.zzpp__leg--out .zzpp__leg-l b, .zzpp__leg--out .zzpp__leg-l span { text-decoration: line-through; }
.zzpp__staro { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px 0; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted); }
.zzpp__staro s { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.zzpp__hero {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 10px;
    margin: 8px 14px 0; padding: 11px 13px; border-radius: 14px;
    background: rgba(200,240,0,.07); box-shadow: inset 0 0 0 1px rgba(200,240,0,.28);
}
.zzpp__hero .l span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.zzpp__hero .l b { color: var(--accent); font-size: 24px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(200,240,0,.25); }
.zzpp__hero .l small { font-size: 11px; font-weight: 800; }
.zzpp__hero .r { text-align: right; }
.zzpp__hero .r span { display: block; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); }
.zzpp__hero .r b { color: #fff; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.zzpp__vreme { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 5px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.zzpp__vreme b { color: #ffb020; font-size: 14px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.zzpp__bar { height: 3px; margin: 0 14px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.zzpp__bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ffb020, rgba(255,176,32,.45)); box-shadow: 0 0 8px rgba(255,176,32,.4); }
.zzpp__akcije { display: flex; gap: 10px; padding: 13px 14px 14px; }
.zzpp__odbij {
    flex: 1; background: rgba(255,255,255,.03); color: #e6e6e6;
    border: 1px solid rgba(255,255,255,.14); border-radius: 13px; padding: 13px 10px;
    font-size: 13px; font-weight: 700; cursor: pointer;
}
.zzpp__prihvati {
    flex: 1.6; background: var(--accent); color: #0c0c0c; font-weight: 800; border: 0;
    border-radius: 13px; padding: 13px 10px; font-size: 13px; text-transform: uppercase;
    letter-spacing: .05em; cursor: pointer;
    box-shadow: 0 6px 20px rgba(200,240,0,.26), inset 0 1px 0 rgba(255,255,255,.35);
}
.zzpp__odbij:disabled, .zzpp__prihvati:disabled { opacity: .45; cursor: not-allowed; }

/* 4A: ishodi — jedan red po tiketu, obojen dah sa leve ivice */
.zzpp__row { position: relative; display: flex; align-items: center; gap: 11px; padding: 13px 14px; }
.zzpp__row::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 90px; pointer-events: none;
    background: radial-gradient(110px 70px at 0% 50%, var(--zpg2, transparent), transparent 70%);
}
.zzpp__mid { position: relative; flex: 1 1 auto; min-width: 0; }
.zzpp__mid .st { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2px; }
.zzpp__mid b { display: block; color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.zzpp__mid .rz { display: block; color: var(--text-muted); font-size: 11px; font-style: italic; margin-top: 1px; }
.zzpp__mid .zzpp__num { display: block; margin-top: 2px; }
.zzpp__amt { position: relative; flex: 0 0 auto; text-align: right; }
.zzpp__amt span { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.zzpp__amt b { display: block; font-size: 14.5px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.zzpp__amt .sub { font-size: 10px; color: var(--text-muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
.zzpp--ok .zzpp__amt b { color: var(--accent); }
.st--lime { color: var(--accent); } .st--red { color: #ff3b56; } .st--amber { color: #ffb020; }

/* 5A: prazna stanja — kockice kvota kao ilustracija */
.zzempty__tiles { position: relative; height: 74px; margin-bottom: 6px; width: 100%; }
.zzempty__tile {
    position: absolute; top: 10px; width: 64px; padding: 8px 0 7px; border-radius: 12px;
    background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    color: var(--text-muted); text-align: center;
}
.zzempty__tile span { display: block; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.zzempty__tile b { display: block; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 1px; }
.zzempty__tile--l { left: calc(50% - 104px); transform: rotate(-8deg); opacity: .55; }
.zzempty__tile--c {
    left: calc(50% - 32px); top: 0; z-index: 1; color: var(--accent);
    background: rgba(200,240,0,.08);
    box-shadow: inset 0 0 0 1px rgba(200,240,0,.3), 0 6px 18px rgba(0,0,0,.4);
}
.zzempty__tile--r { left: calc(50% + 40px); transform: rotate(8deg); opacity: .55; }
.zzempty__t { color: #fff; font-size: 15px; font-weight: 800; }
.zzempty__s { color: var(--text-muted); font-size: 12px; }
.zzempty__cta {
    display: inline-block; margin-top: 6px; background: var(--accent); color: #0c0c0c;
    font-weight: 800; border: 0; border-radius: 13px; padding: 12px 26px; font-size: 12.5px;
    text-transform: uppercase; letter-spacing: .05em; text-decoration: none; cursor: pointer;
    box-shadow: 0 6px 20px rgba(200,240,0,.26);
}
.zzempty__cta:hover { color: #0c0c0c; }
.zzempty__ring {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 4px;
    display: flex; align-items: center; justify-content: center;
    border: 2px dashed rgba(200,240,0,.35); color: var(--accent); font-size: 28px;
}

/* 5A: sitne poruke — ikonica u kvadraticu ispred teksta (::before, da JS
   koji upisuje cist tekst ostane netaknut; prazna poruka nema nista) */
.total-validation-msg:not(:empty), .total-stake-amount:not(:empty) { margin-top: 8px; font-size: 12px !important; font-weight: 600; line-height: 26px; }
.total-validation-msg:not(:empty)::before, .total-stake-amount:not(:empty)::before, .max-payout-note::before {
    font-family: 'Line Awesome Free'; font-weight: 900; content: '\f057';
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
    width: 26px; height: 26px; border-radius: 9px; margin-right: 8px; font-size: 13px;
}
.total-validation-msg:not(:empty) { color: #ffb3bd !important; }
.total-validation-msg:not(:empty)::before { color: #ff3b56; background: rgba(255,59,86,.12); box-shadow: inset 0 0 0 1px rgba(255,59,86,.3); }
.total-stake-amount:not(:empty) { color: #c8ccd6 !important; }
.total-stake-amount:not(:empty)::before { content: '\f51e'; color: #c8ccd6; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.max-payout-note { font-size: 12px !important; font-weight: 600; line-height: 26px; color: #ffd28a !important; }
.max-payout-note::before { content: '\f071'; color: #ffb020; background: rgba(255,176,32,.12); box-shadow: inset 0 0 0 1px rgba(255,176,32,.3); }

/* =========================================
   SLIDER / BANNER
   ========================================= */
.zgm-banner {
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    border-radius: 0;
    height: 140px;
}
.zgm-banner img { width: 100%; height: 100%; object-fit: cover; }
.zgm-banner__slides { display: flex; }
.zgm-banner__slide { flex-shrink: 0; width: 100%; }

/* =========================================
   DESKTOP LAYOUT (≥992px)
   ========================================= */
@media (min-width: 992px) {
    body {
        padding-bottom: 0;
    }

    .zgm-header { padding: 0 24px; }
    .bottom-nav { display: none; }
    .tiket-bar { display: none; }
    /* Nema trake -> nema ni njenog reda zetona (u tiketu red ostaje). */
    .zzchips--bar { display: none; }

    /* Two-column layout: sidebar + main. Betslip is a fixed panel on the right. */
    .desktop-layout {
        display: grid;
        grid-template-columns: 240px 1fr;
        min-height: calc(100vh - var(--header-h));
        align-items: start;
        margin-right: 320px;
    }

    .desktop-sidebar {
        position: sticky;
        top: var(--header-h);
        height: calc(100vh - var(--header-h));
        overflow-y: auto;
        background: var(--bg-nav);
        border-right: 1px solid var(--border);
        scrollbar-width: thin;
        scrollbar-color: var(--border) transparent;
    }

    /* Betslip drawer: always-visible fixed panel on the right */
    .betslip-drawer {
        position: fixed;
        right: 0;
        top: var(--header-h);
        width: 320px;
        height: calc(100vh - var(--header-h));
        transform: none !important;
        border-left: 1px solid var(--border);
        z-index: 250;
    }

    .betslip-drawer__close { display: none; }

    .sport-icons {
        position: relative;
        top: auto;
        flex-direction: column;
        padding: 8px;
    }
    .sport-icon-btn { flex: 0 0 auto; min-width: auto; width: 100%; flex-direction: row; justify-content: flex-start; }

    .zgm-tabs { position: relative; top: auto; }
    .market-filter { position: relative; }

    .zgm-sidebar { display: none; }

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

/* =========================================
   FORMS / AUTH
   ========================================= */
.auth-page {
    min-height: calc(100vh - var(--header-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: var(--bg-primary);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
}
.auth-card__logo {
    text-align: center;
    margin-bottom: 24px;
}
.auth-card__logo img { height: 40px; }
.auth-card__title {
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 6px;
}
.auth-card__subtitle {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 24px;
}
.auth-card__footer {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-muted);
}
.auth-card__footer a { color: var(--accent); font-weight: 600; }

.form--label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 6px;
    display: block;
}
.form--control {
    width: 100%;
    background: var(--bg-card-2);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
}
.form--control:focus { border-color: var(--accent); }
.form--control::placeholder { color: var(--text-dim); }
.form-group { margin-bottom: 16px; }

.input-group { display: flex; }
.input-group .form--control { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .input-group-text {
    background: var(--bg-card-2);
    border: 1px solid var(--border-light);
    border-left: none;
    color: var(--text-muted);
    padding: 0 12px;
    display: flex;
    align-items: center;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    cursor: pointer;
}

.btn--base {
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: var(--radius-md);
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: background .2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}
.btn--base:hover { background: var(--accent-dark); color: var(--accent-text); }
.btn--xl { padding: 14px 24px; font-size: 15px; }
.btn--sm { padding: 7px 14px; font-size: 12px; }
.btn--dark {
    background: var(--bg-card-2);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}
.btn--dark:hover { background: var(--border); color: var(--text-primary); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--success { background: var(--success); color: #fff; }

.btn--signup {
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: background .2s;
}
.btn--signup:hover { background: var(--accent-dark); color: var(--accent-text); }

/* =========================================
   DASHBOARD / USER
   ========================================= */
.user-dashboard {
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.dashboard-wrapper {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.dashboard-sidebar {
    width: 240px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--header-h) + 16px);
}

.dashboard-right { flex: 1; min-width: 0; }

.widget-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 12px;
}
.widget-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.widget-card__id {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}
.widget-card__reload {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
}
.widget-card__reload:hover { color: var(--accent); }
.widget-card__balance {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    margin: 0 0 4px;
}
.widget-card__balance-text {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.dashboard-menu {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.dashboard-menu__list { }
.dashboard-menu__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    transition: all .2s;
    text-decoration: none;
}
.dashboard-menu__link:last-child { border-bottom: none; }
.dashboard-menu__link:hover,
.dashboard-menu__link.active {
    color: var(--accent);
    background: rgba(200,240,0,.05);
}
.dashboard-menu__icon { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }

/* card */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.card-body { padding: 16px; }

/* table */
.table {
    width: 100%;
    color: var(--text-primary);
    font-size: 13px;
    border-collapse: collapse;
}
.table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    font-weight: 600;
    text-align: left;
}
.table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table-responsive { overflow-x: auto; border-radius: var(--radius-md); }

/* badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.badge--success { background: rgba(39,174,96,.15); color: var(--success); }
.badge--danger  { background: rgba(231,76,60,.15);  color: var(--danger); }
.badge--warning { background: rgba(243,156,18,.15); color: var(--warning); }
.badge--info    { background: rgba(52,152,219,.15);  color: var(--info); }
.badge--dark    { background: rgba(255,255,255,.08); color: var(--text-muted); }

/* alert */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    margin-bottom: 16px;
}
.alert-danger { background: rgba(231,76,60,.1); border: 1px solid rgba(231,76,60,.3); color: var(--danger); }
.alert-warning { background: rgba(243,156,18,.1); border: 1px solid rgba(243,156,18,.3); color: var(--warning); }
.alert-info    { background: rgba(52,152,219,.1);  border: 1px solid rgba(52,152,219,.3);  color: var(--info); }
.alert-success { background: rgba(39,174,96,.1); border: 1px solid rgba(39,174,96,.3); color: var(--success); }

/* list group */
.list-group { display: flex; flex-direction: column; }
.list-group-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.list-group-item:last-child { border-bottom: none; }

/* =========================================
   FOOTER
   ========================================= */
.zgm-footer {
    background: var(--bg-nav);
    border-top: 1px solid var(--border);
    padding: 24px 16px;
}
.zgm-footer__logo-text {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
    display: inline-block;
}
.zgm-footer__logo-text span { color: var(--accent); }
.zgm-footer__desc {
    font-size: 12px;
    color: var(--text-muted);
    max-width: 320px;
    line-height: 1.6;
    margin-bottom: 16px;
}
.zgm-footer__links { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 16px; }
.zgm-footer__link { font-size: 12px; color: var(--text-muted); }
.zgm-footer__link:hover { color: var(--accent); }
.zgm-footer__bottom {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    font-size: 11px;
    color: var(--text-dim);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.zgm-footer__social { display: flex; gap: 12px; }
.zgm-footer__social a { color: var(--text-muted); font-size: 18px; }
.zgm-footer__social a:hover { color: var(--accent); }

/* =========================================
   MODAL
   ========================================= */
.custom--modal .modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
}
.custom--modal .modal-header {
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
}
.custom--modal .modal-title { font-size: 16px; font-weight: 700; }
.custom--modal .modal-body { padding: 20px; }
.custom--modal .close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    margin-left: auto;
}
.custom--modal .list-group-item {
    background: transparent;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

/* =========================================
   COOKIES
   ========================================= */
.cookies-card {
    position: fixed;
    bottom: calc(var(--bottom-nav-h) + var(--ticket-bar-h) + 10px);
    left: 12px; right: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 16px;
    z-index: 400;
    max-width: 400px;
    font-size: 12px;
}
.cookies-card.hide { display: none; }
.cookies-card__icon {
    font-size: 24px;
    margin-bottom: 8px;
    color: var(--accent);
    text-align: center;
}
.cookies-card__content { color: var(--text-muted); margin-bottom: 12px; text-align: center; }
.cookies-card__content a { color: var(--accent); }

/* =========================================
   BACK TO TOP
   ========================================= */
.back-to-top {
    position: fixed;
    bottom: calc(var(--bottom-nav-h) + var(--ticket-bar-h) + 70px);
    right: 16px;
    z-index: 500;
    display: none;
}
.back-to-top.show { display: block; }
.back-top {
    width: 40px; height: 40px;
    background: var(--accent);
    color: var(--accent-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(200,240,0,.3);
}

/* =========================================
   UTILS
   ========================================= */
.text--base    { color: var(--accent) !important; }
.text--success { color: var(--success) !important; }
.text--danger  { color: var(--danger) !important; }
.text--warning { color: var(--warning) !important; }
.text--muted   { color: var(--text-muted) !important; }
.text--primary { color: var(--text-primary) !important; }

.bg--base    { background: var(--accent) !important; color: var(--accent-text) !important; }
.bg--card    { background: var(--bg-card) !important; }
.bg--card-2  { background: var(--bg-card-2) !important; }

.d-none { display: none !important; }
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.m-0  { margin: 0 !important; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.w-100 { width: 100%; }
.text-center { text-align: center; }
.fw-bold { font-weight: 700 !important; }

@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-block { display: block !important; }
}

/* =========================================
   MAINTENANCE / ERROR pages
   ========================================= */
.maintenance-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 24px;
}
.maintenance-page h2 { font-size: 28px; font-weight: 800; color: var(--accent); }
.maintenance-page p  { color: var(--text-muted); font-size: 14px; }

/* =========================================
   BLOG / NEWS
   ========================================= */
.blog-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .2s;
}
.blog-card:hover { border-color: var(--accent); }
.blog-card__img { width: 100%; height: 160px; object-fit: cover; }
.blog-card__body { padding: 14px; }
.blog-card__meta { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.blog-card__title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.blog-card__excerpt { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

.page-banner {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 24px 16px;
}
.page-banner__title { font-size: 22px; font-weight: 800; margin: 0; }
.page-banner__breadcrumb {
    display: flex;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}
.page-banner__breadcrumb a { color: var(--text-muted); }
.page-banner__breadcrumb a:hover { color: var(--accent); }

/* =========================================
   CONTACT
   ========================================= */
.contact-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
}
.contact-info-card__icon { font-size: 28px; color: var(--accent); margin-bottom: 10px; }
.contact-info-card__title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.contact-info-card__detail { font-size: 13px; color: var(--text-muted); }

/* =========================================
   RESPONSIVE MOBILE
   ========================================= */
@media (max-width: 991px) {
    .dashboard-sidebar { display: none; }
    .dashboard-wrapper { display: block; }
    .user-dashboard { padding: 12px; }

    .desktop-layout { display: block; margin-right: 0; }
    .desktop-sidebar { display: none; }

    /* Mobile sport category row */
    .mobile-sport-row .sport-icons {
        position: sticky;
        top: calc(var(--header-h) + var(--tab-bar-h) - 1px);
        z-index: 98;
    }
}

/* Mobile sport row hidden on desktop (Bootstrap d-lg-none handles it,
   but extra safeguard) */
@media (min-width: 992px) {
    .mobile-sport-row { display: none !important; }
}

/* =========================================
   GLOW EFFECTS
   ========================================= */

/* 1. Odds dugme — sjaj pri selekciji */
@keyframes oddPulse {
    0% { box-shadow: 0 0 8px 3px rgba(200,240,0,.9); }
    100% { box-shadow: 0 0 20px 6px rgba(200,240,0,.0); }
}
.oddBtn.just-selected {
    animation: oddPulse .5s ease-out forwards;
}

/* Odds flash — kad se kvota promeni preko live polling-a */
@keyframes oddFlash {
    0%   { background: rgba(200,240,0,.9); color: var(--accent-text); }
    100% { background: var(--bg-card-2); color: var(--text-primary); }
}
.oddBtn--flash {
    animation: oddFlash .8s ease-out;
}

/* 2. Live meč */

/* 3. Aktivna sport ikona — zeleni sjaj */
.sport-icon-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(200,240,0,.15);
    box-shadow: 0 0 18px 4px rgba(200,240,0,.5);
}

/* 4. Tiket bar — zeleni sjaj kad ima selekcija */
.tiket-bar.has-bets {
    /* Iznad donje navigacije (z-index 160) da donji sjaj ne bude prekriven */
    z-index: 170;
    box-shadow:
        0 -4px 20px rgba(200,240,0,.5), 0 -1px 0 rgba(200,240,0,.8),
        0  4px 20px rgba(200,240,0,.5), 0  1px 0 rgba(200,240,0,.8);
    border-top: 1px solid rgba(200,240,0,.7);
    border-bottom: 1px solid rgba(200,240,0,.7);
}

/* =========================================
   SCROLLBAR
   ========================================= */
@media (max-width: 991px) {
    html::-webkit-scrollbar { display: none; }
    html { scrollbar-width: none; }
}
@media (min-width: 992px) {
    ::-webkit-scrollbar { width: 4px; height: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
}

/* =========================================
   BRZI TIKET — ekran iza munje na tiket traci
   ========================================= */
.zzqt {
    position: fixed;
    inset: 0;
    z-index: 1500;               /* iznad tiket trake (150) i drawer-a */
    background: rgba(0, 0, 0, .6);
    display: none;
}
.zzqt.open { display: block; }
.zzqt__panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border-light);
    border-radius: 14px 14px 0 0;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    max-height: 88vh;
    overflow-y: auto;
}
.zzqt__head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 10px; margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.zzqt__title { font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--accent); }
.zzqt__x {
    background: rgba(255, 255, 255, .10);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 22px; font-weight: 700; line-height: 1;
    width: 42px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    -webkit-appearance: none; appearance: none;
}
.zzqt__sec { padding: 12px 0; }
.zzqt__sec + .zzqt__sec { border-top: 1px solid var(--border); }
.zzqt__sec-title { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 8px; }
.zzqt__sum { font-size: 13px; color: var(--text-primary); margin-bottom: 10px; }
.zzqt__btn {
    background: var(--accent); color: var(--accent-text);
    border: none; border-radius: var(--radius-md);
    padding: 12px 18px; font-size: 14px; font-weight: 800;
    cursor: pointer; width: 100%;
}
.zzqt__btn:disabled { opacity: .45; cursor: not-allowed; }
.zzqt__btn--alt { width: auto; flex: 0 0 auto; padding: 12px 16px; }
.zzqt__row { display: flex; gap: 8px; align-items: center; }
.zzqt__input {
    flex: 1 1 auto; min-width: 0;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    /* 16px: ispod toga iPhone zumira stranu na fokus */
    font-size: 20px; font-weight: 800; letter-spacing: .35em;
    text-align: center; padding: 10px 6px;
    outline: none; -webkit-appearance: none; appearance: none;
}
.zzqt__code {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px;
}
.zzqt__code-val {
    flex: 1 1 auto; text-align: center;
    background: var(--bg-card-2);
    border: 1px dashed var(--accent);
    border-radius: 8px;
    color: var(--accent);
    font-size: 28px; font-weight: 800; letter-spacing: .28em;
    padding: 10px 4px;
}
.zzqt__copy {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, .10);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px; font-weight: 700;
    padding: 12px 12px; cursor: pointer;
    -webkit-appearance: none; appearance: none;
}
.zzqt__note { font-size: 12px; color: var(--text-muted); margin-top: 8px; min-height: 16px; }
/* Munja (brzi tiket) — krupnija i u akcentnoj boji, sire dugme za prst. */
.tiket-bar__icon-btn #zzqtIcon,
#openQuickTicket i { font-size: 26px; color: var(--accent); }
#openQuickTicket { width: 34px; justify-content: center; }
/* Kod je oznaciv prstom (treci nivo kopiranja) */
.zzqt__code-val { user-select: all; -webkit-user-select: all; }