/* Admin data loader: overlay over a list while it reloads, a thin progress bar at the top of the page,
   and a spinner inside a submit button while a form is saving. Used by AdminLoader in theme-admin/js/ajax-form.js. */

:root { --ld-a: #4f46e5; --ld-b: #06b6d4; --ld-c: #22c55e; }

/* ---- overlay over a list -------------------------------------------------------------------- */
.ld-host { position: relative; }
.ld-overlay {
    position: absolute; inset: 0; z-index: 25; display: flex; justify-content: center; align-items: flex-start;
    padding-top: min(120px, 18vh); background: rgba(255, 255, 255, .62); backdrop-filter: blur(2px);
    border-radius: inherit; opacity: 0; animation: ld-fade .18s ease forwards;
}
.ld-overlay.ld-out { animation: ld-fade-out .18s ease forwards; }
.ld-card {
    position: sticky; top: 90px; display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 22px 30px 18px; background: #fff; border-radius: 18px;
    box-shadow: 0 18px 45px rgba(30, 34, 60, .14), 0 2px 6px rgba(30, 34, 60, .06);
}
.ld-ring { position: relative; width: 54px; height: 54px; }
.ld-ring::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 15%, var(--ld-a), var(--ld-b), var(--ld-c), transparent 85%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
    animation: ld-spin .9s linear infinite;
}
.ld-ring::after {
    content: ''; position: absolute; inset: 17px; border-radius: 50%;
    background: linear-gradient(135deg, var(--ld-a), var(--ld-b)); animation: ld-pulse 1.1s ease-in-out infinite;
}
.ld-text { font-size: 13px; font-weight: 600; color: #374151; letter-spacing: .2px; display: flex; align-items: center; gap: 6px; }
.ld-dots { display: inline-flex; gap: 3px; }
.ld-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ld-a); animation: ld-bounce 1s infinite ease-in-out; }
.ld-dots i:nth-child(2) { animation-delay: .15s; background: var(--ld-b); }
.ld-dots i:nth-child(3) { animation-delay: .3s; background: var(--ld-c); }

/* ---- top progress bar --------------------------------------------------------------------------- */
.ld-topbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2000; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s; }
.ld-topbar.on { opacity: 1; }
.ld-topbar::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
    background: linear-gradient(90deg, transparent, var(--ld-a), var(--ld-b), var(--ld-c), transparent);
    animation: ld-slide 1.1s ease-in-out infinite;
}

/* ---- submit button while saving ----------------------------------------------------------------- */
.ld-btn { position: relative; color: transparent !important; pointer-events: none; }
.ld-btn > * { visibility: hidden; }
.ld-btn::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: ld-spin .7s linear infinite;
}
.btn-light.ld-btn::after, .btn-outline-secondary.ld-btn::after, .btn-outline-danger.ld-btn::after { border-color: rgba(79, 70, 229, .25); border-top-color: var(--ld-a); }

@keyframes ld-spin { to { transform: rotate(360deg); } }
@keyframes ld-pulse { 0%, 100% { transform: scale(.72); opacity: .75; } 50% { transform: scale(1); opacity: 1; } }
@keyframes ld-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes ld-slide { 0% { left: -40%; } 100% { left: 100%; } }
@keyframes ld-fade { to { opacity: 1; } }
@keyframes ld-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .ld-ring::before, .ld-ring::after, .ld-dots i, .ld-topbar::before, .ld-btn::after { animation-duration: 2.5s; }
}