/* ============================================================
   Fundraiser (public page) — renders a fundraiser's widgets for real
   visitors. Class names here deliberately match styles/fundraiserManager.css
   1:1 (.fmg-pw-*, .fmg-field-canvas/.fmg-field-box, .fmg-preview-grid) —
   duplicated, not shared via one file, same "no common JS/CSS file between
   two standalone pages" precedent evaluate.html/tryoutManager.html already
   established for their own duplicated constants. This is the full-size
   rendering only; the admin canvas's compact/editor-only rules
   (.fmg-widget-body, .fmg-fle-*) have no equivalent here.
   ============================================================ */

.fmg-preview-grid{
  padding:16px 24px 60px;
  display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:24px;gap:16px;
}
.fmg-preview-widget{min-width:0}

.fmg-pw-card{
  position:relative;
  background:#fff;border-radius:14px;
  padding:22px 24px;height:100%;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04);
}

.fmg-field-canvas{position:relative;width:100%;height:100%}
/* Visible by default — a single-line stat/title/meta field that overflows
   its box by a few px (font metrics vary by what font actually rendered,
   e.g. a customized font falling back on a viewer's machine) should just
   spill slightly, not grow a scrollbar for a couple pixels. Only fields
   that can genuinely hold more content than any reasonable box size
   (a long purchases/team list, free-text notes/description) opt back into
   real scrolling below. This is a public-page-only concern — the admin
   canvas keeps plain overflow:auto everywhere, since that's what drives its
   own "⋯ more" overflow-hint authoring aid. */
.fmg-field-box{position:absolute;overflow:visible;box-sizing:border-box}
.fmg-field-box[data-field-key="list"],
.fmg-field-box[data-field-key="content"],
.fmg-field-box[data-field-key="schedule"],
.fmg-field-box[data-field-key="description"]{overflow:auto}
/* Purchases doesn't scroll at all — setupPurchasesPaging() shows only as
   many tickets as fit the box and reveals the rest a page at a time via
   its own "View more" button, so overflow is a hard clip (a backstop; the
   JS keeps it from ever actually needing to clip anything). */
.fmg-field-box[data-field-key="purchases"]{overflow:hidden}

/* Rounding lives on the wrapper, not the <img> itself — border-radius on a
   replaced element combined with object-fit doesn't reliably clip in every
   browser (a known WebKit/Safari quirk), so a plain block-level wrapper
   with overflow:hidden is the robust fix rather than relying on the image
   to clip its own corners. */
.fmg-pw-image-wrap{width:100%;height:100%;border-radius:10px;overflow:hidden}
.fmg-pw-image{display:block}

/* Every text-bearing field class reads its typography through these custom
   properties (falling back to its original hardcoded value) rather than a
   fixed value — a field's --fmg-field-font-* vars are set on its enclosing
   .fmg-field-box (see fieldFontVars() in fundraiser5k.html) only when the
   admin customized that field in the builder. This block must stay in sync
   with the equivalent rules in styles/fundraiserManager.css — a mismatch
   here is exactly what let a font-size customization apply in the admin
   canvas/Preview but silently do nothing on this real public page. */
.fmg-pw-title{
  font-family:var(--fmg-field-font-family,'Archivo',sans-serif);
  font-weight:var(--fmg-field-font-weight,800);
  font-style:var(--fmg-field-font-style,normal);
  font-size:var(--fmg-field-font-size,24px);
  margin:0 0 8px;text-wrap:balance;
}
.fmg-pw-heading{
  font-family:var(--fmg-field-font-family,'Archivo',sans-serif);
  font-weight:var(--fmg-field-font-weight,800);
  font-style:var(--fmg-field-font-style,normal);
  font-size:var(--fmg-field-font-size,15px);
  display:flex;align-items:center;gap:8px;margin:0 0 14px;
}
.fmg-pw-heading i{color:var(--gold)}
.fmg-pw-meta{
  display:flex;align-items:center;gap:6px;color:var(--gray);
  font-family:var(--fmg-field-font-family,inherit);
  font-size:var(--fmg-field-font-size,13.5px);
  font-weight:var(--fmg-field-font-weight,600);
  font-style:var(--fmg-field-font-style,normal);
  margin-bottom:4px;
}
.fmg-pw-meta i{color:var(--gold)}
.fmg-pw-desc{
  font-family:var(--fmg-field-font-family,inherit);
  font-size:var(--fmg-field-font-size,14px);
  font-weight:var(--fmg-field-font-weight,400);
  font-style:var(--fmg-field-font-style,normal);
  color:var(--black);line-height:1.6;margin:12px 0 0;white-space:pre-wrap;
}
.fmg-pw-note{
  font-family:var(--fmg-field-font-family,inherit);
  font-size:var(--fmg-field-font-size,12.5px);
  font-weight:var(--fmg-field-font-weight,400);
  font-style:var(--fmg-field-font-style,normal);
  color:var(--gray);margin-top:8px;
}

