/* =============================================================================
   Vitaroxi Recipe Planner  v5.0
   Brand colors from design spec:
     #71b230  green (primary)
     #ff6600  orange (accent)
     #000f2b  dark navy (heading bg)
     #ffffff  white
     #f7f3ee  warm off-white (surface)
   ALL selectors scoped under .vx-recipe-planner — Elementor / Astra safe
   ============================================================================= */

/* ── TOKENS ──────────────────────────────────────────────────────────────── */
.vx-recipe-planner {
    /* Brand */
    --vx-green      : #71b230;
    --vx-green-dark : #4e7e1f;
    --vx-navy       : #000f2b;
    --vx-orange     : #ff6600;
    --vx-white      : #ffffff;
    --vx-cream      : #f7f3ee;
    --vx-border     : #e4dfd8;
    --vx-text       : #1a1a2e;
    --vx-muted      : #6b7280;
    --vx-red        : #dc2626;
    --vx-blue       : #2563eb;

    /* Macro colours */
    --vx-protein    : #3b82f6;
    --vx-carbs      : #f59e0b;
    --vx-fat        : #ec4899;

    /* Layout */
    --vx-radius     : 12px;
    --vx-radius-sm  : 7px;
    --vx-shadow     : 0 4px 28px rgba(0,15,43,.10);
    --vx-shadow-sm  : 0 1px 6px rgba(0,15,43,.07);
    --vx-trans      : .2s ease;

    font-family : -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size   : 15px;
    line-height : 1.6;
    color       : var(--vx-text);
    background  : var(--vx-white);
    border      : 1px solid var(--vx-border);
    border-radius: var(--vx-radius);
    box-shadow  : var(--vx-shadow);
    max-width   : 1020px;
    margin      : 2rem auto;
    position    : relative;
    overflow-x  : hidden;   /* hide decorative bubble overflow only */
    overflow-y  : visible;  /* never clip panel content vertically */
}

/* ── HEADER ──────────────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-header {
    display         : flex;
    align-items     : center;
    gap             : 1.1rem;
    padding         : 1.4rem 1.75rem;
    background      : var(--vx-navy);
    color           : var(--vx-white);
    position        : relative;
    overflow        : hidden;
    flex-wrap       : wrap;
}

/* Decorative bubbles top-right */
.vx-recipe-planner .vx-rp-header__bubble {
    position      : absolute;
    border-radius : 50%;
    opacity       : .12;
    pointer-events: none;
}
.vx-recipe-planner .vx-rp-header__bubble:first-child {
    width    : 160px;
    height   : 160px;
    background: var(--vx-green);
    top      : -60px;
    right    : 60px;
}
.vx-recipe-planner .vx-rp-header__bubble--2 {
    width    : 90px;
    height   : 90px;
    background: var(--vx-orange);
    top      : -20px;
    right    : 20px;
}

.vx-recipe-planner .vx-rp-header__icon {
    font-size  : 2.5rem;
    line-height: 1;
    flex-shrink: 0;
    position   : relative;
    z-index    : 1;
}
/* SVG / image icon variant */
.vx-recipe-planner .vx-rp-header__icon--img {
    width       : 52px;
    height      : 52px;
    object-fit  : contain;
    border-radius: 8px;
    /* slight drop-shadow so SVGs pop on the dark header */
    filter      : drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.vx-recipe-planner .vx-rp-header__text  { flex:1; min-width:0; position:relative; z-index:1; }
.vx-recipe-planner .vx-rp-header__title {
    margin      : 0;
    font-size   : 1.35rem;
    font-weight : 800;
    color       : var(--vx-white);
    letter-spacing: -.01em;
}
.vx-recipe-planner .vx-rp-header__sub   {
    margin   : .15rem 0 0;
    font-size: .8rem;
    opacity  : .72;
}

/* Servings + Goal controls in header */
.vx-recipe-planner .vx-rp-header__meta  {
    display    : flex;
    gap        : 1rem;
    align-items: center;
    flex-wrap  : wrap;
    position   : relative;
    z-index    : 1;
}
.vx-recipe-planner .vx-rp-header__srv-wrap,
.vx-recipe-planner .vx-rp-header__goal-wrap {
    display       : flex;
    flex-direction: column;
    gap           : .25rem;
}
.vx-recipe-planner .vx-rp-header__srv-lbl {
    font-size     : .65rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity       : .65;
}
.vx-recipe-planner .vx-rp-header__srv-ctrl {
    display    : flex;
    align-items: center;
    background : rgba(255,255,255,.12);
    border     : 1.5px solid rgba(255,255,255,.22);
    border-radius: 8px;
    overflow   : hidden;
}
.vx-recipe-planner .vx-rp-srv-btn {
    width      : 30px;
    height     : 32px;
    background : none;
    border     : none;
    color      : var(--vx-white);
    font-size  : 1.1rem;
    font-weight: 700;
    cursor     : pointer;
    transition : background var(--vx-trans);
    line-height: 1;
}
.vx-recipe-planner .vx-rp-srv-btn:hover { background: rgba(113,178,48,.35); }
.vx-recipe-planner .vx-rp-srv-input {
    width      : 38px;
    height     : 32px;
    background : none;
    border     : none;
    color      : var(--vx-white);
    font-size  : .95rem;
    font-weight: 800;
    text-align : center;
    padding    : 0;
}
.vx-recipe-planner .vx-rp-srv-input::-webkit-inner-spin-button { display:none; }
.vx-recipe-planner .vx-rp-srv-input:focus { outline:none; }

.vx-recipe-planner .vx-rp-goal-select {
    background    : rgba(255,255,255,.12);
    border        : 1.5px solid rgba(255,255,255,.22);
    border-radius : 8px;
    color         : var(--vx-white);
    font-size     : .83rem;
    font-weight   : 600;
    padding       : .35rem .7rem;
    cursor        : pointer;
    transition    : background var(--vx-trans);
}
.vx-recipe-planner .vx-rp-goal-select option { background:var(--vx-navy); color:var(--vx-white); }
.vx-recipe-planner .vx-rp-goal-select:focus   { outline:2px solid var(--vx-green); }

/* ── TABS ────────────────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-tabs {
    display       : flex;
    background    : var(--vx-cream);
    border-bottom : 2px solid var(--vx-border);
    overflow-x    : auto;
}
.vx-recipe-planner .vx-rp-tab {
    display       : inline-flex;
    align-items   : center;
    gap           : .42rem;
    padding       : .78rem 1.2rem;
    font-size     : .83rem;
    font-weight   : 700;
    color         : var(--vx-muted);
    background    : none;
    border        : none;
    border-bottom : 3px solid transparent;
    cursor        : pointer;
    white-space   : nowrap;
    transition    : color var(--vx-trans), border-color var(--vx-trans);
    margin-bottom : -2px;
}
.vx-recipe-planner .vx-rp-tab:hover { color:var(--vx-green); }
.vx-recipe-planner .vx-rp-tab--active {
    color        : var(--vx-green);
    border-bottom-color: var(--vx-green);
}
.vx-recipe-planner .vx-rp-tab__num {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    width           : 22px;
    height          : 22px;
    border-radius   : 50%;
    background      : var(--vx-border);
    color           : var(--vx-muted);
    font-size       : .72rem;
    font-weight     : 800;
    transition      : background var(--vx-trans), color var(--vx-trans);
}
.vx-recipe-planner .vx-rp-tab--active .vx-rp-tab__num { background:var(--vx-green); color:#fff; }

/* ── PANELS ──────────────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-panel         { padding:1.6rem 1.75rem; }
.vx-recipe-planner .vx-rp-panel[hidden] { display:none; }
.vx-recipe-planner .vx-rp-panel--active { animation:vxRpIn .22s ease; }
@keyframes vxRpIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.vx-recipe-planner .vx-rp-panel__heading {
    margin   : 0 0 1.1rem;
    font-size: 1rem;
    font-weight: 800;
    color    : var(--vx-navy);
}

/* ── TOP BAR (recipe name + analyse) ────────────────────────────────────── */
.vx-recipe-planner .vx-rp-topbar {
    display    : flex;
    gap        : .75rem;
    align-items: flex-end;
    margin-bottom: 1.15rem;
    flex-wrap  : wrap;
}
.vx-recipe-planner .vx-rp-recipe-name-field { flex:1; min-width:200px; }
.vx-recipe-planner .vx-rp-analyse-btn       { flex-shrink:0; white-space:nowrap; }

/* ── FORM ELEMENTS ───────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-field   { display:flex; flex-direction:column; gap:.28rem; }
.vx-recipe-planner .vx-rp-label   {
    font-size:.72rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.05em; color:var(--vx-muted);
}
.vx-recipe-planner .vx-rp-input {
    padding     : .52rem .82rem;
    border      : 1.5px solid var(--vx-border);
    border-radius: var(--vx-radius-sm);
    background  : var(--vx-white);
    color       : var(--vx-text);
    font-size   : .93rem;
    width       : 100%;
    box-sizing  : border-box;
    transition  : border-color var(--vx-trans), box-shadow var(--vx-trans);
}
.vx-recipe-planner .vx-rp-input:focus {
    outline     : none;
    border-color: var(--vx-green);
    box-shadow  : 0 0 0 3px rgba(113,178,48,.15);
}

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-btn {
    display      : inline-flex;
    align-items  : center;
    gap          : .38rem;
    padding      : .55rem 1.15rem;
    border-radius: var(--vx-radius-sm);
    font-size    : .87rem;
    font-weight  : 700;
    cursor       : pointer;
    border       : 2px solid transparent;
    transition   : background var(--vx-trans), color var(--vx-trans),
                   border-color var(--vx-trans), transform .1s;
}
.vx-recipe-planner .vx-rp-btn:active  { transform:scale(.97); }
.vx-recipe-planner .vx-rp-btn:disabled { opacity:.38; cursor:not-allowed; transform:none; }
.vx-recipe-planner .vx-rp-btn--primary {
    background: var(--vx-green); color:#fff;
    box-shadow: 0 2px 8px rgba(113,178,48,.35);
}
.vx-recipe-planner .vx-rp-btn--primary:hover:not(:disabled) { background:var(--vx-green-dark); }
.vx-recipe-planner .vx-rp-btn--secondary {
    background: var(--vx-orange); color:#fff;
    box-shadow: 0 2px 8px rgba(255,102,0,.28);
}
.vx-recipe-planner .vx-rp-btn--secondary:hover:not(:disabled) { filter:brightness(.9); }
.vx-recipe-planner .vx-rp-btn--ghost   { background:transparent; color:var(--vx-muted); border-color:var(--vx-border); }
.vx-recipe-planner .vx-rp-btn--ghost:hover:not(:disabled) { background:var(--vx-cream); color:var(--vx-text); }
.vx-recipe-planner .vx-rp-btn--outline { background:transparent; color:var(--vx-green); border-color:var(--vx-green); }
.vx-recipe-planner .vx-rp-btn--outline:hover:not(:disabled) { background:rgba(113,178,48,.07); }
.vx-recipe-planner .vx-rp-actions      { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.35rem; }
.vx-recipe-planner .vx-rp-actions--right { justify-content:flex-end; }
.vx-recipe-planner .vx-rp-actions--split { justify-content:space-between; align-items:center; }

/* ── BUILDER LAYOUT ──────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-builder-layout {
    display               : grid;
    grid-template-columns : 1fr 230px;
    gap                   : 1.25rem;
    align-items           : start;
}

/* ── SEARCH ZONE ─────────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-search-zone  { margin-bottom:.9rem; }
.vx-recipe-planner .vx-rp-search-wrap  { position:relative; }
.vx-recipe-planner .vx-rp-search-row   { position:relative; display:flex; align-items:center; }
.vx-recipe-planner .vx-rp-search-icon  {
    position:absolute; left:.78rem; top:50%; transform:translateY(-50%);
    pointer-events:none; font-size:.95rem; z-index:1;
}
.vx-recipe-planner .vx-rp-input--search { padding-left:2.35rem; padding-right:9.4rem; } /* room for voice + filter btns */
.vx-recipe-planner .vx-rp-spinner {
    position:absolute; right:8.8rem; top:50%; transform:translateY(-50%);
    width:17px; height:17px; border:2px solid var(--vx-border);
    border-top-color:var(--vx-green); border-radius:50%;
    animation:vxRpSpin .65s linear infinite;
}
.vx-recipe-planner .vx-rp-spinner[hidden] { display:none; }
@keyframes vxRpSpin { to{ transform:translateY(-50%) rotate(360deg); } }

/* Filters toggle button */
.vx-recipe-planner .vx-rp-filter-toggle {
    position     : absolute;
    right        : 0; top:0; bottom:0;
    padding      : 0 .9rem;
    font-size    : .76rem;
    font-weight  : 800;
    background   : var(--vx-cream);
    border       : 1.5px solid var(--vx-border);
    border-left  : none;
    border-radius: 0 var(--vx-radius-sm) var(--vx-radius-sm) 0;
    color        : var(--vx-muted);
    cursor       : pointer;
    white-space  : nowrap;
    transition   : background var(--vx-trans), color var(--vx-trans);
}
.vx-recipe-planner .vx-rp-filter-toggle:hover,
.vx-recipe-planner .vx-rp-filter-toggle--active {
    background: var(--vx-green); color:#fff; border-color:var(--vx-green);
}

/* ── VOICE SEARCH BUTTON ────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-voice-btn {
    position     : absolute;
    right        : 5.6rem; /* sits left of the Filters button */
    top:0; bottom:0;
    padding      : 0 .7rem;
    background   : var(--vx-cream);
    border       : 1.5px solid var(--vx-border);
    border-left  : none;
    border-right : none;
    color        : var(--vx-muted);
    cursor       : pointer;
    display      : flex;
    align-items  : center;
    transition   : background var(--vx-trans), color var(--vx-trans);
    line-height  : 1;
}
.vx-recipe-planner .vx-rp-voice-btn:hover {
    background: #f0f7e8; color: var(--vx-green);
}
.vx-recipe-planner .vx-rp-voice-btn--active {
    background : #fff0f0;
    color      : #e53e3e;
    animation  : vx-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes vx-mic-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(229,62,62,.25); }
    50%      { box-shadow: 0 0 0 5px rgba(229,62,62,.0); }
}

