/**
 * Custom CSS for WooCommerce Box Office QR Scanner UI.
 * This provides basic styling for the scanner button, container, and status messages.
 */

/* Minimal wrapper for the scanner UI - removes box, padding, shadow */
.cmc-qr-scanner-wrapper-minimal {
    margin-top: 20px;
    padding: 0; /* Remove padding */
    border: none; /* Remove border */
    background-color: transparent; /* Make background transparent */
    box-shadow: none; /* Remove box shadow */
    font-family: 'Inter', sans-serif; /* Using Inter font as per guidelines */
    text-align: center; /* Center the button and scanner */
}

/* Style for the "Launch QR Scanner" button */
.cmc-launch-scanner-button {
    background-color: #0073aa; /* WordPress primary blue */
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Keep button shadow for visual pop */
    margin-bottom: 20px; /* Space below button */
}

.cmc-launch-scanner-button:hover {
    background-color: #005177; /* Darker blue on hover */
}

/* Container for the QR code reader video feed */
.cmc-qr-reader {
    width: 100%;
    max-width: 400px; /* Limit max width for better mobile display */
    margin: 0 auto; /* Center the video feed */
    border: 1px solid #eee; /* Keep a subtle border for the video area */
    border-radius: 8px;
    overflow: hidden; /* Ensure video stays within bounds */
    background-color: #000; /* Black background for video area */
}

/* Style for the scanner status message */
.cmc-scanner-status {
    margin-top: 15px;
    color: #555;
    font-size: 0.9em;
    text-align: center;
    min-height: 1.2em; /* Ensure it takes up space even when empty */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease-in-out; /* Smooth fade in/out */
}

/* When JavaScript updates content, make it visible */
.cmc-scanner-status:not(:empty) {
    opacity: 1;
}

/* Separator line (removed from HTML, so this class is now unused) */
/* .cmc-scanner-separator {
    margin: 30px 0;
    border: 0;
    border-top: 1px solid #eee;
} */

/* Responsive adjustments */
@media (max-width: 600px) {
    .cmc-qr-scanner-wrapper-minimal {
        margin-top: 15px;
    }

    .cmc-launch-scanner-button {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    .cmc-qr-reader {
        max-width: 100%; /* Full width on smaller screens */
    }
}