/* Trip2Event: "My tickets" and "Your ticket" as app screens, PHONE AND TABLET ONLY.
   tickets.php loads this file for screens under 900px; wider screens keep the sheets (tickets.css) and never see any of this.
   Light full-screen pages with a gradient title bar and a Back arrow, Upcoming / Past tabs, ticket cards, and a big QR code.
   Markup comes from assets/js/tickets.js (the "APP" branches). */
#ticketsSheet, #evSheet {
  --ink: #0A0A0A; --ink-2: rgba(10, 10, 10, .66); --ink-3: rgba(10, 10, 10, .48); --line: rgba(10, 10, 10, .1);
  --paper: #FAF6F8; --blush: #F8E9F0; --brand: #AB1D71; --brand-700: #6D1248;
  --ok: #0E7A4B; --ok-bg: #E4F4EC; --bad: #B3123A; --bad-bg: #FBE6EB; --warn: #8A5A00; --warn-bg: #FFF1D6;
  color: var(--ink); background: var(--paper);
}
#ticketsSheet::backdrop, #evSheet::backdrop { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }

/* the screen: full height, no sheet look, slides in from the right like a pushed page */
#ticketsSheet .sheet__panel, #evSheet .sheet__panel {
  --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3);
  --glass: #fff; --glass-strong: #fff; --glass-line: var(--line); --glass-hi: var(--line); --focus: var(--brand);
  top: 0; bottom: 0; height: 100%; max-height: none;
  border: 0; border-radius: 0; color: var(--ink); background: var(--paper); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  animation: mta-in .3s var(--ease) both;
}
#ticketsSheet.is-closing .sheet__panel, #evSheet.is-closing .sheet__panel { animation: mta-out .24s ease forwards; }
#ticketsSheet.is-closing::backdrop, #evSheet.is-closing::backdrop { animation: none; }
@keyframes mta-in { from { transform: translateX(28px); opacity: 0; } }
@keyframes mta-out { to { transform: translateX(28px); opacity: 0; } }
#ticketsSheet .sheet__grab, #evSheet .sheet__grab { display: none; }
#ticketsSheet .sheet__scroll, #evSheet .sheet__scroll { background: var(--paper); padding-bottom: env(safe-area-inset-bottom); }

/* title bar with the Back arrow */
#ticketsSheet .sheet__title, #evSheet .mta-bar {
  flex: none; display: flex; align-items: center; min-height: calc(68px + env(safe-area-inset-top));
  margin: 0; padding: env(safe-area-inset-top) 16px 0 68px; color: #fff;
  background: linear-gradient(160deg, var(--brand), var(--brand-700));
}
#ticketsSheet .sheet__title h2, #evSheet .mta-bar h2 { margin: 0; color: #fff; font: 400 24px/1.15 var(--font-display); }
#ticketsSheet .sheet__title p { display: none; }
#ticketsSheet .sheet__close, #evSheet .sheet__close {
  top: calc(13px + env(safe-area-inset-top)); left: 12px; right: auto; display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .55);
}
#ticketsSheet .sheet__close .i, #evSheet .sheet__close .i { width: 22px; height: 22px; }
#ticketsSheet .sheet__close:active, #evSheet .sheet__close:active { transform: scale(.94); }

