/*
 * Frontend styles for the Zestful Recipe Studio.
 *
 * These rules are adapted from the New Simple Plugin to maintain a
 * consistent aesthetic: an off‑white canvas with faint leaf motifs,
 * a dark green wordmark, pill‑shaped search bar and suggestion
 * chips.  All class names are prefixed with `zrs-` to prevent
 * conflicts.
 */

.zrs-landing {
    position: relative;
    background-color: #F7FAF9;
    background-image: url('../assets/images/bg-leaves.svg');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    box-sizing: border-box;
}

.zrs-logo img {
    display: block;
    width: 320px;
    max-width: 90%;
    margin: 0 auto 2rem auto;
}

.zrs-search-form {
    display: flex;
    width: 100%;
    max-width: 640px;
    height: 64px;
    background-color: #ffffff;
    border: 1px solid rgba(9, 166, 109, 0.15);
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.zrs-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1.125rem;
    line-height: 1.2;
    color: #19232E;
    padding: 0 1rem;
    outline: none;
}
.zrs-search-input::placeholder {
    color: #5B6776;
}
.zrs-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    background-color: #09A66D;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease-out;
}
.zrs-search-button:hover,
.zrs-search-button:focus {
    background-color: #0b8855;
}
.zrs-search-button svg {
    width: 20px;
    height: 20px;
    color: #ffffff;
}

.zrs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
    justify-content: center;
}
.zrs-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background-color: #EAF5F0;
    color: #1E5A3E;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease-out;
    border: none;
}
.zrs-chip:hover,
.zrs-chip:focus {
    background-color: #d9ecd9;
}

/* Provide consistent sizing for icons inside suggestion chips. */
.zrs-chip-icon {
    font-size: 1.1rem;
    line-height: 1;
    display: flex;
    align-items: center;
}

.zrs-tagline {
    margin-top: 2rem;
    font-size: 1rem;
    color: #09A66D;
    text-align: center;
}
.zrs-credits {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #5B6776;
    text-align: center;
}

/* Advanced panel styling */
.zrs-advanced-wrapper {
    width: 100%;
    max-width: 640px;
    margin-top: 1.5rem;
    background-color: #ffffff;
    border: 1px solid rgba(9, 166, 109, 0.15);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    padding: 1rem 1.5rem;
}

/* Header section inside the advanced panel: includes the title and back button */
.zrs-advanced-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.zrs-advanced-title {
    margin: 0;
    font-size: 1.25rem;
    color: #1E5A3E;
}
.zrs-advanced-back {
    background: none;
    border: none;
    color: #09A66D;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.15s ease-out;
}
.zrs-advanced-back:hover,
.zrs-advanced-back:focus {
    background-color: #EAF5F0;
}
.zrs-advanced-wrapper h3 {
    margin-top: 0;
    font-size: 1.25rem;
    color: #1E5A3E;
}
.zrs-advanced-wrapper p {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #5B6776;
}
.zrs-advanced-wrapper label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #1E5A3E;
}
.zrs-advanced-wrapper textarea,
.zrs-advanced-wrapper select,
.zrs-advanced-wrapper input[type="text"] {
    width: 100%;
    background-color: #F7FAF9;
    border: 1px solid rgba(9, 166, 109, 0.15);
    border-radius: 8px;
    padding: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}
.zrs-advanced-wrapper small {
    font-size: 0.75rem;
    color: #5B6776;
}

.zrs-advanced-wrapper .button-primary {
    background-color: #09A66D;
    border-color: #09A66D;
    display: block;
    margin: 1.5rem auto 0;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
}
.zrs-advanced-wrapper .button-primary:hover,
.zrs-advanced-wrapper .button-primary:focus {
    background-color: #0b8855;
    border-color: #0b8855;
}

