body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#candidate_programtype ~ .ts-wrapper.form-select,
#candidate_programofinterest ~ .ts-wrapper.form-select,
#candidate_desiredintake ~ .ts-wrapper.form-select {
    position: relative;
    background-image: none;
    padding: 0;
}

/* Custom chevron — decorative only, pointer-events: none so clicks pass
through to .ts-control, which already handles opening the dropdown */
#candidate_programtype ~ .ts-wrapper.form-select::after,
#candidate_programofinterest ~ .ts-wrapper.form-select::after,
#candidate_desiredintake ~ .ts-wrapper.form-select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #2d3748;
    border-bottom: 2px solid #2d3748;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

/* White background during click, keyboard focus, and when open */
#candidate_programtype ~ .ts-wrapper.form-select:active,
#candidate_programtype ~ .ts-wrapper.form-select:focus-within,
#candidate_programtype ~ .ts-wrapper.form-select.focus,
#candidate_programtype ~ .ts-wrapper.form-select.dropdown-active,
#candidate_programofinterest ~ .ts-wrapper.form-select:active,
#candidate_programofinterest ~ .ts-wrapper.form-select:focus-within,
#candidate_programofinterest ~ .ts-wrapper.form-select.focus,
#candidate_programofinterest ~ .ts-wrapper.form-select.dropdown-active,
#candidate_desiredintake ~ .ts-wrapper.form-select:active,
#candidate_desiredintake ~ .ts-wrapper.form-select:focus-within,
#candidate_desiredintake ~ .ts-wrapper.form-select.focus,
#candidate_desiredintake ~ .ts-wrapper.form-select.dropdown-active {
    background-image: none;
    background-color: #ffffff;
}

/* Ensure the inner input/control also stays white if nested */
#candidate_programtype ~ .ts-wrapper.form-select .ts-control,
#candidate_programofinterest ~ .ts-wrapper.form-select .ts-control,
#candidate_desiredintake ~ .ts-wrapper.form-select .ts-control {
    background-color: transparent;
}

/* Click target: padding lives on .ts-control (the real interactive
element), not .ts-wrapper — right padding reserves room for the
chevron so long selected text doesn't run under it */
#candidate_programtype ~ .ts-wrapper .ts-control,
#candidate_programofinterest ~ .ts-wrapper .ts-control,
#candidate_desiredintake ~ .ts-wrapper .ts-control {
    border: none;
    background: none;
    padding: 14px 40px 14px 16px;
    /* Needed for .item ellipsis to work */
    overflow: hidden;
}

/* Keep the inner input from sliding behind the chevron */
/* No value yet — input sizes the box normally */
#candidate_programtype ~ .ts-wrapper .ts-control input,
#candidate_programofinterest ~ .ts-wrapper .ts-control input,
#candidate_desiredintake ~ .ts-wrapper .ts-control input {
    padding-right: 40px;
    max-width: calc(100% - 40px);
    box-sizing: border-box;
    caret-color: transparent;
}

/* Value selected — collapse input so .item alone sizes the box */
#candidate_programtype ~ .ts-wrapper.has-items .ts-control input,
#candidate_programofinterest ~ .ts-wrapper.has-items .ts-control input,
#candidate_desiredintake ~ .ts-wrapper.has-items .ts-control input {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

/* Ellipsis for the selected value text */
#candidate_programtype ~ .ts-wrapper .ts-control .item,
#candidate_programofinterest ~ .ts-wrapper .ts-control .item,
#candidate_desiredintake ~ .ts-wrapper .ts-control .item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - 40px); /* leave room for chevron */
}

#candidate_programtype ~ .ts-wrapper .ts-dropdown,
#candidate_programtype ~ .ts-wrapper .ts-control,
#candidate_programtype ~ .ts-wrapper .ts-control input,
#candidate_programofinterest ~ .ts-wrapper .ts-dropdown,
#candidate_programofinterest ~ .ts-wrapper .ts-control,
#candidate_programofinterest ~ .ts-wrapper .ts-control input,
#candidate_desiredintake ~ .ts-wrapper .ts-dropdown,
#candidate_desiredintake ~ .ts-wrapper .ts-control,
#candidate_desiredintake ~ .ts-wrapper .ts-control input {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #2d3748;
}

/* Darker highlight for the active / selected option in the dropdown */
#candidate_programtype ~ .ts-wrapper .ts-dropdown .option.selected,
#candidate_programtype ~ .ts-wrapper .ts-dropdown .option.active,
#candidate_programofinterest ~ .ts-wrapper .ts-dropdown .option.selected,
#candidate_programofinterest ~ .ts-wrapper .ts-dropdown .option.active,
#candidate_desiredintake ~ .ts-wrapper .ts-dropdown .option.selected,
#candidate_desiredintake ~ .ts-wrapper .ts-dropdown .option.active {
    background-color: #cdddf8; /* soft modern blue — between default and previous */
    color: #2d3748;
}