/* PDF Converter page styles */
.pdf-container { 
   max-width: 720px; 
   margin: 2rem auto; 
   padding: 2rem; 
   background: var(--card); 
   border-radius:1rem; 
   box-shadow: 0 4px 12px rgba(0,0,0,0.12);
   font-size: 1rem;
   color: var(--text); 
 }

 .pdf-container:hover {
  transform: translateY(-1px);
  opacity: 1;
}

.pdf-container h1 { 
   text-align:center; 
   font-size:2rem; font-weight:800; 
   margin: .4rem 0 0.5rem; 
 }

.pdf-container p { 
    text-align:center; 
    color:var(--soft); 
    margin-bottom:1rem; 
  }

.tool-options { 
  display:flex; 
  justify-content:center; 
  gap:.6rem; margin-bottom:1rem; 
}

.tool-options .btn { 
  flex:1; min-width:120px; 
  padding:.6rem .9rem; 
  border-radius:12px; 
  font-weight:700; 
}

.tool-options .btn.active { 
  background:var(--primary); 
  color:#fff; 
  box-shadow:0 10px 30px var(--ring); 
}

.tool-extra { 
  text-align:center; 
  margin-bottom:1rem; 
}

.tool-extra label { 
  font-weight:600; 
  display:block; 
  margin-bottom:.4rem; 
  color:var(--soft); 
}

.tool-extra select, .tool-extra input { 
  padding:.6rem 1rem; 
  border-radius:10px; 
  border:1px solid var(--border); 
}

.tool-extra input:focus, select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--ring);
}

.drop-zone { 
  border:2px dashed var(--border); 
  border-radius:12px; 
  background: #f8f9fa; 
  padding:1.25rem; 
  text-align:center; 
  cursor:pointer; 
  margin-bottom:1rem; 
  transition:box-shadow .12s, border-color .12s, transform .08s; 
  min-height:100px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
}

.drop-zone.dragover { border-color:var(--primary); background:rgba(96,165,250,0.06); transform:translateY(-2px); }
.drop-inner { display:flex; flex-direction:column; align-items:center; gap:.45rem; }
.drop-icon { width:42px; height:42px; color:var(--soft); }

.drop-title { font-weight:800; color:var(--text); margin:0; }
.drop-text { color:var(--soft); margin:0; font-size:.95rem; }

.file-message { text-align:center; margin:.6rem 0; color:var(--soft); }

.file-queue { list-style:none; padding:0; margin:1rem 0 0 0; display:flex; flex-direction:column; gap:.6rem; }
.file-item { display:flex; align-items:center; gap:.8rem; justify-content:space-between; background:var(--card); padding:.7rem 1rem; border-radius:10px; border:1px solid var(--border); }
.file-item .file-info { display:flex; gap:.8rem; align-items:center; min-width:0; flex:1; }
.file-item .thumbnail { width:48px; height:62px; border:1px solid var(--border); border-radius:6px; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.file-item .thumbnail canvas { width:100%; height:100%; object-fit:contain; display:block; }
.file-item .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:320px; color:var(--text); font-weight:600; }
.btn-remove { padding:.4rem .7rem; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--soft); cursor:pointer; }

.process-actions { display:flex; justify-content:center; gap:1rem; margin-top:1rem; }
.btn.big { font-size:1.05rem; padding:0.95rem 1.8rem; border-radius:12px; }
.btn.outline.big { background:transparent; border:1px solid var(--border); color:var(--text); }

.progress-wrapper { margin-top:1rem; border-radius:8px; overflow:hidden; background:var(--muted); height:12px; }
.progress-bar { height:100%; width:0%; background:linear-gradient(90deg,var(--primary),var(--primary)); transition:width .25s ease; box-shadow:0 6px 20px rgba(37,99,235,.06); }

.outputs-list { list-style:none; padding:0; margin-top:1rem; display:flex; flex-direction:column; gap:.6rem; }
.outputs-list a { display:inline-flex; gap:.5rem; align-items:center; padding:.6rem 1rem; border-radius:8px; border:1px solid var(--border); background:var(--card); color:var(--text); text-decoration:none; }

