/* =========================================================
   MARKET PAGES UPGRADE
   currencies.php + metals.php
========================================================= */

.market-hero{
    margin:56px 0 26px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:28px;
    align-items:end;
}

.market-hero h1{
    max-width:850px;
}

.market-status{
    min-width:255px;
}

.hero-live-tape{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
}

.mini-live-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 13px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.13);
    color:#dce8f4;
    font-size:13px;
    white-space:nowrap;
}

.mini-live-chip i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#00d084;
    box-shadow:0 0 18px rgba(0,208,132,.8);
    animation:miniPulse 1.4s infinite;
}

@keyframes miniPulse{
    0%{transform:scale(.9);opacity:.7}
    50%{transform:scale(1.25);opacity:1}
    100%{transform:scale(.9);opacity:.7}
}

.market-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:18px;
}

.summary-card{
    padding:22px;
    min-height:150px;
}

.summary-card small{
    color:#a8b3c2;
}

.summary-card strong{
    display:block;
    margin:12px 0 8px;
    font-size:clamp(22px,2.4vw,30px);
    color:#fff;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.summary-card span{
    color:#a8b3c2;
    font-size:13px;
}

.market-toolbar{
    display:grid;
    grid-template-columns:2fr 1fr 1fr auto;
    gap:12px;
    padding:18px;
    margin:18px 0;
    align-items:end;
}

.toolbar-field{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.toolbar-field label{
    color:#dce8f4;
    font-weight:bold;
    font-size:13px;
}

.toolbar-field.wide{
    min-width:0;
}

.market-btn{
    border:0;
    cursor:pointer;
    min-height:52px;
    padding:0 20px;
    border-radius:18px;
    color:white;
    font-weight:900;
    background:
        radial-gradient(circle at top right,rgba(255,255,255,.16),transparent 35%),
        linear-gradient(135deg,#007a3d,#004d2a);
    box-shadow:0 16px 35px rgba(0,122,61,.28);
    transition:.25s ease;
}

.market-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
}

.market-ticker{
    padding:0;
    overflow:hidden;
    height:58px;
    display:flex;
    align-items:center;
    gap:12px;
    margin:18px 0;
}

.ticker-label{
    height:100%;
    display:flex;
    align-items:center;
    padding:0 18px;
    background:linear-gradient(135deg,#007a3d,#004d2a);
    color:white;
    font-weight:900;
    white-space:nowrap;
    position:relative;
    z-index:2;
}

.ticker-track{
    display:flex;
    gap:13px;
    align-items:center;
    overflow:hidden;
    white-space:nowrap;
    min-width:0;
}

.ticker-track span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.09);
    color:#dce8f4;
    font-size:13px;
}

.ticker-track b{
    color:#fff;
}

.advanced-table-card{
    padding:0;
    overflow:hidden;
    margin-top:18px;
}

.table-headline{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center;
    padding:22px;
    border-bottom:1px solid rgba(255,255,255,.09);
}

.table-headline h2{
    margin:0 0 6px;
}

.table-headline p{
    margin:0;
    color:#a8b3c2;
    font-size:14px;
}

.table-headline > span{
    padding:9px 13px;
    border-radius:999px;
    color:#8cffbd;
    background:rgba(0,184,102,.12);
    border:1px solid rgba(0,184,102,.28);
    white-space:nowrap;
    font-weight:bold;
}

.table-scroll{
    overflow-x:auto;
}

.advanced-table{
    min-width:1120px;
}

.advanced-table th{
    position:sticky;
    top:0;
    z-index:2;
}

.asset-cell{
    display:flex;
    align-items:center;
    gap:12px;
}

.asset-icon{
    width:42px;
    height:42px;
    border-radius:16px;
    display:grid;
    place-items:center;
    background:
        radial-gradient(circle at top right,rgba(255,255,255,.2),transparent 32%),
        linear-gradient(135deg,rgba(0,122,61,.75),rgba(0,0,0,.45));
    border:1px solid rgba(255,255,255,.12);
    font-weight:900;
    color:#fff;
    flex:0 0 auto;
}

