/* Replica of the real Vuexy / light-style platform chrome and surfaces.
   Used by marketing reconstructions only. Keep animations; do not invent a new UI. */

:root {
  --ar-primary: #666cff;
  --ar-brand: #579bd4;
  --ar-teal: #42bc9c;
  --ar-ink: #3b4056;
  --ar-muted: #6d788d;
  --ar-faint: #a1acb8;
  --ar-line: #e6e6e8;
  --ar-menu: #f7f7f9;
  --ar-page: #f5f5f9;
  --ar-card: #fff;
  --ar-shadow: 0 0.25rem 0.875rem 0 rgba(38, 43, 67, 0.16);
}

/* —— Shared film chrome (home hero stays as-is; feature heroes use Vuexy .fx-vxy) —— */
.bv-film,
.fx-film {
  background: #fff;
  border: 1px solid rgba(75, 70, 92, 0.08);
  box-shadow: var(--ar-shadow), 0 18px 48px rgba(38, 43, 67, 0.1);
  overflow: hidden;
}
.fx-film.fx-vxy {
  background: #f5f5f9;
}
.bv-film__bar,
.fx-film__bar {
  background: #fff;
  border-bottom: 1px solid var(--ar-line);
}
.bv-film__search,
.fx-film__search {
  background: var(--ar-menu);
  border: 1px solid var(--ar-line);
  color: var(--ar-faint);
  border-radius: 6px;
}
.bv-film__body,
.fx-film__body {
  background: var(--ar-page);
}
.bv-film__rail,
.fx-film__rail {
  background: var(--ar-menu);
  border-right: 1px solid var(--ar-line);
}
.bv-film__brand,
.fx-film__brand {
  color: var(--ar-brand);
  font-weight: 600;
}
.bv-film__brand img,
.fx-film__brand img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.bv-film__rail li,
.fx-film__rail li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ar-ink);
  border-radius: 6px;
}
.bv-film__rail li i,
.fx-film__rail li i {
  width: 16px;
  text-align: center;
  font-size: 14px;
}
.bv-film__rail li.is-on,
.fx-film__rail li.is-on {
  background: #dcf6fe;
  color: #26c6f9;
  transform: none;
  font-weight: 500;
}
.bv-film__main,
.fx-film__main {
  background: var(--ar-page);
}
.bv-film__kicker,
.fx-film__kicker {
  color: var(--ar-muted);
  letter-spacing: 0.04em;
}

/* Member profile — matches /member header + pills + cards */
.fx-profile {
  gap: 10px;
  font-family: Inter, system-ui, sans-serif;
}
.fx-profile__head {
  grid-template-columns: 56px 1fr auto;
  padding: 12px 14px 14px;
  border-radius: 8px;
  box-shadow: var(--ar-shadow);
  background: #fff;
}
.fx-profile__ava {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ar-brand), var(--ar-teal));
  font-size: 16px;
}
.fx-profile__who b { font-size: 15px; font-weight: 600; color: var(--ar-ink); }
.fx-profile__status {
  border-color: #28c76f;
  color: #28c76f;
  border-radius: 999px;
  padding: 4px 12px;
}
.fx-profile__tabs span {
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
}
.fx-profile__tabs span.is-on {
  background: var(--ar-primary);
  color: #fff;
}
.fx-profile__card {
  border-radius: 8px;
  box-shadow: var(--ar-shadow);
  padding: 12px 14px;
}
.fx-profile__card small {
  color: var(--ar-faint);
}
.fx-profile__card:hover {
  transform: scale(1.08);
}

