/* One menu palette across the customer app, console and venue portal. */
:root {
  --select-bg: var(--p1, var(--v-s1, var(--bg-card-solid)));
  --select-text: var(--t1, var(--v-head, var(--text-primary)));
  --select-line: var(--ln2, var(--v-bd2, var(--border)));
  --select-accent: var(--ac, var(--v-gold, var(--accent)));
}
select option, select optgroup {
  background: var(--select-bg);
  color: var(--select-text);
}
@supports (appearance: base-select) {
  select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
    appearance: base-select !important;
    align-items: center;
  }
  select::picker(select) {
    appearance: base-select;
    background: var(--select-bg);
    color: var(--select-text);
    border: 1px solid var(--select-line);
    border-radius: 12px;
    padding: 6px;
    margin-block: 6px;
    max-height: min(360px, 50dvh);
    max-width: calc(100vw - 16px);
    overflow: auto;
    overscroll-behavior: contain;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--select-bg) 70%, transparent);
  }
  select option {
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 7px;
    font: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  select option:checked, select option:hover, select option:focus {
    background: color-mix(in srgb, var(--select-accent) 15%, var(--select-bg));
  }
  select option:disabled { opacity: .45; }
  select option::checkmark { color: var(--select-accent); }
  .uks-venue select::picker-icon { display: none; }
}
/* The fallback uses the original select as the form control and trigger. */
.uk-select-menu {
  position: fixed;
  inset: auto;
  z-index: 2147483647;
  box-sizing: border-box;
  margin: 0;
  padding: 6px;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--select-bg);
  color: var(--select-text);
  border: 1px solid var(--select-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--select-bg) 70%, transparent);
  font: 500 14px/1.4 Inter, 'Noto Sans Thai', system-ui, sans-serif;
}
.uk-select-menu:focus { outline: 2px solid var(--select-accent); outline-offset: 2px; }
.uk-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 7px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.uk-select-option::before { content: ''; flex: 0 0 14px; }
.uk-select-option[aria-selected="true"]::before { content: '✓'; color: var(--select-accent); }
.uk-select-option[aria-selected="true"], .uk-select-option.cursor,
.uk-select-option:not([aria-disabled="true"]):hover {
  background: color-mix(in srgb, var(--select-accent) 15%, var(--select-bg));
}
.uk-select-option[aria-disabled="true"] { opacity: .45; cursor: default; }
.uk-select-group { padding: 10px 12px 4px; font-weight: 700; }