/* ========== 1. 上传组件样式（无修改，完整保留） ========== */
.jq-upload {
    margin: 20px 20px 20px 0;
}
.upload-area {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    padding: 20px;
    width: 100px;
    height: 100px;
    text-align: center;
    transition: border-color 0.3s;
}
.upload-area:hover {
    border-color: #409eff;
}
.upload-icon {
    font-size: 24px;
    color: #8c939d;
}
.upload-text {
    margin-top: 8px;
    color: #606266;
}
.file-list {
}
.file-item {
    position: relative;
    width: 100px;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    display: inline-flex;
    justify-content: center;
    overflow: hidden;
}
.file-item img {
    max-width: 100%;
    max-height: 100%;
}
.file-status {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 2px 0;
    font-size: 12px;
    text-align: center;
}
.file-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}
.file-item:hover .file-actions {
    display: block;
}
.file-actions span {
    cursor: pointer;
    padding: 5px;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
}

/* ========== 2. 评论提交表单 yn-review（完整保留） ========== */
.yn-review {
    max-width: 1200px;
    margin: 20px auto;
    padding: 16px;
}
h2{
    font-size:29px;
    font-weight:700;
}
.yn-review-content {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
}
.yn-review-title h2 {
    font-size: 20px;
    margin-bottom: 16px;
    color: #333;
    font-weight: 600;
}
.yn-review-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.yn-review-input-box {
    flex: 1;
    min-width: 0;
}
.yn-review-input-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
    display: block;
    font-weight: 500;
}
.yn-review-input,
.yn-review-textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}
.yn-review-input:focus,
.yn-review-textarea:focus {
    border-color: #007bff;
    outline: none;
}
.yn-review-textarea {
    height: 100px;
    resize: vertical;
}
.yn-review-submit-btn {
    background: #426BEB;
    color: white;
    padding: 10px 24px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.2s;
    width: 100%;
}
.yn-review-submit-btn:hover {
    opacity: 0.9;
}
.red {
    color: red;
}
@media (max-width: 768px) {
    .yn-review-row {
        flex-direction: column;
        gap: 16px;
    }
    .yn-review {
        padding: 12px;
        margin: 12px;
    }
    .yn-review-content {
        padding: 16px;
    }
    .yn-review-submit-btn {
        padding: 12px;
    }
}
.yn-review *+* {
    margin-top: 0;
}

/* ========== 3. 评论模块全局变量（统一主题色系） ========== */
.tours-reviews,
.yn_reviews_page {
    --review-ink: #241521;
    --review-muted: #7a6c77;
    --review-purple: #9f5890;
    --review-purple-dark: #461a3e;
    --review-orange: #ff9c01;
    --review-paper: #fffaf4;
    --review-line: rgba(70, 26, 62, 0.12);
    color: var(--review-ink);
}

