/* =========================================================
   Modern Form UI Kit (Drop-in)
   - Works with any forms: WPJM, Forminator, WP core forms, etc.
   - Minimal assumptions, modern defaults, accessibility-friendly
========================================================= */

ul#et-secondary-nav {
  margin-right: 0;
}

:root{
  --form-bg: #ffffff;
  --form-surface: #ffffff;
  --form-text: rgba(0,0,0,.88);
  --form-muted: rgba(0,0,0,.62);

  --form-border: rgba(0,0,0,.14);
  --form-border-strong: rgba(0,0,0,.22);

  --form-radius: 4px;
  --form-radius-sm: 4px;

  --form-shadow: none;
  --form-shadow-sm: none;

  --form-pad-y: 12px;
  --form-pad-x: 16px;

  --form-gap: 14px;
  --form-gap-lg: 18px;

  --form-focus-ring: 0 0 0 3px rgba(0,0,0,.08);

  --form-lightbg: rgb(0 0 0 / 6%);
  --form-highlight: rgb(8 102 255 / 10%);
  --form-highlight-text: rgb(8 102 255);

  --form-highlight-red: rgba(220, 38, 38, 0.1);
  --form-highlight-red-text: rgba(220, 38, 38, 1);

  --form-danger: rgba(220, 38, 38, 1);
  --form-success: rgba(34, 197, 94, 1);
  --form-info: rgba(59, 130, 246, 1);
}

/* ---------- Form container ---------- */
form{
  color: var(--form-text);
}

.form-card,
.form-surface{
  background: var(--form-surface);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  padding: 18px;
  box-shadow: var(--form-shadow-sm);
}

/* ---------- Labels & help text ---------- */
label{
  display: inline-block;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px 0;
  color: var(--form-text);
}

.form-help,
.help-text,
.description,
small{
  color: var(--form-muted);
}

.form-help{
  margin-top: 8px;
  font-size: 0.95em;
}

/* ---------- Field spacing ---------- */
.form-row,
.field,
.form-field,
fieldset{
  margin: 0 0 var(--form-gap-lg) 0;
  padding: 0;
  border: 0;
}

fieldset:last-child{
  margin-bottom: 0;
}

/* ---------- Inputs / selects / textarea ---------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea{
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--form-bg);
  color: var(--form-text);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius-sm);
  padding: var(--form-pad-y) var(--form-pad-x);
  line-height: 1.3;
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease, background .12s ease;
}

textarea{
  min-height: 140px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder{
  color: rgba(0,0,0,.45);
}

/* Focus states */
input:focus,
select:focus,
textarea:focus{
  outline: none;
  border-color: var(--form-border-strong);
  box-shadow: var(--form-focus-ring);
}

/* Hover (subtle) */
input:hover,
select:hover,
textarea:hover{
  border-color: rgba(0,0,0,.20);
}

/* Disabled states */
input:disabled,
select:disabled,
textarea:disabled{
  opacity: .65;
  cursor: not-allowed;
  background: rgba(0,0,0,.03);
}

/* Readonly */
input[readonly],
textarea[readonly]{
  background: rgba(0,0,0,.02);
}

/* ---------- Select caret (modern) ---------- */
select{
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,.55) 50%),
    linear-gradient(135deg, rgba(0,0,0,.55) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    100% 0;
  background-size:
    6px 6px,
    6px 6px,
    2.5em 2.5em;
  background-repeat: no-repeat;
}

/* ---------- Checkboxes & radios ---------- */
input[type="checkbox"],
input[type="radio"]{
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 10px;
  accent-color: auto; /* uses browser theme color */
}

/* For checkbox/radio groups */
.option,
.checkbox,
.radio,
.form-option{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.option label,
.checkbox label,
.radio label{
  margin: 0;
  font-weight: 500;
}

/* ---------- File inputs ---------- */
input[type="file"]{
  padding: 10px;
}

/* ---------- Buttons ---------- */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 4px;
  border: 1px solid var(--form-border-strong);
  background: #0082c5;
  color: #fff;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: var(--form-shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  opacity: .92;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
a.button:hover{
  box-shadow: var(--form-shadow);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active{
  opacity: 1;
}

button:disabled,
input[type="submit"]:disabled{
  opacity: .60;
  cursor: not-allowed;
  transform: none;
}

/* Full-width buttons when desired */
.btn-block,
button.btn-block,
input[type="submit"].btn-block{
  width: 100%;
}

/* ---------- Validation states (HTML5 + class-based) ---------- */
/* HTML5 invalid */
input:invalid,
select:invalid,
textarea:invalid{
  border-color: rgba(220, 38, 38, .35);
}

/* Class helpers if your plugin adds them */
.is-invalid,
.has-error input,
.has-error select,
.has-error textarea{
  border-color: rgba(220, 38, 38, .35) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .10);
}

.is-valid,
.has-success input,
.has-success select,
.has-success textarea{
  border-color: rgba(34, 197, 94, .35) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .10);
}

