/* =========================================================
   HELLOPDF MASTER TOOLS UI
   Central UI system for all PDF tools

   IMPORTANT:
   - style.css stays untouched
   - Only elements with master-* classes use these styles
========================================================= */


/* =========================================================
   1. MASTER PAGE
========================================================= */

.master-tool-page{
  width:100%;
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}

/* =========================================================
   2. MASTER START SCREEN
========================================================= */

.master-tool-start{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

  padding:55px 20px 40px;
}

/* =========================================================
   3. MASTER TITLE
========================================================= */

.master-tool-title{
  margin:0 0 14px;

  font-size:44px;
  line-height:1.15;
  font-weight:900;

  color:#111827;

}
/* =========================================================
   4. MASTER DESCRIPTION
========================================================= */

.master-tool-description{
  width:100%;
  max-width:850px;

  margin:0 0 28px;

  font-size:24px;
  line-height:1.45;
  font-weight:400;

  color:#64748b;

}
/* =========================================================
   5. MASTER PRIMARY BUTTON
========================================================= */

.master-tool-button{
  min-width:330px;

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

  padding:25px 38px;

  border:0;
  border-radius:11px;

  background:#ef4444;
  color:#ffffff;

  font-size:28px;
  line-height:1;
  font-weight:800;

  cursor:pointer;

  box-shadow:0 10px 24px rgba(239,68,68,.20);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}
.master-tool-button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(239,68,68,.25);
}

/* =========================================================
   6. MASTER HELPER TEXT
========================================================= */

.master-tool-helper{
  margin-top:14px;

  font-size:15px;
  line-height:1.5;

  color:#64748b;
}

/* =========================================================
   7. MASTER SUCCESS SCREEN
========================================================= */

.master-tool-success{
  width:100%;
  min-height:calc(100vh - 72px);

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

  padding:40px 20px;

  text-align:center;

  background:#f3f4f8;
}
/* =========================================================
   7A. MASTER PREVIEW SCREEN
========================================================= */

.master-tool-preview{
  width:100%;
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}
/* =========================================================
   7B. MASTER PREVIEW LEFT WORKSPACE
========================================================= */

.master-tool-preview-left{
  min-width:0;
  background:#f3f4f8;
}
/* =========================================================
   7C. MASTER PREVIEW ACTION PANEL
========================================================= */

.master-tool-action-panel{
  min-width:0;
  height:calc(100vh - 72px);
  max-height:calc(100vh - 72px);
  overflow-y:auto;
  overflow-x:hidden;
  box-sizing:border-box;
}
/* =========================================================
   7D. MASTER ACTION PANEL TYPOGRAPHY
========================================================= */

.master-tool-panel-title{
  margin:0 0 10px;
}
.master-tool-panel-description{
  margin:0;
}
/* =========================================================
   7E. MASTER OPTION / SETTINGS BOX
========================================================= */

.master-tool-option-box{
  width:100%;
}
/* =========================================================
   7F. MASTER ACTION BUTTON
========================================================= */

.master-tool-action-button{
  width:100%;
}
/* =========================================================
   7G. MASTER TOOL PROGRESS
========================================================= */

.master-tool-progress{
  width:100%;
}
.master-tool-progress-bar{
  max-width:100%;
}
/* =========================================================
   7H. MASTER DOWNLOAD BUTTON
========================================================= */

.master-tool-download-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* =========================================================
   8. MOBILE
========================================================= */

@media(max-width:768px){

  .master-tool-start{
    padding:38px 18px 30px;
  }

  .master-tool-title{
    font-size:34px;
    line-height:1.2;
  }

  .master-tool-description{
    max-width:100%;

    font-size:17px;
    line-height:1.5;

    margin-bottom:24px;
  }

  .master-tool-button{
    width:100%;
    max-width:320px;
    min-width:0;

    padding:18px 24px;

    font-size:19px;
  }

  .master-tool-success{
    padding:38px 18px 30px;
  }

}
/* =========================================================
   MASTER TOOLS — SPLIT SUCCESS AUTHORITY LAYER
   Match Upload Screen visual scale + spacing
========================================================= */

/* Success screen layout */
body .split-page #splitSuccessScreen.master-tool-success:not(.hidden-screen){
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;

  text-align:center !important;

  padding:58px 20px 40px !important;

  background:#f3f4f8 !important;
}
/* Success heading — same scale as Upload heading */
body .split-page #splitSuccessScreen.master-tool-success:not(.hidden-screen)
h1.master-tool-title{
  font-size:44px !important;
  line-height:1.2 !important;
  margin:0 0 14px !important;
}
/* Success description */
body .split-page #splitSuccessScreen.master-tool-success:not(.hidden-screen)
p.master-tool-description{
  font-size:20px !important;
  line-height:1.5 !important;
  margin:0 0 36px !important;
}
/* Download button — same visual scale as Upload button */
body .split-page #splitSuccessScreen.master-tool-success:not(.hidden-screen)
button.master-tool-download-button{
  width:330px !important;
  max-width:100% !important;

  padding:22px 28px !important;

  font-size:26px !important;
  line-height:1.2 !important;

  border-radius:12px !important;
}
/* =========================================================
   MASTER TOOLS — MERGE SUCCESS AUTHORITY LAYER
   Match approved Master UI
========================================================= */

body .merge-page #successScreen.master-tool-success:not(.hidden-screen){
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;

  padding:58px 20px 40px !important;
  background:#f3f4f8 !important;
}
body .merge-page #successScreen.master-tool-success
h1.master-tool-title{
  font-size:44px !important;
  line-height:1.2 !important;
  margin:0 0 14px !important;
}
body .merge-page #successScreen.master-tool-success
p.master-tool-description{
  font-size:20px !important;
  line-height:1.5 !important;
  margin:0 0 36px !important;
}
body .merge-page #successScreen.master-tool-success
button.master-tool-download-button{
  width:330px !important;
min-width:330px !important;
max-width:330px !important;

height:auto !important;

padding:25px 38px !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:28px !important;
line-height:1 !important;
font-weight:800 !important;

  white-space:nowrap !important;

  border:none !important;
  border-radius:11px !important;
}
/* =========================================================
   MASTER TOOLS — MERGE PREVIEW BUTTON COLORS
   Match approved Success Screen button color
========================================================= */

/* Preview — Merge PDF button */
body .merge-page #previewScreen.master-tool-preview
button.master-tool-action-button{
  background:#ff3131 !important;
  color:#ffffff !important;
}
/* Preview — Add More (+) button */
body .merge-page #previewScreen.master-tool-preview
#addMoreBtn{
  background:#ff3131 !important;
  color:#ffffff !important;
}
/* =========================================================
   MASTER TOOLS — COMPRESS SUCCESS AUTHORITY LAYER
========================================================= */

body .compress-page #compressSuccessScreen.master-tool-success{
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;

  padding:58px 20px 40px !important;
  background:#f3f4f8 !important;
}
body .compress-page #compressSuccessScreen.master-tool-success
h1.master-tool-title{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;

  width:100% !important;
  max-width:850px !important;

  margin:0 0 14px !important;
  padding:0 !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:44px !important;
  font-weight:900 !important;
  line-height:1.2 !important;

  color:#111827 !important;
  text-align:center !important;
}
body .compress-page #compressSuccessScreen.master-tool-success
p.master-tool-description{
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:20px !important;
  font-weight:400 !important;
  line-height:1.5 !important;
  margin:0 0 36px !important;
}
body .compress-page #compressSuccessScreen.master-tool-success
button.master-tool-download-button{
  width:330px !important;
  max-width:100% !important;
  min-height:78px !important;
  padding:0 28px !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:22px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;

  border:none !important;
  border-radius:12px !important;
}
/* =========================================================
   MASTER TOOLS — COMPRESS PREVIEW AUTHORITY
========================================================= */

body .compress-page #compressPreviewScreen.master-tool-preview
button.master-tool-action-button{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;

  height:auto !important;

  padding:25px 38px !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1 !important;

  white-space:nowrap !important;
  text-align:center !important;

  border:none !important;
  border-radius:11px !important;

  box-sizing:border-box !important;
}

/* =========================================================
   SPLIT MASTER UI — PREVIEW MODE TABS
========================================================= */

body .split-page .split-mode-tabs{
  display:flex;
  width:100%;
  gap:8px;
  margin:22px 0 20px;
  padding:5px;
  background:#f1f3f7;
  border-radius:12px;
}
body .split-page .split-mode-tab{
  flex:1;
  min-height:46px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#4b5563;

  font-family:Arial, Helvetica, sans-serif;
  font-size:15px;
  font-weight:700;

  cursor:pointer;
  transition:
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}
body .split-page .split-mode-tab:hover{
  color:#ff3131;
}
body .split-page .split-mode-tab.active{
  background:#ffffff;
  color:#ff3131;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
/* =========================================================
   SPLIT MASTER UI — RANGE SUB TABS
========================================================= */

body .split-page .split-sub-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:16px 0 18px;
}
body .split-page .split-sub-tab{
  position:relative;

  min-height:64px;
  padding:10px 8px;

  border:1px solid #e5e7eb;
  border-radius:11px;

  background:#ffffff;
  color:#374151;

  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  font-weight:700;

  cursor:pointer;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}
