/**
 * JMJobsListings Global Form System
 * Version: 1.0.1
 * Scope: WordPress, Elementor Free, WP Job Manager, WooCommerce-compatible fields,
 * login/registration, candidate/employer profiles, search/filter panels, dashboards,
 * contact forms, and future plugin forms.
 */

:root {
  --jmf-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jmf-font-size: 16px;
  --jmf-font-size-sm: 0.875rem;
  --jmf-font-size-lg: 1.0625rem;
  --jmf-line-height: 1.5;

  --jmf-brand: #08783e;
  --jmf-brand-strong: #065f32;
  --jmf-brand-soft: #eaf7f0;
  --jmf-accent: #f5b700;
  --jmf-accent-strong: #d99f00;

  --jmf-text: #17211b;
  --jmf-text-muted: #607067;
  --jmf-heading: #0f1913;
  --jmf-placeholder: #7a8980;

  --jmf-surface: #ffffff;
  --jmf-surface-soft: #f7faf8;
  --jmf-surface-raised: #ffffff;
  --jmf-border: #ced9d2;
  --jmf-border-strong: #9fb1a6;

  --jmf-success: #15803d;
  --jmf-success-bg: #ecfdf3;
  --jmf-warning: #b45309;
  --jmf-warning-bg: #fff8e6;
  --jmf-danger: #c62828;
  --jmf-danger-bg: #fff1f1;
  --jmf-info: #1769aa;
  --jmf-info-bg: #eef7ff;

  --jmf-radius-sm: 10px;
  --jmf-radius: 12px;
  --jmf-radius-lg: 16px;
  --jmf-radius-pill: 999px;

  --jmf-control-height: 50px;
  --jmf-control-padding-x: 15px;
  --jmf-control-padding-y: 12px;

  --jmf-shadow-sm: 0 4px 14px rgba(15, 35, 24, 0.06);
  --jmf-shadow-md: 0 10px 30px rgba(15, 35, 24, 0.10);
  --jmf-shadow-focus: 0 0 0 4px rgba(8, 120, 62, 0.18);

  --jmf-transition-fast: 150ms ease;
  --jmf-transition: 220ms cubic-bezier(.2,.7,.2,1);
}

/* Dark mode is opt-in so device preferences cannot put light text on forms
 * whose surrounding plugin or theme container remains light. */
body.jmf-force-dark {
  --jmf-text: #edf7f1;
  --jmf-text-muted: #afc0b6;
  --jmf-heading: #ffffff;
  --jmf-placeholder: #91a298;
  --jmf-surface: #111a15;
  --jmf-surface-soft: #17221b;
  --jmf-surface-raised: #1b2820;
  --jmf-border: #34483c;
  --jmf-border-strong: #56705f;
  --jmf-brand-soft: #173427;
  --jmf-success-bg: #153623;
  --jmf-warning-bg: #3a2d12;
  --jmf-danger-bg: #3e1c1c;
  --jmf-info-bg: #152b3c;
}

/* Universal form foundation */
:where(
  form,
  .job_filters,
  .job-manager-form,
  .wp-job-manager-bookmarks-form,
  .wp-job-manager-application-wrapper,
  .elementor-form,
  .login,
  .register,
  .woocommerce-form,
  .jmjobs-form,
  .candidate-dashboard,
  .employer-dashboard
) {
  font-family: var(--jmf-font-family);
  color: var(--jmf-text);
  line-height: var(--jmf-line-height);
}

:where(form) :where(label, legend) {
  color: #0f1913 !important;
  font-size: var(--jmf-font-size-sm);
  font-weight: 700;
  letter-spacing: .01em;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: #0f1913;
  text-shadow: none;
}

:where(
  form, .job_filters, .job-manager-form, .elementor-form, .wpcf7-form,
  .wpforms-form, .gform_wrapper, .frm_forms, .fluentform,
  .woocommerce-form, .jmjobs-form, .candidate-dashboard, .employer-dashboard
) :where(
  label, legend, .field-label, .fieldset-label, .elementor-field-label,
  .wpforms-field-label, .gfield_label, .frm_primary_label,
  .ff-el-input--label label
) {
  color: #0f1913 !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: #0f1913 !important;
}