/* ---------- Messages / Alerts ---------- */
.alert,
.notice,
.message,
.form-message{
  border: 1px solid var(--form-border);
  border-radius: 4px;
  background: #fff;
  padding: 12px 14px;
  box-shadow: var(--form-shadow-sm);
  margin: 14px 0;
}

.alert.error,
.notice.error,
.message.error{
  border-color: rgba(220, 38, 38, .30);
}

.alert.success,
.notice.success,
.message.success{
  border-color: rgba(34, 197, 94, .30);
}

.alert.info,
.notice.info,
.message.info{
  border-color: rgba(59, 130, 246, .30);
}

/* ---------- Simple grid layout utility ---------- */
.form-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--form-gap);
}

@media (min-width: 720px){
  .form-grid.two-col{
    grid-template-columns: 1fr 1fr;
  }
  .form-grid.three-col{
    grid-template-columns: 1fr 1fr 1fr;
  }
  .span-2{
    grid-column: span 2;
  }
  .span-3{
    grid-column: span 3;
  }
}

/* ---------- Reduce weird theme overrides ---------- */
form p{
  margin-bottom: var(--form-gap);
}

.job_listings * { 
  float: none !important;
  font-weight: 400; 
}
[style="clear: both"],
.resume_filters .resume_types li label input, 
.job_filters .job_types li label input,
.job_filters .job_types:after, 
.job_filters .job_types:before,
.job_filters .search_jobs:before,
.job_filters .search_jobs:after,
.resume_filters .resume_types:after, 
.resume_filters .resume_types:before,
.resume_filters .search_resumes:before,
.resume_filters .search_resumes:after  {
  display: none;
}
.resume_filters {
  margin-bottom: 22px;
}
.resume_filters,
.job_filters {
  background: transparent;
}
.resume_filters .search_resumes,
.job_filters .search_jobs {
  display: grid;
  grid-template-columns: 1fr 1fr 120px;
  gap: 0px;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  background: transparent;
}
.resume_filters .search_resumes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.resume_filters .search_resumes > div {
  flex: 1;
  min-width: 200px;
  padding: 0 !important;
}
.job_filters .search_jobs input[type="text"], 
.job_filters .search_jobs select {
  border-width: 0px;
  padding: 10px var(--form-pad-x);
  line-height: 20px;
  background: transparent;
  border-radius: 0px;
}
.job_filters .search_jobs div.filter_first, 
.job_filters .search_jobs div.search_keywords,
.job_filters .search_jobs div.filter_last, 
.job_filters .search_jobs div.search_location,
.job_filters .search_jobs > div {
  border: 1px solid var(--form-border);
  border-width: 1px 0px 1px 1px;
  border-radius: 4px 0px 0px 4px;
  padding: 3px;
  padding-right: 0px;
}
.job_filters #search_location {
  border-left: 1px solid var(--form-border);
  border-radius: 0px;
}
.job_filters .search_jobs > div.filter_wide {
  border-width: 0px;
  grid-column: 1/-1;
}
.job_filters .search_jobs > div.search_location {
  border-width: 1px 0px 1px 0px;
  border-radius: 0px;
}
.job_filters .search_jobs div.search_submit {
  border-width: 1px 1px 1px 0px;
  border-radius: 0px 4px 4px 0px;
}
.job_filters .search_jobs div.search_submit {
  padding: 4px;
}
.job_filters .search_jobs div.search_submit > input {
  min-height: 38px;
  padding: 0px var(--form-pad-x);
}
.job_listings ul.job_types {
  display: none;
}
.job_filters .search_jobs > div.filter_wide, 
.resume_filters .search_resumes > div.filter_wide,
.job_listings ul.job_types:before {
  content: "Exclude: ";
  display: inline-block;
  font-weight: 400;
  font-size: 12px;
  color: var(--form-muted);
}
.resume_filters .resume_types li, 
.job_filters .job_types li {
  padding: 0;
  display: inline-block;
}

.single_job_listing .meta .job-type,
.resume_filters .resume_types li label:has(:checked), 
.job_filters .job_types li label:has(:checked),
ul.job_listings li.job_listing a .meta li,
.resume_filters .resume_types li label, 
.job_filters .job_types li label,
.job_filters .search_jobs .filter_by_tag a {
  display: inline-block;
  background-color: var(--form-lightbg);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px !important;
  line-height: 12px;
  color: var(--form-muted);
  font-weight: bold;
  cursor: pointer;
}
.resume_filters .resume_types li label, 
.job_filters .job_types li label {
  background-color: var(--form-highlight-red);
  color: var(--form-highlight-red-text);
}

.job_filters .search_jobs .filter_by_tag a.active {
  background-color: var(--form-highlight);
  color: var(--form-highlight-text);
}



.resume_filters .resume_types li,
.job_filters .job_types li {
  border: 0px solid black;
}
.resume_filters .showing_resumes,
.resume_filters .resume_types,
.job_filters .showing_jobs,
.job_filters .job_types {
  padding: 0 !important;
  background: transparent;
  border: 0px solid black;
}
.resume_filters .search_resumes div.filter_last, .resume_filters .search_resumes div.search_location,
.resume_filters .search_resumes div.filter_first, .resume_filters .search_resumes div.search_keywords,
.job_filters .search_jobs div.filter_last, .job_filters .search_jobs div.search_location,
.job_filters .search_jobs div.filter_first, .job_filters .search_jobs div.search_keywords {
  width: auto;
  float: none;
}

