/* 全局样式 */
body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
}

/* 标题样式 */
h1 {
    text-align: center;
    margin-bottom: 20px;
}
/* 修改标题样式 */
.header-container h1 {
    color: #FFFFFF; /* 设置颜色为白色 */
    font-size: 64px !important; /* 设置字体大小为 64px */
    font-family: 'MontserratLight', sans-serif; /* 使用 MontserratLight 字体 */
    margin: 0;
    text-align: center;
    text-transform: uppercase; /* 将字母转为大写 */
    font-weight: normal; /* 设置字体为非粗体 */
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);  /* 添加文字阴影，增加对比度 */
}
/* 容器样式 */
.form-container,
.output-container {
    display: flex;
    width: 100%;
    justify-content: space-around;
    box-sizing: border-box;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* 区块样式 */
.section {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    /* border: 1px solid #ddd; */
    border-radius: 5px;
    margin-bottom: 25px; margin-left: 0; margin-right: 0;
    text-align: center;
}

.section h2 {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 25px; margin-left: 0; margin-right: 0;
    font-family: 'MontserratSemiBold', sans-serif
}

/* 输入组样式 */
.input-group {
    margin-bottom: 25px; margin-left: 0; margin-right: 0;
    width: 100%; /* 确保输入组容器占满父级容器的宽度 */
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* 输入框整体的容器 */
.input-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
}

.input-wrapper input,
.input-wrapper select,
.input-group input,
.input-group select {
    width: 100%; /* 确保输入框本身占满父级容器的宽度 */
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    height: 40px; /* 保持输入框高度一致 */
    color: #333;
}

input::placeholder {
    color: #888; /* 设置未输入时的字体颜色为灰色 */
}

/* 特定输入框的宽度设置 */
.input-wrapper input[type="text"],
.input-wrapper input[type="number"] {
    width: 70%; /* 输入框占 70% 宽度 */
    margin-right: 5px;
}

.input-wrapper select {
    width: 30%; /* 单位选择框占 30% 宽度 */
    margin-left: 5px;
}

/* 数字输入框：去掉上下箭头 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* 自定义 select 样式 */
.select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px;
}

/* 自定义选择框箭头 */
.select-wrapper {
    position: relative;
    width: 100%;
}

.select-wrapper::after {
    content: '▼';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.8em;
    color: #666;
}

/* 计算按钮样式 */
.calculation-button-container {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.calculation-button {
    width: 100%;
    padding: 15px;
    font-size: 1.2em;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease; /* 添加背景颜色过渡效果 */
}

.calculation-button:hover {
    background-color: #0056b3;
}

/* 输出区块样式调整 */
#selection-plan-data, #details-data {
    text-align: center;
    margin: 0 auto; margin-left: 0; margin-right: 0; margin-bottom: 25px;
    margin-bottom: 25px; margin-left: 0; margin-right: 0; /* 增加模块之间的间隔 */
}

/* 响应式布局 */
@media (min-width: 1000px) {
    .form-container,
    .output-container {
        flex-direction: row;
    }

    .section {
        width: 32%; /* 在宽屏模式下，分列显示 */
        margin-bottom: 25px; margin-left: 0; margin-right: 0; /* 增加模块之间的间隔 */
    }
}

/* 标题样式 */
.header-container {
    position: relative;
    height: 260px;
    width: 100%;
    background-image: url('../picture/background.jpg'); /* 替换为你的图片路径 */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-container h1 {
    position: absolute;
    font-size: 1.8em;
    margin: 0;
    text-align: center;

}
/* 说明块样式 */
.description-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    font-size: 1.2em;
    color: #333;
    flex-direction: column;
}

.description-container h2 {
    font-size: 40px;
    margin-bottom: 10px;
    color: #333333;
    font-family: 'MontserratBold', sans-serif;
}
.description-container p {
    font-size: 16px;
    color: #333333;
    font-family: 'MontserratRegular', sans-serif;
    margin: 10px 116.325px 0;
}
/* 修改输入输出内容字体样式 */
.input-group input,
.input-group select,
#selection-plan-data, #details-data {
    font-family: 'MontserratLight', sans-serif;
    font-size: 16px;
    color: rgb(102, 102, 102);
}

.output-content {
    color: grey; /* 输出内容文字为灰色 */
}
.output-details {
    color: grey; /* 详细输出文字为灰色 */
    text-align: left; /* 左对齐详细内容 */
    margin-bottom: 20px;
}
.output-title {
    text-align: center; /* 标题居中对齐 */
    text-decoration: underline;
}