/* ===================== Presale (clean + compact) ===================== */
.presale-box{
  /* no card styling, match site */
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  color: #e7f6ef;
}

/* keep the presale tucked under the progress details */
.meme_progress .presale-box{ margin-top: 8px; }

/* also remove default extra space below the progress block */
.memecoin_countdown_wraper .meme_progress{ margin-bottom: 0; }

/* size + centering inside the circle area */
.presale-box.compact{
  max-width: 460px;
  margin: 8px auto 0;
  padding: 0;
  border-radius: 14px;
}

/* ===================== Layout ===================== */
/* horizontal row of the two fields + center BUY column */
.presale-box.horizontal .bb-grid{
  display: flex;
  flex-wrap: nowrap;                 /* keep on one line on desktop */
  justify-content: center;
  align-items: flex-start;           /* align top edges */
  gap: 12px;
}

/* each column is a small vertical stack */
.bb-card{ display: flex; flex-direction: column; }

/* narrow both input groups so everything fits within 460px */
.presale-box.compact .bb-card .bb-input{ width: 180px; }

/* labels + small text */
.bb-card label{
  display: flex;
  flex-direction: column;
  font-size: .8rem;
  opacity: .9;
}

/* balance / helper line */
.bb-balance{
  display: block;
  margin-top: 4px;
  font-size: .75rem;
  opacity: .7;
  min-height: 1rem;                  /* prevents layout jump */
}

/* right card’s helper text aligned right (e.g., “Will receive: …”) */
#bbBustEst.bb-balance{ text-align: right; }

/* ===================== Inputs ===================== */
.bb-input{ position: relative; display: inline-block; }

.bb-input input{
  width: 100%;
  min-height: 44px;                  /* consistent height across browsers */
  padding: 10px 62px 10px 10px;      /* space for the right-side tag only */
  border-radius: 10px;
  background: #0c0c0f;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-weight: 600;
  outline: none;
}
.bb-input input::placeholder{ color: rgba(255,255,255,.5); }

/* token tags inside inputs (USDT / $BUST) */
.bb-tag{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .75rem;
  padding: 3px 7px;
  border-radius: 7px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  pointer-events: none;
}

/* ===================== Center BUY column ===================== */
/* Reserve the same label block height on both sides and offset center */
:root{
  --bb-label-h: 22px;   /* visual height reserved for labels */
  --bb-label-gap: 6px;  /* space under labels */
}
.bb-card label{
  min-height: var(--bb-label-h);
  margin-bottom: var(--bb-label-gap);
}

.bb-card--center{
  display: flex;
  align-items: flex-end;                         /* baseline with inputs */
  justify-content: center;
  padding: 0 4px;
  margin-top: calc(var(--bb-label-h) + var(--bb-label-gap)); /* line up with inputs */
}

/* mini BUY button */
.bb-cta--mini{
  padding: 8px 18px;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.2);
  background: #ffd84d;
  color: #0b0d10;
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease;
}
.bb-cta--mini:hover{ filter: brightness(1.06); }
.bb-cta--mini:active{ transform: translateY(1px); }

/* ===================== Responsive ===================== */
@media (max-width: 575.98px){
  .presale-box.horizontal .bb-grid{
    flex-wrap: wrap;                  /* stack on mobile */
    gap: 8px;
  }
  .presale-box.compact .bb-card .bb-input{ width: 100%; }
  .bb-card--center{
    order: 3;                         /* place BUY after both inputs */
    width: 100%;
    align-items: stretch;
    margin-top: 8px;
  }
  .bb-cta--mini{ width: 100%; text-align: center; }
}

.presale-box.compact .bb-card .bb-input{ width: 140px;

    /* ---------- Mobile polish (≤575px) ---------- */
@media (max-width: 575.98px){
  .presale-box.compact{ max-width: 380px; }

  /* stack cleanly + center labels */
  .presale-box.horizontal .bb-grid{ flex-wrap: wrap; gap: 8px; }
  .presale-box.compact .bb-card .bb-input{ width: 100%; }
  .bb-card label{ text-align: center; }

  /* comfy input size on phones */
  .bb-input input{ min-height: 48px; font-size: 1rem; }

  /* keep long balance/errors to one line */
  .bb-card{ min-width: 0; }                 /* required for ellipsis */
  .bb-balance{
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;                 /* truncate long text */
    max-width: 100%;
  }

  /* BUY row goes full width under both fields */
  .bb-card--center{ order: 3; width: 100%; margin-top: 10px; }
  .bb-cta--mini{ width: 100%; text-align: center; }
}

/* subtle error color + tap-for-details cursor (we’ll set title attr in JS) */
.bb-balance.error{ color:#ff9b9b; }
.bb-balance[title]{ cursor: help; }