/* =========================================================
   BZCS / GAMETRACKER.BA REFERENCE THEME
   ========================================================= */

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    color: #eee;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background:
        #101112
        url("../../gtba/images/bg-1.png")
        center top / cover fixed no-repeat !important;
}

a {
    text-decoration: none;
}

/* =========================================================
   GLOBAL WIDTH
   ========================================================= */

.gtba-header .container,
.gtba-navigation,
.gtba-nav-divider,
#gtba-news-ticker,
#main-content > .container-fluid,
footer,
.bzcs-footer {
    width: 1170px !important;
    max-width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

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

.gtba-header {
    min-height: 190px;
    padding: 55px 0 25px;
}

.gtba-header .container {
    padding: 0 !important;
}

.gtba-logo img {
    display: block;
    width: 190px;
    height: auto;
}

.gtba-account {
    padding-top: 18px;
    color: #777;
    text-align: right !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-weight: bold;
}

.gtba-account a {
    color: #eee;
}

.gtba-account a:hover {
    color: #6672ff;
}

.gtba-account-separator,
.gtba-account-or {
    margin: 0 10px;
    color: #666;
}

/* =========================================================
   NAV
   ========================================================= */

.gtba-nav-divider {
    height: 1px;
    padding: 0 !important;
    background: #090a0b;
    border-top: 1px solid #303236;
}

.gtba-navigation {
    padding: 0 !important;
}

.gtba-navigation .navbar {
    min-height: 70px;
    padding: 0;
    border: 1px solid #050505;
    border-radius: 0;
    background:
        linear-gradient(#24272a, #17191b);
    box-shadow:
        inset 0 1px rgba(255,255,255,.06),
        0 1px 0 #303236;
}

.gtba-navigation .navbar-nav {
    height: 68px;
    margin: 0;
}

.gtba-navigation .nav-item {
    height: 68px;
    border-right: 1px solid #08090a;
    box-shadow: 1px 0 rgba(255,255,255,.04);
}

.gtba-navigation .nav-link {
    height: 68px;
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 27px !important;
    color: #fff !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 1px #000;
}

.gtba-navigation .nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.045);
}

/* =========================================================
   TICKER
   ========================================================= */

#gtba-news-ticker {
    height: 42px;
    min-height: 42px;
    display: flex;
    margin-top: 18px !important;
    padding: 0 !important;
    overflow: hidden;
    background:
        #17191b
        url("../../gtba/images/common/ticker_bg.jpg")
        repeat-x;
    border: 1px solid #050505;
    box-shadow: inset 0 1px rgba(255,255,255,.05);
}

.gtba-ticker-title {
    flex: 0 0 auto;
    height: 40px;
    min-width: 225px;
    display: flex;
    align-items: center;
    background: #5262ff;
}

.gtba-ticker-title img {
    width: 65px;
    height: 40px;
    object-fit: contain;
    background: #252a39;
}

.gtba-ticker-title span {
    padding: 0 14px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.gtba-ticker-window {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.gtba-ticker-track {
    height: 40px;
    display: flex;
    align-items: center;
    min-width: max-content;
}

.gtba-ticker-server {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 17px;
    color: #ddd;
    white-space: nowrap;
    border-right: 1px solid #090909;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-weight: bold;
}

.gtba-ticker-server img {
    width: 15px;
    height: 15px;
}

.gtba-ticker-server strong {
    color: #eee;
}

.gtba-ticker-server .gtba-ticker-ip {
    color: #6974ff;
}

.gtba-ticker-server small {
    color: #aaa;
}

/* =========================================================
   MAIN
   ========================================================= */

#main-content {
    width: 100%;
}

#main-content > .container-fluid {
    padding: 18px 0 0 !important;
    background: transparent !important;
}

.gtba-reference-home {
    width: 100%;
}

.gtba-reference-panel {
    padding: 19px;
    margin-bottom: 12px;
    background:
        rgba(31,34,37,.96)
        url("../../gtba/images/common/dark_wall.jpg")
        repeat;
    border: 1px solid #080808;
    box-shadow:
        inset 0 1px rgba(255,255,255,.06),
        0 1px 2px #000;
}

/* =========================================================
   HERO
   ========================================================= */

.gtba-reference-hero {
    padding-bottom: 20px;
}

.gtba-reference-hero-top {
    position: relative;
    height: 295px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 30% 50%,
            rgba(32,40,44,.45),
            rgba(17,19,21,.85) 70%
        );
}

.gtba-reference-soldiers {
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 52%;
    height: 310px;
}

.gtba-reference-soldiers img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left bottom;
}

.gtba-reference-promo {
    position: absolute;
    z-index: 2;
    top: 66px;
    right: 30px;
    width: 52%;
    text-align: center;
}

.gtba-reference-promo h1 {
    margin: 0 0 10px;
    color: #d9d9d9;
    font-size: 30px;
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: 1px;
    text-shadow: 0 2px 2px #000;
}

.gtba-reference-promo strong {
    display: block;
    margin: 0 0 18px;
    color: #fff;
    font-size: 12px;
}

.gtba-reference-promo a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 7px;
    padding: 0 23px;
    color: #fff;
    background: linear-gradient(#6173ff, #514be9);
    border: 1px solid #171b39;
    box-shadow:
        inset 0 1px rgba(255,255,255,.25),
        0 1px 2px #000;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

/* info boxes */

.gtba-reference-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.gtba-reference-info article {
    min-height: 195px;
    padding: 20px 22px;
    background: #24272a;
    border: 1px solid #070707;
    box-shadow:
        inset 0 1px rgba(255,255,255,.08),
        0 1px 2px #000;
}

.gtba-reference-info h2 {
    margin: 0 0 13px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}

.gtba-reference-info ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.gtba-reference-info li {
    position: relative;
    margin: 0 0 6px;
    padding-left: 15px;
    color: #ddd;
    line-height: 1.3;
}

.gtba-reference-info li::before {
    content: "○";
    position: absolute;
    left: 0;
    color: #665dff;
    font-weight: bold;
}

/* =========================================================
   TITLES
   ========================================================= */

.gtba-reference-title {
    height: 44px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    color: #fff;
    background:
        #151719
        url("../../gtba/images/common/stripe_dark.jpg")
        repeat;
    border: 1px solid #050505;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 1px #000;
}

.gtba-reference-title i {
    color: #5c5cff;
}

/* =========================================================
   VIP + STATS
   ========================================================= */

.gtba-reference-middle {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(290px, 1fr);
    gap: 20px;
}

.gtba-reference-vip-body {
    position: relative;
    height: 300px;
    overflow: hidden;
    background: #111;
    border: 1px solid #050505;
    border-top: 0;
}

.gtba-reference-vip-body > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .33;
}

.gtba-reference-vip-server {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 35px;
    background: linear-gradient(
        90deg,
        rgba(5,6,7,.92),
        rgba(5,6,7,.35)
    );
}

.gtba-reference-vip-server > span {
    color: #e6bf24;
    font-size: 10px;
    font-weight: bold;
}

.gtba-reference-vip-server h2 {
    max-width: 100%;
    margin: 10px 0;
    overflow: hidden;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 21px;
}

.gtba-reference-vip-server p {
    color: #bbb;
}

.gtba-reference-vip-server a {
    margin-top: 10px;
    padding: 11px 18px;
    color: #fff;
    background: #5b5cff;
    font-size: 11px;
    font-weight: bold;
}

/* stats */

.gtba-reference-stats {
    min-width: 0;
}

.gtba-reference-stat {
    position: relative;
    min-height: 47px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 15px 0;
    padding: 0 15px;
    color: #fff;
    background: #202224;
    border-radius: 2px;
}

.gtba-reference-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 2px 0 0 2px;
}

.gtba-reference-stat.blue::before {
    background: #2878ff;
}

.gtba-reference-stat.green::before {
    background: #28ce73;
}

.gtba-reference-stat.red::before {
    background: #ef5147;
}

.gtba-reference-stat.yellow::before {
    background: #f4aa12;
}

.gtba-reference-stat strong {
    font-size: 14px;
}

/* =========================================================
   SERVER COLUMNS
   ========================================================= */

.gtba-reference-server-panel {
    padding-bottom: 25px;
}

.gtba-reference-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 20px;
}

.gtba-reference-list {
    border: 1px solid #050505;
    border-top: 0;
}

.gtba-ref-server {
    height: 51px;
    display: grid;
    grid-template-columns: 24px 28px minmax(0,1fr) auto;
    align-items: center;
    padding: 0 15px;
    color: #eee;
    background: #222528;
    border-bottom: 1px solid #070707;
    box-shadow: inset 0 1px rgba(255,255,255,.04);
}

.gtba-ref-server:nth-child(even) {
    background: #1d1f21;
}

.gtba-ref-server:last-child {
    border-bottom: 0;
}

.gtba-ref-server:hover {
    background: #292c2f;
}

.gtba-ref-game img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.gtba-ref-country {
    font-size: 14px;
}

.gtba-ref-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: bold;
}

.gtba-ref-players {
    padding-left: 8px;
    color: #d6ba28;
    font-size: 10px;
    font-weight: bold;
}

.gtba-ref-empty {
    padding: 25px;
    color: #777;
    text-align: center;
}

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

footer,
.bzcs-footer {
    min-height: 42px;
    margin-top: -12px !important;
    margin-bottom: 80px !important;
    padding: 13px 20px !important;
    color: #555 !important;
    background: #141617 !important;
    border: 1px solid #050505 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
    font-size: 10px !important;
}

footer a,
.bzcs-footer a {
    color: #5c5cff !important;
}

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

@media (max-width: 991px) {

    .gtba-header {
        min-height: auto;
        padding: 25px 0;
    }

    .gtba-navigation .navbar,
    .gtba-navigation .navbar-nav {
        height: auto;
    }

    .gtba-navigation .nav-item {
        height: auto;
    }

    .gtba-navigation .nav-link {
        height: 46px;
        min-height: 46px;
    }

    .gtba-reference-hero-top {
        height: 330px;
    }

    .gtba-reference-soldiers {
        width: 65%;
        opacity: .5;
    }

    .gtba-reference-promo {
        width: 70%;
        right: 15px;
    }

    .gtba-reference-middle,
    .gtba-reference-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .gtba-reference-panel {
        padding: 10px;
    }

    .gtba-reference-info {
        grid-template-columns: 1fr;
    }

    .gtba-reference-promo {
        width: calc(100% - 30px);
    }

    .gtba-reference-promo h1 {
        font-size: 22px;
    }

    .gtba-ticker-title {
        min-width: 65px;
    }

    .gtba-ticker-title span {
        display: none;
    }
}


/* =========================================================
   GTBA FINAL REFERENCE CALIBRATION
   ========================================================= */

/* Original reference geometry */
.gtba-header .container,
.gtba-navigation,
.gtba-nav-divider,
#gtba-news-ticker,
#main-content > .container-fluid,
footer,
.bzcs-footer {
    width: 1170px !important;
}

/* HEADER */
.gtba-header {
    min-height: 195px;
    padding-top: 55px;
    padding-bottom: 25px;
}

.gtba-logo img {
    width: 165px;
}

.gtba-account {
    padding-top: 12px;
}

/* NAVBAR */
.gtba-navigation .navbar {
    min-height: 68px;
}

.gtba-navigation .navbar-nav,
.gtba-navigation .nav-item {
    height: 66px;
}

.gtba-navigation .nav-link {
    height: 66px;
    min-height: 66px;
    padding-left: 29px !important;
    padding-right: 29px !important;
}

/* TICKER */
#gtba-news-ticker {
    margin-top: 18px !important;
    height: 42px;
}

/* MAIN GAP */
#main-content > .container-fluid {
    padding-top: 18px !important;
}

/* Main textured boxes */
.gtba-reference-panel {
    padding: 19px;
    margin-bottom: 12px;
}

/* =========================================================
   HERO
   ========================================================= */

