/* ========================================================================== 
   CSS RESET & VARIABLES 
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --font-family: 'Poppins', sans-serif;
  --bg-color: #ffffff;
  --text-color: #333333;
  --header-bg: #f8f9fa;
  --accent-color: #4a90e2;
  --border-color: #e0e0e0;
  --cell-bg: #ffffff;
  --cell-taken: rgba(0,0,0,0.05);
  --cell-selected: #4a90e2;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --header-bg: #1f1f1f;
  --accent-color: #81a1c1;
  --border-color: #81a1c1;
  --cell-bg: #1a1a1a;
  --cell-taken: rgba(255,255,255,0.05);
  --cell-selected: #81a1c1;
}

/* ========================================================================== 
   GLOBAL ELEMENTS 
   ========================================================================== */
body {
  font-family: var(--font-family);
  background: var(--bg-color);
  color: var(--text-color);
}

/* ========================================================================== 
   GRID CONTAINER & CELLS 
   ========================================================================== */
.grid-container {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  padding: 0;
  border: .5px solid var(--border-color);
  border-radius: 1px;
}

#pixel-grid {
  display: grid;
  grid-template-columns: repeat(100, 10px);
  grid-template-rows: repeat(100, 10px);
  gap: 1px;
  background: var(--border-color);
}

.cell {
  width: 10px;
  height: 10px;
  background: var(--cell-bg);
  cursor: pointer;
}

.cell.taken {
  background: var(--cell-taken);
  cursor: not-allowed;
}

.cell.selected {
  background: var(--cell-selected);
}

/* ========================================================================== 
   OVERLAYS (tooltip stays on top) 
   ========================================================================== */
.ad-wrapper {
  position: absolute;
  z-index: 9999; /* ensures tooltips float above everything */
  pointer-events: auto;
}

.ad-wrapper .ad-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: auto;
}

.ad-wrapper .ad-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(+1px);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.ad-wrapper .ad-image:hover + .ad-tooltip,
.ad-wrapper .ad-tooltip:hover {
  opacity: 1;
  pointer-events: auto;
}

.ad-wrapper .ad-tooltip img.tooltip-image-preview {
  display: block;
  margin: 0 auto 8px;
  max-width: 200px;
  max-height: 200px;
  width: 200px;
  height: auto;
  object-fit: contain;
}

/* ========================================================================== 
   SOCIAL ICONS TOOLTIP 
   ========================================================================== */
.icons_container {
  display: inline-flex;
  gap: 6px;
  justify-content: center; /* center all icons */
}

.icons_container .icon {
  position: relative;
  text-decoration: none;
}

.icons_container .icon span {
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.icons_container .icon .tooltip {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: var(--text-color);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  white-space: nowrap;
}

.icons_container .icon:hover span {
  background: var(--accent-color);
  color: #fff;
}

.icons_container .icon:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
}

/* Brand colors for each icon */
.icons_container .icon.website span,
.icons_container .icon.website .tooltip {
  background: var(--accent-color);
  color: #fff;
}

.icons_container .icon.youtube span,
.icons_container .icon.youtube .tooltip {
  background: #FF0000;
  color: #fff;
}

.icons_container .icon.twitter span,
.icons_container .icon.twitter .tooltip {
  background: #1DA1F2;
  color: #fff;
}

.icons_container .icon.instagram span,
.icons_container .icon.instagram .tooltip {
  background: #E1306C;
  color: #fff;
}

.icons_container .icon.tiktok span,
.icons_container .icon.tiktok .tooltip {
  background: #000;
  color: #fff;
}

/* XRPL transaction link icon */
.icons_container .icon.transaction span,
.icons_container .icon.transaction .tooltip {
  background: var(--accent-color);
  color: #fff;
}

.icons_container .icon span i {
  color: inherit;
}

/* ========================================================================== 
   BUTTONS 
   ========================================================================== */
.button,
button {
  background: var(--accent-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  transition: background 0.2s;
}

.button:hover,
button:hover {
  background: #357ABD;
}

.clear-button {
  background: #e74c3c;
}

.clear-button:hover {
  background: #c0392b;
}

.proceed-button {
  background: #4caf50;
}

.proceed-button:hover {
  background: #388e3c;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0;
}

/* ========================================================================== 
   BUY PAGE 
   ========================================================================== */
.buy-page h1 {
  text-align: center;
  margin: 1rem;
}

.buy-page p {
  text-align: center;
  margin: 0.5rem 0;
}

.xaman-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  background: #2557D6;
  color: #fff;
  margin: 1rem auto;
  transition: opacity 0.2s;
}