.split-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem; margin-top:1rem; }
.split-thumb { position:relative; height:100px; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--card); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.split-thumb canvas { width:100%; height:100%; object-fit:cover; display:block; }
.thumb-footer { position:absolute; left:6px; right:6px; bottom:6px; display:flex; justify-content:space-between; gap:.4rem; align-items:center; }
.page-label { font-size:.72rem; background:rgba(0,0,0,0.48); color:#fff; padding:2px 6px; border-radius:6px; }
.download-arrow { background:var(--primary); color:#fff; padding:4px 8px; border-radius:6px; font-size:.78rem; text-decoration:none; }

/* Modal */
.preview-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(2,6,23,0.6); z-index:1200; }
.preview-modal[aria-hidden="true"] { display:none; }
.modal-content { width:92%; max-width:900px; max-height:90%; background:var(--card); border-radius:12px; padding:1rem; display:flex; flex-direction:column; gap:.6rem; }
.modal-header { display:flex; justify-content:space-between; align-items:center; }
.modal-body { flex:1; display:flex; align-items:center; justify-content:center; overflow:auto; }
.modal-body canvas { max-width:100%; max-height:75vh; background:#fff; border-radius:6px; }
.modal-actions { display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.modal-close { border:none; background:none; font-size:1.6rem; cursor:pointer; }

@media (max-width: 960px) {
  .tool-card { margin:1rem; padding:1.25rem; }
  .tool-options { flex-direction:row; gap:.4rem; }
  .file-item .name { max-width:140px; }
}

:root {
  --gallery-gap: 0.6rem;
}

.tool-card {
  max-width: 820px; 
  margin: 2.25rem auto;
  padding: 2rem;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 10px 30px rgba(2,6,23,0.04);
  border: 1px solid var(--border);
}

.p { color: var(--soft); text-align:center; margin-bottom:1rem; }

.tool-options.centered { display:flex; gap:.6rem; justify-content:center; margin-bottom:1rem; }
.tool-options.centered .btn { min-width: 140px; flex: 0 0 auto; }

/* Options row */
.options-row { display:flex; gap:.75rem; align-items:center; justify-content:center; margin-bottom:1rem; }
.options-row label { font-weight:600; color:var(--soft); }
.options-row select, .options-row input[type="text"] {
  padding:.8rem 1rem; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text); font-size:1rem;
  min-width:200px;
}

/* Browse button inside drop zone */
.btn-browse { padding:.6rem .95rem; border-radius:10px; background:var(--primary); color:#fff; border:none; font-weight:700; box-shadow:0 10px 30px rgba(37,99,235,0.12); }

/* Queue */
.file-queue { list-style:none; padding:0; margin:1rem 0; display:flex; flex-direction:column; gap:.6rem; }
.file-item {
  display:flex; align-items:center; gap:.8rem;
  justify-content:space-between; padding:.8rem 1rem; border-radius:10px; border:1px solid var(--border); background:var(--card);
}
.file-info { display:flex; align-items:center; gap:.8rem; min-width:0; flex:1; }
.thumbnail { width:48px; height:64px; border-radius:6px; overflow:hidden; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.file-name { font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:360px; }
.btn-remove { padding:.45rem .7rem; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--soft); cursor:pointer; font-weight:700; }

/* Process / Reset buttons (centered, larger) */
.process-actions { display:flex; gap:1rem; justify-content:center; margin-top:1rem; }
.process-actions .process-btn, .process-actions .reset-btn {
  padding: .95rem 1.25rem;
  font-size:1.05rem;
  border-radius:12px;
  min-width:200px;
}
.process-actions .process-btn { background:linear-gradient(180deg,var(--primary),var(--primary)); color:#fff; box-shadow:0 18px 40px rgba(37,99,235,0.16); border:none; }
.process-actions .reset-btn { background:transparent; border:1px solid var(--border); color:var(--text); }

/* Progress bar */
.overall-progress { margin-top:1rem; width:100%; display:flex; justify-content:center; }
.progress-bar { width:90%; height:10px; border-radius:999px; background:var(--muted); overflow:hidden; border:1px solid var(--border); }
.progress-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--primary),var(--primary)); transition: width .25s linear; }

/* Split gallery */
.split-gallery { display:grid; gap:var(--gallery-gap); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin-top:1rem; }
.split-thumb { height:96px; border-radius:8px; border:1px solid var(--border); background:var(--card); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; cursor:pointer; }
.split-thumb canvas { width:100%; height:100%; object-fit:cover; display:block; }
.thumb-footer { position:absolute; left:6px; right:6px; bottom:6px; display:flex; justify-content:space-between; gap:.4rem; align-items:center; }
.page-label { font-size:.72rem; background:rgba(0,0,0,0.45); color:#fff; padding:2px 6px; border-radius:6px; }
.download-arrow { background:var(--primary); color:#fff; padding:4px 8px; border-radius:6px; font-size:.78rem; text-decoration:none; }

/* Modal */
.preview-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(2,6,23,0.6); z-index:1200; }
.preview-modal[aria-hidden="true"]{ display:none; }
.modal-content { width:92%; max-width:880px; max-height:90%; background:var(--card); border-radius:12px; padding:1rem; display:flex; flex-direction:column; gap:.6rem; }
.modal-body { flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; }
.modal-body canvas { width:100%; max-height:75vh; background:#fff; border-radius:8px; }

/* small responsive tweaks */
@media (max-width: 640px) {
  .tool-card { padding:1rem; margin:1rem; }
  .file-name { max-width:140px; }
  .process-actions .process-btn, .process-actions .reset-btn { min-width:140px; padding:.8rem 1rem; }
}

/* smaller select box */
#formatSelect {
  max-width: 140px;
  padding: 0.4rem;
}

/* draggable file cursor */
.file-queue .file-item[draggable="true"] {
  cursor: grab;
}
.file-queue .file-item.dragging {
  cursor: grabbing;
  opacity: 0.6;
}


/* Center and style tool option buttons */
.tool-options {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}

.tool-options .btn,
.process-actions .btn {
  font-size: 1rem;        
  padding: 0.5rem 1rem;  
  border-radius: 0.5rem;
  font-weight: 600;
  min-width: auto;        
  text-align: center;    
  cursor: pointer;
  transition: 
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease;
  display: inline-flex;   
  align-items: center;
  justify-content: center;
}

/* Hover + focus */
.tool-options .btn:hover,
.process-actions .btn:hover,
.tool-options .btn:focus,
.process-actions .btn:focus {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

/* Active buttons with unique colors */
.tool-options .btn.active {
  color: #fff;
  transform: scale(1.05);
  animation: popGlow 0.25s ease;
}

.tool-options .btn[data-tool="convert"].active,
.process-actions .btn.convert-mode {
  background: #2563eb; /* Blue */
  box-shadow: 0 0 10px rgba(37,99,235,0.5);
}

.tool-options .btn[data-tool="merge"].active,
.process-actions .btn.merge-mode {
  background: #16a34a; /* Green */
  box-shadow: 0 0 10px rgba(22,163,74,0.5);
}

.tool-options .btn[data-tool="split"].active,
.process-actions .btn.split-mode {
  background: #f97316; /* Orange */
  box-shadow: 0 0 10px rgba(249,115,22,0.5);
}

/* Process/Reset buttons centered */
.process-actions {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

/* Subtle pop animation */
@keyframes popGlow {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1.05); }
}


/* =========================
   MOBILE ENHANCEMENTS 
   ========================= */
@media (max-width: 520px) {

  .pdf-container {
    max-width: none !important; 
    width: 100% !important;
    padding: 1rem !important;
    margin: 1rem auto 1rem !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
  }

  /* Headings & Text */
  .pdf-container h1 {
    font-size: 1.55rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  .pdf-container p {
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
    text-align: center !important;
    margin-bottom: 1rem !important;
  }

  .tool-options { 
    display: flex; 
    justify-content: center; 
    gap: .6rem; 
    margin-bottom: 1rem; 
}

.tool-options .btn { 
    min-width: 120px; 
    padding: .6rem .9rem; 
    border-radius: 12px; 
    font-weight: 700; 
}

.tool-options .btn.active { 
    background: var(--primary); 
    color: #fff; 
    box-shadow: 0 10px 30px var(--ring); 
}

  .form-card {
    flex: 1;
    width: 100% !important;
    background: var(--muted);
    padding: 1rem;
    border-radius: 12px;
    border: 0rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }

  /* Inputs & Labels */
  ..form-card  input {
    padding: 0.75rem 0.85rem !important;
    font-size: 0.96rem !important;
    border-radius: 8px !important;
    min-height: 46px !important;
    appearance: none;
  }

  .form-card label {
    font-size: 0.88rem !important;
    font-weight: 800;
  }

.drop-zone { 
    border: 2px dashed var(--border); 
    border-radius: 12px; 
    background: #f8f9fa; 
    padding: 1.25rem; 
    text-align: center; 
    cursor: pointer; 
    margin: auto; 
    transition: box-shadow .12s, border-color .12s, transform .08s; 
    min-height: 100px; 
    max-height: 160px;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 2rem;
}
.drop-zone.dragover { 
    border-color: var(--primary); 
    background: rgba(96,165,250,0.06); 
    transform: translateY(-2px); 
}

.drop-inner { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: .45rem; 
}

.drop-icon { 
    width: 30px; 
    height: 30px; 
    color: var(--soft);
    margin-top: 1rem; 
}

.drop-title { 
    font-weight: 800; 
    color: var(--text); 
}

.drop-text { 
    color: var(--soft); 
    font-size: .95rem; 
}

  input:focus, select:focus, button:focus {
    outline: 2px solid var(--ring);
    outline-offset: 0.5px;
  }
}