body .split-page .split-sub-tab:hover{
  transform:translateY(-1px);
  border-color:#ffb3b3;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
body .split-page .split-sub-tab.active{
  border-color:#ff3131;
  color:#ff3131;
  box-shadow:0 4px 14px rgba(255,49,49,.12);
}
body .split-page .free-badge,
body .split-page .premium-badge{
  display:block;
  width:max-content;
  margin:5px auto 0;

  font-size:9px;
  font-weight:800;
  letter-spacing:.4px;
}
body .split-page .free-badge{
  color:#6b7280;
}
body .split-page .premium-badge{
  color:#ff3131;
}
/* =========================================================
   SPLIT MASTER UI — MODE PANELS
========================================================= */

body .split-page .split-mode-panel{
  display:none;
}
body .split-page .split-mode-panel.active{
  display:block;
}
body .split-page .split-panel-heading h3{
  margin:0 0 5px;

  font-family:Arial, Helvetica, sans-serif;
  font-size:19px;
  font-weight:700;
  color:#111827;
}
body .split-page .split-panel-heading p{
  margin:0 0 16px;

  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  line-height:1.5;
  color:#6b7280;
}
/* Premium feature card */

body .split-page .premium-feature-box{
  padding:22px 18px;
  text-align:center;

  border:1px solid #ffd0d0;
  border-radius:14px;

  background:linear-gradient(
    180deg,
    #fffafa 0%,
    #ffffff 100%
  );

  box-shadow:0 6px 20px rgba(255,49,49,.08);
}
body .split-page .premium-feature-icon{
  width:42px;
  height:42px;

  margin:0 auto 10px;

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

  border-radius:50%;

  background:#fff0f0;
  color:#ff3131;

  font-size:19px;
}
body .split-page .premium-feature-box h3{
  margin:0 0 7px;

  font-family:Arial, Helvetica, sans-serif;
  font-size:20px;
  font-weight:700;
  color:#111827;
}
body .split-page .premium-feature-box p{
  margin:0 auto 12px;
  max-width:280px;

  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  line-height:1.5;
  color:#6b7280;
}
body .split-page .smart-feature-list{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:14px 0 4px;
  text-align:left;
}
body .split-page .smart-feature-item{
  display:flex;
  align-items:center;
  gap:9px;

  padding:9px 10px;

  border:1px solid #f0f1f3;
  border-radius:9px;

  background:#fafafa;

  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  line-height:1.35;
  color:#4b5563;
}
body .split-page .smart-feature-item i{
  flex:0 0 auto;

  font-size:11px;
  color:#ff3131;
}
body .split-page .premium-upgrade-btn{
  width:100%;
  min-height:48px;

  margin-top:14px;

  border:0;
  border-radius:10px;

  background:#ff3131;
  color:#ffffff;

  font-family:Arial, Helvetica, sans-serif;
  font-size:15px;
  font-weight:700;

  cursor:pointer;

  box-shadow:0 6px 16px rgba(255,49,49,.20);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}
body .split-page .premium-upgrade-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 9px 22px rgba(255,49,49,.28);
}
/* =========================================================
   SPLIT MASTER UI — SUB PANEL VISIBILITY
========================================================= */

body .split-page .split-sub-panel{
  display:none;
}
body .split-page .split-sub-panel.active{
  display:block;
}
/* =========================================================
   SPLIT MASTER UI — CUSTOM RANGE CONTROLS
========================================================= */

body .split-page .split-range-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0 12px;
}
body .split-page .split-range-row input{
  width:100%;
  height:44px;
  padding:0 12px;

  border:1px solid #dfe3e8;
  border-radius:9px;

  background:#ffffff;
  color:#111827;

  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  font-weight:600;

  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
body .split-page .split-range-row input:focus{
  border-color:#ff7777;
  box-shadow:0 0 0 3px rgba(255,49,49,.08);
}
body .split-page .split-range-row span{
  color:#9ca3af;
  font-weight:700;
}
body .split-page .split-add-range-btn{
  width:100%;
  min-height:42px;

  border:1px dashed #ff9b9b;
  border-radius:9px;

  background:#fff8f8;
  color:#ff3131;

  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  font-weight:700;

  cursor:pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}
body .split-page .split-add-range-btn:hover{
  background:#fff0f0;
  border-color:#ff3131;
  transform:translateY(-1px);
}
body .split-page .split-sub-panel > small{
  display:block;
  margin-top:9px;

  color:#8a929d;

  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  line-height:1.4;
}
/* =========================================================
   SPLIT MASTER UI — FIXED / PAGES / SIZE CONTROLS
========================================================= */

body .split-page .split-fixed-input,
body .split-page .split-size-input{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:9px;
}
body .split-page .split-fixed-input input,
body .split-page .split-size-input input{
  width:100%;
  height:44px;
  padding:0 12px;

  border:1px solid #dfe3e8;
  border-radius:9px;

  background:#ffffff;
  color:#111827;

  font-family:Arial, Helvetica, sans-serif;
  font-size:15px;
  font-weight:700;

  outline:none;
}
body .split-page .split-fixed-input span,
body .split-page .split-size-input span{
  min-width:52px;

  color:#6b7280;

  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  font-weight:600;
}
body .split-page .split-pages-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}
body .split-page .split-option-card{
  display:flex;
  align-items:flex-start;
  gap:11px;

  padding:13px;

  border:1px solid #e5e7eb;
  border-radius:10px;

  background:#ffffff;

  cursor:pointer;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}
body .split-page .split-option-card:hover{
  border-color:#ffb3b3;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  transform:translateY(-1px);
}
body .split-page .split-option-card input{
  margin-top:3px;
  accent-color:#ff3131;
}
body .split-page .split-option-card span{
  display:flex;
  flex-direction:column;
  gap:4px;
}
body .split-page .split-option-card strong{
  color:#1f2937;

  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
  font-weight:700;
}
body .split-page .split-option-card small{
  color:#7b8490;

  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  line-height:1.4;
}
body .split-page .split-size-note,
body .split-page .premium-size-note{
  display:flex;
  align-items:center;
  gap:8px;

  margin-top:12px;
  padding:10px 12px;

  border-radius:9px;

  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
}
body .split-page .split-size-note{
  background:#f7f8fa;
  color:#68717d;
}
body .split-page .premium-size-note{
  background:#fff5f5;
  color:#ff3131;
}
body .split-page .split-size-note strong,
body .split-page .premium-size-note strong{
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
/* =========================================================
   SPLIT MASTER UI — ACTION BUTTON GLOW
========================================================= */

body .split-page #splitBtn{
  position:relative;

  background:#ff3131 !important;
  color:#ffffff !important;

  border:none !important;

  box-shadow:
    0 7px 18px rgba(255,49,49,.22),
    0 0 0 rgba(255,49,49,0);

  transition:
    transform .2s ease,
    box-shadow .25s ease,
    background .2s ease;

  animation:splitButtonGlow 2.8s ease-in-out infinite;
}
body .split-page #splitBtn:hover{
  transform:translateY(-2px);

  box-shadow:
    0 10px 24px rgba(255,49,49,.30),
    0 0 18px rgba(255,120,120,.20);

  animation:none;
}
body .split-page #splitBtn:active{
  transform:translateY(0);

  box-shadow:
    0 4px 10px rgba(255,49,49,.20);
}
@keyframes splitButtonGlow{

  0%,100%{
    box-shadow:
      0 7px 18px rgba(255,49,49,.20),
      0 0 0 rgba(255,120,120,0);
  }

  50%{
    box-shadow:
      0 8px 20px rgba(255,49,49,.25),
      0 0 14px rgba(255,120,120,.18);
  }
}

/* =========================================================
   SPLIT PDF — MASTER UPLOAD ALIGNMENT
   UI ONLY — NO FUNCTIONALITY CHANGE
========================================================= */

