/* Shared field language for account, panel, public and dynamically generated forms. */
:root {
    --cp-input-accent: var(--cp-brand-accent, var(--accent, #7c3aed));
    --cp-input-border: #dcdfe9;
    --cp-input-ink: #26324b;
    --cp-input-muted: #727d92;
    --cp-input-surface: #fff;
    --cp-input-radius: 11px;
    --cp-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23766794' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

label.cp-managed-label:not(.custom-control-label)::after {
    content: none !important;
}

.cp-required-marker {
    display: inline !important;
    color: #d93963;
    font-size: .95em;
    font-weight: 750;
    margin-inline-start: .2em;
    vertical-align: baseline;
}

.cp-generated-label,
.cp-table-field-label {
    display: block;
    color: var(--cp-input-ink);
    font-size: .8rem;
    font-weight: 650;
    line-height: 1.5;
    margin-block-end: 7px;
}

.cp-table-field-label { font-size: .72rem; }
footer .cp-generated-label { color: inherit; }

.cp-input:not([type='color']):not(.select2-hidden-accessible) {
    background-color: var(--cp-input-surface);
    border: 1px solid var(--cp-input-border);
    border-radius: var(--cp-input-radius);
    color: var(--cp-input-ink);
    font: inherit;
    min-width: 0;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.cp-input:not([type='color']):not(.select2-hidden-accessible):not([hidden]) {
    min-height: 46px;
}

.cp-input::placeholder {
    color: var(--cp-input-muted) !important;
    font-weight: 400;
    opacity: 1 !important;
}

/* Floating labels reveal the example on focus, without overlapping the title. */
.form-floating > .cp-input::placeholder { color: transparent !important; }
.form-floating > .cp-input:focus::placeholder { color: var(--cp-input-muted) !important; }
.form-floating > select.cp-input:not([multiple]) { padding-block: 1.625rem .625rem !important; }

.cp-input:not(:disabled):not([readonly]):hover {
    border-color: color-mix(in srgb, var(--cp-input-accent) 35%, var(--cp-input-border)) !important;
}

.cp-input:not(:disabled):not([readonly]):focus {
    background-color: var(--cp-input-surface);
    border-color: var(--cp-input-accent) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cp-input-accent) 11%, transparent) !important;
    outline: none;
}

.cp-input:not([type='color']):not(.select2-hidden-accessible):is(:disabled, [readonly]) {
    background-color: #f3f5f9;
    color: #778197;
}

.cp-input:disabled { cursor: not-allowed; }
textarea.cp-input { resize: vertical; line-height: 1.7; }

.cp-input.cp-touched:invalid,
.cp-input.input-validation-error,
.cp-input[aria-invalid='true'] {
    border-color: #d93963 !important;
    box-shadow: 0 0 0 3px rgb(217 57 99 / 8%) !important;
}

/* These composite controls own the border around both the icon and the input. */
:is(.wizard-input-wrap, .template-search, .template-sort, .cp-brand-search, .cp-sort-select) > .cp-input:not([type='color']):not(.select2-hidden-accessible) {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    min-height: 42px;
}

:is(.template-search, .template-sort, .cp-brand-search, .cp-sort-select) > .cp-input:not([type='color']):not(.select2-hidden-accessible) {
    min-height: 0;
    height: 100%;
}

:is(.template-search, .template-sort, .cp-brand-search, .cp-sort-select):focus-within {
    border-color: var(--cp-input-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cp-input-accent) 11%, transparent);
}

:is(.wizard-input-wrap, .template-search, .template-sort, .cp-brand-search, .cp-sort-select):has(> .cp-input:is(.input-validation-error, [aria-invalid='true'], .cp-touched:invalid)) {
    border-color: #d93963 !important;
    box-shadow: 0 0 0 3px rgb(217 57 99 / 8%) !important;
}

.cp-control-hint {
    color: var(--cp-input-muted);
    display: block;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.6;
    margin-block-start: 6px;
    overflow-wrap: anywhere;
}

.cp-control-error { color: #c72d56; }
.cp-control-error[hidden] { display: none; }
.cp-current-file-details { min-width: 0; }
.cp-current-file-details code { overflow-wrap: anywhere; word-break: break-word; }

select.cp-input:not([multiple]):not(.select2-hidden-accessible) {
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--cp-select-chevron) !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    background-size: 20px !important;
    cursor: pointer;
    line-height: 1.5;
    padding: .65rem 2.8rem .65rem .85rem !important;
    text-overflow: ellipsis;
}

select.cp-input:dir(rtl):not([multiple]):not(.select2-hidden-accessible) {
    background-position: left 13px center !important;
    padding-inline: .85rem 2.8rem !important;
}

/* Compact filters reserve just enough space for their single CSS chevron. */
:is(.template-sort, .cp-sort-select):has(> select.cp-input) > .material-icons-outlined {
    display: none;
}

:is(.template-sort, .cp-sort-select) > select.cp-input {
    padding: 0 32px 0 8px !important;
    background-position: right 8px center !important;
}

:is(.template-sort, .cp-sort-select) > select.cp-input:dir(rtl) {
    padding: 0 8px 0 32px !important;
    background-position: left 8px center !important;
}

/* Visible listboxes are already open and must not look like collapsed dropdowns. */
select.cp-input:is([multiple], [size]:not([size='0']):not([size='1'])):not(.select2-hidden-accessible) {
    appearance: auto;
    background-image: none !important;
    padding: .6rem !important;
}

select.cp-select-empty { color: var(--cp-input-muted); }
select.cp-input option { color: var(--cp-input-ink); padding: 8px; }
select.cp-input[multiple]:not(.select2-hidden-accessible) { padding: .6rem; }
select.cp-input[multiple] option:checked { background: #ede9fe linear-gradient(#ede9fe, #ede9fe); color: #5b21b6; }

input.cp-input[type='file'] {
    border-style: dashed;
    padding: 7px;
    font-size: .82rem;
    line-height: 1.6;
}

input.cp-input[type='file']::file-selector-button {
    background: color-mix(in srgb, var(--cp-input-accent) 8%, white);
    border: 0;
    border-radius: 7px;
    color: var(--cp-input-accent);
    cursor: pointer;
    font: inherit;
    font-weight: 650;
    margin-inline-end: 12px;
    padding: 7px 12px;
}

/* Select2 uses its bundled semantics and keyboard support, with one visual treatment. */
.cp-select-container { max-width: 100%; min-width: 0; text-align: start; }
.cp-select-container .select2-selection.select2-selection,
.cp-form-body .cp-select-container .select2-selection.select2-selection {
    background: var(--cp-input-surface);
    border: 1px solid var(--cp-input-border);
    border-radius: var(--cp-input-radius);
    color: var(--cp-input-ink);
    min-height: 46px;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.cp-select-container .select2-selection--single {
    display: flex;
    align-items: center;
    height: 46px;
}

.cp-select-container .select2-selection--single .select2-selection__rendered {
    color: var(--cp-input-ink);
    line-height: 1.5;
    padding-inline: 14px 44px;
    width: 100%;
}

.cp-select-container .select2-selection__placeholder { color: var(--cp-input-muted); }
.cp-select-container .select2-selection--single .select2-selection__arrow {
    background: var(--cp-select-chevron) center / 20px no-repeat;
    height: 100%;
    inset-block-start: 0;
    inset-inline-end: 12px;
    width: 20px;
    transition: transform .16s ease;
}

.cp-select-container .select2-selection__arrow b { display: none; }
.cp-select-container[dir='rtl'] .select2-selection__arrow { left: 12px; right: auto; }
.cp-select-container.select2-container--open .select2-selection__arrow { transform: rotate(180deg); }

.cp-select-container .select2-selection--multiple {
    position: relative;
    padding: 5px 38px 5px 7px;
    cursor: pointer;
}

.cp-select-container .select2-selection--multiple::after {
    content: '';
    background: var(--cp-select-chevron) center / 20px no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    inset-inline-end: 12px;
    inset-block-start: 13px;
    pointer-events: none;
    transition: transform .16s ease;
}

.cp-select-container[dir='rtl'] .select2-selection--multiple { padding: 5px 7px 5px 38px; }
.cp-select-container.select2-container--open .select2-selection--multiple::after { transform: rotate(180deg); }
.cp-select-container .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0;
    width: 100%;
}

.cp-select-container .select2-selection--multiple .select2-selection__choice {
    background: color-mix(in srgb, var(--cp-input-accent) 8%, white);
    border: 1px solid color-mix(in srgb, var(--cp-input-accent) 18%, white);
    border-radius: 7px;
    color: var(--cp-input-accent);
    font-size: .8rem;
    line-height: 1.5;
    margin: 0;
    max-width: 100%;
    padding: 5px 9px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.cp-select-container .select2-selection__choice__remove {
    color: var(--cp-input-accent) !important;
    font-size: 1rem;
    margin-inline: 0 7px;
    min-width: 18px;
    text-align: center;
}

.cp-select-container .select2-search--inline { flex: 1 1 20px; min-width: 0; }
.cp-select-container .select2-search--inline .select2-search__field {
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--cp-input-ink);
    font: inherit;
    height: 32px;
    margin: 0;
    max-width: 100%;
    min-height: 32px;
    padding: 4px 6px;
    outline: none;
}

.cp-select-container .select2-selection:hover { border-color: #bfb0da; }
.cp-select-container.select2-container--focus .select2-selection,
.cp-select-container.select2-container--open .select2-selection,
.cp-select-container .select2-selection:focus {
    border-color: var(--cp-input-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cp-input-accent) 11%, transparent);
    outline: none;
}

.cp-select-container .select2-selection:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--cp-input-accent) 45%, transparent);
    outline-offset: 2px;
}