body.jmf-force-dark :where(
  form, .job_filters, .job-manager-form, .elementor-form, .wpcf7-form,
  .wpforms-form, .gform_wrapper, .frm_forms, .fluentform,
  .woocommerce-form, .jmjobs-form, .candidate-dashboard, .employer-dashboard
) :where(
  label, legend, .field-label, .fieldset-label, .elementor-field-label,
  .wpforms-field-label, .gfield_label, .frm_primary_label,
  .ff-el-input--label label
) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

:where(form) legend {
  margin-bottom: 10px;
}

:where(form) :where(p, .form-row, .field, .fieldset, .elementor-field-group) {
  margin-bottom: 18px;
}

:where(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="file"],
  select,
  textarea,
  .select2-selection,
  .chosen-container .chosen-single,
  .tagify,
  .jmjobs-input
) {
  width: 100%;
  max-width: 100%;
  min-height: var(--jmf-control-height);
  padding: var(--jmf-control-padding-y) var(--jmf-control-padding-x);
  border: 1px solid var(--jmf-border);
  border-radius: var(--jmf-radius);
  background: var(--jmf-surface);
  color: var(--jmf-text);
  font: inherit;
  font-size: var(--jmf-font-size);
  line-height: 1.35;
  box-shadow: var(--jmf-shadow-sm);
  transition:
    border-color var(--jmf-transition-fast),
    box-shadow var(--jmf-transition),
    background-color var(--jmf-transition-fast),
    transform var(--jmf-transition-fast);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

:where(textarea) {
  min-height: 130px;
  resize: vertical;
}

:where(select) {
  cursor: pointer;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--jmf-text-muted) 50%),
    linear-gradient(135deg, var(--jmf-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 50%,
    calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

:where(input, textarea)::placeholder {
  color: var(--jmf-placeholder);
  opacity: 1;
}

:where(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="file"],
  select,
  textarea,
  .select2-selection,
  .chosen-container .chosen-single,
  .tagify,
  .jmjobs-input
):hover:not(:disabled) {
  border-color: var(--jmf-border-strong);
}

:where(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="file"],
  select,
  textarea,
  .select2-selection,
  .chosen-container .chosen-single,
  .tagify,
  .jmjobs-input
):focus,
:where(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="file"],
  select,
  textarea,
  .jmjobs-input
):focus-visible {
  border-color: var(--jmf-brand);
  box-shadow: var(--jmf-shadow-focus), var(--jmf-shadow-sm);
  background-color: var(--jmf-surface-raised);
}

:where(input, select, textarea):disabled,
:where(input, select, textarea)[readonly] {
  cursor: not-allowed;
  opacity: .68;
  background: var(--jmf-surface-soft);
  box-shadow: none;
}

/* Browser autofill */
:where(input):-webkit-autofill,
:where(input):-webkit-autofill:hover,
:where(input):-webkit-autofill:focus {
  -webkit-text-fill-color: var(--jmf-text);
  -webkit-box-shadow: 0 0 0 1000px var(--jmf-surface) inset, var(--jmf-shadow-focus);
  transition: background-color 9999s ease-out 0s;
}

/* Checkboxes and radios */
:where(input[type="checkbox"], input[type="radio"]) {
  inline-size: 20px;
  block-size: 20px;
  margin: 0 9px 0 0;
  border: 2px solid var(--jmf-border-strong);
  background: var(--jmf-surface);
  vertical-align: -4px;
  box-shadow: none;
  cursor: pointer;
  accent-color: var(--jmf-brand);
}

:where(input[type="checkbox"]) {
  border-radius: 6px;
}

:where(input[type="radio"]) {
  border-radius: 50%;
}

:where(input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 3px solid rgba(8, 120, 62, .28);
  outline-offset: 3px;
}

