/**
 * Choices.js form alignment — global (c360 chrome).
 *
 * Phoenix's theme.min.css makes .choices__inner taller and uses a
 * different font (Montserrat 14px line-height 24px) than its companion
 * .form-control-sm / .form-select-sm inputs (Century Gothic 12.8px /
 * 19.07px). The mismatch is visible whenever a Choices dropdown appears
 * alongside other form inputs (compose modal, lead wizards, claim forms,
 * etc.) — the Choices control reads bigger and "different".
 *
 * This stylesheet aligns every Choices instance in the c360 chrome to
 * the surrounding form-control-sm proportions. Selected value and open
 * list options use regular 400 weight (labels stay semibold in module CSS).
 *
 * Phoenix uses !important on several base properties (line-height /
 * min-height / background-color on .choices__inner, and font-size on
 * .choices .choices__list--dropdown .choices__item--selectable), so a
 * handful of our overrides must also use !important to win the cascade.
 *
 * Pairs with css/c360-choices-dropdown-colors.css (colour-only).
 */

/* ---- Typography across the whole Choices tree ----
   font-family, font-size, color, and line-height all uniform.
   font-weight 400 on selected display and dropdown options. */
body.broker-c360-ui div.choices,
body.broker-c360-ui div.choices[data-type*="select-one"] > .choices__inner,
body.broker-c360-ui div.choices[data-type*="select-one"] .choices__list--single .choices__item,
body.broker-c360-ui div.choices__list--dropdown .choices__item,
body.broker-c360-ui div.choices__list[aria-expanded] .choices__item {
    font-family: "Century Gothic", CenturyGothic, AppleGothic, Calibri, sans-serif;
    font-size: 0.8rem !important;
    line-height: 19.07px !important;
    color: rgb(34, 40, 52);
    font-weight: 400 !important;
}

/* ---- Inner box: match .form-select-sm height/padding/radius ---- */
body.broker-c360-ui .choices[data-type*="select-one"] > .choices__inner {
    min-height: 33px !important;
    padding: 6px 40px 6px 16px;
    padding-bottom: 6px;
    border-radius: 6px;
    border-color: rgb(203, 208, 221);
    background-color: #ffffff !important;
}

body.broker-c360-ui .choices[data-type*="select-one"] > .choices__inner > .choices__list--single {
    padding: 0;
}

body.broker-c360-ui .choices[data-type*="select-one"] > .choices__inner > .choices__list--single .choices__item {
    padding-top: 0;
    padding-bottom: 0;
}

/* Recentre the dropdown chevron after pinning min-height to 33px. */
body.broker-c360-ui .choices[data-type*="select-one"]::after {
    top: 50%;
    margin-top: -2px;
}

/* ---- Dropdown list item padding ---- */
body.broker-c360-ui div.choices__list--dropdown .choices__item,
body.broker-c360-ui div.choices__list[aria-expanded] .choices__item {
    padding: 6px 16px;
}

/* ---- Focus state — teal ring, matching the rest of the form ---- */
body.broker-c360-ui .choices.is-focused > .choices__inner,
body.broker-c360-ui .choices.is-open > .choices__inner {
    border-color: color-mix(in srgb, #5cbdb4 42%, rgb(203, 208, 221));
    box-shadow: 0 0 0 0.15rem rgba(92, 189, 180, 0.22);
}