/* IPN TV 1.9 · Premium event ticket (account + email link), logo QR frame, check-in lock, tickets on sale. Light & night, RTL & LTR, print. */

/* ---- page ---- */
.tk-page { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 28px; align-items: start; }
.tk-side { position: sticky; top: 16px; }
@media (max-width: 980px) { .tk-page { grid-template-columns: 1fr; justify-items: center; } .tk-page > .tk-wrap, .tk-side { width: 100%; max-width: 500px; } .tk-side { position: static; } }

/* ---- the ticket ---- */
.tk { --tk-paper: #FFFFFF; --tk-ink: #15112B; --tk-mut: #736C8E; --tk-line: #E7E2F3; --tk-sunk: #F7F5FC;
  position: relative; display: flex; flex-direction: column; width: 100%; border-radius: 30px; background: var(--tk-paper); color: var(--tk-ink);
  isolation: isolate; overflow: hidden; }
html[data-mode="dark"] .tk { --tk-paper: #1C1738; --tk-ink: #F5F2FF; --tk-mut: #A69FC6; --tk-line: rgba(255,255,255,.1); --tk-sunk: #231D44; }
.tk .ic { width: 18px; height: 18px; }

.tk__head { position: relative; min-height: 270px; padding: 18px 20px 22px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.tk__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.tk__veil { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,8,32,.3) 0%, rgba(12,8,32,.88) 100%), linear-gradient(115deg, color-mix(in srgb, var(--acc) 72%, transparent) 0%, transparent 62%); }
html[dir="rtl"] .tk__veil { background: linear-gradient(180deg, rgba(12,8,32,.3) 0%, rgba(12,8,32,.88) 100%), linear-gradient(245deg, color-mix(in srgb, var(--acc) 72%, transparent) 0%, transparent 62%); }
.tk__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tk__brand .logo { height: 28px; font-size: 20px; }
.tk__brand .logo__tv { background: #fff; color: #15112B; }
.tk__brand img.logo { height: 34px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.tk__src { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 12.5px; font-weight: 800; }
.tk__src .ic { width: 14px; height: 14px; }
.tk__hero { display: flex; align-items: flex-end; gap: 16px; }
.tk__poster { flex: none; width: 92px; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 14px; border: 3px solid #fff; box-shadow: 0 14px 28px -12px rgba(0,0,0,.7); transform: rotate(-2.5deg); background: #fff; }
html[dir="rtl"] .tk__poster { transform: rotate(2.5deg); }
.tk__ht { display: grid; gap: 4px; min-width: 0; }
.tk__cat { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: rgba(255,255,255,.88); letter-spacing: .04em; text-transform: uppercase; }
html[dir="rtl"] .tk__cat { letter-spacing: 0; text-transform: none; font-size: 13px; }
.tk__cat .ic { width: 14px; height: 14px; }
.tk__ht h2 { margin: 0; font-size: clamp(21px, 3.2vw, 26px); font-weight: 900; line-height: 1.25; text-wrap: balance; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.tk__ht p { margin: 0; font-size: 13.5px; font-weight: 600; opacity: .88; }

/* checked in: green bar */
.tk__inbar { display: flex; align-items: center; gap: 12px; margin: -1px 0 0; padding: 12px 18px; background: linear-gradient(90deg, #047857, #059669); color: #fff; }
html[dir="rtl"] .tk__inbar { background: linear-gradient(270deg, #047857, #059669); }
.tk__inbar > .ic { width: 26px; height: 26px; }
.tk__inbar span { display: grid; flex: 1; line-height: 1.35; } .tk__inbar strong { font-size: 15.5px; font-weight: 900; } .tk__inbar small { font-size: 12.5px; opacity: .9; }
.tk__inbar .tk__inlock { width: 22px; height: 22px; opacity: .9; }

/* facts with icon tiles */
.tk__facts { list-style: none; margin: 0; padding: 20px 20px 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.tk__fact { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.tk__fact--wide { grid-column: 1 / -1; }
.tk__ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--acc); background: color-mix(in srgb, var(--acc) 11%, transparent); }
html[data-mode="dark"] .tk__ic { color: color-mix(in srgb, var(--acc) 55%, #fff); background: color-mix(in srgb, var(--acc) 22%, transparent); }
.tk__fv { display: grid; gap: 1px; min-width: 0; line-height: 1.4; }
.tk__fv small { font-size: 11.5px; font-weight: 800; color: var(--tk-mut); letter-spacing: .05em; text-transform: uppercase; }
html[dir="rtl"] .tk__fv small { letter-spacing: 0; text-transform: none; font-size: 12px; }
.tk__fv b { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.tk__fv em { font-style: normal; font-size: 12.5px; color: var(--tk-mut); overflow-wrap: anywhere; }
.tk__fact--hi b { color: var(--acc); font-size: 16.5px; }
html[data-mode="dark"] .tk__fact--hi b { color: color-mix(in srgb, var(--acc) 55%, #fff); }

/* perforation: notches + dashed tear line */
.tk__perf { position: relative; height: 34px; margin: 6px 0; }
.tk__perf i { position: absolute; inset: 50% 26px auto; border-top: 2px dashed var(--tk-line); }
/* the notches are real holes (a mask), so any page background — plain, gradient or Aurora sky — shows through; --perf-y is set by tickets.js */
.tk[style*="--perf-y"] { -webkit-mask: radial-gradient(circle 16px at 0 var(--perf-y), #0000 97%, #000) , radial-gradient(circle 16px at 100% var(--perf-y), #0000 97%, #000);
  -webkit-mask-composite: source-in; mask: radial-gradient(circle 16px at 0 var(--perf-y), #0000 97%, #000) , radial-gradient(circle 16px at 100% var(--perf-y), #0000 97%, #000); mask-composite: intersect; }
.tk-wrap { width: 100%; filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--acc, #7C3AED) 22%, rgba(20,10,50,.16))) drop-shadow(0 1px 2px rgba(20,10,50,.10)); }
html[data-mode="dark"] .tk-wrap { filter: drop-shadow(0 14px 26px rgba(0,0,0,.5)); }

/* stub: QR frame + codes */
.tk__stub { display: grid; justify-items: center; gap: 12px; padding: 4px 20px 18px; }
.tk-qr { margin: 0; display: grid; justify-items: center; gap: 10px; }
.tk-qr__frame { position: relative; display: block; padding: 10px; border-radius: 28px; background: conic-gradient(from 210deg, var(--acc), #7C3AED, #F97316, var(--acc));
  box-shadow: 0 22px 40px -24px color-mix(in srgb, var(--acc) 85%, #000); }
.tk-qr__frame::before { content: ""; position: absolute; inset: 4px; border-radius: 24px; border: 1.5px solid rgba(255,255,255,.55); pointer-events: none; }
.tk-qr__code { display: block; width: min(250px, 66vw); aspect-ratio: 1; border-radius: 20px; background: #fff; overflow: hidden; }
.tk-qr__code svg { display: block; width: 100%; height: 100%; }
.tk-qr figcaption { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 11%, transparent); color: var(--acc); font-weight: 900; font-size: 14px; }
html[data-mode="dark"] .tk-qr figcaption { color: color-mix(in srgb, var(--acc) 50%, #fff); background: color-mix(in srgb, var(--acc) 22%, transparent); }
.tk-qr figcaption .ic { animation: tk-scan 1.8s ease-in-out infinite; }
@keyframes tk-scan { 50% { transform: translateY(-2px) scale(1.08); } }
.tk__hint { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--tk-mut); font-size: 12px; text-align: center; }
.tk__hint .ic { width: 15px; height: 15px; }

.tk__used { display: grid; justify-items: center; gap: 10px; padding: 18px 0 6px; }
.tk__stamp { display: grid; justify-items: center; gap: 2px; padding: 14px 26px; border: 3px solid #047857; border-radius: 18px; color: #047857; transform: rotate(-6deg);
  background: color-mix(in srgb, #10B981 8%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, #10B981 12%, transparent); }
.tk__stamp .ic { width: 34px; height: 34px; } .tk__stamp b { font-size: 21px; font-weight: 900; } .tk__stamp small { font-size: 14px; font-weight: 800; }
html[data-mode="dark"] .tk__stamp { color: #6EE7B7; border-color: #34D399; }
.tk__used p { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--tk-mut); font-size: 13px; font-weight: 700; }
.tk__used p .ic { width: 15px; height: 15px; color: #047857; }
.tk__used--off .tk__stamp { color: #B91C1C; border-color: #B91C1C; background: color-mix(in srgb, #EF4444 7%, transparent); box-shadow: none; }

.tk__codes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 2px 0 0; width: 100%; }
.tk__codes div { display: grid; justify-items: center; gap: 2px; padding: 8px 14px; border-radius: 14px; background: var(--tk-sunk); min-width: 0; }
.tk__codes dt { font-size: 11px; font-weight: 800; color: var(--tk-mut); }
.tk__codes dd { margin: 0; font: 800 15.5px/1.2 "Schibsted Grotesk", ui-monospace, monospace; letter-spacing: .06em; }
.tk__terms { display: flex; align-items: flex-start; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--tk-line); background: var(--tk-sunk); color: var(--tk-mut); font-size: 11.5px; line-height: 1.6; }
.tk__terms .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; }

.tk.is-cancelled .tk__head, .tk.is-refunded .tk__head, .tk.is-transferred .tk__head { filter: grayscale(.8); }

/* side actions */
.tk-save { background: linear-gradient(160deg, color-mix(in srgb, var(--a-rose) 7%, var(--a-card)), var(--a-card) 60%); }
.tk-save__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tk-save__btns .ac-btn { width: 100%; }
.ac-btn.is-busy { opacity: .75; cursor: progress; }
.ac-btn.is-busy .ic { animation: tk-spin 1s linear infinite; }
@keyframes tk-spin { to { transform: rotate(360deg); } }

/* public ticket (link from the e-mail) */
.tk-solo { display: grid; gap: 14px; }
.tk-solo__btns { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin: 0; }

/* ---- attended badges (lists) ---- */
.tk-attended { display: inline-flex; align-items: center; gap: 6px; background: #ECFDF5; color: #047857; }
html[data-mode="dark"] .tk-attended { background: #052E25; color: #6EE7B7; }
.tk-attended .ic { width: 14px; height: 14px; }
.tk-attended--big { flex: none; margin-inline-start: auto; align-self: center; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 900; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #10B981 35%, transparent); }
.ac-tgroup.is-attended .ac-tgroup__h { background: linear-gradient(90deg, color-mix(in srgb, #10B981 12%, transparent), transparent); }
.tk-st-in { display: inline-flex; align-items: center; gap: 4px; } .tk-st-in .ic { width: 12px; height: 12px; }

/* ---- tickets on sale ---- */
.tk-sale { display: grid; gap: 14px; }
.tk-sale__h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tk-sale__kick { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 12.5px; font-weight: 900; color: var(--a-rose); letter-spacing: .05em; text-transform: uppercase; }
html[dir="rtl"] .tk-sale__kick { letter-spacing: 0; text-transform: none; font-size: 13px; }
.tk-live { width: 9px; height: 9px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 0 rgba(16,185,129,.55); animation: tk-live 1.8s infinite; }
@keyframes tk-live { 70% { box-shadow: 0 0 0 9px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
.tk-sale__h h2 { margin: 0; font-size: clamp(19px, 2.4vw, 23px); font-weight: 900; }
.tk-sale__lead { margin: 4px 0 0; color: var(--a-muted); font-size: 14px; }
.tk-sale__all { display: inline-flex; align-items: center; gap: 6px; flex: none; font-weight: 800; font-size: 14px; color: var(--a-link, var(--a-violet)); text-decoration: none; }
.tk-sale__all .ic { width: 16px; height: 16px; }
.tk-sale__rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
@media (max-width: 640px) {
  .tk-sale__rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: -16px; padding: 4px 16px 14px; scrollbar-width: none; }
  .tk-sale__rail::-webkit-scrollbar { display: none; }
  .tk-sale__rail > .tk-ev { flex: 0 0 78%; scroll-snap-align: start; }
  .tk-sale__h { align-items: flex-start; flex-direction: column; }
}

.tk-ev { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 22px; overflow: hidden; background: var(--a-card); border: 1px solid var(--a-line); box-shadow: var(--a-shadow);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; }
.tk-ev:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--acc) 45%, var(--a-line)); box-shadow: 0 26px 46px -28px color-mix(in srgb, var(--acc) 75%, transparent); }
.tk-ev__pic { position: relative; display: block; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--a-sunk); }
.tk-ev__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tk-ev:hover .tk-ev__pic img { transform: scale(1.06); }
.tk-ev__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,25,.15), transparent 35%, transparent 55%, rgba(10,8,25,.7)); }
.tk-ev__date { position: absolute; z-index: 1; top: 12px; inset-inline-start: 12px; display: grid; justify-items: center; min-width: 58px; padding: 7px 8px 6px; border-radius: 16px;
  background: rgba(255,255,255,.95); color: #1A1430; box-shadow: 0 10px 22px -12px rgba(0,0,0,.6); line-height: 1.05; }
.tk-ev__date b { font-size: 25px; font-weight: 900; color: color-mix(in srgb, var(--acc) 80%, #000); }
.tk-ev__date small { font-size: 12px; font-weight: 800; }
.tk-ev__date i { margin-top: 3px; padding-top: 3px; border-top: 1px solid rgba(0,0,0,.1); font-style: normal; font-size: 10.5px; font-weight: 700; color: #6B6585; }
.tk-ev__st, .tk-ev__left { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; }
.tk-ev__st { top: 12px; inset-inline-end: 12px; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tk-ev__st .ic, .tk-ev__left .ic { width: 14px !important; height: 14px !important; }
.tk-ev__st--ok { background: rgba(4,120,87,.92); } .tk-ev__st--info { background: rgba(29,78,216,.92); } .tk-ev__st--off { background: rgba(185,28,28,.92); } .tk-ev__st--soon { background: rgba(146,64,14,.92); }
.tk-ev__left { bottom: 12px; inset-inline-start: 12px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tk-ev__left.is-low { background: linear-gradient(120deg, #F97316, #E11D48); border-color: transparent; box-shadow: 0 8px 18px -8px rgba(225,29,72,.8); }
.tk-ev__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 14px 16px 16px; }
.tk-ev__cat { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: color-mix(in srgb, var(--acc) 75%, #000); }
html[data-mode="dark"] .tk-ev__cat { color: color-mix(in srgb, var(--acc) 55%, #fff); }
.tk-ev__cat .ic { width: 15px !important; height: 15px !important; }
.tk-ev h3 { margin: 0; font-size: 17px; font-weight: 900; line-height: 1.35; } .tk-ev h3 a { color: var(--a-ink); text-decoration: none; }
.tk-ev__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; color: var(--a-ink2); }
.tk-ev__facts li { display: flex; align-items: flex-start; gap: 7px; } .tk-ev__facts .ic { width: 15px !important; height: 15px !important; margin-top: 2px; color: var(--a-muted); }
.tk-ev__mine { color: #047857; font-weight: 800; } html[data-mode="dark"] .tk-ev__mine { color: #6EE7B7; } .tk-ev__mine .ic { color: inherit !important; }
.tk-ev__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--a-line); }
.tk-ev__price { display: grid; line-height: 1.2; } .tk-ev__price small { font-size: 11px; font-weight: 700; color: var(--a-muted); } .tk-ev__price b { font-size: 15.5px; font-weight: 900; color: var(--a-ink); }
.tk-ev.is-closed .tk-ev__pic img { filter: saturate(.6); }
.ac-grid .tk-sale, .ac-span2 > .tk-sale { padding: 20px; border-radius: 22px; background: var(--a-card); border: 1px solid var(--a-line); box-shadow: var(--a-shadow); }
.ac-span2 > .tk-sale .tk-ev { box-shadow: none; }

/* ---- print: just the ticket, A5/A4 ---- */
@media print {
  @page { size: A5 portrait; margin: 8mm; }
  html, body, .ac-body, .au-body { background: #fff !important; }
  .ac-side, .ac-top, .ac-tabs, .ac-flash, .tk-side, .tk-solo__btns, .au-art, .au-top, .au-alt, .au-foot, .ac-scrim, .skip, .au-sky, .au-bar, .mk-progress { display: none !important; }
  .ac, .ac-wrap, .ac-main, .au, .au-main, .au-card, .tk-page, .tk-solo { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; min-height: 0 !important; box-shadow: none !important; border: 0 !important; }
  /* landscape-style ticket that fits one A5 (or the top of an A4) page: facts beside the QR stub */
  .tk { width: 100%; max-width: 150mm; margin: 0 auto; border: 1px solid #D9D3EA; border-radius: 6mm; box-shadow: none !important; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact;
    display: grid !important; grid-template-columns: minmax(0, 1fr) 56mm; -webkit-mask: none !important; mask: none !important;
    --tk-paper: #fff; --tk-ink: #15112B; --tk-mut: #5F587A; --tk-line: #D9D3EA; --tk-sunk: #F5F3FA; }
  .tk__head, .tk__inbar, .tk__terms { grid-column: 1 / -1; }
  .tk__head { min-height: 0; padding: 4mm 5mm 5mm; gap: 5mm; }
  .tk__poster { width: 20mm; border-width: 2px; }
  .tk__ht h2 { font-size: 17pt; }
  .tk__facts { grid-column: 1; padding: 5mm 5mm 3mm; gap: 3.5mm 3mm; align-content: start; }
  .tk__ic { width: 8mm; height: 8mm; border-radius: 2.5mm; } .tk__ic .ic { width: 4.2mm; height: 4.2mm; }
  .tk__fv b { font-size: 10.5pt; } .tk__fact--hi b { font-size: 11pt; } .tk__fv small, .tk__fv em { font-size: 8pt; }
  .tk__perf { display: none; }
  .tk__stub { grid-column: 2; align-content: center; gap: 3mm; padding: 5mm 4mm; border-inline-start: 2px dashed #D9D3EA; }
  .tk-qr__frame { padding: 2mm; border-radius: 5mm; box-shadow: none; } .tk-qr__frame::before { display: none; }
  .tk-qr__code { width: 42mm; border-radius: 3.5mm; }
  .tk-qr figcaption { font-size: 9pt; padding: 1.2mm 3mm; }
  .tk__hint { display: none; }
  .tk__codes { flex-direction: column; align-items: stretch; gap: 1.5mm; } .tk__codes div { padding: 1.5mm 2mm; } .tk__codes dd { font-size: 10pt; }
  .tk__terms { padding: 3mm 5mm; font-size: 7.5pt; }
  .tk-wrap { filter: none !important; }
  .tk * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tk-qr figcaption .ic, .tk-live { animation: none !important; }
  .tk__bg { transform: none; }
}