/*
 * wsevents front-end — Unit 4 (upcoming-events list, my-events page, the
 * single-event register/cancel widget).
 *
 * Tokens only — no hardcoded hex anywhere in this file. Every colour comes
 * from wstheme's SEMANTIC custom properties (--paper, --paper-2, --surface,
 * --ink, --ink-2, --muted, --rule, --red, --radius, --radius-card,
 * --container, --touch-target) so dark mode (wstheme/style.css's
 * `@media (prefers-color-scheme: dark)` block, which only re-points these
 * same properties) applies for free — a literal colour here would become a
 * light island in dark mode, which is this unit's explicit acceptance
 * criterion to avoid. --touch-target is bridged with a fallback
 * (var(--touch-target, 44px)) per CLAUDE.md, never hardcoded outright.
 *
 * Sizing in rem throughout: wstheme sets `html { font-size: 112.5% }`, so
 * 1rem = 18px there, not the browser default 16px — a hardcoded px value
 * here would silently disagree with the rest of the theme's scale.
 */

.wsevents-upcoming,
.wsevents-my-events,
.wsevents-event-actions {
	--wsevents-touch: var(--touch-target, 44px);
	font-family: var(--wp--preset--font-family--archivo, inherit);
	color: var(--ink);
}

/* ── Headings ───────────────────────────────────────────────────────────── */

.wsevents-upcoming__heading,
.wsevents-my-events__heading {
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--alice, inherit);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 400;
	color: var(--ink);
}

/* ── Lists ──────────────────────────────────────────────────────────────── */

.wsevents-upcoming__list,
.wsevents-my-events__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wsevents-upcoming__row,
.wsevents-my-events__row {
	padding: 1rem 1.25rem;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius-card, 6px);
}

.wsevents-upcoming__row--teaser {
	border-style: dashed;
}

/*
 * Code review finding MEDIUM 4: these two hooks (class-upcoming-events-block.php's
 * $in_progress branch — every other class in this block already had a rule
 * here) were emitted with no CSS at all, so "Happening now" rendered as a
 * default full-size <p>, visually LOUDER than the row's own metadata
 * (__row-when at 0.875rem/--ink-2, __row-type at 0.75rem/--muted) despite
 * being the least important line on the row. Sized/weighted below both of
 * those, in --red so it still reads as a live/attention state, not a plain
 * metadata line — this is a status accent, not a heading.
 *
 * --in-progress must come AFTER --teaser in this file (source order, equal
 * specificity) so its solid left accent border wins over --teaser's dashed
 * `border-style` shorthand on that one edge — a teaser row can legitimately
 * carry BOTH modifiers at once (LOW 10: the badge now renders on a denied
 * viewer's teaser row too), and the two must compose rather than one
 * silently winning outright on every side.
 */
.wsevents-upcoming__row--in-progress {
	border-left: 3px solid var(--red);
	padding-left: calc(1.25rem - 2px); /* -2px: net +1px vs. the base 1px border-left this replaces, so content doesn't visibly jump. */
}

.wsevents-upcoming__row-status {
	margin: 0.15rem 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--red);
}

.wsevents-upcoming__row-link,
.wsevents-my-events__row-link {
	display: inline-block;
	color: var(--ink);
	text-decoration: none;
}

.wsevents-upcoming__row-link:hover .wsevents-upcoming__row-title,
.wsevents-upcoming__row-link:focus-visible .wsevents-upcoming__row-title,
.wsevents-my-events__row-link:hover .wsevents-my-events__row-title,
.wsevents-my-events__row-link:focus-visible .wsevents-my-events__row-title {
	color: var(--red);
}

.wsevents-upcoming__row-title,
.wsevents-my-events__row-title {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--alice, inherit);
	font-size: 1.25rem;
	font-weight: 400;
	transition: color 150ms ease-out;
}

.wsevents-upcoming__row-when,
.wsevents-upcoming__row-type,
.wsevents-upcoming__row-venue,
.wsevents-my-events__row-when,
.wsevents-my-events__row-venue {
	margin: 0.15rem 0 0;
	font-size: 0.875rem;
	color: var(--ink-2);
}

.wsevents-upcoming__row-type {
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
}

.wsevents-upcoming__row-cta {
	margin: 0.6rem 0 0;
	font-size: 0.875rem;
}

.wsevents-upcoming__row-cta-link {
	color: var(--red);
	text-decoration: underline;
}

.wsevents-upcoming__row-cta-text {
	color: var(--muted);
	font-style: italic;
}

