/* assets/style.css (Bijgewerkte versie) */

/* --- Algemene Stijlen & Layout --- */
:root {
    --primaire-kleur: #1E2E3E;
    --primaire-hover: #324961;
    --secondary-kleur: #26CAC3;
    --succes-kleur: #28a745;
    --fout-kleur: #dc3545;
    --licht-grijs: #f8f9fa;
    --donker-grijs: #343a40;
    --rand-kleur: #dee2e6;
    --white: #FFFFFF;
    --off-white: #F2F2F2;
}

body {
    margin: 0;
    background-color: var(--licht-grijs);
    color: var(--donker-grijs);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

*{
    font-family: "Inter", sans-serif; 
    box-sizing: border-box; 
}


h1, h2, h3, h4{
    font-weight: 600;
}

a{
    text-decoration: none;
    color: unset;
}

main {
    flex-grow: 1;
}

.footer{
    width: 100%;
}
.footer-body{
    margin: 0 auto;
    max-width: 1100px;
    width: 100%;    
    padding: 2em 1em;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2em;
}
    .footer-item-container h3{
        margin-bottom: 0;
        font-size: 1.2em;
    }
    .footer-item-hr{
        width: 60px;
        height: 4px;
        margin: 1em 0;
        border-radius: 100px;
        background: var(--secondary-kleur);
    }
    .footer-item{
        margin: 1.2em 0;
    }
    .footer-item-img, .footer-item-container{
        min-width: 200px;
    }
    .footer-item-img{
        align-self: center;
    }
.footer-bottom {
    padding: .5em 1em;
    font-size: 0.9em;
    color: var(--licht-grijs);
    background-color: var(--primaire-kleur);
    width: 100%;
}
.footer-bottom-inner {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}


.converter-layout {
    display: flex;
    gap: 20px;
    align-items: stretch; 
    justify-content: center;
    flex-wrap: wrap;
    min-height: 500px; 
}
    .converter-layout > div{
        min-width: 300px;
    }

.converter-box {
    max-width: 700px;
    width: 100%;
    background-color: #fff;
    padding: 2em 1em;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.text-box{
    width: 100%;
    background-color: var(--off-white);
    padding: 2em 1em;
}
.text-box-white{
    width: 100%;
    background-color: var(--white);
    padding: 2em 1em;
}
    .text-box-inner{
        margin: 0 auto;
        max-width: 800px;
        width: 100%;
    }
    .text-box-inner-center{
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column;
        gap: 1em;
    }
    .text-col-hr{
        width: 60px;
        height: 2px;
        border-radius: 100px;
        background-color: var(--primaire-kleur);
        margin: 1em 0;
    }
    .text-box-inner h2{
        margin-bottom: 0;
    }
    .text-box-inner a{
        font-weight: bold;
        text-decoration: underline;
    }
/* --- Typografie --- */
h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.ondertitel {
    font-size: 1.2rem;
    color: #6c757d;
    margin-bottom: 40px;
}

.info-sectie {
    margin-top: 60px;
    text-align: left;
    color: #495057;
}

.info-sectie h2 {
    text-align: center;
    font-size: 1.8rem;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--rand-kleur);
}

.info-sectie p,
.info-sectie ul {
    line-height: 1.6;
}


.bg-blue{
    background-color: var(--secondary-kleur);
}
.container {
    width: 100%;
    margin: 0 auto;
    padding: 3em 1em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2em;
}
.home-container-inner{
    max-width: 1100px;
    width: 100%;
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
    .tools-grid{
        margin-top: 2em;
        width: 100%;
        display: flex;
        gap: 2em;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        padding: 0;
    }
    .tools-grid > li{
        list-style-type: none;
        width: 250px;
        background: var(--white);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
        padding: 1em;
        border-radius: .4em;
        text-align: left;
    }
    .tool-card > a{
        font-size: 1.2em;
        font-weight: 600;
    }

    .view_more{
        width: max-content;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 3em;
        gap: .5em;
    }
        .view_more p{
            margin: 0;
            font-weight: 600;
        }

/* **DE FIX VOOR DE UPLOAD-BOX** */
#uploadForm .upload-zone {
    border: 2px dashed var(--rand-kleur);
    padding: 40px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;

    /* **NIEUW:** Gebruik Flexbox om de inhoud perfect te centreren */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    /* Geef de box een vaste hoogte */
}

#uploadForm .upload-zone:hover {
    border-color: var(--primaire-kleur);
    background-color: #f0f7ff;
}

#uploadForm .upload-zone p {
    margin: 0;
    font-weight: 500;
    font-size: 1.2em;
    /* Iets grotere tekst */
    color: #495057;
    pointer-events: none;
}

#uploadForm .upload-zone .separator-text {
    font-size: 0.9em;
    color: #6c757d;
    margin: 10px 0;
    /* Ruimte tussen de regels */
}

/* --- Knoppen --- */
.knop {
    display: inline-block;
    font-weight: 600;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: var(--primaire-kleur);
    border: 1px solid var(--primaire-kleur);
    padding: 12px 25px;
    font-size: 1.1rem;
    border-radius: 5px;
    margin: 4px 0;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

a.knop{
    text-decoration: none !important;
}

.knop:hover {
    background-color: var(--primaire-hover);
    border-color: var(--primaire-hover);
}

.knop:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

#kiesBestandKnop {
    pointer-events: none;
    /* De knop zelf is niet klikbaar, de zone eromheen wel */
}

/* --- Resultaten Gebied --- */
#resultaatGebied {
    margin-top: 30px;
    padding: 20px;
    border-radius: 5px;
}

.feedback {
    font-weight: 500;
    font-size: 1.1em;
    margin-bottom: 20px;
}

.feedback.succes {
    color: var(--succes-kleur);
}

.feedback.fout {
    color: var(--fout-kleur);
}

#downloadKnop {
    background-color: var(--succes-kleur);
    border-color: var(--succes-kleur);
}

#downloadKnop:hover {
    background-color: #218838;
    border-color: #1e7e34;
}
/* --- Stijlen voor de Voortgangsbalk --- */
.progress-bar-background {
    width: 100%;
    background-color: #e9ecef; /* Lichte achtergrond */
    border-radius: 5px;
    height: 10px;
    overflow: hidden; /* Zorgt ervoor dat de vulling binnen de randen blijft */
}

.progress-bar-fill {
    width: 0%; /* Start op 0% */
    height: 100%;
    background-color: var(--primaire-kleur); /* Gebruikt je primaire blauwe kleur */
    border-radius: 5px;
    transition: width 0.2s ease-out; /* Soepele animatie */
}

header{
    width: 100%;
    z-index: 9999;
    position: relative;
}
    .header_container{width: 100%;
        padding: 2em 1em;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 3px 0px 16px rgba(0,0,0,0.3);
        z-index: 9999;
        box-shadow: 3px 0px 16px rgba(0,0,0,0.3);
    }
    .header_inner{
        max-width: 1300px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .header_left{
            max-width: 250px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }
            .header_left img{
                width: 100%;
                object-fit: contain;
            }
        .header_right{
            width: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 1.4em;
        }
            div.nav_item, .nav_item_dropdown {
                position: relative;
                padding: 0 .2em;
                font-weight: 600;
            }
            .nav_item_dropdown_title{
                display: flex;
                justify-content: center;
                align-items: center;
                gap: .3em;
            }
            .nav_item a:hover, .nav_item_dropdown_title:hover {
                cursor: pointer;
                opacity: 0.8;
            }
    .header_dropdown_container{
        display: none;
        position: absolute;
        width: 100%;
        bottom: 0;
        transform: translateY(100%);
        background: var(--white);
        z-index: 9999;
        box-shadow: 16px 0px 16px rgba(0, 0, 0, 0.05);
    }
        .header_dropdown_tools{
            margin: 0 auto;
            max-width: 1000px;
            width: 100%;
            padding: 2em 1em;
            display: grid;
            grid-template-columns: repeat(4, 1fr); 
            gap: 2em;
            flex-wrap: wrap;
        }
    .header_right_res{
        display: none;
    }
        .header_right_res i{
            font-size: 1.6em;
            cursor: pointer;
        }
#res_menu{
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    background-color: var(--off-white);
    z-index: 9999;
}
    #res_menu::-webkit-scrollbar{
        display: none;
    }

    div.header_inner_res{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 5em;
    }
    div.header_inner_res .header_right{
        flex-direction: column;
        font-size: 1.4em;
    }
    div.res_menu_close{
        position: absolute;
        top: 1em;
        right: 1em;
    }
        div.res_menu_close i{
            font-size: 1.4em;
        }
    
