/**
 * Custom overrides — edit this file to change colors/layout.
 * Loaded after index-CYhNtko2.css in index.html and vote/index.html.
 */

/* Site-wide theme (vote page, home, modals) */
/* DexScreener nav CSS sets body colors; keep the vote app theme on #root */
body {
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

:root {
  /* Gold vote button / accents */
  --boost: 43 96% 56%;
  --boost-foreground: 220 20% 7%;
  --boost-glow: 43 96% 45%;

  /* Page background */
  --background: 220 20% 7%;
  --foreground: 210 20% 92%;
  --card: 220 18% 12%;
  --border: 220 14% 22%;
  --muted-foreground: 215 12% 55%;
}

/* Vote modal card (approximate — rendered inside #root) */
#root .rounded-2xl.border {
  border-radius: 1rem !important;
}

/* Floating "Vote" button on chart */
#root .bg-boost {
  /* uses --boost above */
}

#root button.k2oal4-41,
#root button.ds-vote-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#root button.k2oal4-41::before,
#root button.ds-vote-fab::before {
  content: "";
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='black' d='M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8-39.9 1.8l-256 224c-10 8.8-13.6 22.9-8.9 35.3S50.7 288 64 288l111.5 0L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8 39.9-1.8l256-224c10-8.8 13.6 22.9 8.9-35.3s-16.6-20.7-30-20.7l-111.5 0L349.4 44.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='black' d='M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8-39.9 1.8l-256 224c-10 8.8-13.6 22.9-8.9 35.3S50.7 288 64 288l111.5 0L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8 39.9-1.8l256-224c10-8.8 13.6 22.9 8.9-35.3s-16.6-20.7-30-20.7l-111.5 0L349.4 44.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Vote modal — DexScreener card chrome, voting copy (no packs / prices) */
#root .ds-vote-card {
  position: relative;
  max-width: 420px !important;
  padding: 28px 28px 22px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #17171c !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55) !important;
  text-align: center !important;
}

#root .ds-vote-skin {
  text-align: center;
}

#root .fixed.inset-0.z-50 > [class*="backdrop"],
#root .fixed.inset-0.z-50 > .absolute.inset-0 {
  background: rgba(0, 0, 0, 0.72) !important;
}

#root .ds-vote-card > .flex.justify-center,
#root .ds-vote-card > h2:not(.ds-vote-heading),
#root .ds-vote-card > p:not(.ds-vote-desc) {
  display: none !important;
}

#root .ds-vote-heading {
  text-align: center !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 28px 10px !important;
}

#root .ds-vote-card .ds-vote-name {
  color: #f0b90b;
  font-weight: 700;
}

#root .ds-vote-card .ds-vote-word {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: #f0b90b;
  font-weight: 700;
}

#root .ds-vote-bolt {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  position: relative;
  top: 0.1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='black' d='M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8-39.9 1.8l-256 224c-10 8.8-13.6 22.9-8.9 35.3S50.7 288 64 288l111.5 0L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8 39.9-1.8l256-224c10-8.8 13.6 22.9 8.9-35.3s-16.6-20.7-30-20.7l-111.5 0L349.4 44.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='black' d='M349.4 44.6c5.9-13.7 1.5-29.7-10.6-38.5s-28.6-8-39.9 1.8l-256 224c-10 8.8-13.6 22.9-8.9 35.3S50.7 288 64 288l111.5 0L98.6 467.4c-5.9 13.7-1.5 29.7 10.6 38.5s28.6 8 39.9-1.8l256-224c10-8.8 13.6 22.9 8.9-35.3s-16.6-20.7-30-20.7l-111.5 0L349.4 44.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#root .ds-vote-desc {
  text-align: center !important;
  color: #c8c8c8 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 0 10px !important;
}

#root .ds-vote-note {
  text-align: center !important;
  color: #fff !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 0 18px !important;
}

#root .ds-vote-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #f0b90b;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}

#root .ds-vote-count .ds-vote-bolt {
  top: 0;
}

#root .ds-vote-ticker {
  margin: 0 0 18px;
  text-align: center;
}

#root .ds-vote-ticker-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

#root .ds-vote-gold {
  color: #f0b90b;
  font-weight: 700;
}

#root .ds-vote-gold-grad {
  color: transparent;
  background-image: linear-gradient(to right, #ff7700, #f0b90b 60%);
  background-clip: text;
  -webkit-background-clip: text;
  font-weight: 700;
}

#root .ds-vote-ticker-list {
  border-radius: 10px;
  background: #111116;
  overflow: hidden;
  padding: 4px 0;
}

#root .ds-vote-ticker-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  font-size: 14px;
  font-weight: 700;
}

#root .ds-vote-ticker-row.is-faded {
  color: #6b6b6b;
  opacity: 0.55;
}

#root .ds-vote-ticker-row.is-active {
  background: #1d1d22;
  color: #f0b90b;
}

#root .ds-vote-ticker-row .ds-vote-quote {
  color: #8b8b8b;
  font-weight: 600;
}

#root .ds-vote-ticker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5a5a5a;
  flex-shrink: 0;
}

#root .ds-vote-ticker-stats {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
  font-size: 13px;
  color: #fff;
}

#root .ds-vote-card > .space-y-3 {
  display: none !important;
}

#root .ds-vote-card > .space-y-3 > div {
  color: #c5cad6 !important;
}

#root .ds-vote-card > .space-y-3 [class*="bg-boost"] {
  background: rgba(240, 185, 11, 0.12) !important;
  color: #f0b90b !important;
}

#root .ds-vote-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 14px;
  color: #8b93a7;
  font-size: 13px;
}

#root .ds-vote-divider::before,
#root .ds-vote-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

#root .ds-vote-card button.k2oal4-41 {
  width: 100%;
  height: 48px !important;
  border-radius: 10px !important;
  background: #f0b90b !important;
  color: #1a1403 !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

#root .ds-vote-card button.k2oal4-41:hover {
  background: #e5b10b !important;
}

#root .ds-vote-skip {
  color: #8b93a7 !important;
}

#root .ds-vote-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  min-height: 32px !important;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8b93a7;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#root .ds-vote-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

#root .ds-vote-close svg {
  width: 12px;
  height: 12px;
}

/* Mobile: keep vote app full-width and tappable */
@media screen and (max-width: 61.98em) {
  #root {
    overflow-x: clip;
  }

  #root img,
  #root video,
  #root iframe,
  #root canvas,
  #root svg {
    max-width: 100%;
  }

  #root button,
  #root a,
  #root [role="button"] {
    min-height: 44px;
  }

  #root .ds-vote-close {
    min-height: 32px !important;
  }

  #root .rounded-2xl.border {
    margin-left: max(12px, env(safe-area-inset-left, 0px));
    margin-right: max(12px, env(safe-area-inset-right, 0px));
  }
}