/* route-modal.css - 线路详情弹窗样式（从 route-*-tc-*.html 内联提取） */

:root {
  --route-modal-accent:#2d5a27;
  --route-modal-accent-soft:rgba(45,90,39,.06);
  --route-modal-accent-soft-2:rgba(45,90,39,.02);
  --route-modal-border-soft:rgba(45,90,39,.08);
  --route-modal-border-faint:rgba(45,90,39,.06);
  --route-modal-surface:#f6f8f6;
  --route-modal-panel:rgba(248,250,248,.85);
  --route-modal-shadow:0 18px 40px rgba(15,23,42,.16);
  --route-modal-duration:.24s;
  --route-modal-ease:cubic-bezier(.22,.61,.36,1);
}

/* 线路详情弹窗样式 */
.route-detail-modal {display:flex;position:fixed;inset:0;z-index:100001;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--route-modal-duration) var(--route-modal-ease),visibility 0s linear var(--route-modal-duration)}
.route-detail-modal.active {opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--route-modal-duration) var(--route-modal-ease)}
.route-detail-overlay {position:absolute;inset:0;background:rgba(15,23,42,.52);backdrop-filter:blur(4px);opacity:0;transition:opacity var(--route-modal-duration) var(--route-modal-ease)}
.route-detail-content {position:relative;background:#fff;border-radius:16px;max-width:600px;width:90%;max-height:85vh;overflow-y:auto;padding:32px;box-shadow:var(--route-modal-shadow);opacity:0;transform:translateY(12px) scale(.985);transition:opacity var(--route-modal-duration) var(--route-modal-ease),transform var(--route-modal-duration) var(--route-modal-ease)}
.route-detail-modal.active .route-detail-overlay {opacity:1}
.route-detail-modal.active .route-detail-content {opacity:1;transform:translateY(0) scale(1)}
.route-detail-close {position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#f5f5f5;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666;transition:all .2s;z-index:10}
.route-detail-close:hover {background:#e0e0e0;color:#333}
.route-detail-header {text-align:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #eee}
.route-detail-header h3 {font-size:20px;color:var(--route-modal-accent)}
.route-detail-body {font-size:14px;line-height:1.8;color:#333}
.route-detail-body h4 {color:var(--route-modal-accent);margin:16px 0 8px;font-size:16px}
.route-detail-body p {margin-bottom:12px}
.route-detail-body ul {margin:8px 0 12px 20px;padding-left:0}
.route-detail-body li {margin-bottom:6px}
/* 弹窗轮播图样式 */
.route-detail-carousel {position:relative;width:100%;border-radius:12px;overflow:hidden;margin-bottom:16px;background:#f5f5f5}
.route-detail-carousel .carousel-inner {position:relative;width:100%;padding-top:56.25%;overflow:hidden}
.route-detail-carousel .carousel-slides {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;transition:transform .4s ease}
.route-detail-carousel .carousel-slide {position:relative;min-width:100%;height:100%}
.route-detail-carousel .carousel-slide img {width:100%;height:100%;object-fit:cover;display:block}
.route-detail-carousel .carousel-badge {position:absolute;top:12px;left:12px;background:linear-gradient(135deg,#ff6b35,#ff8c42);color:#fff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500;z-index:5}
.route-detail-carousel .carousel-indicators {position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:5}
.route-detail-carousel .carousel-indicators .indicator {width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer;transition:all .3s}
.route-detail-carousel .carousel-indicators .indicator.active {background:#fff;width:20px;border-radius:4px}
.route-detail-carousel .carousel-btn {position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.4);border:none;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;z-index:5}
.route-detail-carousel:hover .carousel-btn {opacity:1}
.route-detail-carousel .carousel-btn:hover {background:rgba(0,0,0,.6)}
.route-detail-carousel .carousel-btn.prev {left:10px}
.route-detail-carousel .carousel-btn.next {right:10px}
.route-detail-tags {display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.route-detail-tag {background:#e8f5e9;color:var(--route-modal-accent);padding:4px 12px;border-radius:20px;font-size:12px}

/* 三类线路弹窗统一过渡：遮罩淡入，内容轻微上浮 */
.notice-modal,
.info-modal,
.camp-experience-modal {display:flex!important;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--route-modal-duration) var(--route-modal-ease),visibility 0s linear var(--route-modal-duration)}

.notice-modal.active,
.info-modal.active,
.camp-experience-modal.active {opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--route-modal-duration) var(--route-modal-ease)}

.notice-modal-overlay,
.info-modal-overlay {opacity:0;transition:opacity var(--route-modal-duration) var(--route-modal-ease)}

.camp-experience-modal .info-modal-overlay {opacity:0;transition:opacity var(--route-modal-duration) var(--route-modal-ease)}

.notice-modal-content,
.info-modal-content,
.camp-modal-content {opacity:0;transform:translateY(12px) scale(.985);transition:opacity var(--route-modal-duration) var(--route-modal-ease),transform var(--route-modal-duration) var(--route-modal-ease)}

.notice-modal.active .notice-modal-overlay,
.info-modal.active .info-modal-overlay,
.camp-experience-modal.active .info-modal-overlay {opacity:1}

.notice-modal.active .notice-modal-content,
.info-modal.active .info-modal-content,
.camp-experience-modal.active .camp-modal-content {opacity:1;transform:translateY(0) scale(1)}

/* 公告弹窗统一到同一套紧凑视觉 */
.notice-modal {position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;z-index:100002}

.notice-modal.active {display:flex}

.notice-modal-overlay {position:absolute;inset:0;background:rgba(15,23,42,.52);backdrop-filter:blur(4px)}

.notice-modal-content {position:relative;width:min(92vw,520px);max-height:82vh;overflow:auto;border-radius:18px;background:#fff;box-shadow:var(--route-modal-shadow);padding:16px 16px 14px;z-index:1}

.notice-modal-close {position:absolute;top:10px;right:10px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;border-radius:999px;background:rgba(45,90,39,.08);color:var(--route-modal-accent);cursor:pointer}

.notice-modal-close svg {width:16px;height:16px}

.notice-modal-header {display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:10px 12px;border-radius:12px;background:linear-gradient(180deg,var(--route-modal-accent-soft) 0%,var(--route-modal-accent-soft-2) 100%);border-bottom:1px solid var(--route-modal-border-soft)}

.notice-modal-icon {flex:0 0 34px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(45,90,39,.08);color:var(--route-modal-accent)}

.notice-modal-icon svg {width:18px;height:18px}

.notice-modal-title {margin:0;color:var(--route-modal-accent);font-size:1.05rem;line-height:1.2;font-weight:700}

.notice-modal-body {padding:2px 2px 0;font-size:13px;line-height:1.6;color:#334155}

.notice-modal-subtitle {margin:0 0 8px;padding:8px 10px;border-radius:10px;background:var(--route-modal-panel);color:var(--route-modal-accent);font-size:.95rem;line-height:1.35}

.notice-modal-text {padding:10px 12px;border-radius:10px;background:var(--route-modal-panel);word-break:break-word;overflow-wrap:anywhere}

.notice-modal-text > *:first-child {margin-top:0}

.notice-modal-text > *:last-child {margin-bottom:0}

.notice-modal-text p,
.notice-modal-text li {line-height:1.6}

.notice-modal-text ul,
.notice-modal-text ol {margin:8px 0 0;padding-left:18px}

/* 缩紧两个公共信息弹窗头部，减少首屏占高 */
.info-modal-header,
.camp-modal-header {padding:14px 18px 10px;margin-bottom:10px;background:linear-gradient(180deg,var(--route-modal-accent-soft) 0%,var(--route-modal-accent-soft-2) 100%);border-bottom:1px solid var(--route-modal-border-soft)}

.info-modal-header .info-modal-icon,
.camp-modal-header .camp-modal-icon {display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-bottom:6px;font-size:20px;line-height:1}

.info-modal-header .info-modal-title,
.camp-modal-header .camp-modal-name {margin:0 0 4px;line-height:1.25}

.info-modal-header .info-modal-subtitle,
.camp-modal-header .camp-modal-difficulty {margin:0;line-height:1.2}

.info-modal-content,
.camp-modal-content {max-height:82vh;padding-top:18px}

.info-modal-body,
.camp-modal-body {padding-top:4px;font-size:14px;line-height:1.65}

.info-modal-image,
.camp-modal-media {margin-bottom:10px}

.info-modal-image {width:100%;max-height:220px;object-fit:cover;border-radius:12px}

.camp-modal-media {max-height:200px;overflow:hidden;border-radius:12px;background:var(--route-modal-surface);box-shadow:inset 0 0 0 1px var(--route-modal-border-faint)}

.camp-modal-images img,
.camp-modal-video video,
.camp-modal-video iframe {width:100%;max-height:200px;object-fit:cover;border-radius:12px}

.camp-modal-section,
.info-modal-desc {margin-top:10px}

.info-modal-desc,
.camp-modal-section {padding:10px 12px;border-radius:10px;background:var(--route-modal-panel)}

.info-modal-title,
.camp-modal-name,
.camp-modal-section h4 {color:var(--route-modal-accent)}

.info-modal-title,
.camp-modal-name,
.info-modal-subtitle,
.camp-modal-difficulty,
.info-modal-desc,
.camp-modal-highlight-item,
.camp-modal-section p {word-break:break-word;overflow-wrap:anywhere}

.info-modal-title,
.camp-modal-name {max-width:calc(100% - 34px);margin-left:auto;margin-right:auto}

.info-modal-subtitle,
.camp-modal-difficulty {color:rgba(45,90,39,.72)}

.camp-modal-section h4 {margin:0 0 8px}

.camp-modal-section p,
.camp-modal-section ul,
.camp-modal-section ol,
.camp-modal-highlights-list {margin:0}

.camp-modal-highlights-list > * + * {margin-top:6px}

.camp-modal-highlight-item {padding:6px 8px;border-radius:8px;background:rgba(45,90,39,.04)}

.camp-modal-highlights-list li,
.camp-modal-highlights-list p,
.camp-modal-highlights-list div {line-height:1.5}

.camp-modal-section + .camp-modal-section {margin-top:8px;padding-top:8px;border-top:1px solid var(--route-modal-border-faint)}

.info-modal-close,
.camp-modal-close {top:10px;right:10px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:999px;font-size:18px;line-height:1}

@media (max-width: 768px) {
  .route-detail-content {transform:translateY(10px) scale(.99)}

  .route-detail-modal.active .route-detail-content {transform:translateY(0) scale(1)}

  .notice-modal-content,
  .info-modal-content,
  .camp-modal-content {transform:translateY(10px) scale(.99)}

  .notice-modal.active .notice-modal-content,
  .info-modal.active .info-modal-content,
  .camp-experience-modal.active .camp-modal-content {transform:translateY(0) scale(1)}

  .notice-modal {padding:12px}

  .notice-modal-content {width:min(92vw,520px);max-height:78vh;padding:13px 13px 12px;border-radius:15px}

  .notice-modal-header {gap:8px;margin-bottom:8px;padding:8px 10px;border-radius:10px}

  .notice-modal-icon {width:30px;height:30px;flex-basis:30px}

  .notice-modal-icon svg {width:16px;height:16px}

  .notice-modal-title {font-size:1rem;line-height:1.15}

  .notice-modal-body {font-size:12.8px;line-height:1.5}

  .notice-modal-subtitle {margin-bottom:7px;padding:7px 9px;border-radius:9px;font-size:.9rem}

  .notice-modal-text {padding:8px 10px;border-radius:9px}

  .notice-modal-close {top:8px;right:8px;width:25px;height:25px}

  .notice-modal-close svg {width:15px;height:15px}

  .info-modal-content,
  .camp-modal-content {width:min(92vw,560px);max-height:78vh;padding-top:12px;border-radius:14px}

  .info-modal-header,
  .camp-modal-header {padding:11px 14px 7px;margin-bottom:7px}

  .info-modal-header .info-modal-icon,
  .camp-modal-header .camp-modal-icon {width:34px;height:34px;margin-bottom:4px;font-size:18px;transform:none}

  .info-modal-header .info-modal-title,
  .camp-modal-header .camp-modal-name {margin:0 0 2px;line-height:1.15;font-size:1.02em;font-weight:600}

  .info-modal-header .info-modal-subtitle,
  .camp-modal-header .camp-modal-difficulty {font-size:.88em;line-height:1.15}

  .info-modal-body,
  .camp-modal-body {padding:2px 13px 13px;font-size:12.8px;line-height:1.5}

  .info-modal-image,
  .camp-modal-media {margin-bottom:8px}

  .info-modal-image {max-height:180px}

  .camp-modal-media,
  .camp-modal-images img,
  .camp-modal-video video,
  .camp-modal-video iframe {max-height:168px}

  .camp-modal-section,
  .info-modal-desc {margin-top:8px}

  .info-modal-desc,
  .camp-modal-section {padding:8px 9px;border-radius:9px}

  .camp-modal-section h4 {margin:0 0 6px}

  .camp-modal-highlights-list > * + * {margin-top:5px}

  .camp-modal-highlight-item {padding:5px 7px;border-radius:7px}

  .camp-modal-highlights-list li,
  .camp-modal-highlights-list p,
  .camp-modal-highlights-list div {line-height:1.45}

  .camp-modal-section + .camp-modal-section {margin-top:6px;padding-top:6px}

  .info-modal-close,
  .camp-modal-close {top:7px;right:7px;width:25px;height:25px;font-size:15px;transform:none}
}

@media (max-width: 480px) {
  .route-detail-content {transform:translateY(8px) scale(.992)}

  .notice-modal-content,
  .info-modal-content,
  .camp-modal-content {transform:translateY(8px) scale(.992)}

  .notice-modal {padding:10px}

  .notice-modal-content {padding:11px 11px 10px;border-radius:13px}

  .notice-modal-header {gap:7px;margin-bottom:7px;padding:7px 9px;border-radius:9px}

  .notice-modal-icon {width:28px;height:28px;flex-basis:28px}

  .notice-modal-title {font-size:.96rem;line-height:1.1}

  .notice-modal-body {font-size:12.2px;line-height:1.45}

  .notice-modal-subtitle {margin-bottom:6px;padding:6px 8px;border-radius:8px;font-size:.86rem;line-height:1.25}

  .notice-modal-text {padding:7px 8px;border-radius:8px}

  .notice-modal-close {top:6px;right:6px;width:23px;height:23px}

  .notice-modal-close svg {width:14px;height:14px}

  .info-modal-header,
  .camp-modal-header {padding:9px 11px 6px;margin-bottom:5px}

  .info-modal-header .info-modal-title,
  .camp-modal-header .camp-modal-name {font-size:.96em;line-height:1.1;font-weight:600}

  .info-modal-header .info-modal-subtitle,
  .camp-modal-header .camp-modal-difficulty {font-size:.82em;line-height:1.1}

  .info-modal-body,
  .camp-modal-body {padding:2px 11px 11px;font-size:12.2px;line-height:1.45}

  .info-modal-desc,
  .camp-modal-section {padding:7px 8px;border-radius:8px}

  .info-modal-header .info-modal-icon,
  .camp-modal-header .camp-modal-icon {width:30px;height:30px;font-size:16px}

  .info-modal-image {max-height:156px}

  .camp-modal-media,
  .camp-modal-images img,
  .camp-modal-video video,
  .camp-modal-video iframe {max-height:148px}

  .camp-modal-section + .camp-modal-section {margin-top:5px;padding-top:5px}

  .camp-modal-highlights-list > * + * {margin-top:4px}

  .camp-modal-highlight-item {padding:4px 6px;border-radius:6px}

  .info-modal-close,
  .camp-modal-close {top:6px;right:6px;width:23px;height:23px;font-size:14px}
}