/* ============================================================================
   TICKET BUNDLES — the "Select Bundle" cards in the buy box
   ----------------------------------------------------------------------------
   Every value is a custom property with a fallback: `var(--hv-ink, #111827)`.
   On a Highland Vault site the first value exists, so the cards pick up that
   theme's palette and fluid type scale automatically and stay in step with it;
   on any other theme the fallback keeps them looking exactly as designed.

   The accent and saving colours can also be set on the settings screen, which
   writes them inline on .hvtb-bundles and so beats everything below.
   ========================================================================== */

.hvtb-bundles {
  /* --- palette (theme token → fallback) -------------------------------- */
  --hvtb-accent:  var(--hv-primary, #065BE0);
  --hvtb-ring:    rgba(var(--hv-primary-rgb, 6, 91, 224), 0.35);
  --hvtb-ink:     var(--hv-ink, #111827);
  --hvtb-muted:   var(--hv-muted, #6B7280);
  --hvtb-line:    var(--hv-line, #E7EAF0);
  --hvtb-save:    var(--hv-green-600, #16A34A);
  --hvtb-card-bg: #fff;

  /* --- shape & rhythm --------------------------------------------------- */
  --hvtb-cols:    5;                          /* set inline: one per tier    */
  --hvtb-radius:  var(--hv-radius-sm, 8px);
  --hvtb-pad:     0.6em 0.3em 0.65em;
  --hvtb-gap:     var(--hv-space-2, 0.5rem);

  /* --- type (follows the theme's fluid scale when it has one) ----------- */
  --hvtb-fs-head:  var(--hv-fs-body, 1rem);
  --hvtb-fs-hint:  var(--hv-fs-sm, 0.875rem);
  --hvtb-fs-price: var(--hv-fs-sm, 0.875rem);
  --hvtb-fs-small: var(--hv-fs-xs, 0.75rem);

  margin: 0;
  font-family: inherit;
}

/* When the browser can mix colours, derive the focus/selected ring from the
   accent itself — so a custom accent set in the settings carries into the ring
   instead of leaving a stale blue glow. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .hvtb-bundles { --hvtb-ring: color-mix(in srgb, var(--hvtb-accent) 35%, transparent); }
}

/* ---- Heading row: 🎟 1. Select Bundle  (Save more with bundles) --------- */
.hvtb-bundles__head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.2em 0.45em;
  margin: 0 0 var(--hv-space-3, 0.75rem);
}
.hvtb-bundles__ico { display: inline-flex; flex: 0 0 auto; color: var(--hvtb-accent); }
.hvtb-bundles__ico svg { width: 1.15em; height: 1.15em; }
.hvtb-bundles__title {
  font-size: var(--hvtb-fs-head); font-weight: 700;
  color: var(--hvtb-ink); line-height: 1.3;
}
.hvtb-bundles__hint {
  font-size: var(--hvtb-fs-hint); font-weight: 400;
  color: var(--hvtb-muted); line-height: 1.3;
}

/* ---- The cards --------------------------------------------------------- */
.hvtb-bundles__grid {
  display: grid;
  grid-template-columns: repeat(var(--hvtb-cols), minmax(0, 1fr));
  gap: var(--hvtb-gap);
  align-items: stretch;
}

.hvtb-bundles .hvtb-bundle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.15em;
  width: 100%; min-width: 0;
  margin: 0; padding: var(--hvtb-pad);
  text-align: center; text-transform: none; letter-spacing: 0;
  font: inherit; line-height: 1.3;
  background: var(--hvtb-card-bg);
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--hvtb-line);
  border-radius: var(--hvtb-radius);
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hvtb-bundles .hvtb-bundle:hover { border-color: var(--hvtb-accent); }
.hvtb-bundles .hvtb-bundle:focus-visible {
  outline: none; border-color: var(--hvtb-accent);
  box-shadow: 0 0 0 3px var(--hvtb-ring);
}

/* Selected — the card the current quantity falls into. */
.hvtb-bundles .hvtb-bundle.is-selected {
  border-color: var(--hvtb-accent);
  box-shadow: 0 0 0 3px var(--hvtb-ring);
}

/* Beyond what this product allows (e.g. a 500-ticket tier on a draw capped
   lower) — shown, but not pressable, rather than silently misbehaving. */
.hvtb-bundles .hvtb-bundle.is-unavailable {
  opacity: 0.45; cursor: not-allowed;
  border-color: var(--hvtb-line); box-shadow: none;
}

.hvtb-bundles .hvtb-bundle__qty {
  font-size: var(--hvtb-fs-small); font-weight: 500;
  color: var(--hvtb-ink);
}
.hvtb-bundles .hvtb-bundle__save {
  font-size: var(--hvtb-fs-small); font-weight: 700;
  color: var(--hvtb-save);
}
.hvtb-bundles .hvtb-bundle__total {
  font-size: var(--hvtb-fs-price); font-weight: 700;
  color: var(--hvtb-ink);
}
.hvtb-bundles .hvtb-bundle__each {
  font-size: var(--hvtb-fs-small); font-weight: 400;
  color: var(--hvtb-muted);
}

/* WooCommerce wraps every price in its own markup with its own colour/size —
   inside a card it must follow the card. */
.hvtb-bundles .hvtb-bundle__total .amount,
.hvtb-bundles .hvtb-bundle__total .woocommerce-Price-amount,
.hvtb-bundles .hvtb-bundle__each .amount,
.hvtb-bundles .hvtb-bundle__each .woocommerce-Price-amount {
  color: inherit; font-size: inherit; font-weight: inherit; text-decoration: none; background: none;
}

/* ---- Responsive -------------------------------------------------------- */
/* Five ~60px cards stop being readable before the buy column stops shrinking,
   so the grid wraps to fewer, wider columns instead of squashing the text.
   auto-fit (not a fixed count) so three tiers still fill the row — repeat()
   accepts no min()/calc(), which is why the desktop count is set inline. */
@media (max-width: 560px) {
  .hvtb-bundles__grid { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }
}

/* ---- Highland Vault bridge --------------------------------------------- */
/* That theme's "Free Postal Entry" toggle hides the whole online buy flow;
   the bundles belong to it. Harmless (and inert) on any other theme. */
.hv-postal-active .hvtb-bundles { display: none !important; }