.gtba-reference-hero-top {
    height: 295px;
    background:
        radial-gradient(
            ellipse at 35% 45%,
            rgba(50,55,59,.26) 0%,
            rgba(22,24,26,.55) 48%,
            rgba(11,12,13,.86) 100%
        );
}

/* Characters closer to original */
.gtba-reference-soldiers {
    left: 0;
    bottom: -9px;
    width: 48%;
    height: 300px;
}

.gtba-reference-soldiers img {
    object-position: left bottom;
}

/* Right promo block */
.gtba-reference-promo {
    top: 62px;
    right: 25px;
    width: 52%;
}

.gtba-reference-promo h1 {
    margin-bottom: 12px;
    color: #d7d7d7;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 29px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: 1px;

    /* remove excessively black text appearance */
    text-shadow:
        0 1px 0 #111,
        0 2px 2px rgba(0,0,0,.75);
}

.gtba-reference-promo strong {
    margin-bottom: 18px;
    color: #fff;
}

.gtba-reference-promo a {
    min-height: 43px;
    padding-left: 22px;
    padding-right: 22px;
}

/* =========================================================
   INFO BOXES
   ========================================================= */

.gtba-reference-info {
    gap: 20px;
}

.gtba-reference-info article {
    min-height: 195px;
    padding: 20px 22px;
    background: #24272a;
}

.gtba-reference-info h2 {
    margin-bottom: 14px;
    font-size: 18px;
}

.gtba-reference-info li {
    margin-bottom: 5px;
    line-height: 1.35;
}

/* =========================================================
   VIP / STATISTICS
   ========================================================= */

.gtba-reference-middle {
    grid-template-columns: minmax(0, 2.08fr) minmax(300px, 1fr);
    gap: 20px;
}

/* Reference has a clearly visible promo image */
.gtba-reference-vip-body {
    height: 300px;
    background: #0d0e0f;
}

.gtba-reference-vip-body > img {
    opacity: .48;
    filter: brightness(.72) contrast(1.04);
}

.gtba-reference-vip-server {
    padding: 35px;
    background:
        linear-gradient(
            90deg,
            rgba(5,6,7,.82) 0%,
            rgba(5,6,7,.56) 42%,
            rgba(5,6,7,.22) 100%
        );
}

.gtba-reference-vip-server h2 {
    font-size: 21px;
}

.gtba-reference-vip-server a {
    padding: 11px 18px;
}

/* STATISTICS */

.gtba-reference-stats {
    padding-bottom: 12px;
}

.gtba-reference-stat {
    min-height: 43px;
    margin: 12px 15px 0;
    padding-left: 17px;
    padding-right: 15px;

    background: #202224;

    box-shadow:
        inset 0 1px rgba(255,255,255,.025),
        0 1px 1px rgba(0,0,0,.35);
}

.gtba-reference-stat span {
    color: #eee;
}

.gtba-reference-stat strong {
    color: #fff;
    font-size: 14px;
}

/* =========================================================
   LOWER SERVER LISTS
   ========================================================= */

.gtba-reference-server-panel {
    padding-top: 20px;
    padding-bottom: 25px;
}

.gtba-reference-columns {
    gap: 20px;
}

.gtba-reference-title {
    height: 44px;
}

.gtba-ref-server {
    height: 50px;
    padding-left: 15px;
    padding-right: 15px;
}

/*
 * Do NOT fake additional servers.
 * Panel height grows naturally when real servers are added.
 */
.gtba-reference-list {
    min-height: 50px;
}

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

footer,
.bzcs-footer {
    min-height: 40px !important;
    margin-top: -12px !important;
    margin-bottom: 80px !important;
    padding: 11px 20px !important;

    color: #555 !important;
    background: #121415 !important;

    border:
        1px solid #050505 !important;

    font-size: 10px !important;
    line-height: 1.35 !important;
}

footer a,
.bzcs-footer a {
    color: #5e5cff !important;
}

footer a:hover,
.bzcs-footer a:hover {
    color: #8585ff !important;
}

/* =========================================================
   LARGE DESKTOP - MATCH REFERENCE
   ========================================================= */

@media (min-width: 1200px) {

    .gtba-reference-home {
        width: 100%;
    }

    .gtba-reference-hero {
        min-height: 530px;
    }

    .gtba-reference-middle {
        min-height: 385px;
    }
}

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

@media (max-width: 1199px) {

    .gtba-header .container,
    .gtba-navigation,
    .gtba-nav-divider,
    #gtba-news-ticker,
    #main-content > .container-fluid,
    footer,
    .bzcs-footer {
        width: calc(100% - 30px) !important;
    }
}

/* =========================================================
   FINAL VISUAL MATCH
   ========================================================= */

/* HERO TITLE — original GT.ba is light grey, not black */
.gtba-reference-promo h1 {
    color: #d6d6d6 !important;
    -webkit-text-fill-color: #d6d6d6 !important;
    background: none !important;
    font-size: 29px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 1px !important;
    text-shadow:
        0 2px 0 #111,
        0 3px 3px rgba(0,0,0,.8) !important;
}

/* Hero characters — original positioning */
.gtba-reference-soldiers {
    left: 0 !important;
    bottom: -5px !important;
    width: 48% !important;
    height: 295px !important;
}

.gtba-reference-promo {
    top: 58px !important;
}

/* Small hero text */
.gtba-reference-promo strong {
    color: #fff !important;
    font-size: 12px !important;
}

/* Purple GT.ba style button */
.gtba-reference-promo a,
.gtba-reference-vip-server a {
    color: #fff !important;
    background: linear-gradient(
        to bottom,
        #6676ff 0%,
        #5149ee 100%
    ) !important;
    border: 1px solid #16193b !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.25),
        0 1px 2px #000 !important;
}

/* Remove red text inherited from old BZCS theme */
.gtba-reference-promo a,
.gtba-reference-vip-server a,
.gtba-ref-server {
    text-decoration: none !important;
}

.gtba-reference-promo a {
    font-size: 11px !important;
}

/* =========================================================
   VIP — expose original promo artwork
   ========================================================= */

.gtba-reference-vip-body {
    background: #111 !important;
}

.gtba-reference-vip-body > img {
    display: block !important;
    opacity: .58 !important;
    filter: brightness(.72) contrast(.92) !important;
}

.gtba-reference-vip-server {
    background:
        linear-gradient(
            90deg,
            rgba(5,6,7,.78) 0%,
            rgba(5,6,7,.50) 43%,
            rgba(5,6,7,.16) 100%
        ) !important;
}

.gtba-reference-vip-server h2 {
    color: #fff !important;
}

.gtba-reference-vip-server p {
    color: #ddd !important;
}

/* =========================================================
   STATISTICS — original separate dark rows
   ========================================================= */

.gtba-reference-stat {
    margin: 10px 15px 0 !important;
    min-height: 43px !important;
    padding: 0 15px 0 18px !important;

    background: #202224 !important;
    border: 0 !important;
    border-radius: 2px !important;

    box-shadow:
        inset 0 1px rgba(255,255,255,.025),
        0 1px 1px rgba(0,0,0,.35) !important;
}

.gtba-reference-stat span,
.gtba-reference-stat strong {
    color: #fff !important;
}

/* =========================================================
   SERVER LISTS
   ========================================================= */

.gtba-ref-server {
    color: #eee !important;
}

.gtba-ref-name {
    color: #eee !important;
}

.gtba-ref-server:hover .gtba-ref-name {
    color: #fff !important;
}

.gtba-ref-players {
    color: #d9c51b !important;
}

/* Country code can keep BZCS accent */
.gtba-ref-country {
    color: #5d67ff !important;
}

/* =========================================================
   PANELS / ORIGINAL GTBA DEPTH
   ========================================================= */

.gtba-reference-panel {
    background-color: #202326 !important;
}

.gtba-reference-info article {
    background: #24272a !important;
    border-color: #050505 !important;
}

.gtba-reference-title {
    color: #fff !important;
}

/* Footer like original: very thin and unobtrusive */
footer,
.bzcs-footer {
    min-height: 40px !important;
    padding: 10px 20px !important;
    font-size: 10px !important;
    background: #121415 !important;
}

/* Do not artificially stretch lists when there is only 1 real server */
.gtba-reference-list {
    height: auto !important;
}


/* =========================================================
   BZCS MAIN BACKGROUND
   ========================================================= */

html {
    min-height: 100%;
    background: #0d1014 !important;
}

body {
    min-height: 100vh !important;

    background-color: #0d1014 !important;
    background-image: url("../images/bzcs-background.png") !important;

    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* Do not let old GT.ba background cover BZCS background */
body::before,
body::after {
    background-image: none !important;
}

/* Keep surrounding area transparent */
#main-content {
    background: transparent !important;
}

#main-content > .container-fluid {
    background: transparent !important;
}


/* =========================================================
   GT.BA NAVIGATION HOVER / ACTIVE
   ========================================================= */

.gtba-nav a,
.gtba-navbar a,
.gtba-menu a,
.navbar-nav > li > a {
    transition: none !important;
}

/* Original GT.ba blue/purple hover */
.gtba-nav a:hover,
.gtba-navbar a:hover,
.gtba-menu a:hover,
.navbar-nav > li > a:hover,
.navbar-nav > li:hover > a {
    color: #ffffff !important;
    background: linear-gradient(
        180deg,
        #4ca4ff 0%,
        #596cff 48%,
        #674dff 100%
    ) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.65) !important;
}

/* Current page gets same treatment */
.gtba-nav .active > a,
.gtba-navbar .active > a,
.gtba-menu .active > a,
.navbar-nav > .active > a {
    color: #ffffff !important;
    background: linear-gradient(
        180deg,
        #4ca4ff 0%,
        #596cff 48%,
        #674dff 100%
    ) !important;
}


/* =========================================================
   GAMETRACKER.BA NAV BUTTONS - SHAPE + HOVER
   ========================================================= */

.gtba-navbar,
.gtba-nav,
.gtba-menu,
.navbar-nav {
    align-items: stretch !important;
}

/* Svaka stavka = pravi GT.ba tab */
.gtba-navbar li,
.gtba-nav li,
.gtba-menu li,
.navbar-nav > li {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Sam button */
.gtba-navbar li > a,
.gtba-nav li > a,
.gtba-menu li > a,
.navbar-nav > li > a {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 58px !important;
    min-width: 120px !important;

    margin: 0 !important;
    padding: 0 25px !important;

    border-radius: 0 !important;

    border-left: 1px solid #090a0b !important;
    border-right: 1px solid #292c2f !important;
    border-top: 1px solid #303336 !important;
    border-bottom: 1px solid #08090a !important;

    background:
        linear-gradient(
            180deg,
            #25282b 0%,
            #202326 45%,
            #191c1f 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 0 -1px 0 rgba(0,0,0,.75) !important;

    color: #ffffff !important;

    font-weight: 700 !important;
    text-decoration: none !important;

    transition: none !important;
}

/* GT.ba hover - cijeli pravougaoni tab */
.gtba-navbar li > a:hover,
.gtba-nav li > a:hover,
.gtba-menu li > a:hover,
.navbar-nav > li > a:hover,
.navbar-nav > li:hover > a {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #4ca5ff 0%,
            #557cff 30%,
            #5c61ff 62%,
            #684cff 100%
        ) !important;

    border-top-color: #68b7ff !important;
    border-left-color: #416ce7 !important;
    border-right-color: #342eb4 !important;
    border-bottom-color: #28207f !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -1px 0 rgba(0,0,0,.25),
        0 0 8px rgba(77,116,255,.18) !important;
}

/* Aktivna stranica */
.gtba-navbar li.active > a,
.gtba-nav li.active > a,
.gtba-menu li.active > a,
.navbar-nav > li.active > a {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #4ca5ff 0%,
            #557cff 30%,
            #5c61ff 62%,
            #684cff 100%
        ) !important;

    border-top-color: #68b7ff !important;
    border-bottom-color: #28207f !important;
}

