/* Loader — animações no <g> (anel gira no centro, sem “sair” do SVG) */
:root {
    --pv-loading-safe-top: max(env(safe-area-inset-top, 0px), 12px);
    --pv-loading-safe-right: max(env(safe-area-inset-right, 0px), 0px);
    --pv-loading-safe-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
    --pv-loading-safe-left: max(env(safe-area-inset-left, 0px), 0px);
    --pv-loader-cx: 110px;
    --pv-loader-cy: 110px;
    --pv-loading-overlay-bg: color-mix(in srgb, var(--tenant-bg, var(--pv-bg, #000000)) 92%, transparent);
}

@keyframes pv-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pv-loader-pulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes pv-loader-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Roda o grupo do anel (não o <circle> — evita orbitar no mobile) */
#pv-boot-loader svg g.ring,
#loading-overlay svg g.ring {
    animation: pv-loader-spin 2.2s linear infinite;
    transform-origin: var(--pv-loader-cx) var(--pv-loader-cy);
}

#pv-boot-loader svg g.shine,
#loading-overlay svg g.shine {
    animation: pv-loader-pulse 1.4s ease-in-out infinite;
    transform-origin: var(--pv-loader-cx) var(--pv-loader-cy);
}

#pv-boot-loader svg g.bag,
#loading-overlay svg g.bag {
    animation: pv-loader-float 1.8s ease-in-out infinite;
    transform-origin: var(--pv-loader-cx) var(--pv-loader-cy);
}

.pv-loading-spinner {
    width: min(200px, 52vw);
    height: min(200px, 52vw);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: visible;
}

.pv-loading-spinner > svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.pv-loading-overlay__label,
#pv-boot-loader .pv-boot-loader__label {
    color: #f5d77b;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

#pv-boot-loader,
#loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    box-sizing: border-box;
    padding: var(--pv-loading-safe-top) var(--pv-loading-safe-right) var(--pv-loading-safe-bottom) var(--pv-loading-safe-left);
    background: var(--pv-loading-overlay-bg);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    pointer-events: none;
}

#pv-boot-loader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#pv-boot-loader.pv-loading--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.1s ease, visibility 0.1s ease;
}

#pv-boot-loader:not(.pv-loading--hidden) {
    transition: none;
}

#loading-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#loading-overlay.pv-loading--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
}

#loading-overlay:not(.pv-loading--visible) {
    transition: opacity 0.1s ease, visibility 0.1s ease;
}

body.loja-body #pv-boot-loader,
body.loja-body #loading-overlay.pv-loading--visible {
    --pv-loading-overlay-bg: color-mix(in srgb, var(--tenant-bg, #ece8e0) 94%, transparent);
}

body.loja-body #pv-boot-loader .pv-boot-loader__label,
body.loja-body .pv-loading-overlay__label {
    color: #6b5318;
}

body.loja-body .pv-loading-spinner > svg {
    filter: drop-shadow(0 4px 18px rgba(201, 162, 39, 0.35));
}

body.loja-body #loading-overlay svg g.ring,
body.loja-body #pv-boot-loader svg g.ring {
    animation-duration: 1.85s;
}

@media (max-width: 768px) {
    .pv-loading-spinner {
        width: min(160px, 44vw);
        height: min(160px, 44vw);
    }

    .pv-loading-overlay__label,
    #pv-boot-loader .pv-boot-loader__label {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #pv-boot-loader svg g.ring,
    #loading-overlay svg g.ring {
        animation-duration: 2.8s;
    }
}