/* /tickets: the counters, your ticket and the answer cards. */

.reg-main { padding-bottom: 70px; }
.reg-lead { margin: 12px 0 0; max-width: 700px; color: #c3c5b9; font-size: 14px; line-height: 1.7; }
.reg-lead strong { color: var(--yellow); }

.reg-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 26px 0 22px; }
.count-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 22px 14px; border: 2px solid #22302d; background: linear-gradient(160deg, #0b1716, #07100f 70%);
}
.count-box strong { font: 800 clamp(38px, 6vw, 62px)/1 var(--display); color: var(--teal); }
.count-box.total { border-color: var(--orange); }
.count-box.total strong { color: var(--orange); }
.count-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--paper); text-align: center; }
.count-extra { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #7d877f; min-height: 1em; }

.reg-card { border: 2px solid var(--teal); background: linear-gradient(160deg, #0b1716, #050a09 70%); }
.reg-body { padding: 22px 24px 26px; }

.reg-part { padding: 18px 0; border-bottom: 1px solid #1c2b28; }
.reg-part:last-of-type { border-bottom: 0; }
.reg-part-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.reg-part h3 { margin: 0; font: 800 26px/1 var(--display); text-transform: uppercase; color: var(--teal); }
.reg-dates { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.reg-part p { margin: 8px 0 0; color: #c3c5b9; font-size: 13px; }
.reg-numbers { color: #8a938b !important; font-size: 11px !important; letter-spacing: .08em; text-transform: uppercase; }

.reg-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.reg-btn {
  padding: 10px 16px; border: 2px solid #34403a; background: none; color: var(--paper);
  font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.reg-btn:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.reg-btn.chosen { background: var(--teal); border-color: var(--teal); color: var(--ink); }
.reg-btn:disabled { opacity: .45; cursor: not-allowed; }
.reg-btn.chosen:disabled { opacity: 1; cursor: default; }

.reg-comment-row { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.reg-comment-row label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.reg-comment-row textarea {
  width: 100%; padding: 10px 12px; background: #0d1918; border: 1px solid #2a3f3c;
  color: var(--paper); font: 13px/1.5 var(--mono); resize: vertical;
}
.reg-comment-row textarea:focus { outline: none; border-color: var(--teal); }
.reg-comment-row .inline-row { align-items: center; gap: 14px; }
.reg-comment-row .hint { margin: 0; }
.reg-comment-row a, .reg-help a { color: var(--yellow); text-decoration: underline; text-underline-offset: 2px; }
.reg-status { font-size: 11px; color: #8a938b; }
.reg-status.ok { color: var(--green); }
.reg-status.bad { color: var(--orange); }

.reg-help { margin-top: 22px; padding: 20px 24px; border: 1px solid #34403a; color: #9ea59e; font-size: 12px; }
.reg-help strong { display: block; margin-bottom: 6px; color: var(--paper); font: 800 18px var(--display); text-transform: uppercase; }
.reg-help p { margin: 0; line-height: 1.7; }

/* Your ticket, or where you stand. */
.ticket-card {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  margin: 0 0 22px; padding: 20px 24px; border: 2px dashed var(--yellow);
  background: linear-gradient(160deg, #17160b, #0a0905 70%);
}
.ticket-card.ticket { border-style: solid; border-color: var(--orange); }
.ticket-kicker { grid-column: 1 / -1; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
.ticket-number { font: 800 clamp(44px, 8vw, 76px)/1 var(--display); color: var(--orange); word-spacing: .15em; }
.ticket-card p { margin: 0; color: #c3c5b9; font-size: 13px; line-height: 1.7; }
.ticket-card a { color: var(--yellow); text-decoration: underline; text-underline-offset: 2px; }

/* One ticket per person, as shown at the door. */
.ticket-stubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.ticket-stub {
  display: flex; align-items: stretch; justify-content: space-between; gap: 16px;
  padding: 16px 16px 16px 20px; background: #f3ecd8; color: #10100c;
  border-left: 6px solid var(--orange);
}
.stub-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stub-event { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #6b5a33; }
.stub-number { font: 800 44px/1 var(--display); color: #c2410c; }
.stub-meta { font-size: 12px; color: #2a2a22; overflow-wrap: anywhere; }
.stub-seat { margin-top: auto; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6b5a33; }
.ticket-card .stub-qr { flex: none; display: block; width: 132px; height: 132px; text-decoration: none; }
.stub-qr svg { display: block; width: 100%; height: 100%; }

.reg-name-row { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.reg-name-row label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.reg-name-row .inline-row { gap: 10px; }
.reg-name-row input {
  flex: 1; min-width: 0; padding: 10px 12px; background: #0d1918; border: 1px solid #2a3f3c;
  color: var(--paper); font: 13px var(--mono);
}
.reg-name-row input:focus { outline: none; border-color: var(--teal); }
.reg-help + .reg-help { margin-top: 14px; }
.reg-help strong.reg-inline { display: inline; margin: 0; font: inherit; font-weight: 700; text-transform: none; color: var(--yellow); }

.reg-party-row { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 4px; border-bottom: 1px solid #1c2b28; }
.reg-party-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.reg-party-row .reg-buttons { margin-top: 0; }
.reg-party-row .reg-btn { min-width: 52px; }
.reg-party-row .hint { margin: 0; }
.reg-help p + p { margin-top: 8px; }

@media (max-width: 800px) {
  .reg-counts { grid-template-columns: 1fr; gap: 10px; margin: 18px 0 16px; }
  .count-box { flex-direction: row; gap: 12px; padding: 14px; justify-content: flex-start; }
  .count-box strong { font-size: 34px; }
  .count-label { text-align: left; }
  .count-extra { margin-left: auto; }
  .reg-body { padding: 18px 16px 22px; }
  .ticket-card { grid-template-columns: 1fr; padding: 16px; }
  .reg-buttons { gap: 8px; }
  .reg-btn { flex: 1; padding: 10px 8px; font-size: 11px; }
  .reg-party-row .reg-btn { min-width: 0; }
  .ticket-number { font-size: 40px; }
  .ticket-stubs { grid-template-columns: 1fr; }
  .ticket-stub { padding: 12px 12px 12px 14px; }
  .ticket-card .stub-qr { width: 148px; height: 148px; }
}

/* /check, at the door: the verdict has to be readable at arm's length. */
.check-result {
  display: flex; flex-direction: column; gap: 12px; margin: 26px 0 22px; padding: 26px 24px;
  border: 3px solid #34403a; background: linear-gradient(160deg, #0b1716, #050a09 70%);
}
.check-verdict { font: 800 clamp(48px, 12vw, 96px)/1 var(--display); text-transform: uppercase; color: var(--paper); }
.check-result.ok { border-color: var(--green); }
.check-result.ok .check-verdict { color: var(--green); }
.check-result.warn { border-color: var(--yellow); }
.check-result.warn .check-verdict { color: var(--yellow); }
.check-result.bad { border-color: var(--orange); }
.check-result.bad .check-verdict { color: var(--orange); }
.check-number { font: 800 40px/1 var(--display); color: var(--orange); }
.check-holder { display: flex; align-items: center; gap: 14px; }
.check-holder strong { display: block; font-size: 16px; }
.check-detail { margin: 0; color: #c3c5b9; font-size: 14px; line-height: 1.6; }
.check-result .inline-row { align-items: center; gap: 16px; }