/*
 * Contact Form 7 compatibility.
 *
 * This is the only stylesheet the theme adds, and it makes no design
 * decisions. CF7 wraps every control in its own <span> elements and appends
 * its own validation and response markup, none of which existed in the static
 * designs. These rules map that markup back onto the layouts already defined
 * in style.css. Every value below is copied from the corresponding rule there.
 *
 * Loaded only on pages that render a CF7 form:
 *   #bfContact   - BidFunction contact form
 *   #RYI         - GovOpportunities apply form
 *   #PostVacancy - Post a Vacancy form
 *   #ContactForm - Contact page form
 */

/* Controls sit inside a wrapper span; keep .form-control full width. */
#bfContact .wpcf7-form-control-wrap,
#RYI .wpcf7-form-control-wrap,
#PostVacancy .wpcf7-form-control-wrap,
#ContactForm .wpcf7-form-control-wrap {
    display: block;
}

/*
 * intl-tel-input wraps the telephone field in .iti, which is inline-block by
 * default and would shrink inside these grid columns.
 */
#bfContact .iti,
#RYI .iti,
#PostVacancy .iti,
#ContactForm .iti {
    display: block;
    width: 100%;
}

/*
 * The library reserves room for the flag with padding-left on the input, but
 * each design sets .form-control padding from an id selector, which wins and
 * would leave the typed number sitting under the flag. 52px is the library's
 * own value for a dropdown-enabled field.
 */
#bfContact .iti input.form-control,
#RYI .iti input.form-control,
#PostVacancy .iti input.form-control,
#ContactForm .iti input.form-control {
    padding-left: 52px;
}

/* The country list must clear the fields below it. */
#bfContact .iti__country-list,
#RYI .iti__country-list,
#PostVacancy .iti__country-list,
#ContactForm .iti__country-list {
    z-index: 5;
    text-align: left;
    color: #1d1d1b;
}

/*
 * style.css hides the list with display:none !important and only shows it
 * under .iti--open, a class this version of intl-tel-input (17) never adds -
 * it opens the list by removing .iti__hide - so clicking the flag did nothing.
 */
#bfContact .iti__country-list:not(.iti__hide),
#RYI .iti__country-list:not(.iti__hide),
#PostVacancy .iti__country-list:not(.iti__hide),
#ContactForm .iti__country-list:not(.iti__hide) {
    display: block !important;
    /* Stay on screen in a narrow column (long names wrap instead). */
    width: max-content;
    max-width: 300px;
    white-space: normal;
}

/*
 * Country list look: inherited 18px body text made it oversized next to the
 * form. Sized and styled like the form's own fields (Roboto, 14px labels,
 * 5px radius, #a9a9a9 borders), with the theme green for the hovered row.
 */
#bfContact .iti__country-list,
#RYI .iti__country-list,
#PostVacancy .iti__country-list,
#ContactForm .iti__country-list {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid #a9a9a9;
    border-radius: 5px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    margin-top: 4px;
}

#bfContact .iti__country,
#RYI .iti__country,
#PostVacancy .iti__country,
#ContactForm .iti__country {
    padding: 7px 12px;
}

#bfContact .iti__country.iti__highlight,
#RYI .iti__country.iti__highlight,
#PostVacancy .iti__country.iti__highlight,
#ContactForm .iti__country.iti__highlight,
#bfContact .iti__country:hover,
#RYI .iti__country:hover,
#PostVacancy .iti__country:hover,
#ContactForm .iti__country:hover {
    background-color: #F0F6ED;
}

#bfContact .iti__country-name,
#RYI .iti__country-name,
#PostVacancy .iti__country-name,
#ContactForm .iti__country-name {
    color: #1d1d1b;
}

#bfContact .iti__dial-code,
#RYI .iti__dial-code,
#PostVacancy .iti__dial-code,
#ContactForm .iti__dial-code {
    color: #707070;
}

