/* rewards.css -- the ★ member chip (list rows / next-stop card), the
 * detail-view earn/join line, and the Rewards programs section in the
 * priorities sheet. */

/* ---------- ★ member chip ---------- */
.ps-rew {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--brand, #2f6df0);
  background: color-mix(in srgb, var(--brand, #2f6df0) 12%, transparent);
}

/* ---------- detail line ---------- */
.ps-dt-rewards {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--text-dim, #5b6470);
}
.ps-dt-rewards--member {
  color: var(--brand, #2f6df0);
  font-weight: 700;
}
.ps-dt-rewards-join {
  color: var(--brand, #2f6df0);
  font-weight: 700;
  text-decoration: none;
}
.ps-dt-rewards-join:hover { text-decoration: underline; }

/* ---------- prefs-sheet section ---------- */
.pf-rw { margin-top: 18px; }

.pf-rw-title {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint, #8a93a0);
}

.pf-rw-sub {
  margin: 0 0 10px;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-dim, #5b6470);
}

.pf-rw-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border, #e2e6ec);
  border-radius: var(--radius, 14px);
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
}

.pf-rw-row {
  display: flex;
  align-items: stretch;
  background: var(--surface, #ffffff);
}
.pf-rw-row + .pf-rw-row { border-top: 1px solid var(--border, #e2e6ec); }
.pf-rw-row.is-member {
  background: color-mix(in srgb, var(--brand, #2f6df0) 7%, var(--surface, #ffffff));
}

.pf-rw-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 12px;
  text-align: left;
}

.pf-rw-check {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0.95rem;
  border: 2px solid var(--border-strong, #cdd3dc);
  color: var(--brand-ink, #ffffff);
}
.pf-rw-row.is-member .pf-rw-check {
  border-color: var(--brand, #2f6df0);
  background: var(--brand, #2f6df0);
}

.pf-rw-text { display: flex; flex-direction: column; min-width: 0; }
.pf-rw-name { font-weight: 700; font-size: 0.9rem; }
.pf-rw-brands {
  font-size: 0.75rem;
  color: var(--text-faint, #8a93a0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-rw-join {
  position: relative;
  flex: none;
  align-self: center;
  margin-right: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--brand, #2f6df0);
  background: color-mix(in srgb, var(--brand, #2f6df0) 12%, transparent);
}
/* The chip is ~26px tall by design -- it must stay quieter than the row it sits
   beside. The transparent overlay gives it the same 44px hit area as the Skip
   pill without turning it into a second button. */
.pf-rw-join::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  min-width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ---------- route-history counts + payoff callout ---------- */
.pf-rw-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand, #2f6df0);
}

.ps-dt-rewards-seen {
  color: var(--text-faint, #8a93a0);
  font-weight: 400;
}

.pf-rw-payoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 10px);
  background: color-mix(in srgb, var(--brand, #2f6df0) 9%, var(--surface, #ffffff));
  border: 1px solid var(--brand, #2f6df0);
}
.pf-rw-payoff-text {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text, #15181d);
}
.pf-rw-payoff-join { flex: none; margin-right: 0; }