@layer components {
    .configurator-container {
        @apply flex min-h-screen bg-cream;
    }

    .configurator-sidebar {
        @apply w-[300px] bg-white p-5 shadow-md flex flex-col justify-between;
    }

    .steps-container {
        @apply mb-8;
    }

    .step {
        @apply flex items-center p-4 mb-3 rounded-lg cursor-pointer transition-all duration-300 opacity-70;
    }

    .step.active {
        @apply bg-wood-light text-wood-dark opacity-100;
    }

    .step-number {
        @apply w-8 h-8 bg-wood-dark text-white rounded-full flex items-center justify-center mr-4;
    }

    .configurator-main {
        @apply flex-1 p-5 overflow-y-auto;
    }

    .preview-container {
        @apply h-64 bg-gray-100 p-5;
    }

    .config-container {
        @apply h-1/2 p-5 overflow-y-auto;
    }

    .options-grid {
        @apply grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-5 p-5;
    }

    .option-card {
        @apply bg-white rounded-lg p-4 shadow-md cursor-pointer transition-all duration-200 border-2 border-transparent hover:-translate-y-1;
    }

    .option-card.selected {
        @apply border-wood-dark bg-cream -translate-y-1 shadow-lg;
    }

    .option-card img {
        @apply w-full h-[150px] object-cover rounded mb-3;
    }

    .option-card h3 {
        @apply text-wood-dark mb-3;
    }

    .characteristics {
        @apply flex flex-wrap gap-1 mt-3;
    }

    .characteristics span {
        @apply bg-wood-light px-3 py-1 rounded-full text-sm;
    }

    .summary-container {
        @apply p-5 bg-wood-light rounded-lg;
    }

    .summary-container h3 {
        @apply text-wood-dark mb-4;
    }

    .price, .production-time {
        @apply text-lg mb-3;
    }

    #preview-canvas {
        @apply w-full h-full;
    }
}

/* Keep the animations as they are since they're specific transitions */
.config-step {
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
}

.config-step.active {
    opacity: 1;
    transform: translateX(0);
}