.xaman-button:hover {
  opacity: 0.9;
}

.xaman-logo {
  width: 231px;
  height: 32px;
  margin-bottom: 0.5rem;
}

.button-text {
  line-height: 1.2;
}

.qr-wrapper {
  position: relative;
  display: inline-block;
  margin: 1rem auto;
}

.qr-wrapper .qr-code-img {
  display: block;
}

.qr-wrapper .qr-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.85;
  background: #fff;
  border-radius: 4px;
  padding: 2px;
}

/* ========================================================================== 
   FOOTER 
   ========================================================================== */
.site-footer p {
  font-size: 0.9rem;
  color: var(--text-color);
  opacity: 0.7;
}

/* ========================================================================== 
   TOAST NOTIFICATIONS 
   ========================================================================== */
.toast {
  display: flex;
  align-items: center;
  background: rgba(55,65,81,0.9);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  font-size: 0.875rem;
  animation: slideIn 0.3s ease, fadeOut 0.3s ease 4.7s forwards;
}

.toast button {
  margin-left: 1rem;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.875rem;
}

@keyframes slideIn {
  from {
    transform: translateX(200%) translateY(-50%);
    opacity: 0;
  }
  to {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

/* ========================================================================== 
   DISABLED BUTTON STATE 
   ========================================================================== */
button:disabled,
button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/*─────────────────────────────────────────────────────────────────────────*\
  Your existing site-wide CSS goes here… (everything you already had)
\*─────────────────────────────────────────────────────────────────────────*/

/* Animated Banner (appended) */
.banner {
  position: center;
  width: 100%;
  height: 2.5em;                   /* adjust if you want taller/shorter */
  /* overflow: hidden; */
  background: transparent;
  text-align: center;
  font-weight: bold;
  font-size: 3.5rem;
  color: #222;                     /* light-mode text */
}
.dark .banner {
  color: #ddd;                     /* dark-mode text */
}

/* Each word slides over an 88s cycle, delayed by 8s */
.banner span {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(100%);
  animation: slideWords 88s linear infinite both;
}
.banner span:nth-child(1)  { animation-delay:   0s; }
.banner span:nth-child(2)  { animation-delay:   8s; }
.banner span:nth-child(3)  { animation-delay:  16s; }
.banner span:nth-child(4)  { animation-delay:  24s; }
.banner span:nth-child(5)  { animation-delay:  32s; }
.banner span:nth-child(6)  { animation-delay:  40s; }
.banner span:nth-child(7)  { animation-delay:  48s; }
.banner span:nth-child(8)  { animation-delay:  56s; }
.banner span:nth-child(9)  { animation-delay:  64s; }
.banner span:nth-child(10) { animation-delay:  72s; }
.banner span:nth-child(11) { animation-delay:  80s; }

/* Keyframes: fade in 0–0.88s, hold until ~7.04s, fade out by ~7.92s */
@keyframes slideWords {
  0%    { opacity: 0; transform: translateY(100%); }
  1%    { opacity: 1; transform: translateY(0);     }  /* ~0.88s */
  8%    { opacity: 1; transform: translateY(0);     }  /* ~7.04s */
  9%    { opacity: 0; transform: translateY(-100%);  }  /* ~7.92s */
  100%  { opacity: 0; transform: translateY(-100%);  }
}

/* Modern Grid Container */
.grid-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 600px;
  @apply bg-background border border-border rounded-xl shadow-lg;
  backdrop-filter: blur(10px);
}

/* Card Enhancements */
.modern-card {
  @apply bg-card/50 backdrop-blur-sm border border-border/50 rounded-xl shadow-lg;
  background: linear-gradient(135deg, hsl(var(--card) / 0.8), hsl(var(--card) / 0.6));
}

/* Button Hover Effects */
.modern-button {
  @apply transition-all duration-200 ease-in-out;
}

.modern-button:hover {
  @apply transform -translate-y-0.5 shadow-lg;
}

/* Make the eye-icon gray by default */
.icon.view-details span i {
  color: gray;
}

/* On hover, give the entire icon a light-gray background instead of blue,
   and darken the icon slightly */
.icon.view-details:hover {
  background-color: #gray; /* a light gray */
}

.icon.view-details:hover span i {
  color: darkgray;
}