.barcode-scanner-container, .upload-preview-container {
        transition: all 0.3s ease;
    }

    #cameraFeed {
        background-color: #f8f9fa;
    }

    #interactive.viewport {
        position: relative;
    }

        #interactive.viewport > canvas, #interactive.viewport > video {
            max-width: 100%;
            width: 100%;
        }

    canvas.drawing, canvas.drawingBuffer {
        position: absolute;
        left: 0;
        top: 0;
    }

    .scanning-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 2px solid #28a745;
        animation: pulse 2s infinite;
        pointer-events: none;
        z-index: 10;
        display: none;
    }

    @keyframes pulse {
        0% {
            border-color: #28a745;
        }

        50% {
            border-color: #20c997;
        }

        100% {
            border-color: #28a745;
        }
    }

    .item-details {
        background-color: #f8f9fa;
        border-radius: 5px;
        padding: 15px;
        margin-top: 15px;
    }

    .item-image {
        max-width: 100%;
        height: auto;
        border-radius: 5px;
    }