/* =========================================================
   ETH STAKING PAGE ADDITIONS (keeps your existing theme)
   ========================================================= */

/* Make reveal safe:
   - if JS doesn't run, content must still show
   - JS adds html.js; without it -> reveal is visible */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }

.reveal { opacity: 0; transform: translateY(24px); }
.reveal.revealed {
  opacity: 1;
  transform: none;
  transition: opacity .65s ease, transform .65s ease;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------
   ETH GLOBAL BACKGROUND (whole page, not inside a box)
   --------------------------------------------------------- */
.eth-bg{
  position:absolute;
  inset:-10% -10% -10% -10%;
  pointer-events:none;
  z-index: 0;
  display:block;
}

.eth-bg__img{
  position:absolute;
  top: 50%;
  left: 68%;
  width: min(64vw, 680px);
  height: auto;
  transform: translate(-50%,-50%) rotate(-18deg) scale(1.05);
  opacity: .10;
  filter: saturate(1.15);
}

.eth-bg__img--glow{
  opacity: .12;
  filter:
    blur(10px)
    drop-shadow(0 0 18px rgba(4,255,196,.25))
    drop-shadow(0 0 50px rgba(4,255,196,.12));
  mix-blend-mode: screen;
}

.eth-bg__img--sharp{
  opacity: .06;
  filter: drop-shadow(0 0 20px rgba(255,255,255,.10));
}

.eth-bg__wash{
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 520px at 70% 50%, rgba(4,255,196,.12), transparent 60%),
    radial-gradient(760px 520px at 62% 58%, rgba(99,102,241,.08), transparent 62%);
  opacity: .9;
}

@media (max-width: 640px){
  .eth-bg__img{
    left: 55%;
    width: min(96vw, 560px);
    opacity: .09;
  }
  .eth-bg__img--glow{ opacity: .10; }
  .eth-bg__img--sharp{ opacity: .05; }
}

/* ---------------------------------------------------------
   Small UI components (chips/pills/buttons)
   --------------------------------------------------------- */
.eth-chip{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  padding: .45rem .70rem;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: .2s ease;
  color: rgba(226,232,240,.9);
  white-space: nowrap;
}
.eth-chip:hover{ border-color: rgba(4,255,196,.35); background: rgba(4,255,196,.06); }
.eth-chip.is-active{
  border-color: rgba(4,255,196,.55);
  background: rgba(4,255,196,.10);
  color: #fff;
}

.eth-pill{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  padding: .38rem .65rem;
  font-size: .85rem;
  transition: .2s ease;
}
.eth-pill:hover{ border-color: rgba(4,255,196,.35); background: rgba(4,255,196,.06); }
.eth-pill.is-active{
  border-color: rgba(4,255,196,.55);
  background: rgba(4,255,196,.10);
  color: #fff;
}

.eth-lock{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: .60rem .70rem;
  font-size: .9rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  transition:.2s ease;
}
.eth-lock:hover{ border-color: rgba(4,255,196,.35); background: rgba(4,255,196,.06); }
.eth-lock.is-active{
  border-color: rgba(4,255,196,.60);
  background: rgba(4,255,196,.10);
  color: #fff;
}

/* ---------------------------------------------------------
   Charts (responsive heights)
   --------------------------------------------------------- */
.eth-price-chart{
  position: relative;
  height: 220px;
}
@media (max-width: 640px){
  .eth-price-chart{ height: 190px; }
}

.stake-chart-wrap{
  position: relative;
  height: 340px;
}
@media (max-width: 640px){
  .stake-chart-wrap{ height: 280px; }
}

/* Tooltip bubble pinned inside chart */
.stake-tooltip{
  position:absolute;
  z-index: 5;
  min-width: 160px;
  padding: .65rem .75rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(3, 8, 16, .80);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  transform: translate(-50%, -110%);
  pointer-events: none;
}
.stake-tooltip strong{
  display:block;
  font-size: .95rem;
  color: #fff;
}
.stake-tooltip .muted{
  margin-top: .15rem;
  font-size: .82rem;
  color: rgba(148,163,184,.95);
}

/* Step icons */
.eth-step-ico{
  height: 46px;
  width: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(4,255,196,.12);
  border: 1px solid rgba(4,255,196,.28);
}
.eth-step-ico i{
  font-size: 22px;
  color: rgba(4,255,196,.95);
}


/* HERO: soften big text + avoid overflow */
@media (max-width: 640px) {
  .title-glow {
    font-size: 2.15rem !important; /* overrides tailwind sizes on small */
    line-height: 1.1 !important;
    word-break: break-word;
  }
}

