/* 基本样式 */
body { 
    margin: 0;
    font-family: Arial, sans-serif;
    background-image: url('img/bg.jpg'); /* 设置背景图片 */
    background-size: cover; /* 图片覆盖整个容器 */
    background-position: center center; /* 图片居中 */
    background-repeat: no-repeat; /* 不重复背景图片 */
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 22px;
    background-color: #006400;
    color: white;
    position: relative;
}

.header h1 {
    margin: 0;
    text-align: center;
    flex-grow: 1;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px; /* 调整标题字体大小 */
}

.header .buttons {
    position: absolute;
    right: 20px;
    top: 10px;
}

.header .buttons button {
    padding: 5px 15px;
    background-color: gray;
    color: white;
    border: none;
    border-radius: 20px;  /* 圆角按钮 */
    cursor: pointer;
    margin-left: 10px;
}

.header .buttons button.selected {
    background-color: red; /* 单图模式按钮背景色为红色 */
}

.header .buttons button.comparison-button {
    background-color: gray; /* 对照模式按钮背景色为灰色 */
}

.main {
    padding: 100px 20px;  /* 调整顶部间距，确保按钮下方有些空间 */
    text-align: center;
}

.main .action-buttons {
    margin-top: -80px;  /* 按钮距离标题下方有适当间距 */
    margin-bottom: 192px;
    display: flex;
    justify-content: center; /* 按钮居中 */
    gap: 59px; /* 按钮间距 */
}

.main .action-buttons button {
    padding: 10px 20px;
    background-color: gray;
    color: white;
    border: none;
    border-radius: 20px;  /* 圆角按钮 */
    cursor: pointer;
}

.selected-folders {
    margin: 20px 0;
}

/* 显示区域调整，向上移动并可以控制宽度和高度 */
.display-area {
    width: 1850px;  /* 可调整宽度 */
    height: 610px; /* 可调整高度 */
    margin-top: -165px;  /* 向上移动显示区域 */
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: column; /* 图片及文件名垂直排列 */
    padding-top: 38px;
    margin-left: auto;
    margin-right: auto;
}

.display-area img {
    max-width: 100%; /* 自适应宽度 */
    max-height: 100%; /* 自适应高度 */
    cursor: grab; /* 提示用户可以拖动图片 */
}

/* 文件名显示在左上角 */
.caption {
    color: #d925aa;
    font-size: 18px;
    position: absolute;
    top: -102px;
    left: 10px;
    z-index: 1;
}

/* 放大和缩小控制按钮 */
.footer {
    position: fixed; /* 改为 fixed 让其固定在页面底部 */
    bottom: 20px; /* 底部距离 */
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between; /* 左右两边分开对齐 */
    padding: 0 20px;
}

/* 左侧放大和缩小按钮容器 */
.footer .zoom-buttons-left {
    position: relative;
    display: flex;
    align-items: center; /* 垂直居中 */
}

/* 右侧放大和缩小按钮容器 */
.footer .zoom-buttons-right {
    position: relative;
    display: flex;
    align-items: center; /* 垂直居中 */
}

/* 放大和缩小按钮样式 */
.footer .zoom-controls button {
    background-color: transparent; /* 背景设置为透明 */
    border: 2px solid white; /* 设置白色边框 */
    color: white; /* 设置按钮文本为白色 */
    font-size: 13px;
    cursor: pointer;
    padding: 10px; /* 可选：调整按钮的内边距 */
}

.footer .zoom-controls button:hover {
    background-color: rgba(255, 255, 255, 0.2); /* 悬浮时背景变成浅白色 */
}

/* 左侧放大按钮位置 */
#leftZoomButton {
    margin-right: 10px;  /* 适当调整按钮之间的间距 */
}

/* 左侧缩小按钮位置 */
#leftZoomOutButton {
    margin-left: 10px;
}

/* 右侧放大按钮位置 */
#rightZoomButton {
    margin-right: 10px;
}

/* 右侧缩小按钮位置 */
#rightZoomOutButton {
    margin-left: 10px;
}

/* 向左切换和向右切换按钮 */
.navigation-buttons {
    position: fixed; /* 改为 fixed 让其固定在页面底部 */
    bottom: 20px; /* 底部距离 */
    left: 50%;
    transform: translateX(-50%); /* 居中对齐 */
    display: flex; /* 让按钮水平排列 */
    gap: 20px; /* 设置按钮之间的间距 */
}

.navigation-buttons button {
    background-color: transparent;
    border: 2px solid white;
    color: white;
    font-size: 18px;
    padding: 10px;
    cursor: pointer;
}

.navigation-buttons button:hover {
    background-color: rgba(255, 255, 255, 0.2); /* 鼠标悬停时的效果 */
}

.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 2px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal.active {
    display: block;
}

.modal input {
    width: 80%;
    padding: 5px;
    margin-bottom: 10px;
}

.modal button {
    padding: 5px 10px;
}

.folder-item:hover {
    cursor: pointer;
    background-color: #f0f8ff;
}