/*
 * BidFunction consent checkbox. In the static markup the <input> was itself
 * the flex item in .bf-cf-consent-row. CF7 nests it inside three spans and a
 * label, so the flex item is now a wrapper and the box styling has to reach
 * the real input. Values copied from .bf-cf-check in style.css.
 */
#bfContact .bf-cf-consent-row .wpcf7-form-control-wrap {
    flex: 0 0 10px;
    width: 10px;
}

#bfContact .bf-cf-consent-row .wpcf7-acceptance,
#bfContact .bf-cf-consent-row .wpcf7-list-item,
#bfContact .bf-cf-consent-row .wpcf7-list-item label {
    display: block;
    margin: 0;
}

#bfContact .bf-cf-consent-row .wpcf7-list-item-label {
    display: none;
}

#bfContact .bf-cf-consent-row input[type="checkbox"] {
    width: 10px;
    height: 10px;
    margin: 2px 0 0;
    border: 1px solid #706f6f;
    border-radius: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
}

#bfContact .bf-cf-consent-row input[type="checkbox"]:checked {
    background: #88CD00;
    border-color: #88CD00;
}

/*
 * Bootstrap form-check rows on the GovOpportunities and Post a Vacancy forms.
 *
 * The consent text sits inside CF7's own <label> so that clicking it toggles
 * the box - the design's <label for="AgreeTerms"> could not work, because CF7
 * does not give the input that id. These rules restore the .form-check layout
 * around CF7's nesting; the geometry is Bootstrap's own .form-check-input.
 */
#RYI .form-check .wpcf7-form-control-wrap,
#PostVacancy .form-check .wpcf7-form-control-wrap {
    display: block;
}

#RYI .form-check .wpcf7-list-item,
#PostVacancy .form-check .wpcf7-list-item {
    margin: 0;
}

#RYI .form-check .wpcf7-list-item label,
#PostVacancy .form-check .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: .5em;
    margin: 0;
}

#RYI .form-check input[type="checkbox"],
#PostVacancy .form-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    margin-top: .25em;
}

/*
 * The consent text carried .AgreeTermsColor on the GovOpportunities form.
 * Value copied from that rule in style.css.
 */
#RYI .form-check .wpcf7-list-item-label {
    color: #706F6F !important;
}

/*
 * The file input is visually hidden by #PostVacancy .pv-file-hidden, which CF7
 * keeps on the input itself. Its wrapper span would still occupy a line.
 */
#PostVacancy .pv-upload-btn + .wpcf7-form-control-wrap {
    display: inline;
}

/* Per-field validation text, which the static forms had no equivalent for. */
#bfContact .wpcf7-not-valid-tip,
#RYI .wpcf7-not-valid-tip,
#PostVacancy .wpcf7-not-valid-tip,
#ContactForm .wpcf7-not-valid-tip {
    font-size: 12px;
    line-height: 18px;
    color: #ff8a80;
    margin-top: 4px;
}

#bfContact .wpcf7-not-valid,
#RYI .wpcf7-not-valid,
#PostVacancy .wpcf7-not-valid,
#ContactForm .wpcf7-not-valid {
    border-color: #ff8a80;
}

/* CF7 appends its response banner inside the form, after the submit button. */
#bfContact .wpcf7-response-output,
#RYI .wpcf7-response-output,
#PostVacancy .wpcf7-response-output,
#ContactForm .wpcf7-response-output {
    margin: 16px 0 0;
    padding: 10px 14px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 21px;
    color: #fff;
}

/*
 * White text only suits the dark BidFunction and GovOpportunities sections.
 * The Contact / Portal form sits on a white card and Post a Vacancy on light
 * green, where white made "Thank you for your message" invisible.
 */
#PostVacancy .wpcf7-response-output,
#ContactForm .wpcf7-response-output {
    color: #1d1d1b;
}

#bfContact .wpcf7-spinner,
#RYI .wpcf7-spinner,
#PostVacancy .wpcf7-spinner,
#ContactForm .wpcf7-spinner {
    margin: 0 0 0 12px;
}