/* Toggle switch: add class .jmjobs-toggle to a checkbox */
input[type="checkbox"].jmjobs-toggle {
  position: relative;
  inline-size: 48px;
  block-size: 26px;
  border: 0;
  border-radius: var(--jmf-radius-pill);
  background: var(--jmf-border-strong);
  appearance: none;
  transition: background var(--jmf-transition), box-shadow var(--jmf-transition);
}
input[type="checkbox"].jmjobs-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(0,0,0,.22);
  transition: transform var(--jmf-transition);
}
input[type="checkbox"].jmjobs-toggle:checked {
  background: var(--jmf-brand);
}
input[type="checkbox"].jmjobs-toggle:checked::before {
  transform: translateX(22px);
}

/* File fields */
:where(input[type="file"]) {
  padding: 8px;
  border-style: dashed;
  background: var(--jmf-surface-soft);
}
:where(input[type="file"])::file-selector-button {
  min-height: 38px;
  margin-right: 12px;
  padding: 8px 14px;
  border: 0;
  border-radius: 9px;
  background: var(--jmf-brand-soft);
  color: var(--jmf-brand-strong);
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--jmf-transition-fast), background var(--jmf-transition-fast);
}
:where(input[type="file"])::file-selector-button:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--jmf-brand-soft) 82%, var(--jmf-brand) 18%);
}

/* Drag-and-drop upload area */
.jmjobs-dropzone {
  display: grid;
  place-items: center;
  min-height: 160px;
  padding: 28px;
  border: 2px dashed var(--jmf-border-strong);
  border-radius: var(--jmf-radius-lg);
  background: linear-gradient(180deg, var(--jmf-surface), var(--jmf-surface-soft));
  text-align: center;
  transition: border-color var(--jmf-transition), background var(--jmf-transition), transform var(--jmf-transition);
}
.jmjobs-dropzone.is-dragover {
  border-color: var(--jmf-brand);
  background: var(--jmf-brand-soft);
  transform: scale(1.005);
}

/* Buttons */
:where(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .button,
  .wp-element-button,
  .elementor-button,
  .job-manager-button,
  .jmjobs-button
) {
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--jmf-radius);
  background: linear-gradient(135deg, var(--jmf-brand), var(--jmf-brand-strong));
  color: #fff;
  font-family: var(--jmf-font-family);
  font-size: var(--jmf-font-size);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(8, 120, 62, .20);
  transition:
    transform var(--jmf-transition-fast),
    box-shadow var(--jmf-transition),
    filter var(--jmf-transition-fast),
    background var(--jmf-transition-fast);
}

:where(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .button,
  .wp-element-button,
  .elementor-button,
  .job-manager-button,
  .jmjobs-button
):hover:not(:disabled) {
  transform: translateY(-1px);
  filter: saturate(1.08) brightness(1.03);
  box-shadow: 0 12px 24px rgba(8, 120, 62, .25);
}

:where(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .button,
  .wp-element-button,
  .elementor-button,
  .job-manager-button,
  .jmjobs-button
):focus-visible {
  outline: 3px solid rgba(245, 183, 0, .62);
  outline-offset: 3px;
}

:where(
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .button
):active:not(:disabled) {
  transform: translateY(0) scale(.99);
}

:where(button, input[type="submit"], .button):disabled,
:where(button, input[type="submit"], .button)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .58;
  box-shadow: none;
  transform: none;
}

/* Secondary and light button utilities */
.jmjobs-button--secondary {
  background: var(--jmf-surface);
  color: var(--jmf-brand-strong);
  border-color: var(--jmf-border);
  box-shadow: var(--jmf-shadow-sm);
}
.jmjobs-button--accent {
  background: linear-gradient(135deg, var(--jmf-accent), var(--jmf-accent-strong));
  color: #1d1d1d;
  box-shadow: 0 8px 18px rgba(245,183,0,.22);
}

/* Search and filter panels */
:where(.job_filters, .search_jobs, .jmjobs-filter-panel, .job-search-form) {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--jmf-border);
  border-radius: var(--jmf-radius-lg);
  background: linear-gradient(180deg, var(--jmf-surface), var(--jmf-surface-soft));
  box-shadow: var(--jmf-shadow-md);
}

:where(.job_filters .search_jobs, .search_jobs) {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
}

:where(.job_filters .search_keywords, .job_filters .search_location, .job_filters .search_categories) {
  grid-column: span 4;
  width: 100%;
  float: none;
}

