/* ═══════════════════════════════════════════════════════════════
   Yee Lim shared dropdown / select UI
   - .custom-select-*  : accessible custom dropdown used for the public
                         product sort and the admin page-size / enquiry
                         status controls (all enhance a native <select>).
   ═══════════════════════════════════════════════════════════════ */

/* ─── Custom accessible select ─────────────────────────────────── */
.custom-select-wrap {
  position: relative;
  display: inline-block;
}

/* Native <select> stays in the DOM as the source of truth but is
   visually hidden once the custom UI takes over. */
.custom-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.custom-select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 170px;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--border, var(--line-2));
  border-radius: var(--radius, 6px);
  background: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  line-height: 1.3;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.custom-select-trigger:hover { border-color: #b3b3b3; }

/* Open / focused trigger uses a neutral active state (no brand red), while
   staying clearly visible for keyboard focus. */
.custom-select-trigger:focus-visible,
.custom-select-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--muted, #6b7480);
  box-shadow: 0 0 0 3px rgba(27, 33, 43, 0.10);
}

.custom-select-chevron {
  flex-shrink: 0;
  color: #666;
  transition: transform 0.18s ease;
}

.custom-select-trigger[aria-expanded="true"] .custom-select-chevron {
  transform: rotate(180deg);
}

.custom-select-listbox {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border, var(--line-2));
  border-radius: var(--radius, 6px);
  box-shadow: var(--shadow-md, 0 8px 24px -8px rgba(16, 24, 40, 0.18));
  z-index: 60;
}

.custom-select-listbox[hidden] { display: none; }

.custom-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.custom-select-option:hover,
.custom-select-option.is-active {
  background: var(--panel, #f4f5f7);
}

/* The current choice is marked by a quiet check only: no brand red and no bold
   on a passive selected state, so the red accent stays reserved for actions.
   The closed trigger already shows the active value as well. */
.custom-select-option[aria-selected="true"] {
  color: var(--text);
}

.custom-select-option-check {
  flex-shrink: 0;
  color: var(--muted, #6b7480);
  opacity: 0;
}

.custom-select-option[aria-selected="true"] .custom-select-option-check {
  opacity: 1;
}

@media (max-width: 480px) {
  .custom-select-trigger { min-width: 0; }
  .custom-select-listbox { left: 0; right: 0; min-width: 0; }

  /* Admin card headers: let the search box and the dropdown each take a
     full row instead of overflowing the card horizontally. */
  .card-header-right { flex-wrap: wrap; width: 100%; }
  .card-header-right .table-search-wrap,
  .card-header-right .table-search { width: 100%; }
}