/* InsFollowTR V22 — clean quick-order card + clearer interaction */
.v22-quick-select .v8-select-trigger{
  position:relative;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.v22-quick-select:not(.is-disabled) .v8-select-trigger:hover{
  transform:translateY(-1px);
  border-color:rgba(105,82,229,.34);
  background:linear-gradient(180deg,#fff,#fcfbff);
  box-shadow:0 9px 22px rgba(57,45,121,.075),inset 0 1px 0 #fff;
}
.v22-quick-select:not(.is-disabled) .v8-select-trigger:focus-visible{
  outline:none;
  border-color:#755fe3;
  box-shadow:0 0 0 4px rgba(111,88,228,.11),0 9px 22px rgba(57,45,121,.075);
}
.v22-quick-select.is-disabled .v8-select-trigger{
  cursor:not-allowed;
  opacity:.72;
}
.v22-select-cue{
  position:relative;
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:#f4f1ff;
  border:1px solid rgba(103,80,214,.13);
  color:#654fd5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.v22-select-cue .v8-select-chevron{
  width:27px;height:27px;border-radius:8px;
  display:grid;place-items:center;
  background:#fff;
  color:#6250c5;
  box-shadow:0 3px 9px rgba(66,49,147,.055);
  transition:transform .18s ease,color .18s ease,background .18s ease;
}
.v22-cue-ring{
  position:absolute;
  inset:-4px;
  border:1px solid transparent;
  border-radius:14px;
  pointer-events:none;
}
.v22-quick-select:not(.is-disabled) .v8-select-trigger:hover .v22-select-cue{
  transform:translateX(1px);
  background:#ece7ff;
  border-color:rgba(103,80,214,.25);
  box-shadow:0 6px 15px rgba(82,63,176,.10),inset 0 1px 0 #fff;
}
.v22-quick-select:not(.is-disabled) .v8-select-trigger:hover .v22-select-cue .v8-select-chevron{
  color:#fff;
  background:#6b53dc;
  transform:translateY(1px);
}
.v22-quick-select.is-open .v22-select-cue .v8-select-chevron{
  transform:rotate(180deg);
  color:#fff;
  background:#6b53dc;
}
.v22-quick-select.is-open .v8-select-trigger{
  border-color:rgba(105,82,229,.52);
  box-shadow:0 0 0 4px rgba(111,88,228,.085),0 10px 24px rgba(57,45,121,.08);
}

/* One restrained visual hint on the first empty field; no text badge. */
.v22-quick-select.is-first-step:not(.has-value):not(.was-interacted) .v22-cue-ring{
  animation:v22CuePulse 1.8s ease-in-out 1s 3;
}
@keyframes v22CuePulse{
  0%,100%{border-color:transparent;transform:scale(.96);opacity:0}
  45%{border-color:rgba(105,82,229,.28);transform:scale(1.07);opacity:1}
  70%{border-color:rgba(105,82,229,.08);transform:scale(1.13);opacity:.35}
}

/* Disabled dependent steps read as dependent without looking broken. */
.v22-quick-select.is-disabled .v22-select-cue{filter:grayscale(.2);opacity:.48}
.v22-quick-select.is-disabled .v8-select-trigger{background:#fafafd}

/* Give dropdown rows a little more obvious hover feedback. */
.v8-select-portal .v8-select-option:not(.is-disabled):hover{
  box-shadow:inset 0 0 0 1px rgba(105,82,229,.08);
}

/* Float hero ornaments a little farther from the quick-order card on desktop. */
@media(min-width:1081px){
  .v8-public .so-0{left:-24px}
  .v8-public .so-1{right:-30px}
  .v8-public .so-2{left:-14px}
  .v8-public .so-3{right:-18px}
  .v8-public .so-4{top:-18px}
  .v8-public .so-5{bottom:-18px}
  .v8-public .chip-orders{left:-48px}
  .v8-public .chip-status{right:-48px}
}

.i18n-rtl .v22-quick-select:not(.is-disabled) .v8-select-trigger:hover .v22-select-cue{transform:translateX(-1px)}
@media(prefers-reduced-motion:reduce){
  .v22-quick-select.is-first-step:not(.has-value):not(.was-interacted) .v22-cue-ring{animation:none}
}