@media screen and (max-width: 698px) {
    .tools-grid{
        gap: 1em;
    }
    .tools-grid > li{
        width: 100%;
    }
}
@media screen and (max-width: 790px) {
    .header_right_res {
        display: block;
    }
    .header_inner{
        justify-content: space-between;
    }
    .header_inner .header_right{
        display: none;
    }
}
pre#output.succes {
    color: #28a745; /* Green text */
    font-weight: bold;
}

pre#output.fout {
    color: #dc3545; /* Red text */
    font-weight: bold;
}

.tool-card.hidden-by-limit,
.tool-card.hidden-by-search {
    display: none;
}

/* --- General Styling --- */
#searchBar {
    width: 100%;
    padding: 12px 0em;
    font-size: 16px;
    border: none;
    border: 999px;
    background: transparent;
    outline: none;
}

.view_more {
    cursor: pointer;
    text-align: center;
    margin-top: 20px;
}

.search_bar_container{
    max-width: 600px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .2em;
    border: 1px solid #ddd;
    background-color: var(--white);
    border-radius: 999px;
    margin: 0 auto;
    padding: 0 1em;
}
    .search_bar_container i{
        width: 32px;
    }
#upload-area .upload-label { cursor: pointer; display: block; padding: 40px; border: 2px dashed #adb5bd; border-radius: 10px; text-align: center; transition: background-color 0.2s, border-color 0.2s; }
#upload-area .upload-label.dragover { background-color: #e9ecef; }
#upload-area .upload-label span { font-size: 4rem; }

.upload-preview-area {flex: 1.5; display: flex; flex-direction: column; justify-content: center; align-items: center;
        background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px;
        min-height: 400px; position: relative; overflow: hidden; padding: 20px;}

.upload-label {cursor: pointer; display: flex; flex-direction: column; justify-content: center;
        align-items: center; width: 100%; height: 100%;
        border: 2px dashed #adb5bd; border-radius: 10px; text-align: center;
        transition: background-color 0.2s, border-color 0.2s;}

