/* Tessera — event page ticket picker.
 *
 * This runs inside the Hello Elementor theme + Elementor global kit, which restyles every
 * bare a / button / h1-h3 / input at specificity (0,1,1). So EVERY rule here is prefixed with
 * `.tt-pick` (>= 0,2,0) to out-specify the kit, and a scoped reset up top neutralises the
 * kit's inherited link/button/heading styling. Do not drop the prefixes.
 *
 * Tokens are declared on `.tt-pick`, NOT on `:root`. The wallet can get away with `:root`
 * because it renders its own document; this renders inside a page shared with the theme,
 * JetWooBuilder and whatever else is on it, and a leaked `--line` is somebody else's bug.
 *
 * Geometry is the approved storefront look from docs/mockups/storefront-hifi-v2.html:
 * 4/6px radii, warm greys. Deliberately not the orgdash admin look, which is softer and
 * rounder. The accent is #f26641 — the mockup predates the 2026-08-20 change and still
 * carries the old orange.
 *
 * The card's edge is the one place that look was overruled, on the day the picker went
 * live. The mockup drew a 1.5px ink border, which reads as a hard outline against a page
 * that is otherwise all warm greys — the card looked cut out of the page rather than
 * resting on it. The edge is now a single warm line at roughly a tenth of that weight and
 * nothing else. A drop shadow was tried in between and taken out again: on a page whose
 * own sections are flat, one floating card is the thing that looks out of place. The line
 * is a token, so the next adjustment is one value here.
 */

.tt-pick {
  --tt-surface: #ffffff;
  --tt-box: #f6f5f4;
  --tt-ink: #2f2f32;
  --tt-ink-soft: #5c5a58;
  --tt-muted: #8a8785;
  --tt-faint: #b3aeab;
  --tt-line: #e9e7e5;
  --tt-line-strong: #d5d2cf;
  --tt-card-line: #e2ddd9;
  --tt-accent: #f26641;
  --tt-accent-hover: #e05530;
  --tt-accent-strong: #c14a2b;
  --tt-accent-wash: #fdefe9;
  /* The two rungs between the wash and the accent itself. Without them every
     warm surface has to be either barely there or fully orange, and the card
     ends up grey by default because grey is what sits in between. */
  --tt-accent-wash-2: #fbdfd4;
  --tt-accent-line: #f7c4b1;
  --tt-error: #b3341c;
  --tt-error-wash: #fbe9e4;
  --tt-r-sm: 4px;
  --tt-r-md: 4px;
  --tt-r-lg: 6px;
  --tt-ease: cubic-bezier(.4, 0, .2, 1);

  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--tt-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- Scoped reset: neutralise the Elementor kit's a / button / heading / input bleed ---- */
.tt-pick, .tt-pick *, .tt-pick *::before, .tt-pick *::after { box-sizing: border-box; }

.tt-pick h2,
.tt-pick h3,
.tt-pick p,
.tt-pick ul,
.tt-pick li,
.tt-pick label,
.tt-pick small {
  margin: 0; padding: 0; color: inherit; font: inherit; letter-spacing: normal;
}

.tt-pick ul { list-style: none; }

.tt-pick button {
  font: inherit; color: inherit; background: transparent; border: 0; border-radius: 0;
  margin: 0; padding: 0; text-align: inherit; letter-spacing: inherit; text-transform: none;
  box-shadow: none; cursor: pointer; line-height: inherit; appearance: none;
}

/* The kit styles button:hover and button:focus as well as button, and the rule
 * above only neutralises the resting state — so a stepper kept the kit's own
 * accent the moment it was pressed, and the focus outlives the click. Every
 * interactive state has to be reset too, or the picker borrows whatever colour
 * the theme happens to use. Component rules below re-specify what they want at
 * higher specificity. */
.tt-pick button:hover,
.tt-pick button:focus,
.tt-pick button:active,
.tt-pick button:focus-visible {
  background: transparent; color: inherit; box-shadow: none; outline: none;
}

/* `input`, not `input[type="number"]`: an attribute selector counts as a class,
 * which would make this reset out-specify `.tt-pick .tt-pick__qty:focus-visible`
 * and swallow the field's own focus ring. */
.tt-pick input {
  font: inherit; color: inherit; margin: 0; box-shadow: none; min-height: 0;
}

.tt-pick input:hover,
.tt-pick input:focus,
.tt-pick input:focus-visible {
  box-shadow: none; outline: none;
}

/* The kit rounds and shadows images site-wide, which turns a payment mark into a
 * chip. Sizes are set per logo below; this only neutralises decoration. */
.tt-pick img {
  border-radius: 0;
  box-shadow: none;
  vertical-align: middle;
}

/* Our component displays would otherwise beat the UA [hidden] rule; force collapse. */
.tt-pick [hidden] { display: none !important; }

/* ---- The card ---- */
.tt-pick .tt-pick__card {
  background: var(--tt-surface);
  border: 1px solid var(--tt-card-line);
  border-radius: var(--tt-r-lg);
  padding: 20px;
}

.tt-pick .tt-pick__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
}

