@charset "UTF-8";
/*
 * 几乎每一个.html文件都需要的基础样式
 */

body {
    padding-top:65px;
}

#orderMainHtml {
    margin-top: -5rem;
}

.cursorP {
    cursor: pointer;
}

.section-padding {
    padding: 30px 0;
}

.logo-style {
    margin-left: 0.3rem;
    color: #333;
}

.footer {
    background-color: #f8f9fa;
    padding: 20px 0;
}

.footer-links a {
    margin-right: 15px;
    text-decoration: none;
    color: #333;
}

.font-span-color {
    font-size: small;
    color: rgba(160, 160, 160, 0.8);
}

.font-text-color {
    color: rgba(15,25,37,0.65);
}

.lunchColor {
  color: rgba(250, 0, 0, 1);
}

.lunchColorBlack {
  background-color: rgba(250, 0, 0, 1);
}

.dinnerColor {
  color: rgba(255, 100, 0, 1);
}

.dinnerColorBlack {
  background-color: rgba(255, 100, 0, 1);
}




/*
 * home.html样式
 */

.hero-section {
    background-size: 100%, 100%;
    background-position: 50% 40%;
    height: 50vh;
    background-repeat: no-repeat;
    /*background-color: #f6f8fa;*/
}

.font-title-color {
    color: rgba(17,25,37,0.85);
}

/* 覆盖模态框默认尺寸 */
#imageModal .modal-dialog {
    max-width: 90vw; /* 占据视口宽度的90% */
    max-height: 100vh; /* 占据视口高度的90% */
}

#modalImage {
    max-height: 95vh; /* 图片高度不超过视口80% */
    width: 78%; /* 保持原图比例 */
    height: 100%;
}

/* 透明背景 */
#imageModal .modal-content {
    background: transparent !important; /* 完全透明 */
    border: none !important; /* 移除边框 */
}

#imageModal .modal-header {
    border: none; /* 移除标题栏边框 */
    position: absolute; /* 固定关闭按钮位置 */
    top: 10px;
    right: 10px;
    z-index: 9999; /* 确保按钮在最上层 */
}
/* 自定义关闭按钮样式 */
#imageModal .btn-close {
    filter: invert(1); /* 白色关闭图标 */
    opacity: 0.8;
}

.imageModalDiv {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-content: center;
}

.itemContent {
    white-space: pre-wrap;   /* 保留空白符，允许自动换行 */
    word-wrap: break-word;   /* 强制长单词或URL在边界换行 */
    overflow: visible;       /* 移除滚动条，允许内容自然扩展 */
}

.takeawayTag {
    position: absolute;
    top: 0.5rem;
    padding-left: 0.5rem;
    background-color: red;
    border-radius: 0 1rem 1rem 0;
    padding-right: 0.5rem;
    color: white;
}

.goodsCard {
    transition: all 0.3s ease;  /* 平滑过渡效果 */
}

/* 鼠标悬停态 */
.goodsCard:hover {
    box-shadow: 30px 30px 20px rgba(0,0,0,0.3);
}

/* 点击瞬间效果 */
.goodsCard:active {
    transform: translateY(2px);  /* 模拟按钮按下位移 */
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.card-body-white {
    background-color: white;
    /*background-color: black;*/
}




/*
 * detail.html样式
 */

.stepper {
    /*border: 0 !important;*/         /* 清除所有边框[1,3,4](@ref) */
    background-image: none !important; /* 移除渐变背景 */
    box-shadow: none !important;  /* 禁用内阴影效果[1,4](@ref) */
    border-radius: 0 !important;  /* 去除圆角 */
    padding: 0 !important;        /* 清空内间距[3,5](@ref) */
    margin: 0 !important;         /* 去除外边距 */
    outline: none !important;     /* 禁用焦点轮廓线[3,4](@ref) */
    background-color: transparent !important; /* 透明背景 */
    -webkit-appearance: none;     /* 禁用iOS默认样式 */
    text-align: center !important;  /* 强制文本居中 */
    -moz-appearance: textfield;    /* 隐藏 Firefox 的上下箭头 */

}

/* 隐藏 WebKit 内核浏览器的上下箭头 */
.stepper::-webkit-outer-spin-button,
.stepper::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}




/*
 * order.html样式
 */


/* 覆盖展开时的按钮背景色 */
.accordion-button:not(.collapsed) {
  background-color: transparent !important; /* 设置为透明或原色[1,8](@ref) */
}