/**
 * Low-Lectin Recipe Converter - Styles
 */

.llc-recipe-card {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 25px;
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.llc-swaps {
    background: #e8f5e9; /* Light green background to highlight health swaps */
    border-left: 5px solid #4caf50;
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 0 4px 4px 0;
}

.llc-dietary-notes {
    color: #555;
    font-size: 1.1em;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.llc-loading {
    color: #0073aa;
    font-weight: bold;
    font-size: 1.2em;
    animation: pulse 1.5s infinite;
}

.llc-error {
    color: #dc3232;
    font-weight: bold;
    padding: 15px;
    background: #fbeaea;
    border-left: 5px solid #dc3232;
}

/* A simple fading animation for the loading text */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* ==========================================================================
 * RECIPE CONTENT STYLING
 * ========================================================================== */

/* 
 * Re-apply left padding to the ingredient and instruction lists.
 * This overrides theme resets that push lists flush-left, giving them a 
 * clean indentation under the "New Ingredients" and "Instructions" headings. 
 */
.llc-ingredients,
.llc-instructions {
    padding-left: 30px; 
    margin-bottom: 20px; /* Adds breathing room before the next section */
}

/* 
 * Add a little extra space between instruction steps 
 * since the JS inline style only sets line-height.
 */
.llc-instructions li {
    margin-bottom: 12px;
}