/* tools/utility-tools/qr-code-generator/style.css - Tool-specific styles */

/* Input group styles for dynamic fields */
.input-group-dynamic {
    margin-bottom: 20px;
    /* Default state - hidden */
    display: none; 
}

/* Override to show when active */
.input-group-dynamic:not(.hidden) {
    display: block;
}

.input-group-dynamic label {
    margin-bottom: 8px;
}

.input-group-dynamic .form-control,
.input-group-dynamic textarea.form-control,
.input-group-dynamic select.form-control {
    margin-bottom: 15px; /* Add space between fields within a group */
}

.input-group-dynamic textarea.form-control {
    min-height: 80px;
}

.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2); /* Make checkbox slightly larger */
}

.checkbox-group label {
    margin-bottom: 0; /* Remove default margin for labels in checkbox group */
}

/* QR Code Display Area */
.qrcode-display {
    border: 2px solid var(--color-light-gray-2);
    border-radius: var(--border-radius-medium);
    padding: 20px;
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px; /* Ensure some height even if QR code is small */
    max-width: 550px; /* Limit max width of the display area */
    background-color: var(--color-white);
    box-shadow: var(--shadow-small);
    overflow: hidden; /* Hide anything that overflows */
}

.qrcode-display img {
    display: block; /* Remove extra space below image */
    max-width: 100%; /* Ensure QR code image scales within its container */
    height: auto; /* Maintain aspect ratio */
}

/* Action buttons grid (reused from Line Sort, but can be customized) */
.tool-actions {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 15px;
    margin-top: 30px;
    justify-content: center; /* Center buttons */
}

.tool-actions .btn {
    flex: 1 1 auto; /* Allow buttons to grow/shrink, with auto basis */
    min-width: 150px; /* Ensure a minimum width */
    max-width: 250px; /* Prevent buttons from becoming too wide on large screens */
}