/**
 * Presale — Tooltips, Discount Icons & Animations
 */

.presale-tooltip {
  position: fixed; background: rgba(11, 17, 23, 0.75);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(125, 167, 244, 0.4); border-radius: 16px;
  padding: 1.25rem 1.5rem; max-width: 340px;
  font-size: 0.875rem; line-height: 1.7; color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(125, 167, 244, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  opacity: 0; transform: translateY(-10px) scale(0.95);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto; z-index: 99999;
}
.presale-tooltip.active { opacity: 1; transform: translateY(0) scale(1); }

.presale-tooltip::before {
  content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 10px solid rgba(11, 17, 23, 0.75); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.presale-tooltip.below::before { bottom: auto; top: -10px; border-top: none; border-bottom: 10px solid rgba(11, 17, 23, 0.75); }
.presale-tooltip strong { color: #7da7f4; font-weight: 600; }

.presale-tooltip-close {
  position: absolute; top: 0.5rem; right: 0.5rem; width: 24px; height: 24px;
  border: none; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6);
  border-radius: 50%; font-size: 1.25rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0;
}
.presale-tooltip-close:hover { background: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.9); transform: scale(1.1); }

@keyframes tooltip-fade-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

.discount-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #34d399); color: #fff; font-size: 1.25rem;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); animation: pulse-discount 2s ease-in-out infinite;
}

@keyframes pulse-discount {
  0%, 100% { box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); transform: scale(1); }
  50% { box-shadow: 0 6px 25px rgba(16, 185, 129, 0.6); transform: scale(1.05); }
}

@keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }