/* One visual and interaction system for Service and Trade-in suggestions. */
.model-picker{position:relative;min-width:0}
.model-input-wrap{position:relative}
.model-input-wrap input,.service-simple .service-fields .model-input-wrap input{width:100%;padding-right:60px}
.model-toggle{position:absolute;right:4px;top:4px;bottom:4px;width:48px;min-height:44px;display:flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:transparent;color:var(--fg);cursor:pointer}
.model-toggle:hover,.model-toggle[aria-expanded=true]{background:var(--accent-soft);color:var(--accent)}
.model-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.model-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.model-popup{position:absolute;z-index:25;top:calc(100% + 8px);left:0;right:0;border:1px solid var(--border-strong);border-radius:14px;background:var(--surface);color:var(--fg);box-shadow:0 14px 30px #12203b20;overflow:hidden}
.model-popup[hidden],.model-popup [hidden]{display:none!important}
.model-list{max-height:min(280px,40vh);overflow-y:auto;overscroll-behavior:contain;padding:6px;scroll-padding:6px;scrollbar-width:thin;scrollbar-color:var(--border-strong) var(--surface)}
.model-list:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.model-option{display:flex;align-items:center;min-height:48px;padding:10px 12px;border-radius:8px;font-size:1rem;line-height:1.4;overflow-wrap:anywhere;cursor:pointer}
.model-option:hover,.model-option[aria-selected=true]{background:var(--accent-soft);color:var(--accent)}
.model-option[aria-selected=true]{box-shadow:inset 3px 0 var(--accent)}
.model-empty{padding:16px;margin:0;font-size:.9375rem;line-height:1.5;color:var(--muted)}
/* Short landscape screens and Trade-in need room below the suggestions too. */
@media(max-width:700px),(max-height:500px){
  .model-popup{position:relative;top:auto;margin-top:8px;box-shadow:0 6px 18px #12203b0c}
  .model-list{max-height:min(240px,32vh);max-height:min(240px,32dvh)}
}