.mmm-plan-day-list {
    min-height: 80px;
    padding: 0.5em;
    background: color-mix(in srgb, var(--mmm-primary) 4%, transparent);
    border-radius: var(--ast-border-radius);
}

/* Per-day start selector – structural basics (design lives in theme) */
.mmm-plan-day-start {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85em;
}
.mmm-plan-day-list.drop-target {
    background: color-mix(in srgb, var(--mmm-primary) 12%, transparent);
}

/* ==========================================================
   Einplanen-Dialog (Planner Dialog) – Struktur.
   Optik (Radius, Schatten, Abstände) liegt im Theme.
   ========================================================== */
.mmm-planner-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.mmm-planner-dialog {
    background: #fff;
    width: min(90vw, 360px);
}

.mmm-planner-dialog label {
    display: block;
    margin-bottom: 12px;
}

.mmm-planner-dialog-text {
    margin: 0 0 12px;
}

.mmm-planner-dialog label input,
.mmm-planner-dialog label select {
    display: block;
    width: 100%;
    margin-top: 4px;
    box-sizing: border-box;
}

.mmm-planner-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* ==========================================================
   Kochmodus (Cook Mode) – Struktur.
   Optik liegt im Theme.
   ========================================================== */
body.mmm-cook-mode-open {
    overflow: hidden;
}

.mmm-cook-mode {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 99999;
    display: flex;
    flex-direction: column;
}

.mmm-cook-mode-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mmm-cook-mode-step {
    flex: 1;
    overflow-y: auto;
}

