/*
  Custom Select (camper side)
  Path: css/custom-select.css

  A styled replacement for native <select> dropdowns, used wherever
  option text is long enough to overflow a native OS picker on mobile
  (Pickup point, Drop off point, Campus, T-shirt size on the
  registration flow). Renders its own HTML menu instead of the native
  one, so long option labels wrap naturally instead of clipping or
  forcing horizontal scroll.

  This is a deliberate, separate copy of the identical component
  already built for the admin panel (css/admin-table.css) — camper
  pages don't load any admin CSS, so this file exists so the same
  visual language and interaction model can be reused without a
  cross-cutting shared-file dependency between the two halves of the
  product.

  Load after theme.css (uses --color-* tokens) and after register.css /
  register-v2.css if present, since register-v2.css defines the shared
  motion tokens (--ease-signature, --ease-snap, --dur-*) this file
  reuses. If loaded on a page without register-v2.css, the tokens are
  redefined below so this file never depends on load order.
*/

:root {
  --ease-signature: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant: 150ms;
  --dur-quick: 280ms;
}

.custom-select {
  position: relative;
  min-width: 100px;
}

.custom-select select {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-quick) var(--ease-signature),
              box-shadow var(--dur-quick) var(--ease-signature);
}

.custom-select-trigger span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.custom-select-trigger:hover { border-color: var(--color-accent); }

.custom-select.is-open .custom-select-trigger {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(217, 84, 31, 0.15);
}

.custom-select-trigger .placeholder { color: var(--color-text-muted); }

.custom-select-trigger svg {
  flex-shrink: 0;
  transition: transform var(--dur-quick) var(--ease-signature);
  color: var(--color-text-muted);
}

.custom-select.is-open .custom-select-trigger svg { transform: rotate(180deg); }

.custom-select-menu {
  position: fixed;
  min-width: 160px;
  max-height: 260px;
  overflow-y: auto;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 6px;
  z-index: 300;
  display: none;
  flex-direction: column;
  gap: 1px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-text-muted) 40%, transparent) transparent;
}

.custom-select-menu::-webkit-scrollbar { width: 5px; }
.custom-select-menu::-webkit-scrollbar-track { background: transparent; margin-block: 6px; }
.custom-select-menu::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--color-text-muted) 35%, transparent);
  border-radius: 999px;
}

.custom-select-menu.is-open {
  display: flex;
  animation: cs-menu-in var(--dur-quick) var(--ease-snap) both;
}

@keyframes cs-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.custom-select-menu.opens-upward.is-open {
  animation: cs-menu-in-up var(--dur-quick) var(--ease-snap) both;
}

@keyframes cs-menu-in-up {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* The core overflow fix: option text wraps across lines instead of
   truncating or forcing the menu wider than the viewport. */
.custom-select-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.4;
  cursor: pointer;
  transition: background-color var(--dur-instant) ease;
}

.custom-select-option span {
  white-space: normal;
  overflow-wrap: break-word;
}

.custom-select-option:hover { background-color: var(--color-surface-raised); }

.custom-select-option.is-selected { color: var(--color-accent); font-weight: 600; }

.custom-select-option .check-icon {
  opacity: 0;
  flex-shrink: 0;
  margin-top: 2px;
}
.custom-select-option.is-selected .check-icon { opacity: 1; }

.custom-select-scrim {
  position: fixed;
  inset: 0;
  z-index: 290;
  display: none;
}
.custom-select-scrim.is-open { display: block; }

@media (prefers-reduced-motion: reduce) {
  .custom-select-menu.is-open,
  .custom-select-menu.opens-upward.is-open { animation: none; }
}