/* ---- Closed states: sales stopped, ended, sold out ---- */
.tt-pick .tt-pick__closed {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--tt-box);
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-r-md);
  font-size: .88rem;
  color: var(--tt-ink-soft);
}

/* ---- Validation errors ---- */
.tt-pick .tt-pick__errors {
  margin-top: 14px;
  padding: 11px 13px;
  background: var(--tt-error-wash);
  border: 1px solid var(--tt-error);
  border-radius: var(--tt-r-md);
  font-size: .84rem;
  color: var(--tt-error);
}

.tt-pick .tt-pick__errors p + p { margin-top: 5px; }

/* ---- Groups ----
 *
 * On a thirteen-tier race event a flat list is unreadable, and four labelled
 * clusters is only half the answer: thirteen rows are thirteen rows however
 * they are labelled. So a group is a <details>, closed by default, and the
 * card opens as four bars instead of thirteen rows.
 *
 * <details> rather than a script-driven panel, because the picker is built to
 * work with JavaScript off and an accordion driven by a click handler hides
 * the tickets permanently from exactly the buyers that contract is for. It
 * also arrives keyboard-operable, which a div never does.
 */
/* Warm, and built the same way the dashboard builds its group rows: a pale
   wash on the bar, and nothing else. There was a heavy accent rule down the
   left edge as well, which is a decoration doing a job the wash already does —
   the bar was already obviously a bar.

   The body is white rather than the wash, so the tier names inside stay the
   loudest thing in the card and the bar keeps reading as a lid on them. */
.tt-pick .tt-pick__group {
  margin-top: 10px;
  border: 1px solid var(--tt-accent-line);
  border-radius: var(--tt-r-md);
  background: var(--tt-surface);
  overflow: hidden;
}

.tt-pick .tt-pick__group + .tt-pick__group { margin-top: 8px; }

/* The default disclosure triangle is a different shape and colour on every
   engine, so it is replaced below rather than lived with. Both properties are
   needed: Safari uses the pseudo-element, everyone else uses list-style. */
.tt-pick .tt-pick__grouphead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--tt-accent-wash);
  transition: background .15s var(--tt-ease);
}

.tt-pick .tt-pick__grouphead:hover { background: var(--tt-accent-wash-2); }

/* The open bar keeps its rule so the lid and the panel stay one object. */
.tt-pick .tt-pick__group[open] > .tt-pick__grouphead {
  border-bottom: 1px solid var(--tt-accent-line);
}

.tt-pick .tt-pick__grouphead::-webkit-details-marker { display: none; }

/* A chevron drawn from two borders, so it needs no font, no icon file and no
   request. It points down when the group is closed and up when it is open. */
.tt-pick .tt-pick__grouphead::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  flex: none;
  border-right: 2px solid var(--tt-accent);
  border-bottom: 2px solid var(--tt-accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}

.tt-pick .tt-pick__group[open] > .tt-pick__grouphead::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.tt-pick .tt-pick__groupname {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tt-accent-strong);
}

/* What makes a closed group worth leaving closed: how many types are in it and
   what the cheapest one costs. A bar carrying only a name asks the buyer to
   open all four to find out which they can afford.

   Warm rather than grey: on a wash this pale, a neutral muted reads as a
   different material sitting on top of the bar rather than part of it. */
.tt-pick .tt-pick__groupmeta {
  font-size: .78rem;
  color: var(--tt-ink-soft);
}

.tt-pick .tt-pick__grouphead:focus-visible {
  outline: 2px solid var(--tt-accent);
  outline-offset: -2px;
  border-radius: var(--tt-r-md);
}

/* Tier rows inside a group are inset from the panel edge, and the last one
   drops its rule so it does not double up with the panel border. */
.tt-pick .tt-pick__group .tt-pick__list { padding: 0 13px 4px; }
.tt-pick .tt-pick__group .tt-pick__tier:last-child { border-bottom: none; }

/* ---- Tier rows ---- */
.tt-pick .tt-pick__tiers { margin-top: 6px; }

.tt-pick .tt-pick__tier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--tt-line);
}

.tt-pick .tt-pick__nm { min-width: 0; }

.tt-pick .tt-pick__nm label {
  display: block;
  font-size: .94rem;
  font-weight: 700;
  cursor: pointer;
}

