/*
 * User-portal corrections.
 *
 * Standalone rather than part of the theme SCSS because this checkout has no
 * runnable node build. Written with logical properties throughout (inline-start
 * / inline-end rather than left / right) so the one file serves both LTR and
 * RTL without needing a mirrored twin - the RTL builder only mirrors the vendor
 * sheets and main/style.
 */

/* ---------------------------------------------------------------- job cards */

/* The grid card lays its footer out as three stacked rows. Previously salary,
   the save control and the quick actions all shared one narrow column, so they
   overlapped at any realistic card width. */
.jb-job-card .jb-job-card-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    width: 100%;
}

.jb-job-card .twm-jobs-amount {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    white-space: normal;
}

/* justify-content is set explicitly because .twm-right-content pushes its
   children to the inline end, which left the actions ragged against the
   left-aligned salary and title above them. */
.jb-job-card .jb-job-card-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
    margin: 0;
    width: 100%;
}

.jb-job-card .jb-listing-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
    margin: 0;
}

/* Save / Download / Forward share one pill treatment so the row reads as a set
   of equals rather than a link wedged between two buttons. */
.jb-job-card .jb-listing-quick-action,
.jb-job-card .jb-save-job-button {
    align-items: center;
    background: #fff;
    border: 1px solid #e4ebf2;
    border-radius: 999px;
    color: #5f6b7a;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 5px;
    line-height: 1.2;
    padding: 7px 11px;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
    white-space: nowrap;
}

.jb-job-card .jb-listing-quick-action:hover,
.jb-job-card .jb-listing-quick-action:focus-visible,
.jb-job-card .jb-save-job-button:hover,
.jb-job-card .jb-save-job-button:focus-visible {
    background: #f2fbf8;
    border-color: #3fc1a0;
    color: #1d8a70;
}

.jb-job-card .jb-listing-quick-action i,
.jb-job-card .jb-save-job-button i {
    font-size: 14px;
}

/* The save control is a plain wrapper here; without this it keeps the absolute
   corner positioning it uses on other card styles. */
.jb-job-card .jb-save-job-control {
    display: inline-flex;
    inset: auto;
    margin: 0;
    position: static;
}

.jb-job-card .jb-save-job-control.bookmark-post .jb-save-job-button {
    background: #f2fbf8;
    border-color: #3fc1a0;
    color: #1d8a70;
}

/* The grid card's compiled rules pin this control to icon width, which clipped
   the label to "Save Jo". It sizes to its content here like the pills beside it. */
.jb-job-card .jb-save-job-control,
.jb-job-card .jb-save-job-button {
    flex: 0 0 auto;
    max-width: none;
    min-width: 0;
    overflow: visible;
    width: auto;
}

.jb-job-card .jb-save-job-button span {
    display: inline;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* Browse Job was an underlined text link competing with the pills beside it.
   As the card's only filled control it now reads unambiguously as the primary
   action. */
.jb-job-card .jb-job-card-browse {
    display: block;
    padding: 11px 18px;
    text-align: center;
    width: 100%;
}

@media (min-width: 576px) {
    .jb-job-card .jb-job-card-browse {
        display: inline-block;
        width: auto;
    }
}

/* ------------------------------------------------------- homepage search bar */

/* Field labels and controls line up on a common baseline; the submit button
   fills its column instead of hugging the inline-start edge. */
.twm-bnr-search-bar .twm-search-bar-submit {
    align-items: flex-end;
    display: flex;
}

.twm-bnr-search-bar .twm-search-bar-submit .site-button {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    width: 100%;
}

.twm-bnr-search-bar .twm-search-bar-submit .site-button i {
    font-size: 15px;
}

/* ---------------------------------------------------------- testimonials */

/* The portrait was rendered at full card width and square, which dominated the
   quote it was meant to accompany. A small round avatar reads as attribution.
   The section is currently absent from the homepage, but the rule applies
   wherever the shortcode is used and if it is put back. */
.twm-testi-media {
    flex: 0 0 auto;
    height: 84px;
    margin-inline-end: 18px;
    overflow: hidden;
    width: 84px;
}

.twm-testi-media,
.twm-testi-media img {
    border-radius: 50%;
}

.twm-testi-media img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* -------------------------------------------------------------- company cards */

/* The theme pins .twm-media and .twm-right-content to opposite corners with
   absolute positioning, which collides as soon as the card is narrower than the
   full page - as it is in the jobs-page strip. The card is a normal column here
   and sizes to its own content. */
.jb-company-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: auto;
    min-height: 0;
    padding: 22px;
}

/* The theme centres the items of this column, which makes every child
   shrink-wrap to its own content instead of filling the card: the head came out
   168px wide inside a 351px card, so the logo sat indented with the vacancy
   count beside it rather than the two sitting at opposite edges, and the action
   row was inset by a different amount again. Both classes are on the element,
   so this outranks the theme rule without !important. */
