/* ==========================================================================
   TV.html rate-board theme
   Black & gold / white & black-bordered look, based on the reference design.
   Scoped to the rate table on TV.html only (does not affect other pages
   since LiveRates3.js itself is left untouched).

   Sizing is fluid (clamp/vw based) so the board reads well from a phone
   in hand up to a large TV/monitor viewed from across a room, plus a few
   fixed breakpoints to widen the board itself on very large screens.
   ========================================================================== */

.tv-board-container {
    width: 100%;
}

/* ---- Logo header bar: theme.css gives #header .header-container a fixed
        104px min-height regardless of logo size - shrink it to match the
        smaller logos below, on every breakpoint. ---- */
#header .header-container {
    min-height: 52px;
}

#header .header-row.py-2 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* ---- Desktop/TV: the shrink above is a bit too tight on large screens -
        bump the header bar and logos back up somewhat (not all the way to
        the original 95px/60px/104px). ---- */
@media (min-width: 992px) {
    #header .header-container {
        min-height: 76px;
    }

    #header .header-row.py-2 {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .tv-header-logo1 {
        height: 68px !important;
    }

    .tv-header-logo2 {
        height: 42px !important;
    }
}

.tv-rate-board {
    width: 100%;
    font-family: 'Merriweather', serif;
    box-sizing: border-box;
}

/* ---- Gap between the ticker table (gvData_top3) and the product table
        (gvData): custom.css's shared Trending_Table_Root rule gives 5px/2px
        per side (10px/4px total depending on breakpoint) - pin it to a flat
        4px here, scoped to this board only. ---- */
.tv-rate-board table.Trending_Table_Root tr td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.tv-rate-board table.Trending_Table_Root tr td:has(#gvData_top3) {
    padding-bottom: 4px !important;
}

/* ---- 5-box header row: Gold Comex / Silver Comex / INR / Gold Future / Silver Future ---- */
.tv-headrow-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.tv-headrow-table td.tv-head-cell {
    border: clamp(2px, 0.2vw, 4px) solid #000;
    background: #fff;
    text-align: center;
    vertical-align: middle;
    padding: clamp(4px, 0.5vw, 12px) clamp(2px, 0.3vw, 8px);
}

.tv-head-name {
    font-weight: 700;
    color: #000;
    font-size: clamp(8px, 1.1vw, 16px);
    line-height: 1.25;
    text-transform: uppercase;
}

.tv-head-value {
    font-weight: 700;
    font-size: clamp(13px, 2.3vw, 36px);
    margin-top: clamp(2px, 0.3vw, 8px);
}

.tv-head-range {
    font-size: clamp(7px, 0.7vw, 11px);
    font-weight: 600;
    color: #444;
    margin-top: clamp(1px, 0.2vw, 4px);
}

/* ---- Column caption bar (PRODUCT / BUY / SELL) ---- */
.tv-cols-bar-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: clamp(6px, 0.1vw, 16px);
}

.tv-cols-bar {
    background: #000;
    color: #b99141;
    font-weight: 700;
    font-size: clamp(9px, 1.2vw, 18px);
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: clamp(2px, 0.3vw, 6px) clamp(2px, 0.4vw, 7px);
    text-align: center;
    vertical-align: middle;
}

/* ---- Product rows ---- */
.tv-rows-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.tv-rows-table tr {
    cursor: default;
}

.tv-rows-table td {
    border: clamp(2px, 0.2vw, 4px) solid #000;
    border-top: none;
    background: #fff;
    vertical-align: middle;
}

.tv-row-name {
    width: 50%;
    padding: clamp(4px, 0.5vw, 12px) clamp(5px, 0.7vw, 14px);
    text-align: left;
    font-weight: 700;
    font-size: clamp(14px, 2.6vw, 40px);
    color: #000;
    text-transform: uppercase;
    vertical-align: middle;
}

.tv-row-buy,
.tv-row-sell {
    width: 25%;
    padding: clamp(4px, 0.5vw, 12px) clamp(2px, 0.3vw, 6px);
    text-align: center;
    vertical-align: middle;
}

.tv-row-price {
    display: block;
    font-size: clamp(13px, 2.3vw, 38px);
    font-weight: 700;
    line-height: 1.15;
}

.tv-row-range {
    display: block;
    font-size: clamp(8px, 0.95vw, 15px);
    font-weight: 600;
    color: #333;
    line-height: 1.15;
    margin-top: clamp(2px, 0.3vw, 6px);
}

/* ---- Up / down / flat states ---- */
.tv-up {
    color: #0a8a3c;
}

.tv-down {
    color: #c0102a;
}

.tv-flat {
    color: #000;
}

/* ---- Small phones: stack the 5 header boxes so nothing gets squeezed ---- */
@media screen and (max-width: 480px) {
    .tv-headrow-table,
    .tv-headrow-table tbody,
    .tv-headrow-table tr {
        display: block;
        width: 100%;
    }

    .tv-headrow-table td.tv-head-cell {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ---- Tablet, desktop, laptop and TV alike: let the board run edge-to-edge
        instead of staying capped at Bootstrap's ~66% column / ~1140px
        container. Gated at 768px (the point where col-md-8 kicks in and
        would otherwise shrink it) rather than a large-TV-only breakpoint,
        so it stays full width at ordinary desktop/laptop viewport sizes too. ---- */
@media screen and (min-width: 768px) {
    .tv-board-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    .tv-rate-board {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ---- Secondary nav bar (Home / Live Rates / Television View / ...) on the
        maroon strip: cut its height roughly in half on every breakpoint by
        shrinking the paddings/sizes that actually drive its height, instead
        of a single media query (the #navhead id gives enough specificity to
        beat the theme's per-breakpoint rules without duplicating them). ---- */
#navhead .header-nav-main nav > ul > li > a {
    padding: 5px 8px !important;
    line-height: 1.1 !important;
}

#navhead .btn-5 {
    padding: 7px 20px !important;
}

#navhead .header-btn-collapse-nav {
    width: 18px !important;
    height: 18px !important;
    margin: 7px 0 !important;
}

/* ---- Mobile/tablet: nav is collapsed behind the hamburger, so the
        button's own size/margin is what drives the maroon bar's height
        here - shrink it further than the shared rule above. ---- */
@media (max-width: 991px) {
    #navhead .header-btn-collapse-nav {
        width: 14px !important;
        height: 14px !important;
        margin: 4px 0 4px 2rem !important;
    }
}