/* Estilos para o widget Spline no frontend */
.spline-container {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.spline-container spline-viewer {
    width: 100%;
    height: 100%;
    display: block;
}

/* Responsividade */
@media (max-width: 768px) {
    .spline-container {
        height: 50vh;
        min-height: 300px;
    }
}

@media (max-width: 480px) {
    .spline-container {
        height: 40vh;
        min-height: 250px;
    }
}

/* Loading state */
.spline-container.loading {
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spline-container.loading::before {
    content: "Loading 3D Scene...";
    color: #666;
    font-size: 16px;
}

/* Error state */
.spline-container.error {
    background: #ffebee;
    border: 1px solid #f44336;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d32f2f;
}

.spline-container.error::before {
    content: "Failed to load 3D scene";
    font-size: 16px;
}