/* =========================================
   FOXBET
   GLOBAL SPORTSBOOK UI
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

    /* Main */
    --bg: #071a2b;
    --bg-dark: #051321;
    --bg-light: #0b2236;

    /* Header / Navigation */
    --header: #092238;
    --nav: #071c2d;

    /* Cards */
    --card: #0d2940;
    --card-light: #12334c;
    --card-hover: #163b56;

    /* Borders */
    --border: #1a4059;
    --border-light: #24516b;

    /* Text */
    --text: #ffffff;
    --text-secondary: #b5c5d0;
    --text-muted: #7891a2;

    /* Brand */
    --green: #35c759;
    --green-dark: #229a42;
    --green-light: #54d873;

    /* Blue */
    --blue: #1688c9;
    --blue-light: #27a9e8;

    /* Status */
    --red: #ef4d57;
    --yellow: #f3c74b;
    --orange: #f59d3d;

    /* Odds */
    --odd: #173b53;
    --odd-hover: #20516c;
    --odd-selected: #247d4b;

    /* Radius */
    --radius-small: 3px;
    --radius: 5px;
    --radius-large: 7px;

    /* Shadows */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

    /* Layout */
    --max-width: 1400px;
    --header-height: 56px;
    --bottom-nav-height: 60px;
}

/* =========================================
   HTML
========================================= */

html {
    background: var(--bg);
    color-scheme: dark;
    scroll-behavior: smooth;
}

/* =========================================
   BODY
========================================= */

body {

    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #061725 0%,
            #071a2b 45%,
            #061827 100%
        );

    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    line-height: 1.4;

    overflow-x: hidden;

    padding-bottom:
        var(--bottom-nav-height);
}

/* =========================================
   LINKS
========================================= */

a {
    color: inherit;
    text-decoration: none;
}

/* =========================================
   BUTTONS
========================================= */

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

button {
    border: 0;
    outline: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* =========================================
   IMAGES
========================================= */

img {
    display: block;
    max-width: 100%;
}

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

.main-content {

    width: 100%;

    max-width:
        var(--max-width);

    margin: 0 auto;

    padding:
        12px;
}

/* =========================================
   PAGE TITLE
========================================= */

.page-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 12px;
}

.page-title h1 {

    font-size: 20px;

    line-height: 1.2;

    font-weight: 700;
}

.page-title small {

    display: block;

    margin-bottom: 2px;

    color: var(--text-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}

/* =========================================
   GENERIC CARD
========================================= */

.card {

    background:
        var(--card);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);
}

/* =========================================
   GENERIC SECTION
========================================= */

.section {

    margin-bottom: 12px;
}

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

.section-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 42px;

    padding:
        0 12px;

    background:
        var(--header);

    border:
        1px solid var(--border);

    border-bottom: 0;

    border-radius:
        var(--radius)
        var(--radius)
        0
        0;
}

.section-header h2 {

    font-size: 14px;

    font-weight: 700;
}

.section-header .section-action {

    color:
        var(--green);

    font-size: 12px;

    font-weight: 700;
}

/* =========================================
   SCROLLBAR
========================================= */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background:
        var(--bg-dark);
}

::-webkit-scrollbar-thumb {

    background:
        #1c4057;

    border-radius:
        10px;
}

::-webkit-scrollbar-thumb:hover {

    background:
        #285670;
}

/* =========================================
   TEXT HELPERS
========================================= */

.text-green {
    color: var(--green);
}

.text-red {
    color: var(--red);
}

.text-yellow {
    color: var(--yellow);
}

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

.text-secondary {
    color: var(--text-secondary);
}

/* =========================================
   BADGES
========================================= */

.badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 20px;

    padding:
        0 7px;

    border-radius:
        3px;

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;
}

.badge-live {

    color: #ffffff;

    background:
        var(--red);
}

.badge-green {

    color: #ffffff;

    background:
        var(--green-dark);
}

/* =========================================
   LIVE DOT
========================================= */

.live-dot {

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    background:
        var(--red);

    border-radius:
        50%;

    box-shadow:
        0 0 0 3px
        rgba(239, 77, 87, 0.12);
}

/* =========================================
   LOADING
========================================= */

.loading {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 120px;

    color:
        var(--text-muted);

    font-size: 13px;
}

.loading-spinner {

    width: 18px;
    height: 18px;

    border:
        2px solid
        rgba(255, 255, 255, 0.12);

    border-top-color:
        var(--green);

    border-radius:
        50%;

    animation:
        foxbet-spin
        0.8s linear infinite;
}

@keyframes foxbet-spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================================
   EMPTY STATE
========================================= */

.empty-state {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    min-height: 130px;

    padding: 20px;

    color:
        var(--text-muted);

    text-align: center;
}

.empty-state-icon {

    font-size: 30px;

    opacity: 0.45;
}

.empty-state strong {

    color:
        var(--text-secondary);

    font-size: 14px;
}

.empty-state span {

    font-size: 12px;
}

/* =========================================
   DESKTOP
========================================= */

@media (min-width: 768px) {

    body {
        padding-bottom: 0;
    }

    .main-content {
        padding: 16px;
    }

}

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

@media (max-width: 480px) {

    body {
        font-size: 13px;
    }

    .main-content {
        padding: 8px;
    }

    .page-title h1 {
        font-size: 18px;
    }

}

/* =========================================
   VERY SMALL DEVICES
========================================= */

@media (max-width: 360px) {

    body {
        font-size: 12px;
    }

    .main-content {
        padding: 6px;
    }

}