.twm-employer-grid-style1.jb-company-card {
    align-items: stretch;
}

.jb-company-card .jb-company-card__head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.jb-company-card .twm-media,
.jb-company-card .jb-company-card__vacancies {
    inset: auto;
    margin: 0;
    position: static;
    transform: none;
}

.jb-company-card .twm-media {
    flex: 0 0 auto;
    height: 62px;
    width: 62px;
}

.jb-company-card .twm-media img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.jb-company-card .jb-company-card__vacancies {
    flex: 0 0 auto;
    white-space: nowrap;
}

.jb-company-card .twm-mid-content {
    margin: 0;
    padding: 0;
    width: 100%;
}

.jb-company-card .twm-job-title h4 {
    font-size: 17px;
    line-height: 1.35;
    margin: 0;
}

.jb-company-card .twm-job-address {
    margin: 6px 0 0;
}

.jb-company-card .jb-company-card__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

/* Save / Download / Forward share the pill treatment used on job cards.

   display: contents rather than a flex box of its own: as a nested box this
   wrapper was one item sitting beside the save button, so the three pills were
   sized in two separate rows and sat 9px out of line with each other. Flattened
   into the parent they are three equals on one row. */
.jb-company-card .jb-listing-quick-actions {
    display: contents;
}

/* The save button changes wording once a company is saved - "Save company"
   becomes the longer "Saved company" - which was enough to push the row over
   the card width and wrap Download and Forward onto a second line. The row
   holds and the wording gives way instead. */
.jb-company-card .jb-company-card__actions {
    flex-wrap: nowrap;
}

.jb-company-card .jb-save-company-button,
.jb-company-card .jb-listing-quick-action {
    min-width: 0;
}

/* The save button is wrapped in a form for the POST, and the theme gives that
   form (and the button) a 10px top margin for the grid layout - enough to sit
   this pill visibly lower than the two beside it. The row already has a gap.
   The body prefix is needed because the theme's rule has the same two-class
   weight but loads after this file. */
body .jb-company-card .jb-save-company-form,
body .jb-company-card .jb-save-company-button {
    margin-top: 0;
}

.jb-company-card .jb-save-company-button span,
.jb-company-card .jb-listing-quick-action span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jb-company-card .jb-listing-quick-action,
.jb-company-card .jb-save-company-button {
    align-items: center;
    background: #fff;
    border: 1px solid #e4ebf2;
    border-radius: 999px;
    color: #5f6b7a;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 5px;
    line-height: 1.2;
    padding: 7px 11px;
    text-decoration: none;
    white-space: nowrap;
}

.jb-company-card .jb-listing-quick-action:hover,
.jb-company-card .jb-save-company-button:hover {
    background: #f2fbf8;
    border-color: #3fc1a0;
    color: #1d8a70;
}

.jb-company-card .jb-save-company-control {
    display: inline-flex;
    inset: auto;
    margin: 0;
    position: static;
}

/* The strip's own bottom margin stacked on top of the card gutter, leaving a
   wide empty band between it and the result list. */
.jb-category-quick-links .jb-company-card {
    margin-bottom: 16px;
}

.jb-category-quick-links:has(.twm-employer-list-wrap) {
    margin-bottom: 14px;
}

/* ------------------------------------------------------ companies filter bar */

.company-directory-search__fields {
    margin-bottom: 10px;
}

/* Checkboxes sit on one line beside each other and share a baseline with the
   Search / Clear buttons, instead of each taking a grid column of its own and
   wrapping onto separate rows. */
.company-directory-search__toggles {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
}

.company-directory-search__toggles .form-check {
    align-items: center;
    display: flex;
    gap: 8px;
    margin: 0;
    min-height: 0;
    padding: 0;
}

.company-directory-search__toggles .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}

.company-directory-search__toggles .form-check-label {
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .company-directory-search__toggles .form-check-label {
        white-space: normal;
    }
}

/* The keyword box rendered as a filled pill while the three selects rendered as
   bare text with a caret, so the row read as one control plus three labels.
   They share a height, background and border here. */
.company-directory-search__fields .filler-job-form {
    align-items: center;
    background: #f4f8fb;
    border: 1px solid #e4ebf2;
    border-radius: 10px;
    display: flex;
    gap: 8px;
    min-height: 52px;
    padding: 0 14px;
    width: 100%;
}

.company-directory-search__fields .filler-job-form > i {
    color: #8a94a2;
    flex: 0 0 auto;
    font-size: 17px;
    position: static;
}

.company-directory-search__fields .filler-job-form .form-control,
.company-directory-search__fields .filler-job-form .form-select,
.company-directory-search__fields .filler-job-form .bootstrap-select,
.company-directory-search__fields .filler-job-form .dropdown-toggle {
    background: transparent;
    border: 0;
    box-shadow: none;
    height: auto;
    min-height: 0;
    padding: 0;
    width: 100%;
}