body .split-page .split-select-row{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
body .split-page .split-upload-box{
  width:330px;
  display:flex;
  justify-content:center;
  margin:0;
}
body .split-page .split-upload-box .master-tool-button{
  width:330px;
  min-width:330px;
  box-sizing:border-box;
  margin:0;

  background:#ff3131 !important;
  color:#ffffff !important;
}
body .split-page .cloud-buttons{
  position:absolute;
  left:calc(50% + 181px);
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
}
body .split-page .drop-text{
  width:100%;
  text-align:center;
  margin-top:14px;
}

/* =========================================================
   SPLIT PDF — SUCCESS BUTTON
   Match MASTER PRIMARY BUTTON exactly
========================================================= */

body .split-page #splitSuccessScreen.master-tool-success
button.master-tool-download-button{
  width:330px !important;
  min-width:330px !important;
  box-sizing:border-box !important;

  padding:25px 38px !important;

  font-size:28px !important;
  line-height:1 !important;
  font-weight:800 !important;

  border-radius:11px !important;

  margin:0 !important;
}
@media(max-width:768px){

  body .split-page .split-select-row{
    flex-direction:column;
  }

  body .split-page .split-upload-box{
    width:100%;
    max-width:330px;
  }

  body .split-page .split-upload-box .master-tool-button{
    width:100%;
    min-width:0;
  }

  body .split-page .cloud-buttons{
    position:static;
    transform:none;

    flex-direction:row;

    margin-top:12px;
  }

  body .split-page .drop-text{
    margin-top:14px;
  }

  body .split-page #splitSuccessScreen.master-tool-success
  button.master-tool-download-button{
    width:100% !important;
    min-width:0 !important;
    max-width:330px !important;
  }

}


/* =========================================================
   SPLIT PDF — FINAL BUTTON / CLOUD ALIGNMENT
   UI ONLY — NO FUNCTIONALITY CHANGE
========================================================= */

/* Keep cloud buttons vertically aligned with main button */
body .split-page .split-select-row .cloud-buttons{
  top:50%;
  transform:translateY(-50%) !important;
  margin-top:0 !important;
}
/* Keep both cloud buttons in their original vertical stack */
body .split-page .split-select-row .cloud-buttons button{
  flex-shrink:0;
}

/* =========================================================
   SPLIT SUCCESS — SAME SIZE AS MASTER PRIMARY BUTTON
========================================================= */

body .split-page #splitSuccessScreen.master-tool-success
button.master-tool-download-button{
  width:330px !important;
  min-width:330px !important;
  max-width:330px !important;

  height:auto !important;

  padding:25px 38px !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  font-size:28px !important;
  line-height:1 !important;
  font-weight:800 !important;

  white-space:nowrap !important;
  text-align:center !important;

  border:none !important;
  border-radius:11px !important;
  box-sizing:border-box !important;

  margin:0 !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

  body .split-page .split-select-row .cloud-buttons{
    top:auto;
    transform:none !important;
    margin-top:12px !important;
  }

  body .split-page #splitSuccessScreen.master-tool-success
  button.master-tool-download-button{
    width:100% !important;
    min-width:0 !important;
    max-width:330px !important;

    white-space:nowrap !important;
    font-size:19px !important;
    padding:18px 24px !important;
  }

}
/* =========================================================
   M2-UI STEP 2.1
   SPLIT PDF PREVIEW SCROLL TEST
   UI ONLY
========================================================= */

body .split-page .split-preview-left{
  min-height:0;
}
body .split-page .split-file-grid{
  min-height:0;
}
body .split-page .split-pdf-card{
  overflow:hidden;
}
body .split-page .pdf-thumb-wrap{
  overflow:auto !important;
  -webkit-overflow-scrolling:touch;

  scrollbar-width:auto;
}
body .split-page .pdf-thumb{
  pointer-events:auto !important;
}
/* =========================================================
   M3-UI STEP 2
   MERGE PDF — MASTER PREVIEW AUTHORITY
========================================================= */

body .merge-page #previewScreen.master-tool-preview{
  width:100%;
  min-height:calc(100vh - 72px);
  background:#f3f4f8;
}
/* LEFT PREVIEW WORKSPACE */
body .merge-page #previewScreen.master-tool-preview
.merge-preview-left{
  min-width:0;
  min-height:0;
  background:#f3f4f8;
  box-sizing:border-box;
}
/* TOP BAR */
body .merge-page #previewScreen.master-tool-preview
.merge-topbar{
  box-sizing:border-box;
}
/* FILE GRID */
body .merge-page #previewScreen.master-tool-preview
.merge-file-grid{
  min-width:0;
  box-sizing:border-box;
}
/* PDF CARD */
body .merge-page #previewScreen.master-tool-preview
.merge-file-card{
  box-sizing:border-box;
}
/* RIGHT ACTION PANEL */
body .merge-page #previewScreen.master-tool-preview
.merge-action-panel{
  min-width:0;
  height:calc(100vh - 72px);
  max-height:calc(100vh - 72px);

  overflow-y:auto;
  overflow-x:hidden;

  box-sizing:border-box;
}
/* MERGE ACTION BUTTON */
body .merge-page #previewScreen.master-tool-preview
button.master-tool-action-button{
  width:100% !important;
  background:#ff3131 !important;
  color:#ffffff !important;
}
/* =========================================================
   M3-UI STEP 2.1
   MERGE PDF — SCROLLABLE PDF PREVIEW
========================================================= */

body .merge-page .pdf-thumb-wrap{
  overflow:auto !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:auto;
}
body .merge-page .pdf-thumb{
  pointer-events:auto !important;
}
/* =========================================================
   M3-UI STEP 2.2
   MERGE PDF — UPLOAD BUTTON MASTER ALIGNMENT
========================================================= */

body .merge-page .merge-select-row{
  position:relative !important;
  width:100% !important;
  height:78px !important;

  justify-content:center !important;
  align-items:center !important;
}
body .merge-page .merge-upload-box{
  align-items:center !important;
  justify-content:center !important;
  width:330px !important;
  min-width:330px !important;
  height:78px !important;
  box-sizing:border-box !important;
  cursor:pointer !important;
}
body .merge-page .merge-upload-box h2{
  margin:0 !important;
  padding:25px 38px !important;

  color:#ffffff !important;
  font-size:28px !important;
  line-height:1 !important;
  font-weight:800 !important;
  text-align:center !important;
}
/* MERGE PDF — CLOUD BUTTONS ALIGNMENT */
body .merge-page .merge-select-row .cloud-buttons{
  position:static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;

  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;

  margin:0 !important;
  flex-shrink:0 !important;
}
/* Drop text stays centered underneath */
body .merge-page .master-tool-drop-text{
  width:100% !important;
  text-align:center !important;
}
/* =========================================================
   COMPRESS PDF — MASTER START SCREEN
   UI ONLY — NO FUNCTIONALITY CHANGE
========================================================= */

body .compress-page .compress-start-screen{
  width:100% !important;
  min-height:calc(100vh - 72px) !important;

  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;

  text-align:center !important;

  padding:55px 20px 40px !important;
  box-sizing:border-box !important;
}
body .compress-page .compress-start-screen
.master-tool-title{
  margin:0 0 14px !important;
}
body .compress-page .compress-start-screen
.master-tool-description{
  margin:0 0 28px !important;
}
/* Select button + cloud buttons */
body .compress-page .compress-select-row{
  position:relative !important;

  width:100% !important;

  align-items:center !important;
  justify-content:center !important;

  gap:24px !important;
}
/* Main upload button */
body .compress-page .compress-upload-box{
  width:330px !important;
  min-width:330px !important;

  align-items:center !important;
  justify-content:center !important;

  margin:0 !important;
}
body .compress-page .compress-upload-box h2{
  width:330px !important;
  min-width:330px !important;
  height:78px !important;

  align-items:center !important;
  justify-content:center !important;

  box-sizing:border-box !important;

  margin:0 !important;
  padding:0 28px !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  border:none !important;
  border-radius:12px !important;

 font-family:Arial, Helvetica, sans-serif !important;
font-size:22px !important;
font-weight:900 !important;
line-height:1.2 !important;
  cursor:pointer !important;
}
/* Cloud buttons stay beside main button */
body .compress-page .compress-select-row .cloud-buttons{
  position:absolute !important;
  left:calc(50% + 181px) !important;
  top:0 !important;

  height:78px !important;

  transform:none !important;

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

  gap:10px !important;
}

/* Drop text */
body .compress-page .master-tool-drop-text{
  width:100% !important;

  margin-top:14px !important;

  text-align:center !important;
}


/* =========================================================
   COMPRESS PDF — MASTER UI AUTHORITY
   Match Split PDF master UI
========================================================= */

body .compress-page .compress-start-screen{
  padding:55px 20px 40px !important;
}

body .compress-page .compress-start-screen h1{
  font-size:44px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  color:#111827 !important;
  margin:0 0 14px !important;
}

body .compress-page .compress-start-screen p{
  max-width:850px !important;
  font-size:24px !important;
  line-height:1.45 !important;
  font-weight:400 !important;
  color:#64748b !important;
  margin:0 0 28px !important;
}

body .compress-page .compress-upload-box h2{
  min-width:330px !important;
  padding:25px 38px !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  border-radius:11px !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:28px !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:0 10px 24px rgba(239,68,68,.20) !important;
  box-sizing:border-box !important;
}

