/* Mini Refresh Button with SVG Icon */
    .mini-refresh {
        background: var(--bg-primary);
        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.20);
        padding: 0px;
        color: #000;
        border: 0;
        border-radius: 4px;
        width: 20px;
        height: 20px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .mini-refresh .icon {
        fill: #323232;
        transition: all 0.3s ease;
    }

    .mini-refresh:hover {
        background: #def4d7;
        transform: scale(1.05);
    }

    .mini-refresh:hover .icon {
        fill: #5ac938;
    }

    .mini-refresh:active {
        transform: scale(0.95);
    }

    .mini-refresh:active .icon {
        fill: #5ac938;
    }

    button.mini-refresh {
        border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
    }

    button.mini-refresh:disabled {
        opacity: 0.65;
        cursor: wait;
    }

    /* Loading State */
    .mini-refresh.loading {
        background: var(--bg-primary);
        cursor: wait;
    }

    .mini-refresh.loading .icon {
        fill: #5ac938;
        animation: rotating 1.2s linear infinite;
    }

    /* Arrow Animation Container */
    .refresh-arrow {
        position: absolute;
        right: -15px;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
        transition: all 0.3s ease;
        font-size: 12px;
    }

    /* Show arrow on hover */
    .mini-refresh:hover .refresh-arrow {
        right: -20px;
        opacity: 1;
        animation: arrowBounce 1s ease-in-out infinite;
    }

    /* Arrow bounce animation */
    @keyframes arrowBounce {
        0%, 100% {
            transform: translateY(-50%) translateX(0);
        }
        50% {
            transform: translateY(-50%) translateX(-3px);
        }
    }

    /* Rotating animation for loading */
    @keyframes rotating {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    /* Pulse animation for completion */
    @keyframes pulseGlow {
        0% {
            box-shadow: 0 0 0 0 rgba(90, 201, 56, 0.4);
        }
        70% {
            box-shadow: 0 0 0 6px rgba(90, 201, 56, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(90, 201, 56, 0);
        }
    }

    .mini-refresh.pulse {
        animation: pulseGlow 2s infinite;
    }

    /* Dark theme support */
    [data-theme="dark"] .mini-refresh {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    [data-theme="dark"] .mini-refresh:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    [data-theme="dark"] .mini-refresh .icon {
        fill: #ffffff;
    }

    /* Remove the old refresh button from bottom navbar */
    .ethiomark-bottom-navbar .nav-action-btn.refresh {
        display: none;
    }




    
    .main-loader {
            position: absolute;
            top: calc(50% - 122px);
            left: calc(50% - 32px);
            width: 84px;
            height: 84px;
            border-radius: 50%;
            perspective: 900px;
            }

            .inner {
            position: absolute;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            border-radius: 50%;  
            }

            .inner.one {
            left: 0%;
            top: 0%;
            animation: rotate-one 1s linear infinite;
            border-bottom: 7px solid green;
            }

            .inner.two {
            right: 0%;
            top: 0%;
            animation: rotate-two 1s linear infinite;
            border-right: 7px solid yellow;
            }

            .inner.three {
            right: 0%;
            bottom: 0%;
            animation: rotate-three 1s linear infinite;
            border-top: 7px solid red;
            }

            @keyframes rotate-one {
            0% {
                transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
            }
            100% {
                transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
            }
            }

            @keyframes rotate-two {
            0% {
                transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
            }
            100% {
                transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
            }
            }

            @keyframes rotate-three {
            0% {
                transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
            }
            100% {
                transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
            }
            }


            .refresh-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: var(--overlay-bg);
                z-index: 9998;
                display: none;
            }

            .refreshing .refresh-overlay {
                display: block;
            }
            .loading-text {
                position: absolute;
                top: calc(50% + 0px); /* places text below the spinner */
                left: 50%;
                transform: translateX(-50%);
                color: var(--secondary-900);
                font-size: 18px;
                font-weight: 900;
                text-align: center;
            }