/* monthly-poster.css — v5.85
 * Styles for the "Where's Bill Playing This Month?" modal + 1920x1080 share graphic.
 * The modal shows a scaled PREVIEW of a hidden full-resolution render target
 * that html2canvas captures to produce the downloadable PNG.
 */

/* ── MODAL SHELL ───────────────────────────────────────────────────────── */
.mp-backdrop{
  position:fixed; inset:0; z-index:9999;
  background:rgba(4,8,14,.88);
  backdrop-filter:blur(6px);
  display:none;
  align-items:flex-start; justify-content:center;
  padding:24px 16px; overflow-y:auto;
}
.mp-backdrop.mp-open{ display:flex; }

.mp-modal{
  width:100%; max-width:1100px;
  background:#0d1825;
  border:1px solid #1a2b3f;
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  padding:20px 22px 24px;
  color:#e4eaf5;
}

.mp-header{
  display:flex; align-items:center; gap:16px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.mp-title{
  font-size:18px; font-weight:800; letter-spacing:-.01em;
  color:#e4eaf5;
  flex:1; min-width:200px;
}
.mp-title .mp-title-sub{
  display:block; font-size:12px; font-weight:500; color:#8aabcf;
  margin-top:3px; letter-spacing:0;
}

.mp-close{
  background:transparent; border:1px solid #1a2b3f;
  color:#8aabcf; cursor:pointer;
  border-radius:8px; padding:6px 12px; font-size:14px;
  transition:border-color .15s, color .15s;
}
.mp-close:hover{ border-color:#4a7abf; color:#e4eaf5; }

.mp-controls{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  margin-bottom:18px;
  padding:12px; border:1px solid #1a2b3f; border-radius:10px;
  background:rgba(74,122,191,.04);
}
.mp-controls label{ font-size:11px; color:#8aabcf; letter-spacing:.08em; text-transform:uppercase; }
.mp-select{
  background:#080d14; border:1px solid #2a4870; color:#e4eaf5;
  padding:8px 12px; border-radius:8px; font-size:14px; min-width:180px;
  cursor:pointer;
}
.mp-select:focus{ outline:none; border-color:#7c9fff; }
.mp-select-band{ min-width:160px; }

.mp-btn{
  background:#4a7abf; color:#fff; border:0;
  padding:8px 18px; border-radius:8px; font-size:14px; font-weight:600;
  cursor:pointer; transition:background .15s;
}
.mp-btn:hover{ background:#7c9fff; }
.mp-btn:disabled{ background:#2a4870; cursor:wait; opacity:.7; }
.mp-btn.mp-btn-ghost{
  background:transparent; color:#8aabcf; border:1px solid #2a4870;
}
.mp-btn.mp-btn-ghost:hover{ border-color:#4a7abf; color:#e4eaf5; background:transparent; }

.mp-status{
  font-size:12px; color:#8aabcf; min-height:18px;
  margin-top:-4px; margin-bottom:12px;
}
.mp-status.mp-err{ color:#f08080; }

/* ── PREVIEW (the 1920x1080 scaled down) ───────────────────────────────── */
.mp-preview-wrap{
  width:100%;
  background:#000;
  border:1px solid #1a2b3f;
  border-radius:10px;
  overflow:hidden;
  position:relative;
  /* Aspect-ratio lock so the preview always matches 16:9 no matter the wrap width */
  aspect-ratio:16/9;
}
.mp-preview-scale{
  position:absolute; top:0; left:0;
  width:1920px; height:1080px;
  transform-origin:top left;
  /* Scale is set inline via JS on resize */
}

/* ── 1920x1080 RENDER TARGET ───────────────────────────────────────────── */
/* All styles below target the poster surface and its contents.
 * Use fixed pixel values — this surface renders at its true 1920x1080
 * dimensions (then gets CSS-scaled into the preview box or captured
 * at 1:1 by html2canvas for download).
 */
.mp-poster{
  width:1920px; height:1080px;
  background:
    radial-gradient(1400px 700px at 15% -10%, rgba(74,122,191,.22), transparent 60%),
    radial-gradient(1200px 600px at 110% 110%, rgba(124,159,255,.15), transparent 60%),
    linear-gradient(180deg, #080d14 0%, #0b1422 100%);
  color:#e4eaf5;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  display:flex; flex-direction:column;
  box-sizing:border-box;
  padding:40px 70px 40px;
  position:relative; overflow:hidden;
}

.mp-poster::before{
  /* Subtle corner glow */
  content:""; position:absolute; inset:0;
  background:radial-gradient(600px 400px at 95% 5%, rgba(124,159,255,.08), transparent 60%);
  pointer-events:none;
}

.mp-poster-hdr{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:40px; margin-bottom:14px;
}
.mp-poster-hdr-left{ flex:1; min-width:0; }
.mp-kicker{
  font-size:24px; font-weight:600; letter-spacing:.18em;
  color:#7c9fff; text-transform:uppercase;
  margin:0 0 10px; line-height:1;
}
.mp-h1{
  font-size:92px; font-weight:900; letter-spacing:-.02em;
  color:#fff; line-height:1;
  margin:0; text-shadow:0 2px 20px rgba(0,0,0,.4);
}
.mp-h1 .mp-h1-accent{ color:#7c9fff; }
.mp-poster-hdr-right{
  text-align:right; flex-shrink:0;
}
.mp-url{
  font-size:22px; font-weight:700; color:#e4eaf5;
  letter-spacing:.02em; margin:0;
}
.mp-count-badge{
  display:inline-block;
  background:rgba(74,122,191,.18);
  border:1px solid #4a7abf;
  color:#fff;
  padding:6px 16px; border-radius:999px;
  font-size:16px; font-weight:700; letter-spacing:.05em;
  margin-top:10px;
  text-transform:uppercase;
}

/* ── TILE GRID ─────────────────────────────────────────────────────────── */
.mp-grid{
  flex:1; display:grid; gap:22px;
  min-height:0;
  /* Center the grid's content vertically so any spare space is above AND below,
   * not below only. Tiles themselves are content-sized (poster at 11/17 +
   * body natural height) so every tile is uniform. */
  align-content:center;
  justify-content:center;
}

/* Single-row layouts — 1 to 9 tiles. Tile height is CONTENT-DRIVEN (no
 * grid-template-rows) so posters exactly match their 11:17 footprint
 * with no black space above. */
.mp-grid-c1-r1{ grid-template-columns:400px; }
.mp-grid-c2-r1{ grid-template-columns:repeat(2,400px); }
.mp-grid-c3-r1{ grid-template-columns:repeat(3,400px); }
.mp-grid-c4-r1{ grid-template-columns:repeat(4,400px); }
.mp-grid-c5-r1{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; width:100%; }
.mp-grid-c6-r1{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; width:100%; }
.mp-grid-c7-r1{ grid-template-columns:repeat(7,minmax(0,1fr)); gap:14px; width:100%; }
.mp-grid-c8-r1{ grid-template-columns:repeat(8,minmax(0,1fr)); gap:12px; width:100%; }
.mp-grid-c9-r1{ grid-template-columns:repeat(9,minmax(0,1fr)); gap:10px; width:100%; }

/* Multi-row layouts — tile height is row-fill; posters center within available
 * space with 11/17 aspect (max-w/max-h) and some letterbox. */
/* v6.5.1 — 4×2 grid for 7-8 shows. Roughly doubles each card\'s width vs. the
 * old 7-or-8-in-a-single-row layout, so caption text stays legible at FB
 * display sizes. */
.mp-grid-c4-r2{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:1fr 1fr; gap:18px; width:100%; }
.mp-grid-c5-r2{ grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:1fr 1fr; width:100%; }

/* v6.5.1 — Horizontal card layout for the 4×2 grid. Poster on the left,
 * caption on the right. Both elements use the cell\'s full height, which
 * lets the 11:17 poster be larger than it would be in a vertical layout
 * (top-to-bottom poster gets squeezed by aspect-ratio in a wide cell).
 * Only applies to mp-grid-c4-r2 — other grids keep their vertical tiles. */
.mp-grid-c4-r2 .mp-tile{
  flex-direction: row;
  align-items: stretch;
}
.mp-grid-c4-r2 .mp-tile-poster{
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  aspect-ratio: 11 / 17;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.mp-grid-c4-r2 .mp-tile-poster img{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border-radius: 4px;
}
.mp-grid-c4-r2 .mp-tile-body{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 16px;
}
/* Text-card placeholders fill the same horizontal slot as a real poster. */
.mp-grid-c4-r2 .mp-tile-poster-textcard{
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  max-width: none;
  max-height: none;
}
.mp-grid-c6-r2{ grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:1fr 1fr; gap:16px; width:100%; }
.mp-grid-c7-r2{ grid-template-columns:repeat(7,minmax(0,1fr)); grid-template-rows:1fr 1fr; gap:14px; width:100%; }
.mp-grid-c4-r3{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(3,1fr); width:100%; }
.mp-grid-c5-r3{ grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(3,1fr); gap:16px; width:100%; }
.mp-grid-c5-r4{ grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(4,1fr); gap:14px; width:100%; }

/* ── SHOW TILE ─────────────────────────────────────────────────────────── */
.mp-tile{
  background:#0d1825;
  border:1px solid #1a3a5f;
  border-radius:18px;
  display:flex; flex-direction:column;
  overflow:hidden;
  position:relative;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}

/* ── SINGLE-ROW: tile content-sized, poster at exact 11/17 ─────────────── */
.mp-grid-singlerow .mp-tile-poster{
  width:100%;
  aspect-ratio: 11 / 17;
  flex:none;
  background:
    radial-gradient(120% 120% at 50% 50%, #0a1320 0%, #040810 100%);
  display:block;
  overflow:hidden;
  position:relative;
}
.mp-grid-singlerow .mp-tile-poster img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.mp-grid-singlerow .mp-tile-poster-textcard{
  width:100%; height:100%;
  box-sizing:border-box;
}

/* ── MULTI-ROW: tile fills row, poster centers 11/17 content with letterbox ── */
.mp-grid-multirow .mp-tile-poster{
  flex:1; min-height:0;
  background:
    radial-gradient(120% 120% at 50% 50%, #0a1320 0%, #040810 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  position:relative;
  padding:6px;
}
.mp-grid-multirow .mp-tile-poster img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  aspect-ratio: 11 / 17;
  object-fit:cover;
  display:block;
  box-shadow: 0 2px 12px rgba(0,0,0,.55);
  border-radius:2px;
}
.mp-grid-multirow .mp-tile-poster-textcard{
  aspect-ratio: 11 / 17;
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  box-sizing:border-box;
}

/* Text-card placeholder styling (shared between single-row and multi-row) */
.mp-tile-poster-textcard{
  background:
    linear-gradient(150deg, #1e3e66 0%, #0f1e33 55%, #08121f 100%);
  border: 1px solid rgba(124,159,255,.28);
  border-radius: 4px;
  padding: 26px 20px;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  text-align:center;
  color:#e4eaf5;
  box-shadow: 0 2px 12px rgba(0,0,0,.55);
  gap: 10px;
}
.mp-tp-date{
  font-size:18px; font-weight:800; letter-spacing:.18em;
  color:#7c9fff; text-transform:uppercase; line-height:1.2;
}
.mp-tp-band{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  font-size:32px; font-weight:900; letter-spacing:-.01em;
  color:#fff; line-height:1.1;
  padding: 6px 0;
  hyphens: auto;
  word-break: break-word;
}
.mp-tp-divider{
  width:48px; height:2px; background:#4a7abf; border-radius:1px;
  flex-shrink:0;
}
.mp-tp-venue{
  font-size:20px; font-weight:700; color:#e4eaf5; line-height:1.2;
}
.mp-tp-loc{
  font-size:15px; color:#8aabcf; letter-spacing:.04em;
  text-transform:uppercase; line-height:1.2;
}

/* ── TILE BODY — uniform height across row (band reserves 2 lines) ─────── */
.mp-tile-body{
  flex-shrink:0;
  padding:22px 22px 22px;
  background:linear-gradient(180deg, rgba(74,122,191,.06), rgba(13,24,37,1));
  border-top:1px solid #1a2b3f;
  display:flex; flex-direction:column; gap:6px;
}
.mp-tile-date{
  font-size:20px; font-weight:800; letter-spacing:.14em;
  color:#7c9fff; text-transform:uppercase;
  line-height:1.15;
}
.mp-tile-band{
  font-size:34px; font-weight:800; letter-spacing:-.01em;
  color:#fff; line-height:1.12;
  margin-top:4px;
  /* Full text — no truncation. Wrap as many lines as needed.
   * Reserve 2 lines so short names still occupy the same floor as 2-line wraps. */
  min-height:calc(2 * 1.12em);
  word-break:break-word;
  hyphens:auto;
}
.mp-tile-venue{
  font-size:24px; font-weight:600; color:#e4eaf5;
  margin-top:6px;
  /* Full text — no truncation. */
  word-break:break-word;
  hyphens:auto;
}
.mp-tile-loc{
  font-size:20px; color:#8aabcf;
  letter-spacing:.02em;
}
.mp-tile-time{
  font-size:18px; color:#8aabcf; margin-top:3px;
}
.mp-tile-tickets{
  display:inline-block;
  align-self:flex-start;
  margin-top:14px;
  background:#4a7abf; color:#fff;
  padding:6px 16px; border-radius:6px;
  font-size:16px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .12s ease, transform .12s ease;
}
a.mp-tile-tickets:hover{ background:#5a8acf; transform:translateY(-1px); }
a.mp-tile-tickets:visited{ color:#fff; }

/* v6.4.3 FREE pill — visual indicator for "FREE" sentinel in Ticket_URL.
   Same footprint as the Tickets button so layout stays consistent. */
.mp-tile-free{
  display:inline-block;
  align-self:flex-start;
  margin-top:14px;
  background:rgba(74,222,128,.14);
  color:#4ade80;
  border:1px solid rgba(74,222,128,.42);
  padding:5px 16px; border-radius:6px;
  font-size:16px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase;
}
.mp-compact .mp-tile-free{ font-size:13px; padding:3px 11px; margin-top:9px; }
.mp-xcompact .mp-tile-free{ font-size:11px; padding:2px 8px; }

/* ── COMPACT VARIANTS (dense single-row 8-9 + all multi-row grids) ──────── */
.mp-compact .mp-tile-body{ padding:16px 18px 18px; gap:4px; }
.mp-compact .mp-tile-date{ font-size:16px; letter-spacing:.1em; }
.mp-compact .mp-tile-band{ font-size:25px; min-height:calc(2 * 1.12em); }
.mp-compact .mp-tile-venue{ font-size:19px; margin-top:4px; }
.mp-compact .mp-tile-loc{ font-size:16px; }
.mp-compact .mp-tile-time{ display:none; }
.mp-compact .mp-tile-tickets{ font-size:13px; padding:4px 11px; margin-top:9px; }
/* Compact text-card */
.mp-compact .mp-tile-poster-textcard{ padding:16px 14px; gap:7px; }
.mp-compact .mp-tp-date{ font-size:14px; letter-spacing:.14em; }
.mp-compact .mp-tp-band{ font-size:22px; }
.mp-compact .mp-tp-divider{ width:32px; }
.mp-compact .mp-tp-venue{ font-size:15px; }
.mp-compact .mp-tp-loc{ font-size:12px; }

/* Very compact — 5x3, 5x4 grids (13+ shows) */
.mp-xcompact .mp-tile-body{ padding:12px 14px 14px; gap:3px; }
.mp-xcompact .mp-tile-date{ font-size:13px; }
.mp-xcompact .mp-tile-band{ font-size:18px; min-height:calc(2 * 1.12em); }
.mp-xcompact .mp-tile-venue{ font-size:15px; margin-top:3px; word-break:break-word; }
.mp-xcompact .mp-tile-loc{ font-size:13px; }
.mp-xcompact .mp-tile-tickets{ font-size:11px; padding:3px 8px; }
.mp-xcompact .mp-tile-poster-textcard{ padding:12px 10px; gap:5px; }
.mp-xcompact .mp-tp-date{ font-size:11px; letter-spacing:.12em; }
.mp-xcompact .mp-tp-band{ font-size:16px; }
.mp-xcompact .mp-tp-divider{ width:24px; height:1px; }
.mp-xcompact .mp-tp-venue{ font-size:13px; }
.mp-xcompact .mp-tp-loc{ font-size:11px; }

/* ── FOOTER ────────────────────────────────────────────────────────────── */
.mp-poster-ftr{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid rgba(74,122,191,.22);
  display:flex; align-items:center; justify-content:space-between;
  color:#8aabcf; font-size:18px; letter-spacing:.02em;
}
.mp-poster-ftr-left{ font-weight:600; color:#e4eaf5; }
.mp-poster-ftr-right{ font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:#7c9fff; font-weight:700; }

/* ── EMPTY STATE (no shows this month) ─────────────────────────────────── */
.mp-empty{
  flex:1; display:flex; align-items:center; justify-content:center;
  color:#8aabcf;
  font-size:36px; font-weight:600;
  text-align:center; padding:40px;
}

/* ── ENTRY-POINT BUTTON (on index.html) ────────────────────────────────── */
.btb-monthly-post-btn{
  background:transparent;
  border:1px solid #2a4870;
  color:#7c9fff;
  padding:4px 12px;
  border-radius:6px;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer;
  margin-left:8px;
  transition:all .15s;
  /* v6.5.1-mv1 — also styled as anchor (Monthly View now navigates) */
  display:inline-block;
  text-decoration:none;
  line-height:1.4;
}
a.btb-monthly-post-btn:visited{ color:#7c9fff; }
.btb-monthly-post-btn:hover{
  border-color:#7c9fff; color:#fff; background:rgba(124,159,255,.08);
  text-decoration:none;
}
.btb-monthly-post-btn[disabled]{ opacity:.4; cursor:not-allowed; }

/* ── CAROUSEL CARD (Ship 11.1 Phase 1) ─────────────────────────────────────
 * 1200×1200 square card per show. Poster on the LEFT (maximized to full
 * inner height with 11:17 aspect), show details + brand on the RIGHT.
 * Each card is rendered off-screen at 1:1 and captured by html2canvas.
 */
.mp-carousel-card{
  width:1200px; height:1200px;
  background:
    radial-gradient(900px 600px at 18% -8%, rgba(74,122,191,.22), transparent 60%),
    radial-gradient(700px 500px at 110% 110%, rgba(124,159,255,.14), transparent 60%),
    linear-gradient(180deg, #080d14 0%, #0b1422 100%);
  color:#e4eaf5;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  box-sizing:border-box;
  padding:50px;
  display:flex;
  flex-direction:row;
  gap:40px;
  align-items:stretch;
  position:relative; overflow:hidden;
  margin-bottom:24px;        /* visual separation between stacked cards in the off-screen host */
}
.mp-carousel-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(500px 350px at 95% 8%, rgba(124,159,255,.10), transparent 60%);
  pointer-events:none;
}

/* Poster column — fills the full inner height (1100px). 11:17 aspect
 * means width ≈ 712px, leaving ~348px for the right column. */
.mp-carousel-card .mp-cc-poster{
  flex:0 0 auto;
  height:1100px;
  aspect-ratio:11 / 17;
  background:
    radial-gradient(120% 120% at 50% 50%, #0a1320 0%, #040810 100%);
  border:1px solid #1a3a5f;
  border-radius:14px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 32px rgba(0,0,0,.55);
  position:relative;
}
.mp-carousel-card .mp-cc-poster img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.mp-carousel-card .mp-cc-poster .mp-tile-poster-textcard{
  width:100%; height:100%;
  border-radius:0;
  border:0;
  padding:60px 36px;
  gap:18px;
}
.mp-carousel-card .mp-cc-poster .mp-tp-date{ font-size:30px; }
.mp-carousel-card .mp-cc-poster .mp-tp-band{ font-size:62px; }
.mp-carousel-card .mp-cc-poster .mp-tp-divider{ width:80px; height:3px; }
.mp-carousel-card .mp-cc-poster .mp-tp-venue{ font-size:36px; }
.mp-carousel-card .mp-cc-poster .mp-tp-loc{ font-size:24px; }

/* Details column — 348px wide × 1100 tall, 3 stacked sections. */
.mp-carousel-card .mp-cc-details{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  position:relative;
}

/* Header strip — month label + slide counter */
.mp-carousel-card .mp-cc-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px;
}
.mp-carousel-card .mp-cc-month{
  font-size:24px; font-weight:900; letter-spacing:.18em;
  color:#7c9fff; text-transform:uppercase;
  line-height:1.1;
}
.mp-carousel-card .mp-cc-counter{
  font-size:18px; font-weight:700; letter-spacing:.10em;
  color:#8aabcf;
  border:1px solid rgba(124,159,255,.45);
  border-radius:999px;
  padding:4px 12px;
  white-space:nowrap;
}

/* Body — date / band / venue / loc / time / ticket */
.mp-carousel-card .mp-cc-body{
  flex:1 1 auto;
  display:flex; flex-direction:column;
  justify-content:center;
  padding:30px 0;
  min-width:0;
}
.mp-carousel-card .mp-cc-date{
  font-size:30px; font-weight:800; letter-spacing:.16em;
  color:#7c9fff; text-transform:uppercase;
  line-height:1.15;
  margin-bottom:14px;
}
.mp-carousel-card .mp-cc-band{
  font-size:64px; font-weight:900; letter-spacing:-.015em;
  color:#fff; line-height:1.05;
  word-break:break-word; hyphens:auto;
  margin-bottom:18px;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.mp-carousel-card .mp-cc-divider{
  width:96px; height:3px; background:#4a7abf; border-radius:2px;
  margin-bottom:24px;
}
.mp-carousel-card .mp-cc-venue{
  font-size:34px; font-weight:700; color:#e4eaf5; line-height:1.18;
  word-break:break-word; hyphens:auto;
  margin-bottom:8px;
}
.mp-carousel-card .mp-cc-loc{
  font-size:24px; color:#8aabcf; letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.mp-carousel-card .mp-cc-time{
  font-size:22px; color:#8aabcf;
  margin-bottom:20px;
}
.mp-carousel-card .mp-cc-tickets,
.mp-carousel-card .mp-cc-free{
  align-self:flex-start;
  font-size:18px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase;
  padding:10px 18px;
  border-radius:8px;
}
.mp-carousel-card .mp-cc-tickets{
  background:#4a7abf; color:#fff;
}
.mp-carousel-card .mp-cc-free{
  background:rgba(74,222,128,.14);
  color:#4ade80;
  border:1px solid rgba(74,222,128,.42);
}

/* Footer — brand + url */
.mp-carousel-card .mp-cc-footer{
  border-top:1px solid rgba(74,122,191,.25);
  padding-top:18px;
  display:flex; flex-direction:column; gap:6px;
}
.mp-carousel-card .mp-cc-brand{
  font-size:16px; font-weight:800; letter-spacing:.16em;
  color:#e4eaf5; text-transform:uppercase;
}
.mp-carousel-card .mp-cc-url{
  font-size:18px; font-weight:700; color:#7c9fff;
  letter-spacing:.04em;
}

/* Carousel button styling — distinguish from the primary "Download PNG" */
.mp-btn.mp-btn-carousel{
  background:#7c9fff;
}
.mp-btn.mp-btn-carousel:hover{ background:#9fb8ff; }
.mp-btn.mp-btn-carousel:disabled{ background:#2a4870; cursor:wait; opacity:.7; }

/* Animated GIF button — green to read as "play / live" */
.mp-btn.mp-btn-gif{
  background:#3aae6b;
}
.mp-btn.mp-btn-gif:hover{ background:#48c982; }
.mp-btn.mp-btn-gif:disabled{ background:#1f5f3d; cursor:wait; opacity:.7; }