/* css/qr-code-generator.css */

#qr-text-input {
    min-height: 100px;
    /* Ensure a decent initial height */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#qr-code-display-area {
    /* Styles for the container where the QR code (img/canvas) will be placed */
    transition: border-color 0.3s ease;
}

#qr-code-display-area img,
#qr-code-display-area canvas {
    display: block;
    /* Remove extra space below canvas/img */
    margin: auto;
    /* Center the QR code if its container is wider */
    border: 1px solid #e2e8f0;
    /* Tailwind gray-200, subtle border */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    h1 {
        font-size: 1.8rem;
    }

    #btn-generate-qr,
    #btn-download-qr {
        width: 100%;
        /* Full width buttons on small screens */
        margin-bottom: 0.5rem;
    }

    #qr-code-display-area {
        min-height: 128px;
        /* Adjust for smaller default QR code */
    }
}