/* ========== 4. 轮播外层容器 tours-reviews【优化背景】 ========== */
.tours-reviews {
    background: var(--review-paper);
}
.tours-reviews .yn_review_shell {
    position: relative;
    overflow: visible; /* 解决左右卡片裁切 */
    max-width: 1440px;
    margin: 0 auto;
    padding: 30px 20px;
    /* 弱化背景透明度，不抢视觉 */
    background:
            linear-gradient(135deg, rgba(255, 250, 244, 0.94), rgba(255, 255, 255, 0.97) 52%, rgba(232, 214, 245, 0.25)),
            url("../../images/testimonial/testimonial-bg02.jpg") center/cover;
    border: 1px solid var(--review-line);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(70, 26, 62, 0.06);
}
/* 弱化网格底纹，降低透明度 */
.tours-reviews .yn_review_shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
            linear-gradient(rgba(70, 26, 62, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(70, 26, 62, 0.02) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, #000, transparent 80%);
}
.tours-reviews .yn_review_header,
.tours-reviews .items {
    position: relative;
    z-index: 1;
}
.tours-reviews .yn_review_header {
    margin-bottom: 28px;
}
.tours-reviews .yn_review_kicker {
    color: var(--review-purple);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.tours-reviews #traveler-review-title {
    color: var(--review-ink);
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.2;
}
.tours-reviews .yn_review_intro {
    max-width: 720px;
    color: var(--review-muted);
    font-size: 15px;
    line-height: 1.65;
    margin: 8px 0 0;
}

/* ========== 5. Swiper轮播核心样式【优化箭头、圆点、间距】 ========== */
.tours-reviews .reviews-swiper.swiper {
    /*overflow: visible;*/
    padding: 8px 36px 32px;
}
.tours-reviews .items.swiper-wrapper {
    gap: 20px;
    align-items: stretch;
}
.tours-reviews .item.swiper-slide {
    width: calc(100% / 3 - 14px);
    flex-shrink: 0;
}
/* 轮播左右箭头 优化hover效果 */
.tours-reviews .reviews-prev,
.tours-reviews .reviews-next {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--review-line);
    color: var(--review-purple-dark);
    transition: all 0.2s ease;
}
.tours-reviews .reviews-prev:hover,
.tours-reviews .reviews-next:hover {
    background: var(--review-purple);
    color: #fff;
    border-color: var(--review-purple);
}
.tours-reviews .reviews-prev::after,
.tours-reviews .reviews-next::after {
    font-size: 13px;
    font-weight: 600;
}
.tours-reviews .reviews-swiper .swiper-button-prev {
    left: 4px;
}
.tours-reviews .reviews-swiper .swiper-button-next {
    right: 4px;
}
/* 分页圆点 缩小尺寸更精致 */
.tours-reviews .reviews-pagination {
    bottom: 6px;
}
.tours-reviews .reviews-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #d1c6c1;
    opacity: 0.7;
}
.tours-reviews .reviews-pagination .swiper-pagination-bullet-active {
    background: var(--review-purple);
    opacity: 1;
}

