/* The booking request form's suggestion list (public/assets/booking-combo.js): a
   paper card in the selector family's radius under an ink ring, rows the height
   of the form's controls, the brand tone and ring on the row under the pointer
   or the arrows, and the selector family's selected fill on the place already
   chosen. On phones near the bottom of the screen the same list is a bottom
   sheet. Without the script the field is a plain text input with the
   browser's suggestions. */
.bk-combo { position: relative; display: block; min-width: 0; }
.bk-combo > input { display: block; width: 100%; }
.bk-combo.is-on > input { padding-right: 44px; }
.bk-combo-chev { display: none; }
.bk-combo.is-on > .bk-combo-chev {
  position: absolute; top: 50%; right: 14px; display: block; margin-top: -10px; pointer-events: none;
  color: var(--xs-ink-2, var(--tud-color-text-secondary)); transition: transform 160ms ease;
}
.bk-combo.is-on > input[aria-expanded="true"] ~ .bk-combo-chev { transform: rotate(180deg); }

.bk-combo-panel {
  position: absolute; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; padding: 6px;
  border-radius: calc(var(--xs-r, 12px) + 4px);
  color: var(--xs-ink, var(--ls-ink, var(--tud-color-text-primary)));
  background: var(--xs-bg, var(--ls-paper, var(--tud-color-bg-surface)));
  box-shadow: 0 0 0 1.5px var(--ls-ink, var(--tud-color-text-primary)), 0 18px 36px -18px rgba(20, 20, 18, .42);
  font-family: var(--tud-font-primary);
  animation: bk-combo-in 160ms cubic-bezier(.2, .8, .3, 1);
}
.bk-combo-panel[hidden] { display: none; }
.bk-combo-panel.is-up { animation-name: bk-combo-up; }
@keyframes bk-combo-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes bk-combo-up { from { opacity: 0; transform: translateY(4px); } }

.bk-combo-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none;
  scrollbar-width: thin; scrollbar-color: var(--xs-ring, var(--tud-color-border-strong)) transparent; }
.bk-combo-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 12px 0 14px;
  border-radius: var(--xs-r, 12px); font-size: 16px; font-weight: 600; line-height: 1.3; cursor: pointer;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.bk-combo-opt + .bk-combo-opt { margin-top: 2px; }
.bk-combo-opt.is-active { background: var(--xs-hover-bg, var(--tud-color-accent-tint)); box-shadow: inset 0 0 0 2px var(--xs-hover-ring, var(--tud-color-accent-base)); }
.bk-combo-opt[aria-selected="true"] { color: var(--xs-on-ink, var(--tud-color-text-inverse)); background: var(--xs-on-bg, var(--tud-color-text-primary)); box-shadow: inset 0 0 0 2px var(--xs-on-bg, var(--tud-color-text-primary)); font-weight: 700; }
.bk-combo-opt[aria-selected="true"].is-active { box-shadow: inset 0 0 0 2px var(--xs-on-bg), 0 0 0 2px var(--xs-bg, #fff), 0 0 0 4px var(--xs-ink, #141412); }
.bk-combo-opt--other { color: var(--xs-ink-2, var(--tud-color-text-secondary)); }
.bk-combo-tick { flex: none; opacity: 0; }
.bk-combo-opt[aria-selected="true"] .bk-combo-tick { opacity: 1; }

/* the sheet's head and its own search line show only as a sheet */
.bk-combo-sheet-head { display: none; }

@media (max-width: 640px) {
  .bk-combo-panel.is-sheet {
    position: fixed; left: 0; right: 0; width: auto; padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0; box-shadow: 0 0 0 1.5px var(--ls-ink, var(--tud-color-text-primary)), 0 -18px 40px -20px rgba(20, 20, 18, .5);
    animation: bk-combo-sheet 220ms cubic-bezier(.2, .8, .3, 1);
  }
  .bk-combo-panel.is-sheet .bk-combo-sheet-head {
    display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 4px 8px; padding: 6px 0 10px;
  }
  .bk-combo-panel.is-sheet .bk-combo-sheet-head::before {
    content: ""; grid-column: 1 / -1; justify-self: center; width: 40px; height: 4px; margin-bottom: 4px; border-radius: 4px; background: var(--xs-ring, var(--tud-color-border-strong));
  }
  .bk-combo-sheet-title { margin: 0; padding-left: 4px; font-size: 17px; font-weight: 800; }
  .bk-combo-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--xs-r, 12px); color: inherit; background: none; cursor: pointer; }
  .bk-combo-close:focus-visible { outline: 3px solid var(--ls-ink, currentColor); outline-offset: 2px; }
  .bk-combo-search {
    grid-column: 1 / -1; box-sizing: border-box; width: 100%; min-height: var(--xs-h, 52px); padding: 12px 14px; border: 0;
    border-radius: var(--xs-r, 12px); color: var(--xs-ink); background: var(--xs-bg); box-shadow: inset 0 0 0 2px var(--xs-hover-ring, currentColor);
    font: 600 16px/1.4 var(--tud-font-primary);
  }
  .bk-combo-search:focus-visible { outline: 3px solid var(--ls-ink, currentColor); outline-offset: 2px; }
  .bk-combo-panel.is-sheet .bk-combo-opt { min-height: 52px; }
  @keyframes bk-combo-sheet { from { transform: translateY(100%); } }
  .bk-combo-scrim { position: fixed; inset: 0; touch-action: none; z-index: 59; background: rgba(20, 20, 18, .5); animation: bk-combo-fade 200ms ease-out; }
  @keyframes bk-combo-fade { from { opacity: 0; } }
}

@media (prefers-reduced-motion: reduce) {
  .bk-combo-panel, .bk-combo-panel.is-sheet, .bk-combo-scrim { animation: none; }
  .bk-combo-chev { transition: none; }
}
@media (forced-colors: active) {
  .bk-combo-panel { border: 1px solid CanvasText; }
  .bk-combo-opt.is-active { outline: 2px solid Highlight; }
  .bk-combo-opt[aria-selected="true"] { forced-color-adjust: none; color: HighlightText; background: Highlight; }
}