.fmg-pw-ticket-list{display:flex;flex-direction:column;gap:8px}
.fmg-pw-ticket-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.fmg-pw-ticket-row:last-child{border-bottom:none}
.fmg-pw-ticket-row span:first-child{
  flex:1;
  font-family:var(--fmg-field-font-family,inherit);
  font-weight:var(--fmg-field-font-weight,600);
  font-style:var(--fmg-field-font-style,normal);
  font-size:var(--fmg-field-font-size,13.5px);
}
.fmg-pw-price{
  color:var(--black);
  font-family:var(--fmg-field-font-family,inherit);
  font-weight:var(--fmg-field-font-weight,700);
  font-style:var(--fmg-field-font-style,normal);
  font-size:var(--fmg-field-font-size,13.5px);
}

/* Highest Donor is the same ticket-stub markup as every Purchases row
   (purchaseTicketHtml(top, {gold:true})) — just labeled and gold-tinted,
   not a separate one-line badge. */
.fmg-pw-topdonor-heading{
  display:flex;align-items:center;gap:6px;margin-bottom:6px;
  font-family:var(--fmg-field-font-family,'Archivo',sans-serif);
  font-weight:var(--fmg-field-font-weight,800);
  font-style:var(--fmg-field-font-style,normal);
  font-size:var(--fmg-field-font-size,12.5px);
  color:var(--black);
}
.fmg-pw-topdonor-heading i{color:var(--gold);flex:0 0 auto}
/* Two classes (not just .fmg-pw-tstub--gold alone) so this always beats the
   plain .fmg-pw-tstub rule below regardless of which is declared later in
   the file — a single-class modifier tied on specificity with the base
   rule is a real trap: whichever one happens to sit later in the
   stylesheet silently wins. */
