/* css/png-to-jpg.css */

/* Upload Area Styling (if different from common or image-to-pdf) */
#upload-area-png.drag-over {
    border-color: #2ecc71;
    /* Tailwind secondary color */
    background-color: rgba(46, 204, 113, 0.05);
}

/* Image Preview Styling */
#preview-area-png img {
    max-width: 100%;
    max-height: 300px;
    /* Limit preview height */
    border: 2px solid #e2e8f0;
    /* Tailwind gray-200 */
    border-radius: 0.5rem;
    /* Tailwind rounded-lg */
    margin: 0 auto;
    /* Center the image if its container is wider */
    display: block;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* Tailwind shadow-md */
}

#preview-area-png .image-info {
    font-size: 0.875rem;
    /* Tailwind text-sm */
    color: #4a5568;
    /* Tailwind gray-700 */
    margin-top: 0.5rem;
    /* Tailwind mt-2 */
}

/* Quality Slider - Tailwind's accent-primary should style the thumb/track */
/* For more custom slider styles, you'd add them here, potentially hiding default appearances. */
/* Example:
input[type="range"]#jpg-quality::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #3498db; // primary
    border-radius: 50%;
    cursor: pointer;
}
input[type="range"]#jpg-quality::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #3498db; // primary
    border-radius: 50%;
    cursor: pointer;
    border: none;
}
*/

/* Tool Interface Responsiveness (If needed beyond Tailwind) */
@media (max-width: 640px) {
    #upload-area-png {
        padding: 1.5rem;
        /* Slightly less padding on small screens */
    }

    h1 {
        font-size: 1.8rem;
        /* Tailwind text-2xl or text-3xl */
    }

    #convert-btn-png {
        font-size: 1.125rem;
        /* Tailwind text-lg */
        padding: 0.75rem 2rem;
        /* Adjust padding */
    }
}