.company-directory-search__actions .site-button,
.company-directory-search__actions .site-button-secondry {
    min-height: 52px;
}

/* -------------------------------------------------------- job cards (list) */

/* In the list layout the actions sit on one line at the end of the row; the
   Browse Job button keeps its intrinsic width rather than filling the column. */
.twm-jobs-list-style1.jb-job-card .jb-job-card-actions {
    justify-content: flex-end;
}

.twm-jobs-list-style1.jb-job-card .jb-job-card-browse {
    display: inline-block;
    padding: 8px 16px;
    width: auto;
}

.twm-jobs-list-style1.jb-job-card .twm-job-address .twm-job-post-duration {
    color: #8a94a2;
    display: inline;
    font-size: 13px;
    margin-inline-start: 8px;
    position: static;
}

.twm-jobs-list-style1.jb-job-card .twm-job-address .twm-job-post-duration::before {
    content: "·";
    margin-inline-end: 8px;
}

/* ------------------------------------------------------------- CV import */

.jb-cv-review__heading {
    border-bottom: 1px solid #e4ebf2;
    font-size: 17px;
    font-weight: 700;
    margin: 28px 0 16px;
    padding-bottom: 8px;
}

.jb-cv-review__entry {
    background: #f8fbfd;
    border: 1px solid #e4ebf2;
    border-radius: 10px;
    margin-bottom: 14px;
    padding: 18px;
}

.jb-cv-review__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.jb-cv-review__tag {
    align-items: center;
    background: #fff;
    border: 1px solid #e4ebf2;
    border-radius: 999px;
    display: flex;
    gap: 8px;
    padding: 5px 12px 5px 10px;
}

.jb-cv-review__tag .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}

/* The field sizes to its own text so a long skill is still readable, but the
   pill never grows past a sensible width. */
.jb-cv-review__tag .form-control {
    background: transparent;
    border: 0;
    box-shadow: none;
    font-size: 13px;
    height: auto;
    max-width: 190px;
    min-height: 0;
    padding: 2px 0;
    width: auto;
}

.jb-cv-import .alert {
    border-radius: 10px;
}

.jb-cv-import-cta {
    align-items: center;
    background: #f2fbf8;
    border: 1px solid #cdece3;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 20px 22px;
}

.jb-cv-import-cta p {
    font-size: 14px;
    margin-top: 4px;
    max-width: 52ch;
}

/* ------------------------------------------------------- apply: CV choice */

.jb-cv-choice__label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
}

.jb-cv-choice__option {
    align-items: flex-start;
    border: 1px solid #e4ebf2;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    padding: 12px 14px;
}

.jb-cv-choice__option:has(input:checked) {
    background: #f2fbf8;
    border-color: #3fc1a0;
}

.jb-cv-choice__option input {
    flex: 0 0 auto;
    margin-top: 3px;
}

.jb-cv-choice__option small {
    color: #5f6b7a;
    display: block;
    font-size: 13px;
    margin-top: 2px;
}

.jb-cv-choice__body {
    margin: 0 0 12px;
    padding-inline-start: 28px;
}

.jb-cv-choice__file {
    align-items: center;
    display: flex;
    font-size: 14px;
    gap: 6px;
    margin: 10px 0 0;
}

.jb-cv-choice__keep {
    align-items: center;
    display: flex;
    font-size: 14px;
    gap: 8px;
    margin-top: 10px;
}

/* ------------------------------------------------------------- saved CVs */

.jb-saved-cvs__list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.jb-saved-cvs__item {
    align-items: center;
    border: 1px solid #e4ebf2;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
    padding: 12px 14px;
}