.cp-input.cp-touched:invalid + .cp-select-container .select2-selection,
.cp-input.input-validation-error + .cp-select-container .select2-selection {
    border-color: #d93963;
}

.cp-select-container.select2-container--disabled .select2-selection { background: #f3f5f9; cursor: not-allowed; opacity: .75; }
.cp-select-dropdown.select2-dropdown {
    background: var(--cp-input-surface);
    border: 1px solid var(--cp-input-border);
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgb(36 26 67 / 14%);
    margin-block: 6px;
    overflow: hidden;
    padding: 6px;
}

.cp-select-dropdown .select2-search--dropdown { padding: 5px 5px 9px; }
.cp-select-dropdown .select2-search__field {
    background: #f8f9fc;
    border: 1px solid var(--cp-input-border) !important;
    border-radius: 8px;
    color: var(--cp-input-ink);
    font: inherit;
    min-height: 40px;
    outline: none;
    padding: 8px 12px;
}

.cp-select-dropdown .select2-search__field:focus { border-color: var(--cp-input-accent) !important; }
.cp-select-dropdown .select2-results__option {
    border-radius: 7px;
    color: var(--cp-input-ink);
    font-size: .88rem;
    line-height: 1.5;
    margin-block: 2px;
    padding: 10px 12px;
}

.cp-select-dropdown .select2-results__option[aria-selected='true'] {
    background: color-mix(in srgb, var(--cp-input-accent) 8%, white);
    color: var(--cp-input-accent);
    font-weight: 650;
}

.cp-select-dropdown .select2-results__option--highlighted[aria-selected] {
    background: var(--cp-input-accent);
    color: #fff;
}

.cp-select-dropdown .select2-results__option[aria-disabled='true'] { color: #9ba3b3; }
.cp-select-dropdown .select2-results__options { max-height: 264px; scrollbar-width: thin; }

@media (prefers-reduced-motion: reduce) {
    .cp-input, .cp-select-container .select2-selection, .cp-select-container .select2-selection__arrow,
    .cp-select-container .select2-selection--multiple::after { transition: none !important; }
}