/**
 * ExploreXR Loading Addon Styles
 *
 * Base styles for the loading overlay. Positioning is handled via
 * inline styles generated by loading-handler.js so that it always
 * matches the per-model settings selected in the admin card.
 */

/* Overlay (inline styles set position, size, bg-color, backdrop-filter) */
.explorexr-premium-loading-overlay {
    transition: opacity 0.3s ease;
}

/* Loading text base */
.explorexr-premium-loading-text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.4;
}

/* Loading bar base */
.explorexr-premium-loading-bar {
    box-sizing: border-box;
}

.explorexr-premium-loading-bar-fill {
    box-sizing: border-box;
}

/* Percentage base */
.explorexr-premium-loading-percentage {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1;
}

/* Spinner (used in error/retry state if needed) */
.explorexr-premium-loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: currentColor;
    animation: explorexr-loading-spin 1s ease-in-out infinite;
    margin-left: 10px;
}

@keyframes explorexr-loading-spin {
    to { transform: rotate(360deg); }
}

/* Hide loading when model is loaded (safety rule) */
.explorexr-premium-model-loaded .explorexr-premium-loading-overlay {
    display: none;
}

/* Accessibility: hidden overlay */
.explorexr-premium-loading-overlay[aria-hidden="true"] {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .explorexr-premium-loading-text {
        font-size: 14px !important;
    }

    .explorexr-premium-loading-percentage {
        font-size: 18px !important;
    }
}

@media (max-width: 480px) {
    .explorexr-premium-loading-text {
        font-size: 12px !important;
    }

    .explorexr-premium-loading-percentage {
        font-size: 16px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .explorexr-premium-loading-overlay {
        transition: none;
    }

    .explorexr-premium-loading-bar-fill {
        transition: none;
    }

    .explorexr-premium-loading-spinner {
        animation: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .explorexr-premium-loading-overlay {
        background-color: black !important;
        color: white !important;
    }

    .explorexr-premium-loading-bar {
        background-color: rgba(255, 255, 255, 0.3) !important;
    }

    .explorexr-premium-loading-bar-fill {
        background-color: white !important;
    }
}