/* ═══════════════════════════════════════════════════════════════════════
   M-U-S-I-C — the bag and the cart drawer (inc/cart-drawer.php).
   Anchored, informative, dismissible. Nothing blocks the page.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The bag ──────────────────────────────────────────────────────────── */

.music-drawer-button-wrap { display: flex; align-items: center; }

.music-drawer-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #111827;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}

.music-drawer-button:hover,
.music-drawer-button:focus-visible { color: #d7374f; background: #f3efe6; }

/* The bag is drawn rather than shipped as an icon file: two lines and a box. */
.music-drawer-button__glyph {
  width: 17px;
  height: 15px;
  border: 1.9px solid currentColor;
  border-radius: 0 0 4px 4px;
  position: relative;
}

.music-drawer-button__glyph::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  translate: -50% 0;
  width: 9px;
  height: 8px;
  border: 1.9px solid currentColor;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

.music-drawer-button__count {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #d7374f;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* An empty bag is not news. */
.music-drawer-button:not(.is-filled) { display: none; }

.music-drawer-live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── The drawer ───────────────────────────────────────────────────────── */

.music-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(17, 24, 39, 0.42);
  opacity: 0;
  transition: opacity 200ms ease;
}

.music-drawer-scrim.is-open { opacity: 1; }

/* `display: flex` below beats the `hidden` attribute, so a closed drawer was
   still in the page: two keyboard focus stops on every route that lead nowhere
   visible, and an aria-modal="true" dialog permanently exposed to assistive
   technology. The transition still runs — open() clears `hidden` first, then a
   rAF adds the class that animates it in, and close() only sets `hidden` back
   after the 260ms slide has finished. */
.music-drawer[hidden],
.music-drawer-scrim[hidden] {
  display: none !important;
}

.music-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 130;
  display: flex;
  flex-direction: column;
  width: min(100%, 420px);
  height: 100dvh;
  background: #fffdf9;
  border-left: 1px solid #e8ecf2;
  box-shadow: -24px 0 60px rgba(17, 24, 39, 0.18);
  translate: 100% 0;
  transition: translate 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.music-drawer.is-open { translate: 0 0; }

.music-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px clamp(16px, 4vw, 22px);
  border-bottom: 1px solid #e8ecf2;
}

.music-drawer__title {
  margin: 0;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #111827;
}

.music-drawer__close {
  width: 36px; height: 36px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: #516078;
  cursor: pointer;
}

