/* PDF to Image Converter
   Scoped only to .tool-section.
   Uses global variables:
   --white-bg
   --black-text
   --blue-hover
   --gray-bg
   --gray-text
*/

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--gray-bg);
  color: var(--black-text);
}
.tool-section {
  padding: 60px 16px;
}


.tool-section .container {

  max-width: 1000px;

  background: var(--white-bg);

  padding: 25px;

  margin: 0 auto;

  border-radius: 12px;

  box-shadow: 0 4px 20px rgba(0,0,0,0.08);

}



.tool-section h1 {

  text-align:center;

  color:var(--black-text);

  margin-bottom:10px;

}



.tool-section .subtitle {

  text-align:center;

  color:var(--gray-text);

  margin-bottom:30px;

}



/* ============================
   Upload Area
============================ */


.tool-section #dropZone {

  height:260px;

  border:2px dashed var(--blue-hover);

  background:var(--gray-bg);

  border-radius:12px;

  display:flex;

  justify-content:center;

  align-items:center;

  cursor:pointer;

  transition:.25s;

}



.tool-section #dropZone:hover,

.tool-section #dropZone.dragover {

  background:var(--white-bg);

  border-color:var(--blue-hover);

}



.tool-section .drop-content {

  text-align:center;

}



.tool-section .drop-content svg {

  margin-bottom:15px;

}



.tool-section .drop-content h2 {

  color:var(--blue-hover);

  margin-bottom:10px;

}



.tool-section .drop-content p {

  color:var(--gray-text);

  margin-bottom:15px;

}



.tool-section #browseBtn {

  background:var(--blue-hover);

  color:white;

  border:none;

  padding:12px 30px;

  border-radius:8px;

  font-size:15px;

  font-weight:bold;

  cursor:pointer;

}



.tool-section #browseBtn:hover {

  opacity:.85;

}





/* ============================
   Selected File List
============================ */


.tool-section #fileList {

  margin-top:20px;

}



.tool-section .file-item {


  display:flex;

  justify-content:space-between;

  align-items:center;


  background:var(--gray-bg);


  padding:12px 15px;


  border-radius:10px;


  margin-bottom:10px;


}



.tool-section .file-item span {

  color:var(--black-text);

  font-size:14px;

}



.tool-section .remove-file {


  width:34px;

  height:34px;


  border-radius:8px;


  border:1px solid var(--gray-text);


  background:var(--white-bg);


  color:var(--black-text);


  cursor:pointer;

}



.tool-section .remove-file:hover {


  background:#ef4444;

  border-color:#ef4444;

  color:white;

}





/* ============================
   Settings
============================ */


.tool-section .settings {


  display:grid;


  grid-template-columns:

  repeat(auto-fit,minmax(220px,1fr));


  gap:18px;


  margin-top:25px;


}



.tool-section .group {


  background:var(--gray-bg);


  padding:15px;


  border-radius:12px;


}



.tool-section label {


  display:block;


  font-weight:bold;


  color:var(--black-text);


  margin-bottom:8px;


}



.tool-section input,

.tool-section select {


  width:100%;


  padding:10px 12px;


  border-radius:8px;


  border:1px solid var(--gray-text);


  background:var(--white-bg);


  color:var(--black-text);


  font-size:15px;


}



.tool-section input:focus,

.tool-section select:focus {


  outline:none;

  border-color:var(--blue-hover);

}




/* ============================
   Buttons
============================ */


.tool-section .buttons {


  margin-top:25px;


  display:flex;


  justify-content:center;


  gap:15px;


  flex-wrap:wrap;


}



.tool-section .buttons button {


  padding:14px 35px;


  border-radius:10px;


  border:none;


  background:var(--blue-hover);


  color:white;


  font-size:16px;


  font-weight:bold;


  cursor:pointer;


}



.tool-section .buttons button:hover {


  opacity:.85;


}



.tool-section #downloadBtn {


  background:#28a745;


}





/* ============================
   Progress
============================ */


.tool-section #progress {


  width:100%;


  height:14px;


  background:var(--gray-bg);


  border-radius:20px;


  overflow:hidden;


  margin-top:25px;


}



.tool-section #bar {


  height:100%;


  width:0;


  background:var(--blue-hover);


  transition:.3s;


}




.tool-section #status {


  text-align:center;


  margin-top:12px;


  color:var(--gray-text);


  font-size:14px;


}




/* ============================
   Preview Gallery
============================ */


.tool-section #preview {


  margin-top:30px;


  display:grid;


  grid-template-columns:

  repeat(auto-fill,minmax(260px,1fr));


  gap:20px;


}



.tool-section .image-box {


  background:var(--gray-bg);


  border-radius:12px;


  padding:12px;


  box-shadow:0 4px 15px rgba(0,0,0,.08);


}



.tool-section .image-box img {


  width:100%;


  border-radius:8px;


  display:block;


}



.tool-section .image-box p {


  text-align:center;


  color:var(--black-text);


  font-size:13px;


  font-weight:bold;


  margin:10px 0;


}



.tool-section .image-box button {


  width:100%;


  padding:10px;


  border:none;


  border-radius:8px;


  background:var(--blue-hover);


  color:white;


  cursor:pointer;


  font-weight:bold;


}



.tool-section .image-box button:hover {


  opacity:.85;


}





/* ============================
   Mobile
============================ */


@media(max-width:600px){


  .tool-section {


    padding:30px 12px;

  }



  .tool-section #dropZone {


    height:220px;

  }



  .tool-section .buttons {


    flex-direction:column;

  }



  .tool-section .buttons button {


    width:100%;

  }



}

.tool-section .group input,
.tool-section .group select {

  width:100%;

  height:42px;

  padding:10px 12px;

  box-sizing:border-box;

}

.tool-section .group {

  display:flex;

  flex-direction:column;

}

.tool-section input:disabled {

    background:var(--gray-bg);

    cursor:not-allowed;

    opacity:.7;

}