body .compress-page .cloud-buttons{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

body .compress-page .cloud-buttons button{
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  border:none !important;
  font-size:17px !important;
}

body .compress-page .drop-text{
  margin-top:14px !important;
  font-size:15px !important;
}

/* =========================================================
   COMPRESS PREVIEW — ACTION BUTTON
========================================================= */

body .compress-page #compressPreviewScreen
button.master-tool-action-button{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;

  padding:20px !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1.2 !important;

  white-space:nowrap !important;
  text-align:center !important;

  border:none !important;
  border-radius:16px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  box-sizing:border-box !important;
}

/* =========================================================
   COMPRESS PDF — SUCCESS SCREEN
   Styling only — visibility untouched
========================================================= */

/* Success screen layout */
body .compress-page .compress-success-screen {
  width: 100% !important;
  min-height: calc(100vh - 72px) !important;

  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  padding: 58px 20px 40px !important;

  box-sizing: border-box !important;
  text-align: center !important;
}


/* Success heading */
body .compress-page .compress-success-screen
h1.master-tool-title {
  margin: 0 0 14px !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 44px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;

  color: #111827 !important;
}


/* Success description */
body .compress-page .compress-success-screen
p.master-tool-description {
  width: 100% !important;
  max-width: 850px !important;

  margin: 0 0 28px !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 22px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;

  color: #64748b !important;
}


/* Download button */
body .compress-page .compress-success-screen
button.download-result-btn.master-tool-download-button {
  width: 330px !important;
  min-width: 330px !important;
  max-width: 330px !important;
  height: 78px !important;

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

  margin: 0 auto !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  background: #ff3131 !important;
  color: #ffffff !important;

  border: none !important;
  border-radius: 11px !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  text-align: center !important;
  white-space: nowrap !important;
  text-indent: 0 !important;

  overflow: hidden !important;

  box-shadow: 0 10px 24px rgba(239, 68, 68, .20) !important;

  cursor: pointer !important;
}

/* =========================================================
   EXTRACT PDF — MASTER START SCREEN
   Match Compress PDF approved UI
========================================================= */

body .extract-page .extract-start-screen{
  width:100% !important;
  min-height:calc(100vh - 72px) !important;

  
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;

  text-align:center !important;

  padding:55px 20px 40px !important;
  box-sizing:border-box !important;
}

body .extract-page .extract-start-screen
.master-tool-title{
  margin:0 0 14px !important;
}

body .extract-page .extract-start-screen
.master-tool-description{
  margin:0 0 28px !important;
}

/* Select button + cloud buttons */
body .extract-page .extract-select-row{
  position:relative !important;

  width:100% !important;

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

  gap:24px !important;
}

/* Main upload button */
body .extract-page .extract-upload-box{
  width:330px !important;
  min-width:330px !important;
  height:78px !important;

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

  margin:0 !important;
  box-sizing:border-box !important;

  cursor:pointer !important;
}

body .extract-page .extract-upload-box
.master-tool-button{
  width:330px !important;
  min-width:330px !important;
  height:78px !important;

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

  margin:0 !important;
  padding:25px 38px !important;

  box-sizing:border-box !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  border:none !important;
  border-radius:11px !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:28px !important;
  font-weight:800 !important;
  line-height:1 !important;

  white-space:nowrap !important;

  box-shadow:0 10px 24px rgba(239,68,68,.20) !important;

  cursor:pointer !important;
}

/* Cloud buttons */
body .extract-page .extract-select-row
.cloud-buttons{
  position:absolute !important;

  left:calc(50% + 181px) !important;
  top:47% !important;

  transform:translateY(-50%) !important;

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

  gap:10px !important;

  margin:0 !important;
}

/* Google Drive + Dropbox */
body .extract-page .extract-select-row
.cloud-buttons button{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;

  padding:0 !important;
  margin:0 !important;

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

  border:none !important;
  border-radius:50% !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  font-size:17px !important;

  box-sizing:border-box !important;

  cursor:pointer !important;
}

/* Drop text */
body .extract-page .extract-start-screen
.master-tool-drop-text{
  margin-top:14px !important;

  text-align:center !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:15px !important;
  line-height:1.5 !important;

  color:#64748b !important;
}

/* =========================================================
   MERGE PDF — MOBILE START SCREEN
   UI ONLY
========================================================= */

@media screen and (max-width: 768px){

  body .merge-page .merge-select-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:auto !important;
    gap:18px !important;
  }

  body .merge-page .merge-select-row > .cloud-buttons{
    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;

    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    gap:18px !important;
    margin:0 !important;
  }

  body .merge-page .merge-select-row > .cloud-buttons button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;

    margin:0 !important;
    border-radius:50% !important;
  }

}

/* =========================================================
   MERGE PDF — MOBILE START SCREEN FIX
========================================================= */

@media screen and (max-width: 768px){

  body .merge-page .merge-select-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:auto !important;
    gap:18px !important;
  }

  body .merge-page .merge-select-row > .cloud-buttons{
    position:static !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    transform:none !important;

    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    height:auto !important;
    gap:18px !important;
    margin:0 !important;
  }

  body .merge-page .merge-select-row > .cloud-buttons button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;

    margin:0 !important;
    border-radius:50% !important;
  }

}

/* MERGE PDF MOBILE START FIX */
@media screen and (max-width:768px){

body .merge-page .merge-select-row{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:auto !important;
gap:18px !important;
}

body .merge-page .merge-select-row > .cloud-buttons{
position:static !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:auto !important;
gap:18px !important;
margin:0 !important;
transform:none !important;
left:auto !important;
right:auto !important;
top:auto !important;
}

body .merge-page .merge-select-row > .cloud-buttons button{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:56px !important;
height:56px !important;
min-width:56px !important;
min-height:56px !important;
margin:0 !important;
border-radius:50% !important;
}

}

/* =========================================================
   REMOVE PDF — MASTER UI
   Match approved COMPRESS PDF design
   UI ONLY — NO FUNCTIONALITY CHANGE
========================================================= */

/* =========================
   REMOVE START SCREEN
========================= */

body .remove-page .remove-start-screen{
  width:100% !important;
  min-height:calc(100vh - 72px) !important;

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

  text-align:center !important;

  padding:55px 20px 40px !important;
  box-sizing:border-box !important;
}

/* Title */

body .remove-page .remove-start-screen
.master-tool-title{
  width:100% !important;
  max-width:850px !important;

  margin:0 0 14px !important;
  padding:0 !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:44px !important;
  line-height:1.15 !important;
  font-weight:900 !important;

  color:#111827 !important;
  text-align:center !important;
}

/* Description */

body .remove-page .remove-start-screen
.master-tool-description{
  width:100% !important;
  max-width:850px !important;

  margin:0 0 28px !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:24px !important;
  line-height:1.45 !important;
  font-weight:400 !important;

  color:#64748b !important;
}


/* =========================
   REMOVE UPLOAD ROW
========================= */

body .remove-page .remove-select-row{
  position:relative !important;

  width:100% !important;
  height:78px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Upload box */

body .remove-page .remove-upload-box{
  width:330px !important;
  min-width:330px !important;
  height:78px !important;

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

  margin:0 !important;

  box-sizing:border-box !important;
  cursor:pointer !important;
}

/* Main red button */

body .remove-page .remove-upload-box
.master-tool-button{
  width:330px !important;
  min-width:330px !important;
  height:78px !important;

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

  margin:0 !important;
  padding:0 28px !important;

  box-sizing:border-box !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  border:none !important;
  border-radius:11px !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:28px !important;
  line-height:1 !important;
  font-weight:800 !important;

  box-shadow:0 10px 24px rgba(239,68,68,.20) !important;

  cursor:pointer !important;
}


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

body .remove-page .remove-select-row
.cloud-buttons{
  position:absolute !important;

  left:calc(50% + 181px) !important;
  top:0 !important;

  height:78px !important;

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

  gap:10px !important;

  margin:0 !important;
  transform:none !important;
}

body .remove-page .cloud-buttons button{
  width:38px !important;
  height:38px !important;

  min-width:38px !important;
  min-height:38px !important;

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

  padding:0 !important;
  margin:0 !important;

  border:none !important;
  border-radius:50% !important;

  background:#ef4444 !important;
  color:#ffffff !important;

  font-size:17px !important;

  cursor:pointer !important;
}


/* =========================
   DROP TEXT
========================= */

body .remove-page .master-tool-drop-text{
  width:100% !important;

  margin-top:14px !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:15px !important;
  line-height:1.5 !important;

  color:#64748b !important;

  text-align:center !important;
}


/* =========================================================
   REMOVE PREVIEW SCREEN
========================================================= */

body .remove-page #removePreviewScreen.master-tool-preview{
  width:100% !important;
  min-height:calc(100vh - 72px) !important;

  background:#f3f4f8 !important;
}

/* Left preview workspace */

body .remove-page #removePreviewScreen
.remove-preview-left{
  min-width:0 !important;
  min-height:0 !important;

  background:#f3f4f8 !important;
  box-sizing:border-box !important;
}

/* Action panel */

body .remove-page #removePreviewScreen
.remove-action-panel.master-tool-action-panel{
  min-width:0 !important;

  height:calc(100vh - 72px) !important;
  max-height:calc(100vh - 72px) !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  box-sizing:border-box !important;
}

/* Panel heading */

body .remove-page #removePreviewScreen
.remove-action-panel h2{
  font-family:Arial, Helvetica, sans-serif !important;
  color:#111827 !important;
  font-weight:800 !important;
}

