/*
 * v9 migration: selectize (v8 copy) inside the Bootstrap 5 dashboard.
 * selectize copies the select's classes onto its wrapper; the v9 form helper gives every select "form-select",
 * so the wrapper got Bootstrap's select border, arrow and padding around the selectize box (double frame).
 * Scoped to .ccm-ui (dashboard and dialogs): the frontend booking calendar keeps the plain selectize look.
 */
.ccm-ui .selectize-control.form-select {
    padding: 0;
    border: 0;
    background-image: none;
    box-shadow: none;
    height: auto;
    min-height: 0;
}

/* match the v9 dashboard fields */
.ccm-ui .selectize-control .selectize-input {
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    box-shadow: none;
    color: #4c4f56;
    font-size: 16px;
    line-height: 24px;
}

.ccm-ui .selectize-control .selectize-input.focus {
    border-color: #ebebeb;
    box-shadow: none;
}

.ccm-ui .selectize-control.multi .selectize-input.has-items {
    padding: 6px 12px 3px;
}

.ccm-ui .selectize-control.multi .selectize-input > div {
    margin: 0 4px 3px 0;
    padding: 2px 6px;
    background: #f2f2f2;
    color: #4c4f56;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
}

.ccm-ui .selectize-dropdown {
    border-color: #ebebeb;
    border-radius: 0 0 4px 4px;
    color: #4c4f56;
    font-size: 16px;
}