/* ==========================================================================
   Tour Detail v3 — Extracted inline styles
   Source: themes/HSJTRAVEL/Tour/Views/frontend/layouts/details/v3/*.blade.php
   ========================================================================== */

/* ── Hero (v3/hero) ── */
.v3-hero-video-thumb {
    position: absolute;
    top: 28px;
    right: 64px;
    z-index: 10;
    width: 210px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.35);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    cursor: pointer;
    background: none;
    padding: 0;
    transition: transform 0.2s, box-shadow 0.2s;
    display: block;
}
.v3-hero-video-thumb:hover { transform: scale(1.04); box-shadow: 0 12px 40px rgba(0,0,0,0.6); }
.v3-hero-video-thumb-img { width: 100%; height: 118px; object-fit: cover; display: block; }
.v3-hero-video-thumb-dim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 60%);
}
.v3-hero-video-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.7);
    display: flex; align-items: center; justify-content: center;
}
.v3-hero-video-thumb-label {
    position: absolute;
    bottom: 9px; left: 0; right: 0;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: white;
    letter-spacing: 0.04em;
    font-family: var(--font-body, 'Poppins', sans-serif);
}
@media (max-width: 992px) {
    .v3-hero-video-thumb { right: 20px; top: 20px; width: 160px; }
    .v3-hero-video-thumb-img { height: 90px; }
}
@media (max-width: 576px) {
    .v3-hero-video-thumb { right: 12px; top: 12px; width: 120px; border-radius: 8px; }
    .v3-hero-video-thumb-img { height: 68px; }
    .v3-hero-video-thumb-play { width: 32px; height: 32px; }
    .v3-hero-video-thumb-label { font-size: 10px; bottom: 6px; }
}

.v3-ta-badge {
    position: absolute;
    top: 24px;
    left: 56px;
    z-index: 10;
    width: 200px;
    pointer-events: none;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5));
}
.v3-ta-badge svg { width: 100%; height: auto; display: block; }
@media (max-width: 992px) {
    .v3-ta-badge { left: 24px; top: 20px; width: 180px; }
}
@media (max-width: 576px) {
    .v3-ta-badge { left: 12px; top: 12px; width: 155px; }
}

