/** * Barikoi address suggestions. * * position: fixed on purpose — the dropdown is a child of but is * positioned in viewport coordinates, so it lands correctly even inside the * transformed modal checkout and however the page is scrolled. */ .espt-bk { background: var(--espt-card, #fff); border: 1px solid var(--espt-border, #e2e8f0); border-radius: 12px; box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.22); color: var(--espt-ink, #1f2937); left: 0; overflow-y: auto; position: fixed; top: 0; z-index: 2147483000; /* above the checkout drawer, the modal and the FABs */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .espt-bk[hidden] { display: none; } .espt-bk-row { align-items: flex-start; border-bottom: 1px solid var(--espt-border, #eef2f7); cursor: pointer; display: flex; gap: 10px; /* 44px+ of tappable height: this is used with a thumb, on a phone, while a keyboard covers half the screen. */ padding: 11px 13px; } .espt-bk-row:last-child { border-bottom: 0; } .espt-bk-row.is-on, .espt-bk-row:hover { background: var(--espt-primary-soft, #f1f9f5); } .espt-bk-pin { background: currentColor; color: var(--espt-primary, #4ab370); flex: 0 0 auto; height: 16px; margin-top: 2px; width: 16px; -webkit-mask: var(--espt-bk-pin) center / contain no-repeat; mask: var(--espt-bk-pin) center / contain no-repeat; } :root { --espt-bk-pin: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E" ); } .espt-bk-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .espt-bk-1 { font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; } .espt-bk-2 { color: var(--espt-muted, #64748b); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; } .espt-bk-empty { color: var(--espt-muted, #64748b); font-size: 13px; padding: 13px; } /* Announcements only — never shown, never focusable. */ .espt-bk-live { clip: rect( 1px, 1px, 1px, 1px ); clip-path: inset( 50% ); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } @media screen and (max-width: 600px) { .espt-bk-1 { /* 16px keeps iOS Safari from zooming the page when the box is tapped. */ font-size: 16px; } .espt-bk-2 { font-size: 13px; } .espt-bk-row { padding: 13px; } } @media (prefers-reduced-motion: no-preference) { .espt-bk { animation: espt-bk-in 0.12s ease-out; } @keyframes espt-bk-in { from { opacity: 0; transform: translateY( -4px ); } to { opacity: 1; transform: none; } } }