/* ============================
   Upload Page Styles
   ============================ */
   @import url("colors.css");
   @import url("global.css");
   
   /* Main Container */
   .upload-container {
       background-color: #000000; /* Black background */
       max-width: 800px;
       margin: 20px auto;
       padding: 20px;
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
       color: #FFFFFF; /* White text for all content */
   }
   
   /* Headings */
   .upload-container h1,
   .upload-container h2 {
       color: #FFFFFF; /* White text for visibility */
       text-align: center;
       margin-bottom: 15px;
   }
   
   /* Instructional Text */
   .upload-container p {
       text-align: center;
       font-size: 16px;
       margin-bottom: 20px;
       color: #FFFFFF; /* White text */
   }
   
   /* Upload Form */
   .upload-form {
       display: flex;
       flex-direction: column;
       gap: 15px;
       align-items: center;
   }
   
   /* File Input */
   .file-label {
       font-weight: bold;
       color: #FFFFFF; /* White text */
       margin-bottom: 5px;
   }
   
   .file-upload {
       display: block;
       padding: 10px;
       width: 100%;
       max-width: 400px;
       border: 1px solid var(--secondary-color); /* Darker blue */
       border-radius: var(--border-radius);
       background-color: #FFFFFF; /* White */
       cursor: pointer;
       color: #000000; /* Black text */
   }
   
   /* File List Styling */
   .file-list {
       width: 100%;
       max-width: 500px;
       margin-top: 15px;
       padding: 10px;
       background: #1A1A1A; /* Dark gray */
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
       color: #FFFFFF; /* White text */
   }
   
   /* Hide file-list when empty */
   .file-list:empty {
       display: none; /* Hide when no files are selected */
   }
   
   .file-item {
       display: flex;
       justify-content: space-between;
       align-items: center;
       background: #333333; /* Lighter gray */
       padding: 8px 12px;
       border-radius: var(--border-radius);
       margin-bottom: 5px;
       box-shadow: var(--box-shadow);
       color: #FFFFFF; /* White text */
   }
   
   .file-item span {
       font-size: 14px;
       color: #FFFFFF; /* White text */
   }
   
   .remove-file-btn {
       background: var(--error-color); /* Red */
       color: white;
       border: none;
       padding: 5px 10px;
       font-size: 14px;
       border-radius: var(--border-radius);
       cursor: pointer;
       transition: background-color 0.3s ease;
   }
   
   .remove-file-btn:hover {
       background: var(--error-hover-color); /* Darker red */
   }
   
   /* AI & Privacy Agreement Boxes */
   #ai-consent-container,
   #privacy-pledge-container {
       background-color: #1A1A1A; /* Dark gray */
       padding: 20px;
       border-radius: var(--border-radius);
       box-shadow: var(--box-shadow);
       margin-bottom: 15px;
       width: 100%;
       max-width: 600px;
       color: #FFFFFF; /* White text */
   }
   
   #ai-consent-container h2,
   #privacy-pledge-container h2 {
       font-size: 18px;
       color: #FFFFFF; /* White text for visibility */
       margin-bottom: 10px;
   }
   
   #ai-consent-container p,
   #privacy-pledge-container p {
       font-size: 16px;
       color: #FFFFFF;
       line-height: 1.8;
   }
   
   /* Custom Checkbox Styling */
   .agreement-section {
       display: flex;
       flex-direction: column;
       gap: 10px;
   }
   
   .checkbox-label {
       display: flex;
       align-items: center;
       color: #FFFFFF;
       font-size: 14px;
   }
   
   input[type="checkbox"] {
       appearance: none;
       -webkit-appearance: none;
       -moz-appearance: none;
       width: 20px;
       height: 20px;
       border: 2px solid #FFFFFF; /* White border */
       border-radius: 4px;
       margin-right: 10px;
       position: relative;
       cursor: pointer;
   }
   
   input[type="checkbox"]:checked {
       background-color: var(--primary-color); /* Bright blue */
       border-color: var(--primary-color);
   }
   
   input[type="checkbox"]:checked::after {
       content: '\2713'; /* Checkmark */
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       color: #FFFFFF;
       font-size: 14px;
       font-weight: bold;
   }
   
   /* Submit Button */
   .submit-btn {
       background-color: var(--primary-color); /* Bright blue */
       color: white;
       padding: 12px 20px;
       font-size: 16px;
       font-weight: bold;
       border: 2px solid var(--secondary-color); /* Darker blue border */
       border-radius: var(--border-radius);
       cursor: pointer;
       transition: background-color 0.3s ease, box-shadow 0.3s ease;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
   }
   
   .submit-btn:hover {
       background-color: var(--secondary-color); /* Darker blue */
       box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
   }
   
   .submit-btn:disabled {
       background-color: #666;
       border-color: #666;
       cursor: not-allowed;
       box-shadow: none;
   }
   
   /* Error Message */
   #upload-status {
       color: var(--error-color);
       font-weight: bold;
       text-align: center;
       margin-top: 10px;
   }
   
   /* ============================
      Responsive Design
      ============================ */
   @media (max-width: 600px) {
       .upload-container {
           max-width: 90%;
           padding: 15px;
       }
   
       .file-upload {
           max-width: 100%;
       }
   
       .submit-btn {
           width: 100%;
       }
   
       #ai-consent-container p,
       #privacy-pledge-container p {
           font-size: 14px;
       }
   
       input[type="checkbox"] {
           width: 18px;
           height: 18px;
       }
   }