/* ── FILTER PANEL ────────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-filter-panel {
    background    : var(--vx-cream);
    border        : 1.5px solid var(--vx-border);
    border-top    : none;
    border-radius : 0 0 var(--vx-radius-sm) var(--vx-radius-sm);
    padding       : .8rem 1rem .7rem;
    display       : flex;
    flex-direction: column;
    gap           : .72rem;
}
.vx-recipe-planner .vx-rp-filter-panel[hidden] { display:none; }

.vx-recipe-planner .vx-rp-filter-row {
    display    : flex;
    align-items: flex-start;
    gap        : .6rem;
    flex-wrap  : wrap;
}
.vx-recipe-planner .vx-rp-filter-row--last {
    border-top   : 1px solid var(--vx-border);
    padding-top  : .68rem;
    justify-content: space-between;
    align-items  : center;
}
.vx-recipe-planner .vx-rp-filter-label {
    font-size     : .66rem;
    font-weight   : 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color         : var(--vx-muted);
    min-width     : 68px;
    padding-top   : .28rem;
    flex-shrink   : 0;
}
.vx-recipe-planner .vx-rp-filter-chips { display:flex; flex-wrap:wrap; gap:.32rem; flex:1; }

/* Filter chip */
.vx-recipe-planner .vx-rp-fchip {
    display      : inline-flex;
    align-items  : center;
    gap          : .22rem;
    padding      : .22rem .6rem;
    font-size    : .74rem;
    font-weight  : 700;
    border       : 1.5px solid var(--vx-border);
    border-radius: 99px;
    background   : var(--vx-white);
    color        : var(--vx-muted);
    cursor       : pointer;
    user-select  : none;
    transition   : border-color var(--vx-trans), background var(--vx-trans), color var(--vx-trans);
}
.vx-recipe-planner .vx-rp-fchip:hover { border-color:var(--vx-green); color:var(--vx-navy); }
.vx-recipe-planner .vx-rp-fchip--active {
    background: var(--vx-green); border-color:var(--vx-green); color:#fff;
}
.vx-recipe-planner .vx-rp-fchip--toggle input { display:none; }
.vx-recipe-planner .vx-rp-fchip--toggle.vx-rp-fchip--active { background:var(--vx-navy); border-color:var(--vx-navy); }

/* Reset button */
.vx-recipe-planner .vx-rp-filter-reset {
    font-size   : .73rem;
    font-weight : 700;
    color       : var(--vx-red);
    background  : none;
    border      : 1.5px solid rgba(220,38,38,.25);
    border-radius: 99px;
    padding     : .22rem .68rem;
    cursor      : pointer;
    white-space : nowrap;
    transition  : background var(--vx-trans);
}
.vx-recipe-planner .vx-rp-filter-reset:hover { background:rgba(220,38,38,.08); }

/* ── ACTIVE FILTER PILLS ─────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-active-filters {
    display  : flex;
    flex-wrap: wrap;
    gap      : .32rem;
    margin   : .48rem 0 .2rem;
}
.vx-recipe-planner .vx-rp-active-filters[hidden] { display:none; }
.vx-recipe-planner .vx-rp-active-pill {
    display      : inline-flex;
    align-items  : center;
    gap          : .28rem;
    padding      : .18rem .58rem;
    font-size    : .72rem;
    font-weight  : 700;
    background   : rgba(113,178,48,.12);
    border       : 1.5px solid var(--vx-green);
    border-radius: 99px;
    color        : var(--vx-green-dark);
    cursor       : pointer;
    transition   : background var(--vx-trans);
}
.vx-recipe-planner .vx-rp-active-pill:hover { background:rgba(113,178,48,.22); }
.vx-recipe-planner .vx-rp-active-pill span  { opacity:.65; font-size:.66rem; }

/* ── RESULTS DROPDOWN ────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-results {
    position     : absolute;
    top          : calc(100% + 3px);
    left:0; right:0;
    z-index      : 999;
    background   : var(--vx-white);
    border       : 1.5px solid var(--vx-border);
    border-radius: var(--vx-radius-sm);
    box-shadow   : var(--vx-shadow);
    list-style   : none;
    margin:0; padding:0;
    max-height   : 390px;
    overflow-y   : auto;
}
.vx-recipe-planner .vx-rp-results[hidden] { display:none; }

.vx-recipe-planner .vx-rp-result-hdr {
    padding     : .38rem .85rem;
    font-size   : .68rem;
    font-weight : 800;
    text-transform: uppercase;
    letter-spacing:.05em;
    color       : var(--vx-muted);
    background  : var(--vx-cream);
    border-bottom: 1px solid var(--vx-border);
    cursor      : default;
}
.vx-recipe-planner .vx-rp-result-item {
    padding     : .58rem .85rem;
    border-bottom: 1px solid var(--vx-border);
    display     : flex;
    justify-content: space-between;
    align-items : center;
    gap         : .6rem;
    cursor      : default;
    transition  : background var(--vx-trans);
}
.vx-recipe-planner .vx-rp-result-item:last-child { border-bottom:none; }
.vx-recipe-planner .vx-rp-result-item:hover,
.vx-recipe-planner .vx-rp-result-item[aria-selected="true"] { background:var(--vx-cream); }
.vx-recipe-planner .vx-rp-result-item--empty {
    color:var(--vx-muted); font-size:.83rem; cursor:default;
    flex-direction:column; align-items:flex-start;
}

.vx-recipe-planner .vx-rp-result-left     { flex:1; min-width:0; }
.vx-recipe-planner .vx-rp-result-name     { font-weight:700; font-size:.9rem; line-height:1.3; color:var(--vx-navy); }
.vx-recipe-planner .vx-rp-result-meta     { display:flex; flex-wrap:wrap; gap:.28rem; align-items:center; margin:.16rem 0; }
.vx-recipe-planner .vx-rp-result-cat      { font-size:.7rem; color:var(--vx-muted); }
.vx-recipe-planner .vx-rp-result-src      { font-size:.7rem; }
.vx-recipe-planner .vx-rp-result-gi       {
    font-size:.66rem; font-weight:800; padding:.08rem .36rem;
    background:rgba(201,168,76,.18); color:#92400e; border-radius:4px;
}
.vx-recipe-planner .vx-rp-result-tag      {
    font-size:.66rem; padding:.08rem .3rem;
    background:var(--vx-cream); border:1px solid var(--vx-border);
    border-radius:4px; color:var(--vx-muted);
}
.vx-recipe-planner .vx-rp-result-tag--warn { background:rgba(255,102,0,.1); color:var(--vx-orange); border-color:rgba(255,102,0,.25); }
.vx-recipe-planner .vx-rp-result-macros   {
    display:flex; gap:.55rem; font-size:.71rem; color:var(--vx-muted); margin-top:.12rem;
}
.vx-recipe-planner .vx-rp-result-macros span:first-child { color:var(--vx-navy); font-weight:800; }

.vx-recipe-planner .vx-rp-result-actions { display:flex; flex-direction:column; gap:.25rem; flex-shrink:0; }
.vx-recipe-planner .vx-rp-res-btn {
    padding      : .22rem .52rem;
    font-size    : .71rem;
    font-weight  : 800;
    border       : 1.5px solid var(--vx-green);
    border-radius: 5px;
    color        : var(--vx-green);
    background   : transparent;
    cursor       : pointer;
    white-space  : nowrap;
    text-align   : center;
    transition   : background var(--vx-trans), color var(--vx-trans);
}
.vx-recipe-planner .vx-rp-res-btn:hover    { background:var(--vx-green); color:#fff; }
.vx-recipe-planner .vx-rp-res-btn--std     { background:rgba(113,178,48,.1); }
.vx-recipe-planner .vx-rp-res-btn--100     { border-color:var(--vx-border); color:var(--vx-muted); }
.vx-recipe-planner .vx-rp-res-btn--100:hover { background:var(--vx-cream); color:var(--vx-text); }
.vx-recipe-planner .vx-rp-result-more {
    padding    : .35rem .85rem;
    text-align : center;
    border-top : 1px solid var(--vx-border);
    background : var(--vx-cream);
}
.vx-recipe-planner .vx-rp-show-more-btn {
    background    : none;
    border        : 1.5px solid var(--vx-green);
    color         : var(--vx-green);
    font-size     : .74rem;
    font-weight   : 700;
    padding       : .26rem .85rem;
    border-radius : 99px;
    cursor        : pointer;
    transition    : background .15s, color .15s;
    display       : inline-flex;
    align-items   : center;
    gap           : .3rem;
}
.vx-recipe-planner .vx-rp-show-more-btn:hover {
    background : var(--vx-green);
    color      : #fff;
}
.vx-recipe-planner .vx-rp-show-more-count {
    font-weight : 400;
    opacity     : .65;
    font-size   : .68rem;
}
.vx-recipe-planner .vx-rp-inline-link {
    background:none; border:none; padding:0; cursor:pointer;
    color:var(--vx-green); font-weight:800; font-size:inherit; text-decoration:underline;
}

/* ── BROWSE GRID ─────────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-browse          { margin-top:.7rem; }
.vx-recipe-planner .vx-rp-browse[hidden]  { display:none; }

/* ── Browse toggle button ── */
.vx-recipe-planner .vx-rp-browse__toggle {
    display        : flex;
    align-items    : center;
    gap            : .45rem;
    width          : 100%;
    padding        : .52rem .8rem;
    background     : var(--vx-cream);
    border         : 1.5px solid var(--vx-border);
    border-radius  : var(--vx-radius-sm);
    font-size      : .82rem;
    font-weight    : 700;
    color          : var(--vx-navy);
    cursor         : pointer;
    text-align     : left;
    transition     : background var(--vx-trans), border-color var(--vx-trans);
}
.vx-recipe-planner .vx-rp-browse__toggle:hover,
.vx-recipe-planner .vx-rp-browse__toggle--open {
    background     : #eaf7ef;
    border-color   : var(--vx-green);
    color          : var(--vx-green-dark);
}
.vx-recipe-planner .vx-rp-browse__toggle-chevron {
    margin-left    : auto;
    font-size      : .8rem;
    transition     : transform .2s;
}
.vx-recipe-planner .vx-rp-browse__toggle--open .vx-rp-browse__toggle-chevron { transform:rotate(180deg); }
.vx-recipe-planner .vx-rp-browse__toggle-icon { font-size:.9rem; }

