/* ════════════════════════════════════════════════════════════════════════
   PUBLIC ATTENDEE BOOKING FLOW
   pub-* namespace, built on the violet/glass variables already defined
   in bz_dashboard.css (--biz-violet, --biz-vd, --biz-spring, etc.) so
   this half of the platform feels native, not bolted on.
   ════════════════════════════════════════════════════════════════════════ */

body {
  background: var(--biz-bg) !important;
  color: var(--biz-text) !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Grows to fill any real leftover vertical space in the body's flex
   column, so the shared trademark footer always sits at the genuine
   bottom of the viewport on every public page, never floating
   mid-page on a page whose own content is shorter than the screen
   (e.g. checkout with few tickets, a short event description). */
.biz-content-grow {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.pub-page {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto;
  padding: 48px 24px 80px;
  display: flex; flex-direction: column; gap: 32px;
}

/* ── Flash messages ──────────────────────────────────────────────────── */
.pub-flash-area {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 500; display: flex; flex-direction: column; gap: 8px;
  width: min(480px, 92vw);
}
.pub-flash {
  padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 600;
  background: rgba(20,16,38,0.95); backdrop-filter: blur(16px);
  border: 0.5px solid rgba(255,255,255,0.1); box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.pub-flash--success { border-color: rgba(52,211,153,0.35); color: #34d399; }
.pub-flash--error   { border-color: rgba(248,113,113,0.35); color: #f87171; }
.pub-flash--info     { border-color: rgba(167,139,250,0.35); color: var(--biz-violet); }

/* ── Header ───────────────────────────────────────────────────────────── */
.pub-greeting {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 800; color: var(--biz-violet);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.pub-greeting::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--biz-violet); box-shadow: 0 0 10px rgba(167,139,250,0.8);
  flex-shrink: 0;
}
.pub-headline {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(32px, 5vw, 52px); font-weight: 900;
  letter-spacing: -0.035em; line-height: 0.98; margin: 12px 0 10px;
  background: linear-gradient(135deg, #ffffff 0%, #ede8ff 45%, #a78bfa 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pub-sub { font-size: 15px; color: var(--biz-text2); max-width: 480px; line-height: 1.5; }

/* ── Empty state ──────────────────────────────────────────────────────── */
.pub-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 80px 24px; gap: 10px;
}
.pub-empty-icon {
  width: 64px; height: 64px; border-radius: 18px;
  background: var(--biz-vd); border: 0.5px solid rgba(167,139,250,0.2);
  display: flex; align-items: center; justify-content: center; color: var(--biz-violet);
  margin-bottom: 8px;
}
.pub-empty-icon svg { width: 28px; height: 28px; }
.pub-empty h2 { font-size: 18px; font-weight: 800; color: var(--biz-text); margin: 0; }
.pub-empty p { font-size: 13px; color: var(--biz-text2); margin: 0; }

/* ── Event grid ───────────────────────────────────────────────────────── */
.pub-event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.pub-ev-card {
  display: flex; flex-direction: column;
  border-radius: 22px; overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.1);
  text-decoration: none; color: inherit;
  transition: transform 0.25s var(--biz-spring), border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.pub-ev-card:hover {
  transform: translateY(-4px);
  border-color: rgba(167,139,250,0.35);
  box-shadow: 0 18px 44px rgba(0,0,0,0.35), 0 0 0 1px rgba(167,139,250,0.1);
}

/* Hero */
.pub-ev-hero {
  position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden;
  background: #0a0820;
}
.pub-ev-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; transform: scale(1.02); transition: transform 0.5s ease;
}
.pub-ev-card:hover .pub-ev-hero-img { transform: scale(1.07); }
.pub-ev-hero-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(167,139,250,0.25);
}
.pub-ev-hero-fallback svg { width: 40px; height: 40px; }
.pub-ev-hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(7,6,14,0.92) 100%);
}

.pub-biz-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 50px;
  background: rgba(7,6,14,0.6); backdrop-filter: blur(10px);
  border: 0.5px solid rgba(255,255,255,0.15);
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.9);
}
.pub-biz-tag svg { width: 12px; height: 12px; flex-shrink: 0; }

.pub-ev-hero-content {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
}
.pub-ev-title {
  margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.02em;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.5); line-height: 1.2;
}
.pub-ev-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pub-ev-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 50px;
  background: rgba(255,255,255,0.12); backdrop-filter: blur(10px);
  border: 0.5px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92); font-size: 11.5px; font-weight: 600;
}
.pub-ev-pill svg { width: 11px; height: 11px; flex-shrink: 0; opacity: 0.85; }
.pub-ev-pill--loc { max-width: 160px; min-width: 0; }
.pub-ev-loc-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Body */
.pub-ev-body {
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.pub-ev-desc {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--biz-text2);
}
.pub-ev-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 4px;
}
.pub-ev-price {
  font-size: 14px; font-weight: 800;
  background: linear-gradient(135deg, #c4b5fd, var(--biz-violet));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pub-ev-cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: var(--biz-violet);
}
.pub-ev-cta svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.pub-ev-card:hover .pub-ev-cta svg { transform: translateX(3px); }

.pub-ev-session-tag {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-size: 11px; font-weight: 600; color: rgba(167,139,250,0.8);
  padding: 4px 9px; border-radius: 7px;
  background: var(--biz-vd); border: 0.5px solid rgba(167,139,250,0.18);
}
.pub-ev-session-tag svg { width: 11px; height: 11px; }

@media (max-width: 480px) {
  .pub-page { padding: 36px 16px 60px; }
  .pub-event-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   EVENT DETAIL / TICKET SELECTION, Page 2
   ════════════════════════════════════════════════════════════════════════ */

.pub-ed-hero {
  position: relative; width: 100%; height: 380px;
  background-size: cover; background-position: center; background-color: #0a0820;
}
.pub-ed-hero--noimg { background: linear-gradient(135deg, #1a0f3a 0%, #0a0820 100%); }
.pub-ed-category-badge { top: 20px; left: 20px; }
.pub-ed-hero-actions { top: 20px; right: 20px; }

.pub-tba-callout {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(167,139,250,0.08);
  border: 0.5px solid rgba(167,139,250,0.25);
  animation: pubResultPop 0.4s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
.pub-tba-callout svg { width: 20px; height: 20px; color: #a78bfa; flex-shrink: 0; margin-top: 1px; }
.pub-tba-callout-label { display: block; font-size: 12.5px; font-weight: 800; color: #c4b5fd; margin-bottom: 4px; }
.pub-tba-callout-text { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(237,232,255,0.75); }
.pub-ed-hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(5,4,9,0.35) 40%, rgba(5,4,9,0.7) 68%, rgba(5,4,9,0.98) 100%);
}
.pub-ed-hero-content { position: absolute; bottom: 30px; left: 0; right: 0; padding: 0 24px; z-index: 2; }
.pub-back {
  display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600;
  color: rgba(237,232,255,0.7); text-decoration: none; margin-bottom: 14px;
  transition: color 0.15s ease, transform 0.15s ease;
}
.pub-back:hover { color: var(--biz-text); transform: translateX(-2px); }
.pub-back svg { width: 14px; height: 14px; }
.pub-ed-title {
  margin: 0 0 12px; font-family: 'Cabinet Grotesk', sans-serif;
  font-size: clamp(28px, 4.5vw, 42px); font-weight: 900;
  letter-spacing: -0.03em; line-height: 1.04; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
.pub-biz-tag--hero { position: static; margin-top: 2px; }

@media (max-width: 600px) { .pub-ed-hero { height: 280px; } }

.pub-ed-shell { max-width: 760px; margin: 0 auto; padding: 24px 18px 120px; }

.pub-flash-area--inline { position: static; transform: none; width: 100%; margin-bottom: 16px; }

/* Info bar */
.pub-infobar {
  display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 22px;
  padding: 16px 20px; border-radius: 18px;
  background: rgba(255,255,255,0.04); border: 0.5px solid rgba(167,139,250,0.22);
}
.pub-infobar-item { display: flex; align-items: center; gap: 10px; padding: 4px 18px 4px 0; flex: 1; min-width: 130px; }
.pub-infobar-div { width: 1px; height: 32px; background: rgba(255,255,255,0.08); margin-right: 18px; flex-shrink: 0; }
.pub-infobar-icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: var(--biz-vd); border: 0.5px solid rgba(167,139,250,0.22);
  display: flex; align-items: center; justify-content: center; color: var(--biz-violet);
}
.pub-infobar-icon svg { width: 16px; height: 16px; }
.pub-infobar-icon--live { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.28); }
.pub-infobar-icon--live .pub-card-live-dot-hero { margin: 0; }
/* Confirmed real icon, a slow, continuous rotation, matching the
   "loading recurring symbol" description precisely: a steady, ongoing
   motion representing the event's own genuinely ongoing, no-end-date
   nature, distinct from a fast spinner which would read as active
   loading rather than a stable, continuing state. */
.pub-infobar-recur-icon {
  width: 17px; height: 17px;
  animation: pubInfobarRecurSpin 3.2s linear infinite;
}
@keyframes pubInfobarRecurSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pub-infobar-recur-icon { animation: none; }
}
.pub-infobar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pub-infobar-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--biz-text3); }
.pub-infobar-value { font-size: 13px; font-weight: 600; color: var(--biz-text); white-space: nowrap; }
/* Confirmed real fix, the ongoing event's own real value text
   ("Ongoing, no set end date") is genuinely longer than the other
   values in this bar (a short date, a time range), and the blanket
   nowrap above was forcing it to overflow the card on a narrow
   mobile viewport instead of wrapping cleanly onto a second line.
   Every other value in the bar stays completely unaffected, still a
   single clean line, since none of them are ever this long. */
.pub-infobar-value--wrap { white-space: normal; line-height: 1.35; }
.pub-infobar-value--loc { overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

.pub-badge { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.pub-badge--green { background: rgba(52,211,153,0.12); color: #34d399; border: 0.5px solid rgba(52,211,153,0.25); }
.pub-badge--amber { background: rgba(245,166,35,0.12); color: #f5a623; border: 0.5px solid rgba(245,166,35,0.28); }
.pub-badge--red   { background: rgba(248,113,113,0.12); color: #f87171; border: 0.5px solid rgba(248,113,113,0.25); }

/* Lock banner */
.pub-lock-banner {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 20px; border-radius: 16px;
  background: rgba(245,166,35,0.08); border: 0.5px solid rgba(245,166,35,0.3);
}
.pub-lock-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: rgba(245,166,35,0.16); border: 0.5px solid rgba(245,166,35,0.3);
  display: flex; align-items: center; justify-content: center; color: #f5a623;
}
.pub-lock-icon svg { width: 20px; height: 20px; }
.pub-lock-title { font-weight: 800; font-size: 14px; margin-bottom: 3px; color: #f5a623; }
.pub-lock-sub { font-size: 13px; color: var(--biz-text2); }

/* Generic card used for About / Sponsors */
.pub-card {
  background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 18px; padding: 20px; margin-bottom: 18px;
  animation: pubSectionIn 0.5s cubic-bezier(0.34, 1.15, 0.64, 1) both;
}
@keyframes pubSectionIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.pub-card-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--biz-text2); margin: 0 0 14px; }
.pub-card-title::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--biz-violet); flex-shrink: 0; }
.pub-desc { font-size: 14px; line-height: 1.65; color: var(--biz-text2); }
.pub-desc p { margin: 0 0 10px; } .pub-desc p:last-child { margin-bottom: 0; }
.pub-desc strong { color: var(--biz-text); }

/* Sponsors */
.pub-sponsor-list { display: flex; flex-direction: column; gap: 10px; }
.pub-sponsor-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.025); border: 0.5px solid rgba(255,255,255,0.07); }
.pub-sponsor-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.pub-sponsor-logo { width: 42px; height: 42px; border-radius: 11px; overflow: hidden; background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.09); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pub-sponsor-logo img { width: 100%; height: 100%; object-fit: cover; }
.pub-sponsor-logo--fallback { font-size: 16px; font-weight: 900; color: var(--biz-violet); background: var(--biz-vd); }
.pub-sponsor-name { font-size: 14px; font-weight: 800; color: var(--biz-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-sponsor-role { font-size: 11px; font-weight: 600; color: var(--biz-text2); margin-top: 2px; text-transform: capitalize; }
.pub-sponsor-link { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 9px; background: var(--biz-vd); border: 0.5px solid rgba(167,139,250,0.25); color: var(--biz-violet); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.pub-sponsor-link svg { width: 11px; height: 11px; }

/* Form card */
.pub-form-card {
  background: rgba(255,255,255,0.03); border: 0.5px solid rgba(167,139,250,0.25);
  border-radius: 22px; padding: 22px; box-shadow: 0 16px 40px rgba(0,0,0,0.3);
  animation: pubSectionIn 0.5s cubic-bezier(0.34, 1.15, 0.64, 1) 0.1s both;
}
.pub-form-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 0.5px solid rgba(255,255,255,0.07); }
.pub-form-title { font-family: 'Cabinet Grotesk', sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--biz-text); margin: 0; }
.pub-urgency { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #f5a623; background: rgba(245,166,35,0.1); border: 0.5px solid rgba(245,166,35,0.22); border-radius: 6px; padding: 4px 8px; }
.pub-urgency-dot { width: 6px; height: 6px; border-radius: 50%; background: #f5a623; animation: bizPing 1.8s ease-in-out infinite; }

/* Tickets */
.pub-ticket-list { display: flex; flex-direction: column; }
.pub-ticket { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 0.5px solid rgba(255,255,255,0.06); transition: background 0.25s ease, padding 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), margin 0.3s cubic-bezier(0.34, 1.2, 0.64, 1); }

.pub-package .pub-ticket-info { display: flex; align-items: center; gap: 12px; }
.pub-package-icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px;
  background: rgba(167,139,250,0.1); display: flex; align-items: center; justify-content: center; color: #c4b5fd;
}
.pub-package-icon svg { width: 18px; height: 18px; }
.pub-package-pickup { font-size: 11px; color: var(--biz-text2); margin-top: 3px; font-style: italic; }
.pub-ticket:last-child { border-bottom: 0; }
.pub-ticket.is-selected { background: var(--biz-vg); border-radius: 12px; padding: 14px 10px; margin: 0 -10px; }
.pub-ticket-name { font-size: 15px; font-weight: 700; color: var(--biz-text); margin-bottom: 4px; }
.pub-ticket-meta { display: flex; align-items: center; gap: 8px; }
.pub-ticket-price { font-size: 14px; font-weight: 800; color: var(--biz-violet); }
.pub-ticket-rem { font-size: 11px; font-weight: 600; color: var(--biz-text2); padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.07); }
.pub-ticket-rem--low { color: #f5a623; background: rgba(245,166,35,0.08); border-color: rgba(245,166,35,0.2); }

.pub-donation-wrap { display: flex; align-items: center; margin-top: 10px; background: rgba(0,0,0,0.2); border: 0.5px solid rgba(167,139,250,0.22); border-radius: 10px; overflow: hidden; }
.pub-donation-prefix { padding: 0 10px; font-weight: 700; color: var(--biz-text2); font-size: 14px; border-right: 0.5px solid rgba(167,139,250,0.15); }
.pub-donation-input { flex: 1; background: transparent; border: 0; color: var(--biz-text); padding: 10px 12px; font-size: 14px; outline: none; width: 100%; }

.pub-ticket-qty { position: relative; display: flex; align-items: center; background: rgba(0,0,0,0.2); border: 0.5px solid rgba(167,139,250,0.22); border-radius: 12px; flex-shrink: 0; }
.pub-qty-minus { border-radius: 12px 0 0 12px; }
.pub-qty-plus { border-radius: 0 12px 12px 0; }
.pub-qty-btn { width: 36px; height: 36px; background: transparent; border: 0; color: var(--biz-text2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pub-qty-btn:hover { background: var(--biz-vd); color: var(--biz-violet); }
.pub-qty-btn:active { transform: scale(0.85); }
.pub-qty-btn svg { width: 14px; height: 14px; }
.pub-qty-input { width: 34px; text-align: center; background: transparent; border: 0; color: var(--biz-text); font-size: 15px; font-weight: 800; outline: none; -moz-appearance: textfield; }
.pub-qty-input::-webkit-outer-spin-button, .pub-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Max-per-order dynamic tag, spring in/out, only visible right at the cap */
.pub-qty-max-tag {
  position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 4;
  background: var(--biz-vg); border: 0.5px solid rgba(167,139,250,0.35);
  color: var(--biz-violet); font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  pointer-events: none;
  opacity: 0; transform: translate(-50%, 4px) scale(0.82);
  transition: opacity 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pub-qty-max-tag.is-visible {
  opacity: 1; transform: translate(-50%, 0) scale(1);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-reduced-motion: reduce) {
  .pub-qty-max-tag { transition: opacity 0.15s ease; transform: translate(-50%, 0) scale(1); }
}

/* Category 14, live per-click validation */
.pub-qty-checking { position: relative; }
.pub-qty-checking .pub-qty-input { opacity: 0; }
.pub-qty-checking .pub-qty-btn { pointer-events: none; opacity: 0.5; }
.pub-qty-checking::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid rgba(167,139,250,0.25); border-top-color: var(--biz-violet);
  animation: pub-qty-spin 0.6s linear infinite;
}
@keyframes pub-qty-spin { to { transform: rotate(360deg); } }

.pub-qty-limit-msg {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5;
  background: rgba(248,113,113,0.95); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 6px 11px; border-radius: 8px; white-space: nowrap;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.pub-qty-limit-msg.is-visible { opacity: 1; transform: translateY(0); }
.pub-qty-limit-msg::after {
  content: ""; position: absolute; top: 100%; right: 14px; width: 0; height: 0;
  border: 5px solid transparent; border-top-color: rgba(248,113,113,0.95); border-bottom: 0;
}

/* Summary */
.pub-summary { margin: 14px 0 0; padding: 14px; border-radius: 14px; background: var(--biz-vg); border: 0.5px solid rgba(167,139,250,0.2); }
.pub-summary-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.pub-summary-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--biz-text2); }
.pub-summary-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 800; color: var(--biz-text); padding-top: 10px; border-top: 0.5px solid rgba(255,255,255,0.07); }

.pub-sep { border: 0; border-top: 0.5px solid rgba(255,255,255,0.07); margin: 18px 0; }

/* Details section / inputs (reused for session select too) */
.pub-details-section { display: flex; flex-direction: column; gap: 12px; }
.pub-details-header { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--biz-text2); margin-bottom: 2px; }
.pub-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.pub-label { font-size: 12px; font-weight: 700; color: var(--biz-text2); display: flex; align-items: center; gap: 5px; }
.pub-label svg { width: 13px; height: 13px; color: var(--biz-violet); }
.pub-optional { font-weight: 500; color: var(--biz-text3); font-size: 11px; }
.pub-input {
  background: rgba(0,0,0,0.2); border: 0.5px solid rgba(167,139,250,0.22); border-radius: 12px;
  color: var(--biz-text); padding: 12px 14px; font-size: 14px; font-family: inherit; outline: none;
  width: 100%; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pub-input:focus { border-color: rgba(167,139,250,0.55); box-shadow: 0 0 0 4px rgba(167,139,250,0.1); }
.pub-input::placeholder { color: rgba(237,232,255,0.28); }
.pub-textarea { resize: vertical; min-height: 80px; }
.pub-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(237,232,255,0.5)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 38px;
}
.pub-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .pub-two-col { grid-template-columns: 1fr; } }

