/* assets/css/loading.css — full-screen loading overlay + inline button spinner */

/* ---------- Full-screen centered loader ---------- */
#phOverlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(247, 248, 250, .72);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    cursor: progress;
}
#phOverlay.on { opacity: 1; visibility: visible; }

#phOverlay .ph-ov-card {
    width: min(300px, 86vw);
    padding: 30px 24px 26px;
    text-align: center;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(5, 39, 85, .16), 0 2px 8px rgba(5, 39, 85, .06);
    transform: translateY(8px) scale(.97);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
#phOverlay.on .ph-ov-card { transform: none; }

#phOverlay .ph-ov-ring {
    position: relative;
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 4px solid rgba(5, 39, 85, .10);
    border-top-color: var(--helpa-accent, #ffa302);
    border-right-color: var(--helpa-accent, #ffa302);
    animation: ph-spin .85s cubic-bezier(.5, .1, .5, .9) infinite;
}
#phOverlay .ph-ov-ring::after {            /* soft inner dot */
    content: "";
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    background: var(--helpa-primary, #052755);
    opacity: .9;
    animation: ph-pulse 1.4s ease-in-out infinite;
}
#phOverlay .ph-ov-text {
    min-height: 1.5em;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
    color: var(--helpa-primary, #052755);
    animation: ph-fade .35s ease;
}
#phOverlay .ph-ov-sub {
    margin-top: 6px;
    font-size: .8rem;
    color: #7a8798;
}

/* ---------- Tapped button/link while loading (no text change) ---------- */
.ph-busy { pointer-events: none; opacity: .85; }

/* ---------- Inline button spinner (used by uploaders via PHLoading.start) ---------- */
.btn.ph-loading { pointer-events: none; opacity: .92; cursor: progress; white-space: nowrap; }
.btn.ph-loading .ph-spin {
    display: inline-block;
    width: 1em; height: 1em;
    margin-right: .5em;
    vertical-align: -.125em;
    border: .16em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ph-spin .7s linear infinite;
}
.btn.ph-loading .ph-spin.ph-spin-only { margin-right: 0; }
.btn.ph-loading .ph-load-text { display: inline-block; animation: ph-fade .35s ease; }

@keyframes ph-spin  { to { transform: rotate(360deg); } }
@keyframes ph-pulse { 0%, 100% { transform: scale(.78); opacity: .55; } 50% { transform: scale(1); opacity: .95; } }
@keyframes ph-fade  { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    #phOverlay .ph-ov-ring { animation-duration: 1.8s; }
    #phOverlay .ph-ov-ring::after, #phOverlay .ph-ov-text { animation: none; }
}