/* ── Browse panel ── */
.vx-recipe-planner .vx-rp-browse-panel[hidden] { display:none; }
.vx-recipe-planner .vx-rp-browse-panel {
    margin-top     : .45rem;
    padding        : .75rem;
    background     : var(--vx-white);
    border         : 1.5px solid var(--vx-border);
    border-radius  : var(--vx-radius-sm);
}

/* ── See More button ── */
.vx-recipe-planner .vx-rp-browse__seemore {
    display        : block;
    width          : 100%;
    margin-top     : .6rem;
    padding        : .38rem;
    background     : none;
    border         : 1px dashed var(--vx-border);
    border-radius  : var(--vx-radius-sm);
    font-size      : .76rem;
    font-weight    : 700;
    color          : var(--vx-muted);
    cursor         : pointer;
    text-align     : center;
    transition     : color var(--vx-trans), border-color var(--vx-trans);
}
.vx-recipe-planner .vx-rp-browse__seemore:hover { color:var(--vx-green); border-color:var(--vx-green); }

.vx-recipe-planner .vx-rp-browse-grid     {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(78px,1fr));
    gap                   : .48rem;
}
.vx-recipe-planner .vx-rp-browse-card {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : .25rem;
    padding         : .58rem .35rem;
    background      : var(--vx-cream);
    border          : 1.5px solid var(--vx-border);
    border-radius   : var(--vx-radius-sm);
    cursor          : pointer;
    font-size       : .7rem;
    font-weight     : 700;
    color           : var(--vx-text);
    text-align      : center;
    line-height     : 1.25;
    transition      : border-color var(--vx-trans), background var(--vx-trans), transform .12s;
}
.vx-recipe-planner .vx-rp-browse-card:hover {
    border-color: var(--vx-green);
    background  : rgba(113,178,48,.07);
    transform   : translateY(-2px);
}
.vx-recipe-planner .vx-rp-browse-card:active { transform:translateY(0); }
.vx-recipe-planner .vx-rp-browse-card span   { display:block; }

/* ── INGREDIENT TABLE ────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-empty {
    text-align:center; padding:2rem; color:var(--vx-muted);
    background:var(--vx-cream); border-radius:var(--vx-radius-sm);
    border:1.5px dashed var(--vx-border); margin-top:.75rem;
}
.vx-recipe-planner .vx-rp-empty span { font-size:2.1rem; display:block; margin-bottom:.4rem; }

.vx-recipe-planner .vx-rp-table {
    width           : 100%;
    border-collapse : collapse;
    font-size       : .85rem;
    table-layout    : fixed;   /* predictable column widths */
}
.vx-recipe-planner .vx-rp-table[hidden] { display:none; }

.vx-recipe-planner .vx-rp-table th {
    background      : var(--vx-navy);
    color           : rgba(255,255,255,.85);
    text-align      : left;
    padding         : .52rem .75rem;
    font-size       : .68rem;
    font-weight     : 800;
    text-transform  : uppercase;
    letter-spacing  : .05em;
    border-bottom   : none;
    white-space     : nowrap;
    overflow        : hidden;
    text-overflow   : ellipsis;
}
/* Numeric column headers right-align */
.vx-recipe-planner .vx-rp-table th:not(:first-child) { text-align:right; }

.vx-recipe-planner .vx-rp-table td {
    padding         : .48rem .75rem;
    border-bottom   : 1px solid var(--vx-border);
    vertical-align  : middle;
    white-space     : nowrap;
    overflow        : hidden;
    text-overflow   : ellipsis;
}
/* First column: label — left-align, allow wrap, wider */
.vx-recipe-planner .vx-rp-table td:first-child {
    text-align      : left;
    white-space     : normal;
    font-weight     : 600;
    color           : var(--vx-navy);
}
/* All other columns: numbers — right-align, no wrap */
.vx-recipe-planner .vx-rp-table td:not(:first-child) {
    text-align      : right;
    font-variant-numeric: tabular-nums;  /* monospaced digits for clean column alignment */
    color           : var(--vx-text);
}

.vx-recipe-planner .vx-rp-table tbody tr:hover td { background:var(--vx-cream); }
.vx-recipe-planner .vx-rp-table tbody tr:last-child td { border-bottom:none; }

/* ── TABLE SCROLL WRAPPER (Panel 2) ── */
.vx-recipe-planner .vx-rp-table-scroll {
    width          : 100%;
    overflow-x     : auto;
    -webkit-overflow-scrolling: touch;
    border-radius  : var(--vx-radius-sm);
    border         : 1.5px solid var(--vx-border);
    margin-bottom  : 1rem;
}
.vx-recipe-planner .vx-rp-table-scroll .vx-rp-table {
    border         : none;
    margin-bottom  : 0;
    /* min-width set per-table via --full and --ing modifier classes */
}
.vx-recipe-planner .vx-rp-td-name strong { display:block; font-size:.87rem; color:var(--vx-navy); }
.vx-recipe-planner .vx-rp-td-name small  { color:var(--vx-muted); font-size:.73rem; }
.vx-recipe-planner .vx-rp-td-unit {
    color          : var(--vx-muted);
    font-size      : .76rem;
    font-weight    : 600;
    text-align     : center;
}

/* ── FULL NUTRITION BREAKDOWN TABLE column widths ──
   Nutrient | Per Serving | Total | Unit
──────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-table--full { min-width:400px; }
.vx-recipe-planner .vx-rp-table--full .vx-rp-col-nutrient { width:42%; }
.vx-recipe-planner .vx-rp-table--full .vx-rp-col-num      { width:19%; text-align:right; }
.vx-recipe-planner .vx-rp-table--full .vx-rp-col-unit     { width:10%; text-align:right; color:var(--vx-muted); font-size:.75rem; }
.vx-recipe-planner .vx-rp-table--full td:nth-child(1)     { text-align:left; white-space:normal; font-weight:600; color:var(--vx-navy); }
.vx-recipe-planner .vx-rp-table--full td:nth-child(2),
.vx-recipe-planner .vx-rp-table--full td:nth-child(3)     { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vx-recipe-planner .vx-rp-table--full td:nth-child(4)     { text-align:right; color:var(--vx-muted); font-size:.78rem; white-space:nowrap; }

/* ── tbl-pct badge (RDA %) — stays on same line as value ── */
.vx-recipe-planner .vx-rp-tbl-pct {
    display         : inline-block;
    white-space     : nowrap;
    font-size       : .7rem;
    font-weight     : 700;
    color           : var(--vx-green);
    background      : rgba(82,183,136,.1);
    border-radius   : 4px;
    padding         : .05rem .3rem;
    margin-left     : .3rem;
    vertical-align  : middle;
}

