@import url("../../../dimens/global.css");
@import url("../../../colours.css");

@font-face {
  font-family: "App-Medium";
  src: url("../../../fonts/Nunito-Medium.ttf");
}
@font-face {
  font-family: "App-Regular";
  src: url("../../../fonts/Nunito-Light.ttf");
}

#menuContainer {
  width: 100%;
  padding: 5px;
  font-family: App-Regular, App-Medium;
}

.menu-header {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: solid 10px #d1d1d1;
}

.menu-header .menu-icon {
  width: 28px;
  height: 28px;
  margin-right: 8px;
}

.menu-item {
  display: flex; /* NEW — lay out icon + text side by side */
  align-items: start; /* NEW — vertically center icon with title/subtitle */
  gap: 10px; /* NEW — spacing between icon and text block */
  padding: 10px;
  cursor: pointer;
  border-radius: 6px;
}

.menu-item-shop {
  flex-direction: column;
}

/* Module rows: icon beside title */
.menu-item-module {
  flex-direction: row;
  align-items: center;
}

.menu-item:hover {
  background-color: var(--silver-background);
}

/* NEW — module icon inside a menu row (distinct from .menu-header .menu-icon) */
.menu-item .menu-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.menu-title-bold {
  font-size: var(--row_title);
  color: var(--text-regular);
  font: App-Medium;
}

.menu-title {
  font: App-Regular;
  font-size: var(--row_title);
  color: var(--text-regular);
}

.menu-subtitle {
  font: App-Regular;
  font-size: var(--row_title);
  color: var(--text-regular);
}

.menu-empty {
  padding: 12px;
  text-align: center;
  font: App-Medium;
  font-size: var(--row_title);
  color: var(--text-regular);
}