.pub-consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin-top: 4px; }
.pub-consent input[type="checkbox"] { width: 18px; height: 18px; border-radius: 5px; border: 0.5px solid rgba(167,139,250,0.35); background: rgba(0,0,0,0.2); flex-shrink: 0; margin-top: 1px; accent-color: var(--biz-violet); cursor: pointer; }
.pub-consent span { font-size: 12px; color: var(--biz-text2); line-height: 1.5; }

.pub-submit {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 20px; border-radius: 14px; border: 0; font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit; margin-top: 8px;
  background: linear-gradient(180deg, #c4b5fd 0%, var(--biz-violet) 100%); color: #1e0a4a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 20px rgba(167,139,250,0.35);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.pub-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 28px rgba(167,139,250,0.5); }
.pub-submit:disabled { opacity: 0.5; cursor: not-allowed; background: rgba(255,255,255,0.08); color: var(--biz-text2); box-shadow: none; }
.pub-submit svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.pub-submit:hover:not(:disabled) svg { transform: translateX(3px); }

/* Sticky bar (mobile) */
.pub-sticky {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: linear-gradient(180deg, rgba(7,6,14,0.8), rgba(7,6,14,0.97));
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 0.5px solid rgba(255,255,255,0.07);
  padding: 14px 20px; padding-bottom: calc(14px + env(safe-area-inset-bottom));
  display: none;
}
.pub-sticky-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pub-sticky-total { font-size: 18px; font-weight: 800; color: var(--biz-text); }
.pub-sticky-btn {
  min-width: 140px; padding: 12px 22px; border-radius: 12px; border: 0; font-size: 14px; font-weight: 700; cursor: pointer;
  background: linear-gradient(180deg, #c4b5fd 0%, var(--biz-violet) 100%); color: #1e0a4a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 14px rgba(167,139,250,0.3);
}
.pub-sticky-btn:disabled { opacity: 0.5; cursor: not-allowed; background: rgba(255,255,255,0.06); color: var(--biz-text2); box-shadow: none; }

@media (max-width: 700px) {
  .pub-sticky { display: block; }
}

/* ════════════════════════════════════════════════════════════════════════
   UNIFIED EVENT CARD, full + minimized states, shared markup
   (Category 1 fix: real media carousel + minimize/full logic)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Carousel ─────────────────────────────────────────────────────────── */
.pub-carousel { position: absolute; inset: 0; overflow: hidden; background: #0a0820; }
.pub-carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.pub-carousel-slide.is-active { opacity: 1; }
.pub-carousel-media {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block; transform: scale(1.02); transition: transform 6s ease;
}
.pub-carousel-slide.is-active .pub-carousel-media { transform: scale(1.08); } /* subtle Ken Burns */
.pub-carousel-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; }
.pub-carousel-dot { width: 22px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.28); overflow: hidden; position: relative; cursor: pointer; transition: background 0.2s ease; }
.pub-carousel-dot.is-active { background: rgba(255,255,255,0.4); }
.pub-carousel-dot-fill { position: absolute; inset: 0; width: 0; background: #fff; border-radius: 2px; }

/* ── Card shell ───────────────────────────────────────────────────────── */
.pub-card-ev {
  border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  border: 0.5px solid rgba(255,255,255,0.09);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: box-shadow 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.pub-card-ev:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 56px -18px rgba(107,70,193,0.4), 0 0 0 1px rgba(167,139,250,0.1) inset;
  border-color: rgba(167,139,250,0.28);
}
@media (prefers-reduced-motion: reduce) { .pub-card-ev:hover { transform: none; } }
.pub-card-body { padding: 16px; display: flex; flex-direction: column; }

/* Hero */
.pub-card-hero { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #0a0820; }
.pub-card-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.pub-card-ev:hover .pub-card-hero-img { transform: scale(1.04); }
.pub-card-hero-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(167,139,250,0.25); }
.pub-card-hero-fallback svg { width: 40px; height: 40px; }
.pub-card-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,4,9,0.08) 0%, rgba(5,4,9,0.1) 32%, rgba(5,4,9,0.58) 68%, rgba(5,4,9,0.95) 100%); pointer-events: none; z-index: 3; }
.pub-card-hero-content { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 4; display: flex; flex-direction: column; gap: 10px; }
.pub-card-title-hero {
  margin: 0; font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.55); line-height: 1.12;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pub-card-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pub-card-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 50px; background: rgba(10,8,20,0.5); backdrop-filter: blur(16px); border: 0.5px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.92); font-size: 11.5px; font-weight: 700; }
.pub-card-pill svg { width: 11px; height: 11px; flex-shrink: 0; opacity: 0.9; }
.pub-card-pill--loc { max-width: 220px; min-width: 0; }
.pub-card-loc-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Confirmed signature element, the hero pill's own visual language
   distinguishes the three temporal types at a glance, before the
   attendee even reads the text: a fixed date stays the plain neutral
   pill above; an ongoing/no-end recurring event gets a genuine
   breathing live dot; a set-days recurring event gets a violet tint
   signalling "a short run of real dates", not an open-ended series. */
.pub-card-pill--recurring { border-color: rgba(167,139,250,0.3); background: rgba(20,14,40,0.6); }
/* Confirmed real fix, the dot's actual visible styling is now
   genuinely universal to the element itself, not scoped to one
   specific parent. It was previously only ever defined nested under
   .pub-card-pill--recurring, meaning it rendered as literally nothing
   (no size, no color) anywhere else this same element got reused,
   which is exactly the empty-circle bug reported on the info bar's
   "Ongoing" indicator. */
.pub-card-live-dot-hero {
  width: 6px; height: 6px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 0 0 rgba(52,211,153,0.6);
  animation: pubLiveDotPulse 2s ease-out infinite;
  flex-shrink: 0; margin-right: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .pub-card-live-dot-hero { animation: none; }
}
.pub-card-pill--datestrip { gap: 7px; }
.pub-datestrip-nodes { display: flex; align-items: center; gap: 2px; }
.pub-datestrip-node { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.25); flex-shrink: 0; }
.pub-datestrip-node.is-active { background: #c4b5fd; box-shadow: 0 0 5px rgba(167,139,250,0.7); }
.pub-datestrip-track { width: 10px; height: 1px; background: rgba(255,255,255,0.2); flex-shrink: 0; }

/* Biz tag overrides z-index to sit above shade */
.pub-biz-tag { z-index: 4; }

/* ── Minimized summary row ───────────────────────────────────────────── */
.pub-card-min-row { display: flex; flex-direction: column; gap: 10px; }
.pub-card-min-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--biz-text2); }
.pub-card-min-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pub-card-price { font-size: 14px; font-weight: 800; background: linear-gradient(135deg, #c4b5fd, var(--biz-violet)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pub-expand-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--biz-violet); font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0; }
.pub-expand-btn svg { width: 13px; height: 13px; transition: transform 0.2s ease; }

/* Full content, hidden unless full mode or expanded */
.pub-card-full { display: none; flex-direction: column; gap: 18px; padding-top: 0; }
.pub-card-ev:not(.is-minimized) .pub-card-full { display: flex; padding-top: 4px; }
.pub-card-ev.is-minimized.is-expanded .pub-card-full { display: flex; padding-top: 16px; }
.pub-card-ev.is-minimized.is-expanded .pub-card-min-row { display: none; }

.pub-card-stats { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; padding: 14px; border-radius: 16px; background: var(--biz-vg); border: 0.5px solid rgba(167,139,250,0.15); }
.pub-card-stat { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px; border-right: 1px solid rgba(255,255,255,0.06); min-width: 0; }
.pub-card-stat:last-child { border-right: 0; }
.pub-card-stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--biz-text3); }
.pub-card-stat-value { font-size: 16px; font-weight: 800; color: var(--biz-text); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pub-card-stat-sub { font-size: 11px; color: var(--biz-text2); }
.pub-card-stat--price .pub-card-stat-value { font-size: 18px; background: linear-gradient(135deg, #c4b5fd, var(--biz-violet)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Redesigned recurring-dates tile, replaces the old pill+floating
   panel that sat over the hero photo, crowding it. Now a genuine wide
   stat tile in the body's normal flow: the same visual family as its
   neighbours at rest, but styled as a real pressable control (border
   glow + lift on hover, scale on press) since it's the one tile here
   that actually does something. The chevron rotates open exactly like
   the read-more affordance elsewhere on the card, so the interaction
   language stays consistent across the whole component. ── */
.pub-card-stat--dates {
  font-family: inherit; text-align: left; cursor: pointer;
  border: none; background: transparent; border-right: 1px solid rgba(255,255,255,0.06);
  transition: background 0.2s ease;
  border-radius: 10px;
}
.pub-card-stat--dates:not(:disabled):hover { background: rgba(167,139,250,0.08); }
.pub-card-stat--dates:not(:disabled):active { transform: scale(0.98); }
.pub-card-stat--dates-single { cursor: default; }
.pub-card-stat--dates-single:hover { background: transparent; }
.pub-card-stat-sub--expand { display: inline-flex; align-items: center; gap: 3px; color: var(--biz-violet); font-weight: 600; }
.pub-card-stat--dates .pub-card-dates-chevron {
  width: 9px; height: 9px; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pub-card-stat--dates.is-active .pub-card-dates-chevron { transform: rotate(180deg); }

/* Signature touch, the Ongoing / no-end-date state gets a small
   live dot rather than reading as identical to any other static
   stat. It encodes something true (this genuinely never stops
   running) rather than decorating, the one deliberate bit of motion
   on this whole card, everything else here stays still by design. ── */
.pub-card-stat--live .pub-card-stat-value { display: inline-flex; align-items: center; gap: 6px; }
.pub-card-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #30d158;
  box-shadow: 0 0 0 0 rgba(48,209,88,0.5);
  animation: pubLiveDotPulse 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes pubLiveDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(48,209,88,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(48,209,88,0); }
  100% { box-shadow: 0 0 0 0 rgba(48,209,88,0); }
}
@media (prefers-reduced-motion: reduce) {
  .pub-card-live-dot { animation: none; }
}

/* ── The date list itself now lives inline in the card's own body
   flow (below the stats grid), replacing the old absolutely
   positioned panel that floated over the hero photo and crowded its
   content. Same visual treatment, genuinely different placement. ── */
.pub-card-dates-panel {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, margin 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.pub-card-dates-panel.is-open { max-height: 400px; opacity: 1; }
.pub-card-dates-panel-inner {
  margin-top: 8px; padding: 10px 14px; border-radius: 14px;
  background: rgba(0, 0, 0, 0.22); backdrop-filter: blur(10px);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  max-height: 220px; overflow-y: auto;
}
.pub-card-dates-panel-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.92);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
}
.pub-card-dates-panel-row:last-child { border-bottom: none; }
.pub-card-dates-panel-date { font-weight: 700; font-variant-numeric: tabular-nums; }
.pub-card-dates-panel-time { color: rgba(255, 255, 255, 0.6); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.pub-card-section-title { margin: 0 0 10px; display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--biz-text2); }
.pub-card-section-title::before { content: ''; width: 3px; height: 11px; border-radius: 2px; background: var(--biz-violet); flex-shrink: 0; }
.pub-card-overview { font-size: 14px; line-height: 1.55; color: var(--biz-text2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pub-card-overview.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; }
.pub-read-more { display: none; align-items: center; gap: 5px; margin-top: 8px; background: none; border: 0; color: var(--biz-violet); font-size: 13px; font-weight: 700; cursor: pointer; }
.pub-read-more svg { width: 13px; height: 13px; transition: transform 0.2s ease; }

/* Good to know */
.pub-gtk-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pub-gtk-row { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 0.5px solid rgba(255,255,255,0.05); }
.pub-gtk-row:last-child { border-bottom: 0; }
.pub-gtk-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--biz-vd); border: 0.5px solid rgba(167,139,250,0.2); display: flex; align-items: center; justify-content: center; color: var(--biz-violet); flex-shrink: 0; }
.pub-gtk-icon svg { width: 16px; height: 16px; }
.pub-gtk-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pub-gtk-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--biz-text3); }
.pub-gtk-value { font-size: 13px; font-weight: 600; color: var(--biz-text); }

/* Location map preview */
.pub-map-preview { position: relative; width: 100%; height: 180px; border-radius: 14px; overflow: hidden; border: 0.5px solid rgba(167,139,250,0.2); background: #0a0820; cursor: pointer; }
.pub-map-leaflet { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pub-map-overlay-bottom { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(7,6,14,0.8); backdrop-filter: blur(16px); border: 0.5px solid rgba(255,255,255,0.1); }
.pub-map-address { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.pub-map-address svg { width: 14px; height: 14px; color: var(--biz-violet); flex-shrink: 0; }
.pub-map-address span { font-size: 12px; font-weight: 600; color: var(--biz-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-map-cta { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--biz-violet); flex-shrink: 0; }
.pub-map-cta svg { width: 12px; height: 12px; }
.pub-map-fallback { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--biz-vg); border: 0.5px solid rgba(167,139,250,0.2); cursor: pointer; text-align: left; font-family: inherit; color: inherit; }
.pub-map-fallback-pin { width: 44px; height: 44px; border-radius: 12px; background: var(--biz-vd); border: 0.5px solid rgba(167,139,250,0.3); display: flex; align-items: center; justify-content: center; color: var(--biz-violet); flex-shrink: 0; }
.pub-map-fallback-pin svg { width: 20px; height: 20px; }
.pub-map-fallback-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.pub-map-fallback-label { font-size: 13px; font-weight: 600; color: var(--biz-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-map-fallback-cta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--biz-violet); }
.pub-map-fallback-cta svg { width: 11px; height: 11px; }

.pub-map-pin-wrap { position: relative; width: 36px; height: 36px; }
.pub-map-pin { position: absolute; inset: 0; background: radial-gradient(circle at 35% 30%, #c4b5fd 0%, var(--biz-violet) 60%, #7c3aed 100%); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 3px solid rgba(255,255,255,0.95); box-shadow: 0 4px 16px rgba(167,139,250,0.5); }
.pub-map-pin::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); width: 8px; height: 8px; background: #fff; border-radius: 50%; }
.pub-map-pin-pulse { position: absolute; inset: 0; border-radius: 50%; background: rgba(167,139,250,0.4); animation: pubMapPulse 2.2s ease-out infinite; z-index: -1; }
@keyframes pubMapPulse { 0% { transform: scale(0.8); opacity: 0.7; } 100% { transform: scale(2.4); opacity: 0; } }

/* Map chooser modal */
.pub-modal {
  position: fixed; inset: 0; z-index: 600;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
}
.pub-modal.is-open {
  opacity: 1; visibility: visible;
}
/* The flip-managed modals (business preview, and the four pass.html
   modals, terms, refund, reschedule, negotiation) animate entirely
   via JS on their own card element, the wrapper itself needs to stay
   a plain instant show/hide, otherwise removing is-open triggers a
   SECOND, redundant fade+transform-reset on the wrapper right as the
   card's own JS animation finishes, causing a visible flicker/snap. */
.pub-modal.pub-biz-modal, .pub-modal.pub-flip-modal {
  transition: none;
}
.pub-modal.pub-biz-modal .pub-modal-card, .pub-modal.pub-flip-modal .pub-modal-card {
  transition: none;
  transform: none;
}
.pub-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.pub-modal-card {
  position: relative; max-width: 420px; width: 100%; margin: 0;
  background: rgba(20,16,38,0.97); border: 0.5px solid rgba(167,139,250,0.28);
  border-radius: 20px; box-shadow: 0 28px 70px rgba(0,0,0,0.6); padding: 20px;
  z-index: 1;
  transform: scale(0.9) translateY(14px);
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pub-modal.is-open .pub-modal-card {
  transform: scale(1) translateY(0);
}
.pub-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.pub-modal-title { font-size: 17px; font-weight: 800; color: var(--biz-text); }
.pub-modal-sub { font-size: 12px; color: var(--biz-text2); margin-top: 4px; }
.pub-modal-close { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.05); border: 0; color: var(--biz-text2); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.pub-modal-close svg { width: 13px; height: 13px; }
.pub-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pub-map-app-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 12px; font-size: 13.5px; font-weight: 700; text-decoration: none; border: 0.5px solid rgba(255,255,255,0.1); }
.pub-map-app-btn svg { width: 17px; height: 17px; }
.pub-map-app-btn--apple { background: linear-gradient(180deg, #f5f5f7, #d8d8dc); color: #000; }
.pub-map-app-btn--google { background: rgba(255,255,255,0.06); color: var(--biz-text); }

/* Card actions + status strip */
.pub-card-actions { display: flex; gap: 8px; margin-top: 6px; padding-top: 16px; border-top: 0.5px solid rgba(255,255,255,0.07); }
.pub-card-cta { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: 14px; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; border: 0.5px solid transparent; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease; }
.pub-card-cta svg { width: 15px; height: 15px; }
.pub-card-cta--primary { background: linear-gradient(180deg, #c4b5fd, var(--biz-violet)); color: #1e0a4a; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 6px 20px rgba(167,139,250,0.4); }
.pub-card-cta--primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 26px rgba(167,139,250,0.5); }
.pub-card-cta--primary:active { transform: translateY(0) scale(0.98); }
.pub-card-cta--ghost { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: var(--biz-text2); }
.pub-card-cta--locked {
  background: rgba(245, 166, 35, 0.08); border-color: rgba(245, 166, 35, 0.25); color: #f5a623;
  cursor: default; pointer-events: none;
}
.pub-card-cta.is-disabled { opacity: 0.5; pointer-events: none; }

/* Action dock, the CTA + status strip read as one persistent
   action zone anchoring the card's base, set apart from the content
   above it with a hairline divider (on .pub-card-actions above) and
   a faint lift, rather than just floating at the end of a long flex
   column. This is the card's one deliberate structural signature:
   everything above is information to read, this is the one place
   that acts on it. ── */

.pub-status-strip {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--biz-text2);
  text-align: center; padding: 10px 12px; border-radius: 12px;
  background: rgba(167,139,250,0.05);
  border: 0.5px solid rgba(167,139,250,0.16);
}
.pub-status-strip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(167,139,250,0.6); flex-shrink: 0;
}

/* ── Layout: grid (minimized, 2+) vs single (full, exactly 1) ────────── */
/* Desktop sizing fix: cap individual card width and center the grid so
   2-3 cards don't stretch to oversized widths on wide viewports. */
.pub-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 400px)); justify-content: center; gap: 20px; }
.pub-card-single { max-width: 640px; margin: 0 auto; }

@media (max-width: 480px) {
  .pub-card-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   FOLLOW-UP FIXES, persistent toggle, spring expand panel, page loader,
   grid stretch fix, responsive tuning
   ════════════════════════════════════════════════════════════════════════ */

/* ── Persistent toggle row (replaces the vanishing min-row button) ──── */
.pub-card-min-row {
  margin-bottom: 10px;
  /* Reserves the same vertical space whether the description is short,
     long, or entirely absent, this, not align-items, is what actually
     keeps sibling cards the same height in their minimized state; the
     grid's align-items: start above stays exactly as it is, since that
     solves a genuinely different problem (expansion not dragging
     neighbours taller). */
  min-height: 60px;
}
.pub-card-min-desc {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--biz-text2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.pub-toggle-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 14px; margin-bottom: 4px;
  border-radius: 14px; border: 0.5px solid rgba(167,139,250,0.2);
  background: var(--biz-vg); cursor: pointer; font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pub-toggle-row:hover { background: rgba(167,139,250,0.1); border-color: rgba(167,139,250,0.32); }
.pub-toggle-right { display: inline-flex; align-items: center; gap: 6px; }
.pub-expand-label { font-size: 12.5px; font-weight: 700; color: var(--biz-violet); white-space: nowrap; }
.pub-toggle-chevron { width: 14px; height: 14px; color: var(--biz-violet); flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ── Spring height animation for the expandable panel ────────────────── */
/* Two-layer technique: the OUTER clipping wrapper just gets a smooth
   decelerating reveal (overshoot on max-height is invisible anyway,
   since content can't render taller than its own natural height, that
   was the actual cause of the "just comes out" flat feel). The genuine
   bounce instead lives on the INNER content via transform+opacity,
   which has no such ceiling, so the overshoot is real and visible.
   A short delay on the inner layer makes the container lead and the
   content follow, which is what reads as "fluid" rather than instant. */
.pub-card-full-wrap {
  max-height: 0; overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.32, 0.72, 0, 1); /* Apple's standard ease-out deceleration */
}
.pub-card-ev:not(.is-minimized) .pub-card-full-wrap { max-height: none; } /* single full-event mode: never clamp */

.pub-card-full {
  display: flex; flex-direction: column; gap: 18px; padding-top: 4px;
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pub-card-ev.is-expanded .pub-card-full {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.45s ease 0.1s, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
}
.pub-card-ev:not(.is-minimized) .pub-card-full {
  opacity: 1; transform: none; transition: none; /* single full-event mode: no animation needed, just shown */
}

/* Grid stretch fix, each card sized to its own content, not the
   tallest sibling in its row, so expanding one card never visually
   drags its neighbor along with it. ───────────────────────────────── */
.pub-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
  gap: 20px;
  max-width: 920px;
  margin: 0 auto;
}

/* ── Page loader (violet recolor of the business dashboard's pattern) ── */
.pub-page-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: radial-gradient(1200px 700px at 50% 40%, rgba(124,58,237,0.22), rgba(7,6,14,0.96));
  backdrop-filter: blur(10px);
  opacity: 1; visibility: visible;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.pub-page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.pub-loader-wrap { position: relative; width: 170px; height: 170px; display: grid; place-items: center; }
.pub-loader-logo { width: 74px; height: 74px; object-fit: contain; border-radius: 16px; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.55)); }
.pub-loader-ring {
  position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.08);
  background: conic-gradient(rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 220deg, rgba(196,181,253,0.95) 260deg, rgba(167,139,250,0.85) 290deg, rgba(255,255,255,0) 330deg, rgba(255,255,255,0) 360deg);
  -webkit-mask: radial-gradient(transparent 58%, #000 60%);
  mask: radial-gradient(transparent 58%, #000 60%);
  filter: drop-shadow(0 0 14px rgba(167,139,250,0.35));
  animation: pubRingSpin 0.9s linear infinite;
}
.pub-loader-wrap::before {
  content: ''; position: absolute; inset: -18px; border-radius: 999px;
  background: radial-gradient(circle, rgba(167,139,250,0.18), transparent 58%);
  filter: blur(8px); animation: pubGlowPulse 1.6s ease-in-out infinite;
}
.pub-loader-text { position: absolute; bottom: -30px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(237,232,255,0.75); }
@keyframes pubRingSpin { to { transform: rotate(360deg); } }
@keyframes pubGlowPulse { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) {
  .pub-loader-ring, .pub-loader-wrap::before { animation: none; }
}

/* ── Spring show/hide for event_detail's live ticket summary ───────── */
/* Same two-layer technique as the event card panel above, smooth
   deceleration on the clipping wrapper, genuine visible bounce on the
   inner content via transform+opacity with a slight delay. */
.pub-summary-wrap {
  max-height: 0; overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}
.pub-summary {
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.pub-summary-wrap.is-open {
  max-height: 400px; margin-top: 14px;
}
.pub-summary-wrap.is-open .pub-summary {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.4s ease 0.08s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s;
}

/* Responsive tuning, fluid between phone/tablet/desktop instead of
   fixed pixel caps that look fine at one width and broken at another. ── */
@media (min-width: 481px) and (max-width: 900px) {
  .pub-page { padding: 40px 28px 70px; }
  .pub-card-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: 100%; }
}
@media (max-width: 480px) {
  .pub-card-grid { grid-template-columns: 1fr; max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   DISCOUNT / PROMO CODE PAGE, Page 3
   ════════════════════════════════════════════════════════════════════════ */

.pub-dc-shell { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 18px 80px; gap: 20px; }
.pub-dc-shell .pub-back { align-self: flex-start; max-width: 480px; width: 100%; margin: 0 auto; }

.pub-dc-card {
  width: 100%; max-width: 480px;
  background: rgba(255,255,255,0.03); border: 0.5px solid rgba(167,139,250,0.28);
  border-radius: 24px; padding: 32px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  display: flex; flex-direction: column; gap: 0;
}

.pub-dc-icon-wrap {
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--biz-vd); border: 0.5px solid rgba(167,139,250,0.3);
  display: flex; align-items: center; justify-content: center; color: var(--biz-violet);
  margin-bottom: 18px; box-shadow: 0 4px 16px rgba(167,139,250,0.2);
}
.pub-dc-icon-wrap svg { width: 24px; height: 24px; }

.pub-dc-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--biz-text); margin: 0 0 8px; }
.pub-dc-sub { font-size: 14px; color: var(--biz-text2); line-height: 1.55; margin: 0 0 22px; }

.pub-dc-info-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.07);
  color: var(--biz-text2); font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: background 0.2s ease, border-color 0.2s ease;
}
.pub-dc-info-toggle:hover { background: var(--biz-vg); border-color: rgba(167,139,250,0.2); color: var(--biz-text); }
.pub-dc-info-toggle-left { display: flex; align-items: center; gap: 8px; }
.pub-dc-info-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--biz-violet); }
.pub-dc-info-icon svg { width: 16px; height: 16px; }
.pub-dc-chevron { color: var(--biz-text3); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); display: flex; }
.pub-dc-chevron svg { width: 16px; height: 16px; }

.pub-dc-info-box-wrap { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
.pub-dc-info-box-wrap.is-open { max-height: 120px; margin-bottom: 6px; }
.pub-dc-info-box { padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--biz-text2); margin: 0; border: 0.5px solid rgba(255,255,255,0.06); border-top: 0; border-radius: 0 0 12px 12px; background: rgba(0,0,0,0.15); }

.pub-dc-form { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }

.pub-dc-input-wrap {
  display: flex; align-items: center; background: rgba(0,0,0,0.25);
  border: 0.5px solid rgba(167,139,250,0.22); border-radius: 14px; overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pub-dc-input-wrap:focus-within { border-color: rgba(167,139,250,0.6); box-shadow: 0 0 0 4px rgba(167,139,250,0.1); }
.pub-dc-input-wrap.has-value { border-color: rgba(167,139,250,0.45); }
.pub-dc-input-icon { padding: 0 12px; color: var(--biz-text3); display: flex; flex-shrink: 0; }
.pub-dc-input-icon svg { width: 16px; height: 16px; }
.pub-dc-input { flex: 1; background: transparent; border: 0; color: var(--biz-text); font-size: 18px; font-weight: 800; letter-spacing: 0.12em; padding: 14px 0; outline: none; font-family: inherit; min-width: 0; }
.pub-dc-input::placeholder { color: rgba(237,232,255,0.25); font-weight: 600; letter-spacing: 0.05em; font-size: 15px; }
.pub-dc-input-clear { padding: 0 14px; color: var(--biz-text3); cursor: pointer; display: flex; align-items: center; flex-shrink: 0; transition: color 0.15s ease; }
.pub-dc-input-clear:hover { color: var(--biz-text); }
.pub-dc-input-clear svg { width: 16px; height: 16px; }

@keyframes pubDcShake {
  0% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } 100% { transform: translateX(0); }
}
.pub-dc-input-wrap.is-shaking { animation: pubDcShake 0.4s ease; border-color: rgba(248,113,113,0.55); }

.pub-dc-actions { display: flex; flex-direction: column; gap: 10px; }
.pub-dc-btn-primary {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 20px; border-radius: 14px; border: 0; font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  background: linear-gradient(180deg, #c4b5fd 0%, var(--biz-violet) 100%); color: #1e0a4a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 20px rgba(167,139,250,0.35);
  transition: all 0.2s ease;
}
.pub-dc-btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 28px rgba(167,139,250,0.5); }
.pub-dc-btn-primary svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.pub-dc-btn-primary:hover svg { transform: translateX(3px); }

.pub-dc-btn-ghost {
  width: 100%; padding: 13px 20px; border-radius: 14px; border: 0.5px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03); color: var(--biz-text2); font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all 0.2s ease; letter-spacing: -0.01em;
}
.pub-dc-btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: var(--biz-text); }

