/* =========================================================
   Quad Beasts Balance — Version 2.3 (split files)
   - Premium dropdown UI (no extra "digits" text in list)
   - Custom amount same size as others, min $10
   - Selected amount pill clearer
   - Glow animation on logo
   ========================================================= */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(110, 60, 255, .22), transparent 55%),
    radial-gradient(900px 500px at 80% 30%, rgba(33, 214, 255, .15), transparent 60%),
    #0b1630;
  overflow-x: hidden;
}

:root{
  --ipb-bg: #0b1630;

  --ipb-card-a: rgba(255,255,255,.06);
  --ipb-card-b: rgba(255,255,255,.03);
  --ipb-border: rgba(255,255,255,.08);

  --ipb-text: rgba(255,255,255,.92);
  --ipb-sub:  rgba(255,255,255,.62);
  --ipb-muted:rgba(255,255,255,.55);

  --ipb-cyan: #21d6ff;
  --ipb-mint: #50ffd2;

  --ipb-shadow: 0 30px 90px rgba(0,0,0,.45);

  --ipb-danger: rgba(255,120,150,1);
  --ipb-danger-soft: rgba(255,120,150,.18);
}

.ipb, .ipb *, .ipb *::before, .ipb *::after { box-sizing: border-box; }

.ipb-page{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 28px);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

.ipb{
  width: min(980px, 100%);
  border-radius: clamp(18px, 4vw, 28px);
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 42px);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--ipb-border);
  box-shadow: var(--ipb-shadow);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ipb::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(700px 260px at 50% 0%, rgba(255,255,255,.09), transparent 60%),
    radial-gradient(900px 460px at 100% 40%, rgba(33,214,255,.10), transparent 62%),
    radial-gradient(900px 460px at 0% 40%, rgba(110,60,255,.10), transparent 62%);
  z-index:-1;
  pointer-events:none;
}

/* ===== Logo ===== */
.ipb__logo{
  display:block;
  margin:0 auto 30px;
  max-width: clamp(260px, 62vw, 380px);
  width:100%;
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 6px 14px rgba(0,0,0,.35))
    drop-shadow(0 16px 36px rgba(33,214,255,.22))
    drop-shadow(0 32px 80px rgba(110,60,255,.20));
  transform: translateZ(0);
}

/* ===== Title & subtitle ===== */
.ipb__title{
  margin:-6px 0 8px;
  color: var(--ipb-text);
  font-weight:800;
  letter-spacing:-0.5px;
  font-size: clamp(24px, 4.6vw, 38px);
  line-height:1.12;
}

.ipb__subtitle{
  max-width:680px;
  margin:0 auto 22px;
  color: rgba(255,255,255,.58);
  font-size: clamp(13px, 3.4vw, 16px);
  line-height:1.5;
}

/* ===== Step wrappers ===== */
.ipb__step{ display:block; }
.ipb__step[hidden]{ display:none !important; }

/* ===== Amount buttons ===== */
.ipb__amounts{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: clamp(10px, 2.4vw, 14px);
  margin:0 0 10px;
}

.ipb__amt{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, var(--ipb-card-a), var(--ipb-card-b));
  color: var(--ipb-muted);

  padding: clamp(10px, 2.2vw, 12px) clamp(16px, 4vw, 22px);
  border-radius:14px;

  font-weight:650;
  font-size: clamp(14px, 3.2vw, 16px);
  letter-spacing:.2px;
  text-align:center;

  min-width: clamp(86px, 21vw, 120px);

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .18s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ipb__amt:hover{
  transform: translateY(-1px);
  color: rgba(255,255,255,.80);
  border-color: rgba(255,255,255,.18);
}
.ipb__amt:active{ transform: translateY(0px); }

