/* RXOPD public-only bottom gradient menu. No menu card on login/register/after-login pages. */
body.rx-gradient-bottom-ready{
  padding-bottom:0;
}

/* Old floating tabs are replaced only when public gradient menu is active. */
body.rx-gradient-bottom-ready .rx-bottom-tabs{
  display:none!important;
}

/* Auth pages must have no bottom floating menu/card. */
body.auth-shell .rx-bottom-tabs,
body.auth-shell .rx-gradient-menu-shell{
  display:none!important;
}

/* Admin/role pages must keep their own menus; public gradient is not rendered after login. */
body.role-shell .rx-gradient-menu-shell,
body.admin-shell .rx-gradient-menu-shell{
  display:none!important;
}

body.rx-gradient-bottom-ready .rx-page{
  padding-bottom:118px!important;
}

body.rx-gradient-bottom-ready .rxfi-index{
  padding-bottom:108px;
}

.rx-gradient-menu-shell{
  position:fixed!important;
  left:0;
  right:0;
  bottom:0;
  top:auto!important;
  z-index:120;
  display:flex;
  justify-content:center;
  padding:10px max(12px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
  pointer-events:none;
  background:linear-gradient(180deg,rgba(248,251,255,0),rgba(248,251,255,.90) 30%,rgba(248,251,255,.96));
  backdrop-filter:blur(10px);
}

.rx-gradient-menu{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  max-width:min(760px, calc(100vw - 24px));
  margin:0;
  padding:10px;
  border:1px solid rgba(219,229,241,.92);
  border-radius:999px;
  background:rgba(255,255,255,.90);
  box-shadow:0 -8px 42px rgba(15,23,42,.16);
  backdrop-filter:blur(18px);
  list-style:none;
  pointer-events:auto;
}

.rx-gradient-menu li{
  position:relative;
  width:58px;
  height:58px;
  transition:width .42s ease, transform .22s ease;
}

.rx-gradient-menu li a{
  position:relative;
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.18);
  border-radius:999px;
  color:#64748b;
  background:#fff;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  outline:none;
}

.rx-gradient-menu li:hover,
.rx-gradient-menu li:focus-within,
.rx-gradient-menu li.active{
  width:168px;
  transform:translateY(-4px);
}

.rx-gradient-bg{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:linear-gradient(45deg,var(--gradient-from),var(--gradient-to));
  opacity:0;
  transition:opacity .42s ease;
}

.rx-gradient-glow{
  position:absolute;
  inset:10px 0 -12px 0;
  z-index:-1;
  border-radius:999px;
  background:linear-gradient(45deg,var(--gradient-from),var(--gradient-to));
  filter:blur(16px);
  opacity:0;
  transition:opacity .42s ease;
}

.rx-gradient-icon{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:999px;
  font-size:22px;
  font-weight:1000;
  transition:transform .32s ease, opacity .25s ease, color .32s ease;
}

.rx-gradient-title{
  position:absolute;
  z-index:1;
  color:#fff;
  font-size:13px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  transform:scale(.45);
  opacity:0;
  transition:transform .34s ease .1s, opacity .34s ease .1s;
  white-space:nowrap;
}

.rx-gradient-menu li:hover .rx-gradient-bg,
.rx-gradient-menu li:hover .rx-gradient-glow,
.rx-gradient-menu li:focus-within .rx-gradient-bg,
.rx-gradient-menu li:focus-within .rx-gradient-glow,
.rx-gradient-menu li.active .rx-gradient-bg,
.rx-gradient-menu li.active .rx-gradient-glow{
  opacity:1;
}

.rx-gradient-menu li:hover .rx-gradient-icon,
.rx-gradient-menu li:focus-within .rx-gradient-icon,
.rx-gradient-menu li.active .rx-gradient-icon{
  transform:scale(0);
  opacity:0;
  color:#fff;
}

.rx-gradient-menu li:hover .rx-gradient-title,
.rx-gradient-menu li:focus-within .rx-gradient-title,
.rx-gradient-menu li.active .rx-gradient-title{
  transform:scale(1);
  opacity:1;
}

/* Public top links only: gradient hover; admin menus are not changed here. */
.public-shell .rx-topnav a:hover,
.public-shell .rx-topnav button:hover{
  color:#fff!important;
  background:linear-gradient(45deg,#56CCF2,#2F80ED)!important;
  border-color:transparent!important;
  box-shadow:0 12px 28px rgba(15,98,254,.20)!important;
}

@media (max-width:760px){
  body.rx-gradient-bottom-ready .rx-page{
    padding-bottom:98px!important;
  }

  body.rx-gradient-bottom-ready .rxfi-index{
    padding-bottom:96px;
  }

  .rx-gradient-menu-shell{
    justify-content:flex-start;
    overflow-x:auto;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(248,251,255,0),rgba(248,251,255,.96) 26%,#f8fbff);
  }

  .rx-gradient-menu{
    min-width:max-content;
    justify-content:flex-start;
    gap:8px;
    padding:8px;
    border-radius:24px;
  }

  .rx-gradient-menu li,
  .rx-gradient-menu li:hover,
  .rx-gradient-menu li:focus-within,
  .rx-gradient-menu li.active{
    width:auto;
    min-width:92px;
    height:48px;
    transform:none;
  }

  .rx-gradient-menu li a{
    justify-content:flex-start;
    gap:7px;
    padding:0 11px;
  }

  .rx-gradient-icon{
    width:28px;
    height:28px;
    font-size:17px;
    color:#073b96;
  }

  .rx-gradient-title{
    position:relative;
    color:#073b96;
    transform:none;
    opacity:1;
    font-size:11px;
    letter-spacing:.06em;
  }

  .rx-gradient-menu li:hover .rx-gradient-title,
  .rx-gradient-menu li:focus-within .rx-gradient-title,
  .rx-gradient-menu li.active .rx-gradient-title{
    color:#fff;
  }

  .rx-gradient-menu li:hover .rx-gradient-icon,
  .rx-gradient-menu li:focus-within .rx-gradient-icon,
  .rx-gradient-menu li.active .rx-gradient-icon{
    transform:none;
    opacity:1;
    color:#fff;
  }

  .rx-gradient-menu li.active .rx-gradient-bg,
  .rx-gradient-menu li:hover .rx-gradient-bg,
  .rx-gradient-menu li:focus-within .rx-gradient-bg{
    opacity:1;
  }

  .rx-gradient-menu li:hover .rx-gradient-glow,
  .rx-gradient-menu li:focus-within .rx-gradient-glow,
  .rx-gradient-menu li.active .rx-gradient-glow{
    opacity:.55;
  }
}

@media (max-width:359px){
  .rx-gradient-menu li,
  .rx-gradient-menu li:hover,
  .rx-gradient-menu li:focus-within,
  .rx-gradient-menu li.active{
    min-width:84px;
  }

  .rx-gradient-title{
    font-size:10px;
  }
}

@media print{
  .rx-gradient-menu-shell{
    display:none!important;
  }
}