@media (max-width: 480px) {
  .pub-dc-card { padding: 24px 18px; border-radius: 20px; }
  .pub-dc-title { font-size: 20px; }
}

/* ════════════════════════════════════════════════════════════════════════
   CHECKOUT PAGE, Page 4
   ════════════════════════════════════════════════════════════════════════ */

.pub-pr-timer-bar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6,5,12,0.75); backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 0.5px solid rgba(167,139,250,0.18); padding: 13px 24px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.pub-pr-timer-bar.is-urgent { background: rgba(40,20,5,0.92); border-color: rgba(245,166,35,0.3); }
.pub-pr-timer-bar.is-expired { background: rgba(40,5,5,0.92); border-color: rgba(248,113,113,0.3); }
.pub-pr-timer-inner { max-width: 1060px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pub-pr-timer-left { display: flex; align-items: center; gap: 8px; }
.pub-pr-timer-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; animation: bizPing 1.8s ease-in-out infinite; flex-shrink: 0; }
.pub-pr-timer-bar.is-urgent .pub-pr-timer-dot { background: #f5a623; }
.pub-pr-timer-bar.is-expired .pub-pr-timer-dot { background: #f87171; animation: none; }
.pub-pr-timer-label { font-size: 13px; font-weight: 600; color: var(--biz-text); }
.pub-pr-timer-count { display: flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.pub-pr-timer-num { font-size: 20px; font-weight: 900; color: var(--biz-text); letter-spacing: -0.02em; min-width: 26px; text-align: center; }
.pub-pr-timer-bar.is-urgent .pub-pr-timer-num { color: #f5a623; }
.pub-pr-timer-bar.is-expired .pub-pr-timer-num { color: #f87171; }
.pub-pr-timer-colon { font-size: 20px; font-weight: 900; color: var(--biz-text3); animation: pubColonBlink 1s step-end infinite; }
@keyframes pubColonBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

.pub-pr-shell { max-width: 1060px; margin: 0 auto; padding: 24px 18px 80px; display: flex; flex-direction: column; gap: 20px; }
.pub-pr-grid { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: start; }
@media (max-width: 820px) { .pub-pr-grid { grid-template-columns: 1fr; } .pub-pr-right { order: -1; } }

.pub-pr-ticket-list { display: flex; flex-direction: column; border: 0.5px solid rgba(167,139,250,0.16); border-radius: 16px; overflow: hidden; margin: 10px 0 18px; }
.pub-pr-ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: rgba(255,255,255,0.02); border-bottom: 0.5px solid rgba(255,255,255,0.04); }
.pub-pr-ticket-row:last-child { border-bottom: 0; }
.pub-pr-ticket-left { display: flex; align-items: center; gap: 12px; }
.pub-pr-ticket-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--biz-vd); border: 0.5px solid rgba(167,139,250,0.18); display: flex; align-items: center; justify-content: center; color: var(--biz-violet); flex-shrink: 0; }
.pub-pr-ticket-icon svg { width: 16px; height: 16px; }
.pub-pr-ticket-name { font-size: 14px; font-weight: 700; color: var(--biz-text); margin-bottom: 2px; }
.pub-pr-ticket-meta { font-size: 11px; color: var(--biz-text2); font-weight: 500; }
.pub-pr-ticket-price { font-size: 15px; font-weight: 800; color: var(--biz-text); white-space: nowrap; }

.pub-pr-breakdown-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.07); color: var(--biz-text2); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background 0.2s ease, border-color 0.2s ease;
}
.pub-pr-breakdown-toggle:hover { background: var(--biz-vg); border-color: rgba(167,139,250,0.2); color: var(--biz-text); }
.pub-toggle-chevron.is-open { transform: rotate(180deg); }

/* Same two-layer fluid spring technique as the event card panel */
.pub-pr-breakdown-wrap { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.32, 0.72, 0, 1); }
.pub-pr-breakdown-wrap.is-open { max-height: 300px; }
.pub-pr-breakdown-panel {
  opacity: 0; transform: translateY(-8px) scale(0.97);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px; background: rgba(0,0,0,0.15); margin-top: 8px;
}
.pub-pr-breakdown-wrap.is-open .pub-pr-breakdown-panel {
  opacity: 1; transform: translateY(0) scale(1);
  transition: opacity 0.4s ease 0.06s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.06s;
}
.pub-pr-bd-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; font-size: 13px; color: var(--biz-text2); border-bottom: 0.5px solid rgba(255,255,255,0.04); }
.pub-pr-bd-row:last-child { border-bottom: 0; }
.pub-pr-bd-row--green span:last-child { color: #34d399; font-weight: 700; }
.pub-pr-bd-total { font-size: 15px; font-weight: 800; color: var(--biz-text); background: var(--biz-vg); padding: 14px 16px; border-radius: 0 0 12px 12px; }

.pub-pr-package-notice {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px; padding: 10px 13px; border-radius: 10px;
  background: rgba(245,166,35,0.06); border: 0.5px solid rgba(245,166,35,0.2);
  font-size: 12px; color: #d9a441; line-height: 1.45;
}
.pub-pr-package-notice svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }

.pub-pr-event-title { font-family: 'Cabinet Grotesk', sans-serif; font-size: 18px; font-weight: 800; color: var(--biz-text); margin: 6px 0 10px; }
.pub-pr-event-meta { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--biz-text2); margin-bottom: 6px; }
.pub-pr-event-meta svg { width: 13px; height: 13px; color: var(--biz-violet); flex-shrink: 0; }
.pub-pr-ref-tag { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 6px; background: var(--biz-vd); border: 0.5px solid rgba(167,139,250,0.2); font-size: 11px; font-weight: 700; color: var(--biz-violet); }

.pub-pr-pay-card {
  background: rgba(255,255,255,0.03); border: 0.5px solid rgba(167,139,250,0.28); border-radius: 22px;
  padding: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); position: sticky; top: 80px;
  display: flex; flex-direction: column; gap: 16px;
}
.pub-pr-pay-total-wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pub-pr-pay-total-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--biz-text2); }
.pub-pr-pay-total { font-family: 'Cabinet Grotesk', sans-serif; font-size: 32px; font-weight: 900; color: var(--biz-text); letter-spacing: -0.02em; }
.pub-pr-pay-divider { height: 1px; background: rgba(255,255,255,0.06); }

.pub-pr-pay-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-radius: 14px; border: 0; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.15s ease, color 0.15s ease; }
.pub-pr-pay-btn--primary { background: linear-gradient(180deg, #c4b5fd, var(--biz-violet)); color: #1e0a4a; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 24px rgba(167,139,250,0.4); }
.pub-pr-pay-btn--primary:hover { transform: translateY(-2px); }
.pub-pr-pay-btn--primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.pub-pr-pay-btn--cash { background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.1); color: var(--biz-text2); }
.pub-pr-pay-btn--cash:hover { background: rgba(255,255,255,0.07); color: var(--biz-text); }
.pub-pr-pay-btn-content { display: flex; align-items: center; gap: 8px; }
.pub-pr-pay-btn-content svg { width: 17px; height: 17px; }
.pub-pr-pay-btn-amount { font-size: 16px; font-weight: 900; opacity: 0.85; }

.pub-pr-pay-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.pub-pr-pay-or span:first-child, .pub-pr-pay-or span:last-child { height: 1px; background: rgba(255,255,255,0.06); display: block; }
.pub-pr-pay-or-text { font-size: 11px; font-weight: 600; color: var(--biz-text3); letter-spacing: 0.08em; text-transform: uppercase; }
.pub-pr-cash-note { font-size: 12px; color: var(--biz-text3); line-height: 1.5; text-align: center; margin: -6px 0 0; }

.pub-pr-consent {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 12px; border-radius: 10px; background: rgba(167,139,250,0.06);
  border: 0.5px solid rgba(167,139,250,0.18); margin-bottom: 4px;
}
.pub-pr-consent input[type="checkbox"] {
  margin-top: 2px; width: 17px; height: 17px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--biz-violet);
}
.pub-pr-consent-text { font-size: 12.5px; line-height: 1.5; color: var(--biz-text2); }
.pub-pr-consent-text strong { color: var(--biz-text); font-weight: 700; }
.pub-pr-pay-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.pub-pr-trust { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,0.2); border: 0.5px solid rgba(255,255,255,0.05); text-align: center; }
.pub-pr-trust-title { font-size: 12px; font-weight: 700; color: rgba(237,232,255,0.85); }
.pub-pr-trust-sub { font-size: 10.5px; font-weight: 500; color: var(--biz-text3); }

/* ════════════════════════════════════════════════════════════════════════
   BOOKING SUCCESS + CASH RECEIPT
   ════════════════════════════════════════════════════════════════════════ */

.pub-bs-shell { min-height: 80vh; padding: 24px 18px 80px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pub-bs-status-pill-wrap { display: flex; justify-content: center; padding-top: 12px; }
.pub-bs-status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 0.5px solid; }
.pub-bs-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pub-bs-status-pill--confirmed { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); color: #34d399; }
.pub-bs-status-pill--confirmed .pub-bs-status-dot { animation: bizPing 2s ease-in-out infinite; }
.pub-bs-status-pill--cash { background: rgba(245,166,35,0.1); border-color: rgba(245,166,35,0.28); color: #f5a623; }
.pub-bs-status-pill--processing { background: var(--biz-vd); border-color: rgba(167,139,250,0.25); color: var(--biz-violet); }
.pub-bs-status-spinner { width: 10px; height: 10px; border: 2px solid rgba(167,139,250,0.3); border-top-color: var(--biz-violet); border-radius: 50%; animation: pubSpin 0.8s linear infinite; }
@keyframes pubSpin { to { transform: rotate(360deg); } }

.pub-bs-card { width: 100%; max-width: 440px; background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.08); border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.pub-bs-card-header { padding: 26px 24px 22px; text-align: center; }
.pub-bs-event-name { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--biz-text3); margin-bottom: 10px; }
.pub-bs-greeting { font-size: 22px; font-weight: 900; color: var(--biz-text); letter-spacing: -0.02em; margin-bottom: 8px; }
.pub-bs-sub { font-size: 13px; color: var(--biz-text2); line-height: 1.5; }

.pub-bs-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px 24px; border-top: 0.5px dashed rgba(255,255,255,0.08); }
.pub-bs-info-item { display: flex; flex-direction: column; gap: 4px; }
.pub-bs-info-label { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--biz-text3); }
.pub-bs-info-val { font-size: 13px; font-weight: 600; color: var(--biz-text); word-break: break-all; }
.pub-bs-info-val--mono { font-family: ui-monospace, monospace; font-size: 12px; color: var(--biz-violet); letter-spacing: 0.06em; }
.pub-bs-info-val--total { font-size: 16px; font-weight: 900; color: var(--biz-text); }

.pub-bs-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 24px 20px; }
.pub-bs-qr-inner { padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,0.4); }
.pub-bs-qr-img { display: block; width: 180px; height: 180px; object-fit: contain; }
.pub-bs-qr-label { font-size: 11px; font-weight: 700; color: var(--biz-text3); letter-spacing: 0.05em; }

