/* Self-hosted fonts, subsetted to latin + latin-ext (incl. pinyin tone marks) and
   woff2-only. Sources + regeneration recipe: ComponentLib/fonts-src/. The URLs are
   hand-pinned and served immutable for a year (see Frontend/Program.cs), so any
   regenerated font gets a new -vN filename — never edit a font file in place.
   No .ttf fallback on purpose: it fires on download FAILURE too, and a 457 kB TTF
   on a slow mainland-China link is the worst outcome this CSS could produce. */
@font-face {
    font-family: 'Roboto';
    src: url('/_content/Chinanar.ComponentLib/fonts/Roboto-latinext-v1.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/_content/Chinanar.ComponentLib/fonts/Roboto-Italic-latinext-v1.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Serif';
    src: url('/_content/Chinanar.ComponentLib/fonts/RobotoSerif-Regular-latinext-v1.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Serif';
    src: url('/_content/Chinanar.ComponentLib/fonts/RobotoSerif-Medium-latinext-v1.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Serif';
    src: url('/_content/Chinanar.ComponentLib/fonts/RobotoSerif-SemiBold-latinext-v1.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Serif';
    src: url('/_content/Chinanar.ComponentLib/fonts/RobotoSerif-Bold-latinext-v1.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Dragonroads Color Variables */
    --dragonroads-primary: #D20158;
    --dragonroads-secondary: #00C9C7;
    --dragonroads-tertiary: #15559A;
    --dragonroads-quaternary: #E7AE4B;
    --dragonroads-black-text: #3D3D3D;
}

html, body {
    font-family: 'Roboto', sans-serif;
    scrollbar-gutter: stable;
}

h1, h2 {
    font-family: 'Roboto Serif', serif;
    font-weight: 600;
}

a, .btn-link {
    color: var(--dragonroads-tertiary);
}

.btn-primary {
    color: #fff;
    background-color: var(--dragonroads-primary);
    border-color: var(--dragonroads-primary);
}

    .btn-primary:hover {
        color: #fff;
        background-color: #a80147;
        border-color: #a80147;
    }

    .btn-primary:active, .btn-primary:focus {
        color: #fff;
        background-color: #8e0139;
        border-color: #8e0139;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
}

.content {
    padding-top: 1.1rem;
}

.home-container {
    max-width: 90%;
    margin: 0 auto;
    padding: 2rem;
}

@media (max-width: 768px) {
    .home-container {
        max-width: 100%;
        padding: 1rem;
    }
}


h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--dragonroads-secondary);
}

.invalid {
    outline: 1px solid var(--dragonroads-primary);
}

.validation-message {
    color: var(--dragonroads-primary);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Hero Section - Shared styles */
.hero-section {
    text-align: center;
}

    .hero-section h1 {
        font-size: 48px;
        margin-bottom: 1rem;
        color: var(--dragonroads-black-text);
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(35, 35, 35, .5), 0 2px 10px rgba(0, 0, 0, .3);
    }

    .hero-section .lead {
        font-size: 2rem;
        color: var(--dragonroads-black-text);
    }

/* Mobile styles */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 1.7rem;
        line-height: 40px;
        padding-bottom: 13px;
    }

    .hero-section .lead {
        font-size: 1.2rem;
    }
}

/* ActivitySelector: Custom window styling */
.activity-selector-window {
    width: 1000px !important;
}

.section-header {
    text-align: left;
    margin-bottom: 3rem;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.section-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.section-title {
    color: var(--dragonroads-black-text);
    font-family: 'Roboto Serif', serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

/* Reusable Table Styles */
.data-table {
    width: 100%;
    background-color: white;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

    .data-table thead {
        background-color: #F5F5F5;
    }

        .data-table thead th {
            padding: 1rem;
            text-align: left;
            font-weight: 500;
            font-size: 0.875rem;
            color: var(--dragonroads-black-text);
            border-bottom: 1px solid #E0E0E0;
        }

    .data-table tbody tr {
        border-bottom: 1px solid #E0E0E0;
        transition: background-color 0.2s ease;
    }

        .data-table tbody tr:last-child {
            border-bottom: none;
        }

        .data-table tbody tr:hover {
            background-color: #FAFAFA;
        }

    .data-table tbody td {
        padding: 1rem;
        font-size: 0.9375rem;
        color: var(--dragonroads-black-text);
        vertical-align: middle;
    }

.data-table-responsive {
    overflow-x: auto;
    margin: 0 auto;
    max-width: 100%;
}

/* `overflow-x: auto` also clips vertically, which cut off hover tooltips inside
   these tables (e.g. the "Estimated" commission tooltip). At widths where the
   tables fit without horizontal scrolling, drop the clipping so tooltips escape. */
@media (min-width: 1200px) {
    .data-table-responsive {
        overflow: visible;
    }
}

/* Auth Form Container - Shared styles for Login/Register pages */
.auth-form-container {
    background-color: white;
    padding: 2rem;
    border-radius: 2px;
    border: 1px solid #ddd;
}

.text-danger {
    padding-left: 1rem;
}

@media (max-width: 768px) {
    .auth-form-container {
        padding: 0;
        border: none;
    }
}

.alert-info {
    background-color: transparent;
    border-radius: 6px;
    border-color: #ddd;
    text-align: center;
}

/* ========================================
   SSR Header / Vue Header Switching
   ======================================== 
   This logic is in global CSS because:
   - SSR header: TripHeader.razor (has CSS isolation)
   - Vue header: TripHeader.vue (scoped styles)
   - Global CSS can target both without ::deep hacks
*/

/* SSR header - visible immediately on page load */
.trip-header-wrapper.ssr-header {
    display: block;
}

/* Vue header - hidden until Vue hydrates and has data */
.trip-header-wrapper.vue-header {
    display: none;
}

/* When Vue is ready, show Vue header */
.trip-header-wrapper.vue-header.vue-ready {
    display: block;
}

/* Hide SSR header when Vue sibling is ready */
.trip-header-wrapper.ssr-header:has(~ .trip-header-wrapper.vue-header.vue-ready) {
    display: none;
}

/* Hide Vue islands until Vue has compiled them, so raw {{ mustache }} templates
   never flash to users or leak into the markup. The SSR trip header above is plain
   server-rendered HTML (no v-cloak) and stays visible via its own .ssr-header rule. */
[v-cloak] {
    display: none !important;
}

/* When Vue is fully loaded (JS adds .vue-loaded class), hide SSR and show Vue */
.home-container.vue-loaded .trip-header-wrapper.ssr-header {
    display: none;
}

.home-container.vue-loaded .trip-header-wrapper.vue-header {
    display: block;
}

/* Template trips render a SINGLE server-rendered header (TemplateTripHeader.razor).
   It is the permanent header - it must NOT be hidden by the .ssr-header/.vue-header
   swap rules above (it uses neither class), and stays visible even after .vue-loaded.
   Only its inner price/gallery islands are gated by [v-cloak] until Vue compiles. */
.trip-header-wrapper.template-header,
.home-container.vue-loaded .trip-header-wrapper.template-header {
    display: block;
}

/* ========================================================================
   TRIP HEADER SHARED STRUCTURAL CONTRACT (single source of truth)
   ========================================================================
   These structural/layout rules used to be duplicated across
   TripHeader.razor.css (custom SSR shell), TripHeader.vue <style scoped>
   (custom Vue header) and a .template-header copy here (template SSR header).
   They are consolidated here once, scoped under .trip-header-wrapper - the
   class shared by all three headers (.ssr-header / .vue-header /
   .template-header) - so every header renders against ONE contract and can't
   silently drift. Values are the Vue header's (the visual source of truth).

   Scoping under .trip-header-wrapper (rather than bare class selectors) keeps
   generic names like .detail-title / .detail-icon from leaking into unrelated
   components, and keeps specificity below the variant overrides that remain in
   TripHeader.vue's scoped block (e.g. .active-trip-mode / .trip-details-non-template).

   What stays local (NOT here): the .ssr-header/.vue-header/.template-header
   visibility-swap rules above; and in TripHeader.vue's scoped block the
   stateful/variant rules (active-trip-mode, admin menus, active-trip dropdown,
   --non-template overrides, gallery-compact :deep tweaks, gallery internals). */
.trip-header-wrapper {
    padding-bottom: 1rem;
}

.trip-header-wrapper .trip-header {
    padding: 0;
    margin-bottom: 0;
}

.trip-header-wrapper .trip-header-container {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.trip-header-wrapper .trip-header-left {
    flex: 0 1 70%;
}

.trip-header-wrapper .trip-header-right {
    flex: 0 1 30%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 0.5rem;
}

.trip-header-wrapper .cost-info-box {
    background: rgba(0, 201, 199, 0.1);
    padding: 20px;
    border-radius: 6px;
    width: 100%;
    max-width: 260px;
}

.trip-header-wrapper .trip-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 0;
    color: #000;
}

/* Inline rename pencil that hugs the end of the trip title */
.trip-header-wrapper .trip-title .title-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 10px;
    padding: 2px;
    border: none;
    background: none;
    color: #9a9a9a;
    cursor: pointer;
    transition: color 0.2s ease;
}

.trip-header-wrapper .trip-title .title-edit-btn:hover {
    color: var(--dragonroads-tertiary, #15559A);
}

.trip-header-wrapper .trip-title .title-edit-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

.trip-header-wrapper .trip-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}

.trip-header-wrapper .trip-description {
    margin-bottom: 4.5rem;
    line-height: 1.5;
}

.trip-header-wrapper .trip-description .trip-description-text {
    white-space: pre-line;
}

.trip-header-wrapper .read-more-link {
    display: inline-block;
    color: #00C9C7;
    text-decoration: none;
    font-weight: 600;
    margin-top: 13px;
    cursor: pointer;
}

.trip-header-wrapper .read-more-link:hover {
    text-decoration: underline;
}

/* Template SSR header description: clamp with CSS (full text stays in the DOM for
   SEO and survives Vue re-rendering the in-DOM template). The .read-more-link just
   toggles .is-expanded; see /js/template-trip-header.js. Only the SSR header uses
   [data-readmore]; the Vue header does its own text-swap truncation. */
.trip-header-wrapper .trip-description[data-readmore] .trip-description-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    white-space: pre-line;
    overflow: hidden;
}

.trip-header-wrapper .trip-description[data-readmore].is-expanded .trip-description-text {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.trip-header-wrapper .trip-details {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 4rem;
    margin-top: 10px;
    padding-bottom: 3.5rem;
    width: 100%;
}

.trip-header-wrapper .trip-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1 1 40%;
    min-width: 300px;
}

.trip-header-wrapper .trip-highlights {
    margin-top: 0rem;
    margin-bottom: 2.25rem;
}

.trip-header-wrapper .trip-template-details-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    gap: 9rem;
    align-items: start;
    margin-top: 82px;
    margin-bottom: 50px;
}

.trip-header-wrapper .trip-template-details-columns.no-highlights {
    grid-template-columns: minmax(0, 1fr);
}

.trip-header-wrapper .trip-template-meta-column .trip-details {
    margin-top: 0;
    padding-bottom: 2rem;
}

.trip-header-wrapper .trip-highlights-title {
    margin-bottom: 2.5rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.trip-header-wrapper .trip-highlights-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trip-header-wrapper .trip-highlights-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.trip-header-wrapper .trip-highlight-check {
    color: #15559A;
    font-weight: 700;
    line-height: 1.4;
    flex-shrink: 0;
}

.trip-header-wrapper .trip-highlight-text {
    line-height: 1.5;
}

.trip-header-wrapper .trip-highlight-text p {
    margin: 0;
}

.trip-header-wrapper .trip-detail-item > .detail-title {
    display: flex;
    align-items: center;
    min-height: 32px;
    margin-bottom: 0;
}

.trip-header-wrapper .detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #666;
    flex-shrink: 0;
}

.trip-header-wrapper .detail-icon img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.trip-header-wrapper .trip-details .detail-icon img {
    filter: grayscale(100%);
}

.trip-header-wrapper .detail-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 32px;
}

.trip-header-wrapper .detail-content > .detail-title {
    display: flex;
    align-items: center;
    min-height: 0;
    margin-bottom: 0.1rem;
}

.trip-header-wrapper .detail-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.trip-header-wrapper .detail-title-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.trip-header-wrapper .detail-description {
    color: #666;
    font-size: 0.95rem;
}

.trip-header-wrapper .recommended-travel-description {
    max-width: 560px;
}

.trip-header-wrapper .trip-detail-item-distance .detail-content {
    min-height: 32px;
}

/* Start-from tooltip */
.trip-header-wrapper .start-city-tooltip-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.trip-header-wrapper .start-city-tooltip-icon {
    width: 20px;
    height: 20px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.trip-header-wrapper .start-city-tooltip-trigger:hover .start-city-tooltip-icon {
    opacity: 1;
}

.trip-header-wrapper .start-city-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    width: 270px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #1f2937;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 20;
    pointer-events: none;
}

.trip-header-wrapper .start-city-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1f2937;
}