/* Payments ledger — real table columns */
.fx-book {
  background: #fff;
  border: 1px solid var(--ar-line);
  border-radius: 8px;
  box-shadow: var(--ar-shadow);
  overflow: hidden;
  color: var(--ar-ink);
}
.fx-book header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ar-line);
}
.fx-book header span { color: var(--ar-muted); font-size: 11px; }
.fx-book header b { font-size: 14px; }
.fx-book table { width: 100%; border-collapse: collapse; font-size: 11px; }
.fx-book th,
.fx-book td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--ar-line);
  text-align: left;
  white-space: nowrap;
}
.fx-book th { background: #f6f7fb; color: var(--ar-muted); font-weight: 600; }
.fx-book tr.is-focus,
.fx-book tr.is-on { background: rgba(102, 108, 255, 0.08); }

/* Events listing replica */
.fx-elist { display: grid; gap: 10px; }
.fx-elist__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.fx-elist__metrics article {
  background: #fff;
  border: 1px solid var(--ar-line);
  border-radius: 8px;
  box-shadow: var(--ar-shadow);
  padding: 10px;
}
.fx-elist__metrics i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #e7e7ff;
  color: var(--ar-primary);
  margin-bottom: 6px;
}
.fx-elist__metrics article:nth-child(2) i { background: #d4f5e9; color: #28c76f; }
.fx-elist__metrics article:nth-child(3) i { background: #fff3d6; color: #ff9f43; }
.fx-elist__metrics article:nth-child(4) i { background: #ffe2e3; color: #ea5455; }
.fx-elist__metrics b { display: block; font-size: 18px; letter-spacing: -0.03em; }
.fx-elist__metrics span { display: block; font-size: 10px; color: var(--ar-muted); }
.fx-elist__card {
  background: #fff;
  border: 1px solid var(--ar-line);
  border-radius: 8px;
  box-shadow: var(--ar-shadow);
  overflow: hidden;
}
.fx-elist__card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ar-line);
}
.fx-elist__card header b { font-size: 13px; }
.fx-elist__card header div { display: flex; gap: 4px; }
.fx-elist__card header span {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--ar-primary);
  color: var(--ar-primary);
  font-size: 10px;
  font-weight: 600;
}
.fx-elist__card header span.is-on { background: var(--ar-primary); color: #fff; }
.fx-elist__card header em {
  font-style: normal;
  background: var(--ar-primary);
  color: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 600;
}
.fx-elist table { width: 100%; border-collapse: collapse; font-size: 11px; }
.fx-elist th,
.fx-elist td { padding: 8px 10px; border-bottom: 1px solid var(--ar-line); text-align: left; }
.fx-elist th { background: #f6f7fb; color: var(--ar-muted); }
.fx-elist tr.is-on { background: rgba(102, 108, 255, 0.08); }

/* Members list replica */
.fx-mlist { background: #fff; border: 1px solid var(--ar-line); border-radius: 8px; box-shadow: var(--ar-shadow); overflow: hidden; }
.fx-mlist__tabs { display: flex; gap: 0; padding: 0 8px; border-bottom: 1px solid var(--ar-line); }
.fx-mlist__tabs span {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ar-muted);
  border: 1px solid var(--ar-line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  margin-bottom: -1px;
  background: #fff;
}
.fx-mlist__tabs span.is-on { color: var(--ar-primary); font-weight: 700; box-shadow: inset 0 -3px 0 0 var(--ar-brand); }
.fx-mlist table { width: 100%; border-collapse: collapse; font-size: 11px; }
.fx-mlist th,
.fx-mlist td { padding: 8px 10px; border-bottom: 1px solid var(--ar-line); text-align: left; }
.fx-mlist th { background: #f6f7fb; color: var(--ar-muted); }
.fx-mlist tr.is-on { background: rgba(102, 108, 255, 0.08); }
.fx-mlist .tag,
.fx-profile .tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: #d7f5fc;
  color: #03c3ec;
  font-size: 9px;
  font-style: normal;
}

/* Public form — light mode of /forms/display */
.fx-liveform {
  color: var(--ar-ink);
}
.fx-liveform__page {
  background: var(--ar-page);
  border-radius: 12px;
  padding: 16px 14px 12px;
}
.fx-liveform__card {
  background: #fff;
  border: 1px solid var(--ar-line);
  border-radius: 10px;
  box-shadow: var(--ar-shadow);
}
.fx-liveform__bar { background: var(--ar-primary); }
.fx-liveform__page h3 { color: var(--ar-ink); }
.fx-liveform input,
.fx-liveform__choice {
  background: #fff;
  border: 1px solid #d9dee3;
  color: var(--ar-ink);
}
.fx-liveform__choice.is-picked {
  border-color: var(--ar-primary);
  box-shadow: 0 0 0 3px rgba(102, 108, 255, 0.16);
}
.fx-liveform__submit {
  background: var(--ar-primary);
  color: #fff;
}
.fx-liveform__pop {
  background: #fff;
  border: 1px solid var(--ar-line);
  color: var(--ar-ink);
  box-shadow: 0 18px 40px rgba(38, 43, 67, 0.16);
}
.fx-liveform__pop--stripe header b { color: #635bff; }

.fx-meter,
.fx-cal,
.fx-class,
.fx-roster,
.fx-audience,
.fx-care,
.fx-ticket,
.fx-phone {
  background: #fff;
  border: 1px solid var(--ar-line);
  border-radius: 8px;
  box-shadow: var(--ar-shadow);
  color: var(--ar-ink);
}

.ev-admin,
.ev-admin__card {
  background: #fff;
  border-color: var(--ar-line);
  box-shadow: var(--ar-shadow);
}
.ev-admin__metrics article {
  background: #fff;
  border: 1px solid var(--ar-line);
  box-shadow: var(--ar-shadow);
}

/* —— Desktop Vuexy stage: render 1280×760 then scale into the marketing frame —— */
.bv-app,
.fx-film.fx-vxy,
.fx-ptx,
.fx-attend {
  container-type: inline-size;
  container-name: fxstage;
}
.fx-vxy-stage {
  --fx-w: 1280px;
  --fx-h: 760px;
  width: var(--fx-w);
  height: var(--fx-h);
  display: flex;
  transform-origin: top left;
  zoom: calc(100cqw / 1280);
  font-family: "Public Sans", Inter, system-ui, sans-serif;
  color: #3b4056;
}
@supports not (zoom: 1) {
  .fx-vxy-stage {
    transform: scale(calc(100cqw / 1280));
  }
  .bv-app,
  .fx-film.fx-vxy,
  .fx-ptx,
  .fx-attend {
    height: calc(760px * 100cqw / 1280);
    overflow: hidden;
  }
}

/* —— Exact Vuexy left nav + detached top bar (home Features + feature heroes) —— */
.fx-vnav {
  position: relative;
  width: 16.25rem;
  flex: 0 0 16.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f7f7f9;
  color: #3b4056;
  font-family: "Public Sans", Inter, system-ui, sans-serif;
  overflow: hidden;
}
.fx-vnav__shadow {
  display: block;
  position: absolute;
  top: 3.5rem;
  left: 0;
  width: 100%;
  height: 3rem;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(#f7f7f9 40%, rgba(247, 247, 249, 0));
  opacity: 0;
}
.fx-vnav__brand {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 1rem 0 1.375rem;
}
.fx-vnav__brand-link {
  display: flex;
  align-items: center;
  min-width: 0;
}
.fx-vnav__logo img {
  display: block;
  width: 35px;
  height: 35px;
  object-fit: contain;
}
.fx-vnav__text {
  margin-left: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.15px;
  color: #579bd4;
  line-height: 1;
  white-space: nowrap;
}
.fx-vnav__collapse {
  margin-left: auto;
  display: grid;
  place-items: center;
  color: #262b43;
}
.fx-vnav__menu {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 1rem;
  flex: 1 1 auto;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fx-vnav__head {
  display: flex;
  align-items: center;
  margin: 1.25rem 0.75rem 0;
  padding: 0.437rem 0.75rem;
  color: #acaeb8;
  font-size: 0.8125rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.fx-vnav__item { margin: 0.25rem 0 0; list-style: none; }
.fx-vnav__row {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 38px;
  margin: 0 0.75rem;
  padding: 0.437rem 0.75rem;
  border-radius: 0.375rem;
  color: #3b4056;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.15px;
  line-height: 1.467;
}
.fx-vnav__row i {
  flex: 0 0 auto;
  margin-right: 0.5rem;
  font-size: 1.375rem;
  line-height: 1;
  width: 1.375rem;
  text-align: center;
}
.fx-vnav__row div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fx-vnav__row--toggle { padding-right: calc(0.75rem + 1.68em); }
.fx-vnav__row--toggle::after {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  font-family: remixicon, sans-serif;
  font-size: 1.375rem;
  color: #3b4056;
  transform: translateY(-50%);
  content: "\ea6e";
}
.fx-vnav__item.is-open > .fx-vnav__row--toggle { background: rgba(38, 43, 67, 0.08); }
.fx-vnav__item.is-open > .fx-vnav__row--toggle::after { transform: translateY(-50%) rotate(90deg); }
.fx-vnav__item.is-on > .fx-vnav__row {
  background: #dcf6fe;
  color: #26c6f9;
  border-radius: 0.375rem;
}
.fx-vnav__sub { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fx-vnav__subitem .fx-vnav__row { padding: 0.5rem 0.75rem 0.5rem 2.55rem; }
.fx-vnav__subitem .fx-vnav__row::before {
  content: "";
  position: absolute;
  left: 1.1875rem;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50rem;
  background: currentColor;
  color: #a8aab4;
}
.fx-vnav__subitem.is-on .fx-vnav__row {
  background: #dcf6fe;
  color: #26c6f9;
  border-radius: 0.375rem;
}
.fx-vnav__subitem.is-on .fx-vnav__row::before { color: #26c6f9; }

.fx-vxy__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  height: 4rem;
  width: calc(100% - 1.5rem * 2);
  margin: 1rem 1.5rem 0;
  padding: 0 1.25rem;
  background: #fff;
  border-radius: 0.625rem;
  box-shadow: 0 0.25rem 0.875rem 0 rgba(38, 43, 67, 0.16);
  color: #676b7b;
  backdrop-filter: blur(6px);
  z-index: 2;
}
.fx-vxy__tools {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 0.25rem;
}
.fx-vxy__btn {
  width: calc(2.2502625rem + 2px);
  height: calc(2.2502625rem + 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50rem;
  color: #6d788d;
  font-size: 1.375rem;
}
.fx-vxy__btn .ri-22px { font-size: 1.375rem; line-height: 1; }
.fx-vxy__btn--bell { margin-right: 1.5rem; }
.fx-vxy__avatar {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  cursor: default;
}
.fx-vxy__initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e7e7ff;
  color: #666cff;
  font-size: 0.9375rem;
  font-weight: 500;
  text-transform: uppercase;
}
.fx-vxy__avatar::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 0;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #72e128;
  box-shadow: 0 0 0 2px #fff;
}

/* Vuexy DataTable card — matches /member/list + membership.ejs + payment_transactions */
.fx-dt { min-width: 0; }
.fx-dt__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e5e6e8;
}
.fx-dt__tabs span {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 0.25rem -1px 0;
  padding: 0.875rem 1.75rem;
  border: 1px solid #e5e6e8;
  border-bottom: none;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  background: #fff;
  color: #6d788d;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  opacity: 0.7;
}
.fx-dt__tabs span.is-on {
  color: #666cff;
  font-weight: 700;
  letter-spacing: 0.5px;
  opacity: 1;
  z-index: 3;
  border-bottom-color: #fff;
}
.fx-dt__tabs span.is-on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(135deg, #579bd4, #42bc9c);
}
.fx-dt__card {
  background: #fff;
  border: 0;
  border-radius: 0.625rem;
  box-shadow: 0 0.25rem 0.875rem 0 rgba(38, 43, 67, 0.16);
  overflow: hidden;
}
.fx-dt__tabs + .fx-dt__card {
  border-top-left-radius: 0;
}
.fx-dt__head {
  padding: 1.25rem 1.25rem 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: #3b4056;
}
.fx-dt__tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.25rem 0.75rem;
  color: #6d788d;
  font-size: 0.9375rem;
}
.fx-dt__tools label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-weight: 400;
}
.fx-dt__tools select,
.fx-dt__tools input {
  height: 2.25rem;
  padding: 0.437rem 0.875rem;
  border: 1px solid #d9dee3;
  border-radius: 0.375rem;
  background: #fff;
  color: #3b4056;
  font: inherit;
  font-size: 0.9375rem;
}
.fx-dt__tools input { width: 10.5rem; }
.fx-dt__table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
  color: #3b4056;
}
.fx-dt__table th,
.fx-dt__table td {
  padding: 0.7813rem 1.25rem;
  border: 1px solid #e5e6e8;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  background: #fff;
}
.fx-dt__table th {
  padding-block: 1.426rem;
  background: #f5f5f7;
  color: #3b4056;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  border-bottom-color: #f5f5f7;
}
.fx-dt__table td { font-weight: 400; }
.fx-dt__table tbody tr:hover td { background: rgba(38, 43, 67, 0.04); }
.fx-dt__table tr.is-on td,
.fx-dt__table .bv-grid__row.is-on td,
.fx-dt__table .bv-grid__row.is-hot td {
  background: rgba(102, 108, 255, 0.08);
}
.fx-dt__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem 1.15rem;
  color: #6d788d;
  font-size: 0.9375rem;
}
.fx-dt__pages {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
}
.fx-dt__pages li {
  min-width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  color: #3b4056;
  font-size: 0.9375rem;
}
.fx-dt__pages li.is-on {
  background: #666cff;
  color: #fff;
}
.fx-dt__pages li.is-off { color: #a1acb8; }

@media (max-width: 860px) {
  .fx-elist__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-profile__cols { grid-template-columns: 1fr; }
  .fx-vnav { display: none; }
  .fx-vxy-stage {
    width: 100%;
    height: auto;
    zoom: 1;
    transform: none;
    flex-direction: column;
  }
}