.pub-bs-tickets { padding: 0 24px 20px; display: flex; flex-direction: column; gap: 8px; }
.pub-bs-ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.05); }
.pub-bs-ticket-name { font-size: 13px; font-weight: 700; color: var(--biz-text); }
.pub-bs-ticket-meta { font-size: 11px; color: var(--biz-text2); margin-top: 2px; }
.pub-bs-ticket-price { font-size: 14px; font-weight: 800; color: var(--biz-text); }
.pub-bs-ticket-price--free { color: #34d399; font-size: 12px; padding: 2px 8px; background: rgba(52,211,153,0.1); border-radius: 6px; }

.pub-bs-actions { padding: 4px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.pub-bs-actions .pub-card-cta { width: 100%; }

@media (max-width: 480px) {
  .pub-bs-info-grid { grid-template-columns: 1fr; }
}

/* ── Nested fees sub-detail (Booking fee / Processing fee) ──────────── */
.pub-pr-bd-row--fees { cursor: pointer; }
.pub-pr-fees-toggle { display: inline-flex; align-items: center; gap: 5px; }
.pub-toggle-chevron--sm { width: 12px; height: 12px; }
.pub-pr-fees-detail-wrap { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
.pub-pr-fees-detail-wrap.is-open { max-height: 100px; }
.pub-pr-fees-detail { display: flex; flex-direction: column; }
.pub-pr-bd-row--sub { padding-left: 28px; opacity: 0.75; font-size: 12px; }

/* ════════════════════════════════════════════════════════════════════════
   BOOKING SUCCESS, orbs, perforation, action buttons, cash card,
   and the full Apple-style success overlay (confetti + checkmark +
   swipe-to-dismiss sheet + email toast)
   ════════════════════════════════════════════════════════════════════════ */

.pub-bs-orb { position: fixed; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.pub-bs-orb--1 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(52,211,153,0.14), transparent 70%); top: -120px; left: -120px; }
.pub-bs-orb--2 { width: 350px; height: 350px; background: radial-gradient(circle, rgba(167,139,250,0.14), transparent 70%); bottom: -80px; right: -80px; }

.pub-bs-perf { display: flex; align-items: center; position: relative; margin: 0 -1px; }
.pub-bs-perf-notch { width: 18px; height: 18px; border-radius: 50%; background: var(--biz-bg); border: 0.5px solid rgba(255,255,255,0.08); flex-shrink: 0; position: relative; z-index: 2; }
.pub-bs-perf-notch--left { margin-left: -9px; }
.pub-bs-perf-notch--right { margin-right: -9px; }
.pub-bs-perf-line { flex: 1; border-top: 2px dashed rgba(255,255,255,0.07); }

.pub-bs-actions { padding: 4px 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.pub-bs-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; border-radius: 14px; font-size: 14px; font-weight: 800; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; transition: all 0.2s ease; }
.pub-bs-btn svg { width: 16px; height: 16px; }
.pub-bs-btn--primary { background: linear-gradient(180deg, #c4b5fd, var(--biz-violet)); color: #1e0a4a; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 6px 20px rgba(167,139,250,0.4); }
.pub-bs-btn--primary:hover { transform: translateY(-2px); }
.pub-bs-btn--ghost { background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08); color: var(--biz-text2); }
.pub-bs-btn--ghost:hover { background: rgba(255,255,255,0.08); color: var(--biz-text); }

.pub-bs-cash-card { width: 100%; max-width: 440px; display: flex; gap: 14px; padding: 16px 18px; border-radius: 16px; background: rgba(245,166,35,0.08); border: 0.5px solid rgba(245,166,35,0.25); position: relative; z-index: 1; }
.pub-bs-cash-icon { width: 40px; height: 40px; border-radius: 11px; background: rgba(245,166,35,0.12); border: 0.5px solid rgba(245,166,35,0.25); display: flex; align-items: center; justify-content: center; color: #f5a623; flex-shrink: 0; }
.pub-bs-cash-icon svg { width: 18px; height: 18px; }
.pub-bs-cash-title { font-size: 14px; font-weight: 800; color: #f5a623; margin-bottom: 4px; }
.pub-bs-cash-sub { font-size: 12px; color: var(--biz-text2); line-height: 1.5; }
.pub-bs-cash-sub strong { color: #f5a623; }

/* ── Success overlay ──────────────────────────────────────────────── */
.pub-bs-overlay {
  position: fixed; inset: 0; z-index: 900; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(7,6,14,0); opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease, background 0.5s ease;
}
.pub-bs-overlay.is-open { opacity: 1; pointer-events: auto; background: rgba(7,6,14,0.78); backdrop-filter: blur(16px) saturate(180%); }

.pub-bs-confetti-wrap { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pub-bs-confetti-piece { position: absolute; top: -20px; animation: pubBsConfettiFall linear forwards; }
@keyframes pubBsConfettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0; } }

.pub-bs-sheet {
  position: relative; width: 100%; max-width: 480px; padding: 0 24px 48px;
  border-radius: 28px 28px 0 0;
  background: radial-gradient(700px 200px at 50% 0%, rgba(52,211,153,0.16), transparent 60%), linear-gradient(180deg, rgba(20,16,38,0.99), rgba(10,8,22,0.99));
  border: 0.5px solid rgba(52,211,153,0.22); border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 -20px 60px rgba(0,0,0,0.5);
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
}
.pub-bs-overlay.is-open .pub-bs-sheet { transform: translateY(0); }

.pub-bs-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.15); margin: 14px auto 6px; }
.pub-bs-sheet-glow { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 300px; height: 200px; background: radial-gradient(circle, rgba(52,211,153,0.3), transparent 70%); filter: blur(30px); pointer-events: none; }

.pub-bs-check-wrap { position: relative; width: 80px; height: 80px; margin: 10px auto 4px; }
.pub-bs-check-ring { position: absolute; inset: 0; border-radius: 50%; background: rgba(52,211,153,0.14); border: 0.5px solid rgba(52,211,153,0.35); box-shadow: 0 0 30px rgba(52,211,153,0.4); animation: pubBsRingPop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.7s both; }
@keyframes pubBsRingPop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pub-bs-check-svg { width: 80px; height: 80px; position: relative; z-index: 2; }
.pub-bs-check-circle { stroke: rgba(52,211,153,0.3); stroke-width: 2; }
.pub-bs-check-mark { stroke: #34d399; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 35; stroke-dashoffset: 35; animation: pubBsCheckDraw 0.5s ease-out 0.9s forwards; }
@keyframes pubBsCheckDraw { to { stroke-dashoffset: 0; } }

.pub-bs-sheet-title { font-size: 26px; font-weight: 900; color: var(--biz-text); letter-spacing: -0.02em; }
.pub-bs-sheet-sub { font-size: 14px; color: var(--biz-text2); line-height: 1.6; }
.pub-bs-sheet-email-line { font-size: 13px; color: var(--biz-text3); }
.pub-bs-sheet-ref { font-family: ui-monospace, monospace; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--biz-violet); padding: 5px 14px; background: var(--biz-vd); border: 0.5px solid rgba(167,139,250,0.22); border-radius: 8px; }

.pub-bs-sheet-cta {
  width: 100%; max-width: 320px; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 20px; border-radius: 16px; border: 0;
  background: linear-gradient(180deg, #3ee68a, #34d399); color: #042208;
  font-size: 16px; font-weight: 900; cursor: pointer; font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 24px rgba(52,211,153,0.45);
  transition: all 0.2s ease; margin-top: 6px;
}
.pub-bs-sheet-cta:hover { transform: translateY(-2px); }
.pub-bs-sheet-cta.is-loading { opacity: 0.85; pointer-events: none; }
.pub-bs-sheet-cta svg { width: 18px; height: 18px; }
.pub-bs-cta-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(4,34,8,0.3); border-top-color: #042208; border-radius: 50%; animation: pubSpin 0.7s linear infinite; }
.pub-bs-sheet-dismiss { font-size: 11px; color: var(--biz-text3); margin-top: 4px; }

.pub-bs-email-toast {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-20px);
  display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px;
  background: rgba(20,16,38,0.97); border: 0.5px solid rgba(52,211,153,0.3); color: rgba(237,232,255,0.9);
  font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); z-index: 1000; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.pub-bs-email-toast svg { width: 15px; height: 15px; color: #34d399; flex-shrink: 0; }
.pub-bs-email-toast strong { color: var(--biz-violet); }
.pub-bs-email-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 480px) {
  .pub-bs-card { border-radius: 20px; }
  .pub-bs-sheet { border-radius: 22px 22px 0 0; }
  .pub-bs-sheet-title { font-size: 20px; }
  .pub-bs-email-toast { font-size: 12px; max-width: calc(100vw - 32px); white-space: normal; }
}

/* ════════════════════════════════════════════════════════════════════════
   CASH RECEIPT PAGE
   ════════════════════════════════════════════════════════════════════════ */

.pub-cr-shell { min-height: 80vh; display: flex; flex-direction: column; align-items: center; padding: 32px 18px 80px; gap: 18px; }
.pub-cr-shell .pub-back { align-self: flex-start; max-width: 520px; width: 100%; margin: 0 auto; }

.pub-cr-card {
  width: 100%; max-width: 520px;
  background: rgba(255,255,255,0.03); border: 0.5px solid rgba(167,139,250,0.25); border-radius: 24px;
  padding: 28px 24px; box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  display: flex; flex-direction: column; gap: 22px;
}

.pub-cr-status-badge { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: rgba(245,166,35,0.1); border: 0.5px solid rgba(245,166,35,0.28); font-size: 11px; font-weight: 700; color: #f5a623; text-transform: uppercase; }
.pub-cr-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #f5a623; animation: bizPing 2s ease-in-out infinite; }

.pub-cr-header { display: flex; flex-direction: column; gap: 8px; }
.pub-cr-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--biz-vd); border: 0.5px solid rgba(167,139,250,0.25); display: flex; align-items: center; justify-content: center; color: var(--biz-violet); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 4px 14px rgba(167,139,250,0.18); }
.pub-cr-icon svg { width: 22px; height: 22px; }
.pub-cr-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--biz-text); margin: 0; }
.pub-cr-sub { font-size: 14px; color: var(--biz-text2); line-height: 1.55; margin: 0; }

.pub-cr-details { display: flex; flex-direction: column; border: 0.5px solid rgba(255,255,255,0.06); border-radius: 16px; overflow: hidden; }
.pub-cr-detail-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 0.5px solid rgba(255,255,255,0.04); background: rgba(255,255,255,0.02); }
.pub-cr-detail-row:last-child { border-bottom: 0; }
.pub-cr-detail-label { font-size: 12px; font-weight: 600; color: var(--biz-text3); flex-shrink: 0; }
.pub-cr-detail-value { font-size: 13px; font-weight: 600; color: var(--biz-text); text-align: right; }
.pub-cr-detail-value--mono { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--biz-violet); }
.pub-cr-detail-value--price { font-size: 16px; font-weight: 900; background: linear-gradient(135deg, #c4b5fd, var(--biz-violet)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pub-cr-pending-pill { display: inline-block; padding: 3px 9px; border-radius: 6px; background: rgba(245,166,35,0.1); border: 0.5px solid rgba(245,166,35,0.22); font-size: 11px; font-weight: 700; color: #f5a623; }

.pub-cr-note { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border-radius: 12px; background: var(--biz-vg); border: 0.5px solid rgba(167,139,250,0.16); font-size: 13px; color: var(--biz-text2); line-height: 1.5; }
.pub-cr-note svg { width: 15px; height: 15px; color: var(--biz-violet); flex-shrink: 0; margin-top: 1px; }

.pub-cr-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--biz-text3); margin-bottom: -10px; }
.pub-cr-ticket-list { display: flex; flex-direction: column; border: 0.5px solid rgba(255,255,255,0.06); border-radius: 14px; overflow: hidden; }
.pub-cr-ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; background: rgba(255,255,255,0.02); border-bottom: 0.5px solid rgba(255,255,255,0.04); }
.pub-cr-ticket-row:last-child { border-bottom: 0; }
.pub-cr-ticket-name { font-size: 14px; font-weight: 700; color: var(--biz-text); }
.pub-cr-ticket-meta { font-size: 11px; color: var(--biz-text3); font-weight: 500; }
.pub-cr-ticket-price { font-size: 14px; font-weight: 800; color: var(--biz-text); white-space: nowrap; }

@media (max-width: 480px) { .pub-cr-card { padding: 22px 16px; border-radius: 20px; } .pub-cr-title { font-size: 19px; } }

/* ════════════════════════════════════════════════════════════════════════
   TICKET PASS PAGE
   ════════════════════════════════════════════════════════════════════════ */

.pub-tp-shell { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 28px 16px 80px; gap: 16px; }
.pub-tp-actions-top { width: 100%; max-width: 560px; display: flex; align-items: center; justify-content: space-between; }
.pub-tp-top-btns { display: flex; gap: 8px; }
.pub-tp-icon-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 0.5px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.04); color: var(--biz-text2); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s ease; }
.pub-tp-icon-btn:hover { background: rgba(255,255,255,0.08); color: var(--biz-text); }
.pub-tp-icon-btn svg { width: 14px; height: 14px; }

.pub-tp-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--biz-text3); font-weight: 500; margin: 0; }
.pub-tp-hint svg { width: 13px; height: 13px; flex-shrink: 0; }

.pub-tp-ticket { width: 100%; max-width: 560px; border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1px rgba(167,139,250,0.25), 0 30px 70px rgba(0,0,0,0.6), 0 0 80px rgba(167,139,250,0.06); position: relative; }

.pub-tp-stub-top { background: radial-gradient(900px 300px at 0% 0%, rgba(167,139,250,0.16), transparent 60%), linear-gradient(180deg, rgba(20,16,38,0.99), rgba(10,8,22,0.99)); padding: 26px 24px 22px; display: flex; flex-direction: column; gap: 18px; }
.pub-tp-brand { display: flex; align-items: center; gap: 10px; }
.pub-tp-brand-logo { height: 28px; width: auto; object-fit: contain; opacity: 0.9; }
.pub-tp-brand-label { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--biz-text3); }
.pub-tp-event-name { font-size: 28px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; color: var(--biz-text); text-shadow: 0 2px 20px rgba(167,139,250,0.25); }

.pub-tp-info-row { display: flex; flex-wrap: wrap; gap: 16px; padding: 14px 0; border-top: 0.5px solid rgba(255,255,255,0.05); }
.pub-tp-info-cell { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 100px; }
.pub-tp-info-cell--wide { flex: 2; min-width: 160px; }
.pub-tp-info-label { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--biz-text3); }
.pub-tp-info-value { font-size: 14px; font-weight: 700; color: var(--biz-text); letter-spacing: -0.01em; line-height: 1.3; }
.pub-tp-mono { font-family: ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--biz-violet); }

.pub-tp-tickets { display: flex; flex-direction: column; border: 0.5px solid rgba(167,139,250,0.16); border-radius: 12px; overflow: hidden; }
.pub-tp-ticket-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--biz-vg); border-bottom: 0.5px solid rgba(255,255,255,0.04); font-size: 13px; }
.pub-tp-ticket-line:last-child { border-bottom: 0; }
.pub-tp-ticket-line-name { font-weight: 600; color: var(--biz-text); }
.pub-tp-ticket-line-qty { font-weight: 800; color: var(--biz-violet); font-size: 12px; background: var(--biz-vd); border: 0.5px solid rgba(167,139,250,0.2); padding: 2px 8px; border-radius: 6px; }

.pub-tp-packages { margin-top: 10px; }
.pub-tp-packages-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(237,232,255,0.4); margin-bottom: 6px; }
.pub-tp-package-line { border: 0.5px solid rgba(167,139,250,0.16); border-radius: 12px; overflow: hidden; margin-bottom: 8px; }
.pub-tp-package-line:last-child { margin-bottom: 0; }
.pub-tp-package-line .pub-tp-ticket-line { border-bottom: 0; }
.pub-tp-package-pickup { font-size: 11px; color: var(--biz-text2); font-style: italic; padding: 0 14px 10px; background: var(--biz-vg); }

.pub-tp-perforation { position: relative; height: 2px; display: flex; align-items: center; }
.pub-tp-perf-notch { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--biz-bg); z-index: 2; top: 50%; transform: translateY(-50%); }
.pub-tp-perf-notch--left { left: -11px; }
.pub-tp-perf-notch--right { right: -11px; }
.pub-tp-perf-line { flex: 1; margin: 0 12px; border-top: 2px dashed rgba(255,255,255,0.12); }

.pub-tp-stub-bottom { background: linear-gradient(180deg, rgba(12,9,26,0.99), rgba(8,6,18,0.99)); padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 16px; }
.pub-tp-bottom-inner { display: flex; gap: 20px; align-items: flex-start; }
.pub-tp-scan-info { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pub-tp-scan-title { font-size: 11px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: var(--biz-violet); }
.pub-tp-scan-sub { font-size: 12px; color: var(--biz-text2); font-weight: 500; margin-top: -6px; }
.pub-tp-session-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 8px; background: var(--biz-vd); border: 0.5px solid rgba(167,139,250,0.2); font-size: 11px; font-weight: 700; color: var(--biz-violet); }
.pub-tp-session-tag svg { width: 11px; height: 11px; }
.pub-tp-policy { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.06); }
.pub-tp-policy-title { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--biz-text3); margin-bottom: 5px; }
.pub-tp-policy-text { font-size: 11px; color: var(--biz-text2); line-height: 1.5; white-space: pre-wrap; }

