/**
 * Custom dropdown panels (replaces native <select> open UI site-wide).
 * Used by hero search (.hero-dd) and progressive enhancement (.ui-dd).
 */
.hero-dd,
.ui-dd {
  position: relative;
  width: 100%;
  z-index: 1;
}
.hero-dd.hero-dd--open,
.ui-dd.ui-dd--open {
  z-index: 30;
}

.hero-dd__btn,
.ui-dd__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  min-height: 46px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-primary);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.hero-dd__btn:hover,
.ui-dd__btn:hover {
  border-color: var(--border-accent);
  background: #fff;
}
.hero-dd__btn:focus,
.ui-dd__btn:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-15), inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.hero-dd--open .hero-dd__btn,
.ui-dd--open .ui-dd__btn {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-15), inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.hero-dd__value,
.ui-dd__value {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-dd__chev,
.ui-dd__chev {
  flex-shrink: 0;
  display: flex;
  color: var(--accent);
  transition: transform 0.2s ease;
}
.hero-dd--open .hero-dd__chev,
.ui-dd--open .ui-dd__chev {
  transform: rotate(180deg);
}

.hero-dd__menu,
.ui-dd__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 252, 255, 0.98) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 102, 255, 0.18);
  border-radius: var(--radius-md);
  box-shadow:
    0 16px 48px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 4px 20px var(--accent-15);
  max-height: min(52vh, 320px);
  overflow-y: auto;
  z-index: 40;
}
.hero-dd__menu[hidden],
.ui-dd__menu[hidden] {
  display: none !important;
}

.hero-dd__opt,
.ui-dd__opt {
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  border-inline-start: 3px solid transparent;
  margin: 2px 8px;
  border-radius: var(--radius-sm);
}
.hero-dd__opt:hover,
.hero-dd__opt:focus,
.ui-dd__opt:hover,
.ui-dd__opt:focus {
  outline: none;
  background: linear-gradient(90deg, var(--accent-15), rgba(0, 184, 196, 0.08));
  color: var(--accent);
  border-inline-start-color: var(--accent);
}
.hero-dd__opt.is-selected,
.ui-dd__opt.is-selected {
  font-weight: 600;
  background: linear-gradient(90deg, rgba(0, 102, 255, 0.12), rgba(0, 184, 196, 0.1));
  color: var(--accent);
  border-inline-start-color: var(--cyan);
}
.hero-dd__opt.is-muted,
.ui-dd__opt.is-muted {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  cursor: default;
  pointer-events: none;
  background: transparent;
  border-inline-start-color: transparent;
  padding-top: 14px;
  padding-bottom: 4px;
}
.hero-dd__menu::-webkit-scrollbar,
.ui-dd__menu::-webkit-scrollbar {
  width: 6px;
}
.hero-dd__menu::-webkit-scrollbar-thumb,
.ui-dd__menu::-webkit-scrollbar-thumb {
  background: var(--accent-20);
  border-radius: 3px;
}

/* Visually hidden native select (kept for JS / form edge cases) */
select.ui-dd-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Catalog / property search toolbar */
.prop-search-field .ui-dd__btn,
.admin-table .ui-dd__btn {
  min-height: 44px;
  font-size: 0.86rem;
}
.admin-table .ui-dd {
  min-width: 120px;
}

/* Hide Bulma's native chevron when select is replaced by .ui-dd */
.enhance-dd .select:has(.ui-dd)::after,
.admin-shell .select:has(.ui-dd)::after {
  display: none !important;
  border: none !important;
}

/* Modal / card contexts — slightly tighter */
.modal-card-body .ui-dd__btn,
.card .ui-dd__btn {
  background: var(--bg-card);
}