/* ═══════════════════════════════════════════════════════════════
   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;
}

/* Scope hover to real pointer devices: on touchscreens :hover "sticks" after a
   tap, leaving the trigger visibly highlighted until you tap elsewhere. */
@media (hover: hover) {
  .custom-select-trigger:hover { border-color: #c4bdac; }
}

/* Open trigger: a clean darker border only — no soft grey glow. The dropped
   panel + rotated chevron already signal the open state. */
.custom-select-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--muted, #6a655a);
  box-shadow: none;
}

/* Keyboard focus stays clearly visible: crisp 1px ring, not a blur. */
.custom-select-trigger:focus-visible {
  outline: none;
  border-color: var(--muted, #6a655a);
  box-shadow: 0 0 0 1px var(--muted, #6a655a);
}

.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.is-active {
  background: var(--panel, #fbfaf6);
}

/* Hover highlight only where a real pointer exists (see note above): keeps a
   tapped option from staying shaded on touch. */
@media (hover: hover) {
  .custom-select-option:hover {
    background: var(--panel, #fbfaf6);
  }
}

/* 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, #6a655a);
  opacity: 0;
}

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

/* ─── Custom select inside form groups (e.g. enquiry Subject) ────
   Full-width field treatment matching the neighbouring inputs, replacing
   the native browser option list with the shared premium panel. */
.form-group .custom-select-wrap { display: block; width: 100%; }
.form-group .custom-select-trigger {
  width: 100%;
  min-width: 0;
  padding: 0.66rem 0.85rem;
  font-size: 0.9rem;
  font-weight: 400;
  border-color: #ded9cd;
  border-radius: 5px;
}
@media (hover: hover) {
  .form-group .custom-select-trigger:hover { border-color: #c4bdac; }
}
.form-group .custom-select-trigger:focus-visible,
.form-group .custom-select-trigger[aria-expanded="true"] {
  border-color: var(--red, #CC2929);
  box-shadow: 0 0 0 1px var(--red, #CC2929);
}
.form-group .custom-select-listbox { left: 0; right: 0; }
.form-group .custom-select-option { white-space: normal; }

/* Unchosen placeholder option ("Select enquiry subject") reads muted, like
   the sibling inputs' placeholder text. */
.custom-select-trigger.is-placeholder .custom-select-trigger-label { color: #9a938a; }

@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%; }
}