/* Custom styles will go here */
body {
    font-family: sans-serif;
}

/* Skeleton Loader Styles */
.skeleton {
    background-color: #e0e0e0;
    border-radius: 4px;
    animation: pulse 1.5s infinite ease-in-out;
}

.skeleton-image {
    width: 100%;
    height: 200px; /* Match recipe card image height */
    margin-bottom: 0.5rem;
}

.skeleton-title {
    width: 70%;
    height: 1.25rem; /* Approx h5 height */
}

.skeleton-text {
    width: 90%;
    height: 0.8rem; /* Approx small text height */
}

.skeleton-button {
    width: 100%;
    height: 2.375rem; /* Match btn height */
    border-radius: 0.25rem; /* Match btn border-radius */
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        background-color: #e0e0e0;
    }
    50% {
        background-color: #f0f0f0;
    }
    100% {
        background-color: #e0e0e0;
    }
}

.skeleton-card .card-body .skeleton:not(:last-child) {
    margin-bottom: 0.5rem; /* Spacing between skeleton elements */
}

.skeleton-card .card-body .skeleton-title {
     margin-bottom: 0.75rem; /* More space after title */
}

.skeleton-card .card-body {
    padding: 1rem; /* Match card-body padding */
}