/* =================================
   PAGE
================================= */

body{
    background:#f5f7fb;
    font-family:'Segoe UI',sans-serif;
}

/* =================================
   MAIN CARD
================================= */

.converter-card{
    border:none;
    border-radius:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* =================================
   TITLE
================================= */

h1{
    font-size:52px;
    font-weight:700;
    color:#4f46e5;
}

.text-muted{
    font-size:15px;
}

/* =================================
   UPLOAD SECTION
================================= */

.upload-section{
    transition:0.3s ease;
}

/* =================================
   FREEZE UI
================================= */

.conversion-active{
    pointer-events:none;
    opacity:0.7;
}

/* =================================
   PROGRESS
================================= */

#progressSection{
    text-align:center;
}

.progress-bar{
    transition:width .25s linear;
}

/*================
   COMMON WIDTH
================================= */

#summaryCard,
#fileList,
.upload-area,
#progressSection,
#resultCard,
.merge-btn{
    width:70%;
    margin:auto;
    

}

/* =================================
   SUMMARY CARD
================================= */

.summary-card{
    border:none;
    border-radius:15px;
    background:#dbeafe;
}

.summary-card .card-body{
    padding:18px 25px;
    font-size:18px;
    font-weight:600;
}

/* =================================
   FILE LIST
================================= */

#fileList .card{
    border:none;
    border-radius:12px;
    margin-bottom:10px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

#fileList .card-body{
    padding:15px 20px;
}

.file-row .row{
    min-height:60px;
}

.file-row-name{
    font-size:16px;
    font-weight:600;
    display:flex;
    align-items:center;
}

.file-row-name i{
    color:#dc3545;
    font-size:22px;
    margin-right:10px;
}

.file-row-size{
    font-size:16px;
    font-weight:600;
}

/* =================================
   BUTTONS
================================= */

.btn-primary{
    background:linear-gradient(
        90deg,
        #2563eb,
        #7c3aed
    );
    border:none;
}

.btn-primary:hover{
    opacity:.9;
}

.btn-lg{
    border-radius:10px;
}

.preview-btn{
    min-width:90px;
    height:40px;
    font-weight:600;
}

.delete-btn{
    min-width:110px;
    height:42px;
    font-weight:600;
    font-size:15px;
}


/* ===================================
   UPLOAD AREA
=================================== */

.upload-area {

    background: #eff6ff;

    border: 2px dashed #2563eb;

    border-radius: 20px;

    padding: 50px 30px;

    text-align: center;

    cursor: pointer;

    transition: all .3s ease;

}

.upload-area:hover {

    background: #dbeafe;

    border-color: #1d4ed8;

}

.upload-area.dragover {

    background: #bfdbfe;

    border-color: #1e40af;

    transform: scale(1.02);

}

.upload-icon {

    font-size: 70px;

    color: #2563eb;

    margin-bottom: 20px;

}

.upload-area h3 {

    color: #1d4ed8;

    font-size: 1.7rem;

    font-weight: 700;

    margin-bottom: 10px;

}

.upload-area p {

    color: #475569;

    margin-bottom: 8px;

}

.upload-area .btn-primary {

    background: #2563eb;

    border: none;

    border-radius: 10px;

    padding: 12px 30px;

    font-weight: 600;

}

.upload-area .btn-primary:hover {

    background: #1d4ed8;

}

.upload-area .btn-outline-primary {

    border: 2px solid #2563eb;

    color: #2563eb;

    border-radius: 10px;

    padding: 12px 30px;

    font-weight: 600;

}

.upload-area .btn-outline-primary:hover {

    background: #2563eb;

    color: #ffffff;

}

/* =================================
   MERGE BUTTON
================================= */

.merge-btn{
    height:55px;
    font-size:20px;
    font-weight:600;
    border-radius:12px;
}

/* =================================
   PROGRESS BAR
================================= */

.progress{
    height:25px;
    border-radius:50px;
}

.progress-bar{
    font-weight:600;
    
}

/* =================================
   RESULT CARD
================================= */

#resultCard .card{
    border:none;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

/* =================================
   PREVIEW MODAL
================================= */

