.recipe-article {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.recipe-header {
    margin-bottom: 2rem;
}

.recipe-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.recipe-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f9f9f9;
    border-radius: 4px;
}

.recipe-times,
.recipe-servings {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.recipe-meta-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 5px;
}

.icon-prep-time {
    background-image: url('../images/prep-time-icon.svg');
}

.icon-cook-time {
    background-image: url('../images/cook-time-icon.svg');
}

.icon-total-time {
    background-image: url('../images/total-time-icon.svg');
}

.icon-servings {
    background-image: url('../images/servings-icon.svg');
    order: 3;
    margin-right: 0;
    margin-left: 5px;
}

.servings-label {
    /* Style label if needed */
}

.servings-adjuster {
    display: inline-flex;
    align-items: center;
    order: 2;
}

.servings-adjuster button {
    padding: 2px 6px;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    line-height: 1;
}

.servings-adjuster input[type="number"] {
    width: 40px;
    text-align: center;
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    padding: 2px;
    margin: 0;
    -moz-appearance: textfield;
}

.servings-adjuster input[type=number]::-webkit-outer-spin-button,
.servings-adjuster input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.recipe-featured-image {
    margin-bottom: 2rem;
}

.recipe-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.recipe-main {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    margin: 2rem 0;
}

@media (max-width: 768px) {
    .recipe-main {
        grid-template-columns: 1fr;
    }
}

.ingredients-list {
    list-style: none;
    padding: 0;
}

.ingredient-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}

.instructions-list {
    padding-left: 1.5rem;
}

.instruction-step {
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}

.recipe-notes {
    margin: 2rem 0;
    padding: 1rem;
    background: #fff9e6;
    border-radius: 4px;
}

.nutrition-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    padding: 1rem;
    background: #f9f9f9;
    border-radius: 4px;
}

.nutrition-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
}

.recipe-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.recipe-courses, .recipe-cuisines, .recipe-dietary {
    margin: 0.5rem 0;
}

.label {
    font-weight: bold;
    color: #666;
}

.mv-create-card {
    margin: 2em auto;
    max-width: 800px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.mv-create-wrapper {
    padding: 2em;
}

.mv-create-header {
    text-align: center;
    margin-bottom: 2em;
}

.mv-create-title {
    font-size: 2.5em;
    margin-bottom: 1em;
    color: #333;
}

.mv-create-image {
    margin: 2em 0;
}

.mv-create-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.mv-create-description {
    font-size: 1.1em;
    line-height: 1.6;
    color: #666;
    margin: 1em 0;
}

.mv-create-details {
    background: #f9f9f9;
    padding: 1.5em;
    border-radius: 4px;
    margin: 2em 0;
}

.mv-create-details-recipes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5em;
    text-align: center;
}

.mv-create-time {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.mv-create-time-label {
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
    font-size: 0.9em;
}

.mv-create-time-value {
    color: #333;
    font-size: 1.1em;
}

.mv-create-ingredients,
.mv-create-instructions {
    margin: 2em 0;
}

.mv-create-ingredients-title,
.mv-create-instructions-title,
.mv-create-notes-title,
.mv-create-nutrition-title {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #f0f0f0;
}

.mv-create-ingredients-list {
    list-style: none;
    padding: 0;
}

.mv-create-ingredients-item {
    padding: 0.8em 0;
    border-bottom: 1px solid #f0f0f0;
    color: #444;
}

.mv-create-instructions-list {
    list-style: none;
    padding: 0;
    counter-reset: instruction;
}

.mv-create-instructions-step {
    margin-bottom: 1.5em;
    padding-left: 3em;
    position: relative;
}

.mv-create-instructions-step::before {
    counter-increment: instruction;
    content: counter(instruction);
    position: absolute;
    left: 0;
    top: 0;
    width: 2em;
    height: 2em;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-weight: bold;
}

.mv-create-notes {
    background: #fff9e6;
    padding: 1.5em;
    border-radius: 4px;
    margin: 2em 0;
}

.mv-create-nutrition {
    background: #f9f9f9;
    padding: 1.5em;
    border-radius: 4px;
    margin: 2em 0;
}

.mv-create-nutrition-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
}