/* Panel description */

body .remove-page #removePreviewScreen
.master-tool-panel-description{
  font-family:Arial, Helvetica, sans-serif !important;
  color:#64748b !important;
}


/* =========================================================
   REMOVE OPTION BOX
========================================================= */

body .remove-page .remove-option-box.master-tool-option-box{
  width:100% !important;

  padding:18px !important;
  margin-top:22px !important;

  box-sizing:border-box !important;

  background:#ffffff !important;

  border:1px solid #e5e7eb !important;
  border-radius:12px !important;

  box-shadow:0 4px 14px rgba(15,23,42,.05) !important;
}

body .remove-page .remove-option-box label{
  display:block !important;

  margin:0 0 9px !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:14px !important;
  line-height:1.4 !important;
  font-weight:800 !important;

  color:#111827 !important;
}

body .remove-page .remove-option-box input{
  width:100% !important;
  height:48px !important;

  padding:0 13px !important;

  box-sizing:border-box !important;

  border:1px solid #dfe3e8 !important;
  border-radius:9px !important;

  background:#ffffff !important;
  color:#111827 !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:15px !important;
  font-weight:600 !important;

  outline:none !important;
}

body .remove-page .remove-option-box input:focus{
  border-color:#ff7777 !important;
  box-shadow:0 0 0 3px rgba(255,49,49,.08) !important;
}

body .remove-page .remove-option-box small{
  display:block !important;

  margin-top:8px !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:11px !important;
  line-height:1.4 !important;

  color:#7b8490 !important;
}


/* =========================================================
   REMOVE ACTION BUTTON
========================================================= */

body .remove-page #removePreviewScreen
button.master-tool-action-button{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;

  min-height:70px !important;

  margin-top:18px !important;
  padding:0 24px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;

  box-sizing:border-box !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  border:none !important;
  border-radius:11px !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:24px !important;
  line-height:1 !important;
  font-weight:800 !important;

  text-align:center !important;
  white-space:nowrap !important;

  box-shadow:0 10px 24px rgba(239,68,68,.20) !important;

  cursor:pointer !important;
}

body .remove-page #removePreviewScreen
button.master-tool-action-button:hover{
  transform:translateY(-2px) !important;

  box-shadow:0 14px 28px rgba(239,68,68,.25) !important;
}


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

body .remove-page .remove-progress.master-tool-progress{
  width:100% !important;

  margin-top:18px !important;

  overflow:hidden !important;
  border-radius:10px !important;
}

body .remove-page .remove-progress
.master-tool-progress-bar{
  max-width:100% !important;

  min-height:8px !important;

  box-sizing:border-box !important;

  background:#ff3131 !important;
}


/* =========================================================
   REMOVE SUCCESS SCREEN
========================================================= */

body .remove-page #removeSuccessScreen.master-tool-success{
  width:100% !important;
  min-height:calc(100vh - 72px) !important;

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

  padding:58px 20px 40px !important;

  box-sizing:border-box !important;

  background:#f3f4f8 !important;

  text-align:center !important;
}

/* Success heading */

body .remove-page #removeSuccessScreen
h1.master-tool-title{
  width:100% !important;
  max-width:850px !important;

  margin:0 0 14px !important;
  padding:0 !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:44px !important;
  line-height:1.15 !important;
  font-weight:900 !important;

  color:#111827 !important;
}

/* Success description */

body .remove-page #removeSuccessScreen
p.master-tool-description{
  width:100% !important;
  max-width:850px !important;

  margin:0 0 28px !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:22px !important;
  line-height:1.45 !important;
  font-weight:400 !important;

  color:#64748b !important;
}


/* =========================================================
   REMOVE DOWNLOAD BUTTON
========================================================= */

body .remove-page #removeSuccessScreen
button.download-result-btn.master-tool-download-button{
  width:330px !important;
  min-width:330px !important;
  max-width:330px !important;

  height:78px !important;

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

  margin:0 auto !important;
  padding:0 !important;

  box-sizing:border-box !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  border:none !important;
  border-radius:11px !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:22px !important;
  line-height:1 !important;
  font-weight:800 !important;

  text-align:center !important;
  white-space:nowrap !important;

  box-shadow:0 10px 24px rgba(239,68,68,.20) !important;

  cursor:pointer !important;
}


/* =========================================================
   REMOVE PDF — MOBILE
========================================================= */

@media screen and (max-width:768px){

  body .remove-page .remove-start-screen{
    padding:38px 18px 30px !important;
  }

  body .remove-page .remove-start-screen
  .master-tool-title{
    font-size:34px !important;
    line-height:1.2 !important;
    margin-bottom:14px !important;
  }

  body .remove-page .remove-start-screen
  .master-tool-description{
    font-size:17px !important;
    line-height:1.5 !important;
    margin-bottom:24px !important;
  }

  /* Mobile upload row */

  body .remove-page .remove-select-row{
    width:100% !important;
    height:auto !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    gap:18px !important;
  }

  body .remove-page .remove-upload-box{
    width:100% !important;
    max-width:330px !important;
    min-width:0 !important;
    height:78px !important;
  }

  body .remove-page .remove-upload-box
  .master-tool-button{
    width:100% !important;
    min-width:0 !important;
    max-width:330px !important;

    height:78px !important;

    font-size:22px !important;
  }

  /* Mobile cloud buttons */

  body .remove-page .remove-select-row
  .cloud-buttons{
    position:static !important;

    width:100% !important;
    height:auto !important;

    display:flex !important;
    flex-direction:row !important;

    align-items:center !important;
    justify-content:center !important;

    gap:18px !important;

    margin:0 !important;
    transform:none !important;
  }

  body .remove-page .cloud-buttons button{
    width:56px !important;
    height:56px !important;

    min-width:56px !important;
    min-height:56px !important;

    margin:0 !important;

    border-radius:50% !important;

    font-size:20px !important;
  }

  body .remove-page .master-tool-drop-text{
    margin-top:14px !important;
    font-size:15px !important;
  }

  /* Mobile success */

  body .remove-page #removeSuccessScreen.master-tool-success{
    padding:38px 18px 30px !important;
  }

  body .remove-page #removeSuccessScreen
  h1.master-tool-title{
    font-size:34px !important;
    line-height:1.2 !important;
  }

  body .remove-page #removeSuccessScreen
  p.master-tool-description{
    font-size:17px !important;
    line-height:1.5 !important;
  }

  body .remove-page #removeSuccessScreen
  button.download-result-btn.master-tool-download-button{
    width:100% !important;
    min-width:0 !important;
    max-width:330px !important;

    height:70px !important;

    font-size:19px !important;
  }

}

/* =========================================================
   REMOVE PDF — FINAL SCREEN VISIBILITY FIX
========================================================= */

body .remove-page #removeStartScreen.hidden-screen{
  display:none !important;
}

body .remove-page #removePreviewScreen.hidden-screen{
  display:none !important;
}

body .remove-page #removeSuccessScreen.hidden-screen{
  display:none !important;
}

/* Active screens */

body .remove-page #removeStartScreen:not(.hidden-screen){
  display:flex !important;
}

body .remove-page #removePreviewScreen:not(.hidden-screen){
  display:grid !important;
}

body .remove-page #removeSuccessScreen:not(.hidden-screen){
  display:flex !important;
}

/* =========================================================
   REMOVE PDF — START SCREEN HIDE FIX
========================================================= */

body .remove-page #removeStartScreen[style*="display: none"]{
  display:none !important;
}

/* =========================================
   REMOVE PAGES - FLOATING ADD MORE BUTTON
========================================= */
.remove-preview-left {
  position: static;
}

.remove-preview-screen {
  position: relative;
}
.remove-add-more-btn {
  position: absolute;
  right: 28px;
  top: 28px;

  width: 58px;
  height: 58px;

  border: none;
  border-radius: 50%;

  background: #ff3131;
  color: #ffffff;

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

  font-size: 30px;
  font-weight: 700;

  cursor: pointer;

  box-shadow: 0 10px 25px rgba(255, 49, 49, 0.25);

  z-index: 20;
}

.remove-add-more-btn:hover {
  transform: translateY(-2px);
}

.remove-add-more-btn i {
  color: #ffffff;
  font-size: 28px;
}

/* REMOVE PDF — CLOUD BUTTON COLOR FIX */

body .remove-page .remove-start-screen .cloud-buttons button {
  background: #ef4444 !important;
  background-color: #ef4444 !important;
  color: #ffffff !important;
  border: none !important;
}

body .remove-page .remove-start-screen .cloud-buttons button:hover {
  background: #ef4444 !important;
  background-color: #ef4444 !important;
  color: #ffffff !important;
}

/* =========================================================
   REMOVE PDF — ACTION BUTTON FINAL AUTHORITY
========================================================= */

