:root {
            --sea-deep: #00509d;
            --sea-mid: #0077b6;
            --sea-light: #ade8f4;
            --ship-color: #212529;
        }

      #vessel-loader-container {
    position: fixed;
    inset: 0;
    background: #ffffff;
    /* Change: Default hidden taaki flicker na ho */
    display: none; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    overflow: hidden;
}

        /* The Ship Container */
        .ship-box {
            position: relative;
            width: 200px;
            z-index: 10;
            animation: ship-pitch 4s ease-in-out infinite;
        }

        @keyframes ship-pitch {
            0%, 100% { transform: rotate(-2deg) translateY(0); }
            50% { transform: rotate(3deg) translateY(-10px); }
        }

        /* Ship SVG Styling */
        .vessel-svg {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Waves System */
        .waves-container {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 150px;
            min-height: 100px;
        }

        .parallax-waves > use {
            animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
        }
        .parallax-waves > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; fill: rgba(0, 119, 182, 0.7); }
        .parallax-waves > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; fill: rgba(0, 150, 199, 0.5); }
        .parallax-waves > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; fill: rgba(72, 202, 228, 0.3); }
        .parallax-waves > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; fill: var(--sea-deep); }

        @keyframes move-forever {
            0% { transform: translate3d(-90px, 0, 0); }
            100% { transform: translate3d(85px, 0, 0); }
        }

        /* Status Styling */
        .loading-info {
            position: absolute;
            top: 60%;
            text-align: center;
            font-family: 'Trebuchet MS', sans-serif;
        }

        .shipment-id {
            color: var(--sea-deep);
            font-weight: bold;
            font-size: 1.2rem;
            letter-spacing: 2px;
            margin-bottom: 5px;
        }

        .progress-bar-bg {
            width: 200px;
            height: 4px;
            background: #eee;
            border-radius: 10px;
            overflow: hidden;
            margin: 10px auto;
        }

        .progress-fill {
            height: 100%;
            width: 0%;
            background: var(--sea-deep);
            transition: width 0.3s ease;
        }

        /* Fade out on finish */
        .loader-finish {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.8s ease;
        }