.fmg-pw-tstub.fmg-pw-tstub--gold{
  background:rgba(255,183,7,.15);
  border:2px solid var(--gold);
  box-shadow:0 4px 14px rgba(255,183,7,.35);
}
.fmg-pw-tstub.fmg-pw-tstub--gold .fmg-pw-tstub-icon{background:var(--gold);color:#fff}

/* Each purchase renders as an actual ticket stub — a cream chip split by a
   dashed perforation into a "who/what" half and an amount "stub" half, with
   two circle notches punched into the divider (background matches the card
   behind it, #fff) so it reads as a torn-off ticket rather than a plain
   list row. Must stay in sync with the equivalent rules in
   styles/fundraiserManager.css. */
.fmg-pw-tstub-list{display:flex;flex-direction:column;gap:8px}
/* Two classes so this reliably beats .pay-back's own margin-top:16px
   regardless of stylesheet order (the same single-class specificity tie
   that bit .fmg-pw-tstub--gold earlier) — setupPurchasesPaging() sizes its
   "View more" button into a small reserved budget, so it has to render
   compact and centered, not with .pay-back's normal left-aligned spacing. */
/* .fmg-field-box .pay-back{...} below reads a field's own font vars for the
   Links field's Route/Plan buttons — it ties on specificity with a plain
   .pay-back.fmg-pw-tstub-viewmore rule and (being declared later) would
   silently win, pulling in the Purchases field's own font size/weight for
   this button too. The extra .fmg-field-box ancestor class here isn't
   about scoping (this selector already only ever matches inside a field
   box) — it's what pushes specificity to 3 classes so this reliably beats
   that rule regardless of file order, same fix already applied to
   .fmg-pw-tstub--gold. */
.fmg-field-box .pay-back.fmg-pw-tstub-viewmore{display:block;width:100%;text-align:center;margin:8px 0 0;font-size:12px;font-weight:400}
.fmg-pw-tstub{
  display:flex;align-items:stretch;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.fmg-pw-tstub-main{
  flex:1;display:flex;align-items:center;gap:10px;
  padding:9px 12px;min-width:0;
}
.fmg-pw-tstub-icon{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--gold-lt);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
.fmg-pw-tstub-info{display:flex;flex-direction:column;gap:1px;min-width:0}
/* Holds a full sentence now ("X purchased N tickets and made a donation for
   $Y"), not just a short name — wraps instead of the single-line ellipsis
   truncation a bare name used to get away with. */
/* The sentence's own weight stays normal — .fmg-pw-tstub-strong (the name,
   any dollar amount) is what carries the bold, not the whole line, so a
   field-wide font-weight customization can't accidentally bold the
   connecting words too. */
.fmg-pw-tstub-name{
  font-family:var(--fmg-field-font-family,inherit);
  font-weight:400;
  font-style:var(--fmg-field-font-style,normal);
  font-size:var(--fmg-field-font-size,12.5px);
  color:var(--black);
}
.fmg-pw-tstub-strong{font-weight:700}
/* Same size/weight/color as the Team Leaderboard's player-count line
   (.fmg-pw-leaderboard-count) — both are the same kind of secondary detail
   under a bold primary line. */
.fmg-pw-tstub-sub{
  font-family:var(--fmg-field-font-family,inherit);
  font-weight:400;
  font-style:var(--fmg-field-font-style,normal);
  font-size:0.85em;
  color:var(--gray);
}
/* A buyer's own optional message (ticket purchase's `message`, or a
   bundled/standalone donation's own note) — shown as a quoted line under
   the name/quantity, same font vars as the rest of the stub so it follows
   whatever the admin set for this field. */
.fmg-pw-tstub-note{
  font-family:var(--fmg-field-font-family,inherit);
  font-weight:var(--fmg-field-font-weight,400);
  font-style:italic;
  font-size:var(--fmg-field-font-size,10.5px);
  color:var(--gray);margin-top:2px;
}
.fmg-pw-tstub-stub{
  position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  padding:9px 14px;min-width:60px;
  border-left:2px dashed var(--line);
}
.fmg-pw-tstub-stub::before,
.fmg-pw-tstub-stub::after{
  content:'';position:absolute;left:-7px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:1px solid var(--line);
}
.fmg-pw-tstub-stub::before{top:-7px}
.fmg-pw-tstub-stub::after{bottom:-7px}
.fmg-pw-tstub-amount{
  font-family:var(--fmg-field-font-family,inherit);
  font-weight:var(--fmg-field-font-weight,800);
  font-style:var(--fmg-field-font-style,normal);
  font-size:var(--fmg-field-font-size,13px);
  color:var(--black);
}

.fmg-pw-progress-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.fmg-pw-progress-raised{
  font-family:var(--fmg-field-font-family,'Archivo',sans-serif);
  font-weight:var(--fmg-field-font-weight,800);
  font-style:var(--fmg-field-font-style,normal);
  font-size:var(--fmg-field-font-size,22px);
  color:var(--black);
}
/* A short phrase now ("X% raised of $Y goal"), not a standalone number —
   sized/weighted down from the big percentage badge this used to be. */
.fmg-pw-progress-pct{
  flex:0 1 auto;text-align:right;
  font-family:var(--fmg-field-font-family,inherit);
  font-weight:var(--fmg-field-font-weight,700);
  font-style:var(--fmg-field-font-style,normal);
  font-size:var(--fmg-field-font-size,13px);
  color:var(--gold);
}
.fmg-pw-progress-track{background:var(--line);border-radius:99px;height:10px;overflow:hidden;margin-bottom:6px}
.fmg-pw-progress-fill{background:var(--gold);height:100%;border-radius:99px}
.fmg-pw-progress-supporters{
  font-family:var(--fmg-field-font-family,inherit);
  font-weight:var(--fmg-field-font-weight,600);
  font-style:var(--fmg-field-font-style,normal);
  font-size:var(--fmg-field-font-size,12.5px);
  color:var(--gray);
}
.fmg-pw-preset-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

.fmg-pw-leaderboard-list{display:flex;flex-direction:column;gap:2px}
.fmg-pw-leaderboard-row{
  display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);
  font-family:var(--fmg-field-font-family,inherit);
  font-size:var(--fmg-field-font-size,13.5px);
  font-weight:var(--fmg-field-font-weight,600);
  font-style:var(--fmg-field-font-style,normal);
}
.fmg-pw-leaderboard-row:last-child{border-bottom:none}
.fmg-pw-leaderboard-left{display:flex;align-items:center;gap:8px;min-width:0}
.fmg-pw-leaderboard-rank{color:var(--gray);font-weight:700;min-width:1.1em;text-align:right}
.fmg-pw-leaderboard-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.fmg-pw-leaderboard-name{font-weight:700}
/* Sized to roughly match the combined height of the name + player-count
   lines next to it, so it reads as one unit rather than a small icon
   floating beside a taller text block. */
.fmg-pw-leaderboard-logo{width:32px;height:32px;object-fit:contain;flex:0 0 auto}
.fmg-pw-leaderboard-count{font-weight:400;color:var(--gray);font-size:0.85em}

.fmg-pw-link-row{display:flex;gap:16px;margin:6px 0 4px;flex-wrap:wrap}

/* MapMyRun's own "Code for website" snippet is an <iframe> with its own
   fixed width/height baked in — forced to fill the field's box instead
   (!important since some embed providers set that sizing via an inline
   style attribute, which otherwise beats an external stylesheet outright
   regardless of selector specificity). */
.fmg-pw-map-embed{width:100%;height:100%;border-radius:10px;overflow:hidden}
.fmg-pw-map-embed iframe{width:100%!important;height:100%!important;border:0;display:block}

/* Notes widget's rich text — inline <b>/<i>/<u>/<font> tags the admin's
   contenteditable editor produced render as real formatting; the field's
   own font vars set the baseline, inline tags override on top naturally
   since they're more specific. Must stay in sync with
   styles/fundraiserManager.css. */
.fmg-pw-richtext{
  font-family:var(--fmg-field-font-family,inherit);
  font-size:var(--fmg-field-font-size,14px);
  font-weight:var(--fmg-field-font-weight,400);
  font-style:var(--fmg-field-font-style,normal);
  color:var(--black);line-height:1.6;overflow-wrap:break-word;
}

/* One bordered card wrapping both the date/location header and the
   timeline below it, with a rule between the two sections — rather than
   two loose blocks with just vertical spacing between them. */
.fmg-pw-schedule-card{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.fmg-pw-schedule-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#F5F5F5}
.fmg-pw-schedule-card > .fmg-pw-schedule-head:not(:last-child){border-bottom:1px solid var(--line)}
/* Desk-calendar icon shape — month abbreviation on a gold strip, the day
   number large underneath — rather than a plain "Sat, Nov 21, 2026" line.
   Must stay in sync with styles/fundraiserManager.css. */
.fmg-pw-schedule-datebadge{
  flex:0 0 auto;width:52px;height:52px;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);display:flex;flex-direction:column;
}
.fmg-pw-schedule-datebadge-month{
  background:var(--gold);color:#fff;text-align:center;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:11px;
  text-transform:uppercase;letter-spacing:.03em;padding:3px 0;
}
.fmg-pw-schedule-datebadge-day{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;color:var(--black);
}
.fmg-pw-schedule-headinfo{min-width:0}
.fmg-pw-schedule-loc-name{
  font-family:var(--fmg-field-font-family,inherit);
  font-weight:700;font-size:14px;color:var(--black);
}
.fmg-pw-schedule-loc-address{
  display:block;
  font-family:var(--fmg-field-font-family,inherit);
  font-size:12.5px;color:var(--gray);text-decoration:underline;margin-top:1px;
}
.fmg-pw-schedule-loc-address:hover{color:var(--black)}
.fmg-pw-schedule-list{display:flex;flex-direction:column;gap:14px;padding:14px 16px}
.fmg-pw-schedule-item{display:flex;gap:12px;align-items:flex-start}
.fmg-pw-schedule-icon{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  background:var(--gold-lt);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.fmg-pw-schedule-body{min-width:0}
.fmg-pw-schedule-time{
  font-family:var(--fmg-field-font-family,inherit);
  font-size:var(--fmg-field-font-size,12px);
  font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.02em;
}
.fmg-pw-schedule-title{
  font-family:var(--fmg-field-font-family,inherit);
  font-weight:700;font-size:14px;color:var(--black);margin-top:2px;
}
.fmg-pw-schedule-desc{
  font-family:var(--fmg-field-font-family,inherit);
  font-weight:400;font-size:13px;color:var(--gray);margin-top:2px;
}

/* .pay-back (site.css) hardcodes its own font-size/weight, so a var set on a
   parent field box alone wouldn't reach it — scoped here so a Links field's
   font only changes inside a field box, never the many other .pay-back
   usages across the site (defaults below match .pay-back's own values
   exactly, so an uncustomized Links field is visually unchanged). */
.fmg-field-box .pay-back{
  font-size:var(--fmg-field-font-size,13px);
  font-weight:var(--fmg-field-font-weight,600);
  font-style:var(--fmg-field-font-style,normal);
}

/* The builder's canvas is a fixed desktop-only grid; the real public page
   has to actually be responsive, so unlike the admin tool this collapses to
   a single stacked column on narrow screens (widgets are rendered into the
   DOM already sorted by y-then-x, see renderEventWidgets() in the page
   script, so this stacking order reads top-to-bottom the way it was laid
   out in the builder). */
@media(max-width:720px){
  .fmg-preview-grid{display:flex;flex-direction:column;padding:12px 16px 40px}
  .fmg-preview-widget{grid-column:auto!important;grid-row:auto!important;height:auto!important}
  /* Every field box is position:absolute with a percentage top/left/width/
     height tuned for the desktop grid's fixed-pixel widget height. On a
     phone-width column the SAME text wraps to more lines than it did at
     desktop width, so a field's real content routinely needed more room
     than its percentage slice had — with no way for one field to know
     another grew, they just silently overlapped (a title wrapping to two
     lines overlapped the description right below it, etc.). Dropping the
     percentage positioning in favor of plain top-to-bottom flow sidesteps
     the problem entirely rather than trying to patch every field's
     assumed height for a width it was never sized for. widgetContentHtml()
     sorts fields by y before writing them to the DOM specifically so this
     stacking order still matches how the admin actually arranged them. */
  .fmg-pw-card{height:auto}
  .fmg-field-canvas{position:static;height:auto}
  .fmg-field-box{position:static!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;margin-bottom:14px}
  .fmg-field-box:last-child{margin-bottom:0}
}

/* ---- Header ----
   This page's <header> carries no site nav (Teams/Calendar/About/Manage/Log
   in/Register) — just the logo and one button, so the page reads as a
   focused give/buy destination rather than a normal site page. Deliberately
   NOT the shared .wrap (max-width:1200px) — the widget grid below fills
   the full page width edge-to-edge, so the header uses the same plain side
   padding (no max-width) to stay visually consistent with it, rather than
   the logo/button sitting inset from where the content below actually
   starts. */
.fund-header-wrap{padding:0 24px}
/* Reuses the header's own sticky positioning (site.css:
   header{position:sticky;top:0}) rather than needing a second sticky
   wrapper of its own. Auto-shown only when there's a relevant live event
   with a Ticketing or Donations Goal widget (see renderHeaderCta() in the
   page script) — not something the admin places. */
.fund-header-cta{
  background:var(--black);color:#fff;border:none;border-radius:8px;
  padding:10px 20px;font-family:'Archivo',sans-serif;font-weight:800;font-size:13.5px;
  cursor:pointer;display:flex;align-items:center;gap:8px;
}
.fund-header-cta i{color:var(--gold)}
.fund-header-cta:hover{background:var(--gold);color:var(--black)}
.fund-header-cta:hover i{color:var(--black)}
/* nav (site.css) is a plain flex row with no wrap/shrink of its own — on a
   real phone width, the full logo wordmark plus "Donate & Tickets" text
   don't both fit and were overlapping. Shrinking the logo buys some room;
   past that, the button drops its label and becomes an icon-only circle
   (still perfectly clear given the header has nothing else on it) rather
   than truncating text or letting nav wrap onto a second line. */
@media(max-width:480px){
  .fund-header-wrap{padding:0 16px}
  .logo img{height:28px}
  .fund-header-cta{padding:10px;border-radius:50%}
  .fund-header-cta-text{display:none}
}

/* Live Mode's on-screen QR (?live=1) — a floating corner card, not part of
   the widget grid, so it stays put regardless of how tall the page grows
   as "View more"/auto-refresh reveal more activity. Hidden automatically
   (see the <img onerror> in renderLiveModeQr()) if the admin hasn't
   generated this event's QR yet, rather than showing a broken image. */
.fund-live-qr{
  position:fixed;bottom:24px;right:24px;z-index:50;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.18);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.fund-live-qr img{width:140px;height:140px;display:block;border-radius:6px}
.fund-live-qr-label{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:12.5px;
  text-align:center;color:var(--black);max-width:140px;line-height:1.3;
}

/* ---- Donate & Tickets modal — step wizard split vertically into a
   scrollable step area (left, reuses .vv-modal-body from site.css) and a
   persistent Order Summary (right) that reflects every step's picks at
   once, not just the current one. ---- */
.dtm-modal-split{display:flex;align-items:stretch;max-height:85vh}
/* .dtm-modal-main doubles up as .vv-modal-body (site.css), which has its
   own max-height:72vh — overridden here so the taller split above
   actually has room to use, rather than being capped by the shorter of
   the two. */
.dtm-modal-main{flex:1 1 auto;min-width:0;max-height:85vh;padding:28px;}
.dtm-modal-summary{
  flex:0 0 280px;background:var(--cream);border-left:1px solid var(--line);
  padding:24px;overflow-y:auto;
}
@media(max-width:720px){
  .dtm-modal-split{flex-direction:column;max-height:none;}
  .dtm-modal-summary{flex:0 0 auto;border-left:none;border-top:1px solid var(--line);}
}
.dtm-summary-title{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:14px;
}
.dtm-summary-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.dtm-summary-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--gray)}
.dtm-summary-row b{color:var(--black);font-weight:700;flex-shrink:0}
.dtm-summary-fee{padding-top:10px;border-top:1px dashed var(--line);margin-top:2px}
.dtm-summary-empty{font-size:13px;color:var(--gray);margin-bottom:12px}
.dtm-summary-total{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:12px;margin-top:6px;border-top:2px solid var(--black);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;
}
.dtm-summary-total b{font-family:'Archivo',sans-serif;font-size:19px;font-weight:800;color:var(--black)}

