/*
Useful generic selectors
*/

.carerix_required {
    border: 1px solid #FAA2A8;
}

#apply_form .error, #subscribe_form .error, #newsletter_form .error {
    display: inline-block;
    color: #FAA2A8;
}

.cx_hint {
    display: inline-block;
    color: #C2E5B9;
}

.cx_default_style_success {
    background-color: #F2FDEF;
    border: 1px solid #C2E5B9;
    padding: 5px;
}

.cx_msgBox_success {
    background-color: #F2FDEF;
    border: 1px solid #C2E5B9;
    padding: 5px;
}

.cx_msgBox_error {
    background-color: #FDEFF0;
    border: 1px solid #FAA2A8;
    padding: 5px;
}

.cx2_applyform-apply .cx2_spinner_icon {
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: middle;
    display: none;
}


/*
Legacy layout selectors
These won't be used in flexbox mode
*/
#apply_form, #subscribe_form {
    &:not(.cx2_flex) {

        #apply_form div {
            margin: 2px;
        }

        #apply_form label {
            display: inline-block;
            width: 30%;
        }

        #apply_form #agreement_container label {
            width: 100%;
        }

        #login_form div {
            margin: 2px;
        }

        #login_form label {
            display: inline-block;
            width: 40%;
        }

        #logged_out {
            text-align: right;
        }

        .cx_checkbox_group {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #ddd;
            background-color: #fff;
            margin-bottom: 5px;
        }

        .cx_checkbox_group label {
            display: block;
            padding-left: 5px;
            cursor: pointer;
        }
        .cx_checkbox_group input:focus {
            outline: none;
        }
        .cx_search_widget_select {
            width: 100%;
        }

        .cx_applyform_salary {
            display: inline-block;
        }
        .cx_applyform_salary label {
            width: auto !important;
            margin-right: 8px;
        }
        .cx_applyform_salary input[type="text"] {
            width: 100px;
        }

        div#subscribe_success {
            margin: 20px;
        }

        div#subscribe_form input#subscribe_button {
            margin-top: 20px;
        }

        div#subscribe_form #prefCountry1Node {
            display: block;
        }

        div#prefRegion1Node_container, div#prefRegion2Node_container, div#prefRegion3Node_container, div#prefRegion4Node_container {
        }

        div#subscribe_form #prefRegion1Node, div#subscribe_form #prefRegion2Node, div#subscribe_form #prefRegion3Node, div#subscribe_form #prefRegion4Node {
        }

        div#subscribe_form #functionLevel0, div#subscribe_form #functionLevel1 {

        }

    }
}










/*
Flex layout support (since plugin version 3.3)
*/

/* Flex container */
.cx2_flex, .cx2_flex > .workExperience, .cx2_flex > .education, .cx2_flex > .language {
    display: flex;
    flex-wrap: wrap;
    /*align-items: flex-end;*/  /* Push all children to the bottom (Useful if 2 cx2_flex-half divs differ in inside/outside labels) */
    gap: var(--cx2-flex-gap);  /* spacing between fields */
    width: 100%;
}

/* WP-391: tunable knobs. Declared on .cx2_flex only, so the value inherits down
   into the repeat wrappers instead of being re-declared on them. */
.cx2_flex {
    --cx2-flex-gap: 1rem;
    --cx2-flex-col-min: 150px;
}

/* Selector rows: equal columns, min width, wrap if needed */
.cx2_flex .selector_chain_holder {
    display: flex;
    flex-wrap: wrap;        /* ⬅ REQUIRED for wrapping */
    gap: var(--cx2-flex-gap); /* horizontal gap */
    width: 100%;
}

/* Flex items (the span wrappers) */
.cx2_flex .selector_chain_holder > span:not(.starter):not(.stopper) {
    flex: 1 1 0;            /* equal distribution */
    min-width: var(--cx2-flex-col-min); /* ⬅ prevents tight columns */
}

/* Select fills its column */
.cx2_flex .selector_chain_holder select {
    width: 100%;
}

/* Remove layout-only legacy spans */
.cx2_flex .selector_chain_holder > .starter,
.cx2_flex .selector_chain_holder > .stopper {
    display: none;
}

/* Vertical spacing between rows */
.cx2_flex .selector_chain_holder {
    margin-bottom: 1rem;
}

.cx2_flex .selector_chain_holder:last-child {
    margin-bottom: 0;
}





/* Make every .data_* (and loose <a> action rows) behave as items */
.cx2_flex > [class^="data_"],
.cx2_flex > .cx2_flex-full,
.cx2_flex > .cx2_flex-half,
.cx2_flex > .cx2_flex-third,
.cx2_flex > .cx2_flex-twothird{
    display:block;
    min-width: var(--cx2-flex-col-min);  /* prevents too-narrow columns */
    flex: 0 1 100%;           /* default: full width on small screens */
}