/* Bez Bootstrap zaobljenja na prvom/zadnjem */
.gtba-navbar li:first-child > a,
.gtba-navbar li:last-child > a,
.gtba-nav li:first-child > a,
.gtba-nav li:last-child > a,
.navbar-nav > li:first-child > a,
.navbar-nav > li:last-child > a {
    border-radius: 0 !important;
}



/* ============================================================
   BZCS / GAMETRACKER.BA FINAL NAV + FLAGS
   ============================================================ */


/* ------------------------------------------------------------
   NAVBAR - ORIGINAL GT.BA GEOMETRY
   ------------------------------------------------------------ */

.gtba-navigation .navbar {
    min-height: 70px !important;
    height: 70px !important;
    padding: 0 !important;

    border: 1px solid #050505 !important;
    border-radius: 0 !important;

    background:
        linear-gradient(
            180deg,
            #24272a 0%,
            #17191b 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 1px 0 #303236 !important;
}


.gtba-navigation .navbar-collapse {
    height: 68px !important;
    align-items: stretch !important;
}


.gtba-navigation .navbar-nav {
    height: 68px !important;
    min-height: 68px !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: stretch !important;
}


/* svaki GT.ba menu tab */

.gtba-navigation .navbar-nav > .nav-item {
    height: 68px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 0 !important;

    border-right: 1px solid #08090a !important;

    box-shadow:
        1px 0 0 rgba(255,255,255,.04) !important;
}


/* sam button */

.gtba-navigation .navbar-nav > .nav-item > .nav-link {
    position: relative !important;

    height: 68px !important;
    min-height: 68px !important;

    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 7px !important;

    margin: 0 !important;
    padding: 0 27px !important;

    border-radius: 0 !important;

    border-left: 1px solid #090a0b !important;
    border-right: 1px solid #292c2f !important;
    border-top: 0 !important;
    border-bottom: 0 !important;

    background:
        linear-gradient(
            180deg,
            #25282b 0%,
            #202326 45%,
            #191c1f 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 0 -1px 0 rgba(0,0,0,.75) !important;

    color: #fff !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: 0 1px #000 !important;

    transition: none !important;
}


/* ------------------------------------------------------------
   GT.BA BLUE/PURPLE HOVER
   ------------------------------------------------------------ */

.gtba-navigation .navbar-nav > .nav-item > .nav-link:hover,
.gtba-navigation .navbar-nav > .nav-item:hover > .nav-link,
.gtba-navigation .navbar-nav > .nav-item > .nav-link:focus {

    color: #fff !important;

    background:
        linear-gradient(
            180deg,
            #4ca5ff 0%,
            #557cff 30%,
            #5c61ff 62%,
            #684cff 100%
        ) !important;

    border-left-color: #416ce7 !important;
    border-right-color: #342eb4 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        inset 0 -1px 0 rgba(0,0,0,.25),
        0 0 8px rgba(77,116,255,.18) !important;
}


/* prvi i zadnji button ostaju pravougaoni */

.gtba-navigation .navbar-nav > .nav-item:first-child > .nav-link,
.gtba-navigation .navbar-nav > .nav-item:last-child > .nav-link {
    border-radius: 0 !important;
}


/* ------------------------------------------------------------
   SERVER COUNTRY FLAGS
   ------------------------------------------------------------ */

.gtba-ref-country {
    width: 22px !important;
    min-width: 22px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 0 !important;
    line-height: 1 !important;
}


.gtba-ref-country img {
    display: block !important;

    width: 16px !important;
    height: 11px !important;

    max-width: 16px !important;

    object-fit: fill !important;

    border: 1px solid rgba(255,255,255,.16) !important;

    box-shadow:
        0 1px 2px rgba(0,0,0,.8) !important;
}


/* ------------------------------------------------------------
   TICKER - SERVER NAME + IP ONLY
   ------------------------------------------------------------ */

.gtba-ticker-server small {
    display: none !important;
}

.gtba-ticker-server {
    gap: 6px !important;
}

.gtba-ticker-server strong {
    color: #eeeeee !important;
}

.gtba-ticker-server .gtba-ticker-ip {
    color: #6974ff !important;
    font-weight: 700 !important;
}


/* desktop */

@media (min-width: 992px) {

    .gtba-navigation .navbar-collapse {
        display: flex !important;
    }

    .gtba-navigation .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
    }
}



/* ============================================================
   GT.BA FLAGS - FINAL LOOK
   ============================================================ */

.gtba-ref-country {
    width: 24px !important;
    min-width: 24px !important;
    height: 16px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 3px 0 1px !important;

    font-size: 0 !important;
    line-height: 0 !important;
}

.gtba-ref-country img {
    display: block !important;

    width: 18px !important;
    height: 12px !important;

    max-width: none !important;

    object-fit: cover !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #4a4d50 !important;
    border-radius: 0 !important;

    background: #111 !important;

    box-shadow:
        0 0 0 1px rgba(0,0,0,.75),
        inset 0 1px 0 rgba(255,255,255,.15) !important;

    image-rendering: auto !important;
}


/* ============================================================
   GT.BA BACK TO TOP
   ============================================================ */

#gtba-back-to-top {
    position: fixed;

    left: 50%;
    bottom: 0;

    width: 58px;
    height: 36px;

    margin-left: -29px;

    display: none;

    padding: 0;

    border: 0;
    outline: 0;

    background:
        url("../../gtba/images/common/back-to-top.png")
        center bottom
        no-repeat;

    cursor: pointer;

    z-index: 9999;

    opacity: .92;

    transition:
        opacity .15s ease,
        transform .15s ease;
}

#gtba-back-to-top:hover {
    opacity: 1;
    transform: translateY(-2px);
}

#gtba-back-to-top.gtba-show {
    display: block;
}



/* ============================================================
   GAMETRACKER.BA BACK TO TOP - FINAL
   ============================================================ */

#gtba-back-to-top {
    position: fixed !important;

    left: 50% !important;
    bottom: 0 !important;

    width: 64px !important;
    height: 39px !important;

    margin: 0 0 0 -32px !important;
    padding: 0 !important;

    display: none;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;

    background-color: transparent !important;

    background-image:
        url("../../gtba/images/common/back-to-top.png") !important;

    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: contain !important;

    box-shadow: none !important;

    cursor: pointer !important;

    z-index: 99999 !important;

    opacity: .90;

    transition:
        opacity .15s ease,
        transform .15s ease !important;
}


#gtba-back-to-top.gtba-show {
    display: block !important;
}


#gtba-back-to-top:hover {
    opacity: 1 !important;

    transform:
        translateY(-2px) !important;
}


#gtba-back-to-top:focus,
#gtba-back-to-top:active {
    outline: none !important;
    box-shadow: none !important;
}



/* ============================================================
   GT.BA BACK-TO-TOP - ATTACHED TO FOOTER
   ============================================================ */

/*
 * Footer je sidro za button.
 */
.bzcs-footer {
    position: relative !important;
    overflow: visible !important;
}


/*
 * Button vise NIJE fixed za browser.
 * Zakacen je za donju sredinu footera.
 */
#gtba-back-to-top,
#gtba-back-to-top.gtba-show {
    position: absolute !important;

    left: 50% !important;
    top: 100% !important;
    bottom: auto !important;

    width: 64px !important;
    height: 39px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateX(-50%) !important;

    display: block !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;

    background-color: transparent !important;

    background-image:
        url("../../gtba/images/common/back-to-top.png") !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: contain !important;

    box-shadow: none !important;

    cursor: pointer !important;

    z-index: 100 !important;

    opacity: 1 !important;
}


/* hover ostaje na istom mjestu */
#gtba-back-to-top:hover {
    transform:
        translateX(-50%)
        translateY(2px) !important;

    opacity: 1 !important;
}


/*
 * Dovoljno prostora ispod footera da slika
 * ne udara u kraj stranice.
 */
body {
    padding-bottom: 45px !important;
}



/* ============================================================
   GT.BA BACK TO TOP - FOOTER FINAL FIX
   ============================================================ */

/* Pravi BZCS footer */
.bzcs-gt-footer {
    position: relative !important;
    overflow: visible !important;
}


/*
 * Button je u layoutu odmah poslije footer include-a.
 * Ne smije biti fixed niti absolute prema body-u.
 */
#gtba-back-to-top,
#gtba-back-to-top.gtba-show {
    position: relative !important;

    left: 50% !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;

    display: block !important;

    width: 64px !important;
    height: 39px !important;

    /*
     * -1px ga spaja direktno uz donju liniju footera.
     */
    margin:
        -1px 0 0 -32px !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;

    background-color: transparent !important;

    background-image:
        url("../../gtba/images/common/back-to-top.png") !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 64px 39px !important;

    box-shadow: none !important;

    cursor: pointer !important;

    z-index: 50 !important;

    opacity: 1 !important;

    transform: none !important;

    float: none !important;
}


/* Na hover se ne smije odvojiti od footera */
#gtba-back-to-top:hover,
#gtba-back-to-top:focus,
#gtba-back-to-top:active {
    left: 50% !important;

    margin-left: -32px !important;

    transform: none !important;

    opacity: 1 !important;

    outline: none !important;
    box-shadow: none !important;
}


/*
 * Ukloni stari nepotrebni body razmak.
 */
body {
    padding-bottom: 0 !important;
}



/* ============================================================
   GT.BA FOOTER BACK-TO-TOP - TRUE FINAL POSITION
   ============================================================ */

.bzcs-gt-footer {
    position: relative !important;
    overflow: visible !important;
}


/*
 * Button je sada STVARNO dijete footera.
 * Zato se absolute pozicioniranje veze za footer.
 */
.bzcs-gt-footer #gtba-back-to-top,
.bzcs-gt-footer #gtba-back-to-top.gtba-show {

    position: absolute !important;

    left: 50% !important;

    /*
     * Gornji rub slike dodiruje donji rub footera.
     */
    top: 100% !important;

    right: auto !important;
    bottom: auto !important;

    display: block !important;

    width: 64px !important;
    height: 39px !important;

    margin: -1px 0 0 -32px !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;

    background-color: transparent !important;

    background-image:
        url("../../gtba/images/common/back-to-top.png") !important;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 64px 39px !important;

    box-shadow: none !important;

    cursor: pointer !important;

    z-index: 999 !important;

    opacity: 1 !important;

    transform: none !important;
}


/* Ne pomjeraj ga na hover */

.bzcs-gt-footer #gtba-back-to-top:hover,
.bzcs-gt-footer #gtba-back-to-top:focus,
.bzcs-gt-footer #gtba-back-to-top:active {

    left: 50% !important;

    margin-left: -32px !important;

    transform: none !important;

    opacity: 1 !important;

    outline: none !important;
    box-shadow: none !important;
}


/*
 * Samo malo prostora ispod sajta da cijela slika
 * koja viri iz footera bude vidljiva.
 */
body {
    padding-bottom: 45px !important;
}



/* ============================================================
   BZCS LATEST SERVERS - CONTINUOUS GT.BA TICKER
   ============================================================ */

.gtba-ticker-window {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 40px !important;
    overflow: hidden !important;
}


/*
 * Track mora biti sirok koliko i kompletan sadrzaj.
 * Dvije identicne grupe se krecu zajedno.
 */
.gtba-ticker-track {
    display: flex !important;
    align-items: center !important;

    width: max-content !important;
    min-width: max-content !important;
    height: 40px !important;

    flex-wrap: nowrap !important;

    animation:
        bzcsTickerScroll 28s linear infinite !important;

    will-change: transform;
}


/*
 * Svaka grupa sadrzi kompletnu listu servera.
 */
.gtba-ticker-group {
    display: flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;

    width: max-content !important;
    min-width: max-content !important;

    height: 40px !important;

    white-space: nowrap !important;
}


/*
 * Server se nikada ne smije stisnuti niti skratiti.
 */
