/* ==========================================================================
   Nebula Icon Block (Unified)
   ========================================================================== */

.nebula-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* ============================================================
   SIZING
   ============================================================ */
.nebula-icon-wrapper.is-size-small { width: 50px; height: 50px; }
.nebula-icon-wrapper.is-size-medium { width: 100px; height: 100px; }
.nebula-icon-wrapper.is-size-large { width: 200px; height: 200px; }

/* ============================================================
   THEMING
   ============================================================ */

.nebula-icon-wrapper.is-theme-light {
    --icon-base: #313A4C;    
    --icon-accent: #0D5C22;  
}

.nebula-icon-wrapper.is-theme-dark {
    --icon-base: #FFFFFF;    
    --icon-accent: #BAD532;  
}

/* ============================================================
   STATIC ICON STYLES
   ============================================================ */
.nebula-static-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.nebula-static-icon svg path,
.nebula-static-icon svg rect,
.nebula-static-icon svg circle,
.nebula-static-icon svg line,
.nebula-static-icon svg polyline {
    transition: stroke 0.3s ease, fill 0.3s ease;
}

/* ============================================================
   ANIMATED LOTTIE STYLES
   ============================================================ */
.nebula-animated-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.nebula-animated-icon:hover {
    transform: scale(1.05);
}

.nebula-lottie-container {
    width: 100%;
    height: 100%;
}

/* * GLOBAL LOTTIE FIX: 
 * Locked to 1.6 to perfectly sync with the Javascript stroke math 
 */
.nebula-lottie-container svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
    transform: scale(1.6) !important; 
    transform-origin: center center;
}