/* ========== 6. 轮播卡片统一样式【核心优化：精简内边距、轻量化hover、文字分层】 ========== */
.tours-reviews .yn_review_card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(70, 26, 62, 0.1);
    border-radius: 9px;
    padding: 20px; /* 收紧内边距，卡片不臃肿 */
    height: 100%;
    box-shadow: 0 8px 20px rgba(36, 21, 33, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
/*.tours-reviews .yn_review_card:hover {*/
/*    transform: translateY(-2px); !* 减小上浮距离，不突兀 *!*/
/*    border-color: rgba(var(--review-orange), 0.4);*/
/*    box-shadow: 0 12px 24px rgba(36, 21, 33, 0.08);*/
/*}*/
.tours-reviews .yn_review_card_top {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
}
.tours-reviews .yn_review_person {
    display: flex !important;
    align-items: center;
    margin-bottom: 10px;
}
/* 头像样式 */
.tours-reviews .avatar img {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(159, 88, 144, 0.18);
    object-fit: cover;
}
.tours-reviews .yn_review_identity {
    min-width: 0;
    margin-left: 10px;
}
.tours-reviews .name {
    color: var(--review-ink) !important;
    font-size: 17px;
    line-height: 1.25 !important;
    margin: 0 0 3px;
}
.tours-reviews .country {
    color: var(--review-muted) !important;
    font-size: 21px;
    font-style: normal !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
}
/* 标签+星级行 */
.tours-reviews .yn_review_meta {
    display: flex;
    align-items: center;
    gap: 8px 12px;
    flex-wrap: wrap;
}
.tours-reviews .yn_review_badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    background: rgba(var(--review-orange), 0.12);
    border: 1px solid rgba(var(--review-orange), 0.3);
    border-radius: 3px;
    color: #8A2BE2;
    font-size: 14px;
    font-weight: 600;
}
.tours-reviews .yn_review_stars {
    gap: 1px;
}
.tours-reviews .yn_review_stars i {
    color: #9f5890;
    font-size: 14px;
}
.tours-reviews .yn_review_date {
    color: #999;
    font-size: 15px;
    margin-top: 4px;
}
/* 评论正文 5行截断+省略号 */
.tours-reviews .yn_review_quote {
    position: relative;
    color: var(--review-ink);
    font-size: 17px;
    line-height: 1.5;
    /* margin-top: 14px; */
    padding-top: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tours-reviews .yn_review_quote::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    height: 2px;
    background: var(--review-orange);
}
/* 卡片底部详情栏【优化分割线与文字】 */
.tours-reviews .yn_review_details {
    border-top: 1px solid rgba(70, 26, 62, 0.1);
    padding-top: 10px;
}
.tours-reviews .yn_review_detail {
    display: flex;
    gap: 4px;
    font-size: 14px;
}
.tours-reviews .yn_review_label {
    color: #999;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    width: auto;
    border: unset;
    background: unset;
}
.tours-reviews .yn_review_label:hover{
    color: var(--review-purple);
}
/* ========== 7. 评论列表页面 yn_reviews_page（完整保留，独立页面不受轮播影响） ========== */
.yn_reviews_page {
    background: linear-gradient(180deg, #fffaf4 0%, #fff 42%);
}
.yn_reviews_page_hero {
    padding: 34px 0 22px;
}
.yn_reviews_page_hero_inner {
    display: grid;
    gap: 22px;
    padding: 24px;
    border: 1px solid rgba(70, 26, 62, 0.14);
    border-radius: 8px;
    background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(232, 214, 245, 0.42)),
            url("../../images/testimonial/testimonial-bg02.jpg") center/cover;
}
.yn_reviews_page_kicker {
    color: var(--review-purple);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.yn_reviews_page_title {
    color: var(--review-ink);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.12;
    margin: 6px 0 12px;
}
.yn_reviews_page_intro {
    max-width: 820px;
    color: var(--review-muted);
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}
.yn_reviews_page_stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.yn_reviews_page_stat {
    padding: 14px;
    border: 1px solid rgba(159, 88, 144, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
}
.yn_reviews_page_stat strong {
    display: block;
    color: var(--review-purple-dark);
    font-size: 25px;
    line-height: 1;
}
.yn_reviews_page_stat span {
    display: block;
    color: var(--review-muted);
    font-size: 12px;
    line-height: 1.35;
    margin-top: 8px;
}
.yn_reviews_layout {
    padding-bottom: 36px;
}
.yn_reviews_list {
    display: grid;
    gap: 18px;
}
.yn_reviews_page_top_pager {
    margin-bottom: 20px;
}
.yn_reviews_list_card {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 18px;
    padding: 20px;
    border: 1px solid rgba(70, 26, 62, 0.13);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(36, 21, 33, 0.06);
}
.yn_reviews_list_author img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
}
.yn_reviews_list_name {
    color: var(--review-ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    margin-top: 9px;
}
.yn_reviews_list_country {
    color: var(--review-muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
    margin-top: 2px;
}
.yn_reviews_list_meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.yn_reviews_list_quote {
    color: var(--review-ink);
    font-size: 16px;
    line-height: 1.8;
    white-space: pre-wrap;
}
.yn_reviews_list_gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}
.yn_reviews_list_gallery img {
    width: 138px;
    height: 104px;
    border-radius: 6px;
    object-fit: cover;
}
.yn_reviews_list_details {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}
.yn_reviews_list_detail {
    color: var(--review-ink);
    font-size: 14px;
}
.yn_reviews_list_detail strong {
    color: var(--review-purple);
    font-size: 12px;
    text-transform: uppercase;
}

/* ========== 8. 全局响应式适配 ========== */
/* 平板大屏 >=1200px */
@media screen and (max-width: 1200px) {
    .tours-reviews .item.swiper-slide {
        width: calc(100% / 2 - 12px);
    }
}
/* 平板768px~1199px */
@media (min-width: 768px) {
    .tours-reviews .yn_review_shell {
        padding: 30px;
    }
    .tours-reviews .yn_review_header,
    .yn_reviews_page_hero_inner {
        grid-template-columns: minmax(0, 1fr) 390px;
        align-items: end;
    }
    .tours-reviews .items.swiper-wrapper{
        gap:0;
    }
}
/* 移动端 <768px */
@media screen and (max-width: 767px) {
    .tours-reviews .item.swiper-slide {
        width: 100%;
    }
    .tours-reviews .items.swiper-wrapper{
        gap:0;
    }
    /* 确保轮播容器在手机上完全可见 - 移除所有padding */
    .tours-reviews .reviews-swiper.swiper {
        padding: 0 !important;
    }
    /* 调整卡片内边距，使内容更紧凑 */
    .tours-reviews .yn_review_card {
        padding: 16px;
    }
    /* 确保卡片内容不被截断 */
    .tours-reviews .yn_review_quote {
        -webkit-line-clamp: 4; /* 减少显示的行数，避免内容溢出 */
    }
    .tours-reviews #traveler-review-title {
        font-size: 28px;
    }
    .tours-reviews .reviews-prev,
    .tours-reviews .reviews-next {
        display: none;
    }
    .tours-reviews .yn_review_highlights,
    .yn_reviews_page_stats {
        grid-template-columns: 1fr;
    }
    .tours-reviews .yn_review_shell,
    .yn_reviews_page_hero_inner {
        border-radius: 0;
        margin-inline: -12px;
    }
    .yn_reviews_list_card {
        grid-template-columns: 1fr;
    }
    .yn_reviews_list_author {
        display: grid;
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
    }
    .yn_reviews_list_name {
        margin-top: 0;
    }
}
/* ========== 9. 评论详情弹窗（匹配效果图） ========== */
.review-modal-overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.review-modal-overlay.active {
    display: flex;
}

/* 弹窗容器 */
.review-modal-box {
    background: #ffffff;
    width: 100%;
    max-width: 680px;
    max-height: 85vh;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* 弹窗头部（白色标题栏） */
.review-modal-header {
    padding: 18px 24px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.review-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #241521;
    margin: 0;
}

/* 关闭按钮 */
.modal-close-btn {
    position: absolute;
    right: 16px;
    top: 14px;
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    z-index: 10;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}
.modal-close-btn:hover {
    color: #241521;
}

/* 弹窗内容滚动区（浅米色背景，匹配效果图） */
.modal-review-content {
    overflow-y: auto;
    /*background: var(--review-paper, #fffaf4);*/
    flex: 1;
}

/* 弹窗内评论卡片 */
.modal-review-card {
    padding: 24px;
}

/* 评论顶部：头像区 + 星级日期区 */
.modal-review-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
.modal-review-person {
    display: flex;
    align-items: center;
}
.modal-review-person .avatar img {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(159, 88, 144, 0.18);
    object-fit: cover;
}
.modal-review-person .yn_review_identity {
    margin-left: 10px;
}
.modal-review-person .name {
    color: #241521 !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25 !important;
    margin: 0 0 2px;
}
.modal-review-person .country {
    color: #7a6c77 !important;
    font-size: 13px;
    font-style: normal !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* 星级与日期 */
.modal-review-meta {
    text-align: right;
}
.modal-review-stars {
    gap: 2px;
    justify-content: flex-end;
    margin-bottom: 4px !important;
}
.modal-review-stars i {
    color: #9f5890;
    font-size: 14px;
}
.modal-review-date {
    color: #999;
    font-size: 13px;
}
#review-list {
    /* 锚点跳转时，元素顶部距离视口预留20px */
    scroll-margin-top: 105px;
}
/* 评论副标题（行程名称，加粗显示） */
.modal-review-subtitle {
    font-size: 18px;
    font-weight: 700;
    color: #241521;
    margin: 0 0 16px;
    line-height: 1.4;
}

/* 评论正文（完整显示，无截断） */
.modal-review-text {
    color: #241521;
    font-size: 17px;
    line-height: 1.5;
    white-space: pre-wrap; /* 保留原文换行 */
}
.modal-review-text p {
    margin: 0 0 16px;
}
.modal-review-text p:last-child {
    margin-bottom: 0;
}

/* 原卡片高亮效果 */
.yn_review_card.active-highlight {
    background-color: #fff9e6 !important;
    border-color: rgba(255, 156, 1, 0.4) !important;
    transition: all 0.2s ease;
}
.expertUrl {
    color: #9f5890;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
    font-weight: 600; /* 字体加粗 */
}

.expertUrl:hover {
    color: #461a3e;
    text-decoration: underline;
}
@media screen and (max-width: 767px) {
    .review-modal-box {
        max-height: 90vh;
        border-radius: 8px;
    }
    .review-modal-header {
        padding: 14px 18px;
    }
    .modal-review-card {
        padding: 18px;
    }
    .modal-review-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .modal-review-meta {
        text-align: left;
    }
    .modal-review-stars {
        justify-content: flex-start;
    }
}