.wsevents-upcoming__empty,
.wsevents-my-events__empty {
	margin: 0;
	color: var(--muted);
	font-size: 0.9375rem;
}

/* ── Gate / login prompts ──────────────────────────────────────────────── */

.wsevents-my-events--gate .wsevents-my-events__gate-message {
	font-size: 1rem;
	color: var(--ink-2);
}

.wsevents-my-events__gate-link,
.wsevents-event-actions__cta a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wsevents-touch);
	margin-left: 0.4em;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	text-decoration: none;
	transition: color 150ms ease-out, border-color 150ms ease-out;
}

.wsevents-my-events__gate-link:hover,
.wsevents-my-events__gate-link:focus-visible,
.wsevents-event-actions__cta a:hover,
.wsevents-event-actions__cta a:focus-visible {
	color: var(--red);
	border-color: var(--red);
	outline: none;
}

/* ── Notices (PRG flash messages) ──────────────────────────────────────── */

.wsevents-upcoming .wsevents-upcoming__notice,
.wsevents-my-events__notice,
.wsevents-event-actions__notice {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: var(--radius, 4px);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.wsevents-my-events__notice--success,
.wsevents-event-actions__notice--success {
	border: 1px solid var(--rule);
	background: var(--paper-2);
	color: var(--ink);
}

.wsevents-my-events__notice--error,
.wsevents-event-actions__notice--error {
	border: 1px solid var(--red);
	background: var(--paper-2);
	color: var(--red);
}

/* ── Single-event facts summary (issue 42) — the server-rendered "when &
   where", prepended above the author's own event content for permitted
   viewers only (WSEvents_Event_View::facts_html()). Deliberately a plainer,
   quieter treatment than .wsevents-event-actions below it (no border) — this
   is reference information a viewer scans, not an action panel competing
   for attention with Register/Buy. Tokens only, same discipline as the rest
   of this file. ───────────────────────────────────────────────────────── */

.wsevents-event-facts {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--paper-2);
	border-radius: var(--radius-card, 6px);
	font-family: var(--wp--preset--font-family--archivo, inherit);
	color: var(--ink);
}

.wsevents-event-facts__list {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1rem;
	row-gap: 0.5rem;
	margin: 0;
}

.wsevents-event-facts__label {
	grid-column: 1;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	/* --ink-2, not --muted: at this size (13.5px) --muted on the darker
	   --paper-2 surface sits right on the 4.5:1 WCAG-AA line in light mode.
	   The micro-caps treatment (uppercase + spacing + weight) already reads
	   as a quieter label without needing the lower-contrast colour. */
	color: var(--ink-2);
	align-self: baseline;
}

.wsevents-event-facts__value {
	grid-column: 2;
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ink-2);
}

/* Narrow viewports: stack label above value rather than keeping the two-column
   grid, so a long address never gets squeezed into a cramped second column. */
@media (max-width: 480px) {
	.wsevents-event-facts__list {
		grid-template-columns: 1fr;
	}

	.wsevents-event-facts__label,
	.wsevents-event-facts__value {
		grid-column: 1;
	}

	.wsevents-event-facts__label {
		margin-top: 0.5rem;
	}

	.wsevents-event-facts__label:first-child {
		margin-top: 0;
	}
}

/* ── Visually-hidden utility (issue 44) — standard "screen-reader only" clip
   pattern. The plugin has none of its own and must not depend on the active
   theme providing .screen-reader-text. ──────────────────────────────────── */

.wsevents-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Single-event start countdown (issue 44) — a film-timecode ("SMPTE")
   HH:MM:SS:FF readout to event START, rendered inside the facts summary
   (WSEvents_Event_View::countdown_html()). The ticking itself is entirely
   client-side (assets/js/wsevents-countdown.js); this only styles the
   static shell plus the two states (ticking / "Now showing"). Tokens only,
   same discipline as the rest of this file. ─────────────────────────────── */

.wsevents-event-countdown {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--rule);
}

.wsevents-event-countdown__label {
	display: block;
	margin: 0 0 0.2rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	/* --ink-2, not --muted — issue 42's own note: --muted on --paper-2 sits
	   right on the WCAG-AA line at this size. Same choice as
	   .wsevents-event-facts__label just above. */
	color: var(--ink-2);
}

.wsevents-event-countdown__readout {
	display: inline-block;
	max-width: 100%;
	padding: 0.35rem 0.6rem;
	overflow-x: auto;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius, 4px);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 1.0625rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	color: var(--ink);
	white-space: nowrap;
}

