.vvt-trip-skeletons {
    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.tl-list + .vvt-trip-skeletons {
    margin-top: 16px;
}

.vvt-skeleton-card,
.vvt-skeleton-card * {
    box-sizing: border-box;
}

.vvt-skeleton-card {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    width: 100%;
    min-width: 0;
    min-height: 224px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    pointer-events: none;
}

.vvt-skeleton-card::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(100deg, transparent 25%, rgb(255 255 255 / 55%) 50%, transparent 75%);
    transform: translateX(-100%);
    animation: vvt-skeleton-shimmer 1.8s ease-in-out infinite;
    pointer-events: none;
}

.vvt-skeleton-block {
    display: block;
    min-width: 0;
    max-width: 100%;
    height: 14px;
    border-radius: 4px;
    background: #edf0f3;
}

.vvt-skeleton-image {
    width: 140px;
    height: 140px;
    border-radius: 8px;
}

.vvt-skeleton-info {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.vvt-skeleton-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 100px);
    align-items: center;
    gap: 16px;
}

.vvt-skeleton-route {
    width: 90%;
    height: 20px;
}

.vvt-skeleton-price {
    height: 24px;
}

.vvt-skeleton-name {
    width: 58%;
    height: 18px;
}

.vvt-skeleton-tags {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 76px));
    gap: 8px;
}

.vvt-skeleton-tags .vvt-skeleton-block {
    height: 22px;
}

.vvt-skeleton-schedule {
    width: 80%;
}

.vvt-skeleton-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 104px));
    justify-content: end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #edf0f3;
}

.vvt-skeleton-actions .vvt-skeleton-block {
    height: 32px;
    border-radius: 6px;
}

.vvt-results-pending,
.vvt-loading-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.trip-layout-wrapper:has(#vxrRoute[aria-busy="true"]) #vvt-trip-filters [data-filter-options]:empty::after {
    content: "";
    display: block;
    width: 100%;
    height: 90px;
    background:
        linear-gradient(#edf0f3, #edf0f3) left 8px / 78% 14px no-repeat,
        linear-gradient(#edf0f3, #edf0f3) left 38px / 64% 14px no-repeat,
        linear-gradient(#edf0f3, #edf0f3) left 68px / 72% 14px no-repeat;
    pointer-events: none;
}

@keyframes vvt-skeleton-shimmer {
    to {
        transform: translateX(100%);
    }
}

@media (max-width: 600px) {
    .vvt-skeleton-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 16px;
    }

    .vvt-skeleton-image {
        justify-self: center;
        width: 100px;
        height: 100px;
    }

    .vvt-skeleton-top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 80px);
        gap: 12px;
    }

    .vvt-skeleton-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .vvt-skeleton-card::after {
        animation: none;
    }
}