.customer-picker {
    position: relative;
    z-index: 10;
    display: grid;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 1rem;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 46px rgba(27,62,113,.18);
    backdrop-filter: blur(14px);
}

.customer-picker > header { display: flex; align-items: flex-start; justify-content: space-between; }
.customer-picker header small { color: #6682ac; font-size: .59rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.customer-picker h2 { margin: .12rem 0 0; font-size: 1rem; }
.customer-picker > header button { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: .55rem; background: #eaf1fc; color: #3e6194; font-size: 1.05rem; }
.customer-picker > label { display: flex; align-items: center; gap: .6rem; padding: 0 .8rem; border: 1px solid #cddbef; border-radius: .72rem; background: #fff; }
.customer-picker > label > span { color: #5879aa; }
.customer-picker input { min-width: 0; flex: 1; height: 2.7rem; border: 0; outline: 0; background: transparent; font: inherit; font-size: .8rem; }
.customer-results { display: grid; grid-template-columns: repeat(auto-fit,minmax(13rem,1fr)); gap: .45rem; max-height: 14rem; overflow: auto; }
.customer-option { display: grid; grid-template-columns: 2rem minmax(0,1fr) auto; align-items: center; gap: .6rem; padding: .55rem; border: 1px solid #dce5f1; border-radius: .65rem; background: #fff; color: #243a5d; text-align: left; cursor: pointer; }
.customer-option:hover, .customer-option.selected { border-color: #8eafe0; background: #eef5ff; }
.customer-option > span:nth-child(2) { min-width: 0; }
.customer-option strong, .customer-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-option strong { font-size: .72rem; }
.customer-option small { margin-top: .1rem; color: #7b879a; font-size: .59rem; }
.customer-option > b { color: #3771be; }
.customer-initial { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; background: #e4efff; color: #3867b0; font-size: .68rem; font-weight: 900; }

@media (max-width: 600px) {
    .customer-results { grid-template-columns: 1fr; }
}