/* Shared floating-label field system.
   Used by the verification flow and the addresses form — keep it page-agnostic. */

.cf-form {
    color: #000;
}

.cf-field {
    position: relative;
}

.cf-field__label {
    position: absolute;
    top: -.45rem;
    left: .625rem;
    padding: 0 .25rem;
    background: #fff;
    font-size: 0.90rem;
    font-weight: 500;
    color: black;
    line-height: 1;
    z-index: 2;
}

.cf-field__control, .cf-field__control + .select2-container {
    position: relative;
    box-sizing: border-box;
    z-index: 1;
    width: 100%;
    height: 2.8rem;
    border: 1px solid black;
    border-radius: .43rem;
    padding: .55rem .75rem .35rem .75rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: #000;
    background: #fff;
}

.cf-field__control + .select2-container--open {
    border-radius: .43rem .43rem 0 0;
}

.cf-field__control + .select2-container .select2-selection {
    border: none;
}

.cf-field__control + .select2-container .select2-selection__rendered {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.cf-field__control + .select2-container .select2-selection__clear {
    margin-right: .6rem !important;
}

.cf-field__control + .select2-container .select2-selection__arrow {
    top: 25% !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
    transition: background-color 5000s ease-in-out 0s;
}

select.cf-field__control {
    color: var(--cz-tertiary-color);
    padding: .55rem .55rem .35rem .55rem;
}

select.cf-field__control:has(option:not(:first-of-type):checked) {
    color: #000;
}

select.cf-field__control option:first-of-type {
    color: var(--cz-tertiary-color);
}

select.cf-field__control option:not(:first-of-type) {
    color: #000;
}

.cf-field__control::placeholder {
    color: black;
}

.cf-field__control:focus {
    outline: none;
    border-color: var(--cz-success);
}

.cf-field__control:disabled + .select2-container {
    background: #f5f5f5;
    opacity: .7;
}

/* .is-invalid is toggled by JS (verification flow); :invalid + .was-validated is
   Bootstrap's native validation (addresses form). Both render the same way. */
.cf-field__control.is-invalid,
.was-validated .cf-field__control:invalid {
    border-color: var(--cz-danger);
}

.cf-field__control.is-invalid + .select2-container .select2-selection,
.was-validated .cf-field__control:invalid + .select2-container .select2-selection {
    border-color: var(--cz-danger);
}

.cf-field__error {
    margin-top: .25rem;
    font-size: 0.85rem;
    color: var(--cz-danger);
}

/* Notched variant for fields on non-uniform backgrounds (gradients, images): the field is fully
   transparent, a real gap in the border comes from a decorative fieldset + legend behind the control.
   The legend must repeat the label text, since that is what sizes the gap. */
.cf-field--notched {
    --cf-label-size: 1rem;
    isolation: isolate;
}

.cf-field--notched .cf-field__label {
    background: none;
    font-size: var(--cf-label-size);
}

.cf-field--notched .cf-field__control {
    border-color: transparent;
    background: transparent;
}

.cf-field__outline {
    position: absolute;
    /* The border is drawn at the legend's vertical centre, so pull it back onto the control's top edge */
    inset: calc(var(--cf-label-size) / -2) 0 0 0;
    z-index: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid black;
    border-radius: .43rem;
    pointer-events: none;
}

/* float/width come from Bootstrap's reboot; a floated legend loses the border gap */
.cf-field__outline legend {
    float: none;
    width: auto;
    margin: 0 0 0 calc(.625rem - 1px);
    padding: 0 .25rem;
    font-size: var(--cf-label-size);
    font-weight: 500;
    line-height: 1;
}

.cf-field__outline legend span {
    visibility: hidden;
}

.cf-field__control.is-invalid ~ .cf-field__outline {
    border-color: var(--cz-danger);
}

.cf-field--notched .cf-field__control:disabled {
    opacity: .7;
}

/* Some browsers paint the native dropdown list with the select's own background */
.cf-field--notched select.cf-field__control option {
    background: #fff;
}