body .remove-page .remove-main-btn.master-tool-action-button{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;

  height:70px !important;
  min-height:70px !important;

  padding:0 20px !important;
  margin:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:22px !important;
  font-weight:800 !important;
  line-height:1 !important;

  border:none !important;
  border-radius:12px !important;

  box-sizing:border-box !important;
  white-space:nowrap !important;
}

body .remove-page .remove-main-btn.master-tool-action-button i{
  font-size:20px !important;
}

/* =========================================================
   REMOVE PDF — MOBILE PREVIEW ONLY
========================================================= */

@media screen and (max-width: 768px) {

  body .remove-page #removePreviewScreen:not(.hidden-screen) {
    display: block !important;
    width: 100% !important;
    min-height: calc(100vh - 72px) !important;
    padding: 20px 14px 360px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  body .remove-page #removePreviewScreen:not(.hidden-screen)
  .remove-preview-left {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body .remove-page #removePreviewScreen:not(.hidden-screen)
  .remove-file-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    margin: 20px auto 0 !important;
    gap: 18px !important;
  }

  /* PDF CARD — MUST BE VISIBLE */
  body .remove-page #removePreviewScreen:not(.hidden-screen)
  .remove-pdf-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* REMOVE PAGES PANEL — BOTTOM */
  body .remove-page #removePreviewScreen:not(.hidden-screen)
  .remove-action-panel {
    position: fixed !important;

    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 52vh !important;

    padding: 14px 16px !important;
    box-sizing: border-box !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    z-index: 9999 !important;
  }

}

/* =========================================================
   REMOVE PDF — ADD MORE BUTTON
   SAME AS MERGE PDF
========================================================= */

body .remove-page .remove-add-more-btn{
  position:fixed !important;
  right:320px !important;
  top:245px !important;

  width:56px !important;
  height:56px !important;

  border-radius:50% !important;
  background:#ef4444 !important;

  color:transparent !important;
  font-size:0 !important;

  padding:0 !important;
  border:none !important;

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

  z-index:50 !important;
}

body .remove-page .remove-add-more-btn i{
  color:#ffffff !important;
  font-size:26px !important;
}


body .remove-page .remove-action-panel .remove-progress{
  display:block !important;
  width:100% !important;
  height:8px !important;
  margin:12px 0 0 !important;
  padding:0 !important;
  background:#e5e7eb !important;
  border-radius:999px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

body .remove-page .remove-action-panel .remove-progress .progress-bar{
  display:flex !important;
  width:0%
  height:8px !important;
  min-height:10px !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  border-radius:999px !important;
  transition:width .3s ease !important;
  box-sizing:border-box !important;
}


/* =========================================================
   REMOVE PDF — FINAL PROGRESS BAR
   MATCH MERGE PDF
========================================================= */

body .remove-page #removePreviewScreen
.remove-action-panel .remove-progress{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:24px !important;
  min-height:24px !important;
  margin:18px 0 0 !important;
  padding:0 !important;
  background:#e2e8f0 !important;
  border-radius:12px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  flex-shrink:0 !important;
}

body .remove-page #removePreviewScreen
.remove-action-panel .remove-progress .progress-bar{
  display:block !important;
  width:0%;
  height:24px !important;
  min-height:24px !important;
  max-width:none !important;
  background:#ef4444 !important;
  color:#ffffff !important;
  line-height:24px !important;
  text-align:center !important;
  font-size:12px !important;
  font-weight:bold !important;
  border-radius:12px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  transition:width .3s ease !important;
}

/* EXTRACT PDF — PREVIEW ACTION BUTTON */
body .extract-page #extractPreviewScreen.master-tool-preview
button.master-tool-action-button{
  background:#ff3131 !important;
  color:#ffffff !important;
}

/* =========================================================
   EXTRACT PDF — SUCCESS SCREEN
   Match Compress PDF approved UI
========================================================= */

body .extract-page .extract-success-screen{
  width:100% !important;
  min-height:calc(100vh - 72px) !important;

  
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;

  text-align:center !important;

  padding:55px 20px 40px !important;
  box-sizing:border-box !important;
}

body .extract-page .extract-success-screen
.master-tool-title{
  margin:0 0 14px !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:44px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
}

body .extract-page .extract-success-screen
.master-tool-description{
  margin:0 0 28px !important;
}

body .extract-page .extract-success-screen
.master-tool-download-button{
  width:330px !important;
  min-width:330px !important;
  height:78px !important;

  margin:0 !important;
  padding:0 28px !important;

  
  align-items:center !important;
  justify-content:center !important;

  box-sizing:border-box !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  border:none !important;
  border-radius:12px !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:22px !important;
  font-weight:700 !important;
  line-height:1.2 !important;

  box-shadow:0 10px 24px rgba(239,68,68,.20) !important;

  cursor:pointer !important;
}

/* =========================================================
   EXTRACT PDF — SUCCESS DOWNLOAD BUTTON COLOR
========================================================= */

body .extract-page #extractSuccessScreen.master-tool-success
button.download-result-btn.master-tool-download-button{
  background:#ff3131 !important;
  background-color:#ff3131 !important;
  color:#ffffff !important;
  border:none !important;
}

/* ================================
   REORDER PDF — FINAL UI FIX
   Same as Extract Pages
================================ */

/* START SCREEN */
body .reorder-page .master-tool-start{
  width:100%;
 
  flex-direction:column;
  align-items:center !important;
  justify-content:flex-start;
  text-align:center;
  padding:55px 20px 40px;
}

/* START TITLE */
body .reorder-page .master-tool-title{
  text-align:center;
}

/* START DESCRIPTION */
body .reorder-page .master-tool-description{
  text-align:center;
}

/* UPLOAD ROW */
body .reorder-page .reorder-select-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}

/* SELECT PDF BUTTON */
body .reorder-page button.master-tool-button{
  background:#ff3131 !important;
  background-color:#ff3131 !important;
  color:#ffffff !important;
  border:none !important;
}

/* CLOUD BUTTONS */
body .reorder-page .cloud-buttons{
  display:flex;
  align-items:center;
  gap:12px;
}

body .reorder-page .cloud-buttons button{
  width:56px;
  height:56px;
  border:none;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* DROP TEXT */
body .reorder-page .master-tool-drop-text{
  text-align:center;
}


/* ================================
   PREVIEW SCREEN
================================ */

body .reorder-page #reorderPreviewScreen.master-tool-preview
button.master-tool-action-button{
  background:#ff3131 !important;
  background-color:#ff3131 !important;
  color:#ffffff !important;
  border:none !important;
}


/* ================================
   SUCCESS SCREEN
================================ */

body .reorder-page #reorderSuccessScreen.master-tool-success{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

body .reorder-page #reorderSuccessScreen.master-tool-success
button.download-result-btn.master-tool-download-button{
  background:#ff3131 !important;
  background-color:#ff3131 !important;
  color:#ffffff !important;
  border:none !important;
}


/* ================================
   MOBILE
================================ */

@media(max-width:768px){

  body .reorder-page .reorder-select-row{
    width:100%;
    flex-direction:column;
    gap:14px;
  }

  body .reorder-page .reorder-upload-box{
    width:100%;
    display:flex;
    justify-content:center;
  }

  body .reorder-page button.master-tool-button{
    width:100%;
    max-width:320px;
  }

  body .reorder-page .cloud-buttons{
    justify-content:center;
  }

}

/* =========================================
   REORDER PDF — MATCH COMPRESS PDF
========================================= */

body .reorder-page .reorder-start-screen{
  width:100% !important;
  min-height:calc(100vh - 72px) !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
  padding:55px 20px 40px !important;
  box-sizing:border-box !important;
}

/* Select button + cloud buttons */
body .reorder-page .reorder-select-row{
  position:relative !important;
  width:100% !important;
  align-items:center !important;
  justify-content:center !important;
  gap:24px !important;
}

/* Main upload box */
body .reorder-page .reorder-upload-box{
  width:330px !important;
  min-width:330px !important;
  height:78px !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
}

/* Main Select PDF button */
body .reorder-page .reorder-upload-box h2{
  width:330px !important;
  min-width:330px !important;
  height:78px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 28px !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  border:none !important;
  border-radius:12px !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:22px !important;
  font-weight:900 !important;
  line-height:1.2 !important;
  cursor:pointer !important;
}

/* Cloud buttons — exact Compress position */
body .reorder-page .reorder-select-row .cloud-buttons{
  position:absolute !important;
  left:calc(50% + 181px) !important;
  top:0 !important;

  height:78px !important;

  transform:none !important;

  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  gap:10px !important;
  margin:0 !important;
}

/* Google Drive + Dropbox — same red */
body .reorder-page .reorder-select-row .cloud-buttons button{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;

  background:#ff3131 !important;
  background-color:#ff3131 !important;
  color:#ffffff !important;

  border:none !important;
  border-radius:50% !important;

  
  align-items:center !important;
  justify-content:center !important;
}

/* Drop text */
body .reorder-page .master-tool-drop-text{
  width:100% !important;
  text-align:center !important;
}

/* Mobile */
@media(max-width:768px){

  body .reorder-page .reorder-select-row{
    width:100% !important;
  }

  body .reorder-page .reorder-upload-box{
    width:330px !important;
    min-width:330px !important;
  }

  body .reorder-page .reorder-select-row .cloud-buttons{
    position:absolute !important;
    left:calc(50% + 181px) !important;
  }
}

/* =========================================
   REORDER PDF — SUCCESS SCREEN
   MATCH COMPRESS PDF
========================================= */

body .reorder-page #reorderSuccessScreen.master-tool-success{
  width:100% !important;
  min-height:calc(100vh - 72px) !important;

  
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  padding:40px 20px !important;
  text-align:center !important;
  box-sizing:border-box !important;
}