.trip-header-wrapper .start-city-tooltip-trigger:hover .start-city-tooltip,
.trip-header-wrapper .start-city-tooltip-trigger:focus .start-city-tooltip,
.trip-header-wrapper .start-city-tooltip-trigger:focus-visible .start-city-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Distance unit picker (Vue header = dropdown menu; template SSR header = single
   toggle chip). Both share the chip look; only the Vue header renders the menu. */
.trip-header-wrapper .distance-unit-picker {
    position: relative;
    display: inline-flex;
}

.trip-header-wrapper .distance-unit-switch-btn {
    border: none;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    padding: 0;
    margin-left: 2px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.trip-header-wrapper .distance-unit-switch-btn:hover {
    opacity: 0.8;
}

.trip-header-wrapper .distance-unit-switch-btn:focus-visible {
    outline: 2px solid rgba(21, 85, 154, 0.45);
    outline-offset: 2px;
    border-radius: 2px;
}

.trip-header-wrapper .distance-unit-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 54px;
    padding: 4px;
    border: 1px solid #d8dde5;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trip-header-wrapper .distance-unit-option {
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #2f3a48;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    padding: 4px 8px;
    cursor: pointer;
}

.trip-header-wrapper .distance-unit-option:hover {
    background: #f3f6fa;
}