.tt-pick .tt-pick__nm small {
  display: block;
  font-size: .78rem;
  color: var(--tt-muted);
  margin-top: 1px;
}

.tt-pick .tt-pick__left {
  color: var(--tt-accent-strong);
  font-weight: 600;
}

.tt-pick .tt-pick__tier.is-soldout { opacity: .5; }

.tt-pick .tt-pick__tag {
  flex: none;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tt-muted);
  border: 1px solid var(--tt-line);
  border-radius: var(--tt-r-md);
  padding: 4px 9px;
  white-space: nowrap;
}

/* ---- Stepper ---- */
.tt-pick .tt-pick__stepper {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

/* Warm at rest, not on contact.
 *
 * These were the card's only controls and they sat grey until the pointer
 * touched them, which on a page whose one job is to be bought from made the
 * whole panel read as disabled. A buyer scanning it should see where to press
 * without having to press something first to find out.
 *
 * The states below still climb: wash, deeper wash, then solid accent under the
 * finger. What changed is the bottom rung, not the ladder. */
.tt-pick .tt-pick__step {
  width: 32px;
  height: 32px;
  background: var(--tt-accent-wash);
  border: 1px solid var(--tt-accent-line);
  border-radius: var(--tt-r-md);
  font-size: 1rem;
  font-weight: 700;
  color: var(--tt-accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s var(--tt-ease), border-color .15s var(--tt-ease), color .15s var(--tt-ease);
}

/* Pressed and focused are Tessera orange, stated explicitly so the kit cannot
 * supply its own. Focus is the one that showed: it survives the click, so a
 * borrowed colour sits there until the buyer taps elsewhere. */
.tt-pick .tt-pick__step:hover {
  background: var(--tt-accent-wash-2);
  border-color: var(--tt-accent);
  color: var(--tt-accent-strong);
}

.tt-pick .tt-pick__step:focus-visible {
  background: var(--tt-accent-wash-2);
  border-color: var(--tt-accent);
  color: var(--tt-accent-strong);
  outline: 2px solid var(--tt-accent);
  outline-offset: 2px;
}

.tt-pick .tt-pick__step:active {
  background: var(--tt-accent);
  border-color: var(--tt-accent);
  color: #fff;
}

/* Muted rather than faded. Opacity on a bordered control dims the border too
 * and reads as a rendering fault rather than a deliberate state. */
.tt-pick .tt-pick__step[disabled],
.tt-pick .tt-pick__step[disabled]:hover,
.tt-pick .tt-pick__step[disabled]:active {
  background: var(--tt-box);
  border-color: var(--tt-line);
  color: var(--tt-faint);
  cursor: default;
}

/* 16px minimum, or iOS Safari zooms the page on focus and never zooms back. */
.tt-pick .tt-pick__qty {
  width: 46px;
  height: 32px;
  padding: 0 2px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  background: var(--tt-surface);
  border: 1px solid var(--tt-accent-line);
  border-radius: var(--tt-r-md);
}

/* A tier with something in it says so without being read. The stepper either
   side is warm at rest, so otherwise a zero and a two look the same at a
   glance — and the whole point of the panel is buying more than one thing. */
.tt-pick [data-tt-chosen="1"] .tt-pick__qty {
  background: var(--tt-accent-wash);
  border-color: var(--tt-accent);
  color: var(--tt-accent-strong);
}

.tt-pick .tt-pick__qty:focus-visible { outline: 2px solid var(--tt-accent); outline-offset: 1px; }

/* The spinners duplicate the stepper buttons and are unusable at this width. */
.tt-pick .tt-pick__qty::-webkit-outer-spin-button,
.tt-pick .tt-pick__qty::-webkit-inner-spin-button { appearance: none; margin: 0; }
.tt-pick .tt-pick__qty { -moz-appearance: textfield; }

/* ---- Total, submit, reassurance ---- */
.tt-pick .tt-pick__submitblock { padding-top: 14px; }

.tt-pick .tt-pick__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .95rem;
  margin-bottom: 12px;
}

.tt-pick .tt-pick__total b { font-weight: 700; font-size: 1.1rem; }

.tt-pick .tt-pick__go {
  display: block;
  width: 100%;
  padding: 13px 18px;
  background: var(--tt-accent);
  color: #fff;
  border-radius: var(--tt-r-md);
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
  transition: background .15s var(--tt-ease);
}

.tt-pick .tt-pick__go:hover:not([disabled]) { background: var(--tt-accent-hover); color: #fff; }
.tt-pick .tt-pick__go:active:not([disabled]) { background: var(--tt-accent-strong); color: #fff; }

.tt-pick .tt-pick__go:focus-visible {
  outline: 2px solid var(--tt-ink);
  outline-offset: 2px;
}

/* Nothing chosen yet is a resting state, not a broken one.
 *
 * This was the accent at 45% opacity, which on a saturated orange goes muddy
 * rather than quiet -- it reads as a button that failed to paint. A neutral
 * fill with a hairline says "not yet" without pretending to be the live
 * button, and it makes the moment the first ticket is chosen and the orange
 * arrives worth something. */
.tt-pick .tt-pick__go[disabled],
.tt-pick .tt-pick__go[disabled]:hover,
.tt-pick .tt-pick__go[disabled]:active {
  background: var(--tt-box);
  color: var(--tt-muted);
  box-shadow: inset 0 0 0 1px var(--tt-line);
  cursor: default;
}

/* ---- Who takes the money ----
 *
 * This was a line of text naming the brands. It is the last thing between a
 * buyer and a payment they cannot undo, and at that moment a row of marks they
 * recognise does a job the same words cannot.
 *
 * Astragate sits above the rest and larger because it is the party the buyer is
 * about to be handed to — the next screen is theirs, not ours, and a buyer who
 * has not seen the name here reads that handover as having gone wrong. The card
 * brands and the wallets below are what can be paid WITH, which is a smaller
 * question and reads as a smaller row.
 *
 * Heights are per-logo rather than shared. A wordmark and a pair of circles set
 * to the same pixel height do not look the same size, and Mastercard set level
 * with Visa reads as an afterthought beside it.
 */
.tt-pick .tt-pick__trust {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--tt-line);
  text-align: center;
}

.tt-pick .tt-pick__trustlead {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tt-faint);
  margin-bottom: 9px;
}

/* Sized off the intrinsic ratio: the file is 444x132, so `width: auto` keeps it
   honest at any height and the width/height attributes stop the row jumping
   while the image loads. */
.tt-pick .tt-pick__gateway {
  display: block;
  height: 30px;
  width: auto;
  margin: 0 auto;
  max-width: 100%;
}

.tt-pick .tt-pick__brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px 18px;
  margin-top: 13px;
}