/* Success heading */
body .reorder-page #reorderSuccessScreen
.master-tool-title{
  margin:0 0 14px !important;

  font-size:44px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  color:#111827 !important;
}

/* Success description */
body .reorder-page #reorderSuccessScreen
.master-tool-description{
  width:100% !important;
  max-width:850px !important;

  margin:0 0 28px !important;

  font-size:20px !important;
  line-height:1.45 !important;
  font-weight:400 !important;
  color:#64748b !important;
}

/* Download button */
body .reorder-page #reorderSuccessScreen
button.download-result-btn.master-tool-download-button{
  
  align-items:center !important;
  justify-content:center !important;

  min-width:330px !important;
  height:78px !important;

  padding:0 28px !important;

  background:#ff3131 !important;
  background-color:#ff3131 !important;
  color:#ffffff !important;

  border:none !important;
  border-radius:12px !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:22px !important;
  font-weight:900 !important;
  line-height:1.2 !important;

  cursor:pointer !important;

  box-shadow:0 10px 24px rgba(239,68,68,.20) !important;
}

/* Mobile */
@media(max-width:768px){

  body .reorder-page #reorderSuccessScreen
  .master-tool-title{
    font-size:34px !important;
    line-height:1.2 !important;
  }

  body .reorder-page #reorderSuccessScreen
  .master-tool-description{
    max-width:100% !important;
    font-size:17px !important;
    line-height:1.5 !important;
    margin-bottom:24px !important;
  }

  body .reorder-page #reorderSuccessScreen
  button.download-result-btn.master-tool-download-button{
    width:100% !important;
    max-width:320px !important;
    min-width:0 !important;
    height:60px !important;
    font-size:19px !important;
  }
}

/* =========================================
   REORDER PDF — SUCCESS SPACING
   EXACT COMPRESS PDF POSITION
========================================= */

body .reorder-page #reorderSuccessScreen.master-tool-success{
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;

  padding:58px 20px 40px !important;
  background:#f3f4f8 !important;
  box-sizing:border-box !important;
}

/* Heading spacing */
body .reorder-page #reorderSuccessScreen.master-tool-success
h1.master-tool-title{
  font-size:44px !important;
  line-height:1.2 !important;
  margin:0 0 14px !important;
}

/* Description spacing */
body .reorder-page #reorderSuccessScreen.master-tool-success
p.master-tool-description{
  font-size:20px !important;
  line-height:1.5 !important;
  margin:0 0 36px !important;
}

/* Download button */
body .reorder-page #reorderSuccessScreen.master-tool-success
button.master-tool-download-button{
  width:330px !important;
  min-width:330px !important;
  max-width:330px !important;

  height:auto !important;
  padding:25px 38px !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  font-family:Arial, Helvetica, sans-serif !important;
  font-size:28px !important;
  line-height:1 !important;
  font-weight:800 !important;

  white-space:nowrap !important;

  border:none !important;
  border-radius:11px !important;
}

/* Mobile */
@media(max-width:768px){

  body .reorder-page #reorderSuccessScreen.master-tool-success{
    padding:38px 18px 30px !important;
  }

  body .reorder-page #reorderSuccessScreen.master-tool-success
  h1.master-tool-title{
    font-size:34px !important;
    line-height:1.2 !important;
  }

  body .reorder-page #reorderSuccessScreen.master-tool-success
  p.master-tool-description{
    font-size:17px !important;
    line-height:1.5 !important;
    margin-bottom:24px !important;
  }

  body .reorder-page #reorderSuccessScreen.master-tool-success
  button.master-tool-download-button{
    width:100% !important;
    min-width:0 !important;
    max-width:320px !important;

    padding:18px 24px !important;
    font-size:19px !important;
  }
}

/* =========================================================
   ROTATE PDF — MASTER UI
   Match Compress / Merge approved UI
========================================================= */


/* =========================================================
   ROTATE PDF — START SCREEN
========================================================= */

body .rotate-page .rotate-start-screen{
  width:100% !important;
  min-height:calc(100vh - 72px) !important;

  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;

  text-align:center !important;

  padding:55px 20px 40px !important;

  box-sizing:border-box !important;
}


/* Upload row */

body .rotate-page .rotate-select-row{
  position:relative !important;

  width:100% !important;

  align-items:center !important;
  justify-content:center !important;

  gap:24px !important;
}


/* Main upload box */

body .rotate-page .rotate-upload-box{
  width:330px !important;
  min-width:330px !important;

  height:78px !important;

  align-items:center !important;
  justify-content:center !important;

  margin:0 !important;
}


/* Select PDF button */

body .rotate-page .rotate-upload-box h2{
  width:330px !important;
  min-width:330px !important;

  height:78px !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  box-sizing:border-box !important;

  margin:0 !important;

  padding:25px 38px !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  border:none !important;
  border-radius:11px !important;

  font-family:Arial, Helvetica, sans-serif !important;

  font-size:28px !important;
  font-weight:800 !important;

  line-height:1 !important;

  white-space:nowrap !important;

  box-shadow:0 10px 24px rgba(239,68,68,.20) !important;

  cursor:pointer !important;
}


/* Cloud buttons */

body .rotate-page .rotate-select-row .cloud-buttons{
  position:absolute !important;

  left:calc(50% + 181px) !important;

  top:47% !important;

  transform:translateY(-50%) !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  gap:10px !important;

  margin:0 !important;
}


/* Google Drive + Dropbox */

body .rotate-page .rotate-select-row .cloud-buttons button{
  width:38px !important;
  height:38px !important;

  min-width:38px !important;
  min-height:38px !important;

  padding:0 !important;
  margin:0 !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  border:none !important;
  border-radius:50% !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  font-size:17px !important;

  box-sizing:border-box !important;

  cursor:pointer !important;
}


/* Drop text */

body .rotate-page .rotate-start-screen .master-tool-drop-text{
  margin-top:14px !important;

  text-align:center !important;

  font-family:Arial, Helvetica, sans-serif !important;

  font-size:15px !important;

  line-height:1.5 !important;

  color:#64748b !important;
}


/* =========================================================
   ROTATE PDF — PREVIEW ACTION BUTTON
========================================================= */

body .rotate-page .rotate-action-panel
.rotate-main-btn.master-tool-action-button{

  width:100% !important;

  height:70px !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  gap:12px !important;

  margin:24px 0 0 !important;

  padding:20px 24px !important;

  box-sizing:border-box !important;

  background:#ff3131 !important;
  color:#ffffff !important;

  border:none !important;
  border-radius:11px !important;

  font-family:Arial, Helvetica, sans-serif !important;

  font-size:24px !important;
  font-weight:800 !important;

  line-height:1 !important;

  white-space:nowrap !important;

  box-shadow:0 10px 24px rgba(239,68,68,.20) !important;

  cursor:pointer !important;
}


/* Preview heading */

body .rotate-page .rotate-action-panel
h1.master-tool-title{

  margin:0 0 10px !important;

  font-family:Arial, Helvetica, sans-serif !important;

  font-size:32px !important;

  line-height:1.15 !important;

  font-weight:900 !important;

  color:#111827 !important;
}


/* =========================================================
   ROTATE PDF — SUCCESS SCREEN
========================================================= */

body .rotate-page #rotateSuccessScreen.master-tool-success{

  flex-direction:column !important;

  align-items:center !important;
  justify-content:flex-start !important;

  text-align:center !important;

  padding:58px 20px 40px !important;

  background:#f3f4f8 !important;

  box-sizing:border-box !important;
}


/* Success heading */

body .rotate-page #rotateSuccessScreen.master-tool-success
h1.master-tool-title{

  font-size:44px !important;

  line-height:1.2 !important;

  margin:0 0 14px !important;
}


/* Success description */

body .rotate-page #rotateSuccessScreen.master-tool-success
p.master-tool-description{

  font-size:20px !important;

  line-height:1.5 !important;

  margin:0 0 36px !important;
}


/* Download button */

body .rotate-page #rotateSuccessScreen.master-tool-success
button.master-tool-download-button{

  width:330px !important;

  min-width:330px !important;

  max-width:330px !important;

  height:auto !important;

  padding:25px 38px !important;

  background:#ff3131 !important;

  background-color:#ff3131 !important;

  color:#ffffff !important;

  font-family:Arial, Helvetica, sans-serif !important;

  font-size:28px !important;

  line-height:1 !important;

  font-weight:800 !important;

  white-space:nowrap !important;

  border:none !important;

  border-radius:11px !important;

  box-shadow:0 10px 24px rgba(239,68,68,.20) !important;

  cursor:pointer !important;
}