.jb-saved-cvs__name {
    flex: 1 1 auto;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.jb-saved-cvs__badge {
    background: #eafaf5;
    border-radius: 999px;
    color: #1d8a70;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
}

.jb-saved-cvs__item form {
    margin: 0;
}

.jb-saved-cvs__action {
    background: none;
    border: 0;
    color: #5f6b7a;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 6px;
    text-decoration: underline;
}

.jb-saved-cvs__action:hover {
    color: #1d8a70;
}

.jb-saved-cvs__action--danger:hover {
    color: #c0392b;
}

.jb-saved-cvs__upload {
    background: #f8fbfd;
    border: 1px solid #e4ebf2;
    border-radius: 10px;
    margin-bottom: 24px;
    padding: 16px;
}

/* ------------------------------------------- listing sort / display controls */

/*
 * The sort, page-size and layout selects rendered as #a0a0a0 text on the theme's
 * pale #f0f6fe panel - about 2.4:1, well under the 4.5:1 needed for body text,
 * so all three read as disabled controls rather than usable ones. They keep the
 * pale surface but take a readable ink colour and a visible edge.
 */
/*
 * style.css sets these with `.wt-select-bar-2 + .select2-container ...` and is
 * loaded from the footer, after this file - so the overrides have to carry the
 * same shape plus the wrapper class to win on specificity rather than order.
 */
.product-filter-wrap .wt-select-bar-2 + .select2-container .select2-selection,
.twm-filter-select .wt-select-bar-2 + .select2-container .select2-selection {
    background-color: #f4f8fb;
    border: 1px solid #dce6ef;
    border-radius: 8px;
}

.product-filter-wrap .wt-select-bar-2 + .select2-container .select2-selection .select2-selection__rendered,
.twm-filter-select .wt-select-bar-2 + .select2-container .select2-selection .select2-selection__rendered {
    color: #12232f;
    font-weight: 500;
}

/* The caret inherited the same washed-out grey. */
.product-filter-wrap .wt-select-bar-2 + .select2-container .select2-selection .select2-selection__arrow b,
.twm-filter-select .wt-select-bar-2 + .select2-container .select2-selection .select2-selection__arrow b {
    border-top-color: #5f6b7a;
}

.product-filter-wrap .wt-select-bar-2 + .select2-container--open .select2-selection,
.twm-filter-select .wt-select-bar-2 + .select2-container--open .select2-selection,
.product-filter-wrap .wt-select-bar-2 + .select2-container .select2-selection:hover,
.twm-filter-select .wt-select-bar-2 + .select2-container .select2-selection:hover {
    border-color: #3fc1a0;
}

/* The open menu picked up the same grey, so the options were as faint as the
   control that opened them. */
.select2-container .select2-results__option {
    color: #12232f;
}

.select2-container .select2-results__option--highlighted[aria-selected] {
    background-color: #3fc1a0;
    color: #ffffff;
}

/* Language switcher inside the mobile off-canvas menu.
   It sat flush against the contact block above it and overlapped the element
   below, because the toggle carried no margin of its own and the drawer gives
   it none. Logical properties so the inline spacing follows the text
   direction rather than needing an RTL override. */
.offcanvas-body .jb-language-toggle {
    display: inline-flex;
    width: auto;
    margin-block: 20px 12px;

    /* Logical, so the gap falls between this and the currency switcher whether
       the page runs left-to-right or right-to-left. They were 3px apart. */
    margin-inline-end: 12px;

    /* Every other block in the drawer - the nav, the contact lists, the
       social icons - carries 20px of its own horizontal padding, so their
       content lines up 20px in from the edge. This toggle is a bare anchor
       with no such padding, so its border sat flush against the drawer edge
       and broke that line. Matching the 20px puts it back on the gutter. */
    margin-inline-start: 20px;
}

/* In the drawer there is room for the language name, and a lone globe icon
   does not say which language it would switch to. */
.offcanvas-body .jb-language-toggle span:not(.caret) {
    display: inline;
}

/* ------------------------------------------------- account sidebar toggle */

/* Only rendered below the large breakpoint - see the account sidebar partial.
   Styled to match the filter chips used elsewhere in the account area rather
   than introducing another button shape. */
.jb-account-nav-toggle {
    align-items: center;
    background: #fff;
    border: 1px solid #e7ecf1;
    border-radius: 8px;
    color: #16283f;
    display: flex;
    font-size: 15px;
    font-weight: 700;
    justify-content: space-between;
    margin-bottom: 16px;
    min-height: 48px;
    padding: 12px 16px;
    width: 100%;
}

.jb-account-nav-toggle__label {
    align-items: center;
    display: inline-flex;
    gap: 10px;
}

.jb-account-nav-toggle .feather-menu {
    color: var(--primary-color, #3cc19a);
    font-size: 18px;
}

/* Points down when closed, up when open, so the control says which it is. */
.jb-account-nav-toggle__caret {
    transition: transform 0.2s ease;
}

.jb-account-nav-toggle[aria-expanded="true"] .jb-account-nav-toggle__caret {
    transform: rotate(180deg);
}

.jb-account-nav-toggle:focus-visible {
    outline: 2px solid var(--primary-color, #3cc19a);
    outline-offset: 2px;
}

/* Featured and job-type labels share one row on the job card.

   They were two sibling blocks in a column, so a featured job showed the
   FEATURED pill and its job types on separate lines even though both are
   labels for the same job and there is room for them side by side. */
.jb-job-card .jb-job-card-tags {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Both wrappers laid out their own children; flattening them means the pills
   inside line up with each other rather than being spaced as two groups. */
.jb-job-card .jb-job-card-tags .jb-job-list-card__badges,
.jb-job-card .jb-job-card-tags .twm-jobs-category {
    display: contents;
}