/* =========================
   DROP AREA
========================= */
#itp-drop-area{
    border:2px dashed #2563eb;
    border-radius:12px;
    padding:30px;
    text-align:center;
    background:#f8fafc;
    transition:0.2s;
}

/* =========================
   TOOLBAR
========================= */
#itp-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 12px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    margin-top:15px;
    font-size:13px;
}

/* =========================
   COUNT BADGE
========================= */
#itp-count{
    padding:6px 10px;
    background:#e0f2fe;
    color:#0369a1;
    border-radius:20px;
    font-size:12px;
}

/* =========================
   PREVIEW GRID (FINAL FIX)
========================= */
#itp-preview{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
    gap:12px;

    max-height:65vh;
    overflow-y:auto;

    padding:10px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
}

/* =========================
   THUMB CARD
========================= */
.itp-thumb{
    position:relative;
    border-radius:12px;
    overflow:hidden;
    background:#f9fafb;
    transition:0.2s;
    cursor:grab;
}

.itp-thumb:hover{
    transform:scale(1.02);
}

/* =========================
   IMAGE
========================= */
.itp-thumb img{
    width:100%;
    height:110px;
    object-fit:cover;
    display:block;
}

/* =========================
   DRAG HANDLE
========================= */
.itp-drag-handle{
    position:absolute;
    top:6px;
    left:6px;

    width:24px;
    height:24px;

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

    background:rgba(0,0,0,0.5);
    color:#fff;
    border-radius:6px;
    font-size:12px;
    cursor:grab;
    z-index:10;
}

/* =========================
   FILE INFO (CLEAN + MODERN)
========================= */
.itp-file-info{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:6px 8px;
    background:#fff;
    gap:6px;
}

/* NAME */
.itp-file-name{
    font-size:10px;
    color:#333;
    max-width:70%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* SIZE BADGE (GOOD UX - KEEP IT) */
.itp-file-meta{
    font-size:9px;
    background:#eef2ff;
    color:#3730a3;
    padding:2px 6px;
    border-radius:8px;
    white-space:nowrap;
}

/* =========================
   REMOVE BUTTON (SOBER)
========================= */
.itp-remove{
    position:absolute;
    top:6px;
    right:6px;

    width:22px;
    height:22px;

    border-radius:50%;
    border:none;

    background:#f3f4f6;
    color:#6b7280;

    font-size:14px;
    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
    transition:0.2s;
}

.itp-remove:hover{
    background:#e5e7eb;
    color:#111;
}

/* =========================
   DRAG EFFECTS
========================= */
.itp-ghost{
    opacity:0.4;
    transform:scale(0.95);
}

.itp-dragging{
    opacity:0.7;
    transform:scale(1.05);
}

/* =========================
   browse button
========================= */

.itp-btn{
    background: linear-gradient(135deg, #f97316, #ea580c);
    color:#fff;
    padding:10px 16px;
    border-radius:10px;
    font-size:13px;
    font-weight:500;
    text-decoration:none;
    display:inline-block;
    cursor:pointer;
    transition:0.2s;
    box-shadow:0 4px 10px rgba(234,88,12,0.25);
}

.itp-btn:hover{
    background: linear-gradient(135deg, #ea580c, #c2410c);
    transform: translateY(-1px);
}



/* FULL SCREEN LOADER */
#itp-loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.9);

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

    z-index:9999;
}

/* SPINNER */
.itp-spinner{
    width:60px;
    height:60px;
    border:6px solid #e5e7eb;
    border-top:6px solid #2563eb;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

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

/* PERCENT TEXT */
#itp-progress-text{
    margin-top:15px;
    font-size:20px;
    font-weight:600;
    color:#2563eb;
}

/* LOADING TEXT */
.itp-loading-text{
    margin-top:5px;
    font-size:13px;
    color:#6b7280;
}



#itp-toast{
    position:fixed;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    background:#ef4444;
    color:#fff;
    padding:10px 15px;
    border-radius:8px;
    font-size:13px;
    display:none;
}



/* =========================
   MOBILE FIX
========================= */
@media (max-width:600px){
    #itp-preview{
        grid-template-columns:repeat(2,1fr);
    }
}