/* result */
.main-content-container-right {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 13px;
}
.main-content-container-right-header {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: center;
}
.main-content-container-right-header span {
    font-weight: bold;
    size: 15px;
    letter-spacing: 1.8px;
    padding-left: 10px;
}
.main-content-container-right-header select {
    width: 13%;
    height: 30px;
    border-radius: 30px;
    background-color: #EFEFEF;
}
.main-content-container-right .divider {
    width: 100%;
    height: 1px;
    background: #E3E3E3;
    margin-top: 5px;
}

.result-item-wrap {
    position: relative;
    padding: 30px;
    cursor: pointer;
}
.result-item-wrap>span {
    color: white;
    position: absolute;
    top: 5px;
    right: 40px;
}
.result-item-wrap:hover {
    background: #2651FC;
}
.result-item {
    display: flex;
    width: 100%;
    border-radius: 13px;
    border: 1px solid #E3E3E3;
    background: white;
    /*margin-top: 20px;*/
    /*margin-bottom: 20px;*/
}

/* 新增图片容器布局样式 */
.image-gallery {
    display: flex;
    width: 50%; /* 调整为占整个卡片的50%宽度 */
    gap: 5px;
}

.main-image-container {
    width: 80%; /* 主图占80% */
    position: relative;
    overflow: hidden;
    border-radius: 13px 0 0 13px;
}

.main-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.main-image:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.thumbnail-container {
    width: 20%; /* 缩略图占20% */
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
}

.thumbnail {
    width: 100%;
    height: 46px; /* 调整缩略图高度 */
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.thumbnail:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.result-item-info {
    flex: 1;
    width: 50%;
}

.result-item-info-top {
    display: flex;
    justify-content: space-between;
    padding: 15px 10px 0 10px;
}
.result-item-info-top >span {
    color: #272727;
    font-size: 12px;
}
.result-item-info-top>div {
    padding-left: 10px;
}
.result-item-info-top>div>span {
    background-color: #2651FC;
    color: white;
    border-radius: 30px;
    padding: 5px;
    margin-right: 15px;

}
.result-item-info-title {
    display: block;
    font-weight: bold;
    font-size: 13px;
    color: #2651FC;
    letter-spacing: 1.8px;
    margin-top: 15px;
    padding: 0 10px 0 25px;
}
.result-item-info-address {
    font-size: 9px;
    padding: 0 0 0 25px;


}

.result-item-info-content {
    margin-top: 20px;
}

.result-item-info-content>span {
    display: block;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1.8px;
    padding: 0 0 10px 25px;
}
.result-item-info-content-rent {
    background-color: #2651FC;
    border-radius: 0 0 13px 0;
    padding: 5px 0 10px 25px;
    position: relative; /* 添加相对定位 */
}
.result-item-info-content-rent span {
    display: block;
    color: white;
}
.result-item-info-content-rent span label {
    font-size: 20px;
    font-weight: bold;
}

/* 添加爱心图标样式 */
.result-item-info-content-rent .heart-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 20px;
}

.result-item-info-content-rent .heart-icon:hover img {
    content: url('../images/heart-filled.png');
}

/* 以下样式已移至上面的.image-gallery相关部分 */

@media (max-width: 1199.98px) {
    .result-item {
        flex-direction: column;
        border-radius: 13px;
    }

    .result-item-wrap {
        padding: 5px;
    }
    .result-item-img,
    .result-item-info {
        width: 100%;
        flex: none;
    }

    .result-item-img {
        width: 100%;
        height: 200px;
        margin-bottom: 15px;
    }
    .result-item-info-content-rent {
        border-radius: 0 0 13px 13px;
    }
    .result-item-img img {
        border-radius: 13px 13px 0 0 ;
    }
    .main-content-container-right-header select {
        width: 25%;
    }
    
    /* 修改：在移动端使图片和信息区域垂直排列，各占100%宽度 */
    .image-gallery,
    .result-item-info {
        width: 100%;
    }
    
    .result-item {
        flex-direction: column;
    }
}