.jlb-gold{

    width:100%;
    direction:rtl;

}

.jlb-gold-card{

    background:var(--jlb-gd-card-bg);
    border:1px solid var(--jlb-gd-border-color);
    border-radius:12px;
    overflow:hidden;

}

.jlb-gold-header{

    background:var(--jlb-gd-header-bg);
    color:var(--jlb-gd-header-color);

    padding:14px 18px;

    text-align:center;

    font-size:clamp(15px, calc(12.35px + .735vw), 18px);
    font-weight:700;

}

.jlb-gold-content{

    padding:16px;

}

.jlb-gold-list{

    display:flex;
    flex-direction:column;

    gap:10px;

}

.jlb-gold-empty{

    padding:24px;
    text-align:center;
    color:#6b7280;

}

/* ===================================
   Row
=================================== */

.jlb-gold-row{

    border:1px solid var(--jlb-gd-border-color);
    border-radius:12px;

    overflow:hidden;

    transition:.2s ease;

}

.jlb-gold-row:nth-child(odd){
    background:var(--jlb-gd-row-odd);
}

.jlb-gold-row:nth-child(even){
    background:var(--jlb-gd-row-even);
}

.jlb-gold-row:hover{

    background:var(--jlb-gd-hover-color);
    box-shadow:0 6px 16px rgba(0,0,0,.06);

}

.jlb-gold-row-head{

    width:100%;

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 16px;

    background:transparent;
    border:none;

    cursor:pointer;

    text-align:right;

    font-family:inherit;
    font-size:inherit;
    color:inherit;

}

.jlb-gold-row-main{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:4px;

    min-width:0;

}

.jlb-gold-row-label{

    font-size:clamp(11px, calc(9.24px + .49vw), 13px);

    color:var(--jlb-gd-title-color);
    opacity:.75;

}

.jlb-gold-row-price{

    font-size:clamp(15px, calc(11.47px + .98vw), 19px);
    font-weight:800;

    color:var(--jlb-gd-title-color);

    display:flex;
    align-items:baseline;
    gap:6px;

}

.jlb-gold-row-unit{

    font-size:clamp(10px, calc(8.24px + .49vw), 12px);
    font-weight:500;

    opacity:.65;

}

/* ---------- تغییر قیمت ---------- */

.jlb-gold-row-change{

    flex:none;

    display:flex;
    align-items:center;
    gap:4px;

    padding:6px 10px;

    border-radius:999px;

    font-size:clamp(11px, calc(9.24px + .49vw), 13px);
    font-weight:700;

    white-space:nowrap;

}

.jlb-gold-row-change--up{
    color:var(--jlb-gd-up-color);
    background:#dcfce7;
    background:color-mix(in srgb, var(--jlb-gd-up-color) 12%, transparent);
}

.jlb-gold-row-change--down{
    color:var(--jlb-gd-down-color);
    background:#fee2e2;
    background:color-mix(in srgb, var(--jlb-gd-down-color) 12%, transparent);
}

.jlb-gold-row-change--flat{
    color:#6b7280;
    background:#f3f4f6;
}

.jlb-gold-row-arrow{
    font-size:clamp(9px, calc(8.12px + .25vw), 10px);
    line-height:1;
}

/* ---------- Toggle ---------- */

.jlb-gold-row-toggle{

    flex:none;

    display:flex;
    align-items:center;
    justify-content:center;

    width:24px;
    height:24px;

    color:var(--jlb-gd-title-color);
    opacity:.55;

    transition:transform .25s ease;

}

.jlb-gold-row-toggle svg{
    width:18px;
    height:18px;
}

.jlb-gold-row.is-open .jlb-gold-row-toggle{

    transform:rotate(180deg);
    opacity:.9;

}

/* ===================================
   جزئیات (اکوردیون کشویی)
=================================== */

.jlb-gold-row-detail{

    display:grid;

    grid-template-rows:0fr;

    transition:grid-template-rows .3s ease;

}

.jlb-gold-row-detail-inner{

    overflow:hidden;

}

.jlb-gold-row.is-open .jlb-gold-row-detail{

    grid-template-rows:1fr;

}

.jlb-gold-detail-grid{

    display:grid;

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

    gap:10px;

    padding:0 16px 14px;

    border-top:1px dashed var(--jlb-gd-border-color);

    margin-top:2px;
    padding-top:12px;

}

.jlb-gold-detail-item{

    display:flex;
    flex-direction:column;
    gap:4px;

    padding:8px 10px;

    background:rgba(0,0,0,.02);

    border-radius:8px;

}

.jlb-gold-detail-label{

    font-size:clamp(10px, calc(9.12px + .25vw), 11px);
    color:#6b7280;

}

.jlb-gold-detail-value{

    font-size:clamp(12px, calc(10.24px + .49vw), 14px);
    font-weight:700;

    color:var(--jlb-gd-title-color);

}

.jlb-gold-detail-time{

    padding:0 16px 14px;

    font-size:clamp(11px, calc(10.12px + .25vw), 12px);
    color:#6b7280;

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

}

/* ===================================
   Responsive
=================================== */

@media (max-width:768px){

    .jlb-gold-content{
        padding:10px;
    }

    .jlb-gold-detail-grid{
        grid-template-columns:repeat(2, 1fr);
    }

}

@media (max-width:420px){

    .jlb-gold-row-head{
        flex-wrap:wrap;
    }

    .jlb-gold-row-change{
        order:3;
    }

}