.trip-header-wrapper .distance-unit-option.active {
    color: var(--dragonroads-tertiary, #15559A);
    background: rgba(21, 85, 154, 0.1);
}

/* Action buttons / share */
.trip-header-wrapper .trip-header-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: #222;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.trip-header-wrapper .trip-header-action-btn:hover {
    opacity: 0.7;
}

.trip-header-wrapper .trip-header-action-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.trip-header-wrapper .trip-header-action-btn.share-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 16px;
    border: 1.5px solid var(--dragonroads-tertiary, #15559A);
    border-radius: 999px;
    background: #fff;
    color: var(--dragonroads-tertiary, #15559A);
}

.trip-header-wrapper .trip-header-action-btn.share-btn:hover {
    background: var(--dragonroads-tertiary, #15559A);
    color: #fff;
    opacity: 1;
}

.trip-header-wrapper .share-btn-text {
    display: inline;
}

/* Galleries: desktop shown / mobile hidden by default; swapped under 768px.
   The gallery's own grid styling comes from the trip-images-gallery SFC. */
.trip-header-wrapper .trip-images-desktop {
    display: block;
    margin-top: 16px;
}

.trip-header-wrapper .trip-images-mobile {
    display: none;
    margin-top: 16px;
}

.trip-header-wrapper .gallery-size-toggle {
    display: inline-flex;
    align-items: center;
    border: none;
    background: transparent;
    color: var(--dragonroads-tertiary, #15559A);
    font-size: 13px;
    font-weight: 600;
    padding: 0;
    margin: 0 0 8px 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.trip-header-wrapper .gallery-size-toggle:hover {
    opacity: 0.85;
}

@media (min-width: 769px) {
    .trip-header-wrapper .trip-detail-item-distance {
        margin-left: auto;
    }
}

@media (max-width: 768px) {
    .trip-header-wrapper {
        padding: 18px;
    }

    .trip-header-wrapper .trip-header {
        padding: 0;
    }

    .trip-header-wrapper .trip-header-container {
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
    }

    .trip-header-wrapper .trip-header-left {
        order: 0;
        margin-bottom: 1rem;
    }

    .trip-header-wrapper .trip-header-right {
        order: 3;
        width: 96%;
        justify-content: flex-end;
    }

    .trip-header-wrapper .cost-info-box {
        width: 100%;
        max-width: none;
        padding: 16px;
    }

    .trip-header-wrapper .trip-description {
        margin-bottom: 1.5rem;
    }

    .trip-header-wrapper .trip-template-details-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .trip-header-wrapper .trip-template-meta-column .trip-details {
        flex-direction: column;
        gap: 2rem;
        margin-top: 0;
    }

    .trip-header-wrapper .trip-detail-item {
        min-width: 100%;
    }

    .trip-header-wrapper .share-btn-text {
        display: none;
    }

    .trip-header-wrapper .trip-header-action-btn.share-btn {
        text-decoration: none;
        padding: 9px;
        border-radius: 50%;
    }

    .trip-header-wrapper .trip-header-action-btn.share-btn svg {
        width: 22px;
        height: 22px;
    }

    .trip-header-wrapper .trip-images-mobile {
        display: block;
        width: 100%;
    }

    .trip-header-wrapper .trip-images-desktop {
        display: none;
    }
}

/* Info Panel Styles */
.info-panel {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    border-radius: 6px;
}

.info-panel-icon {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    padding-top: 2px;
}

    .info-panel-icon svg {
        width: 24px;
        height: 24px;
    }

.info-panel-content {
    flex: 1;
}

.info-panel-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.info-panel-message {
    font-size: 15px;
    line-height: 1.5;
}

.restriction-detail {
    display: inline;
}

/* Warning Type */
.info-panel-warning {
    background-color: #fff3cd;
    border: 1px solid #aaaaaa;
}

/* Info Type */
.info-panel-info {
    background-color: #e7f3ff;
    border: 1px solid #aaaaaa;
}

/* Error Type */
.info-panel-error {
    background-color: #fdecea;
    border: 1px solid #aaaaaa;
}

/* Active-trip "Price & Payment" modal tabs (rendered in the Modal #tabs slot, which
   teleports to <body>, so these must be global rather than component-scoped). */
.price-payment-tabs {
    display: flex;
    gap: 4px;
}

.price-payment-tab {
    border: none;
    background: transparent;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.price-payment-tab:hover {
    color: #2f3a48;
}

.price-payment-tab.active {
    color: var(--dragonroads-tertiary, #15559A);
    border-bottom-color: var(--dragonroads-tertiary, #15559A);
}