/* Premium Safari-Style Pull-to-Refresh Indicator Styling */

.ptr-indicator {
    position: fixed;
    top: 45px;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50px) scale(0);
    will-change: transform, opacity;
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.15s ease, background-color 0.3s;
}

/* Glassmorphism blend on modern mobile devices */
@supports (backdrop-filter: blur(10px)) {
    .ptr-indicator {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
    }
}

/* Dark theme compatibility */
[data-theme="dark"] .ptr-indicator {
    background: #1e1e2e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

@supports (backdrop-filter: blur(10px)) {
    [data-theme="dark"] .ptr-indicator {
        background: rgba(30, 30, 46, 0.9);
    }
}

/* Rotate the SVG so progress starts from 12 o'clock */
.ptr-spinner-svg {
    width: 22px;
    height: 22px;
    transform: rotate(-90deg);
}

.ptr-circle-bg {
    stroke: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .ptr-circle-bg {
    stroke: rgba(255, 255, 255, 0.08);
}

.ptr-circle-path {
    stroke: #8b5cf6;
    transition: stroke-dashoffset 0.05s linear;
}

/* When loading, keep the spinner active and rotate infinitely */
.ptr-indicator.loading .ptr-spinner-svg {
    animation: ptr-spin 0.8s linear infinite;
}

@keyframes ptr-spin {
    0% {
        transform: rotate(-90deg);
    }
    100% {
        transform: rotate(270deg);
    }
}