/* COPY of moumeants-prototype/css/premium-select.css (Oct 27). Keep both in sync. */
/* Premium dropdowns + on/off switches (js/premium-select.js). Same look as the
   Collections event picker: cream card on computers, bottom sheet on phones, ✓. */
mm-select, mm-text, mm-track, mm-knob { display: block; }
mm-select.ps { position: relative; display: block !important; width: 100%; min-width: 0; letter-spacing: 0; text-transform: none; }
/* The real select stays in place (keeping its own look, which the button copies)
   but is invisible and cannot be touched. */
select.ps__native {
  position: absolute !important; top: 0; left: 0; margin: 0 !important;
  opacity: 0 !important; pointer-events: none !important; clip-path: inset(50%);
}

mm-select > button.ps__button {
  display: flex !important; align-items: center; justify-content: space-between; gap: 10px;
  width: 100% !important; max-width: none !important; margin: 0 !important; box-shadow: none; text-align: left; cursor: pointer;
  letter-spacing: 0; text-transform: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ps__button:hover:not(:disabled) { border-color: var(--ink, #17110d) !important; }
.ps__button:focus-visible { outline: 2px solid var(--ink, #17110d); outline-offset: 2px; }
.ps__button[aria-expanded="true"] { border-color: var(--ink, #17110d) !important; }
.ps__button:disabled { cursor: default; opacity: .55; }
.ps__button svg { flex: 0 0 auto; opacity: .7; transition: transform .2s ease; }
.ps__button[aria-expanded="true"] svg { transform: rotate(180deg); }
.ps__value { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps__value.is-placeholder { color: var(--muted, #776d64); }

/* The list */
.ps-menu {
  position: fixed; z-index: 1000; overflow: auto; overscroll-behavior: contain;
  display: grid; gap: 2px; align-content: start; padding: 6px;
  border: 1px solid var(--line, rgba(42,31,22,.14)); border-radius: 12px;
  background: #fffdf9; color: var(--ink, #17110d);
  box-shadow: 0 22px 54px rgba(28, 22, 16, .18);
  font: 400 15px/1.35 var(--sans, "Helvetica Neue", Helvetica, Arial, sans-serif);
  letter-spacing: 0; text-transform: none;
  animation: ps-in .16s ease-out;
}
.ps-menu__title { margin: 2px 10px 8px; color: var(--muted, #776d64); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.ps-menu__group { margin: 8px 10px 2px; color: var(--muted, #776d64); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.ps-menu__option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ps-menu__option:hover, .ps-menu__option:focus-visible { background: #f3ece2; outline: none; }
.ps-menu__option[aria-selected="true"] { background: #efe6da; }
.ps-menu__option:disabled { opacity: .45; cursor: default; }
.ps-menu__option span { min-width: 0; overflow-wrap: anywhere; }
.ps-menu__option i { flex: 0 0 auto; width: 16px; font-style: normal; text-align: center; }

/* Phones: bottom sheet */
.ps-menu--sheet {
  left: 0; right: 0; bottom: 0; top: auto; max-height: 72vh;
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
  border-radius: 20px 20px 0 0; border-bottom: 0;
  box-shadow: 0 -20px 60px rgba(28, 22, 16, .25);
  font-size: 16px;
  animation: ps-up .26s cubic-bezier(.2,.7,.2,1);
}
.ps-menu--sheet::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 4px; background: #d8cfc3; }
.ps-menu--sheet .ps-menu__option { min-height: 52px; }
body[data-ps-sheet="open"]::after { content: ""; position: fixed; inset: 0; z-index: 999; background: rgba(23, 17, 13, .35); }
.ps-menu--still { animation: none; }

/* Invitations: the list uses the Collection's colours (set by the script). */
.ps-menu--themed { background: var(--ps-bg); color: var(--ps-fg); border-color: var(--ps-line); }
.ps-menu--themed .ps-menu__title, .ps-menu--themed .ps-menu__group { color: var(--ps-muted); }
.ps-menu--themed .ps-menu__option:hover, .ps-menu--themed .ps-menu__option:focus-visible { background: var(--ps-hover); }
.ps-menu--themed .ps-menu__option[aria-selected="true"] { background: var(--ps-on); }
.ps-menu--themed.ps-menu--sheet::before { background: var(--ps-line); }
@keyframes ps-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ps-in { from { transform: translateY(-4px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ps-menu { animation: none; } }

/* On/off switch (selects with Enabled/Disabled = true/false) */
mm-select.ps--toggle { width: auto !important; display: inline-block !important; justify-self: start; }
button.ps-switch {
  display: inline-flex !important; align-items: center; gap: 10px; min-height: 44px; width: auto !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--ink, #17110d); cursor: pointer;
  font: 400 15px/1.3 var(--sans, "Helvetica Neue", Helvetica, Arial, sans-serif);
  letter-spacing: 0; text-transform: none; -webkit-tap-highlight-color: transparent;
}
.ps-switch:disabled { cursor: default; opacity: .5; }
.ps-switch:focus-visible { outline: 2px solid var(--ink, #17110d); outline-offset: 3px; border-radius: 999px; }
.ps-switch__track {
  display: block; position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px;
  background: #d9d1c6; transition: background-color .2s ease;
}
.ps-switch__knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fffdf9; box-shadow: 0 1px 3px rgba(23,17,13,.25); transition: transform .2s ease;
}
.ps-switch[aria-checked="true"] .ps-switch__track { background: var(--ink, #17110d); }
.ps-switch[aria-checked="true"] .ps-switch__knob { transform: translateX(18px); }
.ps-switch__text { color: var(--muted, #776d64); }
.ps-switch[aria-checked="true"] .ps-switch__text { color: var(--ink, #17110d); }
@media (prefers-reduced-motion: reduce) { .ps-switch__track, .ps-switch__knob { transition: none; } }