/* ==========================================
   ☕ DONATION BUTTON & BADGES
   ========================================== */

.donation-btn {
  position: absolute;
  bottom: 2.2rem;
  left: calc(200px + 3.5rem);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  border: 2px solid rgba(251, 191, 36, 0.6);
  color: #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 15px rgba(251, 191, 36, 0.2);
  text-decoration: none;
}

.donation-btn::before {
  content: '';
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(251, 191, 36, 0.9), transparent 40%);
  animation: spinAura 3s linear infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.donation-btn.pulsing::before,
.donation-btn:hover::before { opacity: 1; }

.donation-btn:hover {
  transform: scale(1.1) translateY(-4px);
  background: rgba(30, 41, 59, 0.95);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 30px rgba(251, 191, 36, 0.5);
  border-color: #f59e0b;
  color: #fcd34d;
}

.donation-btn svg { width: 24px; height: 24px; transition: transform 0.4s ease; }
.coffee-svg { width: 24px !important; height: 24px !important; color: #fbbf24; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); transition: all 0.4s ease; }
.donation-btn:hover .coffee-svg { color: #ffffff; transform: scale(1.1) rotate(-5deg); filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.7)); }

.aroma-path-1, .aroma-path-2, .aroma-path-3 { opacity: 1; transform-origin: center center; animation: aroma-pulse 2s infinite ease-in-out; }
.aroma-path-1 { animation-delay: 0s; }
.aroma-path-2 { animation-delay: 0.3s; }
.aroma-path-3 { animation-delay: 0.6s; }

@keyframes aroma-pulse {
  0% { opacity: 0.1; transform: translateY(0px) scaleY(0.6); }
  50% { opacity: 1; transform: translateY(-5px) scaleY(1.1); }
  100% { opacity: 0.1; transform: translateY(-10px) scaleY(1.2); }
}

.donation-btn:hover svg { transform: rotate(-15deg) scale(1.1); }

.donation-callout-card {
  position: absolute;
  bottom: calc(100% + 20px);
  left: 50%;
  transform: translateX(-20%) scale(0);
  transform-origin: bottom left;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 40%, #fbbf24 50%, #d97706 60%, #f59e0b 100%);
  background-size: 200% 200%;
  animation: cardShineBg 3s infinite linear;
  padding: 14px 20px;
  border-radius: 16px 16px 16px 4px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(245, 158, 11, 0.4);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.donation-callout-card::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 15%;
  border-width: 9px 9px 0 0;
  border-style: solid;
  border-color: #d97706 transparent transparent transparent;
}

.callout-title { font-size: 1.15rem; font-weight: 800; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
.callout-subtitle { font-size: 0.85rem; font-weight: 500; opacity: 0.95; }

.donation-callout-card.show,
.donation-btn:hover .donation-callout-card { transform: translateX(-20%) scale(1); opacity: 1; pointer-events: auto; }

@keyframes spinAura { 100% { transform: rotate(360deg); } }
@keyframes cardShineBg { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ==========================================
   🚧 DEVELOPMENT BADGE
   ========================================== */
.development-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  padding: 0.4rem 1.5rem;
  border-radius: 0 0 12px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  z-index: 9999;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: none;
  white-space: nowrap;
  pointer-events: none; 
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
}

.development-badge.hidden { 
  opacity: 0; 
  display: none; 
}

.version-separator { 
  margin: 0 8px; 
  opacity: 0.6; 
}

#version-text { 
  font-family: monospace; 
  letter-spacing: 0.5px; 
  color: #fef08a; 
  pointer-events: auto; 
  transition: color 0.2s ease;
  text-decoration: none;
}

#version-text:hover {
  color: #ffffff;
}

/* ==========================================
   ⚡ POWERED BY BADGE
   ========================================== */
.powered-by-badge {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.8rem;
  color: #94a3b8;
  z-index: 100;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none; /* Keeps container transparent to clicks */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

/* 🔥 NEW: Styles for the clickable brand link */
.brand-link {
  pointer-events: auto; /* Re-enables clicks just for the text */
  color: #249afb;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;
}

.brand-link:hover {
  color: #71bbf5;
  text-shadow: 0 0 8px rgba(36, 154, 251, 0.5);
}

.loading-powered-by {
  right: auto; 
  left: 50%; 
  transform: translateX(-50%); 
  bottom: 2rem;
  background: transparent; 
  border: none; 
  box-shadow: none; 
  opacity: 0.7;
}