/* Cirrus ticket surfaces — loaded after cirrus.css/navigation.css. */
.ticket {
  --ticket-ink: #102a4a;
  --ticket-ink-soft: #294b68;
  --ticket-line: #79d9e7;
  --ticket-code-bg: #ffffff;
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  padding: 22px;
  border: 1px solid var(--ticket-line);
  border-radius: 24px;
  background: linear-gradient(125deg, #b8fbff 0%, #d7f5ff 23%, #ddd2ff 48%, #f4ccff 68%, #d9ffad 100%);
  color: var(--ticket-ink);
  box-shadow: 0 16px 36px #3b73ad2e, 0 2px 0 #ffffff;
}

/* A single, clipped sweep on hover keeps the holographic surface lively without motion at rest. */
.ticket::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  clip-path: inset(0 round 24px);
  background: linear-gradient(105deg, transparent 0%, transparent 42%, #ffffffb8 50%, transparent 58%, transparent 100%);
  background-size: 220% 100%;
  background-position: 120% 0;
}
.ticket > * { position: relative; z-index: 1; }
@media (hover: hover) {
  .ticket:hover::before { animation: ticket-hologram-sweep .72s ease-out 1 both; }
}
@keyframes ticket-hologram-sweep {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

.ticket h3 {
  margin: 12px 0 5px;
  color: var(--ticket-ink);
  font-size: 20px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.ticket p {
  margin: 6px 0;
  color: var(--ticket-ink-soft);
  font-size: 12px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.ticket .sub,
.ticket p.sub {
  color: #315775;
  font-size: 11px;
}
.ticket .order-id {
  direction: ltr;
  unicode-bidi: plaintext;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  color: #173d63;
  overflow-wrap: anywhere;
}

.ticket .badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 11px;
  border: 1px solid #1689a8;
  border-radius: 999px;
  background: #e8ffff;
  color: #07516c;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
  white-space: nowrap;
}
.ticket details {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #9bbbea;
  border-radius: 15px;
  background: #f8fbff;
  color: var(--ticket-ink);
  font-size: 12px;
}
.ticket summary {
  min-height: 28px;
  padding: 3px 0;
  color: #173d63;
  cursor: pointer;
  font-weight: 800;
}
.ticket summary::marker { color: #126e9b; }

.ticket .credential {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}
.ticket .credential code {
  display: block;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #93bde1;
  border-radius: 11px;
  background: var(--ticket-code-bg);
  color: #102a4a;
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
  font: 600 12px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  user-select: all;
}
.ticket .credential .btn,
.ticket .copy-btn,
.ticket button[data-copy] {
  justify-self: start;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid #2877be;
  border-radius: 999px;
  background: linear-gradient(110deg, #087fa9, #426dd1);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 7px 15px #2862ae33;
}
.ticket .credential .btn:hover,
.ticket .credential .btn:focus-visible,
.ticket .copy-btn:hover,
.ticket .copy-btn:focus-visible,
.ticket button[data-copy]:hover,
.ticket button[data-copy]:focus-visible {
  border-color: #124e97;
  background: linear-gradient(110deg, #056d9a, #354eb8);
}
.ticket button:focus-visible,
.ticket summary:focus-visible,
.ticket a:focus-visible {
  outline: 3px solid #083e78;
  outline-offset: 3px;
}

/* Keep every ticket surface vivid and fully opaque in the dark theme too. */
html[data-theme="dark"] .ticket {
  --ticket-ink: #10223f;
  --ticket-ink-soft: #243f62;
  --ticket-line: #71d8e5;
  --ticket-code-bg: #ffffff;
  background: linear-gradient(125deg, #72f2ef 0%, #91dfff 24%, #c8b4ff 48%, #efa6e9 70%, #b9f27d 100%);
  color: var(--ticket-ink);
  border-color: #54cbd9;
  box-shadow: 0 18px 40px #00000066, 0 2px 0 #ffffff;
}
html[data-theme="dark"] .ticket h3,
html[data-theme="dark"] .ticket p,
html[data-theme="dark"] .ticket .sub,
html[data-theme="dark"] .ticket p.sub,
html[data-theme="dark"] .ticket .order-id { color: var(--ticket-ink); }
html[data-theme="dark"] .ticket details {
  border-color: #70a7d1;
  background: #f5fbff;
  color: #102a4a;
}
html[data-theme="dark"] .ticket summary { color: #123b61; }
html[data-theme="dark"] .ticket .credential code { background: #ffffff; color: #102a4a; border-color: #70a7d1; }
html[data-theme="dark"] .ticket .badge { background: #f0ffff; color: #064a65; border-color: #087b9a; }

@media (max-width: 650px) {
  .ticket { padding: 18px; }
  .ticket .credential .btn,
  .ticket .copy-btn,
  .ticket button[data-copy] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ticket,
  .ticket *,
  .ticket::before,
  .ticket::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .ticket {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }
  .ticket h3,
  .ticket p,
  .ticket .sub,
  .ticket .order-id,
  .ticket details,
  .ticket summary,
  .ticket .credential code { color: CanvasText; }
  .ticket details,
  .ticket .credential code,
  .ticket .badge,
  .ticket .credential .btn,
  .ticket .copy-btn,
  .ticket button[data-copy] { border-color: ButtonText; background: Canvas; color: ButtonText; }
  .ticket::before { display: none; }
}