.dtm-step-title{font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;margin-bottom:16px}
.dtm-back-link{
  background:none;border:none;color:var(--gray);font-family:inherit;font-size:13px;
  font-weight:600;cursor:pointer;padding:0;margin-bottom:12px;display:block;
}
.dtm-back-link:hover{color:var(--black)}
.dtm-checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin:14px 0;cursor:pointer}

/* -- Payment step: reuses .pay-intro/.pay-status/.pay-local from site.css,
   just laid out inside the modal's own step area instead of a standalone
   page section. -- */
.dtm-modal-main .pay-intro{margin-bottom:16px}

/* -- Success step — a "thank you" screen inside the modal itself (not a
   separate page section), with the same checkmark/heading treatment as
   the old full-page success screen (.success-check, site.css), just sized
   for the modal body. -- */
.dtm-success{text-align:center;padding:24px 8px}
.dtm-success h2{font-family:'Archivo',sans-serif;font-size:22px;font-weight:800;margin-bottom:10px}
.dtm-success p{color:var(--gray);font-size:14px;line-height:1.55;margin-bottom:22px}

/* -- Tickets step: each ticket type as an actual ticket stub (perforated
   divider + punched notches, same visual grammar as the Purchases field's
   own stubs), with a "- # +" stepper on the stub side instead of an
   amount. -- */
