body {
  font-family: sans-serif;
  margin: 0;
  background-color: #f0e68c; /* 莫兰迪色系背景 */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 15px;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.container {
  background-color: #f5f5dc; /* 浅色背景 */
  padding: 15px;
  border-radius: 15px;
  box-shadow: 9px 9px 16px #d1d1d1, -9px -9px 16px #d1d1d1; /* 拟态阴影 */
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
}

h1,
h2 {
  color: #6b8e23; /* 深色文字 */
  text-align: center;
  margin-bottom: 20px;
}

.meal-type-selector {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 10px; /* 减少与下方提示文字的距离 */
}

.long-press-hint {
  font-size: 16px;
  color: green;
  text-align: center;
  margin-bottom: 20px;
}

.meal-option {
  border: none;
  padding: 12px 25px;
  border-radius: 50px;
  background: #e0e0e0;
  color: #555;
  box-shadow:  5px 5px 10px #bebebe,
             -5px -5px 10px #ffffff;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.meal-option.selected {
  background-color: #8fbc8f; /* 选中时的颜色 */
  color: white;
  box-shadow: inset 5px 5px 10px #77a177,
             inset -5px -5px 10px #a7d7a7;
}

.section {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 10px;
  background-color: #f0f0f0;
  box-shadow: inset 5px 5px 10px #d9d9d9,
             inset -5px -5px 10px #ffffff;
}

.section h2 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #6b8e23;
  text-align: left;
}

.hint {
  color: #777;
  font-size: 14px;
  margin-top: -10px;
  margin-bottom: 15px;
}

.items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.item {
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
  background: #e0e0e0;
  color: #555;
  box-shadow:  5px 5px 10px #bebebe,
             -5px -5px 10px #ffffff;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  white-space: nowrap;
}

.item.selected-custom {
  background-color: #8fbc8f;
  color: white;
  box-shadow: inset 5px 5px 10px #77a177,
             inset -5px -5px 10px #a7d7a7;
}

.item:active {
  box-shadow: inset 5px 5px 10px #bebebe,
             inset -5px -5px 10px #ffffff;
}

.item.spicy-level.selected-custom[data-name="微辣"] {
  background-color: #ffeaea !important;
  color: #000 !important;
}

.item.spicy-level.selected-custom[data-name="中辣"] {
  background-color: #fca2a2 !important;
  color: #fff !important;
}

.item.spicy-level.selected-custom[data-name="特辣"] {
  background-color: #ff6347 !important;
  color: #fff !important;
}

.item.spicy-level.selected-custom[data-name="加麻"] {
  background-color: #b22222 !important;
  color: #fff !important;
}

/* 老板快住手区域样式 */
.section.no-go {
  background-color: #ffe8e8; /* 浅淡红色背景 */
}

.section.no-go h2 {
  color: #c0392b; /* 深红色文字 */
}

.item.no-go-item {
  background-color: #ffe8eb; /* 默认浅淡红色 */
  color: #8e0000;
}

.item.no-go-item.selected-custom {
  background-color: #e57373; /* 选中时略深红色 */
  color: white;
  box-shadow: inset 5px 5px 10px #cd5c5c,
             inset -5px -5px 10px #f08080;
}

/* 清空按钮 */
.clear-selection {
  text-align: center;
  margin-bottom: 20px;
}

#clear-button {
  border: none;
  padding: 12px 25px;
  border-radius: 50px;
  background-color: #f4a460;
  color: white;
  box-shadow:  5px 5px 10px #d88e4d,
             -5px -5px 10px #ffbaba;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  font-size: 14px;
}

#clear-button:active {
  box-shadow: inset 5px 5px 10px #d88e4d,
             inset -5px -5px 10px #ffbaba;
}

/* 地址输入区域 */
.address-input {
  margin-bottom: 20px;
  border-radius: 10px;
  background-color: #f0f0f0;
  box-shadow: inset 5px 5px 10px #d9d9d9,
             inset -5px -5px 10px #ffffff;
  padding: 15px; /* 保持 padding */
}

.address-input textarea {
  display: block; /* 确保占据整行 */
  width: calc(100% - 20px); /* 考虑 padding */
  padding: 10px;
  border: none; /* 移除边框 */
  border-radius: 5px;
  box-sizing: border-box;
  resize: vertical; /* 允许垂直调整大小 */
  font-family: sans-serif;
  font-size: 14px;
  background-color: transparent; /* 保持透明 */
  outline: none; /* 移除 focus 时的默认 outline */
}

/* 已选订单区域 */
.order-summary {
  margin-top: 25px;
  padding: 20px;
  border-radius: 10px;
  background-color: #f0f0f0;
  box-shadow: inset 5px 5px 10px #d9d9d9,
             inset -5px -5px 10px #ffffff;
}

.order-summary h2 {
  margin-top: 0;
  margin-bottom: 15px;
  color: #6b8e23;
  text-align: left;
}

#order-meal-type,
#order-spicy-level,
#order-soup-base {
  margin-bottom: 10px;
  color: #555;
  font-weight: bold;
}

#selected-items {
  min-height: 30px;
  margin-bottom: 10px;
  color: #555;
  word-break: break-all;
}

#selected-items .category-title {
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 5px;
  color: #6b8e23;
}

#no-go-items {
  margin-bottom: 10px;
  color: #e67e22; /* 橘红色 */
  font-weight: bold;
}

#total-price {
  font-weight: bold;
  text-align: right;
  color: #6b8e23;
}

/* 提交按钮 */
#submit-button {
  display: block;
  width: 100%;
  border: none;
  padding: 14px 25px;
  border-radius: 50px;
  background-color: #8fbc8f;
  color: white;
  box-shadow:  5px 5px 10px #77a177,
             -5px -5px 10px #a7d7a7;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

#submit-button:disabled {
  background-color: #ccc;
  color: #888;
  box-shadow: none;
  cursor: not-allowed;
}

/* 达到限制时 */
.section.limit-reached {
  background-color: #d4edda; /* 浅绿色 */
  transition: background-color 0.5s ease-in-out;
}

/* 超出限制时 */
.section.limit-exceeded {
  background-color: #8fbc8f;
  transition: background-color 0.5s ease-in-out;
}

.section.limit-exceeded h2 {
  color: white; /* 将文字颜色改为白色 */
}

.section.limit-reached .item:not(.selected-custom),
.section.limit-exceeded .item:not(.selected-custom) {
  opacity: 0.7;
}

/* 通用提示样式 */
.custom-tip {
  z-index: 3333;
  position: fixed; /* 改为 fixed，避免滚动影响 */
  top: 10%; /* 调整显示位置 */
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-family: sans-serif;
  box-shadow: 3px 3px 6px #b8b8b8, -3px -3px 6px #ffffff;
}

/* 成功提示样式 */
.success-tip {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

/* 错误提示样式 */
.error-tip {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}