/* Shared itinerary/region dropdown. ASK-DESIGN(itinerary-dropdown-panel): the open panel
   follows the approved itineraries filter, since Figma only supplies the closed field. */
.itin-pick { position: relative; min-width: 0; }
.itin-pick__field {
  display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 20px;
  border: 1px solid var(--color-ink); background: transparent; cursor: pointer; list-style: none;
  font: 600 16px/19px var(--font-body); text-transform: uppercase; color: var(--color-ink); text-align: left;
}
.itin-pick__field::-webkit-details-marker { display: none; }
.itin-pick__field:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }
.itin-pick__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itin-pick__chevron {
  flex: none; width: 9px; height: 9px; margin-left: 12px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg);
}
.itin-pick[open] .itin-pick__chevron { transform: translateY(2px) rotate(-135deg); }
.itin-pick__panel {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; max-height: 300px; overflow-y: auto;
  min-width: 0; margin: 0; padding: 6px 0; border: 1px solid #ddd; border-top: 0; background: var(--color-white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12); text-align: left;
}
.itin-pick__group { margin: 0; padding: 8px 20px 2px; font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .1em; color: var(--color-ink-muted); }
.itin-pick__options { margin: 0; padding: 0; list-style: none; }
.itin-pick__option { display: flex; align-items: center; gap: 10px; padding: 7px 20px; cursor: pointer; font-size: 15px; line-height: 22px; color: var(--color-ink); }
.itin-pick__option:hover { background: var(--color-sand); }
.itin-pick__option input { flex: none; margin: 0; accent-color: var(--color-teal); }
.itin-pick__option:has(input:disabled) { color: #aaa; cursor: default; background: none; }
/* Optional search (+pick opts.search): shown only while open (it's in <details>), laid over the field
   so the field itself becomes the search box; the chevron stays clickable to close */
.itin-pick__search { position: absolute; z-index: 1; top: 0; left: 0; right: 45px; height: 100%; margin: 0; padding: 0 20px;
  border: 0; outline: 0; background: var(--color-white); font: 16px/24px var(--font-body); color: var(--color-ink); }
.itin-pick:not([open]) .itin-pick__search { display: none; } /* explicit, not left to each browser's <details> */
.itin-pick__empty { margin: 0; padding: 7px 20px; font-size: 15px; line-height: 22px; color: var(--color-ink-muted); }