/* Select panel (assets/js/select-panel.js): what every dropdown opens.
   Self-contained: the marketplace, the partner page and the public form load it
   without the app's stylesheets. Values are set firmly here because the app's
   field skins reach for every input. The colour follows the page: --sp-accent
   if a page sets one, else the page's own, else brand green. */
.sp-root { position: fixed; inset: 0; z-index: 100500; pointer-events: none; font-family: inherit; --sp-c: var(--sp-accent, var(--ac, var(--lp2-h3, var(--accent, #059669)))); }
.sp-root * { box-sizing: border-box; }
.sp-panel {
    position: fixed; display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;
    background: #fff; color: #000; border: 1px solid #e3e8ee; border-radius: 16px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 18px 44px -12px rgba(15, 23, 42, .26);
    animation: sp-in .13s ease-out;
}
@keyframes sp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.sp-search {
    flex: none; display: flex; align-items: center; gap: 8px; margin: 8px 8px 2px; padding: 0 12px; height: 40px;
    border: 1px solid #dfe5eb; border-radius: 11px; background: #f6f8fa; cursor: text;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.sp-search:focus-within { background: #fff; border-color: var(--sp-c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-c) 18%, transparent); }
.sp-search-i { flex: none; width: 15px; height: 15px; fill: none; stroke: #475569; stroke-width: 1.7; stroke-linecap: round; }
.sp-root input.sp-input {
    flex: 1; min-width: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
    -webkit-appearance: none; appearance: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0;
    font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.3; color: #000;
}
.sp-root input.sp-input:focus { border: 0; box-shadow: none; outline: 0; background: transparent; }
.sp-input::placeholder { color: #64748b; opacity: 1; }

.sp-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px; outline: 0; }
/* A scrollbar you can see (the app's own is 12% opacity), and a fade while more
   is below: a list cut off between two rows otherwise looks like the whole list. */
.sp-list::-webkit-scrollbar { width: 8px; }
.sp-list::-webkit-scrollbar-track { background: transparent; }
.sp-list::-webkit-scrollbar-thumb { background: #aab4c0; background-clip: content-box; border: 2px solid transparent; border-radius: 8px; }
.sp-list::-webkit-scrollbar-thumb:hover { background: #7d8a99; background-clip: content-box; border: 2px solid transparent; }
@supports not selector(::-webkit-scrollbar) { .sp-list { scrollbar-width: thin; scrollbar-color: #aab4c0 transparent; } }
.sp-panel::after {
    content: ""; position: absolute; left: 0; right: 10px; bottom: 0; height: 38px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); opacity: 0; transition: opacity .12s ease;
}
.sp-panel.has-more::after { opacity: 1; }
.sp-row {
    display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 11px; border-radius: 10px;
    font-size: 14px; line-height: 1.3; font-weight: 500; color: #000; cursor: pointer; user-select: none;
}
.sp-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sp-label { display: block; }
.sp-hint { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.3; font-weight: 400; color: #64748b; }
/* A list with descriptions: the name leads, the description recedes, and each
   row has room and a fine line of its own, so it reads as a list, not a block. */
.sp-list.has-hints .sp-row { position: relative; min-height: 62px; padding: 11px 12px; border-radius: 12px; }
.sp-list.has-hints .sp-label { font-weight: 600; letter-spacing: -.005em; }
.sp-list.has-hints .sp-row + .sp-row::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: #eef1f4; }
.sp-list.has-hints .sp-row.is-on::before, .sp-list.has-hints .sp-row.is-on + .sp-row::before,
.sp-list.has-hints .sp-row.is-active::before, .sp-list.has-hints .sp-row.is-active + .sp-row::before { background: transparent; }
.sp-row.is-on .sp-hint { color: #475569; }
.sp-row.is-active { background: #f1f5f4; }
.sp-row.is-on { font-weight: 700; background: color-mix(in srgb, var(--sp-c) 11%, #fff); }
.sp-row.is-on.is-active { background: color-mix(in srgb, var(--sp-c) 17%, #fff); }
.sp-row.is-off { color: #94a3b8; cursor: not-allowed; }
.sp-row.is-prompt { color: #475569; }
.sp-tick { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--sp-c); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.sp-group { padding: 10px 11px 4px; font-size: 11.5px; font-weight: 700; color: #475569; }
.sp-none, .sp-more { padding: 16px 11px; font-size: 13px; font-weight: 500; color: #475569; text-align: center; overflow-wrap: anywhere; }
.sp-more { padding: 10px 11px; font-size: 12px; }

/* Phones: a sheet from the bottom, with room to tap. */
.sp-root.is-sheet { pointer-events: auto; }
.sp-back { position: absolute; inset: 0; background: rgba(15, 23, 42, .46); animation: sp-fade .16s ease-out; touch-action: none; }
.sp-root.is-sheet .sp-panel {
    left: 0; right: 0; bottom: 0; width: auto; border: 0; border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0); animation: sp-up .2s cubic-bezier(.2, .8, .3, 1);
    box-shadow: 0 -12px 40px rgba(15, 23, 42, .22);
}
.sp-root.is-sheet .sp-panel::after { bottom: env(safe-area-inset-bottom, 0px); }
.sp-grip { flex: none; width: 38px; height: 4px; margin: 8px auto 0; border-radius: 99px; background: #d5dbe3; }
.sp-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 8px 4px 18px; }
.sp-title { flex: 1; min-width: 0; font-size: 15.5px; line-height: 1.3; font-weight: 800; color: #000; }
.sp-root button.sp-x {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px; min-width: 0; margin: 0; padding: 0;
    border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: #000; cursor: pointer;
}
.sp-x-i { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sp-root.is-sheet .sp-search { margin: 2px 14px 4px; height: 44px; }
.sp-root.is-sheet input.sp-input { font-size: 16px; } /* under 16px, iPhones zoom the page */
.sp-root.is-sheet .sp-list { padding: 4px 10px 12px; }
.sp-root.is-sheet .sp-row { min-height: 48px; font-size: 15px; }
.sp-root.is-sheet .sp-list.has-hints .sp-row { min-height: 64px; }
@keyframes sp-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sp-panel, .sp-back, .sp-root.is-sheet .sp-panel { animation: none; } }