/* ======================================================================== BPP_MOBILE_NAV_V19_DESKTOP_GUARD_19_2_1 V19 is a phone-only navigation component. Never allow its HTML to participate in desktop/tablet document flow. ======================================================================== */ @media (min-width: 768px) { nav.rpgx-mobile-bottom.rpgp-mobile-bottom.bpp-mobile-nav-v19, nav.bpp-mobile-nav-v19, .rpgx-mobile-bottom.bpp-mobile-nav-v19, .rpgp-mobile-bottom.bpp-mobile-nav-v19 { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: fixed !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } } /* ======================================================================== BPP MOBILE NAV V19.1 Premium raised List Property center action ======================================================================== */ .bpp-mobile-nav-v19 { display: none !important; } @media (max-width: 767px) { :root { --bpp-dashboard-bottom-nav-h: 76px; --bpp-dashboard-bottom-nav-gap: 8px; } body .bpp-mobile-nav-v19 { position: fixed !important; left: 8px !important; right: 8px !important; bottom: max( 8px, env(safe-area-inset-bottom) ) !important; z-index: 13050 !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; align-items: end !important; gap: 1px !important; width: auto !important; min-height: 72px !important; margin: 0 !important; padding: 8px 5px 7px !important; overflow: visible !important; border: 1px solid rgba(7, 89, 60, .10) !important; border-radius: 21px !important; background: rgba(255, 255, 255, .98) !important; box-shadow: 0 15px 38px rgba(3, 56, 41, .18) !important; backdrop-filter: blur(17px) !important; -webkit-backdrop-filter: blur(17px) !important; } /* NORMAL FOUR ITEMS */ body .bpp-mobile-nav-v19 > .bpp-mobile-nav-v19__item { position: relative !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-end !important; gap: 3px !important; min-width: 0 !important; min-height: 54px !important; margin: 0 !important; padding: 4px 1px !important; border: 0 !important; border-radius: 13px !important; background: transparent !important; color: #647084 !important; text-decoration: none !important; font-size: 12px !important; font-weight: 750 !important; line-height: 1 !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } body .bpp-mobile-nav-v19 .bpp-mobile-nav-v19__icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 29px !important; height: 29px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: currentColor !important; font-size: 0 !important; } body .bpp-mobile-nav-v19 .bpp-mobile-nav-v19__icon svg { display: block !important; width: 25px !important; height: 25px !important; } body .bpp-mobile-nav-v19 > .bpp-mobile-nav-v19__item:hover, body .bpp-mobile-nav-v19 > .bpp-mobile-nav-v19__item:focus-visible, body .bpp-mobile-nav-v19 > .bpp-mobile-nav-v19__item[aria-current="page"] { background: transparent !important; color: #079a59 !important; } /* RAISED CENTER ACTION */ body .bpp-mobile-nav-v19 > .bpp-mobile-nav-v19__create { position: relative !important; overflow: visible !important; justify-content: flex-end !important; padding-top: 27px !important; color: #078f54 !important; } body .bpp-mobile-nav-v19 .bpp-mobile-nav-v19__create-orb { position: absolute !important; left: 50% !important; top: -38px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 68px !important; height: 68px !important; margin: 0 !important; padding: 0 !important; border: 6px solid rgba(247, 250, 248, .99) !important; border-radius: 999px !important; background: linear-gradient( 145deg, #12ad68, #079c5c 55%, #05884f ) !important; color: #fff !important; box-shadow: 0 11px 26px rgba(4, 143, 81, .28) !important; font-size: 0 !important; transform: translateX(-50%) !important; } body .bpp-mobile-nav-v19 .bpp-mobile-nav-v19__create-orb svg { display: block !important; width: 31px !important; height: 31px !important; } body .bpp-mobile-nav-v19 .bpp-mobile-nav-v19__create-label { display: block !important; max-width: 82px !important; overflow: hidden !important; color: #078f54 !important; font-size: 10.5px !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; text-overflow: ellipsis !important; } /* EXTRA CLEARANCE FOR RAISED ORB */ body.bpp-mobile-nav-v19-active:not(.mgm65-chat-active) { padding-bottom: calc( 106px + max( 8px, env(safe-area-inset-bottom) ) ) !important; } /* PROPERTY CREATE / EDIT HAS ITS OWN STICKY WIZARD BAR */ body.bpp-mobile-nav-v19-wizard .bpp-mobile-nav-v19 { display: none !important; } /* SMALL PHONES */ @media (max-width: 375px) { body .bpp-mobile-nav-v19 { left: 5px !important; right: 5px !important; border-radius: 19px !important; } body .bpp-mobile-nav-v19 > .bpp-mobile-nav-v19__item { font-size: 11px !important; } body .bpp-mobile-nav-v19 .bpp-mobile-nav-v19__create-orb { top: -34px !important; width: 62px !important; height: 62px !important; } body .bpp-mobile-nav-v19 .bpp-mobile-nav-v19__create-label { font-size: 9.5px !important; } } } /* ======================================================================== BPP MOBILE NAV V19.2 — FINAL AUTHORITY Deliberately outranks legacy four-column mobile-nav CSS. ======================================================================== */ @media (max-width: 767px) { html body nav.rpgx-mobile-bottom.rpgp-mobile-bottom.bpp-mobile-nav-v19, html body nav.bpp-dashboard-mobile-bottom.rpgx-mobile-bottom.rpgp-mobile-bottom.bpp-mobile-nav-v19 { position: fixed !important; left: 8px !important; right: 8px !important; bottom: max( 8px, env(safe-area-inset-bottom) ) !important; width: auto !important; min-height: 74px !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; align-items: end !important; gap: 1px !important; padding: 8px 5px 7px !important; overflow: visible !important; border: 1px solid rgba(17, 53, 38, .09) !important; border-radius: 22px !important; background: rgba(255,255,255,.98) !important; box-shadow: 0 15px 40px rgba(17,45,33,.17) !important; z-index: 14000 !important; } html body nav.rpgx-mobile-bottom.rpgp-mobile-bottom.bpp-mobile-nav-v19 > a.bpp-mobile-nav-v19__item, html body nav.bpp-dashboard-mobile-bottom.rpgx-mobile-bottom.rpgp-mobile-bottom.bpp-mobile-nav-v19 > a.bpp-mobile-nav-v19__item { min-width: 0 !important; min-height: 55px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-end !important; gap: 3px !important; padding: 4px 1px !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; color: #647184 !important; font-size: 11px !important; font-weight: 750 !important; line-height: 1 !important; } html body nav.bpp-mobile-nav-v19 > a.bpp-mobile-nav-v19__item[aria-current="page"] { background: transparent !important; color: #078f54 !important; } html body nav.bpp-mobile-nav-v19 strong.bpp-mobile-nav-v19__icon { width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: currentColor !important; font-size: 0 !important; } html body nav.bpp-mobile-nav-v19 strong.bpp-mobile-nav-v19__icon svg { width: 25px !important; height: 25px !important; } /* MAIN CENTER ACTION */ html body nav.bpp-mobile-nav-v19 > a.bpp-mobile-nav-v19__create { position: relative !important; overflow: visible !important; padding-top: 27px !important; color: #078f54 !important; background: transparent !important; } html body nav.bpp-mobile-nav-v19 strong.bpp-mobile-nav-v19__create-orb { position: absolute !important; left: 50% !important; top: -39px !important; width: 68px !important; height: 68px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; border: 6px solid #f8faf9 !important; border-radius: 999px !important; background: linear-gradient( 145deg, #11ad67, #079957 55%, #05834c ) !important; color: #fff !important; box-shadow: 0 11px 27px rgba(5,145,82,.29) !important; transform: translateX(-50%) !important; font-size: 0 !important; } html body nav.bpp-mobile-nav-v19 strong.bpp-mobile-nav-v19__create-orb svg { width: 31px !important; height: 31px !important; } html body nav.bpp-mobile-nav-v19 span.bpp-mobile-nav-v19__create-label { display: block !important; color: #078f54 !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; } /* * Old homepage CSS specifically styles :last-child * as a large green action. Neutralize that because * List Property is now the center CTA. */ html body nav.bpp-mobile-nav-v19 > a:last-child { background: transparent !important; color: #647184 !important; box-shadow: none !important; transform: none !important; } html body nav.bpp-mobile-nav-v19 > a:last-child > strong { background: transparent !important; color: currentColor !important; box-shadow: none !important; } /* * Extra clearance for the raised orb. */ body:has(nav.bpp-mobile-nav-v19) { padding-bottom: calc( 104px + max( 8px, env(safe-area-inset-bottom) ) ) !important; } /* * Property create/edit wizard already owns its own sticky footer. */ body.bpp-mobile-nav-v19-wizard nav.bpp-mobile-nav-v19 { display: none !important; } }