/* =========================================================
   ROTATE PDF — MOBILE
========================================================= */

@media(max-width:768px){

  body .rotate-page .rotate-start-screen{

    padding:38px 18px 30px !important;
  }


  body .rotate-page .rotate-upload-box{

    width:100% !important;

    min-width:0 !important;

    max-width:330px !important;
  }


  body .rotate-page .rotate-upload-box h2{

    width:100% !important;

    min-width:0 !important;

    max-width:330px !important;

    font-size:22px !important;
  }


  body .rotate-page .rotate-select-row .cloud-buttons{

    left:calc(50% + 181px) !important;
  }


  body .rotate-page #rotateSuccessScreen.master-tool-success{

    padding:38px 18px 30px !important;
  }


  body .rotate-page #rotateSuccessScreen.master-tool-success
  h1.master-tool-title{

    font-size:34px !important;

    line-height:1.2 !important;
  }


  body .rotate-page #rotateSuccessScreen.master-tool-success
  p.master-tool-description{

    font-size:17px !important;

    line-height:1.5 !important;

    margin-bottom:24px !important;
  }


  body .rotate-page #rotateSuccessScreen.master-tool-success
  button.master-tool-download-button{

    width:100% !important;

    min-width:0 !important;

    max-width:320px !important;

    padding:18px 24px !important;

    font-size:19px !important;
  }

}

/* =========================================================
   PAGE NUMBERS — MASTER TOOL UI
   Match Compress PDF approved design
========================================================= */

/* START SCREEN */
body .page-number-page .page-number-start-screen{
  width:100% !important;
  min-height:calc(100vh - 72px) !important;
  
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
  padding:55px 20px 40px !important;
  box-sizing:border-box !important;
}

/* TITLE */
body .page-number-page .page-number-start-screen
h1.master-tool-title{
  margin:0 0 14px !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:44px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  color:#111827 !important;
}

/* DESCRIPTION */
body .page-number-page .page-number-start-screen
p.master-tool-description{
  margin:0 0 36px !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:20px !important;
  line-height:1.5 !important;
  color:#64748b !important;
}

/* SELECT ROW */
body .page-number-page .page-number-select-row{
  position:relative !important;
  width:100% !important;
  
  align-items:center !important;
  justify-content:center !important;
  gap:24px !important;
}

/* UPLOAD BOX */
body .page-number-page .page-number-upload-box{
  width:330px !important;
  min-width:330px !important;
  height:78px !important;
  
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* MAIN UPLOAD BUTTON */
body .page-number-page .page-number-upload-box
h2.master-tool-button{
  width:330px !important;
  min-width:330px !important;
  height:78px !important;
 
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:25px 38px !important;
  background:#ff3131 !important;
  color:#ffffff !important;
  border:none !important;
  border-radius:11px !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:28px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-shadow:0 10px 24px rgba(239,68,68,.20) !important;
  cursor:pointer !important;
}

/* CLOUD BUTTONS */
body .page-number-page .page-number-select-row
.cloud-buttons{
  position:absolute !important;
  left:calc(50% + 181px) !important;
  top:0 !important;
  height:78px !important;
  transform:none !important;
  
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  margin:0 !important;
}

/* CLOUD CIRCLES */
body .page-number-page .page-number-select-row
.cloud-buttons button{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  padding:0 !important;
  margin:0 !important;
  
  align-items:center !important;
  justify-content:center !important;
  border:none !important;
  border-radius:50% !important;
  background:#ff3131 !important;
  background-color:#ff3131 !important;
  color:#ffffff !important;
  font-size:17px !important;
  box-sizing:border-box !important;
  cursor:pointer !important;
}

/* DROP TEXT */
body .page-number-page .page-number-start-screen
.master-tool-drop-text{
  width:100% !important;
  margin-top:14px !important;
  text-align:center !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:15px !important;
  line-height:1.5 !important;
  color:#64748b !important;
}


/* =========================================================
   PREVIEW SCREEN
========================================================= */

body .page-number-page
#pageNumberPreviewScreen.master-tool-preview{
  box-sizing:border-box !important;
}

/* ACTION PANEL */
body .page-number-page .page-number-action-panel{
  box-sizing:border-box !important;
}

/* PREVIEW TITLE */
body .page-number-page .page-number-action-panel
h1.master-tool-title{
  margin:0 0 10px !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:32px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  color:#111827 !important;
}

/* PREVIEW DESCRIPTION */
body .page-number-page .page-number-action-panel
p.master-tool-panel-description{
  margin:0 0 24px !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:17px !important;
  line-height:1.5 !important;
  color:#64748b !important;
}

/* OPTION BOXES */
body .page-number-page .page-number-action-panel
.master-tool-option-box{
  box-sizing:border-box !important;
}

/* ACTION BUTTON */
body .page-number-page .page-number-action-panel
.page-number-main-btn.master-tool-action-button{
  width:100% !important;
  height:70px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  margin:24px 0 0 !important;
  padding:20px 24px !important;
  box-sizing:border-box !important;
  background:#ff3131 !important;
  color:#ffffff !important;
  border:none !important;
  border-radius:11px !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-shadow:0 10px 24px rgba(239,68,68,.20) !important;
  cursor:pointer !important;
}

/* PROGRESS */
body .page-number-page .page-number-action-panel
.master-tool-progress{
  width:100% !important;
  box-sizing:border-box !important;
}

body .page-number-page .page-number-action-panel
.master-tool-progress-bar{
  box-sizing:border-box !important;
}


/* =========================================================
   SUCCESS SCREEN
========================================================= */

body .page-number-page
#pageNumberSuccessScreen.master-tool-success{
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-align:center !important;
  padding:58px 20px 40px !important;
  background:#f3f4f8 !important;
  box-sizing:border-box !important;
}

/* SUCCESS TITLE */
body .page-number-page
#pageNumberSuccessScreen.master-tool-success
h1.master-tool-title{
  font-size:44px !important;
  line-height:1.2 !important;
  margin:0 0 14px !important;
}

/* SUCCESS DESCRIPTION */
body .page-number-page
#pageNumberSuccessScreen.master-tool-success
p.master-tool-description{
  font-size:20px !important;
  line-height:1.5 !important;
  margin:0 0 36px !important;
}

/* DOWNLOAD BUTTON */
body .page-number-page
#pageNumberSuccessScreen.master-tool-success
button.master-tool-download-button{
  width:330px !important;
  min-width:330px !important;
  max-width:330px !important;
  height:auto !important;
  padding:25px 38px !important;
  background:#ff3131 !important;
  background-color:#ff3131 !important;
  color:#ffffff !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-size:28px !important;
  line-height:1 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  border:none !important;
  border-radius:11px !important;
  cursor:pointer !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

  body .page-number-page .page-number-start-screen{
    padding:38px 18px 30px !important;
  }

  body .page-number-page .page-number-start-screen
  h1.master-tool-title{
    font-size:34px !important;
    line-height:1.2 !important;
  }

  body .page-number-page .page-number-start-screen
  p.master-tool-description{
    font-size:17px !important;
    line-height:1.5 !important;
    margin-bottom:28px !important;
  }

  body .page-number-page .page-number-select-row{
    gap:0 !important;
  }

  body .page-number-page .page-number-upload-box,
  body .page-number-page .page-number-upload-box
  h2.master-tool-button{
    width:280px !important;
    min-width:280px !important;
  }

  body .page-number-page .page-number-upload-box,
  body .page-number-page .page-number-upload-box
  h2.master-tool-button{
    height:70px !important;
  }

  body .page-number-page .page-number-upload-box
  h2.master-tool-button{
    font-size:22px !important;
    padding:20px 24px !important;
  }

  body .page-number-page .page-number-select-row
  .cloud-buttons{
    position:static !important;
    height:auto !important;
    margin-left:12px !important;
    gap:8px !important;
  }

  body .page-number-page .page-number-select-row
  .cloud-buttons button{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
  }

  body .page-number-page
  #pageNumberSuccessScreen.master-tool-success{
    padding:38px 18px 30px !important;
  }

  body .page-number-page
  #pageNumberSuccessScreen.master-tool-success
  h1.master-tool-title{
    font-size:34px !important;
    line-height:1.2 !important;
  }

  body .page-number-page
  #pageNumberSuccessScreen.master-tool-success
  p.master-tool-description{
    font-size:17px !important;
    line-height:1.5 !important;
    margin-bottom:24px !important;
  }

  body .page-number-page
  #pageNumberSuccessScreen.master-tool-success
  button.master-tool-download-button{
    width:100% !important;
    min-width:0 !important;
    max-width:320px !important;
    padding:18px 24px !important;
    font-size:19px !important;
  }

}