/* Styles specific to the Image Format Converter Tool */

    .converter-container {
        max-width: 750px;
        margin: 1rem auto;
        padding: 1.5rem 2rem;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background-color: var(--bg-color);
    }

    .converter-container h2 {
        text-align: center;
        margin-bottom: 0.5rem;
        font-size: 1.4rem;
        color: var(--text-color);
    }
    .converter-container .description {
        text-align: center;
        margin-bottom: 2rem;
        font-size: 0.9rem;
        color: var(--label-text);
    }

    /* Upload Section Styles */
    .upload-section {
        text-align: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px dashed var(--border-color);
    }
    #drop-zone {
        border: 2px dashed var(--border-color);
        border-radius: 8px;
        padding: 2rem 1rem;
        margin-bottom: 0.5rem;
        cursor: pointer;
        transition: border-color 0.3s ease, background-color 0.3s ease;
    }
    #drop-zone p { margin-bottom: 0.2rem; color: var(--text-color); opacity: 0.9; pointer-events: none; }
    #drop-zone small { color: var(--label-text); font-size: 0.9rem; pointer-events: none;}
    #drop-zone.drag-over {
        border-color: var(--accent-color);
        background-color: rgba(0, 123, 255, 0.05);
    }
    body.dark-mode #drop-zone.drag-over { background-color: rgba(102, 191, 255, 0.1); }
    #file-input { display: none; }
    .file-label {
        display: inline-block;
        padding: 0.75rem 1.5rem;
        background-color: var(--accent-color);
        color: var(--bg-color-light);
        border: none; border-radius: 5px; cursor: pointer;
        transition: opacity 0.2s ease; font-weight: 500; margin-top: 0.5rem;
    }
    body.dark-mode .file-label { color: var(--bg-color-dark); }
    .file-label:hover { opacity: 0.9; }
    .status-message { /* Used for upload and conversion status */
        color: var(--label-text); font-size: 0.85rem;
        margin-top: 0.5rem; min-height: 1.2em;
    }
     #upload-status.error-message { /* Specific error styling */
         color: var(--error-text);
     }
    .upload-info {
        font-size: 0.8rem;
        color: var(--label-text);
        opacity: 0.8;
        margin-top: 0.5rem;
    }

    /* Controls Area */
    #controls-area {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
        align-items: flex-start;
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px dashed var(--border-color);
    }
     #controls-area.hidden { display: none; }

    #controls-area .control-group {
        flex: 1;
        min-width: 200px;
    }
    .control-group label {
        display: block;
        margin-bottom: 0.4rem;
        font-weight: 500;
        color: var(--label-text);
        font-size: 0.9rem;
    }
    .image-preview-box {
        width: 100%;
        min-height: 100px; /* Min height for preview */
        max-height: 200px;
        background-color: var(--preview-bg);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden; /* Hide overflow */
    }
    .image-preview-box img {
        display: block;
        max-width: 100%;
        max-height: 198px; /* Slightly less than container */
        height: auto;
        object-fit: contain;
    }
    .image-details {
        font-size: 0.8rem;
        color: var(--label-text);
        opacity: 0.8;
        margin-top: 0.3rem;
    }

    .conversion-options {
        flex: 1;
        min-width: 200px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .conversion-options select,
    .conversion-options input[type="range"] {
        width: 100%;
        padding: 0.6rem 0.8rem;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-size: 0.95rem;
        background-color: var(--bg-color);
        color: var(--text-color);
        box-sizing: border-box;
    }
    .conversion-options input[type="range"] {
        padding: 0; /* Remove padding for range */
        cursor: pointer;
        accent-color: var(--accent-color);
    }
     #quality-control-group label span {
        font-weight: bold;
        color: var(--accent-color);
        margin-left: 5px;
     }
     body.dark-mode #quality-control-group label span { color: var(--accent-color-dark); }


    .control-button {
        padding: 0.7rem 1.5rem;
        font-size: 1rem;
        font-weight: 500;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        transition: opacity 0.2s;
        text-align: center;
    }
    .control-button.convert {
        background-color: var(--accent-color);
        color: var(--bg-color-light);
        width: 100%; /* Full width convert button */
        margin-top: 0.5rem;
    }
    body.dark-mode .control-button.convert { color: var(--bg-color-dark); }
    .control-button.convert:hover { opacity: 0.9; }

    /* Processing Indicator */
    #processing-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin: 1.5rem 0;
        font-size: 1rem;
        color: var(--label-text);
    }
    #processing-indicator.hidden { display: none; }
    .spinner {
        border: 3px solid var(--border-color);
        border-top: 3px solid var(--accent-color);
        border-radius: 50%;
        width: 20px;
        height: 20px;
        animation: spin 1s linear infinite;
    }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    /* Output Area */
    #output-container {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--border-color);
        text-align: center; /* Center content */
    }
    #output-container.hidden { display: none; }
    #output-container h3 {
        margin-bottom: 1rem;
        font-size: 1.2rem;
        color: var(--text-color);
    }
    #output-container .image-preview-box {
        margin: 0 auto 0.5rem auto; /* Center preview box */
        max-width: 90%; /* Limit width */
    }
    .download-action {
        margin-top: 1rem;
    }
    .control-button.download {
        background-color: #28a745; /* Green */
        color: white;
        display: inline-block; /* Allow centering */
        width: auto;
    }
    .control-button.download:hover { opacity: 0.9; }

    .hidden { display: none; }

    /* Responsive */
    @media (max-width: 600px) {
        #controls-area { flex-direction: column; }
        .converter-container { padding: 1rem 1.2rem; }
    }