.mv-create-nutrition-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5em;
    border-bottom: 1px solid #eee;
}

@media (max-width: 768px) {
    .mv-create-wrapper {
        padding: 1em;
    }

    .mv-create-title {
        font-size: 2em;
    }

    .mv-create-details-recipes {
        grid-template-columns: 1fr 1fr;
    }
}

.mv-create-controls {
    margin: 2em 0;
    padding: 1em;
    background: #f9f9f9;
    border-radius: 4px;
}

.mv-create-controls-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
}

/* Print Button */
.mv-create-button {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 1em;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.mv-create-button:hover {
    background: #555;
}

.mv-create-print-icon {
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
}

/* Servings Controls */
.mv-create-servings {
    display: flex;
    align-items: center;
    gap: 1em;
}

.mv-create-servings-controls {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.mv-create-servings-button {
    width: 2em;
    height: 2em;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

.mv-create-servings-button:hover {
    background: #f0f0f0;
}

.mv-create-servings-input {
    width: 4em;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.3em;
}

/* Social Buttons */
.mv-create-social {
    display: flex;
    gap: 0.5em;
    margin-left: auto;
}

.mv-create-social button {
    width: 2.5em;
    height: 2.5em;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
    padding: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mv-create-social button:hover {
    transform: scale(1.1);
}

.mv-create-social svg {
    width: 100%;
    height: 100%;
    fill: #fff;
}

.mv-create-social-facebook {
    background-color: #3b5998;
}

.mv-create-social-facebook:hover {
    background-color: #2d4373;
}

.mv-create-social-pinterest {
    background-color: #bd081c;
}

.mv-create-social-pinterest:hover {
    background-color: #8c0615;
}

.mv-create-social-twitter {
    background-color: #1da1f2;
}

.mv-create-social-twitter:hover {
    background-color: #0c85d0;
}

/* Print styles */
@media print {
    .site-header,
    .site-footer,
    .sidebar,
    .comments-area,
    .navigation,
    .entry-header,
    .mv-create-controls {
        display: none !important;
    }

    .mv-create-card {
        box-shadow: none;
        margin: 0;
        padding: 0;
    }

    .entry-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .mv-create-image {
        max-width: 300px;
        margin: 1em auto;
    }
}

/* Story Section Styles */
.recipe-story {
    max-width: 800px;
    margin: 0 auto 2em;
    font-size: 1.1em;
    line-height: 1.8;
    color: #333;
}

.recipe-story-content {
    margin-bottom: 2em;
}

.recipe-story-content h2 {
    font-size: 1.8em;
    margin: 1.5em 0 1em;
    color: #333;
}

.recipe-story-content h3 {
    font-size: 1.5em;
    margin: 1.2em 0 0.8em;
    color: #444;
}

.recipe-story-content p {
    margin-bottom: 1.5em;
    line-height: 1.8;
}

.recipe-story-content strong,
.recipe-story-content b {
    color: #222;
}

.recipe-story-content em,
.recipe-story-content i {
    font-style: italic;
}

.recipe-story-content ul,
.recipe-story-content ol {
    margin: 1.5em 0;
    padding-left: 2em;
}

.recipe-story-content li {
    margin-bottom: 0.5em;
    line-height: 1.6;
}

.recipe-story-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5em 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.recipe-story-content blockquote {
    margin: 1.5em 0;
    padding: 1em 2em;
    border-left: 4px solid #ddd;
    background: #f9f9f9;
    font-style: italic;
}

.recipe-story-content a {
    color: #0066cc;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.recipe-story-content a:hover {
    border-bottom-color: #0066cc;
}

/* Responsive images */
@media (min-width: 768px) {
    .recipe-story-content .alignleft {
        float: left;
        margin-right: 2em;
        margin-bottom: 1em;
        max-width: 50%;
    }

    .recipe-story-content .alignright {
        float: right;
        margin-left: 2em;
        margin-bottom: 1em;
        max-width: 50%;
    }
}

/* Image captions */
.recipe-story-content .wp-caption {
    max-width: 100%;
    margin: 1.5em 0;
}

.recipe-story-content .wp-caption img {
    margin: 0;
}

.recipe-story-content .wp-caption-text {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: #666;
    text-align: center;
}

/* Jump to Recipe Button - Updated position */
.mv-create-jump {
    text-align: center;
    margin: 2em auto;
    max-width: 800px;
}

.mv-create-jump-button {
    background: #333;
    color: #fff;
    border: none;
    padding: 0.8em 1.5em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mv-create-jump-button:hover {
    background: #555;
}

/* Equipment List */
.mv-create-equipment {
    margin: 2em 0;
    padding: 1.5em;
    background: #f9f9f9;
    border-radius: 4px;
}

.mv-create-equipment-title {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #f0f0f0;
}

.mv-create-equipment-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1em;
}

.mv-create-equipment-item {
    padding: 0.5em;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.mv-create-equipment-item:before {
    content: '•';
    margin-right: 0.5em;
    color: #666;
}

/* Difficulty Styles */
.mv-create-difficulty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
}

.mv-create-difficulty-label {
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
    font-size: 0.9em;
}

.mv-create-difficulty-value {
    padding: 0.3em 1em;
    border-radius: 12px;
    font-size: 0.9em;
    font-weight: 500;
}

.difficulty-easy {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.difficulty-medium {
    background-color: #fff3e0;
    color: #f57c00;
}

.difficulty-hard {
    background-color: #ffebee;
    color: #c62828;
}

/* Add theme compatibility */
.single-recipe .entry-content,
.single-recipe .post-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Make controls responsive */
@media (max-width: 768px) {
    .mv-create-controls-flex {
        flex-direction: column;
        align-items: center;
        gap: 1em;
    }

    .mv-create-social {
        margin-left: 0;
    }
}

/* Update/Add these styles */

.mv-create-ingredients-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #f0f0f0;
}

.mv-create-ingredients-header h2 {
    margin: 0;
    padding: 0;
}

.mv-create-servings {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0.5em 1em;
    background: #f9f9f9;
    border-radius: 4px;
}

.mv-create-servings-text {
    font-weight: 500;
    color: #666;
}

.mv-create-servings-controls {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.mv-create-servings-button {
    width: 24px;
    height: 24px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.mv-create-servings-button:hover {
    background: #f0f0f0;
}

.mv-create-servings-input {
    width: 50px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.3em;
}

/* Responsive styles */
@media (max-width: 768px) {
    .mv-create-ingredients-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1em;
    }

    .mv-create-servings {
        width: 100%;
        justify-content: space-between;
    }
}

/* Base Card Styles */
.recipe-layout-target {
    border: 1px solid #eee; /* Light grey border */
    max-width: 700px; /* Adjust as needed */
    margin: 2em auto; /* Center the card */
    background-color: #fff; /* Default white background for content */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden; /* Contain borders/backgrounds */
}

/* Header & Nutrition Sections Background */
.recipe-layout-target .has-background {
    background-color: #f8f8f8; /* Light grey background */
    padding: 1.5em 2em; /* Adjust padding */
    text-align: center; /* Center text in these sections */
}

/* Header Specifics */
.recipe-header.has-background {
    /* padding-top: 70px; */ /* REMOVE - No longer needed for overlapping image */
}

.recipe-title {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 2em; /* Adjust */
}

/* Inline Meta Text */
.recipe-meta {
    color: #666;
    font-size: 0.9em;
    text-transform: uppercase;
    margin-bottom: 1em;
    /* No flex needed, spans are inline by default */
}
.recipe-meta span { /* Target all spans within meta */
    margin: 0 0.1em; /* Minimal spacing */
    white-space: nowrap; /* Try to keep elements together */
}
/* Remove specific styling for .recipe-times container if it exists */
/* .recipe-times { display: flex; ... } REMOVED */
/* .recipe-servings { display: flex; ... } REMOVED */

/* Description */
.recipe-description {
    margin-bottom: 1em;
    color: #555;
}

/* Ratings Placeholder */
.recipe-ratings {
    margin-bottom: 1.5em;
}
.recipe-ratings .stars {
    color: #f5a623; /* Gold color for stars */
    font-size: 1.2em;
}

/* Print Button */
.recipe-print-button {
    display: inline-block;
    background-color: #333; /* Dark background */
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}
.recipe-print-button:hover {
    background-color: #555;
}

/* Main Content Area */
.recipe-content-area {
    padding: 1.5em 2em; /* Padding for ingredients/instructions */
}
.recipe-content-area h2 {
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-size: 1.4em;
    text-align: left; /* Override centered text from header */
}
.recipe-content-area h2:first-child {
    margin-top: 0;
}

/* Ingredient/Instruction Lists */
.ingredients-list,
.instructions-list,
.equipment-list {
    padding-left: 20px; /* Standard list indent */
    text-align: left; /* Override centered text from header */
    margin-bottom: 1.5em;
}
.ingredients-list li,
.instructions-list li,
.equipment-list li {
    margin-bottom: 0.5em;
}
/* Bold subheadings in ingredients */
.ingredients-list .ingredient-name {
    /* If you add specific classes for subheadings, target those */
    /* Example: if a sub heading is just bold text, this won't apply */
}

/* Related Recipes - Basic Styling (Adjust as needed) */
.related-recipes-container {
    padding: 1.5em 2em;
    border-top: 1px solid #eee;
    background-color: #fff; /* Match content background */
}

.related-recipes-title {
    text-align: center;
    margin-bottom: 1.5em;
    font-size: 1.6em;
}

/* Swiper Carousel Styles */
.related-recipes-swiper {
    width: 100%;
    padding-bottom: 40px; /* Space for pagination */
}

.related-recipes-swiper .swiper-slide {
    /* Add styles for individual slides if needed, like height */
    height: auto; /* Allow height to adjust based on content */
}

.related-recipes-swiper .related-recipe-card {
    border: 1px solid #eee;
    margin-bottom: 0; /* Remove bottom margin if added by card */
    height: 100%; /* Make cards fill slide height */
    display: flex;
    flex-direction: column;
}

.related-recipes-swiper .recipe-card-image {
    height: 150px; /* Fixed height for carousel images */
    background-color: #f0f0f0; /* Placeholder bg */
}
.related-recipes-swiper .recipe-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-recipes-swiper .recipe-card-content {
    padding: 1em;
    flex-grow: 1; /* Allow content to take remaining space */
}

.related-recipes-swiper .recipe-card-title {
    font-size: 1.1em;
    text-align: left;
    margin-bottom: 0.5em;
}

.related-recipes-swiper .recipe-card-meta {
    font-size: 0.8em;
    color: #777;
}

/* Swiper Navigation/Pagination */
.related-recipes-swiper .swiper-button-next,
.related-recipes-swiper .swiper-button-prev {
    color: #333; /* Adjust arrow color */
}

.related-recipes-swiper .swiper-pagination-bullet-active {
    background-color: #333; /* Adjust active bullet color */
}

/* --- REMOVE OLD GRID STYLES --- */
/* Remove styles for .related-recipes-grid */

/* Share Buttons */
.recipe-share {
    margin-top: 1.5em;
    padding-top: 1.5em;
    border-top: 1px solid #eee; /* Separator line */
}

.share-button {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 15px;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    color: #333;
    cursor: pointer;
    border-radius: 3px;
    font-size: 0.85em;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    /* Add styles for icons if using them */
}

.share-button:hover {
    background-color: #eee;
    border-color: #bbb;
}

/* Optional: Specific colors */
.share-facebook {
    /* border-color: #3b5998; background-color: #3b5998; color: #fff; */
}
.share-pinterest {
     /* border-color: #bd081c; background-color: #bd081c; color: #fff; */
}