.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .popup.show {
    display: flex;
  }

  .popup-content {
    background: #1e1b2e;
    color: #fff;
    padding: 30px 24px;
    border-radius: 1.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    max-width: 420px;
    width: 90%;
    text-align: center;
    animation: popup-sweet-appear 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center;
  }

  @keyframes popup-sweet-appear {
    from {
      opacity: 0;
      transform: scale(0.7);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .popup-svg-container {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
  }

  .popup-svg {
    width: 100%;
    height: 100%;
  }

  .circle {
    fill: none;
    stroke-width: 4;
    stroke: #8b5cf6;
  }

  .check, .cross {
    fill: none;
    stroke: white;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: draw 0.4s ease forwards;
    animation-delay: 0.2s;
  }

  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  .popup-button {
    margin-top: 24px;
    padding: 10px 24px;
    background-color: #8b5cf6;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .popup-button:hover {
    background-color: #7c3aed;
  }

:where([class^="ri-"])::before {
    content: "\f3c2";
}
/* ===== Buy button loading state (fix: no size collapse + darken + inner spinner) ===== */
.purchase-loading-button{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:3rem;
  position:relative;
}
.purchase-loading-button .button-spinner{ display:none !important; }
.purchase-loading-button:disabled,
.purchase-loading-button.is-loading{
  opacity:1 !important;
  filter:brightness(.7);
  cursor:wait;
}
.purchase-loading-button:disabled::after,
.purchase-loading-button.is-loading::after{
  content:"";
  width:20px; height:20px; flex:0 0 auto;
  border:3px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:btnspin .7s linear infinite;
}
@keyframes btnspin{ to{ transform:rotate(360deg); } }

/* Fix: custom-select dropdown — Tailwind .hidden was overriding the toggled .show class
   (no .select-items.show rule existed). Force display:block when JS toggles .show. */
.select-items.show{ display:block !important; }

/* ----- Dropdown (.custom-select) — replicate the dead Tailwind utilities (Tailwind is NOT loaded) ----- */
.custom-select{ position:relative; }
.select-selected{ user-select:none; }
.select-items{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30;
  width:100%; max-height:15rem; overflow-y:auto;
  background:#0F0F1A; border:1px solid #2D2D3A; border-radius:.5rem;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.6);
  padding:.25rem 0;
}
.select-item{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; cursor:pointer; color:#fff; font-size:.95rem;
  transition:background .15s ease;
}
.select-item:hover{ background:#1A1A2E; }
.select-item .price-amount{ margin-left:auto; color:rgba(255,255,255,.85); }
.custom-input{ padding:.25rem .65rem; }
.custom-input input{
  width:100%; background:#1A1A2E; border:1px solid #2D2D3A; border-radius:.375rem;
  color:#fff; padding:.5rem .75rem; font-size:.9rem; outline:none;
}
.custom-input input::placeholder{ color:rgba(255,255,255,.45); }
.custom-input input:focus{ border-color:#8E6FF7; }
/* nice thin purple scrollbar */
.select-items{ scrollbar-width:thin; scrollbar-color:#3d3d50 transparent; }
.select-items::-webkit-scrollbar{ width:6px; }
.select-items::-webkit-scrollbar-thumb{ background:#3d3d50; border-radius:999px; }
.select-items::-webkit-scrollbar-track{ background:transparent; }