/* GoldPriceBD - cards.css
   Modularized from the original global framework. */

/* =========================================================
   11. CARD
   ========================================================= */

.card {
    background:
        var(--bg-surface);

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius-lg);

    padding:
        var(--space-6);

    box-shadow:
        var(--shadow-xs);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal),
        background-color var(--transition-normal);
}


.card:hover {
    box-shadow:
        var(--shadow-md);
}


.card-title {
    margin-bottom:
        var(--space-2);

    font-size:
        var(--font-size-xl);
}


.card-description {
    margin-bottom: 0;

    color:
        var(--text-muted);
}

/* =========================================================
   12. PRICE CARD
   ========================================================= */

.price-card {
    position: relative;

    min-width: 0;

    background:
        var(--bg-surface);

    border:
        1px solid var(--border-color);

    border-radius:
        var(--radius-lg);

    padding:
        var(--space-6);

    box-shadow:
        var(--shadow-sm);

    overflow: hidden;

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal),
        background-color var(--transition-normal);
}


.price-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-md);
}


.price-card.gold {
    border-top:
        3px solid var(--color-primary);
}


.price-card.silver {
    border-top:
        3px solid var(--silver-400);
}


.price-label {
    margin-bottom:
        var(--space-2);

    font-size:
        var(--font-size-sm);

    color:
        var(--text-muted);
}


.price-value {
    margin-bottom:
        var(--space-2);

    font-size:
        var(--font-size-2xl);

    font-weight:
        var(--font-weight-bold);

    color:
        var(--text-primary);
}


.price-unit {
    font-size:
        var(--font-size-sm);

    color:
        var(--text-muted);
}