/* Loading indicator displayed while a recipe is being generated */
.zrs-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 1rem;
    color: #1E5A3E;
}
.zrs-loading-icon {
    font-size: 1.25rem;
    animation: zrs-spin 1.5s linear infinite;
}
@keyframes zrs-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Editor preview styles */
.zrs-editor-form {
    border: 1px dashed #d9d9d9;
    padding: 1rem;
    border-radius: 6px;
    background-color: #fafafa;
}
.zrs-editor-form .zrs-search-wrapper {
    margin-bottom: 1rem;
}
.zrs-editor-form .zrs-search-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.zrs-editor-form .zrs-chip-row {
    margin-top: 0.5rem;
}
.zrs-editor-form .zrs-chip {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: #eaf5f0;
    color: #1E5A3E;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    cursor: pointer;
}
.zrs-editor-form .zrs-advanced-panel {
    margin-top: 1rem;
    padding: 0.5rem;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background-color: #fff;
}

/* Recipe card styling */
.zrs-card {
    background-color: #ffffff;
    border: 1px solid rgba(9, 166, 109, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    padding: 0;
    margin-top: 2rem;
    max-width: 960px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Layout for card media and body */
.zrs-card-media {
    flex: 1 1 50%;
    overflow: hidden;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    /* When no image is available the media panel will simply render
       empty.  We remove the plant‑themed backdrop so that search results
       do not display a generic leaves illustration.  A neutral
       background colour is used instead.  To preserve the visual
       structure of the card even when blank, set a minimum height. */
    background-color: #F7FDFB;
    background-image: none;

    /*
     * Ensure the media panel retains space when no image is provided.
     * Without a defined height the section collapses, causing the title
     * and tags to appear at the very top of the card.  A minimum height
     * preserves the intended visual hierarchy so that the body content
     * does not jump upward when the image is absent.  Adjust as needed
     * to suit the design breakpoints.
     */
    min-height: 200px;
    min-height: 200px;
}
.zrs-card-media img {
    width: 100%;
    height: 100%;
    /* Preserve the entire image without cropping */
    object-fit: contain;
    display: block;
    /* Rounded corners for a polished look */
    border-radius: 12px;
}
.zrs-card-body {
    flex: 1 1 50%;
    padding: 1.5rem;
}
@media (max-width: 767px) {
    .zrs-card {
        flex-direction: column;
    }
    .zrs-card-media {
        border-bottom-left-radius: 0;
        border-top-right-radius: 12px;
    }
    .zrs-card-body {
        padding: 1rem;
    }
}
.zrs-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.zrs-card-tag {
    background-color: #EAF5F0;
    color: #1E5A3E;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
}
.zrs-card-title {
    margin: 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #19232E;
}
.zrs-card-desc {
    margin: 0.5rem 0 1rem 0;
    font-size: 1rem;
    color: #5B6776;
}
.zrs-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.zrs-card-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background-color: #F7FAF9;
    border: 1px solid rgba(9, 166, 109, 0.15);
    border-radius: 10px;
    font-size: 0.875rem;
    min-width: 80px;
}
.zrs-card-stat .icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}
.zrs-card-stat .value {
    font-weight: 600;
    color: #19232E;
    font-size: 0.95rem;
}
.zrs-card-stat .label {
    color: #5B6776;
    font-size: 0.75rem;
}
.zrs-card-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 0.5rem;
}
.zrs-card-tab {
    background-color: #F7FAF9;
    border: 1px solid rgba(9, 166, 109, 0.1);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #1E5A3E;
    transition: background-color 0.15s ease-out;
}
.zrs-card-tab.active,
.zrs-card-tab:hover {
    background-color: #EAF5F0;
    border-color: rgba(9, 166, 109, 0.2);
    color: #09A66D;
}
.zrs-card-content {
    margin-top: 1rem;
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}
.zrs-card-content ul.zrs-list {
    margin-left: 1.25rem;
    list-style: disc;
}
.zrs-card-content ol.zrs-list {
    margin-left: 1.25rem;
    list-style: decimal;
}
.zrs-card-content li {
    margin-bottom: 0.5rem;
    color: #19232E;
    font-size: 0.95rem;
}
.zrs-card-actions {
    margin-top: 1rem;
    text-align: right;
}
.zrs-card-actions a {
    color: #09A66D;
    text-decoration: none;
    font-weight: 600;
}
.zrs-card-actions a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Single recipe customisations
 *
 * The following rules apply only when viewing a single recipe post.  They
 * enhance the card layout by positioning the image on the left and the
 * details on the right, and they add custom list markers to the
 * ingredients, instructions and health benefits tabs.  By scoping
 * everything under `.zrs-single-recipe`, we ensure that search
 * results and other cards retain the original vertical layout.
 */
