/* File: css/qr-style.css */

/* --- Basic Reset/Container Styling --- */
/* Ensure the container is centered and has basic padding */
.husky-qr-container {
    max-width: 400px; /* Adjust as needed */
    margin: 20px auto; /* Center the container horizontally */
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center; /* Center text content */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; /* Match WP common font stack */
}

.husky-qr-container p {
    margin-bottom: 15px;
    line-height: 1.5;
    color: #555;
}

/* --- QR Code Area Styling --- */
/* Style the div where the QR code is rendered */
.husky-qr-code {
    margin: 20px auto; /* Center the QR code block */
    padding: 15px; /* Padding around the QR code itself */
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: inline-block; /* Ensure it wraps the QR code tightly */
    position: relative; /* Needed for absolute positioning of loading icon if used differently */
    /* qrcode.js adds a canvas or img inside, which will be centered by text-align: center on parent */
}

/* Style the loading icon inside the QR area before generation */
.husky-qr-code .fa-spinner {
    color: #0073aa; /* WordPress primary color */
    margin: 50px; /* Add some space around the spinner */
}

/* Hide the loading icon once the QR code is generated */
.husky-qr-container.qr-generated .husky-qr-code .fa-spinner {
    display: none;
}

/* --- Status and Timer Styling --- */
#qr-status {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
}

#qr-timer {
    font-size: 0.9em;
    color: #777;
    min-height: 1.5em; /* Prevent layout shift when timer appears */
}

/* Timer colors based on time left (handled by JS, but default styles here) */
#qr-timer[style*="red"] {
    color: red;
    font-weight: bold;
}
#qr-timer[style*="orange"] {
    color: orange;
}


/* --- Alternative Login Link Styling --- */
.husky-qr-alt-login {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.husky-qr-alt-login a {
    color: #0073aa; /* WordPress primary color */
    text-decoration: none;
}

.husky-qr-alt-login a:hover {
    text-decoration: underline;
}

/* --- Redirect Message Styling (after phone callback) --- */
.qr-redirect-message {
    margin: 15px 0;
    padding: 10px;
    border-radius: 4px;
    font-weight: bold;
}

.qr-redirect-message.status-success {
    background-color: #e5f3ff; /* Light blue */
    color: #0073aa; /* WordPress primary color */
    border-color: #0073aa;
}

.qr-redirect-message.status-error {
    background-color: #fbeaea; /* Light red */
    color: #dc3232; /* WordPress error color */
    border-color: #dc3232;
}

.qr-redirect-message.status-warning,
.qr-redirect-message.status-used,
.qr-redirect-message.status-expired {
    background-color: #fff8e1; /* Light yellow */
    color: #f56d00; /* WordPress warning color */
    border-color: #f56d00;
}

.qr-redirect-message.status-info,
.qr-redirect-message.status-not-logged-in {
    background-color: #eef; /* Light light blue */
    color: #444;
    border-color: #888;
}


/* --- Container Status Classes Styling (added by JS) --- */
/* Subtle visual cues based on the state of the QR process */

/* Initial state (generating) - basic border */
.husky-qr-container {
    border-color: #ddd;
}

/* QR generated, waiting to be scanned */
.husky-qr-container.qr-generated {
    border-color: #0073aa; /* Highlight with WP color */
}

/* QR scanned on phone, waiting for computer login */
.husky-qr-container.qr-scanned {
    border-color: #46b450; /* Green border - ready */
    box-shadow: 0 0 15px rgba(70, 180, 80, 0.3); /* Green glow */
}

/* Login failed or error state */
.husky-qr-container.qr-failed {
    border-color: #dc3232; /* Red border */
    box-shadow: 0 0 15px rgba(220, 50, 50, 0.3); /* Red glow */
}

/* QR expired */
.husky-qr-container.qr-expired {
    border-color: #f56d00; /* Orange border */
}

/* QR used (should redirect quickly, but style just in case) */
.husky-qr-container.qr-used {
    border-color: #777; /* Grey border */
}


/* --- Responsive adjustments --- */
@media (max-width: 480px) {
    .husky-qr-container {
        margin: 10px; /* Smaller margin on small screens */
        padding: 15px;
    }
    .husky-qr-code {
        margin: 10px auto;
        padding: 10px;
    }
}