/* Layout & buttons */
.per-wrap { display:inline-block; font: inherit; }
.per-buttons { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.per-btn {
  position: relative; /* needed for tooltip */
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .6rem;
  border:1px solid #e5e7eb; border-radius:999px;
  background:#fff; cursor:pointer; line-height:1;
  transition: background .15s, border-color .15s;
}
.per-btn:hover,
.per-btn:focus-visible { background:#f9fafb; border-color:#d1d5db; outline: none; }
.per-emoji { font-size:1.5rem; }
.per-count { font-variant-numeric: tabular-nums; min-width:1ch; }

/* Hide the text label on desktop; we show it on mobile */
.per-label { display:none; }

/* Thanks message size */
.per-thanks { margin-top:.35rem; font-size: var(--space-xs); color:#059669; }

/* Custom tooltip: BELOW the button */
.per-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 10px);         /* below the button */
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  background: #111;
  color: #fff;
  padding: .25rem .5rem;
  border-radius: .375rem;
  font-size: var(--space-xs);     /* larger tooltip text */
  line-height: 1.1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity .15s ease, transform .15s ease;
}

/* Arrow ABOVE the tooltip, pointing UP toward the button */
.per-btn[data-tooltip]::before {
  content: "";
  position: absolute;
  top: calc(100% + 4px);          /* between button and tooltip */
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #111;  /* ▲ points UP */
  opacity: 0;
  z-index: 21;                    /* above tooltip box */
  transition: opacity .15s ease;
}

/* Show tooltip on hover/focus */
.per-btn[data-tooltip]:hover::after,
.per-btn[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.per-btn[data-tooltip]:hover::before,
.per-btn[data-tooltip]:focus-visible::before {
  opacity: 1;
}

/* =========================
   Mobile (≤ 479px): list rows
   ========================= */
@media (max-width: 479px) {
  /* Turn the button group into a vertical list */
  .per-buttons {
    display: grid;
    gap: .5rem;
    width: 100%;
  }

  .per-btn {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    border-radius: .75rem;
    padding: .6rem .75rem;
    gap: .6rem;
  }

  /* Emoji on the left */
  .per-emoji { font-size: 1.2rem; }

  /* Show the label text on mobile (instead of tooltip) */
  .per-label {
    display: inline;
    font-size: var(--space-xs);
    line-height: 1.2;
    flex: 1 1 auto;               /* take remaining space */
    text-align: left;
  }

  /* Count on the far right */
  .per-count { margin-left: auto; }

  /* Disable hover tooltip entirely on mobile */
  .per-btn[data-tooltip]::after,
  .per-btn[data-tooltip]::before {
    content: none !important;
  }
}