/* QR Tool Container */
.qr-tool-container { display: flex; gap: 20px; max-width: 1200px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

/* Left Section (QR Code Generation) */
.qr-left-section { flex: 1; display: flex; flex-direction: column; gap: 20px; }

/* Right Section (QR Code Recognition) */
.qr-right-section { flex: 1; display: flex; flex-direction: column; gap: 20px; }

textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-family: monospace; font-size: 14px; resize: vertical; min-height: 100px; }

/* File Upload Styling */
.file-upload { margin-top: 10px; }


.custom-file-upload { display: inline-block; padding: 10px 15px; background-color: #007bff; color: #fff; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; }

.custom-file-upload:hover { background-color: #0056b3; }

.custom-file-upload i { margin-right: 5px; }

input[type="file"] { display: none; }


#qrCodeOutput { display: flex; justify-content: center; align-items: center; margin-top: 10px; border: 1px solid #ddd; border-radius: 4px; padding: 10px; background-color: #f5f5f5; }
/*
pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}*/

/* Buttons Styling */
/*button {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
}*/

button:hover { background-color: #0056b3; }

#downloadButton, #copyButton { background-color: #28a745; }

#downloadButton:hover, #copyButton:hover { background-color: #218838; }

/* Error Message Styling */
/*.error-message {
    color: #ff4d4f;
    display: none;
    margin-top: 10px;
}*/

/* Status Indicator Styling */
/*.status-indicator {
    font-weight: bold;
}*/

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .qr-tool-container { flex-direction: column; }

    textarea { min-height: 80px; }

    pre { font-size: 12px; padding: 8px; }
}

/* Left Section (Input) */
.left-section { flex: 1; display: flex; flex-direction: column; gap: 20px; }

/* Right Section (Output) */
.right-section { flex: 1; display: flex; flex-direction: column; gap: 20px; }

/* Input Section Styling */
.input-section { display: flex; flex-direction: column; gap: 10px; }

.file-upload { margin-top: 10px; }

.custom-file-upload { display: inline-block; padding: 10px 15px; background-color: #007bff; color: #fff; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; }

.custom-file-upload:hover { background-color: #0056b3; }

.custom-file-upload i { margin-right: 5px; }
/*
input[type="file"] {
    display: none;
}
*/
.format-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.format-controls label {
    font-size: 14px;
}

.format-controls select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.quality-control { display: flex; flex-direction: column; gap: 10px; }

.quality-control label { font-size: 14px; }

.quality-control input[type="range"] { width: 100%; }

/* Output Section Styling */
.output-section { display: flex; flex-direction: column; gap: 10px; }

#previewCanvas { max-width: 100%; border: 1px solid #ddd; border-radius: 4px; }

#downloadLink { padding: 10px 15px; background-color: #28a745; color: #fff; text-align: center; border-radius: 4px; text-decoration: none; transition: background-color 0.3s; }

#downloadLink:hover { background-color: #218838; }

.file-name { margin-left: 10px; color: #666; font-size: 14px; }

.proportional-control {
    margin-top: 10px;
}

.proportional-control input[type="checkbox"] {
    margin-right: 5px;
}

.image-size-info,
.compressed-size-info {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}

.current-size-info,
.compressed-size-info {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
}