.ipb__amt.is-active{
  color: var(--ipb-cyan);
  border-color: rgba(33,214,255,.60);
  box-shadow:
    0 0 0 2px rgba(33,214,255,.16),
    0 0 22px rgba(33,214,255,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* Custom amount matches size */
.ipb__amt--custom{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:text;
  min-width: clamp(86px, 21vw, 120px);
}
.ipb__amt--custom .ipb__currency{
  color: var(--ipb-muted);
  font-weight:700;
  flex:0 0 auto;
}
.ipb__amt--custom input{
  width: 64px;
  background: transparent;
  border: 0;
  outline: none;
  color: rgba(255,255,255,.92);
  font: inherit;
  font-weight:700;
  letter-spacing:.2px;
  text-align:left;
  padding:0;
  margin:0;
  min-width:0;
}
.ipb__amt--custom input::placeholder{
  color: rgba(255,255,255,.38);
  font-weight:650;
}
.ipb__amt--custom input::-webkit-outer-spin-button,
.ipb__amt--custom input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.ipb__amt--custom input[type="number"]{
  appearance: textfield;
  -moz-appearance: textfield;
}
.ipb__amt--custom.is-error{
  border-color: rgba(255,120,150,.70);
  box-shadow:
    0 0 0 2px var(--ipb-danger-soft),
    0 0 20px rgba(255,120,150,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.ipb__amt--custom.is-error .ipb__currency{
  color: rgba(255,200,210,.95);
}

.ipb__error{
  margin: 8px auto 16px;
  width: min(560px, 100%);
  text-align:center;
  font-size:13px;
  line-height:1.35;
  color: rgba(255,160,175,.95);
  min-height:18px;
}

/* ===== CTA ===== */
.ipb__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  width: min(560px, 100%);
  max-width:560px;

  padding: clamp(14px, 3.8vw, 18px) clamp(18px, 6vw, 34px);
  border-radius:18px;

  border:0;
  cursor:pointer;

  font-weight:850;
  font-size: clamp(15px, 3.6vw, 16px);
  letter-spacing:.3px;

  color: rgba(0,0,0,.78);
  background: linear-gradient(90deg, var(--ipb-cyan), var(--ipb-mint));

  margin: 0 auto;
  box-shadow:
    0 16px 44px rgba(0,0,0,.36),
    0 0 26px rgba(33,214,255,.22),
    0 0 34px rgba(80,255,210,.14);

  transition: transform .18s ease, filter .2s ease, box-shadow .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
  line-height: 1;
}

.ipb__cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.03) saturate(1.05);
  box-shadow:
    0 20px 58px rgba(0,0,0,.40),
    0 0 32px rgba(33,214,255,.26),
    0 0 44px rgba(80,255,210,.18);
}
.ipb__cta:active{
  transform: translateY(0px) scale(.995);
  filter: brightness(.99);
}
.ipb__cta:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  filter:none;
}

.ipb__ctaIcon{
  width:20px;
  height:20px;
  flex:0 0 auto;
  display:block;
  max-width:none;
  max-height:none;
}

.ipb__linkBtn{
  appearance:none;
  border:0;
  background:transparent;
  color: rgba(255,255,255,.76);
  cursor:pointer;
  font-weight:700;
  letter-spacing:.1px;
  padding:8px 10px;
  border-radius:10px;
  transition: background .2s ease, color .2s ease;
}
.ipb__linkBtn:hover{
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.90);
}

/* ===== Details top pill ===== */
.ipb__detailsTop{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin: 2px 0 18px;
  flex-wrap: wrap;
}

.ipb__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  padding: 9px 14px;
  border-radius: 999px;

  background: rgba(10, 20, 40, .62);
  border: 1px solid rgba(33,214,255,.26);

  color: rgba(255,255,255,.90);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;

  box-shadow:
    0 10px 28px rgba(0,0,0,.32),
    0 0 18px rgba(33,214,255,.10),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.ipb__pill strong{ color: var(--ipb-cyan); font-weight: 900; }

/* ===== Form ===== */
.ipb__form{
  width: min(560px, 100%);
  margin:0 auto;
  text-align:left;
  display:grid;
  gap:12px;
}

