/* Dropdowns (BNN, 2026-10-28), made by banan-select.js. DESIGN-SYSTEM.md section 4.14.
   Line style on black (checkout, account): label above, line under, chevron right, the list opens under the line.
   Box style on white (survey): `data-bsel="box light"` on the select. The real <select> stays in place, invisible. */
.bsel { --bsel-fg: #fff; --bsel-muted: rgba(255, 255, 255, .6); --bsel-line: #555; --bsel-on: #fff; --bsel-edge: rgba(255, 255, 255, .5);
  --bsel-bg: #000; --bsel-hover: rgba(255, 255, 255, .12); --bsel-err: var(--bnn-error, #ff2d2d);
  position: relative; display: block; width: 100%; color: var(--bsel-fg); font: inherit; letter-spacing: inherit; }
.bsel-light { --bsel-fg: #000; --bsel-muted: rgba(0, 0, 0, .5); --bsel-line: rgba(0, 0, 0, .5); --bsel-on: #000; --bsel-edge: rgba(0, 0, 0, .5);
  --bsel-bg: #fff; --bsel-hover: rgba(0, 0, 0, .07); --bsel-err: var(--bad, #cc0000); }
.bc-field .bsel { font: 300 14px/24px "Helvetica Neue", HelveticaNeue, Arial, sans-serif; letter-spacing: .02em; }

.bsel .bsel-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0 !important; pointer-events: none !important; }

.bsel-btn { position: relative; display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 8px 32px 8px 0; background: transparent; color: var(--bsel-fg);
  border: 0; border-bottom: 1px solid var(--bsel-line); border-radius: 0; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.bsel-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsel-empty .bsel-text { color: var(--bsel-muted); }
.bsel-btn::after { content: ""; position: absolute; right: 2px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: currentColor; transition: transform .15s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 4l4.5 4.5L10.5 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 4l4.5 4.5L10.5 4' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.is-open > .bsel-btn::after { transform: rotate(180deg); }
@media (hover: hover) { .bsel-btn:hover { border-bottom-color: var(--bsel-on); } .bsel-box .bsel-btn:hover { border-color: var(--bsel-on); } }
.is-open > .bsel-btn, .bsel-btn:focus { border-bottom-color: var(--bsel-on); outline: 0; }
.bsel-btn:focus-visible { outline: 1px solid var(--bsel-fg); outline-offset: 3px; }
.bsel-btn[aria-invalid="true"] { border-bottom-color: var(--bsel-err); }
.bsel-btn:disabled { opacity: .4; cursor: default; }

.bsel-box { margin-bottom: 24px; }
.bsel-box .bsel-btn { padding: 13px 44px 13px 16px; border: .5px solid var(--bsel-line); }
.bsel-box .bsel-btn::after { right: 16px; }
.bsel-box.is-open > .bsel-btn, .bsel-box .bsel-btn:focus { border-color: var(--bsel-on); }
.bsel-box .bsel-btn[aria-invalid="true"] { border-color: var(--bsel-err); }
.bsel-box .bsel-btn:focus-visible { outline-offset: 2px; }

.bsel-list { position: absolute; z-index: 60; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px 0; list-style: none; max-height: 288px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bsel-bg); border: .5px solid var(--bsel-edge); scrollbar-width: thin; scrollbar-color: var(--bsel-edge) transparent; }
.bsel-list[hidden] { display: none; }
.bsel-up > .bsel-list { top: auto; bottom: 100%; margin: 0 0 4px; }
.bsel-opt { position: relative; padding: 10px 40px 10px 16px; color: var(--bsel-fg); font: inherit; letter-spacing: inherit; line-height: 20px; cursor: pointer; }
.bsel-opt.is-active { background: var(--bsel-hover); }
.bsel-opt[aria-selected="true"]::after { content: ""; position: absolute; right: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.bsel-opt[aria-disabled="true"] { opacity: .4; cursor: default; }
@media (pointer: coarse) { .bsel-opt { padding-top: 12px; padding-bottom: 12px; } .bsel-btn { min-height: 44px; } }
@media (prefers-reduced-motion: no-preference) {
  .bsel-list { animation: bsel-in .12s ease-out; }
  @keyframes bsel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .bsel-btn::after { transition: none; } }