.compressor-container {
    border: 1px solid #ddd;
    padding: 1.5rem;
    border-radius: 8px;
    background-color: #fdfdfd;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Space between sections */
}

/* --- Upload Area --- */
.upload-area {
    border: 2px dashed #007bff;
    padding: 2rem;
    text-align: center;
    border-radius: 8px;
    background-color: #f0f8ff; /* Light blue background */
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative; /* Needed for potential absolute positioning inside */
}

.upload-area:hover {
    background-color: #e0f0ff;
}

.upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #0056b3;
}

.upload-label svg {
    margin-bottom: 0.5rem;
    color: #007bff;
}

.upload-label small {
    color: #555;
    font-size: 0.9em;
    margin-top: 0.5rem;
}

.file-name-display {
    margin-top: 1rem;
    font-style: italic;
    color: #333;
    font-size: 0.9em;
    word-break: break-all; /* Prevent long names from overflowing */
}

/* --- Controls & Preview Area --- */
.controls-preview-area {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 1.5rem; /* Space between preview and controls */
    align-items: flex-start; /* Align tops */
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
}

.preview-area, .controls {
    flex: 1; /* Try to take equal space */
    min-width: 250px; /* Minimum width before wrapping */
}

.preview-area h3, .controls h3, .result-area h3 {
    margin-bottom: 0.8rem;
    color: #333;
    font-size: 1.1em;
}

#previewImage {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    display: block; /* Remove extra space below image */
    min-height: 50px; /* Placeholder height */
    background-color: #eee; /* Placeholder background */
}

#originalSize, #compressedSize, #compressionInfo {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 0.3rem;
}

/* Controls */
.controls label {
    display: inline-block; /* Label next to slider */
    margin-bottom: 0.5rem;
    margin-right: 10px;
    font-weight: bold;
}

#qualitySlider {
    width: calc(100% - 120px); /* Adjust width relative to label and value */
    vertical-align: middle;
    margin-right: 10px;
    cursor: pointer;
}

#qualityValue {
    font-weight: bold;
    color: #007bff;
    min-width: 30px;
    display: inline-block;
}

#compressBtn {
    background-color: #28a745; /* Green */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    display: block; /* Button on its own line */
    width: 100%; /* Full width within its container */
    margin-top: 1rem;
}

#compressBtn:hover, #compressBtn:focus {
    background-color: #218838;
}

/* --- Result Area --- */
.result-area {
    border-top: 1px solid #eee;
    padding-top: 1.5rem;
}

.result-details {
    background-color: #f9f9f9;
    padding: 1rem;
    border-radius: 5px;
    border: 1px solid #eee;
}

/* Optional compressed preview */
#compressedPreviewImage {
     max-width: 100%;
     max-height: 150px; /* Limit height */
     height: auto;
     border: 1px solid #ccc;
     border-radius: 4px;
     margin-bottom: 1rem;
     display: block; /* Default to block, will be toggled */
}

.download-btn {
    background-color: #007bff;
    color: white !important; /* Override potential link styles */
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-size: 1rem;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
    margin-top: 1rem;
}

.download-btn:hover, .download-btn:focus {
    background-color: #0056b3;
    color: white !important;
}

.download-btn.disabled {
    background-color: #aaa;
    cursor: not-allowed;
    opacity: 0.7;
}

/* --- Loading and Error --- */
.loading {
    text-align: center;
    padding: 1rem;
    color: #0056b3;
    font-weight: bold;
}

.error {
    color: #dc3545; /* Red */
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 0.8rem;
    border-radius: 5px;
    margin-top: 1rem;
    text-align: center;
    display: none; /* Hidden by default */
}

/* Responsiveness for the Tool */
@media (max-width: 600px) {
    .controls-preview-area {
        flex-direction: column; /* Stack preview and controls */
    }

    .preview-area, .controls {
        width: 100%; /* Take full width when stacked */
        min-width: unset; /* Remove min-width */
    }

    #qualitySlider {
        width: calc(100% - 100px); /* Adjust slider width for smaller screens */
    }
}