/* Support Button Base Styles - Compact for Navbar */
.supportButton {
  position: relative;
  overflow: hidden;
  font-weight: 700;
  border: none;
  border-radius: var(--mantine-radius-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 32px;
  height: 32px;
  padding: 0 var(--mantine-spacing-xs);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
    );
    transition: left 0.5s;
  }

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

    &::before {
      left: 100%;
    }
  }

  &:active {
    transform: translateY(0);
  }


}

.supportButtonMediaQuery {
  @container (max-width: theme('screens.sm')) {
    min-height: 28px;
    height: 28px;
    padding: 0 var(--mantine-spacing-xs);
    font-size: 11px;
  }
}

/* Primary Variant - Blue to Purple Gradient */
.supportButtonPrimary {
  background: linear-gradient(135deg,
    var(--mantine-color-blue-6) 0%,
    var(--mantine-color-violet-6) 100%);

  &:hover {
    background: linear-gradient(135deg,
      var(--mantine-color-blue-7) 0%,
      var(--mantine-color-violet-7) 100%);
  }
}

/* Gift Variant - Green to Teal Gradient */
.supportButtonGift {
  background: linear-gradient(135deg,
    var(--mantine-color-green-6) 0%,
    var(--mantine-color-teal-6) 100%);

  &:hover {
    background: linear-gradient(135deg,
      var(--mantine-color-green-7) 0%,
      var(--mantine-color-teal-7) 100%);
  }
}

/* Heart Variant - Pink to Red Gradient */
.supportButtonHeart {
  background: linear-gradient(135deg,
    var(--mantine-color-pink-6) 0%,
    var(--mantine-color-red-6) 100%);

  &:hover {
    background: linear-gradient(135deg,
      var(--mantine-color-pink-7) 0%,
      var(--mantine-color-red-7) 100%);
  }
}

/* Sparkle Variant - Yellow to Orange Gradient */
.supportButtonSparkle {
  background: linear-gradient(135deg,
    var(--mantine-color-yellow-5) 0%,
    var(--mantine-color-orange-6) 100%);

  &:hover {
    background: linear-gradient(135deg,
      var(--mantine-color-yellow-6) 0%,
      var(--mantine-color-orange-7) 100%);
  }
}

/* Royal Variant - Purple to Indigo Gradient */
.supportButtonRoyal {
  background: linear-gradient(135deg,
    var(--mantine-color-violet-6) 0%,
    var(--mantine-color-indigo-6) 100%);

  &:hover {
    background: linear-gradient(135deg,
      var(--mantine-color-violet-7) 0%,
      var(--mantine-color-indigo-7) 100%);
  }
}

/* Premium Variant - Cyan to Teal Gradient */
.supportButtonPremium {
  background: linear-gradient(135deg,
    var(--mantine-color-cyan-6) 0%,
    var(--mantine-color-teal-6) 100%);

  &:hover {
    background: linear-gradient(135deg,
      var(--mantine-color-cyan-7) 0%,
      var(--mantine-color-teal-7) 100%);
  }
}

/* Button Text - Compact */
.supportButtonText {
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  // line-height: 1.2;
}

/* Button Icon - Clean and Minimal */
.supportButtonIcon {
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.2s ease;
  flex-shrink: 0;

  .supportButton:hover & {
    color: white;
    transform: scale(1.1);
  }

  @media (max-width: theme('screens.sm')) {
    width: 12px;
    height: 12px;
  }
}

/* Remove chevron styles since we removed it */

/* Hover Card - More Compact */
.supportHoverCard {
  background: light-dark(
    linear-gradient(135deg, var(--mantine-color-yellow-0) 0%, var(--mantine-color-white) 100%),
    linear-gradient(135deg, var(--mantine-color-dark-7) 0%, var(--mantine-color-dark-6) 100%)
  );
  border: 1px solid light-dark(
    var(--mantine-color-yellow-3),
    var(--mantine-color-yellow-8)
  );
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
  max-width: 240px;
  padding: var(--mantine-spacing-sm);

  @media (prefers-color-scheme: dark) {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }
}

/* Support Badge - Smaller */
.supportBadge {
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  font-size: 10px;
  padding: 4px 8px;
}

/* Animations - More Noticeable for Navbar */
@keyframes subtleBounce {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.1);
  }
  70% {
    transform: translateY(0) scale(1);
  }
  85% {
    transform: translateY(-1px) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* Single pulse animation using CSS custom property */
@keyframes subtlePulse {
  0%, 100% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  50% {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15), 0 0 8px 1px var(--glow-color);
  }
}

/* Apply variant-specific glow effects using CSS custom properties */
.supportButton.supportButtonSparkle {
  --glow-color: rgba(255, 193, 7, 0.8);
  animation: subtlePulse 3s infinite ease-in-out;
}

.supportButton.supportButtonGift {
  --glow-color: rgba(34, 197, 94, 0.8);
  animation: subtlePulse 3s infinite ease-in-out;
}

.supportButton.supportButtonRoyal {
  --glow-color: rgba(139, 69, 219, 0.8);
  animation: subtlePulse 3s infinite ease-in-out;
}

.supportButton.supportButtonPremium {
  --glow-color: rgba(6, 182, 212, 0.8);
  animation: subtlePulse 3s infinite ease-in-out;
}

.supportButton.supportButtonSparkle .supportButtonIcon,
.supportButton.supportButtonGift .supportButtonIcon,
.supportButton.supportButtonRoyal .supportButtonIcon,
.supportButton.supportButtonPremium .supportButtonIcon {
  animation: subtleBounce 3s infinite ease-in-out;
}
