body {
      font-family: sans-serif;
      margin: 20px;
    }

    h1, h2 {
      text-align: center;
    }

    pre {
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    #loadingMessage {
      background-color: #f0f0f0;
      border: 1px solid #ddd;
      padding: 10px;
      margin: 10px 0;
      text-align: center;
      font-weight: bold;
  }
  .file-input-container {
    position: relative;
    display: inline-block;
}

.file-input {
    opacity: 0;
    width: 0.1px;
    height: 0.1px;
    position: absolute;
}

.custom-file-label {
    display: inline-block;
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.custom-file-label:hover {
    background: #0056b3;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #0056b3;
}
@media print {
  /* General print styles */
  @page {
      margin: 2cm;
  }
  
  body {
      font-size: 12pt;
      line-height: 1.3;
  }
  
  h1, h2 {
      page-break-after: avoid;
      page-break-inside: avoid;
  }
  
  img {
      page-break-inside: avoid;
      max-width: 100% !important;
  }
  
  /* Ensure response text is black for better printing */
  #apiResponse, #modalResponse {
      color: black !important;
  }
  
  /* Add some spacing between elements */
  .modal-image-container,
  .modal-text-container,
  #imagePreview,
  #apiResponse {
      margin-bottom: 20px;
  }
  
  /* Hide unnecessary elements during print */
  button, 
  .close,
  .print-actions,
  .modal-actions {
      display: none !important;
  }
}