/* loader.css - styles for the overlay loader */
#wfl-overlay{
    position:fixed;
    inset:0;
    background: rgba(6,6,10,0.6);
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: opacity .35s ease, visibility .35s ease;
    opacity:1;
    visibility:visible;
}
#wfl-overlay.wfl-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

/* container */
.wfl-loader{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    text-align:center;
}

/* circular frame with progress ring */
.wfl-circle{
    position:relative;
    display:inline-block;
    border-radius:50%;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
}

.wfl-circle .wfl-avatar{
    display:block;
    border-radius:50%;
    overflow:hidden;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* progress ring using conic gradient */
.wfl-circle::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    padding:6px; /* ring thickness */
    background: conic-gradient(#00f6e6 0deg, #00f6e6 90deg, rgba(255,255,255,0.06) 90deg 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), black calc(100% - 11px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 12px), black calc(100% - 11px));
    animation: wfl-rotate 1.6s linear infinite;
    pointer-events:none;
}

/* label */
.wfl-label{
    color:#00f6e6;
    font-weight:600;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* rotation */
@keyframes wfl-rotate{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

/* hide on small screens adjustments */
@media (max-width:480px){
    .wfl-label{ font-size:14px; }
}