{{-- Luxury jewelry loading overlay (diamond spin). --}}
<div class="pai-lux-loader" id="pai-lux-loader" hidden aria-live="polite" aria-busy="true">
    <div class="pai-lux-loader-bg" aria-hidden="true"></div>
    <div class="pai-lux-loader-card">
        <div class="pai-lux-brand">AVI THE JEWELER</div>
        <div class="pai-lux-diamond-wrap" aria-hidden="true">
            <div class="pai-lux-spark pai-lux-spark--1"></div>
            <div class="pai-lux-spark pai-lux-spark--2"></div>
            <div class="pai-lux-spark pai-lux-spark--3"></div>
            <div class="pai-lux-diamond">
                <svg viewBox="0 0 64 64" width="64" height="64" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <linearGradient id="paiLuxGem" x1="8" y1="4" x2="56" y2="60" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#ffffff"/>
                            <stop offset="0.35" stop-color="#e2e8f0"/>
                            <stop offset="0.7" stop-color="#93c5fd"/>
                            <stop offset="1" stop-color="#d4af37"/>
                        </linearGradient>
                        <linearGradient id="paiLuxFacet" x1="32" y1="8" x2="32" y2="56" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#fff" stop-opacity="0.95"/>
                            <stop offset="1" stop-color="#94a3b8" stop-opacity="0.5"/>
                        </linearGradient>
                    </defs>
                    <path d="M32 4 L56 22 L32 60 L8 22 Z" fill="url(#paiLuxGem)" opacity="0.95"/>
                    <path d="M32 4 L44 22 L32 60 L20 22 Z" fill="url(#paiLuxFacet)" opacity="0.55"/>
                    <path d="M8 22 H56 L44 22 L32 4 L20 22 Z" fill="#fff" opacity="0.35"/>
                    <path d="M20 22 L32 4 L44 22" stroke="rgba(255,255,255,0.7)" stroke-width="1"/>
                    <path d="M8 22 L32 60 L56 22" stroke="rgba(148,163,184,0.55)" stroke-width="1"/>
                    <path d="M32 4 V60" stroke="rgba(255,255,255,0.35)" stroke-width="0.8"/>
                </svg>
            </div>
            <div class="pai-lux-ring"></div>
        </div>
        <h2 class="pai-lux-title" id="pai-lux-title">Creating your piece…</h2>
        <p class="pai-lux-sub" id="pai-lux-sub">Please keep this tab open</p>
        <div class="pai-lux-progress" aria-hidden="true"><span></span></div>
    </div>
</div>

<style>
.pai-lux-loader {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
}
.pai-lux-loader[hidden] { display: none !important; }
.pai-lux-loader-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(37, 99, 235, 0.18), transparent 55%),
        radial-gradient(ellipse 50% 40% at 70% 70%, rgba(212, 175, 55, 0.12), transparent 50%),
        rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pai-lux-loader-card {
    position: relative; z-index: 1;
    width: min(380px, 100%);
    text-align: center;
    padding: 2.25rem 1.75rem 1.85rem;
    border-radius: 18px;
    background: linear-gradient(160deg, #1e293b 0%, #0f172a 55%, #0b1220 100%);
    border: 1px solid rgba(212, 175, 55, 0.28);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 25px 60px rgba(0,0,0,0.45),
        0 0 40px rgba(37, 99, 235, 0.12);
    animation: pai-lux-card-in 0.45s ease both;
}
@keyframes pai-lux-card-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: none; }
}
.pai-lux-brand {
    font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: #d4af37; font-weight: 700; margin-bottom: 1.35rem;
}
.pai-lux-diamond-wrap {
    position: relative; width: 88px; height: 88px; margin: 0 auto 1.35rem;
}
.pai-lux-diamond {
    position: absolute; inset: 12px;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 0 12px rgba(147, 197, 253, 0.45)) drop-shadow(0 0 18px rgba(212, 175, 55, 0.25));
    animation: pai-lux-spin 2.6s linear infinite;
}
.pai-lux-diamond svg { display: block; width: 64px; height: 64px; }
@keyframes pai-lux-spin {
    from { transform: rotateY(0deg) rotateZ(-8deg); }
    to { transform: rotateY(360deg) rotateZ(-8deg); }
}
.pai-lux-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.15);
    animation: pai-lux-pulse 2s ease-in-out infinite;
}
@keyframes pai-lux-pulse {
    0%, 100% { transform: scale(0.92); opacity: 0.55; }
    50% { transform: scale(1.05); opacity: 1; }
}
.pai-lux-spark {
    position: absolute; width: 4px; height: 4px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 8px #fff, 0 0 14px #d4af37;
}
.pai-lux-spark--1 { top: 8%; left: 70%; animation: pai-lux-twinkle 1.4s ease-in-out infinite; }
.pai-lux-spark--2 { top: 62%; left: 10%; animation: pai-lux-twinkle 1.8s ease-in-out 0.3s infinite; }
.pai-lux-spark--3 { top: 20%; left: 18%; animation: pai-lux-twinkle 1.2s ease-in-out 0.6s infinite; }
@keyframes pai-lux-twinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.6); }
    50% { opacity: 1; transform: scale(1.2); }
}
.pai-lux-title {
    margin: 0 0 0.4rem; font-size: 1.15rem; font-weight: 700;
    color: #f8fafc; letter-spacing: -0.02em;
}
.pai-lux-sub {
    margin: 0 0 1.25rem; font-size: 0.88rem; color: #94a3b8; line-height: 1.4;
}
.pai-lux-progress {
    height: 2px; border-radius: 999px; background: rgba(148, 163, 184, 0.2); overflow: hidden;
}
.pai-lux-progress span {
    display: block; height: 100%; width: 40%;
    background: linear-gradient(90deg, transparent, #d4af37, #60a5fa, transparent);
    animation: pai-lux-bar 1.4s ease-in-out infinite;
}
@keyframes pai-lux-bar {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}
body.pai-lux-loading { overflow: hidden !important; }
</style>

<script>
window.paiShowLuxuryLoader = function (title, sub) {
    var el = document.getElementById('pai-lux-loader');
    if (!el) return;
    var t = document.getElementById('pai-lux-title');
    var s = document.getElementById('pai-lux-sub');
    if (t) t.textContent = title || 'Starting…';
    if (s) s.textContent = sub || 'Work continues in the background — you can keep working.';
    el.hidden = false;
    document.body.classList.add('pai-lux-loading');
};
window.paiHideLuxuryLoader = function () {
    var el = document.getElementById('pai-lux-loader');
    if (el) el.hidden = true;
    document.body.classList.remove('pai-lux-loading');
};
</script>