/* 全局样式 */
body {
    background-color: #f7f9fc; /* 默认背景颜色 */
    font-family: 'Arial', sans-serif; /* 字体设置 */
    margin: 0;
    padding: 0;
    background-size: cover; /* 背景图片填充整个页面 */
    background-repeat: no-repeat; /* 防止背景图片重复 */
}

/* PC端（横屏）背景图 */
@media (min-width: 768px) {
    body {
        background-image: url('https://t.mwm.moe/pc'); /* PC端背景图 */
    }
}

/* 移动端（竖屏）背景图 */
@media (max-width: 767px) {
    body {
        background-image: url('https://t.mwm.moe/mp'); /* 移动端背景图 */
    }
}

/* 计算器容器样式 */
.calculator-container {
    background-color: #ffffff; /* 设置背景颜色为白色 */
    border-radius: 8px; /* 使容器边角圆滑 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影，营造悬浮效果 */
    padding: 20px; /* 设置内部填充 */
    position: fixed; /* 固定定位在页面的某一位置 */
    bottom: 20px; /* 距离页面底部20px */
    right: 20px; /* 距离页面右边缘20px */
    transform: translateX(100%); /* 初始状态：移出视野（屏幕右侧） */
    transition: transform 0.5s ease; /* 添加平滑过渡效果 */
    z-index: 10; /* 设置z-index确保它在其他元素之上 */
}

/* 当计算器容器显示时的样式 */
.calculator-container.show {
    transform: translateX(0); /* 将容器移回屏幕内 */
}

/* 表单控件样式 */
.form-control {
    border-radius: 30px; /* 表单控件的圆角效果 */
}

/* 主按钮样式 */
.btn-primary {
    border-radius: 30px; /* 按钮的圆角效果 */
    background-color: #007bff; /* 按钮的背景颜色 */
    border: none; /* 移除按钮的边框 */
    padding: 8px 16px; /* 内边距，控制按钮大小 */
}

/* 当主按钮悬停时的样式 */
.btn-primary:hover {
    background-color: #0056b3; /* 悬停时，改变按钮背景颜色为深蓝色 */
}

/* 结果显示区域样式 */
.result {
    font-size: 1.5rem; /* 结果文字的字体大小 */
    font-weight: bold; /* 字体加粗 */
    margin-top: 20px; /* 与上方元素的间距 */
    text-align: center; /* 居中文本 */
}

/* 产品卡片样式 */
.product-card {
    margin: 15px 0; /* 卡片上下的外边距 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
    padding: 15px; /* 内部填充 */
    border: 1px solid #ddd; /* 灰色的边框 */
    border-radius: 8px; /* 卡片的圆角效果 */
    background-color: #fff; /* 背景颜色为白色 */
    position: relative; /* 相对定位，为内部其他绝对定位的元素提供参考点 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加变形和阴影的平滑过渡效果 */
    flex-wrap: wrap; /* 使内容在小屏幕上换行 */
    max-width: 100%; /* 确保卡片宽度不超出容器 */
}

/* 当鼠标悬停在产品卡片时的样式 */
.product-card:hover {
    transform: translateY(-5px); /* 轻微上移，营造悬浮效果 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* 增加阴影效果，增强悬浮感 */
}

/* 产品卡片中的图片样式 */
.product-card img {
    width: 100px; /* 固定宽度100px */
    height: 100px; /* 固定高度100px */
    object-fit: cover; /* 保持图片比例裁剪，填满指定区域 */
    margin-right: 15px; /* 右边的外边距，确保与文本内容间距 */
    border-radius: 8px; /* 圆角效果 */
    flex-shrink: 0; /* 防止图片缩小 */
}

/* 产品信息的样式 */
.product-card .product-info {
    flex: 1; /* 占据剩余空间 */
    min-width: 0; /* 确保内容不会超出容器 */
}

/* 切换按钮样式 */
.toggle-btn {
    background-color: #007bff; /* 背景颜色为蓝色 */
    color: #fff; /* 字体颜色为白色 */
    border: none; /* 无边框 */
    border-radius: 50%; /* 圆形按钮 */
    width: 40px; /* 按钮宽度 */
    height: 40px; /* 按钮高度 */
    font-size: 1.5rem; /* 字体大小 */
    display: flex; /* 使用flex布局，便于居中对齐 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    cursor: pointer; /* 鼠标指针为手型 */
    position: absolute; /* 绝对定位 */
    top: 20px; /* 距顶部20px */
    left: -50px; /* 距离左边 -50px，初始状态在容器外 */
    transition: left 0.5s ease; /* 平滑过渡 */
    z-index: 11; /* 确保在其他元素之上 */
}

/* 当计算器容器显示时，切换按钮的位置 */
.calculator-container.show .toggle-btn {
    left: -50px; /* 保持按钮显示在容器外 */
}

/* 切换按钮悬停时的样式 */
.toggle-btn:hover {
    background-color: #0056b3; /* 改变背景颜色为深蓝色 */
}

/* 菜单按钮样式 */
.menu-btn {
    position: fixed; /* 固定定位 */
    top: 20px; /* 距顶部20px */
    left: 20px; /* 距左侧20px */
    background-color: #007bff; /* 背景颜色为蓝色 */
    color: #fff; /* 字体颜色为白色 */
    border: none; /* 无边框 */
    border-radius: 50%; /* 圆形按钮 */
    width: 40px; /* 按钮宽度 */
    height: 40px; /* 按钮高度 */
    font-size: 1.5rem; /* 字体大小 */
    display: flex; /* 使用flex布局，便于居中对齐 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    cursor: pointer; /* 鼠标指针为手型 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影，营造悬浮效果 */
    z-index: 12; /* 确保在其他元素之上 */
}

/* 菜单按钮悬停时的样式 */
.menu-btn:hover {
    background-color: #0056b3; /* 改变背景颜色为深蓝色 */
}

/* 侧栏样式 */
.sidebar {
    height: 100%; /* 高度为全屏 */
    width: 250px; /* 固定宽度250px */
    position: fixed; /* 固定定位 */
    top: 0; /* 顶部对齐 */
    left: -250px; /* 初始状态在视野外 */
    background: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    padding-top: 60px; /* 内部填充，确保内容与顶部有足够间距 */
    transition: left 0.3s ease; /* 平滑过渡效果 */
    z-index: 9; /* 确保在大部分内容之上，但低于菜单按钮 */
    color: #fff; /* 文字颜色为白色 */
}

/* 当侧栏显示时的样式 */
.sidebar.show {
    left: 0; /* 将侧栏移入视野 */
}

/* 侧栏中的链接样式 */
.sidebar a {
    padding: 15px 25px; /* 内边距 */
    text-decoration: none; /* 移除下划线 */
    font-size: 1.2rem; /* 字体大小 */
    color: #fff; /* 字体颜色为白色 */
    display: block; /* 链接为块级元素，占据整行 */
    transition: 0.3s; /* 添加平滑过渡效果 */
    background: rgba(0, 0, 0, 0.2); /* 链接背景为半透明黑色，提高对比度 */
    border-radius: 5px; /* 链接圆角效果 */
}

/* 当侧栏中的链接悬停时的样式 */
.sidebar a:hover {
    background: rgba(0, 0, 0, 0.4); /* 增加悬停效果，背景颜色变深 */
}