/* Button Styles - Matching Connect Wallet Button */
@import "tailwindcss";

.btn-gradient-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  padding: 12px 24px;
}

.btn-gradient-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.btn-gradient-secondary {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4);
  padding: 8px 16px;
}

.btn-gradient-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(107, 114, 128, 0.6);
}

.btn-gradient-small {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  padding: 8px 16px;
}

.btn-gradient-small:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}
body {
  padding: 10px;
  font-family: sans-serif;
}


button {
  @apply bg-blue-500 px-3 py-2 text-white rounded-md hover:opacity-90 cursor-pointer transition;
}

input {
  @apply bg-slate-900 py-2 px-3 rounded-md ring-slate-700/50 ring ring-inset;
}

a {
  @apply text-blue-500 underline font-medium hover:text-blue-400 transition;
}

/* Button Styles - Matching Connect Wallet Button */

.btn-gradient-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0px 0px rgba(102, 126, 234, 0.4);
  padding: 12px 24px;
}
.btn-gradient-primary:hover {
  transform: translateY(-0px);
  box-shadow: 0 0px 0px rgba(102, 126, 234, 0.0);
}

.btn-gradient-secondary {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0px 0px rgba(107, 114, 128, 0.4);
  padding: 8px 16px;
}
.btn-gradient-secondary:hover {
  transform: translateY(-0px);
  box-shadow: 0 0px 4px rgba(107, 114, 128, 0.6);
}

.btn-gradient-small {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0px 0px rgba(102, 126, 234, 0.4);
  padding: 8px 16px;
}.btn-gradient-small:hover {
  transform: translateY(-0px);
  box-shadow: 0 0px 0px rgba(102, 126, 234, 0.6);
}

/* Contact Widget Styles */
.contact-widget {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: auto;
  margin-bottom: 20px;
  position: relative;
  z-index: 30;
}
.contact-widget-tab {
  background: linear-gradient(90deg, #6366f1 0%, #22d3ee 100%);
  color: #fff;
  padding: 12px 24px;
  border-radius: 16px 16px 0 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.contact-widget-tab:hover {
  background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%);
}
.contact-widget-box {
  background: #18181b;
  color: #e0e7ef;
  border-radius: 16px 16px 0 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
  min-width: 270px;
  max-width: 320px;
  padding: 20px 20px 16px 20px;
  margin-bottom: 0;
  animation: contactWidgetSlideIn 0.25s cubic-bezier(0.4,0,0.2,1);
}
@keyframes contactWidgetSlideIn {
  from { transform: translateY(20px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.contact-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.contact-us-close {
  background: none;
  border: none;
  color: #e0e7ef;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  border-radius: 4px;
  transition: background 0.15s;
}
.contact-us-close:hover {
  background: #27272a;
}
.contact-widget-content {
  font-size: 0.98rem;
  margin-bottom: 4px;
}
.contact-widget-link {
  color: #38bdf8;
  text-decoration: underline;
  font-weight: 600;
  word-break: break-all;
  display: inline-block;
  margin-top: 6px;
}
.contact-widget-link:hover {
  color: #818cf8;
}

/* Magical Sparkle Animation */
@keyframes sparkle {
  0% {
    text-shadow: 
      0 0 0px #fff,
      0 0 0px #fff,
      0 0 0px #fff;
    filter: brightness(1);
  }
  10% {
    text-shadow: 
      -2px -1px 4px #fbbf24,
      1px 2px 6px #f59e0b,
      2px -2px 8px #fde047;
    filter: brightness(1.2);
  }
  20% {
    text-shadow: 
      -4px -2px 8px #fbbf24,
      2px 4px 12px #f59e0b,
      4px -4px 16px #fde047,
      -3px 3px 10px #facc15;
    filter: brightness(1.4);
  }
  30% {
    text-shadow: 
      -6px -3px 12px #fbbf24,
      3px 6px 18px #f59e0b,
      6px -6px 24px #fde047,
      -5px 5px 15px #facc15,
      0px 0px 20px #fef3c7;
    filter: brightness(1.6);
  }
  40% {
    text-shadow: 
      -4px -2px 8px #fbbf24,
      2px 4px 12px #f59e0b,
      4px -4px 16px #fde047,
      -3px 3px 10px #facc15;
    filter: brightness(1.4);
  }
  50% {
    text-shadow: 
      -2px -1px 4px #fbbf24,
      1px 2px 6px #f59e0b,
      2px -2px 8px #fde047;
    filter: brightness(1.2);
  }
  100% {
    text-shadow: 
      0 0 0px #fff,
      0 0 0px #fff,
      0 0 0px #fff;
    filter: brightness(1);
  }
}

/* Removed fairy-dust animation as it's no longer needed */

.sparkle-text {
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
}

.sparkle-text.sparkling {
  animation: sparkle 2s ease-in-out;
}

.sparkle-text::before,
.sparkle-text::after {
  content: '✨';
  position: absolute;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
}

.sparkle-text::before {
  top: -8px;
  left: -15px;
}

.sparkle-text::after {
  bottom: -8px;
  right: -15px;
}

.sparkle-text.sparkling::before,
.sparkle-text.sparkling::after {
  opacity: 1;
}