/* Emphasize the readout once the event has actually started. Deliberately
   keeps the readout TEXT at high-contrast --ink (not --red): --red text on
   --paper is only ~3.7:1 (light) / ~4.2:1 (dark), which fails WCAG-AA 4.5:1
   for normal-size text — and this readout is normal weight and ~17px on
   mobile, so it can't claim the large-text 3:1 exemption (issue 44 review
   M1, same AA-line trap issue 42 flagged for --muted). The "live" signal is
   carried by a bold weight plus a --red border (a 1px divider only needs
   3:1, which --red clears in both themes) — accessible at every size. */
.wsevents-event-countdown--now-showing .wsevents-event-countdown__readout {
	font-weight: 700;
	border-color: var(--red);
}

/* "T-minus" is no longer accurate once the readout says "Now showing" — hide
   the label in that state (it is aria-hidden already, so this is sighted-only
   cleanup). Issue 44 review L2. */
.wsevents-event-countdown--now-showing .wsevents-event-countdown__label {
	display: none;
}

@media (max-width: 480px) {
	.wsevents-event-countdown__readout {
		padding: 0.3rem 0.5rem;
		font-size: 0.9375rem;
	}
}

/* ── Single-event register/cancel widget ───────────────────────────────── */

.wsevents-event-actions {
	margin-top: 2rem;
	padding: 1.25rem;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius-card, 6px);
}

.wsevents-event-actions__status {
	margin: 0 0 0.75rem;
	font-weight: 600;
	font-size: 1rem;
	color: var(--ink);
}

.wsevents-event-actions__status--full,
.wsevents-event-actions__status--unavailable {
	color: var(--muted);
}

.wsevents-event-actions__status--limited {
	color: var(--red);
}

.wsevents-event-actions__cta {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ink-2);
}

/* ── Buttons (forms) ───────────────────────────────────────────────────── */

.wsevents-event-actions__form,
.wsevents-my-events__cancel-form {
	display: inline-block;
	margin: 0.25rem 0 0;
}

.wsevents-event-actions__btn,
.wsevents-my-events__cancel-btn {
	min-height: var(--wsevents-touch);
	padding: 0.5rem 1.25rem;
	background: transparent;
	border: 1px solid var(--ink);
	border-radius: var(--radius, 4px);
	color: var(--ink);
	font-family: var(--wp--preset--font-family--archivo, inherit);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.wsevents-event-actions__btn:hover,
.wsevents-event-actions__btn:focus-visible,
.wsevents-my-events__cancel-btn:hover,
.wsevents-my-events__cancel-btn:focus-visible {
	background: var(--ink);
	color: var(--paper);
	outline: none;
}

.wsevents-event-actions__btn--cancel,
.wsevents-my-events__cancel-btn {
	border-color: var(--red);
	color: var(--red);
}

.wsevents-event-actions__btn--cancel:hover,
.wsevents-event-actions__btn--cancel:focus-visible,
.wsevents-my-events__cancel-btn:hover,
.wsevents-my-events__cancel-btn:focus-visible {
	background: var(--red);
	color: var(--paper);
}

/* ── Zoom join link (Phase 4c) — a solid CTA, distinct from the outlined
   register/cancel buttons above, since this is the one action a confirmed
   attendee actually wants to take before the event starts. Tokens only,
   same discipline as the rest of this file. */

.wsevents-event-actions__join,
.wsevents-my-events__row-join {
	margin: 0.75rem 0 0;
}

.wsevents-event-actions__btn--join,
.wsevents-my-events__row-join-link {
	display: inline-block;
	min-height: var(--wsevents-touch);
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--red);
	border-radius: var(--radius, 4px);
	background: var(--red);
	color: var(--paper);
	font-family: var(--wp--preset--font-family--archivo, inherit);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: calc(var(--wsevents-touch) - 1rem - 2px);
	text-align: center;
	text-decoration: none;
	transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.wsevents-event-actions__btn--join:hover,
.wsevents-event-actions__btn--join:focus-visible,
.wsevents-my-events__row-join-link:hover,
.wsevents-my-events__row-join-link:focus-visible {
	background: var(--red-deep, var(--red));
	border-color: var(--red-deep, var(--red));
	outline: none;
}

/* ── "Add to calendar" .ics download (issue 43) — a plain link, not a
   button: it's a secondary, once-and-done affordance next to the Join
   CTA/cancel form, not a repeated action. Tokens only, dark-mode safe via
   --ink/--red the same way the rest of this file is. */

.wsevents-event-actions__ics-row {
	margin: 0.5rem 0 0;
}

.wsevents-event-actions__ics {
	color: var(--ink);
	font-family: var(--wp--preset--font-family--archivo, inherit);
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wsevents-event-actions__ics:hover,
.wsevents-event-actions__ics:focus-visible {
	color: var(--red);
}

/* ── Guest registration form (issue 11 / Phase 2, Unit 3) ─────────────────
   Tokens only, same discipline as the rest of this file — see its top
   docblock. */

.wsevents-event-actions__form--guest {
	display: block;
	max-width: 26rem;
}

.wsevents-event-actions__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	color: var(--ink-2);
}

.wsevents-event-actions__field input {
	min-height: var(--wsevents-touch);
	padding: 0.5rem 0.75rem;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius, 4px);
	color: var(--ink);
	font-family: var(--wp--preset--font-family--archivo, inherit);
	font-size: 0.9375rem;
}