.tt-pick .tt-pick__brands li { display: flex; align-items: center; }

.tt-pick .tt-pick__brands img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 15px;
}

/* Two circles, so a shared height reads a size smaller than the wordmarks. */
.tt-pick .tt-pick__brand--mastercard img { height: 21px; }

/* The Visa wordmark is solid caps with no descenders and no lockup around it,
   so at the shared height it carries more ink than anything beside it and
   reads a size up. Taken down until it sits level by eye rather than by
   measurement. */
.tt-pick .tt-pick__brand--visa img { height: 13px; }

/* The MoMo lockup carries its own app tile, which is taller than the wordmarks
   it sits beside and reads heavier at the same height. */
.tt-pick .tt-pick__brand--momo img { height: 18px; }

/* ---- Desktop: the card follows the buyer down the page ---- */
@media (min-width: 941px) {
  .tt-pick { position: sticky; top: 80px; }
}

/* ---- Mobile: inline card, with the total and button pinned to the bottom of the viewport
 *      while the card is on screen.
 *
 *      `sticky`, never `fixed`. A fixed element resolves against the nearest ancestor
 *      carrying a transform, filter, perspective or will-change — and Elementor applies
 *      transforms for motion effects and sticky containers. That would clip the bar inside
 *      the column, on real devices only, invisible in a narrowed desktop browser. Sticky
 *      resolves against the scroll container instead and has no such trap.
 */
@media (max-width: 940px) {
  .tt-pick .tt-pick__card { padding: 16px; }

  .tt-pick .tt-pick__submitblock {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -16px -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--tt-surface);
    border-top: 1px solid var(--tt-line);
    border-radius: 0 0 var(--tt-r-lg) var(--tt-r-lg);
  }

  .tt-pick .tt-pick__trust { margin-top: 12px; padding-top: 12px; }
  .tt-pick .tt-pick__gateway { height: 27px; }
  .tt-pick .tt-pick__brands { gap: 8px 14px; margin-top: 11px; }
}

/* ---- Belt and braces: if the JetWooBuilder Add to cart widget is still in the template,
 *      hide it. Gated on the body class, which is only present when the picker is switched
 *      on AND the product is an event, so this can never hide a control on a page that has
 *      no picker to replace it.
 */
.tessera-picker-active form.variations_form,
.tessera-picker-active form.cart,
.tessera-picker-active .elementor-widget-woocommerce-product-add-to-cart,
.tessera-picker-active .jet-woo-builder-single-add-to-cart {
  display: none !important;
}