#searchBtn {
    position: relative !important;
    overflow: hidden !important;
}

.btn-text {
    position: relative !important;
    z-index: 10 !important;
    /* Text on top of the sand */
}

.btn-progress {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    background-color: #0509f1 !important;
    z-index: 5 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
}

/* Sinking effect upon impact */
#searchBtn.pressed {
    transform: translateY(3px);
}

.ball {
    position: absolute;
    /* If the ball slides off, play around with left and margin-top */
    left: 60%;
    /* Adjust the position for your button */
    top: 0;
    margin-top: -40px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-image:
        url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC44NSIgbnVtT2N0YXZlcz0iMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNuKSIgb3BhY2l0eT0iMC4zNSIvPjwvc3ZnPg=='),
        radial-gradient(circle at 35% 25%, #ffffb8 0%, #daeb13 35%, #9ebf00 75%, #5a7300 100%);
    background-blend-mode: multiply;
    box-shadow:
        inset -8px -8px 16px rgba(0, 0, 0, 0.3),
        inset 4px 4px 10px rgba(255, 255, 255, 0.9),
        0 0 4px 1px rgba(193, 227, 18, 0.8),
        0 15px 25px rgba(0, 0, 0, 0.25);

    transform: translateX(-50%) translateY(0) scale(1, 1);
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    will-change: transform, opacity;
    overflow: hidden;
}

/* Ball seams */
/* 1. WHITE LINE (SEAM) - making it curved using SVG */
.ball::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMTAgMTBDMTUgMzUgMzUgNTUgNjUgNDVDODAgNDAgOTAgMTUgMTAwIDAiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLWNhcD0icm91bmQiLz48cGF0aCBkPSJNMCAxMDBDMTAgODAgMzAgNjUgNTAgNzVDNzAgODUgODUgOTUgMTAwIDkwIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjUiIGZpbGw9Im5vbmUiIHN0cm9rZS1jYXA9InJvdW5kIi8+PC9zdmc+');
    background-size: 110% 110%;
    background-position: center;
    filter: blur(0.4px);
    opacity: 0.9;
    z-index: 1;
    transform: rotate(10deg);
}

/* 2. SHADOW UNDER THE LINE - creating a depth effect (so the line is "inside") */
.ball::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMTAgMTBDMTUgMzUgMzUgNTUgNjUgNDVDODAgNDAgOTAgMTUgMTAwIDAiIHN0cm9rZT0icmdiYSgwLDAsMCwwLjUpIiBzdHJva2Utd2lkdGg9IjgiIGZpbGw9Im5vbmUiIHN0cm9rZS1jYXA9InJvdW5kIi8+PHBhdGggZD0iTTAgMTAwQzEwIDgwIDMwIDY1IDUwIDc1QzcwIDg1IDg1IDk1IDEwMCA5MCIgc3Ryb2tlPSJyZ2JhKDAsMCwwLDAuNSkiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWNhcD0icm91bmQiLz48L3N2Zz4=');
    background-size: 110% 110%;
    background-position: center;
    filter: blur(1.5px);
    z-index: 0;
    transform: rotate(10deg) translate(1px, 1px);
}