/* ── INGREDIENT SUMMARY TABLE column widths ──
   Ingredient | Amount | Calories | Protein | Carbs | Fat
──────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-table--ing          { min-width:480px; }
.vx-recipe-planner .vx-rp-table--ing .vx-rp-col-name { width:28%; }
.vx-recipe-planner .vx-rp-table--ing .vx-rp-col-num  { width:14.4%; text-align:right; }
.vx-recipe-planner .vx-rp-table--ing td:nth-child(1) { text-align:left; white-space:normal; font-weight:600; color:var(--vx-navy); }
.vx-recipe-planner .vx-rp-table--ing td:nth-child(2),
.vx-recipe-planner .vx-rp-table--ing td:nth-child(3),
.vx-recipe-planner .vx-rp-table--ing td:nth-child(4),
.vx-recipe-planner .vx-rp-table--ing td:nth-child(5),
.vx-recipe-planner .vx-rp-table--ing td:nth-child(6) { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ── COMPARE TABLE ──────────────────────────────────────
   Nutrient | Food 1 | Food 2 | Food 3 | Food 4
──────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-cmp-table {
    min-width       : 480px;
    table-layout    : auto;   /* auto so food name cols share space evenly */
}
.vx-recipe-planner .vx-rp-cmp-table th:first-child,
.vx-recipe-planner .vx-rp-cmp-table td:first-child {
    width           : 36%;
    min-width       : 130px;
    white-space     : normal;
    text-align      : left;
    font-weight     : 600;
    color           : var(--vx-navy);
}
.vx-recipe-planner .vx-rp-cmp-table th:not(:first-child),
.vx-recipe-planner .vx-rp-cmp-table td:not(:first-child) {
    text-align      : right;
    white-space     : nowrap;
    font-variant-numeric: tabular-nums;
}
/* Sticky first column so nutrient names stay visible while scrolling */
.vx-recipe-planner .vx-rp-cmp-table th:first-child,
.vx-recipe-planner .vx-rp-cmp-table td:first-child {
    position        : sticky;
    left            : 0;
    background      : var(--vx-white);
    z-index         : 1;
    box-shadow      : 2px 0 4px rgba(0,0,0,.06);
}
.vx-recipe-planner .vx-rp-cmp-table thead th:first-child {
    background      : var(--vx-navy);
    z-index         : 2;
}
/* Best value highlight */
.vx-recipe-planner .vx-rp-cmp-best {
    font-weight     : 900;
    color           : var(--vx-green-dark);
    background      : rgba(82,183,136,.1);
    border-radius   : 4px;
    padding         : .05rem .3rem;
}

.vx-recipe-planner .vx-rp-amt {
    width        : 72px;
    padding      : .28rem .45rem;
    border       : 1.5px solid var(--vx-border);
    border-radius: 5px;
    background   : var(--vx-white);
    color        : var(--vx-text);
    font-size    : .85rem;
    text-align   : center;
    font-weight  : 700;
}
.vx-recipe-planner .vx-rp-amt:focus { outline:none; border-color:var(--vx-green); }

.vx-recipe-planner .vx-rp-remove {
    background:none; border:none; cursor:pointer; color:var(--vx-muted);
    font-size:.95rem; padding:.2rem .4rem; border-radius:4px;
    transition:color var(--vx-trans), background var(--vx-trans);
}
.vx-recipe-planner .vx-rp-remove:hover { color:var(--vx-red); background:rgba(220,38,38,.08); }

/* ── LIVE SIDEBAR ────────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-sidebar {
    background   : var(--vx-white);
    border       : 1.5px solid var(--vx-border);
    border-radius: var(--vx-radius-sm);
    overflow     : visible;   /* was hidden — was clipping sidebar rows */
    position     : sticky;
    top          : 20px;
}
.vx-recipe-planner .vx-rp-sidebar[hidden] { display:none; }
.vx-recipe-planner .vx-rp-sidebar__header {
    background  : var(--vx-navy);
    color       : #fff;
    padding     : .65rem 1rem;
    font-size   : .8rem;
    font-weight : 800;
    display     : flex;
    align-items : center;
    gap         : .35rem;
    letter-spacing: .01em;
}
.vx-recipe-planner .vx-rp-sidebar__sub { margin-left:auto; font-size:.67rem; opacity:.65; font-weight:400; }
.vx-recipe-planner .vx-rp-sidebar__macro { padding:.6rem 1rem .3rem; }
.vx-recipe-planner .vx-rp-macro-bar--sm  { height:7px; border-radius:4px; }

.vx-recipe-planner .vx-rp-sidebar__list  { list-style:none; margin:0; padding:.2rem 0; }
.vx-recipe-planner .vx-rp-sb-row {
    display               : grid;
    grid-template-columns : 18px 1fr auto auto;
    gap                   : .28rem;
    align-items           : center;
    padding               : .4rem 1rem;
    border-bottom         : 1px solid var(--vx-border);
    font-size             : .82rem;
}
.vx-recipe-planner .vx-rp-sb-row:last-child { border:none; }
.vx-recipe-planner .vx-rp-sb-icon  { font-size:.9rem; }
.vx-recipe-planner .vx-rp-sb-name  { color:var(--vx-muted); font-size:.76rem; }
.vx-recipe-planner .vx-rp-sb-val   {
    font-weight: 800; font-size:.95rem; color:var(--vx-navy);
    transition : color .15s;
}
.vx-recipe-planner .vx-rp-sb-unit  { color:var(--vx-muted); font-size:.7rem; }
.vx-recipe-planner .vx-rp-sidebar__footer {
    display        : flex;
    justify-content: space-between;
    padding        : .52rem 1rem;
    font-size      : .72rem;
    color          : var(--vx-muted);
    background     : var(--vx-cream);
    border-top     : 1px solid var(--vx-border);
}

/* ── RECS CHIPS ──────────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-recs[hidden]  { display:none; }
.vx-recipe-planner .vx-rp-recs__label   { font-size:.8rem; margin:.9rem 0 .5rem; color:var(--vx-text); font-weight:700; }
/* Panel-2 variant — sits between nutrition summary and full breakdown */
.vx-recipe-planner .vx-rp-recs--panel2 {
    background    : #f6fdf0;
    border        : 1.5px solid #c6e5a0;
    border-radius : var(--vx-radius-sm);
    padding       : .8rem 1rem;
    margin-bottom : 1rem;
}
.vx-recipe-planner .vx-rp-recs--panel2 .vx-rp-recs__label {
    margin-top: 0;
}
.vx-recipe-planner .vx-rp-recs-chips    { display:flex; flex-wrap:wrap; gap:.4rem; }
.vx-recipe-planner .vx-rp-chip {
    display      : inline-flex; align-items:center; gap:.3rem;
    padding      : .3rem .75rem;
    background   : var(--vx-cream);
    border       : 1.5px solid var(--vx-border);
    border-radius: 99px;
    font-size    : .78rem; cursor:pointer;
    transition   : border-color var(--vx-trans), background var(--vx-trans);
    flex-direction: column; align-items:flex-start;
}
.vx-recipe-planner .vx-rp-chip:hover { border-color:var(--vx-green); background:rgba(113,178,48,.06); }
.vx-recipe-planner .vx-rp-chip__name { font-weight:700; font-size:.8rem; }
.vx-recipe-planner .vx-rp-chip__meta { font-size:.7rem; color:var(--vx-muted); }

