/* V1.14.4: inset dropdown chevron and gentle dialog entrances. */
.ticket-options select.ticket-native-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  background-image: linear-gradient(45deg, transparent 50%, #333 50%), linear-gradient(135deg, #333 50%, transparent 50%);
  background-position: right 23px center, right 18px center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
#select-dialog[open], #rider-dialog[open] {
  animation: idwt-dialog-enter 240ms cubic-bezier(.2,.7,.2,1) both;
}
#select-dialog[open]::backdrop, #rider-dialog[open]::backdrop {
  animation: idwt-backdrop-enter 220ms ease-out both;
}
@keyframes idwt-dialog-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes idwt-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #select-dialog[open], #rider-dialog[open],
  #select-dialog[open]::backdrop, #rider-dialog[open]::backdrop { animation: none; }
}
@media (forced-colors: active) {
  .ticket-options select.ticket-native-select { appearance: auto; background-image: none; }
}

/* Keep the modal in the top layer until the exit animation finishes. */
#select-dialog[open].idwt-closing, #rider-dialog[open].idwt-closing, dialog[open].idwt-closing { animation: idwt-dialog-exit 180ms ease-in both !important; pointer-events: none; }
dialog[open].idwt-closing::backdrop { animation: idwt-backdrop-exit 180ms ease-in both !important; }
@keyframes idwt-dialog-exit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(6px); } }
@keyframes idwt-backdrop-exit { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  dialog[open].idwt-closing, dialog[open].idwt-closing::backdrop { animation: none; }
}