/* ============================================================ RPR Typeahead Dropdown — Modern Design Matches the RPR design system (Manrope, --rpr-dark, etc.) ============================================================ */ /* Dropdown container — appended to , positioned absolutely */ .rpr-typeahead { display: none; position: absolute; z-index: 9999; margin: 8px 0 0; padding: 8px 0; list-style: none; background-color: #ffffff; border-radius: 16px; box-shadow: 0px 4px 9px 0px rgba(40, 37, 96, 0.17), 0px 16px 16px 0px rgba(40, 37, 96, 0.15), 0px 36px 22px 0px rgba(40, 37, 96, 0.09), 0px 64px 26px 0px rgba(40, 37, 96, 0.03), 0px 101px 28px 0px rgba(40, 37, 96, 0); max-height: 320px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Custom scrollbar */ .rpr-typeahead::-webkit-scrollbar { width: 6px; } .rpr-typeahead::-webkit-scrollbar-track { background: transparent; } .rpr-typeahead::-webkit-scrollbar-thumb { background-color: rgba(114, 133, 163, 0.3); border-radius: 3px; } .rpr-typeahead::-webkit-scrollbar-thumb:hover { background-color: rgba(114, 133, 163, 0.5); } /* Individual item */ .rpr-typeahead li { display: block; } .rpr-typeahead__item { display: block; padding: 10px 20px; font-family: "Manrope", Helvetica; font-weight: 500; font-size: 15px; letter-spacing: -0.0375px; line-height: 140%; color: rgba(40, 37, 96, 1); text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color 0.15s ease; } .rpr-typeahead__item:hover, .rpr-typeahead__item:focus { text-decoration: none; color: rgba(40, 37, 96, 1); } /* Active / hovered row */ .rpr-typeahead li.active .rpr-typeahead__item, .rpr-typeahead li:hover .rpr-typeahead__item { background-color: rgba(242, 249, 255, 1); color: rgba(40, 37, 96, 1); } /* Highlighted match text */ .rpr-typeahead__item strong { font-weight: 800; color: rgba(217, 102, 39, 1); } /* Category header */ .rpr-typeahead__header { display: block; padding: 12px 20px 6px; font-family: "Manrope", Helvetica; font-weight: 800; font-size: 11px; letter-spacing: 2px; line-height: 140%; color: rgba(114, 133, 163, 1); text-transform: uppercase; cursor: default; } /* Divider between categories */ .rpr-typeahead__divider { display: block; height: 1px; margin: 6px 16px; background-color: rgba(114, 133, 163, 0.15); } /* When visible */ .rpr-typeahead[style*="display: block"], .rpr-typeahead[style*="display:block"] { display: block; } /* ============================================================ jQuery UI Autocomplete Override for RPR pages Restyles the default .ui-autocomplete to match .rpr-typeahead ============================================================ */ body.rpr-page .ui-autocomplete { position: absolute !important; border-radius: 16px !important; background-color: #ffffff !important; border: none !important; padding: 8px 0 !important; margin: 8px 0 0 !important; list-style: none !important; outline: none !important; box-shadow: 0px 4px 9px 0px rgba(40, 37, 96, 0.17), 0px 16px 16px 0px rgba(40, 37, 96, 0.15), 0px 36px 22px 0px rgba(40, 37, 96, 0.09), 0px 64px 26px 0px rgba(40, 37, 96, 0.03), 0px 101px 28px 0px rgba(40, 37, 96, 0) !important; max-height: 320px !important; min-width: 300px !important; max-width: none !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; z-index: 99999 !important; cursor: default; } /* Custom scrollbar */ body.rpr-page .ui-autocomplete::-webkit-scrollbar { width: 6px; } body.rpr-page .ui-autocomplete::-webkit-scrollbar-track { background: transparent; } body.rpr-page .ui-autocomplete::-webkit-scrollbar-thumb { background-color: rgba(114, 133, 163, 0.3); border-radius: 3px; } body.rpr-page .ui-autocomplete::-webkit-scrollbar-thumb:hover { background-color: rgba(114, 133, 163, 0.5); } /* Menu items */ body.rpr-page .ui-autocomplete .ui-menu-item { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; list-style: none !important; list-style-image: none !important; } body.rpr-page .ui-autocomplete .ui-menu-item a, body.rpr-page .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper { display: block !important; padding: 10px 20px !important; font-family: "Manrope", Helvetica !important; font-weight: 500 !important; font-size: 15px !important; letter-spacing: -0.0375px !important; line-height: 140% !important; color: rgba(40, 37, 96, 1) !important; text-decoration: none !important; cursor: pointer !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transition: background-color 0.15s ease; border: none !important; border-bottom: none !important; border-radius: 0 !important; background: none !important; margin: 0 !important; } /* Hover / focus / active state */ body.rpr-page .ui-autocomplete .ui-menu-item a:hover, body.rpr-page .ui-autocomplete .ui-menu-item a.ui-state-focus, body.rpr-page .ui-autocomplete .ui-menu-item a.ui-state-active, body.rpr-page .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper:hover, body.rpr-page .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-focus, body.rpr-page .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active { background-color: rgba(242, 249, 255, 1) !important; color: rgba(40, 37, 96, 1) !important; border: none !important; border-radius: 0 !important; margin: 0 !important; } /* Highlighted match text */ body.rpr-page .ui-autocomplete .ui-menu-item a strong, body.rpr-page .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper strong, body.rpr-page .ui-autocomplete .rpr-ac-match { font-weight: 800 !important; color: rgba(217, 102, 39, 1) !important; } /* Hide the screen-reader helper span clutter */ body.rpr-page .ui-helper-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } /* ============================================================ Mobile: allow typeahead items to wrap instead of truncating ============================================================ */ @media (max-width: 840px) { .rpr-typeahead__item { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; } body.rpr-page .ui-autocomplete .ui-menu-item a, body.rpr-page .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word !important; } }