/* =========================================================
   DOC SCANNER APP - COMPLETE CSS (PAYTM STYLE)
   ========================================================= */

/* --- Base Variables & Resets --- */
:root {
    --primary-color: #2563EB; /* Paytm Dark Blue */
    --secondary-color: #00baf2; /* Paytm Light Blue */
    --bg-color: #f5f7fa; /* Light grey background */
    --surface-color: #ffffff;
    --text-dark: #1a1a1a;
    --text-light: #4a4a4a;
    --border-color: #e0e0e0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent; /* Mobile click highlight remove */
}

body {
    background-color: var(--bg-color);
    color: var(--text-dark);
    overflow: hidden; /* Body scroll band, container ke andar scroll karenge */
}

.app-container {
    width: 100vw;
    height: 100vh;
    max-width: 480px; /* Mobile jaisa dikhne ke liye width cap */
    margin: 0 auto;
    background-color: var(--bg-color);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
/* --- Sidebar Sliding & Overlay Fix --- */
.premium-sidebar {
    position: fixed !important;
    top: 0;
    left: -300px; /* By default screen ke bahar */
    height: 100vh;
    z-index: 200;
    transition: left 0.3s ease; /* Smooth sliding animation */
}

.premium-sidebar.active {
    left: 0; /* Menu dabane par andar aayega */
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 150;
    display: none; /* By default hide */
}

.sidebar-overlay.active {
    display: block; /* Menu dabane par dark background aayega */
}


/* ================= NEW PAYTM STYLE PDF EDITOR VIEW ================= */
.pdf-editor-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color); /* Light grey base */
    z-index: 50; /* Main content ke upar */
    display: none; /* JS isko show/hide karega */
    flex-direction: column;
}

.pdf-main-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
}

/* --- Upload PDF Card --- */
.upload-pdf-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    margin-top: 8px;
    border: 1px solid var(--border-color); /* Halka border Paytm jaisa */
}

.upload-icon-circle {
    width: 48px;
    height: 48px;
    background-color: #f0f8ff; /* Light blue background */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-color); /* Dark blue icon */
}

.upload-icon-circle .material-icons {
    font-size: 24px;
}

.upload-text {
    flex: 1;
}
/* --- Small Browse Button --- */
.paytm-btn-small {
    background-color: var(--secondary-color); /* Paytm Light Blue */
    color: white;
    border: none;
    border-radius: 16px; /* Pill shape */
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 186, 242, 0.3);
    transition: background-color 0.2s;
}

.paytm-btn-small:active {
    background-color: #0099cc;
}

/* --- Empty State --- */
.empty-state-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin-bottom: 80px; /* FAB ke liye space */
}

/* --- Paytm Style Floating Action Button --- */
.pdf-fab-paytm {
    position: absolute;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background-color: var(--primary-color); /* Paytm Dark Blue */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 41, 112, 0.3);
    cursor: pointer;
    transition: transform 0.2s;
}

.pdf-fab-paytm:active {
    transform: scale(0.95);
}

.pdf-fab-paytm .material-icons {
    font-size: 28px;
}

/* ================= PAYTM STYLE HOME SCREEN ================= */
.home-screen-view {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--bg-color);
    position: relative;
}

/* --- Paytm Style Header --- */
.paytm-header {
    background-color: var(--surface-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    z-index: 10;
}

.profile-pic-container {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border-color);
}

.header-profile-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-logo {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.5px;
}

.logo-text-blue {
    color: var(--primary-color);
}

.logo-text-dark {
    color: var(--secondary-color);
}

.header-actions {
    display: flex;
    gap: 16px;
    color: var(--primary-color);
}

.header-actions .material-icons,
.header-actions .material-icons-outlined {
    font-size: 26px;
    cursor: pointer;
}

