/* Floating "Buy Me a Coffee" Button */
.sticky-coffee-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  
  display: flex;
  align-items: center;
  justify-content: center; /* Important for centering */
  /* gap: 10px;  <-- REMOVE THIS. It pushes the icon left on mobile. */
  
  background-color: #FFDD00;
  color: #000000;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
  
  padding: 12px 20px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  
  white-space: nowrap;
  overflow: hidden; 
}

/* Hover Effect */
.sticky-coffee-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.coffee-icon {
  font-size: 18px;
  flex-shrink: 0; 
}

/* ADD MARGIN HERE INSTEAD OF GAP */
.coffee-text {
  margin-left: 10px; 
}

/* MOBILE OPTIMIZATION */
@media (max-width: 480px) {
  .sticky-coffee-btn {
    bottom: 15px;
    left: 15px;
    font-size: 13px;
    
    /* FORCE PERFECT CIRCLE */
    width: 50px;
    height: 50px;
    padding: 0; 
    border-radius: 50px;
  }
  
  .coffee-text {
    max-width: 0;
    opacity: 0;
    margin-left: 0; /* Remove the margin so the icon centers perfectly */
    transition: all 0.3s ease;
  }

  /* Animation Triggers */
  .wiggle-effect {
    animation: expand-pill 2.5s ease-in-out forwards;
  }
  
  .wiggle-effect .coffee-text {
    animation: reveal-text 2.5s ease-in-out forwards;
  }
}

/* DESKTOP ANIMATION */
@media (min-width: 481px) {
  .wiggle-effect {
    animation: wiggle 1.5s ease-in-out;
  }
}

/* KEYFRAMES */

@keyframes wiggle {
  0% { transform: rotate(0deg) scale(1); }
  10% { transform: rotate(-10deg) scale(1.1); }
  20% { transform: rotate(10deg) scale(1.1); }
  30% { transform: rotate(-10deg) scale(1.1); }
  40% { transform: rotate(10deg) scale(1.1); }
  50% { transform: rotate(-5deg) scale(1.1); }
  60% { transform: rotate(5deg) scale(1.1); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes expand-pill {
  0% { width: 50px; }
  20% { width: 170px; }
  80% { width: 170px; }
  100% { width: 50px; }
}

/* UPDATED: We now animate the Margin-Left too */
@keyframes reveal-text {
  0% {
    opacity: 0;
    max-width: 0;
    margin-left: 0; /* Start with no margin */
  }
  20% {
    opacity: 1;
    max-width: 120px;
    margin-left: 10px; /* Add margin as it grows */
  }
  80% {
    opacity: 1;
    max-width: 120px;
    margin-left: 10px;
  }
  100% {
    opacity: 0;
    max-width: 0;
    margin-left: 0; /* Remove margin as it closes */
  }
}