.upload-label.drag-over {background-color: #e9f2ff; border-color: #007bff;}

.file-info-display {display: flex; flex-direction: column; align-items: center; text-align: center;}

.file-info-display .file-icon {font-size: 2.5rem; font-weight: bold; color: #fff; width: 80px; height: 80px;
        line-height: 80px; border-radius: 10px;}

.file-info-display .pdf-icon {background-color: #ee2d24;}

.file-info-display h4 {margin: 15px 0 5px 0; word-break: break-all;}

.file-info-display p {margin: 0; color: #6c757d;}

.button-subtle {background: none; border: none; color: #007bff; text-decoration: underline;
        cursor: pointer; padding: 10px; margin-top: 15px;}

.converter-controls {flex: 1; display: flex; flex-direction: column; gap: 20px;}

.info-box {background-color: #f8f9fa; border-radius: 6px; padding: 15px; font-size: 14px;}

#convertBtn {padding: 12px; font-size: 16px; justify-content: center;}

.small-text {font-size: 12px; color: #6c757d; margin-top: 10px;}

#upload-area .upload-label.dragover {background-color: #e9ecef;}

#upload-area .upload-label span {font-size: 4rem;}

#result-area {text-align: center; margin-top: 20px;}

.hidden {display: none !important;}

#loader div {display: inline-block; position: absolute; left: 8px; width: 16px; background: var(--knop-kleur); animation: loader 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;}

@keyframes loader {
        0%{ top: 8px; height: 64px;}

        50%, 100% {top: 24px; height: 32px;}
}

.color-column{
    min-height: 150px;
}

.result-box {display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--licht-grijs);
        padding: 10px 15px;
        border-radius: 5px;
        border: 1px solid var(--rand-kleur);}

/* --- CSS Variables for a Consistent Design --- */
    :root {--primary-blue: #007bff;
        --primary-blue-hover: #0069d9;
        --danger-red: #dc3545;
        --danger-red-hover: #c82333;
        --light-gray-bg: #f8f9fa;
        --border-color: #dee2e6;
        --text-color: #343a40;
        --border-radius: 6px;}

/* --- General Button Styling --- */
    .button {display: inline-flex; align-items: center; gap: 8px; background-color: white; color: var(--text-color);
        border: 1px solid var(--border-color); padding: 9px 15px; border-radius: var(--border-radius);
        font-weight: 500; font-size: 14px; cursor: pointer; transition: all 0.2s ease;}

.button:hover {background-color: #f8f9fa; border-color: #c6c9cc;}

.button-primary {background-color: var(--primary-blue); color: white; border-color: var(--primary-blue);}

.button-primary:hover {background-color: var(--primary-blue-hover); border-color: var(--primary-blue-hover);}

.button-danger {background-color: var(--danger-red); color: white; border-color: var(--danger-red);}

.button-danger:hover {background-color: var(--danger-red-hover); border-color: var(--danger-red-hover);}


.textarea-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 300px;
}

.action-bar {margin-top: 20px;
        display: flex;
        gap: 12px;}

.converter-box.wide-box {max-width: 1100px;}
.formatter-controls{
    margin-bottom: 8px;
}
textarea {resize: vertical; padding: 15px;}

.feedback {margin-top: 15px; padding: 10px; border-radius: 5px;}

.feedback.fout {background-color: #f8d7da; color: #721c24;}

.form-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px;}

.form-group {display: flex; flex-direction: column; margin-bottom: 8px;}

.form-group label {font-weight: 500; display: block; margin-bottom: 5px; text-align: left;}

.form-group select, .form-group input {width: 100%; padding: 10px; border-radius: 5px; border: 1px solid var(--rand-kleur); font-size: 1rem;}

.control-input {width: 100%; padding: 8px; margin-bottom: 15px;}


/* --- CSS Variables and Button Styling (same as previous tools) --- */
    :root {--primary-blue: #007bff; --border-color: #dee2e6; --border-radius: 6px;}

.button {/* ... Abridged for brevity, use the full button style from previous tools ... */
        display: inline-flex; align-items: center; justify-content: center; background-color: white; color: #343a40;
        border: 1px solid var(--border-color); padding: 9px 15px; border-radius: var(--border-radius);
        font-weight: 500; font-size: 14px; cursor: pointer; transition: all 0.2s ease;}

/* --- Tool-Specific Styles --- */
    .generator-layout {display: flex;
        gap: 30px;}

.generator-controls {flex: 1;
        display: flex;
        flex-direction: column;
        gap: 15px;}

.range-wrapper {display: flex; align-items: center; gap: 10px;}

.url-wrapper {display: flex;}

.url-wrapper input {flex: 1;
        border: 1px solid var(--border-color);
        border-right: none;
        padding: 9px 12px;
        border-radius: var(--border-radius) 0 0 var(--border-radius);
        background-color: #e9ecef;
        font-family: 'Courier New', Courier, monospace;}

.url-wrapper button {border-radius: 0 var(--border-radius) var(--border-radius) 0;}

#previewImage {max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;}

.loader {border: 4px solid #f3f3f3; border-top: 4px solid var(--primary-blue);
        border-radius: 50%; width: 40px; height: 40px;
        animation: spin 1s linear infinite;
        position: absolute;}

@keyframes spin {0% { transform: rotate(0deg);}

                100% {transform: rotate(360deg);}
                }
.controls-bar {display: flex;
    gap: 10px;
    justify-content: center;}

/* Re-using styles from previous tools */
.upload-label {cursor: pointer; display: block; padding: 40px; border: 2px dashed #adb5bd; border-radius: 10px; text-align: center;}

.upload-label.dragover {background-color: #e9ecef;}

.upload-label span {font-size: 4rem;}

#options-area {text-align: left; margin: 20px 0; padding: 20px; border: 1px solid var(--rand-kleur); border-radius: 5px;}

.option-group {margin-bottom: 20px;}

.option-group > label {font-weight: 600; font-size: 1.1rem; display: block; margin-bottom: 8px;}

#range-inputs {margin-top: 10px;}

#range-inputs.range-inputs-disabled input {background-color: #e9ecef; pointer-events: none; opacity: 0.6;}

#loader {display: inline-block; position: relative; width: 80px; height: 80px;}

.button-grid {display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 20px;}


.converter-controls form {display: flex; flex-direction: column; height: 100%;}

.converter-controls fieldset {border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; flex-grow: 1;}

.control-group {display: flex; flex-direction: column;}

.control-group label {margin-bottom: 8px; font-weight: 500; color: #495057;}

.control-group input[type="checkbox"] {width: 20px; height: 20px; margin-right: 10px; vertical-align: middle;}

.radio-group {display: flex; gap: 20px;}

.slider {width: 100%;}

.palette-container {
    display: flex;
        height: 85%;
            flex-wrap: wrap;

    }

.palette-controls {height: 15%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fff;}

.editor-container {display: flex;
        flex-wrap: wrap;
        gap: 15px;
        width: 100%;
        min-height: 300px;
        margin-bottom: 15px;}

.editor-pane {flex: 1;
        min-width: 300px;
        display: flex;
        flex-direction: column;}

.editor-pane label {font-weight: 500;
        text-align: left;
        margin-bottom: 5px;}

/* --- Upload & Preview Area --- */
    .image-preview-area {flex: 1.5; display: flex; justify-content: center; align-items: center;
        background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px;
        min-height: 400px; position: relative; overflow: hidden;}

.control-group select {padding: 8px 12px; border: 1px solid #dee2e6; border-radius: 6px; font-size: 16px;}

.control-sub-label {font-size: 13px; color: #6c757d; margin: 4px 0 0 30px;}

.preview-pane {width: 100%;
        min-height: 300px;
        background-color: var(--licht-grijs);
        border-radius: 5px;
        border: 1px solid var(--rand-kleur);
        padding: 15px;
        font-family: monospace;
        font-size: 0.9rem;
        line-height: 1.5;
        resize: vertical;
        margin-bottom: 15px;}
/*
========================================
CSS FOR THE ZIP TOOL
========================================
*/

/* --- General Tool Layout & Buttons --- */
.converter-box.wide-box {
    max-width: 1100px; /* Allows the tool to use more space */
}

.file-input-hidden {
    display: none; /* Hides the actual <input type="file"> */
}

/* A larger button style for the initial choice */
.button-large {
    padding: 16px 30px;
    font-size: 1.15rem;
    font-weight: 600;
    width: 100%;
    max-width: 380px;
}

/* A secondary button style used for "Back" actions */
.button-secondary {
    background-color: var(--licht-grijs);
    border-color: var(--rand-kleur);
    color: var(--donker-grijs);
}

.button-secondary:hover {
    background-color: #e2e6ea;
}


/* --- Initial State --- */
#initialState {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 40px 0; /* Adds some vertical space */
}

/* --- Shared Viewer/Creator Styles --- */
.action-toolbar {
    display: flex;
    flex-wrap: wrap; /* Allows buttons to wrap on smaller screens */
    gap: 10px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

/* --- Viewer State --- */
.password-section {
    padding: 15px;
    background-color: var(--light-gray-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.password-section p {
    margin: 0;
    font-weight: 500;
    flex-grow: 1; /* Pushes input/button to the right */
}
.password-section input {
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.main-content-area {
    display: flex;
    flex-wrap: wrap; /* Allow panels to stack on smaller screens */
    gap: 20px;
    min-height: 500px;
}

.panel {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--white);
    display: flex;
    flex-direction: column;
}

.file-list-panel {
    flex: 1; /* Takes 1/3 of the space */
    min-width: 250px;
    overflow-y: auto; /* Allows scrolling through files */
}

.preview-panel {
    flex: 2.5; /* Takes 2.5/3 of the space */
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px;
}

.preview-placeholder {
    color: #6c757d;
    font-size: 1.2rem;
}

#previewContent img,
#previewContent video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* --- THE KEY FIX FOR THE TEXT PREVIEW --- */
#previewContent pre {
    width: 100%;
    max-height: 480px;  /* Give it a max height before scrolling */
    margin: 0;          /* Remove default margins */
    padding: 15px;      /* Add some internal padding */
    overflow: auto;     /* Allow vertical scrolling if content is long */
    font-size: 0.9rem;  /* Slightly smaller font for better readability */
    color: var(--donker-grijs);
    background-color: var(--licht-grijs); /* A light background helps it stand out */

    /* These two lines force the text to wrap */
    white-space: pre-wrap;
    word-wrap: break-word;
}


/* --- RESPONSIVE ADJUSTMENTS FOR MOBILE --- */
@media (max-width: 768px) {
    .main-content-area {
        /* This forces the panels to stack vertically */
        flex-direction: column;
        min-height: auto; /* Let height be determined by content */
    }

    .file-list-panel {
        /* When stacked, the file list shouldn't be too tall */
        max-height: 250px;
        overflow-y: auto; /* Ensure it's scrollable */
    }
    
    .preview-panel {
        min-height: 300px; /* Give the preview a decent minimum height */
    }

    /* Make text even more readable on very small screens */
    #previewContent pre {
        font-size: 0.85rem;
    }
}

/* --- Creator State --- */
#creatorArea {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.drop-zone {
    border: 3px dashed var(--border-color);
    border-radius: var(--border-radius);
    padding: 60px 20px;
    text-align: center;
    cursor: pointer;
    background-color: var(--light-gray-bg);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.drop-zone.dragover {
    background-color: #e9f2ff;
    border-color: var(--primary-blue);
}

.drop-zone p {
    margin: 0;
    font-size: 1.2rem;
    color: #495057;
    pointer-events: none; /* Makes sure the drop event triggers on the div */
}

.staged-files-list {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    min-height: 100px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
}

.creator-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background-color: var(--light-gray-bg);
    padding: 15px;
    border-radius: var(--border-radius);
}

.creator-options input {
    flex-grow: 1; /* Inputs take available space */
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    min-width: 150px;
}
.creator-options button {
    flex-shrink: 0; /* Prevents button from shrinking */
}

/* --- Global Loader Overlay --- */
.global-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: opacity 0.2s ease;
}
.loader-spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--primaire-kleur);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}
.global-loader p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/*
========================================
CSS FOR THE "WHAT'S MY IP" TOOL
========================================
*/

/* --- Main Info Grid Layout --- */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Creates a two-column layout */
    gap: 20px; /* Space between the grid items */
    margin-top: 30px; /* Space below the page subtitle */
    text-align: left; /* Aligns text to the left within items */
}

/* --- Individual Info Items --- */
.info-item {
    background-color: var(--licht-grijs); /* A very light grey background */
    padding: 20px;
    border-radius: var(--border-radius, 6px); /* Uses existing border-radius variable */
    border: 1px solid var(--rand-kleur, #dee2e6); /* Uses existing border color */
    display: flex;
    flex-direction: column; /* Stacks label and value vertically */
    gap: 8px; /* Space between the label and the value */
}

/* --- Item Content Styling --- */
.info-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--donker-grijs); /* Dark grey for good contrast */
}

.info-value {
    font-size: 1.2rem;
    font-weight: 400;
    color: #000;
    word-break: break-all; /* Prevents long values from overflowing */
}

/* --- Specific Value Styling --- */
.info-value.ip-value {
    font-weight: 600; /* Makes the IP address stand out more */
    color: var(--primaire-kleur); /* Uses the primary site color */
}

/* --- Layout Modifiers --- */
.info-item.full-width {
    grid-column: 1 / -1; /* Makes the element span both columns */
}

/* --- Responsive Adjustments --- */
@media (max-width: 600px) {
    .info-grid {
        grid-template-columns: 1fr; /* Stacks items into a single column on small screens */
    }
}
/*
========================================
CSS FOR THE PASSWORD GENERATOR TOOL
========================================
*/

/* --- Password Display Area --- */
.password-display-container {
    display: flex;
    align-items: center;
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    background-color: var(--licht-grijs);
    margin-bottom: 10px; /* Space before strength meter */
        overflow: hidden; /* ADDED: Ensures the container's rounded corners clip any overflow */
        min-width: 0; /* ADDED: The key fix. Allows the input field to shrink below its content size. */

}

#passwordDisplay {
    flex-grow: 1; /* Takes up all available space */
    border: none;
    background: transparent;
    padding: 15px;
    font-size: 1.5rem; /* Large, easy-to-read font */
    color: var(--donker-grijs);
    outline: none;
}

#copyButton {
     flex-shrink: 0; /* ADDED: Prevents the copy button from ever being squished or pushed out. */
    border: none;
    background: transparent;
    font-size: 1.5rem;
    padding: 0 15px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

#copyButton:hover {
    opacity: 1;
}

/* --- Password Strength Meter --- */
.strength-meter {
    width: 100%;
    height: 10px;
    background-color: #e9ecef;
    border-radius: 100px;
    overflow: hidden; /* Ensures the bar inside stays rounded */
    margin-bottom: 30px; /* Space before controls */
}

.strength-bar {
    height: 100%;
    width: 0; /* Starts empty */
    border-radius: 100px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

/* Strength Colors (to be applied via JS) */
.strength-bar.very-weak { width: 25%; background-color: #dc3545; }
.strength-bar.weak { width: 50%; background-color: #fd7e14; }
.strength-bar.medium { width: 75%; background-color: #ffc107; }
.strength-bar.strong { width: 100%; background-color: #28a745; }


/* --- Controls Section --- */
.controls-container {
    display: grid;
    grid-template-columns: 1fr; /* Default single column */
    gap: 25px;
    text-align: left;
    margin-bottom: 30px; /* Space before the generate button */
}

/* On wider screens, show controls side-by-side */
@media (min-width: 600px) {
    .controls-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    #passwordDisplay {
        font-size: 1.1rem; /* Reduces font size on small screens to make more of the password visible */
    }
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between label and input */
}

.control-group label {
    font-weight: 600;
}

/* --- Slider Customization --- */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #ddd;
    border-radius: 5px;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
}

input[type="range"]:hover {
    opacity: 1;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primaire-kleur);
    cursor: pointer;
    border-radius: 50%;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primaire-kleur);
    cursor: pointer;
    border-radius: 50%;
    border: none;
}


/* --- Checkboxes Customization --- */
.control-group.checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 15px; /* Space between individual checkboxes */
}

.control-group.checkboxes div {
    display: flex;
    align-items: center;
}

.control-group.checkboxes input[type="checkbox"] {
    width: 1.2em;
    height: 1.2em;
    margin-right: 8px;
    cursor: pointer;
}

.control-group.checkboxes label {
    font-weight: 400; /* Regular weight for checkbox labels */
    cursor: pointer;
}

/* --- Main Action Button --- */
#generateButton {
    width: 100%; /* Makes the button full-width */
    padding: 15px;
    font-size: 1.2rem;
}
/*
========================================
CSS FOR THE UUID GENERATOR TOOL
========================================
*/

/* --- Controls Layout --- */
.controls-grid {
    display: grid;
    /* Creates a responsive grid that wraps items as needed */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 25px; /* Space between controls and the generate button */
    text-align: left;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Space between label and input */
}

.form-group label {
    font-weight: 600;
    font-size: 0.95rem;
}

/* --- Input Styling --- */
.control-input {
    width: 100%;
    padding: 12px;
    border-radius: var(--border-radius, 6px);
    border: 1px solid var(--rand-kleur, #dee2e6);
    background-color: var(--white);
    font-size: 1rem;
    -webkit-appearance: none; /* Removes default system styling */
    -moz-appearance: none;
    appearance: none;
}

/* Custom dropdown arrow for selects */
select.control-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

/* Disables the custom arrow for multiple selects, though not used here */
select.control-input:disabled {
    opacity: 0.65;
    background-color: #e9ecef;
}


/* --- Main Generate Button --- */
#generateButton {
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 1.1rem;
}

/* --- Result Area --- */
#resultArea {
    width: 100%;
    min-height: 200px;
    padding: 15px;
    border-radius: var(--border-radius, 6px);
    border: 1px solid var(--rand-kleur, #dee2e6);
    font-family: 'Courier New', Courier, monospace; /* Monospaced for alignment */
    font-size: 1rem;
    resize: vertical;
    background-color: var(--licht-grijs);
    line-height: 1.6; /* Improves readability */
}

#resultArea:focus {
    outline: 2px solid var(--primaire-kleur);
    border-color: var(--primaire-kleur);
}

