.upload-section{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:25px;
transition:.3s;
}

.upload-box{
width:600px;
min-height:180px;
background:white;
border:3px dashed #ccc;
border-radius:12px;
text-align:center;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

cursor:pointer;

position:relative;
overflow:hidden;

}

.upload-box:hover{
border-color:#e5322d;
background:#fff8f8;
}

.upload-box.drag-over{

border-color:#e5322d;

background:#fff2f2;

transform:scale(1.02);

transition:.2s;

}

.merge-container{
max-width:900px;
margin:auto;
}

.file-info{
background:white;
padding:15px;
border-radius:10px;
margin-bottom:20px;
border:1px solid #ddd;
}

.file-info span{
color:#e5322d;
font-weight:bold;
}

.file-row{
background:white;
padding:15px;
border-radius:10px;
margin-bottom:10px;
border:1px solid #ddd;

display:flex;
justify-content:space-between;
align-items:center;
}


.merge-btn:hover{
background:#c62828;
}
.merge-workspace{
display:flex;
height:calc(100vh - 170px);
overflow:hidden;
padding:0 20px;
}
.files-panel{
flex:1;
background:white;
padding:20px;
overflow-y:auto;
height:100%;

position:relative;
}

.merge-sidebar{
width:300px;
background:#fff;
border-left:1px solid #ddd;
padding:25px;
min-height:800px;
overflow-y:auto;
box-shadow:-4px 0 15px rgba(0,0,0,0.08);


display:flex;
flex-direction:column;
gap:20px;
flex-shrink:0;
}

.merge-sidebar h2{
margin:0;
text-align:center;
font-size:36px;
}

.merge-sidebar p{
font-size:18px;
margin:0;
}

.merge-btn{
width:100%;
background:#e5322d;
color:white;
border:none;
padding:18px;
font-size:24px;
border-radius:10px;
cursor:pointer;
}

#fileList{
display:flex;
flex-wrap:wrap;
gap:20px;
align-items:flex-start;
}

.file-item{
position:relative;

width:220px;
background:#fff;
border:1px solid #ddd;
border-radius:12px;
padding:12px;
text-align:center;
box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.file-item canvas{
width:180px;
height:240px;
display:block;
margin:auto;
border:1px solid #eee;
border-radius:6px;
}

.file-name{
margin-top:10px;
font-size:14px;
text-align:center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
width:100%;
}
.file-item{
cursor:move;
transition:.2s;
}

.file-item:hover{
transform:translateY(-4px);
}
.remove-file{
position:absolute;
top:8px;
right:10px;

font-size:24px;
font-weight:bold;

color:#e5322d;
cursor:pointer;

z-index:999;
}

.rotate-file{

position:absolute;

top:8px;

right:45px;

font-size:22px;

cursor:pointer;

color:#444;

z-index:999;

transition:.2s;

}

.rotate-file:hover{

color:#e5322d;

transform:rotate(90deg);

}

.add-more-floating{

position:absolute;

top:120px;
right:380px;

width:45px;
height:45px;

border:none;
border-radius:50%;

background:#e5322d;
color:white;

font-size:32px;
font-weight:bold;

cursor:pointer;

display:flex;
align-items:center;
justify-content:center;

box-shadow:0 4px 12px rgba(0,0,0,.25);

z-index:999;

}

.add-more-floating:hover{

background:#c62828;

}
.add-more-floating::after{

content:"Add More PDF";

position:absolute;

right:55px;
top:50%;

transform:translateY(-50%);

background:#333;
color:#fff;

padding:8px 12px;

border-radius:6px;

font-size:13px;

white-space:nowrap;

opacity:0;

pointer-events:none;

transition:.2s;

}

.add-more-floating:hover::after{

opacity:1;

}
.sort-btn{

position:absolute;

top:175px;
right:380px;

width:45px;
height:45px;

border:none;
border-radius:50%;

background:white;
color:#e5322d;

font-size:22px;
font-weight:bold;

cursor:pointer;

display:flex;
align-items:center;
justify-content:center;

box-shadow:0 2px 8px rgba(0,0,0,.2);

z-index:999;

}

.sort-btn:hover{

background:#f5f5f5;

}

.sort-btn::after{

content:"Sort Files";

position:absolute;

right:55px;
top:50%;

transform:translateY(-50%);

background:#333;
color:white;

padding:8px 12px;

border-radius:6px;

font-size:13px;

white-space:nowrap;

opacity:0;

transition:.2s;

pointer-events:none;

}

.sort-btn:hover::after{

opacity:1;

}
.dragging{

opacity:.35;

transform:scale(.96);

}
.sortable-ghost{

opacity:.3;

}

.sortable-chosen{

transform:scale(1.03);

box-shadow:0 12px 25px rgba(0,0,0,.2);

}

.sortable-drag{

cursor:grabbing;

}

/* ===== Sortable ===== */

.sortable-ghost{

opacity:.35;

}

.sortable-chosen{

transform:scale(1.03);

box-shadow:0 10px 25px rgba(0,0,0,.2);

}

.sortable-drag{

cursor:grabbing;

}

.file-item{

user-select:none;

}
.clear-btn{

width:100%;

margin-bottom:12px;

padding:12px;

font-size:18px;

background:#666;

color:white;

border:none;

border-radius:8px;

cursor:pointer;

}

.clear-btn:hover{

background:#444;

}

.page-count{

margin-top:6px;

font-size:13px;

color:#666;

font-weight:500;

}

/* ===================================== */
/* Preview Card */
/* ===================================== */

.file-card{

background:#fff;

border:1px solid #ddd;

border-radius:12px;

padding:15px;

margin-top:20px;

text-align:center;

}

.file-card canvas{

width:170px;

border:1px solid #ddd;

margin-bottom:15px;

}

.file-card h3{

margin:10px 0;

font-size:17px;

word-break:break-word;

}

.file-card p{

margin:5px 0;

color:#666;

}

/* ===================================== */
/* Progress Popup */
/* ===================================== */

.progress-popup{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.45);

display:none;

justify-content:center;

align-items:center;

z-index:9999;

}

.progress-card{

width:420px;

background:white;

padding:30px;

border-radius:14px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.25);

}

.progress-card h2{

margin-bottom:20px;

}

.progress-bar{

width:100%;

height:18px;

background:#ddd;

border-radius:30px;

overflow:hidden;

margin-bottom:18px;

}

#progressFill{

width:0%;

height:100%;

background:#e5322d;

transition:width .25s;

}

#progressText{

font-size:22px;

font-weight:bold;

margin:10px 0;

}

#progressPage{

color:#666;

}

/* Remove Button */

.file-card{

position:relative;

}

.remove-file{

position:absolute;

top:10px;

right:10px;

width:28px;

height:28px;

border:none;

border-radius:50%;

background:#e5322d;

color:white;

font-size:18px;

cursor:pointer;

font-weight:bold;

}

.remove-file:hover{

background:#b71c1c;

}

.merge-btn:disabled{

background:#bdbdbd;

cursor:not-allowed;

opacity:.6;

}

/* Upload Button */

.upload-btn{

padding:14px 38px;

border:none;

border-radius:8px;

background:#e5322d;

color:#fff;

font-size:18px;

font-weight:600;

cursor:pointer;

transition:.25s;

}

.upload-btn:hover{

background:#c62828;

transform:translateY(-2px);

}

.upload-text{

margin:0;

font-size:22px;

font-weight:500;

color:#555;

}