:where(.job_filters .search_submit) {
  grid-column: span 12;
}

:where(.job_filters .search_submit input, .job_filters .search_submit button) {
  width: 100%;
}

/* WP Job Manager */
:where(.job-manager-form fieldset) {
  padding: 18px;
  margin: 0 0 18px;
  border: 1px solid var(--jmf-border);
  border-radius: var(--jmf-radius-lg);
  background: var(--jmf-surface);
  box-shadow: var(--jmf-shadow-sm);
}

:where(.job-manager-form fieldset label) {
  width: auto;
  float: none;
  display: block;
  margin-bottom: 8px;
}

:where(.job-manager-form fieldset div.field) {
  width: 100%;
  float: none;
}

:where(.job-manager-form .description) {
  margin-top: 7px;
  color: var(--jmf-text-muted);
  font-size: var(--jmf-font-size-sm);
}

/* Select2 */
.select2-container {
  width: 100% !important;
}
.select2-container .select2-selection--single {
  height: var(--jmf-control-height);
  border: 1px solid var(--jmf-border);
  border-radius: var(--jmf-radius);
  background: var(--jmf-surface);
  box-shadow: var(--jmf-shadow-sm);
}
.select2-container .select2-selection--single .select2-selection__rendered {
  padding: 13px 42px 11px 15px;
  color: var(--jmf-text);
  line-height: 1.4;
}
.select2-container .select2-selection--single .select2-selection__arrow {
  height: var(--jmf-control-height);
  right: 9px;
}
.select2-dropdown {
  border: 1px solid var(--jmf-border);
  border-radius: var(--jmf-radius);
  background: var(--jmf-surface);
  box-shadow: var(--jmf-shadow-md);
  overflow: hidden;
}
.select2-results__option--highlighted {
  background: var(--jmf-brand) !important;
  color: #fff !important;
}

/* Messages and validation */
:where(
  .jmjobs-message,
  .woocommerce-message,
  .woocommerce-error,
  .woocommerce-info,
  .job-manager-message,
  .job-manager-error,
  .elementor-message,
  .login .message,
  .login #login_error
) {
  position: relative;
  margin: 14px 0;
  padding: 13px 15px;
  border: 1px solid var(--jmf-border);
  border-left-width: 5px;
  border-radius: var(--jmf-radius);
  background: var(--jmf-surface-soft);
  color: var(--jmf-text);
  box-shadow: var(--jmf-shadow-sm);
}

.jmjobs-message--success,
.elementor-message-success,
.woocommerce-message,
.job-manager-message {
  border-left-color: var(--jmf-success);
  background: var(--jmf-success-bg);
}
.jmjobs-message--warning {
  border-left-color: var(--jmf-warning);
  background: var(--jmf-warning-bg);
}
.jmjobs-message--error,
.elementor-message-danger,
.woocommerce-error,
.job-manager-error,
.login #login_error {
  border-left-color: var(--jmf-danger);
  background: var(--jmf-danger-bg);
}
.jmjobs-message--info,
.woocommerce-info,
.login .message {
  border-left-color: var(--jmf-info);
  background: var(--jmf-info-bg);
}

:where(input, select, textarea)[aria-invalid="true"],
:where(input, select, textarea).is-invalid {
  border-color: var(--jmf-danger);
  box-shadow: 0 0 0 4px rgba(198, 40, 40, .14);
}
:where(input, select, textarea).is-valid {
  border-color: var(--jmf-success);
  box-shadow: 0 0 0 4px rgba(21, 128, 61, .12);
}
.jmjobs-field-error {
  display: block;
  margin-top: 7px;
  color: var(--jmf-danger);
  font-size: var(--jmf-font-size-sm);
  font-weight: 700;
}

