/* Common Components */
.bg-pattern {
    background-image: linear-gradient(45deg, rgba(49, 61, 84, 0.05) 25%, transparent 25%),
                      linear-gradient(-45deg, rgba(49, 61, 84, 0.05) 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, rgba(49, 61, 84, 0.05) 75%),
                      linear-gradient(-45deg, transparent 75%, rgba(49, 61, 84, 0.05) 75%);
    background-size: 20px 20px;
}

/* Product Viewer */
.model-viewer-container {
    position: relative;
    background-color: white;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.model-controls {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
}

/* Loading Spinner */
.loading-spinner {
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 50;
    display: none;
}

.modal.active {
    display: flex;
}

/* Responsive Images */
.img-container {
    position: relative;
    overflow: hidden;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.img-container:hover img {
    transform: scale(1.05);
}