/* --- Main Scrollable Area --- */
.paytm-main-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* --- Paytm Style Cards --- */
.paytm-card {
    background-color: var(--surface-color);
    border-radius: 20px;
    padding: 20px 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.card-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-header-flex .card-title {
    margin-bottom: 0;
}

.view-more-link {
    color: var(--secondary-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* --- Action Grids & Icons --- */
.action-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

.icon-circle-large {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.icon-circle-large .material-icons-outlined {
    font-size: 28px;
}

.icon-circle-small {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}

.dark-blue-bg {
    background-color: var(--primary-color);
    color: white;
}

.light-blue-bg {
    background-color: #f0f8ff;
}

.text-blue {
    color: var(--secondary-color);
}

.action-label {
    font-size: 12px;
    font-weight: 500;
    color: #333333;
    line-height: 1.2;
}

/* --- Banner/Promo Card --- */
.paytm-promo-card {
    background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.promo-content {
    flex: 1;
    padding-right: 16px;
}

.promo-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 6px;
}

.promo-desc {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 12px;
    line-height: 1.4;
}

.promo-btn {
    background-color: var(--secondary-color);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    display: inline-block;
    cursor: pointer;
}

.promo-icon {
    width: 60px;
    height: 60px;
    background-color: rgba(255,255,255,0.6);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.promo-icon .material-icons {
    font-size: 32px;
    color: var(--secondary-color);
}

.bottom-spacer {
    height: 80px; /* Bada button content ko na chhupaye isliye space */
}

/* --- Bottom Floating Scan Button --- */
.bottom-scan-container {
    position: absolute;
    bottom: 24px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 20;
    pointer-events: none; 
}

.paytm-scan-btn {
    pointer-events: auto; 
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 30px; 
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 16px rgba(0, 41, 112, 0.3);
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.paytm-scan-btn:active {
    transform: scale(0.96);
    background-color: #001f54;
}

.paytm-scan-btn .material-icons {
    font-size: 24px;
}
/* ================= NEW PAYTM STYLE RECENT FILES VIEW ================= */
.recent-files-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 50; /* Home screen ke upar aayega */
    display: none; /* By default chhipa rahega, JS isko show karega */
    flex-direction: column;
}

/* --- File List Layout --- */
.recent-file-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 8px;
}

/* Single File Item Card */
.file-list-item {
    display: flex;
    align-items: center;
    padding: 16px;
    margin-bottom: 0; /* Kyunki humne gap: 12px use kiya hai upar */
    cursor: pointer;
    transition: background-color 0.2s;
}

.file-list-item:active {
    background-color: #f0f8ff; /* Click karne par halka blue effect */
}
/* --- File Icons & Colors --- */
.file-icon-bg {
    width: 48px;
    height: 48px;
    border-radius: 12px; /* Thoda square look Paytm jaisa */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
    color: white;
}

.file-icon-bg .material-icons {
    font-size: 24px;
}

.red-bg {
    background-color: #ff5252; /* PDF ke liye Red */
}

/* Note: dark-blue-bg aur blue-bg humne pehle hi upar define kiye hue hain, wo yahan automatically kaam karenge */

/* --- File Details (Text) --- */
.file-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden; /* Lambe naam ko bahar jane se rokne ke liye */
}

.file-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Lamba naam hone par ... lag jayega */
}

.file-meta {
    font-size: 12px;
    color: var(--text-light);
    font-weight: 500;
}

/* --- File More Options Icon --- */
.file-more-icon {
    color: #9e9e9e;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.file-more-icon:active {
    background-color: #f0f0f0; /* Click karne par chhota sa grey circle effect */
}
/* ================= NEW PAYTM STYLE SCANNER/CAMERA VIEW ================= */
.scanner-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000; /* Camera background hamesha black hota hai */
    z-index: 100; /* Screen me sabse upar */
    display: none; /* JS isko show karega */
    flex-direction: column;
    color: white;
}

/* --- Top Controls Bar --- */
.scanner-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 110;
}

.scanner-top-actions {
    display: flex;
    gap: 24px;
}

.scanner-icon {
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3); /* Halka transparent background */
    transition: background-color 0.2s;
}

