.menu-container {
    padding: 1rem;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

.tab-btn {
    background: #eee;
    padding: 0.5rem 1rem;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.tab-btn.active {
    background: var(--primary-color, #EF476F);
    color: white;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.accordions {
    display: none;
}

.accordion-toggle {
    width: 100%;
    padding: 1rem;
    background: #eee;
    border: none;
    font-weight: bold;
    margin-top: 0.5rem;
    cursor: pointer;
}

.accordion-content {
    display: none;
    padding: 0.5rem;
    background: #f9f9f9;
}

.menu-item {
    margin-bottom: 1rem;
}

/* By default, show tabs and hide accordions */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tab-content { display: none; }
.tab-content.active { display: block; }

.accordions { display: none; }
.accordion-toggle {
    width: 100%;
    padding: 1em;
    font-size: 1.1em;
    background-color: #eee;
    border: none;
    text-align: left;
    margin-bottom: 5px;
    cursor: pointer;
}
.accordion-content {
    display: none;
    padding: 10px;
    border: 1px solid #ccc;
}
.accordion-content.active {
    display: block;
}

/* Mobile first breakpoint - hide tabs, show accordion */
@media (max-width: 768px) {
    .tabs { display: none; }
    .tab-content { display: none !important; }
    .accordions { display: block; }
}