/*
 * TARAZ FOOLAD API
 */


/* =========================
   FIELD
========================= */

.taraz-market-field {
    display: inline-block;
}


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

/*
 * مثبت = سبز
 */
.taraz-market-positive {
    color: #16a34a !important;
}


/*
 * منفی = قرمز
 */
.taraz-market-negative {
    color: #dc2626 !important;
}


/*
 * ثابت = طوسی
 */
.taraz-market-neutral {
    color: #7b8494 !important;
}


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

.taraz-market-card {

    background: #ffffff;

    border: 1px solid #e7eaf0;

    border-radius: 18px;

    padding: 22px;

    box-shadow:
        0 8px 30px rgba(
            0,
            0,
            0,
            0.06
        );

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

    box-sizing: border-box;
}


.taraz-market-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 14px 40px rgba(
            0,
            0,
            0,
            0.10
        );
}


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

.taraz-market-card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;
}


.taraz-market-card-title {

    font-size: 18px;

    font-weight: 700;

    color: #111827;
}


.taraz-market-card-symbol {

    font-size: 12px;

    color: #8a94a6;

    margin-top: 4px;
}


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

.taraz-market-card-price {

    font-size: 30px;

    font-weight: 800;

    line-height: 1.3;

    color: #0f172a;

    margin-bottom: 12px;
}


.taraz-market-card-price small {

    font-size: 13px;

    font-weight: 500;

    color: #7b8494;
}


/* =========================
   CHANGE
========================= */

.taraz-market-card-change {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 15px;
}


/*
 * مثبت
 */

.taraz-market-card-change.positive {

    color: #16a34a !important;
}


/*
 * منفی
 */

.taraz-market-card-change.negative {

    color: #dc2626 !important;
}


/*
 * ثابت
 */

.taraz-market-card-change.neutral {

    color: #7b8494 !important;
}


/* =========================
   PERCENT BADGE
========================= */

.taraz-market-card-change b {

    padding: 4px 9px;

    border-radius: 8px;

    font-size: 12px;
}


/*
 * سبز
 */

.taraz-market-card-change.positive b {

    color: #16a34a !important;

    background: #eaf8ef;
}


/*
 * قرمز
 */

.taraz-market-card-change.negative b {

    color: #dc2626 !important;

    background: #fcecec;
}


/*
 * طوسی
 */

.taraz-market-card-change.neutral b {

    color: #7b8494 !important;

    background: #eef0f3;
}


/* =========================
   DATE
========================= */

.taraz-market-card-date {

    font-size: 11px;

    color: #9ca3af;

    border-top: 1px solid #f0f1f4;

    padding-top: 10px;
}


/* =========================
   LIST
========================= */

.taraz-market-list {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                240px,
                1fr
            )
        );

    gap: 20px;

    width: 100%;
}


/* =========================
   ITEM
========================= */

.taraz-market-item {

    border: 1px solid #e5e7eb;

    border-radius: 12px;

    overflow: hidden;

    background: #fff;
}


.taraz-market-row {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 12px 15px;

    border-bottom: 1px solid #f0f1f3;
}


.taraz-market-row:last-child {

    border-bottom: 0;
}


.taraz-market-key {

    font-weight: 700;

    color: #374151;
}


.taraz-market-value {

    color: #6b7280;

    text-align: left;

    direction: ltr;
}


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

@media (max-width: 600px) {

    .taraz-market-list {

        grid-template-columns: 1fr;
    }


    .taraz-market-card {

        padding: 18px;
    }


    .taraz-market-card-price {

        font-size: 25px;
    }
}