/**
 * Orbit Widget Styles
 */

/* Container */
.orbit-container {
    position: relative;
    margin: 0 auto;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orbit-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Center Element - Always visible first, no background flash */
.orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Ensure center is visible immediately - highest priority */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hide background color when image is present - prevents square block flash */
.orbit-center:has(.orbit-center-image) {
    background-color: transparent !important;
}

.orbit-center-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensure image is always visible */
    opacity: 1 !important;
}

.orbit-center-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2em;
    color: #fff;
}

.orbit-center-icon i,
.orbit-center-icon svg {
    font-size: inherit;
}

/* Animations Wrapper for rings and icons only */
.orbit-animations-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    /* Start hidden, will animate in after center image */
    opacity: 0;
    animation: orbitFadeIn 0.5s ease-out 0.3s forwards;
}

.orbit-animations-wrapper.orbit-zoom-entrance {
    /* Delay the zoom animation to let center image show first */
    animation: orbitZoomIn 1s ease-out 0.2s forwards;
    opacity: 0;
}

/* Rings */
.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* Orbiting Icons */
.orbit-icon-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 5;
}

.orbit-icon-inner {
    position: relative;
    width: 0;
    height: 0;
}

.orbit-icon {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    transform: translate(-50%, -50%);
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.orbit-icon:hover {
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.orbit-icon i,
.orbit-icon svg {
    font-size: inherit;
}

/* Fade in animation for icons/rings (used when zoom is disabled) */
@keyframes orbitFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Zoom Entrance Animation - delayed to show center image first */
@keyframes orbitZoomIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .orbit-container {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .orbit-icon {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    .orbit-icon:hover {
        transform: translate(-50%, -50%) scale(1.15);
    }
}

@media (max-width: 480px) {
    /* Mobile specific styles */
}

/* Loading State */
.orbit-container.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Accessibility */
.orbit-icon:focus {
    outline: 2px solid #4CAF50;
    outline-offset: 2px;
}

/* Print Styles */
@media print {

    .orbit-icon-wrapper,
    .orbit-ring {
        animation: none !important;
    }
}