/* Targeting Ninja Form select dropdown specifically */
select.ninja-forms-field {
  border: none !important;
  border-radius: 5px !important; /* Matching border-radius */
  background-color: #f4f4f4 !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding: 10px;
  font-family: 'IBM Plex Mono', monospace;
  padding-right: 30px !important; /* Space for custom arrow */
  background: #f4f4f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23333' d='M5 6L0 1h10z'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  background-size: 10px 6px !important;
  outline: none !important;
}

/* Ensuring select dropdown applies styles on hover and focus */
select.ninja-forms-field:hover,
select.ninja-forms-field:focus,
select.ninja-forms-field:active {
  border-color: white !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Targeting the select's wrapper to apply matching border-radius */
div.nf-field-element .nf-field {
  border-radius: 5px !important;
  border: none !important;
  box-shadow: none !important;
}

/* Style for the Select Files button */
button.nf-fu-fileinput-button {
  background-color: #000 !important; /* Black background */
  color: #fff !important; /* White text */
  font-family: 'IBM Plex Mono', monospace !important; /* IBM Plex Mono font */
  border-radius: 5px !important; /* Rounded corners */
  padding: 3px 10px !important; /* Smaller padding to shrink button */
  border: none !important; /* Remove border */
  box-shadow: none !important; /* Remove box shadow */
  font-size: 12px !important; /* Smaller font size */
  cursor: pointer !important; /* Pointer on hover */
  width: auto !important; /* Ensure button width adjusts automatically */
  display: inline-block !important; /* Ensure the button doesn't stretch */
}

/* Style for the Delete link in the file upload section */
.ninja-forms-field .file-upload .delete-file {
  color: red !important; /* Red text */
  font-family: 'IBM Plex Mono', monospace !important; /* IBM Plex Mono font */
  text-decoration: none !important; /* Removes underline */
  cursor: pointer !important;
}

/* Style for the Cancel button in the file upload section */
button.btn.nf-fu-button-cancel {
  background-color: transparent !important; /* No background */
  color: red !important; /* Red text */
  border: none !important; /* Remove border */
  font-family: 'IBM Plex Mono', monospace !important; /* IBM Plex Mono font */
  cursor: pointer !important; /* Pointer on hover */
  padding: 0 !important; /* Remove padding */
}

/* Style for the file upload progress bar */
div.nf-fu-progress-bar {
  background-color: #333 !important; /* Black or adjust to lighter shade */
  color: white !important; /* Text color within the progress bar */
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.15) !important; /* Slight shadow for depth */
  transition: all 0.5s ease !important; /* Smooth transition */
}

/* Style for the Delete button text in the file upload section */
a.delete {
  color: red !important; /* Red text */
  text-decoration: none !important; /* Remove the underline */
  font-family: 'IBM Plex Mono', monospace !important; /* Use IBM Plex Mono font */
}

/* Hide the error icon after unselecting a checkbox */
div.nf-field-element::after {
  display: none !important;
}

@media only screen and (max-width: 768px) {
  .nf-field-element ul {
    display: block !important; /* Stack checkboxes vertically */
  }

  .nf-field-element ul li {
    display: block !important; /* Each list item should take up full width */
    width: 100% !important; /* Make sure the checkboxes span full width */
  }
}

.nf-field-container {
    margin-bottom: 10px !important; /* Reduce space between fields */
}

.nf-field-element input, 
.nf-field-element select, 
.nf-field-element textarea {
    margin-bottom: 0px !important; /* Fine-tune space between each form input */
}

.nf-field-element ul li {
    margin-bottom: 5px !important; /* Reduce the space between checkboxes */
}

.nf-field-element input, 
.nf-field-element select, 
.nf-field-element textarea {
    padding: 8px !important; /* Reduce padding inside form fields */
}

.nf-field-label {
    margin-bottom: 5px !important; /* Reduce space between labels and form fields */
}

/* Targeting the Project Details textarea specifically */
textarea.ninja-forms-field {
    height: 100px !important; /* Adjust height as needed */
    width: 100% !important; /* Keep width 100% for responsiveness */
    max-height: 100px !important; /* Ensures it doesn't grow too large */
    box-sizing: border-box; /* Ensures padding is included within the width */
}

@media only screen and (max-width: 768px) {
  /* Remove margin between fields */
  .nf-form-content .nf-field-container {
    margin-bottom: 0px !important; /* No space between fields */
    padding-bottom: 0px !important;
  }

  /* Reduce padding inside the input fields */
  .nf-form-content input,
  .nf-form-content select,
  .nf-form-content textarea {
    margin-bottom: 0px !important;
    padding: 6px !important; /* Smaller padding inside fields */
    width: 100% !important;
  }

  /* Reduce spacing for checkbox/radio items */
  .nf-field-list li {
    margin-bottom: 2px !important; /* Tighter checkbox spacing */
  }

  /* Adjust the submit button */
  .nf-field-element input[type="submit"] {
    margin-top: 10px !important; /* Slight space for the button */
    padding: 6px 10px !important;
  }
}