/* --- Bottom Controls Bar --- */
.controls-bar {
    display: flex;
    justify-content: center; /* Centers the copy button */
    margin-top: 15px;
}

/* Secondary Button Style */
.knop-secundair {
    background-color: var(--licht-grijs);
    border-color: var(--rand-kleur);
    color: var(--donker-grijs);
}

.knop-secundair:hover {
    background-color: #e2e6ea;
    border-color: #dae0e5;
}
/*
========================================
CSS FOR THE UNIT CONVERTER TOOL
========================================
*/

/* --- Category Selector --- */
.category-selector {
    margin-bottom: 30px; /* Space between category and the main converter */
    text-align: left;
}

.category-selector label {
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

#categorySelect {
    width: 100%;
    max-width: 400px; /* Prevents it from becoming too wide on large screens */
    padding: 12px;
    font-size: 1.1rem;
    border-radius: var(--border-radius, 6px);
    border: 1px solid var(--rand-kleur, #dee2e6);
    /* Custom dropdown arrow from UUID generator CSS can be reused if applied globally */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* --- Main Converter Grid Layout --- */
.converter-grid {
    display: grid;
    /* Defines a flexible three-column layout */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}

/* --- Input/Select Styling --- */
.converter-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.converter-side input,
.converter-side select {
    width: 100%;
    padding: 15px;
    font-size: 1.2rem;
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
}

.converter-side input {
    font-size: 1.8rem; /* Larger font for the number */
    font-weight: 600;
    color: var(--primaire-kleur);
}

/* --- Swap Button Styling --- */
.converter-swap {
    display: flex;
    align-items: center;
    justify-content: center;
}

#swapButton {
    background-color: var(--licht-grijs);
    border: 1px solid var(--rand-kleur, #dee2e6);
    color: var(--donker-grijs);
    border-radius: 50%; /* Makes it a circle */
    width: 50px;
    height: 50px;
    font-size: 1.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#swapButton:hover {
    background-color: #e2e6ea;
    transform: rotate(180deg); /* Adds a nice animation on hover */
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .converter-grid {
        /* Stacks the grid items on smaller screens */
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 15px;
    }

    /* Flips the order of the swap button on mobile for better flow */
    .converter-swap {
        order: 2;
    }
    .converter-side:first-child {
        order: 1;
    }
    .converter-side:last-child {
        order: 3;
    }

    #swapButton {
        transform: rotate(90deg); /* Rotates the icon for vertical flow */
    }
    #swapButton:hover {
        transform: rotate(270deg); /* Adjusts hover animation */
    }
}
/*
========================================
CSS FOR THE TEXT DIFF CHECKER TOOL
========================================
*/

/* --- Dual-Pane Layout for Inputs --- */
.diff-input-container {
    display: flex;
    flex-wrap: wrap; /* Allows panes to stack on smaller screens */
    gap: 20px;
    width: 100%;
    margin-bottom: 20px; /* Space before the compare button */
}

.text-pane {
    flex: 1; /* Each pane takes up equal space */
    min-width: 300px; /* Ensures panes don't get too squished before wrapping */
    display: flex;
    flex-direction: column;
    text-align: left;
}

.text-pane label {
    font-weight: 600;
    margin-bottom: 8px;
}

.text-pane textarea {
    width: 100%;
    min-height: 350px;
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    padding: 15px;
    font-family: 'Courier New', Courier, monospace; /* Monospaced font is crucial for diffs */
    font-size: 1rem;
    resize: vertical; /* Allow user to resize vertically */
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
}

.text-pane textarea:focus {
    border-color: var(--primaire-kleur);
    box-shadow: 0 0 0 0.2rem rgba(30, 46, 62, 0.25);
    outline: none;
}

/* --- Compare Button --- */
#compareButton {
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 1.1rem;
}

/* --- Result Display Area --- */
#result-area {
    text-align: left;
    margin-top: 30px;
}

