.glass-pill {
  position: relative;
  width: 190px;
  height: 60px;
  border-radius: 50px;

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

  overflow: hidden;
  cursor: pointer;

  font-size: 16px;
  font-weight: 600;

  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);

  transition: 0.45s;
  margin-top: 20px;
}
.glass-pill:not(.glassyy) {
  color: #0b5ed7;

  border: 1px solid rgba(255, 255, 255, 0.55);

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(205, 230, 255, 0.95),
    rgba(160, 210, 255, 0.9)
  );

  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.95),
    inset 0 0 25px rgba(90, 170, 255, 0.18),
    0 10px 22px rgba(0, 119, 255, 0.15);
}
/* 
.glass-pill:not(.glassyy)::before {
  content: "";
  position: absolute;

  top: 0;
  left: -120%;

  width: 60%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.9),
    transparent
  );

  transform: skewX(-25deg);
  transition: 0.8s;
} */

.glass-pill:not(.glassyy):hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 1),
    inset 0 0 35px rgba(90, 170, 255, 0.25),
    0 25px 45px rgba(0, 119, 255, 0.28),
    0 0 40px rgba(120, 200, 255, 0.25);
}

.glass-pill:not(.glassyy):hover::before {
  left: 150%;
}
.glass-pill.glassyy {
  color: #8a4b08;

  border: 1px solid rgba(255, 255, 255, 0.55);

  background: linear-gradient(
    135deg,
    rgba(255, 248, 240, 0.72),
    rgba(255, 214, 170, 0.38),
    rgba(255, 184, 108, 0.62),
    rgba(255, 241, 227, 0.26)
  );

  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    inset 0 0 26px rgba(255, 193, 122, 0.22),
    inset 10px 0 18px -10px rgba(255, 186, 92, 0.9),
    inset -10px 0 18px -10px rgba(255, 125, 0, 0.3),
    0 8px 22px rgba(255, 153, 51, 0.16),
    0 0 18px rgba(255, 184, 108, 0.28),
    0 0 34px rgba(255, 210, 140, 0.18);
  margin-top: 20px;
}
/* Orange moving shine */
.glass-pill::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -120%;

  width: 60%;
  height: 180%;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.08) 80%,
    transparent 100%
  );

  transform: skewX(-25deg);
  animation: orangeShine 3s linear infinite;

  pointer-events: none;
  z-index: 1;
}

/* Bottom liquid glow */
.glass-pill.glassyy::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -18%;
  height: 60%;

  border-radius: 45% 55% 50% 50% / 38% 38% 62% 62%;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 194, 110, 0.45),
    rgba(255, 255, 255, 0.08)
  );

  filter: blur(8px);
  animation: orangeWave 4s ease-in-out infinite;

  pointer-events: none;
  z-index: 0;
}

/* Text always above animation */
.glass-pill.glassyy span,
.glass-pill.glassyy {
  position: relative;
  z-index: 2;
}

.glass-pill.glassyy:hover {
  transform: translateY(-3px) scale(1.03);

  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.98),
    inset 0 0 30px rgba(255, 193, 122, 0.35),
    inset 12px 0 20px -10px rgba(255, 186, 92, 1),
    inset -12px 0 20px -10px rgba(255, 125, 0, 0.4),
    0 12px 30px rgba(255, 153, 51, 0.25),
    0 0 25px rgba(255, 184, 108, 0.45);
}

@keyframes orangeShine {
  0% {
    left: -120%;
  }
  100% {
    left: 160%;
  }
}

@keyframes orangeWave {
  0%,
  100% {
    transform: translateX(-2%) scaleY(0.95);
  }
  50% {
    transform: translateX(2%) scaleY(1.08);
  }
}



/* ========================================
   BLUE GLASSY LIQUID BUTTON
======================================== */

.glass-pill.blueglassy {
  color: #0756a8;

  border: 1px solid rgba(255, 255, 255, 0.62);

  background: linear-gradient(
    135deg,
    rgba(245, 251, 255, 0.82),
    rgba(170, 220, 255, 0.42),
    rgba(80, 170, 255, 0.62),
    rgba(225, 245, 255, 0.3)
  );
/* 
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.98),
    inset 0 0 26px rgba(80, 175, 255, 0.24),
    inset 10px 0 18px -10px rgba(80, 190, 255, 0.95),
    inset -10px 0 18px -10px rgba(0, 110, 255, 0.35),
    0 8px 22px rgba(0, 130, 255, 0.18),
    0 0 18px rgba(100, 195, 255, 0.32),
    0 0 34px rgba(140, 215, 255, 0.2); */

  margin-top: 20px;
}

/* Blue moving shine */
.glass-pill.blueglassy::before {
  content: "";
  position: absolute;

  top: -40%;
  left: -120%;

  width: 60%;
  height: 180%;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.08) 80%,
    transparent 100%
  );

  transform: skewX(-25deg);
  animation: blueShine 3s linear infinite;

  pointer-events: none;
  z-index: 1;
}

/* Blue bottom liquid glow */
.glass-pill.blueglassy::after {
  content: "";
  position: absolute;

  left: -20%;
  right: -20%;
  bottom: -18%;

  height: 60%;

  border-radius:
    45% 55% 50% 50% /
    38% 38% 62% 62%;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.08),
    rgba(75, 175, 255, 0.5),
    rgba(160, 225, 255, 0.42),
    rgba(255, 255, 255, 0.08)
  );

  filter: blur(8px);

  animation: blueWave 4s ease-in-out infinite;

  pointer-events: none;
  z-index: 0;
}

/* Keep text above animations */
.glass-pill.blueglassy span {
  position: relative;
  z-index: 2;
}

/* Blue hover effect */
.glass-pill.blueglassy:hover {
  transform: translateY(-3px) scale(1.03);

  /* box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 1),
    inset 0 0 32px rgba(70, 180, 255, 0.38),
    inset 12px 0 20px -10px rgba(80, 195, 255, 1),
    inset -12px 0 20px -10px rgba(0, 105, 255, 0.48),
    0 12px 30px rgba(0, 130, 255, 0.28),
    0 0 25px rgba(90, 195, 255, 0.5),
    0 0 45px rgba(120, 210, 255, 0.28); */
}

/* Blue shine animation */
@keyframes blueShine {
  0% {
    left: -120%;
  }

  100% {
    left: 160%;
  }
}

/* Blue liquid wave animation */
@keyframes blueWave {
  0%,
  100% {
    transform: translateX(-2%) scaleY(0.95);
  }

  50% {
    transform: translateX(2%) scaleY(1.08);
  }
}