.modal-image {
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
}

/* 添加模态框宽度样式 */
.modal-dialog {
    max-width: 90vw !important;
    margin: 1.75rem auto;
}

/* Swiper样式定制 */
.modal-dialog .swiper {
    width: 100%;
    height: 100%;
}

.modal-dialog .swiper-slide img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
}

.modal-dialog .swiper-thumbs {
    height: 120px; /* 固定高度 */
    width: 100%;
    margin-top: 20px;
    overflow: hidden;
}

.modal-dialog .swiper-thumbs .swiper-wrapper {
    height: 100%;
}

.modal-dialog .swiper-thumbs .swiper-slide {
    height: 100%;
    opacity: 0.5;
    cursor: pointer;
    width: calc(25% - 10px); /* 固定宽度，假设一行显示4个缩略图 */
}

.modal-dialog .swiper-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid #007bff;
}

.modal-dialog .swiper-thumbs .swiper-slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Swiper导航按钮样式修改 */
.swiper-button-next,
.swiper-button-prev {
    width: 40px !important;
    height: 40px !important;
    background: white !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 16px !important;
    color: #2651FC !important; /* 蓝色箭头 */
    font-weight: bold !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #f8f8f8 !important;
    transform: scale(1.05) !important;
}

.swiper-button-next {
    right: 15px !important;
}

.swiper-button-prev {
    left: 15px !important;
}