/*
 * Custom floating scrollbar (desktop) — same look and behaviour as pytransvietcomvn
 * (web_home/static/web_home/styles/css/header.css): the native scrollbar is hidden, a slim track
 * floats on the right with a teal (#147e93) thumb and an airplane icon (recoloured to match) that follows it.
 * Markup lives in web_home/base.html (#tvScrollbar); behaviour in js/tv_scrollbar.js.
 */

/* Hide the native page scrollbar (the floating one replaces it). Inner scroll areas keep theirs. */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Slim, translucent track; widens while hovered / scrolling / dragging. */
.tv-scrollbar {
    position: fixed;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 45vh;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    z-index: 9000;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: width 0.2s ease, right 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.tv-scrollbar:hover, .tv-scrollbar.dragging, .tv-scrollbar.scrolling {
    width: 12px;
    right: 1rem;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Thumb in the TransViet Cargo teal (#147e93), darker while hovered / dragged. */
.tv-scrollbar-thumb {
    position: absolute;
    left: 0;
    right: 0;
    background: #147e93;
    border-radius: 999px;
    min-height: 2rem;
    transition: background 0.2s;
}
.tv-scrollbar-thumb:hover, .tv-scrollbar.dragging .tv-scrollbar-thumb { background: #0e5d6d; }

/* Airplane icon centred on the thumb (JS sets top = thumb top + half thumb height). */
.tv-scrollbar-plane {
    position: absolute;
    right: calc(100% + 0.5rem);
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    transform: translateY(-50%);
    transition: right 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.tv-scrollbar.dragging .tv-scrollbar-plane { cursor: grabbing; }
/* Grow the icon only on hover / drag — not on .scrolling, which toggles every 600 ms and would flicker. */
.tv-scrollbar:hover .tv-scrollbar-plane,
.tv-scrollbar.dragging .tv-scrollbar-plane {
    width: 3.5rem;
    height: 3.5rem;
    right: calc(100% + 0.75rem);
}
@media (max-width: 991.98px) {
    .tv-scrollbar-plane { display: none !important; }
}