.wsevents-event-actions__field input:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 1px;
}

.wsevents-event-actions__hold-notice {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	color: var(--muted);
}

/* Honeypot: off-screen, never `display:none` (see class-event-view.php's
   guest_register_form() docblock for why) — a sighted, non-keyboard user
   never notices it either way. */
.wsevents-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── The countdown (guest's own hold deadline only — never a seat count) ── */

.wsevents-guest-countdown {
	margin: 0 0 1rem;
	padding: 0.6rem 0.9rem;
	background: var(--paper-2);
	border: 1px solid var(--rule);
	border-radius: var(--radius, 4px);
	font-size: 0.9375rem;
	color: var(--ink);
}

.wsevents-guest-countdown__label {
	color: var(--ink-2);
}

.wsevents-guest-countdown__time {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.wsevents-guest-countdown--lapsed {
	border-color: var(--red);
	color: var(--red);
}

.wsevents-guest-countdown--lapsed .wsevents-guest-countdown__time {
	color: var(--red);
}

/* ── Guest manage/cancel view ──────────────────────────────────────────── */

.wsevents-guest-manage {
	max-width: 32rem;
	margin: 2rem auto;
	padding: 1.25rem;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: var(--radius-card, 6px);
	font-family: var(--wp--preset--font-family--archivo, inherit);
	color: var(--ink);
}

.wsevents-guest-manage__heading {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--alice, inherit);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--ink);
}

.wsevents-guest-manage__status {
	margin: 0 0 0.75rem;
	font-size: 1rem;
}

.wsevents-guest-manage__status--confirmed {
	color: var(--ink);
	font-weight: 600;
}

.wsevents-guest-manage__form {
	margin: 0.5rem 0 1rem;
}

.wsevents-guest-manage__back {
	margin: 1rem 0 0;
	font-size: 0.875rem;
}

.wsevents-guest-manage__back a {
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	text-decoration: none;
}

.wsevents-guest-manage__back a:hover,
.wsevents-guest-manage__back a:focus-visible {
	color: var(--red);
	border-color: var(--red);
}

/* ── Paid checkout (Phase 3b, issue 23) ────────────────────────────────────
   Tokens only, same discipline as the rest of this file — see its top
   docblock. The Stripe Payment Element itself is a same-origin-policy
   iframe Stripe styles; wsevents-checkout.js passes it a live `appearance`
   object built from these same custom properties (themeAppearance()), so
   the iframe's own colours track dark mode the same way this file's do. */

.wsevents-checkout {
	max-width: 26rem;
}

.wsevents-event-actions__btn--buy {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

.wsevents-event-actions__btn--buy:hover,
.wsevents-event-actions__btn--buy:focus-visible {
	background: var(--red);
	color: var(--paper);
	border-color: var(--red);
}

.wsevents-event-actions__btn--buy:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.wsevents-checkout__error {
	margin: 0 0 0.75rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--red);
	border-radius: var(--radius, 4px);
	background: var(--paper-2);
	color: var(--red);
	font-size: 0.9375rem;
}

.wsevents-checkout__payment {
	margin-top: 0.75rem;
}

.wsevents-checkout__element {
	margin: 0 0 1rem;
	padding: 0.75rem;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius, 4px);
	/* Reserves room for the Stripe iframe while it loads, so the page does
	   not jump once it mounts. */
	min-height: 12rem;
}

