.ship-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: rgba(5, 25, 48, .76);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

    .ship-loader-overlay.is-visible {
        display: flex;
    }

.ship-loader-sky {
    position: relative;
    overflow: hidden;
    height: 135px;
    border-radius: 17px;
    background: linear-gradient(180deg, #b9eaff, #e6f8ff 65%, #b6edff);
}

.ship-loader-boat {
    position: absolute;
    bottom: 23px;
    left: -38px;
    z-index: 5;
    font-size: 27px;
    line-height: 1;
    white-space: nowrap;
    animation: shipLoaderCruise 4s linear infinite;
}

@keyframes shipLoaderCruise {
    0% {
        left: -38px;
        transform: translateY(0) rotate(-2deg);
    }

    25% {
        transform: translateY(-3px) rotate(2deg);
    }

    50% {
        transform: translateY(0) rotate(-1deg);
    }

    75% {
        transform: translateY(-3px) rotate(2deg);
    }

    100% {
        left: calc(100% + 38px);
        transform: translateY(0) rotate(-2deg);
    }
}

.ship-loader-water {
    position: absolute;
    right: -10%;
    bottom: 0;
    left: -10%;
    height: 47px;
    background: linear-gradient(180deg, #35c5e8, #087db7);
    border-radius: 50% 50% 0 0 / 16% 16% 0 0;
}

.ship-loader-box {
    width: 100%;
    max-width: 365px;
    padding: 27px 23px;
    text-align: center;
    background: linear-gradient(160deg, #fff, #eff9ff);
    border-radius: 23px;
    box-shadow: 0 25px 75px rgba(0, 0, 0, .28);
}

.ship-loader-brand {
    margin-bottom: 20px;
    color: #163653;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.ship-loader-text {
    margin-bottom: 9px;
    color: #123454;
    font-size: 21px;
    font-weight: 800;
}

.ship-loader-highlight {
    color: #0089b9;
}

.ship-loader-subtext {
    margin-bottom: 18px;
    color: #64798c;
    font-size: 12px;
    line-height: 1.6;
}

.ship-loader-status {
    margin-bottom: 11px;
    color: #34546d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.ship-loader-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #12b886;
    animation: shipLoaderPulse 1.2s infinite;
}

.ship-loader-progress {
    height: 5px;
    overflow: hidden;
    background: #dcecf5;
    border-radius: 10px;
}

    .ship-loader-progress span {
        display: block;
        width: 35%;
        height: 100%;
        background: linear-gradient(90deg, #00b4db, #087db7, #38d9c8);
        animation: shipLoaderProgress 1.5s ease-in-out infinite;
    }

.ship-loader-footer {
    margin-top: 16px;
    color: #8a9cac;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

@keyframes shipLoaderPulse {
    50% {
        opacity: .4;
    }
}

@keyframes shipLoaderProgress {
    from {
        transform: translateX(-110%);
    }

    to {
        transform: translateX(300%);
    }
}

@media (max-width: 400px) {
    .ship-loader-box {
        max-width: 330px;
        padding: 23px 18px;
    }

    .ship-loader-text {
        font-size: 19px;
    }
}