/* EzyShare Universal Pull-Down-to-Refresh Styles */

html, body {
    overscroll-behavior-y: contain;
}

.ezy-pull-refresh-indicator {
    position: fixed;
    top: 12px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate3d(0, -100%, 0);
    opacity: 0;
    transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.18s ease;
    will-change: transform, opacity;
}

.ezy-pull-refresh-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ezy-card-bg, #ffffff);
    color: var(--color-primary, #fa9f1e);
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.8);
    transition: transform 0.18s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.ezy-pull-refresh-icon {
    width: 20px;
    height: 20px;
    color: var(--color-primary, #fa9f1e);
}

.ezy-pull-refresh-arrow {
    display: block;
    transition: transform 0.1s linear, color 0.2s ease;
}

.ezy-pull-refresh-spinner {
    display: none;
    animation: ezyPullSpin 0.85s linear infinite;
}

.ezy-pull-spinner-track {
    stroke: rgba(250, 159, 30, 0.2);
}

.ezy-pull-spinner-bar {
    stroke: var(--color-primary, #fa9f1e);
    stroke-linecap: round;
}

/* Ready to release state */
.ezy-pull-refresh-indicator.is-ready .ezy-pull-refresh-circle {
    transform: scale(1.06);
    box-shadow:
        0 4px 16px rgba(250, 159, 30, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Refreshing / Loading state */
.ezy-pull-refresh-indicator.is-refreshing {
    opacity: 1;
    transform: translate3d(0, 52px, 0);
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ezy-pull-refresh-indicator.is-refreshing .ezy-pull-refresh-arrow {
    display: none;
}

.ezy-pull-refresh-indicator.is-refreshing .ezy-pull-refresh-spinner {
    display: block;
}

/* Dark theme integration */
body.ezy-theme-dark .ezy-pull-refresh-circle,
.ezy-theme-dark .ezy-pull-refresh-circle {
    background: var(--ezy-dark-surface, #1e2029);
    color: var(--color-primary, #fa9f1e);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

@keyframes ezyPullSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}