/*
 * event_pay.css — card checkout on the event page (Toss Payments) and the
 * payment result pages (event_pay_success / event_pay_fail).
 */

/* ---- purchase panel on the event page ---- */
.wg-card-buy { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.wg-card-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wg-card-row label { font-weight: 600; }
.wg-card-row select { width: auto; min-width: 72px; }
.wg-card-total { margin-left: auto; color: var(--wg-muted); }
.wg-card-total strong { color: var(--wg-text); font-size: 1.1em; }
.wg-card-note, .wg-card-meta { margin: 0; font-size: .86rem; color: var(--wg-muted); }
.wg-card-meta a { color: var(--wg-color-ink); }

.wg-card-ticket { border: 1px solid var(--wg-border-soft); background: var(--wg-tint);
  border-radius: 12px; padding: 12px 14px; }
.wg-card-ticket-h { margin: 0 0 4px; font-weight: 700; color: var(--wg-color-ink); }
.wg-card-ticket-l { margin: 0 0 10px; }
.wg-card-ticket-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- result pages ---- */
.wg-pay-result { display: flex; justify-content: center; padding: 32px var(--wg-space) 48px; }
.wg-pay-card { width: 100%; max-width: 460px; background: var(--wg-raised); border: 1px solid var(--wg-border-soft);
  border-radius: var(--wg-radius-card); box-shadow: var(--wg-shadow-card); padding: 28px 22px; text-align: center; }
.wg-pay-icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center;
  font-size: 28px; font-weight: 700; }
.is-ok .wg-pay-icon { background: var(--wg-tint); color: var(--wg-color-ink); }
.is-fail .wg-pay-icon { background: var(--wg-warn-tint); color: var(--wg-warn-ink); }
.wg-pay-card h1 { font-size: 1.35rem; margin: 0 0 8px; }
.wg-pay-lead { margin: 0 0 14px; }
.wg-pay-rows { margin: 0 0 14px; text-align: left; }
.wg-pay-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-bottom: 1px dashed var(--wg-border); }
.wg-pay-rows > div:last-child { border-bottom: 0; }
.wg-pay-rows dt { color: var(--wg-muted); }
.wg-pay-rows dd { margin: 0; font-weight: 600; word-break: break-all; }
.wg-pay-test { margin: 0 0 14px; font-size: .86rem; color: var(--wg-info-ink); background: var(--wg-info-tint);
  border-radius: var(--wg-radius); padding: 8px 10px; }
.wg-pay-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.wg-pay-small { margin: 0; font-size: .86rem; color: var(--wg-muted); }
.wg-pay-small a { color: var(--wg-color-ink); }

/* Ticket types on the event page (migration 2026-10-28b). */
.wg-card-types { display: flex; flex-direction: column; gap: 8px; }
.wg-card-type { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--wg-border); border-radius: 14px; cursor: pointer; background: var(--wg-raised); }
.wg-card-type input { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--wg-color-ink); }
.wg-card-type:has(input:checked) { border-color: var(--wg-color-ink); background: var(--wg-tint); }
.wg-card-type.is-off { cursor: default; opacity: .6; }
.wg-card-type-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.wg-card-type-main span { font-size: .86rem; color: var(--wg-muted); }
.wg-card-type-main .wg-card-type-when { font-size: .8rem; font-weight: 600; color: var(--wg-color-ink); }
.wg-card-type.is-off .wg-card-type-when { color: var(--wg-muted); }
.wg-card-type-price { font-weight: 800; white-space: nowrap; }

/* Several types in one order (2026-10-28c): a stepper per type. */
.wg-card-type { cursor: default; }
.wg-card-type.is-picked { border-color: var(--wg-color-ink); background: var(--wg-tint); }
.wg-card-type-main b .wg-card-type-price { margin-left: 6px; font-weight: 800; }
.wg-card-step { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.wg-card-step button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--wg-border); background: var(--wg-surface); color: var(--wg-text); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.wg-card-step button:disabled { opacity: .35; cursor: default; }
.wg-card-step output { min-width: 22px; text-align: center; font-weight: 800; font-size: 1.05rem; }
.wg-card-count { font-weight: 600; }