/* Shared macro badge styles used across multiple components */

/* Macro badge colors */
.calories-badge {
    background-color: #FF6B35 !important;
    color: white !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none !important;
    letter-spacing: 0.3px;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    display: inline-block;
}

.protein-badge {
    background-color: #4A90E2 !important;
    color: white !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none !important;
    letter-spacing: 0.3px;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    display: inline-block;
}

.fat-badge {
    background-color: #27AE60 !important;
    color: white !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none !important;
    letter-spacing: 0.3px;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    display: inline-block;
}

.carbs-badge {
    background-color: #9B59B6 !important;
    color: white !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none !important;
    letter-spacing: 0.3px;
    border-radius: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    display: inline-block;
}

/* Ensure badges stay inline in containers */
.meal-macro-badges .badge {
    display: inline-block !important;
}

/* Badge hover effects */
.calories-badge:hover,
.protein-badge:hover,
.fat-badge:hover,
.carbs-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .calories-badge, .protein-badge, .fat-badge, .carbs-badge {
        padding: 7px 14px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 1200px) {
    .calories-badge, .protein-badge, .fat-badge, .carbs-badge {
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 768px) {
    .calories-badge, .protein-badge, .fat-badge, .carbs-badge {
        padding: 4px 8px !important;
        font-size: 12px !important;
        display: inline-flex !important;
        align-items: center;
        min-width: fit-content;
    }
}

@media (max-width: 576px) {
    .calories-badge, .protein-badge, .fat-badge, .carbs-badge {
        padding: 3px 6px !important;
        font-size: 11px !important;
        display: inline-flex !important;
        align-items: center;
        min-width: fit-content;
    }
}

/* Ensure macro containers don't clip content on mobile */
@media (max-width: 768px) {
    .meal-macro-badges,
    .food-macros,
    .macro-container {
        overflow: visible !important;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
}