/* Meva Sagar themed select — styles for assets/ent/sc-vselect.js (POS terminal + storefront).
   Colours/sizing come from CSS variables set per page on <body>. */

body { --vs-bd: #cfd4cf; --vs-pbd: #cfd4cf; --vs-focus: #013404; --vs-hover: #eef2ee; --vs-sel: #013404; --vs-mute: #6b7280; --vs-pad: 8px 12px; --vs-h: 40px; --vs-dang: #b5472e; }
body.pos     { --vs-bd: #d9dee3; --vs-pbd: #d9dee3; --vs-focus: #1b6b3a; --vs-hover: #e8f3ec; --vs-sel: #1b6b3a; --vs-mute: #6b7785; --vs-pad: 9px 10px; --vs-h: 40px; --vs-dang: #c0392b; }
body.gr-body { --vs-bd: var(--st-ink); --vs-pbd: var(--st-ink); --vs-focus: var(--st-gold); --vs-hover: var(--st-paper); --vs-sel: var(--st-ink); --vs-mute: var(--st-mute); --vs-pad: 0 16px; --vs-h: 50px; --vs-dang: var(--st-danger); }

/* ---- trigger ---- */
.sc-vs { position: relative; display: block; width: 100%; min-width: 0; }
.sc-vs-native {
  position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important;
  overflow: hidden !important; background: none !important; appearance: none; -webkit-appearance: none;
}
.sc-vs-btn {
  appearance: none; -webkit-appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: var(--vs-h); padding: var(--vs-pad); margin: 0; text-align: left; cursor: pointer;
  font: inherit; font-size: inherit; line-height: 1.3; color: inherit; background: #fff; border: 1px solid var(--vs-bd); border-radius: 0;
}
.sc-vs-btn::after {
  content: ""; flex: none; width: 7px; height: 7px; margin: -3px 2px 0 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s;
}
.sc-vs-btn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.sc-vs-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-vs-btn.is-placeholder .sc-vs-val { color: var(--vs-mute); }
.sc-vs-btn:focus { outline: none; }
.sc-vs-btn:focus-visible, .sc-vs-btn[aria-expanded="true"] { outline: 2px solid var(--vs-focus); outline-offset: -1px; }
.sc-vs-btn.is-invalid { border-color: var(--vs-dang); }
.sc-vs.is-disabled .sc-vs-btn { opacity: .55; cursor: not-allowed; background: #f5f5f4; }

/* ---- popup (appended to <body>, so it escapes modal/overflow clipping) ---- */
.sc-vs-pop {
  position: fixed; z-index: 100000; display: flex; flex-direction: column; box-sizing: border-box;
  background: #fff; border: 1px solid var(--vs-pbd); font-family: inherit; font-size: 15px; line-height: 1.35; color: #1f2933;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
body.gr-body .sc-vs-pop { box-shadow: none; font-size: 16px; color: var(--st-ink); }       /* storefront theme is flat */
body.gr-body .sc-vs-pop { font-family: var(--gr-font, inherit); }
.sc-vs-search { box-sizing: border-box; width: 100%; padding: 11px 14px; margin: 0; border: 0; border-bottom: 1px solid var(--vs-pbd); border-radius: 0; font: inherit; background: #fff; outline: none; }
.sc-vs-search:focus { box-shadow: inset 0 -2px 0 var(--vs-focus); }
.sc-vs-list { margin: 0; padding: 4px 0; list-style: none; overflow-y: auto; flex: 1 1 auto; overscroll-behavior: contain; }
.sc-vs-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; cursor: pointer; }
.sc-vs-opt .sc-vs-txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sc-vs-opt.is-active { background: var(--vs-hover); }
.sc-vs-opt[aria-selected="true"] { font-weight: 600; color: var(--vs-sel); }
.sc-vs-opt[aria-selected="true"]::after { content: "\2713"; flex: none; font-weight: 700; }
.sc-vs-opt.is-disabled { opacity: .4; cursor: not-allowed; }
.sc-vs-grp { padding: 10px 14px 4px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--vs-mute); cursor: default; }
.sc-vs-empty { padding: 12px 14px; color: var(--vs-mute); }
@media (pointer: coarse) { .sc-vs-opt { padding: 13px 14px; } }