/**
 * Points Balance Card Component
 * This styles the card that displays the user's current points balance
 * Designed to be visually prominent with large point value display
 */

/* Points value styling - large and prominent */
.points-balance-card .field-content {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary);
    margin: 25px 0 15px;
    line-height: 1;
    display: block;
}

/* Points description styling */
.points-balance-card .available-points {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 25px;
}

/* Action links container styling */
.points-balance-card .view-footer {
    margin-top: auto;
    padding-top: 15px;
}

/* Primary action button styling */
/* 
 * Note: Button styling has been migrated to assets/css/buttons.css
 * This creates a centralized location for all button styles and ensures
 * consistent styling regardless of URL or DOM position
 */

/* Secondary action link styling */
/* 
 * Note: Link styling has been migrated to assets/css/buttons.css
 * This creates a centralized location for all button styles and ensures
 * consistent styling regardless of URL or DOM position
 */

/* Animation for new points - to be triggered by JS */
@keyframes pointsUpdate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
        color: var(--success);
    }
    100% {
        transform: scale(1);
    }
}

.points-balance-card .field-content.updated {
    animation: pointsUpdate 1s ease-in-out;
}