/* Greenlake Martial Arts site: "Confirm and pay" for a sign-up offer (GMA-421, mockups E2 and E2.1).
   The booking dialog's look (css/booking.css) plus two summary cards. Every value comes from
   tokens.css. */

.offer-sub { color: var(--c-muted); font-size: var(--small-size); }

.offer-card {
  display: flex; flex-direction: column; gap: var(--gap-xs); padding: var(--input-pad);
  background: var(--c-bg); border: var(--line-w) solid var(--c-line); border-radius: var(--radius-md);
}
.offer-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); }
.offer-card-head .link-button { align-self: center; }
.offer-kicker {
  color: var(--c-muted); font-size: var(--eyebrow-size); font-weight: 700; letter-spacing: var(--eyebrow-ls);
  text-transform: uppercase;
}
.offer-plan { font-size: var(--h3-size); line-height: var(--h3-lh); font-weight: 800; }

.offer-rows { display: flex; flex-direction: column; gap: var(--gap-xs); }
.offer-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-sm); }
.offer-row[hidden] { display: none; }
.offer-row dt { color: var(--c-muted); flex: none; }
.offer-row dd { text-align: right; overflow-wrap: anywhere; }
.offer-was { color: var(--c-muted); margin-right: var(--gap-xs); }
.offer-was[hidden] { display: none; }

.offer-tshirt[hidden] { display: none; }