/* Mobile bottom navigation matching the supplied mobile reference */ .ref-mobile-nav { display:none; } @media(max-width:767px) { body { padding-bottom:82px; } .ref-mobile-nav { position:fixed; z-index:9997; left:0; right:0; bottom:0; display:flex; align-items:stretch; justify-content:space-around; min-height:69px; padding:7px 5px calc(7px + env(safe-area-inset-bottom)); border:1px solid #e4e7f3; border-bottom:0; border-radius:18px 18px 0 0; background:rgba(255,255,255,.97); box-shadow:0 -5px 24px rgba(38,40,86,.10); backdrop-filter:blur(14px); } .ref-mobile-nav-item { position:relative; display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#647087 !important; text-decoration:none !important; font-size:10px; font-weight:600; line-height:1.1; } .ref-mobile-nav-item i { font-size:20px; } .ref-mobile-nav-item:hover, .ref-mobile-nav-item:focus { color:var(--theme-color,#7040c9) !important; } .ref-mobile-nav-primary { margin-top:-21px; } .ref-mobile-nav-primary i { display:grid; place-items:center; width:54px; height:54px; margin-bottom:0; border:4px solid #fff; border-radius:50%; background:var(--theme-color,#7040c9); color:#fff; font-size:24px; box-shadow:0 4px 13px rgba(83,43,180,.28); } .ref-mobile-nav-primary span { margin-top:0; } .ref-app-download { bottom:76px !important; } .custom-support-container { bottom:88px !important; } }