/* my-tickets.css — buyer ticket wallet (my-tickets.html). CSP-strict. */
.mt-body {
  margin: 0; min-height: 100vh;
  background: linear-gradient(160deg, #eef2fb 0%, #f7f8fc 55%, #ffffff 100%);
  color: #16255c; font-family: 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.mt-wrap { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }
.mt-head { text-align: center; margin-bottom: 20px; }
.mt-brand { font-weight: 700; font-size: 14px; color: #1e3a8a; }
.mt-title { font-family: 'Bai Jamjuree', 'Sarabun', sans-serif; font-size: 24px; margin: 4px 0 4px; color: #16255c; }
.mt-sub { font-size: 13.5px; color: #6b7280; margin: 0; }

.mt-state { text-align: center; padding: 40px 12px; }
.mt-muted { color: #6b7280; font-size: 14px; }
.mt-spinner { width: 34px; height: 34px; margin: 0 auto 14px; border: 3px solid #dbe3f4; border-top-color: #1e3a8a; border-radius: 50%; animation: mt-spin .8s linear infinite; }
@keyframes mt-spin { to { transform: rotate(360deg); } }

.mt-group { margin-bottom: 26px; }
.mt-group-head { margin: 0 2px 12px; padding-bottom: 8px; border-bottom: 2px solid #e5e9f2; }
.mt-group-head h2 { font-family: 'Bai Jamjuree', 'Sarabun', sans-serif; font-size: 18px; margin: 0; color: #16255c; }
.mt-group-meta { font-size: 13px; color: #475569; margin-top: 3px; }
.mt-group-count { font-size: 12.5px; color: #94a0b8; margin-top: 3px; }

.mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }

.mt-ticket {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border: 1px solid #e5e9f2; border-radius: 14px; padding: 12px;
  box-shadow: 0 4px 16px rgba(30, 58, 138, .06);
}
.mt-ticket.st-void { opacity: .7; }
.mt-qr { flex: 0 0 88px; width: 88px; height: 88px; display: block; border: 1px solid #eef1f7; border-radius: 8px; padding: 4px; background: #fff; }
.mt-qr img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.mt-qr.is-void { background: repeating-linear-gradient(45deg, #f1f1f4, #f1f1f4 6px, #e7e7ec 6px, #e7e7ec 12px); }

.mt-tk-body { flex: 1 1 auto; min-width: 0; }
.mt-tk-seat { font-weight: 700; font-size: 14.5px; color: #16255c; }
.mt-tk-tier { font-size: 12.5px; color: #6b7280; margin: 1px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-tk-holder { font-size: 12.5px; color: #16255c; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mt-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; }
.mt-chip.ok   { background: #e7f7ee; color: #0f7a44; border-color: #b9e6cd; }
.mt-chip.used { background: #eef1f8; color: #475569; border-color: #d5dcea; }
.mt-chip.void { background: #fdecec; color: #b42318; border-color: #f4c9c4; }

.mt-tk-actions { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.mt-tk-editform { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.mt-input { padding: 7px 10px; border-radius: 8px; border: 1px solid #c7d2e8; font-size: 13px; font-family: inherit; width: 100%; box-sizing: border-box; }
.mt-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; min-height: 36px; }
.mt-btn-ghost { background: #fff; color: #1e3a8a; border-color: #c7d2e8; }
.mt-btn-ghost:hover { background: #f3f6fd; }
.mt-btn-primary { background: #1e3a8a; color: #fff; }
.mt-btn-primary:hover { background: #16265f; }
.mt-sm { padding: 6px 10px; min-height: 32px; font-size: 12.5px; }