.scanner-icon:active {
    background-color: rgba(255, 255, 255, 0.2); /* Click par white tint */
}
/* --- Camera Viewfinder Area --- */
.scanner-viewfinder {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #1a1a1a;
}

#cameraStream {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Video screen par theek se fit ho bina stretch hue */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
}

/* --- Document Focus Frame (Corners) --- */
.focus-frame {
    position: absolute;
    width: 80%;
    height: 65%;
    z-index: 102;
    pointer-events: none; /* Clicks video tak pass hone de */
}

.frame-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border-color: var(--secondary-color); /* Paytm Light Blue corners */
    border-style: solid;
}

.top-left { top: 0; left: 0; border-width: 4px 0 0 4px; border-top-left-radius: 12px; }
.top-right { top: 0; right: 0; border-width: 4px 4px 0 0; border-top-right-radius: 12px; }
.bottom-left { bottom: 0; left: 0; border-width: 0 0 4px 4px; border-bottom-left-radius: 12px; }
.bottom-right { bottom: 0; right: 0; border-width: 0 4px 4px 0; border-bottom-right-radius: 12px; }

/* --- Helper Text --- */
.scan-instruction {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    z-index: 103;
    white-space: nowrap;
    letter-spacing: 0.5px;
}
/* --- Bottom Controls Bar --- */
.scanner-bottom-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 30px 20px 40px 20px; /* Niche thodi extra space */
    background-color: #000000;
    z-index: 110;
}

.scanner-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    cursor: pointer;
    transition: opacity 0.2s;
    opacity: 0.8;
}

.scanner-action-btn:active {
    opacity: 1; /* Click karne par full bright */
}

.scanner-action-btn .material-icons {
    font-size: 32px;
    margin-bottom: 6px;
}

.scanner-action-btn .action-label {
    font-size: 13px;
    font-weight: 500;
}

/* --- Main Capture Button --- */
.capture-btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.capture-btn {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background-color: transparent;
    border: 4px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 4px; /* Inner circle ke liye space */
}

.capture-btn-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: white;
    transition: transform 0.1s, background-color 0.1s;
}

.capture-btn:active .capture-btn-inner {
    transform: scale(0.85); /* Shutter jaisa click effect */
    background-color: #e0e0e0;
}
/* ================= PREMIUM PROFESSIONAL SIDEBAR ================= */
.premium-sidebar {
    background-color: #ffffff;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.08); /* Premium soft shadow */
    width: 280px;
    display: flex;
    flex-direction: column;
}

/* --- Premium Profile Header --- */
.sidebar-profile-section {
    display: flex;
    align-items: center;
    padding: 30px 20px 20px 20px;
    background: linear-gradient(to right, #ffffff, #f0f8ff); /* Halka blue gradient */
    border-bottom: none; /* Purani line hata di */
    cursor: pointer;
}

.profile-avatar-premium {
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
    box-shadow: 0 4px 10px rgba(0, 41, 112, 0.2); /* Avatar ko utha hua dikhane ke liye */
}

.profile-avatar-premium .material-icons {
    font-size: 28px;
}

.profile-info-premium {
    flex: 1;
}

.profile-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.profile-subtext {
    font-size: 12px;
    color: var(--secondary-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cloud-icon {
    font-size: 14px;
}

.profile-arrow {
    color: #9e9e9e;
    font-size: 24px;
}
/* --- Floating Premium Card --- */
.sidebar-premium-card {
    padding: 0 20px;
    margin-bottom: 24px;
    margin-top: 10px;
}

.premium-card-content {
    background: linear-gradient(135deg, #fff9e6 0%, #fff0c2 100%); /* Soft gold gradient */
    border: 1px solid #ffe082;
    border-radius: 16px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.15); /* Halka orange shadow */
}

.premium-title-row {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.crown-icon {
    color: #ff9800; /* Orange/Gold crown */
    font-size: 22px;
    margin-right: 8px;
}

.premium-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #b77c00; /* Dark gold text */
}

.premium-card-desc {
    font-size: 12px;
    color: #795548; /* Brownish text for readability */
    margin-bottom: 14px;
    font-weight: 500;
}

.premium-upgrade-btn {
    background-color: #ff9800; /* Orange button */
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px; /* Pill shape */
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
    transition: transform 0.2s, background-color 0.2s;
}

.premium-upgrade-btn:active {
    transform: scale(0.95);
    background-color: #e68a00; /* Click karne par thoda dark */
}
/* --- Premium Menu List --- */
.premium-menu-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px;
}

.premium-menu-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 4px;
    border-radius: 12px; /* Thoda rounded selection effect */
    cursor: pointer;
    transition: background-color 0.2s;
}

.premium-menu-item:hover, .premium-menu-item:active {
    background-color: #f5f7fa; /* Hover karne par light grey background */
}

/* Soft Icon Backgrounds for Premium Look */
.menu-icon-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
}