.gtba-ticker-server {
    display: inline-flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;

    width: auto !important;
    max-width: none !important;

    height: 40px !important;

    padding: 0 17px !important;
    gap: 6px !important;

    white-space: nowrap !important;

    overflow: visible !important;
    text-overflow: clip !important;

    border-right: 1px solid #090909 !important;
}


/* PUNO ime servera */

.gtba-ticker-server strong {
    display: inline !important;

    width: auto !important;
    max-width: none !important;

    overflow: visible !important;
    text-overflow: clip !important;

    white-space: nowrap !important;

    color: #eeeeee !important;
}


/* IP */

.gtba-ticker-server .gtba-ticker-ip {
    display: inline !important;

    width: auto !important;
    max-width: none !important;

    overflow: visible !important;

    white-space: nowrap !important;

    color: #6974ff !important;
    font-weight: 700 !important;
}


/* Nikakav player count u tickeru */

.gtba-ticker-server small {
    display: none !important;
}


/*
 * Imamo dvije potpuno iste grupe.
 * Kada prva izadje lijevo, druga je tacno na njenom mjestu.
 */
@keyframes bzcsTickerScroll {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }

}


/*
 * Kao pravi news ticker:
 * kad stavis mis na server, traka stane da se moze kliknuti.
 */
.gtba-ticker-window:hover .gtba-ticker-track {
    animation-play-state: paused !important;
}



/* ============================================================
   GT.BA REGISTER / LOGIN BUTTONS
   ============================================================ */

.gtba-account {
    padding-top: 0 !important;
}

.gtba-guest-auth {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    height: 34px !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}


/* kompletan button */

.gtba-account .gtba-auth-button {
    display: inline-flex !important;
    align-items: stretch !important;

    height: 32px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #f2f2f2 !important;

    background:
        linear-gradient(
            180deg,
            #202326 0%,
            #17191b 52%,
            #121416 100%
        ) !important;

    border: 1px solid #090a0b !important;

    border-radius: 0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 0 1px rgba(255,255,255,.025) !important;

    text-decoration: none !important;

    overflow: hidden !important;
}


/* kvadrat sa ikonom */

.gtba-account .gtba-auth-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 39px !important;
    min-width: 39px !important;
    height: 30px !important;

    margin: 0 !important;

    border-right: 1px solid #08090a !important;

    background:
        linear-gradient(
            180deg,
            #292c2f 0%,
            #1b1e20 100%
        ) !important;

    box-shadow:
        inset -1px 0 0 rgba(255,255,255,.04),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}


.gtba-account .gtba-auth-icon i {
    margin: 0 !important;

    color: #ffffff !important;

    font-size: 13px !important;
    line-height: 1 !important;
}


/* REGISTER / LOGIN tekst */

.gtba-account .gtba-auth-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 30px !important;

    padding: 0 11px !important;

    color: #f3f3f3 !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    line-height: 30px !important;

    text-shadow: 0 1px 1px #000 !important;
}


/* OR između buttona */

.gtba-account .gtba-account-or {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 32px !important;

    margin: 0 16px !important;

    color: #666a6d !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}


/* LOGIN icon box kao GT.ba */

.gtba-account .gtba-login-button .gtba-auth-icon {
    background:
        linear-gradient(
            180deg,
            #54a8ff 0%,
            #596fff 48%,
            #684cff 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 0 10px rgba(65,140,255,.25) !important;
}


/* Login tekst blago plav kao original */

.gtba-account .gtba-login-button .gtba-auth-label {
    color: #645cff !important;
}


/* Hover cijelog buttona */

.gtba-account .gtba-auth-button:hover {
    background:
        linear-gradient(
            180deg,
            #292c2f 0%,
            #202326 52%,
            #181a1c 100%
        ) !important;

    color: #ffffff !important;
}


/* Register hover icon */

.gtba-account .gtba-register-button:hover .gtba-auth-icon {
    background:
        linear-gradient(
            180deg,
            #34383c 0%,
            #24272a 100%
        ) !important;
}


/* Login hover */

.gtba-account .gtba-login-button:hover .gtba-auth-icon {
    background:
        linear-gradient(
            180deg,
            #65b4ff 0%,
            #657cff 48%,
            #7358ff 100%
        ) !important;
}


.gtba-account .gtba-login-button:hover .gtba-auth-label {
    color: #817aff !important;
}


/* Header pozicija kao GT.ba */

.gtba-header .col-md-8 {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
}

.gtba-header .gtba-account {
    margin-top: 0 !important;
}


/* Mobile */

@media (max-width: 767.98px) {

    .gtba-guest-auth {
        justify-content: center !important;
    }

    .gtba-account .gtba-account-or {
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

}



/* =========================================================
   GAMETRACKER.BA REGISTER PAGE
   ========================================================= */

.gtba-register-page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 !important;
}

.gtba-register-box {
    width: 100%;
    margin: 0;
    padding: 22px 20px 20px;
    background: #17191b;
    border: 1px solid #08090a;
    border-radius: 5px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 1px 2px rgba(0,0,0,.65);
}

.gtba-register-form {
    width: 100%;
    margin: 0;
}

.gtba-register-field {
    width: 100%;
    margin: 0 0 15px;
}

.gtba-register-field label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 14px;
    font-weight: 700;
}

.gtba-register-field input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 35px;
    margin: 0;
    padding: 0 11px;
    color: #d7d7d7;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 35px;
    background: #202224;
    border: 1px solid #202224;
    border-radius: 3px;
    outline: none;
    box-shadow: none;
}

.gtba-register-field input::placeholder {
    color: #9a9a9a;
    opacity: 1;
}

.gtba-register-field input:hover {
    background: #222426;
}

.gtba-register-field input:focus {
    color: #fff;
    background: #222426;
    border-color: #33373b;
    outline: none;
    box-shadow: none;
}

.gtba-register-submit {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    margin: 20px 0 0;
    padding: 0;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 42px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;

    background: linear-gradient(
        180deg,
        #58a8ff 0%,
        #607cff 46%,
        #674eff 100%
    );

    border: 1px solid #15171a;
    border-radius: 0;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 1px 2px rgba(0,0,0,.75);
}

.gtba-register-submit:hover,
.gtba-register-submit:focus {
    color: #fff;
    background: linear-gradient(
        180deg,
        #68b2ff 0%,
        #687fff 46%,
        #7358ff 100%
    );
    outline: none;
}

@media (max-width: 767px) {
    .gtba-register-box {
        padding: 18px 14px;
    }
}



/* =========================================================
   REGISTER — GAMETRACKER.BA 1:1 FINAL OVERRIDE
   ========================================================= */

.gtba-register-page {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.gtba-register-box {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 18px 17px 18px !important;

    background: #191b1d !important;
    border: 1px solid #0a0b0c !important;
    border-radius: 5px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 1px 2px rgba(0,0,0,.8) !important;
}

.gtba-register-field {
    margin: 0 0 12px !important;
}

.gtba-register-field label {
    display: block !important;

    margin: 0 0 7px !important;
    padding: 0 !important;

    color: #fff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    line-height: 13px !important;
    font-weight: 700 !important;
}

.gtba-register-field input {
    box-sizing: border-box !important;

    display: block !important;
    width: 100% !important;
    height: 29px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    color: #ddd !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    line-height: 29px !important;

    background: #202224 !important;

    border: 1px solid #202224 !important;
    border-radius: 2px !important;

    outline: 0 !important;
    box-shadow: none !important;
}

.gtba-register-field input::placeholder {
    color: #9a9a9a !important;
    opacity: 1 !important;
}

.gtba-register-field input:hover,
.gtba-register-field input:focus {
    background: #222426 !important;
    border-color: #292c2f !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.gtba-register-submit {
    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;
    height: 35px !important;

    margin: 17px 0 0 !important;
    padding: 0 !important;

    color: #fff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    line-height: 35px !important;
    font-weight: 700 !important;

    text-align: center !important;
    text-transform: uppercase !important;

    background:
        linear-gradient(
            180deg,
            #5caeff 0%,
            #5d8aff 38%,
            #6554ff 100%
        ) !important;

    border: 1px solid #111315 !important;
    border-radius: 0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 1px 1px rgba(0,0,0,.8) !important;

    cursor: pointer !important;
}

.gtba-register-submit:hover,
.gtba-register-submit:focus {
    color: #fff !important;

    background:
        linear-gradient(
            180deg,
            #69b6ff 0%,
            #678fff 38%,
            #705cff 100%
        ) !important;

    outline: 0 !important;
}

/*
 * Layout app.php daje main-contentu Bootstrap padding.
 * GT.ba register treba da prati istu 1004px centralnu kolonu
 * kao navbar/ticker.
 */
body #main-content > .container-fluid {
    max-width: 1004px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Na auth stranici uklanjamo Bootstrap horizontalni padding
   jer originalni GT.ba box prati ticker/nav ivice. */
body #main-content > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Malo manji razmak ticker -> register kao original */
.gtba-register-page {
    margin-top: -1px !important;
}

@media (max-width: 1030px) {
    body #main-content > .container-fluid {
        width: calc(100% - 24px) !important;
    }
}



/* =========================================================
   AUTH PAGES — GT.BA FINAL POSITION / FOOTER FIX
   ========================================================= */

/*
 * Main mora imati dovoljno prostora za cijelu auth formu.
 * Footer više ne smije ulaziti preko REGISTER/LOGIN forme.
 */
#main-content {
    position: relative !important;
    flex: 1 0 auto !important;
    overflow: visible !important;
}

/*
 * Bootstrap py-3 nam pravi drugačiji razmak od GT.ba.
 */
#main-content > .container-fluid {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1004px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 15px !important;
    padding-bottom: 10px !important;
}

/*
 * Register panel prati punu širinu GT.ba centralnog containera.
 */
.gtba-register-page {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 1004px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    position: relative !important;
    overflow: visible !important;
}

.gtba-register-box {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 17px 17px 17px !important;

    position: relative !important;

    background: #191b1d !important;
    border: 1px solid #08090a !important;
    border-radius: 4px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 1px 2px rgba(0,0,0,.75) !important;
}

.gtba-register-form {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.gtba-register-field {
    display: block !important;
    width: 100% !important;

    margin: 0 0 12px !important;
    padding: 0 !important;
}

.gtba-register-field label {
    display: block !important;

    margin: 0 0 7px !important;
    padding: 0 !important;

    color: #fff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    line-height: 13px !important;
    font-weight: 700 !important;
}

.gtba-register-field input {
    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;
    height: 29px !important;

    margin: 0 !important;
    padding: 0 9px !important;

    color: #d0d0d0 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    line-height: 29px !important;

    background: #202224 !important;

    border: 1px solid #202224 !important;
    border-radius: 2px !important;

    outline: none !important;
    box-shadow: none !important;
}

.gtba-register-field input::placeholder {
    color: #a0a0a0 !important;
    opacity: 1 !important;
}

.gtba-register-submit {
    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;
    height: 35px !important;

    margin: 17px 0 0 !important;
    padding: 0 !important;

    color: #fff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    line-height: 33px !important;
    font-weight: 700 !important;

    text-align: center !important;

    background:
        linear-gradient(
            to bottom,
            #5caaff 0%,
            #5e88ff 45%,
            #6651ff 100%
        ) !important;

    border: 1px solid #101113 !important;
    border-radius: 0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 1px 1px rgba(0,0,0,.8) !important;

    position: relative !important;
    z-index: 2 !important;
}

/*
 * Footer mora biti normalan element ISPOD sadržaja.
 */
.bzcs-gt-footer {
    position: relative !important;
    clear: both !important;
    flex-shrink: 0 !important;
    z-index: 1 !important;

    width: 100% !important;
    max-width: 1004px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

/*
 * Na manjim ekranima zadržavamo razmak od ivica.
 */
@media (max-width: 1030px) {
    #main-content > .container-fluid,
    .gtba-register-page,
    .bzcs-gt-footer {
        width: calc(100% - 24px) !important;
    }
}



/* =========================================================
   REGISTER — FOOTER OVERLAP DEFINITIVE FIX
   ========================================================= */

/*
 * GT.ba style.css daje footeru z-index: 9999999.
 * Na register stranici footer mora ostati u normalnom flowu
 * i tek nakon kompletne forme.
 */
body:has(.gtba-register-page) #main-content {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    flex: 0 0 auto !important;

    overflow: visible !important;
}

/*
 * Wrapper mora računati punu visinu register boxa.
 */
body:has(.gtba-register-page) #main-content > .container-fluid {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    max-width: 1004px !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto !important;

    padding:
        15px
        0
        14px
        0 !important;

    overflow: visible !important;
}

