body {
  
  font-family: sans-serif;
  padding-top: 70px; /* Safe area + extra padding */
}
    :root{
      --card-h: 212px;

      /* Ribbon geometry (now responsive) */
      --rb-angle: 44deg;
      /* width scales with the card: min/ideal/max */
      --rb-w: clamp(110px, 62%, 140px);
      --rb-h: 28px;
      --rb-right: -34px;

      /* Blue gradient (Telegram-like) */
      --rb-blue-a: #3A688C;
      --rb-blue-b: #1B4E77;
      --rb-blue-c: #0B2A46;

      /* Premium gradient */
      --rb-or-a: #FFBB40;
      --rb-or-b: #E38000;
    }

    .scrollbar-hide::-webkit-scrollbar { display:none; }
    .scrollbar-hide{ -ms-overflow-style:none; scrollbar-width:none; }

    /* ===== Gift card ===== */
    .gift-card{
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      height: var(--card-h);
      min-height: var(--card-h);
      padding: 14px;
      display: flex; flex-direction: column;
      background:
        radial-gradient(120% 90% at 50% 70%, rgba(255,255,255,.10) 0%, rgba(0,0,0,0) 55%),
        linear-gradient(180deg, #1c1c1c 0%, #171717 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 1px 0 rgba(0,0,0,0.5);
    }

    .lottie-96{ width:96px; height:96px; margin:auto; }

    .price-pill{
      background: linear-gradient(180deg, #FFC73A 0%, #EAA012 0%);
      color: #1a1a1a;
      border-radius: 18px;
      padding: 8px 14px;
      font-weight: 800;
      font-size: 13px;
      display: inline-flex; align-items: center; gap: 6px;
      box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
      min-width: 96px; justify-content:center;
    }

    /* ===== Ribbons (straight edges) ===== */
    .ribbon {
      position: absolute;
      top: 9px;
      right: -24px;
      transform: rotate(var(--rb-angle));

      width: var(--rb-w);
      height: var(--rb-h);

      display: flex;
      align-items: center;
      justify-content: center;

      box-shadow: 0 8px 16px rgba(0, 0, 0, .35);
      pointer-events: none;
      user-select: none;

      background: linear-gradient(180deg, var(--rb-blue-a) 0%, var(--rb-blue-b) 50%, var(--rb-blue-c) 100%);
      border-radius: 9999px; /* full pill */
      overflow: hidden;      /* keeps gradient and highlights inside */
    }
    .ribbon__text{
      font-weight: 900;
      font-size: 14px;
      color:#fff;
      align-items: center;
      justify-content: center;
      letter-spacing:.2px;
      line-height:1;
      text-shadow: 0 1px 0 rgba(0,0,0,.28), 0 0 2px rgba(0,0,0,.18);
    }

    .ribbon-blue{
      background: linear-gradient(180deg, var(--rb-blue-a) 0%, var(--rb-blue-b) 48%, var(--rb-blue-c) 100%);
    }
    .ribbon-premium{
      background: linear-gradient(180deg, var(--rb-or-a) 0%, var(--rb-or-b) 100%);
      color:#3a2a00;
    }

    /* ===== Modal (bottom sheet) ===== */
    .modal-backdrop{ backdrop-filter: blur(2px); }
    .stripe-bg{
      background:
        repeating-linear-gradient(-20deg,
          rgba(255,255,255,.06) 0px,
          rgba(255,255,255,.06) 14px,
          transparent 14px,
          transparent 44px
        ),
        radial-gradient(circle at center, rgba(255,255,255,.08), rgba(0,0,0,.55) 70%);
      background-color:#1c1c1c;
    }
    .modal-panel{
      position: fixed; left:0; right:0; bottom:0;
      transform: translateY(100%);
      transition: transform .3s ease;
      border-top-left-radius: 20px; border-top-right-radius: 20px;
      overflow: hidden; background:#111;
      max-height: 90vh; display:flex; flex-direction:column;
      box-shadow: 0 -8px 24px rgba(0,0,0,.4);
    }
    .modal-open .modal-panel{ transform: translateY(0); }
    .modal-btn{ border-radius:16px; font-weight:800; }
    .table-cell{ border-color: rgba(255,255,255,.08); }

    /* ===== Very narrow phones ===== */
    @media (max-width: 380px){
      :root{
        --card-h: 204px;
        --rb-w: clamp(96px, 60%, 120px);
        --rb-h: 28px;
        --rb-right: -28px;
      }
      .lottie-96{ width:90px; height:90px; }
      .ribbon__text{ font-size:12px; }
    }
    
  .loader {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }

.toast {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  color: white;
  padding: 10px 20px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  z-index: 9999;
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

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

.collection-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background:
        radial-gradient(120% 90% at 50% 70%, rgba(255,255,255,.10) 0%, rgba(0,0,0,0) 55%),
        linear-gradient(180deg, #1c1c1c 0%, #171717 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  aspect-ratio: 1 / 1; /* ensures square box */
}
.gift-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1c1c1e;
  color: white;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 14px;
  margin: 12px auto;

  /* 🔹 Fixed size settings */
  width: 320px;               /* consistent width */
  max-width: 92%;             /* still responsive on small screens */
  height: 44px;               /* consistent height */
  box-sizing: border-box;     /* padding included in width/height */

  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  line-height: 1.3;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;           /* no scrollbars */
  text-overflow: ellipsis;    /* show "..." if text too long */

  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

/* When showing */
.gift-toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.gift-lottie {
  width: 24px;
  height: 24px;
}

.username {
  color: #fff;
  font-weight: 600;
}

.gift-name {
  color: #59a8ff;
  font-weight: 600;
}
  .spinner { animation: spin 1s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }