/* ============================================
   SELECT-DROPDOWN.CSS — themed <select> replacement for public pages
   ============================================
   Shared by /goat (legislation + charge + scenario pickers) and the signup
   stepper (role / team size / referral source). Public pages never load the
   dashboard bundles, so the app's chip dropdown isn't reachable here — this
   is the public equivalent, and the only themed dropdown a public page gets.

   The native <select> stays in the DOM (it holds the value and posts with
   the form) and is hidden; enhancePublicSelect() in
   js/public/select-dropdown.js builds the trigger + panel beside it. That
   indirection is the point: a native dropdown list is drawn by the browser,
   so it can't be styled and long option wordings truncate instead of
   wrapping. Everything below styles real DOM, so it looks the same in every
   browser.

   Pages set their own control scale on .pdd-trigger (see signup.css) — the
   defaults here match the /goat field scale.
   ============================================ */

.pdd {
  position: relative;
}

/* The real <select> — kept for its value, hidden in favour of the trigger */
.pdd-native {
  display: none;
}

.pdd-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  font-size: var(--text-regular);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pdd-trigger:focus-visible {
  outline: none;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.pdd-trigger:disabled {
  background: var(--muted);
  color: var(--muted-foreground-faint);
  cursor: not-allowed;
}

.pdd-trigger:disabled .pdd-chevron {
  color: var(--muted-foreground-faint);
}

/* Nothing chosen yet — read as a placeholder, like an input's */
.pdd-trigger.is-placeholder .pdd-label {
  color: var(--muted-foreground);
}

.pdd-label {
  flex: 1;
  min-width: 0;
}

.pdd-chevron {
  flex-shrink: 0;
  color: var(--muted-foreground-faint);
  font-size: var(--text-small);
}

.pdd-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 320px;
  overflow-y: auto;
}

.pdd-panel.is-open {
  display: block;
}

.pdd-option {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0.5rem 0.875rem;
  color: var(--foreground-soft);
  font-size: var(--text-small);
  font-family: inherit;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}

.pdd-option + .pdd-option {
  border-top: 1px solid var(--border);
}

.pdd-option:hover,
.pdd-option:focus-visible {
  background: var(--accent);
  color: var(--foreground);
  outline: none;
}

.pdd-option.is-selected {
  background: var(--muted);
  color: var(--foreground);
  font-weight: var(--fw-medium);
}