/* BELIEVE Account — sidebar polish
   Load after account-profile-polish.css on /account.
   Add class `account-sidebar-menu` to the desktop Nav Menu wrapper in Webflow. */

.account-sidebar-menu {
  width: 100% !important;
  max-width: 292px !important;
  padding: 24px 22px !important;
  border: 1px solid rgba(120, 125, 145, 0.12) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 82% 8%, rgba(126, 112, 255, 0.07), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 24px 70px rgba(17,24,39,.055) !important;
  backdrop-filter: blur(22px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(155%) !important;
  box-sizing: border-box !important;
}

.account-sidebar-menu a,
.account-sidebar-menu .nav-link,
.account-sidebar-menu .menu-accordion-title,
.account-sidebar-menu .accordion-sub-link {
  font-size: 14px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: #0b0b0b !important;
  text-decoration: none !important;
}

.account-sidebar-menu > .nav-link,
.account-sidebar-menu .menu-accordion-head {
  min-height: 34px !important;
  padding: 7px 8px !important;
  border-radius: 12px !important;
  transition: background .18s ease, transform .18s ease, opacity .18s ease !important;
}

.account-sidebar-menu > .nav-link:hover,
.account-sidebar-menu .menu-accordion-head:hover {
  background: rgba(255,255,255,.52) !important;
  transform: translateX(2px) !important;
}

.account-sidebar-menu .menu-accordion {
  margin: 0 !important;
}

.account-sidebar-menu .menu-accordion-head {
  justify-content: space-between !important;
  gap: 10px !important;
}

.account-sidebar-menu .menu-accordion-icon {
  margin-left: auto !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: rgba(11,11,11,.7) !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.account-sidebar-menu .menu-accordion-content {
  padding-left: 8px !important;
}

.account-sidebar-menu .accordion-sub-link {
  width: 100% !important;
  padding: 5px 0 5px 16px !important;
  color: rgba(11,11,11,.72) !important;
  font-size: 13px !important;
  line-height: 1.22 !important;
  transition: color .18s ease, transform .18s ease !important;
}

.account-sidebar-menu .accordion-sub-link:hover {
  color: #0b0b0b !important;
  transform: translateX(2px) !important;
}

.account-sidebar-menu .secret-room-link,
.account-sidebar-menu [href*="secret"],
.account-sidebar-menu [class*="secret"] {
  margin-top: 12px !important;
  margin-bottom: 18px !important;
}

.account-sidebar-recent,
#recent-purchase-link {
  width: 100% !important;
  min-height: 205px !important;
  margin-top: 18px !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border: 1px solid rgba(12, 18, 28, 0.12) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.46) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 16px 38px rgba(17,24,39,.045) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.account-sidebar-recent:hover,
#recent-purchase-link:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(12,18,28,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 22px 48px rgba(17,24,39,.07) !important;
}

.account-sidebar-recent-title,
#recent-purchase-link > div:first-child,
#recent-purchase-link [class*="text"]:first-child {
  margin-bottom: 8px !important;
  color: rgba(11,11,11,.86) !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  text-align: center !important;
}

#rp-img {
  width: 150px !important;
  max-width: 100% !important;
  height: 128px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 8px !important;
  filter: drop-shadow(0 16px 20px rgba(17,24,39,.10)) !important;
}

#rp-name {
  color: #0b0b0b !important;
  font-size: 14px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.account-sidebar-help-card {
  width: 100% !important;
  margin-top: 18px !important;
  padding: 18px !important;
  display: block !important;
  border: 1px solid rgba(12,18,28,.10) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 88% 14%, rgba(126,112,255,.08), transparent 32%),
    rgba(255,255,255,.44) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 18px 42px rgba(17,24,39,.045) !important;
  color: #0b0b0b !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.account-sidebar-help-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.account-sidebar-help-icon {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.56) !important;
  border: 1px solid rgba(12,18,28,.08) !important;
}

.account-sidebar-help-text {
  margin: 0 0 14px !important;
  color: rgba(11,11,11,.55) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}

.account-sidebar-help-button {
  min-height: 42px !important;
  display: inline-flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 13px !important;
  border: 1px solid rgba(12,18,28,.08) !important;
  background: rgba(255,255,255,.52) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
  color: #0b0b0b !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  transition: transform .18s ease, background .18s ease !important;
}

.account-sidebar-help-card:hover .account-sidebar-help-button {
  transform: translateY(-1px) !important;
  background: rgba(255,255,255,.68) !important;
}

@media screen and (max-width: 991px) {
  .account-sidebar-menu {
    max-width: 100% !important;
    padding: 20px !important;
    border-radius: 22px !important;
  }

  #recent-purchase-link {
    min-height: 190px !important;
  }

  #rp-img {
    height: 118px !important;
  }
}