/* status labels */
.mta-pill { justify-self: start; display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 12px; font-weight: 800; line-height: 1.5; }
.mta-pill--used { background: #ECE8EA; color: #5b5256; }
.mta-pill--bad { background: var(--bad-bg); color: var(--bad); }
.mta-pill--warn { background: var(--warn-bg); color: var(--warn); }

/* My tickets: tabs and cards */
#ticketsSheet .mt { padding: 0 16px 28px; gap: 12px; }
.mta-tabs { position: sticky; top: 10px; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 14px; padding: 4px; border-radius: 18px; background: var(--blush); box-shadow: 0 0 0 8px var(--paper); }
.mta-tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 0; border-radius: 14px; background: transparent; color: var(--ink-2); font: 800 15px var(--font-body); cursor: pointer; transition: background-color .2s, color .2s; }
.mta-tabs button[aria-selected="true"] { background: var(--brand); color: #fff; box-shadow: 0 8px 18px -10px rgba(171, 29, 113, .9); }
.mta-tabs b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: rgba(10, 10, 10, .1); font-size: 12px; }
.mta-tabs [aria-selected="true"] b { background: rgba(255, 255, 255, .25); }
.mta-card {
  display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px 14px 12px 12px; border-radius: 22px; text-align: left; color: var(--ink);
  background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 30px -26px rgba(60, 10, 40, .7); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mta-card:active { transform: scale(.985); background: var(--blush); }
.mta-card.is-past { opacity: .88; }
.mta-card.is-past .mta-thumb { filter: saturate(.45); }
.mta-thumb { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 17px; color: rgba(255, 255, 255, .92); font-size: 24px; background: linear-gradient(135deg, var(--a), var(--b)); }
.mta-sum { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mta-sum b { font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.mta-sum small { color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
.mta-sum .mta-pill { margin-top: 3px; }
.mta-card .mta-go { flex: none; margin-left: 0; color: var(--ink-3); }
.mta-empty { display: grid; justify-items: center; gap: 10px; margin-top: 12px; padding: 34px 20px; text-align: center; border-radius: 22px; background: #fff; border: 1px dashed rgba(10, 10, 10, .18); }
.mta-empty__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blush); color: var(--brand); font-size: 26px; }
.mta-empty h3 { margin: 0; font: 400 22px/1.2 var(--font-display); }
.mta-empty p { margin: 0; max-width: 30ch; color: var(--ink-2); font-weight: 600; }

/* buttons */
.mta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 22px; border: 0; border-radius: 18px;
  background: var(--brand); color: #fff; font: 800 16px var(--font-body); text-decoration: none; cursor: pointer; box-shadow: 0 12px 24px -14px rgba(171, 29, 113, .95);
}
.mta-btn:active { transform: translateY(1px); background: var(--brand-700); }
.mta-btn[disabled] { background: #c9c3c6; box-shadow: none; cursor: not-allowed; }
.mta-btn--block { width: 100%; }
.mta-btn--ghost { background: #fff; color: var(--brand); border: 2px solid var(--brand); box-shadow: none; }
.mta-btn--ghost:active { background: var(--blush); }
.mta-btn .i { width: 20px; height: 20px; }

/* the ticket screen: everything fits one screen, no scrolling (the QR code size follows the screen height) */
#evSheet .sheet__scroll { display: flex; flex-direction: column; }
.mta-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mta-page { --qr: clamp(104px, 19.5dvh, 164px); flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
.mta-tk { width: 100%; max-width: 440px; margin: 0 auto; filter: drop-shadow(0 16px 22px rgba(60, 10, 40, .24)); }
.mta-tk__top {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px;
  min-height: 112px; padding: 12px 16px 14px; border-radius: 26px 26px 0 0; color: #fff; background: linear-gradient(150deg, var(--a), var(--b));
}
.mta-tk__top .poster__motif { left: auto; right: -6%; width: 54%; opacity: .9; }
.mta-tk__top .mta-pill { position: absolute; top: 12px; left: 16px; }
.mta-tk__top h3 { margin: 0; max-width: 88%; font: 400 1.45rem/1.1 var(--font-display); text-wrap: balance; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); }
.mta-tk__rip { position: relative; height: 18px; background: #fff; }
.mta-tk__rip::before, .mta-tk__rip::after { content: ""; position: absolute; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); }
.mta-tk__rip::before { left: -9px; }
.mta-tk__rip::after { right: -9px; }
.mta-tk__rip i { position: absolute; left: 16px; right: 16px; top: 8px; border-top: 2px dashed rgba(10, 10, 10, .2); }
.mta-tk__body { display: grid; gap: 12px; padding: 2px 16px 14px; border-radius: 0 0 26px 26px; background: #fff; color: var(--ink); }
.mta-tk__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; }
.mta-tk__grid dt { font-size: .72rem; font-weight: 700; color: var(--ink-3); }
.mta-tk__grid dd { margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.25; }
.mta-tk__grid .wide { grid-column: 1 / -1; }
.mta-tk__code { display: flex; align-items: center; gap: 14px; padding-top: 12px; border-top: 2px dashed rgba(10, 10, 10, .15); }
.mta-tk__qr { flex: none; width: var(--qr); height: var(--qr); }
.mta-tk__qr svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
.mta-tk__id { min-width: 0; display: grid; gap: 2px; }
.mta-tk__id b { font-size: .95rem; letter-spacing: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mta-tk__id small { color: var(--ink-3); font-size: .78rem; font-weight: 600; line-height: 1.35; }
.mta-note { margin: 0 auto; width: 100%; max-width: 440px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-size: .875rem; font-weight: 600; text-align: center; line-height: 1.4; }
.mta-actions { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; width: 100%; max-width: 440px; margin: auto auto 0; padding-top: 4px; }
.mta-actions--two { grid-template-columns: 1fr 1fr; }
.mta-actions .mta-btn { min-height: 50px; padding: 0 16px; border-radius: 16px; font-size: 15px; }
.mta-actions .mta-btn--icon { width: 50px; padding: 0; }
.mta-actions .mta-btn { white-space: nowrap; }
@media (max-width: 340px) { .mta-actions .mta-btn { padding: 0 10px; font-size: 13.5px; } }
@media (max-height: 700px) {
  .mta-page { gap: 8px; padding-top: 10px; }
  .mta-tk__top { min-height: 92px; padding-block: 10px 12px; }
  .mta-tk__top h3 { font-size: 1.25rem; }
  .mta-tk__grid { gap: 6px 10px; }
  .mta-tk__grid dd { font-size: .9rem; }
  .mta-tk__body { gap: 8px; padding-bottom: 12px; }
  .mta-tk__code { padding-top: 8px; }
  .mta-tk__id small:last-child { display: none; }
  .mta-actions .mta-btn { min-height: 46px; }
}
/* very short screens (small phones): one more notch tighter so the ticket still fits */
@media (max-height: 640px) {
  .mta-page { --qr: clamp(92px, 17dvh, 120px); gap: 6px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); }
  #ticketsSheet .sheet__title, #evSheet .mta-bar { min-height: calc(56px + env(safe-area-inset-top)); padding-left: 62px; }
  #ticketsSheet .sheet__title h2, #evSheet .mta-bar h2 { font-size: 21px; }
  #ticketsSheet .sheet__close, #evSheet .sheet__close { top: calc(8px + env(safe-area-inset-top)); left: 10px; width: 40px; height: 40px; }
  .mta-tk__top { min-height: 78px; padding-block: 8px 10px; }
  .mta-tk__top .mta-pill { top: 8px; left: 14px; }
  .mta-tk__top h3 { font-size: 1.15rem; }
  .mta-tk__rip { height: 14px; }
  .mta-tk__rip::before, .mta-tk__rip::after { width: 14px; height: 14px; top: 0; }
  .mta-tk__rip::before { left: -7px; }
  .mta-tk__rip::after { right: -7px; }
  .mta-tk__rip i { top: 6px; }
  .mta-tk__grid { gap: 3px 10px; }
  .mta-tk__grid dt { font-size: .66rem; }
  .mta-tk__grid dd { font-size: .85rem; }
  .mta-tk__body { gap: 6px; padding: 0 14px 10px; }
  .mta-note { padding: 6px 10px; font-size: .8rem; }
  .mta-actions .mta-btn { min-height: 44px; }
  .mta-actions .mta-btn--icon { width: 44px; }
}

/* toasts live inside the open screen (see hostToasts in tickets.js) */
#ticketsSheet .toasts, #evSheet .toasts { bottom: calc(22px + env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce) { #ticketsSheet .sheet__panel, #evSheet .sheet__panel { animation: none; } }