/*
 * Register elementi ostaju u normalnom document flowu.
 */
body:has(.gtba-register-page) .gtba-register-page,
body:has(.gtba-register-page) .gtba-register-box,
body:has(.gtba-register-page) .gtba-register-form {
    position: relative !important;
    float: none !important;

    display: block !important;

    height: auto !important;
    min-height: 0 !important;

    overflow: visible !important;
}

/*
 * Malo sigurnog prostora nakon REGISTER dugmeta.
 */
body:has(.gtba-register-page) .gtba-register-box {
    margin-bottom: 0 !important;
}

body:has(.gtba-register-page) .gtba-register-submit {
    position: relative !important;
    z-index: 1 !important;

    margin-bottom: 0 !important;
}

/*
 * KLJUČNI FIX:
 * poništava stare GT.ba footer negative margine i ogroman z-index.
 */
body:has(.gtba-register-page) .bzcs-gt-footer {
    position: relative !important;

    clear: both !important;

    width: 100% !important;
    max-width: 1004px !important;

    margin:
        0
        auto
        80px
        auto !important;

    z-index: 2 !important;

    flex: 0 0 auto !important;
}

/*
 * Back-to-top ostaje zakačen ispod footera.
 */
body:has(.gtba-register-page)
.bzcs-gt-footer #gtba-back-to-top {
    position: absolute !important;

    left: 50% !important;
    top: 100% !important;

    margin-left: -32px !important;

    z-index: 3 !important;
}

@media (max-width: 1030px) {

    body:has(.gtba-register-page)
    #main-content > .container-fluid,

    body:has(.gtba-register-page)
    .bzcs-gt-footer {

        width: calc(100% - 24px) !important;
    }
}



/* =========================================================
   REGISTER — WIDTH + BUTTON FINAL FIX
   ========================================================= */

/*
 * Register mora pratiti ISTU širinu kao navbar i ticker.
 * GT.ba desktop container = 1170px.
 */
body:has(.gtba-register-page) #main-content > .container-fluid {
    box-sizing: border-box !important;

    width: 1170px !important;
    max-width: calc(100% - 30px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 15px 0 14px !important;

    height: auto !important;
    min-height: 0 !important;

    overflow: visible !important;
}

body:has(.gtba-register-page) .gtba-register-page {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

body:has(.gtba-register-page) .gtba-register-box {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 18px 17px 17px !important;

    background: #191b1d !important;
    border: 1px solid #08090a !important;
    border-radius: 4px !important;

    overflow: visible !important;
}

/*
 * INPUTI
 */
body:has(.gtba-register-page) .gtba-register-field {
    width: 100% !important;
    margin: 0 0 12px !important;
}

body:has(.gtba-register-page) .gtba-register-field input {
    box-sizing: border-box !important;

    width: 100% !important;
    height: 34px !important;

    padding: 0 11px !important;

    font-size: 11px !important;
    line-height: normal !important;

    background: #202224 !important;
    border: 1px solid #202224 !important;
    border-radius: 2px !important;
}

/*
 * REGISTER BUTTON
 *
 * Ne koristimo line-height za vertikalno centriranje.
 * Flex sprečava rezanje REGISTER teksta.
 */
body:has(.gtba-register-page) .gtba-register-submit {
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;

    margin: 17px 0 0 !important;
    padding: 0 15px !important;

    position: relative !important;
    overflow: visible !important;

    color: #ffffff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    text-align: center !important;
    text-transform: uppercase !important;

    background:
        linear-gradient(
            180deg,
            #62b0ff 0%,
            #5f91ff 35%,
            #626cff 62%,
            #684cff 100%
        ) !important;

    border: 1px solid #111315 !important;
    border-radius: 0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.22),
        0 1px 2px rgba(0,0,0,.80) !important;

    cursor: pointer !important;
}

body:has(.gtba-register-page) .gtba-register-submit:hover,
body:has(.gtba-register-page) .gtba-register-submit:focus {
    color: #fff !important;

    background:
        linear-gradient(
            180deg,
            #72bbff 0%,
            #699cff 35%,
            #6b75ff 62%,
            #7458ff 100%
        ) !important;

    outline: none !important;
}

/*
 * Footer prati potpuno istu 1170px liniju.
 */
body:has(.gtba-register-page) .bzcs-gt-footer {
    box-sizing: border-box !important;

    width: 1170px !important;
    max-width: calc(100% - 30px) !important;

    margin:
        0
        auto
        80px
        auto !important;

    position: relative !important;
    clear: both !important;

    z-index: 2 !important;
}


/* TABLET / MOBILE */
@media (max-width: 1199px) {

    body:has(.gtba-register-page)
    #main-content > .container-fluid,

    body:has(.gtba-register-page)
    .bzcs-gt-footer {

        width: calc(100% - 30px) !important;
        max-width: none !important;
    }
}

@media (max-width: 767px) {

    body:has(.gtba-register-page)
    #main-content > .container-fluid,

    body:has(.gtba-register-page)
    .bzcs-gt-footer {

        width: calc(100% - 20px) !important;
    }

    body:has(.gtba-register-page)
    .gtba-register-box {

        padding: 15px 13px !important;
    }
}



/* =========================================================
   BZCS — RESTORE ORIGINAL COMPLETE WIDTH
   ========================================================= */

