/* Styles specific to the Image to Base64 Encoder Tool */

    .base64-encoder-container {
        max-width: 900px;
        margin: 1rem auto;
        padding: 1.5rem 2rem;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background-color: var(--bg-color); /* Use main bg */
    }

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

    /* Upload Section Styles (reusing from other tools) */
    .upload-section {
        text-align: center;
        margin-bottom: 2rem;
        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; }
    #upload-status {
        color: var(--error-text); font-size: 0.85rem;
        margin-top: 0.5rem; min-height: 1.2em;
    }

    /* Results Section */
    #results-container {
        display: flex;
        gap: 2rem;
        margin-top: 1.5rem;
        flex-wrap: wrap; /* Allow stacking */
    }
    #results-container.hidden {
        display: none;
    }

    .preview-area {
        flex: 1;
        min-width: 250px;
        text-align: center;
    }
    .preview-area h3 {
        margin-top: 0;
        margin-bottom: 0.8rem;
        font-size: 1.1rem;
        color: var(--label-text);
    }
    #image-preview {
        display: block;
        max-width: 100%;
        max-height: 200px; /* Limit preview height */
        height: auto;
        margin: 0 auto 0.5rem auto;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background-color: var(--preview-bg); /* BG for transparent images */
    }
    #image-details {
        font-size: 0.8rem;
        color: var(--label-text);
        opacity: 0.8;
    }


    .output-area {
        flex: 2; /* Output takes more space */
        min-width: 350px;
        display: flex;
        flex-direction: column;
        gap: 1rem; /* Space between output sections */
    }
    .output-area h3 {
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-size: 1.1rem;
        color: var(--label-text);
    }

    .output-controls {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.5rem;
        flex-wrap: wrap; /* Allow controls to wrap */
    }
    .output-controls label {
        font-size: 0.9rem;
        color: var(--label-text);
        margin-right: 0.3rem;
        white-space: nowrap;
    }
    .output-controls input[type="checkbox"] {
        accent-color: var(--accent-color);
        width: 15px;
        height: 15px;
        cursor: pointer;
    }
    .output-controls span { /* For Data URL note */
         font-size: 0.9rem;
         color: var(--label-text);
         opacity: 0.8;
         margin-right: auto; /* Push buttons right */
    }

    .output-area textarea {
        width: 100%;
        padding: 0.8rem;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
        font-size: 0.9rem;
        background-color: var(--bg-color);
        color: var(--text-color);
        resize: vertical;
        line-height: 1.5;
        box-sizing: border-box; /* Include padding in width */
        word-break: break-all; /* Break long base64 strings */
    }
    .output-area textarea:focus {
        border-color: var(--accent-color);
        outline: none;
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
    }
     body.dark-mode .output-area textarea:focus {
         box-shadow: 0 0 0 2px rgba(102, 191, 255, 0.25);
    }

    /* Buttons */
    .control-button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
        font-weight: 500;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        transition: opacity 0.2s;
        background-color: var(--label-text);
        color: var(--bg-color);
        white-space: nowrap;
    }
    .control-button:hover {
        opacity: 0.85;
    }
    .control-button.download {
        background-color: #6c757d; /* Grey */
        color: white;
    }

    /* Copy Status */
    .copy-status-message {
        display: inline-block;
        margin-left: 10px;
        font-size: 0.85rem;
        color: var(--accent-color);
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        white-space: nowrap;
    }
    .copy-status-message.visible {
        opacity: 1;
    }

    .hidden {
        display: none;
    }

    /* Responsive */
    @media (max-width: 768px) {
        #results-container {
            flex-direction: column;
        }
        .preview-area { margin-bottom: 1rem; }
        .output-area { gap: 1.5rem; }
    }