/* Custom styles for MealOps */

/* HTMX loading indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Skeleton loader */
.skeleton {
    @apply animate-pulse bg-base-300 rounded;
}

/* Recipe card hover effect */
.recipe-card {
    @apply transition-transform duration-200;
}

.recipe-card:hover {
    @apply transform scale-105;
}

/* Toast animations */
.toast-enter {
    animation: slideIn 0.3s ease-out;
}

.toast-exit {
    animation: slideOut 0.3s ease-in;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Ingredient list styling */
.ingredient-list {
    @apply space-y-2;
}

.ingredient-item {
    @apply flex items-center gap-2 p-2 rounded hover:bg-base-200;
}

/* Instruction steps */
.instruction-step {
    @apply mb-4 pb-4 border-b border-base-300 last:border-b-0;
}

/* Shopping list items */
.shopping-item {
    @apply py-1;
}