.resumes,
.job_listings {
  padding: 0 !important;
}
ul.resumes,
ul.job_listings {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
ul.resumes li.resume,
ul.job_listings li.job_listing {
  min-width: 100%;
  flex: 1;
}
ul.resumes,
ul.resumes li.resume,
ul.job_listings,
ul.job_listings li.job_listing {
  border-width: 0;
}

.job-manager-application-wrapper .application .application_details, 
.single_job_listing .application .application_details,
.single_job_listing .company {
  border: 1px solid var(--form-border);
  border-radius: 4px;
  box-shadow: none;
}
ul.resumes li.resume a,
ul.job_listings li.job_listing a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0px;
  padding: 12px;
  border: 1px solid var(--form-border);
  border-radius: 4px;
  box-shadow: none;
}
ul.job_listings li.job_listing > a > div.position > img.company_logo,
ul.job_listings li.job_listing > a > div.position,
ul.job_listings li.job_listing > a > div.location,
ul.job_listings li.job_listing > a > .meta {
  padding: 0 !important;
  margin: 0;
  position: static !important;
  width: auto !important;
}
ul.job_listings li.job_listing > a > div.position {
  display: flex;
  gap: 6px;
  align-items: center;
}
ul.job_listings li.job_listing > a > div.position > img {
  display: flex;
}
ul.job_listings li.job_listing a div.position,
ul.job_listings li.job_listing a div.location,
ul.job_listings li.job_listing a .meta {
  flex: 1;
  min-width: 60%; 
  text-align: left;
  color: var(--form-text);
}
ul.job_listings li.job_listing a .meta {
  max-width: calc(100% - 200px);
  margin-top: 12px;
}
ul.job_listings li.job_listing a div.position {
  min-width: 100%;
  margin-bottom: 12px;
}
ul.job_listings li.job_listing a div.position h3 {
  font-size: 18px;
  font-weight: bold;
}
ul.job_listings li.job_listing a .meta .job-type {
  position: absolute;
  top: 12px;
  right: 12px; 
}
ul.job_listings li.job_listing a .meta .job-tag--salary {
  position: absolute;
  top: 36px;
  right: 12px;
}
ul.job_listings li.job_listing a .meta .date {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 0;
  font-weight: 400;
  background: transparent;
} 
.job-manager-application-wrapper .application .wp_job_manager_send_application_button, 
.single_job_listing .application .wp_job_manager_send_application_button,
.job-manager-application-wrapper .apply_with_resume input, 
.single_job_listing .apply_with_resume input {
  background: transparent;
  color: var(--form-text);
}
.job-manager-application-wrapper .application .application_button, 
.single_job_listing .application .application_button {
  padding: 12px 16px;
  min-height: 0px;
}
.job-manager-form fieldset .account-sign-in .button {
  padding: 4px 8px;
  min-height: 0px;
  gap: 4px;
}
.job-manager-form fieldset .account-sign-in .button:before {
  line-height: 16px;
}
ul.resumes li.no_resumes_found a div.candidate-column, ul.resumes li.resume a div.candidate-column {
  padding-left: 54px;
}

.page-template-page-template-jobs h1 {
  margin-bottom: 12px;
  padding-bottom: 0px; 
}
.page-template-page-template-jobs .upload-resume-prompt {
  margin-bottom: 4px;
}
#et-main-area .single_job_listing .meta {
  list-style-type: none;
  padding: 0;
  margin-bottom: 12px;
}
#et-main-area .post-meta { 
  display: none;
}
.single-job_listing  #et-main-area .entry-content {
  padding-top: 0;
}
#et-main-area .wp-job-manager-bookmarks-form a.remove-bookmark {
  color: var(--form-danger);
  visibility: visible;
  padding: 0;
}
#et-main-area .wp-job-manager-bookmarks-form {
  margin: 12px 0px;
  border: 0px solid var(--form-border);
  box-shadow: none;
  padding: 0;
}
#et-main-area .wp-job-manager-bookmarks-form p {
  margin: 0;
  padding: 0;
}
#et-main-area .wp-job-manager-bookmarks-form .submit-bookmark-button {
  background: transparent;
  color: var(--form-text);
  padding: 8px 16px;
  min-height: 0;
}
#et-main-area .wp-job-manager-bookmarks-form:has(.open) div.bookmark-details {
  padding: 12px;
  border: 1px solid var(--form-border);
  border-radius: 4px;
}
#et-main-area .wp-job-manager-bookmarks-form a.bookmark-notice {
  padding: 0;
}
#et-main-area .single_job_listing .meta li:not(.job-type) {
  padding: 0px;
}
#et-main-area .single_job_listing .company .company_header {
  margin: 0;
}