body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 确保页面至少占满全屏 */
}
header {
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中 */
    padding: 5.5%;
    position: relative;
    z-index: 100;
}
h2 {
    margin: 0; /* 去掉默认的外边距 */
    text-align: center; /* 确保文本居中
}
nav {
    margin-top: 10px; /* 添加导航与标题之间的间距 */
}
nav a {
    margin: 0 10px;
    text-decoration: none;
    color: #333;
}
.login-icon, .order-icon, .menu-icon, .option-icon {
    position: fixed;
    right: 12px;
    font-size: 30px;
    cursor: pointer;
}
.login-icon { bottom: 200px; }
.order-icon { bottom: 155px; }
.menu-icon { bottom: 110px; }
.option-icon { bottom: 245px; }
.cart-icon { 
    position: fixed;
    left: 7%;
    font-size: 30px;
    cursor: pointer;
    bottom: 2.0%;
    font-size: 36px; 
    z-index: 100;
}
.confirm-button {
    position: fixed;
    background-color: #f5fa62; 
    color: rgb(0, 0, 0); /* 黑色文字 */
    border: none; /* 去掉边框 */
    padding: 10px 20px; /* 内边距 */
    text-align: center; /* 文本居中 */
    text-decoration: none; /* 去掉下划线 */
    display: inline-block; /* 使按钮可设置宽度和高度 */
    font-size: 15px; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    border-radius: 20px; /* 圆角 */
    cursor: pointer; /* 鼠标指针样式 */
    right: 7%; /* 距离右边 20% */
    bottom: 2.5%; /* 距离底部 10% */
}
.menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 每行2个 */
    gap: 20px;
    margin-top: 20px;
}
.menu-item {
    border: 1px solid #ccc; /* 添加边框 */
    padding: 8px; /* 减少内边距 */
    margin: 10px; /* 添加外边距 */
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 垂直排列内容 */
    align-items: center; /* 水平居中对齐 */
    box-sizing: border-box; /* 包括边框和内边距在内的宽度计算 */
    width: calc(50% - 20px); /* 每个菜单项占据一半宽度，并考虑间距 */
}

.menu-container {
    margin-top: 10px; /* 可以调整这个值来增加间距 */
    justify-content: center; /* 水平居中对齐 */
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-between; /* 在行中均匀分布 */
}

.menu-image {
    width: 100%;
    max-width: 150px; /* 设置最大宽度 */
    border-radius: 5px;
    object-fit: cover; /* 保持图片比例并裁剪 */
}

.menu-details {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 使内容两端对齐 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 5px; /* 增加底部间距以分隔数量控制 */
    width: 100%; /* 确保占满宽度 */
}

.menu-name {
    text-align: left; /* 文字左对齐 */
    margin: 0; /* 去掉默认边距 */
    flex: 1; /* 使名称占据可用空间 */
    font-size: 18px; /* 字体大小 */
}

.menu-price {
    text-align: right; /* 文字右对齐 */
    margin: 0; /* 去掉默认边距 */
    white-space: nowrap; /* 防止换行 */
    font-size: 18px; /* 字体大小 */
}

.quantity-control {
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中对齐 */
    margin-top: 0; /* 添加顶部间距 */
}

.btn-decrease, .btn-increase {
    background-color: rgba(236, 218, 21, 0.4); /* 透明的按钮背景色 */
    border: none; /* 去掉边框 */
    color: rgb(0, 0, 0); /* 按钮文字颜色 */
    padding: 7px 14px; /* 增加按钮的内边距，左右增加宽度 */
    cursor: pointer; /* 鼠标指针样式 */
    font-size: 18px; /* 字体大小 */
    border-radius: 20px; /* 圆角 */
    margin: 0 5px; /* 按钮间距 */
    min-width: 20px; /* 设置最小宽度 */
}

.quantity {
    font-size: 18px; /* 字体大小 */
    margin: 0 10px; /* 数量周围的间距 */
    display: inline-block; /* 使数量显示为行内块元素 */
    width: 40px; /* 固定宽度 */
    text-align: center; /* 文字居中 */
}
.total-amount {
    position: fixed;        /* 固定定位 */
    left: 20%;              /* 左侧20% */
    bottom: 23%;           /* 距离底部20px */
    transform: translateX(0); /* 不需要移动，直接显示在指定位置 */
    font-size: 18px;        /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    cursor: pointer;         /* 鼠标悬停时显示手形光标 */
    padding: 10px;          /* 内边距 */
    z-index: 50;          /* 确保在其他元素之上 */
}
.total-amount-container {
    background-color: white; /* 白色背景 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    padding: 20px; /* 内边距 */
    text-align: center; /* 文本居中 */
    margin: 0; /* 清除外边距 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 使元素居中对齐 */
    bottom: 0; /* 距离底部的距离 */
    width: calc(100%); /* 设置宽度，减去左右的内边距 */
    height: calc(5%);
    position: fixed; /* 固定在屏幕底部 */
}
.title-container {
    background-color: #fdd835; /* 白色背景 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    padding: 20px; /* 内边距 */
    text-align: center; /* 文本居中 */
    margin: 0; /* 清除外边距 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 使元素居中对齐 */
    top: 0; /* 距离底部的距离 */
    width: 100%; /* 设置宽度，减去左右的内边距 */
    height: 6%;
    position: absolute; /* 固定在屏幕底部 */
}
footer {
    text-align: center;
    font-size: 12px;
    color: #aaa;
    margin: 10px 0;
}