/* ============================================================
   fp-select - DARK GLASS skin (Digital Products buyer surfaces)
   ------------------------------------------------------------
   The closed <select> on these pages was already dark, but the
   OPEN list is drawn by the operating system: `option{background}`
   is ignored by Chrome and Safari on macOS and Windows, so every
   filter popped a light, classic OS menu on a near-black page.
   That is not stylable - the only fix is to stop using the native
   popup, which is what fp-select.js does (it hides the <select>,
   keeps driving it, and paints its own listbox).

   Scoped to body.dpx-night. The light explore.html skin lives in
   explore-sdx.css under `body.fp-ed .sdx`, and my-orders carries
   no `.sdx`, so the two can never collide. Structure is duplicated
   on purpose: sharing it would mean editing the live explore page,
   which is not what was asked for here.
   ============================================================ */

body.dpx-night select.fp-native-hidden { display: none !important; }

body.dpx-night .fp-fdrop-wrap { position: relative; display: inline-flex; }

/* ---- the closed control: matches .dpx-ord-sel so the bar stays even ---- */
body.dpx-night .fp-fdrop {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 44px; padding: 0 12px 0 13px; max-width: 220px;
  border: 1px solid var(--dpx-line); border-radius: var(--dpx-r4, 12px);
  background: rgba(255, 255, 255, 0.045);
  color: var(--dpx-text); font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
body.dpx-night .fp-fdrop-lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dpx-night .fp-fdrop:hover { background: rgba(255, 255, 255, 0.075); border-color: rgba(255, 255, 255, 0.2); }
body.dpx-night .fp-fdrop:focus-visible,
body.dpx-night .fp-fdrop.is-open {
  outline: none; border-color: rgba(139, 92, 246, 0.55);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16);
}
/* a filter that is actually applied has to look different from an idle one */
body.dpx-night .fp-fdrop.is-set {
  background: rgba(139, 92, 246, 0.14); border-color: rgba(139, 92, 246, 0.42); color: #fff; font-weight: 700;
}
body.dpx-night .fp-fchev { width: 15px; height: 15px; flex: none; color: var(--dpx-muted); transition: transform .2s ease, color .15s ease; }
body.dpx-night .fp-fdrop.is-open .fp-fchev { transform: rotate(180deg); }
body.dpx-night .fp-fdrop.is-open .fp-fchev,
body.dpx-night .fp-fdrop.is-set .fp-fchev { color: var(--dpxn-violet-2); }

/* ---- the panel: display:none when closed so it never adds page overflow ---- */
@keyframes fpnPanelIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
body.dpx-night .fp-fpanel {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 70;
  min-width: 100%; width: max-content; max-width: 300px; max-height: 320px; overflow-y: auto;
  padding: 6px; box-sizing: border-box;
  background: var(--dpxn-glass-hard, rgba(12, 15, 24, 0.94));
  border: 1px solid var(--dpxn-glass-brd, rgba(255, 255, 255, 0.12));
  border-radius: 14px;
  box-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.8), 0 6px 18px -10px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transform-origin: top left; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* the sort control sits at the far right of the bar - its panel would run off screen */
body.dpx-night .fp-fpanel.is-right { left: auto; right: 0; transform-origin: top right; }
body.dpx-night .fp-fpanel.is-up { top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; }
body.dpx-night .fp-fpanel.is-up.is-right { transform-origin: bottom right; }
body.dpx-night .fp-fpanel.is-open { display: block; animation: fpnPanelIn .16s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { body.dpx-night .fp-fpanel.is-open { animation: none; } }

body.dpx-night .fp-fopt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; box-sizing: border-box; min-height: 40px; padding: 9px 11px;
  border: 0; border-radius: 9px; background: transparent;
  color: var(--dpx-text-2); font: inherit; font-size: 13.5px; font-weight: 500;
  text-align: left; cursor: pointer; transition: background-color .12s ease, color .12s ease;
}
body.dpx-night .fp-fopt > span { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* .is-cursor is the KEYBOARD position - it has to be visible without a mouse hover */
body.dpx-night .fp-fopt:hover,
body.dpx-night .fp-fopt.is-cursor { background: rgba(255, 255, 255, 0.075); color: var(--dpx-text); }
body.dpx-night .fp-fopt.is-cursor { box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.45); }
body.dpx-night .fp-fopt.is-active { background: rgba(139, 92, 246, 0.16); color: #fff; font-weight: 700; }
body.dpx-night .fp-fcheck { width: 16px; height: 16px; flex: none; color: var(--dpxn-violet-2); }

body.dpx-night .fp-fpanel { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
body.dpx-night .fp-fpanel::-webkit-scrollbar { width: 9px; }
body.dpx-night .fp-fpanel::-webkit-scrollbar-track { background: transparent; }
body.dpx-night .fp-fpanel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; border: 2.5px solid transparent; background-clip: content-box; }
body.dpx-night .fp-fpanel::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); background-clip: content-box; }

/* ---- inside the refund modal: full width, sits on the modal surface ---- */
body.dpx-night .dpx-ord-rfform .fp-fdrop-wrap { display: block; }
body.dpx-night .dpx-ord-rfform .fp-fdrop {
  width: 100%; max-width: none; height: auto; min-height: 42px; padding: 10px 12px;
  background: var(--dpx-surface-2, rgba(255, 255, 255, 0.03));
}
body.dpx-night .dpx-ord-rfform .fp-fpanel { max-width: none; }

@media (max-width: 760px) {
  body.dpx-night .fp-fdrop-wrap { display: flex; flex: 1 1 140px; }
  body.dpx-night .fp-fdrop { max-width: none; width: 100%; }
  body.dpx-night .fp-fpanel { max-width: none; width: 100%; }
}


/* PINNED mode - fp-select adds .is-pinned and inline left/top when the trigger sits inside an
   ancestor that clips (an admin modal card is overflow:hidden, its inner overflow:auto). An
   absolutely positioned panel is cut off there no matter the z-index; only taking it out of flow
   escapes. The component supplies the coordinates, so this rule must NOT set left/top itself. */
body.dpx-night .fp-fpanel.is-pinned {
  position: fixed;
  right: auto;
  bottom: auto;
  max-height: min(300px, calc(100vh - 24px));
  z-index: 1000;
}