/* =========================================================
   FAROELOTTO GLOBAL
   ========================================================= */

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

body {
    background:
        radial-gradient(
            circle at top right,
            rgba(245, 196, 81, 0.06),
            transparent 30%
        ),
        radial-gradient(
            circle at top left,
            rgba(56, 189, 248, 0.04),
            transparent 25%
        ),
        var(--color-bg);

    color: var(--color-text);

    font-family: var(--font-main);
    font-size: var(--font-md);
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {
    width: min(
        calc(100% - 40px),
        var(--container-width)
    );

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


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

.section {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}


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

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);

    margin-bottom: var(--space-lg);
}

.section-title {
    color: var(--color-white);

    font-size: var(--font-xl);
    font-weight: 700;
    line-height: 1.3;
}

.section-subtitle {
    margin-top: 4px;

    color: var(--color-text-muted);

    font-size: var(--font-sm);
}


/* =========================================================
   CARD BASE
   ========================================================= */

.card {
    background: linear-gradient(
        145deg,
        var(--color-bg-card),
        var(--color-bg-soft)
    );

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

    border-radius: var(--radius-lg);

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

    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal);
}

.card:hover {
    border-color: var(--color-border);

    box-shadow:
        var(--shadow-card),
        var(--shadow-gold);
}


/* =========================================================
   GOLD TEXT
   ========================================================= */

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

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

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

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


/* =========================================================
   BUTTON BASE
   ========================================================= */

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 42px;

    padding: 0 18px;

    border-radius: var(--radius-sm);

    font-size: var(--font-sm);
    font-weight: 700;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.btn:active {
    transform: translateY(1px);
}


/* Gold Button */

.btn-gold {
    background: linear-gradient(
        135deg,
        var(--color-gold-light),
        var(--color-gold)
    );

    color: #111;

    box-shadow:
        0 6px 20px rgba(245, 196, 81, 0.18);
}

.btn-gold:hover {
    box-shadow:
        0 8px 28px rgba(245, 196, 81, 0.30);
}


/* Dark Button */

.btn-dark {
    background: var(--color-bg-card);

    color: var(--color-text);

    border: 1px solid var(--color-border-soft);
}

.btn-dark:hover {
    border-color: var(--color-border);
}


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

.badge {
    display: inline-flex;

    align-items: center;
    gap: 7px;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: var(--font-xs);
    font-weight: 700;

    letter-spacing: 0.3px;
}

.badge-live {
    background: rgba(239, 68, 68, 0.10);

    border: 1px solid rgba(239, 68, 68, 0.25);

    color: #ff7777;
}

.badge-live::before {
    content: "";

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--color-danger);

    box-shadow:
        0 0 10px rgba(239, 68, 68, 0.7);
}


/* =========================================================
   DIVIDER
   ========================================================= */

.divider {
    width: 100%;
    height: 1px;

    background: var(--color-border-soft);
}


/* =========================================================
   VISUALLY HIDDEN
   ========================================================= */

.visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


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

@media (max-width: 768px) {

    .container {
        width: min(
            calc(100% - 24px),
            var(--container-width)
        );
    }

    .section {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }

    .section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .section-title {
        font-size: var(--font-lg);
    }
}

/* =========================================================
   RESULT DASHBOARD GRID
   ========================================================= */

/* =========================================================
   RESULT DASHBOARD GRID
   ========================================================= */

.result-dashboard-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(300px, 0.9fr)
        minmax(300px, 1fr);

    gap: var(--content-gap);

    align-items: stretch;
}


/*
|--------------------------------------------------------------------------
| Dashboard sections
|--------------------------------------------------------------------------
*/

.result-dashboard-grid .live-result-section,
.result-dashboard-grid .next-draw-section,
.result-dashboard-grid .live-updates-section {
    padding-top: var(--space-xl);
}


/*
|--------------------------------------------------------------------------
| Keep cards at equal height
|--------------------------------------------------------------------------
*/

.result-dashboard-grid .live-result-card,
.result-dashboard-grid .next-draw-card,
.result-dashboard-grid .live-updates-card {
    height: 100%;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1200px) {

    .result-dashboard-grid {
        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(280px, 0.9fr);

    }

    .result-dashboard-grid
    .live-updates-section {
        grid-column: 1 / -1;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 1000px) {

    .result-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .result-dashboard-grid
    .live-updates-section {
        grid-column: auto;
    }

}


/*
|--------------------------------------------------------------------------
| Remove duplicated top spacing inside dashboard grid
|--------------------------------------------------------------------------
*/

.result-dashboard-grid .live-result-section,
.result-dashboard-grid .next-draw-section {
    padding-top: var(--space-xl);
}


@media (max-width: 1000px) {

    .result-dashboard-grid {
        grid-template-columns: 1fr;
    }

}