/**
 * 陵园详情页面样式
 */

/* 面包屑导航 */
.breadcrumb {
    padding: 20px 0;
    border-bottom: 1px solid #e6e6e6;
}

.breadcrumb a:hover {
    color: #ff6800;
}

.breadcrumb .iconfont {
    font-size: 12px;
}

/* 陵园概览 */
.overview-section {
    padding: 30px 0;
}

.overview-main {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

/* 图片轮播 */
.image-carousel {
    width: 50%;
}

.main-image {
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: 15px;
    background-color: #000;
}

.main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.thumbnails {    
    white-space: nowrap;
    overflow-x: auto;
    height: 104px;
}

.thumbnail-item {
    display: inline-block;
    width: 112px;
    height: 80px;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s;
}

.thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-item:hover,
.thumbnail-item.active {
    border-color: #ff6800;
}

/* 陵园信息 */
.cemetery-info {
    flex: 1;
}

.cemetery-name {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

.cemetery-stats {
    border-bottom: 1px solid #e6e6e6;
}

.stat-item {
    width: 50%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.stat-label {
    width: 70px;
    color: #666;
}

.stat-value {
    flex: 1;
    color: #333;
}

.feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feature-tag {
    padding: 2px 8px;
    background-color: #f5f5f5;
    color: #666;
    font-size: 12px;
    border-radius: 3px;
}

.price-item {  
    padding-top: 20px;
}

.price-range {
    color: #ff6800;
    font-size: 18px;
    font-weight: 600;
}

/* 联系咨询 */
.contact-section {
    background-color: #fff5f0;
    padding: 20px;
    border-radius: 5px;
}

.contact-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.contact-phone {
    font-size: 24px;
    font-weight: 600;
    color: #ff6800;
    margin: 0 10px;
}

.contact-tips {
    color: #999;
}

.contact-actions {
    display: flex;
    gap: 15px;
}

.action-btn {
    flex: 1;
    padding: 10px 20px;
    text-align: center;
    border-radius: 3px;
    transition: all 0.3s;
}

.action-btn.primary {
    background-color: #ff6800;
    color: #fff;
}

.action-btn.primary:hover {
    background-color: #e55c00;
}

.action-btn.secondary {
    background-color: #fff;
    color: #ff6800;
    border: 1px solid #ff6800;
}

.action-btn.secondary:hover {
    background-color: #fff5f0;
}

/* 详细内容 */
.detail-content {
    margin-top: 30px;
}

/* 标签导航 */
.detail-tabs {
    display: flex;
    background-color: #f5f5f5;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
}

.tab-item {
    padding: 15px 30px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
}

.tab-item:hover {
    color: #ff6800;
}

.tab-item.active {
    background-color: #fff;
    color: #ff6800;
    border-bottom: 2px solid #ff6800;
}

/* 内容区域 */
.tab-content {
    padding: 30px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-top: none;
    border-radius: 0 0 5px 5px;
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

.content-section h2 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

/* 陵园介绍 */
.intro-text {
    color: #666;
    line-height: 1.8;
    margin-bottom: 20px;
}

.features-list {
    margin-top: 30px;
}

.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #666;
}

.feature-item i {
    margin-right: 10px;
}

/* 墓型展示 */
.tomb-types {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.tomb-type-item {
    width: calc(50% - 10px);
    display: flex;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    transition: all 0.3s;
}

.tomb-type-item:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.tomb-image {
    width: 150px;
    height: 120px;
    margin-right: 20px;
    overflow: hidden;
    border-radius: 3px;
}

.tomb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tomb-info {
    flex: 1;
}

.tomb-info h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.tomb-features {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.tomb-desc {
    color: #666;
    line-height: 1.5;
    margin-bottom: 10px;
}

.tomb-price {
    margin-top: 10px;
}

.tomb-price .price-value {
    color: #ff6800;
    font-weight: 600;
}

/* 用户评价 */
.reviews-list {
    margin-bottom: 30px;
}

.review-item {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    margin-bottom: 20px;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.user-info {
    display: flex;
    align-items: center;
}

.user-name {
    font-weight: 600;
    color: #333;
    margin-right: 10px;
}

.review-time {
    color: #999;
    font-size: 12px;
}

.review-content {
    color: #666;
    line-height: 1.5;
}

/* 评价分页 */
.reviews-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}

.reviews-pagination .page-item,
.reviews-pagination .page-prev,
.reviews-pagination .page-next {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px;
    border: 1px solid #e6e6e6;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
}

.reviews-pagination .page-item:hover,
.reviews-pagination .page-prev:hover,
.reviews-pagination .page-next:hover {
    border-color: #ff6800;
    color: #ff6800;
}

.reviews-pagination .page-item.active {
    background-color: #ff6800;
    border-color: #ff6800;
    color: #fff;
}

/* 园区环境 */
.environment-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.gallery-item {
    width: 32%;
    height: 200px;
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

.gallery-item:hover {
    transform: scale(1.02);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 交通指南 */
.traffic-info {
    display: flex;
    gap: 30px;
}

.traffic-map {
    width: 50%;
    height: 300px;
    overflow: hidden;
    border-radius: 5px;
}

.map-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.traffic-detail {
    flex: 1;
}

.traffic-detail h3 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.traffic-text {
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* 推荐陵园 */
.recommend-section {
    margin-top: 50px;
}

.section-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

.recommend-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.recommend-item {
    width: 285px;
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.3s;
}

.recommend-item:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.recommend-item .item-image {
    height: 150px;
    overflow: hidden;
}

.recommend-item .item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.recommend-item:hover .item-image img {
    transform: scale(1.05);
}

.recommend-item .item-info {
    padding: 15px;
}

.recommend-item .item-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.recommend-item .item-title a {
    color: #333;
    transition: color 0.3s;
}

.recommend-item .item-title a:hover {
    color: #ff6800;
}

.recommend-item .item-stats {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    color: #666;
    font-size: 14px;
}

.recommend-item .price-value {
    color: #ff6800;
    font-weight: 600;
}

@media screen and (max-width: 992px) {
    .wrap{padding: 10px;}
    .tab-content{padding: 20px 15px;}
    .thumbnails{height: 68px;}
    .thumbnail-item{width: 85px;height: 60px;}
    .image-carousel{width: 100%;}

    .detail-tabs{overflow: scroll;}
    .tab-item{padding: 15px;}

    .recommend-list { gap: 0;}
    .recommend-item{width: 50%;}

    .tomb-type-item{width: 100%;padding: 10px;}
    .tomb-image{width: 120px; height: 80px; margin-right: 10px;}
    .tomb-desc{display: none;}

    .gallery-item{width: 47%;height: 100px;}
}