.ipb__field{
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, var(--ipb-card-a), var(--ipb-card-b));
  border-radius:14px;
  padding:12px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.ipb__field:focus-within{
  border-color: rgba(33,214,255,.55);
  box-shadow:
    0 0 0 2px rgba(33,214,255,.14),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.ipb__field.is-error{
  border-color: rgba(255,120,150,.70);
  box-shadow:
    0 0 0 2px var(--ipb-danger-soft),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.ipb__labelRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.ipb__label{
  color: rgba(255,255,255,.78);
  font-size:13px;
  font-weight:800;
  letter-spacing:.2px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.ipb__req{
  color: rgba(255,255,255,.55);
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
}

.ipb__req_star{
  color: #ff0000;
}

.ipb__input,
.ipb__textarea{
  width:100%;
  background:transparent;
  border:0;
  outline:none;
  color: rgba(255,255,255,.92);
  font: inherit;
  font-weight: 650;
  letter-spacing:.2px;
  padding:0;
  margin:0;
}

.ipb__textarea{
  resize: vertical;
  min-height: 92px;
  line-height: 1.4;
}

.ipb__input::placeholder,
.ipb__textarea::placeholder{
  color: rgba(255,255,255,.40);
  font-weight:650;
}

.ipb__fieldError{
  margin-top: 8px;
  font-size: 12.5px;
  color: rgba(255,160,175,.95);
  line-height: 1.3;
  display:none;
}
.ipb__field.is-error .ipb__fieldError{ display:block; }

/* ===== Tooltip ===== */
.ipb__tipWrap{ position:relative; display:inline-flex; align-items:center; gap:8px; }
.ipb__tipBtn{
  width:18px; height:18px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font-size:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.ipb__tooltip{
  position:absolute;
  top:26px;
  left:0;
  z-index:60;
  width: min(280px, 75vw);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,20,40,.92);
  color: rgba(255,255,255,.90);
  font-size:12.5px;
  line-height:1.35;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  display:none;
}
.ipb__tooltip::before{
  content:"";
  position:absolute;
  top:-6px;
  left:10px;
  width:10px;
  height:10px;
  background: rgba(10,20,40,.92);
  border-left:1px solid rgba(255,255,255,.12);
  border-top:1px solid rgba(255,255,255,.12);
  transform: rotate(45deg);
}
.ipb__tipWrap.is-open .ipb__tooltip{ display:block; }

/* ===== Payment placeholder ===== */
.ipb__paymentBox{
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  border-radius:14px;
  padding:14px;
  color: rgba(255,255,255,.62);
  font-size:13px;
  line-height:1.35;
}
.ipb__paymentBox strong{ color: rgba(255,255,255,.86); font-weight:900; }

/* ===== Phone: dropdown + input ===== */
.ipb__phoneRow{
  display:flex;
  gap:10px;
  align-items:stretch;
}

.ipb__ccWrap{
  position: relative;
  flex: 0 0 170px;
  min-width: 150px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.ipb__ccBtn{
  width:100%;
  height:100%;
  padding: 10px 12px;
  border:0;
  background: transparent;
  color: rgba(255,255,255,.88);
  font: inherit;
  font-weight: 750;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  -webkit-tap-highlight-color: transparent;
  border-radius: 12px;
}

.ipb__ccBtn span{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.ipb__ccName{
  color: rgba(255,255,255,.80);
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 92px;
}

.ipb__ccCode{
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: .2px;
}

.ipb__chev{
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: .85;
}

/* Dropdown panel */
.ipb__ccPanel{
  position:absolute;
  left:0;
  right:0;
  top: calc(100% + 10px);
  z-index: 50;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10, 18, 36, .96);

  box-shadow:
    0 26px 80px rgba(0,0,0,.60),
    0 0 24px rgba(33,214,255,.10);

  padding: 10px;
  display:none;
  overflow: hidden; /* keeps panel clean, list scrolls */
}
.ipb__ccWrap.is-open .ipb__ccPanel{ display:block; }

.ipb__ccSearch{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);

  color: rgba(255,255,255,.92);
  outline:none;
  font: inherit;
  font-weight: 650;

  margin-bottom: 10px;
}
.ipb__ccSearch::placeholder{ color: rgba(255,255,255,.45); }

/* Only ONE scrollbar: on list */
.ipb__ccList{
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;

  padding: 4px;
  margin: 0;
  list-style: none;

  border-radius: 12px;
  min-width: 0;
}

.ipb__ccItem{
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;

  color: rgba(255,255,255,.88);
  user-select:none;

  transition: background .18s ease, transform .18s ease;
}
.ipb__ccItem:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.ipb__ccItem:active{ transform: translateY(0); }

.ipb__ccItem span{
  display:flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ipb__ccItem span b{
  font-weight: 800;
  color: rgba(255,255,255,.92);
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ipb__ccItem span small{
  color: rgba(255,255,255,.58);
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 12px;
}

.ipb__ccList::-webkit-scrollbar{ width: 10px; }
.ipb__ccList::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
  border-radius: 999px;
}
.ipb__ccList::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
.ipb__ccList::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.24);
  background-clip: padding-box;
}

.ipb__phoneInput{ flex: 1 1 auto; }

/* ===== Animations ===== */
.ipb__reveal{
  opacity:0;
  transform: translateY(10px);
  filter: blur(2px);
  animation: ipbFadeUp .75s cubic-bezier(.2,.9,.2,1) forwards;
}

.ipb__logo.ipb__reveal{
  animation:
    ipbFadeUp .75s cubic-bezier(.2,.9,.2,1) .08s forwards,
    ipbGlow 9s ease-in-out 1s infinite;
}

.ipb__d1{ animation-delay: .08s; }
.ipb__d2{ animation-delay: .20s; }
.ipb__d3{ animation-delay: .32s; }
.ipb__d4{ animation-delay: .44s; }
.ipb__d5{ animation-delay: .56s; }

@keyframes ipbFadeUp{
  to { opacity:1; transform: translateY(0); filter: blur(0); }
}
@keyframes ipbGlow{
  0%, 100%{
    filter:
      drop-shadow(0 6px 14px rgba(0,0,0,.35))
      drop-shadow(0 16px 36px rgba(33,214,255,.18))
      drop-shadow(0 32px 80px rgba(110,60,255,.16));
  }
  50%{
    filter:
      drop-shadow(0 8px 18px rgba(0,0,0,.38))
      drop-shadow(0 20px 48px rgba(33,214,255,.28))
      drop-shadow(0 40px 110px rgba(110,60,255,.24));
  }
}

@media (prefers-reduced-motion: reduce){
  .ipb__reveal{ opacity:1; transform:none; filter:none; animation:none; }
  .ipb__logo{ animation:none !important; }
  .ipb__amt, .ipb__cta{ transition:none; }
}

@media (max-width: 560px){
  .ipb__phoneRow{ flex-direction: column; }
  .ipb__ccWrap{ flex: 0 0 auto; }
}

@media (max-width: 360px){
  .ipb__amt{ min-width: 46%; }
  .ipb__cta{ border-radius: 16px; }
  .ipb__amt--custom input{ width: 56px; }
}