/* ──────────────────────────────────────────────────────────────────────────
   Baiscope Ticket (v1.8.0)
   White, framed, ticket-shaped card with a tear-off stub holding a big QR.
   Layout switches on the width of the ticket's own container (not the
   screen), so it also looks right inside narrow dashboard cards.
   ────────────────────────────────────────────────────────────────────────── */

.bai-tk-wrap {
  container-type: inline-size;
  container-name: baitk;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .38));
}

.bai-tk {
  --tk-primary: var(--baiscope-primary, #e23636);
  --tk-accent:  var(--baiscope-accent, #00bcd4);
  --tk-ink:     #1a1a2e;
  --tk-muted:   #6b7a8c;
  --tk-line:    #e3e7ed;
  --tk-stub:    236px;
  --tk-hole:    12px;

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tk-stub);
  background: #fff;
  color: var(--tk-ink);
  border-radius: 18px;
  font-family: var(--baiscope-font, 'Inter', system-ui, -apple-system, sans-serif);
  text-align: left;
  line-height: 1.35;
  box-sizing: border-box;
  /* real half-circle cut-outs where the stub tears off */
  -webkit-mask:
    radial-gradient(circle at calc(100% - var(--tk-stub)) 0,    transparent var(--tk-hole), #000 calc(var(--tk-hole) + .5px)),
    radial-gradient(circle at calc(100% - var(--tk-stub)) 100%, transparent var(--tk-hole), #000 calc(var(--tk-hole) + .5px));
  -webkit-mask-composite: source-in;
          mask:
    radial-gradient(circle at calc(100% - var(--tk-stub)) 0,    transparent var(--tk-hole), #000 calc(var(--tk-hole) + .5px)),
    radial-gradient(circle at calc(100% - var(--tk-stub)) 100%, transparent var(--tk-hole), #000 calc(var(--tk-hole) + .5px));
          mask-composite: intersect;
}
.bai-tk *, .bai-tk *::before, .bai-tk *::after { box-sizing: border-box; }

/* The frame: bold outer line + fine inner line */
.bai-tk::before {
  content: "";
  position: absolute; inset: 0;
  border: 3px solid var(--tk-primary);
  border-radius: 18px;
  pointer-events: none;
  z-index: 2;
}
.bai-tk::after {
  content: "";
  position: absolute; inset: 8px;
  border: 1px solid var(--tk-line);
  border-radius: 12px;
  pointer-events: none;
  z-index: 2;
}

/* ── Main (poster + details) ─────────────────────────────────────────────── */
.bai-tk__main {
  display: flex;
  gap: 18px;
  padding: 24px 22px 22px 24px;
  min-width: 0;
}
.bai-tk__poster {
  flex: 0 0 124px;
  align-self: flex-start;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #eef1f5;
  border: 1px solid var(--tk-line);
  display: flex; align-items: center; justify-content: center;
}
.bai-tk__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bai-tk__poster-empty { font-size: 34px; opacity: .45; }

.bai-tk__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.bai-tk__brand {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tk-muted);
  margin-bottom: 6px;
}
.bai-tk__brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bai-tk__brand em {
  font-style: normal; flex-shrink: 0;
  background: var(--tk-primary); color: #fff;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .1em;
}

.bai-tk__title {
  margin: 0 0 8px;
  font-family: var(--baiscope-font-heading, 'Poppins', var(--baiscope-font, sans-serif));
  font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
  color: var(--tk-ink);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.bai-tk__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bai-tk__badges span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tk-primary); border: 1.5px solid var(--tk-primary);
  padding: 2px 8px; border-radius: 6px;
}

.bai-tk__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 14px; }
.bai-tk__grid label {
  display: block; margin-bottom: 2px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tk-muted);
}
.bai-tk__grid strong { display: block; font-size: 14px; font-weight: 700; color: var(--tk-ink); }
.bai-tk__seats { grid-column: 1 / -1; }
.bai-tk__seats strong { display: flex; flex-wrap: wrap; gap: 6px; }
.bai-tk__seat {
  display: inline-block;
  min-width: 38px; text-align: center;
  padding: 3px 9px; border-radius: 7px;
  /* tinted accent without color-mix(), which the PNG exporter can't read */
  background: linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86)), var(--tk-accent);
  border: 1.5px solid var(--tk-accent);
  font-size: 14px; font-weight: 800; letter-spacing: .02em;
}

.bai-tk__cinema {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--tk-line);
  min-width: 0;
}
.bai-tk__cinema img, .bai-tk__cinema-icon {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 9px;
  object-fit: cover; background: #eef1f5; border: 1px solid var(--tk-line);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.bai-tk__cinema div { min-width: 0; }
.bai-tk__cinema strong { display: block; font-size: 13px; font-weight: 700; color: var(--tk-ink); overflow-wrap: anywhere; }
.bai-tk__cinema span { display: block; font-size: 11.5px; color: var(--tk-muted); overflow-wrap: anywhere; }

/* ── Stub (big QR) ───────────────────────────────────────────────────────── */
.bai-tk__stub {
  position: relative;
  margin: 14px 0;
  padding: 6px 20px;
  border-left: 2px dashed #cdd3dc;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; min-width: 0;
}
.bai-tk__qr {
  width: 172px; height: 172px;
  padding: 8px; background: #fff;
  border: 2.5px solid var(--tk-ink); border-radius: 12px;
  line-height: 0;
}
.bai-tk__qr img,
.bai-tk__qr canvas,
.bai-tk__qr svg { width: 100% !important; height: 100% !important; display: block !important; }
.bai-tk__qr canvas { image-rendering: pixelated; }
.bai-tk__qr--text { display: flex; align-items: center; justify-content: center; font: 700 13px/1.3 monospace; color: #1a1a2e; text-align: center; line-height: 1.3; word-break: break-all; }
.bai-tk__scan {
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tk-primary);
}
.bai-tk__ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; font-weight: 800; letter-spacing: .06em; color: var(--tk-ink);
  overflow-wrap: anywhere;
}
.bai-tk__name { font-size: 11.5px; color: var(--tk-muted); overflow-wrap: anywhere; }
.bai-tk__status {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #b45309; background: #fef3c7; border: 1px solid #fcd34d;
  padding: 3px 9px; border-radius: 6px;
}

/* ── Buttons under the ticket ────────────────────────────────────────────── */
.bai-tk-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.bai-tk-btn {
  appearance: none; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px; border-radius: 10px;
  font: 600 14px/1 var(--baiscope-font, 'Inter', system-ui, sans-serif);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.bai-tk-btn:hover { transform: translateY(-1px); }
.bai-tk-btn--primary { background: var(--baiscope-primary, #e23636); border: 1.5px solid var(--baiscope-primary, #e23636); color: #fff; }
.bai-tk-btn--primary:hover { background: var(--baiscope-primary-dark, #b52b2b); border-color: var(--baiscope-primary-dark, #b52b2b); }
.bai-tk-btn--ghost { background: transparent; border: 1.5px solid rgba(255, 255, 255, .28); color: #fff; }
.bai-tk-btn--ghost:hover { border-color: var(--baiscope-accent, #00bcd4); color: var(--baiscope-accent, #00bcd4); }
.bai-tk-btn[disabled] { opacity: .6; cursor: wait; transform: none; }

/* ── Narrow containers: stack, stub drops below ──────────────────────────── */
@container baitk (max-width: 580px) {
  .bai-tk {
    --tk-stub: 268px;
    grid-template-columns: minmax(0, 1fr);
    -webkit-mask:
      radial-gradient(circle at 0 calc(100% - var(--tk-stub)),    transparent var(--tk-hole), #000 calc(var(--tk-hole) + .5px)),
      radial-gradient(circle at 100% calc(100% - var(--tk-stub)), transparent var(--tk-hole), #000 calc(var(--tk-hole) + .5px));
    -webkit-mask-composite: source-in;
            mask:
      radial-gradient(circle at 0 calc(100% - var(--tk-stub)),    transparent var(--tk-hole), #000 calc(var(--tk-hole) + .5px)),
      radial-gradient(circle at 100% calc(100% - var(--tk-stub)), transparent var(--tk-hole), #000 calc(var(--tk-hole) + .5px));
            mask-composite: intersect;
  }
  .bai-tk__main { padding: 22px 18px 18px; gap: 14px; }
  .bai-tk__poster { flex-basis: 92px; }
  .bai-tk__title { font-size: 18px; }
  .bai-tk__seat { font-size: 13px; padding: 2px 8px; min-width: 34px; }
  .bai-tk__grid { grid-template-columns: 1fr 1fr; }
  .bai-tk__stub {
    height: var(--tk-stub);
    margin: 0 16px; padding: 14px 0 18px;
    border-left: 0; border-top: 2px dashed #cdd3dc;
    gap: 7px;
  }
  .bai-tk__qr { width: 160px; height: 160px; }
}

/* Very small: poster above the details */
@container baitk (max-width: 290px) {
  .bai-tk__main { flex-direction: column; align-items: center; }
  .bai-tk__poster { flex-basis: auto; width: 128px; align-self: center; }
  .bai-tk__info { width: 100%; }
  .bai-tk__title { text-align: center; }
  .bai-tk__badges { justify-content: center; }
  .bai-tk__brand { justify-content: space-between; }
}

/* Browsers without container queries: fall back to the screen width */
@supports not (container-type: inline-size) {
  @media (max-width: 600px) {
    .bai-tk { --tk-stub: 268px; grid-template-columns: minmax(0, 1fr); -webkit-mask: none; mask: none; }
    .bai-tk__stub { height: var(--tk-stub); margin: 0 16px; border-left: 0; border-top: 2px dashed #cdd3dc; }
  }
}

/* While being exported to an image (masks/filters aren't captured) */
.bai-tk--export { -webkit-mask: none !important; mask: none !important; }

@media print {
  .bai-tk { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bai-tk-wrap { filter: none; }
}