/* Floating labels: wrapper must use .jmjobs-floating-field */
.jmjobs-floating-field {
  position: relative;
}
.jmjobs-floating-field > :where(input, textarea) {
  padding-top: 20px;
  padding-bottom: 7px;
}
.jmjobs-floating-field > label {
  position: absolute;
  left: 15px;
  top: 15px;
  z-index: 1;
  color: var(--jmf-text-muted);
  font-weight: 600;
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--jmf-transition-fast), color var(--jmf-transition-fast), top var(--jmf-transition-fast);
}
.jmjobs-floating-field > :where(input, textarea):focus + label,
.jmjobs-floating-field > :where(input, textarea):not(:placeholder-shown) + label {
  top: 7px;
  transform: scale(.78);
  color: var(--jmf-brand-strong);
}

/* Password controls */
.jmjobs-password-wrap {
  position: relative;
}
.jmjobs-password-wrap input {
  padding-right: 50px;
}
.jmjobs-password-toggle {
  position: absolute;
  right: 7px;
  top: 50%;
  width: 38px;
  min-height: 36px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--jmf-text-muted);
  box-shadow: none;
}
.jmjobs-password-toggle:hover {
  transform: translateY(-50%);
  background: var(--jmf-brand-soft);
  box-shadow: none;
}
.jmjobs-password-strength {
  margin-top: 8px;
}
.jmjobs-password-strength__track {
  height: 7px;
  overflow: hidden;
  border-radius: var(--jmf-radius-pill);
  background: var(--jmf-border);
}
.jmjobs-password-strength__bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--jmf-danger);
  transition: width var(--jmf-transition), background var(--jmf-transition);
}
.jmjobs-password-strength[data-score="1"] .jmjobs-password-strength__bar { width: 25%; }
.jmjobs-password-strength[data-score="2"] .jmjobs-password-strength__bar { width: 50%; background: var(--jmf-warning); }
.jmjobs-password-strength[data-score="3"] .jmjobs-password-strength__bar { width: 75%; background: #5f8f1b; }
.jmjobs-password-strength[data-score="4"] .jmjobs-password-strength__bar { width: 100%; background: var(--jmf-success); }

/* Loading button */
.jmjobs-is-loading {
  position: relative;
  pointer-events: none;
}
.jmjobs-is-loading::after {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-left: 10px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -3px;
  animation: jmjobs-spin .7s linear infinite;
}
@keyframes jmjobs-spin {
  to { transform: rotate(360deg); }
}

/* Pagination */
:where(.pagination, .nav-links, .job-manager-pagination) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
:where(.pagination, .nav-links, .job-manager-pagination) :where(a, span) {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--jmf-border);
  border-radius: 10px;
  background: var(--jmf-surface);
  color: var(--jmf-text);
  text-decoration: none;
  box-shadow: var(--jmf-shadow-sm);
}
:where(.pagination, .nav-links, .job-manager-pagination) :where(a:hover, .current) {
  border-color: var(--jmf-brand);
  background: var(--jmf-brand);
  color: #fff;
}

/* Helpful form layout utilities */
.jmjobs-form-grid {
  display: grid;
  gap: 18px;
}
.jmjobs-form-grid--2,
.jmjobs-form-grid--3 {
  grid-template-columns: 1fr;
}
.jmjobs-form-card {
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--jmf-border);
  border-radius: var(--jmf-radius-lg);
  background: var(--jmf-surface);
  box-shadow: var(--jmf-shadow-md);
}
.jmjobs-form-section-title {
  margin: 0 0 18px;
  color: var(--jmf-heading);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

/* Responsive behavior */
@media (min-width: 700px) {
  .jmjobs-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jmjobs-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  :where(.job_filters .search_jobs, .search_jobs) {
    grid-template-columns: 1fr;
  }
  :where(.job_filters .search_keywords, .job_filters .search_location, .job_filters .search_categories, .job_filters .search_submit) {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  :root {
    --jmf-font-size: 16px;
    --jmf-control-height: 50px;
    --jmf-control-padding-x: 14px;
  }
  :where(
    button,
    input[type="submit"],
    input[type="button"],
    .button,
    .wp-element-button,
    .elementor-button
  ) {
    width: 100%;
  }
  :where(.job_filters, .search_jobs, .jmjobs-filter-panel, .job-search-form) {
    padding: 14px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Print */
@media print {
  :where(form, .job_filters) {
    box-shadow: none !important;
  }
}