/* RMG Menu Manager — Frontend Styles
   These are intentionally minimal/semantic — override in your theme or Elementor custom CSS */

/* ---- CSS variable defaults ---- */
.rmg-menu-wrapper {
    --rmg-primary: inherit;
    --rmg-secondary: inherit;
    --rmg-font: inherit;
    font-family: var(--rmg-font);
}

/* ---- Tab navigation ---- */
.rmg-menu-tabs { width: 100%; }

.rmg-menu-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    border-bottom: 2px solid #e0e0e0;
}

.rmg-menu-tabs__tab {
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    user-select: none;
}

.rmg-menu-tabs__tab:hover { color: #111; }

.rmg-menu-tabs__tab--active {
    color: var(--rmg-primary, #111);
    border-bottom-color: var(--rmg-primary, #111);
}

.rmg-menu-tabs__panel { display: none; }
.rmg-menu-tabs__panel--active { display: block; }

/* ---- Menu structure ---- */
.rmg-menu {}

/* Active tab heading — visible inside each tab panel */
.rmg-menu__active-tab-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.rmg-menu__category {
    margin-bottom: 40px;
}

.rmg-menu__category-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.rmg-menu__category-notes {
    font-size: 13px;
    color: #777;
    font-style: italic;
    margin: -8px 0 14px;
    line-height: 1.5;
}



.rmg-menu__subcategory-title {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #777;
    margin: 0 0 12px;
}

.rmg-menu__subcategory-notes {
    font-size: 13px;
    color: #777;
    font-style: italic;
    margin: -4px 0 12px;
    line-height: 1.5;
}

/* ---- Items ---- */
.rmg-menu__items { display: flex; flex-direction: column; }

.rmg-menu__item {
    display: flex;
    flex-direction: column;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}
.rmg-menu__item:last-child { border-bottom: none; }

.rmg-menu__item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.rmg-menu__item-name {
    font-size: 16px;
    font-weight: 600;
    flex: 1;
    color: var(--rmg-primary, inherit);
}

.rmg-menu__item-prices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

.rmg-menu__item-price {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.rmg-menu__price-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--rmg-secondary, #777);
    margin-right: 2px;
}

.rmg-menu__item-description {
    font-size: 14px;
    color: var(--rmg-secondary, #666);
    margin: 6px 0 0;
    line-height: 1.5;
}

.rmg-menu__item-notes {
    font-size: 12px;
    color: #999;
    font-style: italic;
    margin: 4px 0 0;
}

/* ---- Dietary flags ---- */
.rmg-menu__item-dietary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.rmg-menu__dietary-flag {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    background: #f0f0f0;
    color: #555;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Colour-coded dietary flags — override to match brand */
.rmg-menu__dietary-flag--gf         { background: #fff3cd; color: #7a5c00; }
.rmg-menu__dietary-flag--vegan      { background: #d4edda; color: #155724; }
.rmg-menu__dietary-flag--vegetarian { background: #d4edda; color: #155724; }
.rmg-menu__dietary-flag--halal      { background: #cce5ff; color: #004085; }
.rmg-menu__dietary-flag--dairy_free { background: #fce4ec; color: #880e4f; }
.rmg-menu__dietary-flag--nut_free   { background: #f3e5f5; color: #4a148c; }

/* ---- Error state ---- */
.rmg-menu__error { color: #dc3232; font-style: italic; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .rmg-menu__item-header { flex-direction: column; align-items: flex-start; }
    .rmg-menu-tabs__tab    { padding: 8px 14px; font-size: 13px; }
}

/* ---- Desktop-only tabs — collapses to flat list on mobile ---- */
@media (max-width: 768px) {
    .rmg-menu-tabs--desktop-only .rmg-menu-tabs__nav { display: none; }
    .rmg-menu-tabs--desktop-only .rmg-menu-tabs__panel {
        display: block !important;
        margin-bottom: 32px;
    }
}

/* ---- Item badges ---- */
.rmg-menu__item-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 3px;
    margin-right: 8px;
    flex-shrink: 0;
    line-height: 1.4;
}
.rmg-menu__item-badge--new        { background: #e3f2fd; color: #0d47a1; }
.rmg-menu__item-badge--popular    { background: #fff3e0; color: #e65100; }
.rmg-menu__item-badge--seasonal   { background: #e8f5e9; color: #2e7d32; }
.rmg-menu__item-badge--chefs_pick { background: #fce4ec; color: #880e4f; }
.rmg-menu__item-badge--limited    { background: #f3e5f5; color: #6a1b9a; }

/* ---- Search / Filter ---- */
.rmg-menu-search {
    margin-bottom: 20px;
}
.rmg-menu-search__input {
    width: 100%;
    max-width: 400px;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}
.rmg-menu-search__input:focus {
    border-color: #555;
}
.rmg-menu-search__no-results {
    font-size: 14px;
    color: #999;
    font-style: italic;
    margin-top: 12px;
}

/* ---- Item image ---- */
.rmg-menu__item-image {
    width: 100%;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 4px;
}

.rmg-menu__item-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.rmg-menu__item-content {
    flex: 1;
}