/*
 * Eduval — Floating elements (back-to-top, floating cart, menu-opened overrides)
 */

#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--white);
  color: var(--color-heading);
  border: 1px solid color-mix(in srgb, var(--color-heading) 14%, transparent);
  width: 45px;
  height: 45px;
  border-radius: 5px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transition: all 0.3s;
  opacity: 0;
  visibility: hidden;
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
}

#back-to-top:hover {
  background: var(--bg-blue);
  color: var(--white);
  border-color: color-mix(in srgb, var(--bg-blue) 70%, transparent);
  transform: translateY(-3px);
}

body.menu-opened #back-to-top {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
  z-index: -1 !important;
}

#floating-cart {
  position: fixed;
  bottom: 85px;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--white);
  color: var(--color-heading);
  border: 1px solid color-mix(in srgb, var(--color-heading) 14%, transparent);
  width: 45px;
  height: 45px;
  border-radius: 5px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transition: all 0.3s;
}

#floating-cart .badge {
  background: var(--color-secondary);
  color: var(--white);
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 10px;
  line-height: 1;
}

#floating-cart:hover {
  background: var(--bg-blue);
  color: var(--white);
  border-color: color-mix(in srgb, var(--bg-blue) 70%, transparent);
}

body.menu-opened #floating-cart {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
  z-index: -1 !important;
}

body.menu-opened .eduval-mobile-bottom-nav {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.menu-opened {
  overflow: hidden !important;
}