/* Progressive custom single-selects. The native select remains authoritative and is
 * visually clipped rather than removed so browser form validation still works. */
.pfs-admin .pfs-select,
.pfs-fields .pfs-select {
    box-sizing: border-box;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
    max-inline-size: 100%;
    position: relative;
    width: 100%;
}

.pfs-admin .pfs-select__native,
.pfs-fields .pfs-select__native {
    block-size: 1px !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    inline-size: 1px !important;
    margin: -1px !important;
    min-block-size: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    white-space: nowrap !important;
}

.pfs-admin .pfs-select__trigger,
.pfs-fields .pfs-select__trigger {
    align-items: center;
    appearance: none;
    background-color: var(--pfs-field-input-bg, var(--pfs-input-bg, var(--pfs-field-bg, var(--pfs-surface, var(--pfs-bg, #ffffff))))) !important;
    box-sizing: border-box;
    border: var(--pfs-field-input-border-width, var(--pfs-input-border-width, 1px)) solid var(--pfs-field-input-border, var(--pfs-input-border, var(--pfs-field-border, var(--pfs-border-strong, var(--pfs-border, #c3ced8))))) !important;
    border-radius: var(--pfs-field-input-radius, var(--pfs-input-radius, var(--pfs-field-radius, var(--pfs-radius, 8px)))) !important;
    color: var(--pfs-field-input-text, var(--pfs-input-text, var(--pfs-field-text, var(--pfs-text, #202b3a)))) !important;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 8px;
    justify-content: space-between;
    line-height: 1.35;
    margin: 0;
    float: none;
    max-inline-size: 100%;
    min-block-size: 40px;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    padding-block: 8px;
    padding-inline: 10px 34px;
    position: relative;
    text-align: start;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    width: 100%;
}

.pfs-admin .pfs-select__trigger:hover:not(:disabled),
.pfs-fields .pfs-select__trigger:hover:not(:disabled) {
    background-color: var(--pfs-accent-soft, color-mix(in srgb, var(--pfs-accent, #275d82) 8%, #ffffff)) !important;
    border-color: var(--pfs-accent, #275d82) !important;
    color: var(--pfs-accent-deep, var(--pfs-accent, #275d82)) !important;
}

.pfs-admin .pfs-select__trigger:focus,
.pfs-fields .pfs-select__trigger:focus {
    outline: 0;
    box-shadow: none;
}

.pfs-admin .pfs-select__trigger:focus-visible,
.pfs-fields .pfs-select__trigger:focus-visible {
    background-color: var(--pfs-accent-soft, color-mix(in srgb, var(--pfs-accent, #275d82) 12%, #ffffff)) !important;
    border-color: var(--pfs-accent, #275d82) !important;
    color: var(--pfs-accent-deep, var(--pfs-accent, #275d82)) !important;
}

.pfs-admin .pfs-select__trigger::after,
.pfs-fields .pfs-select__trigger::after {
    border-block-end: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    content: "";
    block-size: 7px;
    inline-size: 7px;
    inset-block-start: 50%;
    inset-inline-end: 13px;
    pointer-events: none;
    position: absolute;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 140ms ease;
}

.pfs-admin .pfs-select.is-open .pfs-select__trigger,
.pfs-fields .pfs-select.is-open .pfs-select__trigger {
    background-color: var(--pfs-accent-soft, #e6f0f7) !important;
    border-color: var(--pfs-accent, #275d82) !important;
    color: var(--pfs-accent-deep, var(--pfs-accent, #275d82)) !important;
}

.pfs-admin .pfs-select.is-open .pfs-select__trigger::after,
.pfs-fields .pfs-select.is-open .pfs-select__trigger::after {
    transform: translateY(-15%) rotate(225deg);
}

.pfs-admin .pfs-select__trigger-text,
.pfs-fields .pfs-select__trigger-text {
    display: block;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    text-align: start;
    width: 100%;
}

.pfs-admin .pfs-select__trigger.is-placeholder,
.pfs-fields .pfs-select__trigger.is-placeholder {
    color: var(--pfs-muted, #647487);
}

.pfs-admin .pfs-select.is-invalid .pfs-select__trigger,
.pfs-fields .pfs-select.is-invalid .pfs-select__trigger {
    background-color: var(--pfs-danger-soft, #fff0f1) !important;
    border-color: var(--pfs-danger, #a63d4c) !important;
    color: var(--pfs-danger, #a63d4c) !important;
}

.pfs-admin .pfs-select.is-invalid .pfs-select__trigger:focus-visible,
.pfs-fields .pfs-select.is-invalid .pfs-select__trigger:focus-visible {
    background-color: var(--pfs-accent-soft, #e6f0f7) !important;
    border-color: var(--pfs-accent, #275d82) !important;
    color: var(--pfs-accent-deep, #1c4664) !important;
}

.pfs-admin .pfs-select__trigger:disabled,
.pfs-fields .pfs-select__trigger:disabled,
.pfs-admin .pfs-select.is-disabled .pfs-select__trigger,
.pfs-fields .pfs-select.is-disabled .pfs-select__trigger {
    cursor: not-allowed;
    opacity: 0.6;
}

/* The popup is portalled to body so cards, panels, and overflow containers cannot clip it. */
.pfs-select__popup[data-pfs-select-popup] {
    background: var(--pfs-select-surface, #ffffff);
    border: 1px solid var(--pfs-select-border-strong, var(--pfs-select-border, #c3ced8));
    border-radius: var(--pfs-select-radius, 8px);
    box-sizing: border-box;
    box-shadow: var(--pfs-select-shadow, 0 10px 30px rgba(35, 54, 72, 0.14));
    color: var(--pfs-select-text, #202b3a);
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-inline-size: calc(100vw - 16px);
    min-block-size: 0;
    min-inline-size: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    padding: 5px;
    scrollbar-color: var(--pfs-select-border-strong, #c3ced8) transparent;
    scrollbar-width: thin;
    position: fixed;
    z-index: 10000;
}

.pfs-select__popup[data-pfs-select-popup][hidden] {
    display: none !important;
}

.pfs-select__popup[data-pfs-select-popup]::-webkit-scrollbar {
    inline-size: 8px;
}

.pfs-select__popup[data-pfs-select-popup]::-webkit-scrollbar-thumb {
    background: var(--pfs-select-border-strong, #c3ced8);
    border: 2px solid var(--pfs-select-surface, #ffffff);
    border-radius: 999px;
}

.pfs-select__popup[data-pfs-select-popup]::-webkit-scrollbar-track {
    background: transparent;
}

.pfs-select__group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-inline-size: 0;
}

.pfs-select__group-label {
    color: var(--pfs-select-muted, #647487);
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.25;
    overflow-wrap: anywhere;
    padding-block: 5px 2px;
    padding-inline: 10px;
    text-transform: uppercase;
}

.pfs-select__option {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 8px;
    justify-content: flex-start;
    line-height: 1.35;
    min-block-size: 40px;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    padding-block: 8px;
    padding-inline: 10px 34px;
    position: relative;
    text-align: start;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    width: 100%;
}

.pfs-select__option:hover:not(.is-disabled),
.pfs-select__option.is-active:not(.is-disabled) {
    background: var(--pfs-select-raised, #f7fafc);
    border-color: var(--pfs-select-border, #d8e0e7);
}

.pfs-select__option.is-active:not(.is-selected):not(.is-disabled) {
    background: var(--pfs-select-accent-soft, #e6f0f7);
    border-color: var(--pfs-select-accent, #275d82);
    color: var(--pfs-select-accent-deep, #1c4664);
}

.pfs-select__option.is-selected {
    background: var(--pfs-select-accent-soft, #e6f0f7);
    border-color: var(--pfs-select-accent, #275d82);
    color: var(--pfs-select-accent-deep, #1c4664);
    font-weight: 600;
}

.pfs-select__option.is-selected.is-active:not(.is-disabled) {
    background: var(--pfs-select-accent, #275d82);
    border-color: var(--pfs-select-accent, #275d82);
    color: #ffffff;
}

.pfs-select__option.is-disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.pfs-select__option::after {
    border-block-end: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    block-size: 7px;
    content: "";
    inline-size: 7px;
    inset-block-start: 50%;
    inset-inline-end: 13px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translateY(-65%) rotate(45deg);
}

.pfs-select__option.is-selected::after {
    opacity: 1;
}

.pfs-select__option-text {
    display: block;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    width: 100%;
}

.pfs-select__empty {
    color: var(--pfs-select-muted, #647487);
    min-block-size: 40px;
    padding: 8px 10px;
}

@media (prefers-reduced-motion: reduce) {
    .pfs-admin .pfs-select__trigger,
    .pfs-fields .pfs-select__trigger,
    .pfs-select__popup[data-pfs-select-popup],
    .pfs-select__option {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
    }
}

/* Keep the label separate from the single selector border, even in opinionated themes. */
.pfs-fields .pfs-field--select > .pfs-field__label {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-block: 0 8px;
    margin-inline: 0;
    text-align: start;
}
.pfs-fields .pfs-field--select > .pfs-select,
.pfs-fields .pfs-field--select > .pfs-select > .pfs-select__trigger {
    float: none !important;
    margin: 0 !important;
    margin-inline: 0 !important;
    inset-inline: auto !important;
    transform: none;
}

.pfs-fields .pfs-group--standalone .pfs-select__trigger {
    min-block-size: 44px;
    border-radius: var(--pfs-field-input-radius, var(--pfs-input-radius, var(--pfs-field-radius, var(--pfs-radius, 6px))));
    padding-inline: 14px 38px;
}
.pfs-admin .pfs-canvas__toolbar { flex-wrap: wrap; }