/* ==========================================
   MB Bullion - Future Details
========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}

body{

background:#f4f6f9;

color:#222;

padding:20px;

}

.container{

max-width:1400px;

margin:auto;

}

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

.topBar{

display:flex;

justify-content:space-between;

align-items:center;

background:#2f3b4f;

padding:18px 25px;

border-radius:12px;

margin-bottom:25px;

box-shadow:0 6px 18px rgba(0,0,0,.15);

}

.topBar h1{

color:#fff;

font-size:30px;

font-weight:bold;

letter-spacing:1px;

}

.topBar h1 i{

color:#f1c40f;

margin-right:8px;

}

/* ==========================================
   HOME BUTTON
========================================== */

.homeBtn{

background:#f1c40f;

color:#222;

padding:12px 22px;

border-radius:8px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}

.homeBtn:hover{

background:#ffd84d;

transform:translateY(-2px);

}

/* ==========================================
   LIVE STATUS
========================================== */

.liveStatus{

display:flex;

align-items:center;

gap:8px;

font-weight:bold;

color:#fff;

}


.liveDot{

width:12px;

height:12px;

border-radius:50%;

background:#00cc44;

animation:blink 1s infinite;

}

@keyframes blink{

0%{opacity:1;}

50%{opacity:.2;}

100%{opacity:1;}

}

/* ==========================================
   MARKET CARDS
========================================== */

.marketCard{

background:#fff;

border-radius:14px;

margin-bottom:25px;

padding:22px;

box-shadow:0 8px 20px rgba(0,0,0,.10);

border-top:5px solid #f1c40f;

transition:.3s;

}

.marketCard:hover{

transform:translateY(-4px);

box-shadow:0 12px 28px rgba(0,0,0,.18);

}

.marketCard h2{

font-size:24px;

color:#2f3b4f;

margin-bottom:20px;

padding-bottom:12px;

border-bottom:2px solid #eee;

}

/* ==========================================
   GRID
========================================== */

.grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:15px;

}

.grid div{

background:#f8f9fb;

padding:15px;

border-radius:10px;

border:1px solid #e2e2e2;

display:flex;

flex-direction:column;

transition:.25s;

}

.grid div:hover{

background:#fff8dc;

border-color:#f1c40f;

}

.grid span{

font-size:13px;

color:#777;

margin-bottom:6px;

}

.grid strong{

font-size:18px;

color:#222;

font-weight:700;

word-break:break-word;

}

/* ==========================================
   COLORS
========================================== */

.green{

color:#16a34a !important;

}

.red{

color:#dc2626 !important;

}

.blue{

color:#2563eb !important;

}

.orange{

color:#ea580c !important;

}

.purple{

color:#7c3aed !important;

}

/* ==========================================
   FOOTER
========================================== */

.footer{

margin-top:35px;

padding:20px;

background:#2f3b4f;

color:#fff;

text-align:center;

border-radius:12px;

box-shadow:0 5px 15px rgba(0,0,0,.15);

}

.footer b{

color:#f1c40f;

font-size:18px;

}

#lastRefresh{

margin-top:12px;

font-size:15px;

color:#ddd;

}

#refreshTime{

color:#00ff66;

font-weight:bold;

}

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

@media(max-width:1200px){

.grid{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:900px){

.topBar{

flex-direction:column;

gap:15px;

text-align:center;

}

.topBar h1{

font-size:24px;

}

.grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

body{

padding:10px;

}

.container{

width:100%;

}

.marketCard{

padding:15px;

}

.marketCard h2{

font-size:20px;

text-align:center;

}

.grid{

grid-template-columns:1fr;

gap:12px;

}

.grid strong{

font-size:16px;

}

.homeBtn{

width:100%;

text-align:center;

}

.liveStatus{

justify-content:center;

}

}

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

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:#ececec;

}

::-webkit-scrollbar-thumb{

background:#f1c40f;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#d4af37;

}

/* ==========================================
   SELECTION
========================================== */

::selection{

background:#f1c40f;

color:#222;

}

/* ==========================================
   LIVE PRICE FLASH EFFECT
========================================== */

.flash-green{

    color:#00b050 !important;

    font-weight:700;

    animation:priceUp .45s ease;

}

.flash-red{

    color:#e53935 !important;

    font-weight:700;

    animation:priceDown .45s ease;

}

@keyframes priceUp{

0%{

transform:scale(1);

}

50%{

transform:scale(1.18);

text-shadow:
0 0 5px #00c853,
0 0 12px #00c853;

}

100%{

transform:scale(1);

text-shadow:none;

}

}

@keyframes priceDown{

0%{

transform:scale(1);

}

50%{

transform:scale(1.18);

text-shadow:
0 0 5px #e53935,
0 0 12px #e53935;

}

100%{

transform:scale(1);

text-shadow:none;

}

}