/* ── BADGES ──────────────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-badge {
    display:inline-block; padding:.22rem .65rem; border-radius:99px;
    font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
}
.vx-recipe-planner .vx-rp-badge--excellent { background:rgba(113,178,48,.22); color:var(--vx-green-dark); }
.vx-recipe-planner .vx-rp-badge--good      { background:rgba(113,178,48,.16); color:#2f6b1a; }
.vx-recipe-planner .vx-rp-badge--fair      { background:rgba(255,102,0,.16);  color:#c44d00; }
.vx-recipe-planner .vx-rp-badge--poor      { background:rgba(220,38,38,.14);  color:var(--vx-red); }
.vx-recipe-planner .vx-rp-badge--info      { background:rgba(37,99,235,.1);   color:var(--vx-blue); }
/* Badge on dark bg (inside compliance block) */
.vx-recipe-planner .vx-rp-compliance .vx-rp-badge--excellent { background:rgba(113,178,48,.35); color:#cfffa3; }
.vx-recipe-planner .vx-rp-compliance .vx-rp-badge--good      { background:rgba(113,178,48,.28); color:#d4ffa8; }
.vx-recipe-planner .vx-rp-compliance .vx-rp-badge--fair      { background:rgba(255,102,0,.28);  color:#ffd4b3; }
.vx-recipe-planner .vx-rp-compliance .vx-rp-badge--poor      { background:rgba(220,38,38,.28);  color:#ffd4d4; }

/* ── COMPLIANCE BLOCK ────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-compliance {
    display      : flex;
    align-items  : flex-start;
    gap          : 1.2rem;
    background   : var(--vx-navy);
    border-radius: var(--vx-radius);
    padding      : 1.1rem 1.3rem;
    margin-bottom: 1.1rem;
    color        : #fff;
}
.vx-recipe-planner .vx-rp-donut-wrap  { position:relative; flex-shrink:0; }
.vx-recipe-planner .vx-rp-donut       { width:82px; height:82px; transform:rotate(-90deg); }
.vx-recipe-planner .vx-rp-donut__bg   { fill:none; stroke:rgba(255,255,255,.15); stroke-width:3.8; }
.vx-recipe-planner .vx-rp-donut__fg   {
    fill:none; stroke:var(--vx-green); stroke-width:3.8; stroke-linecap:round;
    transition:stroke-dasharray .7s cubic-bezier(.4,0,.2,1);
}
.vx-recipe-planner .vx-rp-donut__label {
    position  :absolute; top:50%; left:50%;
    transform :translate(-50%,-50%) rotate(90deg);
    font-size :1.05rem; font-weight:900; color:#fff;
}
.vx-recipe-planner .vx-rp-compliance__info   { flex:1; min-width:0; }
.vx-recipe-planner .vx-rp-compliance__top    { display:flex; align-items:center; gap:.6rem; margin-bottom:.3rem; flex-wrap:wrap; }
.vx-recipe-planner .vx-rp-compliance__label  { font-size:.75rem; opacity:.65; }
.vx-recipe-planner .vx-rp-compliance__goal   { font-size:.82rem; opacity:.7; margin:.12rem 0 .38rem; text-transform:capitalize; }
.vx-recipe-planner .vx-rp-compliance__notes  { margin:0; padding:0; list-style:none; }
.vx-recipe-planner .vx-rp-compliance__notes li {
    font-size:.76rem; opacity:.75; padding:.1rem 0 .1rem 1rem; position:relative;
}
.vx-recipe-planner .vx-rp-compliance__notes li::before {
    content:'›'; position:absolute; left:.1rem; color:var(--vx-orange); font-weight:900; font-size:.9rem; top:-.05rem;
}

/* ── RESULT HEADER ───────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-result-header {
    display        : flex;
    justify-content: space-between;
    align-items    : flex-start;
    flex-wrap      : wrap;
    gap            : .75rem;
    margin-bottom  : 1.1rem;
}
.vx-recipe-planner .vx-rp-result-meta { font-size:.8rem; color:var(--vx-muted); margin:.15rem 0 0; }
.vx-recipe-planner .vx-rp-save-btns   { display:flex; gap:.45rem; flex-wrap:wrap; }

/* ── VIEW TOGGLE ─────────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-view-toggle {
    display      : inline-flex;
    background   : var(--vx-cream);
    border       : 1.5px solid var(--vx-border);
    border-radius: var(--vx-radius-sm);
    overflow     : hidden;
    margin-bottom: 1rem;
}
.vx-recipe-planner .vx-rp-view-btn {
    padding    : .4rem 1rem;
    font-size  : .8rem;
    font-weight: 800;
    background : none;
    border     : none;
    cursor     : pointer;
    color      : var(--vx-muted);
    transition : background var(--vx-trans), color var(--vx-trans);
}
.vx-recipe-planner .vx-rp-view-btn--active { background:var(--vx-green); color:#fff; }

/* ── SUMMARY NUTRIENT CARDS ──────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-cards {
    display               : grid;
    grid-template-columns : repeat(6,1fr);
    gap                   : .5rem;
    margin-bottom         : 1rem;
}
.vx-recipe-planner .vx-rp-card {
    background    : var(--vx-white);
    border        : 1.5px solid var(--vx-border);
    border-radius : var(--vx-radius-sm);
    padding       : .7rem .45rem .55rem;
    text-align    : center;
    transition    : border-color var(--vx-trans), transform .12s;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : .08rem;
}
.vx-recipe-planner .vx-rp-card:hover { border-color:var(--vx-green); transform:translateY(-2px); }
.vx-recipe-planner .vx-rp-card__icon { font-size:1.15rem; line-height:1; }
.vx-recipe-planner .vx-rp-card__val  { font-size:1.05rem; font-weight:900; color:var(--vx-navy); line-height:1.15; margin-top:.06rem; }
.vx-recipe-planner .vx-rp-card__unit { font-size:.6rem; color:var(--vx-muted); }
.vx-recipe-planner .vx-rp-card__name { font-size:.61rem; text-transform:uppercase; letter-spacing:.04em; color:var(--vx-muted); margin-top:.05rem; }
.vx-recipe-planner .vx-rp-card__pct  {
    font-size:.61rem; font-weight:800; color:var(--vx-green);
    background:rgba(113,178,48,.1); border-radius:3px; padding:.08rem .28rem; margin-top:.12rem;
}

/* ── MACRO RATIO BAR ─────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-macro-wrap   { margin-bottom:1.1rem; }
.vx-recipe-planner .vx-rp-macro-bar    {
    display:flex; height:12px; border-radius:6px;
    overflow:hidden; background:var(--vx-border); margin-bottom:.4rem;
}
.vx-recipe-planner .vx-rp-macro-bar__p { background:var(--vx-protein); transition:width .6s ease; }
.vx-recipe-planner .vx-rp-macro-bar__c { background:var(--vx-carbs);   transition:width .6s ease; }
.vx-recipe-planner .vx-rp-macro-bar__f { background:var(--vx-fat);     transition:width .6s ease; }
.vx-recipe-planner .vx-rp-macro-bar--sm { height:7px; border-radius:4px; }
.vx-recipe-planner .vx-rp-macro-legend { display:flex; gap:1rem; flex-wrap:wrap; font-size:.77rem; }
.vx-recipe-planner #vx-rp-macro-legend-vals { display:flex; gap:1.1rem; flex-wrap:wrap; font-size:.77rem; font-weight:700; }

/* ── RDA PROGRESS BARS — compact 2-column grid ───────────────────────────── */
.vx-recipe-planner .vx-rp-rda-section { margin-bottom:1.2rem; }
.vx-recipe-planner .vx-rp-rda-section__heading {
    font-size     : .72rem;
    font-weight   : 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color         : var(--vx-muted);
    margin        : 0 0 .65rem;
}
/* 2-column grid of compact cells */
.vx-recipe-planner .vx-rp-rda-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : .55rem .9rem;
    margin-bottom         : .5rem;
}
.vx-recipe-planner .vx-rp-rda-cell {
    display       : flex;
    flex-direction: column;
    gap           : .22rem;
}
.vx-recipe-planner .vx-rp-rda-cell__top {
    display    : flex;
    align-items: center;
    gap        : .32rem;
}
.vx-recipe-planner .vx-rp-rda-cell__icon { font-size:.85rem; line-height:1; flex-shrink:0; }
.vx-recipe-planner .vx-rp-rda-cell__name {
    font-size  : .75rem;
    font-weight: 700;
    color      : var(--vx-navy);
    flex       : 1;
    white-space: nowrap;
    overflow   : hidden;
    text-overflow: ellipsis;
}
.vx-recipe-planner .vx-rp-rda-cell__pct {
    font-size  : .72rem;
    font-weight: 800;
    color      : var(--vx-muted);
    white-space: nowrap;
}
.vx-recipe-planner .vx-rp-rda__pct--over { color:var(--vx-orange); }
.vx-recipe-planner .vx-rp-rda__pct--low  { color:#d97706; }

/* The progress track */
.vx-recipe-planner .vx-rp-rda-cell__track {
    height       : 6px;
    border-radius: 3px;
    background   : var(--vx-border);
    overflow     : hidden;
}
.vx-recipe-planner .vx-rp-rda-cell__fill {
    height       : 100%;
    border-radius : 3px;
    transition   : width .75s cubic-bezier(.4,0,.2,1);
    min-width    : 2px; /* always show a sliver so bar is visible even at 1% */
}
.vx-recipe-planner .vx-rp-rda__bar--ok   { background:#cbd5e1; }
.vx-recipe-planner .vx-rp-rda__bar--low  { background:#fbbf24; }
.vx-recipe-planner .vx-rp-rda__bar--good { background:var(--vx-green); }
.vx-recipe-planner .vx-rp-rda__bar--over { background:var(--vx-orange); }
.vx-recipe-planner .vx-rp-rda__bar--incomplete {
    background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 4px, #e4dfd8 4px, #e4dfd8 8px);
}
/* A nutrient where at least one ingredient reported no value -- shown as a
   floor estimate (~X%), never a confident number, matching the same
   convention used across the other Vitaroxi tools. */
.vx-recipe-planner .vx-rp-rda-cell--incomplete .vx-rp-rda-cell__name,
.vx-recipe-planner .vx-rp-rda-cell--incomplete .vx-rp-rda-cell__val,
.vx-recipe-planner .vx-rp-rda-cell--incomplete .vx-rp-rda-cell__rda { color:var(--vx-muted); }
.vx-recipe-planner .vx-rp-incomplete-tag {
    display        : inline-block;
    font-size      : .6rem;
    font-weight    : 800;
    color          : #b25c00;
    background     : #fff0d9;
    border         : 1px solid #f0d9b5;
    border-radius  : 8px;
    padding        : 0 5px;
    vertical-align : middle;
}
.vx-recipe-planner tr.vx-rp-tr--incomplete td { color:var(--vx-muted); }
.vx-recipe-planner tr.vx-rp-tr--incomplete td:first-child { color:var(--vx-navy); }

/* Bottom row: value + "of X daily" */
.vx-recipe-planner .vx-rp-rda-cell__bottom {
    display    : flex;
    justify-content: space-between;
    align-items: center;
}
.vx-recipe-planner .vx-rp-rda-cell__val {
    font-size  : .68rem;
    font-weight: 700;
    color      : var(--vx-navy);
}
.vx-recipe-planner .vx-rp-rda-cell__rda {
    font-size  : .65rem;
    color      : var(--vx-muted);
}

/* Remove old full-width row styles (no longer used) */
.vx-recipe-planner .vx-rp-rda-row,
.vx-recipe-planner .vx-rp-rda__left,
.vx-recipe-planner .vx-rp-rda__right,
.vx-recipe-planner .vx-rp-rda__track,
.vx-recipe-planner .vx-rp-rda__fill,
.vx-recipe-planner .vx-rp-rda__overflow,
.vx-recipe-planner .vx-rp-rda__pct,
.vx-recipe-planner .vx-rp-rda__icon,
.vx-recipe-planner .vx-rp-rda__info,
.vx-recipe-planner .vx-rp-rda__name,
.vx-recipe-planner .vx-rp-rda__val,
.vx-recipe-planner .vx-rp-rda__unit { /* kept for backward compat, hidden via grid */ }

.vx-recipe-planner .vx-rp-rda__note {
    font-size  : .67rem;
    color      : var(--vx-muted);
    font-style : italic;
    text-align : right;
    margin-top : .3rem;
}
.vx-recipe-planner .vx-rp-tbl-pct {
    font-size  : .68rem;
    color      : var(--vx-green);
    font-weight: 800;
    margin-left: .3rem;
    opacity    : .85;
}





/* ── DETAILS ACCORDION ───────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-details {
    border       : 1.5px solid var(--vx-border);
    border-radius: var(--vx-radius-sm);
    margin-bottom: 1.05rem;
    overflow     : hidden;
}
.vx-recipe-planner .vx-rp-details__sum {
    padding     : .65rem 1rem;
    font-size   : .83rem;
    font-weight : 800;
    cursor      : pointer;
    background  : var(--vx-cream);
    user-select : none;
    list-style  : none;
    display     : flex;
    align-items : center;
    gap         : .4rem;
    color       : var(--vx-navy);
}
.vx-recipe-planner .vx-rp-details__sum::before { content:'▶'; font-size:.58rem; transition:transform var(--vx-trans); color:var(--vx-green); }
.vx-recipe-planner .vx-rp-details[open] .vx-rp-details__sum::before { transform:rotate(90deg); }

/* ── COMPARE ─────────────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-cmp-checks    { display:flex; flex-wrap:wrap; gap:.42rem; margin:.68rem 0; }
.vx-recipe-planner .vx-rp-cmp-chip {
    display      : inline-flex; align-items:center; gap:.32rem;
    padding      : .28rem .65rem;
    border       : 1.5px solid var(--vx-border);
    border-radius: 99px; cursor:pointer; font-size:.8rem;
    transition   : border-color var(--vx-trans), background var(--vx-trans);
}
.vx-recipe-planner .vx-rp-cmp-chip input    { display:none; }
.vx-recipe-planner .vx-rp-cmp-chip--on      { border-color:var(--vx-green); background:rgba(113,178,48,.09); color:var(--vx-navy); }
.vx-recipe-planner .vx-rp-cmp-result[hidden]{ display:none; }
.vx-recipe-planner .vx-rp-cmp-result        { overflow-x:auto; margin-top:1rem; }
.vx-recipe-planner .vx-rp-cmp-table         { min-width:440px; }
.vx-recipe-planner .vx-rp-cmp-best          { font-weight:900; color:var(--vx-green-dark); }

/* ── TIPS ────────────────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-tips[hidden]   { display:none; }
.vx-recipe-planner .vx-rp-tips           { margin-top:1.25rem; background:var(--vx-cream); border:1px solid var(--vx-border); border-radius:var(--vx-radius-sm); padding:.88rem 1.15rem; }
.vx-recipe-planner .vx-rp-tips__heading  { margin:0 0 .58rem; font-size:.9rem; font-weight:800; color:var(--vx-navy); }
.vx-recipe-planner .vx-rp-tips-list      { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.36rem; }
.vx-recipe-planner .vx-rp-tips-list li   { font-size:.8rem; padding-left:1rem; position:relative; }
.vx-recipe-planner .vx-rp-tips-list li::before { content:'✓'; position:absolute; left:0; color:var(--vx-green); font-weight:800; }

/* ── LOADER ──────────────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-loader {
    position:absolute; inset:0;
    background:rgba(0,15,43,.55);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.85rem; z-index:9000; border-radius:var(--vx-radius);
}
.vx-recipe-planner .vx-rp-loader[hidden] { display:none; }
.vx-recipe-planner .vx-rp-loader__spin {
    width:42px; height:42px;
    border:4px solid rgba(255,255,255,.2);
    border-top-color:var(--vx-green);
    border-radius:50%; animation:vxRpSpin .65s linear infinite;
}
.vx-recipe-planner .vx-rp-loader p { color:#fff; font-size:.87rem; font-weight:700; margin:0; }

/* ── TOAST ───────────────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-toast {
    position     : fixed;
    bottom       : 1.4rem; right:1.4rem;
    z-index      : 9999;
    background   : var(--vx-navy);
    color        : #fff;
    padding      : .62rem 1.15rem;
    border-radius: var(--vx-radius-sm);
    font-size    : .84rem; font-weight:700;
    box-shadow   : 0 4px 18px rgba(0,15,43,.28);
    max-width    : 300px;
    animation    : vxRpSlide .26s ease;
}
.vx-recipe-planner .vx-rp-toast[hidden]  { display:none; }
.vx-recipe-planner .vx-rp-toast--success { background:var(--vx-green); }
.vx-recipe-planner .vx-rp-toast--error   { background:var(--vx-red); }
@keyframes vxRpSlide { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* ── CLICKABLE RESULT NAME ───────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-result-name--clickable {
    cursor       : pointer;
    text-decoration: underline dotted var(--vx-green);
    text-underline-offset: 3px;
    transition   : color var(--vx-trans);
}
.vx-recipe-planner .vx-rp-result-name--clickable:hover { color:var(--vx-green); }

/* Custom qty button (3rd button in results) */
.vx-recipe-planner .vx-rp-res-btn--custom {
    border-color : var(--vx-orange);
    color        : var(--vx-orange);
    font-size    : .68rem;
}
.vx-recipe-planner .vx-rp-res-btn--custom:hover { background:var(--vx-orange); color:#fff; border-color:var(--vx-orange); }

/* "Add custom food" row at bottom of results */
.vx-recipe-planner .vx-rp-result-custom-row {
    padding     : .42rem .85rem;
    border-top  : 1px dashed var(--vx-border);
    background  : var(--vx-cream);
    font-size   : .75rem;
}

/* ── BLANK QTY ROW ───────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-tr--blank td { background:rgba(255,102,0,.04); }
.vx-recipe-planner .vx-rp-amt--blank {
    border-color : var(--vx-orange) !important;
    background   : rgba(255,102,0,.06) !important;
    animation    : vxRpPulse 1.4s ease infinite;
}
@keyframes vxRpPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,102,0,.25); }
    50%      { box-shadow: 0 0 0 4px rgba(255,102,0,.12); }
}
.vx-recipe-planner .vx-rp-blank-hint {
    display      : block;
    font-size    : .65rem;
    color        : var(--vx-orange);
    font-weight  : 700;
    margin-top   : .18rem;
    animation    : vxRpPulse 1.4s ease infinite;
}

/* Custom food badge inline in table */
.vx-recipe-planner .vx-rp-badge-custom {
    display      : inline-block;
    font-size    : .65rem;
    font-weight  : 800;
    padding      : .1rem .38rem;
    border-radius: 4px;
    background   : rgba(255,102,0,.12);
    color        : var(--vx-orange);
    border       : 1px solid rgba(255,102,0,.25);
    margin-left  : .25rem;
    vertical-align: middle;
}

/* ── CUSTOM FOOD MODAL ───────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-custom-modal {
    position     : fixed;
    inset        : 0;
    background   : rgba(0,15,43,.6);
    z-index      : 10000;
    display      : flex;
    align-items  : center;
    justify-content: center;
    padding      : 1rem;
    animation    : vxRpFadeIn .18s ease;
}
.vx-recipe-planner .vx-rp-custom-modal__box {
    background   : var(--vx-white);
    border-radius: var(--vx-radius);
    box-shadow   : 0 8px 40px rgba(0,15,43,.28);
    width        : 100%;
    max-width    : 560px;
    max-height   : 90vh;
    overflow-y   : auto;
    display      : flex;
    flex-direction: column;
}
.vx-recipe-planner .vx-rp-custom-modal__hdr {
    display      : flex;
    align-items  : center;
    justify-content: space-between;
    padding      : 1rem 1.25rem;
    background   : var(--vx-navy);
    color        : #fff;
    font-size    : .95rem;
    font-weight  : 800;
    border-radius: var(--vx-radius) var(--vx-radius) 0 0;
    flex-shrink  : 0;
}
.vx-recipe-planner .vx-rp-custom-modal__close {
    background:none; border:none; color:rgba(255,255,255,.65); font-size:1.15rem;
    cursor:pointer; padding:.2rem .4rem; border-radius:4px;
    transition: color var(--vx-trans), background var(--vx-trans);
}
.vx-recipe-planner .vx-rp-custom-modal__close:hover { color:#fff; background:rgba(255,255,255,.12); }
.vx-recipe-planner .vx-rp-custom-modal__body {
    padding      : 1.2rem 1.25rem;
    flex         : 1;
}
.vx-recipe-planner .vx-rp-custom-modal__note {
    font-size    : .82rem;
    color        : var(--vx-muted);
    margin       : 0 0 1rem;
    padding      : .6rem .8rem;
    background   : var(--vx-cream);
    border-radius: var(--vx-radius-sm);
    border-left  : 3px solid var(--vx-green);
}
.vx-recipe-planner .vx-rp-custom-modal__grid {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : .8rem;
    margin-bottom         : .9rem;
}
.vx-recipe-planner .vx-rp-custom-modal__nutrients {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : .7rem;
    margin-bottom         : .9rem;
}
.vx-recipe-planner .vx-rp-custom-modal__disclaimer {
    font-size    : .74rem;
    color        : var(--vx-orange);
    background   : rgba(255,102,0,.07);
    border        : 1px solid rgba(255,102,0,.2);
    border-radius : var(--vx-radius-sm);
    padding       : .5rem .75rem;
}
.vx-recipe-planner .vx-rp-custom-modal__ftr {
    display      : flex;
    justify-content: flex-end;
    gap          : .65rem;
    padding      : .9rem 1.25rem;
    border-top   : 1px solid var(--vx-border);
    background   : var(--vx-cream);
    border-radius: 0 0 var(--vx-radius) var(--vx-radius);
    flex-shrink  : 0;
}

/* ── BALANCE MEAL TOGGLE + SUGGESTIONS ───────────────────────────────────── */
.vx-recipe-planner .vx-rp-improv-wrap          { margin-bottom:1.15rem; border:1.5px solid var(--vx-border); border-radius:var(--vx-radius); overflow:hidden; }
.vx-recipe-planner .vx-rp-improv-wrap[hidden]  { display:none; }

/* Toggle button — same style as score explain */
.vx-recipe-planner .vx-rp-improv-toggle {
    display        : flex;
    align-items    : center;
    gap            : .55rem;
    width          : 100%;
    padding        : .72rem 1rem;
    background     : var(--vx-navy);
    border         : none;
    cursor         : pointer;
    text-align     : left;
    transition     : background var(--vx-trans);
}
.vx-recipe-planner .vx-rp-improv-toggle:hover { background:rgba(0,15,43,.85); }
.vx-recipe-planner .vx-rp-improv-toggle__icon  { font-size:1.1rem; flex-shrink:0; }
.vx-recipe-planner .vx-rp-improv-toggle__label {
    display       : flex;
    flex-direction: column;
    gap           : .1rem;
    flex          : 1;
    min-width     : 0;
    font-size     : .85rem;
    font-weight   : 800;
    color         : #fff;
}
.vx-recipe-planner .vx-rp-improv-toggle__sub {
    font-size  : .72rem;
    font-weight: 400;
    opacity    : .65;
    color      : #fff;
}
.vx-recipe-planner .vx-rp-improv-toggle__chevron { color:rgba(255,255,255,.55); font-size:.7rem; flex-shrink:0; }

/* Body — hidden by default */
.vx-recipe-planner .vx-rp-improv-body          { border-top:none; }
.vx-recipe-planner .vx-rp-improv-body[hidden]  { display:none; }
.vx-recipe-planner .vx-rp-improv__list         { display:flex; flex-direction:column; }

/* Each nutrient gap section */
.vx-recipe-planner .vx-rp-improv-section        { border-bottom:1px solid var(--vx-border); overflow:hidden; }
.vx-recipe-planner .vx-rp-improv-section:last-child { border-bottom:none; }
.vx-recipe-planner .vx-rp-improv-section--low   { border-left:4px solid var(--vx-green); }
.vx-recipe-planner .vx-rp-improv-section--high  { border-left:4px solid var(--vx-orange); }

.vx-recipe-planner .vx-rp-improv-section__hdr {
    display        : flex;
    align-items    : center;
    gap            : .6rem;
    padding        : .7rem 1rem;
    background     : var(--vx-cream);
    flex-wrap      : wrap;
}
.vx-recipe-planner .vx-rp-improv-section__icon  { font-size:1.25rem; flex-shrink:0; }
.vx-recipe-planner .vx-rp-improv-section__info  { flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.vx-recipe-planner .vx-rp-improv-section__title { font-size:.82rem; font-weight:800; color:var(--vx-navy); }
.vx-recipe-planner .vx-rp-improv-section--low  .vx-rp-improv-section__title { color:var(--vx-green-dark); }
.vx-recipe-planner .vx-rp-improv-section--high .vx-rp-improv-section__title { color:#c44d00; }
.vx-recipe-planner .vx-rp-improv-section__reason { font-size:.72rem; color:var(--vx-muted); }
.vx-recipe-planner .vx-rp-improv-section__dismiss {
    background:none; border:none; cursor:pointer; color:var(--vx-muted);
    font-size:.85rem; padding:.2rem .38rem; border-radius:4px; flex-shrink:0;
    transition:color var(--vx-trans),background var(--vx-trans);
}
.vx-recipe-planner .vx-rp-improv-section__dismiss:hover { color:var(--vx-red); background:rgba(220,38,38,.08); }

/* Option rows inside each section */
.vx-recipe-planner .vx-rp-improv-section__opts { padding:.28rem 0; }
.vx-recipe-planner .vx-rp-improv-opt {
    display       : flex;
    align-items   : center;
    gap           : .65rem;
    padding       : .55rem .9rem .55rem 1.1rem;
    flex-wrap     : wrap;
    border-bottom : 1px solid rgba(0,0,0,.04);
    transition    : background var(--vx-trans);
}
.vx-recipe-planner .vx-rp-improv-opt:last-child { border-bottom:none; }
.vx-recipe-planner .vx-rp-improv-opt:hover      { background:rgba(0,0,0,.025); }
.vx-recipe-planner .vx-rp-improv-opt--done      { opacity:.45; }

.vx-recipe-planner .vx-rp-improv-opt__main      { display:flex; flex-direction:column; gap:.15rem; flex:1; min-width:140px; }
.vx-recipe-planner .vx-rp-improv-opt__nameline  { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.vx-recipe-planner .vx-rp-improv-opt__food      { font-size:.83rem; font-weight:800; color:var(--vx-navy); }
.vx-recipe-planner .vx-rp-improv-opt__detail    { font-size:.72rem; color:var(--vx-muted); }
.vx-recipe-planner .vx-rp-improv-opt__provides  { font-size:.7rem; color:var(--vx-green-dark); font-weight:600; }
.vx-recipe-planner .vx-rp-improv-opt__manual    { font-size:.71rem; color:var(--vx-muted); font-style:italic; }

/* Tags: "Add to recipe" (green) vs "Eat alongside" (blue) vs "Reduce amount" (orange) */
.vx-recipe-planner .vx-rp-improv-opt__tag {
    display      : inline-block;
    font-size    : .62rem;
    font-weight  : 800;
    padding      : .1rem .42rem;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space  : nowrap;
    flex-shrink  : 0;
}
.vx-recipe-planner .vx-rp-improv-opt__tag--add    { background:rgba(113,178,48,.18); color:var(--vx-green-dark); border:1px solid rgba(113,178,48,.3); }
.vx-recipe-planner .vx-rp-improv-opt__tag--side   { background:rgba(37,99,235,.1);   color:#1d4ed8;             border:1px solid rgba(37,99,235,.22); }
.vx-recipe-planner .vx-rp-improv-opt__tag--reduce { background:rgba(255,102,0,.13);  color:#c44d00;             border:1px solid rgba(255,102,0,.25); }

/* Impact bar */
.vx-recipe-planner .vx-rp-improv-opt__bar {
    display    : flex;
    align-items: center;
    gap        : .32rem;
    width      : 100px;
    flex-shrink: 0;
}
.vx-recipe-planner .vx-rp-improv-opt__bar > div {
    flex:1; height:6px; background:var(--vx-border); border-radius:3px; overflow:hidden;
}
.vx-recipe-planner .vx-rp-improv-opt--add    .vx-rp-improv-opt__bar > div > div { background:var(--vx-green);  height:100%; border-radius:3px; transition:width .6s ease; }
.vx-recipe-planner .vx-rp-improv-opt--reduce .vx-rp-improv-opt__bar > div > div { background:var(--vx-orange); height:100%; border-radius:3px; transition:width .6s ease; }
.vx-recipe-planner .vx-rp-improv-opt__bar > span { font-size:.67rem; font-weight:800; color:var(--vx-muted); white-space:nowrap; min-width:26px; text-align:right; }
.vx-recipe-planner .vx-rp-improv-opt__bar--reduce > div > div { background:var(--vx-orange); }

.vx-recipe-planner .vx-rp-improv-opt__actions  { display:flex; align-items:center; gap:.35rem; flex-shrink:0; }
.vx-recipe-planner .vx-rp-improv-opt__grams    { font-size:.7rem; font-weight:800; color:var(--vx-muted); background:var(--vx-cream); border:1px solid var(--vx-border); border-radius:4px; padding:.12rem .38rem; }
.vx-recipe-planner .vx-rp-improv__add-opt,
.vx-recipe-planner .vx-rp-improv__apply-opt    { font-size:.74rem !important; padding:.3rem .7rem !important; }





/* ── PRINT ───────────────────────────────────────────────────────────────── */
.vx-recipe-planner .vx-rp-explain {
    border        : 1.5px solid var(--vx-border);
    border-radius : var(--vx-radius-sm);
    margin-bottom : 1.1rem;
    overflow      : hidden;
}
.vx-recipe-planner .vx-rp-explain__toggle {
    display      : flex;
    align-items  : center;
    gap          : .5rem;
    width        : 100%;
    padding      : .68rem 1rem;
    background   : var(--vx-cream);
    border       : none;
    cursor       : pointer;
    font-size    : .82rem;
    font-weight  : 700;
    color        : var(--vx-navy);
    text-align   : left;
    transition   : background var(--vx-trans);
}
.vx-recipe-planner .vx-rp-explain__toggle:hover { background:rgba(113,178,48,.08); }
.vx-recipe-planner .vx-rp-explain__toggle-icon  { font-size:.9rem; }
.vx-recipe-planner .vx-rp-explain__chevron      { margin-left:auto; font-size:.7rem; color:var(--vx-muted); }
.vx-recipe-planner .vx-rp-explain__body         { padding:.9rem 1.1rem; border-top:1px solid var(--vx-border); }
.vx-recipe-planner .vx-rp-explain__body[hidden] { display:none; }
.vx-recipe-planner .vx-rp-explain__section      { margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid var(--vx-border); }
.vx-recipe-planner .vx-rp-explain__section:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.vx-recipe-planner .vx-rp-explain__section--ref { background:var(--vx-cream); border-radius:var(--vx-radius-sm); padding:.75rem 1rem; border:none; margin-bottom:0; }
.vx-recipe-planner .vx-rp-explain__subhead {
    font-size:.76rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.06em; color:var(--vx-navy); margin:0 0 .5rem;
}
.vx-recipe-planner .vx-rp-explain__desc    { font-size:.77rem; color:var(--vx-muted); line-height:1.55; margin:0 0 .55rem; }
.vx-recipe-planner .vx-rp-explain__formula { list-style:none; margin:0 0 .5rem; padding:0; display:flex; flex-direction:column; gap:.38rem; }
.vx-recipe-planner .vx-rp-explain__formula li {
    font-size:.77rem; color:var(--vx-text); padding:.35rem .7rem;
    background:var(--vx-white); border-radius:var(--vx-radius-sm);
    border-left:3px solid var(--vx-green); line-height:1.45;
}
.vx-recipe-planner .vx-rp-explain__weight {
    display:inline-block; font-size:.68rem; font-weight:900;
    background:var(--vx-green); color:#fff; border-radius:4px;
    padding:.1rem .35rem; margin-right:.3rem;
}
.vx-recipe-planner .vx-rp-explain__table          { width:100%; border-collapse:collapse; font-size:.76rem; margin-top:.45rem; }
.vx-recipe-planner .vx-rp-explain__table th       { background:var(--vx-navy); color:rgba(255,255,255,.75); padding:.32rem .6rem; font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; text-align:left; }
.vx-recipe-planner .vx-rp-explain__table td       { padding:.35rem .6rem; border-bottom:1px solid var(--vx-border); vertical-align:middle; }
.vx-recipe-planner .vx-rp-explain__table tr:last-child td { border-bottom:none; }
.vx-recipe-planner .vx-rp-explain__table tr:hover td    { background:var(--vx-cream); }
.vx-recipe-planner .vx-rp-explain__nut  { font-weight:700; color:var(--vx-navy); }
.vx-recipe-planner .vx-rp-explain__val  { color:var(--vx-muted); white-space:nowrap; }
.vx-recipe-planner .vx-rp-explain__pts  { font-weight:800; white-space:nowrap; font-size:.72rem; }
.vx-recipe-planner .vx-rp-explain__pct-cell { display:flex; align-items:center; gap:.45rem; }
.vx-recipe-planner .vx-rp-explain__pct-cell span { white-space:nowrap; color:var(--vx-muted); font-size:.7rem; }
.vx-recipe-planner .vx-rp-explain__mini-bar { width:60px; height:6px; background:var(--vx-border); border-radius:3px; overflow:hidden; flex-shrink:0; }
.vx-recipe-planner .vx-rp-explain__disclaimer {
    font-size:.72rem; color:#92400e; background:#fffbeb;
    border:1px solid #fde68a; border-radius:6px;
    padding:.5rem .72rem; margin-top:.55rem; line-height:1.5;
}

@media print {
    .vx-recipe-planner .vx-rp-tabs,
    .vx-recipe-planner .vx-rp-actions,
    .vx-recipe-planner .vx-rp-topbar .vx-rp-analyse-btn,
    .vx-recipe-planner .vx-rp-loader,
    .vx-recipe-planner .vx-rp-toast,
    .vx-recipe-planner .vx-rp-explain,
    .vx-recipe-planner .vx-rp-save-btns    { display:none !important; }
    .vx-recipe-planner                      { box-shadow:none; border:1px solid #ccc; }

    /* Force custom icon image to print — browsers suppress images by default */
    .vx-recipe-planner .vx-rp-header__icon--img {
        display              : block !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust   : exact !important;
        width                : 48px !important;
        height               : 48px !important;
        object-fit           : contain !important;
        filter               : none !important;   /* remove drop-shadow for cleaner print */
    }

    /* Hide emoji icon when a custom image icon is present on the same element
       (they are mutually exclusive from PHP but this future-proofs it) */
    .vx-recipe-planner .vx-rp-header__icon--emoji {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust   : exact !important;
    }
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   TABLET  ≤ 780px
═══════════════════════════════════════════════════════════ */
@media (max-width:780px) {
    .vx-recipe-planner .vx-rp-builder-layout { grid-template-columns:1fr; }
    .vx-recipe-planner .vx-rp-sidebar         { position:static; overflow:visible; }
    .vx-recipe-planner .vx-rp-cards           { grid-template-columns:repeat(3,1fr); }
    .vx-recipe-planner .vx-rp-results         { max-height:320px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE  ≤ 600px
═══════════════════════════════════════════════════════════ */
@media (max-width:600px) {

    /* ── ROOT — allow vertical scroll, hide only horizontal ── */
    .vx-recipe-planner {
        margin        : 0;
        border-radius : 0;
        overflow-x    : hidden;
        overflow-y    : visible;
    }

    /* ── PANEL — natural height, scroll handled by page ── */
    .vx-recipe-planner .vx-rp-panel         { padding:.85rem .75rem; overflow:visible; }

    /* ── BUILDER MAIN — allow full height, page scrolls ── */
    .vx-recipe-planner .vx-rp-builder-main  { overflow:visible; }

    /* ── SIDEBAR (Live Nutrition) — full width card, scrollable ── */
    .vx-recipe-planner .vx-rp-sidebar {
        position      : static;
        overflow      : visible;
        max-height    : none;
        border-radius : var(--vx-radius-sm);
        margin-top    : 1rem;
    }
    .vx-recipe-planner .vx-rp-sidebar__list {
        max-height    : none;
        overflow-y    : visible;
    }

    /* ── HEADER ── */
    .vx-recipe-planner .vx-rp-header        { padding:.9rem .75rem; gap:.6rem; overflow:hidden; }
    .vx-recipe-planner .vx-rp-header__meta  { width:100%; }
    .vx-recipe-planner .vx-rp-header__title { font-size:1.05rem; }
    .vx-recipe-planner .vx-rp-header__sub   { font-size:.72rem; }
    .vx-recipe-planner .vx-rp-header__icon--img { width:40px; height:40px; }

    /* ── TABS ── */
    .vx-recipe-planner .vx-rp-tab__lbl      { display:none; }
    .vx-recipe-planner .vx-rp-tabs          { gap:0; }
    .vx-recipe-planner .vx-rp-tab           { flex:1; justify-content:center; padding:.6rem .4rem; font-size:.8rem; }

    /* ══════════════════════════════════════════════════════
       SEARCH BAR — clean two-row layout
       Row 1: search icon + full-width input
       Row 2: mic button (left) + Filters button (right)
    ══════════════════════════════════════════════════════ */
    .vx-recipe-planner .vx-rp-search-row {
        display        : grid;
        grid-template-columns: 1fr auto auto;
        grid-template-rows   : auto auto;
        gap            : .45rem;
        align-items    : center;
    }

    /* Input spans full top row */
    .vx-recipe-planner .vx-rp-input--search {
        grid-column   : 1 / -1;   /* span all 3 columns */
        grid-row      : 1;
        padding-left  : 2.35rem;
        padding-right : .75rem;
        font-size     : 1rem;     /* 16px — stop iOS auto-zoom */
        height        : 48px;
        border-radius : var(--vx-radius-sm);
        width         : 100%;
    }

    /* Search icon sits over input */
    .vx-recipe-planner .vx-rp-search-icon {
        grid-column   : 1;
        grid-row      : 1;
        z-index       : 2;
        pointer-events: none;
    }

    /* Spinner inside input row */
    .vx-recipe-planner .vx-rp-spinner {
        grid-column   : 1 / -1;
        grid-row      : 1;
        position      : absolute;
        right         : .75rem;
        top           : 50%;
        transform     : translateY(-50%);
        z-index       : 3;
    }

    /* Voice button — row 2 left */
    .vx-recipe-planner .vx-rp-voice-btn {
        grid-column   : 1;
        grid-row      : 2;
        position      : static;
        display       : flex;
        align-items   : center;
        justify-content: center;
        gap           : .4rem;
        height        : 40px;
        padding       : 0 1rem;
        border        : 1.5px solid var(--vx-border);
        border-radius : var(--vx-radius-sm);
        background    : var(--vx-cream);
        font-size     : .8rem;
        font-weight   : 700;
        color         : var(--vx-muted);
        width         : 100%;
    }
    /* "Voice" label text on mobile */
    .vx-recipe-planner .vx-rp-voice-btn::after {
        content       : 'Voice';
        font-size     : .78rem;
        font-weight   : 700;
    }

    /* Filters button — row 2 right */
    .vx-recipe-planner .vx-rp-filter-toggle {
        grid-column   : 2 / -1;
        grid-row      : 2;
        position      : static;
        height        : 40px;
        padding       : 0 1rem;
        border        : 1.5px solid var(--vx-border);
        border-radius : var(--vx-radius-sm);
        font-size     : .8rem;
        margin-top    : 0;
        width         : 100%;
    }

    /* ── SEARCH RESULTS ───────────────────────────────────────
       Absolute under the search-wrap (not fixed, avoids parent
       overflow issues). Page scrolls, dropdown scrolls inside.
    ──────────────────────────────────────────────────────── */
    .vx-recipe-planner .vx-rp-results {
        position      : absolute;
        left          : 0;
        right         : 0;
        top           : 100%;
        max-height    : 52vh;
        border-radius : 0 0 var(--vx-radius-sm) var(--vx-radius-sm);
        border-left   : 1.5px solid var(--vx-border);
        border-right  : 1.5px solid var(--vx-border);
        z-index       : 999;
        box-shadow    : 0 8px 24px rgba(0,0,0,.15);
        overflow-y    : auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Bigger tap targets */
    .vx-recipe-planner .vx-rp-result-item {
        flex-direction : column;
        align-items    : flex-start;
        padding        : .8rem 1rem;
        gap            : .35rem;
    }
    .vx-recipe-planner .vx-rp-result-name   { font-size:.95rem; }
    .vx-recipe-planner .vx-rp-result-meta   { gap:.3rem; flex-wrap:wrap; }
    .vx-recipe-planner .vx-rp-result-macros { font-size:.75rem; gap:.5rem; }
    .vx-recipe-planner .vx-rp-result-actions {
        flex-direction : row;
        width          : 100%;
        justify-content: flex-end;
        gap            : .4rem;
    }
    .vx-recipe-planner .vx-rp-res-btn {
        flex           : 1;
        justify-content: center;
        padding        : .45rem .5rem;
        font-size      : .78rem;
        min-height     : 38px;
    }

    /* ── TABLES ON MOBILE — horizontal scroll wrapper ── */
    .vx-recipe-planner .vx-rp-table-scroll {
        overflow-x             : auto;
        -webkit-overflow-scrolling: touch;
        width                  : 100%;
        display                : block;
    }

    /* ── PANEL 1 INGREDIENT TABLE — compact to fit mobile width ──
       Target: fit ~360px screen without horizontal scroll if possible.
       Ingredient 38% | Amt 14% | Cal 14% | P 11% | C 11% | F 11% | X 1%
    ──────────────────────────────────────────────────────────────── */
    #vx-rp-panel-1 .vx-rp-table { table-layout:fixed; width:100%; font-size:.78rem; }
    #vx-rp-panel-1 .vx-rp-table th,
    #vx-rp-panel-1 .vx-rp-table td          { padding:.38rem .3rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    /* Col order: 1=Name 2=Amt 3=Unit 4=Cal 5=Pro 6=Carb 7=Fat 8=Remove */
    #vx-rp-panel-1 .vx-rp-table th:nth-child(1),
    #vx-rp-panel-1 .vx-rp-table td:nth-child(1) { width:30%; white-space:normal; word-break:break-word; }
    #vx-rp-panel-1 .vx-rp-table th:nth-child(2),
    #vx-rp-panel-1 .vx-rp-table td:nth-child(2) { width:13%; text-align:right; }
    #vx-rp-panel-1 .vx-rp-table th:nth-child(3),
    #vx-rp-panel-1 .vx-rp-table td:nth-child(3) { width:7%;  text-align:center; color:var(--vx-muted); }
    #vx-rp-panel-1 .vx-rp-table th:nth-child(4),
    #vx-rp-panel-1 .vx-rp-table td:nth-child(4),
    #vx-rp-panel-1 .vx-rp-table th:nth-child(5),
    #vx-rp-panel-1 .vx-rp-table td:nth-child(5),
    #vx-rp-panel-1 .vx-rp-table th:nth-child(6),
    #vx-rp-panel-1 .vx-rp-table td:nth-child(6),
    #vx-rp-panel-1 .vx-rp-table th:nth-child(7),
    #vx-rp-panel-1 .vx-rp-table td:nth-child(7) { width:11%; text-align:right; }
    #vx-rp-panel-1 .vx-rp-table th:nth-child(8),
    #vx-rp-panel-1 .vx-rp-table td:nth-child(8) { width:3%;  padding:0; }

    /* Amount input compact */
    #vx-rp-panel-1 .vx-rp-amt { width:100%; min-width:44px; height:32px; font-size:.8rem; padding:0 .2rem; text-align:center; }

    /* Remove button compact */
    #vx-rp-panel-1 .vx-rp-remove { padding:.2rem .3rem; font-size:.75rem; }

    .vx-recipe-planner .vx-rp-amt { height:36px; font-size:.9rem; }

    /* ── TOPBAR / ANALYSE ── */
    .vx-recipe-planner .vx-rp-topbar        { flex-direction:column; gap:.5rem; }
    .vx-recipe-planner .vx-rp-analyse-btn   { width:100%; justify-content:center; min-height:44px; font-size:.95rem; }

    /* ── NUTRITION CARDS ── */
    .vx-recipe-planner .vx-rp-cards         { grid-template-columns:repeat(2,1fr); gap:.5rem; }

    /* ── COMPLIANCE / SCORE ── */
    .vx-recipe-planner .vx-rp-compliance    { flex-direction:column; gap:.5rem; }

    /* ── FILTER PANEL ── */
    .vx-recipe-planner .vx-rp-filter-row    { flex-direction:column; gap:.38rem; }
    .vx-recipe-planner .vx-rp-filter-label  { min-width:auto; padding-top:0; }
    .vx-recipe-planner .vx-rp-filter-chips  { flex-wrap:wrap; }

    /* ── BROWSE GRID ── */
    .vx-recipe-planner .vx-rp-browse-grid       { grid-template-columns:repeat(3,1fr); gap:.5rem; }
    .vx-recipe-planner .vx-rp-browse-cat__icon  { font-size:1.6rem; }
    .vx-recipe-planner .vx-rp-browse-cat__lbl   { font-size:.7rem; }

    /* ── RDA BARS ── */
    .vx-recipe-planner .vx-rp-rda__left     { width:90px; }
    .vx-recipe-planner .vx-rp-rda__name     { font-size:.68rem; }

    /* ── COMPARE PANEL ── */
    .vx-recipe-planner .vx-rp-result-header { flex-direction:column; }
}

/* ═══════════════════════════════════════════════════════════
   SMALL MOBILE  ≤ 380px  (iPhone SE, Moto G4 etc.)
═══════════════════════════════════════════════════════════ */
@media (max-width:380px) {
    .vx-recipe-planner .vx-rp-header__title { font-size:.95rem; }
    .vx-recipe-planner .vx-rp-cards         { grid-template-columns:repeat(2,1fr); }
    .vx-recipe-planner .vx-rp-browse-grid   { grid-template-columns:repeat(2,1fr); }
    .vx-recipe-planner .vx-rp-tab           { font-size:.72rem; padding:.55rem .3rem; }
    .vx-recipe-planner .vx-rp-results       { max-height:60vh; }
    .vx-recipe-planner .vx-rp-voice-btn::after { content:'Voice'; }
}