.note {
            background: #eef8ff;
            padding: 10px;
            margin: 10px 0;
            border-left: 4px solid #0073aa;
        }
        .noscript-warning {
            background: #ffe6e6;
            border-left-color: red;
        }

        input[type="date"] {
            -webkit-appearance: none;
            appearance: none;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 1em;
            width: 100%;
            box-sizing: border-box;
            min-height: 44px;
        }

        @media screen and (-webkit-min-device-pixel-ratio:0) {
            select,
            textarea,
            input {
                font-size: 16px;
            }
        }
    


.upload-section {
  background: #eef8ff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  margin-bottom: 40px;
  overflow: hidden; /* Helps contain children that might expand */
}
.upload-section h2 {
  font-size: 1.5em;
  color: #333;
  margin-bottom: 1rem;
}

.upload-field {
  margin-bottom: 20px;
  overflow: hidden; /* Helps contain children that might expand */
}

.upload-field label {
  font-weight: bold;
  display: block;
  margin-bottom: 6px;
  color: #222;
}

.upload-hint {
  font-size: 0.9em;
  color: #555;
  margin-top: 4px;
}
.upload-note {
  font-size: 0.85em;
  color: #666;
  background: #fff5c2;
  padding: 12px;
  border-radius: 8px;
  margin-top: 10px;
}

.upload-subgroup {
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #ddd;
  margin-top: 10px;
  overflow: hidden; /* Helps contain children that might expand */
}

.upload-section select,
.upload-section input[type="file"] {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
  width: 100%;
  font-size: 1em;
}

/* Custom styling for the file upload button */
input[type="file"].upload-btn {
  background-color: #4CAF50;
  color: transparent; /* Hide the default file name text */
  padding: 12px 16px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  max-width: 100%; /* Ensure it doesn't exceed its container */
  display: inline-block; /* Allows width to be set and text-align to work */
  transition: background-color 0.3s ease;
  overflow: hidden; /* Hide any overflow within the button */
  white-space: nowrap; /* Prevent text from wrapping inside the button */
  text-overflow: ellipsis; /* Add ellipsis if text overflows (though text is hidden) */
  box-sizing: border-box; /* Include padding and border in the element's total width */
  height: auto; /* Allow height to adjust if needed, but the button part controls appearance */
}

/* Styling for the native file upload button part (for Webkit browsers like Chrome, Safari) */
input[type="file"].upload-btn::-webkit-file-upload-button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 14px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box; /* Consistent box model */
  -webkit-appearance: none; /* Removes default button styling in Webkit */
  appearance: none; /* Standard property */
  float: left; /* Keep the button to the left if the file input stretches */
  margin-right: 10px; /* Space between button and where filename would be if not hidden */
}

input[type="file"].upload-btn:hover::-webkit-file-upload-button {
  background-color: #388E3C;
}

/* Styling for the file confirmation message */
.file-confirmation {
  word-break: break-all; /* Allows long words (like filenames) to break and wrap */
  overflow-wrap: break-word; /* Another property for word breaking */
  max-width: 100%; /* Ensure it doesn't overflow its parent */
  display: none; /* Initially hidden, will be shown by JS */
  margin-top: 8px;
  color: green;
  font-weight: 500;
}