.menu-icon-wrapper .material-icons-outlined {
    font-size: 20px;
}

/* Individual Icon Colors */
.bg-light-blue { background-color: #e3f2fd; color: #1976d2; }
.bg-light-red { background-color: #ffebee; color: #d32f2f; }
.bg-light-purple { background-color: #f3e5f5; color: #7b1fa2; }
.bg-light-grey { background-color: #f5f5f5; color: #616161; }
.bg-light-teal { background-color: #e0f2f1; color: #00796b; }
.bg-light-orange { background-color: #fff3e0; color: #f57c00; }

.menu-divider-premium {
    height: 1px;
    background-color: #f0f0f0;
    margin: 12px 16px;
}

/* --- Premium Sidebar Footer --- */
.premium-sidebar-footer {
    padding: 24px 20px;
    text-align: center;
    border-top: 1px solid #f0f0f0;
    background-color: #ffffff;
}

.premium-sidebar-footer p {
    font-size: 12px;
    color: #9e9e9e;
    margin-top: 8px;
    font-weight: 500;
}
/* ================= PREMIUM MERGE PDF VIEW ================= */
.merge-pdf-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa; /* Clean off-white background */
    z-index: 60; /* Baaki screens ke upar aayega */
    display: none; /* By default hide, JS isko show karega */
    flex-direction: column;
}

.merge-main-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Add More PDFs Area --- */
.add-more-pdf-area {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #f0f8ff; /* Soft premium blue background */
    border: 2px dashed #90caf9; /* Dashed border */
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.add-more-pdf-area:active {
    background-color: #e3f2fd;
    border-color: #42a5f5;
}

.add-icon {
    color: #1976d2; /* Dark blue */
    font-size: 28px;
    margin-right: 16px;
}

.add-text {
    flex: 1;
}

.add-text h4 {
    font-size: 15px;
    font-weight: 700;
    color: #1976d2;
    margin-bottom: 2px;
}

.add-text p {
    font-size: 12px;
    color: #64b5f6;
    font-weight: 500;
}

.add-arrow {
    color: #1976d2;
    font-size: 24px;
}
/* --- Merge Files List & Cards --- */
.merge-files-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.merge-file-card {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* Halka premium shadow */
    border: 1px solid #f0f0f0;
    transition: transform 0.2s;
}

.merge-file-card:active {
    transform: scale(0.98); /* Click par dabne ka effect */
}

.drag-handle {
    color: #bdbdbd; /* Light grey */
    cursor: grab;
    margin-right: 12px;
    font-size: 24px;
}

.drag-handle:active {
    cursor: grabbing;
    color: #757575;
}

.remove-file-icon {
    color: #ef5350; /* Soft Red */
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.remove-file-icon:active {
    background-color: #ffebee; /* Click par red background */
}

/* --- Bottom Merge Action Bar --- */
.merge-bottom-bar {
    background-color: #ffffff;
    padding: 16px 20px 24px 20px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06); /* Upar ki taraf shadow */
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 10;
}

.merge-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-files-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
}

.total-pages-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-light);
}

/* Premium Large Button */
.premium-btn-large {
    width: 100%;
    background: linear-gradient(to right, #1976d2, #42a5f5); /* Premium Blue Gradient */
    color: white;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.premium-btn-large:active {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(25, 118, 210, 0.4);
}
/* ================= PREMIUM SPLIT PDF VIEW ================= */
.split-pdf-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa; /* Clean off-white background */
    z-index: 60; /* Baaki screens ke upar aayega */
    display: none; /* By default hide, JS isko show karega */
    flex-direction: column;
}

.split-main-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Select File Area --- */
.select-split-pdf-area {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #f0f8ff; /* Soft premium blue background */
    border: 2px dashed #90caf9; /* Dashed border */
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.select-split-pdf-area:active {
    background-color: #e3f2fd;
    border-color: #42a5f5;
}

/* --- Selected File Info Card --- */
.split-file-info-card {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
    margin-bottom: 8px;
}
/* --- PDF Pages Grid for Selection --- */
.split-pages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 1 row me 3 pages dikhenge */
    gap: 12px;
    padding-bottom: 20px;
}

.split-page-card {
    background-color: #ffffff;
    border: 2px solid #e0e0e0; /* Normal light grey border */
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
}

/* Page select hone par Premium Blue Highlight */
.split-page-card.selected {
    border-color: #1976d2; 
    background-color: #e3f2fd; /* Halka blue background */
}

/* Selected page par Checkmark Icon */
.split-page-card .check-icon {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #1976d2;
    color: white;
    border-radius: 50%;
    font-size: 14px;
    padding: 4px;
    display: none; /* By default chupa rahega */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 5;
}

.split-page-card.selected .check-icon {
    display: block; /* Select hone par dikhega */
}

.split-page-thumb {
    width: 100%;
    aspect-ratio: 1 / 1.4; /* Asli PDF page jaisa lamba aakar */
    background-color: #f5f5f5;
    border: 1px solid #eeeeee;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #bdbdbd;
}

.split-page-number {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
}

/* --- Bottom Split Action Bar --- */
.split-bottom-bar {
    background-color: #ffffff;
    padding: 16px 20px 24px 20px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06); /* Upar ki taraf premium shadow */
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 10;
}

.split-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* ================= FOLDERS SECTION ================= */
.folder-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Ek line me 3 folders dikhenge */
    gap: 12px;
    margin-top: 12px;
}

.folder-item {
    background-color: #f8f9fa;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.folder-item:active {
    transform: scale(0.95); /* Click karne par thoda chhota hone ka effect */
    background-color: #f0f0f0;
}

.folder-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.folder-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Bada naam hone par ... lag jayega */
}

.folder-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-light);
}

