/* Career Form Search Design */
.career-filter-form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  background: #F2F5F9;
  padding: 1.5rem 2rem;
  border-radius: 10px;
  margin: 0 auto 3rem;
}

/* Input and select wrapper */
.filter-field {
  position: relative;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #C1CBCE;
  border-radius: 4px;
  padding: 12px 14px;
  flex: 1 1 220px;
  min-width: 220px;
}

.filter-field input,
.filter-field select {
  border: none;
  background: transparent;
  font-size: 0.95rem;
  width: 100%;
  outline: none;
  color: #4B4848;
  line-height: 22px;
  font-family: var(--wp--preset--font-family--lato);
}

.filter-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14' fill='none'%3E%3Cpath d='M15.2157 4.14525C14.9368 3.91741 14.5592 3.7895 14.1657 3.7895C13.7722 3.7895 13.3947 3.91741 13.1157 4.14525L8.03917 8.30713L2.96522 4.14525C2.82908 4.02582 2.66507 3.93008 2.48293 3.86374C2.30079 3.7974 2.10424 3.76181 1.905 3.75908C1.70575 3.75635 1.50787 3.78655 1.32314 3.84787C1.1384 3.90919 0.97059 4.00039 0.829683 4.11603C0.688775 4.23167 0.577654 4.36939 0.502932 4.52099C0.42821 4.6726 0.391416 4.83499 0.394738 4.9985C0.39806 5.16202 0.44143 5.32331 0.522268 5.47279C0.603107 5.62227 0.71976 5.75687 0.865287 5.86859L6.9892 10.8965C7.26812 11.1243 7.64563 11.2522 8.03917 11.2522C8.4327 11.2522 8.81022 11.1243 9.08913 10.8965L15.2157 5.87075C15.4941 5.64176 15.6505 5.33148 15.6505 5.008C15.6505 4.68451 15.4941 4.37423 15.2157 4.14525Z' fill='%23231F20'/%3E%3C/svg%3E"); */
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.9em;
  cursor: pointer;
}

/* Icon inside input/select */
.career-dropdown-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14' fill='none'%3E%3Cpath d='M15.2157 4.14525C14.9368 3.91741 14.5592 3.7895 14.1657 3.7895C13.7722 3.7895 13.3947 3.91741 13.1157 4.14525L8.03917 8.30713L2.96522 4.14525C2.82908 4.02582 2.66507 3.93008 2.48293 3.86374C2.30079 3.7974 2.10424 3.76181 1.905 3.75908C1.70575 3.75635 1.50787 3.78655 1.32314 3.84787C1.1384 3.90919 0.97059 4.00039 0.829683 4.11603C0.688775 4.23167 0.577654 4.36939 0.502932 4.52099C0.42821 4.6726 0.391416 4.83499 0.394738 4.9985C0.39806 5.16202 0.44143 5.32331 0.522268 5.47279C0.603107 5.62227 0.71976 5.75687 0.865287 5.86859L6.9892 10.8965C7.26812 11.1243 7.64563 11.2522 8.03917 11.2522C8.4327 11.2522 8.81022 11.1243 9.08913 10.8965L15.2157 5.87075C15.4941 5.64176 15.6505 5.33148 15.6505 5.008C15.6505 4.68451 15.4941 4.37423 15.2157 4.14525Z' fill='%23231F20'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.25s ease;
  pointer-events: none;
}

/* .filter-field select:focus + .career-dropdown-icon {
  transform: translateY(-50%) rotate(180deg);
} */

.career-dropdown-icon.open {
  transform: translateY(-50%) rotate(180deg);
}


/* Submit Button */
.filter-submit {
  background: #0094ff;
  color: #ffffff;
  border: 1.5px solid #0094ff;
  border-radius: 8px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  line-height: 22px;
  font-family: var(--wp--preset--font-family--lato);
}

.filter-submit:hover {
  background: #007ed6;
  transform: translateY(-1px);
}

/* Disabled state for entire filter */
.career-filter-disabled .filter-submit {
  background: #EAEBEE;
  color: #A4A3A3;
  border: #EAEBEE;
}

.career-filter-disabled input,
.career-filter-disabled select,
.career-filter-disabled button {
  cursor: not-allowed !important;
}

/* Responsive Layout */
@media (max-width: 768px) {
  .career-filter-form {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-field {
    width: 100%;
  }

  .filter-submit {
    width: 100%;
    padding: 1rem;
  }
}