/* ── Overview: Social Proof (v3/overview) ── */
.v3-social-proof {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    padding: 14px 0; margin-bottom: 8px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.v3-sp-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fg-muted, #6b7280); }
.v3-sp-item strong { font-weight: 700; color: var(--fg, #111827); }
@media (max-width: 576px) { .v3-social-proof { gap: 14px; } .v3-sp-item { font-size: 12px; } }

/* ── Overview: Read More (v3/overview) ── */
.v3-prose--clamped {
    position: relative;
    max-height: 160px;
    overflow: hidden;
}
.v3-prose--clamped::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--bg, #fff));
    pointer-events: none;
}
.v3-prose--clamped.expanded {
    max-height: none;
}
.v3-prose--clamped.expanded::after { display: none; }
.v3-read-more {
    display: inline-block; margin-top: 8px;
    background: none; border: none; padding: 0;
    font-size: 13px; font-weight: 600; color: var(--accent, #1A4B89);
    cursor: pointer; font-family: inherit;
    transition: color 0.2s;
}
.v3-read-more:hover { color: var(--brand, #FBA504); }

/* ── Itinerary Day / Timeline (v3/itinerary-day) ── */
/* ── Tour at a Glance ── */
.dt-glance {
    display: flex; flex-wrap: wrap;
    border: 1px solid var(--border); border-radius: 10px;
    overflow: hidden; background: var(--bg-soft, #f9fafb);
    margin-bottom: 28px;
}
.dt-glance-cell {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; border-right: 1px solid var(--border);
    flex: 1; min-width: 0;
}
.dt-glance-cell:last-child { border-right: none; }
.dt-glance-ico {
    width: 36px; height: 36px; flex-shrink: 0;
    background: #fff; border: 1px solid var(--border); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
}
.dt-glance-ico svg { width: 15px; height: 15px; stroke: var(--accent, #FBA504); }
.dt-glance-lbl {
    font-size: 9.5px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--fg-muted, #6b7280);
    display: block; margin-bottom: 2px;
}
.dt-glance-val {
    font-size: 13px; font-weight: 600; color: var(--fg, #222);
    display: block; white-space: nowrap;
}

/* ── Timeline ── */
.dt-timeline { display: flex; flex-direction: column; }
.dt-row { display: flex; align-items: stretch; cursor: pointer; }
.dt-spine {
    width: 26px; flex-shrink: 0;
    display: flex; flex-direction: column;
    align-items: center; position: relative;
}
.dt-spine::before {
    content: ''; position: absolute;
    left: 50%; top: 0; bottom: 0; width: 2px;
    transform: translateX(-50%);
    background: var(--border, #e5e7eb);
}
.dt-row.is-last .dt-spine::before { bottom: auto; height: 22px; }
.dt-dot {
    position: relative; z-index: 1;
    width: 12px; height: 12px; border-radius: 50%;
    background: #fff; border: 2px solid #fbbf24;
    flex-shrink: 0; margin-top: 18px;
    transition: background .2s, border-color .2s, transform .2s;
}
.dt-row[data-type="start"] .dt-dot {
    background: #16a34a; border-color: #16a34a;
    width: 14px; height: 14px; margin-top: 17px;
}
.dt-row[data-type="end"] .dt-dot {
    background: var(--accent, #1A4B89); border-color: var(--accent, #1A4B89);
    width: 14px; height: 14px; margin-top: 17px;
}
.dt-row.is-open .dt-dot {
    background: var(--accent, #FBA504); border-color: var(--accent, #FBA504);
    transform: scale(1.15);
}

/* ── Card ── */
.dt-content { flex: 1; min-width: 0; padding-left: 12px; padding-bottom: 6px; }
.dt-card {
    border: 1px solid var(--border); border-radius: 10px;
    background: #fff; overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
}
.dt-card:hover { border-color: #d1d5db; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.dt-row.is-open .dt-card {
    border-color: var(--accent, #FBA504);
    box-shadow: 0 0 0 3px rgba(251,165,4,.08);
}
.dt-card-hd {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 16px; user-select: none;
}
.dt-card-hd-l { flex: 1; min-width: 0; }
.dt-card-name { font-size: 14.5px; font-weight: 600; color: var(--fg, #222); line-height: 1.3; }
.dt-card-tags { display: flex; align-items: center; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.dt-tag {
    font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px;
    letter-spacing: .04em; white-space: nowrap;
}
.dt-tag-dur { background: var(--bg-soft, #f9fafb); border: 1px solid var(--border); color: var(--fg-muted); font-weight: 500; }
.dt-tag-start { background: #dcfce7; color: #16a34a; }
.dt-tag-end { background: #eff6ff; color: #1A4B89; }
.dt-tag-heritage { background: #FEF3C7; color: #92400E; }

.dt-chevron {
    width: 17px; height: 17px; flex-shrink: 0;
    color: var(--fg-muted); margin-top: 2px;
    transition: transform .25s, color .18s;
}
.dt-row.is-open .dt-chevron { transform: rotate(180deg); color: var(--accent, #FBA504); }

/* ── Expandable body ── */
.dt-card-bd { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.dt-card-bd-in {
    padding: 0 16px 16px; border-top: 1px solid var(--border);
    padding-top: 14px;
}
.dt-card-desc { font-size: 13.5px; color: var(--fg-muted, #6b7280); line-height: 1.7; }
.dt-card-desc p { margin-bottom: 6px; }
.dt-card-desc ul,
.dt-card-desc ol { padding-left: 18px; margin: 6px 0; }
.dt-card-desc li { margin-bottom: 3px; font-size: 13px; color: #374151; }
.dt-card-desc li::marker { color: var(--accent, #FBA504); }

/* ── Transit connector ── */
.dt-transit { display: flex; align-items: stretch; }
.dt-transit .dt-spine {}
.dt-transit .dt-content { display: flex; align-items: center; min-height: 36px; }
.dt-transit-lbl {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--fg-muted, #6b7280);
}
.dt-transit-lbl svg {
    width: 13px; height: 13px; stroke: var(--fg-muted, #6b7280);
    fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .dt-glance { display: grid; grid-template-columns: 1fr 1fr; }
    .dt-glance-cell { border-right: 1px solid var(--border) !important; border-bottom: 1px solid var(--border); }
    .dt-glance-cell:nth-child(2n) { border-right: none !important; }
    .dt-glance-cell:last-child { border-bottom: none; }
    .dt-spine { width: 22px; }
    .dt-content { padding-left: 10px; }
}
@media (max-width: 380px) {
    .dt-glance { display: flex; flex-direction: column; }
    .dt-glance-cell { border-right: none !important; }
    .dt-glance-cell:not(:last-child) { border-bottom: 1px solid var(--border) !important; }
}

/* ── Gallery (v3/gallery) ── */
/* Prevent gallery images opening as links */
.v3-gallery-img { cursor: zoom-in; }

.v3-gallery-video {
    margin-top: 4px;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #111;
}
.v3-gallery-video iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

/* ── Videos (v3/videos) ── */
.v3-video-card.v3-video-hidden { display: none; }

/* ── FAQ (v3/faq) ── */
.v3-faq-q { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; }
.v3-faq-num {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    color: var(--accent);
    font-family: var(--font-body);
    letter-spacing: 0.03em;
    transition: background 0.2s, border-color 0.2s;
}
.v3-faq-item.open .v3-faq-num {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}
.v3-faq-q-text { flex: 1; }
.v3-faq-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.v3-faq-ctrl-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--fg-muted); background: var(--bg-soft); border: 1px solid var(--border); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-family: var(--font-body); transition: background 0.18s, color 0.18s, border-color 0.18s; white-space: nowrap; }
.v3-faq-ctrl-btn:hover { background: var(--border); color: var(--fg); }
.v3-faq-ctrl-btn.expanded .v3-faq-ctrl-icon { transform: rotate(180deg); }
@media (max-width: 576px) { .v3-faq-header { flex-direction: column; align-items: flex-start; gap: 12px; } }
.v3-faq-hidden { display: none; }
.v3-faq-show-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 16px; background: none; border: 1px solid var(--border);
    padding: 10px 20px; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: var(--accent, #1A4B89);
    cursor: pointer; font-family: var(--font-body);
    transition: background 0.2s, border-color 0.2s;
}
.v3-faq-show-more:hover { background: var(--bg-soft); border-color: var(--accent, #1A4B89); }

/* ── Guides (v3/guides) ── */
.v3-guides-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.v3-guide-card {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    transition: box-shadow 0.2s, transform 0.2s;
}
.v3-guide-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.07); transform: translateY(-2px); }
.v3-guide-photo { aspect-ratio: 1 / 1; overflow: hidden; }
.v3-guide-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.v3-guide-card:hover .v3-guide-photo img { transform: scale(1.04); }
.v3-guide-info { padding: 12px 10px 14px; }
.v3-guide-name { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--fg); margin: 0 0 2px; }
.v3-guide-role { display: inline-block; font-size: 11px; font-weight: 500; color: var(--accent); text-transform: uppercase; letter-spacing: 0.03em; }
.v3-guides-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 14px; font-weight: 500; color: var(--accent); text-decoration: none; transition: gap 0.2s; }
.v3-guides-more:hover { gap: 10px; }
@media (max-width: 768px) { .v3-guides-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; } .v3-guide-name { font-size: 12.5px; } .v3-guide-role { font-size: 10px; } .v3-guide-info { padding: 8px 6px 10px; } }
@media (max-width: 480px) { .v3-guides-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ── Reviews (v3/reviews) ── */
.v3-review-item.v3-review-hidden { display: none; }
.v3-review-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.v3-review-source { display: flex; align-items: center; text-decoration: none; }
a.v3-review-source:hover { opacity: 0.8; }
.v3-reviews-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.v3-reviews-seemore {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 500; color: var(--fg);
    background: var(--bg-soft); border: 1px solid var(--border);
    padding: 8px 16px; border-radius: 6px; cursor: pointer;
    font-family: var(--font-body); transition: background 0.18s, border-color 0.18s;
}
.v3-reviews-seemore:hover { background: var(--border); border-color: var(--fg-muted); }
.v3-review-readmore-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px; padding: 5px 12px; border-radius: 5px;
    font-size: 12.5px; font-weight: 500; color: #00AA6C;
    background: rgba(0,170,108,0.08); border: 1px solid rgba(0,170,108,0.2);
    text-decoration: none; transition: background 0.18s, border-color 0.18s;
}
.v3-review-readmore-btn:hover { background: rgba(0,170,108,0.15); border-color: #00AA6C; }

/* ── Departures (v3/departures) ── */
/* ── Departures Section ── */
.v3-dep-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.v3-dep-divider {
    height: 1px;
    background: var(--border);
    margin-bottom: 24px;
}
.v3-dep-trust-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.v3-dep-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 500;
    color: #374151;
    background: #fffbf0;
    border: 1px solid #fde68a;
    border-radius: 100px;
    padding: 4px 10px;
    white-space: nowrap;
    font-family: var(--font-body);
}

/* ── Widget container — no wrapper box, let iframe breathe ── */
.v3-dep-widget-wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--border);
}

/* iframe injected by WeTravel */
.v3-dep-widget-wrap iframe {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 460px !important;
    border: none !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

.v3-dep-footer {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 14px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
    font-family: var(--font-body);
}
.v3-dep-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.v3-dep-link:hover {
    text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .v3-dep-heading-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .v3-dep-trust-pills {
        gap: 6px;
    }
    .v3-dep-pill {
        font-size: 11px;
        padding: 3px 9px;
    }
    .v3-dep-widget-wrap {
        padding: 2px;
        border-radius: 8px;
    }
}

@media (max-width: 480px) {
    .v3-dep-trust-pills {
        gap: 5px;
    }
    .v3-dep-pill {
        font-size: 10.5px;
        padding: 3px 8px;
    }
    .v3-dep-footer {
        font-size: 12px;
    }
}

/* ── Route Map (v3/route-map) ── */
/* ── Animated traveler marker ── */
.hsj-traveler-marker { background: transparent !important; border: none !important; }
.hsj-traveler-inner {
    width: 36px; height: 36px; border-radius: 50%;
    background: #FBA504;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(251,165,4,.55), 0 0 0 3px rgba(251,165,4,.18);
    color: #fff;
    animation: hsjTravelerPulse 2s ease-in-out infinite;
}
@keyframes hsjTravelerPulse {
    0%,100% { box-shadow: 0 2px 10px rgba(251,165,4,.55), 0 0 0 3px rgba(251,165,4,.18); }
    50%      { box-shadow: 0 4px 22px rgba(251,165,4,.85), 0 0 0 7px rgba(251,165,4,.12); }
}
.hsj-traveler-inner svg { display:block; flex-shrink:0; }
.hsj-traveler-plane-wrap { display:inline-flex; transition: transform .6s ease; }

/* ── Day number markers (small map) ── */
.hsj-map-marker { background:transparent!important; border:none!important; }
.hsj-marker-inner {
    width:26px; height:26px; border-radius:50%;
    background:#fff; border:2px solid #FBA504;
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:700; color:#1f2937;
    box-shadow:0 1px 6px rgba(0,0,0,.2);
    font-family:system-ui, sans-serif;
    transition:background .2s, color .2s;
}
.hsj-marker-inner.active,
.hsj-marker-inner.peak {
    background:#FBA504; color:#fff;
    box-shadow:0 2px 10px rgba(251,165,4,.5);
}
.hsj-marker-inner.peak { background:#d97706; }

/* ── Modal legend ── */
.v3-modal-legend {
    position:absolute; top:12px; left:12px; z-index:500;
    display:flex; gap:8px; flex-wrap:wrap;
    background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
    border:1px solid rgba(0,0,0,.1); border-radius:8px;
    padding:6px 10px;
    font-size:11px; font-weight:500; color:#374151;
    font-family:system-ui,sans-serif;
}
.v3-modal-legend span { display:inline-flex; align-items:center; gap:5px; }
.v3-ml-dot { display:inline-block; width:8px; height:8px; border-radius:50%; }
.v3-ml-trek  { background:#FBA504; }
.v3-ml-drive { background:#60a5fa; }
.v3-ml-plane { background:#a78bfa; }

/* ── Day label (shows place name when zoomed into a stop) ── */
.v3-map-day-label {
    position:absolute;
    bottom:10px; right:10px;
    z-index:1001;
    display:inline-flex;
    align-items:center;
    gap:0;
    padding:5px 11px;
    font-size:12px;
    font-weight:600;
    font-family:var(--font-body);
    color:#fff;
    background:rgba(17,24,39,0.78);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:20px;
    backdrop-filter:blur(6px);
    pointer-events:none;
    white-space:nowrap;
    animation:v3DayLabelIn .2s ease-out both;
}
@keyframes v3DayLabelIn {
    from { opacity:0; transform:translateY(4px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Map reset button ── */
.v3-map-reset-btn {
    position:absolute;
    top:10px; left:10px;
    z-index:1001; /* above the click overlay */
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 10px;
    font-size:11px;
    font-weight:600;
    font-family:var(--font-body);
    color:#fff;
    background:rgba(17,24,39,0.72);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:6px;
    backdrop-filter:blur(6px);
    cursor:pointer;
    transition:background .15s;
}
.v3-map-reset-btn:hover {
    background:rgba(251,165,4,0.85);
    border-color:rgba(251,165,4,0.5);
}

/* ── Route timeline strip ── */
.v3-rts-outer {
    position:relative;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    margin-top:12px;
    /* leave room for the side buttons */
    padding:0 36px;
    overflow:visible; /* never clip pointer events from child nodes */
}
.v3-rts {
    display:flex;
    align-items:flex-start;
    padding:20px 8px 16px;
    overflow-x:auto;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:0;
}
.v3-rts::-webkit-scrollbar { display:none; }

/* ── Side scroll buttons ── */
.v3-rts-btn {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    width:28px; height:28px;
    border-radius:50%;
    border:1px solid var(--border);
    background:#fff;
    color:#374151;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    box-shadow:0 1px 6px rgba(0,0,0,.1);
    transition:background .15s, border-color .15s, color .15s, opacity .2s, transform .2s;
    padding:0;
    flex-shrink:0;
}
.v3-rts-btn--prev { left:6px; }
.v3-rts-btn--next { right:6px; }
.v3-rts-btn:hover {
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
}
.v3-rts-btn--hidden {
    opacity:0;
    pointer-events:none;
    transform:translateY(-50%) scale(0.8);
}
/* Node */
.v3-rts-node {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    cursor:pointer;
    min-width:64px;
    max-width:80px;
    flex-shrink:0;
    padding:4px 2px;
    border-radius:8px;
    transition:background .15s;
    position:relative;
}
.v3-rts-node:hover,
.v3-rts-node--active { background:var(--bg-soft); }
.v3-rts-node--active .v3-rts-circle {
    border-color:#FBA504;
    background:rgba(251,165,4,.08);
}
/* Crown for peak */
.v3-rts-crown {
    position:absolute;
    top:-14px;
    color:#d97706;
    font-size:10px;
    line-height:1;
}
/* Day circle */
.v3-rts-circle {
    width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#f3f4f6; border:2px solid #e5e7eb;
    font-size:11px; font-weight:700; color:#374151;
    flex-shrink:0;
    transition:background .15s, border-color .15s, color .15s;
    font-family:var(--font-body);
}
.v3-rts-node--start .v3-rts-circle {
    background:#dcfce7; border-color:#86efac; color:#166534;
}
.v3-rts-node--end .v3-rts-circle {
    background:#fee2e2; border-color:#fca5a5; color:#991b1b;
}
.v3-rts-node--peak .v3-rts-circle {
    background:#FBA504; border-color:#d97706; color:#fff;
    box-shadow:0 2px 10px rgba(251,165,4,.45);
}
.v3-rts-node:hover .v3-rts-circle {
    border-color:#FBA504;
}
/* Place name */
.v3-rts-place {
    font-size:11px; font-weight:500; color:var(--fg);
    text-align:center; line-height:1.25;
    font-family:var(--font-body);
    word-break:break-word;
    max-width:72px;
}
.v3-rts-node--peak .v3-rts-place { color:#92400e; font-weight:600; }
/* Altitude chip */
.v3-rts-alt {
    font-size:10px; font-weight:600;
    padding:2px 7px; border-radius:100px;
    font-family:var(--font-body);
    white-space:nowrap;
}
.v3-rts-alt-spacer { height:18px; }
.v3-rts-alt--low    { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.v3-rts-alt--mid    { background:#fefce8; color:#854d0e; border:1px solid #fef08a; }
.v3-rts-alt--high   { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; }
.v3-rts-alt--extreme{ background:#fef3c7; color:#92400e; border:1px solid #fde68a; font-weight:700; }

/* Connector */
.v3-rts-conn {
    display:flex;
    align-items:center;
    flex-shrink:0;
    padding-top:15px; /* align with circle centre */
    gap:3px;
    min-width:36px;
}
.v3-rts-conn-line {
    flex:1; height:2px; min-width:8px;
    border-radius:1px;
}
.v3-rts-conn--trek  .v3-rts-conn-line { background:#e5e7eb; }
.v3-rts-conn--drive .v3-rts-conn-line { background:#bfdbfe; }
.v3-rts-conn--plane .v3-rts-conn-line { background:#ddd6fe; }
.v3-rts-conn-icon {
    display:flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:50%;
    flex-shrink:0;
}
.v3-rts-conn--trek  .v3-rts-conn-icon { background:#f3f4f6; color:#6b7280; }
.v3-rts-conn--drive .v3-rts-conn-icon { background:#eff6ff; color:#2563eb; }
.v3-rts-conn--plane .v3-rts-conn-icon { background:#f5f3ff; color:#7c3aed; }


/* Legend */
.v3-rts-legend {
    display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px;
    margin-top:10px;
    font-size:11px; color:var(--fg-muted); font-family:var(--font-body);
}
.v3-rts-leg-item {
    display:inline-flex; align-items:center; gap:5px;
    color:#374151;
}
.v3-rts-leg-item svg { color:#6b7280; }
.v3-rts-leg-peak { color:#92400e; }
.v3-rts-leg-peak svg { color:#d97706; }
.v3-rts-leg-note {
    margin-left:auto;
    font-size:10.5px; color:var(--fg-muted);
    font-style:italic;
}

/* ── Responsive ── */
@media (max-width:640px) {
    .v3-rts-outer { padding:0 30px; }
    .v3-rts { padding:18px 4px 14px; }
    .v3-rts-btn { width:24px; height:24px; }
    .v3-rts-btn--prev { left:4px; }
    .v3-rts-btn--next { right:4px; }
    .v3-rts-node { min-width:56px; max-width:68px; }
    .v3-rts-circle { width:26px; height:26px; font-size:10px; }
    .v3-rts-place { font-size:10px; max-width:62px; }
    .v3-rts-alt { font-size:9.5px; padding:1px 5px; }
    .v3-rts-conn { min-width:28px; }
    .v3-rts-conn-icon { width:18px; height:18px; }
    .v3-rts-conn-icon svg { width:10px; height:10px; }
    .v3-rts-legend { gap:8px 12px; }
    .v3-rts-leg-note { display:none; }
}
@media (max-width:400px) {
    .v3-rts-outer { padding:0 26px; }
    .v3-rts { padding:16px 4px 12px; }
    .v3-rts-btn { width:22px; height:22px; }
    .v3-rts-btn svg { width:12px; height:12px; }
    .v3-rts-node { min-width:50px; max-width:60px; }
    .v3-rts-circle { width:24px; height:24px; font-size:9px; }
    .v3-rts-place { font-size:9.5px; }
    .v3-rts-conn { min-width:22px; }
}

/* ── Sidebar (v3/sidebar) ── */
.hsj-sticky-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 998;
    background: #fff; box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
    border-top: 1px solid #f0f0f0;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.hsj-sticky-bar.is-visible { transform: translateY(0); }
.hsj-sticky-bar__inner { padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hsj-sticky-bar__info { display: flex; align-items: baseline; gap: 3px; flex-shrink: 0; }
.hsj-sticky-bar__label { font-size: 11px; color: #9ca3af; font-weight: 500; }
.hsj-sticky-bar__price { font-size: 18px; font-weight: 700; color: #111827; letter-spacing: -0.02em; }
.hsj-sticky-bar__per { font-size: 11px; color: #9ca3af; }
.hsj-sticky-bar__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hsj-sticky-bar__cta { background: #FBA504; color: #111827; border: none; padding: 9px 14px; border-radius: 7px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.18s; }
.hsj-sticky-bar__cta:hover { background: #e09400; }
.hsj-sticky-bar__enquiry { background: #fff; color: #374151; border: 1.5px solid #e5e7eb; padding: 8px 14px; border-radius: 7px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; transition: border-color 0.18s, color 0.18s; }
.hsj-sticky-bar__enquiry:hover { border-color: #FBA504; color: #FBA504; }
@media (min-width: 992px) { .hsj-sticky-bar { display: none !important; } }

.v3-why-hsj {
    background: var(--bg-soft, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s, transform 0.4s;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
}
.v3-why-hsj.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    max-height: 600px;
    overflow: visible;
}
.v3-why-hsj-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--fg); margin-bottom: 14px; }
.v3-why-hsj-list { display: flex; flex-direction: column; gap: 12px; }
.v3-why-item { display: flex; align-items: flex-start; gap: 10px; }
.v3-why-item svg { flex-shrink: 0; margin-top: 2px; }
.v3-why-item strong { display: block; font-size: 13px; font-weight: 600; color: var(--fg); line-height: 1.3; }
.v3-why-item span { display: block; font-size: 12px; color: var(--fg-muted); font-weight: 300; line-height: 1.4; }
@media (max-width: 991px) { .v3-why-hsj { display: none !important; } }

.v3-trust-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s; }
.v3-trust-link:hover { color: var(--accent, #1A4B89); }

.v3-csr-card {
    display: flex; align-items: flex-start; gap: 12px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 10px; padding: 14px 16px; margin-bottom: 16px;
}
.v3-csr-icon { color: #10b981; flex-shrink: 0; margin-top: 1px; }
.v3-csr-title { font-size: 13px; font-weight: 700; color: #065f46; margin-bottom: 3px; }
.v3-csr-desc { font-size: 11.5px; color: #374151; line-height: 1.5; font-weight: 300; }
.v3-csr-desc strong { font-weight: 600; color: #065f46; }
@media (max-width: 991px) { .v3-csr-card { display: none !important; } }