.dtm-ticket-list{display:flex;flex-direction:column;gap:10px}
.dtm-ticket-card{
  display:flex;align-items:stretch;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.dtm-ticket-main{flex:1;display:flex;align-items:center;gap:12px;padding:14px 16px;min-width:0}
.dtm-ticket-icon{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--gold-lt);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.dtm-ticket-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.dtm-ticket-label{font-family:'Archivo',sans-serif;font-weight:700;font-size:14.5px;color:var(--black)}
.dtm-ticket-sub{font-size:12px;color:var(--gray)}
.dtm-ticket-price{font-size:13px;font-weight:700;color:var(--gray);margin-top:2px}
.dtm-ticket-stub{
  position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  padding:10px 16px;min-width:104px;border-left:2px dashed var(--line);
}
.dtm-ticket-stub::before,.dtm-ticket-stub::after{
  content:'';position:absolute;left:-7px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:1px solid var(--line);
}
.dtm-ticket-stub::before{top:-7px}
.dtm-ticket-stub::after{bottom:-7px}

.dtm-stepper{display:flex;align-items:center;gap:10px}
.dtm-stepper-btn{
  width:28px;height:28px;border-radius:50%;border:1.5px solid var(--black);background:#fff;
  font-size:16px;line-height:1;font-weight:700;cursor:pointer;color:var(--black);
  display:flex;align-items:center;justify-content:center;padding:0;
}
.dtm-stepper-btn:hover:not(:disabled){background:var(--gold);border-color:var(--gold)}
.dtm-stepper-btn:disabled{opacity:.35;cursor:not-allowed}
.dtm-stepper-count{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;min-width:16px;text-align:center}

/* -- Merchandise step: one card per item (photo, description, price,
   remaining stock in green if limited) with its own stepper. -- */
.dtm-merch-list{display:flex;flex-direction:column;gap:12px}
.dtm-merch-card{
  display:flex;gap:14px;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.dtm-merch-card--soldout{opacity:.6}
.dtm-merch-card-img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line);flex-shrink:0}
.dtm-merch-card-img--placeholder{
  display:flex;align-items:center;justify-content:center;background:var(--cream);
  color:var(--gray);font-size:22px;
}
.dtm-merch-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dtm-merch-card-name{font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;color:var(--black)}
.dtm-merch-card-desc{font-size:12.5px;color:var(--gray);line-height:1.4}
.dtm-merch-card-price{font-size:13px;font-weight:700;color:var(--gray);margin-top:2px}
.dtm-merch-card-remaining{font-size:12px;font-weight:700;color:var(--green)}
.dtm-merch-card-body select{
  margin-top:6px;max-width:160px;padding:7px 10px;border:1.5px solid var(--line);
  border-radius:8px;font-family:inherit;font-size:13px;font-weight:600;
  background:#fff;cursor:pointer;
}
.dtm-merch-card-body select:focus{outline:none;border-color:var(--gold)}
.dtm-merch-card-body select:disabled{opacity:.5;cursor:not-allowed}
.dtm-merch-card-stepper{flex:0 0 auto}
@media(max-width:720px){
  .dtm-merch-card{flex-wrap:wrap}
  .dtm-merch-card-stepper{width:100%;display:flex;justify-content:flex-end}
}

/* -- Ticket Information step: one section per category (Guests/VV Players/
   VV Alumni/VV Coaches), each only rendered if its own count is above 0. -- */
.dtm-tinfo-section{margin-bottom:22px}
.dtm-tinfo-section:last-of-type{margin-bottom:0}
.dtm-tinfo-heading{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--gray);
  margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid var(--line);
}
.dtm-tinfo-player-row{display:grid;grid-template-columns:1fr 120px;gap:10px;margin-bottom:16px}
.dtm-tinfo-player-row .field{margin-bottom:0}
@media(max-width:720px){
  .dtm-tinfo-player-row{grid-template-columns:1fr}
}