/* ---------- Global layout ---------- */

body {
  padding-bottom: 5rem;
}

/* ---------- Cards & layout ---------- */

.kink-card {
  border-radius: 0.75rem;
}

.role-name {
  font-weight: 600;
}

/* ---------- Interest pills ---------- */

.interest-pill {
  cursor: pointer;
}

/* ---------- Notes ---------- */

.role-notes {
  resize: vertical;
}

/* ---------- Age gate ---------- */

#age-gate {
  min-height: 100vh;
}

/* ---------- Category filters ---------- */

#category-filter-buttons .btn {
  white-space: nowrap;
}

footer.footer .btn {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Age gate overlay --- */
.age-gate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  /* above Bootstrap navbar/footer */
  z-index: 1050;
  display: none;
}

/* visible state */
.age-gate-overlay.is-visible {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Prevent background scroll when age gate is active */
.body-locked {
  overflow: hidden;
}

/* Age gate container sizing */
#age-gate {
  max-width: 800px;
  margin: auto;
}

/* Sort mode dropdown and search input sizing  */
#sort-mode,
#kinkSearch {
  max-width: 420px;
}

/* Hide kink descriptions when enabled */
.hide-kink-descriptions .kink-description,
.hide-kink-descriptions .role-description {
  display: none !important;
}

/* Per-container pill font-size set by JS */
.interest-pills {
  --pill-font-size: 0.875rem;
}

/* Allow JavaScript to dynamically set interest pill font size */
.interest-pills .interest-pill {
  font-size: var(--pill-font-size);
  white-space: nowrap;
}

/* Prevent browser scroll anchoring from "helpfully" jumping during reorders */
#kink-container,
#kink-row {
  overflow-anchor: none;
}

.btn-readonly {
  pointer-events: none;
  cursor: default;
}

.btn-readonly:focus {
  outline: none;
}

/* Fix iOS showing a background on outline buttons after the user has tapped to disable them */

@media (hover: none) {
  .btn[class*="btn-outline-"]:hover:not(.active):not(:active) {
    background-color: transparent;
  }
}