/* Spin & Win floating button + default panel. Colours come from the global tokens. */

/* FLOATING BUTTON */
.share-btn-container .tgv-spin-fab {
  position: relative;
  background: var(--primary);
}
.share-btn-container .tgv-spin-fab:hover,
.share-btn-container .tgv-spin-fab:focus-visible {
  background: var(--primary-hover);
}
.tgv-spin-fab-icon {
  font-size: 22px;
  line-height: 1;
}
.tgv-spin-fab-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
/* FLOATING BUTTON END */

/* DEFAULT PANEL */
.tgv-spin-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
}
.tgv-spin-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(92vw, 380px);
  max-height: 100%;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.5rem;
  border-radius: 1rem;
  background: #0c0c0c;
  color: #fff;
  text-align: center;
}
.tgv-spin-title {
  margin: 0;
}
.tgv-spin-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}
.tgv-spin-line,
.tgv-spin-won,
.tgv-spin-error {
  margin: 0;
}
.tgv-spin-won {
  font-weight: 700;
  font-size: 1.1rem;
}
.tgv-spin-error {
  color: var(--primary-disabled);
  font-size: 0.85rem;
}
.tgv-spin-select {
  width: 100%;
  padding: 0.6rem;
  border-radius: 0.5rem;
}
/* DEFAULT PANEL END */