/* ==========================================================
   TICK GOLD - SHARED LIVE REFRESH UI
   ========================================================== */

#refreshButton{
    --refresh-progress:0deg;

    width:auto !important;
    min-width:0 !important;
    height:auto !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:9px !important;

    padding:3px 4px !important;

    border:none !important;
    border-radius:0 !important;

    background:transparent !important;

    color:inherit !important;

    box-shadow:none !important;

    cursor:pointer !important;

    overflow:visible !important;

    transition:
        opacity .18s ease,
        transform .18s ease !important;
}


#refreshButton:hover{
    opacity:.94;
    transform:translateY(-1px) !important;
}


#refreshButton:active{
    transform:scale(.97) !important;
}


/* ==========================================================
   RING
   ========================================================== */

.live-refresh-ring{

    position:relative;

    width:48px;
    height:48px;

    flex:0 0 48px;

    display:grid;
    place-items:center;

    padding:3px;

    border-radius:50%;

    background:
        conic-gradient(
            #d9aa4d 0deg,
            #d9aa4d var(--refresh-progress),
            rgba(217,170,77,.15) var(--refresh-progress),
            rgba(217,170,77,.15) 360deg
        );

    box-shadow:
        0 6px 17px rgba(0,0,0,.11),
        0 0 18px rgba(217,170,77,.07);

    transition:
        transform .2s ease;
}


.live-refresh-ring::before{

    content:"";

    position:absolute;

    inset:3px;

    border-radius:50%;

    background:var(--card,#fff);
}


.live-refresh-number{

    position:relative;
    z-index:2;

    color:#dda943;

    font-size:12px;
    font-weight:900;

    line-height:1;
}


/* dot مثل عقربه روی محیط حلقه */

.live-refresh-hand{

    position:absolute;

    z-index:3;

    top:1px;
    left:50%;

    width:5px;
    height:5px;

    margin-left:-2.5px;

    border-radius:50%;

    background:#f4ca72;

    box-shadow:
        0 0 7px rgba(244,202,114,.65);

    transform-origin:
        2.5px 23px;

    transform:
        rotate(var(--refresh-progress));
}


/* ==========================================================
   COPY
   ========================================================== */

.live-refresh-copy{

    display:flex;
    flex-direction:column;

    align-items:flex-start;

    min-width:0;

    text-align:right;
    white-space:nowrap;
}


.live-refresh-copy strong{

    color:#dfb55b;

    font-size:10.5px;
    font-weight:850;

    line-height:1.35;
}


.live-refresh-copy small{

    margin-top:2px;

    color:var(--muted,#8996a0);

    font-size:8.5px;

    line-height:1.3;

    opacity:.82;
}


/* ==========================================================
   REFRESH ANIMATION
   ========================================================== */

#refreshButton.is-refreshing
.live-refresh-ring{

    animation:
        refreshPulse .6s ease;
}


@keyframes refreshPulse{

    0%{
        transform:scale(1);
    }

    45%{
        transform:scale(1.10);
        filter:brightness(1.15);
    }

    100%{
        transform:scale(1);
    }
}


/* ==========================================================
   DARK MODE
   ========================================================== */

html[data-theme="dark"]
.live-refresh-ring::before{

    background:#172129;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:650px){

    #refreshButton{
        gap:7px !important;
        padding:2px !important;
    }


    .live-refresh-ring{

        width:43px;
        height:43px;

        flex-basis:43px;
    }


    .live-refresh-hand{

        transform-origin:
            2.5px 20.5px;
    }


    .live-refresh-number{

        font-size:11px;
    }


    .live-refresh-copy strong{

        font-size:9.5px;
    }


    .live-refresh-copy small{

        font-size:7.8px;
    }
}


@media(max-width:390px){

    .live-refresh-copy{
        display:none;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media(prefers-reduced-motion:reduce){

    #refreshButton,
    .live-refresh-ring{
        transition:none !important;
        animation:none !important;
    }

}