/**
 * WP Job Portal 2.6.0 accessible, mobile-first form layer.
 * Loaded after legacy presentation styles so the shared form contract is
 * consistent across candidate, employer, and administrator workflows.
 */

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form {
    width: 100%;
    max-width: 100%;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wjportal-form-row, .wpjobportal-form-wrapper).wpjp-ds-field {
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
    align-items: start;
    gap: var(--wpjp-ds-space-3) var(--wpjp-ds-space-5);
    width: 100%;
    max-width: 100%;
    margin-block-end: var(--wpjp-ds-space-5);
    padding-block-end: var(--wpjp-ds-space-4);
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wjportal-form-title, .wpjobportal-form-title).wpjp-ds-label {
    display: block;
    width: auto;
    margin: 0;
    padding-block-start: 0.7rem;
    color: var(--wpjp-ds-color-text);
    font-size: var(--wpjp-ds-font-size-sm);
    font-weight: 600;
    line-height: 1.4;
    text-align: start;
}

.wpjp-ds-required {
    margin-inline-start: var(--wpjp-ds-space-1);
    color: var(--wpjp-ds-color-danger);
    font-weight: 700;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wjportal-form-value, .wpjobportal-form-value, .wpjobportal-form-val) {
    min-width: 0;
    max-width: 100%;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form .wpjp-ds-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    width: 100%;
    max-width: 100%;
    min-height: var(--wpjp-ds-control-height);
    padding: 0.625rem 0.75rem;
    color: var(--wpjp-ds-color-text);
    background-color: var(--wpjp-ds-color-surface);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-md);
    box-shadow: none;
    line-height: 1.4;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form textarea.wpjp-ds-control {
    min-height: 8rem;
    resize: vertical;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form select.wpjp-ds-control[multiple] {
    min-height: 8rem;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form input[type="file"].wpjp-ds-control {
    height: auto;
    min-height: var(--wpjp-ds-control-height);
    padding: var(--wpjp-ds-space-2);
    overflow-wrap: anywhere;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form input[type="file"].wpjp-ds-control::file-selector-button {
    min-height: var(--wpjp-ds-control-height);
    margin-inline-end: var(--wpjp-ds-space-3);
    padding-inline: var(--wpjp-ds-space-4);
    color: var(--wpjp-ds-color-primary-strong);
    background: var(--wpjp-ds-color-canvas);
    border: 1px solid var(--wpjp-ds-color-border);
    border-radius: var(--wpjp-ds-radius-sm);
    font-weight: 600;
    cursor: pointer;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wjportal-form-2-fields, .wjportal-form-3-fields, .wjportal-form-4-fields, .wjportal-form-5-fields) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--wpjp-ds-space-3);
    width: 100%;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form .wjportal-form-inner-fields {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wpjobportal-form-radio-field, .wpjobportal-form-chkbox-field) {
    position: relative;
    display: inline-flex;
    min-height: var(--wpjp-ds-control-height);
    align-items: center;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wpjobportal-form-radio-field, .wpjobportal-form-chkbox-field) input[type="radio"],
:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wpjobportal-form-radio-field, .wpjobportal-form-chkbox-field) input[type="checkbox"] {
    position: absolute;
    display: block;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    opacity: 0;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wpjobportal-form-radio-field, .wpjobportal-form-chkbox-field) input:focus-visible + label {
    outline: 2px solid var(--wpjp-ds-color-primary);
    outline-offset: 3px;
    box-shadow: var(--wpjp-ds-focus-ring);
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wpjp-ds-help, .wjportal-form-help-txt, .wpjobportal-form-description) {
    width: 100%;
    margin-block-start: var(--wpjp-ds-space-2);
    padding: 0;
    color: var(--wpjp-ds-color-text-muted);
    font-size: var(--wpjp-ds-font-size-xs);
    line-height: 1.5;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.form-error, .wpjp-ds-error) {
    display: block;
    width: 100%;
    margin-block-start: var(--wpjp-ds-space-2);
    color: var(--wpjp-ds-color-danger);
    font-size: var(--wpjp-ds-font-size-sm);
    font-weight: 600;
    line-height: 1.45;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--wpjp-ds-color-danger) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wpjp-ds-color-danger) 20%, transparent) !important;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form .chosen-container {
    max-width: 100%;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form .chosen-container:focus-within {
    outline: 2px solid var(--wpjp-ds-color-primary);
    outline-offset: 2px;
    box-shadow: var(--wpjp-ds-focus-ring);
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wjportal-form-btn-wrp, .wpjobportal-form-button, .wpjobportal-form-btn-wrp) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wpjp-ds-space-3);
    align-items: center;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form .wp-editor-wrap,
:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form .wp-editor-container,
:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form .wjportal-form-map {
    max-width: 100%;
    overflow: auto;
}

@media (max-width: 782px) {
    :where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wjportal-form-row, .wpjobportal-form-wrapper).wpjp-ds-field {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--wpjp-ds-space-2);
        margin-block-end: var(--wpjp-ds-space-4);
        padding-block-end: var(--wpjp-ds-space-4);
    }

    :where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wjportal-form-title, .wpjobportal-form-title).wpjp-ds-label {
        padding-block-start: 0;
        text-align: start;
    }

    :where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form .wpjp-ds-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
        min-width: 0;
        font-size: 16px;
    }

    /* Native selects are more reliable than legacy Chosen controls on phones. */
    :where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form select.wpjp-ds-control + .chosen-container {
        display: none !important;
    }

    :where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form select.wpjp-ds-control {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        clip: auto !important;
    }

    /* And the row it sits in, or "width: 100%" is 100% of a box that
       collapsed to nothing when the control beside it was hidden. */
    :where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form .wjportal-form-value:has(> select.wpjp-ds-control) {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
    }

    :where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wjportal-form-btn-wrp, .wpjobportal-form-button, .wpjobportal-form-btn-wrp) > * {
        flex: 1 1 12rem;
        max-width: 100%;
    }

    :where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wjportal-form-btn, .wpjobportal-form-save-btn, .wpjp-ds-button) {
        width: 100%;
        min-height: var(--wpjp-ds-control-height);
    }

    .ui-datepicker {
        max-width: calc(100vw - 1.5rem);
    }
}

@media (max-width: 480px) {
    :where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form input[type="file"].wpjp-ds-control::file-selector-button {
        display: block;
        width: 100%;
        margin: 0 0 var(--wpjp-ds-space-2);
    }
}

@media (forced-colors: active) {
    .wpjp-ds-required,
    :where(.form-error, .wpjp-ds-error) {
        color: CanvasText;
    }

    :where(input, select, textarea)[aria-invalid="true"] {
        border: 2px solid CanvasText !important;
    }
}

/* --- Painted control for the visually hidden radio/checkbox inputs --- */
/* The rule above clips the native control out of view so the input stays
   focusable for assistive tech. Nothing repainted it, so these fields
   rendered as bare label text in every admin and control-panel form.
   Draw the control on the adjacent label instead. */

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wpjobportal-form-radio-field, .wpjobportal-form-chkbox-field) input[type="radio"] + label,
:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wpjobportal-form-radio-field, .wpjobportal-form-chkbox-field) input[type="checkbox"] + label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--wpjp-ds-space-2);
    margin-inline: 0; /* legacy 10px offset that separated text from the native control */
/*    padding-inline-start: 0;*/
    cursor: pointer;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wpjobportal-form-radio-field, .wpjobportal-form-chkbox-field) input[type="radio"] + label::before,
:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wpjobportal-form-radio-field, .wpjobportal-form-chkbox-field) input[type="checkbox"] + label::before {
    content: "";
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    /* style.css sets min-width/min-height 20px on this pseudo-element for the
       legacy control. A min-* clamps the used size whatever the specificity, so
       without these the box resolved to 20x18 -- an oblong square, and a
       visible ellipse once border-radius went to 50% for radios. */
    min-width: 0;
    min-height: 0;
    border: 2px solid var(--wpjp-ds-color-text-muted, #667085);
    background-color: var(--wpjp-ds-color-surface, #fff);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wpjobportal-form-radio-field, .wpjobportal-form-chkbox-field) input[type="radio"] + label::before {
    border-radius: 50%;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wpjobportal-form-radio-field, .wpjobportal-form-chkbox-field) input[type="checkbox"] + label::before {
    border-radius: var(--wpjp-ds-radius-sm, 3px);
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wpjobportal-form-radio-field, .wpjobportal-form-chkbox-field) input[type="radio"]:checked + label::before,
:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wpjobportal-form-radio-field, .wpjobportal-form-chkbox-field) input[type="checkbox"]:checked + label::before {
    border-color: var(--wpjp-ds-color-primary, #2563eb);
    background-color: var(--wpjp-ds-color-primary, #2563eb);
}

/* Radio marker: centred dot, absolutely placed so it stays out of the flex row. */
:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wpjobportal-form-radio-field, .wpjobportal-form-chkbox-field) input[type="radio"]:checked + label::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 0.5625rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--wpjp-ds-color-surface, #fff);
    transform: translate(-50%, -50%);
}

/* Checkbox marker: tick drawn from two borders. */
:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wpjobportal-form-radio-field, .wpjobportal-form-chkbox-field) input[type="checkbox"]:checked + label::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 0.5625rem;
    width: 0.3rem;
    height: 0.6rem;
    border: solid var(--wpjp-ds-color-surface, #fff);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :where(.wpjobportal-form-radio-field, .wpjobportal-form-chkbox-field) input:disabled + label {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Salary row: keep the currency symbol at its content width --- */
/* The grid above gives every child an equal 1fr track, so the one-character
   currency symbol claimed as much room as a full input. The symbol wrapper
   carries flex sizing for the admin stylesheet, which a grid parent ignores.
   Only the salary row has a symbol, so switch just that row back to flex. */

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :is(.wjportal-form-2-fields, .wjportal-form-3-fields, .wjportal-form-4-fields, .wjportal-form-5-fields):has(> .wjportal-form-symbol-fields) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :is(.wjportal-form-2-fields, .wjportal-form-3-fields, .wjportal-form-4-fields, .wjportal-form-5-fields):has(> .wjportal-form-symbol-fields) > .wjportal-form-inner-fields:not(.wjportal-form-symbol-fields) {
    /* Match the grid's minimum track so wrapping behaves the same. */
    flex: 1 1 min(100%, 11rem);
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form :is(.wjportal-form-2-fields, .wjportal-form-3-fields, .wjportal-form-4-fields, .wjportal-form-5-fields) > .wjportal-form-symbol-fields {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    align-items: center;
}

/* The same three rules by class, for browsers without :has() (Firefox before
   121 drops a whole rule that contains it). The salary row carries the class. */
:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form .wjportal-form-symbol-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form .wjportal-form-symbol-row > .wjportal-form-inner-fields:not(.wjportal-form-symbol-fields) {
    flex: 1 1 min(100%, 11rem);
}

/* --- Searchable field: centre the control in its bordered box --- */
/* The wrapper is drawn as a bordered control box with its own padding, so the
   44px tap-target min-height pushed the label off-centre (26px above, 6px
   below). The box already supplies the target area, so centre its content
   instead. Specificity and !important here match style.css, which sets
   padding-top on the inner span with !important. */

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form .wjportal-searchable-wrp.checkbox-field.wpjp-form-value {
    display: flex;
    align-items: center;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form .wjportal-searchable-wrp.checkbox-field.wpjp-form-value span:is(.wpjobportal-form-chkbox-field, .wpjobportal-form-radio-field) {
    min-height: 0;
    padding-top: 0 !important;
}

/* --- Field description: line up with the control, not a fixed offset --- */
:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form .wpjp-ds-field > :where(.wpjp-ds-help, .wjportal-form-help-txt, .wpjobportal-form-description) {
    grid-column: 2;
    min-width: 0;
    max-width: 100%;
    margin-inline-start: 0;
}
@media (max-width: 782px) {
    /* The field collapses to a single track here, so column 2 does not exist. */
    :where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form .wpjp-ds-field > :where(.wpjp-ds-help, .wjportal-form-help-txt, .wpjobportal-form-description) {
        grid-column: 1;
    }
}
:where(#wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper) .wpjp-ds-form .wjportal-form-symbol-fields {
    justify-content: center;
    padding-inline: 10px;
}

/* --- A form that is being sent --- */
/* The button keeps its place in the submitted data - it is not disabled - so
   the pending state is drawn, not enforced by the browser; the script refuses
   the second send. An <input type="submit"> cannot carry a ::before, so it
   pulses instead of growing a spinner, and only a real element gets one. */

.wpjp-is-pending {
    cursor: progress;
}

input.wpjp-is-pending {
    animation: wpjp-pending-pulse 1.1s ease-in-out infinite;
}

button.wpjp-is-pending,
a.wpjp-is-pending {
    position: relative;
    padding-inline-start: 2.25em;
}

button.wpjp-is-pending::before,
a.wpjp-is-pending::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.85em;
    inset-block-start: calc(50% - 0.45em);
    width: 0.9em;
    height: 0.9em;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: 50%;
    animation: wpjp-pending-spin 0.7s linear infinite;
}

@keyframes wpjp-pending-spin {
    to { transform: rotate(360deg); }
}

@keyframes wpjp-pending-pulse {
    50% { opacity: 0.62; }
}

@media (prefers-reduced-motion: reduce) {
    button.wpjp-is-pending::before,
    a.wpjp-is-pending::before {
        animation-duration: 2.4s;
    }

    input.wpjp-is-pending {
        animation: none;
        opacity: 0.8;
    }
}

form[aria-busy="true"] {
    /* Nothing on the form should look pressable while it is in flight. */
    cursor: progress;
}

/* --- A select that Chosen has replaced --- */
/* A select with a few hundred options in it is handed to Chosen, which hides
   it and builds a control of its own. chosen.min.css is an unlayered third
   party sheet, so its 25px-tall default beats everything Core says from inside
   @layer wpjp-legacy - a control nobody can hit on a phone, and a different
   shape from every other field in the form. This sheet is unlayered too, and
   scoped with :where() so it carries no more weight than it needs: a look that
   dresses the control itself still wins. */

/* Chosen states 13px on the container, so the control, the search box and
   every row of the list are three sizes down from the fields around them. */

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper, .wpj-jp-main-up-wrapper) .chosen-container {
    font-size: var(--wpjp-body-font-size, 17px);
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper, .wpj-jp-main-up-wrapper) .chosen-container-single .chosen-single {
    display: flex;
    align-items: center;
    height: auto;
    /* The height the form's other controls are given in style.css. */
    min-height: 55px;
    padding: 10px 12px;
    border: 1px solid var(--wpjp-border-color, #e3e6ee);
    border-radius: 8px;
    background: var(--wpjp-card-background, #fff);
    color: var(--wpjp-body-font-color, #4d5566);
    box-shadow: none;
}

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper, .wpj-jp-main-up-wrapper) .chosen-container-single.chosen-container-active .chosen-single {
    border-color: var(--wpjp-primary-color, #2e5bff);
}

/* The list hangs below the field, and the add-job form clips its own rows.

   style.css gives every row in that form `overflow: hidden` - a clearfix from
   when the row floated its fields, left behind when it became a flex
   container. Nothing inside the row needs it any more, and a Chosen list is
   positioned below the field it belongs to, so the row cut it off at its own
   edge. The control opened, the search box took focus, and not one of the 238
   categories was ever drawn. Released only for the rows that actually hold
   such a list, so the clip stays where something may still rely on it. The
   first selector answers style.css on its own terms: a weightless rule does
   not outrank `div.wjportal-add-job-form .wjportal-form-value`. */

div.wjportal-add-job-form .wjportal-form-value:has(.chosen-container),
:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper, .wpj-jp-main-up-wrapper) .wjportal-form-value:has(.chosen-container) {
    overflow: visible;
}

/* The same release for browsers without :has() (Firefox before 121), which
   discard the whole rule above. wpjobportal-accessible-forms.js marks the row
   of every Chosen control. Kept as a rule of its own: added to the list above
   it would be discarded with it. */
div.wjportal-add-job-form .wjportal-form-value.wpjp-has-chosen,
:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper, .wpj-jp-main-up-wrapper) .wjportal-form-value.wpjp-has-chosen {
    overflow: visible;
}

/* The row under the pointer is Chosen's own blue, which belongs to no palette
   this plugin has. style.css already turns that row's text white and leaves
   the fill alone, so the fill is all that is stated here. */

:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper, .wpj-jp-main-up-wrapper) .chosen-container .chosen-results li.highlighted {
    background: var(--wpjp-primary-color, #3baeda);
}

/* The one already chosen, when the list opens on it. Not while it is under the
   pointer: its text is white then, and this grey would hide it. */
:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper, .wpj-jp-main-up-wrapper) .chosen-container .chosen-results li.result-selected:not(.highlighted) {
    background: var(--wpjp-background-color, #f6f6f6);
    font-weight: 600;
}

/* Chosen's arrow is drawn from a sprite positioned for a 25px control. */
:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper, .wpj-jp-main-up-wrapper) .chosen-container-single .chosen-single div {
    display: flex;
    align-items: center;
}

/* --- One arrow on every dropdown --- */
/*
 * The add-job form showed three: Core's caret on a styled select, Chosen's
 * sprite - a small grey mark in the top corner - on Category and Company, and
 * the browser's own chevron on any select without Core's select class, such
 * as Workplace Type. The caret is Core's, the one style.css draws, stated once
 * here so the add-ons' forms can use the same one by name.
 */
:where(.wjportal-main-up-wrapper, .wpj-jp-main-up-wrapper, .wpjp-recruit-center, .wpjobportal-candidate-portal, .wpjp-marketplace-commerce) {
    --wpjp-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23656575'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

:where(.wjportal-main-up-wrapper, .wpj-jp-main-up-wrapper, .wpjp-recruit-center, .wpjobportal-candidate-portal, .wpjp-marketplace-commerce) select:not([multiple]) {
    appearance: none;
    background-image: var(--wpjp-select-arrow);
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 1.5em;
    padding-inline-end: 40px;
}

/*
 * The form's own control rule above sets both sides to 0.75rem, and it
 * outweighs style.css's 40px, so a long option ran under the arrow.
 */
:where(#wpjobportal-wrapper, #wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper, .wjportal-main-up-wrapper) .wpjp-ds-form select.wpjp-ds-control:not([multiple]):not([type="checkbox"]):not([type="radio"]) {
    padding-inline-end: 40px;
}

/*
 * Chosen: the same caret, where the select's would be - 16px in from the edge
 * and centred on the field - in place of the sprite. Pointing up while the
 * list is open, as Chosen's own does.
 */
:where(.wjportal-main-up-wrapper, .wpj-jp-main-up-wrapper) .chosen-container.chosen-container-single .chosen-single div {
    width: calc(1.5em + 32px);
    justify-content: center;
}

:where(.wjportal-main-up-wrapper, .wpj-jp-main-up-wrapper) .chosen-container.chosen-container-single .chosen-single div b {
    width: 1.5em;
    height: 1.5em;
    background: var(--wpjp-select-arrow) no-repeat center / 100%;
}

:where(.wjportal-main-up-wrapper, .wpj-jp-main-up-wrapper) .chosen-container.chosen-container-active.chosen-with-drop .chosen-single div b {
    background-position: center;
    transform: rotate(180deg);
}

:where(.wjportal-main-up-wrapper, .wpj-jp-main-up-wrapper) .chosen-container.chosen-container-single .chosen-single {
    padding-inline-end: calc(1.5em + 32px);
}

/*
 * The dashboard's searchable pickers take the dashboard's chevron - the one
 * its plain selects draw, 8px in from the edge - in place of Chosen's sprite.
 */
:where(#wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper) {
    --wpjp-admin-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23475569'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

:where(#wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper) .chosen-container.chosen-container-single .chosen-single div {
    width: 34px;
    justify-content: center;
}

:where(#wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper) .chosen-container.chosen-container-single .chosen-single div b {
    width: 18px;
    height: 18px;
    background: var(--wpjp-admin-select-arrow) no-repeat center / 100%;
}

:where(#wpjobportaladmin-wrapper, #wpjobportal-admin-wrapper) .chosen-container.chosen-container-active.chosen-with-drop .chosen-single div b {
    background-position: center;
    transform: rotate(180deg);
}

/* --- What is wrong, where it can be read --- */
/* A field the person cannot see - a select behind its searchable stand-in, or
   one the template renders hidden - takes its error message down with it, and
   the form then appears to ignore the Save button. The summary says which
   fields, at the top of the form. */

.wpjp-hidden-error-summary {
    margin-block-end: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--wpjp-ds-color-danger, #c0392b);
    border-inline-start-width: 4px;
    border-radius: 6px;
    background: var(--wpjp-ds-color-surface, #fff);
    color: var(--wpjp-ds-color-text, #12172b);
    font-size: 0.9375rem;
}

.wpjp-hidden-error-summary:focus-visible {
    outline: 2px solid var(--wpjp-ds-color-primary, #2e5bff);
    outline-offset: 2px;
}

/* The notice a job form shows an employer who has no company yet. */
.wjportal-form-needs-company p {
    margin: 0 0 0.5rem;
}