/* Ticket picker — built on the site's own tokens and card idiom.
   No new colours, no new fonts. If the design system changes, this follows. */

.tix-group{ margin-top:var(--s-gap); }
.tix-group + .tix-group{ margin-top:calc(var(--s-gap) * 2); }
.tix-group-head{
  font-family:var(--display); font-size:26px; line-height:1.1;
  margin:0 0 6px; color:var(--ink);
}
.tix-group-sub{
  font-family:var(--sans); font-size:15px; margin:0 0 18px;
  color:color-mix(in srgb, var(--ink) 68%, transparent);
}

.tix .tk{ position:relative; }

/* Card: artwork down the left, content to the right. Every card in the grid is
   the same height whether or not it carries a stock badge, so the buttons line
   up across rows. */
.tix .tk-grid{ align-items:stretch; }
.tix-card{
  flex-direction:row; align-items:stretch; gap:0; padding:0; overflow:hidden;
  min-height:180px;
}
.tix-thumb{
  flex:0 0 108px; width:108px; align-self:stretch;
  object-fit:cover; display:block; border-right:2px solid var(--ink);
  background:var(--teal-pale);
}
.tix-thumb-blank{ background:var(--cream); }
.tix-body{
  flex:1 1 auto; display:flex; flex-direction:column; gap:10px;
  padding:16px 18px; min-width:0;
}
.tix-name{ font-family:var(--display); font-size:20px; line-height:1.15; margin:0; }
.tix-meta{ font-family:var(--sans); font-size:14px; margin:0;
  color:color-mix(in srgb, var(--ink) 66%, transparent); }

/* The price sits left, the button right, and the stock badge goes on its own
   line above them - it used to sit between the two and push the button around,
   which is why one card was taller and its button off to the left. */
.tix-foot{
  margin-top:auto; display:grid; gap:8px;
  grid-template-columns:1fr auto; align-items:end;
}
.tix-foot .tix-left{ grid-column:1 / -1; justify-self:start; }
.tix-foot .btn{ justify-self:end; }
.tix-price{ font-family:var(--sans); font-weight:700; font-size:18px; white-space:nowrap; }
.tix-price .sub{ display:block; font-weight:400; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:color-mix(in srgb, var(--ink) 55%, transparent); }
.tix-price.free{ color:var(--teal-deep); }

.tix-add[aria-pressed="true"]{ --bg-btn:var(--teal-deep); --fg-btn:#fff; }
.tk[data-selected="true"]{ outline:3px solid var(--teal); outline-offset:3px; }

.tix-left{
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 8px; white-space:nowrap;
  background:var(--gold-light); color:var(--ink); border:2px solid var(--ink);
}
@media (max-width:520px){
  .tix-card{ min-height:0; }
  .tix-thumb{ flex-basis:84px; width:84px; }
}

/* Sold out — the card stays readable, the stamp is unmistakable. */
.tix-stamp{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  background:color-mix(in srgb, var(--cream-2) 74%, transparent); pointer-events:none;
}
.tix-stamp span{
  font-family:var(--display); font-size:30px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--coral); background:var(--cream-2);
  border:4px solid var(--coral); padding:8px 18px; transform:rotate(-6deg);
}
.tk[data-state="unavailable"] .tix-stamp span{
  font-size:19px; color:var(--ink); border-color:var(--ink);
  background:color-mix(in srgb, var(--cream) 92%, transparent);
}

/* Selection bar */
.tix-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  background:var(--cream-2); border-top:2px solid var(--ink);
  transform:translateY(110%); transition:transform .22s ease;
}
.tix-bar[data-show="true"]{ transform:none; }
.tix-bar-in{
  width:min(100% - 32px, var(--maxw)); margin-inline:auto; padding:14px 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.tix-bar-count{ font-family:var(--display); font-size:20px; margin:0; }
.tix-bar-names{ font-family:var(--sans); font-size:13px; margin:2px 0 0;
  color:color-mix(in srgb, var(--ink) 66%, transparent); }
.tix-bar-acts{ display:flex; align-items:center; gap:12px; }
.tix-clear{ font-family:var(--sans); font-size:13px; background:none; border:0;
  text-decoration:underline; cursor:pointer; color:var(--ink); }

/* Checkout window */
.tix-modal{ position:fixed; inset:0; z-index:9500; display:none;
  background:color-mix(in srgb, var(--ink) 66%, transparent); padding:20px; }
.tix-modal[data-open="true"]{ display:grid; place-items:center; }
.tix-panel{
  width:min(920px, 100%); height:100%; background:var(--cream-2);
  border:2px solid var(--ink); display:flex; flex-direction:column; overflow:hidden;
}
.tix-panel-top{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; border-bottom:2px solid var(--ink); }
.tix-panel-top h3{ font-family:var(--display); font-size:20px; margin:0; }
.tix-x{ font-family:var(--sans); font-size:22px; line-height:1; cursor:pointer;
  background:none; border:2px solid var(--ink); width:36px; height:36px; }
.tix-hint{ font-family:var(--sans); font-size:13px; line-height:1.5; margin:0;
  padding:10px 16px; background:var(--teal-pale); border-bottom:2px solid var(--ink); }
.tix-frame{ flex:1 1 auto; width:100%; border:0; display:block; }

body.tix-locked{ overflow:hidden; }
@media (max-width:640px){
  .tix-modal{ padding:0; }
  .tix-panel{ border:0; }
  .tix-stamp span{ font-size:24px; }
}

/* Offer step — shown before the checkout window */
.tix-offer{ display:none; overflow:auto; padding:18px 16px 16px; }
.tix-offer-note{ font-family:var(--sans); font-size:15px; line-height:1.5;
  margin:0 0 16px; color:color-mix(in srgb, var(--ink) 72%, transparent); }
.tix-offer-acts{ display:flex; gap:12px; justify-content:flex-end;
  flex-wrap:wrap; margin-top:20px; padding-top:16px; border-top:2px solid var(--ink); }
.tix-offer .tk-grid{ grid-template-columns:repeat(2,1fr); }
@media (max-width:640px){ .tix-offer .tk-grid{ grid-template-columns:1fr; } }

/* Which step the window is showing */
.tix-modal[data-step="offer"] .tix-offer{ display:block; }
.tix-modal[data-step="offer"] .tix-hint,
.tix-modal[data-step="offer"] .tix-frame{ display:none; }
.tix-modal[data-step="checkout"] .tix-offer{ display:none; }

/* The included excursion is a required choice for VIP buyers. This marks the
   group after someone has tried to check out without answering; paint() clears
   it the moment they pick one. */
.tix-group[data-tix-needs] .tix-group-head,
.tix-group[data-tix-needs] .tix-group-sub { color: var(--coral); }
.tix-group[data-tix-needs] .tix-group-sub { font-weight: 700; }