/* Navbar */
.gtba-navigation,
.gtba-nav-divider {
    width: 1004px !important;
    max-width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Latest servers ticker */
#gtba-news-ticker {
    width: 1004px !important;
    max-width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Main content */
#main-content > .container-fluid {
    box-sizing: border-box !important;
    width: 1004px !important;
    max-width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Register */
body:has(.gtba-register-page) #main-content > .container-fluid,
.gtba-register-page {
    width: 1004px !important;
    max-width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Footer */
.bzcs-gt-footer {
    box-sizing: border-box !important;
    width: 1004px !important;
    max-width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* Mobile */
@media (max-width: 1030px) {
    .gtba-navigation,
    .gtba-nav-divider,
    #gtba-news-ticker,
    #main-content > .container-fluid,
    body:has(.gtba-register-page) #main-content > .container-fluid,
    .gtba-register-page,
    .bzcs-gt-footer {
        width: calc(100% - 24px) !important;
        max-width: none !important;
    }
}



/* =========================================================
   LOGIN — GAMETRACKER.BA STYLE
   ========================================================= */

body:has(.gtba-login-page) #main-content {
    position: relative !important;
    flex: 1 0 auto !important;
    overflow: visible !important;
}


/*
 * Login prati ISTU 1004px centralnu kolonu
 * kao navbar, ticker, register i footer.
 */
body:has(.gtba-login-page) #main-content > .container-fluid {
    box-sizing: border-box !important;

    width: 1004px !important;
    max-width: calc(100% - 30px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 15px !important;
    padding-bottom: 10px !important;
}


.gtba-login-page {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 1004px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    position: relative !important;
}


.gtba-login-box {
    box-sizing: border-box !important;

    width: 100% !important;
    margin: 0 !important;

    padding: 17px !important;

    background: #191b1d !important;

    border: 1px solid #08090a !important;
    border-radius: 4px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 1px 2px rgba(0,0,0,.75) !important;
}


.gtba-login-form {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.gtba-login-field {
    display: block !important;

    width: 100% !important;

    margin: 0 0 12px !important;
    padding: 0 !important;
}


.gtba-login-field label {
    display: block !important;

    margin: 0 0 7px !important;
    padding: 0 !important;

    color: #fff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    line-height: 13px !important;
    font-weight: 700 !important;
}


.gtba-login-field input {
    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;
    height: 29px !important;

    margin: 0 !important;
    padding: 0 10px !important;

    color: #ddd !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    line-height: 29px !important;

    background: #202224 !important;

    border: 1px solid #202224 !important;
    border-radius: 2px !important;

    outline: 0 !important;
    box-shadow: none !important;
}


.gtba-login-field input::placeholder {
    color: #9a9a9a !important;
    opacity: 1 !important;
}


.gtba-login-field input:hover,
.gtba-login-field input:focus {
    color: #fff !important;

    background: #222426 !important;
    border-color: #292c2f !important;

    outline: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   REMEMBER / FORGOT PASSWORD
   ========================================================= */

.gtba-login-options {
    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    margin: 2px 0 0 !important;
    padding: 0 !important;

    min-height: 22px !important;
}


.gtba-login-remember {
    display: inline-flex !important;

    align-items: center !important;
    gap: 6px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #999 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    line-height: 14px !important;

    cursor: pointer !important;
}


.gtba-login-remember input {
    appearance: none !important;
    -webkit-appearance: none !important;

    box-sizing: border-box !important;

    width: 12px !important;
    height: 12px !important;

    margin: 0 !important;

    background: #202224 !important;

    border: 1px solid #3a3d40 !important;
    border-radius: 1px !important;

    position: relative !important;

    cursor: pointer !important;
}


.gtba-login-remember input:checked {
    background:
        linear-gradient(
            180deg,
            #5caeff 0%,
            #6554ff 100%
        ) !important;

    border-color: #596eff !important;
}


.gtba-login-remember input:checked::after {
    content: "" !important;

    position: absolute !important;

    left: 3px !important;
    top: 1px !important;

    width: 4px !important;
    height: 7px !important;

    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;

    transform: rotate(45deg) !important;
}


.gtba-login-forgot {
    color: #6464ff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    line-height: 14px !important;

    text-decoration: none !important;
}


.gtba-login-forgot:hover {
    color: #8181ff !important;
    text-decoration: none !important;
}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.gtba-login-submit {
    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;
    height: 35px !important;

    margin: 13px 0 0 !important;
    padding: 0 !important;

    color: #fff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    line-height: 33px !important;
    font-weight: 700 !important;

    text-align: center !important;
    text-transform: uppercase !important;

    background:
        linear-gradient(
            180deg,
            #5caeff 0%,
            #5d8aff 38%,
            #6554ff 100%
        ) !important;

    border: 1px solid #111315 !important;
    border-radius: 0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 1px 1px rgba(0,0,0,.8) !important;

    cursor: pointer !important;
}


.gtba-login-submit:hover,
.gtba-login-submit:focus {
    color: #fff !important;

    background:
        linear-gradient(
            180deg,
            #69b6ff 0%,
            #678fff 38%,
            #705cff 100%
        ) !important;

    outline: 0 !important;
}


/* =========================================================
   REGISTER LINK ISPOD LOGIN BOXA
   ========================================================= */

.gtba-login-register {
    width: 100% !important;

    margin: 8px 0 0 !important;
    padding: 8px 0 !important;

    color: #777 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    line-height: 14px !important;

    text-align: center !important;
}


.gtba-login-register a {
    color: #6464ff !important;

    font-weight: 700 !important;
    text-decoration: none !important;
}


.gtba-login-register a:hover {
    color: #8181ff !important;
    text-decoration: none !important;
}


/* =========================================================
   LOGIN MOBILE
   ========================================================= */

@media (max-width: 1030px) {

    body:has(.gtba-login-page) #main-content > .container-fluid,
    .gtba-login-page {
        width: calc(100% - 24px) !important;
        max-width: none !important;
    }

}

@media (max-width: 575px) {

    .gtba-login-box {
        padding: 14px !important;
    }

    .gtba-login-options {
        gap: 10px !important;
    }

}



/* ============================================================
   GT.BA LOGIN POPUP
   ============================================================ */

.gtba-login-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 32px !important;
}


/* Popup box */

.gtba-login-popup {
    display: none;

    position: absolute !important;
    z-index: 99999 !important;

    top: 45px !important;
    right: 0 !important;

    width: 350px !important;

    padding: 16px !important;

    background:
        linear-gradient(
            180deg,
            #202326 0%,
            #181b1d 100%
        ) !important;

    border: 1px solid #050505 !important;

    border-radius: 0 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 2px 5px rgba(0,0,0,.65) !important;

    text-align: left !important;
    font-family: Arial, Helvetica, sans-serif !important;
}


.gtba-login-popup.is-open {
    display: block !important;
}


/* mali trougao prema LOGIN buttonu */

.gtba-login-popup-arrow {
    position: absolute !important;

    top: -12px !important;
    right: 29px !important;

    width: 0 !important;
    height: 0 !important;

    border-left: 13px solid transparent !important;
    border-right: 13px solid transparent !important;
    border-bottom: 13px solid #202326 !important;
}

.gtba-login-popup-arrow::before {
    content: "";

    position: absolute;

    left: -14px;
    top: -2px;

    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 14px solid #050505;

    z-index: -1;
}


/* Sign up + X */

.gtba-login-popup-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    height: 22px !important;
    margin-bottom: 10px !important;

    color: #74797d !important;

    font-size: 10px !important;
    font-weight: 700 !important;
}


.gtba-login-popup-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px !important;
    height: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    color: #ffffff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 20px !important;

    cursor: pointer !important;
}


/* Username / Password */

.gtba-login-popup .gtba-login-field {
    display: block !important;

    width: 100% !important;
    height: 48px !important;

    margin: 0 0 14px 0 !important;
    padding: 0 14px !important;

    box-sizing: border-box !important;

    border: 1px solid #08090a !important;
    border-radius: 0 !important;

    outline: none !important;

    background: #191b1e !important;

    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.4),
        0 1px 0 rgba(255,255,255,.03) !important;

    color: #d6d6d6 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}


.gtba-login-popup .gtba-login-field::placeholder {
    color: #707579 !important;
    opacity: 1 !important;
}


.gtba-login-popup .gtba-login-field:focus {
    border-color: #343a40 !important;
    background: #1b1e21 !important;
}


/* Remember + lost password */

.gtba-login-options {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    margin: 1px 0 14px !important;
}


.gtba-remember {
    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;

    color: #f0f0f0 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;

    cursor: pointer !important;
}


.gtba-remember input {
    width: 13px !important;
    height: 13px !important;

    margin: 0 5px 0 0 !important;

    accent-color: #6670ff;
}


.gtba-account .gtba-lost-password,
.gtba-login-popup .gtba-lost-password {
    margin: 0 !important;

    color: #665cff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}


.gtba-account .gtba-lost-password:hover,
.gtba-login-popup .gtba-lost-password:hover {
    color: #8180ff !important;
}


/* GO button */

.gtba-login-popup .gtba-login-submit {
    display: block !important;

    width: 100% !important;
    height: 47px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #3038b8 !important;
    border-radius: 0 !important;

    background:
        linear-gradient(
            180deg,
            #59a8ff 0%,
            #5d76ff 48%,
            #684dff 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        0 1px 2px rgba(0,0,0,.55) !important;

    color: #ffffff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;

    line-height: 45px !important;

    text-align: center !important;
    text-transform: uppercase !important;

    cursor: pointer !important;
}


.gtba-login-popup .gtba-login-submit:hover {
    background:
        linear-gradient(
            180deg,
            #67b3ff 0%,
            #697fff 48%,
            #765aff 100%
        ) !important;
}


/* Na manjim ekranima popup ostaje unutar ekrana */

@media (max-width: 767.98px) {

    .gtba-login-wrap {
        position: static !important;
    }

    .gtba-login-popup {
        top: 45px !important;
        right: 10px !important;

        width: calc(100vw - 40px) !important;
        max-width: 350px !important;
    }

    .gtba-login-popup-arrow {
        display: none !important;
    }
}



/* ============================================================
   GT.BA ORIGINAL TEXTURES — FINAL
   Koristi originalne lokalne GameTracker.ba texture
   ============================================================ */


/* ------------------------------------------------------------
   GLAVNI GT.BA PANELI
   Originalni dark_wall.jpg daje blagu zidnu/metalnu teksturu.
   ------------------------------------------------------------ */

.gtba-reference-panel {
    background:
        url("../images/common/dark_wall.jpg")
        repeat
        left top !important;

    background-color: #1b1e20 !important;

    border: 1px solid #08090a !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 1px 2px rgba(0,0,0,.75) !important;
}


/* ------------------------------------------------------------
   HERO / GORNJI GLAVNI BLOK
   Texture ostaje iza postojećeg hero sadržaja.
   ------------------------------------------------------------ */

.gtba-reference-hero-top {
    background-color: #181b1d !important;

    background-image:
        radial-gradient(
            ellipse at 37% 43%,
            rgba(30,38,43,.20) 0%,
            rgba(18,21,23,.20) 46%,
            rgba(9,11,12,.52) 100%
        ),
        url("../images/common/dark_wall.jpg") !important;

    background-repeat:
        no-repeat,
        repeat !important;

    background-position:
        center,
        left top !important;
}


/* ------------------------------------------------------------
   SECTION HEADERS
   VIP ADVERTISEMENT
   STATISTICS
   MOST POPULAR
   JUST ADDED

   Original GT.ba koristi stripe texture.
   ------------------------------------------------------------ */

.gtba-reference-section-title,
.gtba-reference-list-title,
.gtba-reference-vip-title,
.gtba-reference-stats-title,
.gtba-reference-heading,
.gtba-reference-box-title {
    background:
        url("../images/common/stripe.png")
        repeat
        left top !important;

    background-color: #181a1c !important;

    border: 1px solid #070809 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        0 1px 1px rgba(0,0,0,.65) !important;
}


/* ------------------------------------------------------------
   Ako su title elementi H3/H4 unutar panela
   ------------------------------------------------------------ */

.gtba-reference-panel > h3,
.gtba-reference-panel > h4,
.gtba-reference-list > h3,
.gtba-reference-list > h4 {
    background:
        url("../images/common/stripe.png")
        repeat
        left top !important;
}


/* ------------------------------------------------------------
   VIP + STATISTICS VANJSKI BLOK
   ------------------------------------------------------------ */

.gtba-reference-vip,
.gtba-reference-statistics,
.gtba-reference-stats {
    background:
        url("../images/common/dark_wall.jpg")
        repeat
        left top !important;

    background-color: #191c1e !important;
}


/* ------------------------------------------------------------
   DONJI MOST POPULAR / JUST ADDED PANELI
   ------------------------------------------------------------ */

.gtba-reference-list {
    background:
        url("../images/common/dark_wall.jpg")
        repeat
        left top !important;

    background-color: #191c1e !important;

    border-color: #08090a !important;
}


/* Server rows ostaju čitljive preko textured containera */

.gtba-reference-list li,
.gtba-reference-server-row {
    background-color: rgba(28,31,33,.94) !important;

    border-color: #08090a !important;
}


/* Alternate row */

.gtba-reference-list li:nth-child(even),
.gtba-reference-server-row:nth-child(even) {
    background-color: rgba(32,35,38,.94) !important;
}


/* ------------------------------------------------------------
   STATISTICS ROWS
   ------------------------------------------------------------ */

.gtba-reference-statistics li,
.gtba-reference-stats li,
.gtba-stat-row {
    background-color: rgba(27,29,30,.94) !important;
}


/* ------------------------------------------------------------
   TICKER
   Koristi baš originalni ticker_bg.jpg
   ------------------------------------------------------------ */

#gtba-news-ticker {
    background:
        url("../images/common/ticker_bg.jpg")
        repeat
        left top
        #212528 !important;
}


/* ------------------------------------------------------------
   NAVBAR DARK STRIPE
   Vrlo suptilno — originalni izgled bez mijenjanja geometrije.
   ------------------------------------------------------------ */

.gtba-navigation {
    background:
        url("../images/common/stripe_dark.jpg")
        repeat
        left top !important;
}


/* Sami nav buttoni zadržavaju postojeći gradient/hover */

.gtba-navigation .navbar,
.gtba-navigation .navbar-collapse {
    background-color: transparent !important;
}


/* ------------------------------------------------------------
   REGISTER PANEL
   ------------------------------------------------------------ */

.gtba-register-box {
    background:
        url("../images/common/dark_wall.jpg")
        repeat
        left top !important;

    background-color: #191b1d !important;
}


/* ------------------------------------------------------------
   LOGIN POPUP
   ------------------------------------------------------------ */

.gtba-login-popup {
    background:
        url("../images/common/dark_wall.jpg")
        repeat
        left top !important;

    background-color: #1b1e20 !important;
}


/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

.bzcs-gt-footer {
    background:
        url("../images/common/dark_wall.jpg")
        repeat
        left top !important;

    background-color: #101213 !important;
}


/* ============================================================
   END GT.BA ORIGINAL TEXTURES
   ============================================================ */



/* ============================================================
   GT.BA TEXTURE CORRECTION
   Texture samo tamo gdje ih original stvarno koristi
   ============================================================ */


/* ------------------------------------------------------------
   1. VANJSKI PANELI
   NE stavljati dark_wall kao jaku pozadinu preko svega.
   Original ima vrlo suptilan tamni panel.
   ------------------------------------------------------------ */

.gtba-reference-panel,
.gtba-reference-vip,
.gtba-reference-statistics,
.gtba-reference-stats,
.gtba-reference-list {
    background-image: none !important;
    background-color: #1b1f21 !important;
}


/* Glavni VIP/STATS wrapper i donji wrapper trebaju ostati
   samo tamno textured, vrlo suptilno */

.gtba-reference-vip-stats,
.gtba-reference-bottom,
.gtba-reference-lists,
.gtba-reference-lists-wrap {
    background:
        url("../images/common/dark_wall.jpg")
        repeat
        left top !important;

    background-color: #1b1f21 !important;
}


/* ------------------------------------------------------------
   2. NASLOVNE TRAKE
   OVDJE original koristi stripe.png.
   ------------------------------------------------------------ */

.gtba-reference-section-title,
.gtba-reference-list-title,
.gtba-reference-vip-title,
.gtba-reference-stats-title,
.gtba-reference-heading,
.gtba-reference-box-title,

.gtba-reference-vip h3,
.gtba-reference-vip h4,

.gtba-reference-statistics h3,
.gtba-reference-statistics h4,

.gtba-reference-stats h3,
.gtba-reference-stats h4,

.gtba-reference-list h3,
.gtba-reference-list h4 {
    background-color: #16191b !important;

    background-image:
        url("../images/common/stripe.png") !important;

    background-repeat: repeat !important;
    background-position: left top !important;

    border: 1px solid #070809 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 1px 1px rgba(0,0,0,.8) !important;
}


/* ------------------------------------------------------------
   3. VIP ADVERTISEMENT CONTENT
   Original: header je stripe, a veliki banner/content ispod
   nema stripe texture.
   ------------------------------------------------------------ */

.gtba-reference-vip-content,
.gtba-reference-featured {
    background-color: #111315 !important;

    background-image: none !important;

    border-left: 1px solid #08090a !important;
    border-right: 1px solid #08090a !important;
    border-bottom: 1px solid #08090a !important;
}


/* Ako featured server koristi pseudo overlay, neka bude taman */

.gtba-reference-featured::before,
.gtba-reference-vip-content::before {
    opacity: .45 !important;
}


/* ------------------------------------------------------------
   4. STATISTICS
   Vanjski statistics panel je čist taman.
   Samo njegov HEADER ima stripe.
   ------------------------------------------------------------ */

.gtba-reference-statistics,
.gtba-reference-stats {
    background: #171a1c !important;
}


/* Statistics rows kao na GT.ba */

.gtba-reference-statistics li,
.gtba-reference-stats li,
.gtba-stat-row {
    background: #202020 !important;

    border: 0 !important;

    border-radius: 3px !important;

    box-shadow: none !important;
}


/* ------------------------------------------------------------
   5. DONJE TRI KOLONE
   Container bez stripe/dark-wall preko cijelog elementa.
   ------------------------------------------------------------ */

.gtba-reference-list {
    background: #171a1c !important;

    border: 1px solid #08090a !important;

    box-shadow:
        0 1px 2px rgba(0,0,0,.65) !important;
}


/* Header svake kolone = stripe */

.gtba-reference-list-title {
    background:
        url("../images/common/stripe.png")
        repeat
        left top
        #16191b !important;

    border-bottom: 1px solid #050606 !important;
}


/* ------------------------------------------------------------
   6. SERVER ROWS
   Original GT.ba koristi dva vrlo slična tamna tona.
   ------------------------------------------------------------ */

.gtba-reference-list li,
.gtba-reference-server-row {
    background: #1b1e20 !important;

    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;

    border-bottom: 1px solid #08090a !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}


.gtba-reference-list li:nth-child(even),
.gtba-reference-server-row:nth-child(even) {
    background: #202426 !important;
}


/* zadnji red */

.gtba-reference-list li:last-child,
.gtba-reference-server-row:last-child {
    border-bottom: 0 !important;
}


/* ------------------------------------------------------------
   7. HERO
   OVDJE NE ŽELIMO dark_wall preko CS slike.
   Vrati postojeću hero pozadinu.
   ------------------------------------------------------------ */

.gtba-reference-hero-top {
    background-image: none !important;
    background-color: #181c1e !important;
}


/* ------------------------------------------------------------
   8. INFO BOXOVI ISPOD HERO-a
   Original su čisti tamno-sivi paneli.
   ------------------------------------------------------------ */

.gtba-reference-info,
.gtba-reference-warning,
.gtba-reference-info-box {
    background-image: none !important;
    background-color: #222628 !important;
}


/* ------------------------------------------------------------
   9. NAVBAR
   Makni stripe_dark sa cijele navigacije.
   Originalni button gradient/hover ostaje kakav smo napravili.
   ------------------------------------------------------------ */

.gtba-navigation {
    background-image: none !important;
    background-color: #191c1e !important;
}


/* ------------------------------------------------------------
   10. TICKER
   ticker_bg JE ispravna originalna textura.
   ------------------------------------------------------------ */

#gtba-news-ticker {
    background:
        url("../images/common/ticker_bg.jpg")
        repeat
        left top
        #212528 !important;
}


/* ------------------------------------------------------------
   11. FOOTER
   Original je skoro potpuno ravan/taman.
   ------------------------------------------------------------ */

.bzcs-gt-footer {
    background-image: none !important;
    background-color: #101213 !important;
}


/* ============================================================
   END GT.BA TEXTURE CORRECTION
   ============================================================ */


/* ============================================================
   BZCS / GT.BA HOME BOTTOM — FINAL EXACT STRUCTURE
   VIP / STATISTICS / MOST POPULAR / JUST ADDED
   ============================================================ */

.gtba-reference-home {
    width: 100%;
}

/* ------------------------------------------------------------
   COMMON PANEL SHELL
   Original GT.ba main-content:
   dark_wall + subtle inset highlight + black border
   ------------------------------------------------------------ */

.gtba-reference-middle,
.gtba-reference-server-panel {
    position: relative;
    box-sizing: border-box;

    background:
        url("../images/common/dark_wall.jpg") repeat 0 0 !important;

    border: 1px solid #000 !important;

    box-shadow:
        0 1px 3px rgba(0,0,0,.50),
        inset 0 1px 1px rgba(255,255,255,.20) !important;
}

/* VIP + STATISTICS wrapper */
.gtba-reference-middle {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(270px, 1fr) !important;
    gap: 20px !important;

    padding: 20px 16px 22px !important;
    margin-top: 14px !important;
}

/* ------------------------------------------------------------
   EXACT GT.BA HEADING
   stripe.png ONLY on heading
   ------------------------------------------------------------ */

.gtba-reference-title {
    box-sizing: border-box !important;

    width: 100% !important;
    min-height: 39px !important;

    display: flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 17px !important;

    background:
        url("../images/common/stripe.png") repeat left top !important;

    border: 1px solid #000 !important;

    box-shadow:
        0 1px 3px rgba(0,0,0,.30),
        inset 0 1px 1px rgba(255,255,255,.20) !important;

    color: #fff !important;

    font-family: "Roboto", Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 37px !important;
    font-weight: 800 !important;

    text-transform: uppercase !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.80) !important;
}

.gtba-reference-title i {
    flex: 0 0 auto !important;
    margin-right: 7px !important;

    color: #6c55f9 !important;
    font-size: 14px !important;
}

/* VIP star = original yellow appearance */
.gtba-reference-vip > .gtba-reference-title i {
    color: #ffe400 !important;
}

/* ------------------------------------------------------------
   VIP ADVERTISEMENT
   ------------------------------------------------------------ */

.gtba-reference-vip {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.gtba-reference-vip-body {
    position: relative !important;
    min-height: 258px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #111416 !important;

    border-left: 1px solid #000 !important;
    border-right: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* original promo artwork is the actual VIP background */
.gtba-reference-vip-body > img {
    position: absolute !important;
    z-index: 0 !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center !important;

    opacity: .33 !important;

    filter: none !important;
}

/* dark overlay like original */
.gtba-reference-vip-body::after {
    content: "" !important;

    position: absolute !important;
    z-index: 1 !important;

    inset: 0 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            rgba(8,10,12,.84) 0%,
            rgba(8,10,12,.52) 46%,
            rgba(8,10,12,.25) 100%
        ) !important;
}

.gtba-reference-vip-server {
    position: relative !important;
    z-index: 2 !important;

    width: auto !important;

    padding: 76px 38px 35px !important;
    margin: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: #fff !important;
}

.gtba-reference-vip-server > span {
    display: block !important;

    margin: 0 0 11px !important;

    color: #ffe000 !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    text-transform: uppercase !important;
}

.gtba-reference-vip-server h2 {
    max-width: 95% !important;

    margin: 0 0 14px !important;

    color: #fff !important;

    font-family: "Roboto", Arial, sans-serif !important;
    font-size: 23px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;

    text-shadow: 0 2px 3px rgba(0,0,0,.9) !important;
}

.gtba-reference-vip-server p {
    margin: 0 0 23px !important;

    color: #fff !important;

    font-size: 12px !important;
    font-weight: 600 !important;
}

.gtba-reference-vip-server a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 111px !important;
    height: 38px !important;

    padding: 0 18px !important;

    border: 1px solid #25214f !important;
    border-radius: 0 !important;

    background:
        linear-gradient(to top, #55a2f9, #6c55f9) !important;

    box-shadow:
        inset 0 0 1px 1px #645f88,
        0 1px 2px rgba(0,0,0,.55) !important;

    color: #fff !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    text-decoration: none !important;
    text-transform: uppercase !important;
}

/* ------------------------------------------------------------
   STATISTICS
   ------------------------------------------------------------ */

.gtba-reference-stats {
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.gtba-reference-stats > .gtba-reference-title {
    margin-bottom: 13px !important;
}

.gtba-reference-stat {
    position: relative !important;

    box-sizing: border-box !important;

    width: calc(100% - 24px) !important;
    min-height: 43px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin: 0 12px 8px !important;
    padding: 0 13px 0 17px !important;

    overflow: hidden !important;

    background: rgba(25,25,25,.88) !important;

    border: 0 !important;
    border-radius: 3px !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025) !important;

    color: #fff !important;
}

.gtba-reference-stat::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 4px !important;

    border-radius: 2px 0 0 2px !important;
}

.gtba-reference-stat.blue::before {
    background: #268cff !important;
}

.gtba-reference-stat.green::before {
    background: #16c66a !important;
}

.gtba-reference-stat.red::before {
    background: #ff4848 !important;
}

.gtba-reference-stat.yellow::before {
    background: #ffb000 !important;
}

.gtba-reference-stat span {
    color: #fff !important;

    font-size: 12px !important;
    font-weight: 500 !important;
}

.gtba-reference-stat strong {
    color: #fff !important;

    font-size: 14px !important;
    font-weight: 800 !important;
}

/* ------------------------------------------------------------
   BOTTOM SERVER AREA
   ------------------------------------------------------------ */

.gtba-reference-server-panel {
    margin-top: 10px !important;
    padding: 20px 16px 22px !important;
}

.gtba-reference-columns {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap: 20px !important;

    width: 100% !important;
}

.gtba-reference-column {
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* title directly belongs to column */
.gtba-reference-column > .gtba-reference-title {
    margin: 0 !important;
}

/* list is NOT textured - only heading gets stripe */
.gtba-reference-list {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border-left: 1px solid #000 !important;
    border-right: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;

    box-shadow:
        0 1px 2px rgba(0,0,0,.45) !important;
}

/* actual home.php outputs A elements, not LI */
.gtba-reference-list > .gtba-ref-server {
    position: relative !important;

    box-sizing: border-box !important;

    width: 100% !important;
    height: 45px !important;

    display: flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 12px !important;

    overflow: hidden !important;

    background:
        linear-gradient(to top, #1a1b1f, #212528) !important;

    border: 0 !important;
    border-bottom: 1px solid #000 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08) !important;

    color: #eee !important;

    text-decoration: none !important;
}

.gtba-reference-list > .gtba-ref-server:nth-child(even) {
    background:
        linear-gradient(to top, #202326, #272b2e) !important;
}

.gtba-reference-list > .gtba-ref-server:last-child {
    border-bottom: 0 !important;
}

.gtba-reference-list > .gtba-ref-server:hover {
    background:
        linear-gradient(to top, #22262a, #2b3034) !important;
}

/* game icon */
.gtba-ref-game {
    flex: 0 0 17px !important;

    width: 17px !important;
    height: 17px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-right: 8px !important;
}

.gtba-ref-game img {
    display: block !important;

    width: 16px !important;
    height: 16px !important;

    object-fit: contain !important;
}

/* country */
.gtba-ref-country {
    flex: 0 0 18px !important;

    width: 18px !important;

    display: flex !important;
    align-items: center !important;

    margin-right: 8px !important;
}

.gtba-ref-country img {
    display: block !important;

    max-width: 18px !important;
    max-height: 12px !important;
}

/* server name */
.gtba-ref-name {
    min-width: 0 !important;
    flex: 1 1 auto !important;

    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;

    color: #eee !important;

    font-size: 12px !important;
    font-weight: 700 !important;
}

/* players right */
.gtba-ref-players {
    flex: 0 0 auto !important;

    margin-left: 8px !important;

    color: #d9e900 !important;

    font-size: 10px !important;
    font-weight: 800 !important;
}

/* empty list */
.gtba-ref-empty {
    box-sizing: border-box !important;

    min-height: 45px !important;

    display: flex !important;
    align-items: center !important;

    padding: 0 12px !important;

    background:
        linear-gradient(to top, #1a1b1f, #212528) !important;

    color: #888 !important;

    font-size: 11px !important;
}

/* ------------------------------------------------------------
   RESPONSIVE - desktop remains GT.ba proportions
   ------------------------------------------------------------ */

@media (max-width: 900px) {
    .gtba-reference-middle {
        grid-template-columns: 1fr !important;
    }

    .gtba-reference-columns {
        grid-template-columns: 1fr !important;
    }
}


/* ============================================================
   HERO — remove left black shadow / overlay
   ============================================================ */

.gtba-reference-hero-top,
.gtba-reference-soldiers {
    box-shadow: none !important;
}

/* ukloni pseudo-elemente koji prave crnu sjenu preko lijeve strane */
.gtba-reference-hero-top::before,
.gtba-reference-hero-top::after,
.gtba-reference-soldiers::before,
.gtba-reference-soldiers::after {
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

/* hero pozadina ostaje čista bez dodatnog crnog gradijenta */
.gtba-reference-hero-top {
    background-image: none !important;
}


/* ============================================================
   BZCS HERO — FINAL BACKGROUND FIX
   Uklanja jednolicnu crnu plohu iza CS karaktera.
   Vanjski GT.ba dark_wall panel ostaje netaknut.
   ============================================================ */

.gtba-reference-hero-top {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* nema dodatnih overlay/sjena */
.gtba-reference-hero-top::before,
.gtba-reference-hero-top::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* container karaktera mora biti potpuno providan */
.gtba-reference-soldiers {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.gtba-reference-soldiers::before,
.gtba-reference-soldiers::after {
    content: none !important;
    display: none !important;
}

/* sama PNG slika bez sjene/filtera */
.gtba-reference-soldiers img {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}


/* ============================================================
   HERO — ISTI BACKGROUND KAO OSTALI GT.BA BLOKOVI
   ============================================================ */

.gtba-reference-hero {
    background:
        url("../images/common/dark_wall.jpg") repeat !important;

    background-color: #212528 !important;

    box-shadow:
        0 1px 3px rgba(0,0,0,.5),
        inset 0 1px 1px rgba(255,255,255,.2) !important;
}

/*
 * Hero-top ne smije imati svoj zaseban crni background.
 * Mora propustiti dark_wall sa parent hero bloka.
 */
.gtba-reference-hero-top {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* CS PNG ostaje potpuno transparentan */
.gtba-reference-soldiers,
.gtba-reference-soldiers img {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* ukloni eventualne overlaye */
.gtba-reference-hero-top::before,
.gtba-reference-hero-top::after,
.gtba-reference-soldiers::before,
.gtba-reference-soldiers::after {
    content: none !important;
    display: none !important;
}


/* ============================================================
   HERO INFO BOXES — UKLONI SIVU POZADINU
   ============================================================ */

.gtba-reference-hero .gtba-info-box,
.gtba-reference-hero .gtba-warning-box,
.gtba-reference-hero-bottom > div,
.gtba-reference-info,
.gtba-reference-warning {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* zadrzi samo okvir boxova */
.gtba-reference-hero .gtba-info-box,
.gtba-reference-hero .gtba-warning-box,
.gtba-reference-hero-bottom > div,
.gtba-reference-info,
.gtba-reference-warning {
    border: 1px solid #090b0c !important;
    box-shadow: none !important;
}


/* ============================================================
   HERO INFO BOXES — BEZ CRTA / BORDERA
   ============================================================ */

.gtba-reference-hero .gtba-info-box,
.gtba-reference-hero .gtba-warning-box,
.gtba-reference-hero-bottom > div,
.gtba-reference-info,
.gtba-reference-warning {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* ukloni eventualnu srednju liniju */
.gtba-reference-hero-bottom,
.gtba-reference-hero-bottom > div:first-child,
.gtba-reference-hero-bottom > div:last-child {
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}


/* ============================================================
   STATISTICS — MATCH GAMETRACKER.BA
   ============================================================ */

/* cijeli desni statistics blok */
.gtba-stats,
.gtba-statistics,
.gtba-statistics-box {
    padding: 0 14px 14px 14px !important;
    box-sizing: border-box !important;
}

/* naslov STATISTICS */
.gtba-stats-title,
.gtba-statistics-title,
.gtba-statistics .gtba-section-title,
.gtba-statistics-box .gtba-section-title {
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    box-sizing: border-box !important;
}

/* lista statistike */
.gtba-stats-list,
.gtba-statistics-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* svaki red */
.gtba-stat-row,
.gtba-stat-item,
.gtba-statistics-list > div {
    width: 100% !important;
    min-height: 43px !important;
    margin: 0 0 9px 0 !important;
    padding: 0 14px 0 17px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    box-sizing: border-box !important;

    background: rgba(20, 20, 20, 0.82) !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;

    border-radius: 4px !important;
    box-shadow: none !important;
}

/* zadnji red nema nepotreban donji margin */
.gtba-stat-row:last-child,
.gtba-stat-item:last-child,
.gtba-statistics-list > div:last-child {
    margin-bottom: 0 !important;
}

/* naziv: Users / Servers / Active... */
.gtba-stat-row span:first-child,
.gtba-stat-item span:first-child,
.gtba-statistics-list > div span:first-child {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 43px !important;
    color: #fff !important;
}

/* broj desno */
.gtba-stat-row span:last-child,
.gtba-stat-item span:last-child,
.gtba-statistics-list > div span:last-child {
    margin-left: auto !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 43px !important;
    color: #fff !important;
    text-align: right !important;
}

/* ============================================================
   BZCS — STATISTICS FINAL GT.BA MATCH
   ============================================================ */

/* cijeli statistics blok */
.gtba-reference-stats {
    box-sizing: border-box !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* naslov */
.gtba-reference-stats > .gtba-reference-title {
    width: 100% !important;
    min-height: 39px !important;
    margin: 0 0 13px 0 !important;
    box-sizing: border-box !important;
}

/* REDOVI — isti oblik/proporcije kao GameTracker.ba */
.gtba-reference-stats .gtba-reference-stat {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    box-sizing: border-box !important;

    width: calc(100% - 24px) !important;
    height: 43px !important;
    min-height: 43px !important;

    margin: 0 12px 8px 12px !important;
    padding: 0 13px 0 17px !important;

    background: #202020 !important;

    border: 0 !important;
    border-left: 4px solid #2587ff !important;
    border-radius: 3px !important;

    box-shadow: none !important;
    overflow: hidden !important;
}

/* zadnji red */
.gtba-reference-stats .gtba-reference-stat:last-child {
    margin-bottom: 0 !important;
}

/* Users */
.gtba-reference-stats .gtba-reference-stat:nth-of-type(1) {
    border-left-color: #2587ff !important;
}

/* Servers */
.gtba-reference-stats .gtba-reference-stat:nth-of-type(2) {
    border-left-color: #2587ff !important;
}

/* Active */
.gtba-reference-stats .gtba-reference-stat:nth-of-type(3) {
    border-left-color: #20c96b !important;
}

/* Offline */
.gtba-reference-stats .gtba-reference-stat:nth-of-type(4) {
    border-left-color: #ff4b4b !important;
}

/* Players / VIP */
.gtba-reference-stats .gtba-reference-stat:nth-of-type(5) {
    border-left-color: #ffae00 !important;
}

/* tekst lijevo */
.gtba-reference-stats .gtba-reference-stat > span:first-child {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 43px !important;

    color: #fff !important;
}

/* broj desno */
.gtba-reference-stats .gtba-reference-stat > span:last-child {
    display: block !important;

    margin: 0 0 0 auto !important;
    padding: 0 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 43px !important;

    color: #fff !important;
    text-align: right !important;
}

/* ako su vrijednosti STRONG umjesto SPAN */
.gtba-reference-stats .gtba-reference-stat > strong {
    display: block !important;

    margin: 0 0 0 auto !important;
    padding: 0 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 43px !important;

    color: #fff !important;
    text-align: right !important;
}


/* ============================================================
   STATISTICS — FINAL PIXEL MATCH GT.BA
   ============================================================ */

.gtba-reference-stats {
    box-sizing: border-box !important;
    margin: 0 !important;

    /* GT.ba ima unutrašnji prostor oko liste */
    padding: 0 13px 13px 13px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Header mora izaći do pune širine kolone */
.gtba-reference-stats > .gtba-reference-title {
    width: calc(100% + 26px) !important;
    min-height: 39px !important;

    margin:
        0
        -13px
        13px
        -13px !important;

    box-sizing: border-box !important;
}

/* GT.ba red */
.gtba-reference-stats .gtba-reference-stat {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    box-sizing: border-box !important;

    width: 100% !important;
    height: 43px !important;
    min-height: 43px !important;

    margin: 0 0 8px 0 !important;
    padding: 0 14px 0 16px !important;

    background: #202020 !important;

    border: 0 !important;
    border-left: 4px solid #2587ff !important;

    border-radius: 3px !important;
    box-shadow: none !important;

    overflow: hidden !important;
}

.gtba-reference-stats .gtba-reference-stat:last-child {
    margin-bottom: 0 !important;
}

/* BOJE CRTA */
.gtba-reference-stats .gtba-reference-stat:nth-child(2) {
    border-left-color: #2587ff !important;
}

.gtba-reference-stats .gtba-reference-stat:nth-child(3) {
    border-left-color: #2587ff !important;
}

.gtba-reference-stats .gtba-reference-stat:nth-child(4) {
    border-left-color: #20c96b !important;
}

.gtba-reference-stats .gtba-reference-stat:nth-child(5) {
    border-left-color: #ff4b4b !important;
}

.gtba-reference-stats .gtba-reference-stat:nth-child(6) {
    border-left-color: #ffae00 !important;
}

/* LABEL */
.gtba-reference-stats .gtba-reference-stat > span:first-child {
    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;

    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 43px !important;
}

/* VALUE */
.gtba-reference-stats .gtba-reference-stat > span:last-child,
.gtba-reference-stats .gtba-reference-stat > strong {
    margin: 0 0 0 auto !important;
    padding: 0 !important;

    color: #fff !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 43px !important;

    text-align: right !important;
}


/* ===== STATISTICS WIDTH — GT.BA FINAL ===== */

.gtba-reference-stats {
    padding-left: 26px !important;
    padding-right: 26px !important;
}

/* STATISTICS naslov ostaje pune širine */
.gtba-reference-stats > .gtba-reference-title {
    width: calc(100% + 52px) !important;
    margin-left: -26px !important;
    margin-right: -26px !important;
}

/* redovi su uži kao na GameTracker.ba */
.gtba-reference-stats .gtba-reference-stat {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ===== STATISTICS GT.BA — SPACING FINISH ===== */

.gtba-reference-stats > .gtba-reference-title {
    margin-bottom: 12px !important;
}

.gtba-reference-stats .gtba-reference-stat {
    height: 43px !important;
    min-height: 43px !important;
    margin-bottom: 8px !important;
}

.gtba-reference-stats .gtba-reference-stat:last-child {
    margin-bottom: 0 !important;
}


/* ============================================================
   STATISTICS — HEADER + ROWS ISTA SIRINA
   ============================================================ */

.gtba-reference-stats {
    width: 100% !important;
    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* STATISTICS HEADER */
.gtba-reference-stats > .gtba-reference-title {
    display: block !important;

    width: 100% !important;
    box-sizing: border-box !important;

    margin: 0 0 13px 0 !important;
}

/* SVI REDOVI — TACNO ISTA SIRINA KAO HEADER */
.gtba-reference-stats .gtba-reference-stat {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;

    height: 43px !important;
    min-height: 43px !important;

    margin: 0 0 8px 0 !important;
    padding: 0 14px 0 16px !important;

    background: #202020 !important;

    border: 0 !important;
    border-left: 4px solid #2587ff !important;
    border-radius: 3px !important;

    box-shadow: none !important;
}

/* BOJE */
.gtba-reference-stats .gtba-reference-stat:nth-child(2) {
    border-left-color: #2587ff !important;
}

.gtba-reference-stats .gtba-reference-stat:nth-child(3) {
    border-left-color: #2587ff !important;
}

.gtba-reference-stats .gtba-reference-stat:nth-child(4) {
    border-left-color: #20c96b !important;
}

.gtba-reference-stats .gtba-reference-stat:nth-child(5) {
    border-left-color: #ff4b4b !important;
}

.gtba-reference-stats .gtba-reference-stat:nth-child(6) {
    border-left-color: #ffae00 !important;
}

.gtba-reference-stats .gtba-reference-stat:last-child {
    margin-bottom: 0 !important;
}