/* qr-code-reader.css */

/* Styles for the camera stream container */
#qr-camera-stream-container {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    /* For loading overlay */
}

#qr-camera-stream {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
    /* Matches Tailwind's rounded-lg */
}

#qr-camera-canvas {
    display: none;
    /* Canvas is used for processing, not direct display */
}

/* Styles for the result area */
#qr-reader-result-area {
    min-height: 100px;
    /* Ensure it has a consistent height */
    word-wrap: break-word;
    /* Important for long URLs/text */
}

/* Specific button styles if not already covered by common.css/Tailwind */
#btn-start-camera,
#btn-stop-camera,
#qr-copy-result {
    /* Apply common button styles or specific ones here */
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

#btn-start-camera:hover,
#qr-copy-result:hover {
    transform: translateY(-1px);
}

#btn-stop-camera:hover {
    transform: translateY(-1px);
}

/* Loading feedback for camera */
#loading-camera-feedback {
    z-index: 10;
}