.mmm-cook-mode-nav {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

/* ==========================================================
   Subscribe form — structural basics (design lives in theme)
   ========================================================== */
.mmm-subscribe-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mmm-subscribe-field label {
    display: block;
}

.mmm-subscribe-field input {
    width: 100%;
    box-sizing: border-box;
}

.mmm-subscribe-consent label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.mmm-subscribe-submit {
    align-self: flex-start;
    cursor: pointer;
}

.mmm-subscribe-message:empty {
    display: none;
}

/* ==========================================================
   Recipe ratings — structural basics (design lives in theme)
   ========================================================== */
.mmm-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mmm-rating__stars {
    display: inline-flex;
}

/* Star input: a reversed radio group that reads left-to-right as a star bar.
   The visually-hidden radios keep the control keyboard-accessible. */
.mmm-rating-field > label {
    display: block;
}

.mmm-rating-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.mmm-rating-input input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.mmm-rating-input label {
    margin: 0;
    line-height: 1;
    cursor: pointer;
}

/* Reviews list ([mmm_recipe_reviews]) — structure only */
.mmm-reviews {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mmm-review__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* ==========================================================
   Meal photos — structural basics (design lives in theme)
   ========================================================== */

/* Gallery ([mmm_recipe_photo_gallery]): responsive thumbnail grid. */
.mmm-photo-gallery__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.mmm-photo-gallery__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* Upload form ([mmm_photo_upload_form]): the native file input stays visible
   (and keyboard-accessible); the label above it is the visual call to action. */
.mmm-photo-upload__label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.mmm-photo-upload__recipe-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ==========================================================
   Image walls ([mmm_community_photo_wall])
   — structure. Design (radius, overlay, hover) lives in the theme.
   ========================================================== */
.mmm-image-wall__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.mmm-image-wall__tile {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.mmm-image-wall__tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mmm-image-wall__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ==========================================================
   Latest-plan teaser ([mmm_latest_plan_teaser]) — structure.
   Design (colors, radius, shadow) lives in the theme.
   ========================================================== */
.mmm-plan-teaser__card {
    display: flex;
    flex-wrap: wrap;
    text-decoration: none;
    overflow: hidden;
}

.mmm-plan-teaser__media {
    flex: 1 1 340px;
    min-width: 260px;
}

.mmm-plan-teaser__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mmm-plan-teaser__body {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mmm-plan-teaser__cta {
    margin-top: auto;
}

/* Back link above the meal-hero title — structure (design lives in theme) */
.mmm-plan-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------
   Admin actions panel ([mmm_admin_actions] on plan/recipe singles).
   Styled to match the other MixMyMeals cards; uses the theme's --mmm
   design tokens where present, with self-contained fallbacks.
   --------------------------------------------------------------- */
.mmm-admin-actions {
    background: var(--mmm-surface, #fff);
    border: 1px solid var(--mmm-line, #e7e3d9);
    border-radius: var(--mmm-r, 14px);
    box-shadow: var(--mmm-shadow-sm, 0 1px 2px rgba(0, 0, 0, .06));
    padding: var(--mmm-s4, 16px);
    margin-bottom: var(--mmm-s6, 24px);
}

.mmm-admin-actions__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.mmm-admin-actions__label {
    font-family: var(--mmm-font-display, inherit);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mmm-ink-3, #8a8578);
}

.mmm-admin-actions__edit {
    font-size: 13px;
    margin-left: auto;
}

.mmm-admin-actions__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mmm-s5, 20px);
}

.mmm-admin-actions__service {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.mmm-admin-actions__service-name {
    font-weight: 700;
    font-size: 12px;
    min-width: 74px;
    color: var(--mmm-ink-2, #4a463d);
}

.mmm-admin-board__plan {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.mmm-admin-board__status {
    font-size: 12px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: var(--mmm-r-pill, 999px);
    background: var(--mmm-cream, #f4f1ea);
    color: var(--mmm-ink-2, #4a463d);
}

.mmm-admin-board__status--publish { background: var(--mmm-green-100, #e3f0e0); color: var(--mmm-green-700, #2f6b34); }
.mmm-admin-board__status--draft   { background: var(--mmm-carrot-100, #fbe6d6); color: var(--mmm-carrot-600, #c2551d); }

.mmm-board-btn {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: var(--mmm-r-pill, 999px);
    border: 1px solid var(--mmm-line-2, #d8d3c6);
    background: var(--mmm-surface, #fff);
    color: var(--mmm-ink, #2c2a24);
    cursor: pointer;
}

.mmm-board-btn:hover:not(:disabled) { border-color: var(--mmm-green-500, #4f9d54); color: var(--mmm-green-700, #2f6b34); }
.mmm-board-btn:disabled { opacity: .5; cursor: default; }

.mmm-board-btn--primary {
    background: var(--mmm-green-500, #4f9d54);
    border-color: var(--mmm-green-500, #4f9d54);
    color: #fff;
}

.mmm-board-btn--primary:hover:not(:disabled) { background: var(--mmm-green-600, #3d8043); color: #fff; }
.mmm-board-btn--danger:hover:not(:disabled) { border-color: #d63638; color: #d63638; }

.mmm-admin-board__scheduled { font-size: 13px; font-weight: 700; color: var(--mmm-green-700, #2f6b34); }
.mmm-admin-board__result { font-size: 12px; }
.mmm-admin-board__result--ok, .mmm-admin-board__result--ok a { color: var(--mmm-green-700, #2f6b34); }
.mmm-admin-board__result--fail { color: #d63638; }

.mmm-admin-board__msg { display: block; font-size: 12px; flex-basis: 100%; }
.mmm-admin-board__msg.is-ok { color: var(--mmm-green-700, #2f6b34); }
.mmm-admin-board__msg.is-fail { color: #d63638; }

.mmm-admin-board__hint { font-size: 12px; margin: 12px 0 0; color: var(--mmm-ink-3, #8a8578); }

.mmm-admin-actions input[type="datetime-local"] {
    font-size: 12px;
    padding: 3px 6px;
    border: 1px solid var(--mmm-line-2, #d8d3c6);
    border-radius: var(--mmm-r-sm, 8px);
}

/* ---------------------------------------------------------------
   Busy state for AJAX-triggering controls (set via mmmSetBusy in
   frontend.js) — structural rules; colors live in the child theme.
   --------------------------------------------------------------- */
.is-busy {
    opacity: .6;
    pointer-events: none;
    cursor: progress;
    position: relative;
}