/* =========================================
   1. GLOBAL CONTAINER & LAYOUT
   ========================================= */
.upt-container { 
    max-width: 100%; 
    margin: 0 auto; 
    text-align: center; 
    font-family: 'Segoe UI', sans-serif; 
    padding: 10px; 
}

/* =========================================
   2. UPLOAD BOXES
   ========================================= */
.upt-upload-box { 
    border: 3px dashed #6c5ce7; 
    background: #f8f9fe; 
    padding: 30px 15px; 
    border-radius: 15px; 
    cursor: pointer; 
    margin-bottom: 20px; 
    transition: 0.2s;
}
.upt-upload-box:hover { background: #eef0ff; border-color: #5f27cd; }

.logo-upload-box {
    border: 2px dashed #00b894;
    background: #f0fdf4;
    padding: 20px;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
    max-width: 300px;
}

/* =========================================
   3. SETTINGS & INPUT AREAS
   ========================================= */
.upt-settings-box, .wm-settings, .pn-settings, .watermark-settings {
    display: none; 
    background: #fff; 
    padding: 25px 15px; 
    border: 1px solid #eee;
    border-radius: 10px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
    margin-top: 15px;
}

.input-group { 
    margin-bottom: 20px; 
    text-align: left; 
    max-width: 300px; 
    margin-left: auto; 
    margin-right: auto; 
}
.input-group label { 
    display: block; 
    margin-bottom: 8px; 
    font-weight: bold; 
    color: #333; 
}

/* Inputs & Selects */
.upt-input, .upt-select, input[type="text"], input[type="password"], select { 
    padding: 10px; 
    width: 100%; 
    border: 2px solid #ddd; 
    border-radius: 5px; 
    box-sizing: border-box; 
    font-size: 16px;
}

/* =========================================
   4. PREVIEW AREAS (Canvas & Grid)
   ========================================= */
/* Single Canvas Preview (Watermark/Page Numbers) */
.upt-preview-canvas, #pdf-preview-canvas, #pn-preview-canvas {
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
    max-height: 300px;
}

/* Grid Layout (Organize/Extract/Rotate Tools) */
.upt-grid, #sortable-area, #extract-area, #rotate-area {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

/* Individual Page Cards */
.upt-page-card, .page-card, .rotate-card {
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
    width: 120px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: relative;
    cursor: grab;
}
.upt-page-card img, .page-card img, .rotate-card canvas {
    max-width: 100%;
    height: auto;
    border: 1px solid #eee;
}

/* Action Icons on Cards (Delete/Rotate) */
.card-actions {
    margin-top: 5px;
    display: flex;
    justify-content: space-around;
}
.btn-icon {
    background: #eee;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.btn-icon:hover { background: #ddd; }
.btn-delete { color: red; }
.btn-rotate { color: blue; }

/* =========================================
   5. BUTTONS & MESSAGES
   ========================================= */
.action-btn, .protect-btn {
    background: #6c5ce7; 
    color: white; 
    border: none; 
    padding: 15px 25px; 
    font-size: 16px; 
    font-weight: bold; 
    border-radius: 8px; 
    cursor: pointer; 
    width: 100%; 
    max-width: 300px;
    box-shadow: 0 4px 6px rgba(108, 92, 231, 0.2);
    margin-top: 10px;
}
.action-btn:disabled, .protect-btn:disabled { 
    background: #ccc; 
    cursor: not-allowed; 
    box-shadow: none; 
}
.action-btn:hover:not(:disabled) { background: #5f27cd; }

.success-msg, .status-text { 
    color: #2ecc71; 
    margin-top: 15px; 
    font-weight: bold; 
}
.file-name-display { 
    color: #666; 
    font-size: 14px; 
    margin-top: 5px; 
    word-break: break-all;
}

/* =========================================
   6. MODAL / ZOOM VIEWER
   ========================================= */
.upt-modal {
    display: none; /* Chupa hua rahega */
    position: fixed; 
    z-index: 9999; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.8); /* Black background with opacity */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.upt-modal-content {
    background-color: #fefefe;
    padding: 10px;
    border: 1px solid #888;
    max-width: 90%;
    max-height: 90%;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
}

.upt-close-btn {
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top: 20px;
    right: 35px;
    cursor: pointer;
    transition: 0.3s;
}
.upt-close-btn:hover { color: #ccc; }

/* Zoom Hint on Thumbnail */
.zoom-hint {
    font-size: 12px; 
    color: #666; 
    margin-top: -15px; 
    margin-bottom: 15px; 
    display: block;
}
.upt-preview-canvas { cursor: zoom-in; } /* Cursor change karega */