.wsevents-checkout__status {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	color: var(--muted);
}

.wsevents-checkout__confirming p,
.wsevents-checkout__confirmed p,
.wsevents-checkout__pending-email p {
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: var(--radius, 4px);
	background: var(--paper-2);
	border: 1px solid var(--rule);
	font-size: 0.9375rem;
	color: var(--ink);
}

.wsevents-checkout__confirmed p {
	font-weight: 600;
}

/* ── Member self-service cancel/refund widget (Phase 3c, issue 23) ───────
   Tokens only, same discipline as the rest of this file — see its top
   docblock. Shares the my-events-page row and the single-event widget, so
   both surfaces read identically. */

.wsevents-cancel-refund {
	margin-top: 0.5rem;
}

.wsevents-cancel-refund__position {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	color: var(--ink-2);
}

.wsevents-cancel-refund__error {
	margin: 0.5rem 0 0;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--red);
	border-radius: var(--radius, 4px);
	background: var(--paper-2);
	color: var(--red);
	font-size: 0.875rem;
}

.wsevents-cancel-refund__result {
	margin: 0.5rem 0 0;
	padding: 0.6rem 0.9rem;
	border-radius: var(--radius, 4px);
	background: var(--paper-2);
	border: 1px solid var(--rule);
	color: var(--ink);
	font-size: 0.9375rem;
}

/* A refund the server could not confirm dispatching (`cancelled_refund_failed`)
   is money owed, not routine confirmation — never styled the same as an
   ordinary success/no-refund result (see WSEvents_REST::
   cancel_response_for_refund_outcome()'s own docblock for why this outcome
   is never folded into the others). */
.wsevents-cancel-refund__result[data-outcome="cancelled_refund_failed"] {
	border-color: var(--red);
	color: var(--red);
	font-weight: 600;
}

/* ── Waitlist (Phase 5b) ────────────────────────────────────────────────────
   Tokens only, same discipline as the rest of this file — see its top
   docblock. Claim/join reuse the EXISTING register button classes
   (.wsevents-event-actions__btn--register); leave/decline reuse the
   EXISTING cancel classes — no new colour vocabulary introduced. */

.wsevents-waitlist-status,
.wsevents-waitlist-offer {
	margin: 0 0 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--paper-2);
	border: 1px solid var(--rule);
	border-radius: var(--radius, 4px);
}

.wsevents-waitlist-status__position,
.wsevents-waitlist-offer__status {
	margin: 0 0 0.5rem;
	font-weight: 600;
	color: var(--ink);
}

.wsevents-waitlist-offer .wsevents-guest-countdown {
	margin: 0 0 0.75rem;
}

/* my-events rows: a waitlisted/offered entry is visually distinct from a
   confirmed one via a left accent border, never colour alone (kept subtle —
   this is a queue-position notice, not an error state). */
.wsevents-my-events__row--waitlisted,
.wsevents-my-events__row--offered {
	border-left: 3px solid var(--rule);
	padding-left: calc(1.25rem - 2px);
}

.wsevents-my-events__row--offered {
	border-left-color: var(--red);
}

.wsevents-my-events__row-status {
	margin: 0.5rem 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ink);
}

.wsevents-my-events__row-status--offered {
	color: var(--red);
}

.wsevents-my-events__row-hint {
	margin: 0.25rem 0 0.5rem;
	font-size: 0.875rem;
	color: var(--ink-2);
}

.wsevents-my-events__claim-form,
.wsevents-my-events__leave-form {
	display: inline-block;
	margin: 0.25rem 0.5rem 0 0;
}

.wsevents-my-events__claim-btn {
	min-height: var(--wsevents-touch);
	padding: 0.5rem 1.25rem;
	background: transparent;
	border: 1px solid var(--ink);
	border-radius: var(--radius, 4px);
	color: var(--ink);
	font-family: var(--wp--preset--font-family--archivo, inherit);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background-color 150ms ease-out, color 150ms ease-out;
}

.wsevents-my-events__claim-btn:hover,
.wsevents-my-events__claim-btn:focus-visible {
	background: var(--ink);
	color: var(--paper);
	outline: none;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.wsevents-upcoming__row,
	.wsevents-my-events__row {
		padding: 0.875rem 1rem;
	}

	.wsevents-event-actions__btn,
	.wsevents-my-events__cancel-btn,
	.wsevents-my-events__claim-btn {
		width: 100%;
		text-align: center;
	}

	.wsevents-checkout {
		max-width: none;
	}
}