/**
 * Live Bullion Rate Board
 */

.bullion-board-section {
    padding: 30px 0 10px;
}

.bullion-table {
    width: 100%;
    margin-bottom: 18px;
    border-collapse: separate;
    border-spacing: 0;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}

.bullion-table thead th {
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 14px 12px;
}

.bullion-table thead th:first-child {
    border-radius: 8px 0 0 8px;
}

.bullion-table thead th:last-child {
    border-radius: 0 8px 8px 0;
}

/* Plum gradient, lighter at the top -- same family as --color-primary. */
.bullion-table tbody {
    background: linear-gradient(180deg, #7c3569 0%, #5a2450 100%);
}

.bullion-table tbody tr:first-child td:first-child {
    border-radius: 8px 0 0 0;
}

.bullion-table tbody tr:first-child td:last-child {
    border-radius: 0 8px 0 0;
}

.bullion-table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 8px;
}

.bullion-table tbody tr:last-child td:last-child {
    border-radius: 0 0 8px 0;
}

.bullion-table tbody td {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    padding: 16px 12px;
    vertical-align: middle;
}

.bullion-table .col-name {
    text-align: left;
    padding-left: 24px;
    font-weight: 700;
}

.bullion-table thead .col-name {
    text-align: left;
}

.bullion-table .muted {
    color: rgba(255, 255, 255, 0.55);
}

/* Bid/ask chips: green when the metal is up on previous close, red when down. */
.rate-pill {
    display: inline-block;
    min-width: 108px;
    padding: 8px 14px;
    border-radius: 5px;
    font-weight: 700;
    color: #fff;
}

.rate-pill.up {
    background-color: #1a9c4c;
}

.rate-pill.down {
    background-color: #d92020;
}

.bullion-note {
    margin: 0;
    color: #777;
    font-size: 0.78rem;
    text-align: right;
}

@media (max-width: 767px) {
    .bullion-table thead th,
    .bullion-table tbody td {
        padding: 12px 8px;
        font-size: 0.95rem;
    }

    .bullion-table .col-name {
        padding-left: 12px;
        font-size: 0.85rem;
    }

    .bullion-table .hide-sm {
        display: none;
    }

    .rate-pill {
        min-width: 0;
        padding: 6px 10px;
    }

    .bullion-note {
        text-align: left;
    }
}