/* --- Add Folder Button Special Styling --- */
.add-folder-btn {
    background-color: transparent;
    border: 2px dashed #90caf9; /* Premium light blue dashed border */
}

.add-folder-icon-bg {
    width: 40px;
    height: 40px;
    background-color: #e3f2fd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.add-folder-icon-bg .material-icons {
    color: var(--primary-color); /* Paytm Blue */
    font-size: 24px;
}
/* --- Create Folder Modal (Popup) --- */
.folder-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Peeche ka background dark karne ke liye */
    z-index: 100; /* Sabse upar dikhega */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.folder-modal-card {
    background-color: #ffffff;
    width: 100%;
    max-width: 320px;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transform: scale(1);
    animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popUp {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.modal-desc {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 20px;
}

.modal-input-group {
    display: flex;
    align-items: center;
    background-color: #f5f7fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 24px;
    transition: border-color 0.2s;
}

.modal-input-group:focus-within {
    border-color: var(--primary-color);
    background-color: #ffffff;
}

.input-icon {
    font-size: 20px;
    margin-right: 8px;
}

.modal-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--text-dark);
    outline: none;
}

.modal-input::placeholder {
    color: #bdbdbd;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.modal-btn-cancel, .modal-btn-create {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.modal-btn-cancel {
    background-color: transparent;
    color: var(--text-light);
}