#previewFrame{
    width:100%;
    height:700px;
    border:none;
}

/* =================================
   CARD HOVER
================================= */

.card{
    transition:.2s;
}

.card:hover{
    transform:translateY(-2px);
}

/* =================================
   DARK MODE
================================= */

.dark-mode{
    background:#111827;
    color:white;
}

.dark-mode .converter-card,
.dark-mode .card,
.dark-mode .modal-content{
    background:#1f2937;
    color:white;
}

.dark-mode .summary-card,
.dark-mode .upload-area{
    background:#374151;
}

.dark-mode .upload-area{
    border-color:#60a5fa;
}

.dark-mode .form-control{
    background:#1f2937;
    color:white;
    border-color:#4b5563;
}
/* ===================================
   TABLET (768px - 991px)
=================================== */

@media (max-width:991px){

    .converter-card{
        padding:30px;
        margin-bottom:70px;
    }

    h1{
        font-size:40px;
        text-align:center;
    }

    #summaryCard,
    #fileList,
    .upload-area,
    #progressSection,
    #resultCard,
    .merge-btn{
        width:90%;
    }

    .summary-card .card-body{
        font-size:16px;
        padding:16px 20px;
    }

    .upload-area{
        padding:40px 20px;
    }

    .upload-icon{
        font-size:55px;
    }

    .upload-area h3{
        font-size:24px;
    }

    .preview-btn,
    .delete-btn{
        width:110px;
        min-width:110px;
        height:42px;
    }

    #previewFrame{
        height:550px;
    }
}

/* ===================================
   MOBILE (576px - 767px)
=================================== */

@media (max-width:767px){

    .container{
        padding-left:15px;
        padding-right:15px;
    }

    .converter-card{
        padding:20px 15px;
        border-radius:18px;
        margin-bottom:70px;
    }

    h1{
        font-size:30px;
        text-align:center;
    }

    .text-muted{
        font-size:14px;
    }

    #summaryCard,
    #fileList,
    .upload-area,
    #progressSection,
    #resultCard,
    .merge-btn{
        width:100%;
    }

    .summary-card .card-body{
        text-align:center;
        font-size:15px;
        padding:15px;
    }

    .upload-area{
        padding:30px 15px;
        border-radius:16px;
    }

    .upload-icon{
        font-size:48px;
    }

    .upload-area h3{
        font-size:20px;
    }

    .upload-area p{
        font-size:14px;
    }

    .upload-area .btn{
        width:100%;
    }

    /* Upload File Card */

    #fileList .card{
        border-radius:14px;
    }

    #fileList .card-body{
        padding:15px;
        text-align:center;
    }

    .file-row .row{
        display:block;
    }

    .file-row-name{
        display:block;
        text-align:center;
        margin-bottom:8px;
        font-size:15px;
        word-break:break-word;
    }

    .file-row-size{
        font-size:13px;
        margin-bottom:12px;
    }

    .preview-btn,
    .delete-btn{
        width:110px;
        min-width:110px;
        height:42px;
        margin:5px;
    }

    .merge-btn{
        width:100%;
        height:50px;
        font-size:17px;
    }

    #previewFrame{
        height:500px;
    }
}

/* ===================================
   SMALL MOBILE (320px - 575px)
=================================== */

@media (max-width:575px){

    .converter-card{
        padding:15px 12px;
        margin-bottom:70px;
    }

    h1{
        font-size:26px;
    }

    .summary-card .card-body{
        font-size:14px;
        padding:12px;
    }

    .upload-area{
        padding:25px 10px;
    }

    .upload-icon{
        font-size:42px;
    }

    .upload-area h3{
        font-size:18px;
    }

    .upload-area p{
        font-size:13px;
    }

    .file-row-name{
        font-size:14px;
    }

    .file-row-size{
        font-size:12px;
    }

    .preview-btn,
    .delete-btn{
        width:100px;
        min-width:100px;
        height:40px;
        font-size:14px;
        margin:5px;
    }

    .merge-btn{
        width:100%;
        font-size:15px;
        height:48px;
    }

    #previewFrame{
        height:400px;
    }
}