.pub-tp-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
.pub-tp-qr-bg { padding: 12px; background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 24px rgba(0,0,0,0.5); }
.pub-tp-qr-img { display: block; width: 130px; height: 130px; object-fit: contain; border-radius: 4px; }
.pub-tp-qr-label { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; font-family: ui-monospace, monospace; color: var(--biz-text3); text-align: center; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pub-tp-links-row { display: flex; justify-content: center; gap: 16px; padding-top: 6px; border-top: 0.5px solid rgba(255,255,255,0.05); flex-wrap: wrap; }
.pub-tp-link-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; font-size: 11px; font-weight: 600; color: var(--biz-text3); cursor: pointer; font-family: inherit; transition: color 0.15s ease; padding: 4px 0; }
.pub-tp-link-btn:hover { color: var(--biz-text); }
.pub-tp-link-btn svg { width: 11px; height: 11px; }
.pub-tp-link-btn--danger { color: rgba(248,113,113,0.7); }
.pub-tp-link-btn--danger:hover { color: #f87171; }

@media print {
  .pub-tp-actions-top, .pub-tp-hint, .pub-tp-links-row { display: none !important; }
  .pub-tp-shell { padding: 0; background: #fff; }
  .pub-tp-ticket { box-shadow: none; border: 1px solid #ccc; max-width: 100%; }
  .pub-tp-stub-top { background: #f8f9ff !important; }
  .pub-tp-stub-bottom { background: #fff !important; }
  .pub-tp-event-name, .pub-tp-info-value, .pub-tp-ticket-line-name { color: #111 !important; }
}

@media (max-width: 480px) {
  .pub-tp-stub-top { padding: 20px 18px 18px; }
  .pub-tp-stub-bottom { padding: 18px 18px 16px; }
  .pub-tp-event-name { font-size: 22px; }
  .pub-tp-bottom-inner { gap: 14px; }
  .pub-tp-qr-img { width: 110px; height: 110px; }
  .pub-tp-qr-bg { padding: 10px; }
}

/* ── Modal additions for terms/refund (reusing the generic pub-modal shell) ── */
.pub-modal-card--wide { max-width: 540px; }
.pub-modal-body { font-size: 13.5px; color: var(--biz-text2); line-height: 1.6; max-height: 60vh; overflow-y: auto; }
.pub-modal-body h4 { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--biz-violet); margin: 16px 0 8px; }
.pub-modal-body h4:first-child { margin-top: 0; }
.pub-refund-note { font-size: 13px; color: var(--biz-text2); margin: 0 0 12px; }

/* ════════════════════════════════════════════════════════════════════════
   CATEGORY 3, chip-style modal triggers + refund success state
   ════════════════════════════════════════════════════════════════════════ */

.pub-tp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(167,139,250,0.28);
  color: var(--biz-text2); font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: all 0.18s ease;
}
.pub-tp-chip:hover { background: var(--biz-vd); border-color: rgba(167,139,250,0.5); color: var(--biz-text); transform: translateY(-1px); }
.pub-tp-chip svg { width: 12px; height: 12px; }
.pub-tp-chip--danger { border-color: rgba(248,113,113,0.32); color: rgba(248,113,113,0.85); }
.pub-tp-chip--danger:hover { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.5); color: #f87171; }

.pub-refund-error { font-size: 12.5px; color: #f87171; margin-top: 10px; padding: 9px 12px; border-radius: 9px; background: rgba(248,113,113,0.08); border: 0.5px solid rgba(248,113,113,0.22); }

.pub-refund-label { display: block; font-size: 12px; font-weight: 700; color: var(--biz-text2); margin-bottom: 6px; }
.pub-negotiate-phone-hint { display: block; font-size: 11px; color: var(--biz-text3); line-height: 1.5; margin-top: 4px; }
.pub-refund-textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px;
  background: rgba(0,0,0,0.2); border: 0.5px solid rgba(167,139,250,0.22); border-radius: 10px;
  color: var(--biz-text); font-size: 13.5px; font-family: inherit; padding: 10px 12px; outline: none;
}
.pub-refund-textarea:focus { border-color: rgba(167,139,250,0.55); box-shadow: 0 0 0 3px rgba(167,139,250,0.1); }

/* Category 16, reschedule negotiation thread */
.pub-neg-thread { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; margin-bottom: 4px; }
.pub-neg-msg { padding: 10px 13px; border-radius: 12px; max-width: 88%; }
.pub-neg-msg--me { align-self: flex-end; background: var(--biz-vd); border: 0.5px solid rgba(167,139,250,0.25); }
.pub-neg-msg--them { align-self: flex-start; background: rgba(255,255,255,0.04); border: 0.5px solid rgba(255,255,255,0.08); }
.pub-neg-msg-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--biz-text3); margin-bottom: 4px; }
.pub-neg-msg-proposal { font-size: 13px; font-weight: 700; color: var(--biz-violet); margin-bottom: 4px; }
.pub-neg-msg-body { font-size: 13px; color: var(--biz-text); line-height: 1.4; }
.pub-neg-msg-status { font-size: 11px; font-weight: 800; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.pub-neg-msg-status--good { color: #6ee7b7; }
.pub-neg-msg-status--bad { color: #fca5a5; }
.pub-neg-actions { margin-top: 14px; padding-top: 14px; border-top: 0.5px solid rgba(255,255,255,0.08); }

.pub-refund-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-top: 6px; }
.pub-refund-success-check { width: 56px; height: 56px; margin-bottom: 6px; }
.pub-refund-success-check svg { width: 56px; height: 56px; }
.pub-refund-success-check circle { stroke: rgba(52,211,153,0.3); stroke-width: 2; fill: none; }
.pub-refund-success-check path { stroke: #34d399; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 35; stroke-dashoffset: 35; animation: pubRefundCheckDraw 0.5s ease-out 0.15s forwards; }
@keyframes pubRefundCheckDraw { to { stroke-dashoffset: 0; } }
.pub-refund-success-title { font-size: 17px; font-weight: 800; color: var(--biz-text); }
.pub-refund-success-text { font-size: 13px; color: var(--biz-text2); line-height: 1.5; margin: 0 0 10px; max-width: 320px; }

/* Modal card needs a defined transform-origin + will-change for the
   FLIP animation to look smooth rather than choppy */
.pub-modal-card { transform-origin: center center; will-change: transform, opacity; }

/* ════════════════════════════════════════════════════════════════════════
   CATEGORY 4, Business tag → profile preview modal
   ════════════════════════════════════════════════════════════════════════ */

.pub-biz-tag {
  cursor: pointer; font-family: inherit; border: 0.5px solid rgba(255,255,255,0.18);
  transition: background 0.18s ease, transform 0.18s ease;
}
.pub-biz-tag:hover { background: rgba(255,255,255,0.22); transform: translateY(-1px); }
.pub-biz-tag:active { transform: translateY(0) scale(0.97); }

.pub-modal-card.pub-biz-card {
  max-width: 380px; padding: 0; overflow: hidden;
}
.pub-modal-close.pub-biz-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  background: rgba(7,6,14,0.55); backdrop-filter: blur(8px);
}
button.pub-biz-modal-close {
  /* Belt-and-suspenders: guarantees absolute positioning even if the
     compound selector above somehow doesn't match (e.g. a future
     markup change drops one of the two classes from the button), a
     plain element-type + single-class selector can never lose a
     specificity fight against a two-class compound selector, but it's
     here as a second independent guarantee, not a replacement. */
  position: absolute !important; top: 12px; right: 12px; z-index: 5;
  background: rgba(7,6,14,0.55); backdrop-filter: blur(8px);
}

/* Business tag, final consolidated rules 
   Replaces the earlier ".pub-biz-tag-enhanced" block, which targeted a
   class name that never actually existed in the markup (the real
   button only ever carries class="pub-biz-tag"), so none of that
   wrapper styling was ever applying. This is now the single source of
   truth for the tag's outer shape; every dimension on it and its
   children is explicitly clamped so the pill can never visually
   balloon regardless of what photo content sits behind it or what
   the source logo image's native dimensions happen to be. ──────────── */
button.pub-biz-tag {
  all: unset; /* hard reset every default <button> UA style first */
  box-sizing: border-box; cursor: pointer; font-family: inherit;
  position: absolute; top: 12px; left: 12px; z-index: 4;
  display: inline-flex; align-items: center;
  max-width: 220px; height: 34px; overflow: hidden;
  padding: 0 12px 0 6px; border-radius: 9999px;
  background: rgba(7,6,14,0.75); backdrop-filter: blur(12px);
  border: 0.5px solid rgba(255,255,255,0.2);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
button.pub-biz-tag:hover { background: rgba(7,6,14,0.9); border-color: var(--biz-violet); transform: translateY(-1px); }
button.pub-biz-tag:active { transform: translateY(0) scale(0.97); }
button.pub-biz-tag.pub-biz-tag--hero {
  position: static; top: auto; left: auto; height: 32px; margin-top: 2px;
}

.pub-biz-tag-inner { display: flex; align-items: center; gap: 8px; min-width: 0; }

img.pub-biz-logo-small {
  width: 24px !important; height: 24px !important; min-width: 24px; min-height: 24px;
  border-radius: 8px; object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.15); display: block;
}
.pub-biz-avatar--fallback-small {
  width: 24px; height: 24px; min-width: 24px; border-radius: 8px;
  background: var(--biz-vd); color: var(--biz-violet); font-weight: 900; font-size: 13px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: 1px solid rgba(167,139,250,0.3);
}
.pub-biz-name-short {
  font-size: 13px; font-weight: 700; color: #fff; max-width: 130px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
svg.pub-biz-arrow {
  width: 14px !important; height: 14px !important; flex-shrink: 0;
  color: rgba(255,255,255,0.7); transition: transform 0.25s ease, color 0.25s ease;
}
button.pub-biz-tag:hover svg.pub-biz-arrow { transform: translateX(3px); color: var(--biz-violet); }
.pub-biz-banner {
  width: 100%; height: 110px; background: linear-gradient(135deg, #1a0f3a, #0a0820);
  overflow: hidden; position: relative; display: block; margin: 0; padding: 0;
  /* Redundant corner radius matching the card's own, some WebKit
     versions don't reliably clip a child to a rounded ancestor via
     overflow:hidden alone, especially the very first paint before any
     repaint is triggered, which is exactly when a modal opens. Setting
     it explicitly here removes any dependency on that clip working. */
  border-radius: 20px 20px 0 0;
}
.pub-biz-banner img { width: 100%; height: 100%; object-fit: cover; }
.pub-biz-banner--fallback { background: radial-gradient(circle at 30% 20%, rgba(167,139,250,0.35), transparent 60%), linear-gradient(135deg, #1a0f3a, #0a0820); }

.pub-biz-modal-body { padding: 0 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.pub-biz-avatar-row {
  display: flex; align-items: center; gap: 14px;
  /* Was margin-top: -34px to overlap the banner (classic Instagram-style
     profile pic effect), but that trick assumes a round photo with no
     hard edges. Against a square logo card like this one, the overlap
     reads as the logo being literally cut in half rather than layered
     on top. Sitting cleanly below the banner avoids that ambiguity
     entirely instead of trying to fine-tune an overlap that depends on
     exactly matching pixel offsets to the banner's rendered height. */
  margin-top: 16px;
}
.pub-biz-avatar {
  width: 68px; height: 68px; border-radius: 18px; overflow: hidden; flex-shrink: 0;
  background: var(--biz-vd); border: 3px solid rgba(20,16,38,1);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.pub-biz-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pub-biz-avatar--fallback { display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 900; color: var(--biz-violet); }
.pub-biz-name-block { padding-bottom: 6px; min-width: 0; }
.pub-biz-name { font-size: 18px; font-weight: 800; color: var(--biz-text); letter-spacing: -0.01em; line-height: 1.2; }
.pub-biz-contact { font-size: 12px; color: var(--biz-text3); margin-top: 2px; }

.pub-biz-bio { font-size: 13.5px; line-height: 1.55; color: var(--biz-text2); margin: 0; }

.pub-biz-contact-rows { display: flex; flex-direction: column; gap: 8px; }
.pub-biz-contact-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 0.5px solid rgba(255,255,255,0.07);
  color: var(--biz-text2); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.pub-biz-contact-row:hover { background: var(--biz-vd); color: var(--biz-text); }
.pub-biz-contact-row svg { width: 15px; height: 15px; color: var(--biz-violet); flex-shrink: 0; }
.pub-biz-contact-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pub-biz-social-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pub-biz-social-btn {
  width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--biz-vd); border: 0.5px solid rgba(167,139,250,0.2); color: var(--biz-violet);
  transition: all 0.15s ease;
}
.pub-biz-social-btn:hover { background: rgba(167,139,250,0.18); transform: translateY(-2px); }
.pub-biz-social-btn svg { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════════════════════
   DESCRIPTION BOTTOM SHEET  (pub_desc_sheet.js v5)

   Design principles (Material Design 3 + Apple HIG + NNGroup):
   • Near-black backdrop (90-95%) so background card is invisible
   • "Implied scrollability" via cut-off content, no visible scrollbar
   • Touch target ≥ 48px on drag zone (Material HIG requirement)
   • No X button, swipe down to dismiss (standard mobile convention)
   • Two snap points: 50% (glanceable) → 91% (read in full)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Backdrop ─────────────────────────────────────────────────────────── */
.pub-desc-backdrop {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(0,0,0,0.92);
  opacity: 0; pointer-events: none;
  transition: opacity 0.44s ease;
}

/* ── Sheet ────────────────────────────────────────────────────────────── */
.pub-desc-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 0; z-index: 701;
  display: flex; flex-direction: column;
  /* Dark glassmorphic feel, slightly lighter than page bg */
  background: linear-gradient(180deg, #120e2a 0%, #0d0a1e 100%);
  border-radius: 20px 20px 0 0;
  /* Violet top edge glow, feels premium */
  box-shadow:
    0 -0.5px 0 rgba(167,139,250,0.35),
    0 -1px 0 rgba(167,139,250,0.08),
    0 -28px 80px rgba(0,0,0,0.8);
  overflow: hidden;
}
.pub-desc-sheet.is-open { display: flex; }

/* Drag zone, 48px touch target, thin visible pill */
.pds-drag {
  flex-shrink: 0;
  /* 48px total height, Material Design minimum touch target */
  padding: 14px 0 10px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  touch-action: none; cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.pds-drag:active { cursor: grabbing; }

.pds-pill {
  display: block;
  width: 32px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.22);
  transition: background 0.2s ease, width 0.2s ease;
}
.pds-drag:active .pds-pill { background: rgba(255,255,255,0.4); }

/* Status pill, appears at half, fades at full */
.pds-status {
  display: inline-flex; align-items: center; gap: 5px;
  align-self: center; flex-shrink: 0;
  margin: 0 0 6px;
  padding: 4px 13px;
  border-radius: 999px;
  background: rgba(167,139,250,0.12);
  border: 0.5px solid rgba(167,139,250,0.3);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--biz-violet, #a78bfa);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}
.pds-status svg { flex-shrink: 0; }

/* ── Section label ────────────────────────────────────────────────────── */
.pds-label {
  margin: 0; flex-shrink: 0;
  padding: 0 18px 10px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237,232,255,0.28);
  border-bottom: 0.5px solid rgba(255,255,255,0.05);
}

/* Scrollable content, NO visible scrollbar */
/* Per NNGroup: "Scrollability is implied by cut-off content rather
   than by scrollbars, which require space allocation." */
.pds-content {
  flex: 1; min-height: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px 20px 72px;
  /* Hide scrollbar cross-browser */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pds-content::-webkit-scrollbar { display: none; }

/* Content typography */
.pds-content p {
  margin: 0 0 14px;
  font-size: 15px; line-height: 1.68;
  color: rgba(237,232,255,0.78);
}
.pds-content p:last-child { margin-bottom: 0; }
.pds-content strong, .pds-content b { color: #ede8ff; font-weight: 700; }
.pds-content em, .pds-content i { font-style: italic; }
.pds-content h1,.pds-content h2,.pds-content h3,.pds-content h4 {
  color: #ede8ff; font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.pds-content ul, .pds-content ol {
  padding-left: 20px; margin: 0 0 14px;
  color: rgba(237,232,255,0.78); font-size: 15px; line-height: 1.68;
}
.pds-content li { margin-bottom: 6px; }
/* Emoji / inline elements */
.pds-content br { display: block; content: ''; margin: 8px 0; }

/* ── Read More button ─────────────────────────────────────────────────── */
.pub-read-more {
  display: none;  /* JS shows when text is genuinely clamped */
  align-items: center; gap: 5px;
  margin-top: 8px; padding: 0;
  background: none; border: 0;
  color: var(--biz-violet, #a78bfa);
  font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: opacity 0.15s ease;
}
.pub-read-more:hover { opacity: 0.72; }
.pub-read-more svg { flex-shrink: 0; }

/* ── Desktop expanded state (set/cleared by inline styles via JS) ──────
   Only .pub-ro-done is CSS-managed; expand/collapse use inline styles. */
.pub-card-overview.pub-ro-done {
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
  max-height: none !important;
}





/* ════════════════════════════════════════════════════════════════════════
   APPLE-STYLE LAYERED BACKGROUND + INSTAGRAM-STYLE SWIPE-UP SHEET
   v6, Premium modal experience
   ════════════════════════════════════════════════════════════════════════ */

/* ── Layered background state (applied to body when sheet is open) ──── */
body.pub-desc-layered {
  overflow: hidden;
}

body.pub-desc-layered .pub-page,
body.pub-desc-layered .pub-card-grid,
body.pub-desc-layered .pub-card-single {
  transform: scale(0.92) translateY(-2%);
  border-radius: 16px;
  opacity: 0.6;
  filter: brightness(0.7);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              border-radius 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.5s ease,
              filter 0.5s ease;
  /* Prevent content from being interactive while modal is open */
  pointer-events: none;
  /* Create the layered card effect */
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}

/* When sheet closes, spring back */
.pub-page,
.pub-card-grid,
.pub-card-single {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-radius 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s ease,
              filter 0.4s ease;
}

/* ── Backdrop ─────────────────────────────────────────────────────────── */
.pub-desc-backdrop {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(0,0,0,0.85);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  backdrop-filter: blur(2px);
}

.pub-desc-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ── Sheet ────────────────────────────────────────────────────────────── */
.pub-desc-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 701;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #16122e 0%, #0d0a1e 100%);
  border-radius: 24px 24px 0 0;
  box-shadow:
    0 -1px 0 rgba(167,139,250,0.3),
    0 -2px 0 rgba(167,139,250,0.1),
    0 -32px 80px rgba(0,0,0,0.7);
  overflow: hidden;
  /* Start hidden below viewport */
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1),
              height 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform, height;
}

.pub-desc-sheet.is-open {
  transform: translateY(0);
}

/* ── Drag handle zone ────────────────────────────────────────────────── */
.pds-drag {
  flex-shrink: 0;
  padding: 16px 0 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  touch-action: none; cursor: grab;
  -webkit-user-select: none; user-select: none;
  transition: background 0.2s ease;
}
.pds-drag:active { cursor: grabbing; }

/* The pill */
.pds-pill {
  display: block;
  width: 36px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.2);
  transition: background 0.25s ease, width 0.25s ease, transform 0.25s ease;
}
.pds-drag:hover .pds-pill {
  background: rgba(255,255,255,0.35);
  width: 40px;
}
.pds-drag:active .pds-pill {
  background: rgba(255,255,255,0.5);
  transform: scaleY(1.3);
}

/* ── "Swipe up for more" indicator ───────────────────────────────────── */
.pds-swipe-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--biz-violet, #a78bfa);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.pds-swipe-hint svg {
  width: 12px; height: 12px;
  animation: pdsBounce 2s ease-in-out infinite;
}
@keyframes pdsBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Show hint only at half state */
.pub-desc-sheet[data-state="half"] .pds-swipe-hint {
  opacity: 1;
  transform: translateY(0);
}

/* Hide hint at full state */
.pub-desc-sheet[data-state="full"] .pds-swipe-hint {
  opacity: 0;
  transform: translateY(-4px);
}

/* ── Section header ──────────────────────────────────────────────────── */
.pds-header {
  flex-shrink: 0;
  padding: 0 24px 14px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}

.pds-header-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--biz-vd);
  border: 0.5px solid rgba(167,139,250,0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--biz-violet);
}
.pds-header-icon svg { width: 14px; height: 14px; }

.pds-header-title {
  font-size: 15px; font-weight: 800;
  letter-spacing: -0.01em;
  color: #ede8ff;
}

/* ── Scrollable content ──────────────────────────────────────────────── */
.pds-content {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 20px 24px 80px;
  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pds-content::-webkit-scrollbar { display: none; }

/* Content typography */
.pds-content p {
  margin: 0 0 14px;
  font-size: 15.5px; line-height: 1.7;
  color: rgba(237,232,255,0.82);
}
.pds-content p:last-child { margin-bottom: 0; }
.pds-content strong, .pds-content b { color: #ede8ff; font-weight: 700; }
.pds-content h1, .pds-content h2, .pds-content h3, .pds-content h4 {
  color: #ede8ff; font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.pds-content ul, .pds-content ol {
  padding-left: 22px; margin: 0 0 14px;
  color: rgba(237,232,255,0.82); font-size: 15px; line-height: 1.7;
}
.pds-content li { margin-bottom: 6px; }

/* ── Smart height: auto-size for short content ─────────────────────── */
.pub-desc-sheet.is-auto-height {
  height: auto !important;
  max-height: 85vh;
}
.pub-desc-sheet.is-auto-height .pds-content {
  max-height: 60vh;
  overflow-y: auto;
}

/* ── Read More button (enhanced) ───────────────────────────────────── */
.pub-read-more {
  display: none;
  align-items: center; gap: 6px;
  margin-top: 10px; padding: 0;
  background: none; border: 0;
  color: var(--biz-violet, #a78bfa);
  font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: opacity 0.15s ease, gap 0.2s ease;
}
.pub-read-more:hover { opacity: 0.75; gap: 8px; }
.pub-read-more svg {
  width: 12px; height: 12px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pub-read-more.is-expanded svg {
  transform: rotate(180deg);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .pds-content { padding: 16px 18px 72px; }
  .pds-header { padding: 0 18px 12px; }
  body.pub-desc-layered .pub-page,
  body.pub-desc-layered .pub-card-grid,
  body.pub-desc-layered .pub-card-single {
    transform: scale(0.94) translateY(-1%);
    border-radius: 12px;
  }
}




/* ════════════════════════════════════════════════════════════════════════
   APPLE-STYLE LAYERED BACKGROUND + INSTAGRAM-STYLE SWIPE-UP SHEET
   v7, Premium modal experience with WebGL background support
   ════════════════════════════════════════════════════════════════════════ */

/* ── Layered background state (applied to body when sheet is open) ──── */
body.pub-desc-layered {
  overflow: hidden;
}

body.pub-desc-layered .pub-page,
body.pub-desc-layered .pub-card-grid,
body.pub-desc-layered .pub-card-single {
  transform: scale(0.91) translateY(-2.5%);
  border-radius: 20px;
  opacity: 0.55;
  filter: brightness(0.65) saturate(0.8);
  transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1),
              border-radius 0.55s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.5s ease,
              filter 0.5s ease;
  pointer-events: none;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(167,139,250,0.08);
}

/* When sheet closes, spring back with overshoot */
.pub-page,
.pub-card-grid,
.pub-card-single {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s ease,
              filter 0.4s ease;
}

/* ── WebGL Canvas (behind sheet, above backdrop) ────────────────────── */
.pub-desc-webgl {
  position: fixed;
  inset: 0;
  z-index: 700;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.pub-desc-webgl.is-visible {
  opacity: 1;
}

/* ── Backdrop ─────────────────────────────────────────────────────────── */
.pub-desc-backdrop {
  position: fixed; inset: 0; z-index: 699;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(10,8,22,0.95) 0%, rgba(0,0,0,0.88) 100%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  backdrop-filter: blur(3px);
}

.pub-desc-backdrop.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ── Sheet ────────────────────────────────────────────────────────────── */
.pub-desc-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 701;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(18,14,36,0.98) 0%, rgba(10,8,22,0.98) 100%);
  border-radius: 28px 28px 0 0;
  box-shadow:
    0 -1px 0 rgba(167,139,250,0.35),
    0 -2px 0 rgba(167,139,250,0.12),
    0 -40px 100px rgba(0,0,0,0.7);
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1),
              height 0.55s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform, height;
}

.pub-desc-sheet.is-open {
  transform: translateY(0);
}

/* ── Drag handle zone ────────────────────────────────────────────────── */
.pds-drag {
  flex-shrink: 0;
  padding: 18px 0 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  touch-action: none; cursor: grab;
  -webkit-user-select: none; user-select: none;
  transition: background 0.2s ease;
}
.pds-drag:active { cursor: grabbing; }

/* The pill, enhanced with stretch animation on drag */
.pds-pill {
  display: block;
  width: 36px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.18);
  transition: background 0.3s ease, width 0.3s cubic-bezier(0.34,1.56,0.64,1), transform 0.3s ease;
}
.pds-drag:hover .pds-pill {
  background: rgba(255,255,255,0.32);
  width: 44px;
}
.pds-drag:active .pds-pill {
  background: rgba(255,255,255,0.5);
  transform: scaleY(1.4) scaleX(1.1);
}

/* "Swipe up for more" hint, alive and pulsing */
.pds-swipe-hint {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--biz-violet, #a78bfa);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.pds-swipe-hint svg {
  width: 12px; height: 12px;
  animation: pdsBounce 2.2s ease-in-out infinite;
}
@keyframes pdsBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Show hint only at half state with stagger */
.pub-desc-sheet[data-state="half"] .pds-swipe-hint {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

/* Hide hint at full state with quick exit */
.pub-desc-sheet[data-state="full"] .pds-swipe-hint {
  opacity: 0;
  transform: translateY(-6px);
  transition-delay: 0s;
}

/* Section header, gradient underline, glow icon */
.pds-header {
  flex-shrink: 0;
  padding: 0 24px 14px;
  display: flex; align-items: center; gap: 12px;
  position: relative;
}

/* Gradient underline instead of solid border */
.pds-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(167,139,250,0.25) 20%, rgba(167,139,250,0.4) 50%, rgba(167,139,250,0.25) 80%, transparent 100%);
}

.pds-header-icon {
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--biz-vd);
  border: 0.5px solid rgba(167,139,250,0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--biz-violet);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.pds-header-icon:hover {
  box-shadow: 0 0 20px rgba(167,139,250,0.3);
  transform: scale(1.05);
}
.pds-header-icon svg { width: 14px; height: 14px; }

.pds-header-title {
  font-size: 15px; font-weight: 800;
  letter-spacing: -0.01em;
  color: #ede8ff;
}

/* Scrollable content, premium typography */
.pds-content {
  flex: 1; min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 22px 24px 90px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pds-content::-webkit-scrollbar { display: none; }

/* Content typography, refined */
.pds-content p {
  margin: 0 0 16px;
  font-size: 15.5px; line-height: 1.75;
  color: rgba(237,232,255,0.82);
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(10px);
  animation: pdsContentFadeIn 0.5s ease forwards;
}
/* Stagger paragraphs */
.pds-content p:nth-child(1) { animation-delay: 0.08s; }
.pds-content p:nth-child(2) { animation-delay: 0.16s; }
.pds-content p:nth-child(3) { animation-delay: 0.24s; }
.pds-content p:nth-child(4) { animation-delay: 0.32s; }
.pds-content p:nth-child(5) { animation-delay: 0.40s; }
.pds-content p:nth-child(6) { animation-delay: 0.48s; }

@keyframes pdsContentFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

.pds-content p:last-child { margin-bottom: 0; }
.pds-content strong, .pds-content b { color: #ede8ff; font-weight: 700; }
.pds-content h1, .pds-content h2, .pds-content h3, .pds-content h4 {
  color: #ede8ff; font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 12px;
  opacity: 0;
  transform: translateY(8px);
  animation: pdsContentFadeIn 0.45s ease forwards;
  animation-delay: 0.05s;
}
.pds-content ul, .pds-content ol {
  padding-left: 24px; margin: 0 0 16px;
  color: rgba(237,232,255,0.82); font-size: 15px; line-height: 1.7;
}
.pds-content li { margin-bottom: 7px; }

/* ── Smart height: auto-size for short content ─────────────────────── */
.pub-desc-sheet.is-auto-height {
  height: auto !important;
  max-height: 85vh;
}
.pub-desc-sheet.is-auto-height .pds-content {
  max-height: 65vh;
  overflow-y: auto;
}

/* ── Rubber-band resistance at limits ──────────────────────────────── */
.pub-desc-sheet.is-rubber {
  transition: transform 0.3s ease, height 0.3s ease;
}

/* ── Read More button (enhanced with arrow animation) ──────────────── */
.pub-read-more {
  display: none;
  align-items: center; gap: 6px;
  margin-top: 10px; padding: 0;
  background: none; border: 0;
  color: var(--biz-violet, #a78bfa);
  font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: opacity 0.15s ease, gap 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.pub-read-more:hover { opacity: 0.75; gap: 9px; }
.pub-read-more svg {
  width: 12px; height: 12px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pub-read-more.is-expanded svg {
  transform: rotate(180deg);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .pds-content { padding: 18px 20px 80px; }
  .pds-header { padding: 0 20px 12px; }
  .pds-header::after { left: 20px; right: 20px; }
  body.pub-desc-layered .pub-page,
  body.pub-desc-layered .pub-card-grid,
  body.pub-desc-layered .pub-card-single {
    transform: scale(0.93) translateY(-1.5%);
    border-radius: 14px;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .pub-desc-sheet,
  .pub-desc-backdrop,
  body.pub-desc-layered .pub-page,
  body.pub-desc-layered .pub-card-grid,
  body.pub-desc-layered .pub-card-single {
    transition: none !important;
  }
  .pds-content p {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .pds-swipe-hint svg {
    animation: none !important;
  }
}
/* ══════════════════════════════════════════════════════════════════════
   CASH REFUND, secure bank details link (attendee-facing)
   ══════════════════════════════════════════════════════════════════════ */

.pub-crb-shell {
  max-width: 440px;
  margin: 0 auto;
  padding: 40px 20px;
}
.pub-crb-card {
  background: rgba(12,9,26,0.6);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  padding: 32px 26px;
  text-align: center;
}
.pub-crb-icon {
  width: 52px; height: 52px;
  border-radius: 15px;
  background: rgba(167,139,250,0.1);
  border: 0.5px solid rgba(167,139,250,0.25);
  color: var(--biz-violet, #a78bfa);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.pub-crb-icon svg { width: 24px; height: 24px; }
.pub-crb-icon--warn { background: rgba(245,166,35,0.1); border-color: rgba(245,166,35,0.25); color: #f5a623; }
.pub-crb-icon--success { background: rgba(52,211,153,0.1); border-color: rgba(52,211,153,0.25); color: #34d399; }

.pub-crb-title { font-size: 19px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.pub-crb-sub { font-size: 13.5px; color: var(--biz-text2, rgba(237,232,255,0.6)); line-height: 1.6; margin: 0 0 20px; }
.pub-crb-sub strong { color: #fff; }

.pub-crb-form { text-align: left; }
.pub-crb-label {
  display: block;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--biz-text3, rgba(237,232,255,0.4));
  margin: 12px 0 6px;
}
.pub-crb-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 11px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.14);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
}
.pub-crb-submit-btn {
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(180deg, #c4b5fd, #a78bfa);
  color: #1e0a4a;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.pub-crb-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--biz-text3, rgba(237,232,255,0.4));
  margin: 16px 0 0;
}
.pub-crb-security-note svg { width: 13px; height: 13px; flex-shrink: 0; }

.pub-tp-tba-note {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #a78bfa !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

.pub-infobar-value--tba {
  color: #a78bfa;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  max-width: 260px;
  white-space: normal;
}

.pub-card-pill--tba {
  color: #a78bfa;
  border-color: rgba(167,139,250,0.3) !important;
  background: rgba(167,139,250,0.08) !important;
}

.pub-tba-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(167,139,250,0.06);
  border: 0.5px solid rgba(167,139,250,0.2);
  color: #c4b5fd;
  font-size: 13px;
  line-height: 1.55;
}
.pub-tba-message svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: #a78bfa; }

.pub-bs-info-val--tba {
  color: #a78bfa;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}
.pub-pr-event-meta--tba {
  color: #a78bfa;
  font-size: 12.5px;
  line-height: 1.5;
}

.pub-cr-detail-row--wide { flex-direction: column; align-items: flex-start; gap: 4px; }
.pub-cr-detail-row--wide .pub-cr-detail-value { text-align: left; }
.pub-cr-detail-value--tba {
  color: #a78bfa;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════
   APPLE-STYLE SEARCH BAR, sticky Dynamic Island. Collapsed shows search
   prompt + location inline; expanded is a compact input row with icon
   buttons for location/filter, each opening its own small popover
   (matching the business account panel pattern) instead of showing
   filter rows inline inside the search bar itself.
   ════════════════════════════════════════════════════════════════════════ */

.pub-search-di {
  position: sticky;
  top: 16px;
  z-index: 50;
  width: 100%;
  max-width: 920px;
  margin: 0 auto 28px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pub-search-di-pill {
  position: relative;
  height: 50px;
  width: 300px;
  background: rgba(12,10,24,0.7);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 25px;
  backdrop-filter: blur(28px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 20px 50px -18px rgba(0,0,0,0.55);
  overflow: hidden;
  transition: width 0.52s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.pub-search-di.is-expanded .pub-search-di-pill {
  width: min(560px, calc(100vw - 48px));
  max-width: 100%;
  border-color: rgba(167,139,250,0.45);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 16px 44px rgba(0,0,0,0.45), 0 0 40px rgba(124,58,237,0.18);
}

.pub-search-di-collapsed {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 6px 0 18px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.pub-search-di.is-expanded .pub-search-di-collapsed {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.pub-search-di-left { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; height: 100%; }
.pub-search-di-left svg { width: 16px; height: 16px; color: var(--biz-violet); flex-shrink: 0; }
.pub-search-di-left span { font-size: 13.5px; font-weight: 600; color: rgba(237,232,255,0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pub-search-di-loc-pill {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 50px;
  background: rgba(167,139,250,0.12);
  border: 0.5px solid rgba(167,139,250,0.25);
  color: #c4b5fd;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pub-search-di-loc-pill svg:first-child { width: 12px; height: 12px; flex-shrink: 0; }
.pub-search-di-loc-pill:hover { background: rgba(167,139,250,0.2); }
.pub-search-di-loc-pill:active { transform: scale(0.94); }

.pub-search-di-expanded {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px 0 18px;
  opacity: 0;
  pointer-events: none;
  /* Delayed fade-in, lets the pill's own width transition get a head
     start before the expanded content appears, which is what makes
     this read as a genuine morph rather than an instant content swap
     riding along on top of a resizing box. */
  transition: opacity 0.3s ease 0.16s;
}
.pub-search-di.is-expanded .pub-search-di-expanded {
  opacity: 1;
  pointer-events: auto;
}

.pub-search-di-icon { width: 16px; height: 16px; color: var(--biz-violet); flex-shrink: 0; }
.pub-search-input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font-size: 14.5px; font-weight: 600; color: #fff; font-family: inherit;
}
.pub-search-input::placeholder { color: rgba(237,232,255,0.35); font-weight: 500; }

.pub-search-icon-btn {
  position: relative;
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: none; color: rgba(237,232,255,0.75);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pub-search-icon-btn svg { width: 15px; height: 15px; }
.pub-search-icon-btn:hover { background: rgba(167,139,250,0.18); color: #c4b5fd; }
.pub-search-icon-btn:active { transform: scale(0.88); }
.pub-filter-badge-dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--biz-violet);
  border: 1.5px solid rgba(14,11,28,0.92);
  animation: pubResultPop 0.3s cubic-bezier(0.34, 1.8, 0.64, 1) both;
}

/* Active filter summary chips below the pill */
.pub-active-filters {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  align-self: stretch;
  margin-top: 10px;
  animation: pubResultPop 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
.pub-active-filter-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: 50px;
  background: rgba(167,139,250,0.1);
  border: 0.5px solid rgba(167,139,250,0.25);
  color: #c4b5fd;
  font-size: 11.5px; font-weight: 700;
}
.pub-active-filter-tag svg { width: 11px; height: 11px; }

.pub-search-results {
  margin-top: 12px;
  width: 100%;
  max-width: 560px;
  align-self: center;
  max-height: 400px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px;
  border-radius: 20px;
  background: rgba(14,11,28,0.92);
  border: 0.5px solid rgba(167,139,250,0.2);
  backdrop-filter: blur(20px);
  box-shadow: 0 16px 44px rgba(0,0,0,0.35);
}
.pub-search-result-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  transition: background 0.15s ease;
  animation: pubResultPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.pub-search-result-row:hover { background: rgba(255,255,255,0.05); }
@keyframes pubResultPop {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.pub-search-result-info { flex: 1; min-width: 0; }
.pub-search-result-title { font-size: 13.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-search-result-title mark.pub-search-highlight { background: rgba(167,139,250,0.35); color: #fff; border-radius: 3px; padding: 0 1px; }
.pub-search-result-meta { font-size: 11.5px; color: rgba(237,232,255,0.45); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-search-result-price { font-size: 12.5px; font-weight: 800; color: var(--biz-violet); flex-shrink: 0; }
.pub-search-no-results { padding: 24px 12px; text-align: center; font-size: 13px; color: rgba(237,232,255,0.4); }

/* ════════════════════════════════════════════════════════════════════════
   POPOVERS, location & filter. Small, anchored-feel spring-scale
   modals, matching the business account panel's overall quality without
   being full-screen slide-overs, since these are lightweight choices.
   ════════════════════════════════════════════════════════════════════════ */

.pub-popover-overlay {
  position: fixed; inset: 0; z-index: 700;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 90px 20px 20px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.pub-popover-overlay.is-open { opacity: 1; visibility: visible; }
.pub-popover {
  width: 100%; max-width: 360px;
  background: rgba(20,16,38,0.98);
  border: 0.5px solid rgba(167,139,250,0.28);
  border-radius: 22px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.55);
  padding: 20px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  transform: scale(0.92) translateY(-10px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pub-popover-overlay.is-open .pub-popover { transform: scale(1) translateY(0); }
.pub-popover--filter { max-width: 420px; }
.pub-popover-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pub-popover-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: #fff; }
.pub-popover-close {
  width: 28px; height: 28px; border-radius: 9px;
  background: rgba(255,255,255,0.06); border: none; color: rgba(237,232,255,0.6);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s ease;
}
.pub-popover-close svg { width: 13px; height: 13px; }
.pub-popover-close:hover { background: rgba(255,255,255,0.12); }

.pub-popover-option {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  background: rgba(167,139,250,0.1);
  font-size: 13.5px; font-weight: 700; color: #fff;
}
.pub-popover-option svg:first-child { width: 15px; height: 15px; color: var(--biz-violet); flex-shrink: 0; }
.pub-popover-check { width: 15px; height: 15px; color: #34d399; margin-left: auto; flex-shrink: 0; }
.pub-popover-note {
  margin-top: 10px;
  padding: 11px 13px;
  border-radius: 12px;
  background: rgba(255,176,32,0.06);
  border: 0.5px solid rgba(255,176,32,0.18);
  font-size: 12px; line-height: 1.5; color: #ffcb66;
}

.pub-popover-section-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(237,232,255,0.4);
  margin: 16px 0 8px;
}
.pub-popover-section-label:first-of-type { margin-top: 0; }

.pub-filter-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pub-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 50px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.1);
  color: rgba(237,232,255,0.6);
  font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.34, 1.2, 0.64, 1), border-color 0.2s ease, color 0.2s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pub-filter-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.pub-filter-chip:hover { background: rgba(255,255,255,0.07); }
.pub-filter-chip:active { transform: scale(0.95); }
.pub-filter-chip.is-active {
  background: linear-gradient(135deg, rgba(167,139,250,0.28), rgba(124,58,237,0.2));
  border-color: rgba(167,139,250,0.5);
  color: #fff;
}


/* ════════════════════════════════════════════════════════════════════════
   CATEGORY BADGE (on cards) + HERO ACTION BUTTONS (share / report)
   ════════════════════════════════════════════════════════════════════════ */

.pub-card-category-badge {
  position: absolute; top: 52px; left: 12px; z-index: 5;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: 50px;
  background: rgba(20,16,38,0.75);
  backdrop-filter: blur(10px);
  border: 0.5px solid rgba(167,139,250,0.3);
  color: #c4b5fd;
  font-size: 11px; font-weight: 700;
}
.pub-card-category-badge svg { width: 13px; height: 13px; flex-shrink: 0; }

.pub-card-hero-actions {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  display: flex; gap: 8px;
}
.pub-card-hero-action-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,16,38,0.75);
  backdrop-filter: blur(10px);
  border: 0.5px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s ease, border-color 0.15s ease;
}
.pub-card-hero-action-btn svg { width: 15px; height: 15px; }
.pub-card-hero-action-btn:hover { background: rgba(167,139,250,0.3); border-color: rgba(167,139,250,0.4); }
.pub-card-hero-action-btn:active { transform: scale(0.88); }

/* ════════════════════════════════════════════════════════════════════════
   SHARE MODAL
   ════════════════════════════════════════════════════════════════════════ */

.pub-share-card { max-width: 380px; }
.pub-share-title { font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 16px; }
.pub-share-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.pub-share-opt {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 4px;
  border-radius: 14px;
  background: none; border: none; text-decoration: none;
  color: rgba(237,232,255,0.7);
  font-size: 10.5px; font-weight: 600; text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pub-share-opt:hover { background: rgba(255,255,255,0.05); }
.pub-share-opt:active { transform: scale(0.92); }
.pub-share-opt-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.pub-share-opt-icon svg { width: 19px; height: 19px; }
.pub-share-opt-icon--copy { background: rgba(167,139,250,0.25); }
.pub-share-opt-icon--email { background: rgba(255,255,255,0.1); }
.pub-share-opt-icon--facebook { background: #1877f2; }
.pub-share-opt-icon--linkedin { background: #0a66c2; }
.pub-share-opt-icon--x { background: #000; }
.pub-share-opt-icon--messenger { background: linear-gradient(135deg, #00b2ff, #a033ff, #ff5280); }
.pub-share-opt-icon--telegram { background: #29a9eb; }
.pub-share-opt-icon--whatsapp { background: #25d366; }
.pub-share-opt.is-copied .pub-share-opt-icon--copy { background: #34d399; animation: pubCopyPop 0.4s cubic-bezier(0.34, 1.8, 0.64, 1); }
@keyframes pubCopyPop { 0% { transform: scale(1); } 40% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* ════════════════════════════════════════════════════════════════════════
   REPORT MODAL
   ════════════════════════════════════════════════════════════════════════ */

.pub-report-card { max-width: 420px; }
.pub-report-title { font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 6px; }
.pub-report-sub { font-size: 13px; color: rgba(237,232,255,0.55); line-height: 1.5; margin: 0 0 16px; }
.pub-report-label { display: block; font-size: 12px; font-weight: 700; color: rgba(237,232,255,0.8); margin-bottom: 6px; }
.pub-report-label-opt { font-weight: 500; color: rgba(237,232,255,0.4); }
.pub-report-textarea, .pub-report-input {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px; margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.1);
  color: #fff; font-size: 13.5px; font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease;
}
.pub-report-textarea:focus, .pub-report-input:focus { border-color: rgba(167,139,250,0.5); }
.pub-report-textarea { resize: vertical; min-height: 80px; }
.pub-report-error, .pub-report-success {
  padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; margin-bottom: 14px;
  animation: pubResultPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.pub-report-error { background: rgba(248,113,113,0.08); border: 0.5px solid rgba(248,113,113,0.22); color: #fca5a5; }
.pub-report-success { background: rgba(52,211,153,0.08); border: 0.5px solid rgba(52,211,153,0.22); color: #6ee7b7; }
.pub-report-submit-btn {
  width: 100%; padding: 13px; border-radius: 14px; border: none;
  background: linear-gradient(180deg, #c4b5fd, #a78bfa);
  color: #1e0a4a; font-size: 14px; font-weight: 800; font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pub-report-submit-btn:active { transform: scale(0.97); }
.pub-report-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 640px) {
  .pub-share-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .pub-filter-chip-row { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .pub-filter-chip-row::-webkit-scrollbar { display: none; }
  .pub-filter-chip { flex-shrink: 0; }
  .pub-search-di-pill { width: 100%; max-width: 100%; }
  .pub-search-di.is-expanded .pub-search-di-pill { width: 100%; }
  .pub-popover-overlay { padding: 60px 16px 16px; }
  .pub-popover { max-width: calc(100vw - 32px); padding: 16px; }
  .pub-popover--filter .pub-filter-chip-row {
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    padding-bottom: 2px; margin: 0 -16px; padding-left: 16px; padding-right: 16px;
  }
  .pub-popover--filter .pub-filter-chip-row::-webkit-scrollbar { display: none; }
  .pub-popover--filter .pub-filter-chip { flex-shrink: 0; padding: 6px 12px; font-size: 12px; }
  .pub-popover-section-label { margin: 12px 0 6px; }
}

/* ════════════════════════════════════════════════════════════════════════
   PUBLIC SESSION CALENDAR (pub-cal-*, pub-session-picker-*)
   ════════════════════════════════════════════════════════════════════════ */

.pub-session-picker-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,0,0,0.2); border: 0.5px solid rgba(167,139,250,0.22); border-radius: 12px;
  color: var(--biz-text); padding: 12px 14px; font-size: 14px; font-family: inherit; cursor: pointer;
  transition: border-color 0.2s ease;
}
.pub-session-picker-btn:hover { border-color: rgba(167,139,250,0.45); }
.pub-session-picker-btn svg { width: 16px; height: 16px; color: var(--biz-violet); flex-shrink: 0; }
#pubSessionPickerLabel { color: var(--biz-text2); }

.pub-no-sessions {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.02); border: 0.5px dashed rgba(255,255,255,0.14); border-radius: 12px;
  color: var(--biz-text3); padding: 14px; font-size: 13.5px; font-weight: 600;
}
.pub-no-sessions svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.6; }

.pub-cal-modal {
  position: fixed; inset: 0; z-index: 950;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s;
}
.pub-cal-modal.is-open { opacity: 1; visibility: visible; }
.pub-cal-backdrop { position: absolute; inset: 0; background: rgba(5,4,12,0.75); backdrop-filter: blur(6px); }

.pub-cal-card {
  position: relative; z-index: 1; width: 100%; max-width: 420px; max-height: 86vh; overflow-y: auto;
  background: rgba(18,15,32,0.98); border: 0.5px solid rgba(167,139,250,0.25); border-radius: 22px;
  padding: 22px; transform: scale(0.94) translateY(12px); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.pub-cal-modal.is-open .pub-cal-card { transform: scale(1) translateY(0); }

.pub-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.pub-cal-head h2 { font-size: 15px; font-weight: 800; color: var(--biz-text); margin: 0; }
.pub-cal-close { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.06); border: none; color: var(--biz-text2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pub-cal-close svg { width: 12px; height: 12px; }

.pub-cal-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; font-size: 10.5px; color: var(--biz-text2); }
.pub-cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pub-cal-dot { width: 7px; height: 7px; border-radius: 50%; }
.pub-cal-dot--green { background: #34d399; }
.pub-cal-dot--yellow { background: #f5a623; }
.pub-cal-dot--red { background: #f87171; }
.pub-cal-dot--grey { background: rgba(237,232,255,0.25); }

.pub-cal-month-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.pub-cal-nav-btn { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 0.5px solid rgba(167,139,250,0.2); color: var(--biz-text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pub-cal-nav-btn svg { width: 13px; height: 13px; }
.pub-cal-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.pub-cal-month-label { font-size: 13px; font-weight: 800; color: var(--biz-text); min-width: 130px; text-align: center; }

.pub-cal-weekdays { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-bottom: 6px; }
.pub-cal-weekdays span { text-align: center; font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: rgba(237,232,255,0.4); }

.pub-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-bottom: 4px; }
.pub-cal-cell {
  position: relative; aspect-ratio: 1; border-radius: 9px; border: 0.5px solid rgba(167,139,250,0.15);
  background: rgba(255,255,255,0.02); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
}
.pub-cal-cell:not(:disabled):hover { transform: scale(1.08); z-index: 1; }
.pub-cal-cell--blank { border: none; background: none; cursor: default; }
.pub-cal-cell-num { font-size: 11.5px; font-weight: 700; color: var(--biz-text); }
.pub-cal-cell--grey { border-color: rgba(167,139,250,0.15); }
.pub-cal-cell--green { border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.08); }
.pub-cal-cell--yellow { border-color: rgba(245,166,35,0.4); background: rgba(245,166,35,0.08); }
.pub-cal-cell--red { border-color: rgba(248,113,113,0.35); background: rgba(248,113,113,0.06); }
.pub-cal-cell:disabled:not(.pub-cal-cell--blank) { cursor: not-allowed; opacity: 0.55; }
.pub-cal-cell--past { opacity: 0.25; }

.pub-cal-day-panel { margin-top: 16px; padding-top: 16px; border-top: 0.5px solid rgba(167,139,250,0.15); }
.pub-cal-day-panel h3 { font-size: 13px; font-weight: 800; color: var(--biz-text); margin: 0 0 10px; }
.pub-cal-loading { font-size: 12.5px; color: var(--biz-text2); text-align: center; padding: 10px 0; }

.pub-cal-session-btn {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 8px; cursor: pointer; text-align: left;
  background: rgba(167,139,250,0.06); border: 0.5px solid rgba(167,139,250,0.2); font-family: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.pub-cal-session-btn:hover:not(:disabled) { border-color: rgba(167,139,250,0.5); transform: translateY(-1px); }
.pub-cal-session-btn.is-full { opacity: 0.5; cursor: not-allowed; }
.pub-cal-session-time { font-size: 13.5px; font-weight: 700; color: var(--biz-text); }
.pub-cal-session-spots { font-size: 11px; color: #34d399; font-weight: 700; }
.pub-cal-session-spots--calm { color: var(--biz-text2); font-weight: 600; }
.pub-cal-session-full { font-size: 11px; color: #f87171; font-weight: 700; }
.pub-cal-session-variations { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.pub-cal-variation-tag {
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 50px;
  background: rgba(167,139,250,0.15); color: #c4b5fd;
}