.asset-icon.gold-icon{
    background:
        radial-gradient(circle at top right,rgba(255,255,255,.24),transparent 32%),
        linear-gradient(135deg,rgba(245,197,66,.7),rgba(90,55,0,.65));
}

.asset-name strong{
    display:block;
    color:white;
    margin-bottom:4px;
}

.asset-name small{
    color:#a8b3c2;
}

.type-chip{
    display:inline-flex;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);
    color:#dce8f4;
    font-size:12px;
}

.change-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 11px;
    border-radius:999px;
    font-weight:bold;
    font-size:13px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.08);
    white-space:nowrap;
}

.change-pill.up{
    color:#8cffbd;
    background:rgba(0,184,102,.15);
    border-color:rgba(0,184,102,.35);
}

.change-pill.down{
    color:#ff9aaa;
    background:rgba(206,17,38,.15);
    border-color:rgba(206,17,38,.35);
}

.change-pill.flat{
    color:#dce8f4;
    background:rgba(255,255,255,.08);
}

.change-pill .arrow{
    font-size:14px;
}

.price-main{
    font-weight:900;
    color:#fff;
}

.price-sub{
    display:block;
    color:#a8b3c2;
    font-size:12px;
    margin-top:3px;
}

.row-up td{
    background:linear-gradient(90deg,rgba(0,184,102,.07),transparent 24%);
}

.row-down td{
    background:linear-gradient(90deg,rgba(206,17,38,.07),transparent 24%);
}

.price-flash{
    animation:priceFlash .65s ease;
}

@keyframes priceFlash{
    0%{filter:brightness(1);transform:translateY(0)}
    35%{filter:brightness(1.9);transform:translateY(-2px)}
    100%{filter:brightness(1);transform:translateY(0)}
}

/* Metals focus */

.metal-focus-grid{
    display:grid;
    grid-template-columns:2fr repeat(3,1fr);
    gap:16px;
    margin-bottom:18px;
}

.gold-focus{
    padding:26px;
    min-height:190px;
    background:
        radial-gradient(circle at top right,rgba(245,197,66,.28),transparent 35%),
        linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.052));
}

.gold-focus h2{
    margin:8px 0 16px;
    font-size:34px;
}

.gold-focus strong{
    display:block;
    font-size:clamp(38px,5vw,62px);
    line-height:1;
    color:white;
}

.focus-bottom{
    margin-top:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.gold-cards-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin:18px 0;
}

.mini-gold-card{
    padding:20px;
}

.mini-gold-card strong{
    display:block;
    margin:10px 0;
    font-size:24px;
    color:#fff;
}

.gold-ticker .ticker-label{
    background:linear-gradient(135deg,#af7a00,#5d3f00);
}

@media(max-width:1100px){
    .market-summary-grid,
    .metal-focus-grid,
    .gold-cards-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .gold-focus{
        grid-column:1 / -1;
    }

    .market-toolbar{
        grid-template-columns:1fr 1fr;
    }

    .toolbar-field.wide{
        grid-column:1 / -1;
    }

    .market-btn{
        grid-column:1 / -1;
    }
}

@media(max-width:800px){
    .market-hero{
        grid-template-columns:1fr;
    }

    .market-status{
        width:100%;
        justify-content:center;
    }

    .market-summary-grid,
    .metal-focus-grid,
    .gold-cards-grid,
    .market-toolbar{
        grid-template-columns:1fr;
    }

    .gold-focus{
        grid-column:auto;
    }

    .market-ticker{
        height:auto;
        min-height:58px;
        align-items:stretch;
        flex-direction:column;
    }

    .ticker-label{
        min-height:48px;
        justify-content:center;
    }

    .ticker-track{
        padding:0 12px 12px;
        overflow-x:auto;
    }

    .table-headline{
        flex-direction:column;
        align-items:flex-start;
    }
}