/*
 * Single recipe card layout
 *
 * When a recipe does not have an image, we keep the card in a single column
 * layout so that all of the content flows naturally down the page.  Once an
 * image is generated, the `.has-image` class is added to the card by the
 * JavaScript handler.  The `.has-image` modifier switches the card to a
 * two‑column CSS grid with the image on the left and the details on the
 * right.  The bottom section always spans the full width.
 */
.zrs-single-recipe .zrs-card {
    /* Default to a one‑column layout.  We intentionally avoid using grid here
       because we only want the two‑column layout when an image is present. */
    display: block;
    max-width: none;
    width: 100%;
}

/* Hide the media container when there is no image */
.zrs-single-recipe .zrs-card:not(.has-image) .zrs-card-media {
    display: none;
}

/* Two‑column layout when an image exists */
.zrs-single-recipe .zrs-card.has-image {
    display: grid;
    grid-template-columns: 45% 55%;
    grid-template-rows: auto auto;
    grid-template-areas:
        "media body"
        "bottom bottom";
    align-items: start;
}
.zrs-single-recipe .zrs-card.has-image .zrs-card-media {
    grid-area: media;
    /* Allow the hero image to dictate its own height so that the full picture
       is visible.  Removing the max-height and overflow rules prevents
       cropping on taller images and ensures the image scales proportionally
       within its column. */
    max-height: none;
    overflow: visible;
}
.zrs-single-recipe .zrs-card.has-image .zrs-card-media img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    /* Rounded corners for hero images on single recipe pages */
    border-radius: 12px;
}
.zrs-single-recipe .zrs-card.has-image .zrs-card-body {
    grid-area: body;
}
/* Bottom section for single recipes: sits below the media and body and spans the full width */
.zrs-single-recipe .zrs-card.has-image .zrs-card-bottom {
    grid-area: bottom;
    width: 100%;
    padding: 1.5rem;
    box-sizing: border-box;
}

/* Provide padding and full width for the bottom section on single recipe cards,
   regardless of whether an image is present.  Without this rule, the
   ingredients/instructions/benefits panels can butt up against the edge of the card. */
.zrs-single-recipe .zrs-card .zrs-card-bottom {
    width: 100%;
    padding: 1.5rem;
    box-sizing: border-box;
}

/* Ensure tabs and content inside the bottom wrapper span the full width */
.zrs-single-recipe .zrs-card-bottom .zrs-card-tabs,
.zrs-single-recipe .zrs-card-bottom .zrs-card-content {
    width: 100%;
}

/* Left align text within each tab panel under the image */
.zrs-single-recipe .zrs-card-bottom .zrs-card-content .tab-content {
    text-align: left;
}
/* Tabs and content should span the full width of the body on single posts */
.zrs-single-recipe .zrs-card-body .zrs-card-tabs,
.zrs-single-recipe .zrs-card-body .zrs-card-content {
    width: 100%;
}
@media (max-width: 767px) {
    /* Collapse the two‑column layout to a single column when an image is present */
    .zrs-single-recipe .zrs-card.has-image {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "body"
            "bottom";
    }
    .zrs-single-recipe .zrs-card.has-image .zrs-card-media {
        max-height: none;
        border-top-right-radius: 12px;
    }
}

/* Remove default bullet styles and implement custom markers */
/* Remove default list markers for all recipe cards */
.zrs-card-content ul.zrs-list,
.zrs-card-content ol.zrs-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

/* Base styling for list items within recipe cards */
.zrs-card-content div[data-tab="ingredients"] ul.zrs-list li,
.zrs-card-content div[data-tab="instructions"] ol.zrs-list li,
.zrs-card-content div[data-tab="benefits"] ul.zrs-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
    color: #19232E;
    font-size: 0.95rem;
}

