html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
  
/* Scrollbar styles - light and dark */
.code-scroll::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.code-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(107, 114, 128, 0.5); /* gray-500 */
  border-radius: 4px;
}
.code-scroll::-webkit-scrollbar-track {
  background: transparent;
}

@media (prefers-color-scheme: dark) {
  .code-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4); /* lighter gray */
  }
}

[x-cloak] { display: none !important; }

 #top-navbar {
    position: fixed;
    /*top: 0;*/
    left: 0;
    right: 0;
    z-index: 999;
    /*background-color: rgba(255, 255, 255, 0.8); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); *//* <- Required for Safari */
   /* box-shadow: 0 2px 10px rgba(0,0,0,0.1);*/
}

#announcement-bar{
  z-index: 998;
}

.primary-button, .orange-bg, .orange-text {
  background-color: #d2690b;
}
.primary-button:hover, .orange-bg:hover {
  background-color: #fba12b; 
}

.secondary-sm-button, .green-bg {
  background-color: #97b064;
}
.secondary-sm-button:hover, .green-bg:hover {
  background-color: #b8d879; 
}

.default-link:link {color: #d2690b;}
.default-link:visited {color: #d2690b;}
.default-link:hover {color: #fba12b;}

.price-up,.marketcap-up,.volume-up,.burn-up {color: green;transition: color 1s ease;}
.price-down,.marketcap-down,.volume-down,.burn-down {color: red;transition: color 1s ease;}
.dark .price-up,.dark .marketcap-up,.dark .volume-up,.dark .burn-up {color: #26da68;transition: color 1s ease;}
.dark .price-down,.dark .marketcap-down,.dark .volume-down,.dark .burn-down {color: #f87171;transition: color 1s ease;}

.l-space {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.tooltip-icon {
  position: relative;
  display: inline-flex;
  justify-content: center;
  /*align-items: center;*/
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ff7a00;
  color: white;
  font-weight: 700;
  font-size: 9px;
  cursor: pointer;
  user-select: none;
  line-height: 1.5;
  font-family: sans-serif;
  margin-left: 1px;
  top: -1px;
}
.tooltip-text {
  position: fixed; /* fixed so it stays relative to viewport */
  background-color: #333;
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  max-width: 220px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 9999;
  white-space: normal;
}
.tooltip-text.show {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/* Arrow base */
.tooltip-text::after {
  content: "";
  position: absolute;
  width: 0; 
  height: 0; 
  border-style: solid;
}
/* Arrow when tooltip is above icon (arrow pointing down) */
.tooltip-top::after {
  border-width: 6px 6px 0 6px;
  border-color: #333 transparent transparent transparent;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
}
/* Arrow when tooltip is below icon (arrow pointing up) */
.tooltip-bottom::after {
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #333 transparent;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
}

.address-copy-container {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* space between number and icon */
  cursor: pointer;
}

.address-copy-text {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copy-icon {
  width: 16px !important;
  height: 16px !important;
  fill: #4a5568;
}

.copy-icon:hover {
  fill: #ed8936;
}

.address-wrapper {
  position: relative;
  display: inline-flex; 
  align-items: center;
}

.copy-message {
  position: absolute;
  background: #ed8936;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  top: -30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 9999;
}

.copy-message.show {
  opacity: 1;
  pointer-events: auto;
}


.shib-carousel {
    --color-surface: var(--color-white);
    --color-surface-alt: var(--color-neutral-50);
    --color-on-surface: var(--color-neutral-600);
    --color-on-surface-strong: var(--color-neutral-900);
    --color-primary: var(--color-black);
    --color-on-primary: var(--color-neutral-100);
    --color-secondary: var(--color-neutral-800);
    --color-on-secondary: var(--color-white);
    --color-outline: var(--color-neutral-300);
    --color-outline-strong: var(--color-neutral-800);

    --color-surface-dark: var(--color-neutral-950);
    --color-surface-dark-alt: var(--color-neutral-900);
    --color-on-surface-dark: var(--color-neutral-300);
    --color-on-surface-dark-strong: var(--color-white);
    --color-primary-dark: var(--color-white);
    --color-on-primary-dark: var(--color-black);
    --color-secondary-dark: var(--color-neutral-300);
    --color-on-secondary-dark: var(--color-black);
    --color-outline-dark: var(--color-neutral-700);
    --color-outline-dark-strong: var(--color-neutral-300);

    --color-info: var(--color-sky-500);
    --color-on-info: var(--color-white);
    --color-success: var(--color-green-500);
    --color-on-success: var(--color-white);
    --color-warning: var(--color-amber-500);
    --color-on-warning: var(--color-white);
    --color-danger: var(--color-red-500);
    --color-on-danger: var(--color-white);

    --radius-radius: var(--radius-sm);
}

 @keyframes hoverBalloon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); } /* adjust height of hover here */
  }
  .animate-hoverBalloon {
    animation: hoverBalloon 8s ease-in-out infinite;
  }