/* Chips should wrap and not force overflow */
.eth-chip {
  max-width: 100%;
  flex: 0 1 auto;
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* Top right 24h/7d/30d chips: stack nicely */
  [data-days] {
    padding: .42rem .62rem;
    font-size: .82rem;
  }

  /* Calculator unit chips: keep them tight */
  [data-calc-unit] {
    padding: .42rem .62rem;
    font-size: .82rem;
  }

  /* Allow the chip containers to wrap without overflow */
  .flex.flex-wrap.items-center.gap-2,
  .flex.flex-wrap.items-center.gap-4 {
    gap: .5rem !important;
  }
}

/* HERO bottom mini-cards: force 1 column on mobile if needed */
@media (max-width: 640px) {
  .mt-7.grid.sm\\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
}

/* ETH MARKET CARD chart height a bit smaller on mobile */
@media (max-width: 640px) {
  .eth-price-chart { height: 170px !important; }
}

/* ================================
   CALCULATOR RESPONSIVENESS
   ================================ */

/* The lock period buttons are currently grid-cols-3 → too tight on mobile */
@media (max-width: 640px) {
  /* 2 columns lock buttons on mobile */
  .eth-lock {
    padding: .55rem .65rem;
    font-size: .86rem;
    white-space: nowrap;
  }

  /* Replace the lock grid to 2 columns */
  .mt-2.grid.grid-cols-3.gap-2 {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Make 3-month take full width on 2nd row */
  .mt-2.grid.grid-cols-3.gap-2 .eth-lock[data-lock="3m"] {
    grid-column: 1 / -1;
  }
}

/* Preset pills wrap nicely and never overflow */
@media (max-width: 640px) {
  .eth-pill {
    padding: .36rem .60rem;
    font-size: .82rem;
  }
}

/* Output cards: they already become 1-col because sm:grid-cols-3
   but ensure spacing is good */
@media (max-width: 640px) {
  .lg\\:col-span-2.glass.neon-border.rounded-2xl.p-6.reveal {
    padding: 1rem !important;
  }
  .glass.neon-border.rounded-2xl.p-6.reveal {
    padding: 1rem !important;
  }
}

/* Chart container should not overflow + keep height smaller */
@media (max-width: 640px) {
  .stake-chart-wrap {
    height: 240px !important;
    overflow: hidden; /* prevents tooltip/line overflow */
  }
}

/* Tooltip: clamp width on mobile */
@media (max-width: 640px) {
  .stake-tooltip {
    min-width: 140px !important;
    max-width: 220px !important;
    padding: .55rem .65rem !important;
  }
}

/* Extra safety: Canvas should always fit parent */
canvas { max-width: 100% !important; }

@media (max-width: 640px) {
  .lock-grid { grid-template-columns: 1fr 1fr !important; }
  .lock-grid .eth-lock[data-lock="3m"] { grid-column: 1 / -1; }
}


/* ================================
   ETH SVG GLOBAL BACKGROUND
   (NO animation, smaller desktop)
   ================================ */

.eth-bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Move slightly more left + smaller */
.eth-bg__svg{
  position: absolute;
  right: 6vw;              /* pulled left */
  top: 10vh;
  width: min(34vw, 440px); /* smaller desktop */
  height: auto;
  transform: rotate(-14deg);
  opacity: 1;
}

/* This is the MAIN tint. Uses your theme accent */
.eth-bg__svg--glow{
  color: rgba(4,255,196,.60);  /* ✅ accent */
  opacity: .11;
  filter:
    blur(12px)
    drop-shadow(0 0 18px rgba(4,255,196,.34))
    drop-shadow(0 0 56px rgba(4,255,196,.16));
  mix-blend-mode: screen;
  transform: rotate(-14deg) translate3d(-6px, 8px, 0);
}

.eth-bg__svg--sharp{
  color: rgba(4,255,196,.42);  /* slightly darker accent */
  opacity: .12;
  filter:
    contrast(1.06)
    brightness(1.08)
    drop-shadow(0 10px 42px rgba(0,0,0,.55))
    drop-shadow(0 0 14px rgba(4,255,196,.18));
}

/* Mobile: adjust position/size */
@media (max-width: 640px){
  .eth-bg__svg{
    right: -2vw;
    top: 3vh;
    width: min(76vw, 500px);
  }
  .eth-bg__svg--glow{ opacity:.09; }
  .eth-bg__svg--sharp{ opacity:.10; }
}
/* Keep content above the background */
header, section, footer { position: relative; z-index: 10; }