.music-drawer__close:hover,
.music-drawer__close:focus-visible { background: #f3efe6; color: #111827; }

.music-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

/* ── Lines ────────────────────────────────────────────────────────────── */

.music-drawer__lines {
  list-style: none;
  margin: 0;
  padding: clamp(12px, 3vw, 18px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.music-drawer__line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.music-drawer__thumb {
  display: block;
  width: 64px;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #f3efe6;
}

.music-drawer__thumb img,
.music-drawer__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.music-drawer__line-main { min-width: 0; }

.music-drawer__line-name {
  margin: 0;
  color: #111827;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* The cohort dates are this site's "size" — the thing you check you got right. */
.music-drawer__line-meta {
  margin: 3px 0 0;
  color: #6d4bb5;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.music-drawer__line-blurb {
  margin: 4px 0 0;
  color: #516078;
  font-size: 12.5px;
  line-height: 1.45;
}

.music-drawer__remove {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 0;
  color: #8b939e;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.music-drawer__remove:hover,
.music-drawer__remove:focus-visible { color: #d7374f; }

.music-drawer__line-price {
  margin: 0;
  color: #111827;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── The one honest upsell ────────────────────────────────────────────── */

.music-drawer__ladder {
  margin: 0 clamp(12px, 3vw, 18px) clamp(12px, 3vw, 18px);
  padding: 14px 16px;
  border: 1px solid #e8dfc9;
  border-radius: 12px;
  background: #fdf7e8;
}

.music-drawer__ladder-eyebrow {
  margin: 0 0 6px;
  color: #a36f00;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.music-drawer__ladder-line {
  margin: 0;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.5;
}

.music-drawer__ladder-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 8px 0 2px;
  color: #2440c4;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.music-drawer__ladder-price { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Foot ─────────────────────────────────────────────────────────────── */

.music-drawer__foot {
  margin-top: auto;
  padding: clamp(14px, 3vw, 18px);
  border-top: 1px solid #e8ecf2;
  background: #fffdf9;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Thumb reach on a phone: the primary action is pinned, not scrolled to. */
  position: sticky;
  bottom: 0;
}

.music-drawer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  color: #516078;
  font-size: 14px;
}

.music-drawer__total strong {
  color: #111827;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}

.music-drawer__checkout {
  display: block;
  padding: 14px 18px;
  border-radius: 10px;
  background: #d7374f;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.music-drawer__checkout:hover,
.music-drawer__checkout:focus-visible { background: #c22f45; color: #fff; }

.music-drawer__view {
  display: block;
  padding: 8px;
  color: #516078;
  font-size: 13.5px;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.music-drawer__reassure {
  margin: 0;
  color: #8b939e;
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
}

/* ── Empty ────────────────────────────────────────────────────────────── */

.music-drawer__empty {
  padding: clamp(24px, 6vw, 40px) clamp(16px, 4vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.music-drawer__empty-title {
  margin: 0;
  color: #111827;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
}

.music-drawer__empty-note { margin: 0; color: #516078; font-size: 13.5px; line-height: 1.5; }

.music-drawer__cta {
  margin-top: 8px;
  padding: 11px 18px;
  border-radius: 8px;
  background: #2447c6;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .music-drawer, .music-drawer-scrim { transition: none; }
}

/* A refusal — "a seat is sold once" — shown in the cart, because the thing they
   asked for is already in it. Never a page reload to deliver bad news. */
.music-drawer__note {
  margin: 0;
  padding: 12px clamp(16px, 4vw, 22px);
  background: #fdf7e8;
  border-bottom: 1px solid #e8dfc9;
  color: #7a5200;
  font-size: 13px;
  line-height: 1.5;
}

/* ── Return card ──────────────────────────────────────────────────────────
   Small, anchored, closable. Once per session, and a dismissal sticks for
   thirty days. It never covers the page or traps anyone. */
.music-return {
  position: fixed;
  right: clamp(12px, 3vw, 22px);
  bottom: clamp(12px, 3vw, 22px);
  z-index: 110;
  width: min(calc(100vw - 24px), 340px);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e8ecf2;
  border-radius: 14px;
  background: #fffdf9;
  box-shadow: 0 20px 50px rgba(17, 24, 39, 0.18);
  opacity: 0;
  translate: 0 12px;
  transition: opacity 220ms ease, translate 220ms ease;
}

.music-return.is-in { opacity: 1; translate: 0 0; }

.music-return__thumb {
  flex: none;
  width: 54px;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #f3efe6;
}

.music-return__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.music-return__main { min-width: 0; flex: 1 1 auto; }

.music-return__title {
  margin: 0;
  color: #111827;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.music-return__name {
  margin: 2px 0 0;
  color: #516078;
  font-size: 12.5px;
  line-height: 1.4;
}

.music-return__go {
  margin-top: 9px;
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: #2447c6;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.music-return__go:hover, .music-return__go:focus-visible { background: #1c3aa8; }

.music-return__close {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #8b939e;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.music-return__close:hover, .music-return__close:focus-visible { background: #f3efe6; color: #111827; }

@media (prefers-reduced-motion: reduce) {
  .music-return { transition: none; }
}

/* ── What the cart noticed ────────────────────────────────────────────────
   Above the lines, never instead of them. The cart explains an overlap and
   offers the removal; it never performs one, because the containment between
   these programs is curricular and says nothing about cohorts, dates or who a
   seat is for. See plugin inc/enrollment-logic.php for the whole argument. */

.music-drawer__find {
  margin: 0 0 14px;
  padding: 14px 15px;
  border-radius: 12px;
  border: 1px solid #f0e3d2;
  background: #fffaf3;
}

.music-drawer__find--clash,
.music-drawer__find--capacity {
  border-color: #f4c9d1;
  background: #fdf2f4;
}

.music-drawer__find-eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a6200;
}

.music-drawer__find--clash .music-drawer__find-eyebrow,
.music-drawer__find--capacity .music-drawer__find-eyebrow { color: #a32036; }

.music-drawer__find-title {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #0f1729;
}

.music-drawer__find-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #4b5563;
}

.music-drawer__find-do {
  display: inline-block;
  margin: 11px 0 0;
  padding: 9px 15px;
  min-height: 38px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

.music-drawer__find-do:hover,
.music-drawer__find-do:focus-visible { background: #d7374f; color: #fff; }

/* ── A line is an enrollment ─────────────────────────────────────────────── */

.music-drawer__line-who {
  margin: 3px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f1729;
}

.music-drawer__line-inc {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.music-drawer__line-inc li {
  margin: 0;
  padding-left: 16px;
  position: relative;
  font-size: 12.5px;
  line-height: 1.45;
  color: #6b7280;
}

/* A tick, not a bullet: these are things you are getting, not a list. */
.music-drawer__line-inc li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #16794a;
  font-weight: 700;
}

/* The findings on the cart page sit above the table, full width of the left
   column — the drawer's card, given room to breathe. */
.music-finds {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 22px;
}

.music-finds .music-drawer__find { margin: 0; }

.music-finds .music-drawer__find-title { font-size: 16.5px; }

.music-finds .music-drawer__find-body { font-size: 14.5px; max-width: 68ch; }

/* ── The fold ─────────────────────────────────────────────────────────────
   A seat that sat inside a bigger one has already been taken off. The removed
   line is drawn in full, holds for a beat so the eye catches it, then collapses
   and strikes through — the buyer watches it fold in rather than discovering a
   line has vanished. The card carries the number and what they are now in. */

.music-fold {
  margin: 0 0 16px;
  padding: 18px 17px 16px;
  border-radius: 14px;
  border: 1px solid #cfe9db;
  background: linear-gradient(180deg, #f2fbf6, #ffffff 62%);
  animation: music-fold-card 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes music-fold-card {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.music-fold__tick {
  width: 30px;
  height: 30px;
  margin: 0 0 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #16794a;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  animation: music-fold-tick 420ms 160ms cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

@keyframes music-fold-tick {
  from { transform: scale(0.2); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.music-fold__title {
  margin: 0 0 12px;
  font-family: var(--music-font-display, "Space Grotesk", sans-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: #0f1729;
  text-wrap: balance;
}

/* The line being folded away. grid-template-rows 1fr -> 0fr collapses a box of
   unknown height smoothly, which max-height cannot do without a magic number. */
.music-fold__ghost {
  display: grid;
  grid-template-rows: 1fr;
  animation: music-fold-collapse 620ms 1150ms cubic-bezier(0.6, 0, 0.3, 1) both;
}

.music-fold__ghost-in {
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e3ece7;
}

@keyframes music-fold-collapse {
  from { grid-template-rows: 1fr; opacity: 1; margin-bottom: 12px; }
  60%  { grid-template-rows: 1fr; opacity: 0.35; margin-bottom: 12px; }
  to   { grid-template-rows: 0fr; opacity: 0; margin-bottom: 0; }
}

.music-fold__thumb {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  overflow: hidden;
}

.music-fold__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.music-fold__ghost-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: #4b5563;
  position: relative;
}

.music-fold__ghost-name span {
  display: block;
  font-weight: 500;
  font-size: 12px;
  color: #9ca3af;
}

/* The strike is drawn across the name as it goes — the visual grammar of
   "this is no longer being charged". */
.music-fold__ghost-name::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  height: 1.5px;
  width: 0;
  background: #9ca3af;
  animation: music-fold-strike 480ms 620ms ease-out both;
}

@keyframes music-fold-strike {
  from { width: 0; }
  to   { width: 100%; }
}

.music-fold__ghost-price {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: #16794a;
  white-space: nowrap;
}

.music-fold__body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #4b5563;
}

.music-fold__now {
  margin: 9px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f1729;
}

/* Nothing moves for anyone who has asked for that. The end state is the same
   state, so the story still reads — it just does not perform. */
@media (prefers-reduced-motion: reduce) {
  .music-fold,
  .music-fold__tick,
  .music-fold__ghost,
  .music-fold__ghost-name::after { animation: none; }

  .music-fold__ghost { grid-template-rows: 0fr; opacity: 0; margin-bottom: 0; }
}

/* On the cart page the card gets the same treatment, at reading width. */
.music-finds .music-fold { max-width: none; }

/* ── Upgrade, without leaving the drawer ──────────────────────────────────
   The ladder card used to end in a link to a product page, which meant the
   buyer had to leave the cart, find the class, pick dates again and re-enter
   who the seat was for. The button does all of that in one press. */

/* GREEN, AND DELIBERATELY NOT CORAL.
   Coral (#d7374f) is spent on one thing in this drawer — .music-drawer__checkout,
   the button that takes the money. This one grew a colour problem: it sat at
   neutral ink and turned CORAL on hover, so it spent its resting state looking
   like a secondary control and its hover state impersonating the checkout. On
   a phone there is no hover at all, so most buyers only ever saw the neutral
   slab. A hue change is a change of MEANING; a state change should stay in one
   hue and only change value.

   Green is the site's existing vocabulary for gain rather than commitment, and
   it is the honest reading here: this button does not cost $1,699, it costs the
   $1,450 difference, and the seat is credited either way. Coral asks for
   payment; green offers more for less.

   The tone is measured, not chosen by eye. Brand green #19a974 carries white
   at only 3.01:1 and fails AA outright, which is why the obvious pick is the
   wrong one. #0a6e4d gives 6.27:1 for the label and 5.27:1 for the sub-label at
   88% white, reads 5.86:1 against the cream panel — clearing the 3:1 that
   WCAG 1.4.11 asks of a control's edge — and hovers DEEPER into the same hue
   rather than sideways into another. */

.music-drawer__upgrade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  margin: 12px 0 0;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: #0a6e4d;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.music-drawer__upgrade:hover:not(:disabled) { background: #065f46; }

/* A ring, not just a darker fill: a fill change alone is invisible to anyone
   who cannot compare it against the state it came from. */
.music-drawer__upgrade:focus-visible:not(:disabled) {
  background: #065f46;
  outline: 2px solid #065f46;
  outline-offset: 2px;
}

.music-drawer__upgrade:active:not(:disabled) { transform: translateY(1px); }
.music-drawer__upgrade:disabled { opacity: 0.65; cursor: default; }

.music-drawer__upgrade-do {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

/* The number is the argument, so it travels with the label rather than
   sitting somewhere else in the card. */
.music-drawer__upgrade-diff {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  /* 88%, not 82%. This line carries the actual number — the whole argument for
     pressing the button — and at 12.5px it needs 4.5:1 like any other body
     text. 82% cleared it on the old ink only because ink is nearly black; on
     the hover coral it was 3.56:1, so the number was hardest to read at the
     exact moment somebody was reaching for it. */
  color: rgba(255, 255, 255, 0.88);
}

.music-drawer__upgrade-when {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #6b7280;
  text-align: center;
}

/* Demoted to the quiet option now that the button is the action. */
.music-drawer__ladder .music-drawer__ladder-link {
  margin-top: 10px;
  font-size: 13px;
}