#result-area h3 {
    margin-bottom: 10px;
}

.diff-output-box {
    background-color: var(--licht-grijs);
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    padding: 20px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    line-height: 1.6;
    white-space: pre-wrap;  /* Preserves whitespace and wraps lines */
    word-wrap: break-word; /* Breaks long words to prevent overflow */
}

/* --- Styling for the Differences --- */
.diff-output-box del {
    background-color: #ffdce0; /* Light red background for deletions */
    color: #86181d;
    text-decoration: line-through; /* Keep the strike-through */
}

.diff-output-box ins {
    background-color: #d4edda; /* Light green background for insertions */
    color: #155724;
    text-decoration: none; /* No underline, the background is enough */
}

/* --- General Helper (if not already present) --- */
.hidden {
    display: none !important;
}
/*
========================================
CSS FOR THE SVG TO CSS CONVERTER
========================================
*/

/* --- Dual-Pane Editor Layout --- */
.editor-container {
    display: flex;
    flex-wrap: wrap; /* Allows panes to stack on smaller screens */
    gap: 20px;
    width: 100%;
    margin-bottom: 25px; /* Space before the controls bar */
}

.editor-pane {
    flex: 1; /* Each pane takes up equal space */
    min-width: 300px; /* A good breakpoint for when panes should stack */
    display: flex;
    flex-direction: column;
    text-align: left;
}

.editor-pane label {
    font-weight: 600;
    margin-bottom: 8px;
}

/* --- General Textarea Styling --- */
.editor-pane textarea {
    width: 100%;
    min-height: 400px;
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    padding: 15px;
    font-family: 'Courier New', Courier, monospace; /* Monospaced font for code */
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
}

.editor-pane textarea:focus {
    border-color: var(--primaire-kleur);
    box-shadow: 0 0 0 0.2rem rgba(30, 46, 62, 0.25);
    outline: none;
}

/* Specific styling for the read-only output area */
#cssOutput {
    background-color: var(--licht-grijs);
    color: #333;
}

/* --- Controls Bar & Buttons --- */
.controls-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; /* Ensures buttons wrap neatly on small screens */
}

/* Secondary button style (if not already defined globally) */
.knop-secundair {
    background-color: var(--licht-grijs);
    border-color: var(--rand-kleur);
    color: var(--donker-grijs);
}

.knop-secundair:hover {
    background-color: #e2e6ea;
}

/* --- Feedback Message Styling --- */
.feedback {
    padding: 12px 15px;
    border-radius: var(--border-radius, 6px);
    font-weight: 500;
    text-align: center;
}

.feedback.succes {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.feedback.fout {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
/*
========================================
CSS FOR THE REGEX TESTER TOOL
========================================
*/

/* --- Regex Input Container --- */
.regex-input-container {
    display: flex;
    align-items: center;
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    background-color: var(--white);
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2rem;
    margin-bottom: 20px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
}

.regex-input-container:focus-within {
    border-color: var(--primaire-kleur);
    box-shadow: 0 0 0 0.2rem rgba(30, 46, 62, 0.25);
}

.regex-input-container span {
    padding: 10px;
    font-weight: 600;
    color: #999;
    user-select: none; /* Prevents the slashes from being selected */
}

#regexPattern {
    flex-grow: 1; /* Takes up most of the space */
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: inherit; /* Inherits font styles from container */
    font-family: inherit;
    outline: none;
}

#regexFlags {
    width: 60px; /* Fixed width for flags */
    border: none;
    border-left: 1px solid var(--rand-kleur, #dee2e6);
    background: transparent;
    padding: 10px;
    font-size: inherit;
    font-family: inherit;
    outline: none;
    text-align: center;
}

/* --- Test String & Result Containers --- */
.test-string-container,
.result-container {
    text-align: left;
    margin-bottom: 20px;
}

.test-string-container label,
.result-container label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

#testString {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
}

/* --- Result Display Box --- */
.result-box {
    width: 100%;
    min-height: 150px;
    padding: 15px;
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    line-height: 1.6;
    background-color: var(--licht-grijs);
    white-space: pre-wrap;  /* Preserves whitespace and wraps lines */
    word-wrap: break-word; /* Breaks long words */
}

/* --- Match Highlighting --- */
.result-box .match {
    background-color: #ffe082; /* A pleasant yellow for highlighting */
    border-radius: 3px;
    box-shadow: 0 0 0 1px #ffca28; /* A subtle border around the highlight */
    font-weight: 600;
}
/*
========================================
CSS FOR THE SORT LINES TOOL
========================================
*/

/* --- Main Text Input Area --- */
#textInput {
    width: 100%;
    min-height: 250px; /* A good default height */
    padding: 15px;
    margin-bottom: 25px; /* Space before the action buttons */
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical; /* Allow vertical resizing */
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
}

#textInput:focus {
    border-color: var(--primaire-kleur);
    box-shadow: 0 0 0 0.2rem rgba(30, 46, 62, 0.25);
    outline: none;
}

/* --- Main Action Button Grid --- */
.button-grid {
    display: grid;
    /* 
     * Creates a responsive grid. On large screens, it can be up to 4 columns.
     * On smaller screens, it will automatically wrap to 2 or 1 column.
     * minmax(200px, 1fr) means each column will be at least 200px wide.
    */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 20px; /* Space before the secondary controls bar */
}

/* Style for the buttons within the grid to ensure they are full-width */
.button-grid .knop {
    width: 100%; /* Makes each button fill its grid cell */
    padding-top: 12px;
    padding-bottom: 12px;
}


/* --- Bottom Controls Bar --- */
.controls-bar {
    display: flex;
    justify-content: center; /* Centers the copy/clear buttons */
    gap: 10px;
    flex-wrap: wrap;
}

/* Secondary Button Style (if not already defined globally) */
.knop-secundair {
    background-color: var(--licht-grijs);
    border-color: var(--rand-kleur);
    color: var(--donker-grijs);
}

.knop-secundair:hover {
    background-color: #e2e6ea;
}
/*
========================================
CSS FOR THE PDF METADATA EDITOR
========================================
*/

/* --- Left Column: Upload & Preview Area --- */
.upload-preview-area {
    flex: 1.5; /* Makes this column slightly wider than the controls */
    display: flex; /* Enables centering of content */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--licht-grijs, #f8f9fa);
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    min-height: 400px;
    position: relative;
    overflow: hidden;
    padding: 20px;
}

.upload-label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 3px dashed var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    transition: background-color 0.2s, border-color 0.2s;
}

