/* =========================
   FONTS
========================= */
@font-face {
    font-family: 'CADINCondCS';
    src: url('../fonts/CADINCondCSBold.eot');
    src: url('../fonts/CADINCondCSBold.eot?#iefix') format('embedded-opentype'), url('../fonts/CADINCondCSBold.woff2') format('woff2'), url('../fonts/CADINCondCSBold.woff') format('woff'), url('../fonts/CADINCondCSBold.ttf') format('truetype'), url('../fonts/CADINCondCSBold.svg#CADINCondCSBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* =========================
   GLOBAL LAYOUT
========================= */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
.container-fluid {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
body {
    font-family: 'CADINCondCS', Arial, Helvetica, sans-serif;
    font-size: 16px;
    display: flex;
    flex-direction: column;
}

/* =========================
   HEADER
========================= */
header {
    width: 100%;
    background: #007A84;
    display: flex;
    align-items: center;
}

    header .navbar {
        width: 166px;
        padding: 0;
    }

    header .navbar-brand {
        margin: 0;
        padding: 0;
    }

        header .navbar-brand img {
            height: 50px;
        }

/* =========================
   MAIN CONTENT
========================= */
.main-content {
    flex: 1;
    display: flex;
}

.counter_setup {
    flex: 1;
    display: flex;
}

    .counter_setup .row {
        flex: 1;
        width: 100%;
        margin: 0;
    }

    .counter_setup .col-md-6 {
        display: flex;
        flex-direction: column;
        padding: 0;
    }

        /* Add divider between columns */
        .counter_setup .col-md-6:first-child {
            border-right: 1px solid #231f20;
        }

/* =========================
   LEFT SIDE (TOKEN LIST)
========================= */
.token_list {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .token_list ul {
        list-style: none;
        padding: 0;
        margin: 0;
        flex: 1;
        overflow-y: auto;
    }

        .token_list ul li {
            display: flex;
            align-items: center;
            width: 100%;
            border-bottom: 1px solid #000;
            padding: 8px 0;
            font-size: 56px;
            color: #000;
        }

            /* Active Token */
            .token_list ul li.active {
                background-color: var(--liberty-secondary);
                color: var(--liberty-white);
            }

/* Token Columns */
.token_nm {
    width: calc(100% - 230px);
    padding-left: 50px;
}

.token_ar {
    width: 110px;
}

.token_num {
    width: 120px;
    text-align: center;
}


/* =========================
   TOKEN HEADER
========================= */
.token_header {
    display: flex;
    background: #F4F4F4;
    border-bottom: 1px solid #231f20;
}

    .token_header p {
        margin: 0;
        line-height: 42px;
        font-size: 30px;
        font-weight: 600;
        color: #606060;
    }

        .token_header p:first-child {
            width: calc(100% - 120px);
            padding-left: 50px;
        }

        .token_header p:last-child {
            width: 120px;
            text-align: center;
        }

/* =========================
   RIGHT PANEL (25% / 75%)
========================= */
.current-token {
    flex: 0 0 25%;
    padding: 10px 40px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #ddd;
}

    .current-token .label {
        font-size: 30px;
        font-weight: bold;
        color: #231F20;
    }

    .current-token .token,
    .current-token .counter {
        font-size: 75px;
        font-weight: bold;
        color: #007A84;
    }

/* =========================
   MEDIA AREA (ADS)
========================= */
#ads {
    flex: 1; /* Remaining 75% */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFF;
    overflow: hidden;
}

    /* Image & Video Scaling */
    #ads img,
    #ads video {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* change to cover if needed */
    }

/* =========================
   FOOTER
========================= */
footer {
    height: 50px;
    background: #007A84;
    flex-shrink: 0;
}