.cx2_flex label {
    display: block;
}

/* Width helpers (override flex-basis per breakpoint) */
.cx2_flex .cx2_flex-half  { flex-basis: calc((100% - var(--cx2-flex-gap)) / 2);}

.cx2_flex .cx2_flex-third,
.cx2_flex > div.block-repeat,
.cx2_flex > div.block-derepeat{ flex-basis: calc((100% - 2 * var(--cx2-flex-gap)) / 3);}

.cx2_flex .cx2_flex-twothird { flex-basis: calc((100% - 2 * var(--cx2-flex-gap)) / 3 * 2 + var(--cx2-flex-gap));}
.cx2_flex .cx2_flex-full  { flex-basis: 100%;}

/* WP-391: a row's columns add up to exactly 100% including the gap, so there is no
   slack. The moment one column computes below --cx2-flex-col-min that floor wins,
   the row needs more than 100%, and it wraps into the wrong pairs. Hand the layout
   fewer columns before it gets there.

   What drives this is the width of the form box, not the width of the window: a
   theme with a sidebar can hand the form a 420px box on a 1000px screen. So the box
   is what gets asked, through container queries. The thresholds fall out of the
   maths above: three thirds need 3 * 150 + 2 * 16 = 482px of box, two halves need
   2 * 150 + 16 = 316px.

   Note the thresholds cannot read --cx2-flex-col-min or --cx2-flex-gap; a @container
   condition takes no custom properties. Retuning those variables does not move these
   breakpoints. Documented for implementers in the README.

   This block must stay after the width helpers above: the base item rule sets
   flex: 0 1 100%, and these only win on source order at equal specificity. */

.cx2_flex {
    container-type: inline-size;
}

/* Medium box: thirds become halves */
@container (max-width: 481px) {
    .cx2_flex .cx2_flex-third,
    .cx2_flex .cx2_flex-twothird {
        flex-basis: calc((100% - var(--cx2-flex-gap)) / 2);
    }
    .cx2_flex .cx2_flex-half,
    .cx2_flex .cx2_flex-third,
    .cx2_flex .cx2_flex-twothird {
        flex-grow: 1;   /* a stranded odd field stretches instead of leaving a gap */
    }
}

/* Small box: every column full width */
@container (max-width: 315px) {
    .cx2_flex .cx2_flex-third,
    .cx2_flex .cx2_flex-twothird,
    .cx2_flex .cx2_flex-half {
        flex-basis: 100%;
    }
}

/* Browsers without container queries (before Chrome 105 / Safari 16 / Firefox 110)
   fall back to measuring the window. Same fix, less accurate, and it never runs
   alongside the blocks above — so only one thing is ever in charge. */
@supports not (container-type: inline-size) {
    @media (max-width: 767px) {
        .cx2_flex .cx2_flex-third,
        .cx2_flex .cx2_flex-twothird {
            flex-basis: calc((100% - var(--cx2-flex-gap)) / 2);
        }
        .cx2_flex .cx2_flex-half,
        .cx2_flex .cx2_flex-third,
        .cx2_flex .cx2_flex-twothird {
            flex-grow: 1;
        }
    }

    @media (max-width: 479px) {
        .cx2_flex .cx2_flex-third,
        .cx2_flex .cx2_flex-twothird,
        .cx2_flex .cx2_flex-half {
            flex-basis: 100%;
        }
    }
}

.cx2_flex-half, .cx2_flex-third, .cx2_flex-twothird, .cx2_flex-full {
    /*border: 2px solid #A195DC;*/
}


/*
.cx2_flex div.language {
    display: flex;
    flex-wrap:wrap;
    gap:1rem;                 !* spacing between fields *!
}
*/

.cx2_flex select.cx2_languages-language,
.cx2_flex select.cx2_languages-read,
.cx2_flex select.cx2_languages-write,
.cx2_flex select.cx2_languages-speak,
.cx2_flex select {
    width: 100%;
}

.cx2_flex .cx2_applyform-apply {
    margin-top: 1rem;
}

/* WP-391: the country-selector widget wraps the input in a .iti div, and the
   library styles that wrapper inline-block with no width, so it shrink-wraps to
   about 317px and ignores the width configured for the field. */
.cx2_flex .iti {
    display: block;
    width: 100%;
}

/* WP-330: restore intl-tel-input country-search padding (the theme overrides the input padding, making the search icon overlap the placeholder) */
.iti__search-input {
    padding-left: calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal)) !important;
    padding-right: calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal)) !important;
}

/* WP-330: taller country-search panel + tighter rows, so more countries show at once (library default shows only ~4 of 488) */
.iti__country-list {
    max-height: 300px !important;
}
.iti__country {
    line-height: 1.2 !important;
}