.upload-label:hover,
.upload-label.drag-over {
    background-color: #e9f2ff;
    border-color: var(--primary-blue, #007bff);
}

.upload-label h3 {
    margin: 15px 0 5px 0;
}
.upload-label p {
    margin: 0;
    color: #6c757d;
}


/* --- File Info Display (After Upload) --- */
.file-info-display {
    display: flex; /* Hidden by default, shown via JS */
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.file-info-display .file-icon {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    width: 80px;
    height: 80px;
    line-height: 80px; /* Vertically centers the text */
    border-radius: 10px;
    text-align: center;
}
.file-info-display .pdf-icon {
    background-color: #ee2d24; /* A typical PDF red */
}

.file-info-display h4 {
    margin: 15px 0 5px 0;
    word-break: break-all; /* Prevents long filenames from overflowing */
}
.file-info-display p {
    margin: 0;
    color: #6c757d;
}

.button-subtle {
    background: none;
    border: none;
    color: var(--primary-blue, #007bff);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    margin-top: 15px;
    font-size: 0.9rem;
}


/* --- Right Column: Converter Controls --- */
.converter-controls {
    flex: 1; /* Takes up the remaining space */
    min-width: 300px; /* Prevents it from getting too narrow */
}

/* This structure makes the button stick to the bottom */
.converter-controls form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.converter-controls fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1; /* Pushes the button down */
    transition: opacity 0.3s ease;
}

/* Visually indicates that the form is disabled */
.converter-controls fieldset:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.control-group {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.control-group label {
    margin-bottom: 8px;
    font-weight: 500;
    color: #495057;
}
.control-group input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    font-size: 1rem;
}
.control-group input[type="text"]:focus {
    border-color: var(--primaire-kleur);
    box-shadow: 0 0 0 0.2rem rgba(30, 46, 62, 0.25);
    outline: none;
}

/* --- Main Action Button --- */
#updateBtn {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    margin-top: 20px; /* Ensures space even if form fields are short */
}

/* Re-using existing button styles for consistency */
.button.button-primary {
    background-color: var(--primary-blue, #007bff);
    color: white;
    border-color: var(--primary-blue, #007bff);
}
.button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
/*
========================================
CSS FOR THE MARKDOWN CONVERTER
========================================
*/

/* --- Top Controls Bar --- */
.controls-bar {
    display: flex;
    justify-content: flex-start; /* Aligns buttons to the left */
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px; /* Space between controls and editor panes */
    padding-bottom: 15px;
    border-bottom: 1px solid var(--rand-kleur, #dee2e6);
}

/* Secondary button style (if not already defined globally) */
.knop-secundair {
    background-color: var(--licht-grijs);
    border-color: var(--rand-kleur);
    color: var(--donker-grijs);
}

.knop-secundair:hover {
    background-color: #e2e6ea;
}


/* --- Dual-Pane Editor Layout --- */
.editor-container {
    display: flex;
    flex-wrap: wrap; /* Allows panes to stack on smaller screens */
    gap: 20px;
    width: 100%;
}

.editor-pane {
    flex: 1; /* Each pane takes up equal space */
    min-width: 300px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.editor-pane label {
    font-weight: 600;
    margin-bottom: 8px;
}

/* --- Left Pane: Markdown Input --- */
#markdownInput {
    width: 100%;
    min-height: 500px; /* Generous height for editing */
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    padding: 15px;
    font-family: 'Courier New', Courier, monospace; /* Monospaced font for raw text */
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
}

#markdownInput:focus {
    border-color: var(--primaire-kleur);
    box-shadow: 0 0 0 0.2rem rgba(30, 46, 62, 0.25);
    outline: none;
}

/* --- Right Pane: HTML Preview --- */
.preview-pane {
    width: 100%;
    min-height: 500px;
    background-color: var(--white);
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    padding: 15px 20px;
    overflow-y: auto; /* Add scrollbar if content overflows */
}

/* --- TYPOGRAPHY STYLES FOR HTML PREVIEW --- */
/* This is crucial for a good preview experience */
.preview-pane > *:first-child {
    margin-top: 0;
}
.preview-pane h1, .preview-pane h2, .preview-pane h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.2;
}
.preview-pane h1 { font-size: 2em; }
.preview-pane h2 { font-size: 1.5em; border-bottom: 1px solid #eee; padding-bottom: 0.3em;}
.preview-pane h3 { font-size: 1.25em; }
.preview-pane p {
    margin-bottom: 1em;
    line-height: 1.6;
}
.preview-pane a {
    color: var(--primary-blue, #007bff);
    text-decoration: underline;
}
.preview-pane ul, .preview-pane ol {
    margin-bottom: 1em;
    padding-left: 2em;
}
.preview-pane li {
    margin-bottom: 0.4em;
}
.preview-pane blockquote {
    margin: 0 0 1em 0;
    padding: 0.5em 1em;
    border-left: 0.25em solid #dfe2e5;
    background-color: var(--licht-grijs, #f8f9fa);
    color: #6a737d;
}
.preview-pane hr {
    height: 0.25em;
    padding: 0;
    margin: 24px 0;
    background-color: #e1e4e8;
    border: 0;
}
/* For inline code */
.preview-pane code {
    font-family: 'Courier New', Courier, monospace;
    background-color: rgba(27,31,35,.05);
    border-radius: 3px;
    padding: .2em .4em;
    font-size: 85%;
}
/* For code blocks */
.preview-pane pre {
    padding: 16px;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f6f8fa;
    border-radius: 3px;
}
.preview-pane pre code {
    padding: 0;
    font-size: 100%;
    background-color: transparent;
    border: 0;
}


/* --- Feedback Message Styling --- */
.feedback {
    padding: 12px 15px;
    border-radius: var(--border-radius, 6px);
    font-weight: 500;
    text-align: center;
}
.feedback.succes {
    background-color: #d4edda;
    color: #155724;
}
/*
========================================
CSS FOR THE JWT DECODER TOOL
========================================
*/

/* --- Main Two-Pane Layout --- */
.jwt-layout {
    display: grid;
    /* Creates two equal-width columns on larger screens */
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    width: 100%;
}

.jwt-pane {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevents overflow issues within the grid */
}

.jwt-pane h3 {
    margin-top: 0;
    margin-bottom: 10px;
    text-align: left;
}

/* --- Left Pane: Encoded Input --- */
#encodedToken {
    width: 100%;
    flex-grow: 1; /* Allows the textarea to fill the pane's height */
    min-height: 250px;
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    padding: 15px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
}

#encodedToken:focus {
    border-color: var(--primaire-kleur);
    box-shadow: 0 0 0 0.2rem rgba(30, 46, 62, 0.25);
    outline: none;
}


/* --- Right Pane: Decoded Output --- */
.decoded-output {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.decoded-output label {
    font-weight: 600;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 5px;
}

.decoded-output label:first-child {
    margin-top: 0;
}

.code-box {
    width: 100%;
    flex-grow: 1;
    min-height: 120px;
    background-color: var(--licht-grijs, #f8f9fa);
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    padding: 15px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: pre-wrap;   /* Preserves whitespace and wraps long lines */
    word-break: break-all; /* Breaks long strings to prevent overflow */
    margin: 0;
}

/* --- Visual Styling for JWT Parts --- */
#decodedHeader {
    border-left: 4px solid #00A2FF; /* Blue for Header */
}
#decodedPayload {
    border-left: 4px solid #CB2B8C; /* Pink/Purple for Payload */
}

/* --- Feedback Message Styling --- */
.feedback {
    padding: 12px 15px;
    border-radius: var(--border-radius, 6px);
    font-weight: 500;
    text-align: center;
    margin-top: 15px;
}

.feedback.fout {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.hidden {
    display: none !important;
}

/* --- Responsive Adjustments --- */
@media (max-width: 800px) {
    .jwt-layout {
        grid-template-columns: 1fr; /* Stacks the panes into a single column */
        gap: 25px;
    }
}
/*
========================================
CSS FOR THE GRADIENT GENERATOR
========================================
*/

/* --- Main Two-Column Layout --- */
.generator-layout {
    display: flex;
    gap: 30px;
    flex-wrap: wrap; /* Allows stacking on smaller screens */
    min-height: 500px;
}

/* --- Left Pane: Gradient Preview --- */
.gradient-preview {
    flex: 1.5; /* Makes the preview area larger than the controls */
    min-width: 300px;
    border-radius: var(--border-radius, 6px);
    border: 1px solid var(--rand-kleur, #dee2e6);
    background-color: #eee;
    /* Checkerboard pattern to show transparency */
    background-image:
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(135deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(135deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
    transition: background 0.2s ease; /* For the gradient itself */
}


/* --- Right Pane: Controls Panel --- */
.generator-controls {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.control-group > label {
    font-weight: 600;
    font-size: 0.95rem;
}

.control-row {
    display: flex;
    gap: 20px;
}
.control-row > .control-group {
    flex: 1;
}

/* --- Specific Control Styling --- */
.radio-group {
    display: flex;
    gap: 15px;
    align-items: center;
}
.radio-group input {
    margin-right: 5px;
}

.range-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
.range-wrapper input[type="range"] {
    flex-grow: 1;
}
.range-wrapper span {
    font-family: 'Courier New', Courier, monospace;
    background-color: var(--licht-grijs);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}


/* --- Dynamic Color Stops --- */
.color-stops-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.color-stop {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Custom styling for color input */
input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: 6px;
    cursor: pointer;
}
input[type="color"]::-webkit-color-swatch {
    border-radius: 5px;
    border: none;
}
input[type="color"]::-moz-color-swatch {
    border-radius: 5px;
    border: none;
}

.color-stop input[type="range"] {
    flex-grow: 1;
}

.button-remove {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--fout-kleur, #dc3545);
    cursor: pointer;
    padding: 0 5px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.button-remove:hover {
    opacity: 1;
}

.button-add {
    background-color: var(--licht-grijs);
    border: 1px dashed var(--rand-kleur);
    color: var(--donker-grijs);
    justify-content: center;
    width: 100%;
    padding: 8px;
}
.button-add:hover {
    background-color: #e2e6ea;
    border-style: solid;
}


/* --- CSS Output & Copy Button --- */
.url-wrapper {
    display: flex;
}

.url-wrapper input {
    flex-grow: 1;
    border: 1px solid var(--border-color);
    border-right: none;
    padding: 9px 12px;
    border-radius: var(--border-radius, 6px) 0 0 var(--border-radius, 6px);
    background-color: var(--licht-grijs, #f8f9fa);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
}
.url-wrapper input:focus {
    outline: none;
}

.url-wrapper .button {
    border-radius: 0 var(--border-radius, 6px) var(--border-radius, 6px) 0;
}


/* --- Responsive Adjustments --- */
@media (max-width: 900px) {
    .generator-layout {
        flex-direction: column; /* Stack vertically */
    }
    .gradient-preview {
        min-height: 250px; /* Adjust height for vertical layout */
        flex: auto;
    }
}
/*
========================================
CSS FOR THE DUPLICATE LINE REMOVER
========================================
*/

/* --- Main Text Input Area --- */
#textInput {
    width: 100%;
    min-height: 250px; /* A good default height for pasting lists */
    padding: 15px;
    margin-bottom: 20px; /* Space before the options bar */
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical; /* Allow vertical resizing by the user */
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
}

#textInput:focus {
    border-color: var(--primaire-kleur);
    box-shadow: 0 0 0 0.2rem rgba(30, 46, 62, 0.25);
    outline: none;
}

/* --- Options & Main Action Bar --- */
.options-bar {
    display: flex;
    justify-content: space-between; /* Pushes checkbox left and button right */
    align-items: center;
    flex-wrap: wrap; /* Allows items to stack on small screens */
    gap: 15px;
    margin-bottom: 20px; /* Space before the secondary controls bar */
    padding: 15px;
    background-color: var(--licht-grijs, #f8f9fa);
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between checkbox and label */
}

.checkbox-group input[type="checkbox"] {
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
}

.checkbox-group label {
    font-weight: 500;
    cursor: pointer;
    user-select: none; /* Prevents text selection on click */
}


/* --- Bottom Controls Bar --- */
.controls-bar {
    display: flex;
    justify-content: center; /* Centers the copy/clear buttons */
    gap: 10px;
    flex-wrap: wrap;
}

/* Secondary Button Style (if not already defined globally) */
.knop-secundair {
    background-color: var(--licht-grijs);
    border-color: var(--rand-kleur);
    color: var(--donker-grijs);
}

.knop-secundair:hover {
    background-color: #e2e6ea;
}


/* --- Text Area Panes --- */
.textarea-container {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0; /* Prevents textareas from overflowing their grid cell */
}

.textarea-container label {
    font-weight: 600;
    margin-bottom: 8px;
}

.textarea-container textarea {
    width: 100%;
    height: 100%; /* Fills the container's available height */
    flex-grow: 1; /* Crucial for making the textarea fill the space vertically */
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    padding: 15px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: none; /* Disable user resizing to maintain the clean layout */
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075);
}

.textarea-container textarea:focus {
    border-color: var(--primaire-kleur);
    box-shadow: 0 0 0 0.2rem rgba(30, 46, 62, 0.25);
    outline: none;
}

/* --- Middle Action Panel --- */
.action-panel {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the buttons */
    align-items: center;
    gap: 12px;
}

.action-panel .button {
    width: 150px; /* Gives all buttons a consistent width */
    justify-content: center; /* Centers text/icons within the button */
}


/* --- Informational Text Box (2-column layout) --- */
.text-box-inner {
    /* If this isn't already a grid, add this */
    display: flex;
    flex-direction: column;
}


/* --- Responsive Adjustments --- */
@media (max-width: 900px) {
    .converter-layout {
        /* Stack everything into a single column on smaller screens */
        grid-template-columns: 1fr;
        min-height: auto; /* Allow height to be determined by content */
    }

    .textarea-container textarea {
        min-height: 250px; /* Give textareas a sensible height on mobile */
        resize: vertical; /* Re-enable resizing on mobile where layout is simpler */
    }

    .action-panel {
        flex-direction: row; /* Arrange buttons horizontally */
        flex-wrap: wrap; /* Allow buttons to wrap onto the next line */
        justify-content: center;
        padding: 10px 0;
    }

    .action-panel .button {
        width: auto; /* Allow buttons to size to their content */
        flex-grow: 1; /* Let buttons grow to fill the available space */
    }

    .text-box-inner {
        /* Stack the informational text columns */
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
/*
========================================
CSS FOR THE BARCODE GENERATOR TOOL
========================================
*/

/* --- Main Two-Column Layout --- */
.generator-layout {
    display: flex;
    gap: 30px;
    flex-wrap: wrap; /* Allows stacking on smaller screens */
}

/* --- Left Pane: Barcode Preview --- */
.barcode-preview-area {
    flex: 1.5;
    min-width: 300px;
    min-height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--licht-grijs, #f8f9fa);
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.barcode-container svg {
    width: 100%;
    height: auto;
}

.preview-placeholder {
    text-align: center;
    color: #6c757d;
}
.preview-placeholder p {
    margin: 0;
}

.error-message {
    color: var(--fout-kleur, #dc3545);
    font-weight: 500;
    text-align: center;
}


/* --- Right Pane: Controls Panel --- */
.generator-controls {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.control-group label {
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}
.control-group input[type="text"],
.control-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    font-size: 1rem;
}
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.checkbox-group input[type="checkbox"] {
    width: 1.2em;
    height: 1.2em;
}

/* --- Options Grid for smaller controls --- */
.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.options-grid .full-span {
    grid-column: 1 / -1;
}

/* --- Action Buttons Layout --- */
.action-buttons {
    margin-top: auto; /* Pushes buttons to the bottom */
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#generateBtn {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
}
.download-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.download-buttons .button {
    justify-content: center;
}
.button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* --- CSS for helper text (Add this) --- */
.input-helper-text {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 5px;
    min-height: 1.2em; /* Prevents layout shift when text appears */
}

/* This makes the left and right columns responsive */
.image-upload-container, .results-area {
    flex: 1; /* Each column takes up equal space */
    min-width: 300px; /* A good minimum width before they stack vertically */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the content like buttons and text */
}

/* This is the key fix for your image */
#sourcePreview {
    max-width: 100%; /* Ensures the image is never wider than its container */
    height: auto;    /* Maintains the correct aspect ratio */
    display: block;  /* Removes extra space below the image */
    margin-bottom: 20px; /* Adds some space between the image and the button below it */
    border-radius: 8px; /* Optional: gives the preview a nice rounded corner */
}

.results-area {
    text-align: left;
    align-items: stretch; 
}

.results-area .button {
    width: 100%;
    justify-content: center;
}

.results-area textarea {
    width: 100%;
    margin-bottom: 10px;
}
/*
========================================
CSS FOR THE IMAGE BACKGROUND REMOVER
========================================
*/

/* Container for the final result image */
.result-image-container {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--rand-kleur);
    border-radius: var(--border-radius);
    padding: 10px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Checkerboard pattern to easily see transparency */
    background-image:
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(135deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(135deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
}

/* --- THE FIX FOR YOUR IMAGE --- */
#resultImage {
    max-width: 100%; /* Ensures the image is never wider than its container */
    height: auto;    /* Maintains the correct aspect ratio */
    display: block;  /* Removes extra space below the image */
}

/*
========================================
CSS FOR THE IMAGE COMPRESSOR TOOL
========================================
*/

/* Main layout for the editor area */
#editor-area {
    display: flex;
    flex-wrap: wrap; /* Allows controls to stack below previews on small screens */
    gap: 30px;
    margin-top: 20px;
}

/* Container for the two image previews */
.image-previews {
    flex: 2; /* Takes up 2/3 of the space */
    min-width: 300px;
    display: flex;
    gap: 20px;
}

/* The box for a single preview (Original or Result) */
.preview-box {
    flex: 1; /* Each preview takes up half of the .image-previews space */
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* The direct container of the image, for styling purposes */
.img-container {
    flex-grow: 1; /* Allows the container to fill vertical space */
    width: 100%;
    padding: 10px;
    border: 1px solid var(--rand-kleur);
    border-radius: var(--border-radius);
    background-color: var(--licht-grijs);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px; /* Gives the box a nice minimum height */
}

/* --- THE FIX FOR BOTH IMAGES --- */
.preview-box img {
    max-width: 100%; /* Ensures the image is never wider than .img-container */
    height: auto;    /* Maintains the correct aspect ratio */
    display: block;  /* Removes extra space below the image */
}

/* Styling for the controls on the right */
.compression-controls {
    flex: 1; /* Takes up 1/3 of the space */
    min-width: 250px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.compression-controls #downloadButton {
    margin-top: auto; /* Pushes the download button to the bottom */
}

/*
========================================
CSS FOR THE IMAGE EDITOR TOOL
========================================
*/

/* --- Main Two-Column Layout --- */
.editor-layout {
    display: flex;
    gap: 30px;
    flex-wrap: wrap; /* Allows the controls to stack below the image on mobile */
    min-height: 500px; /* Gives the tool a nice default height */
}

/* --- Left Side: Main Image Area --- */
.editor-main {
    flex: 2; /* Takes up more space than the controls */
    min-width: 300px; /* Sets a good breakpoint for when to stack */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--licht-grijs);
    border: 1px solid var(--rand-kleur);
    border-radius: var(--border-radius);
    padding: 15px;
    overflow: hidden; /* Important for containing the image editor */
}

#image-container {
    width: 100%;
    height: 100%;
}

/* --- THE KEY FIX FOR THE IMAGE --- */
/* This targets both your original image and the one Cropper.js uses */
#image-to-edit {
    display: block;  /* Removes extra space below the image */
    max-width: 100%; /* Ensures the image is never wider than its container */
    height: auto;    /* Maintains the correct aspect ratio */
}

/* --- Right Side: Controls Sidebar --- */
.editor-controls {
    flex: 1;
    min-width: 280px; /* A good minimum width for the sidebar */
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.editor-controls fieldset {
    border: 1px solid var(--rand-kleur);
    border-radius: var(--border-radius);
    padding: 15px;
}
.editor-controls legend {
    font-weight: 600;
    padding: 0 5px;
}

.size-inputs {
    display: flex;
    gap: 10px;
}
.size-inputs > div {
    flex: 1;
}

.transform-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 8px;
}
.transform-buttons button {
    font-size: 1.5rem;
    padding: 5px;
}

#downloadButton {
    margin-top: auto; /* Pushes the download button to the bottom */
}

.blog_default_header{
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--white);
    align-items: center;
}
    .blog_default_header_inner{
        max-width: 800px;
        width: 100%;
        text-align: center;
        padding: 2em 1em;
    }

.tool_container{
    width: 100%;
    background-color: var(--secondary-kleur);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em 1em;
}
.tool_container > * > h1{
    display: none;
}
.tool_container > * > p{
    display: none;
}

.blog_default_content{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--white);
}
    .blog_default_content_inner{
        max-width: 800px;
        width: 100%;
        padding: 2em 1em;
    }
.blog_top_container{
    width: 100%;
    text-align: center;
    background-color: var(--secondary-kleur);
    padding: 3em 1em;
}
    .blog_top_container h1{
        color: var(--white);
        margin: auto;
        margin-bottom: 1em;
    }
.blog_all_container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em 1em;
}
    .blog_all_container_inner{
        max-width: 800px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1em;
    }
        .blog_all_item{
            padding: 1em .5em;
            border-bottom: 1px solid var(--donker-grijs);
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: .5em;
        }
        .blog_all_item h3{
            font-size: 1.5em;
        }
        .blog_all_item_btn_holder{
            max-width: 200px;
        }
        /*
========================================
CSS FOR THE VIDEO DOWNLOADER RESULT CARD
========================================
*/

.video-result-card {
    background-color: var(--licht-grijs, #f8f9fa);
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    padding: 15px;
    margin-top: 20px;
    display: flex;
    gap: 15px;
    text-align: left;
    align-items: flex-start;
}

.video-thumbnail {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--rand-kleur, #dee2e6);
}

.video-info {
    flex: 1; /* Takes up the remaining space */
    display: flex;
    flex-direction: column;
    height: 100%; /* Make info container fill the card height */
}

.video-title {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
}

.video-details {
    margin: 0 0 15px 0;
    font-size: 0.9rem;
    color: #6c757d;
}

.video-info .knop {
    margin-top: auto; /* Pushes the button to the bottom */
    text-decoration: none;
    text-align: center;
}

/* Responsive adjustments for the card */
@media (max-width: 480px) {
    .video-result-card {
        flex-direction: column; /* Stack items vertically */
        align-items: center;
        text-align: center;
    }

    .video-info {
        align-items: center;
    }

    .video-info .knop {
        width: 100%;
    }
}

/* A simple loader for the result area */
.loader {
    margin: 20px auto;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--primaire-kleur);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/*
========================================
CSS FOR THE AUDIO CONVERTER RESULT AREA
========================================
*/
.download-result-area {
    width: 100%;
    max-width: 500px; /* Prevents it from being too wide on desktop */
    margin: 20px auto 0 auto; /* Centers the block */
    padding: 20px;
    background-color: var(--licht-grijs, #f8f9fa);
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
    text-align: center;
}

.download-result-area h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.download-result-area .download-filename {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    color: #333;
    background-color: #fff;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid var(--rand-kleur, #dee2e6);
    margin-bottom: 20px;
    word-break: break-all; /* This is the key fix for long filenames */
}

.download-result-area .knop {
    width: 100%;
    max-width: 300px; /* Give the button a max width */
    text-decoration: none;
}
/*
========================================
CSS FOR THE AUDIO TRIMMER TOOL
========================================
*/

/* Main wrapper for the controls below the waveform */
.trimmer-controls-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allows items to stack on mobile */
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10px;
    background-color: var(--licht-grijs, #f8f9fa);
    border-radius: 0 0 var(--border-radius, 6px) var(--border-radius, 6px);
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-top: none;
    margin-top: -5px; /* Neatly tucks it under the waveform's border */
}

/* Container for Play/Stop buttons */
.playback-controls {
    display: flex;
    gap: 10px;
}

.playback-button {
    width: 50px;
    height: 50px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Container for time input fields */
.time-inputs {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-grow: 1; /* Allows it to take up space */
    justify-content: flex-end;
}
.time-inputs .form-group {
    min-width: 120px;
    margin-bottom: 0;
}
.time-inputs label {
    font-size: 0.9em;
    text-align: center;
}
.time-inputs .time-input {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    padding: 8px;
}

/* CSS-based icons so we don't need Font Awesome */
.icon-play, .icon-pause, .icon-stop {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
}

.icon-play {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center;
}
.icon-pause {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z'/%3E%3C/svg%3E") no-repeat center;
}
.icon-stop {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6h12v12H6z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6h12v12H6z'/%3E%3C/svg%3E") no-repeat center;
}


/* Responsive Adjustments */
@media (max-width: 600px) {
    .trimmer-controls-wrapper {
        flex-direction: column;
        gap: 15px;
        align-items: stretch; /* Make items full-width */
    }
    .playback-controls, .time-inputs {
        justify-content: center;
    }
    .time-inputs {
        gap: 10px;
    }
    .time-inputs .form-group {
        flex: 1; /* Allow start/end times to share space evenly */
    }
}
/*
========================================
CSS FOR THE AUDIO JOINER SORTABLE LIST
========================================
*/
.sortable-list {
    list-style-type: none;
    padding: 0;
    border: 1px solid var(--rand-kleur, #dee2e6);
    border-radius: var(--border-radius, 6px);
}

.sortable-item {
    padding: 12px 15px;
    background-color: #fff;
    border-bottom: 1px solid var(--rand-kleur, #dee2e6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    transition: background-color 0.2s ease;
}

.sortable-list li:last-child {
    border-bottom: none;
}

.sortable-item.dragging-over {
    background-color: #e9f2ff;
}

.sortable-item .remove-btn {
    cursor: pointer;
    background: none;
    border: none;
    color: var(--fout-kleur, #dc3545);
    font-size: 1.2rem;
    padding: 5px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.sortable-item .remove-btn:hover {
    opacity: 1;
}