/* Shared place picker — inherits each screen's tokens, dark or light */ .blxpp{ position:relative; } /* Mounted on and positioned to its field, so no panel can clip it. */ .blxpp-menu.blxpp-fixed{ position:fixed; left:0; top:0; right:auto; z-index:100200; overflow-y:auto; -webkit-overflow-scrolling:touch; } .blxpp-menu{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:60; padding:6px; border-radius:12px; max-height:320px; overflow-y:auto; overscroll-behavior:contain; background:var(--blxpp-bg,#151519); border:1px solid var(--blxpp-line,rgba(255,255,255,.13)); box-shadow:0 24px 60px rgba(0,0,0,.55); } .blxpp-menu[hidden]{ display:none; } .blxpp-sec{ padding:8px 10px 4px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--blxpp-dim,#8d8a83); } .blxpp-empty{ padding:10px; font-size:12.5px; color:var(--blxpp-dim,#8d8a83); } .blxpp-row{ display:flex; align-items:center; gap:11px; width:100%; padding:11px 10px; cursor:pointer; text-align:left; background:none; border:0; border-radius:9px; color:var(--blxpp-fg,#ededf0); font-family:inherit; } .blxpp-row:hover,.blxpp-row.active{ background:var(--blxpp-hover,rgba(255,255,255,.06)); } .blxpp-row .ic{ flex:none; width:22px; text-align:center; color:var(--blxpp-accent,var(--blx-acc, #c9a227)); font-size:13px; } .blxpp-row .tx{ min-width:0; display:flex; flex-direction:column; gap:2px; } .blxpp-row .tx b{ font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .blxpp-row .tx i{ font-style:normal; font-size:12px; color:var(--blxpp-dim,#8d8a83); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ---- dressed for an admin console ---- This lived in journeys-admin.css, which meant every other screen that used the picker — the scheduler's block form among them — fell back to the dark defaults above and painted a near-black menu onto a light board. It is shared now: light here, flipped in blx-noir.css, one picker everywhere. Tokens set the palette; the rest is fit and finish: a softer card, rows that breathe, a section label that reads as a label, and a slim scrollbar instead of the browser's default slab. */ .blxpp-menu{ --blxpp-bg:#fff; --blxpp-fg:#161410; --blxpp-line:rgba(20,18,12,.12); --blxpp-dim:#6b7280; --blxpp-hover:rgba(var(--blx-acc-mid-rgb, 181,138,26),.09); --blxpp-accent:var(--blx-acc-mid, #b58a1a); padding:7px; border-radius:14px; max-height:330px; overflow-y:auto; box-shadow:0 24px 60px -22px rgba(16,24,40,.35), 0 2px 6px rgba(16,24,40,.08); scrollbar-width:thin; scrollbar-color:rgba(20,18,12,.22) transparent; } .blxpp-menu::-webkit-scrollbar{ width:9px; } .blxpp-menu::-webkit-scrollbar-track{ background:transparent; } .blxpp-menu::-webkit-scrollbar-thumb{ background:rgba(20,18,12,.2); border-radius:999px; border:3px solid transparent; background-clip:content-box; } .blxpp-menu::-webkit-scrollbar-thumb:hover{ background:rgba(20,18,12,.34); background-clip:content-box; } .blxpp-sec{ padding:9px 11px 5px; font-size:9.5px; font-weight:700; letter-spacing:.2em; color:var(--blxpp-dim,#6b7280); } .blxpp-sec + .blxpp-sec, .blxpp-row + .blxpp-sec{ margin-top:4px; border-top:1px solid var(--blxpp-line,rgba(20,18,12,.1)); padding-top:11px; } .blxpp-row{ padding:9px 11px; border-radius:10px; gap:12px; align-items:flex-start; } .blxpp-row .ic{ margin-top:2px; font-size:11px; opacity:.85; } .blxpp-row .tx{ gap:1px; flex:1; } .blxpp-row .tx b{ font-size:14px; font-weight:600; color:var(--blxpp-fg,#161410); line-height:1.35; } .blxpp-row .tx i{ font-size:12px; line-height:1.35; } .blxpp-row:hover, .blxpp-row.active{ background:var(--blxpp-hover,rgba(var(--blx-acc-mid-rgb, 181,138,26),.09)); } .blxpp-row.active .ic{ opacity:1; } /* The guest's own addresses lead the list and wear the accent, because on a booking for somebody with an address book they are nearly always the answer — and a star is the one mark nobody confuses with a suggestion. */ .blxpp-row.mine .ic{ color:var(--blxpp-accent,var(--blx-acc, #c9a227)); opacity:1; } .blxpp-row.mine .tx b{ color:var(--blxpp-fg,#161410); } .blxpp-empty{ padding:11px; font-size:12.5px; } /* A place name is the thing being chosen, so it is never cut off. Five rows reading "Copper Mou…" are five rows that cannot be told apart; the name wraps to a second line instead and the address beneath it keeps its single truncated line, where losing the tail costs nothing. */ .blxpp-row .tx b{ white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; } .blxpp-menu{ max-width:calc(100vw - 24px); } /* touch: selection-first bottom sheet, and a dropdown while typing */ @media(max-width:640px){ .blxpp-menu{ position:fixed; left:10px; right:10px; top:auto; bottom:calc(10px + env(safe-area-inset-bottom)); max-height:56dvh; border-radius:16px; padding:8px; box-shadow:0 -18px 60px rgba(0,0,0,.7); } .blxpp-menu.typing{ position:absolute; left:0; right:0; top:calc(100% + 6px); bottom:auto; max-height:34dvh; border-radius:12px; } .blxpp-row{ padding:13px 12px; } .blxpp-row .tx b{ font-size:15px; } .blxpp input{ font-size:16px; } } /* J1 — a parent place opens a second level: the chevron says so, the back row returns. Nothing else about the rows changes. */ .blxpp-row .more{ margin-left:auto; flex:none; color:var(--blxpp-dim,#8d8a83); font-size:16px; padding-left:8px; } .blxpp-row.back{ padding:7px 10px; } .blxpp-row.back .tx b{ font-size:12.5px; color:var(--blxpp-dim,#8d8a83); font-weight:600; }