/* =========================
   GLASS RADIO GROUP
   ========================= */

.glass-radio-group {
  --bg: rgba(6, 0, 0, 0.06);
  --text: #e5e5e5;

  display: flex;
  position: relative;

  background: var(--bg);
  border-radius: 1rem;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    inset 1px 1px 4px rgba(255, 255, 255, 0.2),
    inset -1px -1px 6px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.15);

  overflow: hidden;
  width: fit-content;
  z-index: 1100;
    position: fixed;
  bottom: 80px;
right:-15px;
  transform: scale(0.8);

}
.glass-radio-group input {
  display: none;
}

.glass-radio-group label {
  flex: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 90px;

  font-size: 14px;
  padding: 0.8rem 1.6rem;

  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.3px;

  color: var(--text);

  position: relative;
  z-index: 1101;

  transition: color 0.3s ease-in-out;
}

.glass-radio-group label:hover {
  color: #fff;
}

.glass-radio-group input:checked + label {
  color: #fff;
}

/* GLIDER (NOW 2 OPTIONS ONLY) */
.glass-glider {
  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 50%; /* IMPORTANT FIX */

  border-radius: 1rem;

  z-index: 1000;

  transition:
    transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56),
    background 0.4s ease-in-out,
    box-shadow 0.4s ease-in-out;
}

/* GOLD (LEFT = 0%) */
#glass-gold:checked ~ .glass-glider {
  transform: translateX(0%);

  background: linear-gradient(
    135deg,
    #ffd70055,
    #ffcc00
  );

  box-shadow:
    0 0 18px rgba(0, 18, 31, 0.5),
    0 0 10px rgba(0, 2, 3, 0.4) inset;
}

/* PLATINUM (RIGHT = 100%) */
#glass-platinum:checked ~ .glass-glider {
  transform: translateX(100%);

  background: linear-gradient(
    135deg,
    #4b94e355,
    #075084
  );

  box-shadow:
    0 0 18px rgba(0, 18, 31, 0.5),
    0 0 10px rgba(0, 2, 3, 0.4) inset;
}
.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .glass {
  position: relative;
  width: 180px;
  height: 200px;
  background: linear-gradient(#fff2, transparent);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  border-radius: 10px;
  margin: 0 -45px;
  backdrop-filter: blur(10px);
  transform: rotate(calc(var(--r) * 1deg));
}

.container:hover .glass {
  transform: rotate(0deg);
  margin: 0 10px;
}

.container .glass::before {
  content: attr(data-text);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.container .glass svg {
  font-size: 2.5em;
  fill: #fff;
}