/**
 * Silver Spot Block Styles
 */
.wp-block-metal-prices-silver-spot {
    margin: 20px 0;
}

.hero-counter-box{
	display:inline-flex;
	width:363px;
	margin:0 auto !important;
	justify-content:space-between;
	align-items:center;
	border:1px solid color-mix(in oklab, #D4AF37 60%, transparent);
	padding:8px 16px;
	box-shadow:0 10px 15px -3px color-mix(in srgb, #D4AF37 10%, transparent);
	border-radius:10px;
	line-height:normal;
}
.hero-counter-box h6{
	font-size:10px;
	margin-bottom:2px;
	color:#A8A8A8;
	font-family:'roboto';
	letter-spacing:1px;
}
.hero-counter-box .first-box{
	text-align:left;
	text-transform:uppercase;
}
.hero-counter-box p{
	font-size:9px;
	color:rgba(168, 168, 168, 0.6);
	text-transform:none;
	margin-bottom:0;
}
.hero-counter-box .middle-box{
	width:calc(90% / 3);
	font-size:20px;
	color:#D4AF37;
	font-weight:900;
	font-family:'Montserrat';
	border-left:1px solid #ffffff20;
	border-right:1px solid #ffffff20;
}
.hero-counter-box .last-box{
	font-size:12px;
	color:#ee5e60;
	font-family:'roboto';
}
.hero-counter-box .last-box span{
	font-size:9px;
	color:#00d492;
	padding-left:15px;
	position:relative;
	text-transform:uppercase;
}
.hero-counter-box .last-box span:after{
	content:'';
	position:absolute;
	top:1px;
	bottom:0;
	left:5px;
	width:5px;
	height:5px;
	border-radius:50px;
	background:#00d492;
}

.first-box.metal-name h6 {
    margin: 0 0 5px 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.first-box.metal-name p {
    margin: 0;
    font-size: 12px;
    color: #666;
}

.middle-box.live-price {
    font-size: 32px;
    font-weight: 700;
    color: #2c3e50;
    flex: 1;
    text-align: center;
}

.last-box.percentage-change {
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 4px;
    background: #e8f5e9;
    color: #2e7d32;
}

.last-box.percentage-change.negative {
    background: #ffebee;
    color: #c62828;
}

.last-box.percentage-change.positive {
    background: #e8f5e9;
    color: #2e7d32;
}

.counter-live-text {
    display: block;
    font-size: 10px;
    font-weight: 400;
    margin-top: 4px;
    opacity: 0.7;
}

.silver-spot-timestamp {
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    color: #777;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-counter-box {
        flex-direction: column;
        text-align: center;
    }

    .first-box.metal-name,
    .last-box.percentage-change {
        text-align: center;
    }

    .middle-box.live-price {
        font-size: 28px;
    }
}