/* Green dots for ingredients */
/* Green dots for ingredients (all cards) */
.zrs-card-content div[data-tab="ingredients"] ul.zrs-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    background-color: #09A66D;
    border-radius: 50%;
}
/* Numbered circles for instructions */
/* Numbered circles for instructions (all cards) */
.zrs-card-content div[data-tab="instructions"] ol.zrs-list {
    counter-reset: zrs-step;
}
.zrs-card-content div[data-tab="instructions"] ol.zrs-list li::before {
    counter-increment: zrs-step;
    content: counter(zrs-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.2rem;
    height: 1.2rem;
    background-color: #09A66D;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}
/* Checkmarks for health benefits */
/* Checkmarks for health benefits (all cards) */
.zrs-card-content div[data-tab="benefits"] ul.zrs-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1rem;
    color: #09A66D;
}

/* Actions row (save, share, print, like) */
.zrs-card-actions-row {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.zrs-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.zrs-action .icon {
    font-size: 1rem;
}

/*
 * Style the Generate Image button similarly to the other action items.
 * Without explicit styles the button can appear invisible because
 * browsers render native buttons differently.  We match the Save/Share/Print
 * styling so it integrates seamlessly into the actions row.
 */
.zrs-card-actions-row .zrs-generate-image button {
    background-color: #F7FAF9;
    border: 1px solid rgba(9, 166, 109, 0.15);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: #1E5A3E;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}
.zrs-card-actions-row .zrs-generate-image button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Styled buttons for save/share/print; these have a soft background and border */
.zrs-action.zrs-save,
.zrs-action.zrs-share,
.zrs-action.zrs-print {
    background-color: #F7FAF9;
    border: 1px solid rgba(9, 166, 109, 0.15);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: #1E5A3E;
}

/* Like button stands apart with a red heart and no border */
.zrs-action.zrs-like {
    color: #E55050;
    padding: 0.5rem 0.75rem;
}

/*
 * Spinner and loading overlay for image generation
 *
 * When a user clicks the Generate Image button, we overlay a spinner
 * inside the media container to signal that an image is being
 * generated.  Once the image is returned, this overlay is replaced
 * with the actual image.
 */
.zrs-image-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    background-color: #F7FAF9;
    border-radius: 12px;
    box-sizing: border-box;
}
.zrs-image-loading .zrs-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #EAF5F0;
    border-top: 3px solid #09A66D;
    border-radius: 50%;
    animation: zrs-spin 1s linear infinite;
}
@keyframes zrs-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* Nutrition facts panel */
.zrs-card-nutrition {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e5e5;
}

/* Nutrition subtitle within the nutrition facts panel */
.zrs-card-nutrition .zrs-nutrition-subtitle {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    color: #5B6776;
}

/* Tab titles and subtitles in card content */
.zrs-card-content .tab-content .zrs-tab-title {
    margin-top: 0;
    margin-bottom: 0.25rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #19232E;
}
.zrs-card-content .tab-content .zrs-tab-subtitle {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: #5B6776;
}
.zrs-card-nutrition h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #19232E;
}

/* Subtitle under Nutrition Facts on single recipe pages */
.zrs-nutrition-subtitle {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: #5B6776;
}

/* Subtitle under each tab heading */
.zrs-tab-subtitle {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: #5B6776;
}
.zrs-card-nutrition-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.zrs-card-nutrition-grid .nut-item {
    flex: 1 1 100px;
    background-color: #F7FAF9;
    border: 1px solid rgba(9, 166, 109, 0.15);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* On single recipe pages, constrain the nutrition facts to a reasonable width and
   ensure items don’t stretch across the full container. */
.zrs-single-recipe .zrs-card-nutrition-grid {
    max-width: 600px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}
.zrs-single-recipe .zrs-card-nutrition-grid .nut-item {
    /* When using CSS grid, disable flex so items do not stretch unevenly */
    flex: none;
    min-width: 0;
}
.zrs-card-nutrition-grid .nut-item .value {
    font-weight: 700;
    color: #19232E;
    font-size: 1rem;
}
.zrs-card-nutrition-grid .nut-item .label {
    font-size: 0.75rem;
    color: #5B6776;
}

/* Limit the width of long titles and descriptions on single recipe pages to
   improve readability and prevent them from stretching across the full page. */
.zrs-single-recipe .zrs-card-body .zrs-card-title,
.zrs-single-recipe .zrs-card-body .zrs-card-desc {
    max-width: 640px;
    white-space: normal;
    word-wrap: break-word;
}