.modal-btn-cancel:hover {
    background-color: #f5f5f5;
}

.modal-btn-create {
    background-color: var(--primary-color);
    color: #ffffff;
}

.modal-btn-create:hover {
    background-color: #008cc9;
}
/* ================= PREMIUM TEXT SCANNER (OCR) VIEW ================= */
.ocr-scanner-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
    z-index: 70; /* Baaki sab screens ke upar aayega */
    display: none; /* By default hide rahega, JS ise open karega */
    flex-direction: column;
}

/* --- Select Image Area (Dashed Box) --- */
.select-ocr-image-area {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #f3e5f5; /* Premium Light Purple Background */
    border: 2px dashed #ce93d8; /* Purple Dashed Border */
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.select-ocr-image-area:active {
    background-color: #e1bee7;
    border-color: #ab47bc;
}

.select-ocr-image-area .add-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 8px;
    margin-right: 12px;
    font-size: 24px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.select-ocr-image-area .add-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

.select-ocr-image-area .add-text p {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--text-light);
}
/* --- Fix for Action Grid (Smart Features & PDF Tools) --- */
.action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Ek line me 4 buttons dikhane ke liye */
    gap: 12px;
    margin-top: 16px;
    justify-items: center;
    align-items: start;
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    width: 100%;
}

.action-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dark);
    margin-top: 8px;
    line-height: 1.2;
}
/* ================= PREMIUM ADD WATERMARK VIEW ================= */
.watermark-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
    z-index: 90; /* Sabse upar dikhega */
    display: none; /* By default hide rahega */
    flex-direction: column;
}

.watermark-main-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Select PDF Area (Orange Box) --- */
.select-watermark-area {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #fff3e0; /* Light Orange Background */
    border: 2px dashed #ffb74d; /* Orange Dashed Border */
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.select-watermark-area:active {
    background-color: #ffe0b2;
    border-color: #ff9800;
}

.select-watermark-area .add-icon {
    color: #ff9800;
    font-size: 28px;
    background: white;
    padding: 8px;
    border-radius: 8px;
    margin-right: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.select-watermark-area .add-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

.select-watermark-area .add-text p {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--text-light);
}

/* --- Workspace & Settings Card --- */
.watermark-workspace {
    display: flex; /* Hide logic HTML/JS me sambhalenge */
    flex-direction: column;
    gap: 16px;
}

.watermark-settings-card {
    background: #fff;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.setting-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
    display: block;
}

.input-with-icon {
    display: flex;
    align-items: center;
    background-color: #f5f7fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color 0.2s;
}

.input-with-icon:focus-within {
    border-color: #ff9800;
    background-color: #ffffff;
}

.input-with-icon .material-icons {
    color: #ff9800;
    margin-right: 8px;
    font-size: 20px;
}

.input-with-icon input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--text-dark);
    outline: none;
}

.input-with-icon input::placeholder {
    color: #bdbdbd;
}

/* --- Bottom Bar --- */
.watermark-bottom-bar {
    background-color: #ffffff;
    padding: 16px 20px 24px 20px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    z-index: 10;
}
/* ================= PREMIUM ID CARD SCANNER VIEW ================= */
.id-scanner-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
    z-index: 95; /* Sabse upar dikhega */
    display: none; /* By default hide rahega */
    flex-direction: column;
}

.id-main-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- ID Upload Cards --- */
.id-upload-card {
    background: #ffffff;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.id-side-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Upload Area (Cyan Box) --- */
.select-id-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background-color: #e0f7fa; /* Light Cyan Background */
    border: 2px dashed #4dd0e1; /* Cyan Dashed Border */
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    min-height: 120px;
}

.select-id-area:active {
    background-color: #b2ebf2;
    border-color: #00bcd4;
}

