/* membership-popup.css
   Styles only the membership tier picker inside the popup. Everything
   else (overlay, modal, fields, buttons, confirm card) reuses the
   booking widget's own classes, so it already matches. These rules are
   scoped under .overlay so they inherit the same dark repaint and design
   tokens the booking widget uses. */

.overlay .mem-tiers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.overlay .mem-tier {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  padding: 18px 18px 16px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink);
  transition: border-color 140ms var(--ease-out),
              box-shadow 140ms var(--ease-out),
              transform 120ms var(--ease-out);
}
.overlay .mem-tier:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.overlay .mem-tier.on {
  border-color: var(--accent);
  background: rgba(91, 75, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(91, 75, 255, 0.14);
}

.overlay .mem-tier .badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
}

.overlay .mem-tier-name {
  display: block;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 2px;
}
.overlay .mem-tier-price {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.overlay .mem-tier-price small {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-faint);
}

.overlay .mem-tier-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.overlay .mem-tier-benefits li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.overlay .mem-tier-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(91, 75, 255, 0.12)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%235b4bff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 11px no-repeat;
}