/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.loading-overlay.active {
    display: flex;
}

.loading-content {
    text-align: center;
    color: white;
}

.loading-text {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
}

/* New Loader Animation */
.loader {
    height: 100px;
    aspect-ratio: 1;
    position: relative;
    --g: /calc(30.259% + 5.027px) calc(30.259% + 5.027px) radial-gradient(#0000 calc(70% - 8px), #fff calc(71% - 8px) 70%, #0000 71%) no-repeat;
    mask: radial-gradient(100% 100%, #0000 calc((30.259% + 5.027px)/0.964 - 8.306px), #fff calc((30.259% + 5.027px)/0.964 - 8.306px + 1px)) intersect,
          100% 50% var(--g),
          81.174% 89.092% var(--g),
          38.874% 98.746% var(--g),
          4.952% 71.694% var(--g),
          4.952% 28.306% var(--g),
          38.874% 1.254% var(--g),
          81.174% 10.908% var(--g);
    filter: blur(12px);
}

.loader:before {
    content: "";
    position: absolute;
    inset: 0;
    background: conic-gradient(#0000 35%, #FA6900, #0000 65%);
    animation: l9 2s linear infinite;
}

@keyframes l9 {
    to { rotate: 1turn; }
}