/* UPC2text.css */
/* This file provides the styling for the UPC Barcode Scanner React application. */

.UPC2text-container {
    max-width: 800px; /* Max width for the scanner container */
    margin: 20px auto; /* Center the container horizontally with some top/bottom margin */
    padding: 20px; /* Inner padding */
    border: 1px solid #ddd; /* Light grey border */
    border-radius: 8px; /* Rounded corners for the container */
    background-color: #fff; /* White background */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    font-family: 'Inter', sans-serif; /* Use Inter font as per instructions */
    text-align: center; /* Center align text within the container */
}

.UPC2text-container h2 {
    color: #333; /* Dark grey color for heading */
    margin-bottom: 15px; /* Space below heading */
}

.UPC2text-message {
    color: #555; /* Medium grey color for messages */
    margin-bottom: 20px; /* Space below message */
    font-size: 0.9em; /* Slightly smaller font size */
}

.UPC2text-video-wrapper {
    position: relative; /* Needed for positioning spinner */
    width: 100%; /* Full width of its parent */
    max-width: 640px; /* Maximum width for the video feed */
    margin: 0 auto 20px; /* Center video wrapper, space below */
    background-color: #000; /* Black background for video area */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Hide anything overflowing */
    min-height: 300px; /* Ensure some height even if video isn't loaded */
    display: flex; /* Use flexbox for centering spinner */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
}

.UPC2text-video {
    width: 100%; /* Make video fill its container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure it behaves as a block element */
    border-radius: 8px; /* Rounded corners for the video itself */
}

/* Styling for the WordPress Spinner component */
.UPC2text-spinner {
    position: absolute; /* Position absolutely within its wrapper */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for its own size */
    z-index: 10; /* Ensure it's above the video */
    --wp-components-spinner-color: #007cba; /* WordPress blue for spinner */
}

.UPC2text-actions {
    margin-bottom: 20px; /* Space below action buttons */
}

/* General styling for WordPress components-button */
.UPC2text-actions .components-button {
    min-height: 40px; /* Minimum height for buttons */
    font-size: 16px; /* Font size for button text */
    padding: 8px 20px; /* Padding inside buttons */
    border-radius: 6px; /* Rounded corners for buttons */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow */
    transition: all 0.2s ease-in-out; /* Smooth transitions for hover effects */
}

/* Primary button styling */
.UPC2text-actions .components-button.is-primary {
    background-color: #007cba; /* WordPress blue background */
    color: #fff; /* White text */
    border-color: #007cba; /* Matching border color */
}

.UPC2text-actions .components-button.is-primary:hover {
    background-color: #006ba1; /* Slightly darker blue on hover */
    border-color: #006ba1;
}

/* Secondary button styling */
.UPC2text-actions .components-button.is-secondary {
    background-color: #e0e0e0; /* Light grey background */
    color: #333; /* Dark grey text */
    border-color: #ccc; /* Light border */
}

.UPC2text-actions .components-button.is-secondary:hover {
    background-color: #d0d0d0; /* Slightly darker grey on hover */
    border-color: #bbb;
}

/* Disabled button styling */
.UPC2text-actions .components-button:disabled {
    opacity: 0.6; /* Reduce opacity */
    cursor: not-allowed; /* Change cursor */
}

.UPC2text-result {
    margin-top: 20px; /* Space above result area */
    padding: 15px; /* Inner padding */
    background-color: #f9f9f9; /* Very light grey background */
    border: 1px dashed #ccc; /* Dashed border */
    border-radius: 8px; /* Rounded corners */
}

.UPC2text-result h3 {
    color: #333; /* Dark grey color for heading */
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 10px; /* Space below heading */
    font-size: 1.1em; /* Slightly larger font size */
}

.UPC2text-result p {
    font-size: 1.2em; /* Larger font size for scanned barcode */
    font-weight: bold; /* Bold text */
    color: #007cba; /* WordPress blue for the barcode text */
    word-break: break-all; /* Break long words to prevent overflow */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    .UPC2text-container {
        margin: 10px; /* Reduce side margins */
        padding: 15px; /* Reduce padding */
    }
    .UPC2text-actions .components-button {
        width: 100%; /* Make buttons full width */
        margin-bottom: 10px; /* Add space between stacked buttons */
    }
}