.select-id-area .add-icon {
    color: #00bcd4;
    font-size: 36px;
    margin-bottom: 8px;
}

.select-id-area .add-text h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

/* --- Image Preview Box --- */
.id-preview-box {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    background: #f5f5f5;
    display: flex; /* Hide logic HTML/JS me sambhalenge */
    justify-content: center;
    align-items: center;
    min-height: 150px;
    padding: 8px;
}

.id-preview-box img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    border-radius: 4px;
}

.remove-id-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: #ef5350;
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
    font-size: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* --- Bottom Bar --- */
.id-bottom-bar {
    background-color: #ffffff;
    padding: 16px 20px 24px 20px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    z-index: 10;
}
/* ================= PREMIUM COMPRESS PDF VIEW ================= */
.compress-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
    z-index: 100; /* Sabse upar dikhega */
    display: none; /* By default hide rahega */
    flex-direction: column;
}

.compress-main-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Select PDF Area (Blue Box) --- */
.select-compress-area {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #e3f2fd; /* Light Blue Background */
    border: 2px dashed #64b5f6; /* Blue Dashed Border */
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.select-compress-area:active {
    background-color: #bbdefb;
    border-color: #2196f3;
}

.select-compress-area .add-icon {
    color: #2196f3;
    font-size: 28px;
    background: white;
    padding: 8px;
    border-radius: 8px;
    margin-right: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.select-compress-area .add-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

.select-compress-area .add-text p {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--text-light);
}

.compress-workspace {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* ================= PREMIUM IMAGE COMPRESSOR VIEW ================= */
.img-compress-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
    z-index: 105; /* Sabse upar dikhega */
    display: none; /* By default hide rahega */
    flex-direction: column;
}

.img-compress-main {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Select Image Area (Blue Box) --- */
.select-img-area {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #e3f2fd; /* Light Blue */
    border: 2px dashed #64b5f6; /* Blue Dashed Border */
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.select-img-area:active {
    background-color: #bbdefb;
}

.select-img-area .add-icon {
    color: #2196f3;
    font-size: 28px;
    background: white;
    padding: 8px;
    border-radius: 8px;
    margin-right: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.select-img-area .add-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

.select-img-area .add-text p {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--text-light);
}

/* --- Workspace & Preview --- */
.img-compress-workspace {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.img-preview-card {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px;
    padding: 8px;
}

.img-preview-card img {
    width: 100%;
    max-height: 250px;
    object-fit: contain; /* Photo kate nahi */
    border-radius: 8px;
}

.remove-img-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: #ef5350;
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
    font-size: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* --- File Details --- */
.file-details-card {
    background: #fff;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.file-size-alert {
    font-size: 13px;
    color: #e91e63; /* Pink/Red for alert */
    font-weight: 700;
    margin: 0;
}

/* --- Slider Settings --- */
.slider-settings-card {
    background: #fff;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.custom-slider {
    width: 100%;
    margin: 12px 0;
    accent-color: #2196f3; /* Android style blue slider */
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-light);
    font-weight: 600;
}

/* --- Bottom Bar --- */
.bottom-action-bar {
    background-color: #ffffff;
    padding: 16px 20px 24px 20px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    z-index: 10;
}
/* ================= PREMIUM PDF TO IMAGE VIEW ================= */
.pdf-to-img-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
    z-index: 110; /* Sabse upar dikhega */
    display: none; /* By default hide rahega */
    flex-direction: column;
}

.pdf-to-img-main {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Select PDF Area (Pink/Magenta Box) --- */
.select-pdf-img-area {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #fce4ec; /* Light Pink Background */
    border: 2px dashed #f48fb1; /* Pink Dashed Border */
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.select-pdf-img-area:active {
    background-color: #f8bbd0;
    border-color: #e91e63;
}

.select-pdf-img-area .add-icon {
    color: #e91e63;
    font-size: 28px;
    background: white;
    padding: 8px;
    border-radius: 8px;
    margin-right: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.select-pdf-img-area .add-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

.select-pdf-img-area .add-text p {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--text-light);
}

.pdf-to-img-workspace {
    display: flex; /* Hide logic JS me hoga */
    flex-direction: column;
    gap: 16px;
}
/* --- FIX FOR ALL PREMIUM HEADERS ALIGNMENT --- */
.header-left {
    display: flex;
    align-items: center;
}
.header-left h1 {
    margin: 0 0 0 16px !important;
}
/* ================= PREMIUM EXTRACT PDF VIEW ================= */
.extract-pdf-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
    z-index: 115; /* Sabse upar dikhega */
    display: none; /* By default hide rahega */
    flex-direction: column;
}

.extract-pdf-main {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Select PDF Area (Green Box) --- */
.select-extract-area {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #e8f5e9; /* Light Green Background */
    border: 2px dashed #81c784; /* Green Dashed Border */
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.select-extract-area:active {
    background-color: #c8e6c9;
    border-color: #4caf50;
}

.select-extract-area .add-icon {
    color: #4caf50;
    font-size: 28px;
    background: white;
    padding: 8px;
    border-radius: 8px;
    margin-right: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.select-extract-area .add-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

.select-extract-area .add-text p {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--text-light);
}

.extract-pdf-workspace {
    display: flex; /* Hide logic JS me hoga */
    flex-direction: column;
    gap: 16px;
}

/* Input box par click karne par Green border aayega */
#extractPageNumInput:focus {
    border-color: #4caf50 !important;
}
/* ================= PREMIUM IMAGE TO PDF VIEW ================= */
.img-to-pdf-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
    z-index: 120; /* Sabse upar dikhega */
    display: none; /* By default hide rahega */
    flex-direction: column;
}

.img-to-pdf-main {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Select Image Area (Yellow Box) --- */
.select-img-pdf-area {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #fff8e1; /* Light Yellow Background */
    border: 2px dashed #ffca28; /* Yellow Dashed Border */
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.select-img-pdf-area:active {
    background-color: #ffecb3;
    border-color: #ffb300;
}

.select-img-pdf-area .add-icon {
    color: #ffb300;
    font-size: 28px;
    background: white;
    padding: 8px;
    border-radius: 8px;
    margin-right: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.select-img-pdf-area .add-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

.select-img-pdf-area .add-text p {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--text-light);
}

.img-to-pdf-workspace {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Grid for Selected Images --- */
.selected-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* Automatically chote dabbe fit karega */
    gap: 12px;
    margin-top: 8px;
}

/* Thumbnail Box (JS se automatically banega) */
.thumb-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Square box */
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    background: #eee;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Photo kate nahi, square box me fit ho jaye */
}

/* X Icon on thumbnails */
.remove-thumb-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(255, 255, 255, 0.9);
    color: #e53935;
    border-radius: 50%;
    padding: 2px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* ================= SMART HEIGHT FIX (BROWSER vs INSTALLED APP) ================= */
html, body {
    height: 100%;
}

/* 1. NORMAL BROWSER KE LIYE (Chrome, Safari - URL bar wale) */
.app-container, 
.home-screen-view,
div[id$="View"] { 
    height: 100vh; /* Purane phone ke liye fallback */
    height: 100dvh !important; /* Browser ke liye Dynamic Height */
}

.bottom-scan-container {
    bottom: 32px !important; /* Browser me thoda upar */
}

.bottom-spacer {
    height: 120px !important;
}

/* 2. INSTALLED APP KE LIYE (Jab user Add to Home Screen karke App ki tarah kholiye) */
@media (display-mode: standalone) {
    .app-container, 
    .home-screen-view,
    div[id$="View"] { 
        height: 100vh !important; /* App me koi URL bar nahi hota, toh strict 100vh (Pehle jaisa) */
    }
    
    .bottom-scan-container {
        bottom: 24px !important; /* App me wapas normal position */
    }
    
    .bottom-spacer {
        height: 80px !important; /* App me wapas normal space */
    }
}