#fx-ticker{
 width:100%;
 overflow:hidden;
 background:#ffffff;
 border-top:1px solid #eef2f7;
 border-bottom:1px solid #eef2f7;
 direction:ltr;
}

.fx-track{
 display:flex;
 gap:18px;
 padding:10px 0;
 white-space:nowrap;
 will-change:transform;
}

.fx-box{
 display:flex;
 align-items:center;
 gap:6px;
 padding:6px 14px;
 background:#f8fafc;
 border:1px solid #e5e7eb;
 border-radius:8px;
 font-size:13px;
 transition:.25s;
 flex-shrink:0;
}

.fx-box:hover{
 background:#f1f5f9;
}

.symbol{
 font-weight:600;
 color:#6b7280;
}

.price{
 font-weight:700;
 color:#111827;
 min-width:40px;
 font-variant-numeric:tabular-nums;
 text-align:right;
}

.arrow{
 font-size:11px;
 margin-left:-2px;
 width:12px;
 text-align:center;
}

.up{color:#16a34a}
.down{color:#dc2626}

.flash-up{animation:flashUp .4s}
.flash-down{animation:flashDown .4s}

@keyframes flashUp{
 from{background:#dcfce7}
 to{background:#f8fafc}
}

@keyframes flashDown{
 from{background:#fee2e2}
 to{background:#f8fafc}
}

.live-price{
 display:inline-flex;
 gap:4px;
 align-items:center;
 font-weight:600;
}

/* live price style */

.live-price .price{
 color:#ffffff;
 background:none !important;
}

.live-price .arrow.up{
 color:#16a34a;
 animation:arrowUp .4s ease;
}

.live-price .arrow.down{
 color:#dc2626;
 animation:arrowDown .4s ease;
}

@keyframes arrowUp{
 from{ transform:translateY(2px); opacity:.5;}
 to{ transform:translateY(0); opacity:1;}
}

@keyframes arrowDown{
 from{ transform:translateY(-2px); opacity:.5;}
 to{ transform:translateY(0); opacity:1;}
}




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

.alm-crypto-widget{

display:grid;
grid-template-columns:repeat(6,1fr);
gap:12px;
width:100%;

}

/* ===== TABLET ===== */

@media (max-width:1024px){

.alm-crypto-widget{
grid-template-columns:repeat(3,1fr);
}

}

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

@media (max-width:600px){

.alm-crypto-widget{
grid-template-columns:repeat(2,1fr);
}

}


/* ===== CARD ===== */

.alm-crypto-card{

background:#0f172a;
border-radius:10px;
padding:12px;
color:#fff;
border:1px solid #1e293b;

display:flex;
flex-direction:column;
justify-content:space-between;

}


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

.alm-crypto-head{

display:flex;
align-items:center;
gap:8px;
margin-bottom:6px;

}

.alm-crypto-logo{

width:20px;
height:20px;
flex-shrink:0;

}

.alm-crypto-name{

font-size:13px;
font-weight:600;
line-height:1.2;

}


/* ===== PRICE LINE ===== */

.alm-crypto-price-line{

display:flex;
align-items:center;
gap:6px;
margin-bottom:6px;

}

.alm-crypto-price{

font-size:16px;
font-weight:700;
direction:ltr;

}

.alm-crypto-arrow{

font-size:13px;
font-weight:700;

}

.pprice-up{
color:#22c55e;
}

.pprice-down{
color:#ef4444;
}


/* ===== MINI CHART ===== */

.alm-crypto-chart{

width:100%;
height:32px;

}


/* =========================
   Brent Oil Barrel Widget
========================= */
/* =========================
   Financial Widgets (Brent, Gas, US Oil)
========================= */

.alm-brent-widget, .alm-gas-widget, .alm-usoil-widget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    max-width: 600px;
    margin: 0; /* مسافة صغيرة بين الودجات */
    transition: all 0.3s ease;
}

.alm-brent-widget:hover, .alm-gas-widget:hover, .alm-usoil-widget:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

/* Styles Shared */
.brent-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brent-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brent-texts {
    display: flex;
    flex-direction: column;
}

.brent-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.brent-sub {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.brent-data {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: right;
    direction: ltr;
}

.brent-price-wrapper {
    display: flex;
    align-items: baseline;
    color: #0f172a;
}

.brent-dollar {
    font-size: 14px;
    font-weight: 600;
    margin-right: 2px;
    color: #64748b;
}

/* Prices */
.alm-brent-price, .alm-gas-price, .alm-usoil-price {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #0f172a;
    transition: color 0.3s ease;
}

/* Arrows */
.alm-brent-arrow, .alm-gas-arrow, .alm-usoil-arrow {
    font-size: 18px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background-color: #f1f5f9;
    color: #94a3b8;
    transition: all 0.3s ease;
}

/* States - UP */
.alm-brent-widget.is-up .alm-brent-price, 
.alm-gas-widget.is-up .alm-gas-price, 
.alm-usoil-widget.is-up .alm-usoil-price { color: #16a34a; }

.alm-brent-widget.is-up .alm-brent-arrow, 
.alm-gas-widget.is-up .alm-gas-arrow, 
.alm-usoil-widget.is-up .alm-usoil-arrow { 
    background-color: #dcfce7; color: #16a34a; 
}

/* States - DOWN */
.alm-brent-widget.is-down .alm-brent-price, 
.alm-gas-widget.is-down .alm-gas-price, 
.alm-usoil-widget.is-down .alm-usoil-price { color: #dc2626; }

.alm-brent-widget.is-down .alm-brent-arrow, 
.alm-gas-widget.is-down .alm-gas-arrow, 
.alm-usoil-widget.is-down .alm-usoil-arrow { 
    background-color: #fee2e2; color: #dc2626; 
}

/* Mobile */
@media (max-width: 480px) {
    .alm-brent-widget, .alm-gas-widget, .alm-usoil-widget {
        padding: 12px 15px;
    }
    .alm-brent-price, .alm-gas-price, .alm-usoil-price {
        font-size: 20px;
    }
}